sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/App.tsx
View File

@ -9,7 +9,6 @@ import {
newElement, newElement,
newTextElement, newTextElement,
duplicateElement, duplicateElement,
resizeTest,
isInvisiblySmallElement, isInvisiblySmallElement,
isTextElement, isTextElement,
textWysiwyg, textWysiwyg,
@ -22,10 +21,10 @@ import {
getSyncableElements, getSyncableElements,
newLinearElement, newLinearElement,
resizeElements, resizeElements,
getElementWithResizeHandler, getElementWithTransformHandleType,
getResizeOffsetXY, getResizeOffsetXY,
getResizeArrowDirection, getResizeArrowDirection,
getResizeHandlerFromCoords, getTransformHandleTypeFromCoords,
isNonDeletedElement, isNonDeletedElement,
updateTextElement, updateTextElement,
dragSelectedElements, dragSelectedElements,
@ -176,6 +175,7 @@ import {
isLinearElementSimpleAndAlreadyBound, isLinearElementSimpleAndAlreadyBound,
isBindingEnabled, isBindingEnabled,
} from "../element/binding"; } from "../element/binding";
import { MaybeTransformHandleType } from "../element/transformHandles";
/** /**
* @param func handler taking at most single parameter (event). * @param func handler taking at most single parameter (event).
@ -221,7 +221,7 @@ type PointerDownState = Readonly<{
lastCoords: { x: number; y: number }; lastCoords: { x: number; y: number };
resize: { resize: {
// Handle when resizing, might change during the pointer interaction // Handle when resizing, might change during the pointer interaction
handle: ReturnType<typeof resizeTest>; handleType: MaybeTransformHandleType;
// This is determined on the initial pointer down event // This is determined on the initial pointer down event
isResizing: boolean; isResizing: boolean;
// This is determined on the initial pointer down event // This is determined on the initial pointer down event
@ -2057,7 +2057,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
!isOverScrollBar && !isOverScrollBar &&
!this.state.editingLinearElement !this.state.editingLinearElement
) { ) {
const elementWithResizeHandler = getElementWithResizeHandler( const elementWithTransformHandleType = getElementWithTransformHandleType(
elements, elements,
this.state, this.state,
scenePointerX, scenePointerX,
@ -2065,23 +2065,26 @@ class App extends React.Component<ExcalidrawProps, AppState> {
this.state.zoom, this.state.zoom,
event.pointerType, event.pointerType,
); );
if (elementWithResizeHandler && elementWithResizeHandler.resizeHandle) { if (
elementWithTransformHandleType &&
elementWithTransformHandleType.transformHandleType
) {
document.documentElement.style.cursor = getCursorForResizingElement( document.documentElement.style.cursor = getCursorForResizingElement(
elementWithResizeHandler, elementWithTransformHandleType,
); );
return; return;
} }
} else if (selectedElements.length > 1 && !isOverScrollBar) { } else if (selectedElements.length > 1 && !isOverScrollBar) {
const resizeHandle = getResizeHandlerFromCoords( const transformHandleType = getTransformHandleTypeFromCoords(
getCommonBounds(selectedElements), getCommonBounds(selectedElements),
scenePointerX, scenePointerX,
scenePointerY, scenePointerY,
this.state.zoom, this.state.zoom,
event.pointerType, event.pointerType,
); );
if (resizeHandle) { if (transformHandleType) {
document.documentElement.style.cursor = getCursorForResizingElement({ document.documentElement.style.cursor = getCursorForResizingElement({
resizeHandle, transformHandleType,
}); });
return; return;
} }
@ -2363,7 +2366,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
// we need to duplicate because we'll be updating this state // we need to duplicate because we'll be updating this state
lastCoords: { ...origin }, lastCoords: { ...origin },
resize: { resize: {
handle: false as ReturnType<typeof resizeTest>, handleType: false,
isResizing: false, isResizing: false,
offset: { x: 0, y: 0 }, offset: { x: 0, y: 0 },
arrowDirection: "origin", arrowDirection: "origin",
@ -2446,7 +2449,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const elements = this.scene.getElements(); const elements = this.scene.getElements();
const selectedElements = getSelectedElements(elements, this.state); const selectedElements = getSelectedElements(elements, this.state);
if (selectedElements.length === 1 && !this.state.editingLinearElement) { if (selectedElements.length === 1 && !this.state.editingLinearElement) {
const elementWithResizeHandler = getElementWithResizeHandler( const elementWithTransformHandleType = getElementWithTransformHandleType(
elements, elements,
this.state, this.state,
pointerDownState.origin.x, pointerDownState.origin.x,
@ -2454,15 +2457,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
this.state.zoom, this.state.zoom,
event.pointerType, event.pointerType,
); );
if (elementWithResizeHandler != null) { if (elementWithTransformHandleType != null) {
this.setState({ this.setState({
resizingElement: elementWithResizeHandler.element, resizingElement: elementWithTransformHandleType.element,
}); });
pointerDownState.resize.handle = pointerDownState.resize.handleType =
elementWithResizeHandler.resizeHandle; elementWithTransformHandleType.transformHandleType;
} }
} else if (selectedElements.length > 1) { } else if (selectedElements.length > 1) {
pointerDownState.resize.handle = getResizeHandlerFromCoords( pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(
getCommonBounds(selectedElements), getCommonBounds(selectedElements),
pointerDownState.origin.x, pointerDownState.origin.x,
pointerDownState.origin.y, pointerDownState.origin.y,
@ -2470,14 +2473,14 @@ class App extends React.Component<ExcalidrawProps, AppState> {
event.pointerType, event.pointerType,
); );
} }
if (pointerDownState.resize.handle) { if (pointerDownState.resize.handleType) {
document.documentElement.style.cursor = getCursorForResizingElement({ document.documentElement.style.cursor = getCursorForResizingElement({
resizeHandle: pointerDownState.resize.handle, transformHandleType: pointerDownState.resize.handleType,
}); });
pointerDownState.resize.isResizing = true; pointerDownState.resize.isResizing = true;
pointerDownState.resize.offset = tupleToCoors( pointerDownState.resize.offset = tupleToCoors(
getResizeOffsetXY( getResizeOffsetXY(
pointerDownState.resize.handle, pointerDownState.resize.handleType,
selectedElements, selectedElements,
pointerDownState.origin.x, pointerDownState.origin.x,
pointerDownState.origin.y, pointerDownState.origin.y,
@ -2489,7 +2492,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
selectedElements[0].points.length === 2 selectedElements[0].points.length === 2
) { ) {
pointerDownState.resize.arrowDirection = getResizeArrowDirection( pointerDownState.resize.arrowDirection = getResizeArrowDirection(
pointerDownState.resize.handle, pointerDownState.resize.handleType,
selectedElements[0], selectedElements[0],
); );
} }
@ -2794,13 +2797,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
this.scene.getElements(), this.scene.getElements(),
this.state, this.state,
); );
const resizeHandle = pointerDownState.resize.handle; const transformHandleType = pointerDownState.resize.handleType;
this.setState({ this.setState({
// TODO: rename this state field to "isScaling" to distinguish // TODO: rename this state field to "isScaling" to distinguish
// it from the generic "isResizing" which includes scaling and // it from the generic "isResizing" which includes scaling and
// rotating // rotating
isResizing: resizeHandle && resizeHandle !== "rotation", isResizing: transformHandleType && transformHandleType !== "rotation",
isRotating: resizeHandle === "rotation", isRotating: transformHandleType === "rotation",
}); });
const [resizeX, resizeY] = getGridPoint( const [resizeX, resizeY] = getGridPoint(
pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.x - pointerDownState.resize.offset.x,
@ -2809,9 +2812,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
); );
if ( if (
resizeElements( resizeElements(
resizeHandle, transformHandleType,
(newResizeHandle) => { (newTransformHandle) => {
pointerDownState.resize.handle = newResizeHandle; pointerDownState.resize.handleType = newTransformHandle;
}, },
selectedElements, selectedElements,
pointerDownState.resize.arrowDirection, pointerDownState.resize.arrowDirection,

12
src/element/index.ts
View File

@ -23,16 +23,16 @@ export {
export { export {
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
handlerRectanglesFromCoords, getTransformHandlesFromCoords,
handlerRectangles, getTransformHandles,
} from "./handlerRectangles"; } from "./transformHandles";
export { hitTest } from "./collision"; export { hitTest } from "./collision";
export { export {
resizeTest, resizeTest,
getCursorForResizingElement, getCursorForResizingElement,
normalizeResizeHandle, normalizeTransformHandleType,
getElementWithResizeHandler, getElementWithTransformHandleType,
getResizeHandlerFromCoords, getTransformHandleTypeFromCoords,
} from "./resizeTest"; } from "./resizeTest";
export { export {
resizeElements, resizeElements,

129
src/element/resizeElements.ts
View File

@ -17,12 +17,15 @@ import { isLinearElement } from "./typeChecks";
import { mutateElement } from "./mutateElement"; import { mutateElement } from "./mutateElement";
import { getPerfectElementSize } from "./sizeHelpers"; import { getPerfectElementSize } from "./sizeHelpers";
import { import {
resizeTest,
getCursorForResizingElement, getCursorForResizingElement,
normalizeResizeHandle, normalizeTransformHandleType,
} from "./resizeTest"; } from "./resizeTest";
import { measureText, getFontString } from "../utils"; import { measureText, getFontString } from "../utils";
import { updateBoundElements } from "./binding"; import { updateBoundElements } from "./binding";
import {
TransformHandleType,
MaybeTransformHandleType,
} from "./transformHandles";
const normalizeAngle = (angle: number): number => { const normalizeAngle = (angle: number): number => {
if (angle >= 2 * Math.PI) { if (angle >= 2 * Math.PI) {
@ -31,12 +34,10 @@ const normalizeAngle = (angle: number): number => {
return angle; return angle;
}; };
type ResizeTestType = ReturnType<typeof resizeTest>;
// Returns true when a resize (scaling/rotation) happened // Returns true when a resize (scaling/rotation) happened
export const resizeElements = ( export const resizeElements = (
resizeHandle: ResizeTestType, transformHandleType: MaybeTransformHandleType,
setResizeHandle: (nextResizeHandle: ResizeTestType) => void, setTransformHandle: (nextTransformHandle: MaybeTransformHandleType) => void,
selectedElements: readonly NonDeletedExcalidrawElement[], selectedElements: readonly NonDeletedExcalidrawElement[],
resizeArrowDirection: "origin" | "end", resizeArrowDirection: "origin" | "end",
isRotateWithDiscreteAngle: boolean, isRotateWithDiscreteAngle: boolean,
@ -50,7 +51,7 @@ export const resizeElements = (
) => { ) => {
if (selectedElements.length === 1) { if (selectedElements.length === 1) {
const [element] = selectedElements; const [element] = selectedElements;
if (resizeHandle === "rotation") { if (transformHandleType === "rotation") {
rotateSingleElement( rotateSingleElement(
element, element,
pointerX, pointerX,
@ -61,10 +62,10 @@ export const resizeElements = (
} else if ( } else if (
isLinearElement(element) && isLinearElement(element) &&
element.points.length === 2 && element.points.length === 2 &&
(resizeHandle === "nw" || (transformHandleType === "nw" ||
resizeHandle === "ne" || transformHandleType === "ne" ||
resizeHandle === "sw" || transformHandleType === "sw" ||
resizeHandle === "se") transformHandleType === "se")
) { ) {
resizeSingleTwoPointElement( resizeSingleTwoPointElement(
element, element,
@ -75,28 +76,30 @@ export const resizeElements = (
); );
} else if ( } else if (
element.type === "text" && element.type === "text" &&
(resizeHandle === "nw" || (transformHandleType === "nw" ||
resizeHandle === "ne" || transformHandleType === "ne" ||
resizeHandle === "sw" || transformHandleType === "sw" ||
resizeHandle === "se") transformHandleType === "se")
) { ) {
resizeSingleTextElement( resizeSingleTextElement(
element, element,
resizeHandle, transformHandleType,
isResizeCenterPoint, isResizeCenterPoint,
pointerX, pointerX,
pointerY, pointerY,
); );
} else if (resizeHandle) { } else if (transformHandleType) {
resizeSingleElement( resizeSingleElement(
element, element,
resizeHandle, transformHandleType,
isResizeWithSidesSameLength, isResizeWithSidesSameLength,
isResizeCenterPoint, isResizeCenterPoint,
pointerX, pointerX,
pointerY, pointerY,
); );
setResizeHandle(normalizeResizeHandle(element, resizeHandle)); setTransformHandle(
normalizeTransformHandleType(element, transformHandleType),
);
if (element.width < 0) { if (element.width < 0) {
mutateElement(element, { width: -element.width }); mutateElement(element, { width: -element.width });
} }
@ -109,12 +112,12 @@ export const resizeElements = (
// FIXME it is not very nice to have this here // FIXME it is not very nice to have this here
document.documentElement.style.cursor = getCursorForResizingElement({ document.documentElement.style.cursor = getCursorForResizingElement({
element, element,
resizeHandle, transformHandleType,
}); });
return true; return true;
} else if (selectedElements.length > 1) { } else if (selectedElements.length > 1) {
if (resizeHandle === "rotation") { if (transformHandleType === "rotation") {
rotateMultipleElements( rotateMultipleElements(
selectedElements, selectedElements,
pointerX, pointerX,
@ -126,14 +129,14 @@ export const resizeElements = (
); );
return true; return true;
} else if ( } else if (
resizeHandle === "nw" || transformHandleType === "nw" ||
resizeHandle === "ne" || transformHandleType === "ne" ||
resizeHandle === "sw" || transformHandleType === "sw" ||
resizeHandle === "se" transformHandleType === "se"
) { ) {
resizeMultipleElements( resizeMultipleElements(
selectedElements, selectedElements,
resizeHandle, transformHandleType,
pointerX, pointerX,
pointerY, pointerY,
); );
@ -257,29 +260,29 @@ const measureFontSizeFromWH = (
}; };
}; };
const getSidesForResizeHandle = ( const getSidesForTransformHandle = (
resizeHandle: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se", transformHandleType: TransformHandleType,
isResizeFromCenter: boolean, isResizeFromCenter: boolean,
) => { ) => {
return { return {
n: n:
/^(n|ne|nw)$/.test(resizeHandle) || /^(n|ne|nw)$/.test(transformHandleType) ||
(isResizeFromCenter && /^(s|se|sw)$/.test(resizeHandle)), (isResizeFromCenter && /^(s|se|sw)$/.test(transformHandleType)),
s: s:
/^(s|se|sw)$/.test(resizeHandle) || /^(s|se|sw)$/.test(transformHandleType) ||
(isResizeFromCenter && /^(n|ne|nw)$/.test(resizeHandle)), (isResizeFromCenter && /^(n|ne|nw)$/.test(transformHandleType)),
w: w:
/^(w|nw|sw)$/.test(resizeHandle) || /^(w|nw|sw)$/.test(transformHandleType) ||
(isResizeFromCenter && /^(e|ne|se)$/.test(resizeHandle)), (isResizeFromCenter && /^(e|ne|se)$/.test(transformHandleType)),
e: e:
/^(e|ne|se)$/.test(resizeHandle) || /^(e|ne|se)$/.test(transformHandleType) ||
(isResizeFromCenter && /^(w|nw|sw)$/.test(resizeHandle)), (isResizeFromCenter && /^(w|nw|sw)$/.test(transformHandleType)),
}; };
}; };
const resizeSingleTextElement = ( const resizeSingleTextElement = (
element: NonDeleted<ExcalidrawTextElement>, element: NonDeleted<ExcalidrawTextElement>,
resizeHandle: "nw" | "ne" | "sw" | "se", transformHandleType: "nw" | "ne" | "sw" | "se",
isResizeFromCenter: boolean, isResizeFromCenter: boolean,
pointerX: number, pointerX: number,
pointerY: number, pointerY: number,
@ -296,7 +299,7 @@ const resizeSingleTextElement = (
-element.angle, -element.angle,
); );
let scale; let scale;
switch (resizeHandle) { switch (transformHandleType) {
case "se": case "se":
scale = Math.max( scale = Math.max(
(rotatedX - x1) / (x2 - x1), (rotatedX - x1) / (x2 - x1),
@ -339,7 +342,7 @@ const resizeSingleTextElement = (
const deltaX2 = (x2 - nextX2) / 2; const deltaX2 = (x2 - nextX2) / 2;
const deltaY2 = (y2 - nextY2) / 2; const deltaY2 = (y2 - nextY2) / 2;
const [nextElementX, nextElementY] = adjustXYWithRotation( const [nextElementX, nextElementY] = adjustXYWithRotation(
getSidesForResizeHandle(resizeHandle, isResizeFromCenter), getSidesForTransformHandle(transformHandleType, isResizeFromCenter),
element.x, element.x,
element.y, element.y,
element.angle, element.angle,
@ -361,7 +364,7 @@ const resizeSingleTextElement = (
const resizeSingleElement = ( const resizeSingleElement = (
element: NonDeletedExcalidrawElement, element: NonDeletedExcalidrawElement,
resizeHandle: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se", transformHandleType: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se",
sidesWithSameLength: boolean, sidesWithSameLength: boolean,
isResizeFromCenter: boolean, isResizeFromCenter: boolean,
pointerX: number, pointerX: number,
@ -380,16 +383,32 @@ const resizeSingleElement = (
); );
let scaleX = 1; let scaleX = 1;
let scaleY = 1; let scaleY = 1;
if (resizeHandle === "e" || resizeHandle === "ne" || resizeHandle === "se") { if (
transformHandleType === "e" ||
transformHandleType === "ne" ||
transformHandleType === "se"
) {
scaleX = (rotatedX - x1) / (x2 - x1); scaleX = (rotatedX - x1) / (x2 - x1);
} }
if (resizeHandle === "s" || resizeHandle === "sw" || resizeHandle === "se") { if (
transformHandleType === "s" ||
transformHandleType === "sw" ||
transformHandleType === "se"
) {
scaleY = (rotatedY - y1) / (y2 - y1); scaleY = (rotatedY - y1) / (y2 - y1);
} }
if (resizeHandle === "w" || resizeHandle === "nw" || resizeHandle === "sw") { if (
transformHandleType === "w" ||
transformHandleType === "nw" ||
transformHandleType === "sw"
) {
scaleX = (x2 - rotatedX) / (x2 - x1); scaleX = (x2 - rotatedX) / (x2 - x1);
} }
if (resizeHandle === "n" || resizeHandle === "nw" || resizeHandle === "ne") { if (
transformHandleType === "n" ||
transformHandleType === "nw" ||
transformHandleType === "ne"
) {
scaleY = (y2 - rotatedY) / (y2 - y1); scaleY = (y2 - rotatedY) / (y2 - y1);
} }
let nextWidth = element.width * scaleX; let nextWidth = element.width * scaleX;
@ -419,7 +438,7 @@ const resizeSingleElement = (
Math.abs(nextHeight), Math.abs(nextHeight),
); );
const [flipDiffX, flipDiffY] = getFlipAdjustment( const [flipDiffX, flipDiffY] = getFlipAdjustment(
resizeHandle, transformHandleType,
nextWidth, nextWidth,
nextHeight, nextHeight,
nextX1, nextX1,
@ -434,7 +453,7 @@ const resizeSingleElement = (
element.angle, element.angle,
); );
const [nextElementX, nextElementY] = adjustXYWithRotation( const [nextElementX, nextElementY] = adjustXYWithRotation(
getSidesForResizeHandle(resizeHandle, isResizeFromCenter), getSidesForTransformHandle(transformHandleType, isResizeFromCenter),
element.x - flipDiffX, element.x - flipDiffX,
element.y - flipDiffY, element.y - flipDiffY,
element.angle, element.angle,
@ -461,7 +480,7 @@ const resizeSingleElement = (
const resizeMultipleElements = ( const resizeMultipleElements = (
elements: readonly NonDeletedExcalidrawElement[], elements: readonly NonDeletedExcalidrawElement[],
resizeHandle: "nw" | "ne" | "sw" | "se", transformHandleType: "nw" | "ne" | "sw" | "se",
pointerX: number, pointerX: number,
pointerY: number, pointerY: number,
) => { ) => {
@ -472,7 +491,7 @@ const resizeMultipleElements = (
origCoords: readonly [number, number, number, number], origCoords: readonly [number, number, number, number],
finalCoords: readonly [number, number, number, number], finalCoords: readonly [number, number, number, number],
) => { x: number; y: number }; ) => { x: number; y: number };
switch (resizeHandle) { switch (transformHandleType) {
case "se": case "se":
scale = Math.max( scale = Math.max(
(pointerX - x1) / (x2 - x1), (pointerX - x1) / (x2 - x1),
@ -651,7 +670,7 @@ const rotateMultipleElements = (
}; };
export const getResizeOffsetXY = ( export const getResizeOffsetXY = (
resizeHandle: ResizeTestType, transformHandleType: MaybeTransformHandleType,
selectedElements: NonDeletedExcalidrawElement[], selectedElements: NonDeletedExcalidrawElement[],
x: number, x: number,
y: number, y: number,
@ -664,7 +683,7 @@ export const getResizeOffsetXY = (
const cy = (y1 + y2) / 2; const cy = (y1 + y2) / 2;
const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0; const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;
[x, y] = rotate(x, y, cx, cy, -angle); [x, y] = rotate(x, y, cx, cy, -angle);
switch (resizeHandle) { switch (transformHandleType) {
case "n": case "n":
return rotate(x - (x1 + x2) / 2, y - y1, 0, 0, angle); return rotate(x - (x1 + x2) / 2, y - y1, 0, 0, angle);
case "s": case "s":
@ -687,14 +706,14 @@ export const getResizeOffsetXY = (
}; };
export const getResizeArrowDirection = ( export const getResizeArrowDirection = (
resizeHandle: ResizeTestType, transformHandleType: MaybeTransformHandleType,
element: NonDeleted<ExcalidrawLinearElement>, element: NonDeleted<ExcalidrawLinearElement>,
): "origin" | "end" => { ): "origin" | "end" => {
const [, [px, py]] = element.points; const [, [px, py]] = element.points;
const isResizeEnd = const isResizeEnd =
(resizeHandle === "nw" && (px < 0 || py < 0)) || (transformHandleType === "nw" && (px < 0 || py < 0)) ||
(resizeHandle === "ne" && px >= 0) || (transformHandleType === "ne" && px >= 0) ||
(resizeHandle === "sw" && px <= 0) || (transformHandleType === "sw" && px <= 0) ||
(resizeHandle === "se" && (px > 0 || py > 0)); (transformHandleType === "se" && (px > 0 || py > 0));
return isResizeEnd ? "end" : "origin"; return isResizeEnd ? "end" : "origin";
}; };

102
src/element/resizeTest.ts
View File

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

149
src/element/handlerRectangles.ts → src/element/transformHandles.ts
View File

@ -3,19 +3,30 @@ import { ExcalidrawElement, PointerType } from "./types";
import { getElementAbsoluteCoords, Bounds } from "./bounds"; import { getElementAbsoluteCoords, Bounds } from "./bounds";
import { rotate } from "../math"; 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< export type TransformHandle = [number, number, number, number];
{ [T in Sides]: [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, mouse: 8,
pen: 16, pen: 16,
touch: 28, touch: 28,
}; };
const ROTATION_HANDLER_GAP = 16; const ROTATION_RESIZE_HANDLE_GAP = 16;
export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = { export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
e: true, e: true,
@ -51,7 +62,7 @@ const OMIT_SIDES_FOR_LINE_BACKSLASH = {
rotation: true, rotation: true,
}; };
const generateHandler = ( const generateTransformHandle = (
x: number, x: number,
y: number, y: number,
width: number, width: number,
@ -59,24 +70,24 @@ const generateHandler = (
cx: number, cx: number,
cy: number, cy: number,
angle: number, angle: number,
): [number, number, number, number] => { ): TransformHandle => {
const [xx, yy] = rotate(x + width / 2, y + height / 2, cx, cy, angle); const [xx, yy] = rotate(x + width / 2, y + height / 2, cx, cy, angle);
return [xx - width / 2, yy - height / 2, width, height]; return [xx - width / 2, yy - height / 2, width, height];
}; };
export const handlerRectanglesFromCoords = ( export const getTransformHandlesFromCoords = (
[x1, y1, x2, y2]: Bounds, [x1, y1, x2, y2]: Bounds,
angle: number, angle: number,
zoom: number, zoom: number,
pointerType: PointerType = "mouse", pointerType: PointerType = "touch",
omitSides: { [T in Sides]?: boolean } = {}, omitSides: { [T in TransformHandleType]?: boolean } = {},
): Handlers => { ): TransformHandles => {
const size = handleSizes[pointerType]; const size = transformHandleSizes[pointerType];
const handlerWidth = size / zoom; const handleWidth = size / zoom;
const handlerHeight = size / zoom; const handleHeight = size / zoom;
const handlerMarginX = size / zoom; const handleMarginX = size / zoom;
const handlerMarginY = size / zoom; const handleMarginY = size / zoom;
const width = x2 - x1; const width = x2 - x1;
const height = y2 - y1; const height = y2 - y1;
@ -85,116 +96,114 @@ export const handlerRectanglesFromCoords = (
const dashedLineMargin = 4 / zoom; const dashedLineMargin = 4 / zoom;
const centeringOffset = (size - 8) / (2 * zoom); const centeringOffset = 0;
const handlers: Partial< const transformHandles: TransformHandles = {
{ [T in Sides]: [number, number, number, number] }
> = {
nw: omitSides["nw"] nw: omitSides["nw"]
? undefined ? undefined
: generateHandler( : generateTransformHandle(
x1 - dashedLineMargin - handlerMarginX + centeringOffset, x1 - dashedLineMargin - handleMarginX + centeringOffset,
y1 - dashedLineMargin - handlerMarginY + centeringOffset, y1 - dashedLineMargin - handleMarginY + centeringOffset,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
), ),
ne: omitSides["ne"] ne: omitSides["ne"]
? undefined ? undefined
: generateHandler( : generateTransformHandle(
x2 + dashedLineMargin - centeringOffset, x2 + dashedLineMargin - centeringOffset,
y1 - dashedLineMargin - handlerMarginY + centeringOffset, y1 - dashedLineMargin - handleMarginY + centeringOffset,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
), ),
sw: omitSides["sw"] sw: omitSides["sw"]
? undefined ? undefined
: generateHandler( : generateTransformHandle(
x1 - dashedLineMargin - handlerMarginX + centeringOffset, x1 - dashedLineMargin - handleMarginX + centeringOffset,
y2 + dashedLineMargin - centeringOffset, y2 + dashedLineMargin - centeringOffset,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
), ),
se: omitSides["se"] se: omitSides["se"]
? undefined ? undefined
: generateHandler( : generateTransformHandle(
x2 + dashedLineMargin - centeringOffset, x2 + dashedLineMargin - centeringOffset,
y2 + dashedLineMargin - centeringOffset, y2 + dashedLineMargin - centeringOffset,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
), ),
rotation: omitSides["rotation"] rotation: omitSides["rotation"]
? undefined ? undefined
: generateHandler( : generateTransformHandle(
x1 + width / 2 - handlerWidth / 2, x1 + width / 2 - handleWidth / 2,
y1 - y1 -
dashedLineMargin - dashedLineMargin -
handlerMarginY + handleMarginY +
centeringOffset - centeringOffset -
ROTATION_HANDLER_GAP / zoom, ROTATION_RESIZE_HANDLE_GAP / zoom,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
), ),
}; };
// We only want to show height handlers (all cardinal directions) above a certain size // We only want to show height handles (all cardinal directions) above a certain size
const minimumSizeForEightHandlers = (5 * size) / zoom; const minimumSizeForEightHandles = (5 * size) / zoom;
if (Math.abs(width) > minimumSizeForEightHandlers) { if (Math.abs(width) > minimumSizeForEightHandles) {
if (!omitSides["n"]) { if (!omitSides["n"]) {
handlers["n"] = generateHandler( transformHandles["n"] = generateTransformHandle(
x1 + width / 2 - handlerWidth / 2, x1 + width / 2 - handleWidth / 2,
y1 - dashedLineMargin - handlerMarginY + centeringOffset, y1 - dashedLineMargin - handleMarginY + centeringOffset,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
); );
} }
if (!omitSides["s"]) { if (!omitSides["s"]) {
handlers["s"] = generateHandler( transformHandles["s"] = generateTransformHandle(
x1 + width / 2 - handlerWidth / 2, x1 + width / 2 - handleWidth / 2,
y2 + dashedLineMargin - centeringOffset, y2 + dashedLineMargin - centeringOffset,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
); );
} }
} }
if (Math.abs(height) > minimumSizeForEightHandlers) { if (Math.abs(height) > minimumSizeForEightHandles) {
if (!omitSides["w"]) { if (!omitSides["w"]) {
handlers["w"] = generateHandler( transformHandles["w"] = generateTransformHandle(
x1 - dashedLineMargin - handlerMarginX + centeringOffset, x1 - dashedLineMargin - handleMarginX + centeringOffset,
y1 + height / 2 - handlerHeight / 2, y1 + height / 2 - handleHeight / 2,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
); );
} }
if (!omitSides["e"]) { if (!omitSides["e"]) {
handlers["e"] = generateHandler( transformHandles["e"] = generateTransformHandle(
x2 + dashedLineMargin - centeringOffset, x2 + dashedLineMargin - centeringOffset,
y1 + height / 2 - handlerHeight / 2, y1 + height / 2 - handleHeight / 2,
handlerWidth, handleWidth,
handlerHeight, handleHeight,
cx, cx,
cy, cy,
angle, angle,
@ -202,15 +211,15 @@ export const handlerRectanglesFromCoords = (
} }
} }
return handlers; return transformHandles;
}; };
export const handlerRectangles = ( export const getTransformHandles = (
element: ExcalidrawElement, element: ExcalidrawElement,
zoom: number, zoom: number,
pointerType: PointerType = "mouse", pointerType: PointerType = "touch",
) => { ): TransformHandles => {
let omitSides: { [T in Sides]?: boolean } = {}; let omitSides: { [T in TransformHandleType]?: boolean } = {};
if ( if (
element.type === "arrow" || element.type === "arrow" ||
element.type === "line" || element.type === "line" ||
@ -235,7 +244,7 @@ export const handlerRectangles = (
omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT; omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
} }
return handlerRectanglesFromCoords( return getTransformHandlesFromCoords(
getElementAbsoluteCoords(element), getElementAbsoluteCoords(element),
element.angle, element.angle,
zoom, zoom,

51
src/renderer/renderScene.ts
View File

@ -14,8 +14,8 @@ import {
import { import {
getElementAbsoluteCoords, getElementAbsoluteCoords,
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
handlerRectanglesFromCoords, getTransformHandlesFromCoords,
handlerRectangles, getTransformHandles,
getElementBounds, getElementBounds,
getCommonBounds, getCommonBounds,
} from "../element"; } from "../element";
@ -43,9 +43,10 @@ import {
SuggestedPointBinding, SuggestedPointBinding,
isBindingEnabled, isBindingEnabled,
} from "../element/binding"; } from "../element/binding";
import { Handlers } from "../element/handlerRectangles"; import {
TransformHandles,
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>; TransformHandleType,
} from "../element/transformHandles";
const strokeRectWithRotation = ( const strokeRectWithRotation = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
@ -362,18 +363,18 @@ export const renderScene = (
const locallySelectedElements = getSelectedElements(elements, appState); const locallySelectedElements = getSelectedElements(elements, appState);
// Paint resize handlers // Paint resize transformHandles
context.translate(sceneState.scrollX, sceneState.scrollY); context.translate(sceneState.scrollX, sceneState.scrollY);
if (locallySelectedElements.length === 1) { if (locallySelectedElements.length === 1) {
context.fillStyle = oc.white; context.fillStyle = oc.white;
const handlers = handlerRectangles( const transformHandles = getTransformHandles(
locallySelectedElements[0], locallySelectedElements[0],
sceneState.zoom, sceneState.zoom,
); );
renderHandlers( renderTransformHandles(
context, context,
sceneState, sceneState,
handlers, transformHandles,
locallySelectedElements[0].angle, locallySelectedElements[0].angle,
); );
} else if (locallySelectedElements.length > 1 && !appState.isRotating) { } else if (locallySelectedElements.length > 1 && !appState.isRotating) {
@ -396,14 +397,14 @@ export const renderScene = (
); );
context.lineWidth = lineWidth; context.lineWidth = lineWidth;
context.setLineDash(initialLineDash); context.setLineDash(initialLineDash);
const handlers = handlerRectanglesFromCoords( const transformHandles = getTransformHandlesFromCoords(
[x1, y1, x2, y2], [x1, y1, x2, y2],
0, 0,
sceneState.zoom, sceneState.zoom,
undefined, undefined,
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
); );
renderHandlers(context, sceneState, handlers, 0); renderTransformHandles(context, sceneState, transformHandles, 0);
} }
context.translate(-sceneState.scrollX, -sceneState.scrollY); context.translate(-sceneState.scrollX, -sceneState.scrollY);
} }
@ -545,33 +546,33 @@ export const renderScene = (
return { atLeastOneVisibleElement: visibleElements.length > 0, scrollBars }; return { atLeastOneVisibleElement: visibleElements.length > 0, scrollBars };
}; };
const renderHandlers = ( const renderTransformHandles = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
sceneState: SceneState, sceneState: SceneState,
handlers: Handlers, transformHandles: TransformHandles,
angle: number, angle: number,
): void => { ): void => {
Object.keys(handlers).forEach((key) => { Object.keys(transformHandles).forEach((key) => {
const handler = handlers[key as HandlerRectanglesRet]; const transformHandle = transformHandles[key as TransformHandleType];
if (handler !== undefined) { if (transformHandle !== undefined) {
const lineWidth = context.lineWidth; const lineWidth = context.lineWidth;
context.lineWidth = 1 / sceneState.zoom; context.lineWidth = 1 / sceneState.zoom;
if (key === "rotation") { if (key === "rotation") {
fillCircle( fillCircle(
context, context,
handler[0] + handler[2] / 2, transformHandle[0] + transformHandle[2] / 2,
handler[1] + handler[3] / 2, transformHandle[1] + transformHandle[3] / 2,
handler[2] / 2, transformHandle[2] / 2,
); );
} else { } else {
strokeRectWithRotation( strokeRectWithRotation(
context, context,
handler[0], transformHandle[0],
handler[1], transformHandle[1],
handler[2], transformHandle[2],
handler[3], transformHandle[3],
handler[0] + handler[2] / 2, transformHandle[0] + transformHandle[2] / 2,
handler[1] + handler[3] / 2, transformHandle[1] + transformHandle[3] / 2,
angle, angle,
true, // fill before stroke true, // fill before stroke
); );

18
src/tests/regressionTests.test.tsx
View File

@ -9,7 +9,7 @@ import { ToolName } from "./queries/toolQueries";
import { KEYS, Key } from "../keys"; import { KEYS, Key } from "../keys";
import { setDateTimeForTests } from "../utils"; import { setDateTimeForTests } from "../utils";
import { ExcalidrawElement } from "../element/types"; import { ExcalidrawElement } from "../element/types";
import { handlerRectangles } from "../element"; import { getTransformHandles as _getTransformHandles } from "../element";
import { queryByText } from "@testing-library/react"; import { queryByText } from "@testing-library/react";
import { copiedStyles } from "../actions/actionStyles"; import { copiedStyles } from "../actions/actionStyles";
@ -192,9 +192,9 @@ function getStateHistory() {
return h.history.stateHistory; return h.history.stateHistory;
} }
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>; type HandlerRectanglesRet = keyof ReturnType<typeof _getTransformHandles>;
const getResizeHandles = (pointerType: "mouse" | "touch" | "pen") => { const getTransformHandles = (pointerType: "mouse" | "touch" | "pen") => {
const rects = handlerRectangles( const rects = _getTransformHandles(
getSelectedElement(), getSelectedElement(),
h.state.zoom, h.state.zoom,
pointerType, pointerType,
@ -362,10 +362,12 @@ describe("regression tests", () => {
mouse.down(10, 10); mouse.down(10, 10);
mouse.up(10, 10); mouse.up(10, 10);
const resizeHandles = getResizeHandles("mouse"); const transformHandles = getTransformHandles("mouse");
delete resizeHandles.rotation; // exclude rotation handle delete transformHandles.rotation; // exclude rotation handle
for (const handlePos in resizeHandles) { for (const handlePos in transformHandles) {
const [x, y] = resizeHandles[handlePos as keyof typeof resizeHandles]; const [x, y] = transformHandles[
handlePos as keyof typeof transformHandles
];
const { width: prevWidth, height: prevHeight } = getSelectedElement(); const { width: prevWidth, height: prevHeight } = getSelectedElement();
mouse.restorePosition(x, y); mouse.restorePosition(x, y);
mouse.down(); mouse.down();