feat(SingleLineDiagram): open onclick ConductingEquipment edit wizard

* Added Edit Wizard to ConductingEquipments

* Whole g element is now clickable

* fix(SingleLineDiagram/sld-drawing): make click event on ConductingEquipment optional

Co-authored-by: Rob Tjalma <[email protected]>
Co-authored-by: Jakob Vogelsang <[email protected]>

Author: 3 people

src/editors/SingleLineDiagram.ts

@@ -143,7 +143,9 @@ export default class SingleLineDiagramPlugin extends LitElement {
           ).length !== 0
       )
       .forEach(equipment => {
-        const eqElement = createConductingEquipmentElement(equipment);
+        const eqElement = createConductingEquipmentElement(equipment, () =>
+          this.openEditWizard(equipment!)
+        );
 
         this.addElementToGroup(eqElement, identity(equipment.parentElement));
       });
@@ -327,8 +329,13 @@ export default class SingleLineDiagramPlugin extends LitElement {
       overflow: hidden;
     }
 
+    g {
+      pointer-events: bounding-box;
+    }
+
     g[type='ConnectivityNode']:hover,
-    g[type='Terminal']:hover {
+    g[type='Terminal']:hover,
+    g[type='ConductingEquipment']:hover {
       outline: 2px dashed var(--mdc-theme-primary);
       transition: transform 200ms linear, box-shadow 250ms linear;
     }

src/editors/singlelinediagram/sld-drawing.ts

@@ -314,7 +314,8 @@ export function createBusBarElement(
  * @returns The Conducting Equipment SVG element.
  */
 export function createConductingEquipmentElement(
-  equipmentElement: Element
+  equipmentElement: Element,
+  clickAction?: () => void
 ): SVGElement {
   const groupElement = createGroupElement(equipmentElement);
 
@@ -340,6 +341,8 @@ export function createConductingEquipmentElement(
   );
   groupElement.appendChild(text);
 
+  if (clickAction) groupElement.addEventListener('click', clickAction);
+
   return groupElement;
 }