smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor resize handle naming (#2013)

Browse source
This commit is contained in:
David Luzar 2020-08-10 14:16:39 +02:00 • committed by GitHub
parent 85d000ccda
commit 950bcd0b72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 281 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/element/resizeTest.ts
View file

@ -6,22 +6,23 @@ import {
import {
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
handlerRectanglesFromCoords,
handlerRectangles,
} from "./handlerRectangles";
getTransformHandlesFromCoords,
getTransformHandles,
TransformHandleType,
TransformHandle,
MaybeTransformHandleType,
} from "./transformHandles";
import { AppState } from "../types";
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
const isInHandlerRect = (
handler: [number, number, number, number],
const isInsideTransformHandle = (
transformHandle: TransformHandle,
x: number,
y: number,
) =>
x >= handler[0] &&
x <= handler[0] + handler[2] &&
y >= handler[1] &&
y <= handler[1] + handler[3];
x >= transformHandle[0] &&
x <= transformHandle[0] + transformHandle[2] &&
y >= transformHandle[1] &&
y <= transformHandle[1] + transformHandle[3];
export const resizeTest = (
element: NonDeletedExcalidrawElement,
@ -30,37 +31,41 @@ export const resizeTest = (
y: number,
zoom: number,
pointerType: PointerType,
): HandlerRectanglesRet | false => {
): MaybeTransformHandleType => {
if (!appState.selectedElementIds[element.id]) {
return false;
}
const { rotation: rotationHandler, ...handlers } = handlerRectangles(
element,
zoom,
pointerType,
);
const {
rotation: rotationTransformHandle,
...transformHandles
} = getTransformHandles(element, zoom, pointerType);
if (rotationHandler && isInHandlerRect(rotationHandler, x, y)) {
return "rotation" as HandlerRectanglesRet;
if (
rotationTransformHandle &&
isInsideTransformHandle(rotationTransformHandle, x, y)
) {
return "rotation" as TransformHandleType;
}
const filter = Object.keys(handlers).filter((key) => {
const handler = handlers[key as Exclude<HandlerRectanglesRet, "rotation">]!;
if (!handler) {
const filter = Object.keys(transformHandles).filter((key) => {
const transformHandle = transformHandles[
key as Exclude<TransformHandleType, "rotation">
]!;
if (!transformHandle) {
return false;
}
return isInHandlerRect(handler, x, y);
return isInsideTransformHandle(transformHandle, x, y);
});
if (filter.length > 0) {
return filter[0] as HandlerRectanglesRet;
return filter[0] as TransformHandleType;
}
return false;
};
export const getElementWithResizeHandler = (
export const getElementWithTransformHandleType = (
elements: readonly NonDeletedExcalidrawElement[],
appState: AppState,
scenePointerX: number,
@ -72,7 +77,7 @@ export const getElementWithResizeHandler = (
if (result) {
return result;
}
const resizeHandle = resizeTest(
const transformHandleType = resizeTest(
element,
appState,
scenePointerX,
@ -80,18 +85,18 @@ export const getElementWithResizeHandler = (
zoom,
pointerType,
);
return resizeHandle ? { element, resizeHandle } : null;
}, null as { element: NonDeletedExcalidrawElement; resizeHandle: HandlerRectanglesRet } | null);
return transformHandleType ? { element, transformHandleType } : null;
}, null as { element: NonDeletedExcalidrawElement; transformHandleType: MaybeTransformHandleType } | null);
};
export const getResizeHandlerFromCoords = (
export const getTransformHandleTypeFromCoords = (
[x1, y1, x2, y2]: readonly [number, number, number, number],
scenePointerX: number,
scenePointerY: number,
zoom: number,
pointerType: PointerType,
) => {
const handlers = handlerRectanglesFromCoords(
): MaybeTransformHandleType => {
const transformHandles = getTransformHandlesFromCoords(
[x1, y1, x2, y2],
0,
zoom,
@ -99,11 +104,16 @@ export const getResizeHandlerFromCoords = (
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
);
const found = Object.keys(handlers).find((key) => {
const handler = handlers[key as Exclude<HandlerRectanglesRet, "rotation">]!;
return handler && isInHandlerRect(handler, scenePointerX, scenePointerY);
const found = Object.keys(transformHandles).find((key) => {
const transformHandle = transformHandles[
key as Exclude<TransformHandleType, "rotation">
]!;
return (
transformHandle &&
isInsideTransformHandle(transformHandle, scenePointerX, scenePointerY)
);
});
return (found || false) as HandlerRectanglesRet;
return (found || false) as MaybeTransformHandleType;
};
const RESIZE_CURSORS = ["ns", "nesw", "ew", "nwse"];
@ -121,14 +131,14 @@ const rotateResizeCursor = (cursor: string, angle: number) => {
*/
export const getCursorForResizingElement = (resizingElement: {
element?: ExcalidrawElement;
resizeHandle: ReturnType<typeof resizeTest>;
transformHandleType: MaybeTransformHandleType;
}): string => {
const { element, resizeHandle } = resizingElement;
const { element, transformHandleType } = resizingElement;
const shouldSwapCursors =
element && Math.sign(element.height) * Math.sign(element.width) === -1;
let cursor = null;
switch (resizeHandle) {
switch (transformHandleType) {
case "n":
case "s":
cursor = "ns";
@ -164,16 +174,16 @@ export const getCursorForResizingElement = (resizingElement: {
return cursor ? `${cursor}-resize` : "";
};
export const normalizeResizeHandle = (
export const normalizeTransformHandleType = (
element: ExcalidrawElement,
resizeHandle: HandlerRectanglesRet,
): HandlerRectanglesRet => {
transformHandleType: TransformHandleType,
): TransformHandleType => {
if (element.width >= 0 && element.height >= 0) {
return resizeHandle;
return transformHandleType;
}
if (element.width < 0 && element.height < 0) {
switch (resizeHandle) {
switch (transformHandleType) {
case "nw":
return "se";
case "ne":
@ -184,7 +194,7 @@ export const normalizeResizeHandle = (
return "ne";
}
} else if (element.width < 0) {
switch (resizeHandle) {
switch (transformHandleType) {
case "nw":
return "ne";
case "ne":
@ -199,7 +209,7 @@ export const normalizeResizeHandle = (
return "e";
}
} else {
switch (resizeHandle) {
switch (transformHandleType) {
case "nw":
return "sw";
case "ne":
@ -215,5 +225,5 @@ export const normalizeResizeHandle = (
}
}
return resizeHandle;
return transformHandleType;
};