fix: Move menu item content outside drawer (openscd#1683)

Author: clepski

packages/openscd/src/addons/Layout.ts

@@ -52,7 +52,7 @@ import '@material/mwc-dialog';
 import '@material/mwc-switch';
 import '@material/mwc-select';
 import '@material/mwc-textfield';
-import { nothing } from 'lit';
+import { pluginTag } from '../plugin-tag.js';
 
 import {OscdPluginManager} from "./plugin-manager/plugin-manager.js";
 import "./plugin-manager/plugin-manager.js";
@@ -85,6 +85,7 @@ export class OscdLayout extends LitElement {
   @state() activeEditor: Plugin | undefined = this.calcActiveEditors()[0];
 
   @query('#menu') menuUI!: Drawer;
+  @query('#menuContent') menuContent!: List;
   @query('#pluginManager') pluginUI!: OscdPluginManager;
   @query('#pluginList') pluginList!: List;
   @query('#pluginAdd') pluginDownloadUI!: OscdCustomPluginDialog;
@@ -98,8 +99,8 @@ export class OscdLayout extends LitElement {
         @oscd-run-menu=${this.handleRunMenuByEvent}
       >
         <slot></slot>
-        ${this.renderHeader()} ${this.renderAside()} ${this.renderContent()}
-        ${this.renderLanding()} ${this.renderPlugging()}
+        ${this.renderHeader()} ${this.renderAside()} ${this.renderMenuContent()}
+        ${this.renderContent()} ${this.renderLanding()} ${this.renderPlugging()}
       </div>
     `;
   }
@@ -109,6 +110,11 @@ export class OscdLayout extends LitElement {
     return html` ${this.renderPluginUI()} ${this.renderDownloadUI()} `;
   }
 
+  private getMenuContent(src: string) {
+    const tag = pluginTag(src);
+    return this.menuContent.querySelector(tag);
+  }
+
   /** Renders the "Add Custom Plug-in" UI*/
   protected renderDownloadUI(): TemplateResult {
     return html`
@@ -280,9 +286,16 @@ export class OscdLayout extends LitElement {
         this.menuUI
           .querySelector('mwc-list')!
           .items.filter(item => item.className === 'validator')
-          .map(item =>
-            (<Validator>(<unknown>item.nextElementSibling)).validate()
-          )
+          .map(item => {
+            const src = item.dataset.src ?? '';
+            const menuContentElement = this.getMenuContent(src);
+
+            if (!menuContentElement) {
+              return;
+            }
+
+            return (menuContentElement as unknown as Validator).validate()
+          })
       ).then();
       this.dispatchEvent(newPendingStateEvent(this.validated));
     });
@@ -300,16 +313,14 @@ export class OscdLayout extends LitElement {
       return {
         icon: plugin.icon || pluginIcons['menu'],
         name: plugin.name,
+        src: plugin.src,
         action: ae => {
-          this.dispatchEvent(
-            newPendingStateEvent(
-              (<MenuPlugin>(
-                (<unknown>(
-                  (<List>ae.target).items[ae.detail.index].nextElementSibling
-                ))
-              )).run()
-            )
-          );
+          const menuContentElement = this.getMenuContent(plugin.src);
+          if (!menuContentElement) {
+            return;
+          }
+
+          this.dispatchEvent(newPendingStateEvent((menuContentElement as unknown as MenuPlugin).run()))
         },
         disabled: (): boolean => plugin.requireDoc! && this.doc === null,
         content: () => {
@@ -326,18 +337,16 @@ export class OscdLayout extends LitElement {
       return {
         icon: plugin.icon || pluginIcons['validator'],
         name: plugin.name,
+        src: plugin.src,
         action: ae => {
           this.dispatchEvent(newEmptyIssuesEvent(plugin.src));
 
-          this.dispatchEvent(
-            newPendingStateEvent(
-              (<Validator>(
-                (<unknown>(
-                  (<List>ae.target).items[ae.detail.index].nextElementSibling
-                ))
-              )).validate()
-            )
-          );
+          const menuContentElement = this.getMenuContent(plugin.src);
+          if (!menuContentElement) {
+            return;
+          }
+
+          this.dispatchEvent(newPendingStateEvent((menuContentElement as unknown as Validator).validate()))
         },
         disabled: (): boolean => this.doc === null,
         content: plugin.content ?? (() => html``),
@@ -358,14 +367,14 @@ export class OscdLayout extends LitElement {
         iconid="${me.icon}"
         graphic="icon"
         data-name="${me.name}"
+        data-src="${me.src ?? ''}"
         .disabled=${me.disabled?.() || !me.action}
         ><mwc-icon slot="graphic">${me.icon}</mwc-icon>
         <span>${get(me.name)}</span>
         ${me.hint
           ? html`<span slot="secondary"><tt>${me.hint}</tt></span>`
           : ''}
       </mwc-list-item>
-      ${me.content ? me.content() : nothing}
     `;
   }
 
@@ -400,6 +409,18 @@ export class OscdLayout extends LitElement {
     </mwc-top-app-bar-fixed>`;
   }
 
+  protected renderMenuContent(): TemplateResult {
+    return html`
+      <div id="menuContent">
+        ${
+          this.menu
+            .filter(p => (p as MenuItem).content)
+            .map(p => (p as MenuItem).content())
+        }
+      </div>
+    `;
+  }
+
   /**
    * Renders a drawer toolbar featuring the scl filename, enabled menu plugins,
    * settings, help, scl history and plug-ins management
@@ -502,10 +523,13 @@ export class OscdLayout extends LitElement {
     // TODO: this is a workaround, fix it
     this.menuUI.open = true;
     const menuEntry = this.menuUI.querySelector(`[data-name="${e.detail.name}"]`) as HTMLElement
-    const menuElement = menuEntry.nextElementSibling
-    if(!menuElement){ return; } // TODO: log error
 
-    (menuElement as unknown as MenuPlugin).run()
+    const menuContentElement = this.getMenuContent(menuEntry.dataset.src ?? '');
+    if (!menuContentElement) {
+      return;
+    }
+
+    (menuContentElement as unknown as MenuPlugin).run();
   }
 
   /**

packages/openscd/src/open-scd.ts

@@ -51,6 +51,7 @@ import { HistoryState, historyStateEvent } from './addons/History.js';
 import { InstalledOfficialPlugin, MenuPosition, PluginKind, Plugin } from "./plugin.js"
 import { ConfigurePluginEvent, ConfigurePluginDetail, newConfigurePluginEvent } from './plugin.events.js';
 import { newLogEvent } from '@openscd/core/foundation/deprecated/history';
+import { pluginTag } from './plugin-tag.js';
 
 
 
@@ -445,33 +446,13 @@ export class OpenSCD extends LitElement {
 
   // PLUGGING INTERFACES
   @state() private pluginTags = new Map<string, string>();
-  /**
-   * Hashes `uri` using cyrb64 analogous to
-   * https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js .
-   * @returns a valid customElement tagName containing the URI hash.
-   */
+
   private pluginTag(uri: string): string {
     if (!this.pluginTags.has(uri)) {
-      let h1 = 0xdeadbeef,
-        h2 = 0x41c6ce57;
-      for (let i = 0, ch; i < uri.length; i++) {
-        ch = uri.charCodeAt(i);
-        h1 = Math.imul(h1 ^ ch, 2654435761);
-        h2 = Math.imul(h2 ^ ch, 1597334677);
-      }
-      h1 =
-        Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
-        Math.imul(h2 ^ (h2 >>> 13), 3266489909);
-      h2 =
-        Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
-        Math.imul(h1 ^ (h1 >>> 13), 3266489909);
-      this.pluginTags.set(
-        uri,
-        'oscd-plugin' +
-          ((h2 >>> 0).toString(16).padStart(8, '0') +
-            (h1 >>> 0).toString(16).padStart(8, '0'))
-      );
+      const tag = pluginTag(uri);
+      this.pluginTags.set(uri, tag);
     }
+
     return this.pluginTags.get(uri)!;
   }
 
@@ -492,6 +473,7 @@ declare global {
 export interface MenuItem {
   icon: string;
   name: string;
+  src?: string;
   hint?: string;
   actionItem?: boolean;
   action?: (event: CustomEvent<ActionDetail>) => void;

packages/openscd/src/plugin-tag.ts

@@ -0,0 +1,24 @@
+
+/**
+ * Hashes `uri` using cyrb64 analogous to
+ * https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js .
+ * @returns a valid customElement tagName containing the URI hash.
+ */
+export function pluginTag(uri: string): string {
+    let h1 = 0xdeadbeef,
+    h2 = 0x41c6ce57;
+    for (let i = 0, ch; i < uri.length; i++) {
+    ch = uri.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+    }
+    h1 =
+    Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
+    Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+    h2 =
+    Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
+    Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+    return 'oscd-plugin' +
+        ((h2 >>> 0).toString(16).padStart(8, '0') +
+        (h1 >>> 0).toString(16).padStart(8, '0'))
+}