Configuring Connection Ports

First, we group connection ports that have the same behavior and appearance into the same group, and set the grouping using the groups option, which is an object { [groupName: string]: PortGroupMetadata }. The group name is the key, and the value is the default options for each group of connection ports. The supported options are as follows:

interface PortGroupMetadata {
  markup?: Markup // Definition of the connection port DOM structure.
  attrs?: Attr.CellAttrs // Attributes and styles.
  zIndex?: number | 'auto' // The DOM layer level of the connection port; the higher the value, the higher the level.
  // Layout of connection ports in the group.
  position?: [number, number] | string | { name: string; args?: object }
  label?: {
    // Connection port label
    markup?: Markup
    position?: {
      // Layout of the connection port label
      name: string // Layout name
      args?: object // Layout parameters
    }
  }
}

Next, we configure items, which is an array PortMetadata[]. Each item in the array represents a connection port, and the supported options for connection ports are as follows:

interface PortMetadata {
  id?: string // Unique ID for the connection port, automatically generated by default.
  group?: string // Group name; specifying a group will inherit the options of the connection ports in that group.
  args?: object // Parameters for the layout algorithm specified for the connection ports in the group. We cannot specify a layout algorithm for a single connection port, but we can provide different parameters for the layout algorithm specified for the group.
  markup?: Markup // Definition of the connection port's DOM structure. Specifying this option will override the default options provided by the group referred to by `group`.
  attrs?: Attr.CellAttrs // Element's attribute styles. Specifying this option will override the default options provided by the group referred to by `group`.
  zIndex?: number | 'auto' // The DOM layer level of the connection port; the higher the value, the higher the level. Specifying this option will override the default options provided by the group referred to by `group`.
  label?: {
    // Label for the connection port. Specifying this option will override the default options provided by the group referred to by `group`.
    markup?: Markup // Label DOM structure
    position?: {
      // Label position
      name: string // Name of the label position calculation method
      args?: object // Parameters for the label position calculation method
    }
  }
}

The following example code clearly shows how to define connection ports.

Modifying Connection Ports

There is a rich API for adding, deleting, and modifying connection ports on nodes.

// Add a connection port
node.addPort({
  group: 'top',
  attrs: {
    text: {
      text: 'xx',
    },
  },
})

// Remove a connection port
node.removePort(portId)

// Update a connection port
node.portProp(portId, 'attrs/circle/stroke', color)

Connection Port Position

The layout algorithm for connection ports can only be specified through the position option in groups, as the layout algorithm needs to consider all connection ports in the group when calculating their positions. We can influence the layout result of a single connection port through the args option.

We provide the following layout algorithms for connection ports by default, and also support custom connection port layout algorithms and registration. Click the links below to learn how to use each layout algorithm.

• absolute Absolute positioning.
• left Evenly distributed on the left side of rectangular nodes.
• right Evenly distributed on the right side of rectangular nodes.
• top Evenly distributed on the top of rectangular nodes.
• bottom Evenly distributed on the bottom of rectangular nodes.
• line Evenly distributed along a specified line.
• ellipse Distributed along an elliptical arc.
• ellipseSpread Evenly distributed along an ellipse.

Connection Port Label Position

The position of the label can be specified in both the label.position option of groups and the items.label.position option of the node.

We provide the following label positions by default, and also support custom label positions and registration. Click the links below to learn how to use each label position.

• left The label is located on the left side of the connection port.
• right The label is located on the right side of the connection port.
• top The label is located above the connection port.
• bottom The label is located below the connection port.
• inside The label is located inside the node (close to the edge).
• outside The label is located outside the node (close to the edge).
• insideOriented The label is located inside the node and automatically adjusts the text direction based on its position.
• outsideOriented The label is located outside the node and automatically adjusts the text direction based on its position.
• radial The label is located outside circular or elliptical nodes.
• radialOriented The label is located outside circular or elliptical nodes and the label text automatically rotates along the arc direction.