added snapping to close curve or to self-snap a vertex to its curve. fixed ink decorations from being clipped when zoomed. fixed crash with zero-length tangent

1 files changed, 7 insertions, 19 deletions

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 4cd7f7698..8b1b3ea32 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -130,25 +130,14 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         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] }));
-        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 = [screenPts[i], screenPts[i + 1], screenPts[i + 2], screenPts[i + 3]];
-            const point = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).project({ x: e.clientX, y: e.clientY });
-            if (point.t) {
-                const dist = (point.x - e.clientX) * (point.x - e.clientX) + (point.y - e.clientY) * (point.y - e.clientY);
-                if (dist < nearest) {
-                    nearest = dist;
-                    this._nearestT = point.t;
-                    this._nearestSeg = i;
-                    this._nearestScrPt = { X: point.x, Y: point.y };
-                }
-            }
-        }
+        const { distance, nearestT, nearestSeg, nearestPt } = InkStrokeProperties.nearestPtToStroke(screenPts, { X: e.clientX, Y: e.clientY });
+
+        this._nearestT = nearestT;
+        this._nearestSeg = nearestSeg;
+        this._nearestScrPt = nearestPt;
     }
 
+
     nearestScreenPt = () => this._nearestScrPt;
     componentUI = (boundsLeft: number, boundsTop: number) => {
         const inkDoc = this.props.Document;
@@ -159,11 +148,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         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={{
-            clip: `rect(${boundsTop - screenOrigin[1]}px, 10000px, 10000px, ${boundsLeft - screenOrigin[0]}px)`
+            clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)`
         }} >
             {InteractionUtils.CreatePolyline(screenPts, 0, 0, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
                 StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"),