Connection
FluxFlowConnection draws a line between two nodes. It references them by from and to, resolves their positions from the flow, and routes a path between the nearest edges. Because connectors are declared separately from the nodes, all of a flow's wiring lives in one place.
By default the connector picks the most natural pair of sides based on where the nodes sit: stacked nodes connect bottom to top, side by side nodes connect right to left. Override from-side / to-side when you need an explicit route, for example the two branches out of a condition.
Props
from: string
The id of the source node.
to: string
The id of the target node.
fromSide?: 'top' | 'right' | 'bottom' | 'left'
The side of the source node the connector leaves from. Defaults to the most natural side based on the relative position of the nodes.
toSide?: 'top' | 'right' | 'bottom' | 'left'
The side of the target node the connector enters. Defaults to the most natural side based on the relative position of the nodes.
type?: 'smoothstep' | 'bezier' | 'straight'
The shape of the connector.
Default: smoothstep
color?: FluxColor | string
The color of the base line. Accepts a FluxColor or any CSS color.
label?: string
A label rendered in a badge at the midpoint of the connector.
icon?: FluxIconName
An icon rendered in a badge at the midpoint of the connector, breaking the line. Combines with a label.
dashed?: boolean
Draws the base line dashed instead of solid.
dotted?: boolean
Draws the base line dotted instead of solid.
markers?: 'both' | 'from' | 'to' | 'none'
Which endpoint port circles to show. Markers are on by default; opt out per side.
Default: both
progressColor?: FluxColor | string
The color of the progress overlay. Accepts a FluxColor or any CSS color.
Default: primary
progressValue?: number
How much of the connector is filled with the progress color, from 0 to 1. Set it to visualize a running flow.
Examples
Types
Three connector shapes: smoothstep (the default, orthogonal with rounded corners), bezier and straight.
<template>
<FluxFlow :padding="45">
<FluxFlowNode id="smooth-top" :x="0" :y="0">
<FluxFlowCard title="Smoothstep"/>
</FluxFlowNode>
<FluxFlowNode id="smooth-bottom" :x="120" :y="270">
<FluxFlowCard title="Target"/>
</FluxFlowNode>
<FluxFlowNode id="bezier-top" :x="450" :y="0">
<FluxFlowCard title="Bezier"/>
</FluxFlowNode>
<FluxFlowNode id="bezier-bottom" :x="570" :y="270">
<FluxFlowCard title="Target"/>
</FluxFlowNode>
<FluxFlowNode id="straight-top" :x="900" :y="0">
<FluxFlowCard title="Straight"/>
</FluxFlowNode>
<FluxFlowNode id="straight-bottom" :x="1020" :y="270">
<FluxFlowCard title="Target"/>
</FluxFlowNode>
<FluxFlowConnection from="smooth-top" to="smooth-bottom" type="smoothstep"/>
<FluxFlowConnection from="bezier-top" to="bezier-bottom" type="bezier"/>
<FluxFlowConnection from="straight-top" to="straight-bottom" type="straight"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowCard, FluxFlowConnection, FluxFlowNode } from '@flux-ui/flow';
</script>Progress
A connector with a progress-value fills from the source towards the target, which is useful for visualizing a running flow. The fill animates as the value changes and respects reduced motion.
<template>
<FluxFlow :padding="45">
<FluxFlowNode id="extract" :x="0" :y="0">
<FluxFlowActionCard title="Extract" label="Running" icon="gauge" color="primary" active/>
</FluxFlowNode>
<FluxFlowNode id="load" :x="0" :y="240">
<FluxFlowActionCard title="Load"/>
</FluxFlowNode>
<FluxFlowConnection from="extract" to="load" progress-color="primary" :progress-value="progress"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowActionCard, FluxFlowConnection, FluxFlowNode } from '@flux-ui/flow';
import { onBeforeUnmount, onMounted, ref } from 'vue';
const progress = ref(0);
let frame = 0;
onMounted(() => {
const start = performance.now();
const tick = (now: number) => {
progress.value = ((now - start) / 2400) % 1;
frame = requestAnimationFrame(tick);
};
frame = requestAnimationFrame(tick);
});
onBeforeUnmount(() => cancelAnimationFrame(frame));
</script>Colors
Give a connector a color, a FluxColor or any CSS color, to categorize it.
<template>
<FluxFlow :padding="45">
<FluxFlowNode id="dispatch" :x="330" :y="0">
<FluxFlowCard title="Dispatch"/>
</FluxFlowNode>
<FluxFlowNode id="email" :x="0" :y="280">
<FluxFlowCard title="Email"/>
</FluxFlowNode>
<FluxFlowNode id="sms" :x="330" :y="280">
<FluxFlowCard title="SMS"/>
</FluxFlowNode>
<FluxFlowNode id="push" :x="660" :y="280">
<FluxFlowCard title="Push"/>
</FluxFlowNode>
<FluxFlowConnection from="dispatch" to="email" color="info"/>
<FluxFlowConnection from="dispatch" to="sms" color="success"/>
<FluxFlowConnection from="dispatch" to="push" color="danger"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowCard, FluxFlowConnection, FluxFlowNode } from '@flux-ui/flow';
</script>Explicit sides
Override from-side and to-side to route a connector out of a specific edge, for example the two branches of a condition.
<template>
<FluxFlow :padding="45">
<FluxFlowNode id="check" :x="300" :y="90">
<FluxFlowConditionCard title="Is Valid?"/>
</FluxFlowNode>
<FluxFlowNode id="process" :x="720" :y="90">
<FluxFlowActionCard title="Process"/>
</FluxFlowNode>
<FluxFlowNode id="reject" :x="300" :y="390">
<FluxFlowActionCard title="Reject" label="Action" icon="stopwatch" color="danger"/>
</FluxFlowNode>
<FluxFlowConnection from="check" to="process" from-side="right" to-side="left" label="yes"/>
<FluxFlowConnection from="check" to="reject" from-side="bottom" to-side="top" label="no"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowActionCard, FluxFlowConditionCard, FluxFlowConnection, FluxFlowNode } from '@flux-ui/flow';
</script>Line styles
Connectors are solid by default; set dashed or dotted for other styles. Every connector shows port markers at its endpoints, which you can opt out of per side with markers.
<template>
<FluxFlow :padding="45">
<FluxFlowNode id="solid-top" :x="0" :y="0">
<FluxFlowCard title="Solid"/>
</FluxFlowNode>
<FluxFlowNode id="solid-bottom" :x="0" :y="240">
<FluxFlowCard title="Target"/>
</FluxFlowNode>
<FluxFlowNode id="dashed-top" :x="330" :y="0">
<FluxFlowCard title="Dashed"/>
</FluxFlowNode>
<FluxFlowNode id="dashed-bottom" :x="330" :y="240">
<FluxFlowCard title="Target"/>
</FluxFlowNode>
<FluxFlowNode id="dotted-top" :x="660" :y="0">
<FluxFlowCard title="Dotted"/>
</FluxFlowNode>
<FluxFlowNode id="dotted-bottom" :x="660" :y="240">
<FluxFlowCard title="Target"/>
</FluxFlowNode>
<FluxFlowConnection from="solid-top" to="solid-bottom"/>
<FluxFlowConnection from="dashed-top" to="dashed-bottom" dashed/>
<FluxFlowConnection from="dotted-top" to="dotted-bottom" dotted/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowCard, FluxFlowConnection, FluxFlowNode } from '@flux-ui/flow';
</script>