NAD: Use single foreignObject for all text nodes (#691)

Signed-off-by: Giovanni Ferrari <giovanni.ferrari@soft.it>

Author: quinarygio

network-area-diagram/src/main/java/com/powsybl/nad/svg/SvgWriter.java

@@ -630,12 +630,20 @@ private void drawHighlightedNode(XMLStreamWriter writer, VoltageLevelNode vlNode
     }
 
     private void drawTextNodes(Graph graph, XMLStreamWriter writer) throws XMLStreamException {
-        writer.writeStartElement(GROUP_ELEMENT_NAME);
-        writer.writeAttribute(CLASS_ATTRIBUTE, StyleProvider.TEXT_NODES_CLASS);
-        for (Pair<VoltageLevelNode, TextNode> nodePair : graph.getVoltageLevelTextPairs()) {
-            writeTextNode(writer, nodePair.getSecond(), nodePair.getFirst(), labelProvider);
+        List<Pair<VoltageLevelNode, TextNode>> textNodes = graph.getVoltageLevelTextPairs().stream()
+                .filter(nodePair -> nodePair.getSecond() != null)
+                .toList();
+
+        if (!textNodes.isEmpty()) {
+            writeForeignObject(writer);
+            writer.writeStartElement("", DIV_ELEMENT_NAME, XHTML_NAMESPACE_URI);
+            writer.writeDefaultNamespace(XHTML_NAMESPACE_URI);
+            for (Pair<VoltageLevelNode, TextNode> nodePair : textNodes) {
+                writeDetailedTextNode(writer, nodePair.getSecond(), nodePair.getFirst());
+            }
+            writer.writeEndElement();
+            writer.writeEndElement();
         }
-        writer.writeEndElement();
     }
 
     private String getTranslateString(Node node) {
@@ -650,24 +658,22 @@ private String getTranslateString(double x, double y) {
         return "translate(" + getFormattedValue(x) + "," + getFormattedValue(y) + ")";
     }
 
-    private void writeTextNode(XMLStreamWriter writer, TextNode textNode, VoltageLevelNode vlNode, LabelProvider labelProvider) throws XMLStreamException {
-        if (textNode == null) {
-            return;
-        }
-
+    private void writeForeignObject(XMLStreamWriter writer) throws XMLStreamException {
         writer.writeStartElement(FOREIGN_OBJECT_ELEMENT_NAME);
-        writeId(writer, textNode);
-        writer.writeAttribute(Y_ATTRIBUTE, getFormattedValue(textNode.getY()));
-        writer.writeAttribute(X_ATTRIBUTE, getFormattedValue(textNode.getX()));
-
-        // width and height cannot be set to auto, and object is of width and height 0 if not specified
+        // width and height can be set neither to auto nor 0, due to firefox not displaying it in those cases
         // using a fixed size of 1x1 and CSS {overflow: visible} to display it
         writer.writeAttribute(HEIGHT_ATTRIBUTE, "1");
         writer.writeAttribute(WIDTH_ATTRIBUTE, "1");
+        writeStyleClasses(writer, StyleProvider.TEXT_NODES_CLASS);
+    }
 
+    private void writeDetailedTextNode(XMLStreamWriter writer, TextNode textNode, VoltageLevelNode vlNode) throws XMLStreamException {
         writer.writeStartElement("", DIV_ELEMENT_NAME, XHTML_NAMESPACE_URI);
-        writer.writeDefaultNamespace(XHTML_NAMESPACE_URI);
         writer.writeAttribute(CLASS_ATTRIBUTE, StyleProvider.LABEL_BOX_CLASS);
+        long top = Math.round(textNode.getY());
+        long left = Math.round(textNode.getX());
+        writeStyleAttribute(writer, String.format("position: absolute; top: %spx; left: %spx", top, left));
+        writeId(writer, textNode);
 
         List<String> vlDescription = labelProvider.getVoltageLevelDescription(vlNode);
         writeLines(vlDescription, writer);
@@ -678,7 +684,6 @@ private void writeTextNode(XMLStreamWriter writer, TextNode textNode, VoltageLev
         writeLines(vlDetails, writer);
 
         writer.writeEndElement();
-        writer.writeEndElement();
     }
 
     private void writeLines(List<String> lines, XMLStreamWriter writer) throws XMLStreamException {

network-area-diagram/src/main/resources/customStyle.css

@@ -10,7 +10,7 @@ path.nad-arrow-out:not(.nad-state-out .nad-arrow-out) {visibility: hidden}
 path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .nad-text-background {flood-color: #90a4aeaa}
 .nad-text-nodes {font: 25px serif; fill: black; dominant-baseline: central}
-.nad-text-nodes foreignObject {overflow: visible; color: black}
+foreignObject.nad-text-nodes {overflow: visible; color: black}
 .nad-label-box {background-color: #6c6c6c20; width: max-content; padding: 10px; border-radius: 10px;}
 .nad-legend-square {width: 20px; height: 20px; background: var(--nad-vl-color, lightgrey);}
 .nad-edge-infos text, .nad-edge-label text {font: 20px serif; dominant-baseline:middle; stroke: #FFFFFFAA; stroke-width: 10; stroke-linejoin:round; paint-order: stroke}

network-area-diagram/src/main/resources/nominalStyle.css

@@ -14,7 +14,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .nad-current {fill: #bd4802}
 .nad-text-background {flood-color: #90a4aeaa}
 .nad-text-nodes {font: 25px serif; fill: black; dominant-baseline: central}
-.nad-text-nodes foreignObject {overflow: visible; color: black}
+foreignObject.nad-text-nodes {overflow: visible; color: black}
 .nad-label-box {background-color: #6c6c6c20; width: max-content; padding: 10px; border-radius: 10px;}
 .nad-edge-infos text, .nad-edge-label text {font: 20px serif; dominant-baseline:middle; stroke: #FFFFFFAA; stroke-width: 10; stroke-linejoin:round; paint-order: stroke}
 .nad-vl0to30 {--nad-vl-color: #AFB42B}

network-area-diagram/src/main/resources/topologicalStyle.css

@@ -14,7 +14,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .nad-current {fill: #bd4802}
 .nad-text-background {flood-color: #90a4aeaa}
 .nad-text-nodes {font: 25px serif; fill: black; dominant-baseline: central}
-.nad-text-nodes foreignObject {overflow: visible; color: black}
+foreignObject.nad-text-nodes {overflow: visible; color: black}
 .nad-label-box {background-color: #6c6c6c20; width: max-content; padding: 10px; border-radius: 10px;}
 .nad-legend-square {width: 20px; height: 20px; background: var(--nad-vl-color, black);}
 .nad-edge-infos text, .nad-edge-label text {font: 20px serif; dominant-baseline:middle; stroke: #FFFFFFAA; stroke-width: 10; stroke-linejoin:round; paint-order: stroke}