sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shortcuts to zoom in/out and to reset zoom (#770)

Browse Source 
* Shortcuts to zoom in/out and to reset zoom

* add support for numerical keys

* Fixed Firefox compatibility

Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Timur Khazamov 2020-02-16 17:00:45 +01:00 committed by GitHub
parent 2d22ffda49
commit ad72946131
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/actions/actionCanvas.tsx
View File

@ -6,6 +6,7 @@ import { trash, zoomIn, zoomOut } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import { getNormalizedZoom } from "../scene";
import { KEYS } from "../keys";
export const actionChangeViewBackgroundColor: Action = {
name: "changeViewBackgroundColor",
@ -57,6 +58,15 @@ export const actionClearCanvas: Action = {
const ZOOM_STEP = 0.1;
const KEY_CODES = {
MINUS: "Minus",
EQUAL: "Equal",
ZERO: "Digit0",
NUM_SUBTRACT: "NumpadSubtract",
NUM_ADD: "NumpadAdd",
NUM_ZERO: "Numpad0",
};
export const actionZoomIn: Action = {
name: "zoomIn",
perform: (elements, appState) => {
@ -78,6 +88,9 @@ export const actionZoomIn: Action = {
}}
/>
),
keyTest: event =>
(event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) &&
(event[KEYS.META] || event.shiftKey),
};
export const actionZoomOut: Action = {
@ -101,4 +114,22 @@ export const actionZoomOut: Action = {
}}
/>
),
keyTest: event =>
(event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) &&
(event[KEYS.META] || event.shiftKey),
};
export const actionResetZoom: Action = {
name: "resetZoom",
perform: (elements, appState) => {
return {
appState: {
...appState,
zoom: 1,
},
};
},
keyTest: event =>
(event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) &&
(event[KEYS.META] || event.shiftKey),
};

1
src/actions/index.ts
View File

@ -23,6 +23,7 @@ export {
actionClearCanvas,
actionZoomIn,
actionZoomOut,
actionResetZoom,
} from "./actionCanvas";
export { actionFinalize } from "./actionFinalize";

2
src/index.tsx
View File

@ -81,6 +81,7 @@ import {
actionClearCanvas,
actionZoomIn,
actionZoomOut,
actionResetZoom,
actionChangeProjectName,
actionChangeExportBackground,
actionLoadScene,
@ -525,6 +526,7 @@ export class App extends React.Component<any, AppState> {
this.actionManager.registerAction(actionClearCanvas);
this.actionManager.registerAction(actionZoomIn);
this.actionManager.registerAction(actionZoomOut);
this.actionManager.registerAction(actionResetZoom);
this.actionManager.registerAction(actionChangeProjectName);
this.actionManager.registerAction(actionChangeExportBackground);