diff --git a/.eslintignore b/.eslintignore index 6cfa22ea..fd61fca2 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,4 @@ node_modules/ build/ package-lock.json .vscode/ +firebase/ diff --git a/src/appState.ts b/src/appState.ts index 6e15bc3b..8ea7e514 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -1,7 +1,6 @@ import { AppState, FlooredNumber } from "./types"; import { getDateTime } from "./utils"; -const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`; export const DEFAULT_FONT = "20px Virgil"; export function getDefaultAppState(): AppState { @@ -26,7 +25,7 @@ export function getDefaultAppState(): AppState { cursorX: 0, cursorY: 0, scrolledOutside: false, - name: DEFAULT_PROJECT_NAME, + name: `excalidraw-${getDateTime()}`, isCollaborating: false, isResizing: false, selectionElement: null, diff --git a/src/data/restore.ts b/src/data/restore.ts index e2b4dd98..ddbd4554 100644 --- a/src/data/restore.ts +++ b/src/data/restore.ts @@ -4,8 +4,8 @@ import { ExcalidrawElement } from "../element/types"; import { AppState } from "../types"; import { DataState } from "./types"; import { isInvisiblySmallElement, normalizeDimensions } from "../element"; -import nanoid from "nanoid"; import { calculateScrollCenter } from "../scene"; +import { randomId } from "../random"; export function restore( // we're making the elements mutable for this API because we want to @@ -62,7 +62,7 @@ export function restore( ...element, // all elements must have version > 0 so getDrawingVersion() will pick up newly added elements version: element.version || 1, - id: element.id || nanoid(), + id: element.id || randomId(), fillStyle: element.fillStyle || "hachure", strokeWidth: element.strokeWidth || 1, roughness: element.roughness ?? 1, diff --git a/src/element/mutateElement.ts b/src/element/mutateElement.ts index 45ba62cd..400e06ab 100644 --- a/src/element/mutateElement.ts +++ b/src/element/mutateElement.ts @@ -1,8 +1,8 @@ import { ExcalidrawElement } from "./types"; -import { randomSeed } from "roughjs/bin/math"; import { invalidateShapeForElement } from "../renderer/renderElement"; import { globalSceneState } from "../scene"; import { getSizeFromPoints } from "../points"; +import { randomInteger } from "../random"; type ElementUpdate = Omit< Partial, @@ -42,7 +42,7 @@ export function mutateElement>( } element.version++; - element.versionNonce = randomSeed(); + element.versionNonce = randomInteger(); globalSceneState.informMutation(); } @@ -54,7 +54,7 @@ export function newElementWith( return { ...element, version: element.version + 1, - versionNonce: randomSeed(), + versionNonce: randomInteger(), ...updates, }; } diff --git a/src/element/newElement.ts b/src/element/newElement.ts index 6928d493..23a1036a 100644 --- a/src/element/newElement.ts +++ b/src/element/newElement.ts @@ -1,6 +1,3 @@ -import { randomSeed } from "roughjs/bin/math"; -import nanoid from "nanoid"; - import { ExcalidrawElement, ExcalidrawTextElement, @@ -8,6 +5,7 @@ import { ExcalidrawGenericElement, } from "../element/types"; import { measureText } from "../utils"; +import { randomInteger, randomId } from "../random"; type ElementConstructorOpts = { x: ExcalidrawGenericElement["x"]; @@ -39,7 +37,7 @@ function _newElementBase( }: ElementConstructorOpts & Partial, ) { return { - id: rest.id || nanoid(), + id: rest.id || randomId(), type, x, y, @@ -51,7 +49,7 @@ function _newElementBase( strokeWidth, roughness, opacity, - seed: rest.seed ?? randomSeed(), + seed: rest.seed ?? randomInteger(), version: rest.version || 1, versionNonce: rest.versionNonce ?? 0, isDeleted: rest.isDeleted ?? false, @@ -145,8 +143,8 @@ export function duplicateElement>( overrides?: Partial, ): TElement { let copy: TElement = _duplicateElement(element); - copy.id = nanoid(); - copy.seed = randomSeed(); + copy.id = randomId(); + copy.seed = randomInteger(); if (overrides) { copy = Object.assign(copy, overrides); } diff --git a/src/history.ts b/src/history.ts index 35581c90..bccf3bf3 100644 --- a/src/history.ts +++ b/src/history.ts @@ -14,6 +14,14 @@ export class SceneHistory { private stateHistory: string[] = []; private redoStack: string[] = []; + getSnapshotForTest() { + return { + recording: this.recording, + stateHistory: this.stateHistory.map((s) => JSON.parse(s)), + redoStack: this.redoStack.map((s) => JSON.parse(s)), + }; + } + clear() { this.stateHistory.length = 0; this.redoStack.length = 0; diff --git a/src/keys.ts b/src/keys.ts index bb442e44..09b73f38 100644 --- a/src/keys.ts +++ b/src/keys.ts @@ -14,6 +14,8 @@ export const KEYS = { SPACE: " ", } as const; +export type Key = keyof typeof KEYS; + export function isArrowKey(keyCode: string) { return ( keyCode === KEYS.ARROW_LEFT || diff --git a/src/random.ts b/src/random.ts new file mode 100644 index 00000000..f9d070fa --- /dev/null +++ b/src/random.ts @@ -0,0 +1,18 @@ +import { Random } from "roughjs/bin/math"; +import nanoid from "nanoid"; + +let random = new Random(Date.now()); +let testIdBase = 0; + +export function randomInteger() { + return Math.floor(random.next() * 2 ** 31); +} + +export function reseed(seed: number) { + random = new Random(seed); + testIdBase = 0; +} + +export function randomId() { + return process.env.NODE_ENV === "test" ? `id${testIdBase++}` : nanoid(); +} diff --git a/src/tests/__snapshots__/dragCreate.test.tsx.snap b/src/tests/__snapshots__/dragCreate.test.tsx.snap new file mode 100644 index 00000000..cc8b2bc7 --- /dev/null +++ b/src/tests/__snapshots__/dragCreate.test.tsx.snap @@ -0,0 +1,136 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`add element to the scene when pointer dragging long enough arrow 1`] = `1`; + +exports[`add element to the scene when pointer dragging long enough arrow 2`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 30, + 50, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 3, + "versionNonce": 449462985, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`add element to the scene when pointer dragging long enough diamond 1`] = `1`; + +exports[`add element to the scene when pointer dragging long enough diamond 2`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 2, + "versionNonce": 1278240551, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`add element to the scene when pointer dragging long enough ellipse 1`] = `1`; + +exports[`add element to the scene when pointer dragging long enough ellipse 2`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 2, + "versionNonce": 1278240551, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`add element to the scene when pointer dragging long enough line 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 30, + 50, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 3, + "versionNonce": 449462985, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`add element to the scene when pointer dragging long enough rectangle 1`] = `1`; + +exports[`add element to the scene when pointer dragging long enough rectangle 2`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 30, + "x": 30, + "y": 20, +} +`; diff --git a/src/tests/__snapshots__/move.test.tsx.snap b/src/tests/__snapshots__/move.test.tsx.snap new file mode 100644 index 00000000..964fd52f --- /dev/null +++ b/src/tests/__snapshots__/move.test.tsx.snap @@ -0,0 +1,64 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`duplicate element on move when ALT is clicked rectangle 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`duplicate element on move when ALT is clicked rectangle 2`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 2019559783, + "width": 30, + "x": 0, + "y": 40, +} +`; + +exports[`move element rectangle 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 30, + "x": 0, + "y": 40, +} +`; diff --git a/src/tests/__snapshots__/multiPointCreate.test.tsx.snap b/src/tests/__snapshots__/multiPointCreate.test.tsx.snap new file mode 100644 index 00000000..cee17976 --- /dev/null +++ b/src/tests/__snapshots__/multiPointCreate.test.tsx.snap @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`multi point mode in linear elements arrow 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 110, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": Array [ + 70, + 110, + ], + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 20, + 30, + ], + Array [ + 70, + 110, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 7, + "versionNonce": 1116226695, + "width": 70, + "x": 30, + "y": 30, +} +`; + +exports[`multi point mode in linear elements line 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 110, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": Array [ + 70, + 110, + ], + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 20, + 30, + ], + Array [ + 70, + 110, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 7, + "versionNonce": 1116226695, + "width": 70, + "x": 30, + "y": 30, +} +`; diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap new file mode 100644 index 00000000..fb7338c5 --- /dev/null +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -0,0 +1,10762 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`regression tests alt-drag duplicates an element: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id2": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests alt-drag duplicates an element: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests alt-drag duplicates an element: [end of test] element 1 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 2019559783, + "width": 10, + "x": 20, + "y": 20, +} +`; + +exports[`regression tests alt-drag duplicates an element: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 2019559783, + "width": 10, + "x": 20, + "y": 20, + }, + ], + }, + ], +} +`; + +exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `2`; + +exports[`regression tests alt-drag duplicates an element: [end of test] number of renders 1`] = `8`; + +exports[`regression tests arrow keys: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests arrow keys: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 8, + "versionNonce": 1014066025, + "width": 10, + "x": 9, + "y": 9, +} +`; + +exports[`regression tests arrow keys: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests arrow keys: [end of test] number of elements 1`] = `1`; + +exports[`regression tests arrow keys: [end of test] number of renders 1`] = `11`; + +exports[`regression tests change the properties of a shape: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "#fa5252", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#5f3dc4", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests change the properties of a shape: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "#fa5252", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#5f3dc4", + "strokeWidth": 1, + "type": "rectangle", + "version": 6, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests change the properties of a shape: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 453191, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "#fa5252", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "#fa5252", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "#fa5252", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "#fa5252", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 6, + "versionNonce": 1116226695, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "#fa5252", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#5f3dc4", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "#fa5252", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#5f3dc4", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `1`; + +exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `9`; + +exports[`regression tests click on an element and drag it: [dragged] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests click on an element and drag it: [dragged] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 20, + "y": 20, +} +`; + +exports[`regression tests click on an element and drag it: [dragged] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 401146281, + "width": 10, + "x": 20, + "y": 20, + }, + ], + }, + ], +} +`; + +exports[`regression tests click on an element and drag it: [dragged] number of elements 1`] = `1`; + +exports[`regression tests click on an element and drag it: [dragged] number of renders 1`] = `8`; + +exports[`regression tests click on an element and drag it: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests click on an element and drag it: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 1116226695, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests click on an element and drag it: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 401146281, + "width": 10, + "x": 20, + "y": 20, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 1116226695, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests click on an element and drag it: [end of test] number of elements 1`] = `1`; + +exports[`regression tests click on an element and drag it: [end of test] number of renders 1`] = `11`; + +exports[`regression tests click to select a shape: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id2": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests click to select a shape: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests click to select a shape: [end of test] element 1 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, +} +`; + +exports[`regression tests click to select a shape: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests click to select a shape: [end of test] number of elements 1`] = `2`; + +exports[`regression tests click to select a shape: [end of test] number of renders 1`] = `11`; + +exports[`regression tests click-drag to select a group: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id3": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests click-drag to select a group: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests click-drag to select a group: [end of test] element 1 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, +} +`; + +exports[`regression tests click-drag to select a group: [end of test] element 2 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1014066025, + "width": 10, + "x": 50, + "y": 10, +} +`; + +exports[`regression tests click-drag to select a group: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1014066025, + "width": 10, + "x": 50, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests click-drag to select a group: [end of test] number of elements 1`] = `3`; + +exports[`regression tests click-drag to select a group: [end of test] number of renders 1`] = `16`; + +exports[`regression tests draw every type of shape: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object {}, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests draw every type of shape: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests draw every type of shape: [end of test] element 1 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 2, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, +} +`; + +exports[`regression tests draw every type of shape: [end of test] element 2 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 2, + "versionNonce": 1014066025, + "width": 10, + "x": 50, + "y": 10, +} +`; + +exports[`regression tests draw every type of shape: [end of test] element 3 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id3", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 1505387817, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 3, + "versionNonce": 493213705, + "width": 10, + "x": 70, + "y": 10, +} +`; + +exports[`regression tests draw every type of shape: [end of test] element 4 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id4", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 760410951, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 3, + "versionNonce": 289600103, + "width": 10, + "x": 90, + "y": 10, +} +`; + +exports[`regression tests draw every type of shape: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 3, + "versionNonce": 1014066025, + "width": 10, + "x": 50, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 3, + "versionNonce": 1014066025, + "width": 10, + "x": 50, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id3", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 1505387817, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 4, + "versionNonce": 493213705, + "width": 10, + "x": 70, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 3, + "versionNonce": 1014066025, + "width": 10, + "x": 50, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id3", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 1505387817, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 4, + "versionNonce": 493213705, + "width": 10, + "x": 70, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id4", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 760410951, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 4, + "versionNonce": 289600103, + "width": 10, + "x": 90, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests draw every type of shape: [end of test] number of elements 1`] = `5`; + +exports[`regression tests draw every type of shape: [end of test] number of renders 1`] = `33`; + +exports[`regression tests hotkey 2 selects rectangle tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey 2 selects rectangle tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey 2 selects rectangle tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey 2 selects rectangle tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey 2 selects rectangle tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey 3 selects diamond tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey 3 selects diamond tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey 3 selects diamond tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey 3 selects diamond tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey 3 selects diamond tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey 4 selects ellipse tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey 4 selects ellipse tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey 4 selects ellipse tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey 4 selects ellipse tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey 4 selects ellipse tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey 5 selects arrow tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey 5 selects arrow tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 3, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey 5 selects arrow tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 4, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey 5 selects arrow tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey 5 selects arrow tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey 6 selects line tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey 6 selects line tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 3, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey 6 selects line tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 4, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey 6 selects line tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey 6 selects line tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey a selects arrow tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey a selects arrow tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 3, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey a selects arrow tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 4, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey a selects arrow tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey a selects arrow tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey d selects diamond tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey d selects diamond tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey d selects diamond tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey d selects diamond tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey d selects diamond tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey e selects ellipse tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey e selects ellipse tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey e selects ellipse tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey e selects ellipse tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey e selects ellipse tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey l selects line tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey l selects line tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 3, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey l selects line tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 10, + 10, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 4, + "versionNonce": 449462985, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey l selects line tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey l selects line tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests hotkey r selects rectangle tool: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests hotkey r selects rectangle tool: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests hotkey r selects rectangle tool: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests hotkey r selects rectangle tool: [end of test] number of elements 1`] = `1`; + +exports[`regression tests hotkey r selects rectangle tool: [end of test] number of renders 1`] = `5`; + +exports[`regression tests pinch-to-zoom works: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "touch", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": -6, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests pinch-to-zoom works: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [], +} +`; + +exports[`regression tests pinch-to-zoom works: [end of test] number of elements 1`] = `0`; + +exports[`regression tests pinch-to-zoom works: [end of test] number of renders 1`] = `7`; + +exports[`regression tests resize an element, trying every resize handle: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 34, + "versionNonce": 1388251943, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 25, + "versionNonce": 888958951, + "width": 5, + "x": 15, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 27, + "versionNonce": 651223591, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 29, + "versionNonce": 1532871783, + "width": 5, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 31, + "versionNonce": 1934038695, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 33, + "versionNonce": 909170919, + "width": 15, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 35, + "versionNonce": 1388251943, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle ne (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 16, + "versionNonce": 1359939303, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + "id4": true, + "id5": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle ne (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 12, + "versionNonce": 289600103, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle nw (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 8, + "versionNonce": 23633383, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle nw (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 2019559783, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle se (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 32, + "versionNonce": 909170919, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 25, + "versionNonce": 888958951, + "width": 5, + "x": 15, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 27, + "versionNonce": 651223591, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 29, + "versionNonce": 1532871783, + "width": 5, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 31, + "versionNonce": 1934038695, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 33, + "versionNonce": 909170919, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle se (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 28, + "versionNonce": 1532871783, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 25, + "versionNonce": 888958951, + "width": 5, + "x": 15, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 27, + "versionNonce": 651223591, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 29, + "versionNonce": 1532871783, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle sw (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 24, + "versionNonce": 888958951, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 25, + "versionNonce": 888958951, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [resize handle sw (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 20, + "versionNonce": 1508694887, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "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 ne (+5, +5)] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + "id4": true, + "id5": true, + "id6": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle ne (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "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 ne (-5, -5)] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + "id4": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "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 nw (+5, +5)] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle nw (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "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`] = `11`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle se (+5, +5)] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle se (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 34, + "versionNonce": 1388251943, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 25, + "versionNonce": 888958951, + "width": 5, + "x": 15, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 27, + "versionNonce": 651223591, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 29, + "versionNonce": 1532871783, + "width": 5, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 31, + "versionNonce": 1934038695, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 33, + "versionNonce": 909170919, + "width": 15, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 35, + "versionNonce": 1388251943, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle se (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 30, + "versionNonce": 1934038695, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 25, + "versionNonce": 888958951, + "width": 5, + "x": 15, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 27, + "versionNonce": 651223591, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 29, + "versionNonce": 1532871783, + "width": 5, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 31, + "versionNonce": 1934038695, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (+5, +5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 26, + "versionNonce": 651223591, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 25, + "versionNonce": 888958951, + "width": 5, + "x": 15, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 27, + "versionNonce": 651223591, + "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 { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "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, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests resize an element, trying every resize handle: [unresize handle sw (-5, -5)] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 22, + "versionNonce": 1279028647, + "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 { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 2019559783, + "width": 15, + "x": 5, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 7, + "versionNonce": 238820263, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 9, + "versionNonce": 23633383, + "width": 5, + "x": 15, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 11, + "versionNonce": 747212839, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 15, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 13, + "versionNonce": 289600103, + "width": 5, + "x": 10, + "y": 5, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 15, + "versionNonce": 406373543, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 17, + "versionNonce": 1359939303, + "width": 15, + "x": 10, + "y": 15, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 19, + "versionNonce": 845789479, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 5, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 21, + "versionNonce": 1508694887, + "width": 15, + "x": 5, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 23, + "versionNonce": 1279028647, + "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 shift-click to select a group, then drag: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + "id4": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests shift-click to select a group, then drag: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 493213705, + "width": 10, + "x": 20, + "y": 20, +} +`; + +exports[`regression tests shift-click to select a group, then drag: [end of test] element 1 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 915032327, + "width": 10, + "x": 40, + "y": 20, +} +`; + +exports[`regression tests shift-click to select a group, then drag: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 493213705, + "width": 10, + "x": 20, + "y": 20, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 4, + "versionNonce": 915032327, + "width": 10, + "x": 40, + "y": 20, + }, + ], + }, + ], +} +`; + +exports[`regression tests shift-click to select a group, then drag: [end of test] number of elements 1`] = `2`; + +exports[`regression tests shift-click to select a group, then drag: [end of test] number of renders 1`] = `16`; + +exports[`regression tests spacebar + drag scrolls the canvas: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 10, + "scrollY": 10, + "scrolledOutside": false, + "selectedElementIds": Object {}, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests spacebar + drag scrolls the canvas: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [], +} +`; + +exports[`regression tests spacebar + drag scrolls the canvas: [end of test] number of elements 1`] = `0`; + +exports[`regression tests spacebar + drag scrolls the canvas: [end of test] number of renders 1`] = `3`; + +exports[`regression tests two-finger scroll works: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 8, + "scrollY": -9, + "scrolledOutside": false, + "selectedElementIds": Object { + "id1": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests two-finger scroll works: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [], +} +`; + +exports[`regression tests two-finger scroll works: [end of test] number of elements 1`] = `0`; + +exports[`regression tests two-finger scroll works: [end of test] number of renders 1`] = `9`; + +exports[`regression tests undo/redo drawing an element: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id2": true, + }, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests undo/redo drawing an element: [end of test] element 0 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests undo/redo drawing an element: [end of test] element 1 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, +} +`; + +exports[`regression tests undo/redo drawing an element: [end of test] element 2 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": true, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 5, + "versionNonce": 1006504105, + "width": 10, + "x": 50, + "y": 10, +} +`; + +exports[`regression tests undo/redo drawing an element: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id2", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 1116226695, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1014066025, + "width": 10, + "x": 50, + "y": 10, + }, + ], + }, + ], + "stateHistory": Array [ + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "exportBackground": true, + "name": "excalidraw-201933152653", + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 10, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 453191, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 401146281, + "width": 10, + "x": 30, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests undo/redo drawing an element: [end of test] number of elements 1`] = `3`; + +exports[`regression tests undo/redo drawing an element: [end of test] number of renders 1`] = `16`; + +exports[`regression tests zoom hotkeys: [end of test] appState 1`] = ` +Object { + "collaborators": Map {}, + "currentItemBackgroundColor": "transparent", + "currentItemFillStyle": "hachure", + "currentItemFont": "20px Virgil", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStrokeColor": "#000000", + "currentItemStrokeWidth": 1, + "cursorX": 0, + "cursorY": 0, + "draggingElement": null, + "editingElement": null, + "elementLocked": false, + "elementType": "selection", + "exportBackground": true, + "isCollaborating": false, + "isResizing": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "excalidraw-201933152653", + "openMenu": null, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object {}, + "selectionElement": null, + "viewBackgroundColor": "#ffffff", + "zoom": 1, +} +`; + +exports[`regression tests zoom hotkeys: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [], +} +`; + +exports[`regression tests zoom hotkeys: [end of test] number of elements 1`] = `0`; + +exports[`regression tests zoom hotkeys: [end of test] number of renders 1`] = `3`; diff --git a/src/tests/__snapshots__/resize.test.tsx.snap b/src/tests/__snapshots__/resize.test.tsx.snap new file mode 100644 index 00000000..50042682 --- /dev/null +++ b/src/tests/__snapshots__/resize.test.tsx.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`resize element rectangle 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1150084233, + "width": 30, + "x": 29, + "y": 47, +} +`; + +exports[`resize element with aspect ratio when SHIFT is clicked rectangle 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 3, + "versionNonce": 1150084233, + "width": 30, + "x": 29, + "y": 47, +} +`; diff --git a/src/tests/__snapshots__/selection.test.tsx.snap b/src/tests/__snapshots__/selection.test.tsx.snap new file mode 100644 index 00000000..2dc0a0bb --- /dev/null +++ b/src/tests/__snapshots__/selection.test.tsx.snap @@ -0,0 +1,128 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`select single element on the scene arrow 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 30, + 50, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "arrow", + "version": 3, + "versionNonce": 449462985, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`select single element on the scene arrow escape 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "lastCommittedPoint": null, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 30, + 50, + ], + ], + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "line", + "version": 3, + "versionNonce": 449462985, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`select single element on the scene diamond 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "diamond", + "version": 2, + "versionNonce": 1278240551, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`select single element on the scene ellipse 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "ellipse", + "version": 2, + "versionNonce": 1278240551, + "width": 30, + "x": 30, + "y": 20, +} +`; + +exports[`select single element on the scene rectangle 1`] = ` +Object { + "backgroundColor": "transparent", + "fillStyle": "hachure", + "height": 50, + "id": "id0", + "isDeleted": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeWidth": 1, + "type": "rectangle", + "version": 2, + "versionNonce": 1278240551, + "width": 30, + "x": 30, + "y": 20, +} +`; diff --git a/src/tests/dragCreate.test.tsx b/src/tests/dragCreate.test.tsx index e91b5675..248a3416 100644 --- a/src/tests/dragCreate.test.tsx +++ b/src/tests/dragCreate.test.tsx @@ -5,6 +5,7 @@ import * as Renderer from "../renderer/renderScene"; import { KEYS } from "../keys"; import { render, fireEvent } from "./test-utils"; import { ExcalidrawLinearElement } from "../element/types"; +import { reseed } from "../random"; // Unmount ReactDOM from root ReactDOM.unmountComponentAtNode(document.getElementById("root")!); @@ -13,6 +14,7 @@ const renderScene = jest.spyOn(Renderer, "renderScene"); beforeEach(() => { localStorage.clear(); renderScene.mockClear(); + reseed(7); }); const { h } = window; @@ -44,6 +46,9 @@ describe("add element to the scene when pointer dragging long enough", () => { expect(h.elements[0].y).toEqual(20); expect(h.elements[0].width).toEqual(30); // 60 - 30 expect(h.elements[0].height).toEqual(50); // 70 - 20 + + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("ellipse", () => { @@ -72,6 +77,9 @@ describe("add element to the scene when pointer dragging long enough", () => { expect(h.elements[0].y).toEqual(20); expect(h.elements[0].width).toEqual(30); // 60 - 30 expect(h.elements[0].height).toEqual(50); // 70 - 20 + + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("diamond", () => { @@ -100,6 +108,9 @@ describe("add element to the scene when pointer dragging long enough", () => { expect(h.elements[0].y).toEqual(20); expect(h.elements[0].width).toEqual(30); // 60 - 30 expect(h.elements[0].height).toEqual(50); // 70 - 20 + + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("arrow", () => { @@ -132,6 +143,9 @@ describe("add element to the scene when pointer dragging long enough", () => { expect(element.points.length).toEqual(2); expect(element.points[0]).toEqual([0, 0]); expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20) + + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("line", () => { @@ -164,6 +178,8 @@ describe("add element to the scene when pointer dragging long enough", () => { expect(element.points.length).toEqual(2); expect(element.points[0]).toEqual([0, 0]); expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20) + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); }); diff --git a/src/tests/move.test.tsx b/src/tests/move.test.tsx index bb986906..9b36211d 100644 --- a/src/tests/move.test.tsx +++ b/src/tests/move.test.tsx @@ -3,6 +3,7 @@ import ReactDOM from "react-dom"; import { render, fireEvent } from "./test-utils"; import { App } from "../components/App"; import * as Renderer from "../renderer/renderScene"; +import { reseed } from "../random"; // Unmount ReactDOM from root ReactDOM.unmountComponentAtNode(document.getElementById("root")!); @@ -11,6 +12,7 @@ const renderScene = jest.spyOn(Renderer, "renderScene"); beforeEach(() => { localStorage.clear(); renderScene.mockClear(); + reseed(7); }); const { h } = window; @@ -45,6 +47,8 @@ describe("move element", () => { expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect([h.elements[0].x, h.elements[0].y]).toEqual([0, 40]); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); }); @@ -81,5 +85,7 @@ describe("duplicate element on move when ALT is clicked", () => { // previous element should stay intact expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]); expect([h.elements[1].x, h.elements[1].y]).toEqual([0, 40]); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); }); diff --git a/src/tests/multiPointCreate.test.tsx b/src/tests/multiPointCreate.test.tsx index 0b01e908..8c3d08e9 100644 --- a/src/tests/multiPointCreate.test.tsx +++ b/src/tests/multiPointCreate.test.tsx @@ -5,6 +5,7 @@ import { App } from "../components/App"; import * as Renderer from "../renderer/renderScene"; import { KEYS } from "../keys"; import { ExcalidrawLinearElement } from "../element/types"; +import { reseed } from "../random"; // Unmount ReactDOM from root ReactDOM.unmountComponentAtNode(document.getElementById("root")!); @@ -13,6 +14,7 @@ const renderScene = jest.spyOn(Renderer, "renderScene"); beforeEach(() => { localStorage.clear(); renderScene.mockClear(); + reseed(7); }); const { h } = window; @@ -99,6 +101,8 @@ describe("multi point mode in linear elements", () => { [20, 30], [70, 110], ]); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("line", () => { @@ -138,5 +142,7 @@ describe("multi point mode in linear elements", () => { [20, 30], [70, 110], ]); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); }); diff --git a/src/tests/queries/toolQueries.ts b/src/tests/queries/toolQueries.ts index bd4ca19a..cb111cfd 100644 --- a/src/tests/queries/toolQueries.ts +++ b/src/tests/queries/toolQueries.ts @@ -1,16 +1,18 @@ import { queries, buildQueries } from "@testing-library/react"; -const _getAllByToolName = (container: HTMLElement, tool: string) => { - const toolMap: { [propKey: string]: string } = { - selection: "Selection — S, 1", - rectangle: "Rectangle — R, 2", - diamond: "Diamond — D, 3", - ellipse: "Ellipse — E, 4", - arrow: "Arrow — A, 5", - line: "Line — L, 6", - }; +const toolMap = { + selection: "Selection — S, 1", + rectangle: "Rectangle — R, 2", + diamond: "Diamond — D, 3", + ellipse: "Ellipse — E, 4", + arrow: "Arrow — A, 5", + line: "Line — L, 6", +}; - const toolTitle = toolMap[tool as string]; +export type ToolName = keyof typeof toolMap; + +const _getAllByToolName = (container: HTMLElement, tool: string) => { + const toolTitle = toolMap[tool as ToolName]; return queries.getAllByTitle(container, toolTitle); }; diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx new file mode 100644 index 00000000..7a155998 --- /dev/null +++ b/src/tests/regressionTests.test.tsx @@ -0,0 +1,564 @@ +import { reseed } from "../random"; +import React from "react"; +import ReactDOM from "react-dom"; +import * as Renderer from "../renderer/renderScene"; +import { render, fireEvent } from "./test-utils"; +import { App } from "../components/App"; +import { ToolName } from "./queries/toolQueries"; +import { KEYS, Key } from "../keys"; +import { setDateTimeForTests } from "../utils"; +import { ExcalidrawElement } from "../element/types"; +import { handlerRectangles } from "../element"; + +const { h } = window; + +const renderScene = jest.spyOn(Renderer, "renderScene"); +let getByToolName: (name: string) => HTMLElement = null!; +let canvas: HTMLCanvasElement = null!; + +function clickTool(toolName: ToolName) { + fireEvent.click(getByToolName(toolName)); +} + +let lastClientX = 0; +let lastClientY = 0; +let pointerType: "mouse" | "pen" | "touch" = "mouse"; + +function pointerDown( + clientX: number = lastClientX, + clientY: number = lastClientY, + altKey: boolean = false, + shiftKey: boolean = false, +) { + lastClientX = clientX; + lastClientY = clientY; + fireEvent.pointerDown(canvas, { + clientX, + clientY, + altKey, + shiftKey, + pointerId: 1, + pointerType, + }); +} + +function pointer2Down(clientX: number, clientY: number) { + fireEvent.pointerDown(canvas, { + clientX, + clientY, + pointerId: 2, + pointerType, + }); +} + +function pointer2Move(clientX: number, clientY: number) { + fireEvent.pointerMove(canvas, { + clientX, + clientY, + pointerId: 2, + pointerType, + }); +} + +function pointer2Up(clientX: number, clientY: number) { + fireEvent.pointerUp(canvas, { + clientX, + clientY, + pointerId: 2, + pointerType, + }); +} + +function pointerMove( + clientX: number = lastClientX, + clientY: number = lastClientY, + altKey: boolean = false, + shiftKey: boolean = false, +) { + lastClientX = clientX; + lastClientY = clientY; + fireEvent.pointerMove(canvas, { + clientX, + clientY, + altKey, + shiftKey, + pointerId: 1, + pointerType, + }); +} + +function pointerUp( + clientX: number = lastClientX, + clientY: number = lastClientY, + altKey: boolean = false, + shiftKey: boolean = false, +) { + lastClientX = clientX; + lastClientY = clientY; + fireEvent.pointerUp(canvas, { pointerId: 1, pointerType, shiftKey, altKey }); +} + +function hotkeyDown(key: Key) { + fireEvent.keyDown(document, { key: KEYS[key] }); +} + +function hotkeyUp(key: Key) { + fireEvent.keyUp(document, { + key: KEYS[key], + }); +} + +function keyDown( + key: string, + ctrlKey: boolean = false, + shiftKey: boolean = false, +) { + fireEvent.keyDown(document, { key, ctrlKey, shiftKey }); +} + +function keyUp( + key: string, + ctrlKey: boolean = false, + shiftKey: boolean = false, +) { + fireEvent.keyUp(document, { + key, + ctrlKey, + shiftKey, + }); +} + +function hotkeyPress(key: Key) { + hotkeyDown(key); + hotkeyUp(key); +} + +function keyPress( + key: string, + ctrlKey: boolean = false, + shiftKey: boolean = false, +) { + keyDown(key, ctrlKey, shiftKey); + keyUp(key, ctrlKey, shiftKey); +} + +function clickLabeledElement(label: string) { + const element = document.querySelector(`[aria-label='${label}']`); + if (!element) { + throw new Error(`No labeled element found: ${label}`); + } + fireEvent.click(element); +} + +function getSelectedElement(): ExcalidrawElement { + const selectedElements = h.elements.filter( + (element) => h.state.selectedElementIds[element.id], + ); + if (selectedElements.length !== 1) { + throw new Error( + `expected 1 selected element; got ${selectedElements.length}`, + ); + } + return selectedElements[0]; +} + +function getResizeHandles() { + const rects = handlerRectangles( + getSelectedElement(), + h.state.zoom, + pointerType, + ); + + 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 + * to debug where a test failure came from. + */ +function checkpoint(name: string) { + expect(renderScene.mock.calls.length).toMatchSnapshot( + `[${name}] number of renders`, + ); + expect(h.state).toMatchSnapshot(`[${name}] appState`); + expect(h.history.getSnapshotForTest()).toMatchSnapshot(`[${name}] history`); + expect(h.elements.length).toMatchSnapshot(`[${name}] number of elements`); + h.elements.forEach((element, i) => + expect(element).toMatchSnapshot(`[${name}] element ${i}`), + ); +} + +beforeEach(() => { + // Unmount ReactDOM from root + ReactDOM.unmountComponentAtNode(document.getElementById("root")!); + + localStorage.clear(); + renderScene.mockClear(); + h.history.clear(); + reseed(7); + setDateTimeForTests("201933152653"); + pointerType = "mouse"; + + const renderResult = render(); + + getByToolName = renderResult.getByToolName; + canvas = renderResult.container.querySelector("canvas")!; +}); + +afterEach(() => { + checkpoint("end of test"); +}); + +describe("regression tests", () => { + it("draw every type of shape", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + clickTool("diamond"); + pointerDown(30, 10); + pointerMove(40, 20); + pointerUp(); + + clickTool("ellipse"); + pointerDown(50, 10); + pointerMove(60, 20); + pointerUp(); + + clickTool("arrow"); + pointerDown(70, 10); + pointerMove(80, 20); + pointerUp(); + + clickTool("line"); + pointerDown(90, 10); + pointerMove(100, 20); + pointerUp(); + + clickTool("arrow"); + pointerDown(10, 30); + pointerUp(); + pointerMove(20, 40); + pointerUp(); + pointerMove(10, 50); + pointerUp(); + hotkeyPress("ENTER"); + + clickTool("line"); + pointerDown(30, 30); + pointerUp(); + pointerMove(40, 40); + pointerUp(); + pointerMove(30, 50); + pointerUp(); + hotkeyPress("ENTER"); + }); + + it("click to select a shape", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + clickTool("rectangle"); + pointerDown(30, 10); + pointerMove(40, 20); + pointerUp(); + + const prevSelectedId = getSelectedElement().id; + pointerDown(10, 10); + pointerUp(); + expect(getSelectedElement().id).not.toEqual(prevSelectedId); + }); + + for (const [keys, shape] of [ + ["2r", "rectangle"], + ["3d", "diamond"], + ["4e", "ellipse"], + ["5a", "arrow"], + ["6l", "line"], + ] as [string, ExcalidrawElement["type"]][]) { + for (const key of keys) { + it(`hotkey ${key} selects ${shape} tool`, () => { + keyPress(key); + + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + expect(getSelectedElement().type).toBe(shape); + }); + } + } + + it("change the properties of a shape", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + clickLabeledElement("Background"); + clickLabeledElement("#fa5252"); + clickLabeledElement("Stroke"); + clickLabeledElement("#5f3dc4"); + expect(getSelectedElement().backgroundColor).toBe("#fa5252"); + expect(getSelectedElement().strokeColor).toBe("#5f3dc4"); + }); + + it("resize an element, trying every resize handle", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + const resizeHandles = getResizeHandles(); + for (const handlePos in resizeHandles) { + const [x, y] = resizeHandles[handlePos as keyof typeof resizeHandles]; + const { width: prevWidth, height: prevHeight } = getSelectedElement(); + pointerDown(x, y); + pointerMove(x - 5, y - 5); + pointerUp(); + const { + width: nextWidthNegative, + height: nextHeightNegative, + } = getSelectedElement(); + expect( + prevWidth !== nextWidthNegative || prevHeight !== nextHeightNegative, + ).toBeTruthy(); + checkpoint(`resize handle ${handlePos} (-5, -5)`); + + pointerDown(); + pointerMove(x, y); + pointerUp(); + const { width, height } = getSelectedElement(); + expect(width).toBe(prevWidth); + expect(height).toBe(prevHeight); + checkpoint(`unresize handle ${handlePos} (-5, -5)`); + + pointerDown(x, y); + pointerMove(x + 5, y + 5); + pointerUp(); + const { + width: nextWidthPositive, + height: nextHeightPositive, + } = getSelectedElement(); + expect( + prevWidth !== nextWidthPositive || prevHeight !== nextHeightPositive, + ).toBeTruthy(); + checkpoint(`resize handle ${handlePos} (+5, +5)`); + + pointerDown(); + pointerMove(x, y); + pointerUp(); + const { width: finalWidth, height: finalHeight } = getSelectedElement(); + expect(finalWidth).toBe(prevWidth); + expect(finalHeight).toBe(prevHeight); + + checkpoint(`unresize handle ${handlePos} (+5, +5)`); + } + }); + + it("click on an element and drag it", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + const { x: prevX, y: prevY } = getSelectedElement(); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + const { x: nextX, y: nextY } = getSelectedElement(); + expect(nextX).toBeGreaterThan(prevX); + expect(nextY).toBeGreaterThan(prevY); + + checkpoint("dragged"); + + pointerDown(); + pointerMove(10, 10); + pointerUp(); + + const { x, y } = getSelectedElement(); + expect(x).toBe(prevX); + expect(y).toBe(prevY); + }); + + it("alt-drag duplicates an element", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + expect( + h.elements.filter((element) => element.type === "rectangle").length, + ).toBe(1); + pointerDown(10, 10, true); + pointerMove(20, 20, true); + pointerUp(20, 20, true); + expect( + h.elements.filter((element) => element.type === "rectangle").length, + ).toBe(2); + }); + + it("click-drag to select a group", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + clickTool("rectangle"); + pointerDown(30, 10); + pointerMove(40, 20); + pointerUp(); + + clickTool("rectangle"); + pointerDown(50, 10); + pointerMove(60, 20); + pointerUp(); + + pointerDown(0, 0); + pointerMove(45, 25); + pointerUp(); + + expect( + h.elements.filter((element) => h.state.selectedElementIds[element.id]) + .length, + ).toBe(2); + }); + + it("shift-click to select a group, then drag", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + clickTool("rectangle"); + pointerDown(30, 10); + pointerMove(40, 20); + pointerUp(); + + const prevRectsXY = h.elements + .filter((element) => element.type === "rectangle") + .map((element) => ({ x: element.x, y: element.y })); + pointerDown(10, 10); + pointerUp(); + pointerDown(30, 10, false, true); + pointerUp(); + pointerDown(30, 10); + pointerMove(40, 20); + pointerUp(); + h.elements + .filter((element) => element.type === "rectangle") + .forEach((element, i) => { + expect(element.x).toBeGreaterThan(prevRectsXY[i].x); + expect(element.y).toBeGreaterThan(prevRectsXY[i].y); + }); + }); + + it("pinch-to-zoom works", () => { + expect(h.state.zoom).toBe(1); + pointerType = "touch"; + pointerDown(50, 50); + pointer2Down(60, 50); + pointerMove(40, 50); + pointer2Move(60, 50); + expect(h.state.zoom).toBeGreaterThan(1); + const zoomed = h.state.zoom; + pointerMove(45, 50); + pointer2Move(55, 50); + expect(h.state.zoom).toBeLessThan(zoomed); + pointerUp(45, 50); + pointer2Up(55, 50); + }); + + it("two-finger scroll works", () => { + const startScrollY = h.state.scrollY; + pointerDown(50, 50); + pointer2Down(60, 50); + pointerMove(50, 40); + pointer2Move(60, 40); + pointerUp(50, 40); + pointer2Up(60, 40); + expect(h.state.scrollY).toBeLessThan(startScrollY); + + const startScrollX = h.state.scrollX; + pointerDown(50, 50); + pointer2Down(50, 60); + pointerMove(60, 50); + pointer2Move(60, 60); + pointerUp(60, 50); + pointer2Up(60, 60); + expect(h.state.scrollX).toBeGreaterThan(startScrollX); + }); + + it("spacebar + drag scrolls the canvas", () => { + const { scrollX: startScrollX, scrollY: startScrollY } = h.state; + hotkeyDown("SPACE"); + pointerDown(50, 50); + pointerMove(60, 60); + pointerUp(); + hotkeyUp("SPACE"); + const { scrollX, scrollY } = h.state; + expect(scrollX).not.toEqual(startScrollX); + expect(scrollY).not.toEqual(startScrollY); + }); + + it("arrow keys", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + hotkeyPress("ARROW_LEFT"); + hotkeyPress("ARROW_LEFT"); + hotkeyPress("ARROW_RIGHT"); + hotkeyPress("ARROW_UP"); + hotkeyPress("ARROW_UP"); + hotkeyPress("ARROW_DOWN"); + }); + + it("undo/redo drawing an element", () => { + clickTool("rectangle"); + pointerDown(10, 10); + pointerMove(20, 20); + pointerUp(); + + clickTool("rectangle"); + pointerDown(30, 10); + pointerMove(40, 20); + pointerUp(); + + clickTool("rectangle"); + pointerDown(50, 10); + pointerMove(60, 20); + pointerUp(); + + expect(h.elements.filter((element) => !element.isDeleted).length).toBe(3); + keyPress("z", true); + expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2); + keyPress("z", true); + expect(h.elements.filter((element) => !element.isDeleted).length).toBe(1); + keyPress("z", true, true); + expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2); + }); + + it("zoom hotkeys", () => { + expect(h.state.zoom).toBe(1); + fireEvent.keyDown(document, { code: "Equal", ctrlKey: true }); + fireEvent.keyUp(document, { code: "Equal", ctrlKey: true }); + expect(h.state.zoom).toBeGreaterThan(1); + fireEvent.keyDown(document, { code: "Minus", ctrlKey: true }); + fireEvent.keyUp(document, { code: "Minus", ctrlKey: true }); + expect(h.state.zoom).toBe(1); + }); +}); diff --git a/src/tests/resize.test.tsx b/src/tests/resize.test.tsx index 57ac1979..100641f2 100644 --- a/src/tests/resize.test.tsx +++ b/src/tests/resize.test.tsx @@ -3,6 +3,7 @@ import ReactDOM from "react-dom"; import { render, fireEvent } from "./test-utils"; import { App } from "../components/App"; import * as Renderer from "../renderer/renderScene"; +import { reseed } from "../random"; // Unmount ReactDOM from root ReactDOM.unmountComponentAtNode(document.getElementById("root")!); @@ -11,6 +12,7 @@ const renderScene = jest.spyOn(Renderer, "renderScene"); beforeEach(() => { localStorage.clear(); renderScene.mockClear(); + reseed(7); }); const { h } = window; @@ -53,6 +55,8 @@ describe("resize element", () => { 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()); }); }); @@ -94,5 +98,7 @@ describe("resize element with aspect ratio when SHIFT is clicked", () => { 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()); }); }); diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx index 191d4d84..dddbe990 100644 --- a/src/tests/selection.test.tsx +++ b/src/tests/selection.test.tsx @@ -4,6 +4,7 @@ import { render, fireEvent } from "./test-utils"; import { App } from "../components/App"; import * as Renderer from "../renderer/renderScene"; import { KEYS } from "../keys"; +import { reseed } from "../random"; // Unmount ReactDOM from root ReactDOM.unmountComponentAtNode(document.getElementById("root")!); @@ -12,6 +13,7 @@ const renderScene = jest.spyOn(Renderer, "renderScene"); beforeEach(() => { localStorage.clear(); renderScene.mockClear(); + reseed(7); }); const { h } = window; @@ -98,6 +100,8 @@ describe("select single element on the scene", () => { expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("diamond", () => { @@ -123,6 +127,8 @@ describe("select single element on the scene", () => { expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("ellipse", () => { @@ -148,6 +154,8 @@ describe("select single element on the scene", () => { expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("arrow", () => { @@ -186,6 +194,7 @@ describe("select single element on the scene", () => { expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); it("arrow escape", () => { @@ -224,5 +233,7 @@ describe("select single element on the scene", () => { expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); }); }); diff --git a/src/utils.ts b/src/utils.ts index 9bc90f1e..f5b09ff4 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -3,7 +3,17 @@ import { getZoomOrigin } from "./scene"; export const SVG_NS = "http://www.w3.org/2000/svg"; +let mockDateTime: string | null = null; + +export function setDateTimeForTests(dateTime: string) { + mockDateTime = dateTime; +} + export function getDateTime() { + if (mockDateTime) { + return mockDateTime; + } + const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1;