From 8f32510f31bb152090184bb47f6528294721774f Mon Sep 17 00:00:00 2001
From: Massimo Ferraro <massimo.ferraro@soft.it>
Date: Wed, 19 Jun 2024 10:31:06 +0200
Subject: [PATCH] Move edge names when moving edges in network area diagram
 (#77)

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>
---
 .../data/nad-eurostag-tutorial-example1.svg   | 16 ++++++++
 demo/src/diagram-viewers/data/nad-scada.svg   | 11 ++++++
 .../diagram-utils.ts                          |  7 ++++
 .../network-area-diagram-viewer.ts            | 39 +++++++++++++++++++
 .../svg-parameters.ts                         |  5 +++
 5 files changed, 78 insertions(+)

diff --git a/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg b/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg
index 31a3365..0974390 100644
--- a/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg
+++ b/demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg
@@ -176,6 +176,9 @@
             <g class="nad-glued-center">
                 <circle class="nad-vl0to30-line nad-winding" cx="-354.51" cy="-128.15" r="20.00"/>
                 <circle class="nad-vl300to500-line nad-winding" cx="-343.35" cy="-111.56" r="20.00"/>
+                <g class="nad-edge-label" transform="translate(-348.93,-119.86)">
+                    <text transform="rotate(56.08)" x="0.00" style="text-anchor:middle">NGEN_NHV1</text>
+                </g>
             </g>
         </g>
         <g id="9">
@@ -203,6 +206,11 @@
                     </g>
                 </g>
             </g>
+            <g class="nad-glued-center">
+                <g class="nad-edge-label" transform="translate(-54.98,86.38)">
+                    <text transform="rotate(3.61)" x="0.00" style="text-anchor:middle">NHV1_NHV2_1</text>
+                </g>
+            </g>
         </g>
         <g id="10">
             <g id="10.1" class="nad-vl300to500-line">
@@ -229,6 +237,11 @@
                     </g>
                 </g>
             </g>
+            <g class="nad-glued-center">
+                <g class="nad-edge-label" transform="translate(-49.95,6.53)">
+                    <text transform="rotate(3.61)" x="0.00" style="text-anchor:middle">NHV1_NHV2_2</text>
+                </g>
+            </g>
         </g>
         <g id="11">
             <g id="11.1" class="nad-vl300to500-line">
@@ -258,6 +271,9 @@
             <g class="nad-glued-center">
                 <circle class="nad-vl300to500-line nad-winding" cx="277.81" cy="-51.47" r="20.00"/>
                 <circle class="nad-vl120to180-line nad-winding" cx="293.43" cy="-63.97" r="20.00"/>
+                <g class="nad-edge-label" transform="translate(285.62,-57.72)">
+                    <text transform="rotate(-38.68)" x="0.00" style="text-anchor:middle">NHV2_NLOAD</text>
+                </g>
             </g>
         </g>
     </g>
diff --git a/demo/src/diagram-viewers/data/nad-scada.svg b/demo/src/diagram-viewers/data/nad-scada.svg
index 1121929..3ebf30a 100644
--- a/demo/src/diagram-viewers/data/nad-scada.svg
+++ b/demo/src/diagram-viewers/data/nad-scada.svg
@@ -176,6 +176,11 @@
                     </g>
                 </g>
             </g>
+            <g class="nad-glued-center">
+                <g class="nad-edge-label" transform="translate(7.93,87.69)">
+                    <text transform="rotate(-1.33)" x="0.00" style="text-anchor:middle">line</text>
+                </g>
+            </g>
         </g>
         <g id="6">
             <g id="6.1" class="nad-vl300to500-line">
@@ -206,6 +211,9 @@
                 <circle class="nad-vl300to500-line nad-winding" cx="18.86" cy="127.44" r="20.00"/>
                 <circle class="nad-vl180to300-line nad-winding" cx="-1.13" cy="127.91" r="20.00"/>
                 <path d="M60.00,0 0,60.00 M52.00,0 60.00,0 60.00,8.00" transform="matrix(-1.00,0.02,-0.02,-1.00,39.55,156.97)" class="nad-pst-arrow"/>
+                <g class="nad-edge-label" transform="translate(8.86,127.68)">
+                    <text transform="rotate(-1.33)" x="0.00" style="text-anchor:middle">tw2t</text>
+                </g>
             </g>
         </g>
         <g id="13" class="nad-dangling-line-edge">
@@ -252,6 +260,9 @@
             </g>
             <g class="nad-glued-center">
                 <polyline points="44.78,166.85 -25.20,168.48" class="nad-hvdc"/>
+                <g class="nad-edge-label" transform="translate(9.79,167.67)">
+                    <text transform="rotate(-1.33)" x="0.00" style="text-anchor:middle">hvdcline</text>
+                </g>
             </g>
         </g>
     </g>
diff --git a/src/components/network-area-diagram-viewer/diagram-utils.ts b/src/components/network-area-diagram-viewer/diagram-utils.ts
index 138b02a..c4e3aa8 100644
--- a/src/components/network-area-diagram-viewer/diagram-utils.ts
+++ b/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);
+}
diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
index b46c58f..69e112e 100644
--- a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
+++ b/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[]>,
diff --git a/src/components/network-area-diagram-viewer/svg-parameters.ts b/src/components/network-area-diagram-viewer/svg-parameters.ts
index 03d005a..a1102be 100644
--- a/src/components/network-area-diagram-viewer/svg-parameters.ts
+++ b/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;
+    }
 }