Flow canvas: mark streaming edges with a marching dash

A port with `stream` set publishes repeatedly during one execution, and
until now nothing on the canvas said so. `deriveEdges` carries the flag
from the producing `MessageSpec` onto the edge, `LiveEdge` turns it into
an `edge-stream` class, and the class draws a dashed stroke whose offset
marches toward the target. The pulse still lands on top: both animations
share one declaration when a value arrives on a streaming edge.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HTsT1isxUjw5gtkJk8WhuA
This commit is contained in:
2026-08-20 09:14:44 +02:00
co-authored by Claude Opus 5
parent 86e02b49a3
commit a00b4eaec2
3 changed files with 37 additions and 5 deletions
+9 -3
View File
@@ -29,6 +29,8 @@ export type FlowEdgeData = {
flow: string
/** Whose publication this edge represents, so only it pulses. */
producerId: string
/** The producing port publishes repeatedly during one run, not once at its end. */
stream?: boolean
[key: string]: unknown
}
@@ -40,14 +42,17 @@ export type FlowEdgeData = {
* message therefore draw two edges converging on the same input.
*/
export function deriveEdges(nodes: NodeDef_Input[], flow: string): Edge[] {
const producers = new Map<string, { node: string; port: string }[]>()
const producers = new Map<
string,
{ node: string; port: string; stream?: boolean }[]
>()
for (const node of nodes) {
for (const spec of node.provides ?? []) {
const message = qualify(flow, spec.name ?? "")
if (!message) continue
const list = producers.get(message) ?? []
list.push({ node: node.id, port: portOf(spec) })
list.push({ node: node.id, port: portOf(spec), stream: spec.stream })
producers.set(message, list)
}
}
@@ -71,6 +76,7 @@ export function deriveEdges(nodes: NodeDef_Input[], flow: string): Edge[] {
message,
flow,
producerId: `${flow}.${producer.node}`,
stream: producer.stream,
} satisfies FlowEdgeData,
})
}
@@ -90,7 +96,7 @@ export function bindingsKey(nodes: NodeDef_Input[]): string {
`${node.id}|${(node.requires ?? [])
.map((s) => `${portOf(s)}=${s.name ?? ""}`)
.join(",")}|${(node.provides ?? [])
.map((s) => `${portOf(s)}=${s.name ?? ""}`)
.map((s) => `${portOf(s)}=${s.name ?? ""}${s.stream ? "*" : ""}`)
.join(",")}`,
)
.join(";")