refactor: Remove the grid size and have a boolean instead

src/actions/actionCanvas.tsx

@@ -64,7 +64,7 @@ export const actionClearCanvas = register({
         elementLocked: appState.elementLocked,
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,
-        gridSize: appState.gridSize,
+        showGrid: appState.showGrid,
         shouldAddWatermark: appState.shouldAddWatermark,
         showStats: appState.showStats,
       },

src/appState.ts

@@ -65,7 +65,7 @@ export const getDefaultAppState = (): Omit<
     showShortcutsDialog: false,
     suggestedBindings: [],
     zenModeEnabled: false,
-    gridSize: null,
+    showGrid: false,
     editingGroupId: null,
     selectedGroupIds: {},
     width: window.innerWidth,
@@ -120,7 +120,7 @@ const APP_STATE_STORAGE_CONF = (<
   errorMessage: { browser: false, export: false },
   exportBackground: { browser: true, export: false },
   exportEmbedScene: { browser: true, export: false },
-  gridSize: { browser: true, export: true },
+  showGrid: { browser: true, export: false },
   height: { browser: false, export: false },
   isBindingEnabled: { browser: false, export: false },
   isLibraryOpen: { browser: false, export: false },

src/components/App.tsx

@@ -1036,7 +1036,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const dy = y - elementsCenterY;
     const groupIdMap = new Map();
 
-    const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
+    const [gridX, gridY] = getGridPoint(dx, dy, this.state.showGrid);
 
     const oldIdToDuplicatedId = new Map();
     const newElements = clipboardElements.map((element) => {
@@ -1149,7 +1149,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
   toggleGridMode = () => {
     this.setState({
-      gridSize: this.state.gridSize ? null : GRID_SIZE,
+      showGrid: !this.state.showGrid,
     });
   };
 
@@ -1275,8 +1275,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     if (isArrowKey(event.key)) {
       const step =
-        (this.state.gridSize &&
+        (this.state.showGrid &&
-          (event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize)) ||
+          (event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : GRID_SIZE)) ||
         (event.shiftKey
           ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
           : ELEMENT_TRANSLATE_AMOUNT);
@@ -1819,7 +1819,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         scenePointerX,
         scenePointerY,
         this.state.editingLinearElement,
-        this.state.gridSize,
+        this.state.showGrid,
       );
       if (editingLinearElement !== this.state.editingLinearElement) {
         this.setState({ editingLinearElement });
@@ -2249,7 +2249,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     return {
       origin,
       originInGrid: tupleToCoors(
-        getGridPoint(origin.x, origin.y, this.state.gridSize),
+        getGridPoint(origin.x, origin.y, this.state.showGrid),
       ),
       scrollbars: isOverScrollBars(
         currentScrollBars,
@@ -2607,7 +2607,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        elementType === "draw" ? null : this.state.gridSize,
+        elementType === "draw" ? false : this.state.showGrid,
       );
 
       /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
@@ -2669,7 +2669,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const [gridX, gridY] = getGridPoint(
       pointerDownState.origin.x,
       pointerDownState.origin.y,
-      this.state.gridSize,
+      this.state.showGrid,
     );
     const element = newElement({
       type: elementType,
@@ -2758,7 +2758,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerCoords.x,
         pointerCoords.y,
-        this.state.gridSize,
+        this.state.showGrid,
       );
 
       // for arrows/lines, don't start dragging until a given threshold
@@ -2830,7 +2830,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           const [dragX, dragY] = getGridPoint(
             pointerCoords.x - pointerDownState.drag.offset.x,
             pointerCoords.y - pointerDownState.drag.offset.y,
-            this.state.gridSize,
+            this.state.showGrid,
           );
 
           const [dragDistanceX, dragDistanceY] = [
@@ -2882,7 +2882,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
                 const [originDragX, originDragY] = getGridPoint(
                   pointerDownState.origin.x - pointerDownState.drag.offset.x,
                   pointerDownState.origin.y - pointerDownState.drag.offset.y,
-                  this.state.gridSize,
+                  this.state.showGrid,
                 );
                 mutateElement(duplicatedElement, {
                   x: duplicatedElement.x + (originDragX - dragX),
@@ -3542,7 +3542,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerCoords.x,
         pointerCoords.y,
-        this.state.gridSize,
+        this.state.showGrid,
       );
       dragNewElement(
         draggingElement,
@@ -3580,7 +3580,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const [resizeX, resizeY] = getGridPoint(
       pointerCoords.x - pointerDownState.resize.offset.x,
       pointerCoords.y - pointerDownState.resize.offset.y,
-      this.state.gridSize,
+      this.state.showGrid,
     );
     if (
       transformElements(
@@ -3644,7 +3644,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             CANVAS_ONLY_ACTIONS.includes(action.name),
           ),
           {
-            checked: this.state.gridSize !== null,
+            checked: this.state.showGrid,
             shortcutName: "gridMode",
             label: t("labels.gridMode"),
             action: this.toggleGridMode,

src/constants.ts

@@ -73,7 +73,7 @@ export const DEFAULT_VERTICAL_ALIGN = "top";
 
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 
-export const GRID_SIZE = 20; // TODO make it configurable?
+export const GRID_SIZE = 20;
 
 export const MIME_TYPES = {
   excalidraw: "application/vnd.excalidraw+json",

src/element/linearElementEditor.ts

@@ -102,7 +102,7 @@ export class LinearElementEditor {
         element,
         scenePointerX - editingLinearElement.pointerOffset.x,
         scenePointerY - editingLinearElement.pointerOffset.y,
-        appState.gridSize,
+        appState.showGrid,
       );
       LinearElementEditor.movePoint(element, activePointIndex, newPoint);
       if (isBindingElement(element)) {
@@ -198,7 +198,7 @@ export class LinearElementEditor {
               element,
               scenePointer.x,
               scenePointer.y,
-              appState.gridSize,
+              appState.showGrid,
             ),
           ],
         });
@@ -282,7 +282,7 @@ export class LinearElementEditor {
     scenePointerX: number,
     scenePointerY: number,
     editingLinearElement: LinearElementEditor,
-    gridSize: number | null,
+    isGridOn: boolean,
   ): LinearElementEditor {
     const { elementId, lastUncommittedPoint } = editingLinearElement;
     const element = LinearElementEditor.getElement(elementId);
@@ -304,7 +304,7 @@ export class LinearElementEditor {
       element,
       scenePointerX - editingLinearElement.pointerOffset.x,
       scenePointerY - editingLinearElement.pointerOffset.y,
-      gridSize,
+      isGridOn,
     );
 
     if (lastPoint === lastUncommittedPoint) {
@@ -398,9 +398,9 @@ export class LinearElementEditor {
     element: NonDeleted<ExcalidrawLinearElement>,
     scenePointerX: number,
     scenePointerY: number,
-    gridSize: number | null,
+    isGridOn: boolean,
   ): Point {
-    const pointerOnGrid = getGridPoint(scenePointerX, scenePointerY, gridSize);
+    const pointerOnGrid = getGridPoint(scenePointerX, scenePointerY, isGridOn);
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;

src/math.ts

@@ -1,5 +1,5 @@
 import { Point } from "./types";
-import { LINE_CONFIRM_THRESHOLD } from "./constants";
+import { GRID_SIZE, LINE_CONFIRM_THRESHOLD } from "./constants";
 import { ExcalidrawLinearElement } from "./element/types";
 
 export const rotate = (
@@ -307,12 +307,12 @@ const doSegmentsIntersect = (p1: Point, q1: Point, p2: Point, q2: Point) => {
 export const getGridPoint = (
   x: number,
   y: number,
-  gridSize: number | null,
+  isGridOn: boolean,
 ): [number, number] => {
-  if (gridSize) {
+  if (isGridOn) {
     return [
-      Math.round(x / gridSize) * gridSize,
+      Math.round(x / GRID_SIZE) * GRID_SIZE,
-      Math.round(y / gridSize) * gridSize,
+      Math.round(y / GRID_SIZE) * GRID_SIZE,
     ];
   }
   return [x, y];

src/packages/utils/README.md

@@ -75,7 +75,6 @@ const excalidrawDiagram = {
   ],
   appState: {
     viewBackgroundColor: "#ffffff",
-    gridSize: null,
   },
 };
 

src/renderer/renderScene.ts

@@ -48,6 +48,7 @@ import {
   TransformHandleType,
 } from "../element/transformHandles";
 import { viewportCoordsToSceneCoords } from "../utils";
+import { GRID_SIZE } from "../constants";
 
 const strokeRectWithRotation = (
   context: CanvasRenderingContext2D,
@@ -118,7 +119,6 @@ const fillCircle = (
 
 const strokeGrid = (
   context: CanvasRenderingContext2D,
-  gridSize: number,
   offsetX: number,
   offsetY: number,
   width: number,
@@ -127,13 +127,13 @@ const strokeGrid = (
   const origStrokeStyle = context.strokeStyle;
   context.strokeStyle = "rgba(0,0,0,0.1)";
   context.beginPath();
-  for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {
+  for (let x = offsetX; x < offsetX + width + GRID_SIZE * 2; x += GRID_SIZE) {
-    context.moveTo(x, offsetY - gridSize);
+    context.moveTo(x, offsetY - GRID_SIZE);
-    context.lineTo(x, offsetY + height + gridSize * 2);
+    context.lineTo(x, offsetY + height + GRID_SIZE * 2);
   }
-  for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {
+  for (let y = offsetY; y < offsetY + height + GRID_SIZE * 2; y += GRID_SIZE) {
-    context.moveTo(offsetX - gridSize, y);
+    context.moveTo(offsetX - GRID_SIZE, y);
-    context.lineTo(offsetX + width + gridSize * 2, y);
+    context.lineTo(offsetX + width + GRID_SIZE * 2, y);
   }
   context.stroke();
   context.strokeStyle = origStrokeStyle;
@@ -233,16 +233,15 @@ export const renderScene = (
   context.scale(sceneState.zoom.value, sceneState.zoom.value);
 
   // Grid
-  if (renderGrid && appState.gridSize) {
+  if (renderGrid && appState.showGrid) {
     strokeGrid(
       context,
-      appState.gridSize,
+      -Math.ceil(zoomTranslationX / sceneState.zoom.value / GRID_SIZE) *
-      -Math.ceil(zoomTranslationX / sceneState.zoom.value / appState.gridSize) *
+        GRID_SIZE +
-        appState.gridSize +
+        (sceneState.scrollX % GRID_SIZE),
-        (sceneState.scrollX % appState.gridSize),
+      -Math.ceil(zoomTranslationY / sceneState.zoom.value / GRID_SIZE) *
-      -Math.ceil(zoomTranslationY / sceneState.zoom.value / appState.gridSize) *
+        GRID_SIZE +
-        appState.gridSize +
+        (sceneState.scrollY % GRID_SIZE),
-        (sceneState.scrollY % appState.gridSize),
       normalizedCanvasWidth / sceneState.zoom.value,
       normalizedCanvasHeight / sceneState.zoom.value,
     );

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -31,7 +31,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -67,6 +66,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -486,7 +486,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -529,6 +528,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -947,7 +947,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": false,
   "isLibraryOpen": false,
@@ -973,6 +972,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -1717,7 +1717,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -1745,6 +1744,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -1915,7 +1915,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -1948,6 +1947,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -2367,7 +2367,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -2395,6 +2394,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -2614,7 +2614,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -2639,6 +2638,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -2772,7 +2772,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -2800,6 +2799,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -3243,7 +3243,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -3268,6 +3267,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -3545,7 +3545,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -3573,6 +3572,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -3743,7 +3743,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -3773,6 +3772,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -3981,7 +3981,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -4009,6 +4008,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -4227,7 +4227,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -4256,6 +4255,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -4604,7 +4604,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -4653,6 +4652,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -4893,7 +4893,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -4920,6 +4919,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -5194,7 +5194,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -5241,6 +5240,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -5396,7 +5396,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -5421,6 +5420,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -5554,7 +5554,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -5579,6 +5578,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -6001,7 +6001,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -6033,6 +6032,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -6313,7 +6313,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -6338,6 +6337,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -8341,7 +8341,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -8371,6 +8370,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -8697,7 +8697,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -8728,6 +8727,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -8946,7 +8946,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -8975,6 +8974,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -9193,7 +9193,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -9223,6 +9222,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -9502,7 +9502,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -9527,6 +9526,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -9660,7 +9660,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -9685,6 +9684,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -9818,7 +9818,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -9843,6 +9842,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -9976,7 +9976,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -10001,6 +10000,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -10164,7 +10164,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -10189,6 +10188,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -10352,7 +10352,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -10377,6 +10376,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -10540,7 +10540,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -10565,6 +10564,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -10728,7 +10728,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -10753,6 +10752,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -10886,7 +10886,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -10911,6 +10910,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -11044,7 +11044,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -11069,6 +11068,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -11232,7 +11232,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -11257,6 +11256,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -11390,7 +11390,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -11415,6 +11414,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -11578,7 +11578,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -11614,6 +11613,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -12288,7 +12288,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -12317,6 +12316,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -12535,7 +12535,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -12560,6 +12559,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": true,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -12631,7 +12631,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -12654,6 +12653,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -12725,7 +12725,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -12750,6 +12749,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -12883,7 +12883,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -12908,6 +12907,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -13185,7 +13185,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -13210,6 +13209,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -13487,7 +13487,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -13512,6 +13511,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -13645,7 +13645,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -13668,6 +13667,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -13835,7 +13835,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -13860,6 +13859,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -14078,7 +14078,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -14109,6 +14108,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -14396,7 +14396,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -14421,6 +14420,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -15229,7 +15229,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -15254,6 +15253,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -15531,7 +15531,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -15556,6 +15555,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -15833,7 +15833,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -15862,6 +15861,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -16206,7 +16206,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -16234,6 +16233,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -16367,7 +16367,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -16401,6 +16400,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -16682,7 +16682,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -16710,6 +16709,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -16915,7 +16915,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -16946,6 +16945,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -17164,7 +17164,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -17197,6 +17196,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -17485,7 +17485,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -17508,6 +17507,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -17579,7 +17579,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -17604,6 +17603,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -17737,7 +17737,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -17773,6 +17772,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -18552,7 +18552,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -18575,6 +18574,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -18646,7 +18646,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -18671,6 +18670,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -19392,7 +19392,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -19443,6 +19442,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -19791,7 +19791,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -19840,6 +19839,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -20058,7 +20058,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -20083,6 +20082,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": true,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -20154,7 +20154,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -20179,6 +20178,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -20646,7 +20646,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -20669,6 +20668,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,
@@ -20740,7 +20740,6 @@ Object {
   "exportBackground": true,
   "exportEmbedScene": false,
   "fileHandle": null,
-  "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLibraryOpen": false,
@@ -20763,6 +20762,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
+  "showGrid": false,
   "showShortcutsDialog": false,
   "showStats": false,
   "startBoundElement": null,

src/types.ts

@@ -83,7 +83,7 @@ export type AppState = {
   showShortcutsDialog: boolean;
   zenModeEnabled: boolean;
   appearance: "light" | "dark";
-  gridSize: number | null;
+  showGrid: boolean;
 
   /** top-most selected groups (i.e. does not include nested groups) */
   selectedGroupIds: { [groupId: string]: boolean };