Diagram

import { Diagram } from "cx-diagrams"

The Diagram component is used to mark the area of the diagram and provide zooming and panning functions. It’s required that all diagrams use this component as a top-level parent element.

<Svg class="w-auto h-full bg-white">
    <Diagram
        unitSize={32}
        showGrid
        zoom={bind("$page.view.zoom")}
        offsetX={bind("$page.view.offsetX")}
        offsetY={bind("$page.view.offsetY")}
        center
    >
        <Flow gap={1}>
            <Cell width={4} height={2}>
                <Shape stroke="red" fill="white" text="Red" />
            </Cell>
            <Cell width={4} height={2}>
                <Shape stroke="blue" fill="white" text="Blue" />
            </Cell>
        </Flow>
    </Diagram>
</Svg>
<div
    class="absolute border bottom-2 left-2 bg-white text-[10px] uppercase p-1"
    text={tpl("Zoom: {$page.view.zoom:p;0} Center ({$page.view.offsetX:n;0}, {$page.view.offsetY:n;0})")}
/>

Zoom: 100% Center (0, 0)

Configuration

Property	Description	Type
center	Set to `true` to center the content both horizontally and vertically.	boolean
offsetX	Horizontal offset (pan).	number
offsetY	Vertical offset (pan).	number
zoom	Current zoom level. Default value is 1.	number
centerX	Set to `true` to center the content horizontally.	boolean
centerY	Set to `true` to center the content vertically.	boolean
fixed	Set to `true` to disable zooming and panning.	boolean
showGrid	Set to `true` to display the grid.	boolean
unitSize	Size of the grid unit in pixels. Default is 32.	number