From ed658f2e5340c85e4466068be6ea63dd3143cc50 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Wed, 25 Sep 2024 23:14:46 -0400
Subject: add some comments

---
 src/client/views/GestureOverlay.tsx | 77 ++++++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 36 deletions(-)

(limited to 'src')

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
-- 
cgit v1.2.3-70-g09d2