converted ink addpoints to not use sampling. needs addPoints() to be filled in.

1 files changed, 41 insertions, 9 deletions

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index a518bf07b..efe2e5f66 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -16,6 +16,7 @@ import { ViewBoxBaseComponent } from "./DocComponent";
 import { Colors } from "./global/globalEnums";
 import { InkControls } from "./InkControls";
 import { InkHandles } from "./InkHandles";
+import { Bezier } from "bezier-js";
 import "./InkStroke.scss";
 import { InkStrokeProperties } from "./InkStrokeProperties";
 import { FieldView, FieldViewProps } from "./nodes/FieldView";
@@ -82,6 +83,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                         this._properties._controlButton = true;
                         InkStrokeProperties.Instance && (InkStrokeProperties.Instance._currentPoint = -1);
                         this._handledClick = true;  // mark the double-click pseudo pointerevent so we can block the real mouse event from propagating to DocumentView
+                    } else {
+                        this._nearestT && this._nearestSeg && InkStrokeProperties.Instance?.addPoints(this._nearestT, this._nearestSeg, this.inkScaledData().inkData);
                     }
                 }), this._properties?._controlButton, this._properties?._controlButton
             );
@@ -129,6 +132,39 @@ 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 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 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;
+        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] });
+            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]);
+                if (dist < nearest) {
+                    nearest = dist;
+                    this._nearestT = point.t;
+                    this._nearestSeg = i;
+                    this._nearestScrPt = { X: point.x, Y: point.y };
+                }
+            }
+        }
+    }
 
     componentUI = (boundsLeft: number, boundsTop: number) => {
         const inkDoc = this.props.Document;
@@ -141,13 +177,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth[0] / 2;
         const screenOrigin = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
 
-        const screenSpaceSamplePoints = InteractionUtils.CreatePoints(screenPts, screenLeft, screenTop, StrCast(inkDoc.strokeColor, "none"), screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
-            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
-            StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), inkScaleX, inkScaleY, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false);
-        const inkSpaceSamplePoints = InteractionUtils.CreatePoints(inkData, inkLeft, inkTop, StrCast(inkDoc.strokeColor, "none"), inkStrokeWidth, screenSpaceCenterlineStrokeWidth,
-            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
-            StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), 1, 1, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false);
-
         return <div className="inkstroke-UI" style={{
             left: screenOrigin[0],
             top: screenOrigin[1],
@@ -163,8 +192,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                         inkDoc={inkDoc}
                         inkCtrlPoints={inkData}
                         screenCtrlPoints={screenPts}
-                        inkStrokeSamplePts={inkSpaceSamplePoints}
-                        screenStrokeSamplePoints={screenSpaceSamplePoints}
+                        nearestScreenPt={this.nearestScreenPt}
                         format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], screenSpaceCenterlineStrokeWidth]}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                     <InkHandles
@@ -205,6 +233,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset",
                     overflow: "visible",
                 }}
+                onPointerLeave={action(e =>
+                    this._nearestScrPt = undefined
+                )}
+                onPointerMove={this.onPointerOver}
                 onPointerDown={this.onPointerDown}
                 onClick={this.onClick}
                 onContextMenu={() => {