Layout options

Documentation.md

@@ -234,13 +234,11 @@ This editor currently has three different modes:
 - `edit`: The default mode, allows to view and edit the diagram. Creation of new elements is possible.
   Existing elements can be moved, modified, and deleted.
   Newly created diagrams are always in this mode.
-- `annotated`: In this mode the diagram is read-only. The node annotations (refer to the DFD elements module)
+- `view`: In this mode the diagram is read-only. The node annotations (refer to the DFD elements module)
   are displayed and can be viewed to get information about e.g. analysis validation errors.
   The user can still zoom and pan the diagram. Creation, deletion, and modification of elements is not possible.
   However the user can click a button to switch to the `edit` mode.
   Doing so will remove all node annotations and allow the user to edit the diagram again.
-- `readonly`: This mode is similar to the `annotated` mode but does not allow switching back to the `edit` mode.
-  It is intended to be used when the diagram is from a generated source and should only be viewed.
 
 Diagrams with modes other than `edit` are not creatable using the editor.
 Diagrams with these modes are intended to be generated from some other source.
@@ -249,7 +247,7 @@ This module contains the `EditorModeController` which manages the global editor
 All other modules that want to behave differently depending on the editor mode use this as a
 source of truth and subscribe to changes of the editor mode.
 Additionally, this module contains a UI that shows when the editor mode is not `edit`
-and allows switching from `annotated` to `edit` mode.
+and allows switching from `view` to `edit` mode.
 
 ### (DFD) Label
 

src/common/commandPalette.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { inject, injectable } from "inversify";
 import { ICommandPaletteActionProvider, LabeledAction, SModelRootImpl, CommitModelAction } from "sprotty";
 import { Point } from "sprotty-protocol";
 import { LoadDiagramAction } from "../features/serialize/load";
@@ -13,12 +13,15 @@ import "./commandPalette.css";
 import { SaveDFDandDDAction } from "../features/serialize/saveDFDandDD";
 import { LoadDFDandDDAction } from "../features/serialize/loadDFDandDD";
 import { LoadPalladioAction } from "../features/serialize/loadPalladio";
+import { SettingsManager } from "../features/settingsMenu/SettingsManager";
 
 /**
  * Provides possible actions for the command palette.
  */
 @injectable()
 export class ServerCommandPaletteActionProvider implements ICommandPaletteActionProvider {
+    constructor(@inject(SettingsManager) protected readonly settings: SettingsManager) {}
+
     async getActions(
         root: Readonly<SModelRootImpl>,
         _text: string,
@@ -37,7 +40,7 @@ export class ServerCommandPaletteActionProvider implements ICommandPaletteAction
             new LabeledAction("Load default diagram", [LoadDefaultDiagramAction.create(), commitAction], "clear-all"),
             new LabeledAction("Fit to Screen", [fitToScreenAction], "layout"),
             new LabeledAction(
-                "Layout diagram",
+                "Layout diagram (Method: " + this.settings.layoutMethod + ")",
                 [LayoutModelAction.create(), commitAction, fitToScreenAction],
                 "layout",
             ),

src/common/di.config.ts

@@ -19,7 +19,6 @@ import { FitToScreenKeyListener as CenterDiagramKeyListener } from "./fitToScree
 import { DiagramModificationCommandStack } from "./customCommandStack";
 
 import "./commonStyling.css";
-import { LightDarkSwitch } from "./lightDarkSwitch";
 
 export const commonModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(ServerCommandPaletteActionProvider).toSelf().inSingletonScope();
@@ -34,10 +33,6 @@ export const commonModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(TYPES.IUIExtension).toService(HelpUI);
     bind(EDITOR_TYPES.DefaultUIElement).toService(HelpUI);
 
-    bind(LightDarkSwitch).toSelf().inSingletonScope();
-    bind(TYPES.IUIExtension).toService(LightDarkSwitch);
-    bind(EDITOR_TYPES.DefaultUIElement).toService(LightDarkSwitch);
-
     bind(DynamicChildrenProcessor).toSelf().inSingletonScope();
 
     unbind(TYPES.ICommandStack);

src/features/autoLayout/command.ts

@@ -1,8 +1,7 @@
-import { inject, optional } from "inversify";
+import { inject } from "inversify";
 import { Command, CommandExecutionContext, SModelRootImpl, TYPES } from "sprotty";
 import { Action, IModelLayoutEngine, SGraph, SModelRoot } from "sprotty-protocol";
 import { LoadDiagramCommand } from "../serialize/load";
-import { EditorModeController } from "../editorMode/editorModeController";
 
 export interface LayoutModelAction extends Action {
     kind: typeof LayoutModelAction.KIND;
@@ -20,22 +19,13 @@ export namespace LayoutModelAction {
 export class LayoutModelCommand extends Command {
     static readonly KIND = LayoutModelAction.KIND;
 
-    @inject(EditorModeController)
-    @optional()
-    private editorModeController?: EditorModeController;
-
     @inject(TYPES.IModelLayoutEngine)
     private readonly layoutEngine?: IModelLayoutEngine;
 
     private oldModelSchema?: SModelRoot;
     private newModel?: SModelRootImpl;
 
     async execute(context: CommandExecutionContext): Promise<SModelRootImpl> {
-        if (this.editorModeController?.isReadOnly()) {
-            // We don't want to layout the model in read-only mode.
-            return context.root;
-        }
-
         this.oldModelSchema = context.modelFactory.createSchema(context.root);
 
         if (!this.layoutEngine) throw new Error("Missing injects");

src/features/autoLayout/di.config.ts

@@ -1,14 +1,15 @@
 import { ContainerModule } from "inversify";
 import { TYPES, configureCommand } from "sprotty";
-import { ElkFactory, ILayoutConfigurator } from "sprotty-elk";
+import { ElkFactory, ILayoutConfigurator, ILayoutPostprocessor } from "sprotty-elk";
 import { LayoutModelCommand } from "./command";
-import { DfdElkLayoutEngine, DfdLayoutConfigurator, elkFactory } from "./layouter";
+import { CircleLayoutPostProcessor, DfdElkLayoutEngine, DfdLayoutConfigurator, elkFactory } from "./layouter";
 import { AutoLayoutKeyListener } from "./keyListener";
 
 export const autoLayoutModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(DfdElkLayoutEngine).toSelf().inSingletonScope();
     bind(TYPES.IModelLayoutEngine).toService(DfdElkLayoutEngine);
     rebind(ILayoutConfigurator).to(DfdLayoutConfigurator);
+    bind(ILayoutPostprocessor).to(CircleLayoutPostProcessor).inSingletonScope();
     bind(ElkFactory).toConstantValue(elkFactory);
     bind(TYPES.KeyListener).to(AutoLayoutKeyListener).inSingletonScope();