From 9de37163247a7c7731ac292bbdb0dfb792795caa Mon Sep 17 00:00:00 2001 From: Lipis Date: Mon, 9 Mar 2020 15:06:35 +0200 Subject: [PATCH] =?UTF-8?q?Update=20send/bring=20shortcuts=20and=20show=20?= =?UTF-8?q?them=20properly=20per=20operating=E2=80=A6=20(#784)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Show proper shortcuts * sort * Add shortcuts to bring/send * fix hotkeys matching greedily * Space * align zindex shortcuts with figma * switch to event.code & change Darwin shortcuts Co-authored-by: dwelle --- src/actions/actionCanvas.tsx | 11 ++++----- src/actions/actionHistory.tsx | 2 +- src/actions/actionSelectAll.ts | 2 +- src/actions/actionStyles.ts | 6 +++-- src/actions/actionZindex.tsx | 41 ++++++++++++++++++++++++++-------- src/components/Actions.tsx | 9 ++++---- src/components/App.tsx | 2 +- src/keys.ts | 10 ++++----- src/utils.ts | 11 +++++++++ 9 files changed, 65 insertions(+), 29 deletions(-) diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx index d1671eb18..c84e732ec 100644 --- a/src/actions/actionCanvas.tsx +++ b/src/actions/actionCanvas.tsx @@ -6,6 +6,7 @@ import { ToolButton } from "../components/ToolButton"; import { t } from "../i18n"; import { getNormalizedZoom } from "../scene"; import { KEYS } from "../keys"; +import { getShortcutKey } from "../utils"; import useIsMobile from "../is-mobile"; import { register } from "./register"; @@ -83,7 +84,7 @@ export const actionZoomIn = register({ { updateData(null); @@ -92,7 +93,7 @@ export const actionZoomIn = register({ ), keyTest: event => (event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) && - (event[KEYS.META] || event.shiftKey), + (event[KEYS.CTRL_OR_CMD] || event.shiftKey), }); export const actionZoomOut = register({ @@ -109,7 +110,7 @@ export const actionZoomOut = register({ { updateData(null); @@ -118,7 +119,7 @@ export const actionZoomOut = register({ ), keyTest: event => (event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) && - (event[KEYS.META] || event.shiftKey), + (event[KEYS.CTRL_OR_CMD] || event.shiftKey), }); export const actionResetZoom = register({ @@ -144,5 +145,5 @@ export const actionResetZoom = register({ ), keyTest: event => (event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) && - (event[KEYS.META] || event.shiftKey), + (event[KEYS.CTRL_OR_CMD] || event.shiftKey), }); diff --git a/src/actions/actionHistory.tsx b/src/actions/actionHistory.tsx index bf9661685..df29310f9 100644 --- a/src/actions/actionHistory.tsx +++ b/src/actions/actionHistory.tsx @@ -31,7 +31,7 @@ const writeData = ( }; const testUndo = (shift: boolean) => (event: KeyboardEvent) => - event[KEYS.META] && /z/i.test(event.key) && event.shiftKey === shift; + event[KEYS.CTRL_OR_CMD] && /z/i.test(event.key) && event.shiftKey === shift; type ActionCreator = (history: SceneHistory) => Action; diff --git a/src/actions/actionSelectAll.ts b/src/actions/actionSelectAll.ts index aef19dac7..16f9921cb 100644 --- a/src/actions/actionSelectAll.ts +++ b/src/actions/actionSelectAll.ts @@ -14,5 +14,5 @@ export const actionSelectAll = register({ }; }, contextItemLabel: "labels.selectAll", - keyTest: event => event[KEYS.META] && event.key === "a", + keyTest: event => event[KEYS.CTRL_OR_CMD] && event.key === "a", }); diff --git a/src/actions/actionStyles.ts b/src/actions/actionStyles.ts index f3b2dfed0..ee5aa4edb 100644 --- a/src/actions/actionStyles.ts +++ b/src/actions/actionStyles.ts @@ -19,7 +19,8 @@ export const actionCopyStyles = register({ return {}; }, contextItemLabel: "labels.copyStyles", - keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "C", + keyTest: event => + event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === "C", contextMenuOrder: 0, }); @@ -54,6 +55,7 @@ export const actionPasteStyles = register({ }, commitToHistory: () => true, contextItemLabel: "labels.pasteStyles", - keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "V", + keyTest: event => + event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === "V", contextMenuOrder: 1, }); diff --git a/src/actions/actionZindex.tsx b/src/actions/actionZindex.tsx index 50aa95199..21eeb6d10 100644 --- a/src/actions/actionZindex.tsx +++ b/src/actions/actionZindex.tsx @@ -6,8 +6,9 @@ import { moveAllRight, } from "../zindex"; import { getSelectedIndices } from "../scene"; -import { KEYS } from "../keys"; +import { KEYS, isDarwin } from "../keys"; import { t } from "../i18n"; +import { getShortcutKey } from "../utils"; import { register } from "./register"; import { sendBackward, @@ -30,13 +31,14 @@ export const actionSendBackward = register({ contextItemLabel: "labels.sendBackward", keyPriority: 40, commitToHistory: () => true, - keyTest: event => event[KEYS.META] && event.altKey && event.key === "B", + keyTest: event => + event[KEYS.CTRL_OR_CMD] && !event.shiftKey && event.code === "BracketLeft", PanelComponent: ({ updateData }) => ( @@ -57,13 +59,14 @@ export const actionBringForward = register({ contextItemLabel: "labels.bringForward", keyPriority: 40, commitToHistory: () => true, - keyTest: event => event[KEYS.META] && event.altKey && event.key === "F", + keyTest: event => + event[KEYS.CTRL_OR_CMD] && !event.shiftKey && event.code === "BracketRight", PanelComponent: ({ updateData }) => ( @@ -83,13 +86,23 @@ export const actionSendToBack = register({ }, contextItemLabel: "labels.sendToBack", commitToHistory: () => true, - keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "B", + keyTest: event => { + return isDarwin + ? event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === "BracketLeft" + : event[KEYS.CTRL_OR_CMD] && + event.shiftKey && + event.code === "BracketLeft"; + }, PanelComponent: ({ updateData }) => ( @@ -109,13 +122,23 @@ export const actionBringToFront = register({ }, commitToHistory: () => true, contextItemLabel: "labels.bringToFront", - keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "F", + keyTest: event => { + return isDarwin + ? event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === "BracketRight" + : event[KEYS.CTRL_OR_CMD] && + event.shiftKey && + event.code === "BracketRight"; + }, PanelComponent: ({ updateData }) => ( diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx index 7fc41a75d..4c9c4feb7 100644 --- a/src/components/Actions.tsx +++ b/src/components/Actions.tsx @@ -5,7 +5,7 @@ import { hasBackground, hasStroke, hasText } from "../scene"; import { t } from "../i18n"; import { SHAPES } from "../shapes"; import { ToolButton } from "./ToolButton"; -import { capitalizeString } from "../utils"; +import { capitalizeString, getShortcutKey } from "../utils"; import { CURSOR_TYPE } from "../constants"; import Stack from "./Stack"; @@ -78,6 +78,9 @@ export function ShapesSwitcher({ <> {SHAPES.map(({ value, icon }, index) => { const label = t(`toolBar.${value}`); + const shortcut = getShortcutKey( + `${capitalizeString(value)[0]}, ${index + 1}`, + ); return ( { event.preventDefault(); const { deltaX, deltaY } = event; - if (event.metaKey || event.ctrlKey) { + if (event[KEYS.CTRL_OR_CMD]) { const sign = Math.sign(deltaY); const MAX_STEP = 10; let delta = Math.abs(deltaY); diff --git a/src/keys.ts b/src/keys.ts index ef859be7a..bb442e44b 100644 --- a/src/keys.ts +++ b/src/keys.ts @@ -1,3 +1,5 @@ +export const isDarwin = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform); + export const KEYS = { ARROW_LEFT: "ArrowLeft", ARROW_RIGHT: "ArrowRight", @@ -7,14 +9,10 @@ export const KEYS = { ESCAPE: "Escape", DELETE: "Delete", BACKSPACE: "Backspace", - get META() { - return /Mac|iPod|iPhone|iPad/.test(window.navigator.platform) - ? "metaKey" - : "ctrlKey"; - }, + CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey", TAB: "Tab", SPACE: " ", -}; +} as const; export function isArrowKey(keyCode: string) { return ( diff --git a/src/utils.ts b/src/utils.ts index bc3cbb4ba..e38146b87 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -134,6 +134,17 @@ export function resetCursor() { document.documentElement.style.cursor = ""; } +export const getShortcutKey = (shortcut: string): string => { + const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform); + if (isMac) { + return ` — ${shortcut + .replace("CtrlOrCmd+", "⌘") + .replace("Alt+", "⌥") + .replace("Ctrl+", "⌃") + .replace("Shift+", "⇧")}`; + } + return ` — ${shortcut.replace("CtrlOrCmd", "Ctrl")}`; +}; export function viewportCoordsToSceneCoords( { clientX, clientY }: { clientX: number; clientY: number }, {