Vue Nodes

React Nodes

Angular Nodes

</div>

</template>

import { defineComponent } from 'vue'

import ProgressNode from './components/ProgressNode.vue'

import { Graph } from '@antv/x6'

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

shape: 'custom-vue-node',

width: 100,

height: 100,

component: ProgressNode,

})

const TeleportContainer = getTeleport()

export default defineComponent({

name: 'App',

components: {

TeleportContainer,

mounted() {

const graph = new Graph({

container: document.getElementById('container')!,

background: {

color: '#F2F7FA',

autoResize: true,

})

graph.addNode({

shape: 'custom-vue-node',

x: 100,

y: 60,

})

</script>

<el-progress type="dashboard" :percentage="percentage" :width="80">

</template>

</el-progress>

</template>

import { defineComponent } from 'vue'

export default defineComponent({

name: 'ProgressNode',

inject: ['getNode'],

data() {

return {

percentage: 80,

}

mounted() {

const node = (this as any).getNode()

console.log(node)

})

</script>

Updating Nodes

To update the content of a Vue node, there are two methods:

Listen for node events within the component and trigger events externally.

Use state management tools like Vuex (not elaborated here, but used in the same way as regular Vue components with Vuex data).

Below is an introduction to dynamically updating node content using events:

const node = graph.addNode({
  shape: 'custom-vue-node',
  x: 100,
  y: 60,
  data: {
    progress: 80,
  },
})

setInterval(() => {
  const { progress } = node.getData()
  node.setData({
    progress: (progress + 10) % 100,
  })
}, 2000)

Inside the node component, we can listen for changes to the node's data:

export default defineComponent({
  name: 'ProgressNode',
  inject: ['getNode'],
  data() {
    return {
      percentage: 80,
    }
  },
  mounted() {
    const node = (this as any).getNode() as Node
    node.on('change:data', ({ current }) => {
      const { progress } = current
      this.percentage = progress
    })
  },
})

Using in Vue 2

In the above example, we used Teleport, a feature in Vue 3. How can we use it in Vue 2?

<template>
  <div id="app"></div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import CustomNode from './components/CustomNode.vue'
  import { Graph } from '@antv/x6'
  import { register } from '@antv/x6-vue-shape'

  register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: CustomNode,
  })

  export default Vue.extend({
    name: 'App',
    mounted() {
      const graph = new Graph({
        container: document.getElementById('app'),
        width: 1000,
        height: 1000,
      })

      graph.addNode({
        shape: 'custom-vue-node',
        x: 100,
        y: 100,
      })
    },
  })
</script>

The node component is written in the same way as above.

X6

Vue Nodes

This chapter mainly introduces knowledge related to Vue nodes. By reading, you can learn

Rendering Nodes

Note

Updating Nodes

Using in Vue 2

Note