1. 相比于jsPlumb、Antv/X6而言,React Flow 的技术相对先进 // 小声BB,X6 居然用到了 jquery:https://github.com/antvis/X6/blob/master/packages/x6/package.json#L70 2. 高度自定义,任何 ReactElement 都可以作为节点 3. API 真的超级简单,而且体积不大,npm 3.9 MB 一、快速上手 首先在项目中安装依赖...
轻量化流程图开发，⽐X6清爽太多——ReactFlow实战（⼀）需求千千万，流程图常在 没想到多年以后，我再次遇到⼀个关于流程图开发的需求 以前少不更事，头铁⽤ GG-Editor 搞了⼀次流程图，差点把⾃⼰给埋了 这次再遇到类似的需求，在各路⼤神的指点下，我选择了来进⾏开发，原因如下：1. 相⽐...
一开始想用antv/x6,但是之前没用过,看了半天发现展示数据容易,想要实现节点的增删,拖拉拽,节点的先后顺序更改交互实在是无力。 然后发现了react-flow-renderer,详情可以查看: [https://github.com/wbkd/react-flow] [https://reactflow.dev/docs/introduction/] 实现的效果如下: image.png 下面上代码:(reacthoo...
[ ] 用这个封装的Graph实现官方流程图(或者直接实现xflow的流程图)
《轻量化流程图开发,比 X6 清爽太多 —— React Flow 实战(一)》 一、引用 GG-Editor 直接通过 npm 或 yarn 安装依赖 npm install --save gg-editor 由于对 GG-Editor 不熟悉,所以我将它自带的 Demo 作为模版,在此基础上进行开发 将node_modules/gg-editor/demo/src/下的Flow目录和components、common目录拷...
X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。 说明文档:https://x6.antv.vision/zh/docs/tutorial/about 源码 import React, { useEffect, useState } from 'react' ...
{createBranchNode, createEndNode, createFlowEdge, createFlowNode, createRenderNode, createStartNode, ReactX6Editor, useFlowEditor}from"vue-x6-editor";import'vue-x6-editor/dist/vue-x6-editor.css'import'./main.scss';consteditor = useFlowEditor({onlyOneStartNode:true,operators: [ {label:'选项一...
antv-x6 在ie11报错 在X6之前加入polyfill吧。 Gulp&Babel polyfill对IE11问题的承诺 我在promise-polyfill上取得了很好的成功。只要在promise-specific代码之前加载,它就可以正常工作了。我知道这不是babel-specific,但它解决了我的IE-compatibility困境,当时我还需要支持IE。 IE11 compatible Object.fromEntries 您...
},"@babel/helper-simple-access": {"version":"7.1.0","resolved":"https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz","integrity":"sha512-Vk+78hNjRbsiu49zAPALxTb+JUQCz1aolpd8osOF16BGnLtseD21nbHgLPGUwrXEurZgiCOUmvs3ExTu4F5x6w==","requires": ...
x6画布参数设置 通过属性graphConfig设置一些功能的启用状态,比如默认关闭网格 关于画布的属性设置请见文档:API:Graph consteditor = useFlowEditor({graphConfig: {grid:false, } }); 自定义(继承)组件 editor.components.registry(createFlowNode());