feat: new mobile layout (#9996)

* compact bottom toolbar * put menu trigger to top left * add popup to switch between grouped tool types * add a dedicated mobile toolbar * update position for mobile * fix active tool type * add mobile mode as well * mobile actions * remove refactored popups * excali logo mobile * include mobile * update mobile menu layout * move selection and deletion back to right * do not fill eraser * fix styling * fix active styling * bigger buttons, smaller gaps * fix other tools not opened * fix: Style panel persistence and restore Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * move hidden action btns to extra popover * fix dropdown overlapping with welcome screen * replace custom popup with popover * improve button styles * swapping redo and delete * always show undo & redo and improve styling * change background * toolbar styles * no any * persist perferred selection tool and align tablet as well * add a renderTopLeftUI to props * tweak border and bg * show combined properties only when using suitable tools * fix preferred tool * new stroke icon * hide color picker hot keys * init preferred tool based on device * fix main menu sizing * fix welcome screen offset * put text before image * disable call highlight on buttons * fix renderTopLeftUI --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2025-10-10 08:48:31 +11:00
parent 98e0cd9078
commit 416e8b3e42
47 changed files with 2407 additions and 678 deletions
@@ -956,6 +956,10 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -1151,6 +1155,10 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -1364,6 +1372,10 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -1694,6 +1706,10 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2024,6 +2040,10 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2237,6 +2257,10 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2477,6 +2501,10 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2774,6 +2802,10 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id3": true,
  },
@@ -3145,6 +3177,10 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -3637,6 +3673,10 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -3959,6 +3999,10 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -4281,6 +4325,10 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id3": true,
  },
@@ -5565,6 +5613,10 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -6781,6 +6833,10 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -7718,6 +7774,10 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -8714,6 +8774,10 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9707,6 +9771,10 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -78,6 +78,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id4": true,
  },
@@ -693,6 +697,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id4": true,
  },
@@ -1181,6 +1189,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -1544,6 +1556,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -1910,6 +1926,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2169,6 +2189,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2613,6 +2637,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2915,6 +2943,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -3233,6 +3265,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -3526,6 +3562,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -3811,6 +3851,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -4045,6 +4089,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -4301,6 +4349,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -4571,6 +4623,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -4799,6 +4855,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -5027,6 +5087,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -5273,6 +5337,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -5528,6 +5596,10 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -5782,6 +5854,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id1": true,
  },
@@ -6101,7 +6177,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "offsetTop": 0,
  "openDialog": null,
  "openMenu": null,
-  "openPopup": "elementBackground",
+  "openPopup": null,
  "openSidebar": null,
  "originSnapOffset": null,
  "pasteDialog": {
@@ -6110,6 +6186,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id8": true,
  },
@@ -6536,6 +6616,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id1": true,
  },
@@ -6912,6 +6996,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -7220,6 +7308,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -7535,6 +7627,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -7764,6 +7860,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -8115,6 +8215,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -8466,6 +8570,10 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -8871,6 +8979,10 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9157,6 +9269,10 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9420,6 +9536,10 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9684,6 +9804,10 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9918,6 +10042,10 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -10211,6 +10339,10 @@ exports[`history > multiplayer undo/redo > should override remotely added points
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -10559,6 +10691,10 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -10797,6 +10933,10 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -11241,6 +11381,10 @@ exports[`history > multiplayer undo/redo > should update history entries after r
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -11500,6 +11644,10 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -11734,6 +11882,10 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -11961,7 +12113,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
  "offsetTop": 0,
  "openDialog": null,
  "openMenu": null,
-  "openPopup": "elementStroke",
+  "openPopup": null,
  "openSidebar": null,
  "originSnapOffset": null,
  "pasteDialog": {
@@ -11970,6 +12122,10 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -12375,6 +12531,10 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -12581,6 +12741,10 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -12790,6 +12954,10 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -13087,6 +13255,10 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -13387,6 +13559,10 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": -50,
@@ -13628,6 +13804,10 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -13864,6 +14044,10 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -14100,6 +14284,10 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -14346,6 +14534,10 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -14679,6 +14871,10 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -14845,6 +15041,10 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -15131,6 +15331,10 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -15393,6 +15597,10 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -15533,7 +15741,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
  "offsetTop": 0,
  "openDialog": null,
  "openMenu": null,
-  "openPopup": "elementBackground",
+  "openPopup": null,
  "openSidebar": null,
  "originSnapOffset": null,
  "pasteDialog": {
@@ -15542,6 +15750,10 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -15826,6 +16038,10 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -15984,6 +16200,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -16688,6 +16908,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -17322,6 +17546,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -17956,6 +18184,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -18674,6 +18906,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -19424,6 +19660,10 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -19903,6 +20143,10 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id1": true,
  },
@@ -20413,6 +20657,10 @@ exports[`history > singleplayer undo/redo > should support element creation, del
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id3": true,
  },
@@ -20871,6 +21119,10 @@ exports[`history > singleplayer undo/redo > should support linear element creati
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -79,6 +79,10 @@ exports[`given element A and group of elements B and given both are selected whe
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -504,6 +508,10 @@ exports[`given element A and group of elements B and given both are selected whe
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -919,6 +927,10 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -1484,6 +1496,10 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -1690,6 +1706,10 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -2073,6 +2093,10 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -2317,6 +2341,10 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -2496,6 +2524,10 @@ exports[`regression tests > can drag element that covers another element, while
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id6": true,
  },
@@ -2820,6 +2852,10 @@ exports[`regression tests > change the properties of a shape > [end of test] app
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -3074,6 +3110,10 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -3314,6 +3354,10 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -3549,6 +3593,10 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id3": true,
  },
@@ -3806,6 +3854,10 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id6": true,
  },
@@ -4119,6 +4171,10 @@ exports[`regression tests > deleting last but one element in editing group shoul
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -4554,6 +4610,10 @@ exports[`regression tests > deselects group of selected elements on pointer down
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -4836,6 +4896,10 @@ exports[`regression tests > deselects group of selected elements on pointer up w
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -5111,6 +5175,10 @@ exports[`regression tests > deselects selected element on pointer down when poin
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -5318,6 +5386,10 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -5517,6 +5589,10 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -5909,6 +5985,10 @@ exports[`regression tests > drags selected elements from point inside common bou
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -6205,6 +6285,10 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -7060,6 +7144,10 @@ exports[`regression tests > given a group of selected elements with an element t
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id6": true,
@@ -7384,7 +7472,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
  "offsetTop": 0,
  "openDialog": null,
  "openMenu": null,
-  "openPopup": "elementBackground",
+  "openPopup": null,
  "openSidebar": null,
  "originSnapOffset": null,
  "pasteDialog": {
@@ -7393,6 +7481,10 @@ exports[`regression tests > given a selected element A and a not selected elemen
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -7671,6 +7763,10 @@ exports[`regression tests > given selected element A with lower z-index than uns
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -7905,6 +8001,10 @@ exports[`regression tests > given selected element A with lower z-index than uns
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -8144,6 +8244,10 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -8323,6 +8427,10 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -8502,6 +8610,10 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -8681,6 +8793,10 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -8910,6 +9026,10 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9137,6 +9257,10 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9332,6 +9456,10 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9561,6 +9689,10 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9740,6 +9872,10 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -9967,6 +10103,10 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -10146,6 +10286,10 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -10341,6 +10485,10 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -10520,6 +10668,10 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -11050,6 +11202,10 @@ exports[`regression tests > noop interaction after undo shouldn't create history
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -11329,6 +11485,10 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": "-6.25000",
@@ -11451,6 +11611,10 @@ exports[`regression tests > shift click on selected element should deselect it o
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -11650,6 +11814,10 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -11968,6 +12136,10 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id3": true,
@@ -12396,6 +12568,10 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
    "id15": true,
@@ -13038,6 +13214,10 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 60,
@@ -13160,6 +13340,10 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id0": true,
  },
@@ -13790,6 +13974,10 @@ exports[`regression tests > switches from group of selected elements to another
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id3": true,
    "id6": true,
@@ -14128,6 +14316,10 @@ exports[`regression tests > switches selected element on pointer down > [end of
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {
    "id3": true,
  },
@@ -14391,6 +14583,10 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 20,
@@ -14513,6 +14709,10 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -14904,6 +15104,10 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,
@@ -15029,6 +15233,10 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
  },
  "penDetected": false,
  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
  "previousSelectedElementIds": {},
  "resizingElement": null,
  "scrollX": 0,