1 files changed, 12 insertions, 22 deletions
diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx
index 9447b2e72..07e3270b1 100644
--- a/src/client/views/InkControlPtHandles.tsx
+++ b/src/client/views/InkControlPtHandles.tsx
@@ -182,8 +182,8 @@ export interface InkEndProps {
     inkDoc: Doc;
     inkView: InkingStroke;
     screenSpaceLineWidth: number;
-    startPt: PointData;
-    endPt: PointData;
+    startPt: () => PointData;
+    endPt: () => PointData;
 }
 @observer
 export class InkEndPtHandles extends React.Component<InkEndProps> {
@@ -191,29 +191,31 @@ export class InkEndPtHandles extends React.Component<InkEndProps> {
     @observable _overEnd: boolean = false;
 
     @action
-    dragRotate = (e: React.PointerEvent, p1: () => { X: number; Y: number }, p2: () => { X: number; Y: number }) => {
+    dragRotate = (e: React.PointerEvent, pt1: () => { X: number; Y: number }, pt2: () => { X: number; Y: number }) => {
         setupMoveUpEvents(
             this,
             e,
             action(e => {
                 if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('stretch ink');
                 // compute stretch factor by finding scaling along axis between start and end points
-                const v1 = { X: p1().X - p2().X, Y: p1().Y - p2().Y };
-                const v2 = { X: e.clientX - p2().X, Y: e.clientY - p2().Y };
+                const p1 = pt1();
+                const p2 = pt2();
+                const v1 = { X: p1.X - p2.X, Y: p1.Y - p2.Y };
+                const v2 = { X: e.clientX - p2.X, Y: e.clientY - p2.Y };
                 const v1len = Math.sqrt(v1.X * v1.X + v1.Y * v1.Y);
                 const v2len = Math.sqrt(v2.X * v2.X + v2.Y * v2.Y);
                 const scaling = v2len / v1len;
                 const v1n = { X: v1.X / v1len, Y: v1.Y / v1len };
                 const v2n = { X: v2.X / v2len, Y: v2.Y / v2len };
                 const angle = Math.acos(v1n.X * v2n.X + v1n.Y * v2n.Y) * Math.sign(v1.X * v2.Y - v2.X * v1.Y);
-                InkStrokeProperties.Instance.stretchInk(SelectionManager.Views(), scaling, p2(), v1n, e.shiftKey);
-                InkStrokeProperties.Instance.rotateInk(SelectionManager.Views(), angle, p2());
+                InkStrokeProperties.Instance.stretchInk(SelectionManager.Views(), scaling, p2, v1n, e.shiftKey);
+                InkStrokeProperties.Instance.rotateInk(SelectionManager.Views(), angle, pt2()); // bcz: call pt2() func here because pt2 will have changed from previous stretchInk call
                 return false;
             }),
             action(() => {
                 this.props.inkView.controlUndo?.end();
                 this.props.inkView.controlUndo = undefined;
-                UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']);
+                UndoManager.FilterBatches(['stroke', 'x', 'y', 'width', 'height']);
             }),
             returnFalse
         );
@@ -237,20 +239,8 @@ export class InkEndPtHandles extends React.Component<InkEndProps> {
         );
         return (
             <svg>
-                {hdl('start', this.props.startPt, (e: React.PointerEvent) =>
-                    this.dragRotate(
-                        e,
-                        () => this.props.startPt,
-                        () => this.props.endPt
-                    )
-                )}
-                {hdl('end', this.props.endPt, (e: React.PointerEvent) =>
-                    this.dragRotate(
-                        e,
-                        () => this.props.endPt,
-                        () => this.props.startPt
-                    )
-                )}
+                {hdl('start', this.props.startPt(), (e: React.PointerEvent) => this.dragRotate(e, this.props.startPt, this.props.endPt))}
+                {hdl('end', this.props.endPt(), (e: React.PointerEvent) => this.dragRotate(e, this.props.endPt, this.props.startPt))}
             </svg>
         );
     }