CxJS Diagrams

TwoSegmentLine

import { TwoSegmentLine } from "cx-diagrams"

The TwoSegmentLine component connects shapes using exactly two perpendicular line segments - one horizontal and one vertical. This creates an “L-shaped” connection, useful when shapes are offset both horizontally and vertically. The direction property controls which segment comes first.

<Diagram unitSize={64} center showGrid>
    <Flow gap={1} align="center">
        <Cell>
            <Shape fill="lightgray" text="1" id="1" />
        </Cell>
        <Flow direction="down" gap={1}>
            <Cell>
                <Shape fill="lightgray" text="2" id="2" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="3" id="3" />
            </Cell>
            <Cell>
                <Shape fill="lightgray" text="4" id="4" />
            </Cell>
        </Flow>
        <Cell>
            <Shape fill="lightgray" text="5" id="5" />
        </Cell>
        <TwoSegmentLine from="1" to="2" stroke="black" direction="up">
            <Shape anchors="0 0 0 0" margin={-3} shape="circle" fill="white" stroke="blue" />
            <Shape anchors="1 1 1 1" margin={-3} shape="circle" fill="white" stroke="blue" />
        </TwoSegmentLine>
        <TwoSegmentLine from="1" to="3" stroke="black">
            <Shape anchors="0 0 0 0" margin={-3} shape="circle" fill="white" stroke="blue" />
            <Shape anchors="1 1 1 1" margin={-3} shape="circle" fill="white" stroke="blue" />
        </TwoSegmentLine>
        ...
    </Flow>
</Diagram>

Configuration

Property Description Type
direction

Direction of the first segment. Available values are up, down, left, right.

 string
from

Id of the first (start) shape.

 string
stroke

Color of the line.

 string
strokeWidth

Line thickness.

 string
to

Id of the second (end) shape.

 string
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
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