Improved font styling for layout and alignment (#91)

* Improved font styling for layout and alignment

* Update graphviz2drawio/mx/Node.py

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

* Update graphviz2drawio/mx/MxGraph.py

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

* refinements

* formatting test

---------

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

Author: hbmartin

README.md

@@ -98,14 +98,14 @@ pip install -r requirements.txt
 python -m graphviz2drawio test/directed/hello.gv.txt
 ```
 
-## Roadmap to 0.5
+## Roadmap
 - [ ] Migrate to uv/hatch for packaging and dep mgmt
 - [ ] Turn on master branch protection
-- [ ] Text alignment inside of shape
-- [ ] Port layout/orientation
 - [ ] Support for fill gradient
+- [ ] Support compatible [arrows](https://graphviz.org/docs/attr-types/arrowType/)
 
-## License
+## Legal
 
 © [Harold Martin](https://www.linkedin.com/in/harold-martin-98526971/) - released under [GPLv3](LICENSE.md)
 
+diagrams.net is a trademark and draw.io is a registered trademark of JGraph Limited.

graphviz2drawio/models/SvgParser.py

@@ -39,7 +39,7 @@ def parse_nodes_edges_clusters(
             if title is None:
                 raise MissingTitleError(g)
             if g.attrib["class"] == "node":
-                nodes[title] = node_factory.from_svg(g)
+                nodes[title] = node_factory.from_svg(g, labelloc="c")
             elif g.attrib["class"] == "edge":
                 # We need to merge edges with the same source and target
                 # GV represents multiple labels with multiple edges
@@ -52,6 +52,6 @@ def parse_nodes_edges_clusters(
                 else:
                     edges[edge.key_for_label] = edge
             elif g.attrib["class"] == "cluster":
-                clusters[title] = node_factory.from_svg(g)
+                clusters[title] = node_factory.from_svg(g, labelloc="t")
 
     return nodes, list(edges.values()), clusters

graphviz2drawio/mx/Edge.py

@@ -115,10 +115,7 @@ def __repr__(self) -> str:
         )
 
     def value_for_labels(self) -> str:
-        text = ""
-        for i, label in enumerate(self.labels):
-            if i == 0:
-                text += label.to_simple_value()
-            else:
-                text += f"<div>{label.to_simple_value()}</div>"
-        return text
+        return "".join(
+            (label.get_mx_value() if i == 0 else f"<div>{label.get_mx_value()}</div>")
+            for i, label in enumerate(self.labels)
+        )

graphviz2drawio/mx/MxConst.py

@@ -18,3 +18,9 @@
 NONE = "none"
 CURVED = "curved=1;"
 SHARP = "rounded=0;"
+
+VERTICAL_ALIGN = {
+    "t": "top",
+    "b": "bottom",
+    "c": "middle",
+}

graphviz2drawio/mx/MxGraph.py

@@ -6,6 +6,7 @@
 from graphviz2drawio.mx import MxConst
 from graphviz2drawio.mx.Curve import Curve
 from graphviz2drawio.mx.Edge import Edge
+from graphviz2drawio.mx.MxConst import VERTICAL_ALIGN
 from graphviz2drawio.mx.Node import Node
 from graphviz2drawio.mx.Styles import Styles
 
@@ -82,14 +83,16 @@ def add_node(self, node: Node) -> None:
 
             attributes["image"] = image_data_for_path(image_path)
 
+        attributes["vertical_align"] = VERTICAL_ALIGN.get(node.labelloc, "middle")
+
         style: str = style_for_shape.format(**attributes)
 
         node_element = SubElement(
             self.root,
             MxConst.CELL,
             attrib={
                 "id": node.sid,
-                "value": node.text_to_mx_value(),
+                "value": node.texts_to_mx_value(),
                 "style": style,
                 "parent": "1",
                 "vertex": "1",
@@ -145,10 +148,6 @@ def add_mx_geo_with_points(element: Element, curve: Curve | None) -> None:
                         },
                     )
 
-    @staticmethod
-    def x_y_strs(point: complex) -> tuple[str, str]:
-        return str(int(point.real)), str(int(point.imag))
-
     def value(self) -> str:
         indent(self.graph)
         return tostring(self.graph, encoding="unicode", xml_declaration=True)

graphviz2drawio/mx/Node.py

@@ -13,6 +13,7 @@ def __init__(
         fill: str | None,
         stroke: str | None,
         shape: str,
+        labelloc: str,
     ) -> None:
         super().__init__(sid, gid)
         self.rect = rect
@@ -21,15 +22,16 @@ def __init__(
         self.stroke = stroke
         self.label = None
         self.shape = shape
+        self.labelloc = labelloc
 
-    def text_to_mx_value(self) -> str:
+    def texts_to_mx_value(self) -> str:
         value = ""
         last_text = len(self.texts) - 1
         for i, t in enumerate(self.texts):
-            style = t.get_mx_style()
-            value += f"<p style='{style}'>{t.text}</p>"
+            value += f"<div>{t.get_mx_value()}</div>" if i != 0 else t.get_mx_value()
             if i != last_text:
                 value += "<hr size='1'/>"
+
         return value
 
     def __repr__(self) -> str:

graphviz2drawio/mx/NodeFactory.py

@@ -15,7 +15,7 @@ def __init__(self, coords: CoordsTranslate) -> None:
         super().__init__()
         self.coords = coords
 
-    def from_svg(self, g: Element) -> Node:
+    def from_svg(self, g: Element, labelloc: str) -> Node:
         texts = self._extract_texts(g)
         rect = None
         fill = None
@@ -56,6 +56,7 @@ def from_svg(self, g: Element) -> Node:
             fill=fill,
             stroke=stroke,
             shape=shape,
+            labelloc=labelloc,
         )
 
     @staticmethod

graphviz2drawio/mx/Styles.py

@@ -5,14 +5,14 @@
 
 # Make this subclass StrEnum when dropping Py 3.10 support
 class Styles(Enum):
-    NODE = "verticalAlign=top;align=left;overflow=fill;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeColor={stroke};strokeWidth=1;fillColor={fill};"
+    NODE = "verticalAlign={vertical_align};html=1;rounded=0;labelBackgroundColor=none;strokeColor={stroke};strokeWidth=1;fillColor={fill};"
     EDGE = "html=1;endArrow={end_arrow};dashed={dashed};endFill={end_fill};startArrow={start_arrow};startFill={start_fill};fillColor={stroke};strokeColor={stroke};"
     EDGE_LABEL = (
         "edgeLabel;html=1;align=center;verticalAlign=bottom;resizable=0;points=[];"
     )
     EDGE_INVIS = "rounded=1;html=1;exitX={exit_x:.3g};exitY={exit_y:.3g};jettySize=auto;curved={curved};endArrow={end_arrow};dashed={dashed};endFill={end_fill};"
 
-    TEXT = "margin:0px;text-align:{align};{margin};font-size:{size}px;font-family:{family};color:{color};"
+    TEXT_VALUE = "{open_tags}<font style='font-size: {size}px;' face='{family}' color='{color}'>{text}</font>{close_tags}"
 
     ELLIPSE = "ellipse;" + NODE
     CIRCLE = "ellipse;aspect=fixed;" + NODE
@@ -28,12 +28,10 @@ class Styles(Enum):
     PARALLELOGRAM = "shape=parallelogram;perimeter=parallelogramPerimeter;" + NODE
     HOUSE = "shape=offPageConnector;direction=west;" + NODE
     PENTAGON = "shape=mxgraph.basic.pentagon;" + NODE
-    OCTAGON = (
-        "shape=mxgraph.basic.octagon2;align=center;verticalAlign=middle;dx=15;" + NODE
-    )
+    OCTAGON = "shape=mxgraph.basic.octagon2;align=center;dx=15;" + NODE
     DOUBLE_CIRCLE = "ellipse;shape=doubleEllipse;aspect=fixed;" + NODE
     DOUBLE_OCTAGON = (
-        "shape=image;html=1;verticalAlign=middle;verticalLabelPosition=middle;imageAspect=0;aspect=fixed;image=https://cdn4.iconfinder.com/data/icons/feather/24/octagon-128.png;labelPosition=center;align=center;"
+        "shape=image;html=1;verticalLabelPosition=middle;imageAspect=0;aspect=fixed;image=https://cdn4.iconfinder.com/data/icons/feather/24/octagon-128.png;labelPosition=center;align=center;"
         + NODE
     )
     INV_TRIANGLE = "triangle;direction=south;" + NODE
@@ -43,32 +41,30 @@ class Styles(Enum):
     INV_HOUSE = "shape=offPageConnector;direction=east;" + NODE
     SQUARE = "aspect=fixed;" + NODE
     STAR = (
-        "shape=mxgraph.basic.star;labelPosition=center;align=center;verticalLabelPosition=middle;verticalAlign=middle;"
+        "shape=mxgraph.basic.star;labelPosition=center;align=center;verticalLabelPosition=middle;"
         + NODE
     )
     UNDERLINE = "line;strokeWidth=2;verticalAlign=bottom;labelPosition=center;verticalLabelPosition=top;align=center;"
     CYLINDER = "shape=cylinder;boundedLbl=1;backgroundOutline=1;" + NODE
     NOTE = "shape=note;backgroundOutline=1;" + NODE
     TAB = "shape=folder;tabWidth=40;tabHeight=14;tabPosition=left;" + NODE
     FOLDER = (
-        "shape=mxgraph.office.concepts.folder;outlineConnect=0;align=center;verticalLabelPosition=middle;verticalAlign=middle;labelPosition=center;shadow=0;dashed=0;"
+        "shape=mxgraph.office.concepts.folder;outlineConnect=0;align=center;verticalLabelPosition=middle;labelPosition=center;shadow=0;dashed=0;"
         + NODE
     )
     CUBE = "shape=cube;boundedLbl=1;backgroundOutline=1;" + NODE
-    COMPONENT = (
-        "shape=component;align=center;spacingLeft=36;verticalAlign=bottom;" + NODE
-    )
+    COMPONENT = "shape=component;align=center;spacingLeft=36;" + NODE
     RPROMOTER = (
-        "shape=mxgraph.arrows2.bendArrow;dy=15;dx=38;notch=0;arrowHead=55;rounded=0;shadow=0;dashed=0;align=center;verticalAlign=middle;"
+        "shape=mxgraph.arrows2.bendArrow;dy=15;dx=38;notch=0;arrowHead=55;rounded=0;shadow=0;dashed=0;align=center;"
         + NODE
     )
     LPROMOTER = "flipH=1;" + RPROMOTER
     CDS = (
-        "shape=mxgraph.arrows2.arrow;dy=0;dx=10;notch=0;shadow=0;dashed=0;align=center;verticalAlign=middle;"
+        "shape=mxgraph.arrows2.arrow;dy=0;dx=10;notch=0;shadow=0;dashed=0;align=center;"
         + NODE
     )
     RARROW = (
-        "shape=mxgraph.arrows2.arrow;dy=0.6;dx=40;align=center;labelPosition=center;notch=0;strokeWidth=2;verticalLabelPosition=middle;verticalAlign=middle;"
+        "shape=mxgraph.arrows2.arrow;dy=0.6;dx=40;align=center;labelPosition=center;notch=0;strokeWidth=2;verticalLabelPosition=middle;"
         + NODE
     )
     LARROW = "flipH=1;" + RARROW

graphviz2drawio/mx/Text.py

@@ -1,6 +1,5 @@
 from xml.etree.ElementTree import Element
 
-from graphviz2drawio.models import DotAttr
 from graphviz2drawio.mx import MxConst
 
 from ..models.Errors import MissingTextError
@@ -11,55 +10,48 @@ class Text:
     def __init__(
         self,
         text: str,
-        anchor: str | None,
         family: str,
         size: float,
         color: str | None,
         *,
         bold: bool,
         italic: bool,
     ) -> None:
-        self.anchor = anchor
         self.family = family
         self.size = size
         self.text = text
         self.color = color
         self.bold = bold
         self.italic = italic
 
-    def get_mx_style(self) -> str:
-        align = MxConst.CENTER if self.anchor == DotAttr.MIDDLE else MxConst.START
-        margin = (
-            "margin-top:4px" if self.anchor == DotAttr.MIDDLE else "margin-left:4px"
-        )
-        rescaled_size = 10.0 * (self.size / 14.0)
-        return Styles.TEXT.format(
-            align=align,
-            margin=margin,
-            size=rescaled_size,
+    def get_mx_value(self) -> str:
+        open_tags = ""
+        close_tags = ""
+        if self.bold:
+            open_tags = "<b>"
+            close_tags = "</b>"
+        if self.italic:
+            open_tags = "<i>" + open_tags
+            close_tags += "</i>"
+        return Styles.TEXT_VALUE.format(
+            text=self.text,
+            size=self.size or "14",
             family=self.family or MxConst.DEFAULT_FONT_FAMILY,
             color=self.color or MxConst.DEFAULT_FONT_COLOR,
+            open_tags=open_tags,
+            close_tags=close_tags,
         )
 
-    def to_simple_value(self) -> str:
-        text = self.text
-        if self.bold:
-            text = f"<b>{text}</b>"
-        if self.italic:
-            text = f"<i>{text}</i>"
-        return text
-
     @staticmethod
     def from_svg(t: Element) -> "Text":
         text = t.text
         if text is None:
             raise MissingTextError(t)
         return Text(
             text=text.replace("<", "&lt;").replace(">", "&gt;"),
-            anchor=t.attrib.get("text-anchor", None),
             family=t.attrib.get("font-family", MxConst.DEFAULT_FONT_FAMILY),
             size=float(t.attrib.get("font-size", MxConst.DEFAULT_TEXT_SIZE)),
-            color=t.attrib.get("fill", None),
+            color=t.attrib.get("fill", MxConst.DEFAULT_FONT_COLOR),
             bold=t.get("font-weight", None) == "bold",
             italic=t.get("font-style", None) == "italic",
         )

test/directed/psg.gv.txt

@@ -1,7 +1,3 @@
-##"I made a program to generate dot files representing the LR(0) state graph along with computed LALR(1) lookahead for an arbitrary context-free grammar, to make the diagrams I used in this article: http://blog.lab49.com/archives/2471. The program also highlights errant nodes in red if the grammar would produce a shift/reduce or reduce/reduce conflict -- you may be able to go to http://kthielen.dnsalias.com:8082/ to produce a graph more to your liking". Contributed by Kalani Thielen.
-
-##Command to get the layout: "dot -Gsize=10,15 -Tpng thisfile > thisfile.png"
-
 digraph g {
   graph [fontsize=30 labelloc="t" label="" splines=true overlap=false rankdir = "LR"];
   ratio = auto;