Refactor (#862)

* Initial factoring out of parts of the LayerUI component

2360 → 2224 LOC

* Create a Section component

* Break up src/index.tsx

* Refactor actions to reduce duplication, fix CSS

Also consolidate icons

* Move scene/data.ts to its own directory

* Fix accidental reverts, banish further single-character variables

* ACTIVE_ELEM_COLOR → ACTIVE_ELEMENT_COLOR

* Further refactoring the icons file

* Log all errors

* Pointer Event polyfill to make the tests work

* add test hooks & fix tests

Co-authored-by: dwelle <luzar.david@gmail.com>

package-lock.json

@@ -10744,6 +10744,12 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pepjs": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/pepjs/-/pepjs-0.5.2.tgz",
+      "integrity": "sha512-acPfplXnTKaG8p7VBgkNaBJSGsZu7LYrqEmLCQFoeHYl21B74mMBeVoQA/Gl9u5GmysgzrOCeHsEjw0mXo61nw==",
+      "dev": true
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",

package.json

@@ -16,13 +16,13 @@
     "stacktrace-js": "2.0.2"
   },
   "devDependencies": {
-    "asar": "2.1.0",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "9.4.1",
     "@types/jest": "25.1.3",
     "@types/nanoid": "2.1.0",
     "@types/react": "16.9.23",
     "@types/react-dom": "16.9.5",
+    "asar": "2.1.0",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.10.0",
     "eslint-plugin-prettier": "3.1.2",
@@ -30,6 +30,7 @@
     "jest-canvas-mock": "2.2.0",
     "lint-staged": "10.0.8",
     "node-sass": "4.13.1",
+    "pepjs": "0.5.2",
     "prettier": "1.19.1",
     "rewire": "4.0.1",
     "typescript": "3.8.3"
@@ -92,6 +93,7 @@
     "start": "react-scripts start",
     "test": "npm run test:app",
     "test:app": "react-scripts test --env=jsdom --passWithNoTests",
+    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "test:code": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
     "test:other": "npm run prettier -- --list-different"
   },

src/actions/actionCanvas.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Action } from "./types";
 import { ColorPicker } from "../components/ColorPicker";
 import { getDefaultAppState } from "../appState";
 import { trash, zoomIn, zoomOut, resetZoom } from "../components/icons";
@@ -8,8 +7,9 @@ import { t } from "../i18n";
 import { getNormalizedZoom } from "../scene";
 import { KEYS } from "../keys";
 import useIsMobile from "../is-mobile";
+import { register } from "./register";
 
-export const actionChangeViewBackgroundColor: Action = {
+export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   perform: (_, appState, value) => {
     return { appState: { ...appState, viewBackgroundColor: value } };
@@ -27,9 +27,9 @@ export const actionChangeViewBackgroundColor: Action = {
     );
   },
   commitToHistory: () => true,
-};
+});
 
-export const actionClearCanvas: Action = {
+export const actionClearCanvas = register({
   name: "clearCanvas",
   commitToHistory: () => true,
   perform: () => {
@@ -56,7 +56,7 @@ export const actionClearCanvas: Action = {
       }}
     />
   ),
-};
+});
 
 const ZOOM_STEP = 0.1;
 
@@ -69,9 +69,9 @@ const KEY_CODES = {
   NUM_ZERO: "Numpad0",
 };
 
-export const actionZoomIn: Action = {
+export const actionZoomIn = register({
   name: "zoomIn",
-  perform: (elements, appState) => {
+  perform: (_elements, appState) => {
     return {
       appState: {
         ...appState,
@@ -93,11 +93,11 @@ export const actionZoomIn: Action = {
   keyTest: event =>
     (event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) &&
     (event[KEYS.META] || event.shiftKey),
-};
+});
 
-export const actionZoomOut: Action = {
+export const actionZoomOut = register({
   name: "zoomOut",
-  perform: (elements, appState) => {
+  perform: (_elements, appState) => {
     return {
       appState: {
         ...appState,
@@ -119,11 +119,11 @@ export const actionZoomOut: Action = {
   keyTest: event =>
     (event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) &&
     (event[KEYS.META] || event.shiftKey),
-};
+});
 
-export const actionResetZoom: Action = {
+export const actionResetZoom = register({
   name: "resetZoom",
-  perform: (elements, appState) => {
+  perform: (_elements, appState) => {
     return {
       appState: {
         ...appState,
@@ -145,4 +145,4 @@ export const actionResetZoom: Action = {
   keyTest: event =>
     (event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) &&
     (event[KEYS.META] || event.shiftKey),
-};
+});

src/actions/actionDeleteSelected.tsx

@@ -1,12 +1,12 @@
-import { Action } from "./types";
 import { deleteSelectedElements, isSomeElementSelected } from "../scene";
 import { KEYS } from "../keys";
 import { ToolButton } from "../components/ToolButton";
 import React from "react";
 import { trash } from "../components/icons";
 import { t } from "../i18n";
+import { register } from "./register";
 
-export const actionDeleteSelected: Action = {
+export const actionDeleteSelected = register({
   name: "deleteSelectedElements",
   perform: (elements, appState) => {
     return {
@@ -28,4 +28,4 @@ export const actionDeleteSelected: Action = {
       visible={isSomeElementSelected(elements)}
     />
   ),
-};
+});

src/actions/actionExport.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { Action } from "./types";
 import { ProjectName } from "../components/ProjectName";
-import { saveAsJSON, loadFromJSON } from "../scene";
+import { saveAsJSON, loadFromJSON } from "../data";
 import { load, save } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
+import { register } from "./register";
 
-export const actionChangeProjectName: Action = {
+export const actionChangeProjectName = register({
   name: "changeProjectName",
-  perform: (elements, appState, value) => {
+  perform: (_elements, appState, value) => {
     return { appState: { ...appState, name: value } };
   },
   PanelComponent: ({ appState, updateData }) => (
@@ -19,11 +19,11 @@ export const actionChangeProjectName: Action = {
       onChange={(name: string) => updateData(name)}
     />
   ),
-};
+});
 
-export const actionChangeExportBackground: Action = {
+export const actionChangeExportBackground = register({
   name: "changeExportBackground",
-  perform: (elements, appState, value) => {
+  perform: (_elements, appState, value) => {
     return { appState: { ...appState, exportBackground: value } };
   },
   PanelComponent: ({ appState, updateData }) => (
@@ -36,9 +36,9 @@ export const actionChangeExportBackground: Action = {
       {t("labels.withBackground")}
     </label>
   ),
-};
+});
 
-export const actionSaveScene: Action = {
+export const actionSaveScene = register({
   name: "saveScene",
   perform: (elements, appState, value) => {
     saveAsJSON(elements, appState).catch(error => console.error(error));
@@ -54,9 +54,9 @@ export const actionSaveScene: Action = {
       onClick={() => updateData(null)}
     />
   ),
-};
+});
 
-export const actionLoadScene: Action = {
+export const actionLoadScene = register({
   name: "loadScene",
   perform: (
     elements,
@@ -81,4 +81,4 @@ export const actionLoadScene: Action = {
       }}
     />
   ),
-};
+});

src/actions/actionFinalize.tsx

@@ -1,4 +1,3 @@
-import { Action } from "./types";
 import { KEYS } from "../keys";
 import { clearSelection } from "../scene";
 import { isInvisiblySmallElement } from "../element";
@@ -7,8 +6,9 @@ import React from "react";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
+import { register } from "./register";
 
-export const actionFinalize: Action = {
+export const actionFinalize = register({
   name: "finalize",
   perform: (elements, appState) => {
     let newElements = clearSelection(elements);
@@ -63,4 +63,4 @@ export const actionFinalize: Action = {
       visible={appState.multiElement != null}
     />
   ),
-};
+});

src/actions/actionHistory.tsx

@@ -10,33 +10,36 @@ import { KEYS } from "../keys";
 
 const writeData = (
   appState: AppState,
-  data: { elements: ExcalidrawElement[]; appState: AppState } | null,
+  updater: () => { elements: ExcalidrawElement[]; appState: AppState } | null,
 ) => {
-  if (data !== null) {
-    return {
-      elements: data.elements,
-      appState: { ...appState, ...data.appState },
-    };
+  if (
+    [
+      appState.multiElement,
+      appState.resizingElement,
+      appState.editingElement,
+      appState.draggingElement,
+    ].some(Boolean)
+  ) {
+    const data = updater();
+
+    return data === null
+      ? {}
+      : {
+          elements: data.elements,
+          appState: { ...appState, ...data.appState },
+        };
   }
   return {};
 };
 
-const testUndo = (shift: boolean) => (
-  event: KeyboardEvent,
-  appState: AppState,
-) => event[KEYS.META] && /z/i.test(event.key) && event.shiftKey === shift;
+const testUndo = (shift: boolean) => (event: KeyboardEvent) =>
+  event[KEYS.META] && /z/i.test(event.key) && event.shiftKey === shift;
 
-export const createUndoAction: (h: SceneHistory) => Action = history => ({
+type ActionCreator = (history: SceneHistory) => Action;
+
+export const createUndoAction: ActionCreator = history => ({
   name: "undo",
-  perform: (_, appState) =>
-    [
-      appState.multiElement,
-      appState.resizingElement,
-      appState.editingElement,
-      appState.draggingElement,
-    ].every(x => x === null)
-      ? writeData(appState, history.undoOnce())
-      : {},
+  perform: (_, appState) => writeData(appState, () => history.undoOnce()),
   keyTest: testUndo(false),
   PanelComponent: ({ updateData }) => (
     <ToolButton
@@ -49,17 +52,9 @@ export const createUndoAction: (h: SceneHistory) => Action = history => ({
   commitToHistory: () => false,
 });
 
-export const createRedoAction: (h: SceneHistory) => Action = history => ({
+export const createRedoAction: ActionCreator = history => ({
   name: "redo",
-  perform: (_, appState) =>
-    [
-      appState.multiElement,
-      appState.resizingElement,
-      appState.editingElement,
-      appState.draggingElement,
-    ].every(x => x === null)
-      ? writeData(appState, history.redoOnce())
-      : {},
+  perform: (_, appState) => writeData(appState, () => history.redoOnce()),
   keyTest: testUndo(true),
   PanelComponent: ({ updateData }) => (
     <ToolButton

src/actions/actionMenu.tsx

@@ -1,11 +1,11 @@
-import { Action } from "./types";
 import React from "react";
 import { menu, palette } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions } from "../element";
+import { register } from "./register";
 
-export const actionToggleCanvasMenu: Action = {
+export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
   perform: (_, appState) => ({
     appState: {
@@ -22,9 +22,9 @@ export const actionToggleCanvasMenu: Action = {
       selected={appState.openMenu === "canvas"}
     />
   ),
-};
+});
 
-export const actionToggleEditMenu: Action = {
+export const actionToggleEditMenu = register({
   name: "toggleEditMenu",
   perform: (_elements, appState) => ({
     appState: {
@@ -42,4 +42,4 @@ export const actionToggleEditMenu: Action = {
       selected={appState.openMenu === "shape"}
     />
   ),
-};
+});

src/actions/actionProperties.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Action } from "./types";
 import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
 import {
   getCommonAttributeOfSelectedElements,
@@ -11,6 +10,7 @@ import { ColorPicker } from "../components/ColorPicker";
 import { AppState } from "../../src/types";
 import { t } from "../i18n";
 import { DEFAULT_FONT } from "../appState";
+import { register } from "./register";
 
 const changeProperty = (
   elements: readonly ExcalidrawElement[],
@@ -39,7 +39,7 @@ const getFormValue = function<T>(
   );
 };
 
-export const actionChangeStrokeColor: Action = {
+export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
   perform: (elements, appState, value) => {
     return {
@@ -68,9 +68,9 @@ export const actionChangeStrokeColor: Action = {
       />
     </>
   ),
-};
+});
 
-export const actionChangeBackgroundColor: Action = {
+export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
   perform: (elements, appState, value) => {
     return {
@@ -99,9 +99,9 @@ export const actionChangeBackgroundColor: Action = {
       />
     </>
   ),
-};
+});
 
-export const actionChangeFillStyle: Action = {
+export const actionChangeFillStyle = register({
   name: "changeFillStyle",
   perform: (elements, appState, value) => {
     return {
@@ -136,9 +136,9 @@ export const actionChangeFillStyle: Action = {
       />
     </fieldset>
   ),
-};
+});
 
-export const actionChangeStrokeWidth: Action = {
+export const actionChangeStrokeWidth = register({
   name: "changeStrokeWidth",
   perform: (elements, appState, value) => {
     return {
@@ -171,9 +171,9 @@ export const actionChangeStrokeWidth: Action = {
       />
     </fieldset>
   ),
-};
+});
 
-export const actionChangeSloppiness: Action = {
+export const actionChangeSloppiness = register({
   name: "changeSloppiness",
   perform: (elements, appState, value) => {
     return {
@@ -206,9 +206,9 @@ export const actionChangeSloppiness: Action = {
       />
     </fieldset>
   ),
-};
+});
 
-export const actionChangeOpacity: Action = {
+export const actionChangeOpacity = register({
   name: "changeOpacity",
   perform: (elements, appState, value) => {
     return {
@@ -255,9 +255,9 @@ export const actionChangeOpacity: Action = {
       />
     </label>
   ),
-};
+});
 
-export const actionChangeFontSize: Action = {
+export const actionChangeFontSize = register({
   name: "changeFontSize",
   perform: (elements, appState, value) => {
     return {
@@ -304,9 +304,9 @@ export const actionChangeFontSize: Action = {
       />
     </fieldset>
   ),
-};
+});
 
-export const actionChangeFontFamily: Action = {
+export const actionChangeFontFamily = register({
   name: "changeFontFamily",
   perform: (elements, appState, value) => {
     return {
@@ -352,4 +352,4 @@ export const actionChangeFontFamily: Action = {
       />
     </fieldset>
   ),
-};
+});

src/actions/actionSelectAll.ts

@@ -1,7 +1,7 @@
-import { Action } from "./types";
 import { KEYS } from "../keys";
+import { register } from "./register";
 
-export const actionSelectAll: Action = {
+export const actionSelectAll = register({
   name: "selectAll",
   perform: elements => {
     return {
@@ -10,4 +10,4 @@ export const actionSelectAll: Action = {
   },
   contextItemLabel: "labels.selectAll",
   keyTest: event => event[KEYS.META] && event.key === "a",
-};
+});

src/actions/actionStyles.ts

@@ -1,4 +1,3 @@
-import { Action } from "./types";
 import {
   isTextElement,
   isExcalidrawElement,
@@ -6,10 +5,11 @@ import {
 } from "../element";
 import { KEYS } from "../keys";
 import { DEFAULT_FONT } from "../appState";
+import { register } from "./register";
 
 let copiedStyles: string = "{}";
 
-export const actionCopyStyles: Action = {
+export const actionCopyStyles = register({
   name: "copyStyles",
   perform: elements => {
     const element = elements.find(el => el.isSelected);
@@ -21,9 +21,9 @@ export const actionCopyStyles: Action = {
   contextItemLabel: "labels.copyStyles",
   keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "C",
   contextMenuOrder: 0,
-};
+});
 
-export const actionPasteStyles: Action = {
+export const actionPasteStyles = register({
   name: "pasteStyles",
   perform: elements => {
     const pastedElement = JSON.parse(copiedStyles);
@@ -57,4 +57,4 @@ export const actionPasteStyles: Action = {
   contextItemLabel: "labels.pasteStyles",
   keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "V",
   contextMenuOrder: 1,
-};
+});

src/actions/actionZindex.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Action } from "./types";
 import {
   moveOneLeft,
   moveOneRight,
@@ -9,73 +8,15 @@ import {
 import { getSelectedIndices } from "../scene";
 import { KEYS } from "../keys";
 import { t } from "../i18n";
+import { register } from "./register";
+import {
+  sendBackward,
+  bringToFront,
+  sendToBack,
+  bringForward,
+} from "../components/icons";
 
-const ACTIVE_ELEM_COLOR = "#ffa94d"; // OC ORANGE 4
-
-const ICONS = {
-  bringForward: (
-    <svg viewBox="0 0 24 24">
-      <path
-        d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
-        stroke="#000"
-        strokeWidth="2"
-      />
-      <path
-        d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
-        fill={ACTIVE_ELEM_COLOR}
-        stroke={ACTIVE_ELEM_COLOR}
-        strokeWidth="2"
-      />
-    </svg>
-  ),
-  sendBackward: (
-    <svg viewBox="0 0 24 24">
-      <path
-        d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
-        fill={ACTIVE_ELEM_COLOR}
-        stroke={ACTIVE_ELEM_COLOR}
-        strokeWidth="2"
-      />
-      <path
-        d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
-        stroke="#000"
-        strokeWidth="2"
-      />
-    </svg>
-  ),
-  bringToFront: (
-    <svg viewBox="0 0 24 24">
-      <path
-        d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
-        stroke="#000"
-        strokeWidth="2"
-      />
-      <path
-        d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
-        fill={ACTIVE_ELEM_COLOR}
-        stroke={ACTIVE_ELEM_COLOR}
-        strokeWidth="2"
-      />
-    </svg>
-  ),
-  sendToBack: (
-    <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">
-      <path
-        d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
-        fill={ACTIVE_ELEM_COLOR}
-        stroke={ACTIVE_ELEM_COLOR}
-        strokeWidth="2"
-      />
-      <path
-        d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
-        stroke="#000"
-        strokeWidth="2"
-      />
-    </svg>
-  ),
-};
-
-export const actionSendBackward: Action = {
+export const actionSendBackward = register({
   name: "sendBackward",
   perform: (elements, appState) => {
     return {
@@ -91,15 +32,15 @@ export const actionSendBackward: Action = {
     <button
       type="button"
       className="zIndexButton"
-      onClick={event => updateData(null)}
+      onClick={() => updateData(null)}
       title={t("labels.sendBackward")}
     >
-      {ICONS.sendBackward}
+      {sendBackward}
     </button>
   ),
-};
+});
 
-export const actionBringForward: Action = {
+export const actionBringForward = register({
   name: "bringForward",
   perform: (elements, appState) => {
     return {
@@ -115,15 +56,15 @@ export const actionBringForward: Action = {
     <button
       type="button"
       className="zIndexButton"
-      onClick={event => updateData(null)}
+      onClick={() => updateData(null)}
       title={t("labels.bringForward")}
     >
-      {ICONS.bringForward}
+      {bringForward}
     </button>
   ),
-};
+});
 
-export const actionSendToBack: Action = {
+export const actionSendToBack = register({
   name: "sendToBack",
   perform: (elements, appState) => {
     return {
@@ -138,15 +79,15 @@ export const actionSendToBack: Action = {
     <button
       type="button"
       className="zIndexButton"
-      onClick={event => updateData(null)}
+      onClick={() => updateData(null)}
       title={t("labels.sendToBack")}
     >
-      {ICONS.sendToBack}
+      {sendToBack}
     </button>
   ),
-};
+});
 
-export const actionBringToFront: Action = {
+export const actionBringToFront = register({
   name: "bringToFront",
   perform: (elements, appState) => {
     return {
@@ -164,7 +105,7 @@ export const actionBringToFront: Action = {
       onClick={event => updateData(null)}
       title={t("labels.bringToFront")}
     >
-      {ICONS.bringToFront}
+      {bringToFront}
     </button>
   ),
-};
+});

src/actions/index.ts

@@ -1,4 +1,3 @@
-export { ActionManager } from "./manager";
 export { actionDeleteSelected } from "./actionDeleteSelected";
 export {
   actionBringForward,

src/actions/manager.tsx

@@ -32,6 +32,10 @@ export class ActionManager implements ActionsManagerInterface {
     this.actions[action.name] = action;
   }
 
+  registerAll(actions: readonly Action[]) {
+    actions.forEach(action => this.registerAction(action));
+  }
+
   handleKeyDown(event: KeyboardEvent) {
     const data = Object.values(this.actions)
       .sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0))
@@ -79,7 +83,7 @@ export class ActionManager implements ActionsManagerInterface {
       }));
   }
 
-  renderAction(name: string) {
+  renderAction = (name: string) => {
     if (this.actions[name] && "PanelComponent" in this.actions[name]) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
@@ -103,5 +107,5 @@ export class ActionManager implements ActionsManagerInterface {
     }
 
     return null;
-  }
+  };
 }

src/actions/register.ts

@@ -0,0 +1,8 @@
+import { Action } from "./types";
+
+export let actions: readonly Action[] = [];
+
+export function register(action: Action): Action {
+  actions = actions.concat(action);
+  return action;
+}

src/clipboard.ts

@@ -28,7 +28,7 @@ export async function copyToAppClipboard(
     //  copied elements, and thus we should prefer the text content.
     await copyTextToSystemClipboard(null);
     PREFER_APP_CLIPBOARD = false;
-  } catch (error) {
+  } catch {
     // if clearing system clipboard didn't work, we should prefer in-app
     //  clipboard even if there's text in system clipboard on paste, because
     //  we can't be sure of the order of copy operations
@@ -105,7 +105,9 @@ export async function copyTextToSystemClipboard(text: string | null) {
       //  not focused
       await navigator.clipboard.writeText(text || "");
       copied = true;
-    } catch (error) {}
+    } catch (error) {
+      console.error(error);
+    }
   }
 
   // Note that execCommand doesn't allow copying empty strings, so if we're
@@ -143,7 +145,9 @@ function copyTextViaExecCommand(text: string) {
     textarea.setSelectionRange(0, textarea.value.length);
 
     success = document.execCommand("copy");
-  } catch (error) {}
+  } catch (error) {
+    console.error(error);
+  }
 
   textarea.remove();
 

src/components/Actions.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { ExcalidrawElement } from "../element/types";
+import { ActionManager } from "../actions/manager";
+import { hasBackground, hasStroke, hasText, clearSelection } from "../scene";
+import { t } from "../i18n";
+import { SHAPES } from "../shapes";
+import { ToolButton } from "./ToolButton";
+import { capitalizeString } from "../utils";
+import { CURSOR_TYPE } from "../constants";
+import Stack from "./Stack";
+
+export function SelectedShapeActions({
+  targetElements,
+  renderAction,
+  elementType,
+}: {
+  targetElements: readonly ExcalidrawElement[];
+  renderAction: ActionManager["renderAction"];
+  elementType: ExcalidrawElement["type"];
+}) {
+  return (
+    <div className="panelColumn">
+      {renderAction("changeStrokeColor")}
+      {(hasBackground(elementType) ||
+        targetElements.some(element => hasBackground(element.type))) && (
+        <>
+          {renderAction("changeBackgroundColor")}
+
+          {renderAction("changeFillStyle")}
+        </>
+      )}
+
+      {(hasStroke(elementType) ||
+        targetElements.some(element => hasStroke(element.type))) && (
+        <>
+          {renderAction("changeStrokeWidth")}
+
+          {renderAction("changeSloppiness")}
+        </>
+      )}
+
+      {(hasText(elementType) ||
+        targetElements.some(element => hasText(element.type))) && (
+        <>
+          {renderAction("changeFontSize")}
+
+          {renderAction("changeFontFamily")}
+        </>
+      )}
+
+      {renderAction("changeOpacity")}
+
+      <fieldset>
+        <legend>{t("labels.layers")}</legend>
+        <div className="buttonList">
+          {renderAction("sendToBack")}
+          {renderAction("sendBackward")}
+          {renderAction("bringToFront")}
+          {renderAction("bringForward")}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+export function ShapesSwitcher({
+  elementType,
+  setAppState,
+  setElements,
+  elements,
+}: {
+  elementType: ExcalidrawElement["type"];
+  setAppState: any;
+  setElements: any;
+  elements: readonly ExcalidrawElement[];
+}) {
+  return (
+    <>
+      {SHAPES.map(({ value, icon }, index) => {
+        const label = t(`toolBar.${value}`);
+        return (
+          <ToolButton
+            key={value}
+            type="radio"
+            icon={icon}
+            checked={elementType === value}
+            name="editor-current-shape"
+            title={`${capitalizeString(label)} — ${
+              capitalizeString(value)[0]
+            }, ${index + 1}`}
+            keyBindingLabel={`${index + 1}`}
+            aria-label={capitalizeString(label)}
+            aria-keyshortcuts={`${label[0]} ${index + 1}`}
+            onChange={() => {
+              setAppState({ elementType: value, multiElement: null });
+              setElements(clearSelection(elements));
+              document.documentElement.style.cursor =
+                value === "text" ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR;
+              setAppState({});
+            }}
+          ></ToolButton>
+        );
+      })}
+    </>
+  );
+}
+
+export function ZoomActions({
+  renderAction,
+  zoom,
+}: {
+  renderAction: ActionManager["renderAction"];
+  zoom: number;
+}) {
+  return (
+    <Stack.Col gap={1}>
+      <Stack.Row gap={1} align="center">
+        {renderAction("zoomIn")}
+        {renderAction("zoomOut")}
+        {renderAction("resetZoom")}
+        <div style={{ marginLeft: 4 }}>{(zoom * 100).toFixed(0)}%</div>
+      </Stack.Row>
+    </Stack.Col>
+  );
+}

src/components/App.tsx

@@ -0,0 +1,1874 @@
+import React from "react";
+
+import rough from "roughjs/bin/rough";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import { Point } from "roughjs/bin/geometry";
+
+import {
+  newElement,
+  newTextElement,
+  duplicateElement,
+  resizeTest,
+  normalizeResizeHandle,
+  isInvisiblySmallElement,
+  isTextElement,
+  textWysiwyg,
+  getCommonBounds,
+  getCursorForResizingElement,
+  getPerfectElementSize,
+  normalizeDimensions,
+} from "../element";
+import {
+  clearSelection,
+  deleteSelectedElements,
+  getElementsWithinSelection,
+  isOverScrollBars,
+  getElementAtPosition,
+  createScene,
+  getElementContainingPosition,
+  getNormalizedZoom,
+  getSelectedElements,
+  isSomeElementSelected,
+} from "../scene";
+import { saveToLocalStorage, loadScene, loadFromBlob } from "../data";
+
+import { renderScene } from "../renderer";
+import { AppState, GestureEvent, Gesture } from "../types";
+import { ExcalidrawElement } from "../element/types";
+
+import {
+  isWritableElement,
+  isInputLike,
+  isToolIcon,
+  debounce,
+  distance,
+  distance2d,
+  resetCursor,
+  viewportCoordsToSceneCoords,
+  sceneCoordsToViewportCoords,
+} from "../utils";
+import { KEYS, isArrowKey } from "../keys";
+
+import { findShapeByKey, shapesShortcutKeys } from "../shapes";
+import { createHistory } from "../history";
+
+import ContextMenu from "./ContextMenu";
+
+import { getElementWithResizeHandler } from "../element/resizeTest";
+import { ActionManager } from "../actions/manager";
+import "../actions";
+import { actions } from "../actions/register";
+
+import { ActionResult } from "../actions/types";
+import { getDefaultAppState } from "../appState";
+import { t, getLanguage } from "../i18n";
+
+import { copyToAppClipboard, getClipboardContent } from "../clipboard";
+import { normalizeScroll } from "../scene";
+import { getCenter, getDistance } from "../gesture";
+import { createUndoAction, createRedoAction } from "../actions/actionHistory";
+import {
+  CURSOR_TYPE,
+  ELEMENT_SHIFT_TRANSLATE_AMOUNT,
+  ELEMENT_TRANSLATE_AMOUNT,
+  POINTER_BUTTON,
+  DRAGGING_THRESHOLD,
+  TEXT_TO_CENTER_SNAP_THRESHOLD,
+} from "../constants";
+import { LayerUI } from "./LayerUI";
+import { ScrollBars } from "../scene/types";
+
+// -----------------------------------------------------------------------------
+// TEST HOOKS
+// -----------------------------------------------------------------------------
+
+declare global {
+  interface Window {
+    __TEST__: {
+      elements: typeof elements;
+      appState: AppState;
+    };
+  }
+}
+
+if (process.env.NODE_ENV === "test") {
+  window.__TEST__ = {} as Window["__TEST__"];
+}
+
+// -----------------------------------------------------------------------------
+
+let { elements } = createScene();
+
+if (process.env.NODE_ENV === "test") {
+  Object.defineProperty(window.__TEST__, "elements", {
+    get() {
+      return elements;
+    },
+  });
+}
+
+const { history } = createHistory();
+
+let cursorX = 0;
+let cursorY = 0;
+let isHoldingSpace: boolean = false;
+let isPanning: boolean = false;
+let isDraggingScrollBar: boolean = false;
+let currentScrollBars: ScrollBars = { horizontal: null, vertical: null };
+
+let lastPointerUp: ((event: any) => void) | null = null;
+const gesture: Gesture = {
+  pointers: [],
+  lastCenter: null,
+  initialDistance: null,
+  initialScale: null,
+};
+
+function setCursorForShape(shape: string) {
+  if (shape === "selection") {
+    resetCursor();
+  } else {
+    document.documentElement.style.cursor =
+      shape === "text" ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR;
+  }
+}
+
+export class App extends React.Component<any, AppState> {
+  canvas: HTMLCanvasElement | null = null;
+  rc: RoughCanvas | null = null;
+
+  actionManager: ActionManager;
+  canvasOnlyActions = ["selectAll"];
+  constructor(props: any) {
+    super(props);
+    this.actionManager = new ActionManager(
+      this.syncActionResult,
+      () => this.state,
+      () => elements,
+    );
+    this.actionManager.registerAll(actions);
+
+    this.actionManager.registerAction(createUndoAction(history));
+    this.actionManager.registerAction(createRedoAction(history));
+  }
+
+  private syncActionResult = (
+    res: ActionResult,
+    commitToHistory: boolean = true,
+  ) => {
+    if (this.unmounted) {
+      return;
+    }
+    if (res.elements) {
+      elements = res.elements;
+      if (commitToHistory) {
+        history.resumeRecording();
+      }
+      this.setState({});
+    }
+
+    if (res.appState) {
+      if (commitToHistory) {
+        history.resumeRecording();
+      }
+      this.setState({ ...res.appState });
+    }
+  };
+
+  private onCut = (event: ClipboardEvent) => {
+    if (isWritableElement(event.target)) {
+      return;
+    }
+    copyToAppClipboard(elements);
+    elements = deleteSelectedElements(elements);
+    history.resumeRecording();
+    this.setState({});
+    event.preventDefault();
+  };
+  private onCopy = (event: ClipboardEvent) => {
+    if (isWritableElement(event.target)) {
+      return;
+    }
+    copyToAppClipboard(elements);
+    event.preventDefault();
+  };
+
+  private onUnload = () => {
+    isHoldingSpace = false;
+    this.saveDebounced();
+    this.saveDebounced.flush();
+  };
+
+  private disableEvent: EventHandlerNonNull = event => {
+    event.preventDefault();
+  };
+
+  private unmounted = false;
+  public async componentDidMount() {
+    if (process.env.NODE_ENV === "test") {
+      Object.defineProperty(window.__TEST__, "appState", {
+        configurable: true,
+        get: () => {
+          return this.state;
+        },
+      });
+    }
+
+    document.addEventListener("copy", this.onCopy);
+    document.addEventListener("paste", this.pasteFromClipboard);
+    document.addEventListener("cut", this.onCut);
+
+    document.addEventListener("keydown", this.onKeyDown, false);
+    document.addEventListener("keyup", this.onKeyUp, { passive: true });
+    document.addEventListener("mousemove", this.updateCurrentCursorPosition);
+    window.addEventListener("resize", this.onResize, false);
+    window.addEventListener("unload", this.onUnload, false);
+    window.addEventListener("blur", this.onUnload, false);
+    window.addEventListener("dragover", this.disableEvent, false);
+    window.addEventListener("drop", this.disableEvent, false);
+
+    // Safari-only desktop pinch zoom
+    document.addEventListener(
+      "gesturestart",
+      this.onGestureStart as any,
+      false,
+    );
+    document.addEventListener(
+      "gesturechange",
+      this.onGestureChange as any,
+      false,
+    );
+    document.addEventListener("gestureend", this.onGestureEnd as any, false);
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const id = searchParams.get("id");
+
+    if (id) {
+      // Backwards compatibility with legacy url format
+      const scene = await loadScene(id);
+      this.syncActionResult(scene);
+    } else {
+      const match = window.location.hash.match(
+        /^#json=([0-9]+),([a-zA-Z0-9_-]+)$/,
+      );
+      if (match) {
+        const scene = await loadScene(match[1], match[2]);
+        this.syncActionResult(scene);
+      } else {
+        const scene = await loadScene(null);
+        this.syncActionResult(scene);
+      }
+    }
+  }
+
+  public componentWillUnmount() {
+    this.unmounted = true;
+    document.removeEventListener("copy", this.onCopy);
+    document.removeEventListener("paste", this.pasteFromClipboard);
+    document.removeEventListener("cut", this.onCut);
+
+    document.removeEventListener("keydown", this.onKeyDown, false);
+    document.removeEventListener(
+      "mousemove",
+      this.updateCurrentCursorPosition,
+      false,
+    );
+    document.removeEventListener("keyup", this.onKeyUp);
+    window.removeEventListener("resize", this.onResize, false);
+    window.removeEventListener("unload", this.onUnload, false);
+    window.removeEventListener("blur", this.onUnload, false);
+    window.removeEventListener("dragover", this.disableEvent, false);
+    window.removeEventListener("drop", this.disableEvent, false);
+
+    document.removeEventListener(
+      "gesturestart",
+      this.onGestureStart as any,
+      false,
+    );
+    document.removeEventListener(
+      "gesturechange",
+      this.onGestureChange as any,
+      false,
+    );
+    document.removeEventListener("gestureend", this.onGestureEnd as any, false);
+  }
+
+  public state: AppState = getDefaultAppState();
+
+  private onResize = () => {
+    elements = elements.map(el => ({ ...el, shape: null }));
+    this.setState({});
+  };
+
+  private updateCurrentCursorPosition = (event: MouseEvent) => {
+    cursorX = event.x;
+    cursorY = event.y;
+  };
+
+  private onKeyDown = (event: KeyboardEvent) => {
+    if (
+      (isWritableElement(event.target) && event.key !== KEYS.ESCAPE) ||
+      // case: using arrows to move between buttons
+      (isArrowKey(event.key) && isInputLike(event.target))
+    ) {
+      return;
+    }
+
+    if (this.actionManager.handleKeyDown(event)) {
+      return;
+    }
+
+    const shape = findShapeByKey(event.key);
+
+    if (isArrowKey(event.key)) {
+      const step = event.shiftKey
+        ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
+        : ELEMENT_TRANSLATE_AMOUNT;
+      elements = elements.map(el => {
+        if (el.isSelected) {
+          const element = { ...el };
+          if (event.key === KEYS.ARROW_LEFT) {
+            element.x -= step;
+          } else if (event.key === KEYS.ARROW_RIGHT) {
+            element.x += step;
+          } else if (event.key === KEYS.ARROW_UP) {
+            element.y -= step;
+          } else if (event.key === KEYS.ARROW_DOWN) {
+            element.y += step;
+          }
+          return element;
+        }
+        return el;
+      });
+      this.setState({});
+      event.preventDefault();
+    } else if (
+      shapesShortcutKeys.includes(event.key.toLowerCase()) &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      !event.metaKey &&
+      this.state.draggingElement === null
+    ) {
+      this.selectShapeTool(shape);
+    } else if (event.key === KEYS.SPACE && gesture.pointers.length === 0) {
+      isHoldingSpace = true;
+      document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
+    }
+  };
+
+  private onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === KEYS.SPACE) {
+      if (this.state.elementType === "selection") {
+        resetCursor();
+      } else {
+        elements = clearSelection(elements);
+        document.documentElement.style.cursor =
+          this.state.elementType === "text"
+            ? CURSOR_TYPE.TEXT
+            : CURSOR_TYPE.CROSSHAIR;
+        this.setState({});
+      }
+      isHoldingSpace = false;
+    }
+  };
+
+  private copyToAppClipboard = () => {
+    copyToAppClipboard(elements);
+  };
+
+  private pasteFromClipboard = async (event: ClipboardEvent | null) => {
+    // #686
+    const target = document.activeElement;
+    const elementUnderCursor = document.elementFromPoint(cursorX, cursorY);
+    if (
+      // if no ClipboardEvent supplied, assume we're pasting via contextMenu
+      //  thus these checks don't make sense
+      !event ||
+      (elementUnderCursor instanceof HTMLCanvasElement &&
+        !isWritableElement(target))
+    ) {
+      const data = await getClipboardContent(event);
+      if (data.elements) {
+        this.addElementsFromPaste(data.elements);
+      } else if (data.text) {
+        const { x, y } = viewportCoordsToSceneCoords(
+          { clientX: cursorX, clientY: cursorY },
+          this.state,
+          this.canvas,
+        );
+
+        const element = newTextElement(
+          newElement(
+            "text",
+            x,
+            y,
+            this.state.currentItemStrokeColor,
+            this.state.currentItemBackgroundColor,
+            this.state.currentItemFillStyle,
+            this.state.currentItemStrokeWidth,
+            this.state.currentItemRoughness,
+            this.state.currentItemOpacity,
+          ),
+          data.text,
+          this.state.currentItemFont,
+        );
+
+        element.isSelected = true;
+
+        elements = [...clearSelection(elements), element];
+        history.resumeRecording();
+      }
+      this.selectShapeTool("selection");
+      event?.preventDefault();
+    }
+  };
+
+  private selectShapeTool(elementType: AppState["elementType"]) {
+    if (!isHoldingSpace) {
+      setCursorForShape(elementType);
+    }
+    if (isToolIcon(document.activeElement)) {
+      document.activeElement.blur();
+    }
+    if (elementType !== "selection") {
+      elements = clearSelection(elements);
+    }
+    this.setState({ elementType });
+  }
+
+  private onGestureStart = (event: GestureEvent) => {
+    event.preventDefault();
+    gesture.initialScale = this.state.zoom;
+  };
+  private onGestureChange = (event: GestureEvent) => {
+    event.preventDefault();
+
+    this.setState({
+      zoom: getNormalizedZoom(gesture.initialScale! * event.scale),
+    });
+  };
+  private onGestureEnd = (event: GestureEvent) => {
+    event.preventDefault();
+    gesture.initialScale = null;
+  };
+
+  setAppState = (obj: any) => {
+    this.setState(obj);
+  };
+
+  setElements = (elements_: readonly ExcalidrawElement[]) => {
+    elements = elements_;
+    this.setState({});
+  };
+
+  removePointer = (event: React.PointerEvent<HTMLElement>) => {
+    gesture.pointers = gesture.pointers.filter(
+      pointer => pointer.id !== event.pointerId,
+    );
+  };
+
+  public render() {
+    const canvasDOMWidth = window.innerWidth;
+    const canvasDOMHeight = window.innerHeight;
+
+    const canvasScale = window.devicePixelRatio;
+
+    const canvasWidth = canvasDOMWidth * canvasScale;
+    const canvasHeight = canvasDOMHeight * canvasScale;
+
+    return (
+      <div className="container">
+        <LayerUI
+          canvas={this.canvas}
+          appState={this.state}
+          setAppState={this.setAppState}
+          actionManager={this.actionManager}
+          elements={elements}
+          setElements={this.setElements}
+          language={getLanguage()}
+        />
+        <main>
+          <canvas
+            id="canvas"
+            style={{
+              width: canvasDOMWidth,
+              height: canvasDOMHeight,
+            }}
+            width={canvasWidth}
+            height={canvasHeight}
+            ref={canvas => {
+              // canvas is null when unmounting
+              if (canvas !== null) {
+                this.canvas = canvas;
+                this.rc = rough.canvas(this.canvas);
+
+                this.canvas.addEventListener("wheel", this.handleWheel, {
+                  passive: false,
+                });
+
+                this.canvas
+                  .getContext("2d")
+                  ?.setTransform(canvasScale, 0, 0, canvasScale, 0, 0);
+              } else {
+                this.canvas?.removeEventListener("wheel", this.handleWheel);
+              }
+            }}
+            onContextMenu={event => {
+              event.preventDefault();
+
+              const { x, y } = viewportCoordsToSceneCoords(
+                event,
+                this.state,
+                this.canvas,
+              );
+
+              const element = getElementAtPosition(
+                elements,
+                x,
+                y,
+                this.state.zoom,
+              );
+              if (!element) {
+                ContextMenu.push({
+                  options: [
+                    navigator.clipboard && {
+                      label: t("labels.paste"),
+                      action: () => this.pasteFromClipboard(null),
+                    },
+                    ...this.actionManager.getContextMenuItems(action =>
+                      this.canvasOnlyActions.includes(action.name),
+                    ),
+                  ],
+                  top: event.clientY,
+                  left: event.clientX,
+                });
+                return;
+              }
+
+              if (!element.isSelected) {
+                elements = clearSelection(elements);
+                element.isSelected = true;
+                this.setState({});
+              }
+
+              ContextMenu.push({
+                options: [
+                  navigator.clipboard && {
+                    label: t("labels.copy"),
+                    action: this.copyToAppClipboard,
+                  },
+                  navigator.clipboard && {
+                    label: t("labels.paste"),
+                    action: () => this.pasteFromClipboard(null),
+                  },
+                  ...this.actionManager.getContextMenuItems(
+                    action => !this.canvasOnlyActions.includes(action.name),
+                  ),
+                ],
+                top: event.clientY,
+                left: event.clientX,
+              });
+            }}
+            onPointerDown={event => {
+              if (lastPointerUp !== null) {
+                // Unfortunately, sometimes we don't get a pointerup after a pointerdown,
+                // this can happen when a contextual menu or alert is triggered. In order to avoid
+                // being in a weird state, we clean up on the next pointerdown
+                lastPointerUp(event);
+              }
+
+              if (isPanning) {
+                return;
+              }
+
+              this.setState({ lastPointerDownWith: event.pointerType });
+
+              // pan canvas on wheel button drag or space+drag
+              if (
+                gesture.pointers.length === 0 &&
+                (event.button === POINTER_BUTTON.WHEEL ||
+                  (event.button === POINTER_BUTTON.MAIN && isHoldingSpace))
+              ) {
+                isPanning = true;
+                document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
+                let { clientX: lastX, clientY: lastY } = event;
+                const onPointerMove = (event: PointerEvent) => {
+                  const deltaX = lastX - event.clientX;
+                  const deltaY = lastY - event.clientY;
+                  lastX = event.clientX;
+                  lastY = event.clientY;
+
+                  this.setState({
+                    scrollX: normalizeScroll(
+                      this.state.scrollX - deltaX / this.state.zoom,
+                    ),
+                    scrollY: normalizeScroll(
+                      this.state.scrollY - deltaY / this.state.zoom,
+                    ),
+                  });
+                };
+                const teardown = (lastPointerUp = () => {
+                  lastPointerUp = null;
+                  isPanning = false;
+                  if (!isHoldingSpace) {
+                    setCursorForShape(this.state.elementType);
+                  }
+                  window.removeEventListener("pointermove", onPointerMove);
+                  window.removeEventListener("pointerup", teardown);
+                  window.removeEventListener("blur", teardown);
+                });
+                window.addEventListener("blur", teardown);
+                window.addEventListener("pointermove", onPointerMove, {
+                  passive: true,
+                });
+                window.addEventListener("pointerup", teardown);
+                return;
+              }
+
+              // only handle left mouse button or touch
+              if (
+                event.button !== POINTER_BUTTON.MAIN &&
+                event.button !== POINTER_BUTTON.TOUCH
+              ) {
+                return;
+              }
+
+              gesture.pointers.push({
+                id: event.pointerId,
+                x: event.clientX,
+                y: event.clientY,
+              });
+              if (gesture.pointers.length === 2) {
+                gesture.lastCenter = getCenter(gesture.pointers);
+                gesture.initialScale = this.state.zoom;
+                gesture.initialDistance = getDistance(gesture.pointers);
+              }
+
+              // fixes pointermove causing selection of UI texts #32
+              event.preventDefault();
+              // Preventing the event above disables default behavior
+              //  of defocusing potentially focused element, which is what we
+              //  want when clicking inside the canvas.
+              if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+              }
+
+              // don't select while panning
+              if (gesture.pointers.length > 1) {
+                return;
+              }
+
+              // Handle scrollbars dragging
+              const {
+                isOverHorizontalScrollBar,
+                isOverVerticalScrollBar,
+              } = isOverScrollBars(
+                currentScrollBars,
+                event.clientX,
+                event.clientY,
+              );
+
+              const { x, y } = viewportCoordsToSceneCoords(
+                event,
+                this.state,
+                this.canvas,
+              );
+              let lastX = x;
+              let lastY = y;
+
+              if (
+                (isOverHorizontalScrollBar || isOverVerticalScrollBar) &&
+                !this.state.multiElement
+              ) {
+                isDraggingScrollBar = true;
+                lastX = event.clientX;
+                lastY = event.clientY;
+                const onPointerMove = (event: PointerEvent) => {
+                  const target = event.target;
+                  if (!(target instanceof HTMLElement)) {
+                    return;
+                  }
+
+                  if (isOverHorizontalScrollBar) {
+                    const x = event.clientX;
+                    const dx = x - lastX;
+                    this.setState({
+                      scrollX: normalizeScroll(
+                        this.state.scrollX - dx / this.state.zoom,
+                      ),
+                    });
+                    lastX = x;
+                    return;
+                  }
+
+                  if (isOverVerticalScrollBar) {
+                    const y = event.clientY;
+                    const dy = y - lastY;
+                    this.setState({
+                      scrollY: normalizeScroll(
+                        this.state.scrollY - dy / this.state.zoom,
+                      ),
+                    });
+                    lastY = y;
+                  }
+                };
+
+                const onPointerUp = () => {
+                  isDraggingScrollBar = false;
+                  setCursorForShape(this.state.elementType);
+                  lastPointerUp = null;
+                  window.removeEventListener("pointermove", onPointerMove);
+                  window.removeEventListener("pointerup", onPointerUp);
+                };
+
+                lastPointerUp = onPointerUp;
+
+                window.addEventListener("pointermove", onPointerMove);
+                window.addEventListener("pointerup", onPointerUp);
+                return;
+              }
+
+              const originX = x;
+              const originY = y;
+
+              let element = newElement(
+                this.state.elementType,
+                x,
+                y,
+                this.state.currentItemStrokeColor,
+                this.state.currentItemBackgroundColor,
+                this.state.currentItemFillStyle,
+                this.state.currentItemStrokeWidth,
+                this.state.currentItemRoughness,
+                this.state.currentItemOpacity,
+              );
+
+              if (isTextElement(element)) {
+                element = newTextElement(
+                  element,
+                  "",
+                  this.state.currentItemFont,
+                );
+              }
+
+              type ResizeTestType = ReturnType<typeof resizeTest>;
+              let resizeHandle: ResizeTestType = false;
+              let isResizingElements = false;
+              let draggingOccurred = false;
+              let hitElement: ExcalidrawElement | null = null;
+              let elementIsAddedToSelection = false;
+              if (this.state.elementType === "selection") {
+                const resizeElement = getElementWithResizeHandler(
+                  elements,
+                  { x, y },
+                  this.state.zoom,
+                  event.pointerType,
+                );
+
+                const selectedElements = getSelectedElements(elements);
+                if (selectedElements.length === 1 && resizeElement) {
+                  this.setState({
+                    resizingElement: resizeElement
+                      ? resizeElement.element
+                      : null,
+                  });
+
+                  resizeHandle = resizeElement.resizeHandle;
+                  document.documentElement.style.cursor = getCursorForResizingElement(
+                    resizeElement,
+                  );
+                  isResizingElements = true;
+                } else {
+                  hitElement = getElementAtPosition(
+                    elements,
+                    x,
+                    y,
+                    this.state.zoom,
+                  );
+                  // clear selection if shift is not clicked
+                  if (!hitElement?.isSelected && !event.shiftKey) {
+                    elements = clearSelection(elements);
+                  }
+
+                  // If we click on something
+                  if (hitElement) {
+                    // deselect if item is selected
+                    // if shift is not clicked, this will always return true
+                    // otherwise, it will trigger selection based on current
+                    // state of the box
+                    if (!hitElement.isSelected) {
+                      hitElement.isSelected = true;
+                      elements = elements.slice();
+                      elementIsAddedToSelection = true;
+                    }
+
+                    // We duplicate the selected element if alt is pressed on pointer down
+                    if (event.altKey) {
+                      elements = [
+                        ...elements.map(element => ({
+                          ...element,
+                          isSelected: false,
+                        })),
+                        ...getSelectedElements(elements).map(element => {
+                          const newElement = duplicateElement(element);
+                          newElement.isSelected = true;
+                          return newElement;
+                        }),
+                      ];
+                    }
+                  }
+                }
+              } else {
+                elements = clearSelection(elements);
+              }
+
+              if (isTextElement(element)) {
+                // if we're currently still editing text, clicking outside
+                //  should only finalize it, not create another (irrespective
+                //  of state.elementLocked)
+                if (this.state.editingElement?.type === "text") {
+                  return;
+                }
+                if (elementIsAddedToSelection) {
+                  element = hitElement!;
+                }
+                let textX = event.clientX;
+                let textY = event.clientY;
+                if (!event.altKey) {
+                  const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
+                    x,
+                    y,
+                  );
+                  if (snappedToCenterPosition) {
+                    element.x = snappedToCenterPosition.elementCenterX;
+                    element.y = snappedToCenterPosition.elementCenterY;
+                    textX = snappedToCenterPosition.wysiwygX;
+                    textY = snappedToCenterPosition.wysiwygY;
+                  }
+                }
+
+                const resetSelection = () => {
+                  this.setState({
+                    draggingElement: null,
+                    editingElement: null,
+                  });
+                };
+
+                textWysiwyg({
+                  initText: "",
+                  x: textX,
+                  y: textY,
+                  strokeColor: this.state.currentItemStrokeColor,
+                  opacity: this.state.currentItemOpacity,
+                  font: this.state.currentItemFont,
+                  zoom: this.state.zoom,
+                  onSubmit: text => {
+                    if (text) {
+                      elements = [
+                        ...elements,
+                        {
+                          ...newTextElement(
+                            element,
+                            text,
+                            this.state.currentItemFont,
+                          ),
+                          isSelected: true,
+                        },
+                      ];
+                    }
+                    if (this.state.elementLocked) {
+                      setCursorForShape(this.state.elementType);
+                    }
+                    history.resumeRecording();
+                    resetSelection();
+                  },
+                  onCancel: () => {
+                    resetSelection();
+                  },
+                });
+                resetCursor();
+                if (!this.state.elementLocked) {
+                  this.setState({
+                    editingElement: element,
+                    elementType: "selection",
+                  });
+                } else {
+                  this.setState({
+                    editingElement: element,
+                  });
+                }
+                return;
+              } else if (
+                this.state.elementType === "arrow" ||
+                this.state.elementType === "line"
+              ) {
+                if (this.state.multiElement) {
+                  const { multiElement } = this.state;
+                  const { x: rx, y: ry } = multiElement;
+                  multiElement.isSelected = true;
+                  multiElement.points.push([x - rx, y - ry]);
+                  multiElement.shape = null;
+                } else {
+                  element.isSelected = false;
+                  element.points.push([0, 0]);
+                  element.shape = null;
+                  elements = [...elements, element];
+                  this.setState({
+                    draggingElement: element,
+                  });
+                }
+              } else if (element.type === "selection") {
+                this.setState({
+                  selectionElement: element,
+                  draggingElement: element,
+                });
+              } else {
+                elements = [...elements, element];
+                this.setState({ multiElement: null, draggingElement: element });
+              }
+
+              let resizeArrowFn:
+                | ((
+                    element: ExcalidrawElement,
+                    p1: Point,
+                    deltaX: number,
+                    deltaY: number,
+                    pointerX: number,
+                    pointerY: number,
+                    perfect: boolean,
+                  ) => void)
+                | null = null;
+
+              const arrowResizeOrigin = (
+                element: ExcalidrawElement,
+                p1: Point,
+                deltaX: number,
+                deltaY: number,
+                pointerX: number,
+                pointerY: number,
+                perfect: boolean,
+              ) => {
+                if (perfect) {
+                  const absPx = p1[0] + element.x;
+                  const absPy = p1[1] + element.y;
+
+                  const { width, height } = getPerfectElementSize(
+                    element.type,
+                    pointerX - element.x - p1[0],
+                    pointerY - element.y - p1[1],
+                  );
+
+                  const dx = element.x + width + p1[0];
+                  const dy = element.y + height + p1[1];
+                  element.x = dx;
+                  element.y = dy;
+                  p1[0] = absPx - element.x;
+                  p1[1] = absPy - element.y;
+                } else {
+                  element.x += deltaX;
+                  element.y += deltaY;
+                  p1[0] -= deltaX;
+                  p1[1] -= deltaY;
+                }
+              };
+
+              const arrowResizeEnd = (
+                element: ExcalidrawElement,
+                p1: Point,
+                deltaX: number,
+                deltaY: number,
+                pointerX: number,
+                pointerY: number,
+                perfect: boolean,
+              ) => {
+                if (perfect) {
+                  const { width, height } = getPerfectElementSize(
+                    element.type,
+                    pointerX - element.x,
+                    pointerY - element.y,
+                  );
+                  p1[0] = width;
+                  p1[1] = height;
+                } else {
+                  p1[0] += deltaX;
+                  p1[1] += deltaY;
+                }
+              };
+
+              const onPointerMove = (event: PointerEvent) => {
+                const target = event.target;
+                if (!(target instanceof HTMLElement)) {
+                  return;
+                }
+
+                if (isOverHorizontalScrollBar) {
+                  const x = event.clientX;
+                  const dx = x - lastX;
+                  this.setState({
+                    scrollX: normalizeScroll(
+                      this.state.scrollX - dx / this.state.zoom,
+                    ),
+                  });
+                  lastX = x;
+                  return;
+                }
+
+                if (isOverVerticalScrollBar) {
+                  const y = event.clientY;
+                  const dy = y - lastY;
+                  this.setState({
+                    scrollY: normalizeScroll(
+                      this.state.scrollY - dy / this.state.zoom,
+                    ),
+                  });
+                  lastY = y;
+                  return;
+                }
+
+                // for arrows, don't start dragging until a given threshold
+                //  to ensure we don't create a 2-point arrow by mistake when
+                //  user clicks mouse in a way that it moves a tiny bit (thus
+                //  triggering pointermove)
+                if (
+                  !draggingOccurred &&
+                  (this.state.elementType === "arrow" ||
+                    this.state.elementType === "line")
+                ) {
+                  const { x, y } = viewportCoordsToSceneCoords(
+                    event,
+                    this.state,
+                    this.canvas,
+                  );
+                  if (distance2d(x, y, originX, originY) < DRAGGING_THRESHOLD) {
+                    return;
+                  }
+                }
+
+                if (isResizingElements && this.state.resizingElement) {
+                  this.setState({ isResizing: true });
+                  const el = this.state.resizingElement;
+                  const selectedElements = getSelectedElements(elements);
+                  if (selectedElements.length === 1) {
+                    const { x, y } = viewportCoordsToSceneCoords(
+                      event,
+                      this.state,
+                      this.canvas,
+                    );
+                    const deltaX = x - lastX;
+                    const deltaY = y - lastY;
+                    const element = selectedElements[0];
+                    const isLinear =
+                      element.type === "line" || element.type === "arrow";
+                    switch (resizeHandle) {
+                      case "nw":
+                        if (isLinear && element.points.length === 2) {
+                          const [, p1] = element.points;
+
+                          if (!resizeArrowFn) {
+                            if (p1[0] < 0 || p1[1] < 0) {
+                              resizeArrowFn = arrowResizeEnd;
+                            } else {
+                              resizeArrowFn = arrowResizeOrigin;
+                            }
+                          }
+                          resizeArrowFn(
+                            element,
+                            p1,
+                            deltaX,
+                            deltaY,
+                            x,
+                            y,
+                            event.shiftKey,
+                          );
+                        } else {
+                          element.width -= deltaX;
+                          element.x += deltaX;
+
+                          if (event.shiftKey) {
+                            element.y += element.height - element.width;
+                            element.height = element.width;
+                          } else {
+                            element.height -= deltaY;
+                            element.y += deltaY;
+                          }
+                        }
+                        break;
+                      case "ne":
+                        if (isLinear && element.points.length === 2) {
+                          const [, p1] = element.points;
+                          if (!resizeArrowFn) {
+                            if (p1[0] >= 0) {
+                              resizeArrowFn = arrowResizeEnd;
+                            } else {
+                              resizeArrowFn = arrowResizeOrigin;
+                            }
+                          }
+                          resizeArrowFn(
+                            element,
+                            p1,
+                            deltaX,
+                            deltaY,
+                            x,
+                            y,
+                            event.shiftKey,
+                          );
+                        } else {
+                          element.width += deltaX;
+                          if (event.shiftKey) {
+                            element.y += element.height - element.width;
+                            element.height = element.width;
+                          } else {
+                            element.height -= deltaY;
+                            element.y += deltaY;
+                          }
+                        }
+                        break;
+                      case "sw":
+                        if (isLinear && element.points.length === 2) {
+                          const [, p1] = element.points;
+                          if (!resizeArrowFn) {
+                            if (p1[0] <= 0) {
+                              resizeArrowFn = arrowResizeEnd;
+                            } else {
+                              resizeArrowFn = arrowResizeOrigin;
+                            }
+                          }
+                          resizeArrowFn(
+                            element,
+                            p1,
+                            deltaX,
+                            deltaY,
+                            x,
+                            y,
+                            event.shiftKey,
+                          );
+                        } else {
+                          element.width -= deltaX;
+                          element.x += deltaX;
+                          if (event.shiftKey) {
+                            element.height = element.width;
+                          } else {
+                            element.height += deltaY;
+                          }
+                        }
+                        break;
+                      case "se":
+                        if (isLinear && element.points.length === 2) {
+                          const [, p1] = element.points;
+                          if (!resizeArrowFn) {
+                            if (p1[0] > 0 || p1[1] > 0) {
+                              resizeArrowFn = arrowResizeEnd;
+                            } else {
+                              resizeArrowFn = arrowResizeOrigin;
+                            }
+                          }
+                          resizeArrowFn(
+                            element,
+                            p1,
+                            deltaX,
+                            deltaY,
+                            x,
+                            y,
+                            event.shiftKey,
+                          );
+                        } else {
+                          if (event.shiftKey) {
+                            element.width += deltaX;
+                            element.height = element.width;
+                          } else {
+                            element.width += deltaX;
+                            element.height += deltaY;
+                          }
+                        }
+                        break;
+                      case "n": {
+                        element.height -= deltaY;
+                        element.y += deltaY;
+
+                        if (element.points.length > 0) {
+                          const len = element.points.length;
+
+                          const points = [...element.points].sort(
+                            (a, b) => a[1] - b[1],
+                          );
+
+                          for (let i = 1; i < points.length; ++i) {
+                            const pnt = points[i];
+                            pnt[1] -= deltaY / (len - i);
+                          }
+                        }
+                        break;
+                      }
+                      case "w": {
+                        element.width -= deltaX;
+                        element.x += deltaX;
+
+                        if (element.points.length > 0) {
+                          const len = element.points.length;
+                          const points = [...element.points].sort(
+                            (a, b) => a[0] - b[0],
+                          );
+
+                          for (let i = 0; i < points.length; ++i) {
+                            const pnt = points[i];
+                            pnt[0] -= deltaX / (len - i);
+                          }
+                        }
+                        break;
+                      }
+                      case "s": {
+                        element.height += deltaY;
+                        if (element.points.length > 0) {
+                          const len = element.points.length;
+                          const points = [...element.points].sort(
+                            (a, b) => a[1] - b[1],
+                          );
+
+                          for (let i = 1; i < points.length; ++i) {
+                            const pnt = points[i];
+                            pnt[1] += deltaY / (len - i);
+                          }
+                        }
+                        break;
+                      }
+                      case "e": {
+                        element.width += deltaX;
+                        if (element.points.length > 0) {
+                          const len = element.points.length;
+                          const points = [...element.points].sort(
+                            (a, b) => a[0] - b[0],
+                          );
+
+                          for (let i = 1; i < points.length; ++i) {
+                            const pnt = points[i];
+                            pnt[0] += deltaX / (len - i);
+                          }
+                        }
+                        break;
+                      }
+                    }
+
+                    if (resizeHandle) {
+                      resizeHandle = normalizeResizeHandle(
+                        element,
+                        resizeHandle,
+                      );
+                    }
+                    normalizeDimensions(element);
+
+                    document.documentElement.style.cursor = getCursorForResizingElement(
+                      { element, resizeHandle },
+                    );
+                    el.x = element.x;
+                    el.y = element.y;
+                    el.shape = null;
+
+                    lastX = x;
+                    lastY = y;
+                    this.setState({});
+                    return;
+                  }
+                }
+
+                if (hitElement?.isSelected) {
+                  // Marking that click was used for dragging to check
+                  // if elements should be deselected on pointerup
+                  draggingOccurred = true;
+                  const selectedElements = getSelectedElements(elements);
+                  if (selectedElements.length > 0) {
+                    const { x, y } = viewportCoordsToSceneCoords(
+                      event,
+                      this.state,
+                      this.canvas,
+                    );
+
+                    selectedElements.forEach(element => {
+                      element.x += x - lastX;
+                      element.y += y - lastY;
+                    });
+                    lastX = x;
+                    lastY = y;
+                    this.setState({});
+                    return;
+                  }
+                }
+
+                // It is very important to read this.state within each move event,
+                // otherwise we would read a stale one!
+                const draggingElement = this.state.draggingElement;
+                if (!draggingElement) {
+                  return;
+                }
+
+                const { x, y } = viewportCoordsToSceneCoords(
+                  event,
+                  this.state,
+                  this.canvas,
+                );
+
+                let width = distance(originX, x);
+                let height = distance(originY, y);
+
+                const isLinear =
+                  this.state.elementType === "line" ||
+                  this.state.elementType === "arrow";
+
+                if (isLinear) {
+                  draggingOccurred = true;
+                  const points = draggingElement.points;
+                  let dx = x - draggingElement.x;
+                  let dy = y - draggingElement.y;
+
+                  if (event.shiftKey && points.length === 2) {
+                    ({ width: dx, height: dy } = getPerfectElementSize(
+                      this.state.elementType,
+                      dx,
+                      dy,
+                    ));
+                  }
+
+                  if (points.length === 1) {
+                    points.push([dx, dy]);
+                  } else if (points.length > 1) {
+                    const pnt = points[points.length - 1];
+                    pnt[0] = dx;
+                    pnt[1] = dy;
+                  }
+                } else {
+                  if (event.shiftKey) {
+                    ({ width, height } = getPerfectElementSize(
+                      this.state.elementType,
+                      width,
+                      y < originY ? -height : height,
+                    ));
+
+                    if (height < 0) {
+                      height = -height;
+                    }
+                  }
+
+                  draggingElement.x = x < originX ? originX - width : originX;
+                  draggingElement.y = y < originY ? originY - height : originY;
+
+                  draggingElement.width = width;
+                  draggingElement.height = height;
+                }
+
+                draggingElement.shape = null;
+
+                if (this.state.elementType === "selection") {
+                  if (!event.shiftKey && isSomeElementSelected(elements)) {
+                    elements = clearSelection(elements);
+                  }
+                  const elementsWithinSelection = getElementsWithinSelection(
+                    elements,
+                    draggingElement,
+                  );
+                  elementsWithinSelection.forEach(element => {
+                    element.isSelected = true;
+                  });
+                }
+                this.setState({});
+              };
+
+              const onPointerUp = (event: PointerEvent) => {
+                const {
+                  draggingElement,
+                  resizingElement,
+                  multiElement,
+                  elementType,
+                  elementLocked,
+                } = this.state;
+
+                this.setState({
+                  isResizing: false,
+                  resizingElement: null,
+                  selectionElement: null,
+                });
+
+                resizeArrowFn = null;
+                lastPointerUp = null;
+                window.removeEventListener("pointermove", onPointerMove);
+                window.removeEventListener("pointerup", onPointerUp);
+
+                if (elementType === "arrow" || elementType === "line") {
+                  if (draggingElement!.points.length > 1) {
+                    history.resumeRecording();
+                    this.setState({});
+                  }
+                  if (!draggingOccurred && draggingElement && !multiElement) {
+                    const { x, y } = viewportCoordsToSceneCoords(
+                      event,
+                      this.state,
+                      this.canvas,
+                    );
+                    draggingElement.points.push([
+                      x - draggingElement.x,
+                      y - draggingElement.y,
+                    ]);
+                    draggingElement.shape = null;
+                    this.setState({ multiElement: this.state.draggingElement });
+                  } else if (draggingOccurred && !multiElement) {
+                    this.state.draggingElement!.isSelected = true;
+                    if (!elementLocked) {
+                      resetCursor();
+                      this.setState({
+                        draggingElement: null,
+                        elementType: "selection",
+                      });
+                    } else {
+                      this.setState({
+                        draggingElement: null,
+                      });
+                    }
+                  }
+                  return;
+                }
+
+                if (
+                  elementType !== "selection" &&
+                  draggingElement &&
+                  isInvisiblySmallElement(draggingElement)
+                ) {
+                  // remove invisible element which was added in onPointerDown
+                  elements = elements.slice(0, -1);
+                  this.setState({
+                    draggingElement: null,
+                  });
+                  return;
+                }
+
+                if (normalizeDimensions(draggingElement)) {
+                  this.setState({});
+                }
+
+                if (resizingElement) {
+                  history.resumeRecording();
+                  this.setState({});
+                }
+
+                if (
+                  resizingElement &&
+                  isInvisiblySmallElement(resizingElement)
+                ) {
+                  elements = elements.filter(
+                    el => el.id !== resizingElement.id,
+                  );
+                }
+
+                // If click occurred on already selected element
+                // it is needed to remove selection from other elements
+                // or if SHIFT or META key pressed remove selection
+                // from hitted element
+                //
+                // If click occurred and elements were dragged or some element
+                // was added to selection (on pointerdown phase) we need to keep
+                // selection unchanged
+                if (
+                  hitElement &&
+                  !draggingOccurred &&
+                  !elementIsAddedToSelection
+                ) {
+                  if (event.shiftKey) {
+                    hitElement.isSelected = false;
+                  } else {
+                    elements = clearSelection(elements);
+                    hitElement.isSelected = true;
+                  }
+                }
+
+                if (draggingElement === null) {
+                  // if no element is clicked, clear the selection and redraw
+                  elements = clearSelection(elements);
+                  this.setState({});
+                  return;
+                }
+
+                if (!elementLocked) {
+                  draggingElement.isSelected = true;
+                }
+
+                if (
+                  elementType !== "selection" ||
+                  isSomeElementSelected(elements)
+                ) {
+                  history.resumeRecording();
+                }
+
+                if (!elementLocked) {
+                  resetCursor();
+                  this.setState({
+                    draggingElement: null,
+                    elementType: "selection",
+                  });
+                } else {
+                  this.setState({
+                    draggingElement: null,
+                  });
+                }
+              };
+
+              lastPointerUp = onPointerUp;
+
+              window.addEventListener("pointermove", onPointerMove);
+              window.addEventListener("pointerup", onPointerUp);
+            }}
+            onDoubleClick={event => {
+              resetCursor();
+
+              const { x, y } = viewportCoordsToSceneCoords(
+                event,
+                this.state,
+                this.canvas,
+              );
+
+              const elementAtPosition = getElementAtPosition(
+                elements,
+                x,
+                y,
+                this.state.zoom,
+              );
+
+              const element =
+                elementAtPosition && isTextElement(elementAtPosition)
+                  ? elementAtPosition
+                  : newTextElement(
+                      newElement(
+                        "text",
+                        x,
+                        y,
+                        this.state.currentItemStrokeColor,
+                        this.state.currentItemBackgroundColor,
+                        this.state.currentItemFillStyle,
+                        this.state.currentItemStrokeWidth,
+                        this.state.currentItemRoughness,
+                        this.state.currentItemOpacity,
+                      ),
+                      "", // default text
+                      this.state.currentItemFont, // default font
+                    );
+
+              this.setState({ editingElement: element });
+
+              let textX = event.clientX;
+              let textY = event.clientY;
+
+              if (elementAtPosition && isTextElement(elementAtPosition)) {
+                elements = elements.filter(
+                  element => element.id !== elementAtPosition.id,
+                );
+                this.setState({});
+
+                const centerElementX =
+                  elementAtPosition.x + elementAtPosition.width / 2;
+                const centerElementY =
+                  elementAtPosition.y + elementAtPosition.height / 2;
+
+                const {
+                  x: centerElementXInViewport,
+                  y: centerElementYInViewport,
+                } = sceneCoordsToViewportCoords(
+                  { sceneX: centerElementX, sceneY: centerElementY },
+                  this.state,
+                  this.canvas,
+                );
+
+                textX = centerElementXInViewport;
+                textY = centerElementYInViewport;
+
+                // x and y will change after calling newTextElement function
+                element.x = centerElementX;
+                element.y = centerElementY;
+              } else if (!event.altKey) {
+                const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
+                  x,
+                  y,
+                );
+
+                if (snappedToCenterPosition) {
+                  element.x = snappedToCenterPosition.elementCenterX;
+                  element.y = snappedToCenterPosition.elementCenterY;
+                  textX = snappedToCenterPosition.wysiwygX;
+                  textY = snappedToCenterPosition.wysiwygY;
+                }
+              }
+
+              const resetSelection = () => {
+                this.setState({
+                  draggingElement: null,
+                  editingElement: null,
+                });
+              };
+
+              textWysiwyg({
+                initText: element.text,
+                x: textX,
+                y: textY,
+                strokeColor: element.strokeColor,
+                font: element.font,
+                opacity: this.state.currentItemOpacity,
+                zoom: this.state.zoom,
+                onSubmit: text => {
+                  if (text) {
+                    elements = [
+                      ...elements,
+                      {
+                        // we need to recreate the element to update dimensions &
+                        //  position
+                        ...newTextElement(element, text, element.font),
+                        isSelected: true,
+                      },
+                    ];
+                  }
+                  history.resumeRecording();
+                  resetSelection();
+                },
+                onCancel: () => {
+                  resetSelection();
+                },
+              });
+            }}
+            onPointerMove={event => {
+              gesture.pointers = gesture.pointers.map(pointer =>
+                pointer.id === event.pointerId
+                  ? {
+                      id: event.pointerId,
+                      x: event.clientX,
+                      y: event.clientY,
+                    }
+                  : pointer,
+              );
+
+              if (gesture.pointers.length === 2) {
+                const center = getCenter(gesture.pointers);
+                const deltaX = center.x - gesture.lastCenter!.x;
+                const deltaY = center.y - gesture.lastCenter!.y;
+                gesture.lastCenter = center;
+
+                const distance = getDistance(gesture.pointers);
+                const scaleFactor = distance / gesture.initialDistance!;
+
+                this.setState({
+                  scrollX: normalizeScroll(
+                    this.state.scrollX + deltaX / this.state.zoom,
+                  ),
+                  scrollY: normalizeScroll(
+                    this.state.scrollY + deltaY / this.state.zoom,
+                  ),
+                  zoom: getNormalizedZoom(gesture.initialScale! * scaleFactor),
+                });
+              } else {
+                gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;
+              }
+
+              if (isHoldingSpace || isPanning || isDraggingScrollBar) {
+                return;
+              }
+              const {
+                isOverHorizontalScrollBar,
+                isOverVerticalScrollBar,
+              } = isOverScrollBars(
+                currentScrollBars,
+                event.clientX,
+                event.clientY,
+              );
+              const isOverScrollBar =
+                isOverVerticalScrollBar || isOverHorizontalScrollBar;
+              if (!this.state.draggingElement && !this.state.multiElement) {
+                if (isOverScrollBar) {
+                  resetCursor();
+                } else {
+                  setCursorForShape(this.state.elementType);
+                }
+              }
+
+              const { x, y } = viewportCoordsToSceneCoords(
+                event,
+                this.state,
+                this.canvas,
+              );
+              if (this.state.multiElement) {
+                const { multiElement } = this.state;
+                const originX = multiElement.x;
+                const originY = multiElement.y;
+                const points = multiElement.points;
+                const pnt = points[points.length - 1];
+                pnt[0] = x - originX;
+                pnt[1] = y - originY;
+                multiElement.shape = null;
+                this.setState({});
+                return;
+              }
+
+              const hasDeselectedButton = Boolean(event.buttons);
+              if (
+                hasDeselectedButton ||
+                this.state.elementType !== "selection"
+              ) {
+                return;
+              }
+
+              const selectedElements = getSelectedElements(elements);
+              if (selectedElements.length === 1 && !isOverScrollBar) {
+                const resizeElement = getElementWithResizeHandler(
+                  elements,
+                  { x, y },
+                  this.state.zoom,
+                  event.pointerType,
+                );
+                if (resizeElement && resizeElement.resizeHandle) {
+                  document.documentElement.style.cursor = getCursorForResizingElement(
+                    resizeElement,
+                  );
+                  return;
+                }
+              }
+              const hitElement = getElementAtPosition(
+                elements,
+                x,
+                y,
+                this.state.zoom,
+              );
+              document.documentElement.style.cursor =
+                hitElement && !isOverScrollBar ? "move" : "";
+            }}
+            onPointerUp={this.removePointer}
+            onPointerCancel={this.removePointer}
+            onDrop={event => {
+              const file = event.dataTransfer.files[0];
+              if (
+                file?.type === "application/json" ||
+                file?.name.endsWith(".excalidraw")
+              ) {
+                loadFromBlob(file)
+                  .then(({ elements, appState }) =>
+                    this.syncActionResult({ elements, appState }),
+                  )
+                  .catch(error => console.error(error));
+              }
+            }}
+          >
+            {t("labels.drawingCanvas")}
+          </canvas>
+        </main>
+      </div>
+    );
+  }
+
+  private handleWheel = (event: WheelEvent) => {
+    event.preventDefault();
+    const { deltaX, deltaY } = event;
+
+    if (event.metaKey || event.ctrlKey) {
+      const sign = Math.sign(deltaY);
+      const MAX_STEP = 10;
+      let delta = Math.abs(deltaY);
+      if (delta > MAX_STEP) {
+        delta = MAX_STEP;
+      }
+      delta *= sign;
+      this.setState(({ zoom }) => ({
+        zoom: getNormalizedZoom(zoom - delta / 100),
+      }));
+      return;
+    }
+
+    this.setState(({ zoom, scrollX, scrollY }) => ({
+      scrollX: normalizeScroll(scrollX - deltaX / zoom),
+      scrollY: normalizeScroll(scrollY - deltaY / zoom),
+    }));
+  };
+
+  private addElementsFromPaste = (
+    clipboardElements: readonly ExcalidrawElement[],
+  ) => {
+    elements = clearSelection(elements);
+
+    const [minX, minY, maxX, maxY] = getCommonBounds(clipboardElements);
+
+    const elementsCenterX = distance(minX, maxX) / 2;
+    const elementsCenterY = distance(minY, maxY) / 2;
+
+    const { x, y } = viewportCoordsToSceneCoords(
+      { clientX: cursorX, clientY: cursorY },
+      this.state,
+      this.canvas,
+    );
+
+    const dx = x - elementsCenterX;
+    const dy = y - elementsCenterY;
+
+    elements = [
+      ...elements,
+      ...clipboardElements.map(clipboardElements => {
+        const duplicate = duplicateElement(clipboardElements);
+        duplicate.x += dx - minX;
+        duplicate.y += dy - minY;
+        return duplicate;
+      }),
+    ];
+    history.resumeRecording();
+    this.setState({});
+  };
+
+  private getTextWysiwygSnappedToCenterPosition(x: number, y: number) {
+    const elementClickedInside = getElementContainingPosition(elements, x, y);
+    if (elementClickedInside) {
+      const elementCenterX =
+        elementClickedInside.x + elementClickedInside.width / 2;
+      const elementCenterY =
+        elementClickedInside.y + elementClickedInside.height / 2;
+      const distanceToCenter = Math.hypot(
+        x - elementCenterX,
+        y - elementCenterY,
+      );
+      const isSnappedToCenter =
+        distanceToCenter < TEXT_TO_CENTER_SNAP_THRESHOLD;
+      if (isSnappedToCenter) {
+        const wysiwygX =
+          this.state.scrollX +
+          elementClickedInside.x +
+          elementClickedInside.width / 2;
+        const wysiwygY =
+          this.state.scrollY +
+          elementClickedInside.y +
+          elementClickedInside.height / 2;
+        return { wysiwygX, wysiwygY, elementCenterX, elementCenterY };
+      }
+    }
+  }
+
+  private saveDebounced = debounce(() => {
+    saveToLocalStorage(elements, this.state);
+  }, 300);
+
+  componentDidUpdate() {
+    const { atLeastOneVisibleElement, scrollBars } = renderScene(
+      elements,
+      this.state.selectionElement,
+      this.rc!,
+      this.canvas!,
+      {
+        scrollX: this.state.scrollX,
+        scrollY: this.state.scrollY,
+        viewBackgroundColor: this.state.viewBackgroundColor,
+        zoom: this.state.zoom,
+      },
+      {
+        renderOptimizations: true,
+      },
+    );
+    if (scrollBars) {
+      currentScrollBars = scrollBars;
+    }
+    const scrolledOutside = !atLeastOneVisibleElement && elements.length > 0;
+    if (this.state.scrolledOutside !== scrolledOutside) {
+      this.setState({ scrolledOutside: scrolledOutside });
+    }
+    this.saveDebounced();
+    if (history.isRecording()) {
+      history.pushEntry(this.state, elements);
+      history.skipRecording();
+    }
+  }
+}

src/components/ExportDialog.tsx

@@ -22,7 +22,7 @@ import useIsMobile from "../is-mobile";
 const scales = [1, 2, 3];
 const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;
 
-type ExportCB = (
+export type ExportCB = (
   elements: readonly ExcalidrawElement[],
   scale?: number,
 ) => void;
@@ -173,7 +173,7 @@ function ExportModal({
                     name="export-canvas-scale"
                     aria-label={`Scale ${s} x`}
                     id="export-canvas-scale"
-                    checked={scale === s}
+                    checked={s === scale}
                     onChange={() => setScale(s)}
                   />
                 ))}

src/components/LanguageList.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { t } from "../i18n";
+import * as i18n from "../i18n";
 
-export function LanguageList<T>({
+export function LanguageList({
   onChange,
-  languages,
-  currentLanguage,
+  languages = i18n.languages,
+  currentLanguage = i18n.getLanguage(),
   floating,
 }: {
-  languages: { lng: string; label: string }[];
+  languages?: { lng: string; label: string }[];
   onChange: (value: string) => void;
-  currentLanguage: string;
+  currentLanguage?: string;
   floating?: boolean;
 }) {
   return (
@@ -20,7 +20,7 @@ export function LanguageList<T>({
         }`}
         onChange={({ target }) => onChange(target.value)}
         value={currentLanguage}
-        aria-label={t("buttons.selectLanguage")}
+        aria-label={i18n.t("buttons.selectLanguage")}
       >
         {languages.map(language => (
           <option key={language.lng} value={language.lng}>

src/components/LayerUI.tsx

@@ -0,0 +1,233 @@
+import React from "react";
+import { showSelectedShapeActions } from "../element";
+import { calculateScrollCenter, getTargetElement } from "../scene";
+import { exportCanvas } from "../data";
+
+import { AppState } from "../types";
+import { ExcalidrawElement } from "../element/types";
+
+import { ActionManager } from "../actions/manager";
+import { Island } from "./Island";
+import Stack from "./Stack";
+import { FixedSideContainer } from "./FixedSideContainer";
+import { LockIcon } from "./LockIcon";
+import { ExportDialog, ExportCB } from "./ExportDialog";
+import { LanguageList } from "./LanguageList";
+import { t, languages, setLanguage } from "../i18n";
+import { HintViewer } from "./HintViewer";
+import useIsMobile from "../is-mobile";
+
+import { ExportType } from "../scene/types";
+import { MobileMenu } from "./MobileMenu";
+import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import { Section } from "./Section";
+
+interface LayerUIProps {
+  actionManager: ActionManager;
+  appState: AppState;
+  canvas: HTMLCanvasElement | null;
+  setAppState: any;
+  elements: readonly ExcalidrawElement[];
+  language: string;
+  setElements: (elements: readonly ExcalidrawElement[]) => void;
+}
+
+export const LayerUI = React.memo(
+  ({
+    actionManager,
+    appState,
+    setAppState,
+    canvas,
+    elements,
+    language,
+    setElements,
+  }: LayerUIProps) => {
+    const isMobile = useIsMobile();
+
+    function renderExportDialog() {
+      const createExporter = (type: ExportType): ExportCB => (
+        exportedElements,
+        scale,
+      ) => {
+        if (canvas) {
+          exportCanvas(type, exportedElements, canvas, {
+            exportBackground: appState.exportBackground,
+            name: appState.name,
+            viewBackgroundColor: appState.viewBackgroundColor,
+            scale,
+          });
+        }
+      };
+      return (
+        <ExportDialog
+          elements={elements}
+          appState={appState}
+          actionManager={actionManager}
+          onExportToPng={createExporter("png")}
+          onExportToSvg={createExporter("svg")}
+          onExportToClipboard={createExporter("clipboard")}
+          onExportToBackend={exportedElements => {
+            if (canvas) {
+              exportCanvas(
+                "backend",
+                exportedElements.map(element => ({
+                  ...element,
+                  isSelected: false,
+                })),
+                canvas,
+                appState,
+              );
+            }
+          }}
+        />
+      );
+    }
+
+    return isMobile ? (
+      <MobileMenu
+        appState={appState}
+        elements={elements}
+        setElements={setElements}
+        actionManager={actionManager}
+        exportButton={renderExportDialog()}
+        setAppState={setAppState}
+      />
+    ) : (
+      <>
+        <FixedSideContainer side="top">
+          <HintViewer
+            elementType={appState.elementType}
+            multiMode={appState.multiElement !== null}
+            isResizing={appState.isResizing}
+            elements={elements}
+          />
+          <div className="App-menu App-menu_top">
+            <Stack.Col gap={4} align="end">
+              <Section className="App-right-menu" heading="canvasActions">
+                <Island padding={4}>
+                  <Stack.Col gap={4}>
+                    <Stack.Row justifyContent={"space-between"}>
+                      {actionManager.renderAction("loadScene")}
+                      {actionManager.renderAction("saveScene")}
+                      {renderExportDialog()}
+                      {actionManager.renderAction("clearCanvas")}
+                    </Stack.Row>
+                    {actionManager.renderAction("changeViewBackgroundColor")}
+                  </Stack.Col>
+                </Island>
+              </Section>
+              {showSelectedShapeActions(appState, elements) && (
+                <Section
+                  className="App-right-menu"
+                  heading="selectedShapeActions"
+                >
+                  <Island padding={4}>
+                    <SelectedShapeActions
+                      targetElements={getTargetElement(
+                        appState.editingElement,
+                        elements,
+                      )}
+                      renderAction={actionManager.renderAction}
+                      elementType={appState.elementType}
+                    />
+                  </Island>
+                </Section>
+              )}
+            </Stack.Col>
+            <Section heading="shapes">
+              {heading => (
+                <Stack.Col gap={4} align="start">
+                  <Stack.Row gap={1}>
+                    <Island padding={1}>
+                      {heading}
+                      <Stack.Row gap={1}>
+                        <ShapesSwitcher
+                          elementType={appState.elementType}
+                          setAppState={setAppState}
+                          setElements={setElements}
+                          elements={elements}
+                        />
+                      </Stack.Row>
+                    </Island>
+                    <LockIcon
+                      checked={appState.elementLocked}
+                      onChange={() => {
+                        setAppState({
+                          elementLocked: !appState.elementLocked,
+                          elementType: appState.elementLocked
+                            ? "selection"
+                            : appState.elementType,
+                        });
+                      }}
+                      title={t("toolBar.lock")}
+                      isButton={isMobile}
+                    />
+                  </Stack.Row>
+                </Stack.Col>
+              )}
+            </Section>
+            <div />
+          </div>
+          <div className="App-menu App-menu_bottom">
+            <Stack.Col gap={2}>
+              <Section heading="canvasActions">
+                <Island padding={1}>
+                  <ZoomActions
+                    renderAction={actionManager.renderAction}
+                    zoom={appState.zoom}
+                  />
+                </Island>
+              </Section>
+            </Stack.Col>
+          </div>
+        </FixedSideContainer>
+        <footer role="contentinfo">
+          <LanguageList
+            onChange={lng => {
+              setLanguage(lng);
+              setAppState({});
+            }}
+            languages={languages}
+            currentLanguage={language}
+            floating
+          />
+          {appState.scrolledOutside && (
+            <button
+              className="scroll-back-to-content"
+              onClick={() => {
+                setAppState({ ...calculateScrollCenter(elements) });
+              }}
+            >
+              {t("buttons.scrollBackToContent")}
+            </button>
+          )}
+        </footer>
+      </>
+    );
+  },
+  (prev, next) => {
+    const getNecessaryObj = (appState: AppState): Partial<AppState> => {
+      const {
+        draggingElement,
+        resizingElement,
+        multiElement,
+        editingElement,
+        isResizing,
+        cursorX,
+        cursorY,
+        ...ret
+      } = appState;
+      return ret;
+    };
+    const prevAppState = getNecessaryObj(prev.appState);
+    const nextAppState = getNecessaryObj(next.appState);
+
+    const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
+
+    return (
+      prev.language === next.language &&
+      prev.elements === next.elements &&
+      keys.every(key => prevAppState[key] === nextAppState[key])
+    );
+  },
+);

src/components/MobileMenu.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { AppState } from "../types";
+import { ActionManager } from "../actions/manager";
+import { t, setLanguage } from "../i18n";
+import Stack from "./Stack";
+import { LanguageList } from "./LanguageList";
+import { showSelectedShapeActions } from "../element";
+import { ExcalidrawElement } from "../element/types";
+import { FixedSideContainer } from "./FixedSideContainer";
+import { Island } from "./Island";
+import { HintViewer } from "./HintViewer";
+import { calculateScrollCenter, getTargetElement } from "../scene";
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import { Section } from "./Section";
+
+type MobileMenuProps = {
+  appState: AppState;
+  actionManager: ActionManager;
+  exportButton: React.ReactNode;
+  setAppState: any;
+  elements: readonly ExcalidrawElement[];
+  setElements: any;
+};
+
+export function MobileMenu({
+  appState,
+  elements,
+  setElements,
+  actionManager,
+  exportButton,
+  setAppState,
+}: MobileMenuProps) {
+  return (
+    <>
+      {appState.openMenu === "canvas" ? (
+        <Section className="App-mobile-menu" heading="canvasActions">
+          <div className="App-mobile-menu-scroller panelColumn">
+            <Stack.Col gap={4}>
+              {actionManager.renderAction("loadScene")}
+              {actionManager.renderAction("saveScene")}
+              {exportButton}
+              {actionManager.renderAction("clearCanvas")}
+              {actionManager.renderAction("changeViewBackgroundColor")}
+              <fieldset>
+                <legend>{t("labels.language")}</legend>
+                <LanguageList
+                  onChange={lng => {
+                    setLanguage(lng);
+                    setAppState({});
+                  }}
+                />
+              </fieldset>
+            </Stack.Col>
+          </div>
+        </Section>
+      ) : appState.openMenu === "shape" &&
+        showSelectedShapeActions(appState, elements) ? (
+        <Section className="App-mobile-menu" heading="selectedShapeActions">
+          <div className="App-mobile-menu-scroller">
+            <SelectedShapeActions
+              targetElements={getTargetElement(
+                appState.editingElement,
+                elements,
+              )}
+              renderAction={actionManager.renderAction}
+              elementType={appState.elementType}
+            />
+          </div>
+        </Section>
+      ) : null}
+      <FixedSideContainer side="top">
+        <Section heading="shapes">
+          {heading => (
+            <Stack.Col gap={4} align="center">
+              <Stack.Row gap={1}>
+                <Island padding={1}>
+                  {heading}
+                  <Stack.Row gap={1}>
+                    <ShapesSwitcher
+                      elementType={appState.elementType}
+                      setAppState={setAppState}
+                      setElements={setElements}
+                      elements={elements}
+                    />
+                  </Stack.Row>
+                </Island>
+              </Stack.Row>
+            </Stack.Col>
+          )}
+        </Section>
+        <HintViewer
+          elementType={appState.elementType}
+          multiMode={appState.multiElement !== null}
+          isResizing={appState.isResizing}
+          elements={elements}
+        />
+      </FixedSideContainer>
+      <footer className="App-toolbar">
+        <div className="App-toolbar-content">
+          {actionManager.renderAction("toggleCanvasMenu")}
+          {actionManager.renderAction("toggleEditMenu")}
+          {actionManager.renderAction("undo")}
+          {actionManager.renderAction("redo")}
+          {actionManager.renderAction("finalize")}
+          {actionManager.renderAction("deleteSelectedElements")}
+        </div>
+        {appState.scrolledOutside && (
+          <button
+            className="scroll-back-to-content"
+            onClick={() => {
+              setAppState({ ...calculateScrollCenter(elements) });
+            }}
+          >
+            {t("buttons.scrollBackToContent")}
+          </button>
+        )}
+      </footer>
+    </>
+  );
+}

src/components/Section.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { t } from "../i18n";
+
+interface SectionProps extends React.HTMLProps<HTMLElement> {
+  heading: string;
+  children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
+}
+
+export function Section({ heading, children, ...props }: SectionProps) {
+  const header = (
+    <h2 className="visually-hidden" id={`${heading}-title`}>
+      {t(`headings.${heading}`)}
+    </h2>
+  );
+  return (
+    <section {...props} aria-labelledby={`${heading}-title`}>
+      {typeof children === "function" ? (
+        children(header)
+      ) : (
+        <>
+          {header}
+          {children}
+        </>
+      )}
+    </section>
+  );
+}

src/components/TopErrorBoundary.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+
+interface TopErrorBoundaryState {
+  unresolvedError: Error[] | null;
+  hasError: boolean;
+  stack: string;
+  localStorage: string;
+}
+
+export class TopErrorBoundary extends React.Component<
+  any,
+  TopErrorBoundaryState
+> {
+  state: TopErrorBoundaryState = {
+    unresolvedError: null,
+    hasError: false,
+    stack: "",
+    localStorage: "",
+  };
+
+  componentDidCatch(error: Error) {
+    const _localStorage: any = {};
+    for (const [key, value] of Object.entries({ ...localStorage })) {
+      try {
+        _localStorage[key] = JSON.parse(value);
+      } catch {
+        _localStorage[key] = value;
+      }
+    }
+    this.setState(state => ({
+      hasError: true,
+      unresolvedError: state.unresolvedError
+        ? state.unresolvedError.concat(error)
+        : [error],
+      localStorage: JSON.stringify(_localStorage),
+    }));
+  }
+
+  async componentDidUpdate() {
+    if (this.state.unresolvedError !== null) {
+      let stack = "";
+      for (const error of this.state.unresolvedError) {
+        if (stack) {
+          stack += `\n\n================\n\n`;
+        }
+        stack += `${error.message}:\n\n`;
+        try {
+          const StackTrace = await import("stacktrace-js");
+          stack += (await StackTrace.fromError(error)).join("\n");
+        } catch (error) {
+          console.error(error);
+          stack += error.stack || "";
+        }
+      }
+
+      this.setState(state => ({
+        unresolvedError: null,
+        stack: `${
+          state.stack ? `${state.stack}\n\n================\n\n${stack}` : stack
+        }`,
+      }));
+    }
+  }
+
+  private selectTextArea(event: React.MouseEvent<HTMLTextAreaElement>) {
+    if (event.target !== document.activeElement) {
+      event.preventDefault();
+      (event.target as HTMLTextAreaElement).select();
+    }
+  }
+
+  private async createGithubIssue() {
+    let body = "";
+    try {
+      const templateStr = (await import("../bug-issue-template")).default;
+      if (typeof templateStr === "string") {
+        body = encodeURIComponent(templateStr);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    window.open(
+      `https://github.com/excalidraw/excalidraw/issues/new?body=${body}`,
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="ErrorSplash">
+          <div className="ErrorSplash-messageContainer">
+            <div className="ErrorSplash-paragraph bigger">
+              Encountered an error. Please{" "}
+              <button onClick={() => window.location.reload()}>
+                reload the page
+              </button>
+              .
+            </div>
+            <div className="ErrorSplash-paragraph">
+              If reloading doesn't work. Try{" "}
+              <button
+                onClick={() => {
+                  localStorage.clear();
+                  window.location.reload();
+                }}
+              >
+                clearing the canvas
+              </button>
+              .<br />
+              <div className="smaller">
+                (This will unfortunately result in loss of work.)
+              </div>
+            </div>
+            <div>
+              <div className="ErrorSplash-paragraph">
+                Before doing so, we'd appreciate if you opened an issue on our{" "}
+                <button onClick={this.createGithubIssue}>bug tracker</button>.
+                Please include the following error stack trace & localStorage
+                content (provided it's not private):
+              </div>
+              <div className="ErrorSplash-paragraph">
+                <div className="ErrorSplash-details">
+                  <label>Error stack trace:</label>
+                  <textarea
+                    rows={10}
+                    onPointerDown={this.selectTextArea}
+                    readOnly={true}
+                    value={
+                      this.state.unresolvedError
+                        ? "Loading data. please wait..."
+                        : this.state.stack
+                    }
+                  />
+                  <label>LocalStorage content:</label>
+                  <textarea
+                    rows={5}
+                    onPointerDown={this.selectTextArea}
+                    readOnly={true}
+                    value={this.state.localStorage}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/icons.tsx

@@ -5,14 +5,20 @@
 
 import React from "react";
 
-const createIcon = (d: string, width = 512) => (
+const ACTIVE_ELEMENT_COLOR = "#ffa94d"; // OC ORANGE 4
+
+const createIcon = (
+  d: string | React.ReactNode,
+  width = 512,
+  height = width,
+) => (
   <svg
     aria-hidden="true"
     focusable="false"
     role="img"
-    viewBox={`0 0 ${width} 512`}
+    viewBox={`0 0 ${width} ${height}`}
   >
-    <path fill="currentColor" d={d} />
+    {typeof d === "string" ? <path fill="currentColor" d={d} /> : d}
   </svg>
 );
 
@@ -23,26 +29,31 @@ export const link = createIcon(
 export const save = createIcon(
   "M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z",
   448,
+  512,
 );
 
 export const load = createIcon(
   "M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z",
   576,
+  512,
 );
 
 export const image = createIcon(
   "M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z",
   384,
+  512,
 );
 
 export const clipboard = createIcon(
   "M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z",
   384,
+  512,
 );
 
 export const trash = createIcon(
   "M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z",
   448,
+  512,
 );
 
 export const palette = createIcon(
@@ -52,16 +63,19 @@ export const palette = createIcon(
 export const exportFile = createIcon(
   "M384 121.9c0-6.3-2.5-12.4-7-16.9L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128zM571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-379 28v-32c0-8.8 7.2-16 16-16h176V160H248c-13.2 0-24-10.8-24-24V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V352H208c-8.8 0-16-7.2-16-16z",
   576,
+  512,
 );
 
 export const zoomIn = createIcon(
   "M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z",
   448,
+  512,
 );
 
 export const zoomOut = createIcon(
   "M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z",
   448,
+  512,
 );
 
 export const done = createIcon(
@@ -82,13 +96,82 @@ export const redo = createIcon(
 
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
-export const resetZoom = (
-  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 1024 1024">
+export const resetZoom = createIcon(
+  <path
+    stroke="currentColor"
+    strokeWidth="40"
+    fill="currentColor"
+    d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
+  />,
+  1024,
+);
+
+export const bringForward = createIcon(
+  <>
     <path
-      stroke="currentColor"
-      strokeWidth="40"
-      fill="currentColor"
-      d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
+      d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
+      stroke="#000"
+      strokeWidth="2"
     />
-  </svg>
+    <path
+      d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
+      fill={ACTIVE_ELEMENT_COLOR}
+      stroke={ACTIVE_ELEMENT_COLOR}
+      strokeWidth="2"
+    />
+  </>,
+  24,
+);
+
+export const sendBackward = createIcon(
+  <>
+    <path
+      d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
+      fill={ACTIVE_ELEMENT_COLOR}
+      stroke={ACTIVE_ELEMENT_COLOR}
+      strokeWidth="2"
+    />
+    <path
+      d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
+      stroke="#000"
+      strokeWidth="2"
+    />
+  </>,
+  24,
+);
+
+export const bringToFront = createIcon(
+  <>
+    <path
+      d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
+      stroke="#000"
+      strokeWidth="2"
+    />
+    <path
+      d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
+      fill={ACTIVE_ELEMENT_COLOR}
+      stroke={ACTIVE_ELEMENT_COLOR}
+      strokeWidth="2"
+    />
+  </>,
+  24,
+);
+
+export const sendToBack = createIcon(
+  <>
+    <path
+      d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
+      fill={ACTIVE_ELEMENT_COLOR}
+      stroke={ACTIVE_ELEMENT_COLOR}
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <path
+      d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
+      stroke="#000"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </>,
+  24,
 );

src/constants.ts

@@ -0,0 +1,15 @@
+export const DRAGGING_THRESHOLD = 10; // 10px
+export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
+export const ELEMENT_TRANSLATE_AMOUNT = 1;
+export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
+export const CURSOR_TYPE = {
+  TEXT: "text",
+  CROSSHAIR: "crosshair",
+  GRABBING: "grabbing",
+};
+export const POINTER_BUTTON = {
+  MAIN: 0,
+  WHEEL: 1,
+  SECONDARY: 2,
+  TOUCH: -1,
+};

src/data/blob.ts

@@ -0,0 +1,47 @@
+import { getDefaultAppState } from "../appState";
+import { DataState } from "./types";
+import { restore } from "./restore";
+
+export async function loadFromBlob(blob: any) {
+  const updateAppState = (contents: string) => {
+    const defaultAppState = getDefaultAppState();
+    let elements = [];
+    let appState = defaultAppState;
+    try {
+      const data = JSON.parse(contents);
+      if (data.type !== "excalidraw") {
+        throw new Error("Cannot load invalid json");
+      }
+      elements = data.elements || [];
+      appState = { ...defaultAppState, ...data.appState };
+    } catch {
+      // Do nothing because elements array is already empty
+    }
+    return { elements, appState };
+  };
+
+  if (blob.handle) {
+    (window as any).handle = blob.handle;
+  }
+  let contents;
+  if ("text" in Blob) {
+    contents = await blob.text();
+  } else {
+    contents = await new Promise(resolve => {
+      const reader = new FileReader();
+      reader.readAsText(blob, "utf8");
+      reader.onloadend = () => {
+        if (reader.readyState === FileReader.DONE) {
+          resolve(reader.result as string);
+        }
+      };
+    });
+  }
+  const { elements, appState } = updateAppState(contents);
+  if (!elements.length) {
+    return Promise.reject("Cannot load invalid json");
+  }
+  return new Promise<DataState>(resolve => {
+    resolve(restore(elements, appState, { scrollToContent: true }));
+  });
+}

src/data/index.ts

@@ -0,0 +1,239 @@
+import { ExcalidrawElement } from "../element/types";
+
+import { getDefaultAppState } from "../appState";
+
+import { AppState } from "../types";
+import { exportToCanvas, exportToSvg } from "../scene/export";
+import { fileSave } from "browser-nativefs";
+
+import { t } from "../i18n";
+import { copyCanvasToClipboardAsPng } from "../clipboard";
+import { serializeAsJSON } from "./json";
+
+import { ExportType } from "../scene/types";
+import { restore } from "./restore";
+import { restoreFromLocalStorage } from "./localStorage";
+
+export { loadFromBlob } from "./blob";
+export { saveAsJSON, loadFromJSON } from "./json";
+export { saveToLocalStorage } from "./localStorage";
+
+const BACKEND_GET = "https://json.excalidraw.com/api/v1/";
+
+const BACKEND_V2_POST = "https://json.excalidraw.com/api/v2/post/";
+const BACKEND_V2_GET = "https://json.excalidraw.com/api/v2/";
+
+// TODO: Defined globally, since file handles aren't yet serializable.
+// Once `FileSystemFileHandle` can be serialized, make this
+// part of `AppState`.
+(window as any).handle = null;
+
+export async function exportToBackend(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) {
+  const json = serializeAsJSON(elements, appState);
+  const encoded = new TextEncoder().encode(json);
+
+  const key = await window.crypto.subtle.generateKey(
+    {
+      name: "AES-GCM",
+      length: 128,
+    },
+    true, // extractable
+    ["encrypt", "decrypt"],
+  );
+  // The iv is set to 0. We are never going to reuse the same key so we don't
+  // need to have an iv. (I hope that's correct...)
+  const iv = new Uint8Array(12);
+  // We use symmetric encryption. AES-GCM is the recommended algorithm and
+  // includes checks that the ciphertext has not been modified by an attacker.
+  const encrypted = await window.crypto.subtle.encrypt(
+    {
+      name: "AES-GCM",
+      iv: iv,
+    },
+    key,
+    encoded,
+  );
+  // We use jwk encoding to be able to extract just the base64 encoded key.
+  // We will hardcode the rest of the attributes when importing back the key.
+  const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
+
+  try {
+    const response = await fetch(BACKEND_V2_POST, {
+      method: "POST",
+      body: encrypted,
+    });
+    const json = await response.json();
+    if (json.id) {
+      const url = new URL(window.location.href);
+      // We need to store the key (and less importantly the id) as hash instead
+      // of queryParam in order to never send it to the server
+      url.hash = `json=${json.id},${exportedKey.k!}`;
+      const urlString = url.toString();
+
+      window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
+    } else {
+      window.alert(t("alerts.couldNotCreateShareableLink"));
+    }
+  } catch (error) {
+    console.error(error);
+    window.alert(t("alerts.couldNotCreateShareableLink"));
+  }
+}
+
+export async function importFromBackend(
+  id: string | null,
+  privateKey: string | undefined,
+) {
+  let elements: readonly ExcalidrawElement[] = [];
+  let appState: AppState = getDefaultAppState();
+
+  try {
+    const response = await fetch(
+      privateKey ? `${BACKEND_V2_GET}${id}` : `${BACKEND_GET}${id}.json`,
+    );
+    if (!response.ok) {
+      window.alert(t("alerts.importBackendFailed"));
+      return restore(elements, appState, { scrollToContent: true });
+    }
+    let data;
+    if (privateKey) {
+      const buffer = await response.arrayBuffer();
+      const key = await window.crypto.subtle.importKey(
+        "jwk",
+        {
+          alg: "A128GCM",
+          ext: true,
+          k: privateKey,
+          key_ops: ["encrypt", "decrypt"],
+          kty: "oct",
+        },
+        {
+          name: "AES-GCM",
+          length: 128,
+        },
+        false, // extractable
+        ["decrypt"],
+      );
+      const iv = new Uint8Array(12);
+      const decrypted = await window.crypto.subtle.decrypt(
+        {
+          name: "AES-GCM",
+          iv: iv,
+        },
+        key,
+        buffer,
+      );
+      // We need to convert the decrypted array buffer to a string
+      const string = new window.TextDecoder("utf-8").decode(
+        new Uint8Array(decrypted) as any,
+      );
+      data = JSON.parse(string);
+    } else {
+      // Legacy format
+      data = await response.json();
+    }
+
+    elements = data.elements || elements;
+    appState = data.appState || appState;
+  } catch (error) {
+    window.alert(t("alerts.importBackendFailed"));
+    console.error(error);
+  } finally {
+    return restore(elements, appState, { scrollToContent: true });
+  }
+}
+
+export async function exportCanvas(
+  type: ExportType,
+  elements: readonly ExcalidrawElement[],
+  canvas: HTMLCanvasElement,
+  {
+    exportBackground,
+    exportPadding = 10,
+    viewBackgroundColor,
+    name,
+    scale = 1,
+  }: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    viewBackgroundColor: string;
+    name: string;
+    scale?: number;
+  },
+) {
+  if (!elements.length) {
+    return window.alert(t("alerts.cannotExportEmptyCanvas"));
+  }
+  // calculate smallest area to fit the contents in
+
+  if (type === "svg") {
+    const tempSvg = exportToSvg(elements, {
+      exportBackground,
+      viewBackgroundColor,
+      exportPadding,
+    });
+    await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
+      fileName: `${name}.svg`,
+    });
+    return;
+  }
+
+  const tempCanvas = exportToCanvas(elements, {
+    exportBackground,
+    viewBackgroundColor,
+    exportPadding,
+    scale,
+  });
+  tempCanvas.style.display = "none";
+  document.body.appendChild(tempCanvas);
+
+  if (type === "png") {
+    const fileName = `${name}.png`;
+    tempCanvas.toBlob(async (blob: any) => {
+      if (blob) {
+        await fileSave(blob, {
+          fileName: fileName,
+        });
+      }
+    });
+  } else if (type === "clipboard") {
+    try {
+      copyCanvasToClipboardAsPng(tempCanvas);
+    } catch {
+      window.alert(t("alerts.couldNotCopyToClipboard"));
+    }
+  } else if (type === "backend") {
+    const appState = getDefaultAppState();
+    if (exportBackground) {
+      appState.viewBackgroundColor = viewBackgroundColor;
+    }
+    exportToBackend(elements, appState);
+  }
+
+  // clean up the DOM
+  if (tempCanvas !== canvas) {
+    tempCanvas.remove();
+  }
+}
+
+export async function loadScene(id: string | null, privateKey?: string) {
+  let data;
+  let selectedId;
+  if (id != null) {
+    // the private key is used to decrypt the content from the server, take
+    // extra care not to leak it
+    data = await importFromBackend(id, privateKey);
+    selectedId = id;
+    window.history.replaceState({}, "Excalidraw", window.location.origin);
+  } else {
+    data = restoreFromLocalStorage();
+  }
+
+  return {
+    elements: data.elements,
+    appState: data.appState && { ...data.appState, selectedId },
+  };
+}

src/data/json.ts

@@ -0,0 +1,48 @@
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { cleanAppStateForExport } from "../appState";
+
+import { fileOpen, fileSave } from "browser-nativefs";
+import { loadFromBlob } from "./blob";
+
+export function serializeAsJSON(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+): string {
+  return JSON.stringify(
+    {
+      type: "excalidraw",
+      version: 1,
+      source: window.location.origin,
+      elements: elements.map(({ shape, canvas, isSelected, ...el }) => el),
+      appState: cleanAppStateForExport(appState),
+    },
+    null,
+    2,
+  );
+}
+
+export async function saveAsJSON(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) {
+  const serialized = serializeAsJSON(elements, appState);
+
+  const name = `${appState.name}.excalidraw`;
+  await fileSave(
+    new Blob([serialized], { type: "application/json" }),
+    {
+      fileName: name,
+      description: "Excalidraw file",
+    },
+    (window as any).handle,
+  );
+}
+export async function loadFromJSON() {
+  const blob = await fileOpen({
+    description: "Excalidraw files",
+    extensions: ["json", "excalidraw"],
+    mimeTypes: ["application/json"],
+  });
+  return loadFromBlob(blob);
+}

src/data/localStorage.ts

@@ -0,0 +1,52 @@
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { clearAppStateForLocalStorage } from "../appState";
+import { restore } from "./restore";
+
+const LOCAL_STORAGE_KEY = "excalidraw";
+const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
+
+export function saveToLocalStorage(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) {
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY,
+    JSON.stringify(
+      elements.map(
+        ({ shape, canvas, ...element }: ExcalidrawElement) => element,
+      ),
+    ),
+  );
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY_STATE,
+    JSON.stringify(clearAppStateForLocalStorage(appState)),
+  );
+}
+
+export function restoreFromLocalStorage() {
+  const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
+  const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
+
+  let elements = [];
+  if (savedElements) {
+    try {
+      elements = JSON.parse(savedElements).map(
+        ({ shape, ...element }: ExcalidrawElement) => element,
+      );
+    } catch {
+      // Do nothing because elements array is already empty
+    }
+  }
+
+  let appState = null;
+  if (savedState) {
+    try {
+      appState = JSON.parse(savedState) as AppState;
+    } catch {
+      // Do nothing because appState is already null
+    }
+  }
+
+  return restore(elements, appState);
+}

src/data/restore.ts

@@ -0,0 +1,75 @@
+import { Point } from "roughjs/bin/geometry";
+
+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";
+
+export function restore(
+  savedElements: readonly ExcalidrawElement[],
+  savedState: AppState | null,
+  opts?: { scrollToContent: boolean },
+): DataState {
+  const elements = savedElements
+    .filter(el => !isInvisiblySmallElement(el))
+    .map(element => {
+      let points: Point[] = [];
+      if (element.type === "arrow") {
+        if (Array.isArray(element.points)) {
+          // if point array is empty, add one point to the arrow
+          // this is used as fail safe to convert incoming data to a valid
+          // arrow. In the new arrow, width and height are not being usde
+          points = element.points.length > 0 ? element.points : [[0, 0]];
+        } else {
+          // convert old arrow type to a new one
+          // old arrow spec used width and height
+          // to determine the endpoints
+          points = [
+            [0, 0],
+            [element.width, element.height],
+          ];
+        }
+      } else if (element.type === "line") {
+        // old spec, pre-arrows
+        // old spec, post-arrows
+        if (!Array.isArray(element.points) || element.points.length === 0) {
+          points = [
+            [0, 0],
+            [element.width, element.height],
+          ];
+        } else {
+          points = element.points;
+        }
+      } else {
+        normalizeDimensions(element);
+      }
+
+      return {
+        ...element,
+        id: element.id || nanoid(),
+        fillStyle: element.fillStyle || "hachure",
+        strokeWidth: element.strokeWidth || 1,
+        roughness: element.roughness || 1,
+        opacity:
+          element.opacity === null || element.opacity === undefined
+            ? 100
+            : element.opacity,
+        points,
+        shape: null,
+        canvas: null,
+        canvasOffsetX: element.canvasOffsetX || 0,
+        canvasOffsetY: element.canvasOffsetY || 0,
+      };
+    });
+
+  if (opts?.scrollToContent && savedState) {
+    savedState = { ...savedState, ...calculateScrollCenter(elements) };
+  }
+
+  return {
+    elements: elements,
+    appState: savedState,
+  };
+}

src/data/types.ts

@@ -0,0 +1,11 @@
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+
+export interface DataState {
+  type?: string;
+  version?: string;
+  source?: string;
+  elements: readonly ExcalidrawElement[];
+  appState: AppState | null;
+  selectedId?: number;
+}

src/element/collision.ts

@@ -164,7 +164,7 @@ export function hitTest(
     const relY = y - element.y;
 
     // hit thest all "subshapes" of the linear element
-    return shape.some(s => hitTestRoughShape(s.sets, relX, relY));
+    return shape.some(subshape => hitTestRoughShape(subshape.sets, relX, relY));
   } else if (element.type === "text") {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
 

src/element/newElement.ts

@@ -81,13 +81,13 @@ function _duplicateElement(val: any, depth: number = 0) {
       typeof val.constructor === "function"
         ? Object.create(Object.getPrototypeOf(val))
         : {};
-    for (const k in val) {
-      if (val.hasOwnProperty(k)) {
+    for (const key in val) {
+      if (val.hasOwnProperty(key)) {
         // don't copy top-level shape property, which we want to regenerate
-        if (depth === 0 && (k === "shape" || k === "canvas")) {
+        if (depth === 0 && (key === "shape" || key === "canvas")) {
           continue;
         }
-        tmp[k] = _duplicateElement(val[k], depth + 1);
+        tmp[key] = _duplicateElement(val[key], depth + 1);
       }
     }
     return tmp;

src/gesture.ts

@@ -1,5 +1,5 @@
 import { Pointer } from "./types";
-import { normalizeScroll } from "./scene/data";
+import { normalizeScroll } from "./scene";
 
 export function getCenter(pointers: readonly Pointer[]) {
   return {

src/index.tsx

@@ -1,147 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
-
-import rough from "roughjs/bin/rough";
-import { RoughCanvas } from "roughjs/bin/canvas";
-
-import {
-  newElement,
-  newTextElement,
-  duplicateElement,
-  resizeTest,
-  normalizeResizeHandle,
-  isInvisiblySmallElement,
-  isTextElement,
-  textWysiwyg,
-  getCommonBounds,
-  getCursorForResizingElement,
-  getPerfectElementSize,
-  normalizeDimensions,
-  showSelectedShapeActions,
-} from "./element";
-import {
-  clearSelection,
-  deleteSelectedElements,
-  getElementsWithinSelection,
-  isOverScrollBars,
-  saveToLocalStorage,
-  getElementAtPosition,
-  createScene,
-  getElementContainingPosition,
-  hasBackground,
-  hasStroke,
-  hasText,
-  exportCanvas,
-  loadScene,
-  calculateScrollCenter,
-  loadFromBlob,
-  getZoomOrigin,
-  getNormalizedZoom,
-  getSelectedElements,
-  isSomeElementSelected,
-} from "./scene";
-
-import { renderScene } from "./renderer";
-import { AppState, FlooredNumber, Gesture, GestureEvent } from "./types";
-import { ExcalidrawElement } from "./element/types";
-
-import {
-  isWritableElement,
-  isInputLike,
-  isToolIcon,
-  debounce,
-  capitalizeString,
-  distance,
-  distance2d,
-  resetCursor,
-} from "./utils";
-import { KEYS, isArrowKey } from "./keys";
-
-import { findShapeByKey, shapesShortcutKeys, SHAPES } from "./shapes";
-import { createHistory } from "./history";
-
-import ContextMenu from "./components/ContextMenu";
-
+import { TopErrorBoundary } from "./components/TopErrorBoundary";
+import { IsMobileProvider } from "./is-mobile";
+import { App } from "./components/App";
 import "./styles.scss";
-import { getElementWithResizeHandler } from "./element/resizeTest";
-import {
-  ActionManager,
-  actionDeleteSelected,
-  actionSendBackward,
-  actionBringForward,
-  actionSendToBack,
-  actionBringToFront,
-  actionSelectAll,
-  actionChangeStrokeColor,
-  actionChangeBackgroundColor,
-  actionChangeOpacity,
-  actionChangeStrokeWidth,
-  actionChangeFillStyle,
-  actionChangeSloppiness,
-  actionChangeFontSize,
-  actionChangeFontFamily,
-  actionChangeViewBackgroundColor,
-  actionClearCanvas,
-  actionZoomIn,
-  actionZoomOut,
-  actionResetZoom,
-  actionChangeProjectName,
-  actionChangeExportBackground,
-  actionLoadScene,
-  actionSaveScene,
-  actionCopyStyles,
-  actionPasteStyles,
-  actionFinalize,
-  actionToggleCanvasMenu,
-  actionToggleEditMenu,
-} from "./actions";
-import { Action, ActionResult } from "./actions/types";
-import { getDefaultAppState } from "./appState";
-import { Island } from "./components/Island";
-import Stack from "./components/Stack";
-import { FixedSideContainer } from "./components/FixedSideContainer";
-import { ToolButton } from "./components/ToolButton";
-import { LockIcon } from "./components/LockIcon";
-import { ExportDialog } from "./components/ExportDialog";
-import { LanguageList } from "./components/LanguageList";
-import { Point } from "roughjs/bin/geometry";
-import { t, languages, setLanguage, getLanguage } from "./i18n";
-import { HintViewer } from "./components/HintViewer";
-import useIsMobile, { IsMobileProvider } from "./is-mobile";
-
-import { copyToAppClipboard, getClipboardContent } from "./clipboard";
-import { normalizeScroll } from "./scene/data";
-import { getCenter, getDistance } from "./gesture";
-import { ScrollBars } from "./scene/types";
-import { createUndoAction, createRedoAction } from "./actions/actionHistory";
-
-let { elements } = createScene();
-const { history } = createHistory();
-
-function setCursorForShape(shape: string) {
-  if (shape === "selection") {
-    resetCursor();
-  } else {
-    document.documentElement.style.cursor =
-      shape === "text" ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR;
-  }
-}
-
-const DRAGGING_THRESHOLD = 10; // 10px
-const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
-const ELEMENT_TRANSLATE_AMOUNT = 1;
-const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
-const CURSOR_TYPE = {
-  TEXT: "text",
-  CROSSHAIR: "crosshair",
-  GRABBING: "grabbing",
-};
-const POINTER_BUTTON = {
-  MAIN: 0,
-  WHEEL: 1,
-  SECONDARY: 2,
-  TOUCH: -1,
-};
 
 // Block pinch-zooming on iOS outside of the content area
 document.addEventListener(
@@ -155,2373 +17,8 @@ document.addEventListener(
   { passive: false },
 );
 
-let lastPointerUp: ((event: any) => void) | null = null;
-const gesture: Gesture = {
-  pointers: [],
-  lastCenter: null,
-  initialDistance: null,
-  initialScale: null,
-};
-
-export function viewportCoordsToSceneCoords(
-  { clientX, clientY }: { clientX: number; clientY: number },
-  {
-    scrollX,
-    scrollY,
-    zoom,
-  }: {
-    scrollX: FlooredNumber;
-    scrollY: FlooredNumber;
-    zoom: number;
-  },
-  canvas: HTMLCanvasElement | null,
-) {
-  const zoomOrigin = getZoomOrigin(canvas);
-  const clientXWithZoom = zoomOrigin.x + (clientX - zoomOrigin.x) / zoom;
-  const clientYWithZoom = zoomOrigin.y + (clientY - zoomOrigin.y) / zoom;
-
-  const x = clientXWithZoom - scrollX;
-  const y = clientYWithZoom - scrollY;
-
-  return { x, y };
-}
-
-export function sceneCoordsToViewportCoords(
-  { sceneX, sceneY }: { sceneX: number; sceneY: number },
-  {
-    scrollX,
-    scrollY,
-    zoom,
-  }: {
-    scrollX: FlooredNumber;
-    scrollY: FlooredNumber;
-    zoom: number;
-  },
-  canvas: HTMLCanvasElement | null,
-) {
-  const zoomOrigin = getZoomOrigin(canvas);
-  const sceneXWithZoomAndScroll =
-    zoomOrigin.x - (zoomOrigin.x - sceneX - scrollX) * zoom;
-  const sceneYWithZoomAndScroll =
-    zoomOrigin.y - (zoomOrigin.y - sceneY - scrollY) * zoom;
-
-  const x = sceneXWithZoomAndScroll;
-  const y = sceneYWithZoomAndScroll;
-
-  return { x, y };
-}
-
-let cursorX = 0;
-let cursorY = 0;
-let isHoldingSpace: boolean = false;
-let isPanning: boolean = false;
-let isDraggingScrollBar: boolean = false;
-let currentScrollBars: ScrollBars = { horizontal: null, vertical: null };
-
-interface LayerUIProps {
-  actionManager: ActionManager;
-  appState: AppState;
-  canvas: HTMLCanvasElement | null;
-  setAppState: any;
-  elements: readonly ExcalidrawElement[];
-  language: string;
-  setElements: (elements: readonly ExcalidrawElement[]) => void;
-}
-
-const LayerUI = React.memo(
-  ({
-    actionManager,
-    appState,
-    setAppState,
-    canvas,
-    elements,
-    language,
-    setElements,
-  }: LayerUIProps) => {
-    const isMobile = useIsMobile();
-
-    function renderExportDialog() {
-      return (
-        <ExportDialog
-          elements={elements}
-          appState={appState}
-          actionManager={actionManager}
-          onExportToPng={(exportedElements, scale) => {
-            if (canvas) {
-              exportCanvas("png", exportedElements, canvas, {
-                exportBackground: appState.exportBackground,
-                name: appState.name,
-                viewBackgroundColor: appState.viewBackgroundColor,
-                scale,
-              });
-            }
-          }}
-          onExportToSvg={(exportedElements, scale) => {
-            if (canvas) {
-              exportCanvas("svg", exportedElements, canvas, {
-                exportBackground: appState.exportBackground,
-                name: appState.name,
-                viewBackgroundColor: appState.viewBackgroundColor,
-                scale,
-              });
-            }
-          }}
-          onExportToClipboard={(exportedElements, scale) => {
-            if (canvas) {
-              exportCanvas("clipboard", exportedElements, canvas, {
-                exportBackground: appState.exportBackground,
-                name: appState.name,
-                viewBackgroundColor: appState.viewBackgroundColor,
-                scale,
-              });
-            }
-          }}
-          onExportToBackend={exportedElements => {
-            if (canvas) {
-              exportCanvas(
-                "backend",
-                exportedElements.map(element => ({
-                  ...element,
-                  isSelected: false,
-                })),
-                canvas,
-                appState,
-              );
-            }
-          }}
-        />
-      );
-    }
-
-    function renderSelectedShapeActions() {
-      const { elementType, editingElement } = appState;
-      const targetElements = editingElement
-        ? [editingElement]
-        : getSelectedElements(elements);
-      return (
-        <div className="panelColumn">
-          {actionManager.renderAction("changeStrokeColor")}
-          {(hasBackground(elementType) ||
-            targetElements.some(element => hasBackground(element.type))) && (
-            <>
-              {actionManager.renderAction("changeBackgroundColor")}
-
-              {actionManager.renderAction("changeFillStyle")}
-            </>
-          )}
-
-          {(hasStroke(elementType) ||
-            targetElements.some(element => hasStroke(element.type))) && (
-            <>
-              {actionManager.renderAction("changeStrokeWidth")}
-
-              {actionManager.renderAction("changeSloppiness")}
-            </>
-          )}
-
-          {(hasText(elementType) ||
-            targetElements.some(element => hasText(element.type))) && (
-            <>
-              {actionManager.renderAction("changeFontSize")}
-
-              {actionManager.renderAction("changeFontFamily")}
-            </>
-          )}
-
-          {actionManager.renderAction("changeOpacity")}
-
-          <fieldset>
-            <legend>{t("labels.layers")}</legend>
-            <div className="buttonList">
-              {actionManager.renderAction("sendToBack")}
-              {actionManager.renderAction("sendBackward")}
-              {actionManager.renderAction("bringToFront")}
-              {actionManager.renderAction("bringForward")}
-            </div>
-          </fieldset>
-        </div>
-      );
-    }
-
-    function renderShapesSwitcher() {
-      return (
-        <>
-          {SHAPES.map(({ value, icon }, index) => {
-            const label = t(`toolBar.${value}`);
-            return (
-              <ToolButton
-                key={value}
-                type="radio"
-                icon={icon}
-                checked={appState.elementType === value}
-                name="editor-current-shape"
-                title={`${capitalizeString(label)} — ${
-                  capitalizeString(value)[0]
-                }, ${index + 1}`}
-                keyBindingLabel={`${index + 1}`}
-                aria-label={capitalizeString(label)}
-                aria-keyshortcuts={`${label[0]} ${index + 1}`}
-                onChange={() => {
-                  setAppState({ elementType: value, multiElement: null });
-                  setElements(clearSelection(elements));
-                  document.documentElement.style.cursor =
-                    value === "text" ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR;
-                  setAppState({});
-                }}
-              ></ToolButton>
-            );
-          })}
-        </>
-      );
-    }
-
-    function renderZoomActions() {
-      return (
-        <Stack.Col gap={1}>
-          <Stack.Row gap={1} align="center">
-            {actionManager.renderAction(actionZoomIn.name)}
-            {actionManager.renderAction(actionZoomOut.name)}
-            {actionManager.renderAction(actionResetZoom.name)}
-            <div style={{ marginLeft: 4 }}>
-              {(appState.zoom * 100).toFixed(0)}%
-            </div>
-          </Stack.Row>
-        </Stack.Col>
-      );
-    }
-
-    return isMobile ? (
-      <>
-        {appState.openMenu === "canvas" ? (
-          <section
-            className="App-mobile-menu"
-            aria-labelledby="canvas-actions-title"
-          >
-            <h2 className="visually-hidden" id="canvas-actions-title">
-              {t("headings.canvasActions")}
-            </h2>
-            <div className="App-mobile-menu-scroller panelColumn">
-              <Stack.Col gap={4}>
-                {actionManager.renderAction("loadScene")}
-                {actionManager.renderAction("saveScene")}
-                {renderExportDialog()}
-                {actionManager.renderAction("clearCanvas")}
-                {actionManager.renderAction("changeViewBackgroundColor")}
-                <fieldset>
-                  <legend>{t("labels.language")}</legend>
-                  <LanguageList
-                    onChange={lng => {
-                      setLanguage(lng);
-                      setAppState({});
-                    }}
-                    languages={languages}
-                    currentLanguage={language}
-                  />
-                </fieldset>
-              </Stack.Col>
-            </div>
-          </section>
-        ) : appState.openMenu === "shape" &&
-          showSelectedShapeActions(appState, elements) ? (
-          <section
-            className="App-mobile-menu"
-            aria-labelledby="selected-shape-title"
-          >
-            <h2 className="visually-hidden" id="selected-shape-title">
-              {t("headings.selectedShapeActions")}
-            </h2>
-            <div className="App-mobile-menu-scroller">
-              {renderSelectedShapeActions()}
-            </div>
-          </section>
-        ) : null}
-        <FixedSideContainer side="top">
-          <section aria-labelledby="shapes-title">
-            <Stack.Col gap={4} align="center">
-              <Stack.Row gap={1}>
-                <Island padding={1}>
-                  <h2 className="visually-hidden" id="shapes-title">
-                    {t("headings.shapes")}
-                  </h2>
-                  <Stack.Row gap={1}>{renderShapesSwitcher()}</Stack.Row>
-                </Island>
-              </Stack.Row>
-            </Stack.Col>
-          </section>
-          <HintViewer
-            elementType={appState.elementType}
-            multiMode={appState.multiElement !== null}
-            isResizing={appState.isResizing}
-            elements={elements}
-          />
-        </FixedSideContainer>
-        <footer className="App-toolbar">
-          <div className="App-toolbar-content">
-            {actionManager.renderAction("toggleCanvasMenu")}
-            {actionManager.renderAction("toggleEditMenu")}
-            {actionManager.renderAction("undo")}
-            {actionManager.renderAction("redo")}
-            {actionManager.renderAction("finalize")}
-            {actionManager.renderAction("deleteSelectedElements")}
-          </div>
-          {appState.scrolledOutside && (
-            <button
-              className="scroll-back-to-content"
-              onClick={() => {
-                setAppState({ ...calculateScrollCenter(elements) });
-              }}
-            >
-              {t("buttons.scrollBackToContent")}
-            </button>
-          )}
-        </footer>
-      </>
-    ) : (
-      <>
-        <FixedSideContainer side="top">
-          <HintViewer
-            elementType={appState.elementType}
-            multiMode={appState.multiElement !== null}
-            isResizing={appState.isResizing}
-            elements={elements}
-          />
-          <div className="App-menu App-menu_top">
-            <Stack.Col gap={4} align="end">
-              <section
-                className="App-right-menu"
-                aria-labelledby="canvas-actions-title"
-              >
-                <h2 className="visually-hidden" id="canvas-actions-title">
-                  {t("headings.canvasActions")}
-                </h2>
-                <Island padding={4}>
-                  <Stack.Col gap={4}>
-                    <Stack.Row justifyContent={"space-between"}>
-                      {actionManager.renderAction("loadScene")}
-                      {actionManager.renderAction("saveScene")}
-                      {renderExportDialog()}
-                      {actionManager.renderAction("clearCanvas")}
-                    </Stack.Row>
-                    {actionManager.renderAction("changeViewBackgroundColor")}
-                  </Stack.Col>
-                </Island>
-              </section>
-              {showSelectedShapeActions(appState, elements) && (
-                <section
-                  className="App-right-menu"
-                  aria-labelledby="selected-shape-title"
-                >
-                  <h2 className="visually-hidden" id="selected-shape-title">
-                    {t("headings.selectedShapeActions")}
-                  </h2>
-                  <Island padding={4}>{renderSelectedShapeActions()}</Island>
-                </section>
-              )}
-            </Stack.Col>
-            <section aria-labelledby="shapes-title">
-              <Stack.Col gap={4} align="start">
-                <Stack.Row gap={1}>
-                  <Island padding={1}>
-                    <h2 className="visually-hidden" id="shapes-title">
-                      {t("headings.shapes")}
-                    </h2>
-                    <Stack.Row gap={1}>{renderShapesSwitcher()}</Stack.Row>
-                  </Island>
-                  <LockIcon
-                    checked={appState.elementLocked}
-                    onChange={() => {
-                      setAppState({
-                        elementLocked: !appState.elementLocked,
-                        elementType: appState.elementLocked
-                          ? "selection"
-                          : appState.elementType,
-                      });
-                    }}
-                    title={t("toolBar.lock")}
-                    isButton={isMobile}
-                  />
-                </Stack.Row>
-              </Stack.Col>
-            </section>
-            <div />
-          </div>
-          <div className="App-menu App-menu_bottom">
-            <Stack.Col gap={2}>
-              <section aria-labelledby="canvas-zoom-actions-title">
-                <h2 className="visually-hidden" id="canvas-zoom-actions-title">
-                  {t("headings.canvasActions")}
-                </h2>
-                <Island padding={1}>{renderZoomActions()}</Island>
-              </section>
-            </Stack.Col>
-          </div>
-        </FixedSideContainer>
-        <footer role="contentinfo">
-          <LanguageList
-            onChange={lng => {
-              setLanguage(lng);
-              setAppState({});
-            }}
-            languages={languages}
-            currentLanguage={language}
-            floating
-          />
-          {appState.scrolledOutside && (
-            <button
-              className="scroll-back-to-content"
-              onClick={() => {
-                setAppState({ ...calculateScrollCenter(elements) });
-              }}
-            >
-              {t("buttons.scrollBackToContent")}
-            </button>
-          )}
-        </footer>
-      </>
-    );
-  },
-  (prev, next) => {
-    const getNecessaryObj = (appState: AppState): Partial<AppState> => {
-      const {
-        draggingElement,
-        resizingElement,
-        multiElement,
-        editingElement,
-        isResizing,
-        cursorX,
-        cursorY,
-        ...ret
-      } = appState;
-      return ret;
-    };
-    const prevAppState = getNecessaryObj(prev.appState);
-    const nextAppState = getNecessaryObj(next.appState);
-
-    const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
-
-    return (
-      prev.language === next.language &&
-      prev.elements === next.elements &&
-      keys.every(k => prevAppState[k] === nextAppState[k])
-    );
-  },
-);
-
-export class App extends React.Component<any, AppState> {
-  canvas: HTMLCanvasElement | null = null;
-  rc: RoughCanvas | null = null;
-
-  actionManager: ActionManager;
-  canvasOnlyActions: Array<Action>;
-  constructor(props: any) {
-    super(props);
-    this.actionManager = new ActionManager(
-      this.syncActionResult,
-      () => this.state,
-      () => elements,
-    );
-    this.actionManager.registerAction(actionFinalize);
-    this.actionManager.registerAction(actionDeleteSelected);
-    this.actionManager.registerAction(actionSendToBack);
-    this.actionManager.registerAction(actionBringToFront);
-    this.actionManager.registerAction(actionSendBackward);
-    this.actionManager.registerAction(actionBringForward);
-    this.actionManager.registerAction(actionSelectAll);
-
-    this.actionManager.registerAction(actionChangeStrokeColor);
-    this.actionManager.registerAction(actionChangeBackgroundColor);
-    this.actionManager.registerAction(actionChangeFillStyle);
-    this.actionManager.registerAction(actionChangeStrokeWidth);
-    this.actionManager.registerAction(actionChangeOpacity);
-    this.actionManager.registerAction(actionChangeSloppiness);
-    this.actionManager.registerAction(actionChangeFontSize);
-    this.actionManager.registerAction(actionChangeFontFamily);
-
-    this.actionManager.registerAction(actionChangeViewBackgroundColor);
-    this.actionManager.registerAction(actionClearCanvas);
-    this.actionManager.registerAction(actionZoomIn);
-    this.actionManager.registerAction(actionZoomOut);
-    this.actionManager.registerAction(actionResetZoom);
-
-    this.actionManager.registerAction(actionChangeProjectName);
-    this.actionManager.registerAction(actionChangeExportBackground);
-    this.actionManager.registerAction(actionSaveScene);
-    this.actionManager.registerAction(actionLoadScene);
-
-    this.actionManager.registerAction(actionCopyStyles);
-    this.actionManager.registerAction(actionPasteStyles);
-
-    this.actionManager.registerAction(actionToggleCanvasMenu);
-    this.actionManager.registerAction(actionToggleEditMenu);
-
-    this.actionManager.registerAction(createUndoAction(history));
-    this.actionManager.registerAction(createRedoAction(history));
-
-    this.canvasOnlyActions = [actionSelectAll];
-  }
-
-  private syncActionResult = (
-    res: ActionResult,
-    commitToHistory: boolean = true,
-  ) => {
-    if (this.unmounted) {
-      return;
-    }
-    if (res.elements) {
-      elements = res.elements;
-      if (commitToHistory) {
-        history.resumeRecording();
-      }
-      this.setState({});
-    }
-
-    if (res.appState) {
-      if (commitToHistory) {
-        history.resumeRecording();
-      }
-      this.setState({ ...res.appState });
-    }
-  };
-
-  private onCut = (event: ClipboardEvent) => {
-    if (isWritableElement(event.target)) {
-      return;
-    }
-    copyToAppClipboard(elements);
-    elements = deleteSelectedElements(elements);
-    history.resumeRecording();
-    this.setState({});
-    event.preventDefault();
-  };
-  private onCopy = (event: ClipboardEvent) => {
-    if (isWritableElement(event.target)) {
-      return;
-    }
-    copyToAppClipboard(elements);
-    event.preventDefault();
-  };
-
-  private onUnload = () => {
-    isHoldingSpace = false;
-    this.saveDebounced();
-    this.saveDebounced.flush();
-  };
-
-  private disableEvent: EventHandlerNonNull = event => {
-    event.preventDefault();
-  };
-
-  private unmounted = false;
-  public async componentDidMount() {
-    document.addEventListener("copy", this.onCopy);
-    document.addEventListener("paste", this.pasteFromClipboard);
-    document.addEventListener("cut", this.onCut);
-
-    document.addEventListener("keydown", this.onKeyDown, false);
-    document.addEventListener("keyup", this.onKeyUp, { passive: true });
-    document.addEventListener("mousemove", this.updateCurrentCursorPosition);
-    window.addEventListener("resize", this.onResize, false);
-    window.addEventListener("unload", this.onUnload, false);
-    window.addEventListener("blur", this.onUnload, false);
-    window.addEventListener("dragover", this.disableEvent, false);
-    window.addEventListener("drop", this.disableEvent, false);
-
-    // Safari-only desktop pinch zoom
-    document.addEventListener(
-      "gesturestart",
-      this.onGestureStart as any,
-      false,
-    );
-    document.addEventListener(
-      "gesturechange",
-      this.onGestureChange as any,
-      false,
-    );
-    document.addEventListener("gestureend", this.onGestureEnd as any, false);
-
-    const searchParams = new URLSearchParams(window.location.search);
-    const id = searchParams.get("id");
-
-    if (id) {
-      // Backwards compatibility with legacy url format
-      const scene = await loadScene(id);
-      this.syncActionResult(scene);
-    } else {
-      const match = window.location.hash.match(
-        /^#json=([0-9]+),([a-zA-Z0-9_-]+)$/,
-      );
-      if (match) {
-        const scene = await loadScene(match[1], match[2]);
-        this.syncActionResult(scene);
-      } else {
-        const scene = await loadScene(null);
-        this.syncActionResult(scene);
-      }
-    }
-  }
-
-  public componentWillUnmount() {
-    this.unmounted = true;
-    document.removeEventListener("copy", this.onCopy);
-    document.removeEventListener("paste", this.pasteFromClipboard);
-    document.removeEventListener("cut", this.onCut);
-
-    document.removeEventListener("keydown", this.onKeyDown, false);
-    document.removeEventListener(
-      "mousemove",
-      this.updateCurrentCursorPosition,
-      false,
-    );
-    document.removeEventListener("keyup", this.onKeyUp);
-    window.removeEventListener("resize", this.onResize, false);
-    window.removeEventListener("unload", this.onUnload, false);
-    window.removeEventListener("blur", this.onUnload, false);
-    window.removeEventListener("dragover", this.disableEvent, false);
-    window.removeEventListener("drop", this.disableEvent, false);
-
-    document.removeEventListener(
-      "gesturestart",
-      this.onGestureStart as any,
-      false,
-    );
-    document.removeEventListener(
-      "gesturechange",
-      this.onGestureChange as any,
-      false,
-    );
-    document.removeEventListener("gestureend", this.onGestureEnd as any, false);
-  }
-
-  public state: AppState = getDefaultAppState();
-
-  private onResize = () => {
-    elements = elements.map(el => ({ ...el, shape: null }));
-    this.setState({});
-  };
-
-  private updateCurrentCursorPosition = (event: MouseEvent) => {
-    cursorX = event.x;
-    cursorY = event.y;
-  };
-
-  private onKeyDown = (event: KeyboardEvent) => {
-    if (
-      (isWritableElement(event.target) && event.key !== KEYS.ESCAPE) ||
-      // case: using arrows to move between buttons
-      (isArrowKey(event.key) && isInputLike(event.target))
-    ) {
-      return;
-    }
-
-    if (this.actionManager.handleKeyDown(event)) {
-      return;
-    }
-
-    const shape = findShapeByKey(event.key);
-
-    if (isArrowKey(event.key)) {
-      const step = event.shiftKey
-        ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
-        : ELEMENT_TRANSLATE_AMOUNT;
-      elements = elements.map(el => {
-        if (el.isSelected) {
-          const element = { ...el };
-          if (event.key === KEYS.ARROW_LEFT) {
-            element.x -= step;
-          } else if (event.key === KEYS.ARROW_RIGHT) {
-            element.x += step;
-          } else if (event.key === KEYS.ARROW_UP) {
-            element.y -= step;
-          } else if (event.key === KEYS.ARROW_DOWN) {
-            element.y += step;
-          }
-          return element;
-        }
-        return el;
-      });
-      this.setState({});
-      event.preventDefault();
-    } else if (
-      shapesShortcutKeys.includes(event.key.toLowerCase()) &&
-      !event.ctrlKey &&
-      !event.altKey &&
-      !event.metaKey &&
-      this.state.draggingElement === null
-    ) {
-      this.selectShapeTool(shape);
-    } else if (event.key === KEYS.SPACE && gesture.pointers.length === 0) {
-      isHoldingSpace = true;
-      document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
-    }
-  };
-
-  private onKeyUp = (event: KeyboardEvent) => {
-    if (event.key === KEYS.SPACE) {
-      if (this.state.elementType === "selection") {
-        resetCursor();
-      } else {
-        elements = clearSelection(elements);
-        document.documentElement.style.cursor =
-          this.state.elementType === "text"
-            ? CURSOR_TYPE.TEXT
-            : CURSOR_TYPE.CROSSHAIR;
-        this.setState({});
-      }
-      isHoldingSpace = false;
-    }
-  };
-
-  private copyToAppClipboard = () => {
-    copyToAppClipboard(elements);
-  };
-
-  private pasteFromClipboard = async (event: ClipboardEvent | null) => {
-    // #686
-    const target = document.activeElement;
-    const elementUnderCursor = document.elementFromPoint(cursorX, cursorY);
-    if (
-      // if no ClipboardEvent supplied, assume we're pasting via contextMenu
-      //  thus these checks don't make sense
-      !event ||
-      (elementUnderCursor instanceof HTMLCanvasElement &&
-        !isWritableElement(target))
-    ) {
-      const data = await getClipboardContent(event);
-      if (data.elements) {
-        this.addElementsFromPaste(data.elements);
-      } else if (data.text) {
-        const { x, y } = viewportCoordsToSceneCoords(
-          { clientX: cursorX, clientY: cursorY },
-          this.state,
-          this.canvas,
-        );
-
-        const element = newTextElement(
-          newElement(
-            "text",
-            x,
-            y,
-            this.state.currentItemStrokeColor,
-            this.state.currentItemBackgroundColor,
-            this.state.currentItemFillStyle,
-            this.state.currentItemStrokeWidth,
-            this.state.currentItemRoughness,
-            this.state.currentItemOpacity,
-          ),
-          data.text,
-          this.state.currentItemFont,
-        );
-
-        element.isSelected = true;
-
-        elements = [...clearSelection(elements), element];
-        history.resumeRecording();
-      }
-      this.selectShapeTool("selection");
-      event?.preventDefault();
-    }
-  };
-
-  private selectShapeTool(elementType: AppState["elementType"]) {
-    if (!isHoldingSpace) {
-      setCursorForShape(elementType);
-    }
-    if (isToolIcon(document.activeElement)) {
-      document.activeElement.blur();
-    }
-    if (elementType !== "selection") {
-      elements = clearSelection(elements);
-    }
-    this.setState({ elementType });
-  }
-
-  private onGestureStart = (event: GestureEvent) => {
-    event.preventDefault();
-    gesture.initialScale = this.state.zoom;
-  };
-  private onGestureChange = (event: GestureEvent) => {
-    event.preventDefault();
-
-    this.setState({
-      zoom: getNormalizedZoom(gesture.initialScale! * event.scale),
-    });
-  };
-  private onGestureEnd = (event: GestureEvent) => {
-    event.preventDefault();
-    gesture.initialScale = null;
-  };
-
-  setAppState = (obj: any) => {
-    this.setState(obj);
-  };
-
-  setElements = (elements_: readonly ExcalidrawElement[]) => {
-    elements = elements_;
-    this.setState({});
-  };
-
-  removePointer = (event: React.PointerEvent<HTMLElement>) => {
-    gesture.pointers = gesture.pointers.filter(
-      pointer => pointer.id !== event.pointerId,
-    );
-  };
-
-  public render() {
-    const canvasDOMWidth = window.innerWidth;
-    const canvasDOMHeight = window.innerHeight;
-
-    const canvasScale = window.devicePixelRatio;
-
-    const canvasWidth = canvasDOMWidth * canvasScale;
-    const canvasHeight = canvasDOMHeight * canvasScale;
-
-    return (
-      <div className="container">
-        <LayerUI
-          canvas={this.canvas}
-          appState={this.state}
-          setAppState={this.setAppState}
-          actionManager={this.actionManager}
-          elements={elements}
-          setElements={this.setElements}
-          language={getLanguage()}
-        />
-        <main>
-          <canvas
-            id="canvas"
-            style={{
-              width: canvasDOMWidth,
-              height: canvasDOMHeight,
-            }}
-            width={canvasWidth}
-            height={canvasHeight}
-            ref={canvas => {
-              // canvas is null when unmounting
-              if (canvas !== null) {
-                this.canvas = canvas;
-                this.rc = rough.canvas(this.canvas);
-
-                this.canvas.addEventListener("wheel", this.handleWheel, {
-                  passive: false,
-                });
-
-                this.canvas
-                  .getContext("2d")
-                  ?.setTransform(canvasScale, 0, 0, canvasScale, 0, 0);
-              } else {
-                this.canvas?.removeEventListener("wheel", this.handleWheel);
-              }
-            }}
-            onContextMenu={event => {
-              event.preventDefault();
-
-              const { x, y } = viewportCoordsToSceneCoords(
-                event,
-                this.state,
-                this.canvas,
-              );
-
-              const element = getElementAtPosition(
-                elements,
-                x,
-                y,
-                this.state.zoom,
-              );
-              if (!element) {
-                ContextMenu.push({
-                  options: [
-                    navigator.clipboard && {
-                      label: t("labels.paste"),
-                      action: () => this.pasteFromClipboard(null),
-                    },
-                    ...this.actionManager.getContextMenuItems(action =>
-                      this.canvasOnlyActions.includes(action),
-                    ),
-                  ],
-                  top: event.clientY,
-                  left: event.clientX,
-                });
-                return;
-              }
-
-              if (!element.isSelected) {
-                elements = clearSelection(elements);
-                element.isSelected = true;
-                this.setState({});
-              }
-
-              ContextMenu.push({
-                options: [
-                  navigator.clipboard && {
-                    label: t("labels.copy"),
-                    action: this.copyToAppClipboard,
-                  },
-                  navigator.clipboard && {
-                    label: t("labels.paste"),
-                    action: () => this.pasteFromClipboard(null),
-                  },
-                  ...this.actionManager.getContextMenuItems(
-                    action => !this.canvasOnlyActions.includes(action),
-                  ),
-                ],
-                top: event.clientY,
-                left: event.clientX,
-              });
-            }}
-            onPointerDown={event => {
-              if (lastPointerUp !== null) {
-                // Unfortunately, sometimes we don't get a pointerup after a pointerdown,
-                // this can happen when a contextual menu or alert is triggered. In order to avoid
-                // being in a weird state, we clean up on the next pointerdown
-                lastPointerUp(event);
-              }
-
-              if (isPanning) {
-                return;
-              }
-
-              this.setState({ lastPointerDownWith: event.pointerType });
-
-              // pan canvas on wheel button drag or space+drag
-              if (
-                gesture.pointers.length === 0 &&
-                (event.button === POINTER_BUTTON.WHEEL ||
-                  (event.button === POINTER_BUTTON.MAIN && isHoldingSpace))
-              ) {
-                isPanning = true;
-                document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
-                let { clientX: lastX, clientY: lastY } = event;
-                const onPointerMove = (event: PointerEvent) => {
-                  const deltaX = lastX - event.clientX;
-                  const deltaY = lastY - event.clientY;
-                  lastX = event.clientX;
-                  lastY = event.clientY;
-
-                  this.setState({
-                    scrollX: normalizeScroll(
-                      this.state.scrollX - deltaX / this.state.zoom,
-                    ),
-                    scrollY: normalizeScroll(
-                      this.state.scrollY - deltaY / this.state.zoom,
-                    ),
-                  });
-                };
-                const teardown = (lastPointerUp = () => {
-                  lastPointerUp = null;
-                  isPanning = false;
-                  if (!isHoldingSpace) {
-                    setCursorForShape(this.state.elementType);
-                  }
-                  window.removeEventListener("pointermove", onPointerMove);
-                  window.removeEventListener("pointerup", teardown);
-                  window.removeEventListener("blur", teardown);
-                });
-                window.addEventListener("blur", teardown);
-                window.addEventListener("pointermove", onPointerMove, {
-                  passive: true,
-                });
-                window.addEventListener("pointerup", teardown);
-                return;
-              }
-
-              // only handle left mouse button or touch
-              if (
-                event.button !== POINTER_BUTTON.MAIN &&
-                event.button !== POINTER_BUTTON.TOUCH
-              ) {
-                return;
-              }
-
-              gesture.pointers.push({
-                id: event.pointerId,
-                x: event.clientX,
-                y: event.clientY,
-              });
-              if (gesture.pointers.length === 2) {
-                gesture.lastCenter = getCenter(gesture.pointers);
-                gesture.initialScale = this.state.zoom;
-                gesture.initialDistance = getDistance(gesture.pointers);
-              }
-
-              // fixes pointermove causing selection of UI texts #32
-              event.preventDefault();
-              // Preventing the event above disables default behavior
-              //  of defocusing potentially focused element, which is what we
-              //  want when clicking inside the canvas.
-              if (document.activeElement instanceof HTMLElement) {
-                document.activeElement.blur();
-              }
-
-              // don't select while panning
-              if (gesture.pointers.length > 1) {
-                return;
-              }
-
-              // Handle scrollbars dragging
-              const {
-                isOverHorizontalScrollBar,
-                isOverVerticalScrollBar,
-              } = isOverScrollBars(
-                currentScrollBars,
-                event.clientX,
-                event.clientY,
-              );
-
-              const { x, y } = viewportCoordsToSceneCoords(
-                event,
-                this.state,
-                this.canvas,
-              );
-              let lastX = x;
-              let lastY = y;
-
-              if (
-                (isOverHorizontalScrollBar || isOverVerticalScrollBar) &&
-                !this.state.multiElement
-              ) {
-                isDraggingScrollBar = true;
-                lastX = event.clientX;
-                lastY = event.clientY;
-                const onPointerMove = (event: PointerEvent) => {
-                  const target = event.target;
-                  if (!(target instanceof HTMLElement)) {
-                    return;
-                  }
-
-                  if (isOverHorizontalScrollBar) {
-                    const x = event.clientX;
-                    const dx = x - lastX;
-                    this.setState({
-                      scrollX: normalizeScroll(
-                        this.state.scrollX - dx / this.state.zoom,
-                      ),
-                    });
-                    lastX = x;
-                    return;
-                  }
-
-                  if (isOverVerticalScrollBar) {
-                    const y = event.clientY;
-                    const dy = y - lastY;
-                    this.setState({
-                      scrollY: normalizeScroll(
-                        this.state.scrollY - dy / this.state.zoom,
-                      ),
-                    });
-                    lastY = y;
-                  }
-                };
-
-                const onPointerUp = () => {
-                  isDraggingScrollBar = false;
-                  setCursorForShape(this.state.elementType);
-                  lastPointerUp = null;
-                  window.removeEventListener("pointermove", onPointerMove);
-                  window.removeEventListener("pointerup", onPointerUp);
-                };
-
-                lastPointerUp = onPointerUp;
-
-                window.addEventListener("pointermove", onPointerMove);
-                window.addEventListener("pointerup", onPointerUp);
-                return;
-              }
-
-              const originX = x;
-              const originY = y;
-
-              let element = newElement(
-                this.state.elementType,
-                x,
-                y,
-                this.state.currentItemStrokeColor,
-                this.state.currentItemBackgroundColor,
-                this.state.currentItemFillStyle,
-                this.state.currentItemStrokeWidth,
-                this.state.currentItemRoughness,
-                this.state.currentItemOpacity,
-              );
-
-              if (isTextElement(element)) {
-                element = newTextElement(
-                  element,
-                  "",
-                  this.state.currentItemFont,
-                );
-              }
-
-              type ResizeTestType = ReturnType<typeof resizeTest>;
-              let resizeHandle: ResizeTestType = false;
-              let isResizingElements = false;
-              let draggingOccurred = false;
-              let hitElement: ExcalidrawElement | null = null;
-              let elementIsAddedToSelection = false;
-              if (this.state.elementType === "selection") {
-                const resizeElement = getElementWithResizeHandler(
-                  elements,
-                  { x, y },
-                  this.state.zoom,
-                  event.pointerType,
-                );
-
-                const selectedElements = getSelectedElements(elements);
-                if (selectedElements.length === 1 && resizeElement) {
-                  this.setState({
-                    resizingElement: resizeElement
-                      ? resizeElement.element
-                      : null,
-                  });
-
-                  resizeHandle = resizeElement.resizeHandle;
-                  document.documentElement.style.cursor = getCursorForResizingElement(
-                    resizeElement,
-                  );
-                  isResizingElements = true;
-                } else {
-                  hitElement = getElementAtPosition(
-                    elements,
-                    x,
-                    y,
-                    this.state.zoom,
-                  );
-                  // clear selection if shift is not clicked
-                  if (!hitElement?.isSelected && !event.shiftKey) {
-                    elements = clearSelection(elements);
-                  }
-
-                  // If we click on something
-                  if (hitElement) {
-                    // deselect if item is selected
-                    // if shift is not clicked, this will always return true
-                    // otherwise, it will trigger selection based on current
-                    // state of the box
-                    if (!hitElement.isSelected) {
-                      hitElement.isSelected = true;
-                      elements = elements.slice();
-                      elementIsAddedToSelection = true;
-                    }
-
-                    // We duplicate the selected element if alt is pressed on pointer down
-                    if (event.altKey) {
-                      elements = [
-                        ...elements.map(element => ({
-                          ...element,
-                          isSelected: false,
-                        })),
-                        ...getSelectedElements(elements).map(element => {
-                          const newElement = duplicateElement(element);
-                          newElement.isSelected = true;
-                          return newElement;
-                        }),
-                      ];
-                    }
-                  }
-                }
-              } else {
-                elements = clearSelection(elements);
-              }
-
-              if (isTextElement(element)) {
-                // if we're currently still editing text, clicking outside
-                //  should only finalize it, not create another (irrespective
-                //  of state.elementLocked)
-                if (this.state.editingElement?.type === "text") {
-                  return;
-                }
-                if (elementIsAddedToSelection) {
-                  element = hitElement!;
-                }
-                let textX = event.clientX;
-                let textY = event.clientY;
-                if (!event.altKey) {
-                  const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
-                    x,
-                    y,
-                  );
-                  if (snappedToCenterPosition) {
-                    element.x = snappedToCenterPosition.elementCenterX;
-                    element.y = snappedToCenterPosition.elementCenterY;
-                    textX = snappedToCenterPosition.wysiwygX;
-                    textY = snappedToCenterPosition.wysiwygY;
-                  }
-                }
-
-                const resetSelection = () => {
-                  this.setState({
-                    draggingElement: null,
-                    editingElement: null,
-                  });
-                };
-
-                textWysiwyg({
-                  initText: "",
-                  x: textX,
-                  y: textY,
-                  strokeColor: this.state.currentItemStrokeColor,
-                  opacity: this.state.currentItemOpacity,
-                  font: this.state.currentItemFont,
-                  zoom: this.state.zoom,
-                  onSubmit: text => {
-                    if (text) {
-                      elements = [
-                        ...elements,
-                        {
-                          ...newTextElement(
-                            element,
-                            text,
-                            this.state.currentItemFont,
-                          ),
-                          isSelected: true,
-                        },
-                      ];
-                    }
-                    if (this.state.elementLocked) {
-                      setCursorForShape(this.state.elementType);
-                    }
-                    history.resumeRecording();
-                    resetSelection();
-                  },
-                  onCancel: () => {
-                    resetSelection();
-                  },
-                });
-                resetCursor();
-                if (!this.state.elementLocked) {
-                  this.setState({
-                    editingElement: element,
-                    elementType: "selection",
-                  });
-                } else {
-                  this.setState({
-                    editingElement: element,
-                  });
-                }
-                return;
-              } else if (
-                this.state.elementType === "arrow" ||
-                this.state.elementType === "line"
-              ) {
-                if (this.state.multiElement) {
-                  const { multiElement } = this.state;
-                  const { x: rx, y: ry } = multiElement;
-                  //force LayerUI rerender
-                  elements = elements.slice();
-                  multiElement.points.push([x - rx, y - ry]);
-                  multiElement.shape = null;
-                } else {
-                  element.isSelected = false;
-                  element.points.push([0, 0]);
-                  element.shape = null;
-                  elements = [...elements, element];
-                  this.setState({
-                    draggingElement: element,
-                  });
-                }
-              } else if (element.type === "selection") {
-                this.setState({
-                  selectionElement: element,
-                  draggingElement: element,
-                });
-              } else {
-                elements = [...elements, element];
-                this.setState({ multiElement: null, draggingElement: element });
-              }
-
-              let resizeArrowFn:
-                | ((
-                    element: ExcalidrawElement,
-                    p1: Point,
-                    deltaX: number,
-                    deltaY: number,
-                    pointerX: number,
-                    pointerY: number,
-                    perfect: boolean,
-                  ) => void)
-                | null = null;
-
-              const arrowResizeOrigin = (
-                element: ExcalidrawElement,
-                p1: Point,
-                deltaX: number,
-                deltaY: number,
-                pointerX: number,
-                pointerY: number,
-                perfect: boolean,
-              ) => {
-                if (perfect) {
-                  const absPx = p1[0] + element.x;
-                  const absPy = p1[1] + element.y;
-
-                  const { width, height } = getPerfectElementSize(
-                    element.type,
-                    pointerX - element.x - p1[0],
-                    pointerY - element.y - p1[1],
-                  );
-
-                  const dx = element.x + width + p1[0];
-                  const dy = element.y + height + p1[1];
-                  element.x = dx;
-                  element.y = dy;
-                  p1[0] = absPx - element.x;
-                  p1[1] = absPy - element.y;
-                } else {
-                  element.x += deltaX;
-                  element.y += deltaY;
-                  p1[0] -= deltaX;
-                  p1[1] -= deltaY;
-                }
-              };
-
-              const arrowResizeEnd = (
-                element: ExcalidrawElement,
-                p1: Point,
-                deltaX: number,
-                deltaY: number,
-                pointerX: number,
-                pointerY: number,
-                perfect: boolean,
-              ) => {
-                if (perfect) {
-                  const { width, height } = getPerfectElementSize(
-                    element.type,
-                    pointerX - element.x,
-                    pointerY - element.y,
-                  );
-                  p1[0] = width;
-                  p1[1] = height;
-                } else {
-                  p1[0] += deltaX;
-                  p1[1] += deltaY;
-                }
-              };
-
-              const onPointerMove = (event: PointerEvent) => {
-                const target = event.target;
-                if (!(target instanceof HTMLElement)) {
-                  return;
-                }
-
-                if (isOverHorizontalScrollBar) {
-                  const x = event.clientX;
-                  const dx = x - lastX;
-                  this.setState({
-                    scrollX: normalizeScroll(
-                      this.state.scrollX - dx / this.state.zoom,
-                    ),
-                  });
-                  lastX = x;
-                  return;
-                }
-
-                if (isOverVerticalScrollBar) {
-                  const y = event.clientY;
-                  const dy = y - lastY;
-                  this.setState({
-                    scrollY: normalizeScroll(
-                      this.state.scrollY - dy / this.state.zoom,
-                    ),
-                  });
-                  lastY = y;
-                  return;
-                }
-
-                // for arrows, don't start dragging until a given threshold
-                //  to ensure we don't create a 2-point arrow by mistake when
-                //  user clicks mouse in a way that it moves a tiny bit (thus
-                //  triggering pointermove)
-                if (
-                  !draggingOccurred &&
-                  (this.state.elementType === "arrow" ||
-                    this.state.elementType === "line")
-                ) {
-                  const { x, y } = viewportCoordsToSceneCoords(
-                    event,
-                    this.state,
-                    this.canvas,
-                  );
-                  if (distance2d(x, y, originX, originY) < DRAGGING_THRESHOLD) {
-                    return;
-                  }
-                }
-
-                if (isResizingElements && this.state.resizingElement) {
-                  this.setState({ isResizing: true });
-                  const el = this.state.resizingElement;
-                  const selectedElements = getSelectedElements(elements);
-                  if (selectedElements.length === 1) {
-                    const { x, y } = viewportCoordsToSceneCoords(
-                      event,
-                      this.state,
-                      this.canvas,
-                    );
-                    const deltaX = x - lastX;
-                    const deltaY = y - lastY;
-                    const element = selectedElements[0];
-                    const isLinear =
-                      element.type === "line" || element.type === "arrow";
-                    switch (resizeHandle) {
-                      case "nw":
-                        if (isLinear && element.points.length === 2) {
-                          const [, p1] = element.points;
-
-                          if (!resizeArrowFn) {
-                            if (p1[0] < 0 || p1[1] < 0) {
-                              resizeArrowFn = arrowResizeEnd;
-                            } else {
-                              resizeArrowFn = arrowResizeOrigin;
-                            }
-                          }
-                          resizeArrowFn(
-                            element,
-                            p1,
-                            deltaX,
-                            deltaY,
-                            x,
-                            y,
-                            event.shiftKey,
-                          );
-                        } else {
-                          element.width -= deltaX;
-                          element.x += deltaX;
-
-                          if (event.shiftKey) {
-                            element.y += element.height - element.width;
-                            element.height = element.width;
-                          } else {
-                            element.height -= deltaY;
-                            element.y += deltaY;
-                          }
-                        }
-                        break;
-                      case "ne":
-                        if (isLinear && element.points.length === 2) {
-                          const [, p1] = element.points;
-                          if (!resizeArrowFn) {
-                            if (p1[0] >= 0) {
-                              resizeArrowFn = arrowResizeEnd;
-                            } else {
-                              resizeArrowFn = arrowResizeOrigin;
-                            }
-                          }
-                          resizeArrowFn(
-                            element,
-                            p1,
-                            deltaX,
-                            deltaY,
-                            x,
-                            y,
-                            event.shiftKey,
-                          );
-                        } else {
-                          element.width += deltaX;
-                          if (event.shiftKey) {
-                            element.y += element.height - element.width;
-                            element.height = element.width;
-                          } else {
-                            element.height -= deltaY;
-                            element.y += deltaY;
-                          }
-                        }
-                        break;
-                      case "sw":
-                        if (isLinear && element.points.length === 2) {
-                          const [, p1] = element.points;
-                          if (!resizeArrowFn) {
-                            if (p1[0] <= 0) {
-                              resizeArrowFn = arrowResizeEnd;
-                            } else {
-                              resizeArrowFn = arrowResizeOrigin;
-                            }
-                          }
-                          resizeArrowFn(
-                            element,
-                            p1,
-                            deltaX,
-                            deltaY,
-                            x,
-                            y,
-                            event.shiftKey,
-                          );
-                        } else {
-                          element.width -= deltaX;
-                          element.x += deltaX;
-                          if (event.shiftKey) {
-                            element.height = element.width;
-                          } else {
-                            element.height += deltaY;
-                          }
-                        }
-                        break;
-                      case "se":
-                        if (isLinear && element.points.length === 2) {
-                          const [, p1] = element.points;
-                          if (!resizeArrowFn) {
-                            if (p1[0] > 0 || p1[1] > 0) {
-                              resizeArrowFn = arrowResizeEnd;
-                            } else {
-                              resizeArrowFn = arrowResizeOrigin;
-                            }
-                          }
-                          resizeArrowFn(
-                            element,
-                            p1,
-                            deltaX,
-                            deltaY,
-                            x,
-                            y,
-                            event.shiftKey,
-                          );
-                        } else {
-                          if (event.shiftKey) {
-                            element.width += deltaX;
-                            element.height = element.width;
-                          } else {
-                            element.width += deltaX;
-                            element.height += deltaY;
-                          }
-                        }
-                        break;
-                      case "n": {
-                        element.height -= deltaY;
-                        element.y += deltaY;
-
-                        if (element.points.length > 0) {
-                          const len = element.points.length;
-
-                          const points = [...element.points].sort(
-                            (a, b) => a[1] - b[1],
-                          );
-
-                          for (let i = 1; i < points.length; ++i) {
-                            const pnt = points[i];
-                            pnt[1] -= deltaY / (len - i);
-                          }
-                        }
-                        break;
-                      }
-                      case "w": {
-                        element.width -= deltaX;
-                        element.x += deltaX;
-
-                        if (element.points.length > 0) {
-                          const len = element.points.length;
-                          const points = [...element.points].sort(
-                            (a, b) => a[0] - b[0],
-                          );
-
-                          for (let i = 0; i < points.length; ++i) {
-                            const pnt = points[i];
-                            pnt[0] -= deltaX / (len - i);
-                          }
-                        }
-                        break;
-                      }
-                      case "s": {
-                        element.height += deltaY;
-                        if (element.points.length > 0) {
-                          const len = element.points.length;
-                          const points = [...element.points].sort(
-                            (a, b) => a[1] - b[1],
-                          );
-
-                          for (let i = 1; i < points.length; ++i) {
-                            const pnt = points[i];
-                            pnt[1] += deltaY / (len - i);
-                          }
-                        }
-                        break;
-                      }
-                      case "e": {
-                        element.width += deltaX;
-                        if (element.points.length > 0) {
-                          const len = element.points.length;
-                          const points = [...element.points].sort(
-                            (a, b) => a[0] - b[0],
-                          );
-
-                          for (let i = 1; i < points.length; ++i) {
-                            const pnt = points[i];
-                            pnt[0] += deltaX / (len - i);
-                          }
-                        }
-                        break;
-                      }
-                    }
-
-                    if (resizeHandle) {
-                      resizeHandle = normalizeResizeHandle(
-                        element,
-                        resizeHandle,
-                      );
-                    }
-                    normalizeDimensions(element);
-
-                    document.documentElement.style.cursor = getCursorForResizingElement(
-                      { element, resizeHandle },
-                    );
-                    el.x = element.x;
-                    el.y = element.y;
-                    el.shape = null;
-
-                    lastX = x;
-                    lastY = y;
-                    this.setState({});
-                    return;
-                  }
-                }
-
-                if (hitElement?.isSelected) {
-                  // Marking that click was used for dragging to check
-                  // if elements should be deselected on pointerup
-                  draggingOccurred = true;
-                  const selectedElements = getSelectedElements(elements);
-                  if (selectedElements.length > 0) {
-                    const { x, y } = viewportCoordsToSceneCoords(
-                      event,
-                      this.state,
-                      this.canvas,
-                    );
-
-                    selectedElements.forEach(element => {
-                      element.x += x - lastX;
-                      element.y += y - lastY;
-                    });
-                    lastX = x;
-                    lastY = y;
-                    this.setState({});
-                    return;
-                  }
-                }
-
-                // It is very important to read this.state within each move event,
-                // otherwise we would read a stale one!
-                const draggingElement = this.state.draggingElement;
-                if (!draggingElement) {
-                  return;
-                }
-
-                const { x, y } = viewportCoordsToSceneCoords(
-                  event,
-                  this.state,
-                  this.canvas,
-                );
-
-                let width = distance(originX, x);
-                let height = distance(originY, y);
-
-                const isLinear =
-                  this.state.elementType === "line" ||
-                  this.state.elementType === "arrow";
-
-                if (isLinear) {
-                  draggingOccurred = true;
-                  const points = draggingElement.points;
-                  let dx = x - draggingElement.x;
-                  let dy = y - draggingElement.y;
-
-                  if (event.shiftKey && points.length === 2) {
-                    ({ width: dx, height: dy } = getPerfectElementSize(
-                      this.state.elementType,
-                      dx,
-                      dy,
-                    ));
-                  }
-
-                  if (points.length === 1) {
-                    points.push([dx, dy]);
-                  } else if (points.length > 1) {
-                    const pnt = points[points.length - 1];
-                    pnt[0] = dx;
-                    pnt[1] = dy;
-                  }
-                } else {
-                  if (event.shiftKey) {
-                    ({ width, height } = getPerfectElementSize(
-                      this.state.elementType,
-                      width,
-                      y < originY ? -height : height,
-                    ));
-
-                    if (height < 0) {
-                      height = -height;
-                    }
-                  }
-
-                  draggingElement.x = x < originX ? originX - width : originX;
-                  draggingElement.y = y < originY ? originY - height : originY;
-
-                  draggingElement.width = width;
-                  draggingElement.height = height;
-                }
-
-                draggingElement.shape = null;
-
-                if (this.state.elementType === "selection") {
-                  if (!event.shiftKey && isSomeElementSelected(elements)) {
-                    elements = clearSelection(elements);
-                  }
-                  const elementsWithinSelection = getElementsWithinSelection(
-                    elements,
-                    draggingElement,
-                  );
-                  elementsWithinSelection.forEach(element => {
-                    element.isSelected = true;
-                  });
-                }
-                this.setState({});
-              };
-
-              const onPointerUp = (event: PointerEvent) => {
-                const {
-                  draggingElement,
-                  resizingElement,
-                  multiElement,
-                  elementType,
-                  elementLocked,
-                } = this.state;
-
-                this.setState({
-                  isResizing: false,
-                  resizingElement: null,
-                  selectionElement: null,
-                });
-
-                resizeArrowFn = null;
-                lastPointerUp = null;
-                window.removeEventListener("pointermove", onPointerMove);
-                window.removeEventListener("pointerup", onPointerUp);
-
-                if (elementType === "arrow" || elementType === "line") {
-                  if (draggingElement!.points.length > 1) {
-                    history.resumeRecording();
-                    this.setState({});
-                  }
-                  if (!draggingOccurred && draggingElement && !multiElement) {
-                    const { x, y } = viewportCoordsToSceneCoords(
-                      event,
-                      this.state,
-                      this.canvas,
-                    );
-                    draggingElement.points.push([
-                      x - draggingElement.x,
-                      y - draggingElement.y,
-                    ]);
-                    draggingElement.shape = null;
-                    this.setState({ multiElement: this.state.draggingElement });
-                  } else if (draggingOccurred && !multiElement) {
-                    this.state.draggingElement!.isSelected = true;
-                    if (!elementLocked) {
-                      resetCursor();
-                      this.setState({
-                        draggingElement: null,
-                        elementType: "selection",
-                      });
-                    } else {
-                      this.setState({
-                        draggingElement: null,
-                      });
-                    }
-                  }
-                  return;
-                }
-
-                if (
-                  elementType !== "selection" &&
-                  draggingElement &&
-                  isInvisiblySmallElement(draggingElement)
-                ) {
-                  // remove invisible element which was added in onPointerDown
-                  elements = elements.slice(0, -1);
-                  this.setState({
-                    draggingElement: null,
-                  });
-                  return;
-                }
-
-                if (normalizeDimensions(draggingElement)) {
-                  this.setState({});
-                }
-
-                if (resizingElement) {
-                  history.resumeRecording();
-                  this.setState({});
-                }
-
-                if (
-                  resizingElement &&
-                  isInvisiblySmallElement(resizingElement)
-                ) {
-                  elements = elements.filter(
-                    el => el.id !== resizingElement.id,
-                  );
-                }
-
-                // If click occurred on already selected element
-                // it is needed to remove selection from other elements
-                // or if SHIFT or META key pressed remove selection
-                // from hitted element
-                //
-                // If click occurred and elements were dragged or some element
-                // was added to selection (on pointerdown phase) we need to keep
-                // selection unchanged
-                if (
-                  hitElement &&
-                  !draggingOccurred &&
-                  !elementIsAddedToSelection
-                ) {
-                  if (event.shiftKey) {
-                    hitElement.isSelected = false;
-                  } else {
-                    elements = clearSelection(elements);
-                    hitElement.isSelected = true;
-                  }
-                }
-
-                if (draggingElement === null) {
-                  // if no element is clicked, clear the selection and redraw
-                  elements = clearSelection(elements);
-                  this.setState({});
-                  return;
-                }
-
-                if (!elementLocked) {
-                  draggingElement.isSelected = true;
-                }
-
-                if (
-                  elementType !== "selection" ||
-                  isSomeElementSelected(elements)
-                ) {
-                  history.resumeRecording();
-                }
-
-                if (!elementLocked) {
-                  resetCursor();
-                  this.setState({
-                    draggingElement: null,
-                    elementType: "selection",
-                  });
-                } else {
-                  this.setState({
-                    draggingElement: null,
-                  });
-                }
-              };
-
-              lastPointerUp = onPointerUp;
-
-              window.addEventListener("pointermove", onPointerMove);
-              window.addEventListener("pointerup", onPointerUp);
-            }}
-            onDoubleClick={event => {
-              resetCursor();
-
-              const { x, y } = viewportCoordsToSceneCoords(
-                event,
-                this.state,
-                this.canvas,
-              );
-
-              const elementAtPosition = getElementAtPosition(
-                elements,
-                x,
-                y,
-                this.state.zoom,
-              );
-
-              const element =
-                elementAtPosition && isTextElement(elementAtPosition)
-                  ? elementAtPosition
-                  : newTextElement(
-                      newElement(
-                        "text",
-                        x,
-                        y,
-                        this.state.currentItemStrokeColor,
-                        this.state.currentItemBackgroundColor,
-                        this.state.currentItemFillStyle,
-                        this.state.currentItemStrokeWidth,
-                        this.state.currentItemRoughness,
-                        this.state.currentItemOpacity,
-                      ),
-                      "", // default text
-                      this.state.currentItemFont, // default font
-                    );
-
-              this.setState({ editingElement: element });
-
-              let textX = event.clientX;
-              let textY = event.clientY;
-
-              if (elementAtPosition && isTextElement(elementAtPosition)) {
-                elements = elements.filter(
-                  element => element.id !== elementAtPosition.id,
-                );
-                this.setState({});
-
-                const centerElementX =
-                  elementAtPosition.x + elementAtPosition.width / 2;
-                const centerElementY =
-                  elementAtPosition.y + elementAtPosition.height / 2;
-
-                const {
-                  x: centerElementXInViewport,
-                  y: centerElementYInViewport,
-                } = sceneCoordsToViewportCoords(
-                  { sceneX: centerElementX, sceneY: centerElementY },
-                  this.state,
-                  this.canvas,
-                );
-
-                textX = centerElementXInViewport;
-                textY = centerElementYInViewport;
-
-                // x and y will change after calling newTextElement function
-                element.x = centerElementX;
-                element.y = centerElementY;
-              } else if (!event.altKey) {
-                const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
-                  x,
-                  y,
-                );
-
-                if (snappedToCenterPosition) {
-                  element.x = snappedToCenterPosition.elementCenterX;
-                  element.y = snappedToCenterPosition.elementCenterY;
-                  textX = snappedToCenterPosition.wysiwygX;
-                  textY = snappedToCenterPosition.wysiwygY;
-                }
-              }
-
-              const resetSelection = () => {
-                this.setState({
-                  draggingElement: null,
-                  editingElement: null,
-                });
-              };
-
-              textWysiwyg({
-                initText: element.text,
-                x: textX,
-                y: textY,
-                strokeColor: element.strokeColor,
-                font: element.font,
-                opacity: this.state.currentItemOpacity,
-                zoom: this.state.zoom,
-                onSubmit: text => {
-                  if (text) {
-                    elements = [
-                      ...elements,
-                      {
-                        // we need to recreate the element to update dimensions &
-                        //  position
-                        ...newTextElement(element, text, element.font),
-                        isSelected: true,
-                      },
-                    ];
-                  }
-                  history.resumeRecording();
-                  resetSelection();
-                },
-                onCancel: () => {
-                  resetSelection();
-                },
-              });
-            }}
-            onPointerMove={event => {
-              gesture.pointers = gesture.pointers.map(pointer =>
-                pointer.id === event.pointerId
-                  ? {
-                      id: event.pointerId,
-                      x: event.clientX,
-                      y: event.clientY,
-                    }
-                  : pointer,
-              );
-
-              if (gesture.pointers.length === 2) {
-                const center = getCenter(gesture.pointers);
-                const deltaX = center.x - gesture.lastCenter!.x;
-                const deltaY = center.y - gesture.lastCenter!.y;
-                gesture.lastCenter = center;
-
-                const distance = getDistance(gesture.pointers);
-                const scaleFactor = distance / gesture.initialDistance!;
-
-                this.setState({
-                  scrollX: normalizeScroll(
-                    this.state.scrollX + deltaX / this.state.zoom,
-                  ),
-                  scrollY: normalizeScroll(
-                    this.state.scrollY + deltaY / this.state.zoom,
-                  ),
-                  zoom: getNormalizedZoom(gesture.initialScale! * scaleFactor),
-                });
-              } else {
-                gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;
-              }
-
-              if (isHoldingSpace || isPanning || isDraggingScrollBar) {
-                return;
-              }
-
-              const {
-                isOverHorizontalScrollBar,
-                isOverVerticalScrollBar,
-              } = isOverScrollBars(
-                currentScrollBars,
-                event.clientX,
-                event.clientY,
-              );
-              const isOverScrollBar =
-                isOverVerticalScrollBar || isOverHorizontalScrollBar;
-              if (!this.state.draggingElement && !this.state.multiElement) {
-                if (isOverScrollBar) {
-                  resetCursor();
-                } else {
-                  setCursorForShape(this.state.elementType);
-                }
-              }
-
-              const { x, y } = viewportCoordsToSceneCoords(
-                event,
-                this.state,
-                this.canvas,
-              );
-              if (this.state.multiElement) {
-                const { multiElement } = this.state;
-                const originX = multiElement.x;
-                const originY = multiElement.y;
-                const points = multiElement.points;
-                const pnt = points[points.length - 1];
-                pnt[0] = x - originX;
-                pnt[1] = y - originY;
-                multiElement.shape = null;
-                this.setState({});
-                return;
-              }
-
-              const hasDeselectedButton = Boolean(event.buttons);
-              if (
-                hasDeselectedButton ||
-                this.state.elementType !== "selection"
-              ) {
-                return;
-              }
-
-              const selectedElements = getSelectedElements(elements);
-              if (selectedElements.length === 1 && !isOverScrollBar) {
-                const resizeElement = getElementWithResizeHandler(
-                  elements,
-                  { x, y },
-                  this.state.zoom,
-                  event.pointerType,
-                );
-                if (resizeElement && resizeElement.resizeHandle) {
-                  document.documentElement.style.cursor = getCursorForResizingElement(
-                    resizeElement,
-                  );
-                  return;
-                }
-              }
-              const hitElement = getElementAtPosition(
-                elements,
-                x,
-                y,
-                this.state.zoom,
-              );
-              document.documentElement.style.cursor =
-                hitElement && !isOverScrollBar ? "move" : "";
-            }}
-            onPointerUp={this.removePointer}
-            onPointerLeave={this.removePointer}
-            onDrop={event => {
-              const file = event.dataTransfer.files[0];
-              if (
-                file?.type === "application/json" ||
-                file?.name.endsWith(".excalidraw")
-              ) {
-                loadFromBlob(file)
-                  .then(({ elements, appState }) =>
-                    this.syncActionResult({ elements, appState }),
-                  )
-                  .catch(error => console.error(error));
-              }
-            }}
-          >
-            {t("labels.drawingCanvas")}
-          </canvas>
-        </main>
-      </div>
-    );
-  }
-
-  private handleWheel = (event: WheelEvent) => {
-    event.preventDefault();
-    const { deltaX, deltaY } = event;
-
-    if (event.metaKey || event.ctrlKey) {
-      const sign = Math.sign(deltaY);
-      const MAX_STEP = 10;
-      let delta = Math.abs(deltaY);
-      if (delta > MAX_STEP) {
-        delta = MAX_STEP;
-      }
-      delta *= sign;
-      this.setState(({ zoom }) => ({
-        zoom: getNormalizedZoom(zoom - delta / 100),
-      }));
-      return;
-    }
-
-    this.setState(({ zoom, scrollX, scrollY }) => ({
-      scrollX: normalizeScroll(scrollX - deltaX / zoom),
-      scrollY: normalizeScroll(scrollY - deltaY / zoom),
-    }));
-  };
-
-  private addElementsFromPaste = (
-    clipboardElements: readonly ExcalidrawElement[],
-  ) => {
-    elements = clearSelection(elements);
-
-    const [minX, minY, maxX, maxY] = getCommonBounds(clipboardElements);
-
-    const elementsCenterX = distance(minX, maxX) / 2;
-    const elementsCenterY = distance(minY, maxY) / 2;
-
-    const { x, y } = viewportCoordsToSceneCoords(
-      { clientX: cursorX, clientY: cursorY },
-      this.state,
-      this.canvas,
-    );
-
-    const dx = x - elementsCenterX;
-    const dy = y - elementsCenterY;
-
-    elements = [
-      ...elements,
-      ...clipboardElements.map(clipboardElements => {
-        const duplicate = duplicateElement(clipboardElements);
-        duplicate.x += dx - minX;
-        duplicate.y += dy - minY;
-        return duplicate;
-      }),
-    ];
-    history.resumeRecording();
-    this.setState({});
-  };
-
-  private getTextWysiwygSnappedToCenterPosition(x: number, y: number) {
-    const elementClickedInside = getElementContainingPosition(elements, x, y);
-    if (elementClickedInside) {
-      const elementCenterX =
-        elementClickedInside.x + elementClickedInside.width / 2;
-      const elementCenterY =
-        elementClickedInside.y + elementClickedInside.height / 2;
-      const distanceToCenter = Math.hypot(
-        x - elementCenterX,
-        y - elementCenterY,
-      );
-      const isSnappedToCenter =
-        distanceToCenter < TEXT_TO_CENTER_SNAP_THRESHOLD;
-      if (isSnappedToCenter) {
-        const wysiwygX =
-          this.state.scrollX +
-          elementClickedInside.x +
-          elementClickedInside.width / 2;
-        const wysiwygY =
-          this.state.scrollY +
-          elementClickedInside.y +
-          elementClickedInside.height / 2;
-        return { wysiwygX, wysiwygY, elementCenterX, elementCenterY };
-      }
-    }
-  }
-
-  private saveDebounced = debounce(() => {
-    saveToLocalStorage(elements, this.state);
-  }, 300);
-
-  componentDidUpdate() {
-    const { atLeastOneVisibleElement, scrollBars } = renderScene(
-      elements,
-      this.state.selectionElement,
-      this.rc!,
-      this.canvas!,
-      {
-        scrollX: this.state.scrollX,
-        scrollY: this.state.scrollY,
-        viewBackgroundColor: this.state.viewBackgroundColor,
-        zoom: this.state.zoom,
-      },
-      {
-        renderOptimizations: true,
-      },
-    );
-    if (scrollBars) {
-      currentScrollBars = scrollBars;
-    }
-    const scrolledOutside = !atLeastOneVisibleElement && elements.length > 0;
-    if (this.state.scrolledOutside !== scrolledOutside) {
-      this.setState({ scrolledOutside: scrolledOutside });
-    }
-    this.saveDebounced();
-    if (history.isRecording()) {
-      history.pushEntry(this.state, elements);
-      history.skipRecording();
-    }
-  }
-}
-
 const rootElement = document.getElementById("root");
 
-interface TopErrorBoundaryState {
-  unresolvedError: Error[] | null;
-  hasError: boolean;
-  stack: string;
-  localStorage: string;
-}
-
-class TopErrorBoundary extends React.Component<any, TopErrorBoundaryState> {
-  state: TopErrorBoundaryState = {
-    unresolvedError: null,
-    hasError: false,
-    stack: "",
-    localStorage: "",
-  };
-
-  componentDidCatch(error: Error) {
-    const _localStorage: any = {};
-    for (const [key, value] of Object.entries({ ...localStorage })) {
-      try {
-        _localStorage[key] = JSON.parse(value);
-      } catch (error) {
-        _localStorage[key] = value;
-      }
-    }
-    this.setState(state => ({
-      hasError: true,
-      unresolvedError: state.unresolvedError
-        ? state.unresolvedError.concat(error)
-        : [error],
-      localStorage: JSON.stringify(_localStorage),
-    }));
-  }
-
-  async componentDidUpdate() {
-    if (this.state.unresolvedError !== null) {
-      let stack = "";
-      for (const error of this.state.unresolvedError) {
-        if (stack) {
-          stack += `\n\n================\n\n`;
-        }
-        stack += `${error.message}:\n\n`;
-        try {
-          const StackTrace = await import("stacktrace-js");
-          stack += (await StackTrace.fromError(error)).join("\n");
-        } catch (error) {
-          console.error(error);
-          stack += error.stack || "";
-        }
-      }
-
-      this.setState(state => ({
-        unresolvedError: null,
-        stack: `${
-          state.stack ? `${state.stack}\n\n================\n\n${stack}` : stack
-        }`,
-      }));
-    }
-  }
-
-  private selectTextArea(event: React.MouseEvent<HTMLTextAreaElement>) {
-    if (event.target !== document.activeElement) {
-      event.preventDefault();
-      (event.target as HTMLTextAreaElement).select();
-    }
-  }
-
-  private async createGithubIssue() {
-    let body = "";
-    try {
-      const templateStr = (await import("./bug-issue-template")).default;
-      if (typeof templateStr === "string") {
-        body = encodeURIComponent(templateStr);
-      }
-    } catch {}
-
-    window.open(
-      `https://github.com/excalidraw/excalidraw/issues/new?body=${body}`,
-    );
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div className="ErrorSplash">
-          <div className="ErrorSplash-messageContainer">
-            <div className="ErrorSplash-paragraph bigger">
-              Encountered an error. Please{" "}
-              <button onClick={() => window.location.reload()}>
-                reload the page
-              </button>
-              .
-            </div>
-            <div className="ErrorSplash-paragraph">
-              If reloading doesn't work. Try{" "}
-              <button
-                onClick={() => {
-                  localStorage.clear();
-                  window.location.reload();
-                }}
-              >
-                clearing the canvas
-              </button>
-              .<br />
-              <div className="smaller">
-                (This will unfortunately result in loss of work.)
-              </div>
-            </div>
-            <div>
-              <div className="ErrorSplash-paragraph">
-                Before doing so, we'd appreciate if you opened an issue on our{" "}
-                <button onClick={this.createGithubIssue}>bug tracker</button>.
-                Please include the following error stack trace & localStorage
-                content (provided it's not private):
-              </div>
-              <div className="ErrorSplash-paragraph">
-                <div className="ErrorSplash-details">
-                  <label>Error stack trace:</label>
-                  <textarea
-                    rows={10}
-                    onPointerDown={this.selectTextArea}
-                    readOnly={true}
-                    value={
-                      this.state.unresolvedError
-                        ? "Loading data. please wait..."
-                        : this.state.stack
-                    }
-                  />
-                  <label>LocalStorage content:</label>
-                  <textarea
-                    rows={5}
-                    onPointerDown={this.selectTextArea}
-                    readOnly={true}
-                    value={this.state.localStorage}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
 ReactDOM.render(
   <TopErrorBoundary>
     <IsMobileProvider>

src/scene/data.ts

@@ -1,473 +0,0 @@
-import { ExcalidrawElement } from "../element/types";
-
-import {
-  getDefaultAppState,
-  cleanAppStateForExport,
-  clearAppStateForLocalStorage,
-} from "../appState";
-
-import { AppState, FlooredNumber } from "../types";
-import { ExportType } from "./types";
-import { exportToCanvas, exportToSvg } from "./export";
-import nanoid from "nanoid";
-import { fileOpen, fileSave } from "browser-nativefs";
-import {
-  getCommonBounds,
-  normalizeDimensions,
-  isInvisiblySmallElement,
-} from "../element";
-
-import { Point } from "roughjs/bin/geometry";
-import { t } from "../i18n";
-import { copyCanvasToClipboardAsPng } from "../clipboard";
-
-const LOCAL_STORAGE_KEY = "excalidraw";
-const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
-const BACKEND_GET = "https://json.excalidraw.com/api/v1/";
-
-const BACKEND_V2_POST = "https://json.excalidraw.com/api/v2/post/";
-const BACKEND_V2_GET = "https://json.excalidraw.com/api/v2/";
-
-// TODO: Defined globally, since file handles aren't yet serializable.
-// Once `FileSystemFileHandle` can be serialized, make this
-// part of `AppState`.
-(window as any).handle = null;
-
-interface DataState {
-  type?: string;
-  version?: string;
-  source?: string;
-  elements: readonly ExcalidrawElement[];
-  appState: AppState | null;
-  selectedId?: number;
-}
-
-export function serializeAsJSON(
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-): string {
-  return JSON.stringify(
-    {
-      type: "excalidraw",
-      version: 1,
-      source: window.location.origin,
-      elements: elements.map(({ shape, canvas, isSelected, ...el }) => el),
-      appState: cleanAppStateForExport(appState),
-    },
-    null,
-    2,
-  );
-}
-
-export function normalizeScroll(pos: number) {
-  return Math.floor(pos) as FlooredNumber;
-}
-
-export function calculateScrollCenter(
-  elements: readonly ExcalidrawElement[],
-): { scrollX: FlooredNumber; scrollY: FlooredNumber } {
-  const [x1, y1, x2, y2] = getCommonBounds(elements);
-
-  const centerX = (x1 + x2) / 2;
-  const centerY = (y1 + y2) / 2;
-
-  return {
-    scrollX: normalizeScroll(window.innerWidth / 2 - centerX),
-    scrollY: normalizeScroll(window.innerHeight / 2 - centerY),
-  };
-}
-
-export async function saveAsJSON(
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) {
-  const serialized = serializeAsJSON(elements, appState);
-
-  const name = `${appState.name}.excalidraw`;
-  await fileSave(
-    new Blob([serialized], { type: "application/json" }),
-    {
-      fileName: name,
-      description: "Excalidraw file",
-    },
-    (window as any).handle,
-  );
-}
-export async function loadFromJSON() {
-  const blob = await fileOpen({
-    description: "Excalidraw files",
-    extensions: ["json", "excalidraw"],
-    mimeTypes: ["application/json"],
-  });
-  return loadFromBlob(blob);
-}
-
-export async function loadFromBlob(blob: any) {
-  const updateAppState = (contents: string) => {
-    const defaultAppState = getDefaultAppState();
-    let elements = [];
-    let appState = defaultAppState;
-    try {
-      const data = JSON.parse(contents);
-      if (data.type !== "excalidraw") {
-        throw new Error("Cannot load invalid json");
-      }
-      elements = data.elements || [];
-      appState = { ...defaultAppState, ...data.appState };
-    } catch (error) {
-      // Do nothing because elements array is already empty
-    }
-    return { elements, appState };
-  };
-
-  if (blob.handle) {
-    (window as any).handle = blob.handle;
-  }
-  let contents;
-  if ("text" in Blob) {
-    contents = await blob.text();
-  } else {
-    contents = await new Promise(resolve => {
-      const reader = new FileReader();
-      reader.readAsText(blob, "utf8");
-      reader.onloadend = () => {
-        if (reader.readyState === FileReader.DONE) {
-          resolve(reader.result as string);
-        }
-      };
-    });
-  }
-  const { elements, appState } = updateAppState(contents);
-  if (!elements.length) {
-    return Promise.reject("Cannot load invalid json");
-  }
-  return new Promise<DataState>(resolve => {
-    resolve(restore(elements, appState, { scrollToContent: true }));
-  });
-}
-
-export async function exportToBackend(
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) {
-  const json = serializeAsJSON(elements, appState);
-  const encoded = new TextEncoder().encode(json);
-
-  const key = await window.crypto.subtle.generateKey(
-    {
-      name: "AES-GCM",
-      length: 128,
-    },
-    true, // extractable
-    ["encrypt", "decrypt"],
-  );
-  // The iv is set to 0. We are never going to reuse the same key so we don't
-  // need to have an iv. (I hope that's correct...)
-  const iv = new Uint8Array(12);
-  // We use symmetric encryption. AES-GCM is the recommended algorithm and
-  // includes checks that the ciphertext has not been modified by an attacker.
-  const encrypted = await window.crypto.subtle.encrypt(
-    {
-      name: "AES-GCM",
-      iv: iv,
-    },
-    key,
-    encoded,
-  );
-  // We use jwk encoding to be able to extract just the base64 encoded key.
-  // We will hardcode the rest of the attributes when importing back the key.
-  const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
-
-  try {
-    const response = await fetch(BACKEND_V2_POST, {
-      method: "POST",
-      body: encrypted,
-    });
-    const json = await response.json();
-    if (json.id) {
-      const url = new URL(window.location.href);
-      // We need to store the key (and less importantly the id) as hash instead
-      // of queryParam in order to never send it to the server
-      url.hash = `json=${json.id},${exportedKey.k!}`;
-      const urlString = url.toString();
-
-      window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
-    } else {
-      window.alert(t("alerts.couldNotCreateShareableLink"));
-    }
-  } catch (error) {
-    console.error(error);
-    window.alert(t("alerts.couldNotCreateShareableLink"));
-  }
-}
-
-export async function importFromBackend(
-  id: string | null,
-  k: string | undefined,
-) {
-  let elements: readonly ExcalidrawElement[] = [];
-  let appState: AppState = getDefaultAppState();
-
-  try {
-    const response = await fetch(
-      k ? `${BACKEND_V2_GET}${id}` : `${BACKEND_GET}${id}.json`,
-    );
-    if (!response.ok) {
-      window.alert(t("alerts.importBackendFailed"));
-      return restore(elements, appState, { scrollToContent: true });
-    }
-    let data;
-    if (k) {
-      const buffer = await response.arrayBuffer();
-      const key = await window.crypto.subtle.importKey(
-        "jwk",
-        {
-          alg: "A128GCM",
-          ext: true,
-          k: k,
-          key_ops: ["encrypt", "decrypt"],
-          kty: "oct",
-        },
-        {
-          name: "AES-GCM",
-          length: 128,
-        },
-        false, // extractable
-        ["decrypt"],
-      );
-      const iv = new Uint8Array(12);
-      const decrypted = await window.crypto.subtle.decrypt(
-        {
-          name: "AES-GCM",
-          iv: iv,
-        },
-        key,
-        buffer,
-      );
-      // We need to convert the decrypted array buffer to a string
-      const string = new window.TextDecoder("utf-8").decode(
-        new Uint8Array(decrypted) as any,
-      );
-      data = JSON.parse(string);
-    } else {
-      // Legacy format
-      data = await response.json();
-    }
-
-    elements = data.elements || elements;
-    appState = data.appState || appState;
-  } catch (error) {
-    window.alert(t("alerts.importBackendFailed"));
-    console.error(error);
-  } finally {
-    return restore(elements, appState, { scrollToContent: true });
-  }
-}
-
-export async function exportCanvas(
-  type: ExportType,
-  elements: readonly ExcalidrawElement[],
-  canvas: HTMLCanvasElement,
-  {
-    exportBackground,
-    exportPadding = 10,
-    viewBackgroundColor,
-    name,
-    scale = 1,
-  }: {
-    exportBackground: boolean;
-    exportPadding?: number;
-    viewBackgroundColor: string;
-    name: string;
-    scale?: number;
-  },
-) {
-  if (!elements.length) {
-    return window.alert(t("alerts.cannotExportEmptyCanvas"));
-  }
-  // calculate smallest area to fit the contents in
-
-  if (type === "svg") {
-    const tempSvg = exportToSvg(elements, {
-      exportBackground,
-      viewBackgroundColor,
-      exportPadding,
-    });
-    await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
-      fileName: `${name}.svg`,
-    });
-    return;
-  }
-
-  const tempCanvas = exportToCanvas(elements, {
-    exportBackground,
-    viewBackgroundColor,
-    exportPadding,
-    scale,
-  });
-  tempCanvas.style.display = "none";
-  document.body.appendChild(tempCanvas);
-
-  if (type === "png") {
-    const fileName = `${name}.png`;
-    tempCanvas.toBlob(async (blob: any) => {
-      if (blob) {
-        await fileSave(blob, {
-          fileName: fileName,
-        });
-      }
-    });
-  } else if (type === "clipboard") {
-    try {
-      copyCanvasToClipboardAsPng(tempCanvas);
-    } catch (error) {
-      window.alert(t("alerts.couldNotCopyToClipboard"));
-    }
-  } else if (type === "backend") {
-    const appState = getDefaultAppState();
-    if (exportBackground) {
-      appState.viewBackgroundColor = viewBackgroundColor;
-    }
-    exportToBackend(elements, appState);
-  }
-
-  // clean up the DOM
-  if (tempCanvas !== canvas) {
-    tempCanvas.remove();
-  }
-}
-
-function restore(
-  savedElements: readonly ExcalidrawElement[],
-  savedState: AppState | null,
-  opts?: { scrollToContent: boolean },
-): DataState {
-  const elements = savedElements
-    .map(element => {
-      let points: Point[] = [];
-      if (element.type === "arrow") {
-        if (Array.isArray(element.points)) {
-          // if point array is empty, add one point to the arrow
-          // this is used as fail safe to convert incoming data to a valid
-          // arrow. In the new arrow, width and height are not being usde
-          points = element.points.length > 0 ? element.points : [[0, 0]];
-        } else {
-          // convert old arrow type to a new one
-          // old arrow spec used width and height
-          // to determine the endpoints
-          points = [
-            [0, 0],
-            [element.width, element.height],
-          ];
-        }
-      } else if (element.type === "line") {
-        // old spec, pre-arrows
-        // old spec, post-arrows
-        if (!Array.isArray(element.points) || element.points.length === 0) {
-          points = [
-            [0, 0],
-            [element.width, element.height],
-          ];
-        } else {
-          points = element.points;
-        }
-      } else {
-        normalizeDimensions(element);
-      }
-
-      return {
-        ...element,
-        id: element.id || nanoid(),
-        fillStyle: element.fillStyle || "hachure",
-        strokeWidth: element.strokeWidth || 1,
-        roughness: element.roughness || 1,
-        opacity:
-          element.opacity === null || element.opacity === undefined
-            ? 100
-            : element.opacity,
-        points,
-        shape: null,
-        canvas: null,
-        canvasOffsetX: element.canvasOffsetX || 0,
-        canvasOffsetY: element.canvasOffsetY || 0,
-      };
-    })
-    .filter(el => !isInvisiblySmallElement(el));
-
-  if (opts?.scrollToContent && savedState) {
-    savedState = { ...savedState, ...calculateScrollCenter(elements) };
-  }
-
-  if (savedState) {
-    savedState.zoom = savedState.zoom || getDefaultAppState().zoom;
-  }
-
-  return {
-    elements: elements,
-    appState: savedState,
-  };
-}
-
-export function restoreFromLocalStorage() {
-  const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
-  const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
-
-  let elements = [];
-  if (savedElements) {
-    try {
-      elements = JSON.parse(savedElements).map(
-        ({ shape, ...element }: ExcalidrawElement) => element,
-      );
-    } catch (error) {
-      // Do nothing because elements array is already empty
-    }
-  }
-
-  let appState = null;
-  if (savedState) {
-    try {
-      appState = JSON.parse(savedState) as AppState;
-    } catch (error) {
-      // Do nothing because appState is already null
-    }
-  }
-
-  return restore(elements, appState);
-}
-
-export function saveToLocalStorage(
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) {
-  localStorage.setItem(
-    LOCAL_STORAGE_KEY,
-    JSON.stringify(
-      elements.map(
-        ({ shape, canvas, ...element }: ExcalidrawElement) => element,
-      ),
-    ),
-  );
-  localStorage.setItem(
-    LOCAL_STORAGE_KEY_STATE,
-    JSON.stringify(clearAppStateForLocalStorage(appState)),
-  );
-}
-
-export async function loadScene(id: string | null, k?: string) {
-  let data;
-  let selectedId;
-  if (id != null) {
-    // k is the private key used to decrypt the content from the server, take
-    // extra care not to leak it
-    data = await importFromBackend(id, k);
-    selectedId = id;
-    window.history.replaceState({}, "Excalidraw", window.location.origin);
-  } else {
-    data = restoreFromLocalStorage();
-  }
-
-  return {
-    elements: data.elements,
-    appState: data.appState && { ...data.appState, selectedId },
-  };
-}

src/scene/export.ts

@@ -3,7 +3,7 @@ import { ExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
 import { distance, SVG_NS } from "../utils";
-import { normalizeScroll } from "./data";
+import { normalizeScroll } from "./scroll";
 
 export function exportToCanvas(
   elements: readonly ExcalidrawElement[],

src/scene/index.ts

@@ -7,19 +7,9 @@ export {
   getElementsWithinSelection,
   getCommonAttributeOfSelectedElements,
   getSelectedElements,
+  getTargetElement,
 } from "./selection";
-export {
-  exportCanvas,
-  loadFromJSON,
-  loadFromBlob,
-  saveAsJSON,
-  restoreFromLocalStorage,
-  saveToLocalStorage,
-  exportToBackend,
-  importFromBackend,
-  loadScene,
-  calculateScrollCenter,
-} from "./data";
+export { normalizeScroll, calculateScrollCenter } from "./scroll";
 export {
   hasBackground,
   hasStroke,

src/scene/scroll.ts

@@ -0,0 +1,21 @@
+import { FlooredNumber } from "../types";
+import { ExcalidrawElement } from "../element/types";
+import { getCommonBounds } from "../element";
+
+export function normalizeScroll(pos: number) {
+  return Math.floor(pos) as FlooredNumber;
+}
+
+export function calculateScrollCenter(
+  elements: readonly ExcalidrawElement[],
+): { scrollX: FlooredNumber; scrollY: FlooredNumber } {
+  const [x1, y1, x2, y2] = getCommonBounds(elements);
+
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+
+  return {
+    scrollX: normalizeScroll(window.innerWidth / 2 - centerX),
+    scrollY: normalizeScroll(window.innerHeight / 2 - centerY),
+  };
+}

src/scene/selection.ts

@@ -82,3 +82,10 @@ export function getSelectedElements(
 ): readonly ExcalidrawElement[] {
   return elements.filter(element => element.isSelected);
 }
+
+export function getTargetElement(
+  editingElement: ExcalidrawElement | null,
+  elements: readonly ExcalidrawElement[],
+) {
+  return editingElement ? [editingElement] : getSelectedElements(elements);
+}

src/tests/dragCreate.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { App } from "../index";
+import { App } from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { render, fireEvent } from "./test-utils";
@@ -14,7 +14,9 @@ beforeEach(() => {
   renderScene.mockClear();
 });
 
-describe.skip("add element to the scene when pointer dragging long enough", () => {
+const { __TEST__: h } = window;
+
+describe("add element to the scene when pointer dragging long enough", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     // select tool
@@ -33,15 +35,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(4);
-    expect(renderScene.mock.calls[3][1]).toBeNull();
-    const elements = renderScene.mock.calls[3][0];
-
-    expect(elements.length).toEqual(1);
-    expect(elements[0].type).toEqual("rectangle");
-    expect(elements[0].x).toEqual(30);
-    expect(elements[0].y).toEqual(20);
-    expect(elements[0].width).toEqual(30); // 60 - 30
-    expect(elements[0].height).toEqual(50); // 70 - 20
+    expect(h.appState.selectionElement).toBeNull();
+
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].type).toEqual("rectangle");
+    expect(h.elements[0].x).toEqual(30);
+    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
   });
 
   it("ellipse", () => {
@@ -62,15 +63,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(4);
-    expect(renderScene.mock.calls[3][1]).toBeNull();
-
-    const elements = renderScene.mock.calls[3][0];
-    expect(elements.length).toEqual(1);
-    expect(elements[0].type).toEqual("ellipse");
-    expect(elements[0].x).toEqual(30);
-    expect(elements[0].y).toEqual(20);
-    expect(elements[0].width).toEqual(30); // 60 - 30
-    expect(elements[0].height).toEqual(50); // 70 - 20
+    expect(h.appState.selectionElement).toBeNull();
+
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].type).toEqual("ellipse");
+    expect(h.elements[0].x).toEqual(30);
+    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
   });
 
   it("diamond", () => {
@@ -91,15 +91,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(4);
-    expect(renderScene.mock.calls[3][1]).toBeNull();
-
-    const elements = renderScene.mock.calls[3][0];
-    expect(elements.length).toEqual(1);
-    expect(elements[0].type).toEqual("diamond");
-    expect(elements[0].x).toEqual(30);
-    expect(elements[0].y).toEqual(20);
-    expect(elements[0].width).toEqual(30); // 60 - 30
-    expect(elements[0].height).toEqual(50); // 70 - 20
+    expect(h.appState.selectionElement).toBeNull();
+
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].type).toEqual("diamond");
+    expect(h.elements[0].x).toEqual(30);
+    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
   });
 
   it("arrow", () => {
@@ -120,16 +119,15 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(4);
-    expect(renderScene.mock.calls[3][1]).toBeNull();
-    const elements = renderScene.mock.calls[3][0];
-
-    expect(elements.length).toEqual(1);
-    expect(elements[0].type).toEqual("arrow");
-    expect(elements[0].x).toEqual(30);
-    expect(elements[0].y).toEqual(20);
-    expect(elements[0].points.length).toEqual(2);
-    expect(elements[0].points[0]).toEqual([0, 0]);
-    expect(elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
+    expect(h.appState.selectionElement).toBeNull();
+
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].type).toEqual("arrow");
+    expect(h.elements[0].x).toEqual(30);
+    expect(h.elements[0].y).toEqual(20);
+    expect(h.elements[0].points.length).toEqual(2);
+    expect(h.elements[0].points[0]).toEqual([0, 0]);
+    expect(h.elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
   });
 
   it("line", () => {
@@ -150,20 +148,19 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(4);
-    expect(renderScene.mock.calls[3][1]).toBeNull();
-    const elements = renderScene.mock.calls[3][0];
-
-    expect(elements.length).toEqual(1);
-    expect(elements[0].type).toEqual("line");
-    expect(elements[0].x).toEqual(30);
-    expect(elements[0].y).toEqual(20);
-    expect(elements[0].points.length).toEqual(2);
-    expect(elements[0].points[0]).toEqual([0, 0]);
-    expect(elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
+    expect(h.appState.selectionElement).toBeNull();
+
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].type).toEqual("line");
+    expect(h.elements[0].x).toEqual(30);
+    expect(h.elements[0].y).toEqual(20);
+    expect(h.elements[0].points.length).toEqual(2);
+    expect(h.elements[0].points[0]).toEqual([0, 0]);
+    expect(h.elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
   });
 });
 
-describe.skip("do not add element to the scene if size is too small", () => {
+describe("do not add element to the scene if size is too small", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     // select tool
@@ -179,10 +176,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    expect(renderScene.mock.calls[2][1]).toBeNull();
-    const elements = renderScene.mock.calls[2][0];
-
-    expect(elements.length).toEqual(0);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(0);
   });
 
   it("ellipse", () => {
@@ -200,10 +195,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    expect(renderScene.mock.calls[2][1]).toBeNull();
-    const elements = renderScene.mock.calls[2][0];
-
-    expect(elements.length).toEqual(0);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(0);
   });
 
   it("diamond", () => {
@@ -221,10 +214,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    expect(renderScene.mock.calls[2][1]).toBeNull();
-    const elements = renderScene.mock.calls[2][0];
-
-    expect(elements.length).toEqual(0);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(0);
   });
 
   it("arrow", () => {
@@ -245,10 +236,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
     fireEvent.keyDown(document, { key: KEYS.ENTER });
 
     expect(renderScene).toHaveBeenCalledTimes(4);
-    expect(renderScene.mock.calls[3][1]).toBeNull();
-    const elements = renderScene.mock.calls[3][0];
-
-    expect(elements.length).toEqual(0);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(0);
   });
 
   it("line", () => {
@@ -269,9 +258,7 @@ describe.skip("do not add element to the scene if size is too small", () => {
     fireEvent.keyDown(document, { key: KEYS.ENTER });
 
     expect(renderScene).toHaveBeenCalledTimes(4);
-    expect(renderScene.mock.calls[3][1]).toBeNull();
-    const elements = renderScene.mock.calls[3][0];
-
-    expect(elements.length).toEqual(0);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(0);
   });
 });

src/tests/move.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../index";
+import { App } from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 
 // Unmount ReactDOM from root
@@ -13,7 +13,9 @@ beforeEach(() => {
   renderScene.mockClear();
 });
 
-describe.skip("move element", () => {
+const { __TEST__: h } = window;
+
+describe("move element", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     const canvas = container.querySelector("canvas")!;
@@ -27,12 +29,10 @@ describe.skip("move element", () => {
       fireEvent.pointerUp(canvas);
 
       expect(renderScene).toHaveBeenCalledTimes(4);
-      const elements = renderScene.mock.calls[3][0];
-      const selectionElement = renderScene.mock.calls[3][1];
-      expect(selectionElement).toBeNull();
-      expect(elements.length).toEqual(1);
-      expect(elements[0].isSelected).toBeTruthy();
-      expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
+      expect(h.appState.selectionElement).toBeNull();
+      expect(h.elements.length).toEqual(1);
+      expect(h.elements[0].isSelected).toBeTruthy();
+      expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
 
       renderScene.mockClear();
     }
@@ -42,14 +42,13 @@ describe.skip("move element", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    const elements = renderScene.mock.calls[2][0];
-    expect(renderScene.mock.calls[2][1]).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect([elements[0].x, elements[0].y]).toEqual([0, 40]);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect([h.elements[0].x, h.elements[0].y]).toEqual([0, 40]);
   });
 });
 
-describe.skip("duplicate element on move when ALT is clicked", () => {
+describe("duplicate element on move when ALT is clicked", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     const canvas = container.querySelector("canvas")!;
@@ -63,12 +62,10 @@ describe.skip("duplicate element on move when ALT is clicked", () => {
       fireEvent.pointerUp(canvas);
 
       expect(renderScene).toHaveBeenCalledTimes(4);
-      const elements = renderScene.mock.calls[3][0];
-      const selectionElement = renderScene.mock.calls[3][1];
-      expect(selectionElement).toBeNull();
-      expect(elements.length).toEqual(1);
-      expect(elements[0].isSelected).toBeTruthy();
-      expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
+      expect(h.appState.selectionElement).toBeNull();
+      expect(h.elements.length).toEqual(1);
+      expect(h.elements[0].isSelected).toBeTruthy();
+      expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
 
       renderScene.mockClear();
     }
@@ -78,11 +75,10 @@ describe.skip("duplicate element on move when ALT is clicked", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    const elements = renderScene.mock.calls[2][0];
-    expect(renderScene.mock.calls[2][1]).toBeNull();
-    expect(elements.length).toEqual(2);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(2);
     // previous element should stay intact
-    expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
-    expect([elements[1].x, elements[1].y]).toEqual([0, 40]);
+    expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
+    expect([h.elements[1].x, h.elements[1].y]).toEqual([0, 40]);
   });
 });

src/tests/multiPointCreate.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../index";
+import { App } from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 
@@ -14,7 +14,9 @@ beforeEach(() => {
   renderScene.mockClear();
 });
 
-describe.skip("remove shape in non linear elements", () => {
+const { __TEST__: h } = window;
+
+describe("remove shape in non linear elements", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     // select tool
@@ -26,8 +28,7 @@ describe.skip("remove shape in non linear elements", () => {
     fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    const elements = renderScene.mock.calls[2][0];
-    expect(elements.length).toEqual(0);
+    expect(h.elements.length).toEqual(0);
   });
 
   it("ellipse", () => {
@@ -41,8 +42,7 @@ describe.skip("remove shape in non linear elements", () => {
     fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    const elements = renderScene.mock.calls[2][0];
-    expect(elements.length).toEqual(0);
+    expect(h.elements.length).toEqual(0);
   });
 
   it("diamond", () => {
@@ -56,12 +56,11 @@ describe.skip("remove shape in non linear elements", () => {
     fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    const elements = renderScene.mock.calls[2][0];
-    expect(elements.length).toEqual(0);
+    expect(h.elements.length).toEqual(0);
   });
 });
 
-describe.skip("multi point mode in linear elements", () => {
+describe("multi point mode in linear elements", () => {
   it("arrow", () => {
     const { getByToolName, container } = render(<App />);
     // select tool
@@ -86,14 +85,13 @@ describe.skip("multi point mode in linear elements", () => {
     fireEvent.pointerUp(canvas);
     fireEvent.keyDown(document, { key: KEYS.ENTER });
 
-    expect(renderScene).toHaveBeenCalledTimes(8);
-    const elements = renderScene.mock.calls[7][0];
-    expect(elements.length).toEqual(1);
+    expect(renderScene).toHaveBeenCalledTimes(10);
+    expect(h.elements.length).toEqual(1);
 
-    expect(elements[0].type).toEqual("arrow");
-    expect(elements[0].x).toEqual(30);
-    expect(elements[0].y).toEqual(30);
-    expect(elements[0].points).toEqual([
+    expect(h.elements[0].type).toEqual("arrow");
+    expect(h.elements[0].x).toEqual(30);
+    expect(h.elements[0].y).toEqual(30);
+    expect(h.elements[0].points).toEqual([
       [0, 0],
       [20, 30],
       [70, 110],
@@ -124,14 +122,13 @@ describe.skip("multi point mode in linear elements", () => {
     fireEvent.pointerUp(canvas);
     fireEvent.keyDown(document, { key: KEYS.ENTER });
 
-    expect(renderScene).toHaveBeenCalledTimes(8);
-    const elements = renderScene.mock.calls[7][0];
-    expect(elements.length).toEqual(1);
+    expect(renderScene).toHaveBeenCalledTimes(10);
+    expect(h.elements.length).toEqual(1);
 
-    expect(elements[0].type).toEqual("line");
-    expect(elements[0].x).toEqual(30);
-    expect(elements[0].y).toEqual(30);
-    expect(elements[0].points).toEqual([
+    expect(h.elements[0].type).toEqual("line");
+    expect(h.elements[0].x).toEqual(30);
+    expect(h.elements[0].y).toEqual(30);
+    expect(h.elements[0].points).toEqual([
       [0, 0],
       [20, 30],
       [70, 110],

src/tests/queries/toolQueries.ts

@@ -14,9 +14,9 @@ const _getAllByToolName = (container: HTMLElement, tool: string) => {
   return queries.getAllByTitle(container, toolTitle);
 };
 
-const getMultipleError = (c: any, tool: any) =>
+const getMultipleError = (_container: any, tool: any) =>
   `Found multiple elements with tool name: ${tool}`;
-const getMissingError = (c: any, tool: any) =>
+const getMissingError = (_container: any, tool: any) =>
   `Unable to find an element with tool name: ${tool}`;
 
 export const [

src/tests/resize.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../index";
+import { App } from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 
 // Unmount ReactDOM from root
@@ -13,7 +13,9 @@ beforeEach(() => {
   renderScene.mockClear();
 });
 
-describe.skip("resize element", () => {
+const { __TEST__: h } = window;
+
+describe("resize element", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     const canvas = container.querySelector("canvas")!;
@@ -27,12 +29,12 @@ describe.skip("resize element", () => {
       fireEvent.pointerUp(canvas);
 
       expect(renderScene).toHaveBeenCalledTimes(4);
-      const elements = renderScene.mock.calls[3][0];
-      const selectionElement = renderScene.mock.calls[3][1];
-      expect(selectionElement).toBeNull();
-      expect(elements.length).toEqual(1);
-      expect(elements[0].isSelected).toBeTruthy();
-      expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
+      expect(h.appState.selectionElement).toBeNull();
+      expect(h.elements.length).toEqual(1);
+      expect(h.elements[0].isSelected).toBeTruthy();
+      expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
+
+      expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
 
       renderScene.mockClear();
     }
@@ -47,15 +49,14 @@ describe.skip("resize element", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(5);
-    const elements = renderScene.mock.calls[4][0];
-    expect(renderScene.mock.calls[4][1]).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect([elements[0].x, elements[0].y]).toEqual([29, 47]);
-    expect([elements[0].width, elements[0].height]).toEqual([31, 23]);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
+    expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
   });
 });
 
-describe.skip("resize element with aspect ratio when SHIFT is clicked", () => {
+describe("resize element with aspect ratio when SHIFT is clicked", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     const canvas = container.querySelector("canvas")!;
@@ -69,12 +70,12 @@ describe.skip("resize element with aspect ratio when SHIFT is clicked", () => {
       fireEvent.pointerUp(canvas);
 
       expect(renderScene).toHaveBeenCalledTimes(4);
-      const elements = renderScene.mock.calls[3][0];
-      const selectionElement = renderScene.mock.calls[3][1];
-      expect(selectionElement).toBeNull();
-      expect(elements.length).toEqual(1);
-      expect(elements[0].isSelected).toBeTruthy();
-      expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
+      expect(h.appState.selectionElement).toBeNull();
+      expect(h.elements.length).toEqual(1);
+      expect(h.elements[0].isSelected).toBeTruthy();
+      expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
+      expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
+      expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
 
       renderScene.mockClear();
     }
@@ -89,10 +90,9 @@ describe.skip("resize element with aspect ratio when SHIFT is clicked", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(5);
-    const elements = renderScene.mock.calls[4][0];
-    expect(renderScene.mock.calls[4][1]).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect([elements[0].x, elements[0].y]).toEqual([29, 39]);
-    expect([elements[0].width, elements[0].height]).toEqual([31, 31]);
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
+    expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
   });
 });

src/tests/selection.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../index";
+import { App } from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 
@@ -14,7 +14,9 @@ beforeEach(() => {
   renderScene.mockClear();
 });
 
-describe.skip("selection element", () => {
+const { __TEST__: h } = window;
+
+describe("selection element", () => {
   it("create selection element on pointer down", () => {
     const { getByToolName, container } = render(<App />);
     // select tool
@@ -25,7 +27,7 @@ describe.skip("selection element", () => {
     fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 });
 
     expect(renderScene).toHaveBeenCalledTimes(1);
-    const selectionElement = renderScene.mock.calls[0][1]!;
+    const selectionElement = h.appState.selectionElement!;
     expect(selectionElement).not.toBeNull();
     expect(selectionElement.type).toEqual("selection");
     expect([selectionElement.x, selectionElement.y]).toEqual([60, 100]);
@@ -46,7 +48,7 @@ describe.skip("selection element", () => {
     fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 });
 
     expect(renderScene).toHaveBeenCalledTimes(2);
-    const selectionElement = renderScene.mock.calls[1][1]!;
+    const selectionElement = h.appState.selectionElement!;
     expect(selectionElement).not.toBeNull();
     expect(selectionElement.type).toEqual("selection");
     expect([selectionElement.x, selectionElement.y]).toEqual([60, 30]);
@@ -68,12 +70,11 @@ describe.skip("selection element", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(3);
-    const selectionElement = renderScene.mock.calls[2][1];
-    expect(selectionElement).toBeNull();
+    expect(h.appState.selectionElement).toBeNull();
   });
 });
 
-describe.skip("select single element on the scene", () => {
+describe("select single element on the scene", () => {
   it("rectangle", () => {
     const { getByToolName, container } = render(<App />);
     const canvas = container.querySelector("canvas")!;
@@ -94,11 +95,9 @@ describe.skip("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(7);
-    const elements = renderScene.mock.calls[6][0];
-    const selectionElement = renderScene.mock.calls[6][1];
-    expect(selectionElement).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect(elements[0].isSelected).toBeTruthy();
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].isSelected).toBeTruthy();
   });
 
   it("diamond", () => {
@@ -121,11 +120,9 @@ describe.skip("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(7);
-    const elements = renderScene.mock.calls[6][0];
-    const selectionElement = renderScene.mock.calls[6][1];
-    expect(selectionElement).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect(elements[0].isSelected).toBeTruthy();
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].isSelected).toBeTruthy();
   });
 
   it("ellipse", () => {
@@ -148,11 +145,9 @@ describe.skip("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(7);
-    const elements = renderScene.mock.calls[6][0];
-    const selectionElement = renderScene.mock.calls[6][1];
-    expect(selectionElement).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect(elements[0].isSelected).toBeTruthy();
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].isSelected).toBeTruthy();
   });
 
   it("arrow", () => {
@@ -175,11 +170,9 @@ describe.skip("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(7);
-    const elements = renderScene.mock.calls[6][0];
-    const selectionElement = renderScene.mock.calls[6][1];
-    expect(selectionElement).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect(elements[0].isSelected).toBeTruthy();
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].isSelected).toBeTruthy();
   });
 
   it("arrow", () => {
@@ -202,10 +195,8 @@ describe.skip("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderScene).toHaveBeenCalledTimes(7);
-    const elements = renderScene.mock.calls[6][0];
-    const selectionElement = renderScene.mock.calls[6][1];
-    expect(selectionElement).toBeNull();
-    expect(elements.length).toEqual(1);
-    expect(elements[0].isSelected).toBeTruthy();
+    expect(h.appState.selectionElement).toBeNull();
+    expect(h.elements.length).toEqual(1);
+    expect(h.elements[0].isSelected).toBeTruthy();
   });
 });

src/tests/test-utils.ts

@@ -1,3 +1,5 @@
+import "pepjs";
+
 import {
   render,
   queries,

src/utils.ts

@@ -1,3 +1,6 @@
+import { FlooredNumber } from "./types";
+import { getZoomOrigin } from "./scene";
+
 export const SVG_NS = "http://www.w3.org/2000/svg";
 
 export function getDateTime() {
@@ -124,9 +127,57 @@ export function distance(x: number, y: number) {
 export function distance2d(x1: number, y1: number, x2: number, y2: number) {
   const xd = x2 - x1;
   const yd = y2 - y1;
-  return Math.sqrt(xd * xd + yd * yd);
+  return Math.hypot(xd, yd);
 }
 
 export function resetCursor() {
   document.documentElement.style.cursor = "";
 }
+
+export function viewportCoordsToSceneCoords(
+  { clientX, clientY }: { clientX: number; clientY: number },
+  {
+    scrollX,
+    scrollY,
+    zoom,
+  }: {
+    scrollX: FlooredNumber;
+    scrollY: FlooredNumber;
+    zoom: number;
+  },
+  canvas: HTMLCanvasElement | null,
+) {
+  const zoomOrigin = getZoomOrigin(canvas);
+  const clientXWithZoom = zoomOrigin.x + (clientX - zoomOrigin.x) / zoom;
+  const clientYWithZoom = zoomOrigin.y + (clientY - zoomOrigin.y) / zoom;
+
+  const x = clientXWithZoom - scrollX;
+  const y = clientYWithZoom - scrollY;
+
+  return { x, y };
+}
+
+export function sceneCoordsToViewportCoords(
+  { sceneX, sceneY }: { sceneX: number; sceneY: number },
+  {
+    scrollX,
+    scrollY,
+    zoom,
+  }: {
+    scrollX: FlooredNumber;
+    scrollY: FlooredNumber;
+    zoom: number;
+  },
+  canvas: HTMLCanvasElement | null,
+) {
+  const zoomOrigin = getZoomOrigin(canvas);
+  const sceneXWithZoomAndScroll =
+    zoomOrigin.x - (zoomOrigin.x - sceneX - scrollX) * zoom;
+  const sceneYWithZoomAndScroll =
+    zoomOrigin.y - (zoomOrigin.y - sceneY - scrollY) * zoom;
+
+  const x = sceneXWithZoomAndScroll;
+  const y = sceneYWithZoomAndScroll;
+
+  return { x, y };
+}