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 &&
-          (event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize)) ||
+        (this.state.showGrid &&
+          (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(y / gridSize) * gridSize,
+      Math.round(x / GRID_SIZE) * GRID_SIZE,
+      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) {
-    context.moveTo(x, offsetY - gridSize);
-    context.lineTo(x, offsetY + height + gridSize * 2);
+  for (let x = offsetX; x < offsetX + width + GRID_SIZE * 2; x += GRID_SIZE) {
+    context.moveTo(x, offsetY - GRID_SIZE);
+    context.lineTo(x, offsetY + height + GRID_SIZE * 2);
   }
-  for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {
-    context.moveTo(offsetX - gridSize, y);
-    context.lineTo(offsetX + width + gridSize * 2, y);
+  for (let y = offsetY; y < offsetY + height + GRID_SIZE * 2; y += GRID_SIZE) {
+    context.moveTo(offsetX - GRID_SIZE, 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 / appState.gridSize) *
-        appState.gridSize +
-        (sceneState.scrollX % appState.gridSize),
-      -Math.ceil(zoomTranslationY / sceneState.zoom.value / appState.gridSize) *
-        appState.gridSize +
-        (sceneState.scrollY % appState.gridSize),
+      -Math.ceil(zoomTranslationX / sceneState.zoom.value / GRID_SIZE) *
+        GRID_SIZE +
+        (sceneState.scrollX % GRID_SIZE),
+      -Math.ceil(zoomTranslationY / sceneState.zoom.value / GRID_SIZE) *
+        GRID_SIZE +
+        (sceneState.scrollY % GRID_SIZE),
       normalizedCanvasWidth / sceneState.zoom.value,
       normalizedCanvasHeight / sceneState.zoom.value,
     );

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 };