diff --git a/src/element/index.ts b/src/element/index.ts index ffcaeb40..fc837310 100644 --- a/src/element/index.ts +++ b/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"; diff --git a/src/element/resizeTest.ts b/src/element/resizeTest.ts index b82e5cad..3c5eacf8 100644 --- a/src/element/resizeTest.ts +++ b/src/element/resizeTest.ts @@ -49,3 +49,45 @@ export function getElementWithResizeHandler( return resizeHandle ? { element, resizeHandle } : null; }, null as { element: ExcalidrawElement; resizeHandle: ReturnType } | null); } + +/* + * Returns bi-directional cursor for the element being resized + */ +export function getCursorForResizingElement(resizingElement: { + element: ExcalidrawElement; + resizeHandle: ReturnType; +}): 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` : ""; +} diff --git a/src/index.tsx b/src/index.tsx index 30abc0b6..3fad4a24 100644 --- a/src/index.tsx +++ b/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; } }