React 流程图的一种解决方案 GGEditor

小灰灰 2022-05-06 14:27 346阅读 0赞

### HTML 引入 ###

既可以通过将脚本下载到本地也可以直接引入在线资源；

<script src="https://unpkg.com/@antv/g6/build/g6.js"></script>

<script src="./g6.js"></script>

### 通过 npm 安装 ###

[![g6.svg_style_flat-square][]][g6.svg_style_flat-square 1]

我们提供了 G6 npm 包，通过下面的命令即可完成安装

npm install @antv/g6 --save

成功安装完成之后，即可使用 `import` 或 `require` 进行引用。

import G6 from '@antv/g6';
    
    const graph = new G6.Graph({
      container: 'mountNode',
      width: 600,
      height: 300
    });

**要实现类型下图的需求，所以研究了一些g6 editor**

![70][]

了解链接：

[https://github.com/antvis/g6][https_github.com_antvis_g6] g6 github地址  
[https://antvis.github.io/g6/api/graph.html][https_antvis.github.io_g6_api_graph.html] g6文档

[https://www.yuque.com/antv/g6/api-graph][https_www.yuque.com_antv_g6_api-graph] g6

[http://ggeditor.com/][http_ggeditor.com]

[https://github.com/antvis/g][https_github.com_antvis_g]    
github 地址 [https://github.com/gaoli/GGEditor][https_github.com_gaoli_GGEditor]

效果展示地址  
[https://antv.alipay.com/assets/dist/3.0.0/g6/1.x/editor/model-flow.html][https_antv.alipay.com_assets_dist_3.0.0_g6_1.x_editor_model-flow.html]

参照代码地址 [https://github.com/antvis/g6-editor][https_github.com_antvis_g6-editor]

遇到一些问题

// GGEditor 的 RegisterNode 并不是会动态更新的。比如说锚点author
    // RegisterNode 只在初始化起作用 so 你需要在初始化的时候创建所有可能用到的节点类型

持续更新中。。。。

[g6.svg_style_flat-square]: https://img.shields.io/npm/v/@antv/g6.svg?style=flat-square
[g6.svg_style_flat-square 1]: https://www.npmjs.com/package/@antv/g6
[70]: /images/20220506/39ef8f3ce57047e289c4bc419d3afc55.png
[https_github.com_antvis_g6]: https://github.com/antvis/g6
[https_antvis.github.io_g6_api_graph.html]: https://antvis.github.io/g6/api/graph.html
[https_www.yuque.com_antv_g6_api-graph]: https://www.yuque.com/antv/g6/api-graph
[http_ggeditor.com]: http://ggeditor.com/
[https_github.com_antvis_g]: https://github.com/antvis/g
[https_github.com_gaoli_GGEditor]: https://github.com/gaoli/GGEditor
[https_antv.alipay.com_assets_dist_3.0.0_g6_1.x_editor_model-flow.html]: https://antv.alipay.com/assets/dist/3.0.0/g6/1.x/editor/model-flow.html
[https_github.com_antvis_g6-editor]: https://github.com/antvis/g6-editor