Grid

src/actions/actionToggleGridMode.tsx

@@ -1,8 +1,7 @@
+import { trackEvent } from "../analytics";
 import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
-import { trackEvent } from "../analytics";
+import { register } from "./register";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
@@ -11,12 +10,12 @@ export const actionToggleGridMode = register({
     return {
       appState: {
         ...appState,
-        gridSize: this.checked!(appState) ? null : GRID_SIZE,
+        showGrid: !appState.showGrid,
       },
       commitToHistory: false,
     };
   },
-  checked: (appState: AppState) => appState.gridSize !== null,
+  checked: (appState: AppState) => appState.showGrid,
   contextItemLabel: "labels.gridMode",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/components/App.tsx

@@ -1202,9 +1202,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   };
 
   toggleGridMode = () => {
-    this.setState({
-      showGrid: !this.state.showGrid,
-    });
+    this.actionManager.executeAction(actionToggleGridMode);
   };
 
   toggleStats = () => {