shift locking 22.5 degree and move to constants (#1216)

* shift locking 22.5 degree and move to constants #1171

* review SHIFT_LOCKING_ANGLE

src/components/App.tsx

@@ -100,6 +100,7 @@ import {
   DRAGGING_THRESHOLD,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   ARROW_CONFIRM_THRESHOLD,
+  SHIFT_LOCKING_ANGLE,
 } from "../constants";
 import { LayerUI } from "./LayerUI";
 import { ScrollBars } from "../scene/types";
@@ -2257,8 +2258,8 @@ export class App extends React.Component<any, AppState> {
               const cy = (y1 + y2) / 2;
               let angle = (5 * Math.PI) / 2 + Math.atan2(y - cy, x - cx);
               if (event.shiftKey) {
-                angle += Math.PI / 16;
-                angle -= angle % (Math.PI / 8);
+                angle += SHIFT_LOCKING_ANGLE / 2;
+                angle -= angle % SHIFT_LOCKING_ANGLE;
               }
               if (angle >= 2 * Math.PI) {
                 angle -= 2 * Math.PI;

src/constants.ts

@@ -3,6 +3,7 @@ export const ARROW_CONFIRM_THRESHOLD = 10; // 10px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
+export const SHIFT_LOCKING_ANGLE = Math.PI / 8;
 export const CURSOR_TYPE = {
   TEXT: "text",
   CROSSHAIR: "crosshair",

src/element/sizeHelpers.test.ts

@@ -0,0 +1,49 @@
+import { getPerfectElementSize } from "./sizeHelpers";
+import * as constants from "../constants";
+
+describe("getPerfectElementSize", () => {
+  it("should return height:0 if `elementType` is line and locked angle is 0", () => {
+    const { height, width } = getPerfectElementSize("line", 149, 20);
+    expect(width).toEqual(149);
+    expect(height).toEqual(0);
+  });
+  it("should return width:0 if `elementType` is line and locked angle is 90 deg (Math.PI/2)", () => {
+    const { height, width } = getPerfectElementSize("line", 20, 140);
+    expect(width).toEqual(0);
+    expect(height).toEqual(140);
+  });
+  it("should return height:0 if `elementType` is arrow and locked angle is 0", () => {
+    const { height, width } = getPerfectElementSize("arrow", 200, 30);
+    expect(width).toEqual(200);
+    expect(height).toEqual(0);
+  });
+  it("should return width:0 if `elementType` is arrow and locked angle is 90 deg (Math.PI/2)", () => {
+    const { height, width } = getPerfectElementSize("arrow", 10, 100);
+    expect(width).toEqual(0);
+    expect(height).toEqual(100);
+  });
+  it("should return adjust height to be width * tan(locked angle)", () => {
+    const { height, width } = getPerfectElementSize("arrow", 120, 185);
+    expect(width).toEqual(120);
+    expect(height).toEqual(290);
+  });
+  it("should return height equals to width if locked angle is 45 deg", () => {
+    const { height, width } = getPerfectElementSize("arrow", 135, 145);
+    expect(width).toEqual(135);
+    expect(height).toEqual(135);
+  });
+  it("should return height:0 and width:0 when width and heigh are 0", () => {
+    const { height, width } = getPerfectElementSize("arrow", 0, 0);
+    expect(width).toEqual(0);
+    expect(height).toEqual(0);
+  });
+
+  describe("should respond to SHIFT_LOCKING_ANGLE constant", () => {
+    it("should have only 2 locking angles per section if SHIFT_LOCKING_ANGLE = 45 deg (Math.PI/4)", () => {
+      (constants as any).SHIFT_LOCKING_ANGLE = Math.PI / 4;
+      const { height, width } = getPerfectElementSize("arrow", 120, 185);
+      expect(width).toEqual(120);
+      expect(height).toEqual(120);
+    });
+  });
+});

src/element/sizeHelpers.ts

@@ -1,6 +1,7 @@
 import { ExcalidrawElement } from "./types";
 import { mutateElement } from "./mutateElement";
 import { isLinearElement } from "./typeChecks";
+import { SHIFT_LOCKING_ANGLE } from "../constants";
 
 export function isInvisiblySmallElement(element: ExcalidrawElement): boolean {
   if (isLinearElement(element)) {
@@ -21,17 +22,21 @@ export function getPerfectElementSize(
   const absHeight = Math.abs(height);
 
   if (elementType === "line" || elementType === "arrow") {
-    if (absHeight < absWidth / 2) {
+    const lockedAngle =
+      Math.round(Math.atan(absHeight / absWidth) / SHIFT_LOCKING_ANGLE) *
+      SHIFT_LOCKING_ANGLE;
+    if (lockedAngle === 0) {
       height = 0;
-    } else if (absWidth < absHeight / 2) {
+    } else if (lockedAngle === Math.PI / 2) {
       width = 0;
     } else {
-      height = absWidth * Math.sign(height);
+      height =
+        Math.round(absWidth * Math.tan(lockedAngle)) * Math.sign(height) ||
+        height;
     }
   } else if (elementType !== "selection") {
     height = absWidth * Math.sign(height);
   }
-
   return { width, height };
 }