@typeonce/effect-machine-devtools 0.27.0 → 0.27.1

package/src/internal/browser/chart-renderer.ts

@@ -340,6 +340,7 @@ const render = (
   const transitionElements = new Map<string, Array<Element>>()
   const edgeElements = new Map<string, Array<Element>>()
   const transitionControls = new Map<string, Array<HTMLButtonElement>>()
+  const parentByState = new Map(layout.nodes.map(({ node }) => [node.path, node.parent]))
   const chartEdges = new Map(
     layout.edges.flatMap((laidOut) => laidOut.kind === "transition" ? [[laidOut.edge.id, laidOut.edge] as const] : [])
   )
@@ -429,13 +430,15 @@ const render = (
   }
 
   for (const laidOut of layout.edges) {
+    const parentChild = laidOut.kind === "transition" && laidOut.edge.target !== null &&
+      parentByState.get(laidOut.edge.target) === laidOut.edge.source
     const group = svgElement(
       "g",
       `chart-edge-group chart-edge-${laidOut.kind}${
         laidOut.kind === "transition"
           ? ` chart-transition-${laidOut.edge.kind} chart-edge-trigger-${laidOut.edge.trigger.type}${
             laidOut.edge.activityKind === null ? "" : ` chart-edge-activity-${laidOut.edge.activityKind}`
-          }`
+          }${parentChild ? " chart-edge-parent-child" : ""}`
           : ""
       }`
     )
@@ -448,6 +451,16 @@ const render = (
     const hit = svgElement("path", "chart-edge-hit")
     hit.setAttribute("d", route)
     group.append(casing, visible)
+    if (parentChild) {
+      const origin = laidOut.points[0]
+      if (origin !== undefined) {
+        const sourceAnchor = svgElement("circle", "chart-edge-parent-origin")
+        sourceAnchor.setAttribute("cx", String(origin.x))
+        sourceAnchor.setAttribute("cy", String(origin.y))
+        sourceAnchor.setAttribute("r", "4")
+        group.append(sourceAnchor)
+      }
+    }
     if (laidOut.kind === "transition") {
       const cue = chartDirectionCue(laidOut.points)
       if (cue !== null) {
@@ -467,10 +480,11 @@ const render = (
       "button",
       `chart-edge-label chart-edge-label-${laidOut.edge.trigger.type}${
         laidOut.edge.activityKind === null ? "" : ` chart-edge-activity-${laidOut.edge.activityKind}`
-      }`,
+      }${parentChild ? " chart-edge-label-parent-child" : ""}`,
       laidOut.edge.label
     )
     label.type = "button"
+    if (parentChild) label.title = "Transition declared by the parent state"
     label.dataset.transitionId = laidOut.edge.transitionId
     position(label, {
       x: laidOut.label.x - laidOut.labelWidth / 2,

package/src/internal/browser/hierarchy-routing-example.ts

@@ -0,0 +1,91 @@
+import { Machine } from "@typeonce/effect-machine"
+import { Effect, Schema } from "effect"
+
+const ReviewState = Schema.TaggedUnion({
+  Review: { title: Schema.String },
+  ReviewFailed: { message: Schema.String },
+  Complete: { slug: Schema.String }
+})
+
+const ReviewStates = Machine.states({
+  Workflow: {
+    initial: "Review",
+    states: {
+      Review: {
+        schema: ReviewState.cases.Review,
+        initial: "Form",
+        states: {
+          Form: {},
+          Failed: ReviewState.cases.ReviewFailed
+        }
+      },
+      Saving: {},
+      Publishing: {},
+      Complete: ReviewState.cases.Complete
+    }
+  }
+})
+
+const ReviewEvents = Machine.events(
+  Schema.TaggedUnion({
+    Submit: { route: Schema.Literals(["save", "invalid"]) }
+  })
+)
+
+const saveReview: Effect.Effect<string, string> = Effect.succeed("deterministic-chart")
+const publishReview = Effect.succeed("deterministic-chart")
+
+export const hierarchyRoutingMachine = Machine.make({
+  id: "hierarchy-routing",
+  states: ReviewStates.states,
+  events: ReviewEvents,
+  initial: (to) =>
+    to.Workflow.initial.resolve(({ target }) =>
+      target.from((workflow) =>
+        workflow.Review.from({ title: "A deterministic chart" }, (review) => review.Form.from())
+      )
+    )
+}).handle({
+  Workflow: {
+    states: {
+      Review: {
+        on: {
+          Submit: (to) =>
+            to.branches({
+              save: {
+                title: "Save the review",
+                target: to.branch.Workflow.Saving()
+              },
+              invalid: {
+                title: "Show validation failure",
+                target: to.local.Failed()
+              }
+            }).resolve(({ event, select }) =>
+              event.route === "save"
+                ? select.save.from()
+                : select.invalid.from({ message: "Add a title before continuing." })
+            )
+        },
+        states: {
+          Form: {},
+          Failed: {}
+        }
+      },
+      Saving: {
+        invoke: (from) =>
+          from.effect("save-review", () => saveReview).onDone((to) => to.branch.Workflow.Publishing()).onFailure((to) =>
+            to.branch.Workflow.Review.Failed().resolve(({ target }) =>
+              target.from({ message: "The review could not be saved." })
+            )
+          )
+      },
+      Publishing: {
+        invoke: (from) =>
+          from.effect("publish-review", () => publishReview).onDone((to) =>
+            to.branch.Workflow.Complete().resolve(({ output, target }) => target.from({ slug: output }))
+          )
+      },
+      Complete: {}
+    }
+  }
+})

package/src/internal/browser/styles.css

@@ -680,6 +680,13 @@ button {
   fill: none;
 }
 
+.chart-edge-parent-origin {
+  fill: #101318;
+  stroke: #89929e;
+  stroke-width: 1.8;
+  vector-effect: non-scaling-stroke;
+}
+
 .chart-edge-casing {
   stroke: #0b0c0e;
   stroke-width: 5.5;
@@ -729,6 +736,23 @@ button {
   user-select: none;
 }
 
+.chart-edge-group.chart-edge-parent-child .chart-edge-line,
+.chart-edge-group.chart-edge-parent-child .chart-edge-direction,
+.chart-edge-group.chart-edge-parent-child .chart-edge-parent-origin {
+  stroke: #9187a7;
+}
+
+.chart-edge-group.chart-edge-parent-child .chart-edge-parent-origin {
+  fill: #1b1820;
+}
+
+.chart-edge-label-parent-child {
+  border-color: #4d465a;
+  color: #aea5c1;
+  background: #17151b;
+  box-shadow: inset 2px 0 #6f6681;
+}
+
 .chart-edge-label:not(:disabled):hover,
 .chart-edge-label:focus-visible,
 .chart-edge-group.is-hovered + .chart-edge-label {
@@ -744,7 +768,8 @@ button {
 }
 
 .chart-edge-group.is-hovered .chart-edge-line,
-.chart-edge-group.is-hovered .chart-edge-direction {
+.chart-edge-group.is-hovered .chart-edge-direction,
+.chart-edge-group.is-hovered .chart-edge-parent-origin {
   stroke: #7c9ed2;
   stroke-width: 1.8;
 }
@@ -774,7 +799,12 @@ button {
 .chart-edge-group.chart-edge-activity-effect .chart-edge-direction,
 .chart-edge-group.chart-edge-activity-timer .chart-edge-direction,
 .chart-edge-group.chart-edge-activity-stream .chart-edge-direction,
-.chart-edge-group.chart-edge-activity-machine .chart-edge-direction {
+.chart-edge-group.chart-edge-activity-machine .chart-edge-direction,
+.chart-edge-group.chart-edge-activity-process .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-effect .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-timer .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-stream .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-machine .chart-edge-parent-origin {
   stroke: var(--chart-activity-color);
 }
 
@@ -789,19 +819,22 @@ button {
 }
 
 .chart-edge-group.is-incoming .chart-edge-line,
-.chart-edge-group.is-incoming .chart-edge-direction {
+.chart-edge-group.is-incoming .chart-edge-direction,
+.chart-edge-group.is-incoming .chart-edge-parent-origin {
   stroke: #ed6a70;
   stroke-width: 2;
 }
 
 .chart-edge-group.is-outgoing .chart-edge-line,
-.chart-edge-group.is-outgoing .chart-edge-direction {
+.chart-edge-group.is-outgoing .chart-edge-direction,
+.chart-edge-group.is-outgoing .chart-edge-parent-origin {
   stroke: #6eb6dc;
   stroke-width: 2;
 }
 
 .chart-edge-group.is-selected .chart-edge-line,
-.chart-edge-group.is-selected .chart-edge-direction {
+.chart-edge-group.is-selected .chart-edge-direction,
+.chart-edge-group.is-selected .chart-edge-parent-origin {
   stroke: #8ab5ff;
   stroke-width: 2.5;
 }