feat(editors/SingleLineDiagram) Allow movement of bays

src/editors/SingleLineDiagram.ts

@@ -19,6 +19,7 @@ import {
   createBusBarElement,
   createVoltageLevelElement,
   createBayElement,
+  createBayOutlineElement,
   createConductingEquipmentElement,
   createConnectivityNodeElement,
   getBusBarLength,
@@ -197,6 +198,22 @@ export default class SingleLineDiagramPlugin extends LitElement {
       });
   }
 
+  /**
+   * Draw outline rectangle for Bay and include name in <g> element
+   * Should only be a <g> element.
+   * @param bayGroup - The SVG <g> element containing all Bay icons/elements.
+   * @param bayElement - The Bay which the rectangle represents.
+   * */
+  private drawBayOutline(bayGroup: SVGGraphicsElement, bayElement: Element): void {
+    const outlineElement = createBayOutlineElement(bayGroup, 
+      bayElement, 
+      (event: Event) => this.openEditWizard(event, bayElement!));
+    if (bayGroup.parentNode !== null) {
+      // must be prepended as SVG z-order is based on element order in DOM
+      bayGroup.parentNode.prepend(outlineElement);
+    }
+  }
+
   /**
    * Draw all available Bays of the passed Voltage Level Element.
    * Should only be a <g> element.
@@ -208,10 +225,11 @@ export default class SingleLineDiagramPlugin extends LitElement {
       .forEach(bayElement => {
         const bayGroup = createBayElement(bayElement);
         voltageLevelGroup.appendChild(bayGroup);
-
+        
         this.drawPowerTransformers(bayElement, bayGroup);
         this.drawConductingEquipments(bayElement, bayGroup);
         this.drawConnectivityNodes(bayElement, bayGroup);
+        this.drawBayOutline(bayGroup, bayElement);
       });
   }
 
@@ -529,6 +547,12 @@ export default class SingleLineDiagramPlugin extends LitElement {
       pointer-events: bounding-box;
     }
 
+    .bayOutline {
+      fill: var(--mdc-theme-surface);
+      fill-opacity: 0.5;
+    }
+
+    text.bayName:hover,
     g[type='Busbar']:hover,
     g[type='ConductingEquipment']:hover,
     g[type='ConnectivityNode']:hover,

src/editors/singlelinediagram/sld-drawing.ts

@@ -172,7 +172,7 @@ export function getConnectivityNodesDrawingPosition(
  * @param element - The element.
  * @returns The <g> element.
  */
-function createGroupElement(element: Element): SVGElement {
+function createGroupElement(element: Element): SVGGraphicsElement {
   const finalElement = document.createElementNS(
     'http://www.w3.org/2000/svg',
     'g'
@@ -205,7 +205,6 @@ function createGroupElement(element: Element): SVGElement {
 export function createSubstationElement(substation: Element): SVGElement {
   return createGroupElement(substation);
 }
-
 /**
  * Create a Voltage Level <g> element.
  * @param voltageLevel - The Voltage Level from the SCL document to use.
@@ -220,10 +219,42 @@ export function createVoltageLevelElement(voltageLevel: Element): SVGElement {
  * @param bay - The Bay from the SCL document to use.
  * @returns A Bay <g> element.
  */
-export function createBayElement(bay: Element): SVGElement {
+export function createBayElement(bay: Element): SVGGraphicsElement {
   return createGroupElement(bay);
 }
 
+/**
+ * Create an outline rect and name for bays and add to the <g> element
+ * @param groupElement - The SVG group element with the SVG data comprising the bay.
+ * @param bayElement - The SCL element Bay.
+ * @returns The bay SVG objects <g> element including outline and the title.
+ */
+ export function createBayOutlineElement(
+  groupElement: SVGGraphicsElement,
+  bayElement: Element,
+  clickAction?: (event: Event) => void
+): SVGGraphicsElement {
+  const outlineGroup = createGroupElement(groupElement);
+  const boundingBox = groupElement.getBBox();
+
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('x', `${boundingBox.x}`);
+  rect.setAttribute('width', `${boundingBox.width}`);
+  rect.setAttribute('height', `${boundingBox.height}`);
+  rect.setAttribute('rx', '5');
+  rect.setAttribute('class', 'bayOutline');
+  outlineGroup.appendChild(rect);
+
+  const text = createTextElement(bayElement.getAttribute('name') || 'Unknown Bay', 
+    { x: boundingBox.x, y: boundingBox.y - 18 },
+    'small');
+  text.setAttribute('class', 'bayName');
+  outlineGroup.appendChild(text);
+
+  if (clickAction) text.addEventListener('click', clickAction);
+  return outlineGroup;
+}
+
 /**
  * Create a basic caption.
  * @param textContent - The content of the caption.