From aa221837fc7601b3032ac17ab32311a61314b6c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Forja?= Date: Sun, 6 Dec 2020 22:39:31 +0000 Subject: [PATCH] Enhance aspect ratio tools | Rectangle, Diamond, Ellipses (#2439) Co-authored-by: dwelle --- src/components/App.tsx | 215 +- src/element/resizeElements.ts | 212 +- src/element/transformHandles.ts | 7 +- src/element/typeChecks.ts | 13 + src/keys.ts | 11 +- src/math.ts | 6 + .../regressionTests.test.tsx.snap | 9211 ----------------- src/tests/__snapshots__/resize.test.tsx.snap | 27 - src/tests/helpers/ui.ts | 10 +- src/tests/regressionTests.test.tsx | 83 - src/tests/resize.test.tsx | 185 +- 11 files changed, 488 insertions(+), 9492 deletions(-) delete mode 100644 src/tests/__snapshots__/resize.test.tsx.snap diff --git a/src/components/App.tsx b/src/components/App.tsx index ebb3f2a99..613dd51a8 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -164,6 +164,7 @@ import { shouldEnableBindingForPointerEvent, } from "../element/binding"; import { MaybeTransformHandleType } from "../element/transformHandles"; +import { deepCopyElement } from "../element/newElement"; import { renderSpreadsheet } from "../charts"; import { isValidLibrary } from "../data/json"; import { getNewZoom } from "../scene/zoom"; @@ -206,8 +207,7 @@ export type PointerDownState = Readonly<{ // The previous pointer position lastCoords: { x: number; y: number }; // map of original elements data - // (for now only a subset of props for perf reasons) - originalElements: Map>; + originalElements: Map>; resize: { // Handle when resizing, might change during the pointer interaction handleType: MaybeTransformHandleType; @@ -246,6 +246,10 @@ export type PointerDownState = Readonly<{ onMove: null | ((event: PointerEvent) => void); // It's defined on the initial pointer down event onUp: null | ((event: PointerEvent) => void); + // It's defined on the initial pointer down event + onKeyDown: null | ((event: KeyboardEvent) => void); + // It's defined on the initial pointer down event + onKeyUp: null | ((event: KeyboardEvent) => void); }; }>; @@ -2002,12 +2006,19 @@ class App extends React.Component { pointerDownState, ); + const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState); + const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState); + lastPointerUp = onPointerUp; window.addEventListener(EVENT.POINTER_MOVE, onPointerMove); window.addEventListener(EVENT.POINTER_UP, onPointerUp); + window.addEventListener(EVENT.KEYDOWN, onKeyDown); + window.addEventListener(EVENT.KEYUP, onKeyUp); pointerDownState.eventListeners.onMove = onPointerMove; pointerDownState.eventListeners.onUp = onPointerUp; + pointerDownState.eventListeners.onKeyUp = onKeyUp; + pointerDownState.eventListeners.onKeyDown = onKeyDown; }; private maybeOpenContextMenuAfterPointerDownOnTouchDevices = ( @@ -2182,11 +2193,7 @@ class App extends React.Component { // we need to duplicate because we'll be updating this state lastCoords: { ...origin }, originalElements: this.scene.getElements().reduce((acc, element) => { - acc.set(element.id, { - x: element.x, - y: element.y, - angle: element.angle, - }); + acc.set(element.id, deepCopyElement(element)); return acc; }, new Map() as PointerDownState["originalElements"]), resize: { @@ -2213,6 +2220,8 @@ class App extends React.Component { eventListeners: { onMove: null, onUp: null, + onKeyUp: null, + onKeyDown: null, }, }; } @@ -2614,6 +2623,30 @@ class App extends React.Component { } }; + private onKeyDownFromPointerDownHandler( + pointerDownState: PointerDownState, + ): (event: KeyboardEvent) => void { + return withBatchedUpdates((event: KeyboardEvent) => { + if (this.maybeHandleResize(pointerDownState, event)) { + return; + } + this.maybeDragNewGenericElement(pointerDownState, event); + }); + } + + private onKeyUpFromPointerDownHandler( + pointerDownState: PointerDownState, + ): (event: KeyboardEvent) => void { + return withBatchedUpdates((event: KeyboardEvent) => { + // Prevents focus from escaping excalidraw tab + event.key === KEYS.ALT && event.preventDefault(); + if (this.maybeHandleResize(pointerDownState, event)) { + return; + } + this.maybeDragNewGenericElement(pointerDownState, event); + }); + } + private onPointerMoveFromPointerDownHandler( pointerDownState: PointerDownState, ): (event: PointerEvent) => void { @@ -2670,43 +2703,10 @@ class App extends React.Component { } if (pointerDownState.resize.isResizing) { - const selectedElements = getSelectedElements( - this.scene.getElements(), - this.state, - ); - const transformHandleType = pointerDownState.resize.handleType; - this.setState({ - // TODO: rename this state field to "isScaling" to distinguish - // it from the generic "isResizing" which includes scaling and - // rotating - isResizing: transformHandleType && transformHandleType !== "rotation", - isRotating: transformHandleType === "rotation", - }); - const [resizeX, resizeY] = getGridPoint( - pointerCoords.x - pointerDownState.resize.offset.x, - pointerCoords.y - pointerDownState.resize.offset.y, - this.state.gridSize, - ); - if ( - transformElements( - pointerDownState, - transformHandleType, - (newTransformHandle) => { - pointerDownState.resize.handleType = newTransformHandle; - }, - selectedElements, - pointerDownState.resize.arrowDirection, - getRotateWithDiscreteAngleKey(event), - getResizeWithSidesSameLengthKey(event), - getResizeCenterPointKey(event), - resizeX, - resizeY, - pointerDownState.resize.center.x, - pointerDownState.resize.center.y, - ) - ) { - this.maybeSuggestBindingForAll(selectedElements); - return; + pointerDownState.lastCoords.x = pointerCoords.x; + pointerDownState.lastCoords.y = pointerCoords.y; + if (this.maybeHandleResize(pointerDownState, event)) { + return true; } } @@ -2881,33 +2881,10 @@ class App extends React.Component { this.state.startBoundElement, ); } - } else if (draggingElement.type === "selection") { - dragNewElement( - draggingElement, - this.state.elementType, - pointerDownState.origin.x, - pointerDownState.origin.y, - pointerCoords.x, - pointerCoords.y, - distance(pointerDownState.origin.x, pointerCoords.x), - distance(pointerDownState.origin.y, pointerCoords.y), - getResizeWithSidesSameLengthKey(event), - getResizeCenterPointKey(event), - ); } else { - dragNewElement( - draggingElement, - this.state.elementType, - pointerDownState.originInGrid.x, - pointerDownState.originInGrid.y, - gridX, - gridY, - distance(pointerDownState.originInGrid.x, gridX), - distance(pointerDownState.originInGrid.y, gridY), - getResizeWithSidesSameLengthKey(event), - getResizeCenterPointKey(event), - ); - this.maybeSuggestBindingForAll([draggingElement]); + pointerDownState.lastCoords.x = pointerCoords.x; + pointerDownState.lastCoords.y = pointerCoords.y; + this.maybeDragNewGenericElement(pointerDownState, event); } if (this.state.elementType === "selection") { @@ -3029,6 +3006,14 @@ class App extends React.Component { EVENT.POINTER_UP, pointerDownState.eventListeners.onUp!, ); + window.removeEventListener( + EVENT.KEYDOWN, + pointerDownState.eventListeners.onKeyDown!, + ); + window.removeEventListener( + EVENT.KEYUP, + pointerDownState.eventListeners.onKeyUp!, + ); if (draggingElement?.type === "draw") { this.actionManager.executeAction(actionFinalize); @@ -3451,6 +3436,96 @@ class App extends React.Component { this.openContextMenu(event); }; + private maybeDragNewGenericElement = ( + pointerDownState: PointerDownState, + event: MouseEvent | KeyboardEvent, + ): void => { + const draggingElement = this.state.draggingElement; + const pointerCoords = pointerDownState.lastCoords; + if (!draggingElement) { + return; + } + if (draggingElement.type === "selection") { + dragNewElement( + draggingElement, + this.state.elementType, + pointerDownState.origin.x, + pointerDownState.origin.y, + pointerCoords.x, + pointerCoords.y, + distance(pointerDownState.origin.x, pointerCoords.x), + distance(pointerDownState.origin.y, pointerCoords.y), + getResizeWithSidesSameLengthKey(event), + getResizeCenterPointKey(event), + ); + } else { + const [gridX, gridY] = getGridPoint( + pointerCoords.x, + pointerCoords.y, + this.state.gridSize, + ); + dragNewElement( + draggingElement, + this.state.elementType, + pointerDownState.originInGrid.x, + pointerDownState.originInGrid.y, + gridX, + gridY, + distance(pointerDownState.originInGrid.x, gridX), + distance(pointerDownState.originInGrid.y, gridY), + getResizeWithSidesSameLengthKey(event), + getResizeCenterPointKey(event), + ); + this.maybeSuggestBindingForAll([draggingElement]); + } + }; + + private maybeHandleResize = ( + pointerDownState: PointerDownState, + event: MouseEvent | KeyboardEvent, + ): boolean => { + const selectedElements = getSelectedElements( + this.scene.getElements(), + this.state, + ); + const transformHandleType = pointerDownState.resize.handleType; + this.setState({ + // TODO: rename this state field to "isScaling" to distinguish + // it from the generic "isResizing" which includes scaling and + // rotating + isResizing: transformHandleType && transformHandleType !== "rotation", + isRotating: transformHandleType === "rotation", + }); + const pointerCoords = pointerDownState.lastCoords; + const [resizeX, resizeY] = getGridPoint( + pointerCoords.x - pointerDownState.resize.offset.x, + pointerCoords.y - pointerDownState.resize.offset.y, + this.state.gridSize, + ); + if ( + transformElements( + pointerDownState, + transformHandleType, + (newTransformHandle) => { + pointerDownState.resize.handleType = newTransformHandle; + }, + selectedElements, + pointerDownState.resize.arrowDirection, + getRotateWithDiscreteAngleKey(event), + getResizeCenterPointKey(event), + getResizeWithSidesSameLengthKey(event), + resizeX, + resizeY, + pointerDownState.resize.center.x, + pointerDownState.resize.center.y, + ) + ) { + this.maybeSuggestBindingForAll(selectedElements); + return true; + } + return false; + }; + private openContextMenu = ({ clientX, clientY, diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts index 83e9e3de8..199e3a482 100644 --- a/src/element/resizeElements.ts +++ b/src/element/resizeElements.ts @@ -1,19 +1,27 @@ import { SHIFT_LOCKING_ANGLE } from "../constants"; import { rescalePoints } from "../points"; -import { rotate, adjustXYWithRotation, getFlipAdjustment } from "../math"; +import { + rotate, + adjustXYWithRotation, + getFlipAdjustment, + centerPoint, + rotatePoint, +} from "../math"; import { ExcalidrawLinearElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, NonDeleted, + ExcalidrawGenericElement, + ExcalidrawElement, } from "./types"; import { getElementAbsoluteCoords, getCommonBounds, getResizedElementAbsoluteCoords, } from "./bounds"; -import { isLinearElement } from "./typeChecks"; +import { isGenericElement, isLinearElement, isTextElement } from "./typeChecks"; import { mutateElement } from "./mutateElement"; import { getPerfectElementSize } from "./sizeHelpers"; import { @@ -25,8 +33,10 @@ import { updateBoundElements } from "./binding"; import { TransformHandleType, MaybeTransformHandleType, + TransformHandleDirection, } from "./transformHandles"; import { PointerDownState } from "../components/App"; +import { Point } from "../types"; const normalizeAngle = (angle: number): number => { if (angle >= 2 * Math.PI) { @@ -43,8 +53,8 @@ export const transformElements = ( selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", isRotateWithDiscreteAngle: boolean, - isResizeWithSidesSameLength: boolean, isResizeCenterPoint: boolean, + shouldKeepSidesRatio: boolean, pointerX: number, pointerY: number, centerX: number, @@ -76,7 +86,7 @@ export const transformElements = ( pointerY, ); } else if ( - element.type === "text" && + isTextElement(element) && (transformHandleType === "nw" || transformHandleType === "ne" || transformHandleType === "sw" || @@ -91,22 +101,35 @@ export const transformElements = ( ); updateBoundElements(element); } else if (transformHandleType) { - resizeSingleElement( - element, - transformHandleType, - isResizeWithSidesSameLength, - isResizeCenterPoint, - pointerX, - pointerY, - ); - setTransformHandle( - normalizeTransformHandleType(element, transformHandleType), - ); - if (element.width < 0) { - mutateElement(element, { width: -element.width }); - } - if (element.height < 0) { - mutateElement(element, { height: -element.height }); + if (isGenericElement(element)) { + resizeSingleGenericElement( + pointerDownState.originalElements.get(element.id) as typeof element, + shouldKeepSidesRatio, + element, + transformHandleType, + isResizeCenterPoint, + pointerX, + pointerY, + ); + } else { + const keepSquareAspectRatio = shouldKeepSidesRatio; + resizeSingleNonGenericElement( + element, + transformHandleType, + isResizeCenterPoint, + keepSquareAspectRatio, + pointerX, + pointerY, + ); + setTransformHandle( + normalizeTransformHandleType(element, transformHandleType), + ); + if (element.width < 0) { + mutateElement(element, { width: -element.width }); + } + if (element.height < 0) { + mutateElement(element, { height: -element.height }); + } } } @@ -391,17 +414,153 @@ const resizeSingleTextElement = ( } }; -const resizeSingleElement = ( +const resizeSingleGenericElement = ( + stateAtResizeStart: NonDeleted, + shouldKeepSidesRatio: boolean, element: NonDeletedExcalidrawElement, - transformHandleType: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se", - sidesWithSameLength: boolean, + transformHandleDirection: TransformHandleDirection, isResizeFromCenter: boolean, pointerX: number, pointerY: number, +) => { + const [x1, y1, x2, y2] = getElementAbsoluteCoords(stateAtResizeStart); + const startTopLeft: Point = [x1, y1]; + const startBottomRight: Point = [x2, y2]; + const startCenter: Point = centerPoint(startTopLeft, startBottomRight); + + // Calculate new dimensions based on cursor position + let newWidth = stateAtResizeStart.width; + let newHeight = stateAtResizeStart.height; + const rotatedPointer = rotatePoint( + [pointerX, pointerY], + startCenter, + -stateAtResizeStart.angle, + ); + if (transformHandleDirection.includes("e")) { + newWidth = rotatedPointer[0] - startTopLeft[0]; + } + if (transformHandleDirection.includes("s")) { + newHeight = rotatedPointer[1] - startTopLeft[1]; + } + if (transformHandleDirection.includes("w")) { + newWidth = startBottomRight[0] - rotatedPointer[0]; + } + if (transformHandleDirection.includes("n")) { + newHeight = startBottomRight[1] - rotatedPointer[1]; + } + + // adjust dimensions for resizing from center + if (isResizeFromCenter) { + newWidth = 2 * newWidth - stateAtResizeStart.width; + newHeight = 2 * newHeight - stateAtResizeStart.height; + } + + // adjust dimensions to keep sides ratio + if (shouldKeepSidesRatio) { + const widthRatio = Math.abs(newWidth) / stateAtResizeStart.width; + const heightRatio = Math.abs(newHeight) / stateAtResizeStart.height; + if (transformHandleDirection.length === 1) { + newHeight *= widthRatio; + newWidth *= heightRatio; + } + if (transformHandleDirection.length === 2) { + const ratio = Math.max(widthRatio, heightRatio); + newWidth = stateAtResizeStart.width * ratio * Math.sign(newWidth); + newHeight = stateAtResizeStart.height * ratio * Math.sign(newHeight); + } + } + + // Calculate new topLeft based on fixed corner during resize + let newTopLeft = startTopLeft as [number, number]; + if (["n", "w", "nw"].includes(transformHandleDirection)) { + newTopLeft = [ + startBottomRight[0] - Math.abs(newWidth), + startBottomRight[1] - Math.abs(newHeight), + ]; + } + if (transformHandleDirection === "ne") { + const bottomLeft = [ + stateAtResizeStart.x, + stateAtResizeStart.y + stateAtResizeStart.height, + ]; + newTopLeft = [bottomLeft[0], bottomLeft[1] - Math.abs(newHeight)]; + } + if (transformHandleDirection === "sw") { + const topRight = [ + stateAtResizeStart.x + stateAtResizeStart.width, + stateAtResizeStart.y, + ]; + newTopLeft = [topRight[0] - Math.abs(newWidth), topRight[1]]; + } + + // Keeps opposite handle fixed during resize + if (shouldKeepSidesRatio) { + if (["s", "n"].includes(transformHandleDirection)) { + newTopLeft[0] = startCenter[0] - newWidth / 2; + } + if (["e", "w"].includes(transformHandleDirection)) { + newTopLeft[1] = startCenter[1] - newHeight / 2; + } + } + + // Flip horizontally + if (newWidth < 0) { + if (transformHandleDirection.includes("e")) { + newTopLeft[0] -= Math.abs(newWidth); + } + if (transformHandleDirection.includes("w")) { + newTopLeft[0] += Math.abs(newWidth); + } + } + // Flip vertically + if (newHeight < 0) { + if (transformHandleDirection.includes("s")) { + newTopLeft[1] -= Math.abs(newHeight); + } + if (transformHandleDirection.includes("n")) { + newTopLeft[1] += Math.abs(newHeight); + } + } + + if (isResizeFromCenter) { + newTopLeft[0] = startCenter[0] - Math.abs(newWidth) / 2; + newTopLeft[1] = startCenter[1] - Math.abs(newHeight) / 2; + } + + // adjust topLeft to new rotation point + const angle = stateAtResizeStart.angle; + const rotatedTopLeft = rotatePoint(newTopLeft, startCenter, angle); + const newCenter: Point = [ + newTopLeft[0] + Math.abs(newWidth) / 2, + newTopLeft[1] + Math.abs(newHeight) / 2, + ]; + const rotatedNewCenter = rotatePoint(newCenter, startCenter, angle); + newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle); + + const resizedElement = { + width: Math.abs(newWidth), + height: Math.abs(newHeight), + x: newTopLeft[0], + y: newTopLeft[1], + }; + updateBoundElements(element, { + newSize: { width: resizedElement.width, height: resizedElement.height }, + }); + mutateElement(element, resizedElement); +}; + +const resizeSingleNonGenericElement = ( + element: NonDeleted>, + transformHandleType: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se", + isResizeFromCenter: boolean, + keepSquareAspectRatio: boolean, + pointerX: number, + pointerY: number, ) => { const [x1, y1, x2, y2] = getElementAbsoluteCoords(element); const cx = (x1 + x2) / 2; const cy = (y1 + y2) / 2; + // rotation pointer with reverse angle const [rotatedX, rotatedY] = rotate( pointerX, @@ -410,6 +569,7 @@ const resizeSingleElement = ( cy, -element.angle, ); + let scaleX = 1; let scaleY = 1; if ( @@ -442,9 +602,10 @@ const resizeSingleElement = ( } let nextWidth = element.width * scaleX; let nextHeight = element.height * scaleY; - if (sidesWithSameLength) { + if (keepSquareAspectRatio) { nextWidth = nextHeight = Math.max(nextWidth, nextHeight); } + const [nextX1, nextY1, nextX2, nextY2] = getResizedElementAbsoluteCoords( element, nextWidth, @@ -454,7 +615,9 @@ const resizeSingleElement = ( const deltaY1 = (y1 - nextY1) / 2; const deltaX2 = (x2 - nextX2) / 2; const deltaY2 = (y2 - nextY2) / 2; + const rescaledPoints = rescalePointsInElement(element, nextWidth, nextHeight); + updateBoundElements(element, { newSize: { width: nextWidth, height: nextHeight }, }); @@ -491,6 +654,7 @@ const resizeSingleElement = ( deltaX2, deltaY2, ); + if ( nextWidth !== 0 && nextHeight !== 0 && diff --git a/src/element/transformHandles.ts b/src/element/transformHandles.ts index bf837fbeb..579dd5399 100644 --- a/src/element/transformHandles.ts +++ b/src/element/transformHandles.ts @@ -4,7 +4,7 @@ import { getElementAbsoluteCoords, Bounds } from "./bounds"; import { rotate } from "../math"; import { Zoom } from "../types"; -export type TransformHandleType = +export type TransformHandleDirection = | "n" | "s" | "w" @@ -12,8 +12,9 @@ export type TransformHandleType = | "nw" | "ne" | "sw" - | "se" - | "rotation"; + | "se"; + +export type TransformHandleType = TransformHandleDirection | "rotation"; export type TransformHandle = [number, number, number, number]; export type TransformHandles = Partial< diff --git a/src/element/typeChecks.ts b/src/element/typeChecks.ts index 646ca7ae0..97b008b09 100644 --- a/src/element/typeChecks.ts +++ b/src/element/typeChecks.ts @@ -3,8 +3,21 @@ import { ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, + ExcalidrawGenericElement, } from "./types"; +export const isGenericElement = ( + element: ExcalidrawElement | null, +): element is ExcalidrawGenericElement => { + return ( + element != null && + (element.type === "selection" || + element.type === "rectangle" || + element.type === "diamond" || + element.type === "ellipse") + ); +}; + export const isTextElement = ( element: ExcalidrawElement | null, ): element is ExcalidrawTextElement => { diff --git a/src/keys.ts b/src/keys.ts index c9eca3205..bdec27d97 100644 --- a/src/keys.ts +++ b/src/keys.ts @@ -26,6 +26,7 @@ export const KEYS = { ARROW_RIGHT: "ArrowRight", ARROW_UP: "ArrowUp", BACKSPACE: "Backspace", + ALT: "Alt", CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey", DELETE: "Delete", ENTER: "Enter", @@ -59,8 +60,10 @@ export const isArrowKey = (key: string) => export const getResizeCenterPointKey = (event: MouseEvent | KeyboardEvent) => event.altKey; -export const getResizeWithSidesSameLengthKey = (event: MouseEvent) => - event.shiftKey; +export const getResizeWithSidesSameLengthKey = ( + event: MouseEvent | KeyboardEvent, +) => event.shiftKey; -export const getRotateWithDiscreteAngleKey = (event: MouseEvent) => - event.shiftKey; +export const getRotateWithDiscreteAngleKey = ( + event: MouseEvent | KeyboardEvent, +) => event.shiftKey; diff --git a/src/math.ts b/src/math.ts index e60b8b0da..dadc6ccca 100644 --- a/src/math.ts +++ b/src/math.ts @@ -17,6 +17,12 @@ export const rotate = ( (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2, ]; +export const rotatePoint = ( + point: Point, + center: Point, + angle: number, +): [number, number] => rotate(point[0], point[1], center[0], center[1], angle); + export const adjustXYWithRotation = ( sides: { n?: boolean; diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 51eadb892..59e6d58fd 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -12496,9217 +12496,6 @@ exports[`regression tests rerenders UI on language change: [end of test] number exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `4`; -exports[`regression tests resize an element, trying every resize handle: [end of test] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id16": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [end of test] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 18, - "versionNonce": 845789479, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [end of test] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 14, - "versionNonce": 406373543, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 15, - "versionNonce": 908564423, - "width": 5, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 16, - "versionNonce": 1359939303, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 17, - "versionNonce": 2004587015, - "width": 15, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id16": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 18, - "versionNonce": 845789479, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [end of test] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [end of test] number of renders 1`] = `53`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (+5, +5)] number of renders 1`] = `26`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle ne (-5, -5)] number of renders 1`] = `20`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (+5, +5)] number of renders 1`] = `14`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle nw (-5, -5)] number of renders 1`] = `8`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 17, - "versionNonce": 2004587015, - "width": 15, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 14, - "versionNonce": 406373543, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 15, - "versionNonce": 908564423, - "width": 5, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 16, - "versionNonce": 1359939303, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 17, - "versionNonce": 2004587015, - "width": 15, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (+5, +5)] number of renders 1`] = `50`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 15, - "versionNonce": 908564423, - "width": 5, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 14, - "versionNonce": 406373543, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 15, - "versionNonce": 908564423, - "width": 5, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle se (-5, -5)] number of renders 1`] = `44`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (+5, +5)] number of renders 1`] = `38`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [resize handle sw (-5, -5)] number of renders 1`] = `32`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (+5, +5)] number of renders 1`] = `29`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (-5, -5)] number of renders 1`] = `23`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (+5, +5)] number of renders 1`] = `17`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (-5, -5)] number of renders 1`] = `11`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id16": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 18, - "versionNonce": 845789479, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 14, - "versionNonce": 406373543, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 15, - "versionNonce": 908564423, - "width": 5, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 16, - "versionNonce": 1359939303, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 17, - "versionNonce": 2004587015, - "width": 15, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id15": true, - "id16": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 18, - "versionNonce": 845789479, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (+5, +5)] number of renders 1`] = `53`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 16, - "versionNonce": 1359939303, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 14, - "versionNonce": 406373543, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 15, - "versionNonce": 908564423, - "width": 5, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id13": true, - "id14": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 16, - "versionNonce": 1359939303, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle se (-5, -5)] number of renders 1`] = `47`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (+5, +5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (+5, +5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 14, - "versionNonce": 406373543, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (+5, +5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 13, - "versionNonce": 1898319239, - "width": 5, - "x": 15, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id11": true, - "id12": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 14, - "versionNonce": 406373543, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (+5, +5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (+5, +5)] number of renders 1`] = `41`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (-5, -5)] appState 1`] = ` -Object { - "appearance": "light", - "collaborators": Map {}, - "currentItemBackgroundColor": "transparent", - "currentItemFillStyle": "hachure", - "currentItemFontFamily": 1, - "currentItemFontSize": 20, - "currentItemLinearStrokeSharpness": "round", - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemStrokeColor": "#000000", - "currentItemStrokeSharpness": "sharp", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 1, - "currentItemTextAlign": "left", - "cursorButton": "up", - "cursorX": 0, - "cursorY": 0, - "draggingElement": null, - "editingElement": null, - "editingGroupId": null, - "editingLinearElement": null, - "elementLocked": false, - "elementType": "selection", - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "fileHandle": null, - "gridSize": null, - "height": 768, - "isBindingEnabled": true, - "isLibraryOpen": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "offsetLeft": 0, - "offsetTop": 0, - "openMenu": null, - "previousSelectedElementIds": Object {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "selectedGroupIds": Object {}, - "selectionElement": null, - "shouldAddWatermark": false, - "shouldCacheIgnoreZoom": false, - "showShortcutsDialog": false, - "startBoundElement": null, - "suggestedBindings": Array [], - "viewBackgroundColor": "#ffffff", - "width": 1024, - "zenModeEnabled": false, - "zoom": Object { - "translation": Object { - "x": 0, - "y": 0, - }, - "value": 1, - }, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (-5, -5)] element 0 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (-5, -5)] history 1`] = ` -Object { - "recording": false, - "redoStack": Array [], - "stateHistory": Array [ - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object {}, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 2, - "versionNonce": 1278240551, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 453191, - "width": 15, - "x": 5, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 4, - "versionNonce": 2019559783, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 5, - "versionNonce": 1116226695, - "width": 5, - "x": 15, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 6, - "versionNonce": 238820263, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 15, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 7, - "versionNonce": 1604849351, - "width": 5, - "x": 10, - "y": 5, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 8, - "versionNonce": 23633383, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 9, - "versionNonce": 915032327, - "width": 15, - "x": 10, - "y": 15, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 10, - "versionNonce": 747212839, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 5, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 11, - "versionNonce": 760410951, - "width": 15, - "x": 5, - "y": 10, - }, - ], - }, - Object { - "appState": Object { - "editingGroupId": null, - "editingLinearElement": null, - "name": "Untitled-201933152653", - "selectedElementIds": Object { - "id0": true, - "id1": true, - "id10": true, - "id2": true, - "id3": true, - "id4": true, - "id5": true, - "id6": true, - "id7": true, - "id8": true, - "id9": true, - }, - "viewBackgroundColor": "#ffffff", - }, - "elements": Array [ - Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 10, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 12, - "versionNonce": 289600103, - "width": 10, - "x": 10, - "y": 10, - }, - ], - }, - ], -} -`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (-5, -5)] number of elements 1`] = `1`; - -exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (-5, -5)] number of renders 1`] = `35`; - exports[`regression tests selecting 'Add to library' in context menu adds element to library: [end of test] appState 1`] = ` Object { "appearance": "light", diff --git a/src/tests/__snapshots__/resize.test.tsx.snap b/src/tests/__snapshots__/resize.test.tsx.snap deleted file mode 100644 index 46e5e05ab..000000000 --- a/src/tests/__snapshots__/resize.test.tsx.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`resize element rectangle 1`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElementIds": null, - "fillStyle": "hachure", - "groupIds": Array [], - "height": 50, - "id": "id0", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 337897, - "strokeColor": "#000000", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "version": 3, - "versionNonce": 401146281, - "width": 30, - "x": 29, - "y": 47, -} -`; diff --git a/src/tests/helpers/ui.ts b/src/tests/helpers/ui.ts index cd6356120..1ae572044 100644 --- a/src/tests/helpers/ui.ts +++ b/src/tests/helpers/ui.ts @@ -14,11 +14,13 @@ let altKey = false; let shiftKey = false; let ctrlKey = false; +export type KeyboardModifiers = { + alt?: boolean; + shift?: boolean; + ctrl?: boolean; +}; export class Keyboard { - static withModifierKeys = ( - modifiers: { alt?: boolean; shift?: boolean; ctrl?: boolean }, - cb: () => void, - ) => { + static withModifierKeys = (modifiers: KeyboardModifiers, cb: () => void) => { const prevAltKey = altKey; const prevShiftKey = shiftKey; const prevCtrlKey = ctrlKey; diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index c58a44b88..9dec3230f 100644 --- a/src/tests/regressionTests.test.tsx +++ b/src/tests/regressionTests.test.tsx @@ -13,7 +13,6 @@ import Excalidraw from "../packages/excalidraw/index"; import { setLanguage } from "../i18n"; import { setDateTimeForTests } from "../utils"; import { ExcalidrawElement } from "../element/types"; -import { getTransformHandles as _getTransformHandles } from "../element"; import { queryByText } from "@testing-library/react"; import { copiedStyles } from "../actions/actionStyles"; import { UI, Pointer, Keyboard } from "./helpers/ui"; @@ -44,27 +43,6 @@ const clickLabeledElement = (label: string) => { fireEvent.click(element); }; -type HandlerRectanglesRet = keyof ReturnType; -const getTransformHandles = (pointerType: "mouse" | "touch" | "pen") => { - const rects = _getTransformHandles( - API.getSelectedElement(), - h.state.zoom, - pointerType, - ) as { - [T in HandlerRectanglesRet]: [number, number, number, number]; - }; - - const rv: { [K in keyof typeof rects]: [number, number] } = {} as any; - - for (const handlePos in rects) { - const [x, y, width, height] = rects[handlePos as keyof typeof rects]; - - rv[handlePos as keyof typeof rects] = [x + width / 2, y + height / 2]; - } - - return rv; -}; - /** * This is always called at the end of your test, so usually you don't need to call it. * However, if you have a long test, you might want to call it during the test so it's easier @@ -204,67 +182,6 @@ describe("regression tests", () => { expect(API.getSelectedElement().strokeColor).toBe("#5f3dc4"); }); - it("resize an element, trying every resize handle", () => { - UI.clickTool("rectangle"); - mouse.down(10, 10); - mouse.up(10, 10); - - const transformHandles = getTransformHandles("mouse"); - // @ts-ignore - delete transformHandles.rotation; // exclude rotation handle - for (const handlePos in transformHandles) { - const [x, y] = transformHandles[ - handlePos as keyof typeof transformHandles - ]; - const { width: prevWidth, height: prevHeight } = API.getSelectedElement(); - mouse.restorePosition(x, y); - mouse.down(); - mouse.up(-5, -5); - - const { - width: nextWidthNegative, - height: nextHeightNegative, - } = API.getSelectedElement(); - expect( - prevWidth !== nextWidthNegative || prevHeight !== nextHeightNegative, - ).toBeTruthy(); - checkpoint(`resize handle ${handlePos} (-5, -5)`); - - mouse.down(); - mouse.up(5, 5); - - const { width, height } = API.getSelectedElement(); - expect(width).toBe(prevWidth); - expect(height).toBe(prevHeight); - checkpoint(`unresize handle ${handlePos} (-5, -5)`); - - mouse.restorePosition(x, y); - mouse.down(); - mouse.up(5, 5); - - const { - width: nextWidthPositive, - height: nextHeightPositive, - } = API.getSelectedElement(); - expect( - prevWidth !== nextWidthPositive || prevHeight !== nextHeightPositive, - ).toBeTruthy(); - checkpoint(`resize handle ${handlePos} (+5, +5)`); - - mouse.down(); - mouse.up(-5, -5); - - const { - width: finalWidth, - height: finalHeight, - } = API.getSelectedElement(); - expect(finalWidth).toBe(prevWidth); - expect(finalHeight).toBe(prevHeight); - - checkpoint(`unresize handle ${handlePos} (+5, +5)`); - } - }); - it("click on an element and drag it", () => { UI.clickTool("rectangle"); mouse.down(10, 10); diff --git a/src/tests/resize.test.tsx b/src/tests/resize.test.tsx index 799b15365..8d207c08e 100644 --- a/src/tests/resize.test.tsx +++ b/src/tests/resize.test.tsx @@ -1,11 +1,15 @@ import React from "react"; import ReactDOM from "react-dom"; -import { render, fireEvent } from "./test-utils"; -import ExcalidrawApp from "../excalidraw-app"; +import { render } from "./test-utils"; +import App from "../components/App"; import * as Renderer from "../renderer/renderScene"; import { reseed } from "../random"; -import { UI, Pointer, Keyboard } from "./helpers/ui"; -import { getTransformHandles } from "../element/transformHandles"; +import { UI, Pointer, Keyboard, KeyboardModifiers } from "./helpers/ui"; +import { + getTransformHandles, + TransformHandleDirection, +} from "../element/transformHandles"; +import { ExcalidrawElement } from "../element/types"; const mouse = new Pointer("mouse"); @@ -21,70 +25,119 @@ beforeEach(() => { const { h } = window; -describe("resize element", () => { - it("rectangle", async () => { - const { getByToolName, container } = await render(); - const canvas = container.querySelector("canvas")!; +describe("resize rectangle ellipses and diamond elements", () => { + const elemData = { + x: 0, + y: 0, + width: 100, + height: 100, + }; + // Value for irrelevant cursor movements + const _ = 234; - { - // create element - const tool = getByToolName("rectangle"); - fireEvent.click(tool); - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); - fireEvent.pointerUp(canvas); - - expect(renderScene).toHaveBeenCalledTimes(6); - expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(1); - expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); - expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]); - - expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]); - - renderScene.mockClear(); - } - - // select the element first - fireEvent.pointerDown(canvas, { clientX: 50, clientY: 20 }); - fireEvent.pointerUp(canvas); - - // select a handler rectangle (top-left) - fireEvent.pointerDown(canvas, { clientX: 21, clientY: 13 }); - fireEvent.pointerMove(canvas, { clientX: 20, clientY: 40 }); - fireEvent.pointerUp(canvas); - - expect(renderScene).toHaveBeenCalledTimes(5); - expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(1); - expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]); - expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]); - - h.elements.forEach((element) => expect(element).toMatchSnapshot()); + it.each` + handle | move | dimensions | topLeft + ${"n"} | ${[_, -100]} | ${[100, 200]} | ${[elemData.x, -100]} + ${"s"} | ${[_, 39]} | ${[100, 139]} | ${[elemData.x, elemData.x]} + ${"e"} | ${[-20, _]} | ${[80, 100]} | ${[elemData.x, elemData.y]} + ${"w"} | ${[-20, _]} | ${[120, 100]} | ${[-20, elemData.y]} + ${"ne"} | ${[10, 55]} | ${[110, 45]} | ${[elemData.x, 55]} + ${"se"} | ${[-30, -10]} | ${[70, 90]} | ${[elemData.x, elemData.y]} + ${"nw"} | ${[-300, -200]} | ${[400, 300]} | ${[-300, -200]} + ${"sw"} | ${[40, -20]} | ${[60, 80]} | ${[40, 0]} + `("resizes with handle $handle", ({ handle, move, dimensions, topLeft }) => { + render(); + const rectangle = UI.createElement("rectangle", elemData); + resize(rectangle, handle, move); + const element = h.elements[0]; + expect([element.width, element.height]).toEqual(dimensions); + expect([element.x, element.y]).toEqual(topLeft); }); + + it.each` + handle | move | dimensions | topLeft + ${"n"} | ${[_, -100]} | ${[200, 200]} | ${[-50, -100]} + ${"nw"} | ${[-300, -200]} | ${[400, 400]} | ${[-300, -300]} + ${"sw"} | ${[40, -20]} | ${[80, 80]} | ${[20, 0]} + `( + "resizes with fixed side ratios on handle $handle", + ({ handle, move, dimensions, topLeft }) => { + render(); + const rectangle = UI.createElement("rectangle", elemData); + resize(rectangle, handle, move, { shift: true }); + const element = h.elements[0]; + expect([element.width, element.height]).toEqual(dimensions); + expect([element.x, element.y]).toEqual(topLeft); + }, + ); + + it.each` + handle | move | dimensions | topLeft + ${"nw"} | ${[0, 120]} | ${[100, 100]} | ${[0, 100]} + ${"ne"} | ${[-120, 0]} | ${[100, 100]} | ${[-100, 0]} + ${"sw"} | ${[200, -200]} | ${[100, 100]} | ${[100, -100]} + ${"n"} | ${[_, 150]} | ${[50, 50]} | ${[25, 100]} + `( + "Flips while resizing and keeping side ratios on handle $handle", + ({ handle, move, dimensions, topLeft }) => { + render(); + const rectangle = UI.createElement("rectangle", elemData); + resize(rectangle, handle, move, { shift: true }); + const element = h.elements[0]; + expect([element.width, element.height]).toEqual(dimensions); + expect([element.x, element.y]).toEqual(topLeft); + }, + ); + + it.each` + handle | move | dimensions | topLeft + ${"ne"} | ${[50, -100]} | ${[200, 300]} | ${[-50, -100]} + ${"s"} | ${[_, -20]} | ${[100, 60]} | ${[0, 20]} + `( + "Resizes from center on handle $handle", + ({ handle, move, dimensions, topLeft }) => { + render(); + const rectangle = UI.createElement("rectangle", elemData); + resize(rectangle, handle, move, { alt: true }); + const element = h.elements[0]; + expect([element.width, element.height]).toEqual(dimensions); + expect([element.x, element.y]).toEqual(topLeft); + }, + ); + + it.each` + handle | move | dimensions | topLeft + ${"nw"} | ${[100, 120]} | ${[140, 140]} | ${[-20, -20]} + ${"e"} | ${[-130, _]} | ${[160, 160]} | ${[-30, -30]} + `( + "Resizes from center, flips and keeps side rations on handle $handle", + ({ handle, move, dimensions, topLeft }) => { + render(); + const rectangle = UI.createElement("rectangle", elemData); + resize(rectangle, handle, move, { alt: true, shift: true }); + const element = h.elements[0]; + expect([element.width, element.height]).toEqual(dimensions); + expect([element.x, element.y]).toEqual(topLeft); + }, + ); }); -describe("resize element with aspect ratio when SHIFT is clicked", () => { - it("rectangle", async () => { - await render(); - - const rectangle = UI.createElement("rectangle", { - x: 0, - width: 30, - height: 50, - }); - - mouse.select(rectangle); - - const se = getTransformHandles(rectangle, h.state.zoom, "mouse").se!; - const clientX = se[0] + se[2] / 2; - const clientY = se[1] + se[3] / 2; - Keyboard.withModifierKeys({ shift: true }, () => { - mouse.reset(); - mouse.down(clientX, clientY); - mouse.move(1, 1); - mouse.up(); - }); - expect([h.elements[0].width, h.elements[0].height]).toEqual([51, 51]); +function resize( + element: ExcalidrawElement, + handleDir: TransformHandleDirection, + mouseMove: [number, number], + keyboardModifiers: KeyboardModifiers = {}, +) { + mouse.select(element); + const handle = getTransformHandles(element, h.state.zoom, "mouse")[ + handleDir + ]!; + const clientX = handle[0] + handle[2] / 2; + const clientY = handle[1] + handle[3] / 2; + Keyboard.withModifierKeys(keyboardModifiers, () => { + mouse.reset(); + mouse.down(clientX, clientY); + mouse.move(mouseMove[0], mouseMove[1]); + mouse.up(); }); -}); +}