ink rotation based on angle change

2 files changed, 18 insertions, 9 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;
             },
             () => {
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index d05a4a6e4..67e797dcd 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -196,21 +196,16 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             StrCast(this.layoutDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap),
             StrCast(this.layoutDoc.strokeBezier), !closed ? "none" : fillColor === "transparent" ? "none" : fillColor, startMarker, endMarker,
             StrCast(this.layoutDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false);
-        // Thin blue line indicating that the current ink stroke is selected.
-        // const selectedLine = InteractionUtils.CreatePolyline(data, left, top, Colors.MEDIUM_BLUE, strokeWidth, strokeWidth / 6, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
-        //     StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", 1.0, false);
-        // Invisible polygonal line that enables the ink to be selected by the user.
         const highlightIndex = BoolCast(this.props.Document.isLinkButton) && Doc.isBrushedHighlightedDegree(this.props.Document); // bcz: Argh!! need to identify a tree view doc better than a LayoutTemlatString
         const highlightColor = !highlightIndex ?
             StrCast(this.layoutDoc.strokeOutlineColor, !closed && fillColor && fillColor !== "transparent" ? StrCast(this.layoutDoc.color, "transparent") : "transparent") :
             ["transparent", "rgb(68, 118, 247)", "rgb(68, 118, 247)", "yellow", "magenta", "cyan", "orange"][highlightIndex];
-
+        // Invisible polygonal line that enables the ink to be selected by the user.
         const clickableLine = InteractionUtils.CreatePolyline(inkData, inkLeft, inkTop, highlightColor,
             inkStrokeWidth, inkStrokeWidth + (highlightIndex && closed && (new Color(fillColor)).alpha() < 1 ? 6 : 15),
             StrCast(this.layoutDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap),
             StrCast(this.layoutDoc.strokeBezier), !closed ? "none" : fillColor === "transparent" ? "none" : fillColor, startMarker, endMarker,
             undefined, inkScaleX, inkScaleY, "", this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", 0.0, false);
-        // Set of points rendered upon the ink that can be added if a user clicks on one.
 
         return (
             <svg className="inkStroke"