Move edge names when moving edges in network area diagram

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

src/components/network-area-diagram-viewer/diagram-utils.ts

@@ -436,3 +436,48 @@ export function getBoundarySemicircle(
         getCirclePath(busOuterRadius, startAngle, startAngle + Math.PI, true)
     );
 }
+
+// get egde name elements: position and angle elements
+export function getEdgeNameElements(
+    edgeNode: SVGGraphicsElement
+): [SVGGraphicsElement | null, SVGGraphicsElement | null] {
+    let edgeNamePositionElement: SVGGraphicsElement | null = null;
+    let edgeNameAngleElement: SVGGraphicsElement | null = null;
+    // get DOM element containing name
+    const nameElement: SVGGraphicsElement =
+        edgeNode.lastElementChild as SVGGraphicsElement;
+    if (
+        nameElement != null &&
+        nameElement.tagName == 'g' &&
+        (nameElement.id == null || nameElement.id.length == 0)
+    ) {
+        // get DOM element containing name position
+        const namePositionElement: SVGGraphicsElement =
+            nameElement.lastElementChild as SVGGraphicsElement;
+        if (
+            namePositionElement != null &&
+            namePositionElement.tagName == 'g' &&
+            (namePositionElement.id == null ||
+                namePositionElement.id.length == 0)
+        ) {
+            edgeNamePositionElement = namePositionElement;
+            // get DOM element containing name angle
+            const nameAngleElement: SVGGraphicsElement =
+                namePositionElement.lastElementChild as SVGGraphicsElement;
+            if (
+                nameAngleElement != null &&
+                nameAngleElement.tagName == 'text'
+            ) {
+                edgeNameAngleElement = nameAngleElement;
+            }
+        }
+    }
+    return [edgeNamePositionElement, edgeNameAngleElement];
+}
+
+// get the angle of a edge name between two points
+export function getEdgeNameAngle(point1: Point, point2: Point): number {
+    const angle = getAngle(point1, point2);
+    const textFlipped = Math.cos(angle) < 0;
+    return radToDeg(textFlipped ? angle - Math.PI : angle);
+}

src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts

@@ -731,6 +731,14 @@ export class NetworkAreaDiagramViewer {
                 edgeMiddle
             );
         }
+        // if present, move edge name
+        if (this.svgParameters.getEdgeNameDisplayed()) {
+            this.moveEdgeName(
+                edgeNode,
+                edgeMiddle,
+                edgeFork1 == null ? edgeStart1 : edgeFork1
+            );
+        }
         // store edge angles, to use them for bus node redrawing
         this.edgeAngles.set(
             edgeNode.id + '.1',
@@ -960,6 +968,36 @@ export class NetworkAreaDiagramViewer {
         });
     }
 
+    moveEdgeName(
+        edgeNode: SVGGraphicsElement,
+        anchorPoint: Point,
+        edgeStart: Point
+    ) {
+        const edgeNameElements = DiagramUtils.getEdgeNameElements(edgeNode);
+        const positionElement: SVGGraphicsElement | null = edgeNameElements[0];
+        if (positionElement != null) {
+            // move edge name position
+            positionElement.setAttribute(
+                'transform',
+                'translate(' + DiagramUtils.getFormattedPoint(anchorPoint) + ')'
+            );
+            const angleElement: SVGGraphicsElement | null = edgeNameElements[1];
+            if (angleElement != null) {
+                // change edge name angle
+                const edgeNameAngle = DiagramUtils.getEdgeNameAngle(
+                    edgeStart,
+                    anchorPoint
+                );
+                angleElement.setAttribute(
+                    'transform',
+                    'rotate(' +
+                        DiagramUtils.getFormattedValue(edgeNameAngle) +
+                        ')'
+                );
+            }
+        }
+    }
+
     private redrawVoltageLevelNode(
         node: SVGGraphicsElement | null,
         busNodeEdges: Map<string, SVGGraphicsElement[]>,

src/components/network-area-diagram-viewer/svg-parameters.ts

@@ -18,6 +18,7 @@ export class SvgParameters {
     converterStationWidth = 70.0;
     nodeHollowWidth = 15.0;
     unknownBusNodeExtraRadius = 10.0;
+    edgeNameDisplayed = true;
 
     public getVoltageLevelCircleRadius(): number {
         return this.voltageLevelCircleRadius;
@@ -58,4 +59,8 @@ export class SvgParameters {
     public getUnknownBusNodeExtraRadius(): number {
         return this.unknownBusNodeExtraRadius;
     }
+
+    public getEdgeNameDisplayed(): boolean {
+        return this.edgeNameDisplayed;
+    }
 }