Fix reversed cursor issues on resize with bi-directional cursors (#451)

src/element/index.ts

@@ -8,7 +8,7 @@ export {
 
 export { handlerRectangles } from "./handlerRectangles";
 export { hitTest } from "./collision";
-export { resizeTest } from "./resizeTest";
+export { resizeTest, getCursorForResizingElement } from "./resizeTest";
 export { isTextElement } from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";

src/element/resizeTest.ts

@@ -49,3 +49,45 @@ export function getElementWithResizeHandler(
     return resizeHandle ? { element, resizeHandle } : null;
   }, null as { element: ExcalidrawElement; resizeHandle: ReturnType<typeof resizeTest> } | null);
 }
+
+/*
+ * Returns bi-directional cursor for the element being resized
+ */
+export function getCursorForResizingElement(resizingElement: {
+  element: ExcalidrawElement;
+  resizeHandle: ReturnType<typeof resizeTest>;
+}): string {
+  const { element, resizeHandle } = resizingElement;
+  const shouldSwapCursors =
+    Math.sign(element.height) * Math.sign(element.width) === -1;
+  let cursor = null;
+
+  switch (resizeHandle) {
+    case "n":
+    case "s":
+      cursor = "ns";
+      break;
+    case "w":
+    case "e":
+      cursor = "ew";
+      break;
+    case "nw":
+    case "se":
+      if (shouldSwapCursors) {
+        cursor = "nesw";
+      } else {
+        cursor = "nwse";
+      }
+      break;
+    case "ne":
+    case "sw":
+      if (shouldSwapCursors) {
+        cursor = "nwse";
+      } else {
+        cursor = "nesw";
+      }
+      break;
+  }
+
+  return cursor ? `${cursor}-resize` : "";
+}