From 74c9d7cb47281dab59908eea5384b370f493d087 Mon Sep 17 00:00:00 2001 From: Zachary Zhang Date: Wed, 10 Jul 2024 13:29:50 -0400 Subject: work in progres --- src/client/views/nodes/DiagramBox.tsx | 162 ++++++++++++++++++---------------- 1 file changed, 84 insertions(+), 78 deletions(-) (limited to 'src/client/views/nodes') 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() { // () => 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() { } } 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() { 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) { + 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() { -