fix(communication): display changes to ConnectedAPs in SubNetworks (openscd#819)

* fix(foundation): make sCLSelector more robust

* fix(wizards): p-types throws for orphaned element

* fix(communication/subnetwork): reactively monitor doc changes

Author: ca-d

src/editors/Communication.ts

@@ -62,6 +62,7 @@ export default class CommunicationPlugin extends LitElement {
           .map(
             subnetwork =>
               html`<subnetwork-editor
+                .doc=${this.doc}
                 .element=${subnetwork}
               ></subnetwork-editor>`
           )}

src/editors/communication/subnetwork-editor.ts

@@ -22,32 +22,34 @@ import { wizards } from '../../wizards/wizard-library.js';
 /** [[`Communication`]] subeditor for a `SubNetwork` element. */
 @customElement('subnetwork-editor')
 export class SubNetworkEditor extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
   /** SCL element SubNetwork */
   @property({ attribute: false })
   element!: Element;
   /** SubNetwork attribute name */
-  @property()
+  @property({ type: String })
   get name(): string {
     return this.element.getAttribute('name') ?? 'UNDEFINED';
   }
   /** SubNetwork attribute desc */
-  @property()
+  @property({ type: String })
   get desc(): string | null {
     return this.element.getAttribute('desc') ?? null;
   }
   /** SubNetwork attribute type */
-  @property()
+  @property({ type: String })
   get type(): string | null {
     return this.element.getAttribute('type') ?? null;
   }
   /** SubNetwork child elements BitRate label */
-  @property()
+  @property({ type: String })
   get bitrate(): string | null {
     const bitRate = this.element.querySelector('BitRate');
     if (bitRate === null) return null;
     const bitRateValue = bitRate.textContent ?? '';
     const m = bitRate.getAttribute('multiplier');
-    const unit = m === null ? 'b/s' : ' ' + m + 'b/s';
+    const unit = ` ${m ?? ''}b/s`;
     return bitRateValue ? bitRateValue + unit : null;
   }
 
@@ -73,7 +75,7 @@ export class SubNetworkEditor extends LitElement {
       );
   }
 
-  private renderIedContainer(): TemplateResult[] {
+  private renderIEDs(): TemplateResult[] {
     return Array.from(this.element.querySelectorAll(':scope > ConnectedAP'))
       .map(connAP => connAP.getAttribute('iedName')!)
       .filter((v, i, a) => a.indexOf(v) === i)
@@ -106,7 +108,7 @@ export class SubNetworkEditor extends LitElement {
   }
 
   private header(): string {
-    return ` ${this.name} ${this.desc === null ? '' : `— ${this.desc}`}
+    return `${this.name} ${this.desc === null ? '' : `— ${this.desc}`}
     ${this.subNetworkSpecs()}`;
   }
 
@@ -122,14 +124,15 @@ export class SubNetworkEditor extends LitElement {
         <mwc-icon-button
           icon="delete"
           @click=${() => this.remove()}
-        ></mwc-icon-button> </abbr
-      ><abbr slot="action" title="${translate('add')}">
+        ></mwc-icon-button>
+      </abbr>
+      <abbr slot="action" title="${translate('add')}">
         <mwc-icon-button
           icon="playlist_add"
           @click="${() => this.openConnectedAPwizard()}"
         ></mwc-icon-button>
       </abbr>
-      <div id="iedContainer">${this.renderIedContainer()}</div>
+      <div id="iedContainer">${this.renderIEDs()}</div>
     </action-pane> `;
   }
 

src/foundation.ts

@@ -1323,7 +1323,7 @@ function sCLIdentity(): string {
 }
 
 function sCLSelector(): string {
-  return 'SCL';
+  return ':root';
 }
 
 function namingIdentity(e: Element): string {

src/wizards/foundation/p-types.ts

@@ -2,9 +2,9 @@
  *  Supported Editions are 1 (2003), 2 (2007B) and 2.1 (2007B4)
  */
 export function getTypes(element: Element): string[] {
-  if (!element.ownerDocument) return [];
+  if (!element.ownerDocument.documentElement) return [];
 
-  const scl: Element = element.ownerDocument.querySelector(':root')!;
+  const scl: Element = element.ownerDocument.documentElement;
 
   const type =
     (scl.getAttribute('version') ?? '2003') +