Rotate

import { Rotate } from "cx-diagrams"

The Rotate component rotates its children by 90-degree increments. The turns property accepts values 0-3, where each increment represents a 90° clockwise rotation (0 = 0°, 1 = 90°, 2 = 180°, 3 = 270°). This is commonly used with network diagrams to lay out repetitive parts in different directions, often in combination with FourSides.

<Diagram center showGrid>
    <Rotate turns={bind("$page.rotate")}>
        <Flow gap={1} p={0.5} align="center">
            <Rectangle stroke="red" />
            <Cell>
                <Shape fill="lightgray" text="1" id="1" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="2" id="2" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="3" id="3" />
            </Cell>
            <Flow direction="down" gap={1}>
                <Cell>
                    <Shape fill="lightgray" text="4" id="4" />
                </Cell>
                <Cell>
                    <Shape fill="lightgray" text="5" id="5" />
                </Cell>
                <Cell>
                    <Shape fill="lightgray" text="6" id="6" />
                </Cell>
            </Flow>
            <StraightLine from="1" to="2" stroke="black" />
            <StraightLine from="2" to="3" stroke="black" />
            <StraightLine from="3" to="4" stroke="black" />
            <StraightLine from="3" to="5" stroke="black" />
            <StraightLine from="3" to="6" stroke="black" />
        </Flow>
    </Rotate>
</Diagram>

0 turn(s)

Configuration

Property	Description	Type
turns	Number of rotation turns. One turn equals 90 degrees.	number
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