Style tables in text boxes using CSS

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

Author: quinarygio

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

@@ -43,6 +43,9 @@ public interface StyleProvider {
     String LEGEND_SQUARE_CLASS = CLASSES_PREFIX + "legend-square";
     String PST_ARROW_CLASS = CLASSES_PREFIX + "pst-arrow";
     String HIGHLIGHT_CLASS = CLASSES_PREFIX + "highlight";
+    String TABLE_CLASS = CLASSES_PREFIX + "table";
+    String ROW_CLASS = CLASSES_PREFIX + "row";
+    String CELL_CLASS = CLASSES_PREFIX + "cell";
 
     List<String> getCssFilenames();
 

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

@@ -42,9 +42,6 @@ public class SvgWriter {
     private static final String TSPAN_ELEMENT_NAME = "tspan";
     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 USE_ELEMENT_NAME = "use";
     private static final String ID_ATTRIBUTE = "id";
     private static final String WIDTH_ATTRIBUTE = "width";
@@ -707,16 +704,17 @@ private void writeLines(List<String> lines, XMLStreamWriter writer) throws XMLSt
     }
 
     private void writeBusNodeLegend(XMLStreamWriter writer, VoltageLevelNode vlNode) throws XMLStreamException {
-        writer.writeStartElement(TABLE_ELEMENT_NAME);
+        writer.writeStartElement(DIV_ELEMENT_NAME);
+        writeStyleClasses(writer, StyleProvider.TABLE_CLASS);
 
         for (BusNode busNode : vlNode.getBusNodes()) {
-            writer.writeStartElement(TABLE_ROW_ELEMENT_NAME);
-            writer.writeStartElement(TABLE_DATA_ELEMENT_NAME);
+            writer.writeStartElement(DIV_ELEMENT_NAME);
+            writeStyleClasses(writer, StyleProvider.ROW_CLASS);
             writer.writeEmptyElement(DIV_ELEMENT_NAME);
-            writeStyleClasses(writer, styleProvider.getBusNodeStyleClasses(busNode), StyleProvider.LEGEND_SQUARE_CLASS);
+            writeStyleClasses(writer, styleProvider.getBusNodeStyleClasses(busNode), StyleProvider.CELL_CLASS, StyleProvider.LEGEND_SQUARE_CLASS);
             writeStyleAttribute(writer, styleProvider.getBusNodeStyle(busNode));
-            writer.writeEndElement();
-            writer.writeStartElement(TABLE_DATA_ELEMENT_NAME);
+            writer.writeStartElement(DIV_ELEMENT_NAME);
+            writeStyleClasses(writer, StyleProvider.CELL_CLASS);
             writer.writeCharacters(labelProvider.getBusDescription(busNode));
             writer.writeEndElement();
             writer.writeEndElement();

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

@@ -14,3 +14,6 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .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-table {display: table}
+.nad-row {display: table-row}
+.nad-cell {display: table-cell; padding: 2px;}

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

@@ -17,6 +17,9 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .nad-text-nodes foreignObject {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-table {display: table}
+.nad-row {display: table-row}
+.nad-cell {display: table-cell; padding: 2px;}
 .nad-vl0to30 {--nad-vl-color: #AFB42B}
 .nad-vl30to50 {--nad-vl-color: #EF9A9A}
 .nad-vl50to70 {--nad-vl-color: #9C27B0}

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

@@ -18,6 +18,9 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {visibility: hidden}
 .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}
+.nad-table {display: table}
+.nad-row {display: table-row}
+.nad-cell {display: table-cell; padding: 2px;}
 .nad-disconnected {--nad-vl-color: #808080}
 .nad-vl0to30-line {--nad-vl-color: #afb42b}
 .nad-vl0to30-0 {--nad-vl-color: #827717}