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>

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
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
ml	Left margin.	number
mr	Right margin.	number
ms	Start margin in the direction of the flow.	number
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