github.com/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2024-11-02 03:25:53 +01:00
Code Releases Wiki Activity

feat: add "toggle grid" to command palette (#7887)

Browse Source
This commit is contained in:
David Luzar 2024-04-13 19:12:29 +02:00 committed by GitHub
parent da2e507298
commit 890ed9f31f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 65 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/excalidraw/actions/actionToggleGridMode.tsx
View File

@ -2,10 +2,13 @@ import { CODES, KEYS } from "../keys";
import { register } from "./register";
import { GRID_SIZE } from "../constants";
import { AppState } from "../types";
import { gridIcon } from "../components/icons";
export const actionToggleGridMode = register({
name: "gridMode",
label: "labels.showGrid",
icon: gridIcon,
keywords: ["snap"],
label: "labels.toggleGrid",
viewMode: true,
trackEvent: {
category: "canvas",

1
packages/excalidraw/components/CommandPalette/CommandPalette.tsx
View File

@ -309,6 +309,7 @@ function CommandPaletteInner({
actionManager.actions.zoomToFit,
actionManager.actions.zenMode,
actionManager.actions.viewMode,
actionManager.actions.gridMode,
actionManager.actions.objectsSnapMode,
actionManager.actions.toggleShortcuts,
actionManager.actions.selectAll,

2
packages/excalidraw/components/HelpDialog.tsx
View File

@ -273,7 +273,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
shortcuts={[getShortcutKey("Alt+S")]}
/>
<Shortcut
label={t("labels.showGrid")}
label={t("labels.toggleGrid")}
shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
/>
<Shortcut

13
packages/excalidraw/components/icons.tsx
View File

@ -2116,3 +2116,16 @@ export const youtubeIcon = createIcon(
</g>,
tablerIconProps,
);
export const gridIcon = createIcon(
<g strokeWidth={1.5}>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 6h18" />
<path d="M3 12h18" />
<path d="M3 18h18" />
<path d="M6 3v18" />
<path d="M12 3v18" />
<path d="M18 3v18" />
</g>,
tablerIconProps,
);

2
packages/excalidraw/locales/en.json
View File

@ -87,7 +87,7 @@
"group": "Group selection",
"ungroup": "Ungroup selection",
"collaborators": "Collaborators",
"showGrid": "Show grid",
"toggleGrid": "Toggle grid",
"addToLibrary": "Add to library",
"removeFromLibrary": "Remove from library",
"libraryLoadingMessage": "Loading library…",

45
packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
View File

@ -7870,8 +7870,51 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
"separator",
{
"checked": [Function],
"icon": <svg
aria-hidden="true"
className=""
fill="none"
focusable="false"
role="img"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
>
<g
strokeWidth={1.5}
>
<path
d="M0 0h24v24H0z"
fill="none"
stroke="none"
/>
<path
d="M3 6h18"
/>
<path
d="M3 12h18"
/>
<path
d="M3 18h18"
/>
<path
d="M6 3v18"
/>
<path
d="M12 3v18"
/>
<path
d="M18 3v18"
/>
</g>
</svg>,
"keyTest": [Function],
"label": "labels.showGrid",
"keywords": [
"snap",
],
"label": "labels.toggleGrid",
"name": "gridMode",
"perform": [Function],
"predicate": [Function],

2
packages/excalidraw/tests/excalidraw.test.tsx
View File

@ -101,7 +101,7 @@ describe("<Excalidraw/>", () => {
clientY: 1,
});
const contextMenu = document.querySelector(".context-menu");
fireEvent.click(queryByText(contextMenu as HTMLElement, "Show grid")!);
fireEvent.click(queryByText(contextMenu as HTMLElement, "Toggle grid")!);
expect(h.state.gridSize).toBe(GRID_SIZE);
});