Style tables in text boxes using CSS (#690)

Signed-off-by: Giovanni Ferrari <[email protected]>

Author: quinarygio

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

@@ -41,9 +41,7 @@ public class SvgWriter {
     private static final String TEXT_ELEMENT_NAME = "text";
     private static final String FOREIGN_OBJECT_ELEMENT_NAME = "foreignObject";
     private static final String DIV_ELEMENT_NAME = "div";
-    private static final String TABLE_ELEMENT_NAME = "table";
-    private static final String TABLE_ROW_ELEMENT_NAME = "tr";
-    private static final String TABLE_DATA_ELEMENT_NAME = "td";
+    private static final String SPAN_ELEMENT_NAME = "span";
     private static final String USE_ELEMENT_NAME = "use";
     private static final String ID_ATTRIBUTE = "id";
     private static final String WIDTH_ATTRIBUTE = "width";
@@ -698,21 +696,12 @@ private void writeBusNodeLegend(XMLStreamWriter writer, VoltageLevelNode vlNode)
         List<BusNode> notEmptyDescrBusNodes = vlNode.getBusNodeStream()
                 .filter(busNode -> StringUtils.isNotEmpty(labelProvider.getBusDescription(busNode)))
                 .toList();
-
-        if (!notEmptyDescrBusNodes.isEmpty()) {
-            writer.writeStartElement(TABLE_ELEMENT_NAME);
-            for (BusNode busNode : notEmptyDescrBusNodes) {
-                writer.writeStartElement(TABLE_ROW_ELEMENT_NAME);
-                writer.writeStartElement(TABLE_DATA_ELEMENT_NAME);
-                writer.writeEmptyElement(DIV_ELEMENT_NAME);
-                writeStyleClasses(writer, styleProvider.getBusNodeStyleClasses(busNode), StyleProvider.LEGEND_SQUARE_CLASS);
-                writeStyleAttribute(writer, styleProvider.getBusNodeStyle(busNode));
-                writer.writeEndElement();
-                writer.writeStartElement(TABLE_DATA_ELEMENT_NAME);
-                writer.writeCharacters(labelProvider.getBusDescription(busNode));
-                writer.writeEndElement();
-                writer.writeEndElement();
-            }
+        for (BusNode busNode : notEmptyDescrBusNodes) {
+            writer.writeStartElement(DIV_ELEMENT_NAME);
+            writer.writeEmptyElement(SPAN_ELEMENT_NAME);
+            writeStyleClasses(writer, styleProvider.getBusNodeStyleClasses(busNode), StyleProvider.LEGEND_SQUARE_CLASS);
+            writeStyleAttribute(writer, styleProvider.getBusNodeStyle(busNode));
+            writer.writeCharacters(labelProvider.getBusDescription(busNode));
             writer.writeEndElement();
         }
     }

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

@@ -12,5 +12,5 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .nad-text-nodes {font: 25px serif; fill: black; dominant-baseline: central}
 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}
+.nad-legend-square {display: inline-block; margin-right: 10px; 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/topologicalStyle.css

@@ -16,7 +16,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .nad-text-nodes {font: 25px serif; fill: black; dominant-baseline: central}
 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-legend-square {display: inline-block; margin-right: 10px; 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}
 .nad-disconnected {--nad-vl-color: #808080}
 .nad-vl0to30-line {--nad-vl-color: #afb42b}