Lock drag direction using Shift (#1858)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/element/dragElements.ts

@@ -5,21 +5,41 @@ import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import Scene from "../scene/Scene";
 import { NonDeletedExcalidrawElement } from "./types";
+import { PointerDownState } from "../components/App";
 
 export const dragSelectedElements = (
+  pointerDownState: PointerDownState,
   selectedElements: NonDeletedExcalidrawElement[],
   pointerX: number,
   pointerY: number,
   scene: Scene,
+  lockDirection: boolean = false,
+  distanceX: number = 0,
+  distanceY: number = 0,
 ) => {
   const [x1, y1] = getCommonBounds(selectedElements);
   const offset = { x: pointerX - x1, y: pointerY - y1 };
   selectedElements.forEach((element) => {
+    let x, y;
+    if (lockDirection) {
+      const lockX = lockDirection && distanceX < distanceY;
+      const lockY = lockDirection && distanceX > distanceY;
+      const original = pointerDownState.originalElements.get(element.id);
+      x = lockX && original ? original.x : element.x + offset.x;
+      y = lockY && original ? original.y : element.y + offset.y;
+    } else {
+      x = element.x + offset.x;
+      y = element.y + offset.y;
+    }
+
     mutateElement(element, {
-      x: element.x + offset.x,
-      y: element.y + offset.y,
+      x,
+      y,
+    });
+
+    updateBoundElements(element, {
+      simultaneouslyUpdated: selectedElements,
     });
-    updateBoundElements(element, { simultaneouslyUpdated: selectedElements });
   });
 };
 

src/element/resizeElements.ts

@@ -26,6 +26,7 @@ import {
   TransformHandleType,
   MaybeTransformHandleType,
 } from "./transformHandles";
+import { PointerDownState } from "../components/App";
 
 const normalizeAngle = (angle: number): number => {
   if (angle >= 2 * Math.PI) {
@@ -36,6 +37,7 @@ const normalizeAngle = (angle: number): number => {
 
 // Returns true when transform (resizing/rotation) happened
 export const transformElements = (
+  pointerDownState: PointerDownState,
   transformHandleType: MaybeTransformHandleType,
   setTransformHandle: (nextTransformHandle: MaybeTransformHandleType) => void,
   selectedElements: readonly NonDeletedExcalidrawElement[],
@@ -47,7 +49,6 @@ export const transformElements = (
   pointerY: number,
   centerX: number,
   centerY: number,
-  originalElements: readonly NonDeletedExcalidrawElement[],
 ) => {
   if (selectedElements.length === 1) {
     const [element] = selectedElements;
@@ -120,13 +121,13 @@ export const transformElements = (
   } else if (selectedElements.length > 1) {
     if (transformHandleType === "rotation") {
       rotateMultipleElements(
+        pointerDownState,
         selectedElements,
         pointerX,
         pointerY,
         isRotateWithDiscreteAngle,
         centerX,
         centerY,
-        originalElements,
       );
       return true;
     } else if (
@@ -619,13 +620,13 @@ const resizeMultipleElements = (
 };
 
 const rotateMultipleElements = (
+  pointerDownState: PointerDownState,
   elements: readonly NonDeletedExcalidrawElement[],
   pointerX: number,
   pointerY: number,
   isRotateWithDiscreteAngle: boolean,
   centerX: number,
   centerY: number,
-  originalElements: readonly NonDeletedExcalidrawElement[],
 ) => {
   let centerAngle =
     (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
@@ -637,17 +638,19 @@ const rotateMultipleElements = (
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
+    const origAngle =
+      pointerDownState.originalElements.get(element.id)?.angle ?? element.angle;
     const [rotatedCX, rotatedCY] = rotate(
       cx,
       cy,
       centerX,
       centerY,
-      centerAngle + originalElements[index].angle - element.angle,
+      centerAngle + origAngle - element.angle,
     );
     mutateElement(element, {
       x: element.x + (rotatedCX - cx),
       y: element.y + (rotatedCY - cy),
-      angle: normalizeAngle(centerAngle + originalElements[index].angle),
+      angle: normalizeAngle(centerAngle + origAngle),
     });
   });
 };