From 868668efbdbfaa50c0203d133cd2401e65ec5281 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Sun, 17 Mar 2024 12:50:32 -0400
Subject: fix bug with mermaid diagram changing scale on zoom

---
 src/client/views/nodes/DiagramBox.scss | 12 ++++++++---
 src/client/views/nodes/DiagramBox.tsx  | 39 ++++++++++++++++++++++++++++------
 2 files changed, 42 insertions(+), 9 deletions(-)

(limited to 'src')

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>
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2