Merge pull request #379 from com-pas/fix/377-add-wizard-plugin-for-substation-designer

fix: 377 add wizard plugin for substation designer

Author: clepski

.gitmodules

@@ -26,3 +26,7 @@
 	path = packages/external-plugins/scl-bay-template
 	url = https://github.com/com-pas/scl-bay-template
 	branch = deploy
+[submodule "packages/external-plugins/scl-wizarding"]
+	path = packages/external-plugins/scl-wizarding
+	url = https://github.com/openenergytools/scl-wizarding
+	branch = deploy

packages/compas-open-scd/package.json

@@ -70,7 +70,7 @@
     "release:major": "standard-version --release-as major",
     "build:test": "npm run test && npm run build && cp .nojekyll build/",
     "build": "npm run doc && npm run build:only && cp .nojekyll build/",
-    "build:only": "snowpack build && workbox generateSW workbox-config.cjs",
+    "build:only": "npx rimraf node_modules/.cache/snowpack/build/[email protected] && snowpack build && workbox generateSW workbox-config.cjs",
     "__comment:start": "snowpack dev fails if the lit package is cached. I don't know why, but we have to delete it before starting",
     "start": "npx rimraf node_modules/.cache/snowpack/build/[email protected] && snowpack dev"
   },

packages/compas-open-scd/public/js/plugins.js

@@ -339,6 +339,15 @@ export const officialPlugins = [
     requireDoc: true,
     position: 'middle',
   },
+  {
+    name: 'Wizarding',
+    src: '/external-plugins/scl-wizarding/scl-wizarding.js',
+    icon: 'edit',
+    activeByDefault: true,
+    kind: 'menu',
+    requireDoc: true,
+    position: 'middle',
+  },
   {
     name: 'Show SCL History',
     src: '/plugins/src/menu/SclHistory.js',

packages/compas-open-scd/src/addons/CompasLayout.ts

@@ -44,7 +44,7 @@ import { OscdPluginManager } from '@openscd/open-scd/src/addons/plugin-manager/p
 import '@openscd/open-scd/src/addons/plugin-manager/plugin-manager';
 import { OscdCustomPluginDialog } from '@openscd/open-scd/src/addons/plugin-manager/custom-plugin-dialog';
 import '@openscd/open-scd/src/addons/plugin-manager/custom-plugin-dialog';
-import { nothing } from 'lit';
+import { pluginTag } from '../plugin-tag.js';
 
 // TODO: What happens with this?
 export function compasOpenMenuEvent(): CustomEvent<void> {
@@ -77,6 +77,7 @@ export class CompasLayout extends LitElement {
   @state() shouldValidate = false;
 
   @query('#menu') menuUI!: Drawer;
+  @query('#menuContent') menuContent!: List;
   @query('#pluginManager') pluginUI!: OscdPluginManager;
   @query('#pluginList') pluginList!: List;
   @query('#pluginAdd') pluginDownloadUI!: OscdCustomPluginDialog;
@@ -89,8 +90,8 @@ export class CompasLayout 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>
     `;
   }
@@ -99,6 +100,11 @@ export class CompasLayout 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`
@@ -271,8 +277,17 @@ export class CompasLayout 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));
@@ -293,16 +308,14 @@ export class CompasLayout 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: () => {
@@ -319,18 +332,16 @@ export class CompasLayout 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``),
@@ -347,21 +358,30 @@ export class CompasLayout extends LitElement {
     const hasActionItem = me !== 'divider' && me.actionItem;
 
     if (isDivider(me)) { return html`<li divider padded role="separator"></li>`; }
-    if (hasActionItem){ return html``; }
+    if (hasActionItem){
+      return html``;
+    }
+
+    /*
+    if (me.kind === 'validator') {
+      console.log('rendering validator with data')
+      console.log(me)
+    }
+    */
     return html`
       <mwc-list-item
         class="${me.kind}"
         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}
     `;
   }
 
@@ -406,6 +426,18 @@ export class CompasLayout 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
@@ -505,14 +537,16 @@ export class CompasLayout extends LitElement {
   }
 
   private handleRunMenuByEvent(e: CustomEvent<{name: string}>): void {
-
     // 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/compas-open-scd/src/menu/CompasOpen.ts

@@ -28,9 +28,6 @@ export default class CompasOpenMenuPlugin extends LitElement {
     this.compasOpenElement.selectedType = undefined;
     await this.compasOpenElement.requestUpdate();
 
-    // TODO: Fix for dialog, the menu has to be open to see the dialog
-    this.dispatchEvent(compasOpenMenuEvent());
-
     this.dialog.show();
   }
 

packages/compas-open-scd/src/plugin-tag.ts

@@ -0,0 +1,18 @@
+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'))
+}

packages/external-plugins/scl-wizarding

@@ -493,6 +493,7 @@ declare global {
 export interface MenuItem {
   icon: string;
   name: string;
+  src?: string;
   hint?: string;
   actionItem?: boolean;
   action?: (event: CustomEvent<ActionDetail>) => void;