Move edge names when moving edges in network area diagram (#77)

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

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

@@ -436,3 +436,10 @@ export function getBoundarySemicircle(
         getCirclePath(busOuterRadius, startAngle, startAngle + Math.PI, true)
     );
 }
+
+// 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,37 @@ export class NetworkAreaDiagramViewer {
         });
     }
 
+    moveEdgeName(
+        edgeNode: SVGGraphicsElement,
+        anchorPoint: Point,
+        edgeStart: Point
+    ) {
+        const positionElement: SVGGraphicsElement | null =
+            edgeNode.querySelector('.nad-edge-label') as SVGGraphicsElement;
+        if (positionElement != null) {
+            // move edge name position
+            positionElement.setAttribute(
+                'transform',
+                'translate(' + DiagramUtils.getFormattedPoint(anchorPoint) + ')'
+            );
+            const angleElement: SVGGraphicsElement | null =
+                positionElement.querySelector('text') as SVGGraphicsElement;
+            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;
+    }
 }