fix(render/dot): handles notes on composite self-transitions (#223)

## Description

- handles notes on composite self-transitions


## Motivation and Context

Notes were handled, as were composite self-transitions. The combination
never was, so self-transitions with a note didn't get a special
treatment - see the _before_ in the screenshots section.


## How Has This Been Tested?

- [x] green ci
- [x] additional non-regression test

## Screenshots


Given this self-transition, without a note ...


![without-a-note](https://github.com/user-attachments/assets/341daf93-2969-4470-bd4c-a1dc0eb8f2d1)

... adding a note ...

### After this PR

![after](https://github.com/user-attachments/assets/d55649ed-9f3a-4038-a756-0dcf69fbee36)

### Before this PR

![before](https://github.com/user-attachments/assets/db68e63c-d41b-455b-845a-17948d58a4af)


## 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)

docs/index.html

@@ -37,7 +37,7 @@
   <meta name="google-site-verification" content="K0j5zueKp7lYKMR7WihmcTJbLpHxBOpaXZEI_s0nHTw" />
   <link rel="canonical" href="https://state-machine-cat.js.org">
   <script nonce="known-inline-script">let LOG = false;</script>
-  <script src="smcat-online-interpreter.min.js" type="module" defer integrity="sha512-IgVDLqTCVyaJd467fILElqG3A2ZJG/2kJ7P3hdgcoFueUQndUY6YwRwLTDCJ1+nO2FMNvnkNfwtOqBA45DZ16A=="></script>
+  <script src="smcat-online-interpreter.min.js" type="module" defer integrity="sha512-w0Aho57pbDJ5cGWPTQZ3uQQzskOuiJgqhbmCIMnUajySy/2fp3QCSs7q6XAOFHpZvu7DELt53wta50zf4tYQoA=="></script>
   <script defer src="https://code.getmdl.io/1.3.0/material.min.js" async></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-DCPVBY7NNV"></script>
   <script nonce="known-inline-script">

docs/inpage.html

@@ -23,7 +23,7 @@
       src="state-machine-cat-inpage.min.js"
       type="module"
       defer
-      integrity="sha512-gwYByERsER+mF5G3WZMruQnkvMtangWaNYUy4m/fIssvgcHiwEt/3Oil00QEFzilirf0JaKetZeUNkP8VU6gMQ=="
+      integrity="sha512-XCJjJ6rK34lTDEMcYyblrtntUgwJ+QaODtTF+EdtHwz6InxYQR8KLixaOkXJGiTRBBUVfnVq6JtjJGdE+uFzew=="
     ></script>
     <style>
       body { font-family: sans-serif; margin: 0 auto; max-width: 799px;

src/render/dot/index.mts

@@ -314,20 +314,6 @@ function transition(
     : "";
   const lTransitionName = `tr_${pTransition.from}_${pTransition.to}_${pTransition.id}`;
 
-  // to attach a note, split the transition in half, reconnect them via an
-  // in-between point and connect the note to that in-between point as well
-  if (pTransition.note) {
-    const lNoteName = `note_${lTransitionName}`;
-    const lNoteNodeName = `i_${lNoteName}`;
-    const lNoteNode = `\n${pIndent}  "${lNoteNodeName}" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]`;
-    const lTransitionFrom = `\n${pIndent}  "${pTransition.from}" -> "${lNoteNodeName}" [arrowhead=none${lTail}${lColorAttribute}${lPenWidth}]`;
-    const lTransitionTo = `\n${pIndent}  "${lNoteNodeName}" -> "${pTransition.to}" [label="${lLabel}"${lHead}${lColorAttribute}${lFontColorAttribute}${lPenWidth}]`;
-    const lLineToNote = `\n${pIndent}  "${lNoteNodeName}" -> "${lNoteName}" [style=dashed arrowtail=none arrowhead=none weight=0]`;
-    const lNote = `\n${pIndent}  "${lNoteName}" [label="${noteToLabel(pTransition.note)}" shape=note fontsize=10 color=black fontcolor=black fillcolor="#ffffcc" penwidth=1.0]`;
-
-    return lNoteNode + lTransitionFrom + lTransitionTo + lLineToNote + lNote;
-  }
-
   if (isCompositeSelf(pModel, pTransition)) {
     // for self-transitions to/ from composite states ensure the transition leaves
     // and enters to/ from the right side of the state
@@ -336,18 +322,36 @@ function transition(
       pModel,
       pTransition,
     );
+    // as for composite self-transitions the transition is already split, we just
+    // have to connect any note to that same split point
+    let lNoteAndLine = "";
+    if (pTransition.note) {
+      const lNoteName = `note_${lTransitionName}`;
+      const lLineToNote = `\n${pIndent}  "${lNoteName}" -> "self_tr_${pTransition.from}_${pTransition.to}_${pTransition.id}" [style=dashed arrowtail=none arrowhead=none weight=0]`;
+      const lNote = `\n${pIndent}  "${lNoteName}" [label="${noteToLabel(pTransition.note)}" shape=note fontsize=10 color=black fontcolor=black fillcolor="#ffffcc" penwidth=1.0]`;
+      lNoteAndLine = lLineToNote + lNote;
+    }
 
     // the invisible 'self' node is declared with the state. If we do it later
     // the transition is going to look ugly
     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;
+    return lTransitionFrom + lTransitionTo + lNoteAndLine;
   }
 
-  // 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.
+  // to attach a note, split the transition in half, reconnect them via an
+  // in-between point and connect the note to that in-between point as well
+  if (pTransition.note) {
+    const lNoteName = `note_${lTransitionName}`;
+    const lNoteNodeName = `i_${lNoteName}`;
+    const lNoteNode = `\n${pIndent}  "${lNoteNodeName}" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]`;
+    const lTransitionFrom = `\n${pIndent}  "${pTransition.from}" -> "${lNoteNodeName}" [arrowhead=none${lTail}${lColorAttribute}${lPenWidth}]`;
+    const lTransitionTo = `\n${pIndent}  "${lNoteNodeName}" -> "${pTransition.to}" [label="${lLabel}"${lHead}${lColorAttribute}${lFontColorAttribute}${lPenWidth}]`;
+    const lLineToNote = `\n${pIndent}  "${lNoteNodeName}" -> "${lNoteName}" [style=dashed arrowtail=none arrowhead=none weight=0]`;
+    const lNote = `\n${pIndent}  "${lNoteName}" [label="${noteToLabel(pTransition.note)}" shape=note fontsize=10 color=black fontcolor=black fillcolor="#ffffcc" penwidth=1.0]`;
+
+    return lNoteNode + lTransitionFrom + lTransitionTo + lLineToNote + lNote;
+  }
 
   return `\n${pIndent}  "${pTransition.from}" -> "${pTransition.to}" [label="${lLabel}" class="${lClass}"${lTail}${lHead}${lColorAttribute}${lFontColorAttribute}${lPenWidth}]`;
 }

test/render/fixtures/544-self-transition-composite-with-a-note.dot

@@ -18,10 +18,9 @@ digraph "state transitions" {
       >]
 
   }
-  "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" penwidth=2]
-  "i_note_tr_a_a_1" -> "a" [label="    \l" lhead="cluster_a" penwidth=2]
-  "i_note_tr_a_a_1" -> "note_tr_a_a_1" [style=dashed arrowtail=none arrowhead=none weight=0]
+  "a" -> "self_tr_a_a_1" [label="    \l" arrowhead=none class="transition" tailport="e" headport="e" ltail="cluster_a" penwidth=2]
+  "self_tr_a_a_1" -> "a" [class="transition" lhead="cluster_a" tailport="w" penwidth=2]
+  "note_tr_a_a_1" -> "self_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]
 
 }