Add view only mode

frontend/webEditor/src/keyListeners/EditModeAwareKeyTool.ts

@@ -0,0 +1,27 @@
+import { inject, injectable, multiInject, optional } from "inversify";
+import { KeyListener, KeyTool, SModelRootImpl, TYPES } from "sprotty";
+import { SETTINGS } from "../settings/Settings";
+import { EditorModeController } from "../settings/editorMode";
+
+@injectable()
+export class EditModeAwareKeyTool extends KeyTool {
+    constructor(
+        @inject(SETTINGS.Mode)
+        private readonly editorModeController: EditorModeController,
+        @multiInject(TYPES.KeyListener) @optional() keyListeners: KeyListener[] = [],
+    ) {
+        super(keyListeners);
+    }
+
+    protected handleEvent<K extends keyof KeyListener>(
+        methodName: K,
+        model: SModelRootImpl,
+        event: KeyboardEvent,
+    ): void {
+        if (this.editorModeController.get() === "embed") {
+            event.preventDefault();
+            return;
+        }
+        super.handleEvent(methodName, model, event);
+    }
+}

frontend/webEditor/src/keyListeners/EditModeAwareMouseTool.ts

@@ -0,0 +1,30 @@
+import { inject, injectable, multiInject, optional } from "inversify";
+import { MouseEventKind, MouseListener, MouseTool, SModelRootImpl, TYPES } from "sprotty";
+import { SETTINGS } from "../settings/Settings";
+import { EditorModeController } from "../settings/editorMode";
+
+@injectable()
+export class EditModeAwareMouseTool extends MouseTool {
+    constructor(
+        @inject(SETTINGS.Mode)
+        private readonly editorModeController: EditorModeController,
+        @multiInject(TYPES.MouseListener) @optional() mouseListeners: MouseListener[] = [],
+    ) {
+        super(mouseListeners);
+    }
+
+    protected handleEvent(methodName: MouseEventKind, model: SModelRootImpl, event: MouseEvent): void {
+        if (this.editorModeController.get() === "embed") {
+            const target = this.getTargetElement(model, event);
+            let eventShouldBeExecuted = false;
+            if (target?.id.startsWith("root")) eventShouldBeExecuted = true;
+            if (target?.type.startsWith("port") && methodName === "doubleClick") eventShouldBeExecuted = true;
+            if (methodName === "mouseMove") eventShouldBeExecuted = true;
+            if (!eventShouldBeExecuted) {
+                event.preventDefault();
+                return;
+            }
+        }
+        super.handleEvent(methodName, model, event);
+    }
+}

frontend/webEditor/src/keyListeners/di.config.ts

@@ -1,9 +1,11 @@
 import { ContainerModule } from "inversify";
 import { DeleteKeyListener } from "./deleteKeyListener";
-import { CenterKeyboardListener, configureCommand, TYPES } from "sprotty";
+import { CenterKeyboardListener, configureCommand, KeyTool, MouseTool, TYPES } from "sprotty";
 import { CopyPasteKeyListener, PasteElementsCommand } from "./copyPasteKeyListener";
 import { SerializeKeyListener } from "./serializeKeyListener";
 import { FitToScreenKeyListener } from "./fitToScreenKeyListener";
+import { EditModeAwareKeyTool } from "./EditModeAwareKeyTool";
+import { EditModeAwareMouseTool } from "./EditModeAwareMouseTool";
 
 export const keyListenerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(DeleteKeyListener).toSelf().inSingletonScope();
@@ -17,4 +19,7 @@ export const keyListenerModule = new ContainerModule((bind, unbind, isBound, reb
 
     bind(FitToScreenKeyListener).toSelf().inSingletonScope();
     rebind(CenterKeyboardListener).toService(FitToScreenKeyListener);
+
+    rebind(KeyTool).to(EditModeAwareKeyTool).inSingletonScope();
+    rebind(MouseTool).to(EditModeAwareMouseTool).inSingletonScope();
 });

frontend/webEditor/src/settings/editorMode.ts

@@ -1,16 +1,24 @@
 import { SettingsValue } from "./SettingsValue";
 
-export type EditorMode = "edit" | "view";
+export type EditorMode = "edit" | "view" | "embed";
 
 export class EditorModeController extends SettingsValue<EditorMode> {
     constructor() {
-        super("edit");
+        super(new URLSearchParams(window.location.search).get("embed") === "true" ? "embed" : "edit");
     }
 
     setDefault(): void {
         this.set("edit");
     }
 
+    set(newValue: EditorMode): void {
+        // changing it is not allowed in embed mode
+        if (this.get() === "embed") {
+            return;
+        }
+        super.set(newValue);
+    }
+
     isReadOnly(): boolean {
         return this.get() !== "edit";
     }

frontend/webEditor/src/startUpAgent/LoadDefaultUiExtensions.ts

@@ -11,8 +11,10 @@ export class LoadDefaultUiExtensionsStartUpAgent implements IStartUpAgent {
     ) {}
 
     public run() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const embedMode = urlParams.get("embed") === "true";
         const uiVisibilityActions = this.defaultUiElements.map((e) =>
-            SetUIExtensionVisibilityAction.create({ extensionId: e.id(), visible: true }),
+            SetUIExtensionVisibilityAction.create({ extensionId: e.id(), visible: !embedMode }),
         );
         this.actionDispatcher.dispatchAll(uiVisibilityActions);
     }