react-zoomable-mermaid 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,2 @@
+import e,{forwardRef as r,useRef as t,useState as n,useEffect as o,useImperativeHandle as a}from"react";const i=r(({chart:r,id:i="mermaid-diagram",config:c={},panZoomConfig:l={zoomEnabled:!0,controlIconsEnabled:!0,fit:!0,center:!0,minZoom:.1,maxZoom:10},style:m={},className:s="",loading:d="Loading diagram...",onLoad:u=null,onError:g=null},f)=>{const p=t(null),[y,h]=n(!0),[b,z]=n(null),E=t(null);o(()=>{let e=!0;return(async()=>{try{const t=(await import("mermaid")).default;if(t.initialize({startOnLoad:!1,theme:"default",...c}),!p.current||!e)return;p.current.innerHTML="";const n=`${i}-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,{svg:o}=await t.render(n,r);if(!e)return;const a=o.replace(/[ ]*max-width:[ 0-9\.]*px;/i,"");p.current.innerHTML=a;const m=p.current.querySelector("svg");if(m){m.style.width="100%",m.style.height="100%";const r=(await import("svg-pan-zoom")).default;e&&(E.current=r(m,l))}h(!1),z(null),u&&u()}catch(r){console.error("Error rendering Mermaid diagram:",r),e&&(z(r.message),h(!1),g&&g(r))}})(),()=>{if(e=!1,E.current){try{E.current.destroy()}catch(e){console.warn("Error destroying pan-zoom instance:",e)}E.current=null}}},[r,i,c,l,u,g]);const w=()=>{E.current&&E.current.zoomIn()},x=()=>{E.current&&E.current.zoomOut()},v=()=>{E.current&&E.current.resetZoom()},Z=()=>{E.current&&(E.current.fit(),E.current.center())},N=()=>{E.current&&E.current.center()},I=()=>E.current;return a(f,()=>({zoomIn:w,zoomOut:x,resetZoom:v,fit:Z,center:N,getPanZoomInstance:I})),b?e.createElement("div",{className:`zoomable-mermaid-error ${s}`,style:{padding:"20px",border:"1px solid #ff6b6b",borderRadius:"4px",backgroundColor:"#ffe0e0",color:"#d63031",...m}},e.createElement("strong",null,"Error rendering diagram:")," ",b):e.createElement("div",{className:`zoomable-mermaid-container ${s}`,style:{width:"100%",height:"100%",position:"relative",...m}},y&&e.createElement("div",{className:"zoomable-mermaid-loading",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:1,fontSize:"14px",color:"#666"}},d),e.createElement("div",{ref:p,className:"zoomable-mermaid-diagram",style:{width:"100%",height:"100%",opacity:y?.3:1,transition:"opacity 0.2s ease-in-out"}}))});i.displayName="ZoomableMermaid";export{i as ZoomableMermaid};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/index.js"],"sourcesContent":["import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';\r\n\r\nconst ZoomableMermaid = forwardRef(({ \r\n  chart, \r\n  id = 'mermaid-diagram',\r\n  config = {},\r\n  panZoomConfig = {\r\n    zoomEnabled: true,\r\n    controlIconsEnabled: true,\r\n    fit: true,\r\n    center: true,\r\n    minZoom: 0.1,\r\n    maxZoom: 10\r\n  },\r\n  style = {},\r\n  className = '',\r\n  loading = 'Loading diagram...',\r\n  onLoad = null,\r\n  onError = null\r\n}, ref) => {\r\n  const containerRef = useRef(null);\r\n  const [isLoading, setIsLoading] = useState(true);\r\n  const [error, setError] = useState(null);\r\n  const panZoomInstance = useRef(null);\r\n\r\n  useEffect(() => {\r\n    let isMounted = true;\r\n\r\n    const initializeMermaid = async () => {\r\n      try {\r\n        // Dynamic import for better Next.js compatibility\r\n        const mermaid = await import('mermaid');\r\n        const mermaidAPI = mermaid.default;\r\n\r\n        // Initialize mermaid\r\n        mermaidAPI.initialize({\r\n          startOnLoad: false,\r\n          theme: 'default',\r\n          ...config\r\n        });\r\n\r\n        if (!containerRef.current || !isMounted) return;\r\n\r\n        // Clear previous content\r\n        containerRef.current.innerHTML = '';\r\n\r\n        // Generate unique ID to avoid conflicts\r\n        const diagramId = `${id}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n        // Render the diagram\r\n        const { svg } = await mermaidAPI.render(diagramId, chart);\r\n        \r\n        if (!isMounted) return;\r\n\r\n        // Remove max-width constraint and inject SVG\r\n        const cleanedSvg = svg.replace(/[ ]*max-width:[ 0-9\\.]*px;/i, '');\r\n        containerRef.current.innerHTML = cleanedSvg;\r\n\r\n        // Initialize pan-zoom after SVG is rendered\r\n        const svgElement = containerRef.current.querySelector('svg');\r\n        if (svgElement) {\r\n          // Ensure SVG has proper dimensions\r\n          svgElement.style.width = '100%';\r\n          svgElement.style.height = '100%';\r\n          \r\n          // Dynamically import svg-pan-zoom\r\n          const svgPanZoom = await import('svg-pan-zoom');\r\n          const svgPanZoomLib = svgPanZoom.default;\r\n          \r\n          if (isMounted) {\r\n            panZoomInstance.current = svgPanZoomLib(svgElement, panZoomConfig);\r\n          }\r\n        }\r\n\r\n        setIsLoading(false);\r\n        setError(null);\r\n        \r\n        // Call onLoad callback if provided\r\n        if (onLoad) {\r\n          onLoad();\r\n        }\r\n      } catch (err) {\r\n        console.error('Error rendering Mermaid diagram:', err);\r\n        if (isMounted) {\r\n          setError(err.message);\r\n          setIsLoading(false);\r\n          \r\n          // Call onError callback if provided\r\n          if (onError) {\r\n            onError(err);\r\n          }\r\n        }\r\n      }\r\n    };\r\n\r\n    initializeMermaid();\r\n\r\n    return () => {\r\n      isMounted = false;\r\n      // Cleanup pan-zoom instance\r\n      if (panZoomInstance.current) {\r\n        try {\r\n          panZoomInstance.current.destroy();\r\n        } catch (e) {\r\n          console.warn('Error destroying pan-zoom instance:', e);\r\n        }\r\n        panZoomInstance.current = null;\r\n      }\r\n    };\r\n  }, [chart, id, config, panZoomConfig, onLoad, onError]);\r\n\r\n  // Utility methods that can be called from parent components\r\n  const zoomIn = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.zoomIn();\r\n    }\r\n  };\r\n\r\n  const zoomOut = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.zoomOut();\r\n    }\r\n  };\r\n\r\n  const resetZoom = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.resetZoom();\r\n    }\r\n  };\r\n\r\n  const fit = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.fit();\r\n      panZoomInstance.current.center();\r\n    }\r\n  };\r\n\r\n  const center = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.center();\r\n    }\r\n  };\r\n\r\n  const getPanZoomInstance = () => {\r\n    return panZoomInstance.current;\r\n  };\r\n\r\n  // Expose methods via ref\r\n  useImperativeHandle(ref, () => ({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetZoom,\r\n    fit,\r\n    center,\r\n    getPanZoomInstance\r\n  }));\r\n\r\n  if (error) {\r\n    return (\r\n      <div \r\n        className={`zoomable-mermaid-error ${className}`}\r\n        style={{ \r\n          padding: '20px', \r\n          border: '1px solid #ff6b6b', \r\n          borderRadius: '4px',\r\n          backgroundColor: '#ffe0e0',\r\n          color: '#d63031',\r\n          ...style\r\n        }}\r\n      >\r\n        <strong>Error rendering diagram:</strong> {error}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div \r\n      className={`zoomable-mermaid-container ${className}`}\r\n      style={{ \r\n        width: '100%', \r\n        height: '100%', \r\n        position: 'relative',\r\n        ...style\r\n      }}\r\n    >\r\n      {isLoading && (\r\n        <div \r\n          className=\"zoomable-mermaid-loading\"\r\n          style={{ \r\n            position: 'absolute', \r\n            top: '50%', \r\n            left: '50%', \r\n            transform: 'translate(-50%, -50%)',\r\n            zIndex: 1,\r\n            fontSize: '14px',\r\n            color: '#666'\r\n          }}\r\n        >\r\n          {loading}\r\n        </div>\r\n      )}\r\n      <div \r\n        ref={containerRef}\r\n        className=\"zoomable-mermaid-diagram\"\r\n        style={{ \r\n          width: '100%', \r\n          height: '100%',\r\n          opacity: isLoading ? 0.3 : 1,\r\n          transition: 'opacity 0.2s ease-in-out'\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n});\r\n\r\nZoomableMermaid.displayName = 'ZoomableMermaid';\r\n\r\nexport { ZoomableMermaid };"],"names":["ZoomableMermaid","forwardRef","chart","id","config","panZoomConfig","zoomEnabled","controlIconsEnabled","fit","center","minZoom","maxZoom","style","className","loading","onLoad","onError","ref","containerRef","useRef","isLoading","setIsLoading","useState","error","setError","panZoomInstance","useEffect","isMounted","async","mermaidAPI","import","default","initialize","startOnLoad","theme","current","innerHTML","diagramId","Date","now","Math","random","toString","substr","svg","render","cleanedSvg","replace","svgElement","querySelector","width","height","svgPanZoomLib","err","console","message","initializeMermaid","destroy","e","warn","zoomIn","zoomOut","resetZoom","getPanZoomInstance","useImperativeHandle","React","createElement","padding","border","borderRadius","backgroundColor","color","position","top","left","transform","zIndex","fontSize","opacity","transition","displayName"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");const r=e.forwardRef(({chart:r,id:t="mermaid-diagram",config:n={},panZoomConfig:o={zoomEnabled:!0,controlIconsEnabled:!0,fit:!0,center:!0,minZoom:.1,maxZoom:10},style:a={},className:i="",loading:c="Loading diagram...",onLoad:s=null,onError:l=null},m)=>{const d=e.useRef(null),[u,f]=e.useState(!0),[g,p]=e.useState(null),y=e.useRef(null);e.useEffect(()=>{let e=!0;return(async()=>{try{const a=(await import("mermaid")).default;if(a.initialize({startOnLoad:!1,theme:"default",...n}),!d.current||!e)return;d.current.innerHTML="";const i=`${t}-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,{svg:c}=await a.render(i,r);if(!e)return;const l=c.replace(/[ ]*max-width:[ 0-9\.]*px;/i,"");d.current.innerHTML=l;const m=d.current.querySelector("svg");if(m){m.style.width="100%",m.style.height="100%";const r=(await import("svg-pan-zoom")).default;e&&(y.current=r(m,o))}f(!1),p(null),s&&s()}catch(r){console.error("Error rendering Mermaid diagram:",r),e&&(p(r.message),f(!1),l&&l(r))}})(),()=>{if(e=!1,y.current){try{y.current.destroy()}catch(e){console.warn("Error destroying pan-zoom instance:",e)}y.current=null}}},[r,t,n,o,s,l]);const b=()=>{y.current&&y.current.zoomIn()},h=()=>{y.current&&y.current.zoomOut()},z=()=>{y.current&&y.current.resetZoom()},E=()=>{y.current&&(y.current.fit(),y.current.center())},v=()=>{y.current&&y.current.center()},w=()=>y.current;return e.useImperativeHandle(m,()=>({zoomIn:b,zoomOut:h,resetZoom:z,fit:E,center:v,getPanZoomInstance:w})),g?e.createElement("div",{className:`zoomable-mermaid-error ${i}`,style:{padding:"20px",border:"1px solid #ff6b6b",borderRadius:"4px",backgroundColor:"#ffe0e0",color:"#d63031",...a}},e.createElement("strong",null,"Error rendering diagram:")," ",g):e.createElement("div",{className:`zoomable-mermaid-container ${i}`,style:{width:"100%",height:"100%",position:"relative",...a}},u&&e.createElement("div",{className:"zoomable-mermaid-loading",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:1,fontSize:"14px",color:"#666"}},c),e.createElement("div",{ref:d,className:"zoomable-mermaid-diagram",style:{width:"100%",height:"100%",opacity:u?.3:1,transition:"opacity 0.2s ease-in-out"}}))});r.displayName="ZoomableMermaid",exports.ZoomableMermaid=r;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';\r\n\r\nconst ZoomableMermaid = forwardRef(({ \r\n  chart, \r\n  id = 'mermaid-diagram',\r\n  config = {},\r\n  panZoomConfig = {\r\n    zoomEnabled: true,\r\n    controlIconsEnabled: true,\r\n    fit: true,\r\n    center: true,\r\n    minZoom: 0.1,\r\n    maxZoom: 10\r\n  },\r\n  style = {},\r\n  className = '',\r\n  loading = 'Loading diagram...',\r\n  onLoad = null,\r\n  onError = null\r\n}, ref) => {\r\n  const containerRef = useRef(null);\r\n  const [isLoading, setIsLoading] = useState(true);\r\n  const [error, setError] = useState(null);\r\n  const panZoomInstance = useRef(null);\r\n\r\n  useEffect(() => {\r\n    let isMounted = true;\r\n\r\n    const initializeMermaid = async () => {\r\n      try {\r\n        // Dynamic import for better Next.js compatibility\r\n        const mermaid = await import('mermaid');\r\n        const mermaidAPI = mermaid.default;\r\n\r\n        // Initialize mermaid\r\n        mermaidAPI.initialize({\r\n          startOnLoad: false,\r\n          theme: 'default',\r\n          ...config\r\n        });\r\n\r\n        if (!containerRef.current || !isMounted) return;\r\n\r\n        // Clear previous content\r\n        containerRef.current.innerHTML = '';\r\n\r\n        // Generate unique ID to avoid conflicts\r\n        const diagramId = `${id}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n        // Render the diagram\r\n        const { svg } = await mermaidAPI.render(diagramId, chart);\r\n        \r\n        if (!isMounted) return;\r\n\r\n        // Remove max-width constraint and inject SVG\r\n        const cleanedSvg = svg.replace(/[ ]*max-width:[ 0-9\\.]*px;/i, '');\r\n        containerRef.current.innerHTML = cleanedSvg;\r\n\r\n        // Initialize pan-zoom after SVG is rendered\r\n        const svgElement = containerRef.current.querySelector('svg');\r\n        if (svgElement) {\r\n          // Ensure SVG has proper dimensions\r\n          svgElement.style.width = '100%';\r\n          svgElement.style.height = '100%';\r\n          \r\n          // Dynamically import svg-pan-zoom\r\n          const svgPanZoom = await import('svg-pan-zoom');\r\n          const svgPanZoomLib = svgPanZoom.default;\r\n          \r\n          if (isMounted) {\r\n            panZoomInstance.current = svgPanZoomLib(svgElement, panZoomConfig);\r\n          }\r\n        }\r\n\r\n        setIsLoading(false);\r\n        setError(null);\r\n        \r\n        // Call onLoad callback if provided\r\n        if (onLoad) {\r\n          onLoad();\r\n        }\r\n      } catch (err) {\r\n        console.error('Error rendering Mermaid diagram:', err);\r\n        if (isMounted) {\r\n          setError(err.message);\r\n          setIsLoading(false);\r\n          \r\n          // Call onError callback if provided\r\n          if (onError) {\r\n            onError(err);\r\n          }\r\n        }\r\n      }\r\n    };\r\n\r\n    initializeMermaid();\r\n\r\n    return () => {\r\n      isMounted = false;\r\n      // Cleanup pan-zoom instance\r\n      if (panZoomInstance.current) {\r\n        try {\r\n          panZoomInstance.current.destroy();\r\n        } catch (e) {\r\n          console.warn('Error destroying pan-zoom instance:', e);\r\n        }\r\n        panZoomInstance.current = null;\r\n      }\r\n    };\r\n  }, [chart, id, config, panZoomConfig, onLoad, onError]);\r\n\r\n  // Utility methods that can be called from parent components\r\n  const zoomIn = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.zoomIn();\r\n    }\r\n  };\r\n\r\n  const zoomOut = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.zoomOut();\r\n    }\r\n  };\r\n\r\n  const resetZoom = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.resetZoom();\r\n    }\r\n  };\r\n\r\n  const fit = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.fit();\r\n      panZoomInstance.current.center();\r\n    }\r\n  };\r\n\r\n  const center = () => {\r\n    if (panZoomInstance.current) {\r\n      panZoomInstance.current.center();\r\n    }\r\n  };\r\n\r\n  const getPanZoomInstance = () => {\r\n    return panZoomInstance.current;\r\n  };\r\n\r\n  // Expose methods via ref\r\n  useImperativeHandle(ref, () => ({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetZoom,\r\n    fit,\r\n    center,\r\n    getPanZoomInstance\r\n  }));\r\n\r\n  if (error) {\r\n    return (\r\n      <div \r\n        className={`zoomable-mermaid-error ${className}`}\r\n        style={{ \r\n          padding: '20px', \r\n          border: '1px solid #ff6b6b', \r\n          borderRadius: '4px',\r\n          backgroundColor: '#ffe0e0',\r\n          color: '#d63031',\r\n          ...style\r\n        }}\r\n      >\r\n        <strong>Error rendering diagram:</strong> {error}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div \r\n      className={`zoomable-mermaid-container ${className}`}\r\n      style={{ \r\n        width: '100%', \r\n        height: '100%', \r\n        position: 'relative',\r\n        ...style\r\n      }}\r\n    >\r\n      {isLoading && (\r\n        <div \r\n          className=\"zoomable-mermaid-loading\"\r\n          style={{ \r\n            position: 'absolute', \r\n            top: '50%', \r\n            left: '50%', \r\n            transform: 'translate(-50%, -50%)',\r\n            zIndex: 1,\r\n            fontSize: '14px',\r\n            color: '#666'\r\n          }}\r\n        >\r\n          {loading}\r\n        </div>\r\n      )}\r\n      <div \r\n        ref={containerRef}\r\n        className=\"zoomable-mermaid-diagram\"\r\n        style={{ \r\n          width: '100%', \r\n          height: '100%',\r\n          opacity: isLoading ? 0.3 : 1,\r\n          transition: 'opacity 0.2s ease-in-out'\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n});\r\n\r\nZoomableMermaid.displayName = 'ZoomableMermaid';\r\n\r\nexport { ZoomableMermaid };"],"names":["ZoomableMermaid","forwardRef","chart","id","config","panZoomConfig","zoomEnabled","controlIconsEnabled","fit","center","minZoom","maxZoom","style","className","loading","onLoad","onError","ref","containerRef","useRef","isLoading","setIsLoading","useState","error","setError","panZoomInstance","useEffect","isMounted","async","mermaidAPI","import","default","initialize","startOnLoad","theme","current","innerHTML","diagramId","Date","now","Math","random","toString","substr","svg","render","cleanedSvg","replace","svgElement","querySelector","width","height","svgPanZoomLib","err","console","message","initializeMermaid","destroy","e","warn","zoomIn","zoomOut","resetZoom","getPanZoomInstance","useImperativeHandle","React","createElement","padding","border","borderRadius","backgroundColor","color","position","top","left","transform","zIndex","fontSize","opacity","transition","displayName"],"mappings":"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"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "react-zoomable-mermaid",
+  "version": "1.0.0",
+  "description": "A React component for zoomable Mermaid diagrams",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "mermaid",
+    "zoom",
+    "diagram",
+    "svg-pan-zoom"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "mermaid": "^11.7.0",
+    "svg-pan-zoom": "^3.6.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@types/react": "^18.0.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.0.0"
+  },
+  "type": "module"
+}