add feature to add text onto line

1 files changed, 54 insertions, 68 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 1813e6097..c69c3d683 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -20,6 +20,8 @@ import { DocumentManager } from '../../util/DocumentManager';
 import { C } from '@fullcalendar/core/internal-common';
 import { Docs } from '../../documents/Documents';
 import { NumCast } from '../../../fields/Types';
+import { LinkManager } from '../../util/LinkManager';
+import { CsvCast, DocCast, StrCast } from '../../../fields/Types';
 
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
@@ -60,6 +62,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                 }
             }
         }
+        //this will create a text doc far away where the user cant to save the mermaid code, where it will then be accessed when flipped to the diagram box side
+        //the code is stored in the title since it is much easier to change than in the text
         else{
             DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
                 if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
@@ -70,12 +74,13 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                 }
             });
         }
+        console.log(this.Document.title)
+        //this is so that ever time a new doc, text node or ink node, is created, this.createMermaidCode will run which will create a save
         reaction(
             () => DocListCast(this.Document.data),
             docs => {
                 console.log("reaction happened")
-                this.createMermaidCode();
-
+                this.convertDrawingToMermaidCode();
             },
             { fireImmediately: true }
         );
@@ -96,7 +101,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     async renderMermaidAsync(mermaidCode: string) {
         try {
             const { svg, bindFunctions } = await this.renderMermaid(mermaidCode);
-            const dashDiv = document.getElementById('dashDiv');
+            const dashDiv = document.getElementById('dashDiv'+this.Document.title);
             if (dashDiv) {
                 dashDiv.innerHTML = svg;
                 if (bindFunctions) {
@@ -108,26 +113,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         }
     }
     @action handleRenderClick = () => {
-        // Call the GPT model and get the HTML output
-        // const modelOutput = getHtmlOutput(this.inputValue);
-        // this.htmlCode = modelOutput;
         this.generateMermaidCode();
     };
-    printTitle(){
-        let docArray: Doc[] = DocListCast(this.Document.data);
-        let mermaidCodeDoc = docArray.filter(doc => doc.type == 'rich text')
-        mermaidCodeDoc=mermaidCodeDoc.filter(doc=>(doc.text as RichTextField).Text=='mermaidCodeTitle')
-        console.log(mermaidCodeDoc[0].title)
-        if(mermaidCodeDoc[0]){
-            console.log(mermaidCodeDoc[0].title)
-            if(typeof mermaidCodeDoc[0].title=='string'){
-                console.log(mermaidCodeDoc[0].title)
-                if(mermaidCodeDoc[0].title!=""){
-                    console.log("you have to see me")
-                }
-            }
-        }
-    }
     @action async generateMermaidCode() {
         console.log('Generating Mermaid Code');
         this.loading = true;
@@ -172,23 +159,12 @@ 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('```', '');
     }
-
-    async createMermaidCode() {
+    //method to convert the drawings on collection node side the mermaid code
+    async convertDrawingToMermaidCode() {
         let mermaidCode=""
         let diagramExists=false
         if (this.Document.data instanceof List) {
@@ -201,17 +177,11 @@ 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;';
+            console.log(lineArray.length)
+            if (inkStrokeArray[0]&&inkStrokeArray.length==lineArray.length) {
+                mermaidCode = 'graph TD;';
                 let inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView);
                 for (let i = 0; i < rectangleArray.length; i++) {
                     const rectangle = rectangleArray[i];
@@ -220,8 +190,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                         let inkScaleY = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleY;
                         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)
+                        console.log(inkingStrokeArray.length)
+                        console.log(lineArray.length)
+                        //need to minX and minY to since the inkStroke.x and.y is not relative to the doc. so I have to do some calcluations
                         let minX: number = Math.min(...inkStrokeXArray);
                         let minY: number = Math.min(...inkStrokeYArray);
                         let startX = inkStrokeXArray[0] - minX + (lineArray[j]?.x as number);
@@ -233,37 +204,52 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                                 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) + ';';
-                                
+                                    const linkedDocs:Doc[] = LinkManager.Instance.getAllRelatedLinks(lineArray[j])
+                                    .map(d => DocCast(LinkManager.getOppositeAnchor(d, lineArray[j])))
+                                    console.log(linkedDocs.length)
+                                    if(linkedDocs.length!=0){
+                                        let linkedText=((linkedDocs[0].text as RichTextField).Text)
+                                        mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '-->|'+linkedText+"|" + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
+                                    }
+                                    else{
+                                        mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '-->' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
+                                    }
                                 }
                             }
                         }
                     }
                 }
-            }
-        }
-        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=""
+                        //this will save the text
+                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(mermaidCode)
-
+        }
     }
-
+    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);
+            });
+        }
+    };
     getTextInBox = (box: Doc, richTextArray: Doc[]): string => {
         for (let i = 0; i < richTextArray.length; i++) {
             let textDoc = richTextArray[i];
@@ -298,7 +284,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                     </div>
                     <div className="content">
                         {this.mermaidCode ? (
-                            <div id="dashDiv" className="diagramBox"></div>
+                            <div id={"dashDiv"+this.Document.title} className="diagramBox"></div>
                         ) : (
                             <div>{this.loading ? <div className="loading-circle"></div> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div>
                         )}