a bunch of code cleanup for inkingstrokes

5 files changed, 68 insertions, 112 deletions

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 9f3159d83..3e7a4924f 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,6 +1,4 @@
 import React = require("react");
-import * as beziercurve from 'bezier-curve';
-import * as fitCurve from 'fit-curve';
 import { Utils } from "../../Utils";
 import "./InteractionUtils.scss";
 
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index ee09273e3..eb0eebcdf 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, Utils } from "../../Utils";
+import { setupMoveUpEvents } from "../../Utils";
 import { Transform } from "../util/Transform";
 import { UndoManager } from "../util/UndoManager";
 import { Colors } from "./global/globalEnums";
@@ -15,13 +15,13 @@ export interface InkControlProps {
     inkDoc: Doc;
     inkCtrlPoints: InkData;
     screenCtrlPoints: InkData;
-    format: number[];
+    screenSpaceLineWidth: number;
     ScreenToLocalTransform: () => Transform;
     nearestScreenPt: () => PointData | undefined;
 }
 
 @observer
-export class InkControls extends React.Component<InkControlProps> {
+export class InkControlPtHandles extends React.Component<InkControlProps> {
 
     @observable private _overControl = -1;
     @observable private _overAddPoint = -1;
@@ -94,18 +94,18 @@ export class InkControls extends React.Component<InkControlProps> {
         const scrData = this.props.screenCtrlPoints;
         const sreenCtrlPoints: ControlPoint[] = [];
         for (let i = 0; i <= scrData.length - 4; i += 4) {
-            sreenCtrlPoints.push({ X: scrData[i].X, Y: scrData[i].Y, I: i });
-            sreenCtrlPoints.push({ X: scrData[i + 3].X, Y: scrData[i + 3].Y, I: i + 3 });
+            sreenCtrlPoints.push({ ...scrData[i], I: i });
+            sreenCtrlPoints.push({ ...scrData[i + 3], I: i + 3 });
         }
 
         const inkData = this.props.inkCtrlPoints;
         const inkCtrlPts: ControlPoint[] = [];
         for (let i = 0; i <= inkData.length - 4; i += 4) {
-            inkCtrlPts.push({ X: inkData[i].X, Y: inkData[i].Y, I: i });
-            inkCtrlPts.push({ X: inkData[i + 3].X, Y: inkData[i + 3].Y, I: i + 3 });
+            inkCtrlPts.push({ ...inkData[i], I: i });
+            inkCtrlPts.push({ ...inkData[i + 3], I: i + 3 });
         }
 
-        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
+        const screenSpaceLineWidth = this.props.screenSpaceLineWidth;
         const rectHdlSize = (i: number) => this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4;
 
         const nearestScreenPt = this.props.nearestScreenPt();
@@ -124,18 +124,18 @@ export class InkControls extends React.Component<InkControlProps> {
             }
             {sreenCtrlPoints.map((control, i) =>
                 <rect key={i}
-                    x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize(i) / 2}
-                    y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize(i) / 2}
+                    x={control.X - rectHdlSize(i) / 2}
+                    y={control.Y - rectHdlSize(i) / 2}
                     height={rectHdlSize(i)}
                     width={rectHdlSize(i)}
                     strokeWidth={screenSpaceLineWidth / 2}
                     stroke={Colors.MEDIUM_BLUE}
                     fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
-                    onPointerDown={(e) => {
+                    onPointerDown={e => {
                         this.changeCurrPoint(control.I);
                         this.onControlDown(e, control.I);
                     }}
-                    onMouseEnter={() => this.onEnterControl(i)}
+                    onMouseEnter={e => this.onEnterControl(i)}
                     onMouseLeave={this.onLeaveControl}
                     pointerEvents="all"
                     cursor="default"
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index 1a514bdce..dbe9ca027 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -14,13 +14,13 @@ import { InkStrokeProperties } from "./InkStrokeProperties";
 
 export interface InkHandlesProps {
     inkDoc: Doc;
-    data: InkData;
-    format: number[];
+    screenCtrlPoints: InkData;
+    screenSpaceLineWidth: number;
     ScreenToLocalTransform: () => Transform;
 }
 
 @observer
-export class InkHandles extends React.Component<InkHandlesProps> {
+export class InkTangentHandles extends React.Component<InkHandlesProps> {
     /**
      * Handles the movement of a selected handle point when the user clicks and drags.
      * @param handleNum The index of the currently selected handle point.
@@ -32,8 +32,8 @@ export class InkHandles extends React.Component<InkHandlesProps> {
             const screenScale = this.props.ScreenToLocalTransform().Scale;
             const order = handleIndex % 4;
             const oppositeHandleRawIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
-            const oppositeHandleIndex = (oppositeHandleRawIndex < 0 ? this.props.data.length + oppositeHandleRawIndex : oppositeHandleRawIndex) % this.props.data.length;
-            const controlIndex = (order === 1 ? handleIndex - 1 : handleIndex + 2) % this.props.data.length;
+            const oppositeHandleIndex = (oppositeHandleRawIndex < 0 ? this.props.screenCtrlPoints.length + oppositeHandleRawIndex : oppositeHandleRawIndex) % this.props.screenCtrlPoints.length;
+            const controlIndex = (order === 1 ? handleIndex - 1 : handleIndex + 2) % this.props.screenCtrlPoints.length;
             setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
                 if (e.altKey) this.onBreakTangent(controlIndex);
                 InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex);
@@ -52,10 +52,10 @@ export class InkHandles extends React.Component<InkHandlesProps> {
     onBreakTangent = (controlIndex: number) => {
         const doc = this.props.inkDoc;
         if (doc) {
-            const closed = this.props.data.lastElement().X === this.props.data[0].X && this.props.data.lastElement().Y === this.props.data[0].Y;
+            const closed = this.props.screenCtrlPoints.lastElement().X === this.props.screenCtrlPoints[0].X && this.props.screenCtrlPoints.lastElement().Y === this.props.screenCtrlPoints[0].Y;
             const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List;
             if (!brokenIndices?.includes(controlIndex) &&
-                ((controlIndex > 0 && controlIndex < this.props.data.length - 1) || closed)) {
+                ((controlIndex > 0 && controlIndex < this.props.screenCtrlPoints.length - 1) || closed)) {
                 brokenIndices.push(controlIndex);
                 doc.brokenInkIndices = brokenIndices;
             }
@@ -67,14 +67,14 @@ export class InkHandles extends React.Component<InkHandlesProps> {
         if (!formatInstance) return (null);
 
         // Accessing the current ink's data and extracting all handle points and handle lines.
-        const data = this.props.data;
+        const data = this.props.screenCtrlPoints;
         const handlePoints: HandlePoint[] = [];
         const handleLines: HandleLine[] = [];
         const closed = data.lastElement().X === data[0].X && data.lastElement().Y === data[0].Y;
         if (data.length >= 4) {
             for (let i = 0; i <= data.length - 4; i += 4) {
-                handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? (closed ? data.length - 1 : i) : i - 1 });
-                handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? (closed ? (i + 4) % data.length : i + 3) : i + 4 });
+                handlePoints.push({ ...data[i + 1], I: i + 1, dot1: i, dot2: i === 0 ? (closed ? data.length - 1 : i) : i - 1 });
+                handlePoints.push({ ...data[i + 2], I: i + 2, dot1: i + 3, dot2: i === data.length ? (closed ? (i + 4) % data.length : i + 3) : i + 4 });
             }
             // Adding first and last (single) handle lines.
             if (closed) {
@@ -88,19 +88,19 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                 handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
             }
         }
-        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
+        const screenSpaceLineWidth = this.props.screenSpaceLineWidth;
 
         return (
             <>
                 {handlePoints.map((pts, i) =>
                     <svg height="10" width="10" key={`hdl${i}`}>
                         <circle
-                            cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+                            cx={pts.X}
+                            cy={pts.Y}
                             r={screenSpaceLineWidth * 2}
                             strokeWidth={0}
                             fill={Colors.MEDIUM_BLUE}
-                            onPointerDown={(e) => this.onHandleDown(e, pts.I)}
+                            onPointerDown={e => this.onHandleDown(e, pts.I)}
                             pointerEvents="all"
                             cursor="default"
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
@@ -108,18 +108,18 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                 {handleLines.map((pts, i) =>
                     <svg height="100" width="100" key={`line${i}`}>
                         <line
-                            x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+                            x1={pts.X1}
+                            y1={pts.Y1}
+                            x2={pts.X2}
+                            y2={pts.Y2}
                             stroke={Colors.MEDIUM_BLUE}
                             strokeWidth={screenSpaceLineWidth}
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                         <line
-                            x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y1={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+                            x1={pts.X2}
+                            y1={pts.Y2}
+                            x2={pts.X3}
+                            y2={pts.Y3}
                             stroke={Colors.MEDIUM_BLUE}
                             strokeWidth={screenSpaceLineWidth}
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 0b7fe5cd1..cfe6ec523 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -10,7 +10,6 @@ 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;
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 40bed0eca..c9e401ab4 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -1,4 +1,5 @@
 import React = require("react");
+import { Bezier } from "bezier-js";
 import { action, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../fields/Doc";
@@ -14,9 +15,8 @@ import { InteractionUtils } from "../util/InteractionUtils";
 import { ContextMenu } from "./ContextMenu";
 import { ViewBoxBaseComponent } from "./DocComponent";
 import { Colors } from "./global/globalEnums";
-import { InkControls } from "./InkControls";
-import { InkHandles } from "./InkHandles";
-import { Bezier } from "bezier-js";
+import { InkControlPtHandles } from "./InkControls";
+import { InkTangentHandles } from "./InkHandles";
 import "./InkStroke.scss";
 import { InkStrokeProperties } from "./InkStrokeProperties";
 import { FieldView, FieldViewProps } from "./nodes/FieldView";
@@ -26,16 +26,21 @@ const InkDocument = makeInterface(documentSchema);
 
 @observer
 export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>(InkDocument) {
+    public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); }
     static readonly MaskDim = 50000;
     @observable private _properties?: InkStrokeProperties;
     _handledClick = false; // flag denoting whether ink stroke has handled a psuedo-click onPointerUp so that the real onClick event can be stopPropagated
     _selDisposer: IReactionDisposer | undefined;
 
+    @observable _nearestT: number | undefined;
+    @observable _nearestSeg: number | undefined;
+    @observable _nearestScrPt: { X: number, Y: number } | undefined;
+    @observable _inkSamplePts: { X: number, Y: number }[] | undefined;
+
     constructor(props: FieldViewProps & InkDocument) {
         super(props);
 
         this._properties = InkStrokeProperties.Instance;
-        // this._previousColor = ActiveInkColor();
     }
 
     componentDidMount() {
@@ -47,10 +52,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         this._selDisposer?.();
     }
 
-    public static LayoutString(fieldStr: string) {
-        return FieldView.LayoutString(InkingStroke, fieldStr);
-    }
-
     analyzeStrokes() {
         const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
         CognitiveServices.Inking.Appliers.ConcatenateHandwriting(this.dataDoc, ["inkAnalysis", "handwriting"], [data]);
@@ -63,13 +64,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         inkDoc.color = "#9b9b9bff";
         inkDoc._stayInCollection = inkDoc.isInkMask ? true : undefined;
     });
-
-    onClick = (e: React.MouseEvent) => {
-        if (this._handledClick) {
-            e.stopPropagation(); //stop the event so that docView won't open the lightbox
-        }
-    }
-
     /**
      * Handles the movement of the entire ink object when the user clicks and drags.
      */
@@ -107,13 +101,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             // this._previousColor = ActiveInkColor();
             SetActiveInkColor("rgba(245, 230, 95, 0.75)");
         }
-        // } else {
-        //     SetActiveInkColor(this._previousColor);
-        // }
     }
 
     inkScaledData = () => {
-        const inkData: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
+        const inkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
         const inkStrokeWidth = NumCast(this.rootDoc.strokeWidth, 1);
         const inkTop = Math.min(...inkData.map(p => p.Y)) - inkStrokeWidth / 2;
         const inkBottom = Math.max(...inkData.map(p => p.Y)) + inkStrokeWidth / 2;
@@ -132,20 +123,13 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             inkScaleY: inkWidth === inkStrokeWidth ? 1 : (this.props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth)
         };
     }
-    @observable _nearestT: number | undefined;
-    @observable _nearestSeg: number | undefined;
-    @observable _nearestScrPt: { X: number, Y: number } | undefined;
-    @observable _inkSamplePts: { X: number, Y: number }[] | undefined;
-    nearestScreenPt = () => this._nearestScrPt;
 
     @action
     onPointerOver = (e: React.PointerEvent) => {
         const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
-        const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth)[0];
-        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint((point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
+        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;
         this._nearestT = -1;
         this._nearestSeg = -1;
@@ -159,59 +143,54 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     nearest = dist;
                     this._nearestT = point.t;
                     this._nearestSeg = i;
-                    this._nearestScrPt = { X: point.x - screenLeft, Y: point.y - screenTop };
+                    this._nearestScrPt = { X: point.x, Y: point.y };
                 }
             }
         }
     }
 
+    nearestScreenPt = () => this._nearestScrPt;
     componentUI = (boundsLeft: number, boundsTop: number) => {
         const inkDoc = this.props.Document;
         const screenSpaceCenterlineStrokeWidth = 3;  // the width of the blue line widget that shows the centerline of the ink stroke
         const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
 
         const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
-        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X, point.Y)).map(p => ({ X: p[0], Y: p[1] }));
-        const screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth[0] / 2;
-        const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth[0] / 2;
+        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 screenOrigin = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+        const screenHdlPts = screenPts;
 
         return <div className="inkstroke-UI" style={{
-            left: screenOrigin[0],
-            top: screenOrigin[1],
             clip: `rect(${boundsTop - screenOrigin[1]}px, 10000px, 10000px, ${boundsLeft - screenOrigin[0]}px)`
         }} >
-            {InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
+            {InteractionUtils.CreatePolyline(screenPts, 0, 0, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
                 StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"),
                 StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker),
-                StrCast(inkDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false)}
-            {this._properties?._controlButton ?
+                StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false)}
+            {!this._properties?._controlButton ? (null) :
                 <>
-                    <InkControls
+                    <InkControlPtHandles
                         inkDoc={inkDoc}
                         inkCtrlPoints={inkData}
-                        screenCtrlPoints={screenPts}
+                        screenCtrlPoints={screenHdlPts}
                         nearestScreenPt={this.nearestScreenPt}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], screenSpaceCenterlineStrokeWidth]}
+                        screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                    <InkHandles
+                    <InkTangentHandles
                         inkDoc={inkDoc}
-                        data={screenPts}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], screenSpaceCenterlineStrokeWidth]}
+                        screenCtrlPoints={screenHdlPts}
+                        screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                </> : ""}
+                </>}
         </div>;
     }
 
     render() {
         TraceMobx();
-        // Extracting the ink data and formatting information of the current ink stroke.
-        const inkDoc: Doc = this.layoutDoc;
-
         const { inkData, inkStrokeWidth, inkLeft, inkTop, inkScaleX, inkScaleY, inkWidth, inkHeight } = this.inkScaledData();
-
-        const strokeColor = StrCast(this.layoutDoc.color, "");
-        const dotsize = Math.max(inkWidth * inkScaleX, inkHeight * inkScaleY) / 40;
+        const strokeColor = StrCast(this.layoutDoc.color);
 
         // Visually renders the polygonal line made by the user.
         const inkLine = InteractionUtils.CreatePolyline(inkData, inkLeft, inkTop, strokeColor, inkStrokeWidth, inkStrokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
@@ -232,39 +211,19 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset",
                     overflow: "visible",
                 }}
-                onPointerLeave={action(e =>
-                    console.log("")  //this._nearestScrPt = undefined
-                )}
+                onPointerLeave={action(e => this._nearestScrPt = undefined)}
                 onPointerMove={this.props.isSelected() ? this.onPointerOver : undefined}
                 onPointerDown={this.onPointerDown}
-                onClick={this.onClick}
+                onClick={e => this._handledClick && e.stopPropagation()}
                 onContextMenu={() => {
                     const cm = ContextMenu.Instance;
-                    if (cm) {
-                        !Doc.UserDoc().noviceMode && cm.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" });
-                        cm.addItem({ description: "Toggle Mask", event: () => InkingStroke.toggleMask(this.rootDoc), icon: "paint-brush" });
-                        cm.addItem({ description: "Edit Points", event: action(() => { if (this._properties) { this._properties._controlButton = !this._properties._controlButton; } }), icon: "paint-brush" });
-                    }
+                    !Doc.UserDoc().noviceMode && cm?.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" });
+                    cm?.addItem({ description: "Toggle Mask", event: () => InkingStroke.toggleMask(this.rootDoc), icon: "paint-brush" });
+                    cm?.addItem({ description: "Edit Points", event: action(() => { if (this._properties) { this._properties._controlButton = !this._properties._controlButton; } }), icon: "paint-brush" });
                 }}
             >
-
                 {clickableLine}
                 {inkLine}
-                {/* {this.props.isSelected() ? selectedLine : ""} */}
-                {/* {this.props.isSelected() && this._properties?._controlButton ?
-                    <>
-                        <InkControls
-                            inkDoc={inkDoc}
-                            data={inkData}
-                            addedPoints={addedPoints}
-                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
-                            ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                        <InkHandles
-                            inkDoc={inkDoc}
-                            data={inkData}
-                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
-                            ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                    </> : ""} */}
             </svg>
         );
     }