mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Refactor resize handle naming (#2013)
This commit is contained in:
David Luzar
GitHub
parent
85d000ccda
commit
950bcd0b72
7 changed files with 281 additions and 237 deletions
|
|
@ -23,16 +23,16 @@ export {
|
|||
|
||||
export {
|
||||
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
|
||||
handlerRectanglesFromCoords,
|
||||
handlerRectangles,
|
||||
} from "./handlerRectangles";
|
||||
getTransformHandlesFromCoords,
|
||||
getTransformHandles,
|
||||
} from "./transformHandles";
|
||||
export { hitTest } from "./collision";
|
||||
export {
|
||||
resizeTest,
|
||||
getCursorForResizingElement,
|
||||
normalizeResizeHandle,
|
||||
getElementWithResizeHandler,
|
||||
getResizeHandlerFromCoords,
|
||||
normalizeTransformHandleType,
|
||||
getElementWithTransformHandleType,
|
||||
getTransformHandleTypeFromCoords,
|
||||
} from "./resizeTest";
|
||||
export {
|
||||
resizeElements,
|
||||
|
|
|
|||
|
|
@ -17,12 +17,15 @@ import { isLinearElement } from "./typeChecks";
|
|||
import { mutateElement } from "./mutateElement";
|
||||
import { getPerfectElementSize } from "./sizeHelpers";
|
||||
import {
|
||||
resizeTest,
|
||||
getCursorForResizingElement,
|
||||
normalizeResizeHandle,
|
||||
normalizeTransformHandleType,
|
||||
} from "./resizeTest";
|
||||
import { measureText, getFontString } from "../utils";
|
||||
import { updateBoundElements } from "./binding";
|
||||
import {
|
||||
TransformHandleType,
|
||||
MaybeTransformHandleType,
|
||||
} from "./transformHandles";
|
||||
|
||||
const normalizeAngle = (angle: number): number => {
|
||||
if (angle >= 2 * Math.PI) {
|
||||
|
|
@ -31,12 +34,10 @@ const normalizeAngle = (angle: number): number => {
|
|||
return angle;
|
||||
};
|
||||
|
||||
type ResizeTestType = ReturnType<typeof resizeTest>;
|
||||
|
||||
// Returns true when a resize (scaling/rotation) happened
|
||||
export const resizeElements = (
|
||||
resizeHandle: ResizeTestType,
|
||||
setResizeHandle: (nextResizeHandle: ResizeTestType) => void,
|
||||
transformHandleType: MaybeTransformHandleType,
|
||||
setTransformHandle: (nextTransformHandle: MaybeTransformHandleType) => void,
|
||||
selectedElements: readonly NonDeletedExcalidrawElement[],
|
||||
resizeArrowDirection: "origin" | "end",
|
||||
isRotateWithDiscreteAngle: boolean,
|
||||
|
|
@ -50,7 +51,7 @@ export const resizeElements = (
|
|||
) => {
|
||||
if (selectedElements.length === 1) {
|
||||
const [element] = selectedElements;
|
||||
if (resizeHandle === "rotation") {
|
||||
if (transformHandleType === "rotation") {
|
||||
rotateSingleElement(
|
||||
element,
|
||||
pointerX,
|
||||
|
|
@ -61,10 +62,10 @@ export const resizeElements = (
|
|||
} else if (
|
||||
isLinearElement(element) &&
|
||||
element.points.length === 2 &&
|
||||
(resizeHandle === "nw" ||
|
||||
resizeHandle === "ne" ||
|
||||
resizeHandle === "sw" ||
|
||||
resizeHandle === "se")
|
||||
(transformHandleType === "nw" ||
|
||||
transformHandleType === "ne" ||
|
||||
transformHandleType === "sw" ||
|
||||
transformHandleType === "se")
|
||||
) {
|
||||
resizeSingleTwoPointElement(
|
||||
element,
|
||||
|
|
@ -75,28 +76,30 @@ export const resizeElements = (
|
|||
);
|
||||
} else if (
|
||||
element.type === "text" &&
|
||||
(resizeHandle === "nw" ||
|
||||
resizeHandle === "ne" ||
|
||||
resizeHandle === "sw" ||
|
||||
resizeHandle === "se")
|
||||
(transformHandleType === "nw" ||
|
||||
transformHandleType === "ne" ||
|
||||
transformHandleType === "sw" ||
|
||||
transformHandleType === "se")
|
||||
) {
|
||||
resizeSingleTextElement(
|
||||
element,
|
||||
resizeHandle,
|
||||
transformHandleType,
|
||||
isResizeCenterPoint,
|
||||
pointerX,
|
||||
pointerY,
|
||||
);
|
||||
} else if (resizeHandle) {
|
||||
} else if (transformHandleType) {
|
||||
resizeSingleElement(
|
||||
element,
|
||||
resizeHandle,
|
||||
transformHandleType,
|
||||
isResizeWithSidesSameLength,
|
||||
isResizeCenterPoint,
|
||||
pointerX,
|
||||
pointerY,
|
||||
);
|
||||
setResizeHandle(normalizeResizeHandle(element, resizeHandle));
|
||||
setTransformHandle(
|
||||
normalizeTransformHandleType(element, transformHandleType),
|
||||
);
|
||||
if (element.width < 0) {
|
||||
mutateElement(element, { width: -element.width });
|
||||
}
|
||||
|
|
@ -109,12 +112,12 @@ export const resizeElements = (
|
|||
// FIXME it is not very nice to have this here
|
||||
document.documentElement.style.cursor = getCursorForResizingElement({
|
||||
element,
|
||||
resizeHandle,
|
||||
transformHandleType,
|
||||
});
|
||||
|
||||
return true;
|
||||
} else if (selectedElements.length > 1) {
|
||||
if (resizeHandle === "rotation") {
|
||||
if (transformHandleType === "rotation") {
|
||||
rotateMultipleElements(
|
||||
selectedElements,
|
||||
pointerX,
|
||||
|
|
@ -126,14 +129,14 @@ export const resizeElements = (
|
|||
);
|
||||
return true;
|
||||
} else if (
|
||||
resizeHandle === "nw" ||
|
||||
resizeHandle === "ne" ||
|
||||
resizeHandle === "sw" ||
|
||||
resizeHandle === "se"
|
||||
transformHandleType === "nw" ||
|
||||
transformHandleType === "ne" ||
|
||||
transformHandleType === "sw" ||
|
||||
transformHandleType === "se"
|
||||
) {
|
||||
resizeMultipleElements(
|
||||
selectedElements,
|
||||
resizeHandle,
|
||||
transformHandleType,
|
||||
pointerX,
|
||||
pointerY,
|
||||
);
|
||||
|
|
@ -257,29 +260,29 @@ const measureFontSizeFromWH = (
|
|||
};
|
||||
};
|
||||
|
||||
const getSidesForResizeHandle = (
|
||||
resizeHandle: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se",
|
||||
const getSidesForTransformHandle = (
|
||||
transformHandleType: TransformHandleType,
|
||||
isResizeFromCenter: boolean,
|
||||
) => {
|
||||
return {
|
||||
n:
|
||||
/^(n|ne|nw)$/.test(resizeHandle) ||
|
||||
(isResizeFromCenter && /^(s|se|sw)$/.test(resizeHandle)),
|
||||
/^(n|ne|nw)$/.test(transformHandleType) ||
|
||||
(isResizeFromCenter && /^(s|se|sw)$/.test(transformHandleType)),
|
||||
s:
|
||||
/^(s|se|sw)$/.test(resizeHandle) ||
|
||||
(isResizeFromCenter && /^(n|ne|nw)$/.test(resizeHandle)),
|
||||
/^(s|se|sw)$/.test(transformHandleType) ||
|
||||
(isResizeFromCenter && /^(n|ne|nw)$/.test(transformHandleType)),
|
||||
w:
|
||||
/^(w|nw|sw)$/.test(resizeHandle) ||
|
||||
(isResizeFromCenter && /^(e|ne|se)$/.test(resizeHandle)),
|
||||
/^(w|nw|sw)$/.test(transformHandleType) ||
|
||||
(isResizeFromCenter && /^(e|ne|se)$/.test(transformHandleType)),
|
||||
e:
|
||||
/^(e|ne|se)$/.test(resizeHandle) ||
|
||||
(isResizeFromCenter && /^(w|nw|sw)$/.test(resizeHandle)),
|
||||
/^(e|ne|se)$/.test(transformHandleType) ||
|
||||
(isResizeFromCenter && /^(w|nw|sw)$/.test(transformHandleType)),
|
||||
};
|
||||
};
|
||||
|
||||
const resizeSingleTextElement = (
|
||||
element: NonDeleted<ExcalidrawTextElement>,
|
||||
resizeHandle: "nw" | "ne" | "sw" | "se",
|
||||
transformHandleType: "nw" | "ne" | "sw" | "se",
|
||||
isResizeFromCenter: boolean,
|
||||
pointerX: number,
|
||||
pointerY: number,
|
||||
|
|
@ -296,7 +299,7 @@ const resizeSingleTextElement = (
|
|||
-element.angle,
|
||||
);
|
||||
let scale;
|
||||
switch (resizeHandle) {
|
||||
switch (transformHandleType) {
|
||||
case "se":
|
||||
scale = Math.max(
|
||||
(rotatedX - x1) / (x2 - x1),
|
||||
|
|
@ -339,7 +342,7 @@ const resizeSingleTextElement = (
|
|||
const deltaX2 = (x2 - nextX2) / 2;
|
||||
const deltaY2 = (y2 - nextY2) / 2;
|
||||
const [nextElementX, nextElementY] = adjustXYWithRotation(
|
||||
getSidesForResizeHandle(resizeHandle, isResizeFromCenter),
|
||||
getSidesForTransformHandle(transformHandleType, isResizeFromCenter),
|
||||
element.x,
|
||||
element.y,
|
||||
element.angle,
|
||||
|
|
@ -361,7 +364,7 @@ const resizeSingleTextElement = (
|
|||
|
||||
const resizeSingleElement = (
|
||||
element: NonDeletedExcalidrawElement,
|
||||
resizeHandle: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se",
|
||||
transformHandleType: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se",
|
||||
sidesWithSameLength: boolean,
|
||||
isResizeFromCenter: boolean,
|
||||
pointerX: number,
|
||||
|
|
@ -380,16 +383,32 @@ const resizeSingleElement = (
|
|||
);
|
||||
let scaleX = 1;
|
||||
let scaleY = 1;
|
||||
if (resizeHandle === "e" || resizeHandle === "ne" || resizeHandle === "se") {
|
||||
if (
|
||||
transformHandleType === "e" ||
|
||||
transformHandleType === "ne" ||
|
||||
transformHandleType === "se"
|
||||
) {
|
||||
scaleX = (rotatedX - x1) / (x2 - x1);
|
||||
}
|
||||
if (resizeHandle === "s" || resizeHandle === "sw" || resizeHandle === "se") {
|
||||
if (
|
||||
transformHandleType === "s" ||
|
||||
transformHandleType === "sw" ||
|
||||
transformHandleType === "se"
|
||||
) {
|
||||
scaleY = (rotatedY - y1) / (y2 - y1);
|
||||
}
|
||||
if (resizeHandle === "w" || resizeHandle === "nw" || resizeHandle === "sw") {
|
||||
if (
|
||||
transformHandleType === "w" ||
|
||||
transformHandleType === "nw" ||
|
||||
transformHandleType === "sw"
|
||||
) {
|
||||
scaleX = (x2 - rotatedX) / (x2 - x1);
|
||||
}
|
||||
if (resizeHandle === "n" || resizeHandle === "nw" || resizeHandle === "ne") {
|
||||
if (
|
||||
transformHandleType === "n" ||
|
||||
transformHandleType === "nw" ||
|
||||
transformHandleType === "ne"
|
||||
) {
|
||||
scaleY = (y2 - rotatedY) / (y2 - y1);
|
||||
}
|
||||
let nextWidth = element.width * scaleX;
|
||||
|
|
@ -419,7 +438,7 @@ const resizeSingleElement = (
|
|||
Math.abs(nextHeight),
|
||||
);
|
||||
const [flipDiffX, flipDiffY] = getFlipAdjustment(
|
||||
resizeHandle,
|
||||
transformHandleType,
|
||||
nextWidth,
|
||||
nextHeight,
|
||||
nextX1,
|
||||
|
|
@ -434,7 +453,7 @@ const resizeSingleElement = (
|
|||
element.angle,
|
||||
);
|
||||
const [nextElementX, nextElementY] = adjustXYWithRotation(
|
||||
getSidesForResizeHandle(resizeHandle, isResizeFromCenter),
|
||||
getSidesForTransformHandle(transformHandleType, isResizeFromCenter),
|
||||
element.x - flipDiffX,
|
||||
element.y - flipDiffY,
|
||||
element.angle,
|
||||
|
|
@ -461,7 +480,7 @@ const resizeSingleElement = (
|
|||
|
||||
const resizeMultipleElements = (
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
resizeHandle: "nw" | "ne" | "sw" | "se",
|
||||
transformHandleType: "nw" | "ne" | "sw" | "se",
|
||||
pointerX: number,
|
||||
pointerY: number,
|
||||
) => {
|
||||
|
|
@ -472,7 +491,7 @@ const resizeMultipleElements = (
|
|||
origCoords: readonly [number, number, number, number],
|
||||
finalCoords: readonly [number, number, number, number],
|
||||
) => { x: number; y: number };
|
||||
switch (resizeHandle) {
|
||||
switch (transformHandleType) {
|
||||
case "se":
|
||||
scale = Math.max(
|
||||
(pointerX - x1) / (x2 - x1),
|
||||
|
|
@ -651,7 +670,7 @@ const rotateMultipleElements = (
|
|||
};
|
||||
|
||||
export const getResizeOffsetXY = (
|
||||
resizeHandle: ResizeTestType,
|
||||
transformHandleType: MaybeTransformHandleType,
|
||||
selectedElements: NonDeletedExcalidrawElement[],
|
||||
x: number,
|
||||
y: number,
|
||||
|
|
@ -664,7 +683,7 @@ export const getResizeOffsetXY = (
|
|||
const cy = (y1 + y2) / 2;
|
||||
const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;
|
||||
[x, y] = rotate(x, y, cx, cy, -angle);
|
||||
switch (resizeHandle) {
|
||||
switch (transformHandleType) {
|
||||
case "n":
|
||||
return rotate(x - (x1 + x2) / 2, y - y1, 0, 0, angle);
|
||||
case "s":
|
||||
|
|
@ -687,14 +706,14 @@ export const getResizeOffsetXY = (
|
|||
};
|
||||
|
||||
export const getResizeArrowDirection = (
|
||||
resizeHandle: ResizeTestType,
|
||||
transformHandleType: MaybeTransformHandleType,
|
||||
element: NonDeleted<ExcalidrawLinearElement>,
|
||||
): "origin" | "end" => {
|
||||
const [, [px, py]] = element.points;
|
||||
const isResizeEnd =
|
||||
(resizeHandle === "nw" && (px < 0 || py < 0)) ||
|
||||
(resizeHandle === "ne" && px >= 0) ||
|
||||
(resizeHandle === "sw" && px <= 0) ||
|
||||
(resizeHandle === "se" && (px > 0 || py > 0));
|
||||
(transformHandleType === "nw" && (px < 0 || py < 0)) ||
|
||||
(transformHandleType === "ne" && px >= 0) ||
|
||||
(transformHandleType === "sw" && px <= 0) ||
|
||||
(transformHandleType === "se" && (px > 0 || py > 0));
|
||||
return isResizeEnd ? "end" : "origin";
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,19 +3,30 @@ import { ExcalidrawElement, PointerType } from "./types";
|
|||
import { getElementAbsoluteCoords, Bounds } from "./bounds";
|
||||
import { rotate } from "../math";
|
||||
|
||||
type Sides = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se" | "rotation";
|
||||
export type TransformHandleType =
|
||||
| "n"
|
||||
| "s"
|
||||
| "w"
|
||||
| "e"
|
||||
| "nw"
|
||||
| "ne"
|
||||
| "sw"
|
||||
| "se"
|
||||
| "rotation";
|
||||
|
||||
export type Handlers = Partial<
|
||||
{ [T in Sides]: [number, number, number, number] }
|
||||
export type TransformHandle = [number, number, number, number];
|
||||
export type TransformHandles = Partial<
|
||||
{ [T in TransformHandleType]: TransformHandle }
|
||||
>;
|
||||
export type MaybeTransformHandleType = TransformHandleType | false;
|
||||
|
||||
const handleSizes: { [k in PointerType]: number } = {
|
||||
const transformHandleSizes: { [k in PointerType]: number } = {
|
||||
mouse: 8,
|
||||
pen: 16,
|
||||
touch: 28,
|
||||
};
|
||||
|
||||
const ROTATION_HANDLER_GAP = 16;
|
||||
const ROTATION_RESIZE_HANDLE_GAP = 16;
|
||||
|
||||
export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
|
||||
e: true,
|
||||
|
|
@ -51,7 +62,7 @@ const OMIT_SIDES_FOR_LINE_BACKSLASH = {
|
|||
rotation: true,
|
||||
};
|
||||
|
||||
const generateHandler = (
|
||||
const generateTransformHandle = (
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
|
|
@ -59,24 +70,24 @@ const generateHandler = (
|
|||
cx: number,
|
||||
cy: number,
|
||||
angle: number,
|
||||
): [number, number, number, number] => {
|
||||
): TransformHandle => {
|
||||
const [xx, yy] = rotate(x + width / 2, y + height / 2, cx, cy, angle);
|
||||
return [xx - width / 2, yy - height / 2, width, height];
|
||||
};
|
||||
|
||||
export const handlerRectanglesFromCoords = (
|
||||
export const getTransformHandlesFromCoords = (
|
||||
[x1, y1, x2, y2]: Bounds,
|
||||
angle: number,
|
||||
zoom: number,
|
||||
pointerType: PointerType = "mouse",
|
||||
omitSides: { [T in Sides]?: boolean } = {},
|
||||
): Handlers => {
|
||||
const size = handleSizes[pointerType];
|
||||
const handlerWidth = size / zoom;
|
||||
const handlerHeight = size / zoom;
|
||||
pointerType: PointerType = "touch",
|
||||
omitSides: { [T in TransformHandleType]?: boolean } = {},
|
||||
): TransformHandles => {
|
||||
const size = transformHandleSizes[pointerType];
|
||||
const handleWidth = size / zoom;
|
||||
const handleHeight = size / zoom;
|
||||
|
||||
const handlerMarginX = size / zoom;
|
||||
const handlerMarginY = size / zoom;
|
||||
const handleMarginX = size / zoom;
|
||||
const handleMarginY = size / zoom;
|
||||
|
||||
const width = x2 - x1;
|
||||
const height = y2 - y1;
|
||||
|
|
@ -85,116 +96,114 @@ export const handlerRectanglesFromCoords = (
|
|||
|
||||
const dashedLineMargin = 4 / zoom;
|
||||
|
||||
const centeringOffset = (size - 8) / (2 * zoom);
|
||||
const centeringOffset = 0;
|
||||
|
||||
const handlers: Partial<
|
||||
{ [T in Sides]: [number, number, number, number] }
|
||||
> = {
|
||||
const transformHandles: TransformHandles = {
|
||||
nw: omitSides["nw"]
|
||||
? undefined
|
||||
: generateHandler(
|
||||
x1 - dashedLineMargin - handlerMarginX + centeringOffset,
|
||||
y1 - dashedLineMargin - handlerMarginY + centeringOffset,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
: generateTransformHandle(
|
||||
x1 - dashedLineMargin - handleMarginX + centeringOffset,
|
||||
y1 - dashedLineMargin - handleMarginY + centeringOffset,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
),
|
||||
ne: omitSides["ne"]
|
||||
? undefined
|
||||
: generateHandler(
|
||||
: generateTransformHandle(
|
||||
x2 + dashedLineMargin - centeringOffset,
|
||||
y1 - dashedLineMargin - handlerMarginY + centeringOffset,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
y1 - dashedLineMargin - handleMarginY + centeringOffset,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
),
|
||||
sw: omitSides["sw"]
|
||||
? undefined
|
||||
: generateHandler(
|
||||
x1 - dashedLineMargin - handlerMarginX + centeringOffset,
|
||||
: generateTransformHandle(
|
||||
x1 - dashedLineMargin - handleMarginX + centeringOffset,
|
||||
y2 + dashedLineMargin - centeringOffset,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
),
|
||||
se: omitSides["se"]
|
||||
? undefined
|
||||
: generateHandler(
|
||||
: generateTransformHandle(
|
||||
x2 + dashedLineMargin - centeringOffset,
|
||||
y2 + dashedLineMargin - centeringOffset,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
),
|
||||
rotation: omitSides["rotation"]
|
||||
? undefined
|
||||
: generateHandler(
|
||||
x1 + width / 2 - handlerWidth / 2,
|
||||
: generateTransformHandle(
|
||||
x1 + width / 2 - handleWidth / 2,
|
||||
y1 -
|
||||
dashedLineMargin -
|
||||
handlerMarginY +
|
||||
handleMarginY +
|
||||
centeringOffset -
|
||||
ROTATION_HANDLER_GAP / zoom,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
ROTATION_RESIZE_HANDLE_GAP / zoom,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
),
|
||||
};
|
||||
|
||||
// We only want to show height handlers (all cardinal directions) above a certain size
|
||||
const minimumSizeForEightHandlers = (5 * size) / zoom;
|
||||
if (Math.abs(width) > minimumSizeForEightHandlers) {
|
||||
// We only want to show height handles (all cardinal directions) above a certain size
|
||||
const minimumSizeForEightHandles = (5 * size) / zoom;
|
||||
if (Math.abs(width) > minimumSizeForEightHandles) {
|
||||
if (!omitSides["n"]) {
|
||||
handlers["n"] = generateHandler(
|
||||
x1 + width / 2 - handlerWidth / 2,
|
||||
y1 - dashedLineMargin - handlerMarginY + centeringOffset,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
transformHandles["n"] = generateTransformHandle(
|
||||
x1 + width / 2 - handleWidth / 2,
|
||||
y1 - dashedLineMargin - handleMarginY + centeringOffset,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
);
|
||||
}
|
||||
if (!omitSides["s"]) {
|
||||
handlers["s"] = generateHandler(
|
||||
x1 + width / 2 - handlerWidth / 2,
|
||||
transformHandles["s"] = generateTransformHandle(
|
||||
x1 + width / 2 - handleWidth / 2,
|
||||
y2 + dashedLineMargin - centeringOffset,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (Math.abs(height) > minimumSizeForEightHandlers) {
|
||||
if (Math.abs(height) > minimumSizeForEightHandles) {
|
||||
if (!omitSides["w"]) {
|
||||
handlers["w"] = generateHandler(
|
||||
x1 - dashedLineMargin - handlerMarginX + centeringOffset,
|
||||
y1 + height / 2 - handlerHeight / 2,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
transformHandles["w"] = generateTransformHandle(
|
||||
x1 - dashedLineMargin - handleMarginX + centeringOffset,
|
||||
y1 + height / 2 - handleHeight / 2,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
);
|
||||
}
|
||||
if (!omitSides["e"]) {
|
||||
handlers["e"] = generateHandler(
|
||||
transformHandles["e"] = generateTransformHandle(
|
||||
x2 + dashedLineMargin - centeringOffset,
|
||||
y1 + height / 2 - handlerHeight / 2,
|
||||
handlerWidth,
|
||||
handlerHeight,
|
||||
y1 + height / 2 - handleHeight / 2,
|
||||
handleWidth,
|
||||
handleHeight,
|
||||
cx,
|
||||
cy,
|
||||
angle,
|
||||
|
|
@ -202,15 +211,15 @@ export const handlerRectanglesFromCoords = (
|
|||
}
|
||||
}
|
||||
|
||||
return handlers;
|
||||
return transformHandles;
|
||||
};
|
||||
|
||||
export const handlerRectangles = (
|
||||
export const getTransformHandles = (
|
||||
element: ExcalidrawElement,
|
||||
zoom: number,
|
||||
pointerType: PointerType = "mouse",
|
||||
) => {
|
||||
let omitSides: { [T in Sides]?: boolean } = {};
|
||||
pointerType: PointerType = "touch",
|
||||
): TransformHandles => {
|
||||
let omitSides: { [T in TransformHandleType]?: boolean } = {};
|
||||
if (
|
||||
element.type === "arrow" ||
|
||||
element.type === "line" ||
|
||||
|
|
@ -235,7 +244,7 @@ export const handlerRectangles = (
|
|||
omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
|
||||
}
|
||||
|
||||
return handlerRectanglesFromCoords(
|
||||
return getTransformHandlesFromCoords(
|
||||
getElementAbsoluteCoords(element),
|
||||
element.angle,
|
||||
zoom,
|
||||
Loading…
Add table
Add a link
Reference in a new issue