1 files changed, 22 insertions, 24 deletions

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index 7e685288d..5fe0c0f8a 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -5,7 +5,7 @@ import { Doc } from "../../fields/Doc";
 import { ControlPoint, InkData, PointData } from "../../fields/InkField";
 import { listSpec } from "../../fields/Schema";
 import { Cast } from "../../fields/Types";
-import { setupMoveUpEvents } from "../../Utils";
+import { setupMoveUpEvents, Utils } from "../../Utils";
 import { Transform } from "../util/Transform";
 import { UndoManager } from "../util/UndoManager";
 import { Colors } from "./global/globalEnums";
@@ -15,17 +15,16 @@ export interface InkControlProps {
     inkDoc: Doc;
     inkCtrlPoints: InkData;
     screenCtrlPoints: InkData;
-    inkStrokeSamplePts: PointData[];
-    screenStrokeSamplePoints: PointData[];
     format: number[];
     ScreenToLocalTransform: () => Transform;
+    nearestScreenPt: () => PointData | undefined;
 }
 
 @observer
 export class InkControls extends React.Component<InkControlProps> {
+
     @observable private _overControl = -1;
     @observable private _overAddPoint = -1;
-
     /**
      * Handles the movement of a selected control point when the user clicks and drags.
      * @param controlIndex The index of the currently selected control point.
@@ -57,6 +56,14 @@ export class InkControls extends React.Component<InkControlProps> {
                 }));
         }
     }
+    /**
+     * Updates whether a user has hovered over a particular control point or point that could be added
+     * on click.
+     */
+    @action onEnterControl = (i: number) => { this._overControl = i; };
+    @action onLeaveControl = () => { this._overControl = -1; };
+    @action onEnterAddPoint = (i: number) => { this._overAddPoint = i; };
+    @action onLeaveAddPoint = () => { this._overAddPoint = -1; };
 
     /**
      * Deletes the currently selected point.
@@ -79,19 +86,11 @@ export class InkControls extends React.Component<InkControlProps> {
         }
     }
 
-    /**
-     * Updates whether a user has hovered over a particular control point or point that could be added
-     * on click.
-     */
-    @action onEnterControl = (i: number) => { this._overControl = i; };
-    @action onLeaveControl = () => { this._overControl = -1; };
-    @action onEnterAddPoint = (i: number) => { this._overAddPoint = i; };
-    @action onLeaveAddPoint = () => { this._overAddPoint = -1; };
-
     render() {
         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[] = [];
@@ -109,24 +108,23 @@ export class InkControls extends React.Component<InkControlProps> {
 
         const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
         const rectHdlSize = (i: number) => this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4;
+
+        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  */}
-            {this.props.screenStrokeSamplePoints.map((pts, i) =>
-                <circle key={i}
-                    cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                    cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+            {!nearestScreenPt ? (null) :
+                <circle key={"npt"}
+                    cx={(nearestScreenPt.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
+                    cy={(nearestScreenPt.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
                     r={screenSpaceLineWidth * 4}
-                    fill={this._overAddPoint === i ? "#00007777" : "transparent"}
-                    stroke={this._overAddPoint === i ? "#00007777" : "transparent"}
+                    fill={"#00007777"}
+                    stroke={"#00007777"}
                     strokeWidth={0}
-                    onPointerDown={() => formatInstance?.addPoints(this.props.inkStrokeSamplePts[i].X, this.props.inkStrokeSamplePts[i].Y, this.props.inkStrokeSamplePts, i, inkCtrlPts)}
-                    onMouseEnter={() => this.onEnterAddPoint(i)}
-                    onMouseLeave={this.onLeaveAddPoint}
-                    pointerEvents="all"
+                    pointerEvents="none"
                     cursor="all-scroll"
                 />
-            )}
+            }
             {sreenCtrlPoints.map((control, i) =>
                 <rect key={i}
                     x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize(i) / 2}