ink rotation based on angle change

1 files changed, 17 insertions, 3 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index bd9c3509b..b1c147747 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -197,9 +197,23 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
         this._rotateUndo = UndoManager.StartBatch("rotatedown");
         setupMoveUpEvents(this, e,
             (e: PointerEvent, down: number[], delta: number[]) => {
-                const movement = { X: delta[0], Y: e.clientY - down[1] };
-                const angle = Math.max(1, Math.abs(movement.Y / 10));
-                InkStrokeProperties.Instance?.rotateInk(2 * movement.X / angle * (Math.PI / 180));
+                let origin;
+                SelectionManager.Views().filter(dv => dv.rootDoc.type === DocumentType.INK)
+                .map(doc => {
+                    const inkData = Cast(doc.rootDoc.data, InkField)?.inkData ?? [];
+                    const inkStrokeWidth = NumCast(doc.rootDoc.strokeWidth, 1);
+                    const inkTop = Math.min(...inkData.map(p => p.Y)) - inkStrokeWidth / 2;
+                    const inkBottom = Math.max(...inkData.map(p => p.Y)) + inkStrokeWidth / 2;
+                    const inkLeft = Math.min(...inkData.map(p => p.X)) - inkStrokeWidth / 2;
+                    const inkRight = Math.max(...inkData.map(p => p.X)) + inkStrokeWidth / 2;
+                    origin = { X: (inkLeft + inkRight) / 2, Y: (inkTop + inkBottom) / 2 };
+                });
+                if (origin) {
+                    const previousPoint = { X: e.clientX, Y: e.clientY };
+                    const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] };
+                    const angle = InkStrokeProperties.Instance?.angleChange(previousPoint, movedPoint, origin);
+                    if (angle) InkStrokeProperties.Instance?.rotateInk(-angle);
+                }
                 return false;
             },
             () => {