本教程中,暂时只讲流程图, 一是因为流程图使用最为广泛; 二是因为我们只用到了流程图;

gg-editor 暴露了 Flow 这么一个组件,它就是流程图组件,如下:

  1. import { Flow } from 'gg-editor';

有哪些属性

一眼就看得出的属性

它的 API 有:
image (2).png

style 行内样式
className CSS类名
data 流程图数据
graphConfig 流程图配置
对其溯源发现它其实是继承自 @antv/g6 的 GraphOptions 的,因此这个我们按着 g6 的配置项就好了。
配置项地址:https://g6.antv.vision/zh/docs/api/Graph#g6graph
customModes 这个我也不太清楚

深入后发现的属性

除此之外,
我们还可以看到 FlowProps 这个接口 extends 继承了 GraphReactEventProps,对其溯源发现如下:
image (1).png

GraphReactEventProps 它再次继承自 GraphReactEvent,而 GraphReactEvent 是 GraphNodeEvent 等众多事件的联合类型(可以理解为集合),

联合类型:http://ts.xcatliu.com/basics/union-types.html

因此 Flow 除了以上属性外,还有各众多事件属性,如:

https://www.yuque.com/blueju/gg-editor/fse6vv

[内置事件]

注意事项:

它是画布了,在 gg-editor 中,它需要被设置确定的高度。