change algorithm to include stroke points

2 files changed, 37 insertions, 22 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a0c878ee6..791124f50 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1495,8 +1495,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             computation => (this._layoutElements = this.doLayoutComputation(computation.newPool, computation.computedElementData)),
             { fireImmediately: true }
         );
-        console.log("Asdasdasda"+this.childDocs)
-        console.log(DocListCast(this.Document.data));
     }
 
     static replaceCanvases(oldDiv: HTMLElement, newDiv: HTMLElement) {
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index efec9c7e2..5254a4fe0 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -50,7 +50,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         });
         this.renderMermaidAsync.call(this, this.chartContent);
         this.mermaidCode = this.chartContent;
-        this.createMermaidCode();
+        this.chartContent= this.createMermaidCode();
     }
     renderMermaid = async (str: string) => {
         try {
@@ -118,26 +118,50 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         return inputStr.replace('```', '');
     }
 
-    createMermaidCode = async (): Promise<string> => {
+    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');
-            console.log(docArray);
             setTimeout(() => {
-                console.log(docArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())));
-                console.log(docArray.filter(inkView => inkView?.ComponentView instanceof InkingStroke));
-
-                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)
+                console.log(inkStrokeArray.length)
+                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++) {
-                        const line = lineArray[j];
-                        if (this.isLineInFirstBox(rectangle, line)) {
+                        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 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)
+                        if (this.isPointInBox(rectangle, [StartX,StartY])) {
                             for (let k = 0; k < rectangleArray.length; k++) {
                                 const rectangle2 = rectangleArray[k];
-                                if (this.isLineInSecondBox(rectangle2, line) && 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) + ';';
                                 }
                             }
@@ -166,16 +190,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         }
         return '( )';
     };
-    isLineInFirstBox = (box: Doc, line: Doc): boolean => {
-        if (typeof line.x === 'number' && typeof box.x === 'number' && typeof box.width === 'number' && typeof box.height === 'number' && typeof box.y === 'number' && typeof line.y === 'number') {
-            return line.x < box.x + box.width + (box.width + box.x) * 0.1 && line.x > box.x && line.y > box.y && line.y < box.y + box.height;
-        } else {
-            return false;
-        }
-    };
-    isLineInSecondBox = (box: Doc, line: Doc): boolean => {
-        if (typeof line.x === 'number' && typeof line.width === 'number' && typeof box.x === 'number' && typeof box.width === 'number' && typeof box.y === 'number' && typeof box.height === 'number' && typeof line.y === 'number') {
-            return line.x + line.width > box.x - (box.x - box.width) * 0.1 && line.x + line.width < box.x + box.width && line.y > box.y && line.y < box.y + box.height;
+    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;
         } else {
             return false;
         }