From c12dab7a60cbb6800eb14870123029f02d883136 Mon Sep 17 00:00:00 2001 From: Panayiotis Lipiridis Date: Wed, 23 Dec 2020 17:13:03 +0200 Subject: [PATCH] refactor: Remove the grid size and have a boolean instead --- src/actions/actionCanvas.tsx | 2 +- src/appState.ts | 4 +- src/components/App.tsx | 28 ++-- src/constants.ts | 2 +- src/element/linearElementEditor.ts | 12 +- src/math.ts | 10 +- src/packages/utils/README.md | 1 - src/renderer/renderScene.ts | 29 ++-- .../regressionTests.test.tsx.snap | 134 +++++++++--------- src/types.ts | 2 +- 10 files changed, 111 insertions(+), 113 deletions(-) diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx index 5435aab34..3a3f1ae4b 100644 --- a/src/actions/actionCanvas.tsx +++ b/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, }, diff --git a/src/appState.ts b/src/appState.ts index b4dc998cd..c6310b42d 100644 --- a/src/appState.ts +++ b/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 }, diff --git a/src/components/App.tsx b/src/components/App.tsx index e312cf316..12e5d1fac 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1036,7 +1036,7 @@ class App extends React.Component { 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 { toggleGridMode = () => { this.setState({ - gridSize: this.state.gridSize ? null : GRID_SIZE, + showGrid: !this.state.showGrid, }); }; @@ -1275,8 +1275,8 @@ class App extends React.Component { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { CANVAS_ONLY_ACTIONS.includes(action.name), ), { - checked: this.state.gridSize !== null, + checked: this.state.showGrid, shortcutName: "gridMode", label: t("labels.gridMode"), action: this.toggleGridMode, diff --git a/src/constants.ts b/src/constants.ts index 0a6a793cd..558ee8337 100644 --- a/src/constants.ts +++ b/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", diff --git a/src/element/linearElementEditor.ts b/src/element/linearElementEditor.ts index b44f80c07..5c552a758 100644 --- a/src/element/linearElementEditor.ts +++ b/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, 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; diff --git a/src/math.ts b/src/math.ts index dadc6ccca..411e8a774 100644 --- a/src/math.ts +++ b/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]; diff --git a/src/packages/utils/README.md b/src/packages/utils/README.md index 204cab5d2..679d77b25 100644 --- a/src/packages/utils/README.md +++ b/src/packages/utils/README.md @@ -75,7 +75,6 @@ const excalidrawDiagram = { ], appState: { viewBackgroundColor: "#ffffff", - gridSize: null, }, }; diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index 9947300a2..0b944f6a7 100644 --- a/src/renderer/renderScene.ts +++ b/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, ); diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 8ffa26a57..af11fc8ef 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -31,7 +31,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -67,6 +66,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -486,7 +486,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -529,6 +528,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -947,7 +947,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": false, "isLibraryOpen": false, @@ -973,6 +972,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -1717,7 +1717,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -1745,6 +1744,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -1915,7 +1915,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -1948,6 +1947,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -2367,7 +2367,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -2395,6 +2394,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -2614,7 +2614,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -2639,6 +2638,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -2772,7 +2772,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -2800,6 +2799,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -3243,7 +3243,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -3268,6 +3267,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -3545,7 +3545,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -3573,6 +3572,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -3743,7 +3743,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -3773,6 +3772,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -3981,7 +3981,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -4009,6 +4008,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -4227,7 +4227,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -4256,6 +4255,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -4604,7 +4604,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -4653,6 +4652,7 @@ Object { }, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -4893,7 +4893,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -4920,6 +4919,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -5194,7 +5194,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -5241,6 +5240,7 @@ Object { }, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -5396,7 +5396,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -5421,6 +5420,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -5554,7 +5554,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -5579,6 +5578,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -6001,7 +6001,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -6033,6 +6032,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -6313,7 +6313,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -6338,6 +6337,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -8341,7 +8341,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -8371,6 +8370,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -8697,7 +8697,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -8728,6 +8727,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -8946,7 +8946,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -8975,6 +8974,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -9193,7 +9193,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -9223,6 +9222,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -9502,7 +9502,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -9527,6 +9526,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -9660,7 +9660,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -9685,6 +9684,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -9818,7 +9818,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -9843,6 +9842,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -9976,7 +9976,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -10001,6 +10000,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -10164,7 +10164,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -10189,6 +10188,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -10352,7 +10352,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -10377,6 +10376,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -10540,7 +10540,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -10565,6 +10564,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -10728,7 +10728,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -10753,6 +10752,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -10886,7 +10886,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -10911,6 +10910,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -11044,7 +11044,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -11069,6 +11068,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -11232,7 +11232,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -11257,6 +11256,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -11390,7 +11390,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -11415,6 +11414,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -11578,7 +11578,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -11614,6 +11613,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -12288,7 +12288,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -12317,6 +12316,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -12535,7 +12535,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -12560,6 +12559,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": true, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -12631,7 +12631,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -12654,6 +12653,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -12725,7 +12725,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -12750,6 +12749,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -12883,7 +12883,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -12908,6 +12907,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -13185,7 +13185,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -13210,6 +13209,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -13487,7 +13487,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -13512,6 +13511,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -13645,7 +13645,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -13668,6 +13667,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -13835,7 +13835,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -13860,6 +13859,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -14078,7 +14078,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -14109,6 +14108,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -14396,7 +14396,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -14421,6 +14420,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -15229,7 +15229,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -15254,6 +15253,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -15531,7 +15531,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -15556,6 +15555,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -15833,7 +15833,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -15862,6 +15861,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -16206,7 +16206,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -16234,6 +16233,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -16367,7 +16367,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -16401,6 +16400,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -16682,7 +16682,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -16710,6 +16709,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -16915,7 +16915,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -16946,6 +16945,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -17164,7 +17164,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -17197,6 +17196,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -17485,7 +17485,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -17508,6 +17507,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -17579,7 +17579,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -17604,6 +17603,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -17737,7 +17737,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -17773,6 +17772,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -18552,7 +18552,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -18575,6 +18574,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -18646,7 +18646,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -18671,6 +18670,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -19392,7 +19392,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -19443,6 +19442,7 @@ Object { }, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -19791,7 +19791,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -19840,6 +19839,7 @@ Object { }, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -20058,7 +20058,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -20083,6 +20082,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": true, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -20154,7 +20154,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -20179,6 +20178,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -20646,7 +20646,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -20669,6 +20668,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, @@ -20740,7 +20740,6 @@ Object { "exportBackground": true, "exportEmbedScene": false, "fileHandle": null, - "gridSize": null, "height": 768, "isBindingEnabled": true, "isLibraryOpen": false, @@ -20763,6 +20762,7 @@ Object { "selectionElement": null, "shouldAddWatermark": false, "shouldCacheIgnoreZoom": false, + "showGrid": false, "showShortcutsDialog": false, "showStats": false, "startBoundElement": null, diff --git a/src/types.ts b/src/types.ts index 9c99376cb..29e1d186a 100644 --- a/src/types.ts +++ b/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 };