Draw horizontal/vertical lines/arrows when shift pressed (#430)

* Draw horizontal/vertical lines/arrows when shift pressed

* Refactor resizing with delta

* Resize arrows/lines perfectly when shift pressed

src/element/index.ts

@@ -12,4 +12,8 @@ export { resizeTest, getCursorForResizingElement } from "./resizeTest";
 export { isTextElement } from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
-export { isInvisiblySmallElement } from "./sizeChecks";
+export {
+  getPerfectElementSize,
+  isInvisiblySmallElement,
+  resizePerfectLineForNWHandler
+} from "./sizeHelpers";

src/element/sizeChecks.ts

@@ -1,5 +0,0 @@
-import { ExcalidrawElement } from "./types";
-
-export function isInvisiblySmallElement(element: ExcalidrawElement): boolean {
-  return element.width === 0 && element.height === 0;
-}

src/element/sizeHelpers.ts

@@ -0,0 +1,59 @@
+import { ExcalidrawElement } from "./types";
+
+export function isInvisiblySmallElement(element: ExcalidrawElement): boolean {
+  return element.width === 0 && element.height === 0;
+}
+
+/**
+ * Makes a perfect shape or diagonal/horizontal/vertical line
+ */
+export function getPerfectElementSize(
+  elementType: string,
+  width: number,
+  height: number
+): { width: number; height: number } {
+  const absWidth = Math.abs(width);
+  const absHeight = Math.abs(height);
+
+  if (elementType === "line" || elementType === "arrow") {
+    if (absHeight < absWidth / 2) {
+      height = 0;
+    } else if (absWidth < absHeight / 2) {
+      width = 0;
+    } else {
+      height = absWidth * Math.sign(height);
+    }
+  } else if (elementType !== "selection") {
+    height = absWidth * Math.sign(height);
+  }
+
+  return { width, height };
+}
+
+export function resizePerfectLineForNWHandler(
+  element: ExcalidrawElement,
+  x: number,
+  y: number
+) {
+  const anchorX = element.x + element.width;
+  const anchorY = element.y + element.height;
+  const distanceToAnchorX = x - anchorX;
+  const distanceToAnchorY = y - anchorY;
+  if (Math.abs(distanceToAnchorX) < Math.abs(distanceToAnchorY) / 2) {
+    element.x = anchorX;
+    element.width = 0;
+    element.y = y;
+    element.height = -distanceToAnchorY;
+  } else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) {
+    element.y = anchorY;
+    element.height = 0;
+  } else {
+    element.x = x;
+    element.width = -distanceToAnchorX;
+    element.height =
+      Math.sign(distanceToAnchorY) *
+      Math.sign(distanceToAnchorX) *
+      element.width;
+    element.y = anchorY - element.height;
+  }
+}