fixed handle size/placement for ink editing.

1 files changed, 7 insertions, 7 deletions

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