add saving of mermaid diagram code with text box

1 files changed, 24 insertions, 10 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 8a31f634b..c45b9a8be 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -28,7 +28,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     }
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
     private _dragRef = React.createRef<HTMLDivElement>();
-    private chartContent: string = 'graph L;';
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
@@ -43,7 +42,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         this.inputValue = e.target.value;
     };
     async componentDidMount() {
-        console.log(this.chartContent);
         this._props.setContentViewBox?.(this);
         mermaid.initialize({
             securityLevel: 'loose',
@@ -51,11 +49,12 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
         });
         this.mermaidCode = 'asdasdasd';
-        if (this.chartContent != 'graph LR;') {
-            this.chartContent = await this.createMermaidCode();
-            //console.log(this.chartContent)
+        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.renderMermaidAsync(this.chartContent);
         this.testInkingStroke();
     }
     renderMermaid = async (str: string) => {
@@ -135,7 +134,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     }
 
     async createMermaidCode() {
-        let mermaidCode = 'graph LR;';
         if (this.Document.data instanceof List) {
             let docArray: Doc[] = DocListCast(this.Document.data);
             let rectangleArray = docArray.filter(doc => doc.title == 'rectangle' || doc.title == 'circle');
@@ -148,6 +146,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;';
                 let inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView);
                 for (let i = 0; i < rectangleArray.length; i++) {
                     const rectangle = rectangleArray[i];
@@ -177,13 +176,28 @@ 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)
+                        }
+                    }
+                });
             }
         }
-        this._props.addDocument?.(Docs.Create.TextDocument('asd', { title: 'hellotitle', x: NumCast(this.Document.x) + NumCast(this.layoutDoc._width), y: NumCast(this.Document.y) }));
+        let docArray: Doc[] = DocListCast(this._props.Document.data)
+        console.log(docArray.length)
+        this.Document.data
         //console.log(mermaidCode)
-        return mermaidCode;
-    }
 
+    }
     getTextInBox = (box: Doc, richTextArray: Doc[]): string => {
         for (let i = 0; i < richTextArray.length; i++) {
             let textDoc = richTextArray[i];