diff --git a/packages/excalidraw/actions/actionCanvas.tsx b/packages/excalidraw/actions/actionCanvas.tsx index 3b3a12b98..36f0cc294 100644 --- a/packages/excalidraw/actions/actionCanvas.tsx +++ b/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, diff --git a/packages/excalidraw/actions/actionToggleShowGrid.tsx b/packages/excalidraw/actions/actionToggleShowGrid.tsx new file mode 100644 index 000000000..d39cc0fd0 --- /dev/null +++ b/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, +}); diff --git a/packages/excalidraw/actions/index.ts b/packages/excalidraw/actions/index.ts index a556bfbea..8ffc69bc5 100644 --- a/packages/excalidraw/actions/index.ts +++ b/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"; diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts index bb504b9d6..28523fade 100644 --- a/packages/excalidraw/actions/types.ts +++ b/packages/excalidraw/actions/types.ts @@ -54,6 +54,7 @@ export type ActionName = | "copyStyles" | "selectAll" | "pasteStyles" + | "showGrid" | "gridMode" | "zenMode" | "objectsSnapMode" diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts index 644949e7c..9eba32a4b 100644 --- a/packages/excalidraw/appState.ts +++ b/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 }, diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 83bae5aba..c2e953b64 100644 --- a/packages/excalidraw/components/App.tsx +++ b/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 { 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 { return [ ...options, actionToggleGridMode, + actionToggleShowGrid, actionToggleZenMode, actionToggleViewMode, actionToggleStats, @@ -10588,6 +10590,7 @@ class App extends React.Component { actionUnlockAllElements, CONTEXT_MENU_SEPARATOR, actionToggleGridMode, + actionToggleShowGrid, actionToggleObjectsSnapMode, actionToggleZenMode, actionToggleViewMode, diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index 85c5076f3..45b5868c6 100644 --- a/packages/excalidraw/locales/en.json +++ b/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", diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index d1d1824f0..a13f1b232 100644 --- a/packages/excalidraw/types.ts +++ b/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;