a bunch of code cleanup for inkingstrokes

1 files changed, 34 insertions, 75 deletions

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>
         );
     }