fix bug with generation of wrong mermaid code

3 files changed, 81 insertions, 38 deletions

diff --git a/package-lock.json b/package-lock.json
index 49ff43210..2e191b933 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -128,7 +128,7 @@
                 "mathquill": "^0.10.1-a",
                 "md5-file": "^5.0.0",
                 "memorystream": "^0.3.1",
-                "mermaid": "^10.8.0",
+                "mermaid": "^10.9.0",
                 "mobile-detect": "^1.4.5",
                 "mobx": "^6.12.0",
                 "mobx-react": "^9.1.0",
@@ -22598,6 +22598,29 @@
                 "node": ">=12.0.0"
             }
         },
+        "node_modules/katex": {
+            "version": "0.16.10",
+            "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
+            "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
+            "funding": [
+                "https://opencollective.com/katex",
+                "https://github.com/sponsors/katex"
+            ],
+            "dependencies": {
+                "commander": "^8.3.0"
+            },
+            "bin": {
+                "katex": "cli.js"
+            }
+        },
+        "node_modules/katex/node_modules/commander": {
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+            "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/kdbush": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
@@ -23562,9 +23585,9 @@
             "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
         },
         "node_modules/mermaid": {
-            "version": "10.8.0",
-            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.8.0.tgz",
-            "integrity": "sha512-9CzfSreRjdDJxX796+jW4zjEq0DVw5xVF0nWsqff8OTbrt+ml0TZ5PyYUjjUZJa2NYxYJZZXewEquxGiM8qZEA==",
+            "version": "10.9.0",
+            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.9.0.tgz",
+            "integrity": "sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==",
             "dependencies": {
                 "@braintree/sanitize-url": "^6.0.1",
                 "@types/d3-scale": "^4.0.3",
@@ -23577,6 +23600,7 @@
                 "dayjs": "^1.11.7",
                 "dompurify": "^3.0.5",
                 "elkjs": "^0.9.0",
+                "katex": "^0.16.9",
                 "khroma": "^2.0.0",
                 "lodash-es": "^4.17.21",
                 "mdast-util-from-markdown": "^1.3.0",
diff --git a/package.json b/package.json
index ca48bfd0e..78b556fac 100644
--- a/package.json
+++ b/package.json
@@ -211,7 +211,7 @@
         "mathquill": "^0.10.1-a",
         "md5-file": "^5.0.0",
         "memorystream": "^0.3.1",
-        "mermaid": "^10.8.0",
+        "mermaid": "^10.9.0",
         "mobile-detect": "^1.4.5",
         "mobx": "^6.12.0",
         "mobx-react": "^9.1.0",
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 553d55ac4..1b8290652 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -50,9 +50,15 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         });
         this.mermaidCode = 'asdasdasd';
         let docArray: Doc[] = DocListCast(this.Document.data);
-        let mermaidCodeDoc = docArray.filter(doc => doc.title == 'mermaidCodeTitle')
+        let mermaidCodeDoc = docArray.filter(doc => doc.type == 'rich text')
+        mermaidCodeDoc=mermaidCodeDoc.filter(doc=>(doc.text as RichTextField).Text=='mermaidCodeTitle')
         if(mermaidCodeDoc[0]){
-            this.renderMermaidAsync((mermaidCodeDoc[0].text as RichTextField).Text);
+            if(typeof mermaidCodeDoc[0].title=='string'){
+                console.log(mermaidCodeDoc[0].title)
+                if(mermaidCodeDoc[0].title!=""){
+                    this.renderMermaidAsync(mermaidCodeDoc[0].title);
+                }
+            }
         }
         else{
             DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
@@ -64,10 +70,15 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                 }
             });
         }
-        reaction(() => DocListCast(this.Document.data),
-            docs=> this.createMermaidCode(),
-            {fireImmediately: true}
-        )
+        reaction(
+            () => DocListCast(this.Document.data),
+            docs => {
+                console.log("reaction happened")
+                this.createMermaidCode();
+
+            },
+            { fireImmediately: true }
+        );
     }
     renderMermaid = async (str: string) => {
         try {
@@ -146,7 +157,6 @@ 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) {
@@ -159,34 +169,40 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                     setTimeout(resolve, 0);
                 });
             await timeoutPromise();
+            lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).forEach(inkView => {
+                const componentView = inkView?.ComponentView;
+                if (componentView) {
+                    console.log(componentView.constructor.name, componentView); // Print instance type and object
+                }
+            });
             let inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke);
+            console.log(lineArray.length)
+            console.log(inkStrokeArray.length)
             if (inkStrokeArray[0]) {
                 mermaidCode = 'graph LR;';
                 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: 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;
-                        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])) {
+                        let inkStrokeXArray = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord => coord.X).map(doc=>doc*inkScaleX);
+                        let inkStrokeYArray = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord => coord.Y).map(doc=>doc*inkScaleY);
+                        //console.log(inkingStrokeArray.length)
+                        //console.log(lineArray.length)
+                        let minX: number = Math.min(...inkStrokeXArray);
+                        let minY: number = Math.min(...inkStrokeYArray);
+                        let startX = inkStrokeXArray[0] - minX + (lineArray[j]?.x as number);
+                        let startY = inkStrokeYArray[0] - minY + (lineArray[j]?.y as number);
+                        let endX = inkStrokeXArray[inkStrokeXArray.length - 1]- minX + (lineArray[j].x as number);
+                        let endY = inkStrokeYArray[inkStrokeYArray.length - 1]- minY + (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') {
+                                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)
+                                
                                 }
                             }
                         }
@@ -194,25 +210,28 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                 }
             }
         }
-        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]){
+        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]){
+                        if(diagramExists){
                             mermaidCodeDoc[0].title=mermaidCode
                         }
+                        else{
+                            mermaidCodeDoc[0].title=""
+                        }
                     }
                 }
-            });
-        }
+            }
+        });
         let docArray: Doc[] = DocListCast(this._props.Document.data)
-        console.log(docArray.length)
         //console.log(mermaidCode)
 
     }
+
     getTextInBox = (box: Doc, richTextArray: Doc[]): string => {
         for (let i = 0; i < richTextArray.length; i++) {
             let textDoc = richTextArray[i];