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

custom-render to render x6 object in vue
https://github.com/lloydzhou/vue-x6

antv-x6 custom-renderer vue x6

Last synced: about 1 month ago
JSON representation

custom-render to render x6 object in vue

• Host: GitHub
• URL: https://github.com/lloydzhou/vue-x6
• Owner: lloydzhou
• License: mit
• Created: 2023-02-27T17:13:39.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-03-21T02:20:16.000Z (over 1 year ago)
• Last Synced: 2024-07-09T01:09:00.086Z (2 months ago)
• Topics: antv-x6, custom-renderer, vue, x6
• Language: TypeScript
• Homepage:
• Size: 40 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-x6 - vue-x6 - Using [custom-renderer](https://vuejs.org/api/custom-renderer.html) to render x6 object in vue. (Frameworks / Vue Component)

README

        
# vue-x6



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

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



## 提供自定义渲染器在vue中直接渲染x6画布

1. 使用`createRender`自定义渲染器

2. 只需抽象create/insert/update/remove既可

3. 最后渲染出来的instance就是Graph/Node/Edge对象，这些对象使用ref可以直接绑定

4. Graph内部将Children做进一步处理，生成带key的子组件（避免list diff导致元素id变化）

## 安装

```

npm install vue-x6

yarn add vue-x6

```

## demo

[online demo](https://codesandbox.io/p/github/lloydzhou/vue-x6/master?file=%2Fsrc%2FApp.vue)

```

import { ref } from 'vue'

import { Snapline } from "@antv/x6-plugin-snapline";

import { Graph, Node, Edge, ElementOfPlugin } from 'vue-x6'

const click = (e) => {

  console.log(e)

}

const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)

const visible = ref(true)

const toggle = () => visible.value = !visible.value

  显示/隐藏node2

  

    

    

    

    

    

    

      

      

      

      

      

      

    

  

```

### x6-vue-shape demo

```

import { register, getTeleport } from "@antv/x6-vue-shape";

import ProgressNode from "./ProgressNode.vue";

register({

  shape: "custom-vue-node",

  width: 100,

  height: 100,

  component: ProgressNode,

});

const TeleportContainer = getTeleport();

  

  

    

  

```

## TODO

- [x] 提供渲染器

- [x] Graph组件

- [x] Node/Edge组件

- [x] ElementOfPlugin函数方便封装官方plugin

- [x] Label(Edge)

- [x] NodePort

- [x] NodeTool/EdgeTool

- [x] SourceMarker/TargetMarker

## TIP

1. vue createRenderer中的createElement也通过包装一层传递root(graph)进去

2. vue createRenderer传递patchProp，这里通过包装一个patchProps一次性更新整个props

3. 这里patchProps中有延时逻辑，所以增加`updated:props`事件监听