machines-ui
flow

FlowNode

A flow node in two looks: `frame`, our dashed character frame, and `card`, the rounded tinted card of the flow editor. Both take the shared props and show every value; the frame also takes its own dash, movement and corner props, which a card cannot be given. A header, a body, connection ports on any side, and a status with its own colour. It needs no canvas, so it works on any page; a canvas can place it and link it to others.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { FlowNode } from '@fractaldesign/machines-ui';

Preview

[ CORE ]
Done type
Core Template

Triggered when scaffold begins.

<FlowNode title="CORE" badge="type" status="done">
  <strong>Core Template</strong>
  <p>Triggered when scaffold begins.</p>
</FlowNode>
[ CORE ]
Running
Core Template

Triggered when scaffold begins.

<FlowNode title="CORE" status="running">…</FlowNode>
[ CORE ]
Core Template

Triggered when scaffold begins.

<FlowNode title="CORE" selected>…</FlowNode>
[ CORE ]
Core Template

Triggered when scaffold begins.

<FlowNode title="CORE" input="left" outputs={[{ id: 'out', side: 'right' }]}>…</FlowNode>
[ CORE ]
Core Template

Triggered when scaffold begins.

<FlowNode title="CORE" motion="scan" dash="dot" corner="◆" cornerBlink speed={3}>…</FlowNode>
CORE Running type
Core Template

Triggered when scaffold begins.

<FlowNode title="CORE" look="card" status="running" badge="type" accent="#9875ff">…</FlowNode>

Props

PropTypeDefaultDescription
title* string —Caption of the node: on the top edge as `[ TITLE ]` in the frame look, the header label in the card look.
look 'frame' | 'card'
framecard
D.lookDraw the dashed character frame. This is the default.
status Status D.statusWhere the node is in a run. `running` animates it; `done`, `warning` and `error` colour the status from the shared `--success`, `--warning` and `--danger` tokens. Default 'idle'.
statusLabel* string | false —Text shown for the status. Defaults to the status's own word; any text works, and `false` hides it.
selected boolean D.selectedLights the node up as the current selection: its corners and ports are at full strength, where an unselected node dims them (unless it is running), and the card gets a stronger border. Default false.
badge* string —Short tag at the right of the node header, such as `type` or `IF`. Any text works.
input PortSide | false D.inputThe side the input port is on, or `false` for none. Default 'top'.
outputs NodePort[] [...D.outputs]The output ports and the side each leaves from; ports sharing a side are spread evenly along it. Default one `out` port on the bottom.
pad Pad D.padInner padding of the node. Default 'md'.
accent* string —Colour of the node: its frame corners, title and ports, or its card border, tint, header and ports. Any CSS colour. Defaults to `--graph-accent`.
onportdown* (port: 'in' | PortId, event: PointerEvent) => void —Called when a port is pressed with `in` for the input or the output's id; use it to start a link from a canvas.
class string ''
dash
frame only
Dash —Dash rhythm of the frame's border. Default 'token'.
motion
frame only
Motion —How the border moves: `march`, `reverse`, `pulse`, `scan` or `draw` (on hover). Left unset, a running node marches and any other node is still; `none` holds a running node still too.
speed
frame only
number —Seconds per motion cycle. Defaults per motion (march 0.7, pulse 2, scan 3).
easing
frame only
Easing —Curve the motion runs on: a name from `EASINGS` or any CSS timing function.
pauseOnHover
frame only
boolean —Pause the motion while the node is hovered. Default false.
cornerBlink
frame only
boolean —Blink the corner glyphs. Left unset, a selected node blinks.
corner
frame only
string —Character drawn at each corner of the frame. Default "+".

API

  • snippet icon Icon drawn at the start of the header.
  • snippet children Content rendered inside the component.
  • class forwarded to the outer element
  • a11y honours prefers-reduced-motion

Types

NameKindDescription
FlowNodeBaseinterfaceThe props both looks take.
FlowNodeFrameOnlyinterfaceThe props only the frame look takes: its dashed border, how that border moves, and its corner glyphs.
FlowFrameNodePropsinterfaceA node drawn as the dashed character frame: the shared props plus the frame's own.
FlowCardNodePropsinterfaceA node drawn as the rounded tinted card of the flow editor: the shared props only.
FlowNodePropstypeA node's props: what you may set depends on the look. A card takes none of the frame-only ones.
FlowFrameNodeProps | FlowCardNodeProps

Theming

CSS custom properties this component reads.

  • --accent
  • --accent-body
  • --at
  • --edge
  • --font-sans
  • --graph-accent
  • --status
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/flow/FlowNode.svelte

machines-ui