fixed adding collection from DiagramBox

1 files changed, 40 insertions, 45 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 27f9d2a86..8a31f634b 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -19,6 +19,7 @@ import { InkingStroke } from '../InkingStroke';
 import { DocumentManager } from '../../util/DocumentManager';
 import { C } from '@fullcalendar/core/internal-common';
 import { Docs } from '../../documents/Documents';
+import { NumCast } from '../../../fields/Types';
 
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
@@ -27,7 +28,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     }
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
     private _dragRef = React.createRef<HTMLDivElement>();
-    private chartContent: string="graph L;";
+    private chartContent: string = 'graph L;';
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
@@ -42,20 +43,20 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         this.inputValue = e.target.value;
     };
     async componentDidMount() {
-        console.log(this.chartContent)
+        console.log(this.chartContent);
         this._props.setContentViewBox?.(this);
         mermaid.initialize({
             securityLevel: 'loose',
             startOnLoad: true,
             flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
         });
-        this.mermaidCode = "asdasdasd"; 
-        if(this.chartContent!="graph LR;"){
-            this.chartContent=await 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()
+        this.renderMermaidAsync(this.chartContent);
+        this.testInkingStroke();
     }
     renderMermaid = async (str: string) => {
         try {
@@ -117,17 +118,16 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     isValidCode = (html: string) => {
         return true;
     };
-    testInkingStroke=()=>{
+    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)
+                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', '');
@@ -141,36 +141,35 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             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');
-            const timeoutPromise = () => new Promise(resolve => {
-                setTimeout(resolve, 0);
-            });
+            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++) {       
+            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: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);
+                        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])) {
                             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') {
                                     mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
                                     //console.log(mermaidCode)
                                 }
@@ -179,15 +178,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                     }
                 }
             }
-
         }
-        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)
+        this._props.addDocument?.(Docs.Create.TextDocument('asd', { title: 'hellotitle', x: NumCast(this.Document.x) + NumCast(this.layoutDoc._width), y: NumCast(this.Document.y) }));
         //console.log(mermaidCode)
-        return mermaidCode
-    };
+        return mermaidCode;
+    }
 
     getTextInBox = (box: Doc, richTextArray: Doc[]): string => {
         for (let i = 0; i < richTextArray.length; i++) {
@@ -207,7 +202,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     };
     isPointInBox = (box: Doc, line: number[]): boolean => {
         if (typeof line[0] === 'number' && typeof box.x === 'number' && typeof box.width === 'number' && typeof box.height === 'number' && typeof box.y === 'number' && typeof line[1] === 'number') {
-            return line[0] < box.x + box.width&& line[0] > box.x && line[1] > box.y && line[1] < box.y + box.height;
+            return line[0] < box.x + box.width && line[0] > box.x && line[1] > box.y && line[1] < box.y + box.height;
         } else {
             return false;
         }