fix bug with mermaid diagram changing scale on zoom

3 files changed, 44 insertions, 10 deletions

diff --git a/package-lock.json b/package-lock.json
index 7b86365c2..253356c07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32257,7 +32257,8 @@
         "node_modules/text-table": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+            "dev": true
         },
         "node_modules/textarea-caret": {
             "version": "3.1.0",
diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 50d9a6573..9ceac15df 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,3 +1,9 @@
-.mermaid{
-    width:100%;
-}
\ No newline at end of file
+.mermaid {
+    svg {
+        g {
+            g{
+                
+            }
+        }
+    }
+}
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index e162360f8..a2fb7e2c8 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -34,12 +34,41 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         super(props);
         makeObservable(this);
         //this.createMermaidCode();
-        this.chartContent = 'graph LR;A-->B;B-->C; B-->D[hello];';
+        this.chartContent = 'flowchart LR;A-->B:::wide;B-->C:::wide; B-->D[hello];';
     }
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        mermaid.initialize({ startOnLoad: true });
+        // (window as any)["callb"] = (x: any) => {
+        //     alert(x);
+        // };
+        mermaid.initialize({
+            securityLevel: "loose",
+            startOnLoad: true,
+            flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+        });
+
+        const renderMermaid = async (str: string) => {
+            try {
+                const { svg, bindFunctions } = await mermaid2(str);
+                return { svg, bindFunctions };
+            } catch (error) {
+                console.error("Error rendering mermaid diagram:", error);
+                return { svg: "", bindFunctions: undefined };
+            }
+        };
+        const mermaid2 = async (str: string) => {
+            return await mermaid.render("graph" + Date.now(), str);
+        };
+        renderMermaid(this.chartContent).then(({ svg, bindFunctions }) => {
+            const dashDiv = document.getElementById('dashDiv');
+            if (dashDiv) {
+                dashDiv.innerHTML = svg;
+                if (bindFunctions) {
+                    bindFunctions(dashDiv);
+                }
+            }
+        });
     }
     createMermaidCode = (): void => {
         if (this.Document.data instanceof List) {
@@ -94,11 +123,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         }
     };
     render() {
-        console.log(this.ScreenToLocalBoxXf().scale(2));
+        console.log(this.ScreenToLocalBoxXf().Scale);
         return (
-            <div>
-                <Mermaid chart={this.chartContent} />
-            </div>
+            <div id="dashDiv"></div>
         );
     }
 }