fix(transform/desugar): adds unique ids to desugared transitions, so …

…they render properly again (#225)

## Description

- adds a method to the model class to return the highest transition id
- adds a Counter class to use as a counter
- adds id's to de-sugared transitions that are unique

## How Has This Been Tested?

- [x] green ci
- [x] updated automated non-regression tests

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

@@ -35,7 +35,7 @@
   <meta property="og:image:type" content="image/png" />
   <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-7I54aAq8ylg112ufDfO4SxBLIliKPx4uHvLB14NKZTVxBRSL8Jqlzd4o69um9MWR6p3sNxPe7gz45YYKfTuUDg=="></script>
+  <script src="smcat-online-interpreter.min.js" type="module" defer integrity="sha512-al0prNllJWvqcRP4KL92g31HS0UFScSjat2Z/gNZ/y1XHo2V36JDhYI+dLFaIqujcCJKeyiXK0aA0VR3qaTWFg=="></script>
   <script defer src="https://code.getmdl.io/1.3.0/material.min.js" async></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="purple">

docs/inpage.html

@@ -23,7 +23,7 @@
       src="state-machine-cat-inpage.min.js"
       type="module"
       defer
-      integrity="sha512-9CN180iJ3HTh9OG66+9sLwGvlbPCqSa+CMKzViJ3nm1FV/KvFEOfbHQQvwePPFsGWoqRnXTdZbvv2djiTq389Q=="
+      integrity="sha512-12WmjzUUso9QyOVws/FxWSeM8JEabqFWu2j2xB2193mYrjPnFHDLpJc54Y/4UHSjGkewBlOnl3BblJNeNdMtzA=="
     ></script>
     <style>
       body { font-family: sans-serif; margin: 0 auto; max-width: 799px;

src/counter.mts

@@ -0,0 +1,12 @@
+export class Counter {
+  _lHWM = 0;
+
+  constructor(pStart: number = 0) {
+    this._lHWM = pStart;
+  }
+
+  next(): number {
+    // eslint-disable-next-line no-plusplus
+    return ++this._lHWM;
+  }
+}

src/state-machine-model.mts

@@ -106,6 +106,10 @@ export default class StateMachineModel {
     );
   }
 
+  getMaximumTransitionId(): number {
+    return Math.max(...this._flattenedTransitions.map(({ id }) => id));
+  }
+
   findTransitionsToSiblings(
     pStateName: string,
     pExcludeIds: Set<number>,

src/transform/desugar.mts

@@ -5,6 +5,7 @@ import type {
   StateType,
 } from "types/state-machine-cat.mjs";
 import StateMachineModel from "../state-machine-model.mjs";
+import { Counter } from "../counter.mjs";
 import utl from "./utl.mjs";
 
 type ITransitionMap = {
@@ -24,6 +25,7 @@ function fuseTransitionAttribute(
 function fuseIncomingToOutgoing(
   pIncomingTransition: ITransition,
   pOutgoingTransition: ITransition,
+  pCounter: Counter,
 ): ITransition {
   // in:
   // a => ]: event [condition]/ action;
@@ -40,6 +42,7 @@ function fuseIncomingToOutgoing(
     ...pOutgoingTransition,
     from: pIncomingTransition.from,
     to: pOutgoingTransition.to,
+    id: pCounter.next(),
   };
 
   if (pOutgoingTransition.action) {
@@ -60,16 +63,11 @@ function fuseIncomingToOutgoing(
   return lReturnValue;
 }
 
-/**
- * @param {import("../../types/state-machine-cat.mjs").ITransition[]} pTransitions
- * @param {string[]} pPseudoStateNames
- * @param {ITransitionMap} pOutgoingTransitionMap
- * @returns {import("../../types/state-machine-cat.mjs").ITransition[]}
- */
 function fuseTransitions(
   pTransitions: ITransition[],
   pPseudoStateNames: string[],
   pOutgoingTransitionMap: ITransitionMap,
+  pCounter: Counter,
 ): ITransition[] {
   return pTransitions.reduce(
     (pAll: ITransition[], pTransition: ITransition) => {
@@ -80,7 +78,11 @@ function fuseTransitions(
         ) {
           pAll = pAll.concat(
             pOutgoingTransitionMap[pStateName].map((pOutgoingTransition) =>
-              fuseIncomingToOutgoing(pTransition, pOutgoingTransition),
+              fuseIncomingToOutgoing(
+                pTransition,
+                pOutgoingTransition,
+                pCounter,
+              ),
             ),
           );
         } else {
@@ -97,6 +99,7 @@ function deSugarPseudoStates(
   pMachine: IStateMachine,
   pPseudoStateNames: string[],
   pOutgoingTransitionMap: ITransitionMap,
+  pCounter: Counter,
 ): IStateMachine {
   const lMachine = structuredClone(pMachine);
 
@@ -105,6 +108,7 @@ function deSugarPseudoStates(
       lMachine.transitions,
       pPseudoStateNames,
       pOutgoingTransitionMap,
+      pCounter,
     );
   }
 
@@ -116,6 +120,7 @@ function deSugarPseudoStates(
             pState.statemachine,
             pPseudoStateNames,
             pOutgoingTransitionMap,
+            pCounter,
           ),
         }
       : pState,
@@ -195,11 +200,13 @@ export default (
     },
     {},
   );
+  const lMaximumTransitionId = lModel.getMaximumTransitionId();
 
   const lMachine = deSugarPseudoStates(
     pMachine,
     lPseudoStateNames,
     lOutgoingTransitionMap,
+    new Counter(lMaximumTransitionId),
   );
 
   return removeStatesCascading(lMachine, lPseudoStateNames);

test/transform/2pseudostates.desugared.json

@@ -32,35 +32,43 @@
   "transitions": [
     {
       "from": "initial",
-      "to": "aa"
+      "to": "aa",
+      "id": 10
     },
     {
       "from": "initial",
-      "to": "ba"
+      "to": "ba",
+      "id": 11
     },
     {
       "from": "aa",
-      "to": "ab"
+      "to": "ab",
+      "id": 4
     },
     {
       "from": "ba",
-      "to": "bb"
+      "to": "bb",
+      "id": 5
     },
     {
       "from": "ab",
-      "to": "ca"
+      "to": "ca",
+      "id": 12
     },
     {
       "from": "ab",
-      "to": "cb"
+      "to": "cb",
+      "id": 13
     },
     {
       "from": "bb",
-      "to": "ca"
+      "to": "ca",
+      "id": 14
     },
     {
       "from": "bb",
-      "to": "cb"
+      "to": "cb",
+      "id": 15
     }
   ]
 }

test/transform/2pseudostates.json

@@ -40,39 +40,48 @@
   "transitions": [
     {
       "from": "initial",
-      "to": "]fork"
+      "to": "]fork",
+      "id": 1
     },
     {
       "from": "]fork",
-      "to": "aa"
+      "to": "aa",
+      "id": 2
     },
     {
       "from": "]fork",
-      "to": "ba"
+      "to": "ba",
+      "id": 3
     },
     {
       "from": "aa",
-      "to": "ab"
+      "to": "ab",
+      "id": 4
     },
     {
       "from": "ba",
-      "to": "bb"
+      "to": "bb",
+      "id": 5
     },
     {
       "from": "ab",
-      "to": "]junction"
+      "to": "]junction",
+      "id": 6
     },
     {
       "from": "bb",
-      "to": "]junction"
+      "to": "]junction",
+      "id": 7
     },
     {
       "from": "]junction",
-      "to": "ca"
+      "to": "ca",
+      "id": 8
     },
     {
       "from": "]junction",
-      "to": "cb"
+      "to": "cb",
+      "id": 9
     }
   ]
 }

test/transform/forkfromnestedtohigherup.desugared.json

@@ -7,11 +7,13 @@
         "transitions": [
           {
             "from": "a",
-            "to": "c"
+            "to": "c",
+            "id": 4
           },
           {
             "from": "a",
-            "to": "b"
+            "to": "b",
+            "id": 5
           }
         ],
         "states": [

test/transform/forkfromnestedtohigherup.json

@@ -11,11 +11,13 @@
         "transitions": [
           {
             "from": "a",
-            "to": "]"
+            "to": "]",
+            "id": 1
           },
           {
             "from": "]",
-            "to": "b"
+            "to": "b",
+            "id": 2
           }
         ],
         "states": [
@@ -38,7 +40,8 @@
   "transitions": [
     {
       "from": "]",
-      "to": "c"
+      "to": "c",
+      "id": 3
     }
   ]
 }

test/transform/forkintonested.desugared.json

@@ -32,11 +32,13 @@
   "transitions": [
     {
       "from": "initial",
-      "to": "aa"
+      "to": "aa",
+      "id": 4
     },
     {
       "from": "initial",
-      "to": "bb"
+      "to": "bb",
+      "id": 5
     }
   ]
 }