radius erase re-implement started

3 files changed, 54 insertions, 8 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2d2f5fe4a..78a28ed62 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1104,7 +1104,7 @@ export namespace Docs {
             I.color = color;
             I.fillColor = fillColor;
             I.stroke = new InkField(points);
-            I.stroke_width = strokeWidth;
+            I.stroke_xwidth = strokeWidth;
             I.stroke_bezier = stroke_bezier;
             I.stroke_startMarker = arrowStart;
             I.stroke_endMarker = arrowEnd;
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 92644d3c5..a91fc5995 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -330,6 +330,28 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() impleme
         );
     };
 
+    splitByEraser = (inkCoords: {X: number; Y: number}, radius: number) => {
+        // const ptsXscale = (NumCast(radius) - NumCast(radius)) / (oldXrange.max - oldXrange.min || 1) || 1;
+        // const ptsYscale = (NumCast(doc._height) - NumCast(doc.stroke_width)) / (oldYrange.max - oldYrange.min || 1) || 1;
+        // const newPoints = func(this.DocumentView?.(), ink, ptsXscale, ptsYscale, NumCast(radius));
+        const points: { X: number; Y: number }[] = [
+            { X: inkCoords.X + radius, Y: inkCoords.Y },
+            { X: inkCoords.X + radius, Y: inkCoords.Y - radius },
+            { X: inkCoords.X + radius, Y: inkCoords.Y - radius },
+            { X: inkCoords.X, Y: inkCoords.Y - radius },
+            { X: inkCoords.X - radius, Y: inkCoords.Y - radius },
+            { X: inkCoords.X - radius, Y: inkCoords.Y - radius },
+            { X: inkCoords.X - radius, Y: inkCoords.Y },
+            { X: inkCoords.X - radius, Y: inkCoords.Y + radius },
+            { X: inkCoords.X - radius, Y: inkCoords.Y + radius },
+            { X: inkCoords.X, Y: inkCoords.Y + radius },
+            { X: inkCoords.X + radius, Y: inkCoords.Y + radius },
+            { X: inkCoords.X + radius, Y: inkCoords.Y + radius }
+        ];
+        const eraserCircle = new InkField(points);
+        return points;
+    }
+
     _subContentView: ViewBoxInterface | undefined;
     setSubContentView = (doc: ViewBoxInterface) => (this._subContentView = doc);
     @computed get fillColor() {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index da4c53d66..26afa5297 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,4 +1,4 @@
-import { findSegment } from '@turf/turf';
+import { findSegment, intersect } from '@turf/turf';
 import { Bezier } from 'bezier-js';
 import { Colors } from 'browndash-components';
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
@@ -755,8 +755,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     if (Doc.ActiveTool === InkTool.SegmentEraser) {
                         segments = this.segmentErase(intersect.inkView, intersect.t); // intersect.t is where the eraser intersected the ink stroke - want to remove the segment that starts at the intersection just before this t value and goes to the one just after it
                     } else if (Doc.ActiveTool === InkTool.RadiusEraser) {
-                        console.log("RADIUS");
-                        segments = this.radiusErase(intersect.inkView, intersect.t);
+                        const coords = this.props.ScreenToLocalTransform().inverse().transformPoint(e.clientX, e.clientY);
+                        const inkCoords = intersect.inkView.ComponentView?.ptFromScreen?.({X: coords[0], Y: coords[1]}); // coordinates in ink space
+                        if (inkCoords !== undefined) {
+                            segments = this.radiusErase(intersect.inkView, intersect.t, inkCoords);
+                        }
                     }
                         // } else if (Doc.ActiveTool === InkTool.RadiusEraser) {
                     //     segments = undefined;
@@ -840,16 +843,37 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     @action
-    radiusErase = (ink: DocumentView, eraseT: number): Segment[] => {
+    radiusErase = (ink: DocumentView, eraseT: number, inkCoords: {X: number, Y: number}): Segment[] => {
         const segments: Segment[] = [];
         var segment1: Segment = [];
         var segment2: Segment = [];
-        const eraseWidth = ActiveInkWidth() / 100;
-        const { inkData } = (ink?.ComponentView as InkingStroke).inkScaledData();
+        const eraseWidth = ActiveInkWidth();
+        const inkStroke = ink?.ComponentView as InkingStroke;
+        const { inkData } = (inkStroke).inkScaledData();
+
+        const eraserInkData = inkStroke.splitByEraser(inkCoords, eraseWidth) as InkData;
+
+        const tVals: number[] = []; // should be the tvals of the intersections
+
+        for (var i = 0; i < eraserInkData.length - 3; i += 4) {
+            const currCurveT = Math.floor(i/4);
+            const eraserBezier = InkField.Segment(eraserInkData, i);
+            for (var j = 0; j < inkData.length; j +=4) {
+            const inkSegment: Bezier = InkField.Segment(inkData, i);
+                this.bintersects(inkSegment, eraserBezier).forEach((val: string | number, i: number) => {
+                    // Converting the Bezier.js Split type to a t-value number.
+                    const t = +val.toString().split('/')[0];
+                    if (i % 2 === 0 && !tVals.includes(t)) tVals.push(t); // bcz: Hack!  don't know why but intersection points are doubled from bezier.js (but not identical).
+                });
+            }
+        }
+
         for (var i = 0; i < inkData.length - 3; i += 4) {
             const currCurveT = Math.floor(i/4);
             const inkSegment: Bezier = InkField.Segment(inkData, i);
-            if (eraseT >= currCurveT && eraseT < currCurveT+1) {
+            if (tVals[0] >= currCurveT && tVals[0] < currCurveT+1) {
+                tVals.shift()
+                i -= 4;
                 if (eraseT - eraseWidth > currCurveT && eraseT + eraseWidth < currCurveT + 1) {
                     segment1.push(inkSegment.split(0, eraseT - currCurveT - eraseWidth));
                     segment2.push(inkSegment.split(eraseT - currCurveT + eraseWidth, 1));