ink document iteration not working

2 files changed, 36 insertions, 18 deletions

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 81a888256..ecb46a5b3 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -130,7 +130,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const inkPt = {
             X: (docPt[0] - inkStrokeWidth / 2) / inkScaleX + inkStrokeWidth / 2 + inkLeft,
             Y: (docPt[1] - inkStrokeWidth / 2) / inkScaleY + inkStrokeWidth / 2 + inkTop,
-        }
+        };
         return inkPt;
     }
     ptToScreen = (inkPt: { X: number, Y: number }) => {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f0064d15e..0941db5f8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -114,6 +114,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @observable _clusterSets: (Doc[])[] = [];
     @observable _prevPoint: PointData = { X: -1, Y: -1 };
     @observable _currPoint: PointData = { X: -1, Y: -1 };
+    @observable _deleteList: DocumentView[] = [];
     @observable _timelineRef = React.createRef<Timeline>();
     @observable _marqueeRef = React.createRef<HTMLDivElement>();
     @observable _keyframeEditing = false;
@@ -453,11 +454,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             }
             // eraser plus anything else mode
             else {
-                if (InteractionUtils.IsType(e, InteractionUtils.ERASERTYPE)) {
-                    this._prevPoint = this._currPoint = { X: e.clientX, Y: e.clientY };
-                    const intersectStroke = this.getInkIntersection();
-                    if (intersectStroke) intersectStroke.props.removeDocument?.(intersectStroke.props.Document);
-                }
+                this._prevPoint = { X: e.clientX, Y: e.clientY };
                 e.stopPropagation();
                 e.preventDefault();
             }
@@ -603,11 +600,17 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     onPointerUp = (e: PointerEvent): void => {
         if (!InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) {
-            this._prevPoint = this._currPoint = { X: -1, Y: -1 };
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             this.removeMoveListeners();
             this.removeEndListeners();
+            if (CurrentUserUtils.SelectedTool !== InkTool.None) {
+                this._deleteList.forEach(ink => {
+                    ink.props.removeDocument?.(ink.props.Document);
+                });
+                this._prevPoint = this._currPoint = { X: -1, Y: -1 };
+                this._deleteList = [];
+            }
         }
     }
 
@@ -636,9 +639,15 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     onPointerMove = (e: PointerEvent): void => {
         if (this.props.Document._isGroup) return; // groups don't pan when dragged -- instead let the event go through to allow the group itself to drag
         if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) return;
-        if (InteractionUtils.IsType(e, InteractionUtils.ERASERTYPE)) {
-            this._prevPoint = this._currPoint;
-            this._currPoint = { X: e.clientX, Y: e.clientY }
+        if (CurrentUserUtils.SelectedTool !== InkTool.None) {
+            this._currPoint = { X: e.clientX, Y: e.clientY };
+            const intersectStroke = this.getInkIntersection();
+            if (intersectStroke) {
+                if (!this._deleteList.includes(intersectStroke)) {
+                    this._deleteList.push(intersectStroke);
+                    // lower intersectStroke opacity to give user a visual indicator
+                }
+            }
         }
         if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) {
             if (this.props.isContentActive(true)) e.stopPropagation();
@@ -655,15 +664,24 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         }
     }
 
+    /**
+     * Determines if the Eraser tool has intersected with an ink stroke in the current freeform collection.
+     * @returns The DocumentView of the intersected stroke.
+     */
     getInkIntersection = (): DocumentView | null => {
-        // this.children.filter((doc: Doc) => doc.type === DocumentType.INK)
-        // .forEach((doc: Doc) => {
-        //     const inkView = DocumentManager.Instance.getDocumentView(doc, this.props.CollectionView);
-        //     const ctrlPoints = inkView?.ComponentView?.inkScaledData().inkData.slice();
-        //     const array = [ctrlPoints[i], ctrlPoints[i + 1], ctrlPoints[i + 2], ctrlPoints[i + 3]];
-        //     const intersects = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).intersects({p1: {x: this._prevPoint.X, y: this._prevPoint.Y}, p2: {x: this._currPoint.X, y: this._currPoint.Y}});
-        //     if (intersects) return inkView;
-        // });
+        this.props.childDocuments?.filter(doc => doc.type === DocumentType.INK)
+            .forEach(doc => {
+                console.log("in for each");
+                const inkView = DocumentManager.Instance.getDocumentView(doc, this.props.CollectionView);
+                const ctrlPoints = Cast(inkView?.dataDoc[this.props.fieldKey], InkField)?.inkData ?? [];
+                for (var i = 0; i < ctrlPoints.length - 3; i += 4) {
+                    const array = [ctrlPoints[i], ctrlPoints[i + 1], ctrlPoints[i + 2], ctrlPoints[i + 3]];
+                    const intersects = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).intersects(
+                        { p1: { x: this._prevPoint.X, y: this._prevPoint.Y }, 
+                          p2: { x: this._currPoint.X, y: this._currPoint.Y } });
+                    if (intersects) return inkView;
+                }
+            });
         return null;
     }