working on ink stroke intersection

1 files changed, 26 insertions, 1 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index febccbfcc..f0064d15e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -5,7 +5,7 @@ import { DateField } from "../../../../fields/DateField";
 import { Doc, HeightSym, Opt, StrListCast, WidthSym } from "../../../../fields/Doc";
 import { collectionSchema, documentSchema } from "../../../../fields/documentSchemas";
 import { Id } from "../../../../fields/FieldSymbols";
-import { InkData, InkField, InkTool } from "../../../../fields/InkField";
+import { InkData, InkField, InkTool, PointData } from "../../../../fields/InkField";
 import { List } from "../../../../fields/List";
 import { ObjectField } from "../../../../fields/ObjectField";
 import { RichTextField } from "../../../../fields/RichTextField";
@@ -51,6 +51,7 @@ import "./CollectionFreeFormView.scss";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
 import { ColorScheme } from "../../../util/SettingsManager";
+import { Bezier } from "bezier-js";
 
 export const panZoomSchema = createSchema({
     _panX: "number",
@@ -111,6 +112,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @observable _pullDirection: string = "";
     @observable _showAnimTimeline = false;
     @observable _clusterSets: (Doc[])[] = [];
+    @observable _prevPoint: PointData = { X: -1, Y: -1 };
+    @observable _currPoint: PointData = { X: -1, Y: -1 };
     @observable _timelineRef = React.createRef<Timeline>();
     @observable _marqueeRef = React.createRef<HTMLDivElement>();
     @observable _keyframeEditing = false;
@@ -450,6 +453,11 @@ 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);
+                }
                 e.stopPropagation();
                 e.preventDefault();
             }
@@ -595,6 +603,7 @@ 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();
@@ -627,6 +636,10 @@ 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 (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) {
             if (this.props.isContentActive(true)) e.stopPropagation();
         } else if (!e.cancelBubble) {
@@ -642,6 +655,18 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         }
     }
 
+    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;
+        // });
+        return null;
+    }
+
     handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
         if (!e.cancelBubble) {
             const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);