XFlow Canvas Component

Basic Usage

After importing <XFlowGraph /> under <XFlow />, the internal component will save the canvas instance to the context of <XFlow /> for use by its children. You can quickly obtain the canvas instance in your component using the useGraphInstance hook.

<XFlow>
 ...
 <XFlowGraph />
</XFlow>

The canvas has default shortcut keys and box selection functionality.

Read-Only Canvas

Disables interaction with nodes and edges.

When readonly is set to false, if the draggable property of a node/edge is set to true, the node/edge can be moved.

<XFlowGraph readonly />

Canvas Zooming

• Minimum and maximum zoom levels for the canvas.

You can set the canvas zoom by configuring minScale and maxScale.

<XFlowGraph minScale={1} maxScale={10} />

• Zooming the canvas with the mouse wheel.

For specific zoomOptions configuration, refer to mousewheel configuration.

<XFlowGraph
    zoomable
    zoomOptions={{
      global: true,
      modifiers: ['ctrl', 'meta'],
    }}
/>

Canvas Scrolling

Enable the canvas scrolling feature.

<XFlowGraph scroller />

Canvas Panning

Enable pannable to support dragging and panning the canvas, and configure dragging options through panOptions.

<XFlowGraph 
    pannable 
    panOptions={{
        eventTypes: ['leftMouseDown'],
        modifiers: ['ctrl']
    }} 
/>

The configuration parameters for panOptions are as follows:

Dragging may conflict with other operations; in this case, you can set the modifiers parameter. After setting the modifier keys, you need to press the modifier key and click the mouse to trigger canvas dragging.

ModifierKey supports the following forms:

• alt means pressing alt.
• [alt, ctrl] means pressing either alt or ctrl.
• alt|ctrl means pressing either alt or ctrl.
• alt&ctrl means pressing both alt and ctrl simultaneously.
• alt|ctrl&shift means pressing both alt and shift or both ctrl and shift simultaneously.

eventTypes supports three forms or combinations of them:

• leftMouseDown: Dragging by pressing the left mouse button.
• rightMouseDown: Dragging by pressing the right mouse button.
• mouseWheel: Dragging using the mouse wheel.
• mouseWheelDown: Dragging by pressing the mouse wheel.

Viewport Transformation

• When centerView is set to true, the center of the canvas content will align with the center of the viewport. You can configure this with centerViewOptions.

<XFlowGraph
    centerView
    centerViewOptions={{
        padding: { left: 100 } 
    }}
    fitView
/>

The configuration parameters for centerViewOptions are as follows:

• fitView scales the canvas content to fill the viewport. You can configure this with fitView.

The configuration parameters for fitViewOptions are as follows:

Node Embedding

Drag one node into another to make it a child of the other node.

<XFlowGraph
    embedable
    embedOptions={{
        frontOnly: true,
        findParent: 'bbox',
        validate: () => true,
    }}
/>

The configuration for embedOptions is as follows:

Node Movement Range

You can restrict the movement range of nodes by configuring restrict, and specify the movement range through restrictOptions.

<XFlowGraph
    restrict
    restrictOptions={{
        bound: {
            x: 0,
            y: 0,
            width: 100,
            height: 100,
        },
    }}
/>

The restrictOptions can specify the movement range of a node. If not set, nodes cannot move outside the canvas area.

restrictOptions?: {
    bound:
      | Rectangle.RectangleLike
      | ((arg: CellView | null) => Rectangle.RectangleLike | null);
};

Connection Configuration

Configure connectionOptions to enable connection interactions. For specific configurations, refer to connection configuration.

<XFlowGraph 
    connectionOptions={{
        snap: true,
        allowBlank: false,
        allowLoop: false,
        highlight: true,
        anchor: 'center',
        router: 'orth',
        connector: 'rounded',
    }}
/>

Note: Unlike connection configuration, if you want to customize the style of newly created edges, you need to set the connectionEdgeOptions parameter instead of configuring createEdge in connectionOptions.

connectionEdgeOptions={{
    animated: true,
    draggable: false,
    selected: false,
    attrs: {
        line: {
            stroke: 'rgb(72, 203, 164)',
            strokeWidth: 2,
            targetMarker: {
                name: 'block',
                width: 14,
                height: 10,
            },
        },  
    },
    zIndex: 0,
}}

The connectionEdgeOptions parameter inherits from Edge and additionally has the properties selected, draggable, and animated.

export interface EdgeOptions extends Edge.Metadata {
  selected?: boolean;  // Whether selected
  draggable?: boolean; // Whether draggable
  animated?: boolean;  // Whether to show animation
}

Interaction Highlighting

Specify the highlight style for nodes/edges when a certain interaction is triggered.

HighlightManager.Options has two parameters, name and its corresponding args. The name has two built-in highlight types: one is stroke and the other is className.

Note: When the following highlight configurations embedHighlightOptions, nodeAvailableHighlightOptions, magnetAvailableHighlightOptions, and magnetAdsorbedHighlightOptions are not set, the defaultHighlightOptions configuration is used by default.

// stroke
<XFlowGraph
    defaultHighlightOptions={{
        name: 'stroke',
        args: {
            rx: 0,
            ry: 0,
            padding: 4,
            attrs: {
                'stroke-width': 2,
                stroke: 'red',
            },
        },
    }}
/>

// className
<XFlowGraph 
    defaultHighlightOptions={{
        name: 'className',
        args: {
            className: 'x6-highlighted'
        },
    }}
/>

API

XFlowGraph