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/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 };
 }