fixed adding point drag location. fixed broken indices on deleting.

3 files changed, 14 insertions, 24 deletions

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index 5fe0c0f8a..ee09273e3 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -90,7 +90,6 @@ export class InkControls extends React.Component<InkControlProps> {
         const formatInstance = InkStrokeProperties.Instance;
         if (!formatInstance) return (null);
 
-
         // Accessing the current ink's data and extracting all control points.
         const scrData = this.props.screenCtrlPoints;
         const sreenCtrlPoints: ControlPoint[] = [];
@@ -111,12 +110,10 @@ export class InkControls extends React.Component<InkControlProps> {
 
         const nearestScreenPt = this.props.nearestScreenPt();
         return (<svg>
-            {/*   should really have just one circle here that represents the neqraest point on the stroke to the users hover point.
-                   This points should be passed as a prop from InkingStroke's UI which should set it in its onPointerOver method  */}
             {!nearestScreenPt ? (null) :
                 <circle key={"npt"}
-                    cx={(nearestScreenPt.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                    cy={(nearestScreenPt.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+                    cx={nearestScreenPt.X}
+                    cy={nearestScreenPt.Y}
                     r={screenSpaceLineWidth * 4}
                     fill={"#00007777"}
                     stroke={"#00007777"}
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 115e75c2a..0b7fe5cd1 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -10,6 +10,7 @@ import { DocumentType } from "../documents/DocumentTypes";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { SelectionManager } from "../util/SelectionManager";
 import { undoBatch } from "../util/UndoManager";
+import { last } from "lodash";
 
 export class InkStrokeProperties {
     static Instance: InkStrokeProperties | undefined;
@@ -83,18 +84,8 @@ export class InkStrokeProperties {
             const newsegs = new Bezier(array).split(t);
             controls.splice(i, 4, ...[...newsegs.left.points.map(p => ({ X: p.x, Y: p.y })), ...newsegs.right.points.map(p => ({ X: p.x, Y: p.y }))]);
 
-            let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
             // Updating the indices of the control points whose handle tangency has been broken.
-            if (brokenIndices) {
-                brokenIndices = new List(brokenIndices.map((control) => {
-                    if (control > i) {
-                        return control + 4;
-                    } else {
-                        return control;
-                    }
-                }));
-            }
-            doc.brokenInkIndices = brokenIndices;
+            doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec("number"), []).map(control => control > i ? control + 4 : control));
             this._currentPoint = -1;
 
             return controls;
@@ -160,11 +151,14 @@ export class InkStrokeProperties {
     deletePoints = () => this.applyFunction((doc: Doc, ink: InkData) => {
         const newPoints: { X: number, Y: number }[] = [];
         const toRemove = Math.floor(((this._currentPoint + 2) / 4));
+        const last = this._currentPoint === ink.length - 1;
         for (let i = 0; i < ink.length; i++) {
             if (Math.floor((i + 2) / 4) !== toRemove && (toRemove !== 0 || i > 3)) {
                 newPoints.push({ X: ink[i].X, Y: ink[i].Y });
             }
         }
+        doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec("number"), []).map(control => control >= toRemove * 4 ? control - 4 : control));
+        if (last) newPoints.splice(newPoints.length - 3, 2);
         this._currentPoint = -1;
         if (newPoints.length < 4) return undefined;
         if (newPoints.length === 4) {
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 83fe04893..40bed0eca 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -141,9 +141,9 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
     @action
     onPointerOver = (e: React.PointerEvent) => {
         const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
-        const screenOrigin = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
         const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth)[0];
-        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X, point.Y)).map(p => ({ X: p[0], Y: p[1] }));
+        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint((point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
+            (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2)).map(p => ({ X: p[0], Y: p[1] }));
         const screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth / 2;
         const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth / 2;
         var nearest = Number.MAX_SAFE_INTEGER;
@@ -151,16 +151,15 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         this._nearestSeg = -1;
         this._nearestScrPt = { X: 0, Y: 0 };
         for (var i = 0; i < screenPts.length - 3; i += 4) {
-            const array = [{ x: screenPts[i].X, y: screenPts[i].Y }, { x: screenPts[i + 1].X, y: screenPts[i + 1].Y }, { x: screenPts[i + 2].X, y: screenPts[i + 2].Y }, { x: screenPts[i + 3].X, y: screenPts[i + 3].Y }];
-            const point = new Bezier(array).project({ x: e.clientX + screenLeft - screenOrigin[0], y: e.clientY + screenTop - screenOrigin[1] });
+            const array = [screenPts[i], screenPts[i + 1], screenPts[i + 2], screenPts[i + 3]];
+            const point = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).project({ x: e.clientX, y: e.clientY });
             if (point.t) {
-                const dist = (point.x - screenLeft - e.clientX + screenOrigin[0]) * (point.x - screenLeft - e.clientX + screenOrigin[0]) +
-                    (point.y - screenTop - e.clientY + screenOrigin[1]) * (point.y - screenTop - e.clientY + screenOrigin[1]);
+                const dist = (point.x - e.clientX) * (point.x - e.clientX) + (point.y - e.clientY) * (point.y - e.clientY);
                 if (dist < nearest) {
                     nearest = dist;
                     this._nearestT = point.t;
                     this._nearestSeg = i;
-                    this._nearestScrPt = { X: point.x, Y: point.y };
+                    this._nearestScrPt = { X: point.x - screenLeft, Y: point.y - screenTop };
                 }
             }
         }
@@ -234,7 +233,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     overflow: "visible",
                 }}
                 onPointerLeave={action(e =>
-                    this._nearestScrPt = undefined
+                    console.log("")  //this._nearestScrPt = undefined
                 )}
                 onPointerMove={this.props.isSelected() ? this.onPointerOver : undefined}
                 onPointerDown={this.onPointerDown}