feat: split gridSize from enabled state & support custom gridStep (#8364)

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -48,7 +48,9 @@ exports[`given element A and group of elements B and given both are selected whe
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -457,7 +459,9 @@ exports[`given element A and group of elements B and given both are selected whe
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -857,7 +861,9 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": false,
   "isLoading": false,
@@ -1396,7 +1402,9 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -1594,7 +1602,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -1963,7 +1973,9 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2197,7 +2209,9 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2371,7 +2385,9 @@ exports[`regression tests > can drag element that covers another element, while
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2685,7 +2701,9 @@ exports[`regression tests > change the properties of a shape > [end of test] app
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -2925,7 +2943,9 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -3162,7 +3182,9 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -3386,7 +3408,9 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -3636,7 +3660,9 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -3941,7 +3967,9 @@ exports[`regression tests > deleting last but one element in editing group shoul
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -4349,7 +4377,9 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -4626,7 +4656,9 @@ exports[`regression tests > deselects group of selected elements on pointer up w
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -4873,7 +4905,9 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -5077,7 +5111,9 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -5270,7 +5306,9 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -5646,7 +5684,9 @@ exports[`regression tests > drags selected elements from point inside common bou
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -5930,7 +5970,9 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -6732,7 +6774,9 @@ exports[`regression tests > given a group of selected elements with an element t
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -7056,7 +7100,9 @@ exports[`regression tests > given a selected element A and a not selected elemen
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -7326,7 +7372,9 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -7554,7 +7602,9 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -7785,7 +7835,9 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -7959,7 +8011,9 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -8133,7 +8187,9 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -8307,7 +8363,9 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -8523,7 +8581,9 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -8738,7 +8798,9 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -8926,7 +8988,9 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -9142,7 +9206,9 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -9316,7 +9382,9 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -9531,7 +9599,9 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -9705,7 +9775,9 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -9893,7 +9965,9 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -10067,7 +10141,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -10575,7 +10651,9 @@ exports[`regression tests > noop interaction after undo shouldn't create history
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -10846,7 +10924,9 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -10966,7 +11046,9 @@ exports[`regression tests > shift click on selected element should deselect it o
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -11159,7 +11241,9 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -11464,7 +11548,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -11870,7 +11956,9 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -12477,7 +12565,9 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -12600,7 +12690,9 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -13178,7 +13270,9 @@ exports[`regression tests > switches from group of selected elements to another
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -13510,7 +13604,9 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -13769,7 +13865,9 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -13889,7 +13987,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -14262,7 +14362,9 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -14382,7 +14484,9 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
     "outline": true,
   },
   "frameToHighlight": null,
-  "gridSize": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,