react-zoomable-mermaid 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ 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};
2
+ //# sourceMappingURL=index.esm.js.map
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,2 @@
1
+ "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;
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "react-zoomable-mermaid",
3
+ "version": "1.0.0",
4
+ "description": "A React component for zoomable Mermaid diagrams",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.esm.js",
7
+ "types": "dist/index.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "scripts": {
12
+ "build": "rollup -c",
13
+ "dev": "rollup -c -w",
14
+ "test": "echo \"Error: no test specified\" && exit 1"
15
+ },
16
+ "keywords": [
17
+ "react",
18
+ "mermaid",
19
+ "zoom",
20
+ "diagram",
21
+ "svg-pan-zoom"
22
+ ],
23
+ "author": "",
24
+ "license": "ISC",
25
+ "dependencies": {
26
+ "mermaid": "^11.7.0",
27
+ "svg-pan-zoom": "^3.6.2"
28
+ },
29
+ "peerDependencies": {
30
+ "react": ">=16.8.0",
31
+ "react-dom": ">=16.8.0"
32
+ },
33
+ "devDependencies": {
34
+ "@babel/core": "^7.22.0",
35
+ "@babel/preset-env": "^7.22.0",
36
+ "@babel/preset-react": "^7.22.0",
37
+ "@rollup/plugin-babel": "^6.0.0",
38
+ "@rollup/plugin-commonjs": "^25.0.0",
39
+ "@rollup/plugin-node-resolve": "^15.0.0",
40
+ "@rollup/plugin-terser": "^0.4.0",
41
+ "@types/react": "^18.0.0",
42
+ "rollup": "^4.9.0",
43
+ "rollup-plugin-peer-deps-external": "^2.2.4",
44
+ "typescript": "^5.0.0"
45
+ },
46
+ "type": "module"
47
+ }