x6
本 demo 主要为调研 X6 实现流程可视化编辑功能的实现,是否满足业务需求
基本功能
拖拽菜单生成节点
自定义节点类型
点击节点弹出侧边栏编辑业务数据
修改业务数据,同步到节点更新
鼠标点击拖动画布
鼠标点击拖动节点
按住 ctrl+滚动鼠标滚轮缩放画布、可实现点击按钮放大缩小
delete、backspa 删除选中节点,可实现按钮删除
自定义连线,锚点和链接桩
可实现数据生成节点
结论
优点:X6 展示了极大的灵活性与可塑性
缺点:缺少 API 文档,很多方法接口都需要去源码里找
demo界面
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your tests
npm run test
Lints and fixes files
npm run lint