https://github.com/lloydzhou/x6-graph

x6 graph as react/vue component
https://github.com/lloydzhou/x6-graph

Last synced: 6 days ago
JSON representation

x6 graph as react/vue component

• Host: GitHub
• URL: https://github.com/lloydzhou/x6-graph
• Owner: lloydzhou
• License: mit
• Created: 2023-02-22T05:46:32.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-02-24T06:09:33.000Z (over 1 year ago)
• Last Synced: 2024-10-20T10:14:31.459Z (14 days ago)
• Size: 3.91 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-x6 - x6-graph/vue - using `provide`/`inject` api to wrap x6 graph as vue component. (Frameworks / Vue Component)

README

        
# x6-graph

封装x6为组件使用



![npm bundle size](https://img.shields.io/bundlephobia/minzip/x6-graph?style=flat-square)

![npm](https://img.shields.io/npm/dm/x6-graph?style=flat-square)



## install

```

npm install x6-graph

yarn add x6-graph

```

## 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-graph-demo-qq5tds?file=/src/App.vue)

## examples

> x6-graph子组件的模式对业务逻辑做拆分组合（也可以用这个模式抽象一些常用的组件）例如：

### react

```

import { Graph, useGraphInstance } from 'x6-graph/react'

const GraphBehavior = () => {

  const graph = useGraphInstance()

  // TODO 这里拿到graph对象处理自己的逻辑（例如使用后端数据初始化画布，增加事件监听...）

  return null

}

function App() {

  const gRef = useRef(null)

  // 1. Graph组件支持多实例；2. 父组件传递ref

  return (

    


      

        

      

    

  )

}

```


将x6-plugin-history抽象成组件使用

```

import { History } from "@antv/x6-plugin-history";

import { Graph, useGraphInstance } from 'x6-graph/react'

const HistoryPlugin = () => {

  const graph = useGraphInstance()

  useEffect(() => {

    const history = new History({

      enabled: true,

    })

    graph.use(history)

    return () => {

      history.dispose()

    }

  }, [])

  return null

}

// 使用

  

```

### 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,

  }

})

  

    

  

```