From c316b836b5fae84546eac15ae74833d31cb1318d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 14 Sep 2021 15:09:35 -0400
Subject: fixed handle size/placement for ink editing.

---
 src/client/views/InkControls.tsx  | 14 +++++++-------
 src/client/views/InkHandles.tsx   |  8 ++++----
 src/client/views/InkingStroke.tsx |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index 46377380a..b62239c4f 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -96,8 +96,8 @@ export class InkControls extends React.Component<InkControlProps> {
             }
         }
         const addedPoints = this.props.addedPoints;
-        const [left, top, scaleX, scaleY, strokeWidth] = this.props.format;
-
+        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
+        const rectHdlSize = this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4;
         return (
             <>
                 {addedPoints.map((pts, i) =>
@@ -119,11 +119,11 @@ export class InkControls extends React.Component<InkControlProps> {
                 {controlPoints.map((control, i) =>
                     <svg height="10" width="10" key={`ctrl${i}`}>
                         <rect
-                            x={(control.X - left - strokeWidth / 2) * scaleX}
-                            y={(control.Y - top - strokeWidth / 2) * scaleY}
-                            height={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3}
-                            width={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3}
-                            strokeWidth={strokeWidth / 6} stroke={Colors.MEDIUM_BLUE}
+                            x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize / 2}
+                            y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize / 2}
+                            height={rectHdlSize}
+                            width={rectHdlSize}
+                            strokeWidth={screenSpaceLineWidth / 2} stroke={Colors.MEDIUM_BLUE}
                             fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
                             onPointerDown={(e) => {
                                 this.changeCurrPoint(control.I);
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index b9f75f8d7..4e3a842d0 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -83,7 +83,7 @@ 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] = this.props.format;
+        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
 
         return (
             <>
@@ -92,7 +92,7 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                         <circle
                             cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
                             cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            r={strokeWidth / 2}
+                            r={screenSpaceLineWidth * 2}
                             strokeWidth={0}
                             fill={Colors.MEDIUM_BLUE}
                             onPointerDown={(e) => this.onHandleDown(e, pts.I)}
@@ -108,7 +108,7 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                             x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
                             y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
                             stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={strokeWidth / 4}
+                            strokeWidth={screenSpaceLineWidth}
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                         <line
                             x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
@@ -116,7 +116,7 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                             x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
                             y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
                             stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={strokeWidth / 4}
+                            strokeWidth={screenSpaceLineWidth}
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                     </svg>)}
             </>
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 771419937..06d15a108 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -146,12 +146,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                         inkDoc={inkDoc}
                         data={screenPts}
                         addedPoints={addedPoints}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                     <InkHandles
                         inkDoc={inkDoc}
                         data={screenPts}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                 </> : ""}
         </div>
-- 
cgit v1.2.3-70-g09d2