vue-x6-graph
v1.0.7
Published
<a href="https://www.npmjs.com/package/vue-x6-graph"><img alt="NPM Package" src="https://img.shields.io/npm/v/vue-x6-graph.svg?style=flat-square"></a>  
Readme
x6 vue 最佳实践
提供一个vue下使用X6的最佳范本：
- 将函数式的X6Graph组件化
- 简单易用，易于做逻辑拆分
- 支持多实例
- 方便在自己的组件中管理图数据
- 自动检测图数据变化，并增量更新到x6画布
- 内部使用batchUpdate优化性能
安装
npm install vue-x6-graph
yarn add vue-x6-graph在线demo
设计
使用Graph组件
- 直接在模板里面使用Graph组件
- 子组件内使用useGraphInstance拿到x6的graph对象，可以通过这个对象直接操作画布（增加监听，或者添加节点等）
使用hook
- 调用 useGraphState 拿到数据（
nodes,edges,graph）,以及更新数据的方法（setNodes,setEdges,setGraph）
const { nodes, setNodes, edges, setEdges, graph, setGraph } = useGraphState()
console.log('nodes:', nodes.value)
console.log('edges:', edges.value)
console.log('graph:', graph.value)
- 创建x6画布之后调用setGraph设置当前画布
- 在某些事件内调用setNodes或者setEdges更新数据
- nodes和edges是ref，数据变化的时候，内部能自动diff在运行一个内置的patch方法将数据变动更新到画布上面