smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Stop using the deprecated keyCode (#2426)

Browse source 
Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Lipis 2020-12-01 23:36:06 +02:00 • committed by GitHub
parent 58fcb44de0
commit 014097a97e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 257 additions and 281 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/actions/actionAlign.tsx
View file

@ -52,11 +52,8 @@ export const actionAlignTop = register({
commitToHistory: true,
};
},
keyTest: (event) => {
return (
event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP
);
},
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}
@ -84,11 +81,8 @@ export const actionAlignBottom = register({
commitToHistory: true,
};
},
keyTest: (event) => {
return (
event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN
);
},
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}
@ -116,11 +110,8 @@ export const actionAlignLeft = register({
commitToHistory: true,
};
},
keyTest: (event) => {
return (
event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT
);
},
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}
@ -148,13 +139,8 @@ export const actionAlignRight = register({
commitToHistory: true,
};
},
keyTest: (event) => {
return (
event[KEYS.CTRL_OR_CMD] &&
event.shiftKey &&
event.key === KEYS.ARROW_RIGHT
);
},
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}

20
src/actions/actionCanvas.tsx
View file

@ -5,7 +5,7 @@ import { trash, zoomIn, zoomOut, resetZoom } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import { getNormalizedZoom } from "../scene";
import { KEYS } from "../keys";
import { CODES, KEYS } from "../keys";
import { getShortcutKey } from "../utils";
import useIsMobile from "../is-mobile";
import { register } from "./register";
@ -75,16 +75,6 @@ export const actionClearCanvas = register({
const ZOOM_STEP = 0.1;
const KEY_CODES = {
MINUS: "Minus",
EQUAL: "Equal",
ONE: "Digit1",
ZERO: "Digit0",
NUM_SUBTRACT: "NumpadSubtract",
NUM_ADD: "NumpadAdd",
NUM_ZERO: "Numpad0",
};
export const actionZoomIn = register({
name: "zoomIn",
perform: (_elements, appState) => {
@ -112,7 +102,7 @@ export const actionZoomIn = register({
/>
),
keyTest: (event) =>
(event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) &&
(event.code === CODES.EQUAL || event.code === CODES.NUM_ADD) &&
(event[KEYS.CTRL_OR_CMD] || event.shiftKey),
});
@ -143,7 +133,7 @@ export const actionZoomOut = register({
/>
),
keyTest: (event) =>
(event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) &&
(event.code === CODES.MINUS || event.code === CODES.NUM_SUBTRACT) &&
(event[KEYS.CTRL_OR_CMD] || event.shiftKey),
});
@ -173,7 +163,7 @@ export const actionResetZoom = register({
/>
),
keyTest: (event) =>
(event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) &&
(event.code === CODES.ZERO || event.code === CODES.NUM_ZERO) &&
(event[KEYS.CTRL_OR_CMD] || event.shiftKey),
});
@ -229,7 +219,7 @@ export const actionZoomToFit = register({
};
},
keyTest: (event) =>
event.code === KEY_CODES.ONE &&
event.code === CODES.ONE &&
event.shiftKey &&
!event.altKey &&
!event[KEYS.CTRL_OR_CMD],

10
src/actions/actionDistribute.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { KEYS } from "../keys";
import { CODES } from "../keys";
import { t } from "../i18n";
import { register } from "./register";
import {
@ -48,9 +48,7 @@ export const distributeHorizontally = register({
commitToHistory: true,
};
},
keyTest: (event) => {
return event.altKey && event.keyCode === KEYS.H_KEY_CODE;
},
keyTest: (event) => event.altKey && event.code === CODES.H,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}
@ -78,9 +76,7 @@ export const distributeVertically = register({
commitToHistory: true,
};
},
keyTest: (event) => {
return event.altKey && event.keyCode === KEYS.V_KEY_CODE;
},
keyTest: (event) => event.altKey && event.code === CODES.V,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}

2
src/actions/actionDuplicateSelection.tsx
View file

@ -63,7 +63,7 @@ export const actionDuplicateSelection = register({
};
},
contextItemLabel: "labels.duplicateSelection",
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "d",
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
type="button"

10
src/actions/actionExport.tsx
View file

@ -96,9 +96,8 @@ export const actionSaveScene = register({
return { commitToHistory: false };
}
},
keyTest: (event) => {
return event.key === "s" && event[KEYS.CTRL_OR_CMD] && !event.shiftKey;
},
keyTest: (event) =>
event.key === KEYS.S && event[KEYS.CTRL_OR_CMD] && !event.shiftKey,
PanelComponent: ({ updateData }) => (
<ToolButton
type="button"
@ -127,9 +126,8 @@ export const actionSaveAsScene = register({
return { commitToHistory: false };
}
},
keyTest: (event) => {
return event.key === "s" && event.shiftKey && event[KEYS.CTRL_OR_CMD];
},
keyTest: (event) =>
event.key === KEYS.S && event.shiftKey && event[KEYS.CTRL_OR_CMD],
PanelComponent: ({ updateData }) => (
<ToolButton
type="button"

20
src/actions/actionGroup.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { KEYS } from "../keys";
import { CODES, KEYS } from "../keys";
import { t } from "../i18n";
import { getShortcutKey } from "../utils";
import { register } from "./register";
@ -129,13 +129,8 @@ export const actionGroup = register({
contextItemLabel: "labels.group",
contextItemPredicate: (elements, appState) =>
enableActionGroup(elements, appState),
keyTest: (event) => {
return (
!event.shiftKey &&
event[KEYS.CTRL_OR_CMD] &&
event.keyCode === KEYS.G_KEY_CODE
);
},
keyTest: (event) =>
!event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}
@ -177,13 +172,8 @@ export const actionUngroup = register({
commitToHistory: true,
};
},
keyTest: (event) => {
return (
event.shiftKey &&
event[KEYS.CTRL_OR_CMD] &&
event.keyCode === KEYS.G_KEY_CODE
);
},
keyTest: (event) =>
event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
contextMenuOrder: 5,
contextItemLabel: "labels.ungroup",
contextItemPredicate: (elements, appState) =>

4
src/actions/actionMenu.tsx
View file

@ -5,7 +5,7 @@ import { t } from "../i18n";
import { showSelectedShapeActions, getNonDeletedElements } from "../element";
import { register } from "./register";
import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
import { KEYS } from "../keys";
import { CODES, KEYS } from "../keys";
import { HelpIcon } from "../components/HelpIcon";
export const actionToggleCanvasMenu = register({
@ -65,7 +65,7 @@ export const actionFullScreen = register({
commitToHistory: false,
};
},
keyTest: (event) => event.keyCode === KEYS.F_KEY_CODE,
keyTest: (event) => event.code === CODES.F,
});
export const actionShortcuts = register({

2
src/actions/actionSelectAll.ts
View file

@ -27,5 +27,5 @@ export const actionSelectAll = register({
};
},
contextItemLabel: "labels.selectAll",
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "a",
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.A,
});

10
src/actions/actionStyles.ts
View file

@ -3,7 +3,7 @@ import {
isExcalidrawElement,
redrawTextBoundingBox,
} from "../element";
import { KEYS } from "../keys";
import { CODES, KEYS } from "../keys";
import { register } from "./register";
import { mutateElement, newElementWith } from "../element/mutateElement";
import {
@ -28,9 +28,7 @@ export const actionCopyStyles = register({
},
contextItemLabel: "labels.copyStyles",
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] &&
event.altKey &&
event.keyCode === KEYS.C_KEY_CODE,
event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.C,
contextMenuOrder: 0,
});
@ -70,8 +68,6 @@ export const actionPasteStyles = register({
},
contextItemLabel: "labels.pasteStyles",
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] &&
event.altKey &&
event.keyCode === KEYS.V_KEY_CODE,
event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
contextMenuOrder: 1,
});

36
src/actions/actionZindex.tsx
View file

@ -5,7 +5,7 @@ import {
moveAllLeft,
moveAllRight,
} from "../zindex";
import { KEYS, isDarwin } from "../keys";
import { KEYS, isDarwin, CODES } from "../keys";
import { t } from "../i18n";
import { getShortcutKey } from "../utils";
import { register } from "./register";
@ -28,7 +28,9 @@ export const actionSendBackward = register({
contextItemLabel: "labels.sendBackward",
keyPriority: 40,
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] && !event.shiftKey && event.code === "BracketLeft",
event[KEYS.CTRL_OR_CMD] &&
!event.shiftKey &&
event.code === CODES.BRACKET_LEFT,
PanelComponent: ({ updateData, appState }) => (
<button
type="button"
@ -53,7 +55,9 @@ export const actionBringForward = register({
contextItemLabel: "labels.bringForward",
keyPriority: 40,
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] && !event.shiftKey && event.code === "BracketRight",
event[KEYS.CTRL_OR_CMD] &&
!event.shiftKey &&
event.code === CODES.BRACKET_RIGHT,
PanelComponent: ({ updateData, appState }) => (
<button
type="button"
@ -76,13 +80,14 @@ export const actionSendToBack = register({
};
},
contextItemLabel: "labels.sendToBack",
keyTest: (event) => {
return isDarwin
? event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === "BracketLeft"
keyTest: (event) =>
isDarwin
? event[KEYS.CTRL_OR_CMD] &&
event.altKey &&
event.code === CODES.BRACKET_LEFT
: event[KEYS.CTRL_OR_CMD] &&
event.shiftKey &&
event.code === "BracketLeft";
},
event.shiftKey &&
event.code === CODES.BRACKET_LEFT,
PanelComponent: ({ updateData, appState }) => (
<button
type="button"
@ -109,13 +114,14 @@ export const actionBringToFront = register({
};
},
contextItemLabel: "labels.bringToFront",
keyTest: (event) => {
return isDarwin
? event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === "BracketRight"
keyTest: (event) =>
isDarwin
? event[KEYS.CTRL_OR_CMD] &&
event.altKey &&
event.code === CODES.BRACKET_RIGHT
: event[KEYS.CTRL_OR_CMD] &&
event.shiftKey &&
event.code === "BracketRight";
},
event.shiftKey &&
event.code === CODES.BRACKET_RIGHT,
PanelComponent: ({ updateData, appState }) => (
<button
type="button"