feat: allow show grid without snap to grid (#6889)

packages/excalidraw/actions/actionCanvas.tsx

@@ -107,6 +107,7 @@ export const actionClearCanvas = register({
         exportEmbedScene: appState.exportEmbedScene,
         gridSize: appState.gridSize,
         gridStep: appState.gridStep,
+        showGrid: appState.showGrid,
         gridModeEnabled: appState.gridModeEnabled,
         stats: appState.stats,
         pasteDialog: appState.pasteDialog,

packages/excalidraw/actions/actionToggleShowGrid.tsx

@@ -0,0 +1,27 @@
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
+import type { AppState } from "../types";
+import { gridIcon } from "../components/icons";
+import { StoreAction } from "../store";
+
+export const actionToggleShowGrid = register({
+  name: "showGrid",
+  icon: gridIcon,
+  keywords: ["snap"],
+  label: "labels.toggleShowGrid",
+  viewMode: true,
+  trackEvent: {
+    category: "canvas",
+    predicate: (appState) => appState.showGrid,
+  },
+  perform(elements, appState) {
+    return {
+      appState: {
+        ...appState,
+        showGrid: !this.checked!(appState),
+      },
+      storeAction: StoreAction.NONE,
+    };
+  },
+  checked: (appState: AppState) => appState.showGrid,
+});

packages/excalidraw/actions/index.ts

@@ -77,6 +77,7 @@ export {
   copyText,
 } from "./actionClipboard";
 
+export { actionToggleShowGrid } from "./actionToggleShowGrid";
 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";
 export { actionToggleObjectsSnapMode } from "./actionToggleObjectsSnapMode";

packages/excalidraw/actions/types.ts

@@ -54,6 +54,7 @@ export type ActionName =
   | "copyStyles"
   | "selectAll"
   | "pasteStyles"
+  | "showGrid"
   | "gridMode"
   | "zenMode"
   | "objectsSnapMode"

packages/excalidraw/appState.ts

@@ -63,6 +63,7 @@ export const getDefaultAppState = (): Omit<
     fileHandle: null,
     gridSize: DEFAULT_GRID_SIZE,
     gridStep: DEFAULT_GRID_STEP,
+    showGrid: false,
     gridModeEnabled: false,
     isBindingEnabled: true,
     defaultSidebarDockedPreference: false,
@@ -183,6 +184,7 @@ const APP_STATE_STORAGE_CONF = (<
   fileHandle: { browser: false, export: false, server: false },
   gridSize: { browser: true, export: true, server: true },
   gridStep: { browser: true, export: true, server: true },
+  showGrid: { browser: true, export: true, server: true },
   gridModeEnabled: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },

packages/excalidraw/components/App.tsx

@@ -25,6 +25,7 @@ import {
   actionSelectAll,
   actionSendBackward,
   actionSendToBack,
+  actionToggleShowGrid,
   actionToggleGridMode,
   actionToggleStats,
   actionToggleZenMode,
@@ -1726,7 +1727,7 @@ class App extends React.Component<AppProps, AppState> {
                           renderConfig={{
                             imageCache: this.imageCache,
                             isExporting: false,
-                            renderGrid: isGridModeEnabled(this),
+                            renderGrid: this.state.showGrid || isGridModeEnabled(this),
                             canvasBackgroundColor:
                               this.state.viewBackgroundColor,
                             embedsValidationStatus: this.embedsValidationStatus,
@@ -10571,6 +10572,7 @@ class App extends React.Component<AppProps, AppState> {
         return [
           ...options,
           actionToggleGridMode,
+          actionToggleShowGrid,
           actionToggleZenMode,
           actionToggleViewMode,
           actionToggleStats,
@@ -10588,6 +10590,7 @@ class App extends React.Component<AppProps, AppState> {
         actionUnlockAllElements,
         CONTEXT_MENU_SEPARATOR,
         actionToggleGridMode,
+        actionToggleShowGrid,
         actionToggleObjectsSnapMode,
         actionToggleZenMode,
         actionToggleViewMode,

packages/excalidraw/locales/en.json

@@ -91,6 +91,7 @@
     "group": "Group selection",
     "ungroup": "Ungroup selection",
     "collaborators": "Collaborators",
+    "toggleShowGrid": "Toggle show grid",
     "toggleGrid": "Toggle grid",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",

packages/excalidraw/types.ts

@@ -358,6 +358,7 @@ export interface AppState {
   /** grid cell px size */
   gridSize: number;
   gridStep: number;
+  showGrid: boolean;
   gridModeEnabled: boolean;
   viewModeEnabled: boolean;