fix(render/dot): makes the 'width' attribute on composite self-transi…

…tions applied to both halves of the self-transition (#222) ## Description - makes the 'width' attribute on composite self-transitions applied to both halves of the self-transition ## Motivation and Context fixes a bug ## How Has This Been Tested? - [x] green ci - [x] additional automated non-regression test ## Screenshots ### After ![after](https://github.com/user-attachments/assets/7a1231b3-aeec-4861-8d93-623d12e230b5) ### Before ![before](https://github.com/user-attachments/assets/06144749-9938-45f3-9ff7-2f59a7ed335f) ## Types of changes - [x] Bug fix (non-breaking change which fixes an issue) - [ ] Documentation only change - [ ] Refactor (non-breaking change which fixes an issue without changing functionality) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change)
sverweij · Dec 24, 2024 · 8ce2805 · 8ce2805
1 parent 96368e4
commit 8ce2805
Show file tree

Hide file tree

Showing 14 changed files with 206 additions and 4 deletions.
diff --git a/dist/render/dot/index.mjs b/dist/render/dot/index.mjs
diff --git a/src/render/dot/index.mts b/src/render/dot/index.mts
@@ -339,13 +339,12 @@ function transition(
 
     // the invisible 'self' node is declared with the state. If we do it later
     // the transition is going to look ugly
-    // TODO shouldn't there be a penwidth in the from transition as well?
-    const lTransitionFrom = `\n${pIndent}  "${pTransition.from}" -> "self_tr_${pTransition.from}_${pTransition.to}_${pTransition.id}" [label="${lLabel}" arrowhead=none class="${lClass}"${lTailPorts}${lTail}${lColorAttribute}${lFontColorAttribute}]`;
+    const lTransitionFrom = `\n${pIndent}  "${pTransition.from}" -> "self_tr_${pTransition.from}_${pTransition.to}_${pTransition.id}" [label="${lLabel}" arrowhead=none class="${lClass}"${lTailPorts}${lTail}${lColorAttribute}${lFontColorAttribute}${lPenWidth}]`;
     const lTransitionTo = `\n${pIndent}  "self_tr_${pTransition.from}_${pTransition.to}_${pTransition.id}" -> "${pTransition.to}" [class="${lClass}"${lHead}${lHeadPorts}${lColorAttribute}${lPenWidth}]`;
     return lTransitionFrom + lTransitionTo;
   }
 
-  // TODO: corner case
+  // TODO: corner case - notes on self transitions are not handled.
   //       a composite self transition with a note wasn't handled in the original code
   //       either - so you'd get a self transition with a note only, which works
   //       but doesn't look great.

diff --git a/test/render/fixtures/543-self-transition-composite-with-line-width.dot b/test/render/fixtures/543-self-transition-composite-with-line-width.dot
@@ -0,0 +1,24 @@
+digraph "state transitions" {
+  fontname="Helvetica" fontsize=12 penwidth=2.0 splines=true ordering=out compound=true overlap=scale nodesep=0.3 ranksep=0.1
+  node [shape=plaintext style=filled fillcolor="#FFFFFF01" fontname=Helvetica fontsize=12 penwidth=2.0]
+  edge [fontname=Helvetica fontsize=10]
+
+  "self_tr_a_a_1" [shape=point style=invis width=0 height=0 fixedsize=true]
+  subgraph "cluster_a" {
+    class="state regular" label= <
+    <table cellborder="0" border="0">
+      <tr><td>a</td></tr>
+    </table>
+    > style=rounded penwidth=2.0
+    "a" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]
+      "aa" [margin=0 class="state regular" label= <
+        <table align="center" cellborder="0" border="2" style="rounded" width="48">
+          <tr><td width="48" cellpadding="7">aa</td></tr>
+        </table>
+      >]
+
+  }
+  "a" -> "self_tr_a_a_1" [label="    \l" arrowhead=none class="transition" tailport="e" headport="e" ltail="cluster_a" penwidth=4]
+  "self_tr_a_a_1" -> "a" [class="transition" lhead="cluster_a" tailport="w" penwidth=4]
+
+}
diff --git a/test/render/fixtures/543-self-transition-composite-with-line-width.json b/test/render/fixtures/543-self-transition-composite-with-line-width.json
@@ -0,0 +1,24 @@
+{
+  "states": [
+    {
+      "name": "a",
+      "type": "regular",
+      "statemachine": {
+        "states": [
+          {
+            "name": "aa",
+            "type": "regular"
+          }
+        ]
+      }
+    }
+  ],
+  "transitions": [
+    {
+      "from": "a",
+      "to": "a",
+      "width": 4,
+      "id": 1
+    }
+  ]
+}
diff --git a/test/render/fixtures/543-self-transition-composite-with-line-width.scjson b/test/render/fixtures/543-self-transition-composite-with-line-width.scjson
@@ -0,0 +1,19 @@
+{
+    "states": [
+        {
+            "kind": "state",
+            "id": "a",
+            "transitions": [
+                {
+                    "target": "a"
+                }
+            ],
+            "states": [
+                {
+                    "kind": "state",
+                    "id": "aa"
+                }
+            ]
+        }
+    ]
+}
diff --git a/test/render/fixtures/543-self-transition-composite-with-line-width.scxml b/test/render/fixtures/543-self-transition-composite-with-line-width.scxml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<scxml xmlns="http://www.w3.org/2005/07/scxml" version="1.0">
+    <state id="a">
+        <state id="aa">
+        </state>
+        <transition target="a"/>
+    </state>
+</scxml>
diff --git a/test/render/fixtures/543-self-transition-composite-with-line-width.scxml.re-json b/test/render/fixtures/543-self-transition-composite-with-line-width.scxml.re-json
@@ -0,0 +1,22 @@
+{
+    "states": [
+        {
+            "name": "a",
+            "type": "regular",
+            "statemachine": {
+                "states": [
+                    {
+                        "name": "aa",
+                        "type": "regular"
+                    }
+                ]
+            }
+        }
+    ],
+    "transitions": [
+        {
+            "from": "a",
+            "to": "a"
+        }
+    ]
+}
diff --git a/test/render/fixtures/543-self-transition-composite-with-line-width.smcat b/test/render/fixtures/543-self-transition-composite-with-line-width.smcat
@@ -0,0 +1,2 @@
+a{aa;};
+a--a[width=4];
diff --git a/test/render/fixtures/544-self-transition-composite-with-a-note.dot b/test/render/fixtures/544-self-transition-composite-with-a-note.dot
@@ -0,0 +1,27 @@
+digraph "state transitions" {
+  fontname="Helvetica" fontsize=12 penwidth=2.0 splines=true ordering=out compound=true overlap=scale nodesep=0.3 ranksep=0.1
+  node [shape=plaintext style=filled fillcolor="#FFFFFF01" fontname=Helvetica fontsize=12 penwidth=2.0]
+  edge [fontname=Helvetica fontsize=10]
+
+  "self_tr_a_a_1" [shape=point style=invis width=0 height=0 fixedsize=true]
+  subgraph "cluster_a" {
+    class="state regular" label= <
+    <table cellborder="0" border="0">
+      <tr><td>a</td></tr>
+    </table>
+    > style=rounded penwidth=2.0
+    "a" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]
+      "aa" [margin=0 class="state regular" label= <
+        <table align="center" cellborder="0" border="2" style="rounded" width="48">
+          <tr><td width="48" cellpadding="7">aa</td></tr>
+        </table>
+      >]
+
+  }
+  "i_note_tr_a_a_1" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]
+  "a" -> "i_note_tr_a_a_1" [arrowhead=none ltail="cluster_a"]
+  "i_note_tr_a_a_1" -> "a" [label="    \l" lhead="cluster_a"]
+  "i_note_tr_a_a_1" -> "note_tr_a_a_1" [style=dashed arrowtail=none arrowhead=none weight=0]
+  "note_tr_a_a_1" [label="this is a note on the self-transition\l" shape=note fontsize=10 color=black fontcolor=black fillcolor="#ffffcc" penwidth=1.0]
+
+}
diff --git a/test/render/fixtures/544-self-transition-composite-with-a-note.json b/test/render/fixtures/544-self-transition-composite-with-a-note.json
@@ -0,0 +1,25 @@
+{
+  "states": [
+    {
+      "name": "a",
+      "type": "regular",
+      "statemachine": {
+        "states": [
+          {
+            "name": "aa",
+            "type": "regular"
+          }
+        ]
+      }
+    }
+  ],
+  "transitions": [
+    {
+      "from": "a",
+      "to": "a",
+      "width": 2,
+      "note": ["this is a note on the self-transition"],
+      "id": 1
+    }
+  ]
+}
diff --git a/test/render/fixtures/544-self-transition-composite-with-a-note.scjson b/test/render/fixtures/544-self-transition-composite-with-a-note.scjson
@@ -0,0 +1,19 @@
+{
+    "states": [
+        {
+            "kind": "state",
+            "id": "a",
+            "transitions": [
+                {
+                    "target": "a"
+                }
+            ],
+            "states": [
+                {
+                    "kind": "state",
+                    "id": "aa"
+                }
+            ]
+        }
+    ]
+}
diff --git a/test/render/fixtures/544-self-transition-composite-with-a-note.scxml b/test/render/fixtures/544-self-transition-composite-with-a-note.scxml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<scxml xmlns="http://www.w3.org/2005/07/scxml" version="1.0">
+    <state id="a">
+        <state id="aa">
+        </state>
+        <transition target="a"/>
+    </state>
+</scxml>
diff --git a/test/render/fixtures/544-self-transition-composite-with-a-note.scxml.re-json b/test/render/fixtures/544-self-transition-composite-with-a-note.scxml.re-json
@@ -0,0 +1,22 @@
+{
+    "states": [
+        {
+            "name": "a",
+            "type": "regular",
+            "statemachine": {
+                "states": [
+                    {
+                        "name": "aa",
+                        "type": "regular"
+                    }
+                ]
+            }
+        }
+    ],
+    "transitions": [
+        {
+            "from": "a",
+            "to": "a"
+        }
+    ]
+}
diff --git a/test/render/fixtures/544-self-transition-composite-with-a-note.smcat b/test/render/fixtures/544-self-transition-composite-with-a-note.smcat
@@ -0,0 +1,3 @@
+a{aa;};
+# this is a note on the self-transition
+a--a[width=2];