Wizarding addon

packages/open-scd/src/addons/Waiter.ts

@@ -17,7 +17,6 @@ export class OscdWaiter extends LitElement {
   waiting = false;
 
   private work: Set<Promise<void>> = new Set();
-
   /** A promise which resolves once all currently pending work is done. */
   workDone = Promise.allSettled(this.work);
 
@@ -32,6 +31,7 @@ export class OscdWaiter extends LitElement {
 
   constructor() {
     super();
+
     this.onPendingState = this.onPendingState.bind(this);
   }
 

packages/open-scd/src/addons/Wizards.ts

@@ -0,0 +1,58 @@
+import {
+  html,
+  state,
+  TemplateResult,
+  query,
+  customElement,
+  LitElement,
+  property,
+} from 'lit-element';
+import { WizardEvent, WizardFactory } from '../foundation.js';
+
+import '../wizard-dialog.js';
+import { WizardDialog } from '../wizard-dialog.js';
+
+/** `LitElement` mixin that adds a `workflow` property which [[`Wizard`]]s are
+ * queued onto on incoming [[`WizardEvent`]]s, first come first displayed. */
+@customElement('oscd-wizards')
+export class Wizards extends LitElement {
+  @property({
+    type: Object,
+  })
+  host!: HTMLElement;
+
+  /** FIFO queue of [[`Wizard`]]s to display. */
+  @state()
+  workflow: WizardFactory[] = [];
+
+  @query('wizard-dialog') wizardUI!: WizardDialog;
+
+  private onWizard(we: WizardEvent) {
+    const wizard = we.detail.wizard;
+    if (wizard === null) this.workflow.shift();
+    else if (we.detail.subwizard) this.workflow.unshift(wizard);
+    else this.workflow.push(wizard);
+    this.requestUpdate('workflow');
+    this.updateComplete.then(() =>
+      this.wizardUI.updateComplete.then(() =>
+        this.wizardUI.dialog?.updateComplete.then(() =>
+          this.wizardUI.dialog?.focus()
+        )
+      )
+    );
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.host.addEventListener('wizard', this.onWizard.bind(this));
+    this.host.addEventListener('editor-action', () =>
+      this.wizardUI.requestUpdate()
+    );
+  }
+
+  render(): TemplateResult {
+    return html`<slot></slot>
+      <wizard-dialog .wizard=${this.workflow[0]?.() ?? []}></wizard-dialog>`;
+  }
+}

packages/open-scd/src/open-scd.ts

@@ -30,16 +30,16 @@ import { Editing } from './Editing.js';
 import { Historing } from './Historing.js';
 import { Plugging, Plugin, pluginIcons } from './Plugging.js';
 
-import { Wizarding } from './Wizarding.js';
-
 import './addons/Settings.js';
 import './addons/Waiter.js';
-import { initializeNsdoc, Nsdoc } from './foundation/nsdoc.js';
+import './addons/Wizards.js';
 
 import { ActionDetail, List } from '@material/mwc-list';
 import { Drawer } from '@material/mwc-drawer';
 import { translate } from 'lit-translate';
 
+import { initializeNsdoc, Nsdoc } from './foundation/nsdoc.js';
+
 // HOSTING INTERFACES
 
 interface MenuItem {
@@ -64,9 +64,7 @@ interface MenuPlugin {
 /** The `<open-scd>` custom element is the main entry point of the
  * Open Substation Configuration Designer. */
 @customElement('open-scd')
-export class OpenSCD extends Wizarding(
-  Plugging(Editing(Historing(LitElement)))
-) {
+export class OpenSCD extends Plugging(Editing(Historing(LitElement))) {
   /** Object containing all *.nsdoc files and a function extracting element's label form them*/
   @property({ attribute: false })
   nsdoc: Nsdoc = initializeNsdoc();
@@ -166,7 +164,7 @@ export class OpenSCD extends Wizarding(
   render(): TemplateResult {
     return html`<oscd-waiter>
       <oscd-settings .host=${this} .nsdoc=${this.nsdoc}>
-        ${this.renderMain()}
+        <oscd-wizards .host=${this}> ${this.renderMain()}</oscd-wizards>
       </oscd-settings>
     </oscd-waiter>`;
   }