feat(editors/communication): add GSE and SMV editor type elements (openscd#1021)

Author: JakobVogelsang

src/editors/communication/gse-editor.ts

@@ -0,0 +1,37 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  property,
+  state,
+} from 'lit-element';
+
+import '@material/mwc-icon';
+
+import '../../action-icon.js';
+import { sizableGooseIcon } from '../../icons/icons.js';
+
+@customElement('gse-editor')
+export class GseEditor extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  @property({ attribute: false })
+  element!: Element;
+
+  @state()
+  get label(): string {
+    return (
+      this.element.getAttribute('ldInst') +
+      '/' +
+      this.element.getAttribute('cbName')
+    );
+  }
+
+  render(): TemplateResult {
+    return html`<action-icon label="${this.label}"
+      ><mwc-icon slot="icon">${sizableGooseIcon}</mwc-icon></action-icon
+    >`;
+  }
+}

src/editors/communication/smv-editor.ts

@@ -0,0 +1,37 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  property,
+  state,
+} from 'lit-element';
+
+import '@material/mwc-icon';
+
+import '../../action-icon.js';
+import { sizableSmvIcon } from '../../icons/icons.js';
+
+@customElement('smv-editor')
+export class SmvEditor extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  @property({ attribute: false })
+  element!: Element;
+
+  @state()
+  get label(): string {
+    return (
+      this.element.getAttribute('ldInst') +
+      '/' +
+      this.element.getAttribute('cbName')
+    );
+  }
+
+  render(): TemplateResult {
+    return html`<action-icon label="${this.label}"
+      ><mwc-icon slot="icon">${sizableSmvIcon}</mwc-icon>
+    </action-icon>`;
+  }
+}

src/editors/communication/subnetwork-editor.ts

@@ -11,6 +11,8 @@ import { translate } from 'lit-translate';
 import '@material/mwc-icon-button';
 
 import './connectedap-editor.js';
+import './gse-editor.js';
+import './smv-editor.js';
 import {
   newWizardEvent,
   newActionEvent,
@@ -75,26 +77,60 @@ export class SubNetworkEditor extends LitElement {
       );
   }
 
+  private renderSmvEditors(iedName: string): TemplateResult[] {
+    return Array.from(
+      this.element
+        .closest('Communication')
+        ?.querySelectorAll(`ConnectedAP[iedName="${iedName}"] > SMV`) ?? []
+    ).map(
+      smv => html`<smv-editor
+        class="${smv.closest('SubNetwork') !== this.element ? 'disabled' : ''}"
+        .doc=${this.doc}
+        .element=${smv}
+      ></smv-editor>`
+    );
+  }
+
+  private renderGseEditors(iedName: string): TemplateResult[] {
+    return Array.from(
+      this.element
+        .closest('Communication')
+        ?.querySelectorAll(`ConnectedAP[iedName="${iedName}"] > GSE`) ?? []
+    ).map(
+      gse => html`<gse-editor
+        class="${gse.closest('SubNetwork') !== this.element ? 'disabled' : ''}"
+        .doc=${this.doc}
+        .element=${gse}
+      ></gse-editor>`
+    );
+  }
+
+  private renderConnectedApEditors(iedName: string): TemplateResult[] {
+    return Array.from(
+      this.element.parentElement?.querySelectorAll(
+        `:scope > SubNetwork > ConnectedAP[iedName="${iedName}"]`
+      ) ?? []
+    ).map(
+      connectedAP =>
+        html`<connectedap-editor
+          class="${connectedAP.parentElement !== this.element
+            ? 'disabled'
+            : ''}"
+          .element=${connectedAP}
+        ></connectedap-editor>`
+    );
+  }
+
   private renderIEDs(): TemplateResult[] {
     return Array.from(this.element.querySelectorAll(':scope > ConnectedAP'))
       .map(connAP => connAP.getAttribute('iedName')!)
       .filter((v, i, a) => a.indexOf(v) === i)
       .sort(compareNames)
       .map(
         iedName => html` <action-pane id="iedSection" label="${iedName}">
-          ${Array.from(
-            this.element.parentElement?.querySelectorAll(
-              `:scope > SubNetwork > ConnectedAP[iedName="${iedName}"]`
-            ) ?? []
-          ).map(
-            connectedAP =>
-              html`<connectedap-editor
-                class="${connectedAP.parentElement !== this.element
-                  ? 'disabled'
-                  : ''}"
-                .element=${connectedAP}
-              ></connectedap-editor>`
-          )}
+          ${this.renderConnectedApEditors(iedName)}${this.renderGseEditors(
+            iedName
+          )}${this.renderSmvEditors(iedName)}
         </action-pane>`
       );
   }
@@ -149,6 +185,14 @@ export class SubNetworkEditor extends LitElement {
       display: none;
     }
 
+    #iedSection:not(:focus):not(:focus-within) gse-editor {
+      display: none;
+    }
+
+    #iedSection:not(:focus):not(:focus-within) smv-editor {
+      display: none;
+    }
+
     #iedSection .disabled {
       pointer-events: none;
       opacity: 0.5;

src/icons/icons.ts

@@ -676,3 +676,12 @@ export const openSCDIcon = html` <svg
     fill="#2aa198"
   />
 </svg>`;
+
+export const sizableSmvIcon = svg`
+  <svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M11,7H15V9H11V11H13A2,2 0 0,1 15,13V15A2,2 0 0,1 13,17H9V15H13V13H11A2,2 0 0,1 9,11V9A2,2 0 0,1 11,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+  </svg>`;
+
+export const sizableGooseIcon = svg`<svg viewBox="0 0 24 24">
+<path fill="currentColor" d="M11,7H15V9H11V15H13V11H15V15A2,2 0 0,1 13,17H11A2,2 0 0,1 9,15V9A2,2 0 0,1 11,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;