feat: add event to activate editor tab

openscd · Dec 13, 2024 · 7ea53ed · 7ea53ed
1 parent 02fc077
commit 7ea53ed
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 99 deletions.
diff --git a/packages/openscd/src/addons/Layout.ts b/packages/openscd/src/addons/Layout.ts
@@ -52,6 +52,7 @@ import '@material/mwc-dialog';
 import '@material/mwc-switch';
 import '@material/mwc-select';
 import '@material/mwc-textfield';
+import { nothing } from 'lit';
 
 
 @customElement('oscd-layout')
@@ -61,7 +62,7 @@ export class OscdLayout extends LitElement {
     return html`
       <div
         @open-plugin-download=${() => this.pluginDownloadUI.show()}
-        @activate-tab=${this.handleActivatedEditorTabByEvent}
+        @oscd-activate-editor=${this.handleActivateEditorByEvent}
       >
         <slot></slot>
         ${this.renderHeader()} ${this.renderAside()} ${this.renderContent()}
@@ -156,6 +157,7 @@ export class OscdLayout extends LitElement {
         },
         disabled: (): boolean => !this.historyState.canUndo,
         kind: 'static',
+        content: () => html``,
       },
       {
         icon: 'redo',
@@ -166,6 +168,7 @@ export class OscdLayout extends LitElement {
         },
         disabled: (): boolean => !this.historyState.canRedo,
         kind: 'static',
+        content: () => html``,
       },
       ...validators,
       {
@@ -176,6 +179,7 @@ export class OscdLayout extends LitElement {
           this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.log));
         },
         kind: 'static',
+        content: () => html``,
       },
       {
         icon: 'history',
@@ -185,6 +189,7 @@ export class OscdLayout extends LitElement {
           this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.history));
         },
         kind: 'static',
+        content: () => html``,
       },
       {
         icon: 'rule',
@@ -194,6 +199,7 @@ export class OscdLayout extends LitElement {
           this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.diagnostic));
         },
         kind: 'static',
+        content: () => html``,
       },
       'divider',
       ...middleMenu,
@@ -204,13 +210,15 @@ export class OscdLayout extends LitElement {
           this.dispatchEvent(newSettingsUIEvent(true));
         },
         kind: 'static',
+        content: () => html``,
       },
       ...bottomMenu,
       {
         icon: 'extension',
         name: 'plugins.heading',
         action: (): void => this.pluginUI.show(),
         kind: 'static',
+        content: () => html``,
       },
     ];
   }
@@ -337,7 +345,10 @@ export class OscdLayout extends LitElement {
           );
         },
         disabled: (): boolean => plugin.requireDoc! && this.doc === null,
-        content: plugin.content,
+        content: () => {
+          if(plugin.content){ return plugin.content(); }
+          return nothing
+        },
         kind: kind,
       }
     })
@@ -362,15 +373,18 @@ export class OscdLayout extends LitElement {
           );
         },
         disabled: (): boolean => this.doc === null,
-        content: plugin.content,
+        content: plugin.content ?? (() => html``),
         kind: 'validator',
       }
     });
   }
 
   private renderMenuItem(me: MenuItem | 'divider'): TemplateResult {
-    if (me === 'divider') { return html`<li divider padded role="separator"></li>`; }
-    if (me.actionItem){ return html``; }
+    const isDivider = me === 'divider';
+    const hasActionItem = me !== 'divider' && me.actionItem;
+
+    if (isDivider) { return html`<li divider padded role="separator"></li>`; }
+    if (hasActionItem){ return html``; }
     return html`
       <mwc-list-item
         class="${me.kind}"
@@ -383,7 +397,7 @@ export class OscdLayout extends LitElement {
           ? html`<span slot="secondary"><tt>${me.hint}</tt></span>`
           : ''}
       </mwc-list-item>
-      ${me.content ?? ''}
+      ${me.content ? me.content() : nothing}
     `;
   }
 
@@ -459,18 +473,23 @@ export class OscdLayout extends LitElement {
 
   }
 
+  private calcActiveEditors(){
+    const hasActiveDoc = Boolean(this.doc);
+
+    return this.editors
+      .filter(editor => {
+        // this is necessary because `requireDoc` can be undefined
+        // and that is not the same as false
+        const doesNotRequireDoc = editor.requireDoc === false
+        return doesNotRequireDoc || hasActiveDoc
+      })
+  }
+
   /** Renders the enabled editor plugins and a tab bar to switch between them*/
   protected renderContent(): TemplateResult {
-    const hasActiveDoc = Boolean(this.doc);
 
-    const activeEditors = this.editors
-    .filter(editor => {
-      // this is necessary because `requireDoc` can be undefined
-      // and that is not the same as false
-      const doesNotRequireDoc = editor.requireDoc === false
-      return doesNotRequireDoc || hasActiveDoc
-    })
-    .map(this.renderEditorTab)
+    const activeEditors = this.calcActiveEditors()
+      .map(this.renderEditorTab)
 
     const hasActiveEditors = activeEditors.length > 0;
     if(!hasActiveEditors){ return html``; }
@@ -493,7 +512,7 @@ export class OscdLayout extends LitElement {
       const content = editor?.content;
       if(!content) { return html`` }
 
-      return html`${content}`;
+      return html`${content()}`;
     }
   }
 
@@ -502,16 +521,13 @@ export class OscdLayout extends LitElement {
     this.activateTab(tabIndex);
   }
 
-  /**
-   *
-   *
-   * @param e Custom event, where the detail is the index number of the tab
-   */
-  // Note: this function is for now the same as `handleActivatedEditorTabByUser`
-  // I would keep it spearated for now, because I think they will be different.
-  private handleActivatedEditorTabByEvent(e: CustomEvent<{index:number}>): void {
-    const tabIndex = e.detail.index
-    this.activateTab(tabIndex)
+  private handleActivateEditorByEvent(e: CustomEvent<{name: string, src: string}>): void {
+    const {name, src} = e.detail;
+    const editors = this.calcActiveEditors()
+    const wantedEditorIndex = editors.findIndex(editor => editor.name === name || editor.src === src)
+    if(wantedEditorIndex < 0){ return; } // TODO: log error
+
+    this.activateTab(wantedEditorIndex);
   }
 
   private activateTab(index: number){