x6-graph
v1.0.0
Published
封装x6为组件使用
Downloads
48
Maintainers
Readme
x6-graph
封装x6为组件使用
install
npm install x6-graph
yarn add x6-graph
online demos
react
vue
examples
react
import { Graph, useGraphInstance } from 'x6-graph/react'
const GraphBehavior = () => {
const graph = useGraphInstance()
// TODO 这里拿到graph对象处理自己的逻辑(例如使用后端数据初始化画布,增加事件监听...)
return null
}
function App() {
const gRef = useRef<X6.Graph | null>(null)
// 1. Graph组件支持多实例;2. 父组件传递ref
return (
<div className="App">
<Graph grid width={800} height={600} ref={gRef}>
<GraphBehavior />
</Graph>
</div>
)
}
vue
import { Graph, useGraphInstance, contextSymbol } from 'x6-graph/vue'
const GraphBehavior = defineComponent({
name: 'GraphBehavior',
inject: [contextSymbol],
setup() {
const { graph } = useGraphInstance()
onMounted(() => {
// TODO 这里拿到graph对象处理自己的逻辑
// (例如使用后端数据初始化画布,增加事件监听...)
})
onUnmounted(() => {
// 组件卸载的时候,移除监听等
})
return () => null
}
})
export default defineComponent({
components: {
Graph,
// 可以将不同的业务逻辑拆分到不同的组件里面写成多个Behavior
GraphBehavior,
}
})
<template>
<Graph grid snapline keyboard clipboard :width="600" :height="400">
<GraphBehavior />
</Graph>
</template>