@san-siva/blogkit 1.1.34 → 1.1.36
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.
- package/dist/assets/collapse.svg +16 -0
- package/dist/assets/expand.svg +4 -0
- package/dist/assets/info.svg +1 -1
- package/dist/assets/reset.svg +4 -0
- package/dist/assets/tick.svg +1 -1
- package/dist/assets/zoom-in.svg +17 -0
- package/dist/assets/zoom-out.svg +17 -0
- package/dist/cjs/components/MermaidControls.js +17 -0
- package/dist/cjs/components/MermaidControls.js.map +1 -0
- package/dist/cjs/components/MermaidViewport.js +14 -0
- package/dist/cjs/components/MermaidViewport.js.map +1 -0
- package/dist/cjs/dynamicComponents/MermaidDynamic.js +52 -75
- package/dist/cjs/dynamicComponents/MermaidDynamic.js.map +1 -1
- package/dist/cjs/hooks/usePanZoom.js +77 -0
- package/dist/cjs/hooks/usePanZoom.js.map +1 -0
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.css.map +1 -1
- package/dist/cjs/styles/Mermaid.module.scss.js +1 -1
- package/dist/esm/components/MermaidControls.js +13 -0
- package/dist/esm/components/MermaidControls.js.map +1 -0
- package/dist/esm/components/MermaidViewport.js +10 -0
- package/dist/esm/components/MermaidViewport.js.map +1 -0
- package/dist/esm/dynamicComponents/MermaidDynamic.js +52 -75
- package/dist/esm/dynamicComponents/MermaidDynamic.js.map +1 -1
- package/dist/esm/hooks/usePanZoom.js +75 -0
- package/dist/esm/hooks/usePanZoom.js.map +1 -0
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.css.map +1 -1
- package/dist/esm/styles/Mermaid.module.scss.js +1 -1
- package/dist/types/components/MermaidControls.d.ts +11 -0
- package/dist/types/components/MermaidControls.d.ts.map +1 -0
- package/dist/types/components/MermaidViewport.d.ts +12 -0
- package/dist/types/components/MermaidViewport.d.ts.map +1 -0
- package/dist/types/dynamicComponents/MermaidDynamic.d.ts.map +1 -1
- package/dist/types/hooks/usePanZoom.d.ts +23 -0
- package/dist/types/hooks/usePanZoom.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/assets/collapse.svg +16 -0
- package/src/assets/expand.svg +4 -0
- package/src/assets/info.svg +1 -1
- package/src/assets/reset.svg +4 -0
- package/src/assets/tick.svg +1 -1
- package/src/assets/zoom-in.svg +17 -0
- package/src/assets/zoom-out.svg +17 -0
- package/src/components/MermaidControls.tsx +54 -0
- package/src/components/MermaidViewport.tsx +40 -0
- package/src/dynamicComponents/MermaidDynamic.tsx +101 -131
- package/src/hooks/usePanZoom.ts +105 -0
- package/src/styles/Mermaid.module.scss +72 -4
- package/src/styles/Mermaid.module.scss.d.ts +10 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"margin-top--1":"Mermaid-module_margin-top--1__W10B7","margin-bottom--2":"Mermaid-module_margin-bottom--2__w3Zct","mermaid":"Mermaid-module_mermaid__02iRo","mermaid__controls":"Mermaid-module_mermaid__controls__0YNFR","mermaid__controls__btn":"Mermaid-module_mermaid__controls__btn__w04sa","mermaid__viewport":"Mermaid-module_mermaid__viewport__KVL-A","mermaid__viewport--dragging":"Mermaid-module_mermaid__viewport--dragging__WjBzf"};
|
|
5
|
+
var styles = {"margin-top--1":"Mermaid-module_margin-top--1__W10B7","margin-bottom--2":"Mermaid-module_margin-bottom--2__w3Zct","mermaid":"Mermaid-module_mermaid__02iRo","mermaid__controls":"Mermaid-module_mermaid__controls__0YNFR","mermaid__controls__btn":"Mermaid-module_mermaid__controls__btn__w04sa","mermaid__controls__btn--zoom-in":"Mermaid-module_mermaid__controls__btn--zoom-in__KX5QE","mermaid__controls__btn--zoom-out":"Mermaid-module_mermaid__controls__btn--zoom-out__Zffvt","mermaid__controls__btn--reset":"Mermaid-module_mermaid__controls__btn--reset__njRg-","mermaid__controls__btn--expand":"Mermaid-module_mermaid__controls__btn--expand__ZriXV","mermaid__controls__btn--collapse":"Mermaid-module_mermaid__controls__btn--collapse__3z9Fo","mermaid__viewport":"Mermaid-module_mermaid__viewport__KVL-A","mermaid__viewport--dragging":"Mermaid-module_mermaid__viewport--dragging__WjBzf","mermaid__modal":"Mermaid-module_mermaid__modal__wkcDB","mermaid__modal__content":"Mermaid-module_mermaid__modal__content__LTlQS","mermaid__modal__controls":"Mermaid-module_mermaid__modal__controls__S3kxt","mermaid__modal__viewport":"Mermaid-module_mermaid__modal__viewport__wxddc","mermaid__modal__viewport--dragging":"Mermaid-module_mermaid__modal__viewport--dragging__fFm72"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=Mermaid.module.scss.js.map
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import styles from '../styles/Mermaid.module.scss.js';
|
|
3
|
+
|
|
4
|
+
const MermaidControls = ({ className, isExpanded, onZoomIn, onZoomOut, onReset, onToggleExpand, }) => {
|
|
5
|
+
const toggleLabel = isExpanded ? 'Close fullscreen' : 'Expand to fullscreen';
|
|
6
|
+
const toggleModifier = isExpanded
|
|
7
|
+
? styles['mermaid__controls__btn--collapse']
|
|
8
|
+
: styles['mermaid__controls__btn--expand'];
|
|
9
|
+
return (jsxs("div", { className: className, children: [jsx("button", { className: `${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-in']}`, onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in" }), jsx("button", { className: `${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-out']}`, onClick: onZoomOut, "aria-label": "Zoom out", title: "Zoom out" }), jsx("button", { className: `${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--reset']}`, onClick: onReset, "aria-label": "Reset view", title: "Reset view" }), jsx("button", { className: `${styles['mermaid__controls__btn']} ${toggleModifier}`, onClick: onToggleExpand, "aria-label": toggleLabel, title: toggleLabel })] }));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { MermaidControls as default };
|
|
13
|
+
//# sourceMappingURL=MermaidControls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MermaidControls.js","sources":["../../../src/components/MermaidControls.tsx"],"sourcesContent":["import styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidControlsProps {\n\tclassName: string;\n\tisExpanded: boolean;\n\tonZoomIn: () => void;\n\tonZoomOut: () => void;\n\tonReset: () => void;\n\tonToggleExpand: () => void;\n}\n\nconst MermaidControls = ({\n\tclassName,\n\tisExpanded,\n\tonZoomIn,\n\tonZoomOut,\n\tonReset,\n\tonToggleExpand,\n}: MermaidControlsProps) => {\n\tconst toggleLabel = isExpanded ? 'Close fullscreen' : 'Expand to fullscreen';\n\tconst toggleModifier = isExpanded\n\t\t? styles['mermaid__controls__btn--collapse']\n\t\t: styles['mermaid__controls__btn--expand'];\n\treturn (\n\t\t<div className={className}>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-in']}`}\n\t\t\t\tonClick={onZoomIn}\n\t\t\t\taria-label=\"Zoom in\"\n\t\t\t\ttitle=\"Zoom in\"\n\t\t\t/>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-out']}`}\n\t\t\t\tonClick={onZoomOut}\n\t\t\t\taria-label=\"Zoom out\"\n\t\t\t\ttitle=\"Zoom out\"\n\t\t\t/>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--reset']}`}\n\t\t\t\tonClick={onReset}\n\t\t\t\taria-label=\"Reset view\"\n\t\t\t\ttitle=\"Reset view\"\n\t\t\t/>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${toggleModifier}`}\n\t\t\t\tonClick={onToggleExpand}\n\t\t\t\taria-label={toggleLabel}\n\t\t\t\ttitle={toggleLabel}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default MermaidControls;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAWA,MAAM,eAAe,GAAG,CAAC,EACxB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,cAAc,GACQ,KAAI;IAC1B,MAAM,WAAW,GAAG,UAAU,GAAG,kBAAkB,GAAG,sBAAsB;IAC5E,MAAM,cAAc,GAAG;AACtB,UAAE,MAAM,CAAC,kCAAkC;AAC3C,UAAE,MAAM,CAAC,gCAAgC,CAAC;IAC3C,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,aACxBC,GAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,wBAAwB,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,iCAAiC,CAAC,EAAE,EAC7F,OAAO,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EACpB,KAAK,EAAC,SAAS,EAAA,CACd,EACFA,GAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,wBAAwB,CAAC,IAAI,MAAM,CAAC,kCAAkC,CAAC,CAAA,CAAE,EAC9F,OAAO,EAAE,SAAS,EAAA,YAAA,EACP,UAAU,EACrB,KAAK,EAAC,UAAU,EAAA,CACf,EACFA,GAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,+BAA+B,CAAC,CAAA,CAAE,EAC3F,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,YAAY,EACvB,KAAK,EAAC,YAAY,GACjB,EACFA,GAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,wBAAwB,CAAC,CAAA,CAAA,EAAI,cAAc,CAAA,CAAE,EAClE,OAAO,EAAE,cAAc,EAAA,YAAA,EACX,WAAW,EACvB,KAAK,EAAE,WAAW,EAAA,CACjB,CAAA,EAAA,CACG;AAER;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
const MermaidViewport = ({ className, draggingClassName, pan, contentRef, contentId, hidden, }) => (jsx("div", { className: `${className} ${pan.isDragging ? draggingClassName : ''}`, style: hidden ? { display: 'none' } : undefined, onMouseDown: pan.onMouseDown, onMouseMove: pan.onMouseMove, onMouseUp: pan.onMouseUp, onMouseLeave: pan.onMouseUp, children: jsx("div", { style: {
|
|
4
|
+
transform: `translate(${pan.transform.x}px, ${pan.transform.y}px) scale(${pan.transform.scale})`,
|
|
5
|
+
transformOrigin: '0 0',
|
|
6
|
+
transition: pan.isDragging ? 'none' : 'transform 0.1s ease',
|
|
7
|
+
}, children: jsx("div", { ref: contentRef, id: contentId }) }) }));
|
|
8
|
+
|
|
9
|
+
export { MermaidViewport as default };
|
|
10
|
+
//# sourceMappingURL=MermaidViewport.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MermaidViewport.js","sources":["../../../src/components/MermaidViewport.tsx"],"sourcesContent":["import type { PanZoom } from '../hooks/usePanZoom';\n\ninterface MermaidViewportProps {\n\tclassName: string;\n\tdraggingClassName: string;\n\tpan: PanZoom;\n\tcontentRef: React.RefObject<HTMLDivElement>;\n\tcontentId?: string;\n\thidden?: boolean;\n}\n\nconst MermaidViewport = ({\n\tclassName,\n\tdraggingClassName,\n\tpan,\n\tcontentRef,\n\tcontentId,\n\thidden,\n}: MermaidViewportProps) => (\n\t<div\n\t\tclassName={`${className} ${pan.isDragging ? draggingClassName : ''}`}\n\t\tstyle={hidden ? { display: 'none' } : undefined}\n\t\tonMouseDown={pan.onMouseDown}\n\t\tonMouseMove={pan.onMouseMove}\n\t\tonMouseUp={pan.onMouseUp}\n\t\tonMouseLeave={pan.onMouseUp}\n\t>\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\ttransform: `translate(${pan.transform.x}px, ${pan.transform.y}px) scale(${pan.transform.scale})`,\n\t\t\t\ttransformOrigin: '0 0',\n\t\t\t\ttransition: pan.isDragging ? 'none' : 'transform 0.1s ease',\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={contentRef} id={contentId} />\n\t\t</div>\n\t</div>\n);\n\nexport default MermaidViewport;\n"],"names":["_jsx"],"mappings":";;AAWA,MAAM,eAAe,GAAG,CAAC,EACxB,SAAS,EACT,iBAAiB,EACjB,GAAG,EACH,UAAU,EACV,SAAS,EACT,MAAM,GACgB,MACtBA,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,EAAE,EAAE,EACpE,KAAK,EAAE,MAAM,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAC/C,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,YAAY,EAAE,GAAG,CAAC,SAAS,EAAA,QAAA,EAE3BA,GAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE;AACN,YAAA,SAAS,EAAE,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,IAAA,EAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA,CAAG;AAChG,YAAA,eAAe,EAAE,KAAK;YACtB,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,qBAAqB;AAC3D,SAAA,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAA,CAAI,EAAA,CAClC,EAAA,CACD;;;;"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
4
5
|
import mermaid from 'mermaid';
|
|
6
|
+
import MermaidControls from '../components/MermaidControls.js';
|
|
7
|
+
import MermaidViewport from '../components/MermaidViewport.js';
|
|
8
|
+
import { usePanZoom } from '../hooks/usePanZoom.js';
|
|
5
9
|
import Callout from '../staticComponents/CalloutStatic.js';
|
|
6
10
|
import styles from '../styles/Mermaid.module.scss.js';
|
|
7
11
|
|
|
@@ -21,102 +25,75 @@ mermaid.initialize({
|
|
|
21
25
|
diagramMarginX: 0,
|
|
22
26
|
},
|
|
23
27
|
});
|
|
24
|
-
const MIN_SCALE = 0.5;
|
|
25
|
-
const MAX_SCALE = 4;
|
|
26
|
-
const ZOOM_STEP = 0.15;
|
|
27
28
|
const Mermaid = ({ code = '', id = '', hasMarginUp = false, hasMarginDown = false, }) => {
|
|
28
29
|
const [enabled, setEnabled] = useState(false);
|
|
29
30
|
const [error, setError] = useState(null);
|
|
30
|
-
const [
|
|
31
|
-
const [isDragging, setIsDragging] = useState(false);
|
|
31
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
32
32
|
const mermaidReference = useRef(null);
|
|
33
|
-
const
|
|
33
|
+
const modalMermaidReference = useRef(null);
|
|
34
34
|
const renderCount = useRef(0);
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
transformY: 0,
|
|
42
|
-
});
|
|
43
|
-
const applyTransform = useCallback((updater) => {
|
|
44
|
-
const next = updater(transformRef.current);
|
|
45
|
-
transformRef.current = next;
|
|
46
|
-
setTransform(next);
|
|
47
|
-
}, []);
|
|
48
|
-
const initializeMermaid = useCallback(async () => {
|
|
49
|
-
if (!mermaidReference.current || !code)
|
|
50
|
-
return;
|
|
51
|
-
const renderId = `mermaid-diagram-${id}-${++renderCount.current}`;
|
|
52
|
-
document.getElementById(renderId)?.remove();
|
|
35
|
+
const inline = usePanZoom();
|
|
36
|
+
const modal = usePanZoom();
|
|
37
|
+
const renderInto = useCallback(async (target, prefix) => {
|
|
38
|
+
if (!target || !code)
|
|
39
|
+
return false;
|
|
40
|
+
const renderId = `${prefix}-${id}-${++renderCount.current}`;
|
|
53
41
|
try {
|
|
54
42
|
const { svg, bindFunctions } = await mermaid.render(renderId, code);
|
|
55
|
-
if (!
|
|
56
|
-
return;
|
|
57
|
-
|
|
58
|
-
bindFunctions?.(
|
|
59
|
-
|
|
43
|
+
if (!svg)
|
|
44
|
+
return false;
|
|
45
|
+
target.innerHTML = svg;
|
|
46
|
+
bindFunctions?.(target);
|
|
47
|
+
return true;
|
|
60
48
|
}
|
|
61
49
|
catch (err) {
|
|
62
50
|
const message = err instanceof Error ? err.message : 'Failed to render diagram';
|
|
63
51
|
setError(message);
|
|
52
|
+
return false;
|
|
64
53
|
}
|
|
65
54
|
}, [code, id]);
|
|
66
55
|
useEffect(() => {
|
|
67
56
|
if (!code)
|
|
68
57
|
return;
|
|
69
58
|
setError(null);
|
|
70
|
-
|
|
71
|
-
const timer = setTimeout(
|
|
59
|
+
inline.reset();
|
|
60
|
+
const timer = setTimeout(() => {
|
|
61
|
+
renderInto(mermaidReference.current, 'mermaid-diagram').then(ok => {
|
|
62
|
+
if (ok)
|
|
63
|
+
setEnabled(true);
|
|
64
|
+
});
|
|
65
|
+
}, 100);
|
|
72
66
|
return () => clearTimeout(timer);
|
|
73
|
-
}, [code,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
const handleMouseMove = useCallback((e) => {
|
|
86
|
-
if (!isDraggingRef.current)
|
|
67
|
+
}, [code, renderInto, inline.reset]);
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
if (!isExpanded)
|
|
70
|
+
return;
|
|
71
|
+
modal.reset();
|
|
72
|
+
const timer = setTimeout(() => {
|
|
73
|
+
renderInto(modalMermaidReference.current, 'mermaid-modal');
|
|
74
|
+
}, 0);
|
|
75
|
+
return () => clearTimeout(timer);
|
|
76
|
+
}, [isExpanded, renderInto, modal.reset]);
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
if (!isExpanded)
|
|
87
79
|
return;
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
...prev,
|
|
101
|
-
scale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),
|
|
102
|
-
}));
|
|
103
|
-
}, [applyTransform]);
|
|
104
|
-
const zoomOut = useCallback(() => {
|
|
105
|
-
applyTransform(prev => ({
|
|
106
|
-
...prev,
|
|
107
|
-
scale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),
|
|
108
|
-
}));
|
|
109
|
-
}, [applyTransform]);
|
|
110
|
-
const resetView = useCallback(() => {
|
|
111
|
-
applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
|
|
112
|
-
}, [applyTransform]);
|
|
80
|
+
const onKey = (e) => {
|
|
81
|
+
if (e.key === 'Escape')
|
|
82
|
+
setIsExpanded(false);
|
|
83
|
+
};
|
|
84
|
+
const previousOverflow = document.body.style.overflow;
|
|
85
|
+
document.body.style.overflow = 'hidden';
|
|
86
|
+
window.addEventListener('keydown', onKey);
|
|
87
|
+
return () => {
|
|
88
|
+
document.body.style.overflow = previousOverflow;
|
|
89
|
+
window.removeEventListener('keydown', onKey);
|
|
90
|
+
};
|
|
91
|
+
}, [isExpanded]);
|
|
113
92
|
return (jsxs("div", { className: `${styles.mermaid}
|
|
114
93
|
${hasMarginUp ? styles['margin-top--1'] : ''}
|
|
115
|
-
${hasMarginDown ? styles['margin-bottom--2'] : ''}`, children: [error ? (jsx(Callout, { type: "error", children: jsxs("p", { children: [jsx("b", { children: "Diagram error:" }), " ", error] }) })) : !enabled ? (jsx(Callout, { type: "info", children: jsx("p", { children: "Rendering diagram..." }) })) : (
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
transition: isDragging ? 'none' : 'transform 0.1s ease',
|
|
119
|
-
}, children: jsx("div", { ref: mermaidReference, id: id }) }) })] }));
|
|
94
|
+
${hasMarginDown ? styles['margin-bottom--2'] : ''}`, children: [error ? (jsx(Callout, { type: "error", children: jsxs("p", { children: [jsx("b", { children: "Diagram error:" }), " ", error] }) })) : !enabled ? (jsx(Callout, { type: "info", children: jsx("p", { children: "Rendering diagram..." }) })) : (jsx(MermaidControls, { className: styles['mermaid__controls'], isExpanded: false, onZoomIn: inline.zoomIn, onZoomOut: inline.zoomOut, onReset: inline.reset, onToggleExpand: () => setIsExpanded(true) })), jsx(MermaidViewport, { className: styles['mermaid__viewport'], draggingClassName: styles['mermaid__viewport--dragging'], pan: inline, contentRef: mermaidReference, contentId: id, hidden: !enabled }), isExpanded &&
|
|
95
|
+
typeof document !== 'undefined' &&
|
|
96
|
+
createPortal(jsx("div", { className: styles['mermaid__modal'], onClick: () => setIsExpanded(false), role: "dialog", "aria-modal": "true", children: jsxs("div", { className: styles['mermaid__modal__content'], onClick: e => e.stopPropagation(), children: [jsx(MermaidControls, { className: styles['mermaid__modal__controls'], isExpanded: true, onZoomIn: modal.zoomIn, onZoomOut: modal.zoomOut, onReset: modal.reset, onToggleExpand: () => setIsExpanded(false) }), jsx(MermaidViewport, { className: styles['mermaid__modal__viewport'], draggingClassName: styles['mermaid__modal__viewport--dragging'], pan: modal, contentRef: modalMermaidReference })] }) }), document.body)] }));
|
|
120
97
|
};
|
|
121
98
|
|
|
122
99
|
export { Mermaid as default };
|
|
@@ -1 +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 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\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":["_jsxs","_jsx","CalloutStatic"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MermaidDynamic.js","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport mermaid from 'mermaid';\n\nimport MermaidControls from '../components/MermaidControls';\nimport MermaidViewport from '../components/MermaidViewport';\nimport { usePanZoom } from '../hooks/usePanZoom';\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 [isExpanded, setIsExpanded] = useState(false);\n\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\tconst modalMermaidReference = useRef<HTMLDivElement>(null);\n\tconst renderCount = useRef(0);\n\n\tconst inline = usePanZoom();\n\tconst modal = usePanZoom();\n\n\tconst renderInto = useCallback(\n\t\tasync (target: HTMLDivElement | null, prefix: string) => {\n\t\t\tif (!target || !code) return false;\n\t\t\tconst renderId = `${prefix}-${id}-${++renderCount.current}`;\n\t\t\ttry {\n\t\t\t\tconst { svg, bindFunctions } = await mermaid.render(renderId, code);\n\t\t\t\tif (!svg) return false;\n\t\t\t\ttarget.innerHTML = svg;\n\t\t\t\tbindFunctions?.(target);\n\t\t\t\treturn true;\n\t\t\t} catch (err) {\n\t\t\t\tconst message =\n\t\t\t\t\terr instanceof Error ? err.message : 'Failed to render diagram';\n\t\t\t\tsetError(message);\n\t\t\t\treturn false;\n\t\t\t}\n\t\t},\n\t\t[code, id]\n\t);\n\n\tuseEffect(() => {\n\t\tif (!code) return;\n\t\tsetError(null);\n\t\tinline.reset();\n\t\tconst timer = setTimeout(() => {\n\t\t\trenderInto(mermaidReference.current, 'mermaid-diagram').then(ok => {\n\t\t\t\tif (ok) setEnabled(true);\n\t\t\t});\n\t\t}, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, renderInto, inline.reset]);\n\n\tuseEffect(() => {\n\t\tif (!isExpanded) return;\n\t\tmodal.reset();\n\t\tconst timer = setTimeout(() => {\n\t\t\trenderInto(modalMermaidReference.current, 'mermaid-modal');\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, [isExpanded, renderInto, modal.reset]);\n\n\tuseEffect(() => {\n\t\tif (!isExpanded) return;\n\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') setIsExpanded(false);\n\t\t};\n\t\tconst previousOverflow = document.body.style.overflow;\n\t\tdocument.body.style.overflow = 'hidden';\n\t\twindow.addEventListener('keydown', onKey);\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = previousOverflow;\n\t\t\twindow.removeEventListener('keydown', onKey);\n\t\t};\n\t}, [isExpanded]);\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<MermaidControls\n\t\t\t\t\tclassName={styles['mermaid__controls']}\n\t\t\t\t\tisExpanded={false}\n\t\t\t\t\tonZoomIn={inline.zoomIn}\n\t\t\t\t\tonZoomOut={inline.zoomOut}\n\t\t\t\t\tonReset={inline.reset}\n\t\t\t\t\tonToggleExpand={() => setIsExpanded(true)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<MermaidViewport\n\t\t\t\tclassName={styles['mermaid__viewport']}\n\t\t\t\tdraggingClassName={styles['mermaid__viewport--dragging']}\n\t\t\t\tpan={inline}\n\t\t\t\tcontentRef={mermaidReference}\n\t\t\t\tcontentId={id}\n\t\t\t\thidden={!enabled}\n\t\t\t/>\n\n\t\t\t{isExpanded &&\n\t\t\t\ttypeof document !== 'undefined' &&\n\t\t\t\tcreatePortal(\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={styles['mermaid__modal']}\n\t\t\t\t\t\tonClick={() => setIsExpanded(false)}\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={styles['mermaid__modal__content']}\n\t\t\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<MermaidControls\n\t\t\t\t\t\t\t\tclassName={styles['mermaid__modal__controls']}\n\t\t\t\t\t\t\t\tisExpanded={true}\n\t\t\t\t\t\t\t\tonZoomIn={modal.zoomIn}\n\t\t\t\t\t\t\t\tonZoomOut={modal.zoomOut}\n\t\t\t\t\t\t\t\tonReset={modal.reset}\n\t\t\t\t\t\t\t\tonToggleExpand={() => setIsExpanded(false)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MermaidViewport\n\t\t\t\t\t\t\t\tclassName={styles['mermaid__modal__viewport']}\n\t\t\t\t\t\t\t\tdraggingClassName={styles['mermaid__modal__viewport--dragging']}\n\t\t\t\t\t\t\t\tpan={modal}\n\t\t\t\t\t\t\t\tcontentRef={modalMermaidReference}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>,\n\t\t\t\t\tdocument.body\n\t\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["_jsxs","_jsx","CalloutStatic"],"mappings":"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"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { useState, useRef, useCallback } from 'react';
|
|
2
|
+
|
|
3
|
+
const DEFAULT_INITIAL_TRANSFORM = { scale: 1, x: 0, y: 0 };
|
|
4
|
+
const DEFAULT_MIN_SCALE = 0.5;
|
|
5
|
+
const DEFAULT_MAX_SCALE = 4;
|
|
6
|
+
const DEFAULT_ZOOM_STEP = 0.15;
|
|
7
|
+
const usePanZoom = ({ initialTransform = DEFAULT_INITIAL_TRANSFORM, minScale = DEFAULT_MIN_SCALE, maxScale = DEFAULT_MAX_SCALE, zoomStep = DEFAULT_ZOOM_STEP, } = {}) => {
|
|
8
|
+
const [transform, setTransform] = useState(initialTransform);
|
|
9
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
10
|
+
const transformRef = useRef(initialTransform);
|
|
11
|
+
const isDraggingRef = useRef(false);
|
|
12
|
+
const dragStart = useRef({
|
|
13
|
+
mouseX: 0,
|
|
14
|
+
mouseY: 0,
|
|
15
|
+
transformX: 0,
|
|
16
|
+
transformY: 0,
|
|
17
|
+
});
|
|
18
|
+
const apply = useCallback((updater) => {
|
|
19
|
+
const next = updater(transformRef.current);
|
|
20
|
+
transformRef.current = next;
|
|
21
|
+
setTransform(next);
|
|
22
|
+
}, []);
|
|
23
|
+
const onMouseDown = useCallback((e) => {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
isDraggingRef.current = true;
|
|
26
|
+
setIsDragging(true);
|
|
27
|
+
dragStart.current = {
|
|
28
|
+
mouseX: e.clientX,
|
|
29
|
+
mouseY: e.clientY,
|
|
30
|
+
transformX: transformRef.current.x,
|
|
31
|
+
transformY: transformRef.current.y,
|
|
32
|
+
};
|
|
33
|
+
}, []);
|
|
34
|
+
const onMouseMove = useCallback((e) => {
|
|
35
|
+
if (!isDraggingRef.current)
|
|
36
|
+
return;
|
|
37
|
+
apply(prev => ({
|
|
38
|
+
...prev,
|
|
39
|
+
x: dragStart.current.transformX + (e.clientX - dragStart.current.mouseX),
|
|
40
|
+
y: dragStart.current.transformY + (e.clientY - dragStart.current.mouseY),
|
|
41
|
+
}));
|
|
42
|
+
}, [apply]);
|
|
43
|
+
const onMouseUp = useCallback(() => {
|
|
44
|
+
isDraggingRef.current = false;
|
|
45
|
+
setIsDragging(false);
|
|
46
|
+
}, []);
|
|
47
|
+
const zoomIn = useCallback(() => {
|
|
48
|
+
apply(prev => ({
|
|
49
|
+
...prev,
|
|
50
|
+
scale: Math.min(prev.scale * (1 + zoomStep), maxScale),
|
|
51
|
+
}));
|
|
52
|
+
}, [apply, zoomStep, maxScale]);
|
|
53
|
+
const zoomOut = useCallback(() => {
|
|
54
|
+
apply(prev => ({
|
|
55
|
+
...prev,
|
|
56
|
+
scale: Math.max(prev.scale * (1 - zoomStep), minScale),
|
|
57
|
+
}));
|
|
58
|
+
}, [apply, zoomStep, minScale]);
|
|
59
|
+
const reset = useCallback(() => {
|
|
60
|
+
apply(() => initialTransform);
|
|
61
|
+
}, [apply, initialTransform]);
|
|
62
|
+
return {
|
|
63
|
+
transform,
|
|
64
|
+
isDragging,
|
|
65
|
+
onMouseDown,
|
|
66
|
+
onMouseMove,
|
|
67
|
+
onMouseUp,
|
|
68
|
+
zoomIn,
|
|
69
|
+
zoomOut,
|
|
70
|
+
reset,
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export { usePanZoom };
|
|
75
|
+
//# sourceMappingURL=usePanZoom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePanZoom.js","sources":["../../../src/hooks/usePanZoom.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface Transform {\n\tscale: number;\n\tx: number;\n\ty: number;\n}\n\nexport interface UsePanZoomOptions {\n\tinitialTransform?: Transform;\n\tminScale?: number;\n\tmaxScale?: number;\n\tzoomStep?: number;\n}\n\nconst DEFAULT_INITIAL_TRANSFORM: Transform = { scale: 1, x: 0, y: 0 };\nconst DEFAULT_MIN_SCALE = 0.5;\nconst DEFAULT_MAX_SCALE = 4;\nconst DEFAULT_ZOOM_STEP = 0.15;\n\nexport const usePanZoom = ({\n\tinitialTransform = DEFAULT_INITIAL_TRANSFORM,\n\tminScale = DEFAULT_MIN_SCALE,\n\tmaxScale = DEFAULT_MAX_SCALE,\n\tzoomStep = DEFAULT_ZOOM_STEP,\n}: UsePanZoomOptions = {}) => {\n\tconst [transform, setTransform] = useState<Transform>(initialTransform);\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst transformRef = useRef<Transform>(initialTransform);\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 apply = useCallback((updater: (prev: Transform) => Transform) => {\n\t\tconst next = updater(transformRef.current);\n\t\ttransformRef.current = next;\n\t\tsetTransform(next);\n\t}, []);\n\n\tconst onMouseDown = 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 onMouseMove = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (!isDraggingRef.current) return;\n\t\t\tapply(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[apply]\n\t);\n\n\tconst onMouseUp = useCallback(() => {\n\t\tisDraggingRef.current = false;\n\t\tsetIsDragging(false);\n\t}, []);\n\n\tconst zoomIn = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.min(prev.scale * (1 + zoomStep), maxScale),\n\t\t}));\n\t}, [apply, zoomStep, maxScale]);\n\n\tconst zoomOut = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.max(prev.scale * (1 - zoomStep), minScale),\n\t\t}));\n\t}, [apply, zoomStep, minScale]);\n\n\tconst reset = useCallback(() => {\n\t\tapply(() => initialTransform);\n\t}, [apply, initialTransform]);\n\n\treturn {\n\t\ttransform,\n\t\tisDragging,\n\t\tonMouseDown,\n\t\tonMouseMove,\n\t\tonMouseUp,\n\t\tzoomIn,\n\t\tzoomOut,\n\t\treset,\n\t};\n};\n\nexport type PanZoom = ReturnType<typeof usePanZoom>;\n"],"names":[],"mappings":"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"}
|