diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 77 |
1 files changed, 41 insertions, 36 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 26cffb18b..1cd6de55c 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -138,6 +138,10 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil /** * this method returns if what the user drew is a scribble. if it is, it will determine what documents need * to be deleted and then it will delete them. + * I changed it so it doesnt use triangles. It will modify an intersect array, with its length being + * how many sharp cusps there are. The first index will have a boolean that is based on if there is an + * intersection in the first 1/length percent of the stroke. The second index will be if there is an intersection + * in the 2nd 1/length percent of the stroke. This array will be used in determineInScribble(). * @returns */ isScribble(inkData: InkData) { @@ -153,29 +157,26 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil let childDocs = (ffView?.ComponentView as CollectionFreeFormView).childDocs.slice(0, -1); childDocs.filter(doc => doc.type === 'ink').map(doc => DocumentView.getDocumentView(doc, DocumentView.getDocumentView(doc))); if ((ffView?.ComponentView as CollectionFreeFormView).childDocs) { - //how many cusps the scribble hsa for (const doc of childDocs) { const otherInk = DocumentView.getDocumentView(doc)?.ComponentView as InkingStroke; - if (otherInk instanceof InkingStroke) { - const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] }; - const otherScreenPts = otherInkData.map(point => otherInk.ptToScreen(point)); - if (this.isRectangleOverlap(this.getExtremeCoordinates(otherScreenPts), this.getExtremeCoordinates(inkData))) { - const intersects = this.doInksIntersect(inkData, otherScreenPts); - intersects.forEach(intersect => { - let percentage = ''; - if (intersect.includes('/')) { - const leftOfSlash = intersect.split('/')[0]; - percentage = leftOfSlash; - } else { - percentage = intersect; - } - intersectArray[Math.floor((percentage as unknown as number) * cuspArray.length)] = true; - const docsInBoundingBox = this.docsInBoundingBox(doc, childDocs); - childDocs = childDocs.filter(doc => !docsInBoundingBox.includes(doc)); - docsToDelete.push(...docsInBoundingBox); - docsToDelete.push(doc); - }); - } + const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] }; + const otherScreenPts = otherInkData.map(point => otherInk.ptToScreen(point)); + if (this.isRectangleOverlap(this.getExtremeCoordinates(otherScreenPts), this.getExtremeCoordinates(inkData))) { + const intersects = this.doInksIntersect(inkData, otherScreenPts); + intersects.forEach(intersect => { + let percentage = ''; + if (intersect.includes('/')) { + const leftOfSlash = intersect.split('/')[0]; + percentage = leftOfSlash; + } else { + percentage = intersect; + } + intersectArray[Math.floor((percentage as unknown as number) * cuspArray.length)] = true; + const docsInBoundingBox = this.docsInBoundingBox(doc, childDocs); + childDocs = childDocs.filter(doc => !docsInBoundingBox.includes(doc)); + docsToDelete.push(...docsInBoundingBox); + docsToDelete.push(doc); + }); } } console.log(intersectArray); @@ -192,6 +193,12 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil } return false; } + /** + * this will return all the docs overlapping with the maindocs bounding box + * @param mainDoc the bounding box of this doc will be used + * @param childDocs the array of all docs in collection + * @returns + */ docsInBoundingBox(mainDoc: Doc, childDocs: Doc[]): Doc[] { return childDocs.filter( doc => @@ -211,8 +218,8 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil } /** * this method determines if what the user drew is a scribble based on certain criteria. - * @param cuspBooleanArray will take in an array of booleans tht represent what triangles in the scribble - * has an object in it. the 1st triangle is the 0th index, 2nd triangle is the 1st index and so on. + * @param cuspBooleanArray will take in an array of booleans tht represent what sections(seperated by a cusp) in the scribble + * has an object in it. * @returns */ determineIfScribble(cuspBooleanArray: boolean[]) { @@ -243,11 +250,15 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil return !noOverlap; } /** - * determines if a line intersects a triangle. used for scribble gesture since the line doesnt have a lot - * of points across is so isPointInTriangle will not work for it. + * determines if inks intersect * @param line is pointData * @param triangle triangle with 3 points - * @returns true or false if it intersects + * @returns will return an array, with its lenght being equal to how many intersections there are betweent the 2 strokes. + * each item in the array will contain a number between 0-1 or a number 0-1 seperated by a comma. If one of the curves is a line, then + * then there will just be a number that reprents how far that intersection is along the scribble. For example, + * .1 means that the intersection occurs 10% into the scribble, so near the beginning of it. but if they are both curves, then + * it will return two numbers, one for each curve, seperated by a comma. Sometimes, the percentage it returns is inaccurate, + * espcially in the beginning and end parts of the stroke. dont know why. hope this makes sense */ // eslint-disable-next-line @typescript-eslint/no-explicit-any doInksIntersect(scribble: InkData, inkStroke: InkData): string[] { @@ -258,14 +269,14 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil for (let i = 0; i < scribble.length - 3; i += 4) { // iterate over each segment of bezier curve for (let j = 0; j < inkStroke.length - 3; j += 4) { - const intersectCurve: Bezier = InkField.Segment(scribble, i); // other curve - const eraserCurve: Bezier = InkField.Segment(inkStroke, j); // eraser curve - const points = eraserCurve.points.map(point => ({ + const scribbleCurve: Bezier = InkField.Segment(scribble, i); + const strokeCurve: Bezier = InkField.Segment(inkStroke, j); + const points = strokeCurve.points.map(point => ({ X: point.x, Y: point.y, })); if (ffView && ffView.ComponentView instanceof CollectionFreeFormView && this.isRectangleOverlap(extremeScribble, this.getExtremeCoordinates(points))) { - const result = (ffView.ComponentView as CollectionFreeFormView).bintersects(intersectCurve, eraserCurve)[0]; + const result = (ffView.ComponentView as CollectionFreeFormView).bintersects(scribbleCurve, strokeCurve)[0]; if (result !== undefined) { intersectArray.push(result.toString()); } @@ -318,11 +329,6 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil case Gestures.Rectangle: case Gestures.Circle: this.makeBezierPolygon(Name, true); - setTimeout(() => { - const ffView = DocumentView.allViews().find(view => view.ComponentView instanceof CollectionFreeFormView); - const scribbleInk = (ffView?.ComponentView as CollectionFreeFormView).childDocs[(ffView?.ComponentView as CollectionFreeFormView).childDocs.length - 1]; - //this.isScribble((DocumentView.getDocumentView(scribbleInk)?.ComponentView as InkingStroke).inkScaledData().inkData); - }, 1); return this.dispatchGesture(name); case Gestures.RightAngle: return this.convertToText().length > 0; @@ -342,7 +348,6 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil } } this._points.length = 0; - //console.log((DocumentView.getDocumentView(scribbleInk)?.ComponentView as InkingStroke).inkScaledData()); }; /** * used in the rightAngle gesture to convert handwriting into text. will only work on collections |