feat: react-zoom-pan-pinch

package.json

@@ -272,14 +272,15 @@
     "react-scroll-to-bottom": "^4.2.0",
     "react-sticky": "^6.0.3",
     "react-sticky-ts": "^1.0.7",
+    "react-zoom-pan-pinch": "^3.1.0",
     "remark-gfm": "^3.0.1",
     "remove-markdown": "^0.5.0",
     "sanitize.css": "^13.0.0",
     "screenfull": "^6.0.2",
     "sse": "github:mpetazzoni/sse.js",
     "styled-components": "^6.0.7",
     "three": "^0.156.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.2.0",
     "use-deep-compare-effect": "^1.8.1",
     "use-react-router-breadcrumbs": "^4.0.1",
     "user-agents": "^1.0.1444",

src/components/stateful/mermaidHooks/index.jsx

@@ -12,7 +12,11 @@ const MermaidHooks = ({ chart }) => {
   useEffect(() => {
     mermaid.contentLoaded()
   }, [])
-  return <div className="mermaid">{chart}</div>
+  return (
+    <div className="mermaid" style={{ minHeight: 0, background: '#fff' }}>
+      {chart}
+    </div>
+  )
 }
 
 export default MermaidHooks

src/pages/mermaid/index.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
+import { Space, Button } from 'antd'
 import MermaidHooks from '@stateful/mermaidHooks'
 import FixTabPanel from '@stateless/FixTabPanel'
 import MarkmapHooks from '@stateful/markmap'
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
 
 const gitChart = `gitGraph
   commit
@@ -48,9 +50,22 @@ const Mermaid = () => (
     <FixTabPanel>
       <h2>Meraid: http://https://mermaid.js.org/</h2>
 
-      <h3>演示1:Git Diagram </h3>
-      <MermaidHooks chart={gitChart} />
+      <h3 style={{ marginBottom: 30 }}>演示1:Git Diagram </h3>
 
+      <TransformWrapper centerOnInit centerZoomedOut>
+        {({ zoomIn, zoomOut, resetTransform }) => (
+          <React.Fragment>
+            <Space>
+              <Button onClick={() => zoomIn()}>放大</Button>
+              <Button onClick={() => zoomOut()}>缩小</Button>
+              <Button onClick={() => resetTransform()}>还原</Button>
+            </Space>
+            <TransformComponent>
+              <MermaidHooks chart={gitChart} />
+            </TransformComponent>
+          </React.Fragment>
+        )}
+      </TransformWrapper>
       <h3> 演示2: Markmap</h3>
       <section>
         <MarkmapHooks markmap={initMarkup} />