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

pull/8892/head
Michael D. Adams 3 months ago
parent b5652b8e36
commit 995dfb3ac9

@ -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,

@ -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,
});

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

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

@ -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 },

@ -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,

@ -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",

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

Loading…
Cancel
Save