add fit to screen action

Author: Kr0nox

frontend/webEditor/dependencyGraph.md

@@ -21,6 +21,11 @@ stateDiagram-v2
 
     commandPalette --> serialize
 
+    serialize --> webSocket
+
+    commandPalette --> fitToScreen
+    serialize --> fitToScreen
+
 %%    [*] --> commonModule
 %%    [*] --> labels
 %%    [*] --> serialize
@@ -32,7 +37,7 @@ stateDiagram-v2
 %%    [*] --> commandPalette
 
     classDef diLess font-style:italic,stroke:#0fa
-    class accordionUiExtension,editorTypes,utils diLess
+    class accordionUiExtension,editorTypes,utils,fitToScreen diLess
 ```
 
 green packages do not export a module

frontend/webEditor/src/commandPalette/commandPalette.ts

@@ -3,7 +3,7 @@ import { CommandPalette, LabeledAction, SModelRootImpl } from "sprotty";
 import { matchesKeystroke } from "sprotty/lib/utils/keyboard";
 import "./commandPalette.css";
 import "sprotty/css/command-palette.css";
-import { FolderAction } from "./CommandPaletteProvider";
+import { FolderAction } from "./commandPaletteProvider";
 
 @injectable()
 export class WebEditorCommandPalette extends CommandPalette {

frontend/webEditor/src/commandPalette/commandPaletteProvider.ts

@@ -7,6 +7,7 @@ import { LoadJsonFileAction } from "../serialize/loadJsonFile";
 import { Action } from "sprotty-protocol";
 import { LoadDfdAndDdFileAction } from "../serialize/loadDfdAndDdFile";
 import { LoadPalladioFileAction } from "../serialize/loadPalladioFile";
+import { DefaultFitToScreenAction } from "../fitToScreen/action";
 
 /**
  * Provides possible actions for the command palette.
@@ -15,7 +16,7 @@ import { LoadPalladioFileAction } from "../serialize/loadPalladioFile";
 export class WebEditorCommandPaletteActionProvider implements ICommandPaletteActionProvider {
 
     async getActions(root: Readonly<SModelRootImpl>): Promise<(LabeledAction | FolderAction)[]> {
-        //const fitToScreenAction = createDefaultFitToScreenAction(root);
+        const fitToScreenAction = DefaultFitToScreenAction.create(root);
         const commitAction = CommitModelAction.create();
 
         return [
@@ -43,7 +44,7 @@ export class WebEditorCommandPaletteActionProvider implements ICommandPaletteAct
             ),
 
             new LabeledAction("Load default diagram", [LoadDefaultDiagramAction.create(), commitAction], "clear-all"),
-            //new LabeledAction("Fit to Screen", [fitToScreenAction], "screen-normal"),
+            new LabeledAction("Fit to Screen", [fitToScreenAction], "screen-normal"),
             /*new FolderAction(
                 "Layout diagram (Method: Lines)",
                 [

frontend/webEditor/src/fitToScreen/action.ts

@@ -0,0 +1,16 @@
+import { SModelRootImpl } from "sprotty";
+import { SModelRoot, FitToScreenAction, getBasicType } from "sprotty-protocol";
+
+export const FIT_TO_SCREEN_PADDING = 75;
+
+export namespace DefaultFitToScreenAction {
+    export function create(root: SModelRootImpl | SModelRoot, animate = true): FitToScreenAction {
+        const elementIds =
+            root.children?.filter((child) => getBasicType(child) === "node").map((child) => child.id) ?? [];
+
+        return FitToScreenAction.create(elementIds, {
+            padding: FIT_TO_SCREEN_PADDING,
+            animate,
+        });
+    }
+}

frontend/webEditor/src/serialize/loadDefaultDiagram.ts

@@ -3,7 +3,7 @@ import defaultDiagram from './defaultDiagram.json'
 import { SavedDiagram } from "./SavedDiagram";
 import { Action } from "sprotty-protocol";
 import { inject } from "inversify";
-import { TYPES, ILogger } from "sprotty";
+import { TYPES, ILogger, ActionDispatcher } from "sprotty";
 import { EditorModeController } from "../editorMode/EditorModeController";
 import { LabelTypeRegistry } from "../labels/LabelTypeRegistry";
 
@@ -23,8 +23,9 @@ export class LoadDefaultDiagramCommand extends LoadJsonCommand {
         @inject(TYPES.ILogger) logger: ILogger,
         @inject(LabelTypeRegistry) labelTypeRegistry: LabelTypeRegistry,
         @inject(EditorModeController) editorModeController: EditorModeController,
+        @inject(TYPES.IActionDispatcher) actionDispatcher: ActionDispatcher,
     ) {
-        super(logger, labelTypeRegistry, editorModeController);
+        super(logger, labelTypeRegistry, editorModeController, actionDispatcher);
     }
 
     protected async getFile(): Promise<FileData<SavedDiagram> | undefined> {

frontend/webEditor/src/serialize/loadDfdAndDdFile.ts

@@ -3,7 +3,7 @@ import { FileData, LoadJsonCommand } from "./loadJson";
 import { chooseFiles } from "./fileChooser";
 import { inject } from "inversify";
 import { DfdWebSocket } from "../webSocket/webSocket";
-import { TYPES, ILogger } from "sprotty";
+import { TYPES, ILogger, ActionDispatcher } from "sprotty";
 import { EditorModeController } from "../editorMode/EditorModeController";
 import { LabelTypeRegistry } from "../labels/LabelTypeRegistry";
 import { SavedDiagram } from "./SavedDiagram";
@@ -25,8 +25,9 @@ export class LoadDfdAndDdFileCommand extends LoadJsonCommand {
         @inject(LabelTypeRegistry) labelTypeRegistry: LabelTypeRegistry,
         @inject(EditorModeController) editorModeController: EditorModeController,
         @inject(DfdWebSocket) private dfdWebSocket: DfdWebSocket,
+        @inject(TYPES.IActionDispatcher) actionDispatcher: ActionDispatcher,
     ) {
-        super(logger, labelTypeRegistry, editorModeController);
+        super(logger, labelTypeRegistry, editorModeController, actionDispatcher);
     }
 
     protected async getFile(): Promise<FileData<SavedDiagram> | undefined> {

frontend/webEditor/src/serialize/loadJson.ts

@@ -1,11 +1,12 @@
-import { Command, CommandExecutionContext, CommandReturn, EMPTY_ROOT, ILogger, SModelRootImpl } from "sprotty";
+import { ActionDispatcher, Command, CommandExecutionContext, CommandReturn, EMPTY_ROOT, ILogger, SModelRootImpl } from "sprotty";
 import { SavedDiagram } from "./SavedDiagram";
 import { Action, SModelElement, SModelRoot } from "sprotty-protocol";
 import { LabelTypeRegistry } from "../labels/LabelTypeRegistry";
 import { EditorModeController } from "../editorMode/EditorModeController";
 import { Constraint } from "../constraint/Constraint";
 import { EditorMode } from "../editorMode/EditorMode";
 import { LabelType } from "../labels/LabelType";
+import { DefaultFitToScreenAction } from "../fitToScreen/action";
 
 export interface FileData<T> {
     fileName: string;
@@ -33,6 +34,7 @@ export abstract class LoadJsonCommand extends Command {
         private readonly logger: ILogger,
         private readonly labelTypeRegistry: LabelTypeRegistry,
         private editorModeController: EditorModeController,
+        private actionDispatcher: ActionDispatcher
     ) {
         super();
     }
@@ -75,6 +77,7 @@ export abstract class LoadJsonCommand extends Command {
             // TODO: load constraints
 
             // TODO: post load actions like layout
+            this.actionDispatcher.dispatch(DefaultFitToScreenAction.create(this.newRoot))
 
             // TODO: load file name
             //this.oldFileName = currentFileName;

frontend/webEditor/src/serialize/loadJsonFile.ts

@@ -2,7 +2,7 @@ import { Action } from "sprotty-protocol";
 import { FileData, LoadJsonCommand } from "./loadJson";
 import { chooseFile } from "./fileChooser";
 import { inject } from "inversify";
-import { TYPES, ILogger } from "sprotty";
+import { TYPES, ILogger, ActionDispatcher } from "sprotty";
 import { EditorModeController } from "../editorMode/EditorModeController";
 import { LabelTypeRegistry } from "../labels/LabelTypeRegistry";
 import { SavedDiagram } from "./SavedDiagram";
@@ -24,8 +24,9 @@ export class LoadJsonFileCommand extends LoadJsonCommand {
     @inject(TYPES.ILogger) logger: ILogger,
     @inject(LabelTypeRegistry) labelTypeRegistry: LabelTypeRegistry,
     @inject(EditorModeController) editorModeController: EditorModeController,
+    @inject(TYPES.IActionDispatcher) actionDispatcher: ActionDispatcher,
 ) {
-    super(logger, labelTypeRegistry, editorModeController);
+    super(logger, labelTypeRegistry, editorModeController, actionDispatcher);
 }
 
   protected async getFile(): Promise<FileData<SavedDiagram> | undefined> {

frontend/webEditor/src/serialize/loadPalladioFile.ts

@@ -3,7 +3,7 @@ import { FileData, LoadJsonCommand } from "./loadJson";
 import { chooseFiles } from "./fileChooser";
 import { inject } from "inversify";
 import { DfdWebSocket } from "../webSocket/webSocket";
-import { TYPES, ILogger } from "sprotty";
+import { TYPES, ILogger, ActionDispatcher } from "sprotty";
 import { EditorModeController } from "../editorMode/EditorModeController";
 import { LabelTypeRegistry } from "../labels/LabelTypeRegistry";
 import { SavedDiagram } from "./SavedDiagram";
@@ -25,9 +25,10 @@ export class LoadPalladioFileCommand extends LoadJsonCommand {
         @inject(TYPES.ILogger) logger: ILogger,
         @inject(LabelTypeRegistry) labelTypeRegistry: LabelTypeRegistry,
         @inject(EditorModeController) editorModeController: EditorModeController,
+        @inject(TYPES.IActionDispatcher) actionDispatcher: ActionDispatcher,
         @inject(DfdWebSocket) private dfdWebSocket: DfdWebSocket,
     ) {
-        super(logger, labelTypeRegistry, editorModeController);
+        super(logger, labelTypeRegistry, editorModeController, actionDispatcher);
     }
 
     protected async getFile(): Promise<FileData<SavedDiagram> | undefined> {