First piece of SLD Editor

__snapshots__/open-scd.md

@@ -575,6 +575,22 @@
       </mwc-icon>
       Substation
     </mwc-check-list-item>
+    <mwc-check-list-item
+      aria-disabled="false"
+      class="official"
+      graphic="control"
+      hasmeta=""
+      left=""
+      mwc-list-item=""
+      selected=""
+      tabindex="-1"
+      value="/src/editors/Sld.js"
+    >
+      <mwc-icon slot="meta">
+        edit
+      </mwc-icon>
+      SLD
+    </mwc-check-list-item>
     <mwc-check-list-item
       aria-disabled="false"
       class="official"

package.json

@@ -40,7 +40,8 @@
     "lit-element": "2.5.1",
     "lit-html": "1.4.1",
     "lit-translate": "^1.2.1",
-    "marked": "^3.0.0"
+    "marked": "^3.0.0",
+    "panzoom": "^9.4.2"
   },
   "scripts": {
     "lint:eslint": "eslint --ext .ts,.html . --ignore-path .gitignore",

public/js/plugins.js

@@ -6,6 +6,14 @@ export const officialPlugins = [
     default: true,
     kind: 'editor',
   },
+  {
+    name: 'SLD',
+    src: '/src/editors/Sld.js',
+    icon: 'edit',
+    default: true,
+    kind: 'editor',
+
+  },
   {
     name: 'Communication',
     src: '/src/editors/Communication.js',

src/editors/SLD/bay-sld.ts

@@ -0,0 +1,224 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+
+import { getChildElementsByTagName } from '../../foundation.js';
+import { drawRoute, XYPosition, getPosition, Point, SldElement } from './foundation.js';
+
+/**
+ * SLD component of a Bay component.
+ */
+@customElement('bay-sld')
+export class BaySld extends LitElement implements XYPosition {
+
+  /**
+   * Property holding the Bay XML element.
+   */
+  @property()
+  element!: Element;
+
+  get name() {
+    return this.element.getAttribute('name');
+  }
+
+  /**
+   * Holding a reference to the Substation SVG to draw routes between elements on.
+   */
+  @property()
+  svg!: HTMLElement;
+
+  /**
+   * True if this Bay is built up downwards.
+   */
+  @property()
+  downer: boolean = false;
+
+  /**
+   * The space multiplyer of elements within a single bay.
+   */
+  @property()
+  baySpaceMultiply: number = 1;
+
+  /**
+   * Overridden from XYPosition
+   */
+  // --------------------------
+  @property()
+  fullParentOffset!: Point
+
+  get myOwnFullOffset(): Point {
+    const {x, y} = getPosition(this.element);
+    return {x: (x! - 1) + this.fullParentOffset.x!, y: (y! - 1) + this.fullParentOffset.y!};
+  }
+  // --------------------------
+
+  /**
+   * Get all the unconnected Nodes of this particular Bay.
+   */
+  get unconnectedElements(): Element[] {
+    return getChildElementsByTagName(
+      this.element,
+      'ConductingEquipment'
+    ).filter(
+      child =>
+        Array.from(child.querySelectorAll('Terminal')).filter(
+          terminal => terminal.getAttribute('cNodeName') !== 'grounded'
+        ).length === 0
+    );
+  }
+
+  /**
+   * Get all the Equipment Nodes of this particular Bay.
+   */
+  get equipmentElements(): SldElement[] {
+    const elements: SldElement[] = [];
+
+    Array.from(this.element.children)
+      .filter(
+        child =>
+          Array.from(child.querySelectorAll('Terminal')).filter(
+            terminal => terminal.getAttribute('cNodeName') !== 'grounded'
+          ).length !== 0
+      )
+      .forEach(child => {
+        const {x, y} = getPosition(child);
+        elements.push({ element: child, pos: { x, y } });
+      });
+
+    return elements;
+  }
+
+  /**
+   * Get all the Connectivity Nodes of this particular Bay.
+   */
+  get connectivityNodeElements(): SldElement[] {
+    const sldelements: SldElement[] = [];
+
+    Array.from(getChildElementsByTagName(this.element, 'ConnectivityNode'))
+      .forEach(child => {
+        const pathName = child.getAttribute('pathName');
+        let nrOfConnections = 0;
+        let totalX = 0;
+        let totalY = 0;
+
+        getChildElementsByTagName(this.element, 'ConductingEquipment')
+        .filter(equipment => equipment.querySelector(`Terminal[connectivityNode="${pathName}"]`) != null)
+        .forEach(equipment => {
+          nrOfConnections++;
+
+          const {x, y} = getPosition(equipment)
+
+          if (x != null && y != null) {
+            totalX += x;
+            totalY += y;
+          }
+        })
+
+        const [x, y] = [Math.round(totalX / nrOfConnections), Math.round(totalY / nrOfConnections)];
+        sldelements.push({ element: child, pos: {x, y} });
+      });
+
+    return sldelements;
+  }
+
+  /**
+   * Draw all the ConnectivityNode routes in this Bay.
+   */
+  drawConnectivityNodeConnections(): void {
+    this.connectivityNodeElements.forEach(cn => {
+      const pathName = cn.element.getAttribute('pathName');
+      this.equipmentElements
+      .filter(element => element.element.querySelector(`Terminal[connectivityNode="${pathName}"]`))
+      .forEach(element => {
+        const cnX = (cn.pos.x! * this.baySpaceMultiply - 1) + this.myOwnFullOffset.x!;
+        const cnY = (cn.pos.y! * this.baySpaceMultiply - 1) + this.myOwnFullOffset.y!;
+
+        const elementX = (element.pos.x! * this.baySpaceMultiply - 1) + this.myOwnFullOffset.x!;
+        const elementY = (element.pos.y! * this.baySpaceMultiply - 1) + this.myOwnFullOffset.y!;
+
+        if ((elementY > cnY)) {
+          drawRoute({x: cnX, y: cnY}, {x: elementX, y: elementY}, this.svg)
+        } else {
+          drawRoute({x: elementX, y: elementY}, {x: cnX, y: cnY}, this.svg)
+        }
+      });
+    });
+  }
+
+  firstUpdated(): void {
+    this.drawConnectivityNodeConnections();
+  }
+
+  getElementPositionAdjustedWithMultiplyer(xYposition: number) {
+    return xYposition * this.baySpaceMultiply;
+  }
+
+  /**
+    <!--
+    <div class="unconnectedcontainer">
+    ${this.unconnectedElements.map(
+      element =>
+        html`<div class="element">${element.getAttribute('name')}</div>`
+    )}
+    </div>
+    -->
+   */
+
+  render(): TemplateResult {
+    return html`<section>
+      <div style="grid-template-columns: repeat(100, 64px);grid-template-rows: repeat(100, 64px)">
+        ${this.equipmentElements.map(
+          element =>
+            html`<conducting-equipment-editor
+              .element=${element.element}
+              class="element"
+              style="grid-column:${this.getElementPositionAdjustedWithMultiplyer(element.pos.x!)};grid-row:${this.downer
+                ? this.getElementPositionAdjustedWithMultiplyer(element.pos.y!)
+                : this.getElementPositionAdjustedWithMultiplyer(-element.pos.y!)};"
+            >
+            </conducting-equipment-editor>`
+        )}
+        ${this.connectivityNodeElements.map(
+          element =>
+            html`<connectivity-node-editor
+              .element=${element.element}
+              class="element"
+              style="grid-column:${this.getElementPositionAdjustedWithMultiplyer(element.pos.x!)};grid-row:${this.downer
+                ? this.getElementPositionAdjustedWithMultiplyer(element.pos.y!)
+                : this.getElementPositionAdjustedWithMultiplyer(-element.pos.y!)};"
+            >
+            </connectivity-node-editor>`
+        )}
+
+      </div>
+    </section>`;
+  }
+
+  static styles = css`
+    .unconnectedcontainer {
+      display: grid;
+      grid-gap: 64px;
+      box-sizing: border-box;
+      grid-template-columns: repeat(auto-fit, minmax(64px, 64px));
+    }
+
+    div {
+      display: grid;
+    }
+
+    .element {
+      width: 64px;
+      height: 64px;
+    }
+
+    .element:hover {
+      outline: 2px dashed var(--mdc-theme-primary);
+      transition: transform 200ms linear, box-shadow 250ms linear;
+    }
+  `;
+}

src/editors/SLD/busbar-sld.ts

@@ -0,0 +1,66 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+import { busBarIcon } from '../../icons';
+
+/**
+ * SLD component of a BusBar component.
+ */
+@customElement('busbar-sld')
+export class BusBasSld extends LitElement {
+  @property()
+  element!: Element;
+
+  /**
+   * True if this Bay is built up downwards.
+   */
+  @property()
+  downer: boolean = false;
+
+  /**
+   * The 'justify-content' draws all elements within the div from bottom up ('flex-end')
+   * or top down ('flex-start).
+   * This depends if the busbar is drawn up or down.
+   */
+  render(): TemplateResult {
+    return html`<div
+      style="justify-content: ${this.downer ? css`flex-end;` : css`flex-start`}">
+      ${this.downer ? html`<h4>${this.element.getAttribute('name')}</h4>
+      ${busBarIcon}` : html`${busBarIcon}<h4>${this.element.getAttribute('name')}</h4>`}
+    </div>`;
+  }
+
+  static styles = css`
+    div {
+      grid-template-columns: repeat(1, 1fr);
+      width: 100%;
+      height: 64px;
+      display: flex;
+      justify-content: flex-end;
+      flex-direction: column;
+    }
+
+    div svg {
+      width: 100%;
+    }
+
+    h4 {
+      color: var(--mdc-theme-on-surface);
+      font-family: 'Roboto', sans-serif;
+      font-weight: 300;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0px;
+      opacity: 1;
+      transition: opacity 200ms linear;
+      text-align: left;
+    }
+  `;
+}