diff --git a/frontend/webEditor/src/keyListeners/EditModeAwareKeyTool.ts b/frontend/webEditor/src/keyListeners/EditModeAwareKeyTool.ts new file mode 100644 index 00000000..9c08c133 --- /dev/null +++ b/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( + methodName: K, + model: SModelRootImpl, + event: KeyboardEvent, + ): void { + if (this.editorModeController.get() === "embed") { + event.preventDefault(); + return; + } + super.handleEvent(methodName, model, event); + } +} diff --git a/frontend/webEditor/src/keyListeners/EditModeAwareMouseTool.ts b/frontend/webEditor/src/keyListeners/EditModeAwareMouseTool.ts new file mode 100644 index 00000000..45061759 --- /dev/null +++ b/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); + } +} diff --git a/frontend/webEditor/src/keyListeners/di.config.ts b/frontend/webEditor/src/keyListeners/di.config.ts index 355f85e0..991c135d 100644 --- a/frontend/webEditor/src/keyListeners/di.config.ts +++ b/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(); }); diff --git a/frontend/webEditor/src/settings/editorMode.ts b/frontend/webEditor/src/settings/editorMode.ts index db4a19f0..1ca3c0dc 100644 --- a/frontend/webEditor/src/settings/editorMode.ts +++ b/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 { 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"; } diff --git a/frontend/webEditor/src/startUpAgent/LoadDefaultUiExtensions.ts b/frontend/webEditor/src/startUpAgent/LoadDefaultUiExtensions.ts index 07ed36fb..677a5b20 100644 --- a/frontend/webEditor/src/startUpAgent/LoadDefaultUiExtensions.ts +++ b/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); }