Home

Awesome

vue-x6

<a href="https://www.npmjs.com/package/vue-x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/vue-x6.svg?style=flat-square"></a> npm bundle size npm <a href="/LICENSE"><img src="https://img.shields.io/github/license/lloydzhou/vue-x6?style=flat-square" alt="MIT License"></a>

提供自定义渲染器在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

<script setup lang="ts">
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
</script>

<template>
  <button @click="toggle">显示/隐藏node2</button>
  <Graph grid>
    <SnaplinePlugin key="Snapline" />
    <Node id="1" label="node1" :x="100" :y="100" :width="80" :height="40" @click="click" >
    </Node>
    <Node id="2" label="node2" :x="200" :y="200" :width="80" :height="40" @click="click" v-if="visible" />
    <Node id="3" label="node3" :x="200" :y="100" :width="80" :height="40" parent="1" @click="click" />
    <Edge v-if="visible" source="1" target="2" @click="click">
      <EdgeTool name="button-remove" :args='{ x: 10, y: 10 }' />
      <Label :attrs='{text: {text: "Hello Label1"}}' :position='{distance: 0.3}' />
      <Label :attrs='{text: {text: "Hello Label3"}}' :position='{distance: 0.5}' />
      <Label :attrs='{text: {text: "Hello Label2"}}' :position='{distance: 0.7}' />
      <SourceMarker name="diamond" />
      <TargetMarker name="ellipse" />
    </Edge>
  </Graph>
</template>

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();

<template>
  <TeleportContainer />
  <Graph grid>
    <Node shape="custom-vue-node" :x="400" :y="100" />
  </Graph>
</template>

TODO

TIP

  1. vue createRenderer中的createElement也通过包装一层传递root(graph)进去
  2. vue createRenderer传递patchProp，这里通过包装一个patchProps一次性更新整个props
  3. 这里patchProps中有延时逻辑，所以增加updated:props事件监听