@typeonce/effect-machine-devtools 0.27.1 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +1 -1
  2. package/dist/client/assets/index-ZUqYOHbc.css +1 -0
  3. package/dist/client/assets/index-gxgK_rqB.js +37 -0
  4. package/dist/client/index.html +2 -2
  5. package/package.json +2 -2
  6. package/src/internal/browser/chart-layout-policy.ts +13 -8
  7. package/src/internal/browser/chart-layout.ts +640 -149
  8. package/src/internal/browser/chart-model.ts +0 -57
  9. package/src/internal/browser/chart-renderer.ts +19 -23
  10. package/src/internal/browser/machine-index.ts +23 -0
  11. package/src/internal/browser/shared-terminal-routing-example.ts +141 -0
  12. package/src/internal/browser/styles.css +34 -36
  13. package/src/internal/browser/visualizer-app.ts +59 -4
  14. package/dist/client/assets/index-BnBnpx0G.css +0 -1
  15. package/dist/client/assets/index-DM9jlCJV.js +0 -37
package/dist/client/index.html CHANGED
@@ -5,8 +5,8 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <meta name="description" content="Interactive statechart visualization for Effect Machine" />
7
7
  <title>Effect Machine · Statechart</title>
8
- <script type="module" crossorigin src="./assets/index-DM9jlCJV.js"></script>
9
- <link rel="stylesheet" crossorigin href="./assets/index-BnBnpx0G.css">
8
+ <script type="module" crossorigin src="./assets/index-gxgK_rqB.js"></script>
9
+ <link rel="stylesheet" crossorigin href="./assets/index-ZUqYOHbc.css">
10
10
  </head>
11
11
  <body>
12
12
  <div id="app"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@typeonce/effect-machine-devtools",
3
- "version": "0.27.1",
3
+ "version": "0.28.0",
4
4
  "description": "Local development tools for Effect Machine",
5
5
  "author": "Sandro Maglione",
6
6
  "repository": {
@@ -33,7 +33,7 @@
33
33
  "elkjs": "0.12.0",
34
34
  "typescript": "6.0.3",
35
35
  "vite": "8.1.5",
36
- "@typeonce/effect-machine": "^0.27.1"
36
+ "@typeonce/effect-machine": "^0.28.0"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "effect": "4.0.0-rc.112"
package/src/internal/browser/chart-layout-policy.ts CHANGED
@@ -7,7 +7,7 @@ export interface ChartNodeLayoutPolicy {
7
7
  readonly staticPath: boolean
8
8
  readonly rank: number | null
9
9
  readonly order: number
10
- readonly layerConstraint: "LAST" | null
10
+ readonly layerConstraint: "FIRST" | "LAST" | null
11
11
  }
12
12
 
13
13
  export interface ChartEdgeLayoutPolicy {
@@ -159,17 +159,17 @@ export const makeChartLayoutPolicy = (model: ChartModel): ChartLayoutPolicy => {
159
159
  staticPath: staticPaths.has(node.path),
160
160
  rank,
161
161
  order,
162
- layerConstraint: node.type === "final" ? "LAST" : null
162
+ layerConstraint: rank === 0 ? "FIRST" : node.type === "final" ? "LAST" : null
163
163
  })
164
164
  })
165
165
  }
166
166
 
167
167
  const edgePolicy = (edge: ChartEdge): ChartEdgeLayoutPolicy => {
168
168
  if (edge.kind === "targetless" || edge.target === edge.source) {
169
- return { direction: "self", sourceSide: "SOUTH", targetSide: "SOUTH" }
169
+ return { direction: "self", sourceSide: "EAST", targetSide: "EAST" }
170
170
  }
171
171
  if (edge.target === null) {
172
- return { direction: "forward", sourceSide: "EAST", targetSide: "WEST" }
172
+ return { direction: "forward", sourceSide: "SOUTH", targetSide: "NORTH" }
173
173
  }
174
174
 
175
175
  const sourceLineage = lineage(edge.source, nodes)
@@ -182,10 +182,10 @@ export const makeChartLayoutPolicy = (model: ChartModel): ChartLayoutPolicy => {
182
182
  differentAt++
183
183
  }
184
184
  if (differentAt === sourceLineage.length) {
185
- return { direction: "forward", sourceSide: "EAST", targetSide: "WEST" }
185
+ return { direction: "forward", sourceSide: "EAST", targetSide: "EAST" }
186
186
  }
187
187
  if (differentAt === targetLineage.length) {
188
- return { direction: "backward", sourceSide: "WEST", targetSide: "EAST" }
188
+ return { direction: "backward", sourceSide: "WEST", targetSide: "WEST" }
189
189
  }
190
190
 
191
191
  const source = nodePolicies.get(sourceLineage[differentAt]!) ?? unreachableNode
@@ -193,9 +193,14 @@ export const makeChartLayoutPolicy = (model: ChartModel): ChartLayoutPolicy => {
193
193
  const backward = source.rank !== null && target.rank !== null
194
194
  ? target.rank < source.rank || target.rank === source.rank && target.order < source.order
195
195
  : target.order < source.order
196
+ if (nodes.get(edge.source)?.parent !== nodes.get(edge.target)?.parent) {
197
+ return backward
198
+ ? { direction: "backward", sourceSide: "WEST", targetSide: "WEST" }
199
+ : { direction: "forward", sourceSide: "EAST", targetSide: "EAST" }
200
+ }
196
201
  return backward
197
- ? { direction: "backward", sourceSide: "WEST", targetSide: "EAST" }
198
- : { direction: "forward", sourceSide: "EAST", targetSide: "WEST" }
202
+ ? { direction: "backward", sourceSide: "NORTH", targetSide: "SOUTH" }
203
+ : { direction: "forward", sourceSide: "SOUTH", targetSide: "NORTH" }
199
204
  }
200
205
 
201
206
  return {