从0到1实现流程图07-工具篇

开始

一个开箱即用的技术框架，一定会有完备的配套工具。X6 提供了大量的图编辑功能，它们基本上都是基于配置式，而且配置参数是经过大量业务实践出来的，开发过程中充分考虑可扩展性以及兼容性，能覆盖到大部分的功能场景。

实现

节点缩放

通过拖拽修改节点的尺寸和旋转角度是常见功能，在 X6 中只需要做简单的配置：

const graph = new Graph({
  resizing: true,
  rotating: true,
})

还可以通过 css 来修改操作元素的默认样式：

.x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239EDD;
  > div {
    border: 1px solid #239EDD;
  }
  > div:hover {
    background-color: #3DAFE4;
  }
  .x6-widget-transform-active-handle {
    background-color: #3DAFE4;
  }
}
.x6-widget-transform-resize {
  border-radius: 0;
}

选择

选择功能提供了快捷的方式批量移动、删除节点，是使用频次非常高的功能。

const graph = new Graph({
  selecting: {
    enabled: true,
    rubberband: true,
    showNodeSelectionBox: true
  }
})

对齐线

对齐线是用来帮助我们实现节点对齐的重要辅助手段：

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

同样也可以通过修改 css 来自定义对齐线样式：

.x6-widget-snapline-vertical {
  border-right-color: #239EDD;
}
.x6-widget-snapline-horizontal {
  border-bottom-color: #239EDD;
}

撤销重做

X6 会实时记录节点添加、删除、属性修改的变动，通过撤销操作可以返回到历史记录中的任意位置。

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

graph.addNode(...)
graph.history.undo() // 删除新增节点
graph.history.redo()  // 恢复新增节点

有时候我们希望多个操作能一次性撤销，X6 提供了批量更新的方法 batchUpdate，一次批量操作只会被记录一次。

graph.batchUpdate('rename', () => {
  rect.prop('zIndex', 10)
  rect.attr('label/text', 'hello')
  rect.attr('label/fill', '#ff0000')  
})

小地图

在无限画布场景，需要关注当前视口处于画布的什么位置并能快速定位到远处的画布元素，这时就需要小地图功能。小地图其实是画布的一个缩略图，可以通过小地图快速平移和缩放画布。

const graph = new Graph({
  minimap: {
    enabled: true,
    container: document.getElementById('minimap')!,
    width: 198,
    height: 198,
    padding: 10,
  },
})

最后

工欲善其事必先利其器，选择一个好的框架能极大程度上提高开发效率，X6 通过几个简单的配置提供了丰富的开箱即用的功能，对于新手来说是非常友好的。

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