One of the most appealing aspects of X6 for developers is its comprehensive interaction customization capabilities, which allow us to achieve a wide range of complex effects. Below are some common interactive behaviors.

Connecting

By configuring connecting, you can achieve rich connection interactions. The usage is as follows:

const graph = new Graph({
  ...,
  connecting: {
    snap: true,
  }
})

Below are the configurations supported by connecting.

snap

snap: boolean | { radius: number, anchor: 'center' | 'bbox' }

When snap is set to true or false, it represents enabling or disabling automatic snapping during the connection process. When enabled, a distance of 50px from the target will trigger the snap. You can customize the snap radius by configuring the radius property.

const graph = new Graph({
  connecting: {
    snap: true,
  },
})
// Equivalent to
const graph = new Graph({
  connecting: {
    snap: {
      radius: 50,
    },
  },
})

When calculating the distance to determine if it snaps to a node, it defaults to the center of the node. You can change this to calculate the distance based on the bounding box of the node by configuring anchor to bbox.

allowBlank

allowBlank: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)

Whether to allow connections to blank areas of the canvas. The default is true, and it also supports dynamic adjustment through a function.

const graph = new Graph({
  connecting: {
    allowBlank() {
      // Return true or false based on conditions
      return true
    },
  },
})

allowLoop

allowLoop: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)

Whether to allow the creation of loop connections, where the starting and ending nodes are the same. The default is true.

allowNode

allowNode: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)

Whether to allow edges to connect to nodes (not connection ports on nodes). The default is true.

allowEdge

allowEdge: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)

Whether to allow edges to connect to other edges. The default is true.

allowPort

allowPort: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)

Whether to allow edges to connect to connection ports. The default is true.

allowMulti

allowMulti: boolean |
  'withPort' |
  ((this: Graph, args: ValidateConnectionArgs) => boolean)

Whether to allow multiple edges to be created between the same starting and ending nodes. The default is true. When set to false, only one edge is allowed between the starting and ending nodes. When set to 'withPort', only one edge is allowed between the same connection ports of the starting and ending nodes (i.e., multiple edges can be created between the starting and ending nodes, but they must connect at different ports).

highlight

highlight: boolean

Whether to highlight all available connection ports or nodes while dragging an edge. The default value is false. This is generally used in conjunction with highlightinghighlighting

anchor

anchor: NodeAnchorOptions

When connecting to a node, the anchor point of the connected node is specified through anchor , with the default value being center.

sourceAnchor

sourceAnchor?: NodeAnchorOptions

When connecting to a node, the anchor point of the source node is specified through sourceAnchor.

targetAnchor

targetAnchor?: NodeAnchorOptions

When connecting to a node, the anchor point of the target node is specified through targetAnchor.

edgeAnchor

edgeAnchor: EdgeAnchorOptions

When connecting to an edge, the anchor point of the connected edge is specified through edgeAnchor , with the default value being ratio.

sourceEdgeAnchor

sourceEdgeAnchor?: EdgeAnchorOptions

When connecting to an edge, the anchor point of the source edge is specified through sourceEdgeAnchor.

targetEdgeAnchor

targetEdgeAnchor?: EdgeAnchorOptions

When connecting to an edge, the anchor point of the target edge is specified through targetEdgeAnchor.

connectionPoint

connectionPoint: ConnectionPointOptions

Specifies the connection point, with the default value being boundary.

sourceConnectionPoint

sourceConnectionPoint?: ConnectionPointOptions

The connection point of the source.

targetConnectionPoint

targetConnectionPoint?: ConnectionPointOptions

The connection point of the target.

router

router: string | Router.NativeItem | Router.ManaualItem

The router further processes the edge's path points vertices, adding extra points if necessary, and returns the processed points. The default value is normal.

connector

connector: string | Connector.NativeItem | Connector.ManaualItem

The connector processes the starting point, the points returned by the router, and the endpoint into the d attribute of the path element, determining the style of the edge after rendering on the canvas. The default value is normal.

createEdge

createEdge?: (
  this: Graph,
  args: {
    sourceCell: Cell
    sourceView: CellView
    sourceMagnet: Element
  },
) => Nilable<Edge> | void

This method allows you to customize the style of the newly created edge.

validateMagnet

validateMagnet?: (
  this: Graph,
  args: {
    cell: Cell
    view: CellView
    magnet: Element
    e: Dom.MouseDownEvent | Dom.MouseEnterEvent
  },
) => boolean

When clicking on a magnet, the return value of validateMagnet determines whether to add a new edge. The trigger occurs when the magnet is pressed. If it returns false, there is no response; if it returns true, a new edge will be created at the current magnet.

validateConnection

validateConnection: (this: Graph, args: ValidateConnectionArgs) => boolean

When moving an edge, this checks if the connection is valid. If it returns false, the edge will not connect to the current element when the mouse is released; otherwise, it will connect.

validateEdge

validateEdge?: (
  this: Graph,
  args: {
    edge: Edge
    type: Edge.TerminalType
    previous: Edge.TerminalData
  },
) => boolean

When stopping the drag of an edge, this checks if the edge is valid based on the return value of validateEdge. If it returns false, the edge will be removed.

Embedding

By using embedding, you can drag a node into another node, making it a child of the other node. This feature is disabled by default. The supported configurations are as follows:

enabled

enabled?: boolean

Whether to allow nesting between nodes. The default value is false.

findParent

findParent?:
  | 'bbox'
  | 'center'
  | 'topLeft'
  | 'topRight'
  | 'bottomLeft'
  | 'bottomRight'
  | ((this: Graph, args: { node: Node; view: NodeView }) => Cell[])

When a node is moved, the method specified by findParent returns the parent node. The default value is bbox.

frontOnly

frontOnly?: boolean

If frontOnly is true, only nodes displayed in the front can be embedded. The default value is true.

validate

validate: (
  this: Graph,
  args: {
    child: Node
    parent: Node
    childView: CellView
    parentView: CellView
  },
) => boolean

validate is a function that determines whether a node can be embedded in a parent node. The default return value is true.

Restrictions

Limit the interaction behavior of nodes and edges. The interacting configuration supports the following:

export type Interacting =
  | boolean
  | InteractionMap
  | ((this: Graph, cellView: CellView) => InteractionMap | boolean)

• boolean: Whether the node or edge is interactive.
• InteractionMap: Interaction details for the node or edge, supporting the following properties:
  • 'nodeMovable': Whether the node can be moved.
  • 'magnetConnectable': Whether to trigger connection interactions when dragging starts on elements with the 'magnet' attribute.
  • 'edgeMovable': Whether the edge can be moved.
  • 'edgeLabelMovable': Whether the edge's label can be moved.
  • 'arrowheadMovable': Whether the starting/ending arrow of the edge can be moved.
  • 'vertexMovable': Whether the path points of the edge can be moved.
  • 'vertexAddable': Whether path points can be added to the edge.
  • 'vertexDeletable': Whether path points can be deleted from the edge.
• (this: Graph, cellView: CellView) => InteractionMap | boolean

const graph = new Graph({
  container: this.container,
  width: 800,
  height: 1400,
  grid: 10,
  interacting: function (cellView: CellView) {
    if (cellView.cell.getProp('customLinkInteractions')) {
      return { vertexAdd: false }
    }
    return true
  },
})

Highlighting

You can specify the highlighting style triggered by certain interactions through the highlighting option, such as:

new Graph({
  highlighting: {
    // When connection ports are available for linking, render a 2px wide red rectangle around the port
    magnetAvailable: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          'stroke-width': 2,
          stroke: 'red',
        },
      },
    },
  },
})

The supported highlighting configuration options include:

• 'default': Default highlighting options used when the following highlighting configurations are absent.
• 'embedding': Used when a node can be embedded during the drag operation.
• 'nodeAvailable': Used when a node can be linked during the connection process.
• 'magnetAvailable': Used when connection ports can be linked during the connection process.
• 'magnetAdsorbed': Used when automatically snapping to connection ports during the connection process.

The magnetAvailable.name above is actually the name of the highlighter. X6 has built-in highlighters stroke and className. For more details, refer to Highlighter.

Movement Range

You can globally configure translating to limit the movement range of nodes.

const graph = new Graph({
  translating: {
    restrict: true,
  },
})

restrict

The movable range of nodes. Supports the following two methods:

• boolean: If set to true, nodes cannot move outside the canvas area.
• Rectangle.RectangleLike | (arg: CellView) => Rectangle.RectangleLike: Specify a node's movement range.

const graph = new Graph({
  translating: {
    restrict: {
      x: 0,
      y: 0,
      width: 100,
      height: 100,
    },
  },
})