fix mermaid code generator from drawing, does not render

1 files changed, 46 insertions, 31 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 5254a4fe0..27f9d2a86 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -18,6 +18,7 @@ import { line } from 'd3';
 import { InkingStroke } from '../InkingStroke';
 import { DocumentManager } from '../../util/DocumentManager';
 import { C } from '@fullcalendar/core/internal-common';
+import { Docs } from '../../documents/Documents';
 
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
@@ -26,11 +27,10 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     }
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
     private _dragRef = React.createRef<HTMLDivElement>();
-    private chartContent: string;
+    private chartContent: string="graph L;";
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
-        this.chartContent = 'flowchart LR;A-->B:::wide;B-->C:::wide; B-->D[hello];';
     }
 
     @observable inputValue = '';
@@ -41,16 +41,21 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     @action handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.inputValue = e.target.value;
     };
-    componentDidMount() {
+    async componentDidMount() {
+        console.log(this.chartContent)
         this._props.setContentViewBox?.(this);
         mermaid.initialize({
             securityLevel: 'loose',
             startOnLoad: true,
             flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
         });
-        this.renderMermaidAsync.call(this, this.chartContent);
-        this.mermaidCode = this.chartContent;
-        this.chartContent= this.createMermaidCode();
+        this.mermaidCode = "asdasdasd"; 
+        if(this.chartContent!="graph LR;"){
+            this.chartContent=await this.createMermaidCode()
+            //console.log(this.chartContent)
+        }
+        this.renderMermaidAsync(this.chartContent)
+        this.testInkingStroke()
     }
     renderMermaid = async (str: string) => {
         try {
@@ -112,66 +117,76 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     isValidCode = (html: string) => {
         return true;
     };
+    testInkingStroke=()=>{
+        if (this.Document.data instanceof List) {
+            let docArray: Doc[] = DocListCast(this.Document.data);
+            let lineArray = docArray.filter(doc => doc.title == 'line' || doc.title == 'stroke');
+            setTimeout(() => {
+                let inkStrokeArray=lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
+                .filter(inkView => inkView?.ComponentView instanceof InkingStroke)
+                console.log(inkStrokeArray)
+            });
+        }
+    }
 
     removeWords(inputStr: string) {
         inputStr = inputStr.replace('```mermaid', '');
         return inputStr.replace('```', '');
     }
 
-    createMermaidCode() {
+    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');
             let lineArray = docArray.filter(doc => doc.title == 'line' || doc.title == 'stroke');
             let textArray = docArray.filter(doc => doc.type == 'rich text');
-            setTimeout(() => {
-                let inkStrokeArray=lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
-                .filter(inkView => inkView?.ComponentView instanceof InkingStroke)
-                console.log(inkStrokeArray.length)
+            const timeoutPromise = () => new Promise(resolve => {
+                setTimeout(resolve, 0);
+            });
+            await timeoutPromise();
+            let inkStrokeArray=lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
+            .filter(inkView => inkView?.ComponentView instanceof InkingStroke)
+            if(inkStrokeArray[0]){
                 let inkingStrokeArray=inkStrokeArray.map(stroke=>stroke?.ComponentView)
                 for (let i = 0; i < rectangleArray.length; i++) {       
                     const rectangle = rectangleArray[i];
                     for (let j = 0; j < lineArray.length; j++) {
                         let inkStrokeXArray=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord=>coord.X)
                         let inkStrokeYArray=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord=>coord.Y)
-                        let minX=Math.min(...inkStrokeXArray)
-                        let minY=Math.min(...inkStrokeYArray)
+                        let minX:number=Math.min(...inkStrokeXArray)
+                        let minY:number=Math.min(...inkStrokeYArray)
                         let inkScaleX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleX
                         let inkScaleY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleY
                         let StartX:number=0
                         let StartY:number=0
                         let EndX:number=0
                         let EndY:number=0
-                        if(typeof docArray[j].x==='number'&&typeof docArray[j].y==='number'&&typeof (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j]==='number'){
-                            StartX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].X*inkScaleX-minX*inkScaleX
-                            StartY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].Y*inkScaleY-minY*inkScaleY+lineArray[j]?.y
-                            EndX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].X*inkScaleX-minX*inkScaleX+docArray[j].x
-                            EndY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].Y*inkScaleY-minY*inkScaleY+docArray[j].y
-                        }
-                        console.log((inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData)
-                        console.log((inkingStrokeArray[j] as InkingStroke)?.inkScaledData())
-                        console.log(EndX)
-                        console.log(EndY)
-                        console.log(docArray[j].title)
-                        console.log(docArray[j].x)
-                        console.log(docArray[j].y)
-                        console.log(docArray[j].width)
-                        console.log(docArray[j].height)
+                        StartX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].X*inkScaleX-minX*inkScaleX+(lineArray[j]?.x as number)
+                        StartY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].Y*inkScaleY-minY*inkScaleY+(lineArray[j]?.y as number)
+                        EndX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].X*inkScaleX-minX*inkScaleX+(lineArray[j].x as number)
+                        EndY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].Y*inkScaleY-minY*inkScaleY+(lineArray[j].y as number)
                         if (this.isPointInBox(rectangle, [StartX,StartY])) {
                             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') {
+                                
                                     mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
+                                    //console.log(mermaidCode)
                                 }
                             }
                         }
                     }
                 }
-            });
+            }
+
         }
-        //console.log(mermaidCode);
-        return mermaidCode;
+        console.log(this)
+        this.addDocument(Docs.Create.TextDocument("asd", { title:"hellotitle", x: 0, y: 0 }));
+        let docArray: Doc[] = DocListCast(this.Document.data);
+        console.log(docArray.length)
+        //console.log(mermaidCode)
+        return mermaidCode
     };
 
     getTextInBox = (box: Doc, richTextArray: Doc[]): string => {