indicator appears on hover for ink control points to be added

2 files changed, 21 insertions, 10 deletions

diff --git a/src/client/views/InkControl.tsx b/src/client/views/InkControl.tsx
index ae0fc0b22..accb16f61 100644
--- a/src/client/views/InkControl.tsx
+++ b/src/client/views/InkControl.tsx
@@ -51,8 +51,7 @@ export class InkControl extends React.Component<InkControlProps> {
     }
 
     /**
-     * Deletes the currently selected points.
-     * @param e Keyboard Event.
+     * Deletes the currently selected point.
      */
     @action
     onDelete = (e: KeyboardEvent) => {
@@ -63,7 +62,6 @@ export class InkControl extends React.Component<InkControlProps> {
 
     /**
      * Changes the current selected control point.
-     * @param i The number of the point to be selected.
      */
     @action
     changeCurrPoint = (i: number) => {
@@ -85,8 +83,8 @@ export class InkControl extends React.Component<InkControlProps> {
         return (
             <svg height="10" width="10" key={`ctrl${control.I}`}>
                 <rect 
-                    x={(control.X - left) * scaleX} 
-                    y={(control.Y - top) * scaleY} 
+                    x={(control.X - left - strokeWidth / 2) * scaleX} 
+                    y={(control.Y - top - strokeWidth / 2) * scaleY} 
                     height={this._overControl ? strokeWidth * 1.5 : strokeWidth} 
                     width={this._overControl ? strokeWidth * 1.5 : strokeWidth} 
                     strokeWidth={strokeWidth / 6} stroke="#1F85DE" 
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 9555557ec..b2ef76882 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -1,4 +1,4 @@
-import { action } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../fields/Doc";
 import { documentSchema } from "../../fields/documentSchemas";
@@ -26,6 +26,9 @@ const InkDocument = makeInterface(documentSchema);
 @observer
 export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>(InkDocument) {
     private _controlUndo?: UndoManager.Batch;
+    @observable private _overAddPoint = -1;
+
+    static readonly MaskDim = 50000;
 
     public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); }
 
@@ -35,6 +38,17 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
     }
 
     @action
+    onPointerEnter = (i: number) => {
+        this._overAddPoint = i;
+    }
+
+    @action
+    onPointerLeave = () => {
+        this._overAddPoint = -1;
+    }
+
+
+    @action
     public static toggleMask = (inkDoc: Doc) => {
         inkDoc.isInkMask = !inkDoc.isInkMask;
         inkDoc._backgroundColor = inkDoc.isInkMask ? "rgba(0,0,0,0.7)" : undefined;
@@ -91,7 +105,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         }
     }
 
-    static readonly MaskDim = 50000;
     render() {
         TraceMobx();
         const formatInstance = InkStrokeProperties.Instance;
@@ -121,7 +134,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
             StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5 && lineBot - lineTop > 1 && lineRgt - lineLft > 1, false);
         
-        const selectedLine = InteractionUtils.CreatePolyline(data, lineLft - strokeWidth * 4 * scaleX, lineTop - strokeWidth * 4 * scaleX, "#1F85DE", strokeWidth / 6, strokeWidth / 6,
+        const selectedLine = InteractionUtils.CreatePolyline(data, lineLft - strokeWidth * 3, lineTop - strokeWidth * 3, "#1F85DE", strokeWidth / 6, strokeWidth / 6,
             StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
             StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
             StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5 && lineBot - lineTop > 1 && lineRgt - lineLft > 1, false);
@@ -170,8 +183,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         // Additional points (controls) added by the user via click when editing the ink's format.
         const addpoints = apoints.map((pts, i) =>
             <svg height="10" width="10" key={`add${i}`}>
-                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} stroke="invisible" strokeWidth={dotsize / 2} fill="invisible"
-                    onPointerDown={(e) => { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll"
+                <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} stroke={this._overAddPoint === i ? "#1F85DE" : "invisible"} strokeWidth={dotsize / 4} fill={this._overAddPoint === i ? "#1F85DE" : "invisible"}
+                    onPointerDown={(e) => { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} onMouseEnter={() => this.onPointerEnter(i)} onMouseLeave={this.onPointerLeave} pointerEvents="all" cursor="all-scroll"
                 />
             </svg>);
         // Blue circles that allow the user to edit the curvature of the line using the selected control point as the anchor.