Normalize dimensions (#527)

* normalize dimensions of non-linear elements

* fix element type check regression

src/element/index.ts

@@ -8,7 +8,11 @@ export {
 
 export { handlerRectangles } from "./handlerRectangles";
 export { hitTest } from "./collision";
-export { resizeTest, getCursorForResizingElement } from "./resizeTest";
+export {
+  resizeTest,
+  getCursorForResizingElement,
+  normalizeResizeHandle,
+} from "./resizeTest";
 export { isTextElement } from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
@@ -16,4 +20,5 @@ export {
   getPerfectElementSize,
   isInvisiblySmallElement,
   resizePerfectLineForNWHandler,
+  normalizeDimensions,
 } from "./sizeHelpers";

src/element/resizeTest.ts

@@ -91,3 +91,61 @@ export function getCursorForResizingElement(resizingElement: {
 
   return cursor ? `${cursor}-resize` : "";
 }
+
+export function normalizeResizeHandle(
+  element: ExcalidrawElement,
+  resizeHandle: HandlerRectanglesRet,
+): HandlerRectanglesRet {
+  if (
+    (element.width >= 0 && element.height >= 0) ||
+    element.type === "line" ||
+    element.type === "arrow"
+  ) {
+    return resizeHandle;
+  }
+
+  if (element.width < 0 && element.height < 0) {
+    switch (resizeHandle) {
+      case "nw":
+        return "se";
+      case "ne":
+        return "sw";
+      case "se":
+        return "nw";
+      case "sw":
+        return "ne";
+    }
+  } else if (element.width < 0) {
+    switch (resizeHandle) {
+      case "nw":
+        return "ne";
+      case "ne":
+        return "nw";
+      case "se":
+        return "sw";
+      case "sw":
+        return "se";
+      case "e":
+        return "w";
+      case "w":
+        return "e";
+    }
+  } else {
+    switch (resizeHandle) {
+      case "nw":
+        return "sw";
+      case "ne":
+        return "se";
+      case "se":
+        return "ne";
+      case "sw":
+        return "nw";
+      case "n":
+        return "s";
+      case "s":
+        return "n";
+    }
+  }
+
+  return resizeHandle;
+}

src/element/sizeHelpers.ts

@@ -57,3 +57,33 @@ export function resizePerfectLineForNWHandler(
     element.y = anchorY - element.height;
   }
 }
+
+/**
+ * @returns {boolean} whether element was normalized
+ */
+export function normalizeDimensions(
+  element: ExcalidrawElement | null,
+): element is ExcalidrawElement {
+  if (
+    !element ||
+    (element.width >= 0 && element.height >= 0) ||
+    element.type === "line" ||
+    element.type === "arrow"
+  ) {
+    return false;
+  }
+
+  if (element.width < 0) {
+    element.width = Math.abs(element.width);
+    element.x -= element.width;
+  }
+
+  if (element.height < 0) {
+    element.height = Math.abs(element.height);
+    element.y -= element.height;
+  }
+
+  element.shape = null;
+
+  return true;
+}