From 9f76f8677baa1e95fc1af011e35f31f87631167b Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Mon, 17 Jul 2023 01:09:44 +0200
Subject: [PATCH] feat: cache most of element selection (#6747)

---
 src/actions/actionAddToLibrary.ts             |   15 +-
 src/actions/actionAlign.tsx                   |   66 +-
 src/actions/actionBoundText.tsx               |   36 +-
 src/actions/actionCanvas.tsx                  |   16 +-
 src/actions/actionClipboard.tsx               |   54 +-
 src/actions/actionDistribute.tsx              |   37 +-
 src/actions/actionDuplicateSelection.tsx      |    1 +
 src/actions/actionElementLock.ts              |   20 +-
 src/actions/actionFlip.ts                     |    6 +-
 src/actions/actionFrame.ts                    |   33 +-
 src/actions/actionGroup.tsx                   |   37 +-
 src/actions/actionLinearEditor.ts             |   30 +-
 src/actions/actionSelectAll.ts                |    1 +
 src/actions/manager.tsx                       |    2 +
 src/actions/types.ts                          |    3 +
 src/components/App.tsx                        |  132 +-
 src/components/ContextMenu.tsx                |    4 +-
 src/components/HintViewer.tsx                 |   19 +-
 src/components/LayerUI.tsx                    |    5 +-
 src/components/MobileMenu.tsx                 |   12 +-
 src/frame.ts                                  |    9 +-
 src/groups.ts                                 |   24 +-
 src/scene/Scene.ts                            |   93 +
 .../__snapshots__/contextmenu.test.tsx.snap   |   72 +-
 .../regressionTests.test.tsx.snap             | 3476 +----------------
 src/tests/zindex.test.tsx                     |    1 +
 src/utility-types.ts                          |    3 +
 27 files changed, 452 insertions(+), 3755 deletions(-)

diff --git a/src/actions/actionAddToLibrary.ts b/src/actions/actionAddToLibrary.ts
index ef69a60d..feb4725e 100644
--- a/src/actions/actionAddToLibrary.ts
+++ b/src/actions/actionAddToLibrary.ts
@@ -1,6 +1,4 @@
 import { register } from "./register";
-import { getSelectedElements } from "../scene";
-import { getNonDeletedElements } from "../element";
 import { deepCopyElement } from "../element/newElement";
 import { randomId } from "../random";
 import { t } from "../i18n";
@@ -9,14 +7,11 @@ export const actionAddToLibrary = register({
   name: "addToLibrary",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      },
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
     if (selectedElements.some((element) => element.type === "image")) {
       return {
         commitToHistory: false,
diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx
index d917f803..5697a707 100644
--- a/src/actions/actionAlign.tsx
+++ b/src/actions/actionAlign.tsx
@@ -13,19 +13,18 @@ import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { AppState } from "../types";
+import { isSomeElementSelected } from "../scene";
+import { AppClassProperties, AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
 const alignActionsPredicate = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  _: unknown,
+  app: AppClassProperties,
 ) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
+  const selectedElements = app.scene.getSelectedElements(appState);
   return (
     selectedElements.length > 1 &&
     // TODO enable aligning frames when implemented properly
@@ -36,12 +35,10 @@ const alignActionsPredicate = (
 const alignSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: Readonly<AppState>,
+  app: AppClassProperties,
   alignment: Alignment,
 ) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
+  const selectedElements = app.scene.getSelectedElements(appState);
 
   const updatedElements = alignElements(selectedElements, alignment);
 
@@ -50,6 +47,7 @@ const alignSelectedElements = (
   return updateFrameMembershipOfSelectedElements(
     elements.map((element) => updatedElementsMap.get(element.id) || element),
     appState,
+    app,
   );
 };
 
@@ -57,10 +55,10 @@ export const actionAlignTop = register({
   name: "alignTop",
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "start",
         axis: "y",
       }),
@@ -69,9 +67,9 @@ export const actionAlignTop = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignTopIcon}
       onClick={() => updateData(null)}
@@ -88,10 +86,10 @@ export const actionAlignBottom = register({
   name: "alignBottom",
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "end",
         axis: "y",
       }),
@@ -100,9 +98,9 @@ export const actionAlignBottom = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignBottomIcon}
       onClick={() => updateData(null)}
@@ -119,10 +117,10 @@ export const actionAlignLeft = register({
   name: "alignLeft",
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "start",
         axis: "x",
       }),
@@ -131,9 +129,9 @@ export const actionAlignLeft = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignLeftIcon}
       onClick={() => updateData(null)}
@@ -150,10 +148,10 @@ export const actionAlignRight = register({
   name: "alignRight",
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "end",
         axis: "x",
       }),
@@ -162,9 +160,9 @@ export const actionAlignRight = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignRightIcon}
       onClick={() => updateData(null)}
@@ -181,19 +179,19 @@ export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "center",
         axis: "y",
       }),
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterVerticallyIcon}
       onClick={() => updateData(null)}
@@ -208,19 +206,19 @@ export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "center",
         axis: "x",
       }),
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterHorizontallyIcon}
       onClick={() => updateData(null)}
diff --git a/src/actions/actionBoundText.tsx b/src/actions/actionBoundText.tsx
index 06f2acda..b4216954 100644
--- a/src/actions/actionBoundText.tsx
+++ b/src/actions/actionBoundText.tsx
@@ -4,7 +4,7 @@ import {
   VERTICAL_ALIGN,
   TEXT_ALIGN,
 } from "../constants";
-import { getNonDeletedElements, isTextElement, newElement } from "../element";
+import { isTextElement, newElement } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import {
   computeBoundTextPosition,
@@ -29,7 +29,6 @@ import {
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
 } from "../element/types";
-import { getSelectedElements } from "../scene";
 import { AppState } from "../types";
 import { Mutable } from "../utility-types";
 import { getFontString } from "../utils";
@@ -39,16 +38,13 @@ export const actionUnbindText = register({
   name: "unbindText",
   contextItemLabel: "labels.unbindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
 
     return selectedElements.some((element) => hasBoundTextElement(element));
   },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     selectedElements.forEach((element) => {
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
@@ -93,8 +89,8 @@ export const actionBindText = register({
   name: "bindText",
   contextItemLabel: "labels.bindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
 
     if (selectedElements.length === 2) {
       const textElement =
@@ -117,11 +113,8 @@ export const actionBindText = register({
     }
     return false;
   },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
 
     let textElement: ExcalidrawTextElement;
     let container: ExcalidrawTextContainer;
@@ -201,16 +194,13 @@ export const actionWrapTextInContainer = register({
   name: "wrapTextInContainer",
   contextItemLabel: "labels.createContainerFromText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     const areTextElements = selectedElements.every((el) => isTextElement(el));
     return selectedElements.length > 0 && areTextElements;
   },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     let updatedElements: readonly ExcalidrawElement[] = elements.slice();
     const containerIds: Mutable<AppState["selectedElementIds"]> = {};
 
diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index ae4a08a9..bc268544 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -6,7 +6,7 @@ import { getCommonBounds, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
-import { getNormalizedZoom, getSelectedElements } from "../scene";
+import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
@@ -302,11 +302,8 @@ export const zoomToFit = ({
 export const actionZoomToFitSelectionInViewport = register({
   name: "zoomToFitSelectionInViewport",
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
       targetElements: selectedElements.length ? selectedElements : elements,
       appState,
@@ -325,11 +322,8 @@ export const actionZoomToFitSelectionInViewport = register({
 export const actionZoomToFitSelection = register({
   name: "zoomToFitSelection",
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
       targetElements: selectedElements.length ? selectedElements : elements,
       appState,
diff --git a/src/actions/actionClipboard.tsx b/src/actions/actionClipboard.tsx
index c1834f51..b3794d0c 100644
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@@ -7,7 +7,6 @@ import {
   probablySupportsClipboardWriteText,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { getSelectedElements } from "../scene/selection";
 import { exportCanvas } from "../data/index";
 import { getNonDeletedElements, isTextElement } from "../element";
 import { t } from "../i18n";
@@ -16,7 +15,8 @@ export const actionCopy = register({
   name: "copy",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const elementsToCopy = getSelectedElements(elements, appState, {
+    const elementsToCopy = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: true,
       includeElementsInFrames: true,
     });
@@ -75,14 +75,11 @@ export const actionCopyAsSvg = register({
         commitToHistory: false,
       };
     }
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      },
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
     try {
       await exportCanvas(
         "clipboard-svg",
@@ -122,14 +119,11 @@ export const actionCopyAsPng = register({
         commitToHistory: false,
       };
     }
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      },
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
     try {
       await exportCanvas(
         "clipboard",
@@ -177,14 +171,11 @@ export const actionCopyAsPng = register({
 export const copyText = register({
   name: "copyText",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      {
-        includeBoundTextElement: true,
-      },
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    });
 
     const text = selectedElements
       .reduce((acc: string[], element) => {
@@ -199,12 +190,15 @@ export const copyText = register({
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState) => {
+  predicate: (elements, appState, _, app) => {
     return (
       probablySupportsClipboardWriteText &&
-      getSelectedElements(elements, appState, {
-        includeBoundTextElement: true,
-      }).some(isTextElement)
+      app.scene
+        .getSelectedElements({
+          selectedElementIds: appState.selectedElementIds,
+          includeBoundTextElement: true,
+        })
+        .some(isTextElement)
     );
   },
   contextItemLabel: "labels.copyText",
diff --git a/src/actions/actionDistribute.tsx b/src/actions/actionDistribute.tsx
index f6ab3f09..d3cdb5c9 100644
--- a/src/actions/actionDistribute.tsx
+++ b/src/actions/actionDistribute.tsx
@@ -9,19 +9,13 @@ import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { AppState } from "../types";
+import { isSomeElementSelected } from "../scene";
+import { AppClassProperties, AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
-const enableActionGroup = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
+const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
+  const selectedElements = app.scene.getSelectedElements(appState);
   return (
     selectedElements.length > 1 &&
     // TODO enable distributing frames when implemented properly
@@ -32,12 +26,10 @@ const enableActionGroup = (
 const distributeSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: Readonly<AppState>,
+  app: AppClassProperties,
   distribution: Distribution,
 ) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
+  const selectedElements = app.scene.getSelectedElements(appState);
 
   const updatedElements = distributeElements(selectedElements, distribution);
 
@@ -46,16 +38,17 @@ const distributeSelectedElements = (
   return updateFrameMembershipOfSelectedElements(
     elements.map((element) => updatedElementsMap.get(element.id) || element),
     appState,
+    app,
   );
 };
 
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: distributeSelectedElements(elements, appState, {
+      elements: distributeSelectedElements(elements, appState, app, {
         space: "between",
         axis: "x",
       }),
@@ -64,9 +57,9 @@ export const distributeHorizontally = register({
   },
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!enableActionGroup(appState, app)}
       type="button"
       icon={DistributeHorizontallyIcon}
       onClick={() => updateData(null)}
@@ -82,10 +75,10 @@ export const distributeHorizontally = register({
 export const distributeVertically = register({
   name: "distributeVertically",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: distributeSelectedElements(elements, appState, {
+      elements: distributeSelectedElements(elements, appState, app, {
         space: "between",
         axis: "y",
       }),
@@ -94,9 +87,9 @@ export const distributeVertically = register({
   },
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!enableActionGroup(appState, app)}
       type="button"
       icon={DistributeVerticallyIcon}
       onClick={() => updateData(null)}
diff --git a/src/actions/actionDuplicateSelection.tsx b/src/actions/actionDuplicateSelection.tsx
index 181e70e7..81dea88f 100644
--- a/src/actions/actionDuplicateSelection.tsx
+++ b/src/actions/actionDuplicateSelection.tsx
@@ -275,6 +275,7 @@ const duplicateElements = (
       },
       getNonDeletedElements(finalElements),
       appState,
+      null,
     ),
   };
 };
diff --git a/src/actions/actionElementLock.ts b/src/actions/actionElementLock.ts
index 20ceef78..cd539c5a 100644
--- a/src/actions/actionElementLock.ts
+++ b/src/actions/actionElementLock.ts
@@ -1,7 +1,6 @@
 import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
 import { KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
 import { arrayToMap } from "../utils";
 import { register } from "./register";
 
@@ -11,14 +10,15 @@ const shouldLock = (elements: readonly ExcalidrawElement[]) =>
 export const actionToggleElementLock = register({
   name: "toggleElementLock",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     return !selectedElements.some(
       (element) => element.locked && element.frameId,
     );
   },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState, {
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: true,
       includeElementsInFrames: true,
     });
@@ -46,8 +46,9 @@ export const actionToggleElementLock = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: (elements, appState) => {
-    const selected = getSelectedElements(elements, appState, {
+  contextItemLabel: (elements, appState, app) => {
+    const selected = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: false,
     });
     if (selected.length === 1 && selected[0].type !== "frame") {
@@ -60,12 +61,13 @@ export const actionToggleElementLock = register({
       ? "labels.elementLock.lockAll"
       : "labels.elementLock.unlockAll";
   },
-  keyTest: (event, appState, elements) => {
+  keyTest: (event, appState, elements, app) => {
     return (
       event.key.toLocaleLowerCase() === KEYS.L &&
       event[KEYS.CTRL_OR_CMD] &&
       event.shiftKey &&
-      getSelectedElements(elements, appState, {
+      app.scene.getSelectedElements({
+        selectedElementIds: appState.selectedElementIds,
         includeBoundTextElement: false,
       }).length > 0
     );
diff --git a/src/actions/actionFlip.ts b/src/actions/actionFlip.ts
index 8199d2f5..8a71a7e0 100644
--- a/src/actions/actionFlip.ts
+++ b/src/actions/actionFlip.ts
@@ -17,11 +17,12 @@ import { updateFrameMembershipOfSelectedElements } from "../frame";
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       elements: updateFrameMembershipOfSelectedElements(
         flipSelectedElements(elements, appState, "horizontal"),
         appState,
+        app,
       ),
       appState,
       commitToHistory: true,
@@ -34,11 +35,12 @@ export const actionFlipHorizontal = register({
 export const actionFlipVertical = register({
   name: "flipVertical",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       elements: updateFrameMembershipOfSelectedElements(
         flipSelectedElements(elements, appState, "vertical"),
         appState,
+        app,
       ),
       appState,
       commitToHistory: true,
diff --git a/src/actions/actionFrame.ts b/src/actions/actionFrame.ts
index 054e5101..7cf6ea4e 100644
--- a/src/actions/actionFrame.ts
+++ b/src/actions/actionFrame.ts
@@ -3,19 +3,12 @@ import { ExcalidrawElement } from "../element/types";
 import { removeAllElementsFromFrame } from "../frame";
 import { getFrameElements } from "../frame";
 import { KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
-import { AppState } from "../types";
+import { AppClassProperties, AppState } from "../types";
 import { setCursorForShape, updateActiveTool } from "../utils";
 import { register } from "./register";
 
-const isSingleFrameSelected = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
+const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
+  const selectedElements = app.scene.getSelectedElements(appState);
 
   return selectedElements.length === 1 && selectedElements[0].type === "frame";
 };
@@ -23,11 +16,8 @@ const isSingleFrameSelected = (
 export const actionSelectAllElementsInFrame = register({
   name: "selectAllElementsInFrame",
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    const selectedFrame = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    )[0];
+  perform: (elements, appState, _, app) => {
+    const selectedFrame = app.scene.getSelectedElements(appState)[0];
 
     if (selectedFrame && selectedFrame.type === "frame") {
       const elementsInFrame = getFrameElements(
@@ -55,17 +45,15 @@ export const actionSelectAllElementsInFrame = register({
     };
   },
   contextItemLabel: "labels.selectAllElementsInFrame",
-  predicate: (elements, appState) => isSingleFrameSelected(elements, appState),
+  predicate: (elements, appState, _, app) =>
+    isSingleFrameSelected(appState, app),
 });
 
 export const actionRemoveAllElementsFromFrame = register({
   name: "removeAllElementsFromFrame",
   trackEvent: { category: "history" },
-  perform: (elements, appState) => {
-    const selectedFrame = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    )[0];
+  perform: (elements, appState, _, app) => {
+    const selectedFrame = app.scene.getSelectedElements(appState)[0];
 
     if (selectedFrame && selectedFrame.type === "frame") {
       return {
@@ -87,7 +75,8 @@ export const actionRemoveAllElementsFromFrame = register({
     };
   },
   contextItemLabel: "labels.removeAllElementsFromFrame",
-  predicate: (elements, appState) => isSingleFrameSelected(elements, appState),
+  predicate: (elements, appState, _, app) =>
+    isSingleFrameSelected(appState, app),
 });
 
 export const actionupdateFrameRendering = register({
diff --git a/src/actions/actionGroup.tsx b/src/actions/actionGroup.tsx
index ddd1a655..82293d7d 100644
--- a/src/actions/actionGroup.tsx
+++ b/src/actions/actionGroup.tsx
@@ -4,7 +4,7 @@ import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 import { UngroupIcon, GroupIcon } from "../components/icons";
 import { newElementWith } from "../element/mutateElement";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import {
   getSelectedGroupIds,
   selectGroup,
@@ -22,7 +22,7 @@ import {
   ExcalidrawFrameElement,
   ExcalidrawTextElement,
 } from "../element/types";
-import { AppState } from "../types";
+import { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
   getElementsInResizingFrame,
@@ -51,14 +51,12 @@ const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  app: AppClassProperties,
 ) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-    {
-      includeBoundTextElement: true,
-    },
-  );
+  const selectedElements = app.scene.getSelectedElements({
+    selectedElementIds: appState.selectedElementIds,
+    includeBoundTextElement: true,
+  });
   return (
     selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
   );
@@ -68,13 +66,10 @@ export const actionGroup = register({
   name: "group",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      {
-        includeBoundTextElement: true,
-      },
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    });
     if (selectedElements.length < 2) {
       // nothing to group
       return { appState, elements, commitToHistory: false };
@@ -164,12 +159,13 @@ export const actionGroup = register({
     };
   },
   contextItemLabel: "labels.group",
-  predicate: (elements, appState) => enableActionGroup(elements, appState),
+  predicate: (elements, appState, _, app) =>
+    enableActionGroup(elements, appState, app),
   keyTest: (event) =>
     !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!enableActionGroup(elements, appState, app)}
       type="button"
       icon={<GroupIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
@@ -191,7 +187,7 @@ export const actionUngroup = register({
 
     let nextElements = [...elements];
 
-    const selectedElements = getSelectedElements(nextElements, appState);
+    const selectedElements = app.scene.getSelectedElements(appState);
     const frames = selectedElements
       .filter((element) => element.frameId)
       .map((element) =>
@@ -219,6 +215,7 @@ export const actionUngroup = register({
       { ...appState, selectedGroupIds: {} },
       getNonDeletedElements(nextElements),
       appState,
+      null,
     );
 
     frames.forEach((frame) => {
diff --git a/src/actions/actionLinearEditor.ts b/src/actions/actionLinearEditor.ts
index 11700f37..83611b02 100644
--- a/src/actions/actionLinearEditor.ts
+++ b/src/actions/actionLinearEditor.ts
@@ -1,8 +1,6 @@
-import { getNonDeletedElements } from "../element";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { isLinearElement } from "../element/typeChecks";
 import { ExcalidrawLinearElement } from "../element/types";
-import { getSelectedElements } from "../scene";
 import { register } from "./register";
 
 export const actionToggleLinearEditor = register({
@@ -10,21 +8,18 @@ export const actionToggleLinearEditor = register({
   trackEvent: {
     category: "element",
   },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       return true;
     }
     return false;
   },
   perform(elements, appState, _, app) {
-    const selectedElement = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      {
-        includeBoundTextElement: true,
-      },
-    )[0] as ExcalidrawLinearElement;
+    const selectedElement = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    })[0] as ExcalidrawLinearElement;
 
     const editingLinearElement =
       appState.editingLinearElement?.elementId === selectedElement.id
@@ -38,14 +33,11 @@ export const actionToggleLinearEditor = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: (elements, appState) => {
-    const selectedElement = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      {
-        includeBoundTextElement: true,
-      },
-    )[0] as ExcalidrawLinearElement;
+  contextItemLabel: (elements, appState, app) => {
+    const selectedElement = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    })[0] as ExcalidrawLinearElement;
     return appState.editingLinearElement?.elementId === selectedElement.id
       ? "labels.lineEditor.exit"
       : "labels.lineEditor.edit";
diff --git a/src/actions/actionSelectAll.ts b/src/actions/actionSelectAll.ts
index 6ba78b93..eeadf2dc 100644
--- a/src/actions/actionSelectAll.ts
+++ b/src/actions/actionSelectAll.ts
@@ -42,6 +42,7 @@ export const actionSelectAll = register({
         },
         getNonDeletedElements(elements),
         appState,
+        app,
       ),
       commitToHistory: true,
     };
diff --git a/src/actions/manager.tsx b/src/actions/manager.tsx
index e52e91da..b68b59d5 100644
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@@ -90,6 +90,7 @@ export class ActionManager {
             event,
             this.getAppState(),
             this.getElementsIncludingDeleted(),
+            this.app,
           ),
       );
 
@@ -168,6 +169,7 @@ export class ActionManager {
           appState={this.getAppState()}
           updateData={updateData}
           appProps={this.app.props}
+          app={this.app}
           data={data}
         />
       );
diff --git a/src/actions/types.ts b/src/actions/types.ts
index ab20a896..1a98320d 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -130,6 +130,7 @@ export type PanelComponentProps = {
   updateData: (formData?: any) => void;
   appProps: ExcalidrawProps;
   data?: Record<string, any>;
+  app: AppClassProperties;
 };
 
 export interface Action {
@@ -141,12 +142,14 @@ export interface Action {
     event: React.KeyboardEvent | KeyboardEvent,
     appState: AppState,
     elements: readonly ExcalidrawElement[],
+    app: AppClassProperties,
   ) => boolean;
   contextItemLabel?:
     | string
     | ((
         elements: readonly ExcalidrawElement[],
         appState: Readonly<AppState>,
+        app: AppClassProperties,
       ) => string);
   predicate?: (
     elements: readonly ExcalidrawElement[],
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 7f747dbd..7f2c98e5 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -798,10 +798,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   public render() {
-    const selectedElement = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElement = this.scene.getSelectedElements(this.state);
     const { renderTopRightUI, renderCustomStats } = this.props;
 
     return (
@@ -858,6 +855,7 @@ class App extends React.Component<AppProps, AppState> {
                             !this.state.zenModeEnabled &&
                             !this.scene.getElementsIncludingDeleted().length
                           }
+                          app={this}
                         >
                           {this.props.children}
                         </LayerUI>
@@ -963,10 +961,7 @@ class App extends React.Component<AppProps, AppState> {
         const shouldUpdateStrokeColor =
           (type === "background" && event.altKey) ||
           (type === "stroke" && !event.altKey);
-        const selectedElements = getSelectedElements(
-          this.scene.getElementsIncludingDeleted(),
-          this.state,
-        );
+        const selectedElements = this.scene.getSelectedElements(this.state);
         if (
           !selectedElements.length ||
           this.state.activeTool.type !== "selection"
@@ -2046,6 +2041,7 @@ class App extends React.Component<AppProps, AppState> {
         },
         this.scene.getNonDeletedElements(),
         this.state,
+        this,
       ),
       () => {
         if (opts.files) {
@@ -2610,14 +2606,11 @@ class App extends React.Component<AppProps, AppState> {
           offsetY = step;
         }
 
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-          {
-            includeBoundTextElement: true,
-            includeElementsInFrames: true,
-          },
-        );
+        const selectedElements = this.scene.getSelectedElements({
+          selectedElementIds: this.state.selectedElementIds,
+          includeBoundTextElement: true,
+          includeElementsInFrames: true,
+        });
 
         selectedElements.forEach((element) => {
           mutateElement(element, {
@@ -2634,10 +2627,7 @@ class App extends React.Component<AppProps, AppState> {
 
         event.preventDefault();
       } else if (event.key === KEYS.ENTER) {
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.length === 1) {
           const selectedElement = selectedElements[0];
           if (event[KEYS.CTRL_OR_CMD]) {
@@ -2713,10 +2703,7 @@ class App extends React.Component<AppProps, AppState> {
         !event.altKey &&
         !event[KEYS.CTRL_OR_CMD]
       ) {
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedElements = this.scene.getSelectedElements(this.state);
         if (
           this.state.activeTool.type === "selection" &&
           !selectedElements.length
@@ -2788,10 +2775,7 @@ class App extends React.Component<AppProps, AppState> {
       this.setState({ isBindingEnabled: true });
     }
     if (isArrowKey(event.key)) {
-      const selectedElements = getSelectedElements(
-        this.scene.getNonDeletedElements(),
-        this.state,
-      );
+      const selectedElements = this.scene.getSelectedElements(this.state);
       isBindingEnabled(this.state)
         ? bindOrUnbindSelectedElements(selectedElements)
         : unbindLinearElements(selectedElements);
@@ -3141,10 +3125,7 @@ class App extends React.Component<AppProps, AppState> {
     }
     let existingTextElement: NonDeleted<ExcalidrawTextElement> | null = null;
 
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
 
     if (selectedElements.length === 1) {
       if (isTextElement(selectedElements[0])) {
@@ -3274,10 +3255,7 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
 
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       if (
@@ -3328,6 +3306,7 @@ class App extends React.Component<AppProps, AppState> {
             },
             this.scene.getNonDeletedElements(),
             prevState,
+            this,
           ),
         );
         return;
@@ -3704,7 +3683,7 @@ class App extends React.Component<AppProps, AppState> {
 
     const elements = this.scene.getNonDeletedElements();
 
-    const selectedElements = getSelectedElements(elements, this.state);
+    const selectedElements = this.scene.getSelectedElements(this.state);
     if (
       selectedElements.length === 1 &&
       !isOverScrollBar &&
@@ -4407,10 +4386,7 @@ class App extends React.Component<AppProps, AppState> {
     event: React.PointerEvent<HTMLElement>,
   ): PointerDownState {
     const origin = viewportCoordsToSceneCoords(event, this.state);
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
     const [minX, minY, maxX, maxY] = getCommonBounds(selectedElements);
 
     return {
@@ -4528,7 +4504,7 @@ class App extends React.Component<AppProps, AppState> {
   ): boolean => {
     if (this.state.activeTool.type === "selection") {
       const elements = this.scene.getNonDeletedElements();
-      const selectedElements = getSelectedElements(elements, this.state);
+      const selectedElements = this.scene.getSelectedElements(this.state);
       if (selectedElements.length === 1 && !this.state.editingLinearElement) {
         const elementWithTransformHandleType =
           getElementWithTransformHandleType(
@@ -4771,6 +4747,7 @@ class App extends React.Component<AppProps, AppState> {
                   },
                   this.scene.getNonDeletedElements(),
                   prevState,
+                  this,
                 );
               });
               pointerDownState.hit.wasAddedToSelection = true;
@@ -5198,7 +5175,7 @@ class App extends React.Component<AppProps, AppState> {
       if (pointerDownState.drag.offset === null) {
         pointerDownState.drag.offset = tupleToCoors(
           getDragOffsetXY(
-            getSelectedElements(this.scene.getNonDeletedElements(), this.state),
+            this.scene.getSelectedElements(this.state),
             pointerDownState.origin.x,
             pointerDownState.origin.y,
           ),
@@ -5361,10 +5338,7 @@ class App extends React.Component<AppProps, AppState> {
           pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) &&
         !isSelectingPointsInLineEditor
       ) {
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedElements = this.scene.getSelectedElements(this.state);
 
         if (selectedElements.every((element) => element.locked)) {
           return;
@@ -5435,14 +5409,18 @@ class App extends React.Component<AppProps, AppState> {
             const groupIdMap = new Map();
             const oldIdToDuplicatedId = new Map();
             const hitElement = pointerDownState.hit.element;
-            const elements = this.scene.getElementsIncludingDeleted();
             const selectedElementIds = new Set(
-              getSelectedElements(elements, this.state, {
-                includeBoundTextElement: true,
-                includeElementsInFrames: true,
-              }).map((element) => element.id),
+              this.scene
+                .getSelectedElements({
+                  selectedElementIds: this.state.selectedElementIds,
+                  includeBoundTextElement: true,
+                  includeElementsInFrames: true,
+                })
+                .map((element) => element.id),
             );
 
+            const elements = this.scene.getNonDeletedElements();
+
             for (const element of elements) {
               if (
                 selectedElementIds.has(element.id) ||
@@ -5584,6 +5562,7 @@ class App extends React.Component<AppProps, AppState> {
                 },
                 this.scene.getNonDeletedElements(),
                 prevState,
+                this,
               ),
             );
           }
@@ -5641,6 +5620,7 @@ class App extends React.Component<AppProps, AppState> {
               },
               this.scene.getNonDeletedElements(),
               prevState,
+              this,
             );
           });
         }
@@ -5740,10 +5720,7 @@ class App extends React.Component<AppProps, AppState> {
           pointerDownState.hit?.element?.id !==
           this.state.selectedLinearElement.elementId
         ) {
-          const selectedELements = getSelectedElements(
-            this.scene.getNonDeletedElements(),
-            this.state,
-          );
+          const selectedELements = this.scene.getSelectedElements(this.state);
           // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles
           if (selectedELements.length > 1) {
             this.setState({ selectedLinearElement: null });
@@ -5985,10 +5962,7 @@ class App extends React.Component<AppProps, AppState> {
             const topLayerFrame =
               this.getTopLayerFrameAtSceneCoords(sceneCoords);
 
-            const selectedElements = getSelectedElements(
-              this.scene.getNonDeletedElements(),
-              this.state,
-            );
+            const selectedElements = this.scene.getSelectedElements(this.state);
             let nextElements = this.scene.getElementsIncludingDeleted();
 
             const updateGroupIdsAfterEditingGroup = (
@@ -6067,6 +6041,7 @@ class App extends React.Component<AppProps, AppState> {
             nextElements = updateFrameMembershipOfSelectedElements(
               this.scene.getElementsIncludingDeleted(),
               this.state,
+              this,
             );
 
             this.scene.replaceAllElements(nextElements);
@@ -6111,14 +6086,14 @@ class App extends React.Component<AppProps, AppState> {
         let nextElements = updateFrameMembershipOfSelectedElements(
           this.scene.getElementsIncludingDeleted(),
           this.state,
+          this,
         );
 
-        const selectedFrames = getSelectedElements(
-          this.scene.getElementsIncludingDeleted(),
-          this.state,
-        ).filter(
-          (element) => element.type === "frame",
-        ) as ExcalidrawFrameElement[];
+        const selectedFrames = this.scene
+          .getSelectedElements(this.state)
+          .filter(
+            (element) => element.type === "frame",
+          ) as ExcalidrawFrameElement[];
 
         for (const frame of selectedFrames) {
           nextElements = replaceAllElementsInFrame(
@@ -6143,10 +6118,7 @@ class App extends React.Component<AppProps, AppState> {
         this.state.selectedLinearElement?.elementId !== hitElement?.id &&
         isLinearElement(hitElement)
       ) {
-        const selectedELements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedELements = this.scene.getSelectedElements(this.state);
         // set selectedLinearElement when no other element selected except
         // the one we've hit
         if (selectedELements.length === 1) {
@@ -6248,7 +6220,7 @@ class App extends React.Component<AppProps, AppState> {
                 delete newSelectedElementIds[hitElement!.id];
                 const newSelectedElements = getSelectedElements(
                   this.scene.getNonDeletedElements(),
-                  { ...prevState, selectedElementIds: newSelectedElementIds },
+                  { selectedElementIds: newSelectedElementIds },
                 );
 
                 return selectGroupsForSelectedElements(
@@ -6267,6 +6239,7 @@ class App extends React.Component<AppProps, AppState> {
                   },
                   this.scene.getNonDeletedElements(),
                   prevState,
+                  this,
                 );
               });
             }
@@ -6303,6 +6276,7 @@ class App extends React.Component<AppProps, AppState> {
                 },
                 this.scene.getNonDeletedElements(),
                 prevState,
+                this,
               );
             });
           } else {
@@ -6333,6 +6307,7 @@ class App extends React.Component<AppProps, AppState> {
               },
               this.scene.getNonDeletedElements(),
               prevState,
+              this,
             ),
           }));
         }
@@ -6392,9 +6367,7 @@ class App extends React.Component<AppProps, AppState> {
       if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
         (isBindingEnabled(this.state)
           ? bindOrUnbindSelectedElements
-          : unbindLinearElements)(
-          getSelectedElements(this.scene.getNonDeletedElements(), this.state),
-        );
+          : unbindLinearElements)(this.scene.getSelectedElements(this.state));
       }
 
       if (!activeTool.locked && activeTool.type !== "freedraw") {
@@ -7101,10 +7074,7 @@ class App extends React.Component<AppProps, AppState> {
       includeLockedElements: true,
     });
 
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
     const isHittignCommonBoundBox =
       this.isHittingCommonBoundingBoxOfSelectedElements(
         { x, y },
@@ -7134,6 +7104,7 @@ class App extends React.Component<AppProps, AppState> {
               },
               this.scene.getNonDeletedElements(),
               this.state,
+              this,
             )
           : this.state),
         showHyperlinkPopup: false,
@@ -7221,10 +7192,7 @@ class App extends React.Component<AppProps, AppState> {
     pointerDownState: PointerDownState,
     event: MouseEvent | KeyboardEvent,
   ): boolean => {
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
     const selectedFrames = selectedElements.filter(
       (element) => element.type === "frame",
     ) as ExcalidrawFrameElement[];
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 1463f103..b9cc7c3a 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -82,7 +82,9 @@ export const ContextMenu = React.memo(
             let label = "";
             if (item.contextItemLabel) {
               if (typeof item.contextItemLabel === "function") {
-                label = t(item.contextItemLabel(elements, appState));
+                label = t(
+                  item.contextItemLabel(elements, appState, actionManager.app),
+                );
               } else {
                 label = t(item.contextItemLabel);
               }
diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx
index a1b6308f..fd4446e4 100644
--- a/src/components/HintViewer.tsx
+++ b/src/components/HintViewer.tsx
@@ -1,7 +1,5 @@
 import { t } from "../i18n";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { getSelectedElements } from "../scene";
-import { Device, UIAppState } from "../types";
+import { AppClassProperties, Device, UIAppState } from "../types";
 import {
   isImageElement,
   isLinearElement,
@@ -15,17 +13,12 @@ import "./HintViewer.scss";
 
 interface HintViewerProps {
   appState: UIAppState;
-  elements: readonly NonDeletedExcalidrawElement[];
   isMobile: boolean;
   device: Device;
+  app: AppClassProperties;
 }
 
-const getHints = ({
-  appState,
-  elements,
-  isMobile,
-  device,
-}: HintViewerProps) => {
+const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
@@ -55,7 +48,7 @@ const getHints = ({
     return t("hints.placeImage");
   }
 
-  const selectedElements = getSelectedElements(elements, appState);
+  const selectedElements = app.scene.getSelectedElements(appState);
 
   if (
     isResizing &&
@@ -115,15 +108,15 @@ const getHints = ({
 
 export const HintViewer = ({
   appState,
-  elements,
   isMobile,
   device,
+  app,
 }: HintViewerProps) => {
   let hint = getHints({
     appState,
-    elements,
     isMobile,
     device,
+    app,
   });
   if (!hint) {
     return null;
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 00707376..100259a8 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -72,6 +72,7 @@ interface LayerUIProps {
   onExportImage: AppClassProperties["onExportImage"];
   renderWelcomeScreen: boolean;
   children?: React.ReactNode;
+  app: AppClassProperties;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -127,6 +128,7 @@ const LayerUI = ({
   onExportImage,
   renderWelcomeScreen,
   children,
+  app,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -240,9 +242,9 @@ const LayerUI = ({
                       >
                         <HintViewer
                           appState={appState}
-                          elements={elements}
                           isMobile={device.isMobile}
                           device={device}
+                          app={app}
                         />
                         {heading}
                         <Stack.Row gap={1}>
@@ -401,6 +403,7 @@ const LayerUI = ({
       )}
       {device.isMobile && (
         <MobileMenu
+          app={app}
           appState={appState}
           elements={elements}
           actionManager={actionManager}
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 20e0edce..30f431cb 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps, UIAppState } from "../types";
+import {
+  AppClassProperties,
+  AppState,
+  Device,
+  ExcalidrawProps,
+  UIAppState,
+} from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -41,6 +47,7 @@ type MobileMenuProps = {
   renderSidebars: () => JSX.Element | null;
   device: Device;
   renderWelcomeScreen: boolean;
+  app: AppClassProperties;
 };
 
 export const MobileMenu = ({
@@ -58,6 +65,7 @@ export const MobileMenu = ({
   renderSidebars,
   device,
   renderWelcomeScreen,
+  app,
 }: MobileMenuProps) => {
   const {
     WelcomeScreenCenterTunnel,
@@ -119,9 +127,9 @@ export const MobileMenu = ({
         </Section>
         <HintViewer
           appState={appState}
-          elements={elements}
           isMobile={true}
           device={device}
+          app={app}
         />
       </FixedSideContainer>
     );
diff --git a/src/frame.ts b/src/frame.ts
index 1028f4c0..8a39a41b 100644
--- a/src/frame.ts
+++ b/src/frame.ts
@@ -16,7 +16,7 @@ import {
 } from "./element/textElement";
 import { arrayToMap, findIndex } from "./utils";
 import { mutateElement } from "./element/mutateElement";
-import { AppState } from "./types";
+import { AppClassProperties, AppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { isFrameElement } from "./element";
 import { moveOneRight } from "./zindex";
@@ -571,8 +571,13 @@ export const replaceAllElementsInFrame = (
 export const updateFrameMembershipOfSelectedElements = (
   allElements: ExcalidrawElementsIncludingDeleted,
   appState: AppState,
+  app: AppClassProperties,
 ) => {
-  const selectedElements = getSelectedElements(allElements, appState);
+  const selectedElements = app.scene.getSelectedElements({
+    selectedElementIds: appState.selectedElementIds,
+    // supplying elements explicitly in case we're passed non-state elements
+    elements: allElements,
+  });
   const elementsToFilter = new Set<ExcalidrawElement>(selectedElements);
 
   if (appState.editingGroupId) {
diff --git a/src/groups.ts b/src/groups.ts
index a3bf134e..c7aa60fc 100644
--- a/src/groups.ts
+++ b/src/groups.ts
@@ -1,5 +1,10 @@
-import { GroupId, ExcalidrawElement, NonDeleted } from "./element/types";
-import { AppState } from "./types";
+import {
+  GroupId,
+  ExcalidrawElement,
+  NonDeleted,
+  NonDeletedExcalidrawElement,
+} from "./element/types";
+import { AppClassProperties, AppState } from "./types";
 import { getSelectedElements } from "./scene";
 import { getBoundTextElement } from "./element/textElement";
 import { makeNextSelectedElementIds } from "./scene/selection";
@@ -67,12 +72,23 @@ export const getSelectedGroupIds = (appState: AppState): GroupId[] =>
  */
 export const selectGroupsForSelectedElements = (
   appState: AppState,
-  elements: readonly NonDeleted<ExcalidrawElement>[],
+  elements: readonly NonDeletedExcalidrawElement[],
   prevAppState: AppState,
+  /**
+   * supply null in cases where you don't have access to App instance and
+   * you don't care about optimizing selectElements retrieval
+   */
+  app: AppClassProperties | null,
 ): AppState => {
   let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
 
-  const selectedElements = getSelectedElements(elements, appState);
+  const selectedElements = app
+    ? app.scene.getSelectedElements({
+        selectedElementIds: appState.selectedElementIds,
+        // supplying elements explicitly in case we're passed non-state elements
+        elements,
+      })
+    : getSelectedElements(elements, appState);
 
   if (!selectedElements.length) {
     return {
diff --git a/src/scene/Scene.ts b/src/scene/Scene.ts
index 06ce6813..5b5b7970 100644
--- a/src/scene/Scene.ts
+++ b/src/scene/Scene.ts
@@ -11,6 +11,9 @@ import {
 } from "../element";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { isFrameElement } from "../element/typeChecks";
+import { getSelectedElements } from "./selection";
+import { AppState } from "../types";
+import { Assert, SameType } from "../utility-types";
 
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
@@ -18,6 +21,31 @@ type ElementKey = ExcalidrawElement | ElementIdKey;
 type SceneStateCallback = () => void;
 type SceneStateCallbackRemover = () => void;
 
+type SelectionHash = string & { __brand: "selectionHash" };
+
+const hashSelectionOpts = (
+  opts: Parameters<InstanceType<typeof Scene>["getSelectedElements"]>[0],
+) => {
+  const keys = ["includeBoundTextElement", "includeElementsInFrames"] as const;
+
+  type HashableKeys = Omit<typeof opts, "selectedElementIds" | "elements">;
+
+  // just to ensure we're hashing all expected keys
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type _ = Assert<
+    SameType<
+      Required<HashableKeys>,
+      Pick<Required<HashableKeys>, typeof keys[number]>
+    >
+  >;
+
+  let hash = "";
+  for (const key of keys) {
+    hash += `${key}:${opts[key] ? "1" : "0"}`;
+  }
+  return hash as SelectionHash;
+};
+
 // ideally this would be a branded type but it'd be insanely hard to work with
 // in our codebase
 export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[];
@@ -68,6 +96,15 @@ class Scene {
   private nonDeletedFrames: readonly NonDeleted<ExcalidrawFrameElement>[] = [];
   private frames: readonly ExcalidrawFrameElement[] = [];
   private elementsMap = new Map<ExcalidrawElement["id"], ExcalidrawElement>();
+  private selectedElementsCache: {
+    selectedElementIds: AppState["selectedElementIds"] | null;
+    elements: readonly NonDeletedExcalidrawElement[] | null;
+    cache: Map<SelectionHash, NonDeletedExcalidrawElement[]>;
+  } = {
+    selectedElementIds: null,
+    elements: null,
+    cache: new Map(),
+  };
 
   getElementsIncludingDeleted() {
     return this.elements;
@@ -81,6 +118,52 @@ class Scene {
     return this.frames;
   }
 
+  getSelectedElements(opts: {
+    // NOTE can be ommitted by making Scene constructor require App instance
+    selectedElementIds: AppState["selectedElementIds"];
+    /**
+     * for specific cases where you need to use elements not from current
+     * scene state. This in effect will likely result in cache-miss, and
+     * the cache won't be updated in this case.
+     */
+    elements?: readonly ExcalidrawElement[];
+    // selection-related options
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+  }): NonDeleted<ExcalidrawElement>[] {
+    const hash = hashSelectionOpts(opts);
+
+    const elements = opts?.elements || this.nonDeletedElements;
+    if (
+      this.selectedElementsCache.elements === elements &&
+      this.selectedElementsCache.selectedElementIds === opts.selectedElementIds
+    ) {
+      const cached = this.selectedElementsCache.cache.get(hash);
+      if (cached) {
+        return cached;
+      }
+    } else if (opts?.elements == null) {
+      // if we're operating on latest scene elements and the cache is not
+      //  storing the latest elements, clear the cache
+      this.selectedElementsCache.cache.clear();
+    }
+
+    const selectedElements = getSelectedElements(
+      elements,
+      { selectedElementIds: opts.selectedElementIds },
+      opts,
+    );
+
+    // cache only if we're not using custom elements
+    if (opts?.elements == null) {
+      this.selectedElementsCache.selectedElementIds = opts.selectedElementIds;
+      this.selectedElementsCache.elements = this.nonDeletedElements;
+      this.selectedElementsCache.cache.set(hash, selectedElements);
+    }
+
+    return selectedElements;
+  }
+
   getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[] {
     return this.nonDeletedFrames;
   }
@@ -168,11 +251,21 @@ class Scene {
   }
 
   destroy() {
+    this.nonDeletedElements = [];
+    this.elements = [];
+    this.nonDeletedFrames = [];
+    this.frames = [];
+    this.elementsMap.clear();
+    this.selectedElementsCache.selectedElementIds = null;
+    this.selectedElementsCache.elements = null;
+    this.selectedElementsCache.cache.clear();
+
     Scene.sceneMapById.forEach((scene, elementKey) => {
       if (scene === this) {
         Scene.sceneMapById.delete(elementKey);
       }
     });
+
     // done not for memory leaks, but to guard against possible late fires
     // (I guess?)
     this.callbacks.clear();
diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap
index 583c809a..0049c919 100644
--- a/src/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -1527,14 +1527,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 449462985,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 2,
-  "versionNonce": 453191,
+  "versionNonce": 449462985,
   "width": 20,
   "x": -10,
   "y": 0,
@@ -1586,14 +1586,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4271,14 +4271,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 449462985,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
-  "versionNonce": 238820263,
+  "versionNonce": 1014066025,
   "width": 20,
   "x": -10,
   "y": 0,
@@ -4303,14 +4303,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 401146281,
+  "seed": 453191,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
-  "versionNonce": 400692809,
+  "versionNonce": 238820263,
   "width": 20,
   "x": 20,
   "y": 30,
@@ -4362,14 +4362,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4405,14 +4405,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4434,14 +4434,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
+          "seed": 453191,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 2019559783,
+          "versionNonce": 401146281,
           "width": 20,
           "x": 20,
           "y": 30,
@@ -4482,14 +4482,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1116226695,
+          "versionNonce": 1150084233,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4513,14 +4513,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
+          "seed": 453191,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1014066025,
+          "versionNonce": 1116226695,
           "width": 20,
           "x": 20,
           "y": 30,
@@ -4557,14 +4557,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 4,
-          "versionNonce": 238820263,
+          "versionNonce": 1014066025,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4586,14 +4586,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
+          "seed": 453191,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 4,
-          "versionNonce": 400692809,
+          "versionNonce": 238820263,
           "width": 20,
           "x": 20,
           "y": 30,
@@ -5585,14 +5585,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 449462985,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
-  "versionNonce": 1014066025,
+  "versionNonce": 1116226695,
   "width": 10,
   "x": -10,
   "y": 0,
@@ -5619,14 +5619,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 401146281,
+  "seed": 453191,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
-  "versionNonce": 238820263,
+  "versionNonce": 1014066025,
   "width": 10,
   "x": 10,
   "y": 0,
@@ -5678,14 +5678,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 10,
           "x": -10,
           "y": 0,
@@ -5721,14 +5721,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 10,
           "x": -10,
           "y": 0,
@@ -5750,14 +5750,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
+          "seed": 453191,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 2019559783,
+          "versionNonce": 401146281,
           "width": 10,
           "x": 10,
           "y": 0,
@@ -5798,14 +5798,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
+          "seed": 1278240551,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1014066025,
+          "versionNonce": 1116226695,
           "width": 10,
           "x": -10,
           "y": 0,
@@ -5829,14 +5829,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
+          "seed": 453191,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 238820263,
+          "versionNonce": 1014066025,
           "width": 10,
           "x": 10,
           "y": 0,
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index fd2c2f5d..03ced1c3 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -104,106 +104,6 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 0,
-  "y": 30,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 238820263,
-  "width": 10,
-  "x": 0,
-  "y": 60,
-}
-`;
-
 exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -548,7 +448,7 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of elements 1`] = `3`;
+exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of elements 1`] = `0`;
 
 exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of renders 1`] = `28`;
 
@@ -658,106 +558,6 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 100,
-  "x": 110,
-  "y": 110,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 100,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 100,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 100,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 100,
-  "x": 220,
-  "y": 220,
-}
-`;
-
 exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -1102,7 +902,7 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of elements 1`] = `3`;
+exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of elements 1`] = `0`;
 
 exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of renders 1`] = `24`;
 
@@ -1203,110 +1003,6 @@ Object {
 }
 `;
 
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 493213705,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 915032327,
-  "width": 10,
-  "x": 30,
-  "y": 0,
-}
-`;
-
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id10",
-  ],
-  "height": 10,
-  "id": "id7",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 400692809,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 81784553,
-  "width": 10,
-  "x": 60,
-  "y": 0,
-}
-`;
-
 exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -2033,7 +1729,7 @@ Object {
 }
 `;
 
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of elements 1`] = `3`;
+exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of renders 1`] = `43`;
 
@@ -2136,38 +1832,6 @@ Object {
 }
 `;
 
-exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 25,
-  "y": 25,
-}
-`;
-
 exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -2274,7 +1938,7 @@ Object {
 }
 `;
 
-exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of elements 1`] = `1`;
+exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of renders 1`] = `12`;
 
@@ -2380,106 +2044,6 @@ Object {
 }
 `;
 
-exports[`regression tests adjusts z order when grouping: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests adjusts z order when grouping: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests adjusts z order when grouping: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 238820263,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests adjusts z order when grouping: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -2824,7 +2388,7 @@ Object {
 }
 `;
 
-exports[`regression tests adjusts z order when grouping: [end of test] number of elements 1`] = `3`;
+exports[`regression tests adjusts z order when grouping: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests adjusts z order when grouping: [end of test] number of renders 1`] = `22`;
 
@@ -2927,70 +2491,6 @@ Object {
 }
 `;
 
-exports[`regression tests alt-drag duplicates an element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 2019559783,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests alt-drag duplicates an element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
 exports[`regression tests alt-drag duplicates an element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -3126,7 +2626,7 @@ Object {
 }
 `;
 
-exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `2`;
+exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests alt-drag duplicates an element: [end of test] number of renders 1`] = `12`;
 
@@ -3227,38 +2727,6 @@ Object {
 }
 `;
 
-exports[`regression tests arrow keys: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 8,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 9,
-  "y": 9,
-}
-`;
-
 exports[`regression tests arrow keys: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -3322,7 +2790,7 @@ Object {
 }
 `;
 
-exports[`regression tests arrow keys: [end of test] number of elements 1`] = `1`;
+exports[`regression tests arrow keys: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests arrow keys: [end of test] number of renders 1`] = `21`;
 
@@ -3425,102 +2893,6 @@ Object {
 }
 `;
 
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 200,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 449462985,
-  "width": 200,
-  "x": 100,
-  "y": 100,
-}
-`;
-
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 200,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 453191,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 200,
-  "x": 300,
-  "y": 300,
-}
-`;
-
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 350,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 2019559783,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1150084233,
-  "width": 350,
-  "x": 300,
-  "y": 300,
-}
-`;
-
 exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -3566,14 +2938,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
+          "seed": 337897,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3609,14 +2981,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
+          "seed": 337897,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3638,14 +3010,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 453191,
+          "seed": 449462985,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 401146281,
+          "versionNonce": 453191,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3681,14 +3053,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
+          "seed": 337897,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3710,14 +3082,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 453191,
+          "seed": 449462985,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 401146281,
+          "versionNonce": 453191,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3739,14 +3111,14 @@ Object {
           "roundness": Object {
             "type": 2,
           },
-          "seed": 2019559783,
+          "seed": 401146281,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
           "updated": 1,
           "version": 2,
-          "versionNonce": 1150084233,
+          "versionNonce": 2019559783,
           "width": 350,
           "x": 300,
           "y": 300,
@@ -3782,14 +3154,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
+          "seed": 337897,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3811,14 +3183,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 453191,
+          "seed": 449462985,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1014066025,
+          "versionNonce": 1116226695,
           "width": 200,
           "x": 300,
           "y": 300,
@@ -3840,14 +3212,14 @@ Object {
           "roundness": Object {
             "type": 2,
           },
-          "seed": 2019559783,
+          "seed": 401146281,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
           "updated": 1,
           "version": 2,
-          "versionNonce": 1150084233,
+          "versionNonce": 2019559783,
           "width": 350,
           "x": 300,
           "y": 300,
@@ -3858,7 +3230,7 @@ Object {
 }
 `;
 
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of elements 1`] = `3`;
+exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of renders 1`] = `20`;
 
@@ -3959,38 +3331,6 @@ Object {
 }
 `;
 
-exports[`regression tests change the properties of a shape: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#ffc9c9",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1971c2",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 5,
-  "versionNonce": 401146281,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests change the properties of a shape: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -4183,7 +3523,7 @@ Object {
 }
 `;
 
-exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `1`;
+exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `14`;
 
@@ -4527,38 +3867,6 @@ Object {
 }
 `;
 
-exports[`regression tests click on an element and drag it: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 2019559783,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests click on an element and drag it: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -4708,7 +4016,7 @@ Object {
 }
 `;
 
-exports[`regression tests click on an element and drag it: [end of test] number of elements 1`] = `1`;
+exports[`regression tests click on an element and drag it: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests click on an element and drag it: [end of test] number of renders 1`] = `15`;
 
@@ -4811,70 +4119,6 @@ Object {
 }
 `;
 
-exports[`regression tests click to select a shape: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests click to select a shape: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
 exports[`regression tests click to select a shape: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -5010,7 +4254,7 @@ Object {
 }
 `;
 
-exports[`regression tests click to select a shape: [end of test] number of elements 1`] = `2`;
+exports[`regression tests click to select a shape: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests click to select a shape: [end of test] number of renders 1`] = `15`;
 
@@ -5114,102 +4358,6 @@ Object {
 }
 `;
 
-exports[`regression tests click-drag to select a group: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests click-drag to select a group: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests click-drag to select a group: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests click-drag to select a group: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -5446,7 +4594,7 @@ Object {
 }
 `;
 
-exports[`regression tests click-drag to select a group: [end of test] number of elements 1`] = `3`;
+exports[`regression tests click-drag to select a group: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests click-drag to select a group: [end of test] number of renders 1`] = `21`;
 
@@ -5604,70 +4752,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 110,
-  "y": 110,
-}
-`;
-
 exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -5803,7 +4887,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `2`;
+exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `16`;
 
@@ -5933,70 +5017,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 110,
-  "y": 110,
-}
-`;
-
 exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -6132,7 +5152,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of elements 1`] = `2`;
+exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of renders 1`] = `17`;
 
@@ -6289,38 +5309,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -6384,7 +5372,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `1`;
+exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `10`;
 
@@ -6485,38 +5473,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 100,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -6580,7 +5536,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of elements 1`] = `1`;
+exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of renders 1`] = `11`;
 
@@ -6681,108 +5637,6 @@ Object {
 }
 `;
 
-exports[`regression tests double click to edit a group: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1150084233,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests double click to edit a group: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests double click to edit a group: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests double click to edit a group: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -7130,7 +5984,7 @@ Object {
 }
 `;
 
-exports[`regression tests double click to edit a group: [end of test] number of elements 1`] = `3`;
+exports[`regression tests double click to edit a group: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests double click to edit a group: [end of test] number of renders 1`] = `20`;
 
@@ -7235,70 +6089,6 @@ Object {
 }
 `;
 
-exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1150084233,
-  "width": 10,
-  "x": 25,
-  "y": 25,
-}
-`;
-
-exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 135,
-  "y": 135,
-}
-`;
-
 exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -7507,7 +6297,7 @@ Object {
 }
 `;
 
-exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of elements 1`] = `2`;
+exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of renders 1`] = `18`;
 
@@ -7606,358 +6396,6 @@ Object {
 }
 `;
 
-exports[`regression tests draw every type of shape: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 20,
-  "x": 10,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 20,
-  "x": 40,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 20,
-  "x": 70,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 3 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id3",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 1150084233,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 50,
-  "x": 130,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 4 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id4",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 238820263,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1604849351,
-  "width": 50,
-  "x": 220,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 5 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 20,
-  "id": "id5",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    80,
-    20,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-    Array [
-      80,
-      20,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 1505387817,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 7,
-  "versionNonce": 1723083209,
-  "width": 80,
-  "x": 310,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 6 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 20,
-  "id": "id6",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    80,
-    20,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-    Array [
-      80,
-      20,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 760410951,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 7,
-  "versionNonce": 406373543,
-  "width": 80,
-  "x": 430,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 7 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id7",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    50,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-    Array [
-      50,
-      10,
-    ],
-  ],
-  "pressures": Array [
-    0,
-    0,
-    0,
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": 941653321,
-  "simulatePressure": false,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "freedraw",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1359939303,
-  "width": 50,
-  "x": 550,
-  "y": -10,
-}
-`;
-
 exports[`regression tests draw every type of shape: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -9922,7 +8360,7 @@ Object {
 }
 `;
 
-exports[`regression tests draw every type of shape: [end of test] number of elements 1`] = `8`;
+exports[`regression tests draw every type of shape: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests draw every type of shape: [end of test] number of renders 1`] = `57`;
 
@@ -10026,102 +8464,6 @@ Object {
 }
 `;
 
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 100,
-  "x": 110,
-  "y": 110,
-}
-`;
-
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 100,
-  "x": 310,
-  "y": 310,
-}
-`;
-
 exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -10358,7 +8700,7 @@ Object {
 }
 `;
 
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of elements 1`] = `3`;
+exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of renders 1`] = `21`;
 
@@ -10462,70 +8804,6 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#ffc9c9",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 1000,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 1000,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#ffc9c9",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 1000,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 1000,
-  "x": 500,
-  "y": 500,
-}
-`;
-
 exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -10661,7 +8939,7 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `2`;
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `19`;
 
@@ -10764,70 +9042,6 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 1000,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": 0,
-  "width": 1000,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 500,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": 0,
-  "width": 500,
-  "x": 500,
-  "y": 500,
-}
-`;
-
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -10920,7 +9134,7 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of elements 1`] = `2`;
+exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of renders 1`] = `12`;
 
@@ -11023,70 +9237,6 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 1000,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 401146281,
-  "width": 1000,
-  "x": 100,
-  "y": 100,
-}
-`;
-
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 500,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": 0,
-  "width": 500,
-  "x": 500,
-  "y": 500,
-}
-`;
-
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11251,7 +9401,7 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of elements 1`] = `2`;
+exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of renders 1`] = `13`;
 
@@ -11352,38 +9502,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 2 selects rectangle tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 2 selects rectangle tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11447,7 +9565,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 2 selects rectangle tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 2 selects rectangle tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 2 selects rectangle tool: [end of test] number of renders 1`] = `9`;
 
@@ -11548,38 +9666,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 3 selects diamond tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 3 selects diamond tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11643,7 +9729,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 3 selects diamond tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 3 selects diamond tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 3 selects diamond tool: [end of test] number of renders 1`] = `9`;
 
@@ -11744,38 +9830,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 4 selects ellipse tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 4 selects ellipse tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11839,7 +9893,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 4 selects ellipse tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 4 selects ellipse tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 4 selects ellipse tool: [end of test] number of renders 1`] = `9`;
 
@@ -11963,53 +10017,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 5 selects arrow tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 5 selects arrow tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12088,7 +10095,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 5 selects arrow tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 5 selects arrow tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 5 selects arrow tool: [end of test] number of renders 1`] = `10`;
 
@@ -12212,53 +10219,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 6 selects line tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 6 selects line tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12337,7 +10297,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 6 selects line tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 6 selects line tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 6 selects line tool: [end of test] number of renders 1`] = `9`;
 
@@ -12436,60 +10396,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 7 selects freedraw tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    10,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "pressures": Array [
-    0,
-    0,
-    0,
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": 337897,
-  "simulatePressure": false,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "freedraw",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 7 selects freedraw tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12573,7 +10479,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 7 selects freedraw tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 7 selects freedraw tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 7 selects freedraw tool: [end of test] number of renders 1`] = `9`;
 
@@ -12697,53 +10603,6 @@ Object {
 }
 `;
 
-exports[`regression tests key a selects arrow tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key a selects arrow tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12822,7 +10681,7 @@ Object {
 }
 `;
 
-exports[`regression tests key a selects arrow tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key a selects arrow tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key a selects arrow tool: [end of test] number of renders 1`] = `10`;
 
@@ -12923,38 +10782,6 @@ Object {
 }
 `;
 
-exports[`regression tests key d selects diamond tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key d selects diamond tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13018,7 +10845,7 @@ Object {
 }
 `;
 
-exports[`regression tests key d selects diamond tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key d selects diamond tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key d selects diamond tool: [end of test] number of renders 1`] = `9`;
 
@@ -13142,53 +10969,6 @@ Object {
 }
 `;
 
-exports[`regression tests key l selects line tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key l selects line tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13267,7 +11047,7 @@ Object {
 }
 `;
 
-exports[`regression tests key l selects line tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key l selects line tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key l selects line tool: [end of test] number of renders 1`] = `9`;
 
@@ -13368,38 +11148,6 @@ Object {
 }
 `;
 
-exports[`regression tests key o selects ellipse tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key o selects ellipse tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13463,7 +11211,7 @@ Object {
 }
 `;
 
-exports[`regression tests key o selects ellipse tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key o selects ellipse tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key o selects ellipse tool: [end of test] number of renders 1`] = `9`;
 
@@ -13562,60 +11310,6 @@ Object {
 }
 `;
 
-exports[`regression tests key p selects freedraw tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    10,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "pressures": Array [
-    0,
-    0,
-    0,
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": 337897,
-  "simulatePressure": false,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "freedraw",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key p selects freedraw tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13699,7 +11393,7 @@ Object {
 }
 `;
 
-exports[`regression tests key p selects freedraw tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key p selects freedraw tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key p selects freedraw tool: [end of test] number of renders 1`] = `9`;
 
@@ -13800,38 +11494,6 @@ Object {
 }
 `;
 
-exports[`regression tests key r selects rectangle tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key r selects rectangle tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13895,7 +11557,7 @@ Object {
 }
 `;
 
-exports[`regression tests key r selects rectangle tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key r selects rectangle tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key r selects rectangle tool: [end of test] number of renders 1`] = `9`;
 
@@ -14004,210 +11666,6 @@ Object {
 }
 `;
 
-exports[`regression tests make a group and duplicate it: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4_copy",
-  ],
-  "height": 10,
-  "id": "id0_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 915032327,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 5,
-  "versionNonce": 81784553,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4_copy",
-  ],
-  "height": 10,
-  "id": "id1_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 747212839,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 5,
-  "versionNonce": 1723083209,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4_copy",
-  ],
-  "height": 10,
-  "id": "id2_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 760410951,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 5,
-  "versionNonce": 1006504105,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 3 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1505387817,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 4 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 23633383,
-  "width": 10,
-  "x": 40,
-  "y": 20,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 5 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 493213705,
-  "width": 10,
-  "x": 60,
-  "y": 20,
-}
-`;
-
 exports[`regression tests make a group and duplicate it: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -14759,7 +12217,7 @@ Object {
 }
 `;
 
-exports[`regression tests make a group and duplicate it: [end of test] number of elements 1`] = `6`;
+exports[`regression tests make a group and duplicate it: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests make a group and duplicate it: [end of test] number of renders 1`] = `24`;
 
@@ -14862,70 +12320,6 @@ Object {
 }
 `;
 
-exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
 exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -15061,7 +12455,7 @@ Object {
 }
 `;
 
-exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] number of elements 1`] = `2`;
+exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] number of renders 1`] = `21`;
 
@@ -15400,38 +12794,6 @@ Object {
 }
 `;
 
-exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -15495,7 +12857,7 @@ Object {
 }
 `;
 
-exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] number of elements 1`] = `1`;
+exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] number of renders 1`] = `11`;
 
@@ -15600,70 +12962,6 @@ Object {
 }
 `;
 
-exports[`regression tests shift-click to multiselect, then drag: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
-exports[`regression tests shift-click to multiselect, then drag: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 40,
-  "y": 20,
-}
-`;
-
 exports[`regression tests shift-click to multiselect, then drag: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -15872,7 +13170,7 @@ Object {
 }
 `;
 
-exports[`regression tests shift-click to multiselect, then drag: [end of test] number of elements 1`] = `2`;
+exports[`regression tests shift-click to multiselect, then drag: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests shift-click to multiselect, then drag: [end of test] number of renders 1`] = `20`;
 
@@ -15979,102 +13277,6 @@ Object {
 }
 `;
 
-exports[`regression tests should group elements and ungroup them: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 23633383,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests should group elements and ungroup them: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 493213705,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests should group elements and ungroup them: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 915032327,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests should group elements and ungroup them: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -16525,7 +13727,7 @@ Object {
 }
 `;
 
-exports[`regression tests should group elements and ungroup them: [end of test] number of elements 1`] = `3`;
+exports[`regression tests should group elements and ungroup them: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests should group elements and ungroup them: [end of test] number of renders 1`] = `25`;
 
@@ -16626,38 +13828,6 @@ Object {
 }
 `;
 
-exports[`regression tests should show fill icons when element has non transparent background: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#ffc9c9",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests should show fill icons when element has non transparent background: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -16764,7 +13934,7 @@ Object {
 }
 `;
 
-exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of elements 1`] = `1`;
+exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of renders 1`] = `13`;
 
@@ -16875,146 +14045,6 @@ Object {
 }
 `;
 
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 81784553,
-  "width": 10,
-  "x": 10,
-  "y": 0,
-}
-`;
-
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 747212839,
-  "width": 10,
-  "x": 50,
-  "y": 0,
-}
-`;
-
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id9",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id5",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1014066025,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1723083209,
-  "width": 10,
-  "x": 10,
-  "y": 50,
-}
-`;
-
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 3 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id9",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id6",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 400692809,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 760410951,
-  "width": 10,
-  "x": 50,
-  "y": 50,
-}
-`;
-
 exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -17756,7 +14786,7 @@ Object {
 }
 `;
 
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] number of elements 1`] = `4`;
+exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] number of renders 1`] = `39`;
 
@@ -17978,110 +15008,6 @@ Object {
 }
 `;
 
-exports[`regression tests supports nested groups: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 50,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 50,
-  "x": 100,
-  "y": 100,
-}
-`;
-
-exports[`regression tests supports nested groups: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id5",
-    "id3",
-  ],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 400692809,
-  "width": 50,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests supports nested groups: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [
-    "id5",
-    "id3",
-  ],
-  "height": 50,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1604849351,
-  "width": 50,
-  "x": 200,
-  "y": 200,
-}
-`;
-
 exports[`regression tests supports nested groups: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -18762,7 +15688,7 @@ Object {
 }
 `;
 
-exports[`regression tests supports nested groups: [end of test] number of elements 1`] = `3`;
+exports[`regression tests supports nested groups: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests supports nested groups: [end of test] number of renders 1`] = `32`;
 
@@ -18922,102 +15848,6 @@ Object {
 }
 `;
 
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 100,
-  "x": 110,
-  "y": 110,
-}
-`;
-
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 100,
-  "x": 310,
-  "y": 310,
-}
-`;
-
 exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -19254,7 +16084,7 @@ Object {
 }
 `;
 
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] number of elements 1`] = `3`;
+exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] number of renders 1`] = `20`;
 
@@ -19413,70 +16243,6 @@ Object {
 }
 `;
 
-exports[`regression tests switches selected element on pointer down: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests switches selected element on pointer down: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
 exports[`regression tests switches selected element on pointer down: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -19612,7 +16378,7 @@ Object {
 }
 `;
 
-exports[`regression tests switches selected element on pointer down: [end of test] number of elements 1`] = `2`;
+exports[`regression tests switches selected element on pointer down: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests switches selected element on pointer down: [end of test] number of renders 1`] = `14`;
 
@@ -19832,120 +16598,6 @@ Object {
 }
 `;
 
-exports[`regression tests undo/redo drawing an element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 6,
-  "versionNonce": 760410951,
-  "width": 20,
-  "x": 10,
-  "y": -10,
-}
-`;
-
-exports[`regression tests undo/redo drawing an element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 20,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 6,
-  "versionNonce": 1006504105,
-  "width": 30,
-  "x": 40,
-  "y": 0,
-}
-`;
-
-exports[`regression tests undo/redo drawing an element: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": true,
-  "lastCommittedPoint": Array [
-    60,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      60,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 9,
-  "versionNonce": 81784553,
-  "width": 60,
-  "x": 130,
-  "y": 10,
-}
-`;
-
 exports[`regression tests undo/redo drawing an element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -20324,7 +16976,7 @@ Object {
 }
 `;
 
-exports[`regression tests undo/redo drawing an element: [end of test] number of elements 1`] = `3`;
+exports[`regression tests undo/redo drawing an element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests undo/redo drawing an element: [end of test] number of renders 1`] = `31`;
 
diff --git a/src/tests/zindex.test.tsx b/src/tests/zindex.test.tsx
index de3292af..de421338 100644
--- a/src/tests/zindex.test.tsx
+++ b/src/tests/zindex.test.tsx
@@ -90,6 +90,7 @@ const populateElements = (
       { ...h.state, ...appState, selectedElementIds },
       h.elements,
       h.state,
+      null,
     ),
     ...appState,
     selectedElementIds,
diff --git a/src/utility-types.ts b/src/utility-types.ts
index b84eb199..047eceec 100644
--- a/src/utility-types.ts
+++ b/src/utility-types.ts
@@ -47,3 +47,6 @@ export type ForwardRef<T, P = any> = Parameters<
 export type ExtractSetType<T extends Set<any>> = T extends Set<infer U>
   ? U
   : never;
+
+export type SameType<T, U> = T extends U ? (U extends T ? true : false) : false;
+export type Assert<T extends true> = T;