feat: Scroll using PageUp and PageDown (#6038)

* feat: Scroll using PageUp and PageDown

* support x-axis via `shift` & enable in viewMode

* tweak test

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
DanielJGeiger 2022-12-31 15:54:37 -06:00 committed by GitHub
parent c8370b394c
commit fdd8552637
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 7 deletions

View file

@ -2008,6 +2008,20 @@ class App extends React.Component<AppProps, AppState> {
return;
}
if (event.key === KEYS.PAGE_UP || event.key === KEYS.PAGE_DOWN) {
let offset =
(event.shiftKey ? this.state.width : this.state.height) /
this.state.zoom.value;
if (event.key === KEYS.PAGE_DOWN) {
offset = -offset;
}
if (event.shiftKey) {
this.setState((state) => ({ scrollX: state.scrollX + offset }));
} else {
this.setState((state) => ({ scrollY: state.scrollY + offset }));
}
}
if (this.actionManager.handleKeyDown(event)) {
return;
}
@ -2030,12 +2044,6 @@ class App extends React.Component<AppProps, AppState> {
? ELEMENT_SHIFT_TRANSLATE_AMOUNT
: ELEMENT_TRANSLATE_AMOUNT);
const selectedElements = getSelectedElements(
this.scene.getNonDeletedElements(),
this.state,
true,
);
let offsetX = 0;
let offsetY = 0;
@ -2049,6 +2057,12 @@ class App extends React.Component<AppProps, AppState> {
offsetY = step;
}
const selectedElements = getSelectedElements(
this.scene.getNonDeletedElements(),
this.state,
true,
);
selectedElements.forEach((element) => {
mutateElement(element, {
x: element.x + offsetX,

View file

@ -230,6 +230,14 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
label={t("helpDialog.zoomToSelection")}
shortcuts={["Shift+2"]}
/>
<Shortcut
label={t("helpDialog.movePageUpDown")}
shortcuts={["PgUp/PgDn"]}
/>
<Shortcut
label={t("helpDialog.movePageLeftRight")}
shortcuts={["Shift+PgUp/PgDn"]}
/>
<Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
<Shortcut
label={t("buttons.zenMode")}