fix(draw): support snap angle when rotate with hotkey #WIK-15113

worktile · Apr 17, 2024 · 2252696 · 2252696
1 parent 2b08378
commit 2252696
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/.changeset/breezy-knives-tie.md b/.changeset/breezy-knives-tie.md
@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+fix(draw): support snap angle when rotate with hotkey
diff --git a/packages/common/src/types/rotate.ts b/packages/common/src/types/rotate.ts
@@ -4,4 +4,5 @@ export interface RotateRef<T extends PlaitElement = PlaitElement> {
     elements: T[];
     startPoint: Point;
     angle?: number;
+    isShift?: boolean;
 }
diff --git a/packages/draw/src/plugins/with-draw-rotate.ts b/packages/draw/src/plugins/with-draw-rotate.ts
@@ -19,17 +19,18 @@ import {
     SELECTION_BORDER_COLOR,
     setAngleForG,
     rotateElements,
-    PlaitElement,
     getAngleBetweenPoints,
     ROTATE_HANDLE_CLASS_NAME,
-    SELECTION_RECTANGLE_CLASS_NAME
+    SELECTION_RECTANGLE_CLASS_NAME,
+    normalizeAngle,
+    degreesToRadians
 } from '@plait/core';
 import { addRotating, removeRotating, drawHandle, drawRotateHandle, isRotating, RotateRef } from '@plait/common';
 import { PlaitDrawElement } from '../interfaces';
 import { getRotateHandleRectangle } from '../utils/position/geometry';
 
 export const withDrawRotate = (board: PlaitBoard) => {
-    const { pointerDown, pointerMove, globalPointerUp, afterChange, drawActiveRectangle } = board;
+    const { pointerDown, pointerMove, globalPointerUp, afterChange, drawActiveRectangle, keyDown } = board;
     let rotateRef: RotateRef | null = null;
     let rotateHandleG: SVGGElement | null;
     let needCustomActiveRectangle = false;
@@ -62,6 +63,7 @@ export const withDrawRotate = (board: PlaitBoard) => {
     board.pointerMove = (event: PointerEvent) => {
         if (rotateRef) {
             event.preventDefault();
+            rotateRef.isShift = !!event.shiftKey;
             addRotating(board, rotateRef);
             const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const selectionRectangle = getRectangleByElements(board, rotateRef.elements, false);
@@ -72,7 +74,26 @@ export const withDrawRotate = (board: PlaitBoard) => {
 
             throttleRAF(board, 'with-common-rotate', () => {
                 if (rotateRef && rotateRef.startPoint) {
-                    rotateRef.angle = getAngleBetweenPoints(rotateRef.startPoint, endPoint, selectionCenterPoint);
+                    let angle = getAngleBetweenPoints(rotateRef.startPoint, endPoint, selectionCenterPoint);
+                    if (rotateRef.isShift) {
+                        angle += Math.PI / 12 / 2;
+                        angle -= angle % (Math.PI / 12);
+                    }
+
+                    const selectionAngle = getSelectionAngle(rotateRef.elements);
+                    let remainder = (selectionAngle + angle) % (Math.PI / 2);
+
+                    if (Math.PI / 2 - remainder <= degreesToRadians(5)) {
+                        const snapAngle = Math.PI / 2 - remainder;
+                        angle += snapAngle;
+                    }
+
+                    if (remainder <= degreesToRadians(5)) {
+                        const snapAngle = -remainder;
+                        angle += snapAngle;
+                    }
+
+                    rotateRef.angle = normalizeAngle(angle);
                     if (rotateRef.angle) {
                         rotateElements(board, rotateRef.elements, rotateRef.angle);
                     }