CxJS Diagrams

Shape

import { Shape } from "cx-diagrams"

The Shape component is used to create shapes appearing on the diagram. Shapes are usually circles, rectangles and rhombuses and can represent various things such as network devices and interfaces, departments, roles, etc. Shapes support the text property and can easily be interconnected using lines. Shapes are clickable and support context menus.

Shapes can be nested to create connection points or decorators. The anchors property positions child shapes relative to the parent using four values: "top right bottom left" (0-1 range, where 0.5 is center). For example, anchors="0.5 1 0.5 1" positions a shape at the right edge center.

<Diagram unitSize={24} center showGrid>
    <Flow direction="right" gap={2}>
        <Flow direction="down" gap={1}>
            <Cell width={4} height={2}>
                <Shape fill="lightgray" text="fill" />
            </Cell>
            <Cell width={4} height={2}>
                <Shape stroke="red" text="stroke" />
            </Cell>
            <Cell width={4} height={2}>
                <Shape 
                    fill="lightgray" 
                    text="Tooltip" 
                    tooltip="Shapes can have tooltips" 
                    id="tooltip" 
                />
            </Cell>
        </Flow>

        <Flow direction="down" gap={1}>
            <Cell width={4} height={2}>
                <Shape fill="lightgray" text="Circle" shape="circle" />
            </Cell>
            <Cell width={4} height={2}>
                <Shape stroke="red" text="Connectors" fill="white">
                    <Shape
                        anchors="0 0.5 0 0.5"
                        margin={-3}
                        shape="circle"
                        stroke="black"
                        fill="white"
                        tooltip="North"
                    />
                    <Shape
                        anchors="1 0.5 1 0.5"
                        margin={-3}
                        shape="circle"
                        stroke="black"
                        fill="white"
                        tooltip="South"
                    />
                    <Shape
                        anchors="0.5 1 0.5 1"
                        margin={-3}
                        shape="circle"
                        stroke="black"
                        fill="white"
                        tooltip="East"
                    />
                    <Shape
                        anchors="0.5 0 0.5 0"
                        margin={-3}
                        shape="circle"
                        stroke="black"
                        fill="white"
                        tooltip="West"
                    />
                </Shape>
            </Cell>
            <Cell width={4} height={2}>
                <Shape
                    fill="lightgray"
                    text="Connected"
                    id="connected"
                    tooltip="Shapes can be connected with lines"
                />
                <StraightLine from="connected" to="tooltip" stroke="black" />
            </Cell>
            <Cell width={4} height={2}>
                <Shape
                    shapeClass="fill-blue-300 stroke-blue-800"
                    shape="rhombus"
                    text="Rhombus"
                />
            </Cell>
        </Flow>

        <Flow direction="down" gap={1}>
            <Cell width={4} height={2}>
                <Shape
                    shapeClass="fill-red-300 stroke-red-800"
                    text="Tailwind CSS"
                    tooltip="Shapes can be styled using utility classes"
                />
            </Cell>
            <Cell width={4} height={2}>
                <Shape
                    shapeClass="fill-orange-300 stroke-orange-800"
                    text="Clickable"
                    onClick={() => {
                        alert('You clicked on a shape.');
                    }}
                />
            </Cell>
            <Cell width={4} height={2}>
                <Shape
                    shapeClass="fill-green-300 stroke-green-800"
                    id="green"
                    text="Context Menu"
                    onContextMenu={(e, instance) => {
                        e.preventDefault();
                        openContextMenu(
                        e,
                        <cx>
                            <Menu>
                                <a href="/components/diagram">Diagram</a>
                                <a href="/components/cell">Cell</a>
                                <a href="/components/shape">Shape</a>
                                <a href="/components/flow">Flow</a>
                            </Menu>
                        </cx>,
                        instance
                        );
                    }}
                />
                <StraightLine from="connected" to="green" stroke="black" />
            </Cell>
        </Flow>
    </Flow>

</Diagram>

Configuration

Property Description Type
fill

Color of shape fill.

 string
shape

Shape kind. Available shapes are rectangle, circle and rhombus.

 string
shapeClass

CSS class to be applied to the shape.

 string/object
shapeStyle

CSS style to be applied to the shape.

 string/object
stroke

Color of shape borders.

 string
strokeWidth

Border thickness.

 string
text

Inner text.

 string
textClass

CSS class to be applied to the inner text.

 string/object
textStyle

CSS style to be applied to the inner text.

 string/object
anchors

Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. One aligns with the bottom/right edge.

 string/number/rect
class

Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.

 string/object
items

List of child elements.

 array
layout

Define an inner layout.

 string/object
margin

Apply margin to the given boundaries.

 string/number/rect
mod

Appearance modifier. For example, mod="big" will add the CSS class .cxm-big to the block element.

 string/array
offset

Move boundaries specified by the offset.

 string/number/rect
outerLayout

Defines the outer layout which wraps the widget.

 widget
padding

Padding to be applied to the boundaries rectangle before passing to the children.

 string/number/rect
plainText

Set to true to avoid converting inner strings to templates. Default false.

 boolean
preserveWhitespace

Keep whitespace in text based children. Default is false. See also trimWhitespace.

 boolean
putInto

Used with outer layouts. Specifies the name of the content placeholder which should render the widget.

 string
style

Style object applied to the wrapper div. Used for setting the dimensions of the element.

 string/object
tooltip

Tooltip configuration.

 string/object
trimWhitespace

Remove all whitespace in text based children. Default is true. See also preserveWhitespace.

 boolean
vdomKey

Key that will be used as the key when rendering the React component.

 string
visible

Visibility of the widget. Defaults to true.

 boolean