start

Many figures have the concept of a peg, which is a fixed point on a node and is often used to connect wires. The use of joint piles is very flexible and this article only introduces best practices.

implementation

Definition of connecting pile

First, let’s look at the node configuration of a connecting pile in the center around a node:

graph.addNode({
  ports: {groups: {
      group1: {
        position: 'top'.attrs: {
          circle: {
            stroke: '#D06269'.strokeWidth: 1.r: 4.magnet: true}}},group2: {
        position: 'right'.attrs: {
          circle: {
            stroke: '#D06269'.strokeWidth: 1.r: 4.magnet: true}}},group3: {
        position: 'bottom'.attrs: {
          circle: {
            stroke: '#D06269'.strokeWidth: 1.r: 4.magnet: true}}},group4: {
        position: 'left'.attrs: {
          circle: {
            stroke: '#D06269'.strokeWidth: 1.r: 4.magnet: true}}}},items: [{group: 'group1' },
      { group: 'group2' },
      { group: 'group3' },
      { group: 'group4'}]}})Copy the code

The following describes the key configuration items in detail:

  1. Group: The group option is used to set the group of linked piles so that the linked piles in this group have the same behavior and style. When adding linked piles to items, you can specify which group the linked piles belong to.
  2. Position: Position attributes of connecting piles can be configured within each group. Absolute and evenly distributed positions are supported. For detailed configuration, please refer to PortLayout.
  3. Attrs: If attrs appears again, there must be some markup that matches it. The default markup of the link peg is:
{
  tagName: 'circle'.selector: 'circle'.attrs: {
    r: 10.fill: '#fff'.stroke: '# 000',}}Copy the code

The structure of the connection pile is customized. Attrs customized the style of the connection pile. Note that only the connection pile with magnet: True attribute can be manually connected.

  1. Items: group only defines the grouping of connection piles, that is, what group1, group2, group3, group4 look like respectively. It is the items attribute that really configures which connection piles are required. The items configuration is as follows:
{
  id: 'id1'.group: 'group1'.markup: undefined.attrs: undefined,}Copy the code

If the ID is not set, a unique ID is automatically generated. If you set it manually, remember that it must be globally unique, otherwise unexpected errors will occur. Markup or attrs configured in items are deeply merged with the configuration in the owning group.

Dynamically modifying properties

So how to dynamically modify the properties of the connecting pile? As we know from the previous nodes and wires, dynamic modification styles use the ATTR method. What is the principle of the attR method? The attr method is a quick way to modify store/data/attrs data in a node or edge.

As you can see from the above figure, ports-related configurations are not inside the attrs attribute, so attR cannot be used to modify the connection peg configuration. Instead, use the more general prop method. Prop can be used to modify arbitrary data in store/data, for example, The border color of the first connecting pile needs to be changed to red:

node.prop('ports/items/0/attrs/circle', { stroke: 'red' })
Copy the code

This would be tedious to write, but X6 provides a simpler approach:

node.portProp('portId'.'attrs/circle', { stroke: 'red' })
Copy the code

Show/Hide

In business scenarios, it is often necessary to display the connection stake when the mouse moves into the node and hide the connection stake when the mouse moves out of the node. Here, the event system of X6 is involved. Basically, all operations in X6 will trigger corresponding Events, which is convenient for users to process their own logic. For details, see Events. To do this, we can: listen for node mouse-in and mouse-out events, and then show/hide the connection peg by style. This is a very obvious advantage of svG-based manipulation of SVG elements using familiar DOM manipulation.

function showPorts(ports, show) {
  for (let i = 0, len = ports.length; i < len; i = i + 1) {
    ports[i].style.visibility = show ? 'visible' : 'hidden'
  }
}

graph.on('node:mouseenter'.() = > {
  const ports = container.querySelectorAll('.x6-port-body')
  this.showPorts(ports, true)
})

graph.on('node:mouseleave'.() = > {
  const ports = container.querySelectorAll('.x6-port-body')
  this.showPorts(ports, false)})Copy the code

The last

The biggest advantage of an SVG-based diagram framework is that we can use the familiar way of thinking about HTML elements to handle the interaction of SVG elements, because we can use the DOM API to manipulate SVG elements, and we can implement many of the interaction details that are often difficult for graph editing applications.

  1. Source: portal
  2. Remember to star X6 warehouse