Add keyboard shortcut to fit the diagram to the screen

src/common/commandPalette.ts

@@ -29,7 +29,7 @@ export class ServerCommandPaletteActionProvider implements ICommandPaletteAction
         _index?: number,
     ): Promise<LabeledAction[]> {
         const fitToScreenAction = FitToScreenAction.create(
-            root.children.map((child) => child.id), // Fit screen to all children
+            [], // empty elementIds means fit the whole diagram
             { padding: FIT_TO_SCREEN_PADDING },
         );
         const commitAction = CommitModelAction.create();

src/common/di.config.ts

@@ -1,6 +1,7 @@
 import { ContainerModule } from "inversify";
 import {
     CenterGridSnapper,
+    CenterKeyboardListener,
     ConsoleLogger,
     CreateElementCommand,
     LocalModelSource,
@@ -14,6 +15,7 @@ import { HelpUI } from "./helpUi";
 import { DeleteKeyListener } from "./deleteKeyListener";
 import { EDITOR_TYPES } from "../utils";
 import { DynamicChildrenProcessor } from "../features/dfdElements/dynamicChildren";
+import { FitToScreenKeyListener as CenterDiagramKeyListener } from "./fitToScreenKeyListener";
 
 import "./commonStyling.css";
 
@@ -23,6 +25,8 @@ export const dfdCommonModule = new ContainerModule((bind, unbind, isBound, rebin
 
     bind(DeleteKeyListener).toSelf().inSingletonScope();
     bind(TYPES.KeyListener).toService(DeleteKeyListener);
+    bind(CenterDiagramKeyListener).toSelf().inSingletonScope();
+    rebind(CenterKeyboardListener).toService(CenterDiagramKeyListener);
 
     bind(HelpUI).toSelf().inSingletonScope();
     bind(TYPES.IUIExtension).toService(HelpUI);

src/common/fitToScreenKeyListener.ts

@@ -0,0 +1,29 @@
+import { KeyListener, SModelElementImpl } from "sprotty";
+import { Action, CenterAction, FitToScreenAction } from "sprotty-protocol";
+import { matchesKeystroke } from "sprotty/lib/utils/keyboard";
+import { FIT_TO_SCREEN_PADDING } from "../utils";
+
+/**
+ * Key listener that fits the diagram to the screen when pressing Ctrl+Shift+F
+ * and centers the diagram when pressing Ctrl+Shift+C.
+ *
+ * Custom version of the CenterKeyboardListener from sprotty because that one
+ * does not allow setting a padding.
+ */
+export class FitToScreenKeyListener extends KeyListener {
+    override keyDown(_element: SModelElementImpl, event: KeyboardEvent): Action[] {
+        if (matchesKeystroke(event, "KeyC", "ctrlCmd", "shift")) {
+            return [CenterAction.create([])];
+        }
+
+        if (matchesKeystroke(event, "KeyF", "ctrlCmd", "shift")) {
+            return [
+                FitToScreenAction.create([], {
+                    padding: FIT_TO_SCREEN_PADDING,
+                }),
+            ];
+        }
+
+        return [];
+    }
+}

src/common/helpUi.tsx

@@ -35,6 +35,7 @@ export class HelpUI extends AbstractUIExtension {
                     <p><kbd>CTRL</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd>: Open default diagram</p>
                     <p><kbd>CTRL</kbd>+<kbd>S</kbd>: Save diagram to json</p>
                     <p><kbd>CTRL</kbd>+<kbd>L</kbd>: Automatically layout diagram</p>
+                    <p><kbd>CTRL</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd>: Fit diagram to screen</p>
                 </div>
             </div>
         `;

src/features/autoLayout/keyListener.ts

@@ -5,15 +5,15 @@ import { LayoutModelAction } from "./command";
 import { FIT_TO_SCREEN_PADDING } from "../../utils";
 
 export class AutoLayoutKeyListener extends KeyListener {
-    keyDown(element: SModelElementImpl, event: KeyboardEvent): Action[] {
-        if (matchesKeystroke(event, "KeyL", "ctrl")) {
+    keyDown(_element: SModelElementImpl, event: KeyboardEvent): Action[] {
+        if (matchesKeystroke(event, "KeyL", "ctrlCmd")) {
             event.preventDefault();
 
             return [
                 LayoutModelAction.create(),
                 CommitModelAction.create(),
                 FitToScreenAction.create(
-                    element.root.children.map((child) => child.id), // Fit screen to all children
+                    [], // empty elementIds means fit the whole diagram
                     { padding: FIT_TO_SCREEN_PADDING },
                 ),
             ];

src/features/serialize/keyListener.ts

@@ -9,15 +9,15 @@ import { SaveDiagramAction } from "./save";
 @injectable()
 export class SerializeKeyListener extends KeyListener {
     keyDown(_element: SModelElementImpl, event: KeyboardEvent): Action[] {
-        if (matchesKeystroke(event, "KeyO", "ctrl")) {
+        if (matchesKeystroke(event, "KeyO", "ctrlCmd")) {
             // Prevent the browser file open dialog from opening
             event.preventDefault();
 
             return [LoadDiagramAction.create(), CommitModelAction.create()];
-        } else if (matchesKeystroke(event, "KeyO", "ctrl", "shift")) {
+        } else if (matchesKeystroke(event, "KeyO", "ctrlCmd", "shift")) {
             event.preventDefault();
             return [LoadDefaultDiagramAction.create(), CommitModelAction.create()];
-        } else if (matchesKeystroke(event, "KeyS", "ctrl")) {
+        } else if (matchesKeystroke(event, "KeyS", "ctrlCmd")) {
             event.preventDefault();
             return [SaveDiagramAction.create()];
         }

src/features/serialize/load.ts

@@ -197,8 +197,7 @@ export function postLoadActions(newRoot: SModelRootImpl | undefined, actionDispa
     // Because sometimes the InitializeCanvasBoundsCommand is only dispatched after another tick, we use a 10ms timeout.
     // This should be plenty of time for the InitializeCanvasBoundsCommand to be dispatched and isn't noticeable.
     setTimeout(async () => {
-        const elements = newRoot?.children.map((child) => child.id);
-        const fitToScreenAction = FitToScreenAction.create(elements, {
+        const fitToScreenAction = FitToScreenAction.create([], {
             animate: false,
             padding: FIT_TO_SCREEN_PADDING,
         });