Gate
FluxFlowGate is the diamond of a flow: the point where several lines have to agree, or where exactly one of many branches is taken. It says out loud what a Junction leaves implicit, which is why it carries its rule (and, or or xor) in the shape itself.
Place it in its own Node and wire it up like any other node. Its four points sit on the sides a connector attaches to, so lines land on the diamond rather than next to it.
TIP
Reach for a Junction when lines simply come together, and for a gate when the way they come together is part of the flow.
Props
type: 'and' | 'or' | 'xor'
The rule the gate applies to the lines meeting it.
color?: FluxColor
The tint of the diamond. Without one it is drawn in the same gray as a plain connector.
Examples
One branch only
An xor gate splits a payment into the two routes it can take. The branches leave through the top and bottom points of the diamond, so neither line has to share a corner with the other. Dropping the marker on the line that arrives keeps the diamond the only shape at that point.
<template>
<FluxFlow :padding="21">
<FluxFlowNode id="check" :x="0" :y="90">
<FluxFlowConditionCard title="Payment method"/>
</FluxFlowNode>
<FluxFlowNode id="gate" :x="330" :y="91">
<FluxFlowGate type="xor" color="warning"/>
</FluxFlowNode>
<FluxFlowNode id="card" :x="510" :y="0">
<FluxFlowActionCard title="Charge the card" icon="money-bill"/>
</FluxFlowNode>
<FluxFlowNode id="invoice" :x="510" :y="180">
<FluxFlowActionCard title="Send an invoice" icon="envelope"/>
</FluxFlowNode>
<FluxFlowConnection from="check" to="gate" marker-end="none"/>
<FluxFlowConnection from="gate" to="card" from-side="top" marker-start="none" color="warning" label="Card"/>
<FluxFlowConnection from="gate" to="invoice" from-side="bottom" marker-start="none" color="warning" label="Bank transfer"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowActionCard, FluxFlowConditionCard, FluxFlowConnection, FluxFlowGate, FluxFlowNode } from '@flux-ui/flow';
</script>Any one of them
An or gate lets three conditions feed the same action. Two of them land on the top and bottom points and the third runs straight into the left one, so the gate takes three lines without any of them crossing.
<template>
<FluxFlow :padding="21">
<FluxFlowNode id="sla" :x="0" :y="0">
<FluxFlowConditionCard title="SLA breached"/>
</FluxFlowNode>
<FluxFlowNode id="replied" :x="0" :y="120">
<FluxFlowConditionCard title="Customer replied twice"/>
</FluxFlowNode>
<FluxFlowNode id="reopened" :x="0" :y="240">
<FluxFlowConditionCard title="Ticket reopened"/>
</FluxFlowNode>
<FluxFlowNode id="gate" :x="330" :y="121">
<FluxFlowGate type="or" color="info"/>
</FluxFlowNode>
<FluxFlowNode id="notify" :x="510" :y="120">
<FluxFlowActionCard title="Notify the support lead" icon="bell"/>
</FluxFlowNode>
<FluxFlowConnection from="sla" to="gate" from-side="right" to-side="top" marker-end="none"/>
<FluxFlowConnection from="replied" to="gate" from-side="right" to-side="left" marker-end="none"/>
<FluxFlowConnection from="reopened" to="gate" from-side="right" to-side="bottom" marker-end="none"/>
<FluxFlowConnection from="gate" to="notify" marker-start="none" color="info"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowActionCard, FluxFlowConditionCard, FluxFlowConnection, FluxFlowGate, FluxFlowNode } from '@flux-ui/flow';
</script>Gates in sequence
Both conditions have to hold before an order ships, and only then does the shipping method split in two. A gate can hand off to another gate directly, with no card in between.
<template>
<FluxFlow :padding="21">
<FluxFlowNode id="paid" :x="0" :y="0">
<FluxFlowConditionCard title="Invoice is paid"/>
</FluxFlowNode>
<FluxFlowNode id="stock" :x="0" :y="180">
<FluxFlowConditionCard title="Stock is reserved"/>
</FluxFlowNode>
<FluxFlowNode id="both" :x="330" :y="91">
<FluxFlowGate type="and" color="primary"/>
</FluxFlowNode>
<FluxFlowNode id="method" :x="480" :y="91">
<FluxFlowGate type="xor" color="warning"/>
</FluxFlowNode>
<FluxFlowNode id="courier" :x="660" :y="0">
<FluxFlowActionCard title="Book a courier" icon="truck"/>
</FluxFlowNode>
<FluxFlowNode id="batch" :x="660" :y="180">
<FluxFlowActionCard title="Add to the daily batch" icon="box"/>
</FluxFlowNode>
<FluxFlowConnection from="paid" to="both" from-side="right" to-side="top" marker-end="none"/>
<FluxFlowConnection from="stock" to="both" from-side="right" to-side="bottom" marker-end="none"/>
<FluxFlowConnection from="both" to="method" marker-start="none" marker-end="none" color="primary"/>
<FluxFlowConnection from="method" to="courier" from-side="top" marker-start="none" color="warning" label="Express"/>
<FluxFlowConnection from="method" to="batch" from-side="bottom" marker-start="none" color="warning" label="Standard"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowActionCard, FluxFlowConditionCard, FluxFlowConnection, FluxFlowGate, FluxFlowNode } from '@flux-ui/flow';
</script>Without a tint
Left without a color, the diamond is drawn in the same gray as a plain connector. Use it when the gate is only wiring and the steps around it carry the emphasis.
<template>
<FluxFlow :padding="21">
<FluxFlowNode id="draft" :x="0" :y="54">
<FluxFlowPill icon="pen" label="Article in review"/>
</FluxFlowNode>
<FluxFlowNode id="gate" :x="270" :y="46">
<FluxFlowGate type="xor"/>
</FluxFlowNode>
<FluxFlowNode id="publish" :x="420" :y="0">
<FluxFlowPill icon="paper-plane" label="Publish"/>
</FluxFlowNode>
<FluxFlowNode id="revise" :x="420" :y="108">
<FluxFlowPill icon="rotate-left" label="Back to the author"/>
</FluxFlowNode>
<FluxFlowConnection from="draft" to="gate" marker-end="none"/>
<FluxFlowConnection from="gate" to="publish" from-side="top" marker-start="none"/>
<FluxFlowConnection from="gate" to="revise" from-side="bottom" marker-start="none"/>
</FluxFlow>
</template>
<script
setup
lang="ts">
import { FluxFlow, FluxFlowConnection, FluxFlowGate, FluxFlowNode, FluxFlowPill } from '@flux-ui/flow';
</script>