欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在 React 项目中引入 GG-Editor 编辑可视化流程

程序员文章站 2022-07-11 17:37:17
蚂蚁金服数据可视化团队曾经开源了一款 G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Editor) 不过相关的文档还是太少,实际的使用依然是一个不断摸索的过程... 常见问题: https ......

蚂蚁金服数据可视化团队曾经开源了一款 g6-editor,但后来停止了对外支持,学习成本太高

好在后来他们团队的大牛结合 react + g6 开源了一个 gg-editor(其实就是g6-editor)

不过相关的文档还是太少,实际的使用依然是一个不断摸索的过程...

常见问题: https://github.com/gaoli/ggeditor/issues/130

 

 

一、引用 gg-editor

直接通过 npm 或 yarn 安装依赖

npm install --save gg-editor

由于对 gg-editor 不熟悉,所以我将它自带的 demo 作为模版,在此基础上进行开发

node_modules/gg-editor/demo/src/ 下的 flow 目录和 components、common 目录拷出来,放到开发目录下进行改造

这个 demo 基于 ant 开发,所以需要引入 ant

npm install --save antd

另外 demo 使用了 css modules,需要在项目配置中启用

比如在我的项目中,就把原本的 index.css 重命名为 index.module.css,然后修改相应的引入路径

由于只是开发可视化流程,所以 components 目录下多余的文件(以 koni 和 mind 开头的文件)都以删掉

然后将 flow/index.js 提出来作为项目入口,改造后的目录如下:

在 React 项目中引入 GG-Editor 编辑可视化流程

 

 

二、 item 节点配置

demo 启动之后的界面是这样的

在 React 项目中引入 GG-Editor 编辑可视化流程

左边是 gg-editor 提供的四种基础节点类型,其对应的组件是 /components/editoritempanel

这个组件下引入了四个 gg-deitor <item> 组件,官方提供的 api 如下:

在 React 项目中引入 GG-Editor 编辑可视化流程

http://ggeditor.com/docs/api/itempanel.zh-cn.html

其中 type 有 nodeedge 两个值可选,node 就是节点,edge 是连接节点的连线

shape 可选参数有:圆形 'flow-circle' | 圆角矩形 'flow-rect' | 菱形 'flow-rhombus' | 椭圆矩形 'flow-capsule'

src 可以引入一张图片作为当前节点的预览样式

也可以自定义子节点,<item /> 会接收 props.children 作为预览样式

需要注意的是,不管是 src 还是子节点,都只是一个预览样式,并不等于编辑器画板中的样式

而画板中的样式,由 model 决定,其配置项如下:

model: {
    color: '#333', // 节点主题色(选中颜色、激活颜色基于该值)
    size: [10, 10], // [x, y] 节点尺寸
    shape: 'cirle', // 图形:圆形 circle | 圆角矩形 rect | 菱形 rhombus | 椭圆矩形 capsule
    style: { // 关键形样式(可覆盖color的普通样式,但激活、选中依然无效,坑!)
        fill: 'red', // 填充背景
        stroke: 'blue' // 形状描边
    },
    label: { // 节点标签
        text: '开始节点', // 文本内容
        fill: 'green' // 文本颜色
    },
    index: 1 // 渲染层级
}

不过 model 默认会继承 <item> 组件的 props.shape 和 props.size,所以通常 model 只需配置 color、label

这里有个比较难受的地方:画板中的节点样式由 model 控制,而节点预览样式由 css 或者图片控制,要想保证二者统一,就会需要很多额外的工作

在 React 项目中引入 GG-Editor 编辑可视化流程

 

 

三、自定义节点

如果 <item> 自带的参数不满足需求,可以使用 <reisternode> 来封装自己的 <item>

在 React 项目中引入 GG-Editor 编辑可视化流程

<reisternode> 可以接收上面三个参数,其中 name 是组件名称

在 <item> 的 shape 属性中指定 name,就能拖拽生成自定义的节点

extend 可以继承一个基本图形('flow-circle', 'flow-rect' 等)

config 可以参考官方的 issues:https://github.com/gaoli/ggeditor/issues/76

 

假如需要自定义一个 start-node,就可以自行封装一个 node 组件

在 React 项目中引入 GG-Editor 编辑可视化流程

然后在 itempanel 中的 <item> 指定组件名称

在 React 项目中引入 GG-Editor 编辑可视化流程

最后在 <flow> 组件下面引入

在 React 项目中引入 GG-Editor 编辑可视化流程

如果还是不明白 <reisternode> 如何使用,可以参考这个 demo:

 

 

四、flow 编辑器配置

官方文档地址:http://ggeditor.com/docs/api/flow.zh-cn.html

在 React 项目中引入 GG-Editor 编辑可视化流程

组件默认可以将连线到空白处,设置 noendedge 为 false 就只能在节点之间连线

align 参数可以设置对齐的样式,比如对齐线:

<flow align={{
    line: {
        stroke: 'blue', // 对齐线颜色
        linewidth: 2 // 对齐线宽度
    }
}} />

shortcut 可以配置内置的快捷键命令,支持的命令有:

在 React 项目中引入 GG-Editor 编辑可视化流程

但经过试验,只有适用页面为 all 的命令可配置,而其它命令(如 ctrl+c)都无效

 

组件本身默认的连线是曲线 'flow-smooth',在编辑时可以手动修改,也可以在 graph 中限定连线类型:

<flow graph={{edgedefaultshape: 'flow-polyline-round'}}/>

更多关于 graph 的配置项可以参考这里:

在 <flow> 组件上,最重要的是监听事件:

  <flow onnodeclick={(e) => {
      console.log(e);
    }}
  />

事件是整个编辑器的灵魂,下面将重点介绍一下 gg-editor 的 page events

 

 

五、页面事件 page events

官方文档:http://ggeditor.com/docs/api/pageevents.zh-cn.html

文档中对支持的事件和事件对象都有说明,这里不再细说,主要分享几个场景

// 事件总览参考 /node_modules/gg-editor/src/common/constants.js

 

1. 拖拽节点,区分新节点还是旧节点

监听拖拽放置事件:ondrop

从 <itempanel> 拖拽新节点到画布的时候,ondrop 返回的事件对象是这样的:

在 React 项目中引入 GG-Editor 编辑可视化流程

这时 currentitem 和 currentshape 都是 undefined

而如果只是挪动旧节点的位置,这两个字段会记录拖拖动的图形图项

或者监听节点拖动结束事件:onnodedragend

这个事件只会在拖动画布上的节点才会触发

 

2. 锚点连线取消

连线触发的事件很多,比如 ondrop、ondragend不过个人推荐监听 onafterchange

当子项更改的时候会触发 onafterchange 事件,如果是连线,事件对象如下:

在 React 项目中引入 GG-Editor 编辑可视化流程

如果有需求,当目标节点已经连线的时候,就取消连线,就可以根据 item 或者 model 对象中的参数进行判断

最后用结合异步函数 <withpropsapi> 组件取消连线:

在 React 项目中引入 GG-Editor 编辑可视化流程

在 React 项目中引入 GG-Editor 编辑可视化流程

这里用到的 <withpropsapi> 组件,是 gg-editor 自带的包装组件

经过 <withpropsapi> 包装的组件,会自带 propsapi 属性

executecommand() 方法可以执行上面第四部分 (shortcut) 提到的所有命令

 

3. 保存

上面 <withpropsapi> 提供的 propsapi 属性中,包含了 save() 方法

可以封装一个 savebutton 组件,暴露一个 onsave 事件

在 React 项目中引入 GG-Editor 编辑可视化流程

然后用 <withpropsapi> 包装该组件

详情可以参考这个 demo:  

 

4. 自定义键盘操作

上面提到过,ctrl + c 的复制快捷键无效

但这个功能十分关键,可以通过监听 onkeydownonkeyup 手动创建这个快捷命令

在 React 项目中引入 GG-Editor 编辑可视化流程

创建一个 keysdown 字段来记录按下的按键,keyup 时清空

在 React 项目中引入 GG-Editor 编辑可视化流程

在 React 项目中引入 GG-Editor 编辑可视化流程

 

 

小结:

上面的内容只介绍了 gg-editor 核心的几个组件和功能

像 <minimap>、<contextmenu>、<toolbar> 这些组件参考 demo 就足够,所以并没有提及

基于上面的介绍,已经能够使用 gg-editor 进行开发,如果有其它疑问,可以在 github 仓库提 issues

最后发一下牢骚:阅读源码这种事,必须配一个程序员鼓励师才能开展