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` : "";
+}

src/index.tsx

@@ -11,7 +11,8 @@ import {
   isInvisiblySmallElement,
   isTextElement,
   textWysiwyg,
-  getElementAbsoluteCoords
+  getElementAbsoluteCoords,
+  getCursorForResizingElement
 } from "./element";
 import {
   clearSelection,
@@ -722,14 +723,15 @@ export class App extends React.Component<{}, AppState> {
                 { x, y },
                 this.state
               );
-
               this.setState({
                 resizingElement: resizeElement ? resizeElement.element : null
               });
 
               if (resizeElement) {
                 resizeHandle = resizeElement.resizeHandle;
-                document.documentElement.style.cursor = `${resizeHandle}-resize`;
+                document.documentElement.style.cursor = getCursorForResizingElement(
+                  resizeElement
+                );
                 isResizingElements = true;
               } else {
                 hitElement = getElementAtPosition(elements, x, y);
@@ -852,7 +854,6 @@ export class App extends React.Component<{}, AppState> {
                 const selectedElements = elements.filter(el => el.isSelected);
                 if (selectedElements.length === 1) {
                   const { x, y } = viewportCoordsToSceneCoords(e, this.state);
-
                   let deltaX = 0;
                   let deltaY = 0;
                   selectedElements.forEach(element => {
@@ -917,6 +918,9 @@ export class App extends React.Component<{}, AppState> {
                         break;
                     }
 
+                    document.documentElement.style.cursor = getCursorForResizingElement(
+                      { element, resizeHandle }
+                    );
                     el.x = element.x;
                     el.y = element.y;
                     el.shape = null;
@@ -1164,7 +1168,9 @@ export class App extends React.Component<{}, AppState> {
                 this.state
               );
               if (resizeElement && resizeElement.resizeHandle) {
-                document.documentElement.style.cursor = `${resizeElement.resizeHandle}-resize`;
+                document.documentElement.style.cursor = getCursorForResizingElement(
+                  resizeElement
+                );
                 return;
               }
             }