1 files changed, 12 insertions, 12 deletions
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index ee09273e3..eb0eebcdf 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -5,7 +5,7 @@ import { Doc } from "../../fields/Doc";
 import { ControlPoint, InkData, PointData } from "../../fields/InkField";
 import { listSpec } from "../../fields/Schema";
 import { Cast } from "../../fields/Types";
-import { setupMoveUpEvents, Utils } from "../../Utils";
+import { setupMoveUpEvents } from "../../Utils";
 import { Transform } from "../util/Transform";
 import { UndoManager } from "../util/UndoManager";
 import { Colors } from "./global/globalEnums";
@@ -15,13 +15,13 @@ export interface InkControlProps {
     inkDoc: Doc;
     inkCtrlPoints: InkData;
     screenCtrlPoints: InkData;
-    format: number[];
+    screenSpaceLineWidth: number;
     ScreenToLocalTransform: () => Transform;
     nearestScreenPt: () => PointData | undefined;
 }
 
 @observer
-export class InkControls extends React.Component<InkControlProps> {
+export class InkControlPtHandles extends React.Component<InkControlProps> {
 
     @observable private _overControl = -1;
     @observable private _overAddPoint = -1;
@@ -94,18 +94,18 @@ export class InkControls extends React.Component<InkControlProps> {
         const scrData = this.props.screenCtrlPoints;
         const sreenCtrlPoints: ControlPoint[] = [];
         for (let i = 0; i <= scrData.length - 4; i += 4) {
-            sreenCtrlPoints.push({ X: scrData[i].X, Y: scrData[i].Y, I: i });
-            sreenCtrlPoints.push({ X: scrData[i + 3].X, Y: scrData[i + 3].Y, I: i + 3 });
+            sreenCtrlPoints.push({ ...scrData[i], I: i });
+            sreenCtrlPoints.push({ ...scrData[i + 3], I: i + 3 });
         }
 
         const inkData = this.props.inkCtrlPoints;
         const inkCtrlPts: ControlPoint[] = [];
         for (let i = 0; i <= inkData.length - 4; i += 4) {
-            inkCtrlPts.push({ X: inkData[i].X, Y: inkData[i].Y, I: i });
-            inkCtrlPts.push({ X: inkData[i + 3].X, Y: inkData[i + 3].Y, I: i + 3 });
+            inkCtrlPts.push({ ...inkData[i], I: i });
+            inkCtrlPts.push({ ...inkData[i + 3], I: i + 3 });
         }
 
-        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
+        const screenSpaceLineWidth = this.props.screenSpaceLineWidth;
         const rectHdlSize = (i: number) => this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4;
 
         const nearestScreenPt = this.props.nearestScreenPt();
@@ -124,18 +124,18 @@ export class InkControls extends React.Component<InkControlProps> {
             }
             {sreenCtrlPoints.map((control, i) =>
                 <rect key={i}
-                    x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize(i) / 2}
-                    y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize(i) / 2}
+                    x={control.X - rectHdlSize(i) / 2}
+                    y={control.Y - rectHdlSize(i) / 2}
                     height={rectHdlSize(i)}
                     width={rectHdlSize(i)}
                     strokeWidth={screenSpaceLineWidth / 2}
                     stroke={Colors.MEDIUM_BLUE}
                     fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
-                    onPointerDown={(e) => {
+                    onPointerDown={e => {
                         this.changeCurrPoint(control.I);
                         this.onControlDown(e, control.I);
                     }}
-                    onMouseEnter={() => this.onEnterControl(i)}
+                    onMouseEnter={e => this.onEnterControl(i)}
                     onMouseLeave={this.onLeaveControl}
                     pointerEvents="all"
                     cursor="default"