change to saving mermaid code in text box title

1 files changed, 33 insertions, 18 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index c45b9a8be..553d55ac4 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,4 +1,4 @@
-import { makeObservable, observable, action } from 'mobx';
+import { makeObservable, observable, action ,reaction} from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
@@ -49,13 +49,25 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
         });
         this.mermaidCode = 'asdasdasd';
-        await this.createMermaidCode();
         let docArray: Doc[] = DocListCast(this.Document.data);
         let mermaidCodeDoc = docArray.filter(doc => doc.title == 'mermaidCodeTitle')
         if(mermaidCodeDoc[0]){
             this.renderMermaidAsync((mermaidCodeDoc[0].text as RichTextField).Text);
         }
-        this.testInkingStroke();
+        else{
+            DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
+                if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
+                    if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
+                        let newDoc=Docs.Create.TextDocument("mermaidCodeTitle", { title: "", x: 9999 + NumCast(this.layoutDoc._width), y: 9999 })
+                        docViewForYourCollection.ComponentView?.addDocument(newDoc)
+                    }
+                }
+            });
+        }
+        reaction(() => DocListCast(this.Document.data),
+            docs=> this.createMermaidCode(),
+            {fireImmediately: true}
+        )
     }
     renderMermaid = async (str: string) => {
         try {
@@ -134,6 +146,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     }
 
     async createMermaidCode() {
+        console.log("i just ran")
+        let mermaidCode=""
+        let diagramExists=false
         if (this.Document.data instanceof List) {
             let docArray: Doc[] = DocListCast(this.Document.data);
             let rectangleArray = docArray.filter(doc => doc.title == 'rectangle' || doc.title == 'circle');
@@ -146,7 +161,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             await timeoutPromise();
             let inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke);
             if (inkStrokeArray[0]) {
-                let mermaidCode = 'graph LR;';
+                mermaidCode = 'graph LR;';
                 let inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView);
                 for (let i = 0; i < rectangleArray.length; i++) {
                     const rectangle = rectangleArray[i];
@@ -169,6 +184,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                             for (let k = 0; k < rectangleArray.length; k++) {
                                 const rectangle2 = rectangleArray[k];
                                 if (this.isPointInBox(rectangle2, [EndX, EndY]) && typeof rectangle.x === 'number' && typeof rectangle2.x === 'number') {
+                                    diagramExists=true
                                     mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
                                     //console.log(mermaidCode)
                                 }
@@ -176,25 +192,24 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                         }
                     }
                 }
-                DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
-                    if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
-                        if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
-                            let docArray: Doc[] = DocListCast(this.Document.data);
-                            let mermaidCodeDoc = docArray.filter(doc => doc.title == 'mermaidCodeTitle')
-                            if(mermaidCodeDoc[0]){
-                                console.log(mermaidCodeDoc[0].title)
-                            }
-                            docViewForYourCollection.ComponentView?.removeDocument(mermaidCodeDoc)
-                            let newDoc=Docs.Create.TextDocument(mermaidCode, { title: 'mermaidCodeTitle', x: NumCast(this.Document.x) + NumCast(this.layoutDoc._width), y: NumCast(this.Document.y) })
-                            docViewForYourCollection.ComponentView?.addDocument(newDoc)
+            }
+        }
+        if(diagramExists){
+            DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
+                if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
+                    if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
+                        let docArray: Doc[] = DocListCast(this.Document.data);
+                        docArray=docArray.filter(doc => doc.type == 'rich text')
+                        let mermaidCodeDoc = docArray.filter(doc => (doc.text as RichTextField).Text == 'mermaidCodeTitle')
+                        if(mermaidCodeDoc[0]){
+                            mermaidCodeDoc[0].title=mermaidCode
                         }
                     }
-                });
-            }
+                }
+            });
         }
         let docArray: Doc[] = DocListCast(this._props.Document.data)
         console.log(docArray.length)
-        this.Document.data
         //console.log(mermaidCode)
 
     }