FourSides

import { FourSides } from "cx-diagrams"

The FourSides component is used to lay out diagram components into four directions. This is commonly used in combination with Rotate to assemble the parts into a single structure.

<Diagram center showGrid>
    <FourSides
        slots={computable('$page.order', (order) => {
            switch (order) {
                case 0:
                    return ['center', 'right', 'down', 'left', 'up'];
                case 1:
                    return ['center', 'down', 'left', 'up', 'right'];
                case 2:
                    return ['center', 'left', 'up', 'right', 'down'];
                case 3:
                    return ['center', 'up', 'right', 'down', 'left'];
            }
        })}
    >
        <Cell width={2} height={2}>
            <Shape text="center" fill="lightgreen" />
        </Cell>
        <Flow gap={0.5} p={0.5} align="center">
            <Rectangle stroke="red" />
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell w={2} h={2}>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>
        <Flow direction="down" gap={0.5} p={0.5} align="center">
            <Rectangle stroke="red" />
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell w={2} h={2}>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>

        <Flow direction="left" gap={0.5} p={0.5} align="center">
            <Rectangle stroke="red" />
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell w={2} h={2}>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>

        <Flow direction="up" gap={0.5} p={0.5} align="center">
            <Rectangle stroke="red" />
            <Cell>
                <Shape fill="lightgray" text="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" />
            </Cell>
            <Cell w={2} h={2}>
                <Shape fill="lightgray" text="3" />
            </Cell>
        </Flow>
    </FourSides>

</Diagram>

Setup:

Configuration

Property	Description	Type
gap	Inner distance between the elements.	number
slots	Order of slots. Default is `['center', 'right', 'down', 'left', 'up']`.	array
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