Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax

src/components/App.tsx

@@ -2082,6 +2082,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;
       }
@@ -2113,12 +2127,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;
 
@@ -2132,6 +2140,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,

src/components/HelpDialog.tsx

@@ -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")}

src/locales/en.json

@@ -313,7 +313,9 @@
     "view": "View",
     "zoomToFit": "Zoom to fit all elements",
     "zoomToSelection": "Zoom to selection",
-    "toggleElementLock": "Lock/unlock selection"
+    "toggleElementLock": "Lock/unlock selection",
+    "movePageUpDown": "Move page up/down",
+    "movePageLeftRight": "Move page left/right"
   },
   "clearCanvasDialog": {
     "title": "Clear canvas"

src/tests/scroll.test.tsx

@@ -53,23 +53,50 @@ describe("appState", () => {
     });
     restoreOriginalGetBoundingClientRect();
   });
-  it("zoomed canvas scrolls on page keys", async () => {
+
+  it("moving by page up/down/left/right", async () => {
     mockBoundingClientRect();
     await render(<ExcalidrawApp />, {});
 
     const scrollTest = () => {
-      const scrollY = h.state.scrollY;
+      const initialScrollY = h.state.scrollY;
-      const pageStep = h.state.height / h.state.zoom.value;
+      const initialScrollX = h.state.scrollX;
+      const pageStepY = h.state.height / h.state.zoom.value;
+      const pageStepX = h.state.width / h.state.zoom.value;
       // Assert the following assertions have meaning
-      expect(pageStep).toBeGreaterThan(0);
+      expect(pageStepY).toBeGreaterThan(0);
+      expect(pageStepX).toBeGreaterThan(0);
       // Assert we scroll up
       Keyboard.keyPress(KEYS.PAGE_UP);
-      expect(h.state.scrollY).toBe(scrollY + pageStep);
+      expect(h.state.scrollY).toBe(initialScrollY + pageStepY);
+      // x-axis unchanged
+      expect(h.state.scrollX).toBe(initialScrollX);
+
       // Assert we scroll down
       Keyboard.keyPress(KEYS.PAGE_DOWN);
       Keyboard.keyPress(KEYS.PAGE_DOWN);
-      expect(h.state.scrollY).toBe(scrollY - pageStep);
+      expect(h.state.scrollY).toBe(initialScrollY - pageStepY);
+      // x-axis unchanged
+      expect(h.state.scrollX).toBe(initialScrollX);
+
+      // Assert we scroll left
+      Keyboard.withModifierKeys({ shift: true }, () => {
+        Keyboard.keyPress(KEYS.PAGE_UP);
+      });
+      expect(h.state.scrollX).toBe(initialScrollX + pageStepX);
+      // y-axis unchanged
+      expect(h.state.scrollY).toBe(initialScrollY - pageStepY);
+
+      // Assert we scroll right
+      Keyboard.withModifierKeys({ shift: true }, () => {
+        Keyboard.keyPress(KEYS.PAGE_DOWN);
+        Keyboard.keyPress(KEYS.PAGE_DOWN);
+      });
+      expect(h.state.scrollX).toBe(initialScrollX - pageStepX);
+      // y-axis unchanged
+      expect(h.state.scrollY).toBe(initialScrollY - pageStepY);
     };
+
     const zoom = h.state.zoom.value;
     // Assert we scroll properly when zoomed in
     h.setState({ zoom: { value: (zoom * 1.1) as typeof zoom } });