从0到1实现流程图05-连接桩篇

开始

很多图形都有连接桩的概念,连接桩是节点上固定的点,常用于连线。连接桩的使用方式非常灵活,本文只介绍最佳实践。

实现

连接桩定义

首先来看一个节点四周中心各一个连接桩的节点配置:

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' }
    ]
  }
})

从0到1实现流程图05-连接桩篇_第1张图片
下面详细解释上面关键配置项:

  1. group:group 选项来设置链接桩分组,使该组中的链接桩具有相同的行为和样式,在 items 里面添加连接桩的时候,可以指定该连接桩属于哪个分组。
  2. position:每一个分组内可以配置连接桩的位置属性,位置支持绝对定位以及均匀分布定位,详细配置可参考 PortLayout
  3. attrs:这里又出现 attrs 了,那么必定有与其配对的 markup,连接桩默认的 markup 为:

    {
      tagName: 'circle',
      selector: 'circle',
      attrs: {
        r: 10,
        fill: '#fff',
        stroke: '#000',
      },
    }

    markup 定制连接桩的结构,attrs 定制连接桩的样式,注意,只有设置 magnet: true 属性的连接桩才能手动连线。

  4. items:group 只是定义了连接桩分组,也就是 group1 、group2、group3、group4 分别长成什么样子,真正配置需要哪些连接桩的是 items 属性,items 的配置如下:

    {
      id: 'id1',
      group: 'group1',
      markup: undefined,
      attrs: undefined,
    }

    如果 id 不设置,会自动生成唯一 id,如果手动设置,记住,必须保证全局唯一,否则会产生不可预期的错误。在 items 中配置的 markup 或 attrs 会和所属 group 中的配置深度合并。

    动态修改属性

    那么怎么动态修改连接桩的属性呢?在前面的节点和连线中我们知道,动态修改样式使用的是 attr 方法,那么 attr 方法的原理是什么呢?
    通过阅读源码知道,attr 方法其实是一个修改节点或边中 store/data/attrs 中数据的快捷方法。
    从0到1实现流程图05-连接桩篇_第2张图片

从上图可知,ports 相关的配置并不处于 attrs 属性内部,所以修改连接桩的配置不能使用 attr 方法,那只有使用更通用的 prop 方法, prop 可以用来修改 store/data 中的任意数据 ,例如,需要修改第一个连接桩的边框颜色为红色:

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

这么写会显得特别冗长,X6 提供了更简单一点的方法:

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

显示/隐藏

在业务场景中,经常需要鼠标移入节点时显示连接桩、鼠标移出节点时隐藏连接桩的功能。这里就要涉及到 X6 的事件系统,X6 中基本上所有操作都会触发对应的事件,方便用户处理自己的逻辑,详细内容见 Events 。实现这个功能,我们可以:监听节点的鼠标移入和移出事件,然后通过样式来显示/隐藏连接桩,这就是基于 SVG 的一个非常明显的优势,我们可以使用熟悉的 DOM 操作来操作 SVG 元素。

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)
})

从0到1实现流程图05-连接桩篇_第3张图片

最后

基于 SVG 的图框架最大的优势在于我们可以使用熟悉的处理 HTML 元素的思维方式来处理 SVG 元素的交互,因为可以使用 DOM API 来操作 SVG 元素,我们就可以实现很多交互细节,而图编辑应用的难点往往就在于这些交互细节。

  1. 源码:传送门
  2. 记得给 X6 仓库加星

你可能感兴趣的:(从0到1实现流程图05-连接桩篇)