使用GGEditor开发流程编辑应用

G6是阿里可视化团队开源的一款图可视化引擎，它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。项目地址在这里。

但G6对React并不提供直接的支持，而且作为面向应用开发，这个引擎也太底层了一些，因此需要使用一个中间层来做一些封装。GGEditor项目就是这个中间层，它是本来是一个个人开源产品，但现在项目以及移动到阿里下，项目地址在这里。

到目前为止（2020.6.1），GGEditor并不完善，和G6最新发布的3.5.0版本也存在问题，因此不能直接使用，需要一些额外的处理，具体可参考 awesome-patches。

GGEditor给出的例子还是比较简单的，下面就它未涉及的部分进行说明。

画布背景

在官方的例子中，画布背景只需要添加一个名为 grid 的插件就可以了。但这个做法在 antd pro 中并不能成功，这是因为 pro-layout 增加了一个背景层，从而把 grid 遮挡住了，因此需要修改相关的 z-index。

const canvas = graph.get('canvas');
modifyCSS(canvas.get('el'), {
  'z-index': 1,
});
modifyCSS(grid.getContainer(), {
  'z-index': 0,
});

小地图

这个也是官方的插件 Minimap，相关文档在这里。但是同样也有问题，通常需要将小地图放在右下角的给定位置，因此需要给它传入一个 container，但是这个 container 一般是和画布一起定义的，而plugin也是和画布一起定义的，因此不能用配置的方法来生成这个plugin，而只能在回调函数中动态添加这个plugin。

<Card title="MiniMap" bordered={false}> //定义Minimap的容器
  <div
    ref={(dom) => {
      this.miniMapDOM = dom as HTMLDivElement;
    }}
  />
</Card>
<Flow
  className={styles.graph}
  ref={(component) => {
    if (component) {
      this.postLoad(component.graph); //画布生成结束后的回调函数
    }
  }}
  ...
/>

然后在这个回调函数中设置plugin

const miniMap = new G6.Minimap({
  container: this.miniMapDOM,
  viewportClassName: 'minimap-viewport',
});
graph.addPlugin(miniMap);

flowEditor.gif