Flow

import { Flow } from "cx-diagrams"

The Flow component is used to arrange cells into directional layouts called flow. The direction of the flow is controlled by the direction property. Distance between elements is controlled by the assigned gap, or by individual margins set on the cell components. Besides fixed margins (mt, mr, mb and ml), you can use start (ms) and end margins (me) to distance elements in the direction of the flow which will work nicely if you introduce rotation.

Please note the SVG elements such as Rectangle do not affect the flow. Only Cell elements affect the flow.

<Diagram center showGrid>
    <Flow direction="right" gap={1} align="center">
        <Flow gap={0.5} p={0.5}>
            <Rectangle stroke="red">
                <Text 
                    anchors={0} 
                    dy="-5px" 
                    value="right" 
                    fill="currentColor" 
                    style="font-size: 12px" 
                />
            </Rectangle>
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>
        <Flow direction="down" gap={0.5} p={0.5}>
            <Rectangle stroke="red">
                <Text 
                    anchors={0} 
                    dy="-5px" 
                    value="down" 
                    fill="currentColor" 
                    style="font-size: 12px" 
                />
            </Rectangle>
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>

        <Flow direction="left" gap={0.5} p={0.5}>
            <Rectangle stroke="red">
                <Text
                    anchors={0}
                    dy="-5px"
                    value="left"
                    fill="currentColor"
                    style="font-size: 12px"
                />
            </Rectangle>
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>

        <Flow direction="up" gap={0.5} p={0.5}>
            <Rectangle stroke="red">
                <Text
                    anchors={0}
                    dy="-5px"
                    value="up"
                    fill="currentColor"
                    style="font-size: 12px"
                />
            </Rectangle>
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>
    </Flow>

</Diagram>

Grow & Auto Margins

Cells and flows support grow, msAuto, and meAuto properties for distributing free space within a flow.

grow — the element expands to fill available space in the flow direction
msAuto — automatically adds start margin to consume free space (pushes element toward the end)
meAuto — automatically adds end margin to consume free space (pushes element toward the start)
msAuto + meAuto — centers the element

Grow items are filled first. Remaining free space is then distributed to auto margins. The parent flow must be larger than its content for these to take effect (e.g. via selfAlign="stretch").

<Flow direction="down" gap={1}>
    {/* Row 1: 3 cells establish reference width */}
    <Flow direction="right" gap={1} p={0.5}>
        <Cell w={2}><Shape fill="#e0e7ff" text="A" /></Cell>
        <Cell w={2}><Shape fill="#e0e7ff" text="B" /></Cell>
        <Cell w={2}><Shape fill="#e0e7ff" text="C" /></Cell>
    </Flow>
    {/* grow: expands to full width */}
    <Flow direction="right" p={0.5} selfAlign="stretch">
        <Cell w={2} grow><Shape fill="#bbf7d0" text="D (grow)" /></Cell>
    </Flow>
    {/* 2x grow: each gets half */}
    <Flow direction="right" gap={1} p={0.5} selfAlign="stretch">
        <Cell w={2} grow><Shape fill="#bbf7d0" text="E (grow)" /></Cell>
        <Cell w={2} grow><Shape fill="#bbf7d0" text="F (grow)" /></Cell>
    </Flow>
    {/* msAuto + meAuto: centered */}
    <Flow direction="right" p={0.5} selfAlign="stretch">
        <Cell w={2} msAuto meAuto><Shape fill="#fef08a" text="G" /></Cell>
    </Flow>
    {/* msAuto: pushed to end */}
    <Flow direction="right" p={0.5} selfAlign="stretch">
        <Cell w={2} msAuto><Shape fill="#fed7aa" text="H" /></Cell>
    </Flow>
    {/* meAuto: stays at start */}
    <Flow direction="right" p={0.5} selfAlign="stretch">
        <Cell w={2} meAuto><Shape fill="#fed7aa" text="I" /></Cell>
    </Flow>
    {/* fixed + grow */}
    <Flow direction="right" gap={1} p={0.5} selfAlign="stretch">
        <Cell w={1}><Shape fill="#e0e7ff" text="J" /></Cell>
        <Cell w={2} grow><Shape fill="#bbf7d0" text="K (grow)" /></Cell>
    </Flow>
</Flow>

Configuration

Property	Description	Type
align	Item alignment. Supported values are `start` and `center`.	string
direction	Available directions are `left`, `right`, `up` and `down`. Default value is `right`.	string
gap	Inner distance between the child cells.	number
grow	If set, the element will grow to fill available space in the flow direction.	boolean
justify	Item justification. The only supported value right now is `space-between`.	string
margin	Margin around the cell.	number
mb	Bottom margin.	number
me	End margin in the direction of the flow.	number
meAuto	If set, the end margin will be automatically calculated to fill available space.	boolean
ml	Left margin.	number
mr	Right margin.	number
ms	Start margin in the direction of the flow.	number
msAuto	If set, the start margin will be automatically calculated to fill available space.	boolean
mt	Top margin.	number
mx	Horizontal margin.	number
my	Vertical margin.	number
padding	Padding.	number
pb	Bottom padding.	number
pl	Left padding.	number
pr	Right padding.	number
pt	Top padding.	number
px	Horizontal padding.	number
py	Vertical padding.	number
selfAlign	Self alignment. The only supported value right now is `stretch`.	string