fixed up off-center rotation for ink

2 files changed, 30 insertions, 15 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2500eafab..2d82ffdf9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -984,6 +984,7 @@ export namespace Docs {
             I.strokeEndMarker = arrowEnd;
             I.strokeDash = dash;
             I.tool = tool;
+            I.fitWidth = true;
             I['text-align'] = 'center';
             I.title = 'ink';
             I.x = options.x as number;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 91fb4e4df..d79cf014d 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -310,6 +310,15 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             e => {} // clickEvent
         );
     };
+
+    setRotateCenter = (seldocview: DocumentView, rotCenter: number[]) => {
+        const newloccentern = seldocview.props.ScreenToLocalTransform().transformPoint(rotCenter[0], rotCenter[1]);
+        const newlocenter = [newloccentern[0] - NumCast(seldocview.layoutDoc._width) / 2, newloccentern[1] - NumCast(seldocview.layoutDoc._height) / 2];
+        const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.rootDoc._jitterRotation) / 180) * Math.PI);
+        seldocview.rootDoc.rotateCenterX = final.x / NumCast(seldocview.layoutDoc._width);
+        seldocview.rootDoc.rotateCenterY = final.y / NumCast(seldocview.layoutDoc._height);
+    };
+
     @action
     onRotateCenterDown = (e: React.PointerEvent): void => {
         this._isRotating = true;
@@ -318,15 +327,10 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             this,
             e,
             action((e: PointerEvent, down: number[], delta: number[]) => {
-                const newloccentern = seldocview.props.ScreenToLocalTransform().transformPoint(this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]);
-                const newlocenter = [newloccentern[0] - NumCast(seldocview.layoutDoc._width) / 2, newloccentern[1] - NumCast(seldocview.layoutDoc._height) / 2];
-                const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.rootDoc._jitterRotation) / 180) * Math.PI);
-                seldocview.rootDoc.rotateCenterX = final.x / NumCast(seldocview.layoutDoc._width);
-                seldocview.rootDoc.rotateCenterY = final.y / NumCast(seldocview.layoutDoc._height);
-
+                this.setRotateCenter(seldocview, [this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]]);
                 return false;
             }), // moveEvent
-            action(() => {}), // upEvent
+            action(action(() => (this._isRotating = false))), // upEvent
             action((e, doubleTap) => {
                 if (doubleTap) {
                     seldocview.rootDoc.rotateCenterX = 0.5;
@@ -342,8 +346,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         const rcScreen = { X: this.rotCenter[0], Y: this.rotCenter[1] };
         const rotateUndo = UndoManager.StartBatch('rotatedown');
         const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke);
-        const centerPoint = { X: (this.Bounds.x + this.Bounds.r) / 2, Y: (this.Bounds.y + this.Bounds.b) / 2 };
+        const centerPoint = this.rotCenter.slice();
         const infos = new Map<Doc, { unrotatedDocPos: { x: number; y: number }; startRotCtr: { x: number; y: number }; accumRot: number }>();
+        const seldocview = SelectionManager.Views()[0];
         SelectionManager.Views().forEach(dv => {
             const accumRot = (NumCast(dv.rootDoc._jitterRotation) / 180) * Math.PI;
             const localRotCtr = dv.props.ScreenToLocalTransform().transformPoint(rcScreen.X, rcScreen.Y);
@@ -372,18 +377,25 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] };
                 const deltaAng = InkStrokeProperties.angleChange(movedPoint, previousPoint, rcScreen);
                 if (selectedInk.length) {
-                    deltaAng && InkStrokeProperties.Instance.rotateInk(selectedInk, -deltaAng, centerPoint);
+                    deltaAng && InkStrokeProperties.Instance.rotateInk(selectedInk, deltaAng, rcScreen);
+                    this.setRotateCenter(seldocview, centerPoint);
                 } else {
                     infoRot(deltaAng);
                 }
                 return false;
             }, // moveEvent
             action(() => {
-                const dv = SelectionManager.Views()[0];
-                const oldRotation = NumCast(dv.rootDoc._jitterRotation);
+                const oldRotation = NumCast(seldocview.rootDoc._jitterRotation);
                 const diff = oldRotation - Math.round(oldRotation / 45) * 45;
                 if (Math.abs(diff) < 5) {
-                    infoRot(((Math.round(oldRotation / 45) * 45) / 180) * Math.PI, true);
+                    if (selectedInk.length) {
+                        InkStrokeProperties.Instance.rotateInk(selectedInk, ((Math.round(oldRotation / 45) * 45 - oldRotation) / 180) * Math.PI, rcScreen);
+                    } else {
+                        infoRot(((Math.round(oldRotation / 45) * 45) / 180) * Math.PI, true);
+                    }
+                }
+                if (selectedInk.length) {
+                    this.setRotateCenter(seldocview, centerPoint);
                 }
                 this._isRotating = false;
                 rotateUndo?.end();
@@ -830,9 +842,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                         top: this.Bounds.y,
                                         pointerEvents: 'none',
                                     }}>
-                                    <div className="documentDecorations-rotation" style={{ pointerEvents: 'all' }} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}>
-                                        <IconButton icon={<FaUndo />} isCircle={true} hoverStyle={'lighten'} backgroundColor={Colors.DARK_GRAY} color={Colors.LIGHT_GRAY} />
-                                    </div>
+                                    {this._isRotating ? null : (
+                                        <div className="documentDecorations-rotation" style={{ pointerEvents: 'all' }} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}>
+                                            <IconButton icon={<FaUndo />} isCircle={true} hoverStyle={'lighten'} backgroundColor={Colors.DARK_GRAY} color={Colors.LIGHT_GRAY} />
+                                        </div>
+                                    )}
                                 </div>
                                 {!this._showRotCenter ? null : (
                                     <div