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

This commit is contained in:
Günay Mert Karadoğan 2020-01-19 21:11:46 +00:00 committed by Lipis
parent 86cb228df4
commit d505c6615d
3 changed files with 54 additions and 6 deletions

View File

@ -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";

View File

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

View File

@ -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;
}
}