Merge branch 'master' into eleanor-gptdraw

1 files changed, 11 insertions, 5 deletions

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 5199eb02b..f555808ef 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -21,7 +21,7 @@
     Most of the operations that can be performed on an InkStroke (eg delete a point, rotate, stretch) are implemented in the InkStrokeProperties helper class
 */
 import { Property } from 'csstype';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DashColor, returnFalse, setupMoveUpEvents } from '../../ClientUtils';
@@ -66,9 +66,14 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
     private _handledClick = false; // flag denoting whether ink stroke has handled a psuedo-click onPointerUp so that the real onClick event can be stopPropagated
     private _disposers: { [key: string]: IReactionDisposer } = {};
 
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable _nearestSeg?: number = undefined; // nearest Bezier segment along the ink stroke to the cursor (used for displaying the Add Point highlight)
     @observable _nearestT?: number = undefined; // nearest t value within the nearest Bezier segment "
-    @observable _nearestScrPt?: { X: number; Y: number }; // nearst screen point on the ink stroke ""
+    @observable _nearestScrPt?: { X: number; Y: number } = { X: 0, Y: 0 }; // nearst screen point on the ink stroke ""
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
@@ -155,6 +160,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const wasSelected = InkStrokeProperties.Instance._currentPoint === controlIndex;
         const isEditing = InkStrokeProperties.Instance._controlButton && this._props.isSelected();
         this.controlUndo = undefined;
+        this._nearestScrPt = undefined;
         setupMoveUpEvents(
             this,
             e,
@@ -275,7 +281,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
             .map(p => ({ X: p[0], Y: p[1] }));
         const { distance, nearestT, nearestSeg, nearestPt } = InkStrokeProperties.nearestPtToStroke(screenPts, { X: e.clientX, Y: e.clientY });
 
-        if (distance < 40) {
+        if (distance < 40 && !e.buttons) {
             this._nearestT = nearestT;
             this._nearestSeg = nearestSeg;
             this._nearestScrPt = nearestPt;
@@ -309,7 +315,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
     componentUI = (boundsLeft: number, boundsTop: number): null | JSX.Element => {
         const inkDoc = this.Document;
         const { inkData, inkStrokeWidth } = this.inkScaledData();
-        const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.ScreenToLocalBoxXf().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke
+        const screenSpaceCenterlineStrokeWidth = 3; //Math.min(3, inkStrokeWidth * this.ScreenToLocalBoxXf().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke
 
         const screenInkWidth = this.ScreenToLocalBoxXf().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
 
@@ -427,7 +433,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 StrCast(this.layoutDoc.stroke_lineJoin) as Property.StrokeLinejoin,
                 StrCast(this.layoutDoc.stroke_lineCap) as Property.StrokeLinecap,
                 StrCast(this.layoutDoc.stroke_bezier),
-                !closed || !fillColor || DashColor(fillColor).alpha() === 0 ? 'none' : fillColor,
+                closed && fillColor && DashColor(fillColor).alpha() ? fillColor : 'none',
                 startMarker,
                 endMarker,
                 markerScale,