Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lloydzhou/x6-hooks
x6 hooks (以数据驱动画布)
https://github.com/lloydzhou/x6-hooks
antv-x6 graph hooks react typescript vue3
Last synced: 7 days ago
JSON representation
x6 hooks (以数据驱动画布)
- Host: GitHub
- URL: https://github.com/lloydzhou/x6-hooks
- Owner: lloydzhou
- License: mit
- Created: 2023-02-16T12:01:54.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-24T06:09:19.000Z (almost 2 years ago)
- Last Synced: 2025-01-05T07:42:22.931Z (13 days ago)
- Topics: antv-x6, graph, hooks, react, typescript, vue3
- Homepage:
- Size: 17.6 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-x6 - x6-hooks/vue - provide vue hook `useGraphState` to manager state for @antv/x6 (Frameworks / Vue Component)
README
# x6-hooks
以数据驱动x6画布
## install
```
npm install x6-hooks
yarn add x6-hooks
```
## online demos
### react
[react demo](https://codesandbox.io/s/antv-x6-react-graph-demo-6ere13)
[mindmap demo](https://codesandbox.io/s/x6-hooks-react-mindmap-demo-2t6954?file=/src/App.js)
### vue
[vue demo](https://codesandbox.io/s/x6-hooks-vue-demo-j19slj)
## examples
### react
```
import { useGraphState } from 'x6-hooks/react'
const { nodes, setNodes, edges, setEdges, graph, setGraph } = useGraphState()
// setNodes and setEdges return Promise
useEffect(() => {
const graph = new X6.Graph({ ... })
setGraph(graph)
// init data
setNodes([...])
setEdges([...])
}, [])
const addNode = useCallback((node: Node.Metadata) => {
// add node to nodes array
setNodes([...nodes, node])
}, [nodes])
const addEdge = useCallback((edge: Edge.Metadata) => {
setEdges([...edges, edge])
}, [edges])
const updateNode = useCallback((nodeId: string, node: Node.Metadata) => {
const index = nodes.findIndex(node => node.id === nodeId)
if (index > -1) {
nodes[index] = node
setNodes([...nodes])
}
}, [nodes])
const updateEdge = useCallback((edgeId: string, edge: Edge.Metadata) => {
const index = edges.findIndex(edge => edge.id === edgeId)
if (index > -1) {
edges[index] = edge
setEdges([...edges])
}
}, [edges])
const removeNode = useCallback((nodeId) => {
setNodes(nodes.filter(node => node.id !== nodeId))
// remove related edges
setEdges(edges.filter(edge => {
if (edge.source === nodeId || edge.source.cell === nodeId) {
return false
}
if (edge.target === nodeId || edge.target.cell === nodeId) {
return false
}
return true
})
}, [nodes, edges])
const removeEdge = useCallback((edgeId) => {
setEdges(edges.filter(edge => edge.id !== edgeId))
}, [edges])
```
### vue
```
import { useGraphState } from 'x6-hooks/vue'
const { nodes, edges, graph, setNodes, setEdges, setGraph } = useGraphState()
// setNodes and setEdges return Promise
onMounted(() => {
const graph = new X6.Graph({ ... })
setGraph(graph)
// init data
setNodes([...])
setEdges([...])
})
const addNode = (node: Node.Metadata) => {
// add node to nodes array
setNodes([
...nodes.value, // nodes is ref
node,
])
}
const addEdge = (edge: Edge.Metadata) => {
setEdges([
...edges.value, // edges is ref
edge,
])
}
const updateNode = (nodeId: string, node: Node.Metadata) => {
const index = nodes.value.findIndex(node => node.id === nodeId)
if (index > -1) {
nodes.value[index] = node
setNodes([...nodes.value])
}
}
const updateEdge = (edgeId: string, edge: Edge.Metadata) => {
const index = edges.value.findIndex(edge => edge.id === edgeId)
if (index > -1) {
edges.value[index] = edge
setEdges([...edges.value])
}
}
const removeNode = (nodeId) => {
setNodes(nodes.value.filter(node => node.id !== nodeId))
// remove related edges
setEdges(edges.value.filter(edge => {
if (edge.source === nodeId || edge.source.cell === nodeId) {
return false
}
if (edge.target === nodeId || edge.target.cell === nodeId) {
return false
}
return true
})
}
const removeEdge = (edgeId) => {
setEdges(edges.value.filter(edge => edge.id !== edgeId))
}
```
## 集成
配合[x6-graph](https://github.com/lloydzhou/x6-graph)使用
1. 使用x6-hooks管理数据
2. 使用x6-graph封装图实例
3. x6-graph子组件的模式对业务逻辑做拆分组合（也可以用这个模式抽象一些常用的组件，例如将官方的plugin抽象成UI组件挂载到Graph内部）