diff options
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 75 |
1 files changed, 59 insertions, 16 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 6f01d3f3e..8cc33baca 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -95,7 +95,6 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil @action onPointerDown = (e: React.PointerEvent) => { - console.log('pointerdown'); if (!(e.target as any)?.className?.toString().startsWith('lm_')) { if ([InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { this._points.push({ X: e.clientX, Y: e.clientY }); @@ -135,9 +134,7 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil isScribble(inkPoints: any) { const ffView = DocumentView.allViews().find(view => view.ComponentView instanceof CollectionFreeFormView); const points = this._points.map(p => ({ X: p.X, Y: p.Y })); - console.log(points); const cuspArray = this.getNumberOfCusps(points); - console.log(cuspArray); let cuspBooleanArray: boolean[] = []; let docsToDelete: Doc[] = []; const childDocs = (ffView?.ComponentView as CollectionFreeFormView).childDocs; @@ -146,36 +143,40 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil if (cuspArray.length > 4) { console.log('there are enough cusps'); for (let i = 0; i < cuspArray.length - 2; i++) { - outerLoop: for (let doc of childDocs) { + let hasDocInTriangle = false; + for (let doc of childDocs) { const point1 = cuspArray[i]; const point2 = cuspArray[i + 1]; const point3 = cuspArray[i + 2]; const triangleObject = { p1: { X: point1.X, Y: point1.Y }, p2: { X: point2.X, Y: point2.Y }, p3: { X: point3.X, Y: point3.Y } }; console.log((DocumentView.getDocumentView(doc)?.ComponentView as InkingStroke).inkScaledData().inkData.map(point => ({ X: point.X, Y: point.Y }))); - console.log(doc.title); + console.log(triangleObject); if (doc.title === 'line') { if (this.doesLineIntersectTriangle((DocumentView.getDocumentView(doc)?.ComponentView as InkingStroke).inkScaledData().inkData, triangleObject)) { docsToDelete.push(doc); + hasDocInTriangle = true; cuspBooleanArray.push(true); - break outerLoop; } } else { if (this.isAnyPointInTriangle(triangleObject, (DocumentView.getDocumentView(doc)?.ComponentView as InkingStroke).inkScaledData().inkData)) { docsToDelete.push(doc); + hasDocInTriangle = true; cuspBooleanArray.push(true); - break outerLoop; } } } - cuspBooleanArray.push(false); + cuspBooleanArray.push(hasDocInTriangle); } if (this.determineIfScribble(cuspBooleanArray)) { docsToDelete.forEach(doc => { ffView?.ComponentView?.removeDocument?.(doc); }); + this._points = []; + return true; } } } + return false; } determineIfScribble(cuspBooleanArray: boolean[]) { if (!cuspBooleanArray) { @@ -184,11 +185,12 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil const quarterArrayLength = Math.ceil((cuspBooleanArray.length - 2) * 0.25); let hasObjectInFirstAndLast25 = true; for (let i = 0; i < quarterArrayLength; i++) { - let hasObjectInFirstAndLast25 = true; if (cuspBooleanArray[i] == false || cuspBooleanArray[cuspBooleanArray.length - 1 - i] == false) { hasObjectInFirstAndLast25 = false; } } + console.log(cuspBooleanArray); + console.log(hasObjectInFirstAndLast25); const trueCount = cuspBooleanArray.filter(value => value).length; const percentageTrues = trueCount / cuspBooleanArray.length; if (percentageTrues > 0.75 || hasObjectInFirstAndLast25) { @@ -241,12 +243,6 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil const A = line1[0]; const B = line1[line1.length - 1]; const { start: C, end: D } = line2; - - console.log(A); - console.log(B); - console.log(C); - console.log(D); - console.log(line1); const denominator = (B.X - A.X) * (D.Y - C.Y) - (B.Y - A.Y) * (D.X - C.X); if (denominator === 0) return false; @@ -276,7 +272,6 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil else { // need to decide when to turn gestures back on const result = points.length > 2 && GestureUtils.GestureRecognizer.Recognize([points]); - this.isScribble(points); let actionPerformed = false; //console.log(result); if (Doc.UserDoc().recognizeGestures && result && result.Score > 0.7) { @@ -294,12 +289,17 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil console.log('scribble'); break; case Gestures.RightAngle: + this.convertToText(); console.log('RightAngle'); default: } } // if no gesture (or if the gesture was unsuccessful), "dry" the stroke into an ink document + if (this.isScribble(points)) { + this._points = []; + return; + } if (!actionPerformed) { const newPoints = this._points.reduce((p, pts) => { p.push([pts.X, pts.Y]); @@ -328,6 +328,26 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil } this._points.length = 0; }; + convertToText() { + const ffView = DocumentView.allViews().find(view => view.ComponentView instanceof CollectionFreeFormView); + const collectionDocs = (ffView?.ComponentView as CollectionFreeFormView).childDocs.filter(doc => doc.type === 'collection').filter(doc => doc.transcription); + (ffView?.ComponentView as CollectionFreeFormView).childDocs.forEach(doc => { + console.log(doc.x); + console.log(doc.y); + console.log(doc.width); + console.log(doc.height); + if (typeof doc.width === 'number' && typeof doc.height === 'number' && typeof doc.x === 'number' && typeof doc.y === 'number') { + const rect1 = { minX: doc.x, maxX: doc.x + doc.width, minY: doc.y, maxY: doc.y + doc.height }; + console.log(rect1); + console.log(this.getExtremeCoordinates(this._points)); + const points = this._points.map(p => ({ X: p.X, Y: p.Y })); + console.log(points); + if (this.isRectangleOverlap(rect1, this.getExtremeCoordinates(this._points))) { + console.log('somethings in'); + } + } + }); + } getNumberOfCusps(points: any) { let arrayOfPoints: any[] = []; arrayOfPoints.push(points[0]); @@ -346,6 +366,29 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil arrayOfPoints.push(points[points.length - 1]); return arrayOfPoints; } + getExtremeCoordinates(coordinates: any[]) { + if (coordinates.length === 0) { + throw new Error('Coordinates array is empty'); + } + + let minX = coordinates[0].X; + let maxX = coordinates[0].X; + let minY = coordinates[0].Y; + let maxY = coordinates[0].Y; + + coordinates.forEach(coord => { + if (coord.X < minX) minX = coord.X; + if (coord.X > maxX) maxX = coord.X; + if (coord.Y < minY) minY = coord.Y; + if (coord.Y > maxY) maxY = coord.Y; + }); + return { + minX, + maxX, + minY, + maxY, + }; + } find_angle(A: any, B: any, C: any) { let AB = Math.sqrt(Math.pow(B.X - A.X, 2) + Math.pow(B.Y - A.Y, 2)); let BC = Math.sqrt(Math.pow(B.X - C.X, 2) + Math.pow(B.Y - C.Y, 2)); |