Style changes for TextEdge / TextNode (#56)

* TextEdge: Dashed line replaced by dotted line
* Add text background
* Update unit tests

Signed-off-by: Florian Dupuy <florian.dupuy@rte-france.com>

src/main/java/com/powsybl/nad/svg/StyleProvider.java

@@ -30,6 +30,7 @@ public interface StyleProvider {
     String ARROW_OUT_CLASS = CLASSES_PREFIX + "arrow-out";
     String HVDC_CLASS = CLASSES_PREFIX + "hvdc";
     String UNKNOWN_BUSNODE_CLASS = CLASSES_PREFIX + "unknown-busnode";
+    String TEXT_BACKGROUND_CLASS = CLASSES_PREFIX + "text-background";
 
     List<String> getCssFilenames();
 

src/main/java/com/powsybl/nad/svg/SvgParameters.java

@@ -32,6 +32,7 @@ public class SvgParameters {
     private double unknownBusNodeExtraRadius = 0.1;
     private double loopDistance = 1.2;
     private double loopEdgesAperture = Math.toRadians(60);
+    private boolean textNodeBackground = true;
 
     public enum CssLocation {
         INSERTED_IN_SVG, EXTERNAL_IMPORTED, EXTERNAL_NO_IMPORT
@@ -213,4 +214,13 @@ public SvgParameters setLoopDistance(double loopDistance) {
         this.loopDistance = loopDistance;
         return this;
     }
+
+    public boolean isTextNodeBackground() {
+        return textNodeBackground;
+    }
+
+    public SvgParameters setTextNodeBackground(boolean textNodeBackground) {
+        this.textNodeBackground = textNodeBackground;
+        return this;
+    }
 }

src/main/java/com/powsybl/nad/svg/SvgWriter.java

@@ -31,6 +31,7 @@ public class SvgWriter {
     private static final String SVG_ROOT_ELEMENT_NAME = "svg";
     private static final String STYLE_ELEMENT_NAME = "style";
     private static final String METADATA_ELEMENT_NAME = "metadata";
+    private static final String DEFS_ELEMENT_NAME = "defs";
     private static final String GROUP_ELEMENT_NAME = "g";
     private static final String POLYLINE_ELEMENT_NAME = "polyline";
     private static final String PATH_ELEMENT_NAME = "path";
@@ -48,6 +49,12 @@ public class SvgWriter {
     private static final String X_ATTRIBUTE = "x";
     private static final String Y_ATTRIBUTE = "y";
     private static final String POINTS_ATTRIBUTE = "points";
+    private static final String FILTER_ELEMENT_NAME = "filter";
+    private static final String FE_FLOOD_ELEMENT_NAME = "feFlood";
+    private static final String FE_COMPOSITE_ELEMENT_NAME = "feComposite";
+    private static final String FE_IN_ATTRIBUTE = "in";
+    private static final String FE_OPERATOR_ATTRIBUTE = "operator";
+    public static final String TEXT_BG_FILTER_ID = "textBgFilter";
 
     private final SvgParameters svgParameters;
     private final StyleProvider styleProvider;
@@ -95,6 +102,7 @@ private void writeSvg(Graph graph, OutputStream svgOs) {
             addSvgRoot(graph, writer);
             addStyle(writer);
             addMetadata(writer);
+            addDefs(writer);
             drawVoltageLevelNodes(graph, writer);
             drawBranchEdges(graph, writer);
             drawThreeWtEdges(graph, writer);
@@ -389,6 +397,9 @@ private void writeTextNode(XMLStreamWriter writer, TextNode textNode) throws XML
             return;
         }
         writer.writeStartElement(TEXT_ELEMENT_NAME);
+        if (svgParameters.isTextNodeBackground()) {
+            writer.writeAttribute(FILTER_ELEMENT_NAME, "url(#" + TEXT_BG_FILTER_ID + ")");
+        }
         writer.writeAttribute(X_ATTRIBUTE, getFormattedValue(textNode.getX()));
         writer.writeAttribute(Y_ATTRIBUTE, getFormattedValue(textNode.getY()));
         writer.writeAttribute(STYLE_ELEMENT_NAME, "dominant-baseline:middle");
@@ -625,6 +636,25 @@ private void addMetadata(XMLStreamWriter writer) throws XMLStreamException {
         writer.writeEndElement();
     }
 
+    private void addDefs(XMLStreamWriter writer) throws XMLStreamException {
+        if (svgParameters.isTextNodeBackground()) {
+            writer.writeStartElement(DEFS_ELEMENT_NAME);
+            writer.writeStartElement(FILTER_ELEMENT_NAME);
+            writer.writeAttribute(ID_ATTRIBUTE, TEXT_BG_FILTER_ID);
+            writer.writeAttribute(X_ATTRIBUTE, String.valueOf(0));
+            writer.writeAttribute(Y_ATTRIBUTE, String.valueOf(0));
+            writer.writeAttribute(WIDTH_ATTRIBUTE, String.valueOf(1));
+            writer.writeAttribute(HEIGHT_ATTRIBUTE, String.valueOf(1));
+            writer.writeEmptyElement(FE_FLOOD_ELEMENT_NAME);
+            writer.writeAttribute(CLASS_ATTRIBUTE, StyleProvider.TEXT_BACKGROUND_CLASS);
+            writer.writeEmptyElement(FE_COMPOSITE_ELEMENT_NAME);
+            writer.writeAttribute(FE_IN_ATTRIBUTE, "SourceGraphic");
+            writer.writeAttribute(FE_OPERATOR_ATTRIBUTE, "over");
+            writer.writeEndElement();
+            writer.writeEndElement();
+        }
+    }
+
     private static String getFormattedValue(double value) {
         return String.format(Locale.US, "%.2f", value);
     }

src/main/resources/nominalStyle.css

@@ -1,7 +1,7 @@
 .nad-branch-edges polyline, .nad-branch-edges path {stroke: var(--nad-vl-color, black); stroke-width: 0.05; fill: none}
 .nad-branch-edges circle {stroke: var(--nad-vl-color, black); stroke-width: 0.05; fill: white}
 .nad-3wt-edges polyline {stroke: var(--nad-vl-color, black); stroke-width: 0.05; fill: none}
-.nad-text-edges {stroke: grey; stroke-width: 0.02; stroke-dasharray: .1,.1}
+.nad-text-edges {stroke: black; stroke-width: 0.02; stroke-dasharray: .03,.05}
 .nad-disconnected {stroke-dasharray: .1,.1}
 .nad-vl-nodes circle {fill: var(--nad-vl-color, lightblue); stroke-width: 0.05; stroke: white}
 .nad-vl-nodes circle.nad-unknown-busnode {stroke: lightgrey; stroke-width: 0.05; stroke-dasharray: .05,.05; fill: none}
@@ -15,8 +15,8 @@
 .nad-active {visibility: visible}
 .nad-reactive {visibility: hidden}
 .nad-reactive path {stroke: none; fill: #0277bd}
-.nad-vl-nodes .nad-text-buses {font: 0.6px "Verdana"; fill: white}
-.nad-text-nodes {font: 0.25px "Verdana"; fill: grey}
+.nad-text-background {flood-color: #90a4aeaa}
+.nad-text-nodes {font: 0.25px "Verdana"; fill: black}
 .nad-edge-infos {font: 0.2px "Verdana"}
 .nad-edge-infos .nad-state-in {fill: #b71c1c}
 .nad-edge-infos .nad-state-out {fill: #2e7d32}

src/main/resources/topologicalStyle.css

@@ -1,7 +1,7 @@
 .nad-branch-edges polyline, .nad-branch-edges path {stroke: var(--nad-vl-color, lightgrey); stroke-width: 0.05; fill: none}
 .nad-branch-edges circle {stroke: var(--nad-vl-color, lightgrey); stroke-width: 0.05; fill: white}
 .nad-3wt-edges polyline {stroke: var(--nad-vl-color, lightgrey); stroke-width: 0.05; fill: none}
-.nad-text-edges {stroke: grey; stroke-width: 0.02; ; stroke-dasharray: .1,.1}
+.nad-text-edges {stroke: black; stroke-width: 0.02; stroke-dasharray: .03,.05}
 .nad-branch-edges .nad-disconnected {stroke-dasharray: .1,.1}
 .nad-vl-nodes circle {fill: var(--nad-vl-color, lightgrey); stroke-width: 0.05; stroke: white}
 .nad-vl-nodes circle.nad-unknown-busnode {stroke: var(--nad-vl-color, #808080); stroke-width: 0.05; stroke-dasharray: .05,.05; fill: none}
@@ -15,8 +15,8 @@
 .nad-active {visibility: visible}
 .nad-reactive {visibility: hidden}
 .nad-reactive path {stroke: none; fill: #0277bd}
-.nad-vl-nodes .nad-text-buses {font: 0.6px "Verdana"; fill: white}
-.nad-text-nodes {font: 0.25px "Verdana"; fill: grey}
+.nad-text-background {flood-color: #90a4aeaa}
+.nad-text-nodes {font: 0.25px "Verdana"; fill: black}
 .nad-edge-infos {font: 0.2px "Verdana"}
 .nad-edge-infos .nad-state-in {fill: #b71c1c}
 .nad-edge-infos .nad-state-out {fill: #2e7d32}

src/test/java/com/powsybl/nad/svg/NominalVoltageStyleTest.java

@@ -82,6 +82,7 @@ void testIEEE14() {
     void testIEEE14ForceLayoutWithTextNodes() {
         Network network = IeeeCdfNetworkFactory.create14();
         getLayoutParameters().setTextNodesForceLayout(true);
+        getSvgParameters().setTextNodeBackground(false);
         assertEquals(toString("/IEEE_14_bus_text_nodes.svg"), generateSvgString(network, "/IEEE_14_bus_text_nodes.svg"));
     }