From 7e10d0e88f98301e066f7b5882b20211bb7a284d Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Sun, 5 Jan 2025 15:32:28 +0100 Subject: [PATCH 01/24] basic layout choice menu --- src/common/commandPalette.ts | 7 ++- src/common/di.config.ts | 6 +++ src/common/lightDarkSwitch.css | 2 +- src/common/settingsMenu.css | 30 +++++++++++++ src/common/settingsMenu.ts | 70 +++++++++++++++++++++++++++++ src/features/autoLayout/layouter.ts | 53 +++++++++++++++++----- 6 files changed, 154 insertions(+), 14 deletions(-) create mode 100644 src/common/settingsMenu.css create mode 100644 src/common/settingsMenu.ts diff --git a/src/common/commandPalette.ts b/src/common/commandPalette.ts index d18c258..bfe9cc4 100644 --- a/src/common/commandPalette.ts +++ b/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"; @@ -10,12 +10,15 @@ import { LayoutModelAction } from "../features/autoLayout/command"; import "@vscode/codicons/dist/codicon.css"; import "sprotty/css/command-palette.css"; import "./commandPalette.css"; +import { SettingsManager } from "./settingsMenu"; /** * Provides possible actions for the command palette. */ @injectable() export class ServerCommandPaletteActionProvider implements ICommandPaletteActionProvider { + constructor(@inject(SettingsManager) protected readonly settings: SettingsManager) {} + async getActions( root: Readonly, _text: string, @@ -31,7 +34,7 @@ export class ServerCommandPaletteActionProvider implements ICommandPaletteAction new LabeledAction("Load diagram from JSON", [LoadDiagramAction.create(), commitAction], "go-to-file"), new LabeledAction("Load default diagram", [LoadDefaultDiagramAction.create(), commitAction], "clear-all"), new LabeledAction( - "Layout diagram", + "Layout diagram (Method: " + this.settings.layoutMethod + ")", [LayoutModelAction.create(), commitAction, fitToScreenAction], "layout", ), diff --git a/src/common/di.config.ts b/src/common/di.config.ts index bf6d548..63acc5e 100644 --- a/src/common/di.config.ts +++ b/src/common/di.config.ts @@ -20,6 +20,7 @@ import { DiagramModificationCommandStack } from "./customCommandStack"; import "./commonStyling.css"; import { LightDarkSwitch } from "./lightDarkSwitch"; +import { SettingsManager, SettingsUI } from "./settingsMenu"; export const commonModule = new ContainerModule((bind, unbind, isBound, rebind) => { bind(ServerCommandPaletteActionProvider).toSelf().inSingletonScope(); @@ -34,6 +35,11 @@ export const commonModule = new ContainerModule((bind, unbind, isBound, rebind) bind(TYPES.IUIExtension).toService(HelpUI); bind(EDITOR_TYPES.DefaultUIElement).toService(HelpUI); + bind(SettingsManager).toSelf().inSingletonScope(); + bind(SettingsUI).toSelf().inSingletonScope(); + bind(TYPES.IUIExtension).toService(SettingsUI); + bind(EDITOR_TYPES.DefaultUIElement).toService(SettingsUI); + bind(LightDarkSwitch).toSelf().inSingletonScope(); bind(TYPES.IUIExtension).toService(LightDarkSwitch); bind(EDITOR_TYPES.DefaultUIElement).toService(LightDarkSwitch); diff --git a/src/common/lightDarkSwitch.css b/src/common/lightDarkSwitch.css index 7e5f62d..16574d6 100644 --- a/src/common/lightDarkSwitch.css +++ b/src/common/lightDarkSwitch.css @@ -1,5 +1,5 @@ div.light-dark-switch { - left: 20px; + left: 242px; bottom: 70px; padding: 10px 10px; } diff --git a/src/common/settingsMenu.css b/src/common/settingsMenu.css new file mode 100644 index 0000000..58a9ac0 --- /dev/null +++ b/src/common/settingsMenu.css @@ -0,0 +1,30 @@ +div.settings-ui { + left: 20px; + bottom: 70px; + padding: 10px 10px; + min-width: 190px; +} + +#settings-ui-accordion-label .accordion-button::before { + content: ""; + background-image: url("@fortawesome/fontawesome-free/svgs/solid/gear.svg"); + display: inline-block; + filter: invert(var(--dark-mode)); + height: 16px; + width: 16px; + background-size: 16px 16px; + vertical-align: text-top; +} + +#settings-content { + display: grid; +} + +#settings-content > label { + grid-column-start: 1; +} + +#settings-content > input, +#settings-content > select { + grid-column-start: 2; +} diff --git a/src/common/settingsMenu.ts b/src/common/settingsMenu.ts new file mode 100644 index 0000000..24aa917 --- /dev/null +++ b/src/common/settingsMenu.ts @@ -0,0 +1,70 @@ +import { AbstractUIExtension } from "sprotty"; +import { inject, injectable } from "inversify"; + +import "./settingsMenu.css"; + +@injectable() +export class SettingsManager { + public layoutMethod: LayoutMethod = LayoutMethod.LINES; +} + +@injectable() +export class SettingsUI extends AbstractUIExtension { + static readonly ID = "settings-ui"; + + constructor(@inject(SettingsManager) protected readonly settings: SettingsManager) { + super(); + } + + id(): string { + return SettingsUI.ID; + } + + containerClass(): string { + return SettingsUI.ID; + } + + protected initializeContents(containerElement: HTMLElement): void { + containerElement.classList.add("ui-float"); + containerElement.innerHTML = ` + + +
+
+ + +
+
+ `; + + // Set `settings-enabled` class on body element when keyboard shortcut overview is open. + const checkbox = containerElement.querySelector("#accordion-state-settings") as HTMLInputElement; + const bodyElement = document.querySelector("body") as HTMLBodyElement; + checkbox.addEventListener("change", () => { + if (checkbox.checked) { + bodyElement.classList.add("settings-enabled"); + } else { + bodyElement.classList.remove("settings-enabled"); + } + }); + + const layoutOptionSelect = containerElement.querySelector("#setting-layout-option") as HTMLSelectElement; + layoutOptionSelect.addEventListener("change", () => { + this.settings.layoutMethod = layoutOptionSelect.value as LayoutMethod; + }); + } +} + +export enum LayoutMethod { + LINES = "Lines", + WRAPPING = "Wrapping Lines", + CIRCLES = "Circles", +} diff --git a/src/features/autoLayout/layouter.ts b/src/features/autoLayout/layouter.ts index cc8c461..bfef8a4 100644 --- a/src/features/autoLayout/layouter.ts +++ b/src/features/autoLayout/layouter.ts @@ -10,27 +10,58 @@ import { import { SChildElementImpl, SShapeElementImpl, isBoundsAware } from "sprotty"; import { SShapeElement, SGraph, SModelIndex } from "sprotty-protocol"; import { ElkShape, LayoutOptions } from "elkjs"; +import { LayoutMethod, SettingsManager } from "../../common/settingsMenu"; export class DfdLayoutConfigurator extends DefaultLayoutConfigurator { + constructor(@inject(SettingsManager) protected readonly settings: SettingsManager) { + super(); + } + protected override graphOptions(_sgraph: SGraph, _index: SModelIndex): LayoutOptions { // Elk settings. See https://eclipse.dev/elk/reference.html for available options. return { - "org.eclipse.elk.algorithm": "org.eclipse.elk.layered", - "org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "30.0", - "org.eclipse.elk.layered.spacing.edgeNodeBetweenLayers": "20.0", - "org.eclipse.elk.port.borderOffset": "14.0", - // Do not do micro layout for nodes, which includes the node dimensions etc. - // These are all automatically determined by our dfd node views - "org.eclipse.elk.omitNodeMicroLayout": "true", - // Balanced graph > straight edges - "org.eclipse.elk.layered.nodePlacement.favorStraightEdges": "false", - }; + [LayoutMethod.LINES]: { + "org.eclipse.elk.algorithm": "org.eclipse.elk.layered", + "org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "30.0", + "org.eclipse.elk.layered.spacing.edgeNodeBetweenLayers": "20.0", + "org.eclipse.elk.port.borderOffset": "14.0", + // Do not do micro layout for nodes, which includes the node dimensions etc. + // These are all automatically determined by our dfd node views + "org.eclipse.elk.omitNodeMicroLayout": "true", + // Balanced graph > straight edges + "org.eclipse.elk.layered.nodePlacement.favorStraightEdges": "false", + }, + [LayoutMethod.WRAPPING]: { + "org.eclipse.elk.algorithm": "org.eclipse.elk.layered", + "org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "10.0", //Save more space between layers (long names might break this!) + "org.eclipse.elk.layered.spacing.edgeNodeBetweenLayers": "5.0", //Save more space between layers (long names might break this!) + "org.eclipse.elk.edgeRouting": "ORTHOGONAL", //Edges should be routed orthogonal to each another + "org.eclipse.elk.layered.layering.strategy": "COFFMAN_GRAHAM", + "org.eclipse.elk.layered.compaction.postCompaction.strategy": "LEFT_RIGHT_CONSTRAINT_LOCKING", //Compact the resulting graph horizontally + "org.eclipse.elk.layered.wrapping.strategy": "MULTI_EDGE", //Allow wrapping of multiple edges + "org.eclipse.elk.layered.wrapping.correctionFactor": "2.0", //Allow the wrapping to occur earlier + // Do not do micro layout for nodes, which includes the node dimensions etc. + // These are all automatically determined by our dfd node views + "org.eclipse.elk.omitNodeMicroLayout": "true", + }, + [LayoutMethod.CIRCLES]: { + "org.eclipse.elk.algorithm": "org.eclipse.elk.stress", + "org.eclipse.elk.force.repulsion": "5.0", + "org.eclipse.elk.force.iterations": "100", //Reduce iterations for faster formatting, did not notice differences with more iterations + "org.eclipse.elk.force.repulsivePower": "1", //Edges should repel vertices as well + "org.eclipse.elk.port.borderOffset": "14.0", + // Do not do micro layout for nodes, which includes the node dimensions etc. + // These are all automatically determined by our dfd node views + "org.eclipse.elk.omitNodeMicroLayout": "true", + // Balanced graph > straight edges + }, + }[this.settings.layoutMethod]; } } export const elkFactory = () => new ElkConstructor({ - algorithms: ["layered"], + algorithms: ["layered", "stress"], }); /** From 3d31eb2a1e7f640b6ffb4646aaebddb3ef74d898 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Fri, 31 Jan 2025 16:15:52 +0100 Subject: [PATCH 02/24] move theme switch --- src/common/di.config.ts | 7 +-- src/common/lightDarkSwitch.css | 20 ------- src/common/lightDarkSwitch.ts | 56 ------------------- src/common/settingsMenu.css | 11 +++- src/common/settingsMenu.ts | 23 ++++++-- src/common/switchable.ts | 5 ++ src/common/themeManager.ts | 48 ++++++++++++++++ src/features/constraintMenu/ConstraintMenu.ts | 2 +- src/features/constraintMenu/di.config.ts | 2 +- src/features/dfdElements/di.config.ts | 2 +- src/features/dfdElements/outputPortEditUi.ts | 4 +- 11 files changed, 89 insertions(+), 91 deletions(-) delete mode 100644 src/common/lightDarkSwitch.css delete mode 100644 src/common/lightDarkSwitch.ts create mode 100644 src/common/switchable.ts create mode 100644 src/common/themeManager.ts diff --git a/src/common/di.config.ts b/src/common/di.config.ts index 63acc5e..c17b6bf 100644 --- a/src/common/di.config.ts +++ b/src/common/di.config.ts @@ -19,8 +19,8 @@ import { FitToScreenKeyListener as CenterDiagramKeyListener } from "./fitToScree import { DiagramModificationCommandStack } from "./customCommandStack"; import "./commonStyling.css"; -import { LightDarkSwitch } from "./lightDarkSwitch"; import { SettingsManager, SettingsUI } from "./settingsMenu"; +import { ThemeManager } from "./themeManager"; export const commonModule = new ContainerModule((bind, unbind, isBound, rebind) => { bind(ServerCommandPaletteActionProvider).toSelf().inSingletonScope(); @@ -36,14 +36,11 @@ export const commonModule = new ContainerModule((bind, unbind, isBound, rebind) bind(EDITOR_TYPES.DefaultUIElement).toService(HelpUI); bind(SettingsManager).toSelf().inSingletonScope(); + bind(ThemeManager).toSelf().inSingletonScope(); bind(SettingsUI).toSelf().inSingletonScope(); bind(TYPES.IUIExtension).toService(SettingsUI); bind(EDITOR_TYPES.DefaultUIElement).toService(SettingsUI); - bind(LightDarkSwitch).toSelf().inSingletonScope(); - bind(TYPES.IUIExtension).toService(LightDarkSwitch); - bind(EDITOR_TYPES.DefaultUIElement).toService(LightDarkSwitch); - bind(DynamicChildrenProcessor).toSelf().inSingletonScope(); unbind(TYPES.ICommandStack); diff --git a/src/common/lightDarkSwitch.css b/src/common/lightDarkSwitch.css deleted file mode 100644 index 16574d6..0000000 --- a/src/common/lightDarkSwitch.css +++ /dev/null @@ -1,20 +0,0 @@ -div.light-dark-switch { - left: 242px; - bottom: 70px; - padding: 10px 10px; -} - -#light-dark-label #light-dark-button::before { - content: ""; - background-image: url("@fortawesome/fontawesome-free/svgs/regular/moon.svg"); - display: inline-block; - filter: invert(var(--dark-mode)); - height: 16px; - width: 16px; - background-size: 16px 16px; - vertical-align: text-top; -} - -#light-dark-switch:checked ~ label #light-dark-button::before { - background-image: url("@fortawesome/fontawesome-free/svgs/regular/sun.svg"); -} diff --git a/src/common/lightDarkSwitch.ts b/src/common/lightDarkSwitch.ts deleted file mode 100644 index 31ac999..0000000 --- a/src/common/lightDarkSwitch.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { injectable, multiInject } from "inversify"; -import "./lightDarkSwitch.css"; -import { AbstractUIExtension } from "sprotty"; - -export const SWITCHABLE = Symbol("Switchable"); - -export interface Switchable { - switchTheme(useDark: boolean): void; -} - -@injectable() -export class LightDarkSwitch extends AbstractUIExtension { - static readonly ID = "light-dark-switch"; - static useDarkMode = false; - - constructor(@multiInject(SWITCHABLE) protected switchables: Switchable[]) { - super(); - } - - id(): string { - return LightDarkSwitch.ID; - } - containerClass(): string { - return LightDarkSwitch.ID; - } - protected initializeContents(containerElement: HTMLElement): void { - containerElement.classList.add("ui-float"); - containerElement.innerHTML = ` - - - `; - - const checkbox = containerElement.querySelector("#light-dark-switch") as HTMLInputElement; - checkbox.addEventListener("change", () => { - this.changeDarkMode(checkbox.checked); - }); - - // use the default browser theme - if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { - checkbox.checked = true; - this.changeDarkMode(true); - } - } - - private changeDarkMode(useDark: boolean) { - const rootElement = document.querySelector(":root") as HTMLElement; - const sprottyElement = document.querySelector("#sprotty") as HTMLElement; - - const value = useDark ? "dark" : "light"; - rootElement.setAttribute("data-theme", value); - sprottyElement.setAttribute("data-theme", value); - this.switchables.forEach((s) => s.switchTheme(useDark)); - } -} diff --git a/src/common/settingsMenu.css b/src/common/settingsMenu.css index 58a9ac0..07e9adb 100644 --- a/src/common/settingsMenu.css +++ b/src/common/settingsMenu.css @@ -2,7 +2,6 @@ div.settings-ui { left: 20px; bottom: 70px; padding: 10px 10px; - min-width: 190px; } #settings-ui-accordion-label .accordion-button::before { @@ -18,6 +17,9 @@ div.settings-ui { #settings-content { display: grid; + gap: 8px 6px; + + align-items: center; } #settings-content > label { @@ -28,3 +30,10 @@ div.settings-ui { #settings-content > select { grid-column-start: 2; } + +#settings-content select { + background-color: var(--color-background); + color: var(--color-foreground); + border: 1px solid var(--color-foreground); + border-radius: 6px; +} diff --git a/src/common/settingsMenu.ts b/src/common/settingsMenu.ts index 24aa917..d68f9ac 100644 --- a/src/common/settingsMenu.ts +++ b/src/common/settingsMenu.ts @@ -2,6 +2,7 @@ import { AbstractUIExtension } from "sprotty"; import { inject, injectable } from "inversify"; import "./settingsMenu.css"; +import { Theme, ThemeManager } from "./themeManager"; @injectable() export class SettingsManager { @@ -12,7 +13,10 @@ export class SettingsManager { export class SettingsUI extends AbstractUIExtension { static readonly ID = "settings-ui"; - constructor(@inject(SettingsManager) protected readonly settings: SettingsManager) { + constructor( + @inject(SettingsManager) protected readonly settings: SettingsManager, + @inject(ThemeManager) protected readonly themeManager: ThemeManager, + ) { super(); } @@ -29,18 +33,24 @@ export class SettingsUI extends AbstractUIExtension { containerElement.innerHTML = ` + + + `; @@ -88,5 +98,19 @@ export class SettingsUI extends AbstractUIExtension { "#setting-simplify-node-names", ) as HTMLInputElement; this.settings.bindSimplifyNodeNamesCheckbox(simplifyNodeNamesCheckbox); + + const readOnlyCheckbox = containerElement.querySelector("#setting-read-only") as HTMLInputElement; + this.editorModeController.onModeChange((mode) => { + readOnlyCheckbox.checked = mode !== "edit"; + }); + if (this.editorModeController.isReadOnly()) { + readOnlyCheckbox.checked = true; + } + if (this.editorModeController.getCurrentMode() === "readonly") { + readOnlyCheckbox.disabled = true; + } + readOnlyCheckbox.addEventListener("change", () => { + this.dispatcher.dispatch(ChangeReadOnlyAction.create(readOnlyCheckbox.checked)); + }); } } From 1015918b81d3d121520dc883ae62e315e2ee4dd1 Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Thu, 6 Mar 2025 10:51:25 +0100 Subject: [PATCH 16/24] fix switch edge cases --- src/features/settingsMenu/commands.ts | 8 ++++++-- src/features/settingsMenu/settingsMenu.ts | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/features/settingsMenu/commands.ts b/src/features/settingsMenu/commands.ts index 52bc7b0..dea3bf3 100644 --- a/src/features/settingsMenu/commands.ts +++ b/src/features/settingsMenu/commands.ts @@ -90,7 +90,9 @@ export class SimplifyNodeNamesCommand extends Command { node.hideLabels = mode === "hide"; node.minimumWidth = mode === "hide" ? DfdNodeImpl.DEFAULT_WIDTH / 2 : DfdNodeImpl.DEFAULT_WIDTH; }); - this.editorModeController.setMode(mode === "hide" ? "annotated" : "edit"); + if (this.editorModeController.getCurrentMode() !== "readonly") { + this.editorModeController.setMode(mode === "hide" || this.settings.hideEdgeLabels ? "annotated" : "edit"); + } return context.root; } } @@ -129,7 +131,9 @@ export class ChangeEdgeLabelVisibilityCommand extends Command { } label.text = hide ? "" : (edge.text ?? ""); }); - this.editorModeController.setMode(hide ? "annotated" : "edit"); + if (this.editorModeController.getCurrentMode() !== "readonly") { + this.editorModeController.setMode(hide || this.settings.simplifyNodeNames ? "annotated" : "edit"); + } return context.root; } } diff --git a/src/features/settingsMenu/settingsMenu.ts b/src/features/settingsMenu/settingsMenu.ts index 45788d6..d877da5 100644 --- a/src/features/settingsMenu/settingsMenu.ts +++ b/src/features/settingsMenu/settingsMenu.ts @@ -110,7 +110,9 @@ export class SettingsUI extends AbstractUIExtension { readOnlyCheckbox.disabled = true; } readOnlyCheckbox.addEventListener("change", () => { - this.dispatcher.dispatch(ChangeReadOnlyAction.create(readOnlyCheckbox.checked)); + if (this.editorModeController.getCurrentMode() !== "readonly") { + this.dispatcher.dispatch(ChangeReadOnlyAction.create(readOnlyCheckbox.checked)); + } }); } } From d282d3bd15d17c8bdcef096bd17cbc05f7c0e4a7 Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Thu, 6 Mar 2025 10:52:52 +0100 Subject: [PATCH 17/24] remove unused variables --- src/features/editorMode/modeSwitchUi.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/features/editorMode/modeSwitchUi.ts b/src/features/editorMode/modeSwitchUi.ts index 97cb08f..cef6155 100644 --- a/src/features/editorMode/modeSwitchUi.ts +++ b/src/features/editorMode/modeSwitchUi.ts @@ -1,7 +1,6 @@ -import { AbstractUIExtension, ActionDispatcher, TYPES } from "sprotty"; +import { AbstractUIExtension } from "sprotty"; import { EditorMode, EditorModeController } from "./editorModeController"; import { inject, injectable } from "inversify"; -import { ChangeEditorModeAction } from "./command"; import "./modeSwitchUi.css"; @@ -18,8 +17,6 @@ export class EditorModeSwitchUi extends AbstractUIExtension { constructor( @inject(EditorModeController) private readonly editorModeController: EditorModeController, - @inject(TYPES.IActionDispatcher) - private readonly actionDispatcher: ActionDispatcher, ) { super(); } From 6b84cc2a5f401c44b343aebff753c72b32e312c6 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Sat, 8 Mar 2025 17:35:54 +0100 Subject: [PATCH 18/24] reset simplification when disabeling readonly --- src/features/settingsMenu/commands.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/features/settingsMenu/commands.ts b/src/features/settingsMenu/commands.ts index dea3bf3..675687d 100644 --- a/src/features/settingsMenu/commands.ts +++ b/src/features/settingsMenu/commands.ts @@ -268,24 +268,41 @@ export class ReSnapPortsAfterChangeCommand extends Command { @injectable() export class ChangeReadOnlyCommand extends Command { static readonly KIND = ChangeReadOnlyAction.KIND; + private previousSimplifyNodeNames: boolean; + private previousHideEdgeLabels: boolean; constructor( @inject(TYPES.Action) private action: ChangeReadOnlyAction, + @inject(SettingsManager) private settings: SettingsManager, @inject(EditorModeController) private editorModeController: EditorModeController, ) { super(); + this.previousSimplifyNodeNames = settings.simplifyNodeNames; + this.previousHideEdgeLabels = settings.hideEdgeLabels; } execute(context: CommandExecutionContext): CommandReturn { this.editorModeController.setMode(this.action.readOnly ? "annotated" : "edit"); + if (!this.action.readOnly) { + this.settings.simplifyNodeNames = false; + this.settings.hideEdgeLabels = false; + } return context.root; } undo(context: CommandExecutionContext): CommandReturn { this.editorModeController.setMode(this.action.readOnly ? "edit" : "annotated"); + if (!this.action.readOnly) { + this.settings.simplifyNodeNames = this.previousSimplifyNodeNames; + this.settings.hideEdgeLabels = this.previousHideEdgeLabels; + } return context.root; } redo(context: CommandExecutionContext): CommandReturn { this.editorModeController.setMode(this.action.readOnly ? "annotated" : "edit"); + if (!this.action.readOnly) { + this.settings.simplifyNodeNames = false; + this.settings.hideEdgeLabels = false; + } return context.root; } } From 18b54304faa56d4bd355cfb74e38132888d4dd40 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Wed, 12 Mar 2025 12:51:39 +0100 Subject: [PATCH 19/24] move to only two modes --- Documentation.md | 6 ++---- src/features/editorMode/command.ts | 4 ++-- .../editorMode/editorModeController.ts | 2 +- src/features/editorMode/modeSwitchUi.ts | 18 +++--------------- src/features/settingsMenu/commands.ts | 16 +++++++--------- 5 files changed, 15 insertions(+), 31 deletions(-) diff --git a/Documentation.md b/Documentation.md index f10a83a..8863ff8 100644 --- a/Documentation.md +++ b/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 diff --git a/src/features/editorMode/command.ts b/src/features/editorMode/command.ts index b1acd4e..a1e67c1 100644 --- a/src/features/editorMode/command.ts +++ b/src/features/editorMode/command.ts @@ -60,7 +60,7 @@ export class ChangeEditorModeCommand extends Command { } private postModeSwitch(context: CommandExecutionContext): void { - if (this.oldMode === "annotated" && this.action.newMode === "edit") { + if (this.oldMode === "view" && this.action.newMode === "edit") { // Remove annotations when enabling editing this.oldNodeAnnotations.clear(); @@ -74,7 +74,7 @@ export class ChangeEditorModeCommand extends Command { } private undoPostModeSwitch(context: CommandExecutionContext): void { - if (this.oldMode === "annotated" && this.action.newMode === "edit") { + if (this.oldMode === "view" && this.action.newMode === "edit") { // Restore annotations when disabling editing this.oldNodeAnnotations.forEach((annotation, id) => { const element = context.root.index.getById(id); diff --git a/src/features/editorMode/editorModeController.ts b/src/features/editorMode/editorModeController.ts index 7ce217e..db4ac77 100644 --- a/src/features/editorMode/editorModeController.ts +++ b/src/features/editorMode/editorModeController.ts @@ -1,6 +1,6 @@ import { injectable } from "inversify"; -export type EditorMode = "edit" | "annotated" | "readonly"; +export type EditorMode = "edit" | "view"; /** * Holds the current editor mode in a central place. diff --git a/src/features/editorMode/modeSwitchUi.ts b/src/features/editorMode/modeSwitchUi.ts index cef6155..26c976c 100644 --- a/src/features/editorMode/modeSwitchUi.ts +++ b/src/features/editorMode/modeSwitchUi.ts @@ -7,8 +7,6 @@ import "./modeSwitchUi.css"; /** * UI that shows the current editor mode (unless it is edit mode) * with details about the mode. - * For annotated mode the user can also choose to enable editing - * and switch the editor to edit mode. */ @injectable() export class EditorModeSwitchUi extends AbstractUIExtension { @@ -41,29 +39,19 @@ export class EditorModeSwitchUi extends AbstractUIExtension { case "edit": this.containerElement.style.visibility = "hidden"; break; - case "readonly": + case "view": this.containerElement.style.visibility = "visible"; - this.renderReadonlyMode(); - break; - case "annotated": - this.containerElement.style.visibility = "visible"; - this.renderAnnotatedMode(); + this.renderViewMode(); break; default: throw new Error(`Unknown editor mode: ${mode}`); } } - private renderAnnotatedMode(): void { + private renderViewMode(): void { this.containerElement.innerHTML = ` Currently viewing model in read only mode.
Enabling editing will remove the annotations.
`; } - - private renderReadonlyMode(): void { - this.containerElement.innerHTML = ` - This diagram was generated and is readonly. - `; - } } diff --git a/src/features/settingsMenu/commands.ts b/src/features/settingsMenu/commands.ts index 675687d..9711148 100644 --- a/src/features/settingsMenu/commands.ts +++ b/src/features/settingsMenu/commands.ts @@ -90,9 +90,8 @@ export class SimplifyNodeNamesCommand extends Command { node.hideLabels = mode === "hide"; node.minimumWidth = mode === "hide" ? DfdNodeImpl.DEFAULT_WIDTH / 2 : DfdNodeImpl.DEFAULT_WIDTH; }); - if (this.editorModeController.getCurrentMode() !== "readonly") { - this.editorModeController.setMode(mode === "hide" || this.settings.hideEdgeLabels ? "annotated" : "edit"); - } + this.editorModeController.setMode(mode === "hide" || this.settings.hideEdgeLabels ? "view" : "edit"); + return context.root; } } @@ -131,9 +130,8 @@ export class ChangeEdgeLabelVisibilityCommand extends Command { } label.text = hide ? "" : (edge.text ?? ""); }); - if (this.editorModeController.getCurrentMode() !== "readonly") { - this.editorModeController.setMode(hide || this.settings.simplifyNodeNames ? "annotated" : "edit"); - } + this.editorModeController.setMode(hide || this.settings.simplifyNodeNames ? "view" : "edit"); + return context.root; } } @@ -282,7 +280,7 @@ export class ChangeReadOnlyCommand extends Command { } execute(context: CommandExecutionContext): CommandReturn { - this.editorModeController.setMode(this.action.readOnly ? "annotated" : "edit"); + this.editorModeController.setMode(this.action.readOnly ? "view" : "edit"); if (!this.action.readOnly) { this.settings.simplifyNodeNames = false; this.settings.hideEdgeLabels = false; @@ -290,7 +288,7 @@ export class ChangeReadOnlyCommand extends Command { return context.root; } undo(context: CommandExecutionContext): CommandReturn { - this.editorModeController.setMode(this.action.readOnly ? "edit" : "annotated"); + this.editorModeController.setMode(this.action.readOnly ? "edit" : "view"); if (!this.action.readOnly) { this.settings.simplifyNodeNames = this.previousSimplifyNodeNames; this.settings.hideEdgeLabels = this.previousHideEdgeLabels; @@ -298,7 +296,7 @@ export class ChangeReadOnlyCommand extends Command { return context.root; } redo(context: CommandExecutionContext): CommandReturn { - this.editorModeController.setMode(this.action.readOnly ? "annotated" : "edit"); + this.editorModeController.setMode(this.action.readOnly ? "view" : "edit"); if (!this.action.readOnly) { this.settings.simplifyNodeNames = false; this.settings.hideEdgeLabels = false; From 3f6dc88d24d743b900674fb66d6bd8f130dda40a Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Wed, 12 Mar 2025 13:24:27 +0100 Subject: [PATCH 20/24] remove duplicate command --- src/features/settingsMenu/actions.ts | 13 ------ src/features/settingsMenu/commands.ts | 53 +++-------------------- src/features/settingsMenu/di.config.ts | 2 - src/features/settingsMenu/settingsMenu.ts | 9 +--- 4 files changed, 9 insertions(+), 68 deletions(-) diff --git a/src/features/settingsMenu/actions.ts b/src/features/settingsMenu/actions.ts index 21c1a56..5a2c50d 100644 --- a/src/features/settingsMenu/actions.ts +++ b/src/features/settingsMenu/actions.ts @@ -65,16 +65,3 @@ export namespace ReSnapPortsAfterChangeAction { return { kind: KIND }; } } - -export interface ChangeReadOnlyAction extends Action { - kind: typeof ChangeReadOnlyAction.KIND; - readOnly: boolean; -} - -export namespace ChangeReadOnlyAction { - export const KIND = "change-read-only"; - - export function create(readOnly: boolean): ChangeReadOnlyAction { - return { kind: KIND, readOnly }; - } -} diff --git a/src/features/settingsMenu/commands.ts b/src/features/settingsMenu/commands.ts index 9711148..23b19c6 100644 --- a/src/features/settingsMenu/commands.ts +++ b/src/features/settingsMenu/commands.ts @@ -16,7 +16,6 @@ import { DfdNodeImpl } from "../dfdElements/nodes"; import { SettingsManager } from "./SettingsManager"; import { ChangeEdgeLabelVisibilityAction, - ChangeReadOnlyAction, ChangeThemeAction, CompleteLayoutProcessAction, ReSnapPortsAfterChangeAction, @@ -76,7 +75,7 @@ export class SimplifyNodeNamesCommand extends Command { return this.portMove.redo(context); } - private perform(context: CommandExecutionContext, mode: SimplifyNodeNamesAction.Mode): SModelRootImpl { + private perform(context: CommandExecutionContext, mode: SimplifyNodeNamesAction.Mode): CommandReturn { this.settings.simplifyNodeNames = mode === "hide"; const nodes = context.root.children.filter((node) => getBasicType(node) === "node") as DfdNodeImpl[]; nodes.forEach((node) => { @@ -90,7 +89,9 @@ export class SimplifyNodeNamesCommand extends Command { node.hideLabels = mode === "hide"; node.minimumWidth = mode === "hide" ? DfdNodeImpl.DEFAULT_WIDTH / 2 : DfdNodeImpl.DEFAULT_WIDTH; }); - this.editorModeController.setMode(mode === "hide" || this.settings.hideEdgeLabels ? "view" : "edit"); + if (mode === "hide") { + this.editorModeController.setMode("view"); + } return context.root; } @@ -130,7 +131,9 @@ export class ChangeEdgeLabelVisibilityCommand extends Command { } label.text = hide ? "" : (edge.text ?? ""); }); - this.editorModeController.setMode(hide || this.settings.simplifyNodeNames ? "view" : "edit"); + if (hide) { + this.editorModeController.setMode("view"); + } return context.root; } @@ -262,45 +265,3 @@ export class ReSnapPortsAfterChangeCommand extends Command { }); } } - -@injectable() -export class ChangeReadOnlyCommand extends Command { - static readonly KIND = ChangeReadOnlyAction.KIND; - private previousSimplifyNodeNames: boolean; - private previousHideEdgeLabels: boolean; - - constructor( - @inject(TYPES.Action) private action: ChangeReadOnlyAction, - @inject(SettingsManager) private settings: SettingsManager, - @inject(EditorModeController) private editorModeController: EditorModeController, - ) { - super(); - this.previousSimplifyNodeNames = settings.simplifyNodeNames; - this.previousHideEdgeLabels = settings.hideEdgeLabels; - } - - execute(context: CommandExecutionContext): CommandReturn { - this.editorModeController.setMode(this.action.readOnly ? "view" : "edit"); - if (!this.action.readOnly) { - this.settings.simplifyNodeNames = false; - this.settings.hideEdgeLabels = false; - } - return context.root; - } - undo(context: CommandExecutionContext): CommandReturn { - this.editorModeController.setMode(this.action.readOnly ? "edit" : "view"); - if (!this.action.readOnly) { - this.settings.simplifyNodeNames = this.previousSimplifyNodeNames; - this.settings.hideEdgeLabels = this.previousHideEdgeLabels; - } - return context.root; - } - redo(context: CommandExecutionContext): CommandReturn { - this.editorModeController.setMode(this.action.readOnly ? "view" : "edit"); - if (!this.action.readOnly) { - this.settings.simplifyNodeNames = false; - this.settings.hideEdgeLabels = false; - } - return context.root; - } -} diff --git a/src/features/settingsMenu/di.config.ts b/src/features/settingsMenu/di.config.ts index 916ddff..e299c6b 100644 --- a/src/features/settingsMenu/di.config.ts +++ b/src/features/settingsMenu/di.config.ts @@ -5,7 +5,6 @@ import { EDITOR_TYPES } from "../../utils"; import { configureCommand, TYPES } from "sprotty"; import { ChangeEdgeLabelVisibilityCommand, - ChangeReadOnlyCommand, ChangeThemeCommand, CompleteLayoutProcessCommand, NodeNameReplacementRegistry, @@ -26,5 +25,4 @@ export const settingsModule = new ContainerModule((bind, unbind, isBound, rebind configureCommand(context, ChangeEdgeLabelVisibilityCommand); configureCommand(context, CompleteLayoutProcessCommand); configureCommand(context, ChangeThemeCommand); - configureCommand(context, ChangeReadOnlyCommand); }); diff --git a/src/features/settingsMenu/settingsMenu.ts b/src/features/settingsMenu/settingsMenu.ts index d877da5..9e743f8 100644 --- a/src/features/settingsMenu/settingsMenu.ts +++ b/src/features/settingsMenu/settingsMenu.ts @@ -6,7 +6,7 @@ import { Theme, ThemeManager } from "./themeManager"; import { SettingsManager } from "./SettingsManager"; import { LayoutMethod } from "./LayoutMethod"; import { EditorModeController } from "../editorMode/editorModeController"; -import { ChangeReadOnlyAction } from "./actions"; +import { ChangeEditorModeAction } from "../editorMode/command"; @injectable() export class SettingsUI extends AbstractUIExtension { @@ -106,13 +106,8 @@ export class SettingsUI extends AbstractUIExtension { if (this.editorModeController.isReadOnly()) { readOnlyCheckbox.checked = true; } - if (this.editorModeController.getCurrentMode() === "readonly") { - readOnlyCheckbox.disabled = true; - } readOnlyCheckbox.addEventListener("change", () => { - if (this.editorModeController.getCurrentMode() !== "readonly") { - this.dispatcher.dispatch(ChangeReadOnlyAction.create(readOnlyCheckbox.checked)); - } + this.dispatcher.dispatch(ChangeEditorModeAction.create(readOnlyCheckbox.checked ? "view" : "edit")); }); } } From a43f63506a33038f1d93878f17739cd9dae3b742 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Wed, 12 Mar 2025 13:26:56 +0100 Subject: [PATCH 21/24] rename mode in json --- src/features/serialize/save.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/serialize/save.ts b/src/features/serialize/save.ts index 1eb681f..ed0838a 100644 --- a/src/features/serialize/save.ts +++ b/src/features/serialize/save.ts @@ -14,7 +14,7 @@ export interface SavedDiagram { model: SModelRoot; labelTypes?: LabelType[]; constraints?: Constraint[]; - editorMode?: EditorMode; + mode?: EditorMode; } export interface SaveDiagramAction extends Action { From faf539f5973599867e2b6adad895813bdfe8b96b Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Wed, 12 Mar 2025 13:30:49 +0100 Subject: [PATCH 22/24] rename mode in json everywhere --- src/features/serialize/analyze.ts | 2 +- src/features/serialize/defaultDiagram.json | 2 +- src/features/serialize/load.ts | 6 +++--- src/features/serialize/loadDefaultDiagram.ts | 8 ++++---- src/features/serialize/save.ts | 2 +- src/features/serialize/saveDFDandDD.ts | 2 +- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/features/serialize/analyze.ts b/src/features/serialize/analyze.ts index 65a69cb..0433044 100644 --- a/src/features/serialize/analyze.ts +++ b/src/features/serialize/analyze.ts @@ -56,7 +56,7 @@ export class AnalyzeDiagramCommand extends Command { model: modelCopy, labelTypes: this.labelTypeRegistry?.getLabelTypes(), constraints: this.constraintRegistry?.getConstraints(), - editorMode: this.editorModeController?.getCurrentMode(), + mode: this.editorModeController?.getCurrentMode(), }; const diagramJson = JSON.stringify(diagram, undefined, 4); sendMessage("Json:" + diagramJson); diff --git a/src/features/serialize/defaultDiagram.json b/src/features/serialize/defaultDiagram.json index 2c4b322..6766dcd 100644 --- a/src/features/serialize/defaultDiagram.json +++ b/src/features/serialize/defaultDiagram.json @@ -612,5 +612,5 @@ ] } ], - "editorMode": "edit" + "mode": "edit" } diff --git a/src/features/serialize/load.ts b/src/features/serialize/load.ts index 17fccb9..baa174d 100644 --- a/src/features/serialize/load.ts +++ b/src/features/serialize/load.ts @@ -194,9 +194,9 @@ export class LoadDiagramCommand extends Command { if (this.editorModeController) { // Load editor mode this.oldEditorMode = this.editorModeController.getCurrentMode(); - this.newEditorMode = newDiagram?.editorMode; - if (newDiagram?.editorMode) { - this.editorModeController.setMode(newDiagram.editorMode); + this.newEditorMode = newDiagram?.mode; + if (newDiagram?.mode) { + this.editorModeController.setMode(newDiagram.mode); } else { this.editorModeController.setDefaultMode(); } diff --git a/src/features/serialize/loadDefaultDiagram.ts b/src/features/serialize/loadDefaultDiagram.ts index a771fc6..3112ead 100644 --- a/src/features/serialize/loadDefaultDiagram.ts +++ b/src/features/serialize/loadDefaultDiagram.ts @@ -78,8 +78,8 @@ export class LoadDefaultDiagramCommand extends Command { if (this.editorModeController) { this.oldEditorMode = this.editorModeController.getCurrentMode(); - if (defaultDiagram.editorMode) { - this.editorModeController.setMode(defaultDiagram.editorMode); + if (defaultDiagram.mode) { + this.editorModeController.setMode(defaultDiagram.mode); } else { this.editorModeController.setDefaultMode(); } @@ -112,8 +112,8 @@ export class LoadDefaultDiagramCommand extends Command { this.labelTypeRegistry?.registerLabelType(labelType); }); if (this.editorModeController) { - if (defaultDiagram.editorMode) { - this.editorModeController.setMode(defaultDiagram.editorMode); + if (defaultDiagram.mode) { + this.editorModeController.setMode(defaultDiagram.mode); } else { this.editorModeController.setDefaultMode(); } diff --git a/src/features/serialize/save.ts b/src/features/serialize/save.ts index ed0838a..6a20e79 100644 --- a/src/features/serialize/save.ts +++ b/src/features/serialize/save.ts @@ -65,7 +65,7 @@ export class SaveDiagramCommand extends Command { model: modelCopy, labelTypes: this.labelTypeRegistry?.getLabelTypes(), constraints: this.constraintRegistry?.getConstraints(), - editorMode: this.editorModeController?.getCurrentMode(), + mode: this.editorModeController?.getCurrentMode(), }; const diagramJson = JSON.stringify(diagram, undefined, 4); const jsonBlob = new Blob([diagramJson], { type: "application/json" }); diff --git a/src/features/serialize/saveDFDandDD.ts b/src/features/serialize/saveDFDandDD.ts index 5d7d13c..91573d9 100644 --- a/src/features/serialize/saveDFDandDD.ts +++ b/src/features/serialize/saveDFDandDD.ts @@ -57,7 +57,7 @@ export class SaveDFDandDDCommand extends Command { model: modelCopy, labelTypes: this.labelTypeRegistry?.getLabelTypes(), constraints: this.constraintRegistry?.getConstraints(), - editorMode: this.editorModeController?.getCurrentMode(), + mode: this.editorModeController?.getCurrentMode(), }; const diagramJson = JSON.stringify(diagram, undefined, 4); sendMessage("Json2DFD:" + getModelFileName() + ":" + diagramJson); From 24c01e350b45ec01ac71436da388f072ea8cda21 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Wed, 12 Mar 2025 13:38:41 +0100 Subject: [PATCH 23/24] enable moving and layout in read only --- src/features/autoLayout/command.ts | 12 +--------- src/features/editorMode/di.config.ts | 7 +----- src/features/editorMode/sprottyHooks.ts | 30 ------------------------- 3 files changed, 2 insertions(+), 47 deletions(-) diff --git a/src/features/autoLayout/command.ts b/src/features/autoLayout/command.ts index a03337b..4a680bf 100644 --- a/src/features/autoLayout/command.ts +++ b/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,10 +19,6 @@ 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; @@ -31,11 +26,6 @@ export class LayoutModelCommand extends Command { private newModel?: SModelRootImpl; async execute(context: CommandExecutionContext): Promise { - 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"); diff --git a/src/features/editorMode/di.config.ts b/src/features/editorMode/di.config.ts index 7c7acec..b319cec 100644 --- a/src/features/editorMode/di.config.ts +++ b/src/features/editorMode/di.config.ts @@ -3,11 +3,7 @@ import { DeleteElementCommand, EditLabelMouseListener, MoveCommand, TYPES, confi import { EditorModeController } from "./editorModeController"; import { EditorModeSwitchUi } from "./modeSwitchUi"; import { EDITOR_TYPES } from "../../utils"; -import { - EditorModeAwareDeleteElementCommand, - EditorModeAwareEditLabelMouseListener, - EditorModeAwareMoveCommand, -} from "./sprottyHooks"; +import { EditorModeAwareDeleteElementCommand, EditorModeAwareEditLabelMouseListener } from "./sprottyHooks"; import { ChangeEditorModeCommand } from "./command"; export const editorModeModule = new ContainerModule((bind, unbind, isBound, rebind) => { @@ -23,6 +19,5 @@ export const editorModeModule = new ContainerModule((bind, unbind, isBound, rebi // Sprotty hooks that hook into the edit label, move and edit module // to intercept model modifications to prevent them when the editor is in a read-only mode. rebind(EditLabelMouseListener).to(EditorModeAwareEditLabelMouseListener); - rebind(MoveCommand).to(EditorModeAwareMoveCommand); rebind(DeleteElementCommand).to(EditorModeAwareDeleteElementCommand); }); diff --git a/src/features/editorMode/sprottyHooks.ts b/src/features/editorMode/sprottyHooks.ts index 1e2da90..96c6202 100644 --- a/src/features/editorMode/sprottyHooks.ts +++ b/src/features/editorMode/sprottyHooks.ts @@ -29,36 +29,6 @@ export class EditorModeAwareEditLabelMouseListener extends EditLabelMouseListene } } -@injectable() -export class EditorModeAwareMoveCommand extends MoveCommand { - @inject(EditorModeController) - private readonly editorModeController?: EditorModeController; - - execute(context: CommandExecutionContext): CommandReturn { - if (this.editorModeController?.isReadOnly()) { - return context.root; - } - - return super.execute(context); - } - - undo(context: CommandExecutionContext): Promise { - if (this.editorModeController?.isReadOnly()) { - return Promise.resolve(context.root); - } - - return super.undo(context); - } - - redo(context: CommandExecutionContext): Promise { - if (this.editorModeController?.isReadOnly()) { - return Promise.resolve(context.root); - } - - return super.redo(context); - } -} - @injectable() export class EditorModeAwareDeleteElementCommand extends DeleteElementCommand { @inject(EditorModeController) From e9b199317fd8c3d0945573506354163189998e1e Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Wed, 12 Mar 2025 13:49:23 +0100 Subject: [PATCH 24/24] fix build --- src/features/editorMode/di.config.ts | 2 +- src/features/editorMode/sprottyHooks.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/features/editorMode/di.config.ts b/src/features/editorMode/di.config.ts index b319cec..4920a48 100644 --- a/src/features/editorMode/di.config.ts +++ b/src/features/editorMode/di.config.ts @@ -1,5 +1,5 @@ import { ContainerModule } from "inversify"; -import { DeleteElementCommand, EditLabelMouseListener, MoveCommand, TYPES, configureCommand } from "sprotty"; +import { DeleteElementCommand, EditLabelMouseListener, TYPES, configureCommand } from "sprotty"; import { EditorModeController } from "./editorModeController"; import { EditorModeSwitchUi } from "./modeSwitchUi"; import { EDITOR_TYPES } from "../../utils"; diff --git a/src/features/editorMode/sprottyHooks.ts b/src/features/editorMode/sprottyHooks.ts index 96c6202..59b070e 100644 --- a/src/features/editorMode/sprottyHooks.ts +++ b/src/features/editorMode/sprottyHooks.ts @@ -4,9 +4,7 @@ import { CommandReturn, DeleteElementCommand, EditLabelMouseListener, - MoveCommand, SModelElementImpl, - SModelRootImpl, } from "sprotty"; import { EditorModeController } from "./editorModeController"; import { Action } from "sprotty-protocol";