@san-siva/blogkit 1.1.28 → 1.1.29

package/dist/cjs/dynamicComponents/MermaidDynamic.js

@@ -25,11 +25,30 @@ mermaid.initialize({
         diagramMarginX: 0,
     },
 });
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 4;
+const ZOOM_STEP = 0.15;
 const Mermaid = ({ code = '', id = '', hasMarginUp = false, hasMarginDown = false, }) => {
     const [enabled, setEnabled] = react.useState(false);
     const [error, setError] = react.useState(null);
+    const [transform, setTransform] = react.useState({ scale: 1, x: 0, y: 0 });
+    const [isDragging, setIsDragging] = react.useState(false);
     const mermaidReference = react.useRef(null);
+    const viewportRef = react.useRef(null);
     const renderCount = react.useRef(0);
+    const transformRef = react.useRef({ scale: 1, x: 0, y: 0 });
+    const isDraggingRef = react.useRef(false);
+    const dragStart = react.useRef({
+        mouseX: 0,
+        mouseY: 0,
+        transformX: 0,
+        transformY: 0,
+    });
+    const applyTransform = react.useCallback((updater) => {
+        const next = updater(transformRef.current);
+        transformRef.current = next;
+        setTransform(next);
+    }, []);
     const initializeMermaid = react.useCallback(async () => {
         if (!mermaidReference.current || !code)
             return;
@@ -52,12 +71,81 @@ const Mermaid = ({ code = '', id = '', hasMarginUp = false, hasMarginDown = fals
         if (!code)
             return;
         setError(null);
+        applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
         const timer = setTimeout(initializeMermaid, 100);
         return () => clearTimeout(timer);
-    }, [code, initializeMermaid]);
+    }, [code, initializeMermaid, applyTransform]);
+    const handleWheel = react.useCallback((e) => {
+        e.preventDefault();
+        const factor = e.deltaY < 0 ? 1 + ZOOM_STEP : 1 - ZOOM_STEP;
+        applyTransform(prev => {
+            const newScale = Math.min(Math.max(prev.scale * factor, MIN_SCALE), MAX_SCALE);
+            if (!viewportRef.current)
+                return { ...prev, scale: newScale };
+            const rect = viewportRef.current.getBoundingClientRect();
+            const cursorX = e.clientX - rect.left;
+            const cursorY = e.clientY - rect.top;
+            const ratio = newScale / prev.scale;
+            return {
+                scale: newScale,
+                x: cursorX - (cursorX - prev.x) * ratio,
+                y: cursorY - (cursorY - prev.y) * ratio,
+            };
+        });
+    }, [applyTransform]);
+    react.useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport || !enabled)
+            return;
+        viewport.addEventListener('wheel', handleWheel, { passive: false });
+        return () => viewport.removeEventListener('wheel', handleWheel);
+    }, [handleWheel, enabled]);
+    const handleMouseDown = react.useCallback((e) => {
+        e.preventDefault();
+        isDraggingRef.current = true;
+        setIsDragging(true);
+        dragStart.current = {
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+            transformX: transformRef.current.x,
+            transformY: transformRef.current.y,
+        };
+    }, []);
+    const handleMouseMove = react.useCallback((e) => {
+        if (!isDraggingRef.current)
+            return;
+        applyTransform(prev => ({
+            ...prev,
+            x: dragStart.current.transformX + (e.clientX - dragStart.current.mouseX),
+            y: dragStart.current.transformY + (e.clientY - dragStart.current.mouseY),
+        }));
+    }, [applyTransform]);
+    const handleMouseUp = react.useCallback(() => {
+        isDraggingRef.current = false;
+        setIsDragging(false);
+    }, []);
+    const zoomIn = react.useCallback(() => {
+        applyTransform(prev => ({
+            ...prev,
+            scale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),
+        }));
+    }, [applyTransform]);
+    const zoomOut = react.useCallback(() => {
+        applyTransform(prev => ({
+            ...prev,
+            scale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),
+        }));
+    }, [applyTransform]);
+    const resetView = react.useCallback(() => {
+        applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
+    }, [applyTransform]);
     return (jsxRuntime.jsxs("div", { className: `${Mermaid_module.default.mermaid}
 				${hasMarginUp ? Mermaid_module.default['margin-top--1'] : ''}
-				${hasMarginDown ? Mermaid_module.default['margin-bottom--2'] : ''}`, children: [error ? (jsxRuntime.jsx(CalloutStatic.default, { type: "error", children: jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("b", { children: "Diagram error:" }), " ", error] }) })) : !enabled ? (jsxRuntime.jsx(CalloutStatic.default, { type: "info", children: jsxRuntime.jsx("p", { children: "Rendering diagram..." }) })) : null, jsxRuntime.jsx("div", { ref: mermaidReference, id: id, style: enabled ? undefined : { display: 'none' } })] }));
+				${hasMarginDown ? Mermaid_module.default['margin-bottom--2'] : ''}`, children: [error ? (jsxRuntime.jsx(CalloutStatic.default, { type: "error", children: jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("b", { children: "Diagram error:" }), " ", error] }) })) : !enabled ? (jsxRuntime.jsx(CalloutStatic.default, { type: "info", children: jsxRuntime.jsx("p", { children: "Rendering diagram..." }) })) : (jsxRuntime.jsxs("div", { className: Mermaid_module.default['mermaid__controls'], children: [jsxRuntime.jsx("button", { className: Mermaid_module.default['mermaid__controls__btn'], onClick: zoomIn, children: "+" }), jsxRuntime.jsx("button", { className: Mermaid_module.default['mermaid__controls__btn'], onClick: zoomOut, children: "\u2212" }), jsxRuntime.jsx("button", { className: Mermaid_module.default['mermaid__controls__btn'], onClick: resetView, children: "Reset" })] })), jsxRuntime.jsx("div", { ref: viewportRef, className: `${Mermaid_module.default['mermaid__viewport']} ${isDragging ? Mermaid_module.default['mermaid__viewport--dragging'] : ''}`, style: enabled ? undefined : { display: 'none' }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: jsxRuntime.jsx("div", { style: {
+                        transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+                        transformOrigin: '0 0',
+                        transition: isDragging ? 'none' : 'transform 0.1s ease',
+                    }, children: jsxRuntime.jsx("div", { ref: mermaidReference, id: id }) }) })] }));
 };
 
 exports.default = Mermaid;

package/dist/cjs/dynamicComponents/MermaidDynamic.js.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDynamic.js","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport mermaid from 'mermaid';\n\nimport CalloutStatic from '../staticComponents/CalloutStatic';\nimport styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nmermaid.initialize({\n\tstartOnLoad: false,\n\ttheme: 'default',\n\ttimeline: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n\tflowchart: {\n\t\tuseMaxWidth: true,\n\t\tdiagramPadding: 0,\n\t},\n\tsequence: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n});\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\tconst [enabled, setEnabled] = useState(false);\n\tconst [error, setError] = useState<string | null>(null);\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\tconst renderCount = useRef(0);\n\n\tconst initializeMermaid = useCallback(async () => {\n\t\tif (!mermaidReference.current || !code) return;\n\t\tconst renderId = `mermaid-diagram-${id}-${++renderCount.current}`;\n\t\tdocument.getElementById(renderId)?.remove();\n\t\ttry {\n\t\t\tconst { svg, bindFunctions } = await mermaid.render(renderId, code);\n\t\t\tif (!mermaidReference.current || !svg) return;\n\t\t\tmermaidReference.current.innerHTML = svg;\n\t\t\tbindFunctions?.(mermaidReference.current);\n\t\t\tsetEnabled(true);\n\t\t} catch (err) {\n\t\t\tconst message =\n\t\t\t\terr instanceof Error ? err.message : 'Failed to render diagram';\n\t\t\tsetError(message);\n\t\t}\n\t}, [code, id]);\n\n\tuseEffect(() => {\n\t\tif (!code) return;\n\t\tsetError(null);\n\t\tconst timer = setTimeout(initializeMermaid, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, initializeMermaid]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mermaid}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t>\n\t\t\t{error ? (\n\t\t\t\t<CalloutStatic type=\"error\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<b>Diagram error:</b> {error}\n\t\t\t\t\t</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : !enabled ? (\n\t\t\t\t<CalloutStatic type=\"info\">\n\t\t\t\t\t<p>Rendering diagram...</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : null}\n\t\t\t<div\n\t\t\t\tref={mermaidReference}\n\t\t\t\tid={id}\n\t\t\t\tstyle={enabled ? undefined : { display: 'none' }}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","styles","_jsx","CalloutStatic"],"mappings":"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"}
+{"version":3,"file":"MermaidDynamic.js","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport mermaid from 'mermaid';\n\nimport CalloutStatic from '../staticComponents/CalloutStatic';\nimport styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nmermaid.initialize({\n\tstartOnLoad: false,\n\ttheme: 'default',\n\ttimeline: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n\tflowchart: {\n\t\tuseMaxWidth: true,\n\t\tdiagramPadding: 0,\n\t},\n\tsequence: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n});\n\nconst MIN_SCALE = 0.5;\nconst MAX_SCALE = 4;\nconst ZOOM_STEP = 0.15;\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\tconst [enabled, setEnabled] = useState(false);\n\tconst [error, setError] = useState<string | null>(null);\n\tconst [transform, setTransform] = useState({ scale: 1, x: 0, y: 0 });\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\tconst viewportRef = useRef<HTMLDivElement>(null);\n\tconst renderCount = useRef(0);\n\tconst transformRef = useRef({ scale: 1, x: 0, y: 0 });\n\tconst isDraggingRef = useRef(false);\n\tconst dragStart = useRef({\n\t\tmouseX: 0,\n\t\tmouseY: 0,\n\t\ttransformX: 0,\n\t\ttransformY: 0,\n\t});\n\n\tconst applyTransform = useCallback(\n\t\t(\n\t\t\tupdater: (\n\t\t\t\tprev: typeof transformRef.current\n\t\t\t) => typeof transformRef.current\n\t\t) => {\n\t\t\tconst next = updater(transformRef.current);\n\t\t\ttransformRef.current = next;\n\t\t\tsetTransform(next);\n\t\t},\n\t\t[]\n\t);\n\n\tconst initializeMermaid = useCallback(async () => {\n\t\tif (!mermaidReference.current || !code) return;\n\t\tconst renderId = `mermaid-diagram-${id}-${++renderCount.current}`;\n\t\tdocument.getElementById(renderId)?.remove();\n\t\ttry {\n\t\t\tconst { svg, bindFunctions } = await mermaid.render(renderId, code);\n\t\t\tif (!mermaidReference.current || !svg) return;\n\t\t\tmermaidReference.current.innerHTML = svg;\n\t\t\tbindFunctions?.(mermaidReference.current);\n\t\t\tsetEnabled(true);\n\t\t} catch (err) {\n\t\t\tconst message =\n\t\t\t\terr instanceof Error ? err.message : 'Failed to render diagram';\n\t\t\tsetError(message);\n\t\t}\n\t}, [code, id]);\n\n\tuseEffect(() => {\n\t\tif (!code) return;\n\t\tsetError(null);\n\t\tapplyTransform(() => ({ scale: 1, x: 0, y: 0 }));\n\t\tconst timer = setTimeout(initializeMermaid, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, initializeMermaid, applyTransform]);\n\n\tconst handleWheel = useCallback(\n\t\t(e: WheelEvent) => {\n\t\t\te.preventDefault();\n\t\t\tconst factor = e.deltaY < 0 ? 1 + ZOOM_STEP : 1 - ZOOM_STEP;\n\t\t\tapplyTransform(prev => {\n\t\t\t\tconst newScale = Math.min(\n\t\t\t\t\tMath.max(prev.scale * factor, MIN_SCALE),\n\t\t\t\t\tMAX_SCALE\n\t\t\t\t);\n\t\t\t\tif (!viewportRef.current) return { ...prev, scale: newScale };\n\t\t\t\tconst rect = viewportRef.current.getBoundingClientRect();\n\t\t\t\tconst cursorX = e.clientX - rect.left;\n\t\t\t\tconst cursorY = e.clientY - rect.top;\n\t\t\t\tconst ratio = newScale / prev.scale;\n\t\t\t\treturn {\n\t\t\t\t\tscale: newScale,\n\t\t\t\t\tx: cursorX - (cursorX - prev.x) * ratio,\n\t\t\t\t\ty: cursorY - (cursorY - prev.y) * ratio,\n\t\t\t\t};\n\t\t\t});\n\t\t},\n\t\t[applyTransform]\n\t);\n\n\tuseEffect(() => {\n\t\tconst viewport = viewportRef.current;\n\t\tif (!viewport || !enabled) return;\n\t\tviewport.addEventListener('wheel', handleWheel, { passive: false });\n\t\treturn () => viewport.removeEventListener('wheel', handleWheel);\n\t}, [handleWheel, enabled]);\n\n\tconst handleMouseDown = useCallback((e: React.MouseEvent) => {\n\t\te.preventDefault();\n\t\tisDraggingRef.current = true;\n\t\tsetIsDragging(true);\n\t\tdragStart.current = {\n\t\t\tmouseX: e.clientX,\n\t\t\tmouseY: e.clientY,\n\t\t\ttransformX: transformRef.current.x,\n\t\t\ttransformY: transformRef.current.y,\n\t\t};\n\t}, []);\n\n\tconst handleMouseMove = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (!isDraggingRef.current) return;\n\t\t\tapplyTransform(prev => ({\n\t\t\t\t...prev,\n\t\t\t\tx:\n\t\t\t\t\tdragStart.current.transformX + (e.clientX - dragStart.current.mouseX),\n\t\t\t\ty:\n\t\t\t\t\tdragStart.current.transformY + (e.clientY - dragStart.current.mouseY),\n\t\t\t}));\n\t\t},\n\t\t[applyTransform]\n\t);\n\n\tconst handleMouseUp = useCallback(() => {\n\t\tisDraggingRef.current = false;\n\t\tsetIsDragging(false);\n\t}, []);\n\n\tconst zoomIn = useCallback(() => {\n\t\tapplyTransform(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),\n\t\t}));\n\t}, [applyTransform]);\n\n\tconst zoomOut = useCallback(() => {\n\t\tapplyTransform(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),\n\t\t}));\n\t}, [applyTransform]);\n\n\tconst resetView = useCallback(() => {\n\t\tapplyTransform(() => ({ scale: 1, x: 0, y: 0 }));\n\t}, [applyTransform]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mermaid}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t>\n\t\t\t{error ? (\n\t\t\t\t<CalloutStatic type=\"error\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<b>Diagram error:</b> {error}\n\t\t\t\t\t</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : !enabled ? (\n\t\t\t\t<CalloutStatic type=\"info\">\n\t\t\t\t\t<p>Rendering diagram...</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : (\n\t\t\t\t<div className={styles['mermaid__controls']}>\n\t\t\t\t\t<button className={styles['mermaid__controls__btn']} onClick={zoomIn}>\n\t\t\t\t\t\t+\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclassName={styles['mermaid__controls__btn']}\n\t\t\t\t\t\tonClick={zoomOut}\n\t\t\t\t\t>\n\t\t\t\t\t\t−\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclassName={styles['mermaid__controls__btn']}\n\t\t\t\t\t\tonClick={resetView}\n\t\t\t\t\t>\n\t\t\t\t\t\tReset\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tref={viewportRef}\n\t\t\t\tclassName={`${styles['mermaid__viewport']} ${\n\t\t\t\t\tisDragging ? styles['mermaid__viewport--dragging'] : ''\n\t\t\t\t}`}\n\t\t\t\tstyle={enabled ? undefined : { display: 'none' }}\n\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\tonMouseMove={handleMouseMove}\n\t\t\t\tonMouseUp={handleMouseUp}\n\t\t\t\tonMouseLeave={handleMouseUp}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttransform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,\n\t\t\t\t\t\ttransformOrigin: '0 0',\n\t\t\t\t\t\ttransition: isDragging ? 'none' : 'transform 0.1s ease',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div ref={mermaidReference} id={id} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","styles","_jsx","CalloutStatic"],"mappings":"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"}