Add Embed mode

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 */

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">

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());
         };

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;
+}

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) => {

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.

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":

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>

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">

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();

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;