From b181e97cec71505c8c06410d961ed37fc3b99528 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Tue, 4 Jun 2024 09:48:28 +0200 Subject: [PATCH] Move edge names when moving edges in network area diagram Signed-off-by: massimo.ferraro --- .../data/nad-eurostag-tutorial-example1.svg | 16 +++++++ demo/src/diagram-viewers/data/nad-scada.svg | 11 +++++ .../diagram-utils.ts | 45 +++++++++++++++++++ .../network-area-diagram-viewer.ts | 38 ++++++++++++++++ .../svg-parameters.ts | 5 +++ 5 files changed, 115 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 @@ + + NGEN_NHV1 + @@ -203,6 +206,11 @@ + + + NHV1_NHV2_1 + + @@ -229,6 +237,11 @@ + + + NHV1_NHV2_2 + + @@ -258,6 +271,9 @@ + + NHV2_NLOAD + 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 @@ + + + line + + @@ -206,6 +211,9 @@ + + tw2t + @@ -252,6 +260,9 @@ + + hvdcline + diff --git a/src/components/network-area-diagram-viewer/diagram-utils.ts b/src/components/network-area-diagram-viewer/diagram-utils.ts index 138b02a..50e0bb8 100644 --- a/src/components/network-area-diagram-viewer/diagram-utils.ts +++ b/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); +} 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..6fd4b16 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,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, 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; + } }