work in progres

1 files changed, 84 insertions, 78 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index fcc028aab..5a712b8b0 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -7,14 +7,14 @@ import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { List } from '../../../fields/List';
 import { RichTextField } from '../../../fields/RichTextField';
-import { DocCast,BoolCast } from '../../../fields/Types';
+import { DocCast, BoolCast } from '../../../fields/Types';
 import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { LinkManager } from '../../util/LinkManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
-import { InkingStroke} from '../InkingStroke';
+import { InkingStroke } from '../InkingStroke';
 import './DiagramBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PointData } from '../../../pen-gestures/GestureTypes';
@@ -94,9 +94,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         //     () => this.lockInkStroke(),
         //     { fireImmediately: true }
         // );
-         this.lockInkStroke();
+        this.lockInkStroke();
     }
-    
+
     componentDidUpdate = () => {
         if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
             this.renderMermaidAsync(this.Document.drawingMermaidCode);
@@ -268,13 +268,17 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
     async lockInkStroke() {
-        console.log("hello")
-        console.log(DocListCast(this.Document.data).filter(doc => doc.title === 'rectangle').map(doc => doc.x))
+        console.log('hello');
+        console.log(
+            DocListCast(this.Document.data)
+                .filter(doc => doc.title === 'rectangle')
+                .map(doc => doc.x)
+        );
         if (this.Document.data instanceof List) {
             const docArray: Doc[] = DocListCast(this.Document.data);
             const rectangleArray = docArray.filter(doc => doc.title === 'rectangle' || doc.title === 'circle');
-            if(rectangleArray[0]){
-                console.log(rectangleArray[0].x)
+            if (rectangleArray[0]) {
+                console.log(rectangleArray[0].x);
             }
             const lineArray = docArray.filter(doc => doc.title === 'line' || doc.title === 'stroke');
             const timeoutPromise = () =>
@@ -302,88 +306,90 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 const startY = inkStrokeYArray[0] - minY + (lineArray[j]?.y as number);
                 const endX = inkStrokeXArray[inkStrokeXArray.length - 1] - minX + (lineArray[j].x as number);
                 const endY = inkStrokeYArray[inkStrokeYArray.length - 1] - minY + (lineArray[j].y as number);
-                let closestStartRect:Doc=lineArray[0];
-                let closestStartDistance=9999999;
-                let closestEndRect:Doc=lineArray[0];
-                let closestEndDistance=9999999;
+                let closestStartRect: Doc = lineArray[0];
+                let closestStartDistance = 9999999;
+                let closestEndRect: Doc = lineArray[0];
+                let closestEndDistance = 9999999;
                 rectangleArray.forEach(rectangle => {
-                    const midPoint=this.getMidPoint(rectangle)
-                    if(this.euclideanDistance(midPoint.X,midPoint.Y,startX,startY)<closestStartDistance&&this.euclideanDistance(midPoint.X,midPoint.Y,endX,endY)<closestEndDistance){
-                        if(this.euclideanDistance(midPoint.X,midPoint.Y,startX,startY)<this.euclideanDistance(midPoint.X,midPoint.Y,endX,endY)){
-                            closestStartDistance=this.euclideanDistance(midPoint.X,midPoint.Y,startX,startY);
-                            closestStartRect=rectangle
+                    const midPoint = this.getMidPoint(rectangle);
+                    if (this.euclideanDistance(midPoint.X, midPoint.Y, startX, startY) < closestStartDistance && this.euclideanDistance(midPoint.X, midPoint.Y, endX, endY) < closestEndDistance) {
+                        if (this.euclideanDistance(midPoint.X, midPoint.Y, startX, startY) < this.euclideanDistance(midPoint.X, midPoint.Y, endX, endY)) {
+                            closestStartDistance = this.euclideanDistance(midPoint.X, midPoint.Y, startX, startY);
+                            closestStartRect = rectangle;
+                        } else {
+                            closestEndDistance = this.euclideanDistance(midPoint.X, midPoint.Y, startX, startY);
+                            closestEndRect = rectangle;
                         }
-                        else{
-                            closestEndDistance=this.euclideanDistance(midPoint.X,midPoint.Y,startX,startY);
-                            closestEndRect=rectangle
-                        }
-                    }
-                    else if(this.euclideanDistance(midPoint.X,midPoint.Y,startX,startY)<closestStartDistance){
-                        closestStartDistance=this.euclideanDistance(midPoint.X,midPoint.Y,startX,startY);
-                        closestStartRect=rectangle
+                    } else if (this.euclideanDistance(midPoint.X, midPoint.Y, startX, startY) < closestStartDistance) {
+                        closestStartDistance = this.euclideanDistance(midPoint.X, midPoint.Y, startX, startY);
+                        closestStartRect = rectangle;
+                    } else if (this.euclideanDistance(midPoint.X, midPoint.Y, endX, endY) < closestEndDistance) {
+                        closestEndDistance = this.euclideanDistance(midPoint.X, midPoint.Y, startX, startY);
+                        closestEndRect = rectangle;
                     }
-                    else if(this.euclideanDistance(midPoint.X,midPoint.Y,endX,endY)<closestEndDistance){
-                        closestEndDistance=this.euclideanDistance(midPoint.X,midPoint.Y,startX,startY);
-                        closestEndRect=rectangle
-                    }
-                    
                 });
-                const inkToDelete:Doc=lineArray[j];
-                if(typeof closestStartRect.x==='number'&&typeof closestStartRect.y==='number'&&typeof closestEndRect.x==='number'&&typeof closestEndRect.y==='number'&&typeof closestStartRect.width==='number'&&typeof closestStartRect.height==='number'&&typeof closestEndRect.height==='number'&&typeof closestEndRect.width==='number'){
+                const inkToDelete: Doc = lineArray[j];
+                if (
+                    typeof closestStartRect.x === 'number' &&
+                    typeof closestStartRect.y === 'number' &&
+                    typeof closestEndRect.x === 'number' &&
+                    typeof closestEndRect.y === 'number' &&
+                    typeof closestStartRect.width === 'number' &&
+                    typeof closestStartRect.height === 'number' &&
+                    typeof closestEndRect.height === 'number' &&
+                    typeof closestEndRect.width === 'number'
+                ) {
                     const points: PointData[] = [
                         { X: closestStartRect.x, Y: closestStartRect.y },
                         { X: closestStartRect.x, Y: closestStartRect.y },
                         { X: closestEndRect.x, Y: closestEndRect.y },
-                        { X: closestEndRect.x, Y: closestEndRect.y }
+                        { X: closestEndRect.x, Y: closestEndRect.y },
                     ];
-                    let inkX=0;
-                    let inkY=0;
-                    if(this.getMidPoint(closestEndRect).X<this.getMidPoint(closestStartRect).X){
-                        inkX=this.getMidPoint(closestEndRect).X
-                    }
-                    else{
-                        inkX=this.getMidPoint(closestStartRect).X
+                    let inkX = 0;
+                    let inkY = 0;
+                    if (this.getMidPoint(closestEndRect).X < this.getMidPoint(closestStartRect).X) {
+                        inkX = this.getMidPoint(closestEndRect).X;
+                    } else {
+                        inkX = this.getMidPoint(closestStartRect).X;
                     }
-                    if(this.getMidPoint(closestEndRect).Y<this.getMidPoint(closestStartRect).Y){
-                        inkY=this.getMidPoint(closestEndRect).Y
+                    if (this.getMidPoint(closestEndRect).Y < this.getMidPoint(closestStartRect).Y) {
+                        inkY = this.getMidPoint(closestEndRect).Y;
+                    } else {
+                        inkY = this.getMidPoint(closestStartRect).Y;
                     }
-                    else{
-                        inkY=this.getMidPoint(closestStartRect).Y
-                    }
-                    const newInkDoc:Doc=Docs.Create.InkDocument(
-                        points,
-                        { title: 'stroke',
-                        x: inkX,
-                        y: inkY,
-                        _width: Math.abs(closestEndRect.x+closestEndRect.width/2-closestStartRect.x-closestStartRect.width/2),
-                        _height: Math.abs(closestEndRect.y+closestEndRect.height/2-closestStartRect.y-closestStartRect.height/2),
-                        stroke_showLabel: BoolCast(Doc.UserDoc().activeInkHideTextLabels)}, // prettier-ignore
-                        1)
-                    
-                    DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
+                    const newInkDoc = Docs.Create.AudioDocument(''); // get rid of this!!
+                    // const newInkDoc:Doc=Docs.Create.InkDocument(
+                    //     points,
+                    //     { title: 'stroke',
+                    //     x: inkX,
+                    //     y: inkY,
+                    //     strokeWidth: Math.abs(closestEndRect.x+closestEndRect.width/2-closestStartRect.x-closestStartRect.width/2),
+                    //     _height: Math.abs(closestEndRect.y+closestEndRect.height/2-closestStartRect.y-closestStartRect.height/2),
+                    //     stroke_showLabel: BoolCast(Doc.UserDoc().activeInkHideTextLabels)}, // prettier-ignore
+                    //     1)
+
+                    DocumentManager.Instance.AddViewRenderedCb(this.Document, docViewForYourCollection => {
                         if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
-                            if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
-                                 docViewForYourCollection.ComponentView?.removeDocument(inkToDelete)
-                                 docViewForYourCollection.ComponentView?.addDocument(newInkDoc);
-                            
+                            if (docViewForYourCollection.ComponentView.addDocument && docViewForYourCollection.ComponentView.removeDocument) {
+                                docViewForYourCollection.ComponentView?.removeDocument(inkToDelete);
+                                docViewForYourCollection.ComponentView?.addDocument(newInkDoc);
 
-                            
                                 // const bruh2= DocListCast(this.Document.data).filter(doc => doc.title === 'line' || doc.title === 'stroke').map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke).map(stroke => stroke?.ComponentView);
                                 // console.log(bruh2)
                                 // console.log((bruh2[0] as InkingStroke)?.inkScaledData())
                             }
                         }
-                    });    
-                }           
+                    });
+                }
             }
         }
     }
-    getMidPoint(rectangle:Doc){
-        let midPoint={X:0,Y:0}
-        if(typeof rectangle.x ==='number' && typeof rectangle.width==='number'&&typeof rectangle.y ==='number' && typeof rectangle.height==='number'){
-            midPoint={X:rectangle.x+rectangle.width/2,Y:rectangle.y+rectangle.height/2};
+    getMidPoint(rectangle: Doc) {
+        let midPoint = { X: 0, Y: 0 };
+        if (typeof rectangle.x === 'number' && typeof rectangle.width === 'number' && typeof rectangle.y === 'number' && typeof rectangle.height === 'number') {
+            midPoint = { X: rectangle.x + rectangle.width / 2, Y: rectangle.y + rectangle.height / 2 };
         }
-        return midPoint
+        return midPoint;
     }
     euclideanDistance(x1: number, y1: number, x2: number, y2: number): number {
         const deltaX = x2 - x1;
@@ -486,7 +492,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <button className="backButton" type="button" onClick={this.optionButton}>
                             Back
                         </button>
-                        <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange}onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+                        <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
                         <div className="rightButtons">
                             <button className="generateButton" type="button" onClick={this.handleRenderClick}>
                                 Generate
@@ -505,14 +511,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             </div>
         );
     }
-    handleConvertButton=()=>{
+    handleConvertButton = () => {
         this.Document.menuState = 'mermaidCode';
-        if(typeof this.Document.gptMermaidCode==='string'){
-            this.createInputValue=this.removeFirstEmptyLine(this.Document.gptMermaidCode);
-            console.log(this.Document.gptMermaidCode)
+        if (typeof this.Document.gptMermaidCode === 'string') {
+            this.createInputValue = this.removeFirstEmptyLine(this.Document.gptMermaidCode);
+            console.log(this.Document.gptMermaidCode);
             this.renderMermaidAsync(this.Document.gptMermaidCode);
         }
-    }
+    };
     removeFirstEmptyLine(input: string): string {
         const lines = input.split('\n');
         let emptyLineRemoved = false;
@@ -525,7 +531,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         });
         return resultLines.join('\n');
     }
-    
+
     renderMermaidCode(): React.ReactNode {
         return (
             <div ref={this._dragRef} className="DiagramBox-wrapper">
@@ -557,7 +563,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             </button>
                         </div>
                     )}
-                    <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor}/>
+                    <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} />
                     <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                 </div>
             </div>
@@ -576,14 +582,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         B --> C{Let me think}
         C -->|One| D[Laptop]
         C -->|Two| E[iPhone]
-        C -->|Three| F[fa:fa-car Car]`
+        C -->|Three| F[fa:fa-car Car]`;
         this.renderMermaidAsync(this.createInputValue);
     };
     pieButton = () => {
         this.createInputValue = `pie title Pets adopted by volunteers
         "Dogs" : 386
         "Cats" : 85
-        "Rats" : 15`
+        "Rats" : 15`;
         this.renderMermaidAsync(this.createInputValue);
     };
     timelineButton = () => {