From 30a0dcef42be95fc339dfe5c4b23517aeaa61943 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Wed, 25 Jun 2025 12:53:41 +0200
Subject: [PATCH] add embed mode

---
 src/common/commonStyling.css                    |  4 ++++
 src/common/helpUi.ts                            |  2 +-
 src/features/constraintMenu/ConstraintMenu.ts   |  6 +++---
 src/features/constraintMenu/constraintMenu.css  | 10 ++++++++++
 src/features/dfdElements/nodeAnnotationUi.ts    |  2 +-
 src/features/editorMode/editorModeController.ts |  2 +-
 src/features/editorMode/modeSwitchUi.ts         |  3 ++-
 src/features/labels/labelTypeEditor.ts          |  2 +-
 src/features/settingsMenu/settingsMenu.ts       |  2 +-
 src/features/toolPalette/toolPalette.tsx        |  2 +-
 src/index.ts                                    |  9 +++++++++
 11 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/common/commonStyling.css b/src/common/commonStyling.css
index b121db8..d6ad5a9 100644
--- a/src/common/commonStyling.css
+++ b/src/common/commonStyling.css
@@ -4,6 +4,10 @@
     background-color: var(--color-primary);
 }
 
+.embed-mode .hide-on-embed {
+    display: none;
+}
+
 /* Styling for keyboard symbols.
    Copied from the example at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
    with adapted colors */
diff --git a/src/common/helpUi.ts b/src/common/helpUi.ts
index 839b012..8b4ee25 100644
--- a/src/common/helpUi.ts
+++ b/src/common/helpUi.ts
@@ -16,7 +16,7 @@ export class HelpUI extends AbstractUIExtension {
     }
 
     protected initializeContents(containerElement: HTMLElement): void {
-        containerElement.classList.add("ui-float");
+        containerElement.classList.add("ui-float", "hide-on-embed");
         containerElement.innerHTML = `
             <input type="checkbox" id="accordion-state-help" class="accordion-state" hidden>
             <label id="help-ui-accordion-label" for="accordion-state-help">
diff --git a/src/features/constraintMenu/ConstraintMenu.ts b/src/features/constraintMenu/ConstraintMenu.ts
index 9599fa8..e19cccb 100644
--- a/src/features/constraintMenu/ConstraintMenu.ts
+++ b/src/features/constraintMenu/ConstraintMenu.ts
@@ -59,14 +59,14 @@ export class ConstraintMenu extends AbstractUIExtension implements Switchable {
         containerElement.classList.add("ui-float");
         containerElement.innerHTML = `
             <input type="checkbox" id="expand-state-constraint" class="accordion-state" hidden>
-            <label id="constraint-menu-expand-label" for="expand-state-constraint">
+            <label id="constraint-menu-expand-label" for="expand-state-constraint" class="hide-on-embed">
                 <div class="accordion-button cevron-left flip-arrow" id="constraint-menu-expand-title">
                     Constraints
                 </div>
             </label>
         `;
         const accordionContent = document.createElement("div");
-        accordionContent.classList.add("accordion-content");
+        accordionContent.classList.add("accordion-content", "hide-on-embed");
         const contentDiv = document.createElement("div");
         contentDiv.id = "constraint-menu-content";
         accordionContent.appendChild(contentDiv);
@@ -305,7 +305,7 @@ export class ConstraintMenu extends AbstractUIExtension implements Switchable {
 
         const button = document.createElement("button");
         button.id = "run-button";
-        button.innerHTML = "Run";
+        button.innerHTML = `<span class="hide-on-embed">Run</span>`;
         button.onclick = () => {
             this.dispatcher.dispatch(AnalyzeDiagramAction.create());
         };
diff --git a/src/features/constraintMenu/constraintMenu.css b/src/features/constraintMenu/constraintMenu.css
index 5cd475c..65f41be 100644
--- a/src/features/constraintMenu/constraintMenu.css
+++ b/src/features/constraintMenu/constraintMenu.css
@@ -112,3 +112,13 @@ div.constraint-menu {
     align-items: center;
     gap: 5px;
 }
+
+.embed-mode .constraint-menu {
+    visibility: hidden;
+    background-color: transparent;
+}
+
+.embed-mode #run-button {
+    width: fit-content;
+    float: right;
+}
diff --git a/src/features/dfdElements/nodeAnnotationUi.ts b/src/features/dfdElements/nodeAnnotationUi.ts
index 2cbd070..c999987 100644
--- a/src/features/dfdElements/nodeAnnotationUi.ts
+++ b/src/features/dfdElements/nodeAnnotationUi.ts
@@ -111,7 +111,7 @@ export class DfdNodeAnnotationUI extends AbstractUIExtension {
     }
 
     protected override initializeContents(containerElement: HTMLElement): void {
-        containerElement.classList.add("ui-float");
+        containerElement.classList.add("ui-float", "hide-on-embed");
         containerElement.appendChild(this.annotationParagraph);
 
         document.addEventListener("mousemove", (event) => {
diff --git a/src/features/editorMode/editorModeController.ts b/src/features/editorMode/editorModeController.ts
index db4ac77..45ea89e 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" | "view";
+export type EditorMode = "edit" | "view" | "embed";
 
 /**
  * Holds the current editor mode in a central place.
diff --git a/src/features/editorMode/modeSwitchUi.ts b/src/features/editorMode/modeSwitchUi.ts
index 26c976c..db7c98f 100644
--- a/src/features/editorMode/modeSwitchUi.ts
+++ b/src/features/editorMode/modeSwitchUi.ts
@@ -27,7 +27,7 @@ export class EditorModeSwitchUi extends AbstractUIExtension {
     }
 
     protected initializeContents(containerElement: HTMLElement): void {
-        containerElement.classList.add("ui-float");
+        containerElement.classList.add("ui-float", "hide-on-embed");
         containerElement.style.visibility = "hidden";
         this.editorModeController.onModeChange((mode) => this.reRender(mode));
         this.reRender(this.editorModeController.getCurrentMode());
@@ -37,6 +37,7 @@ export class EditorModeSwitchUi extends AbstractUIExtension {
         this.containerElement.innerHTML = "";
         switch (mode) {
             case "edit":
+            case "embed":
                 this.containerElement.style.visibility = "hidden";
                 break;
             case "view":
diff --git a/src/features/labels/labelTypeEditor.ts b/src/features/labels/labelTypeEditor.ts
index 1eb3f8c..67af028 100644
--- a/src/features/labels/labelTypeEditor.ts
+++ b/src/features/labels/labelTypeEditor.ts
@@ -77,7 +77,7 @@ export class LabelTypeEditorUI extends AbstractUIExtension implements KeyListene
     }
 
     protected initializeContents(containerElement: HTMLElement): void {
-        containerElement.classList.add("ui-float");
+        containerElement.classList.add("ui-float", "hide-on-embed");
         containerElement.innerHTML = `
             <label for="accordion-state-label-types">
                 <div class="accordion-button cevron-left" id="accordion-state-label-title">Label Types</div>
diff --git a/src/features/settingsMenu/settingsMenu.ts b/src/features/settingsMenu/settingsMenu.ts
index 9e743f8..b83edc0 100644
--- a/src/features/settingsMenu/settingsMenu.ts
+++ b/src/features/settingsMenu/settingsMenu.ts
@@ -30,7 +30,7 @@ export class SettingsUI extends AbstractUIExtension {
     }
 
     protected initializeContents(containerElement: HTMLElement): void {
-        containerElement.classList.add("ui-float");
+        containerElement.classList.add("ui-float", "hide-on-embed");
         containerElement.innerHTML = `
             <input type="checkbox" id="accordion-state-settings" class="accordion-state" hidden>
             <label id="settings-ui-accordion-label" for="accordion-state-settings">
diff --git a/src/features/toolPalette/toolPalette.tsx b/src/features/toolPalette/toolPalette.tsx
index 78becb0..36bdd78 100644
--- a/src/features/toolPalette/toolPalette.tsx
+++ b/src/features/toolPalette/toolPalette.tsx
@@ -63,7 +63,7 @@ export class ToolPaletteUI extends AbstractUIExtension implements IActionHandler
      * This is called by the sprotty base class after creating the container element.
      */
     protected initializeContents(containerElement: HTMLElement): void {
-        containerElement.classList.add("ui-float");
+        containerElement.classList.add("ui-float", "hide-on-embed");
         document.addEventListener("keydown", (event) => {
             if (matchesKeystroke(event, "Escape")) {
                 this.disableTools();
diff --git a/src/index.ts b/src/index.ts
index b770db3..af6b831 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,6 +34,7 @@ import { settingsModule } from "./features/settingsMenu/di.config";
 import { LoadDiagramAction } from "./features/serialize/load";
 import { commandPaletteModule } from "./features/commandPalette/di.config";
 import { LoadingIndicator } from "./common/loadingIndicator";
+import { EditorModeController } from "./features/editorMode/editorModeController";
 
 const container = new Container();
 
@@ -64,11 +65,19 @@ container.load(
 );
 
 const dispatcher = container.get<ActionDispatcher>(TYPES.IActionDispatcher);
+const editorModeController = container.get<EditorModeController>(EditorModeController);
 const defaultUIElements = container.getAll<AbstractUIExtension>(EDITOR_TYPES.DefaultUIElement);
 const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);
 export const logger = container.get<ILogger>(TYPES.ILogger);
 
 let modelFileName = "diagram";
+editorModeController.onModeChange((mode) => {
+    if (mode !== "embed") {
+        document.body.classList.remove("embed-mode");
+    } else {
+        document.body.classList.add("embed-mode");
+    }
+});
 
 export function setModelFileName(name: string): void {
     modelFileName = name;