merged with new master

1 files changed, 60 insertions, 51 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index c69c3d683..fa7e5868a 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,4 +1,4 @@
-import { makeObservable, observable, action ,reaction} from 'mobx';
+import { makeObservable, observable, action, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
@@ -22,6 +22,7 @@ import { Docs } from '../../documents/Documents';
 import { NumCast } from '../../../fields/Types';
 import { LinkManager } from '../../util/LinkManager';
 import { CsvCast, DocCast, StrCast } from '../../../fields/Types';
+import { DocumentType } from '../../documents/DocumentTypes';
 
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
@@ -52,34 +53,34 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         });
         this.mermaidCode = 'asdasdasd';
         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')
-        if(mermaidCodeDoc[0]){
-            if(typeof mermaidCodeDoc[0].title=='string'){
-                console.log(mermaidCodeDoc[0].title)
-                if(mermaidCodeDoc[0].title!=""){
+        let mermaidCodeDoc = docArray.filter(doc => doc.type == 'rich text');
+        mermaidCodeDoc = mermaidCodeDoc.filter(doc => (doc.text as RichTextField).Text == 'mermaidCodeTitle');
+        if (mermaidCodeDoc[0]) {
+            if (typeof mermaidCodeDoc[0].title == 'string') {
+                console.log(mermaidCodeDoc[0].title);
+                if (mermaidCodeDoc[0].title != '') {
                     this.renderMermaidAsync(mermaidCodeDoc[0].title);
                 }
             }
         }
         //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) => {
+        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)
+                    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);
                     }
                 }
             });
         }
-        console.log(this.Document.title)
+        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")
+                console.log('reaction happened');
                 this.convertDrawingToMermaidCode();
             },
             { fireImmediately: true }
@@ -101,7 +102,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'+this.Document.title);
+            const dashDiv = document.getElementById('dashDiv' + this.Document.title);
             if (dashDiv) {
                 dashDiv.innerHTML = svg;
                 if (bindFunctions) {
@@ -118,7 +119,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     @action async generateMermaidCode() {
         console.log('Generating Mermaid Code');
         this.loading = true;
-        let prompt=""
+        let prompt = '';
         // 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')
@@ -133,8 +134,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         //     }
         // }
         // else{
-            prompt="Write this in mermaid code and only give me the mermaid code: "+this.inputValue
-            console.log("there is no text save")
+        prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this.inputValue;
+        console.log('there is no text save');
         //}
         let res = await gptAPICall(prompt, GPTCallType.MERMAID);
         this.loading = false;
@@ -155,7 +156,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         }
         this.renderMermaidAsync.call(this, this.removeWords(this.mermaidCode));
         this.loading = false;
-    };
+    }
     isValidCode = (html: string) => {
         return true;
     };
@@ -165,8 +166,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     }
     //method to convert the drawings on collection node side the mermaid code
     async convertDrawingToMermaidCode() {
-        let mermaidCode=""
-        let diagramExists=false
+        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');
@@ -178,9 +179,9 @@ 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);
-            console.log(inkStrokeArray.length)
-            console.log(lineArray.length)
-            if (inkStrokeArray[0]&&inkStrokeArray.length==lineArray.length) {
+            console.log(inkStrokeArray.length);
+            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++) {
@@ -188,30 +189,34 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                     for (let j = 0; j < lineArray.length; j++) {
                         let inkScaleX = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleX;
                         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)
+                        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);
                         //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);
                         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);
+                        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') {
-                                    diagramExists=true
-                                    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{
+                                    diagramExists = true;
+                                    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) + ';';
                                     }
                                 }
@@ -219,19 +224,18 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                         }
                     }
                 }
-                        //this will save the text
-                DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
+                //this will save the text
+                DocumentManager.Instance.AddViewRenderedCb(this.Document, docViewForYourCollection => {
                     if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
-                        if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
+                        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=""
+                            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 = '';
                                 }
                             }
                         }
@@ -284,7 +288,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                     </div>
                     <div className="content">
                         {this.mermaidCode ? (
-                            <div id={"dashDiv"+this.Document.title} 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>
                         )}
@@ -294,3 +298,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         );
     }
 }
+
+Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {
+    layout: { view: DiagramBox, dataField: 'dadta' },
+    options: { _height: 300, _layout_fitWidth: true, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', systemIcon: 'BsGlobe' },
+});