流程组件 - X6·图编辑引擎

Andbohemian
484 阅读5分钟

X6·图编辑引擎

简介

X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。

因为涉及到SVG所以也需要有相关的知识储备。不过SVG相关知识和学习还是比较复杂的。好在和Logic-flow一样X6也为我们提供了React和Vue自定义组件开发节点的能力。

优势

  • 高定制开发 不仅仅支持React和Vue节点的开发还包含了Angular节点和HTML节点，节点的定制化能力更加强大
  • 概念更精确 对整块画布的模块的概念更加深入，包含了logic-flow提及很少的连接桩
  • 插件更多、交互更好 X6的插件的体验更加的好，尤其是对齐线的功能，比logic-flow给我的感受会好很多，不再需要小心翼翼的找对齐线了
  • HTML交互增加 多了HTML的交互选项，不完全拘泥于SVG

简单使用

和logic-flow一样，X6也是使用new一个对象并且挂载DOM节点的形式使用的，有利于快速启动和简单开发。

<div style="width:100%; height:100%">
  <div id="container"></div>
</div>

const graph = new Graph({
  container: document.getElementById('container'),
  autoResize: true,
})

image.png

相关概念

流程组件的概念基本都是相通的，只是会在具体的实现上会有点不一样，这里关注一下和logic-flow不太一样的关注点

节点

内置节点：

构造函数shape 名称描述
Shape.Rectrect矩形。
Shape.Circlecircle圆形。
Shape.Ellipseellipse椭圆。
Shape.Polygonpolygon多边形。
Shape.Polylinepolyline折线。
Shape.Pathpath路径。
Shape.Imageimage图片。
Shape.HTMLhtmlHTML 节点，使用 foreignObject 渲染 HTML 片段。
定制节点

内置节点的样式和交互比较简陋不太合适，一般都得自定义业务流程组件

  • 可以通过 markup 和 attrs 来定制节点的形状和样式，markup 可以类比 HTML，attrs 类比 CSS。

可以定制React、Vue、Angular、HTML 节点这里关注Vue&HTML节点

Vue

在使用上和logic-flow的形式基本上是一致的，例如getTeleport和实例化画布，传入节点、边数据

image.png

内部实际上是给我们的自定义组件包装了一层给我们的组件注入了相关的方法和props属性

image.png 更新支持两种方式

  1. 组件内部监听节点事件，在外部触发
  2. 使用Vuex等状态管理工具

在 Vue2 中，节点组件内容有一些限制，比如无法使用 Vuex、i18n、element-ui 等。

HTML

X6 默认内置 HTML 渲染能力，使用方法也非常简单,返回HTMLElement即可

type HTMLComponent = string | HTMLElement | ((cell: Cell) => HTMLElement | string);

image.png

边

支持路径点、路由、连接器。定制边的样式，路过的位置点。由路径点=>路由=>连接器 数据层层递进加工

graph.addEdge({
  source: rect1,
  target: rect2,
  // 路径点
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  // 路由 这里是做了直角处理
  router: 'orth',
  // 如果没有 args 参数，可以简写写 connector: 'rounded'
  // 连接器将连线之间的倒角处理为圆弧倒角
  connector: {
    name: 'rounded',
    args: {},
  },
})

支持自定义箭头，定制边，修改边。 和节点一样，我们可以通过 markup 和 attrs 来定制边的形状和样式，也可以注册自定义边来达到复用效果。X6 默认的边 Shape.Edge 中定义了 line（代表 path 元素）和 wrap（代表透明的 path 元素，用于响应交互）两个选择器。我们在创建边时可以像下面这样定义边的样式。 这里挺复杂的，形状，样式其实都是SVG的元素表示但是好在文档有相关部分的介绍。不过想要好的自定义边也需要在这里下不少的功夫

连接桩

定义节点上的连接点。也就是边和边连接节点的端点。定义连接桩有两步： 分组定义+使用 Graph.registerNode + addNode 配置，也是比较无聊的配置项。不做展开了 可以看看官方实现的Demo

image.png

数据

通过 graph.fromJSON(...) 来渲染 graph.toJSON() 导出的数据

交互

更加细致化的边交互规则、校验是否能连接，组合，高亮，交互的限制等功能。相比logic-flow会有更高的定制化能力

image.png

总结

其实整体上X6和ogic-flow没有太大的差别，不过x6相比logic-flow会有更多的插件支持，撤销，重做，更加友好的流程图拖拽插件，支持搜索，分组，折叠功能。复制粘贴组件，对齐线功能。缺点和logic-flow是一致的，不过有一些短板上的弥补，不过基于SVG的边样式和交互依旧是开发的痛难点。对Vue2的支持依旧有短板，缺点也一样，写法上也一样，应当都是使用的相同的内部实现。这里回想一下在logic-flow写的因为在Vue2中不能使用Vuex等数据和elementui组件库而要放弃使用该组件的说法是否正确，我想更多的还是需要基于业务的需求和拓展性而言的。另外X6的配置项更加多了，配置项嵌套，key和SVG对应的元素也需要自己去找，开发的时候也应该挺无奈的吧，学习成本也相对于logic -flow高不少。

avatar
文章
阅读
粉丝