关于vue3:vue封装x6为原生组件

antv-x6-vue

github地址：　antv-x6-vue

核心思想

1. 因为x6次要面向编辑场景，所以对每一个节点有更多的交互逻辑。所以，将x6的Shape形象成组件，每一个组件负责管理本人的生命周期。

2. 针对简单的自定义图形，利用x6反对渲染vue组件@antv/x6-vue-shape的性能，同时利用slots将节点渲染交给以后组件，将图形相干逻辑交给x6。

   import { VueShape as VueShapeContainer } from '@antv/x6-vue-shape';
   
   cell.value = new VueShapeContainer({
     id, width, height,
     primer, useForeignObject,
     // 这里将本人的slots中的内容强行放到画布中去
     // 这样图构造的交互还有一些操作逻辑交给x6
     // 通过vue绘制的组件渲染和组件外部交互逻辑交给用户
     component: component
    ? component
    : () => h('div', {key: id, class: 'vue-shape'}, slots.default ? slots.default({props, item: cell}) : null),
     ...otherOptions,
   })
   graph.addCell(cell.value)
   

3. 提供useVueShape，能够很容易的自定义一个vue组件定制进去的节点。

4. 提供useCellEvent，能够比拟不便的给以后节点绑定事件。

   const CustomNode = defineComponent({
     name: 'CustomNode',
     props: [...VueShapeProps, 'otherOptions'],
     inject: [contextSymbol],
     setup(props, context) {
    // 间接传递props给useVueShape，watch的时候不能监听到变动
    const cell = useVueShape(() => props, context)
    useCellEvent('node:click', (e) => context.emit('click', e), { cell })
    return () => null
     }
   })

5. 提供useTeleport，优化x6-vue-shape默认创立多个App导致渲染性能问题。同时避免出现节点数据更新不及时问题。

装置

yarn add antv-x6-vue

Components

• [x] 提供Graph容器以及GraphContext.useContext获取x6的graph对象。能够利用这个对象操作画布，绑定事件。
• [x] 包装Shape作为vue组件＋应用x6-vue-shape封装自定义组件，裸露的组件有：

另外提供帮忙函数

• [x] 形象连贯桩为组件应用

应用Port和PortGroup的时候，能够放在一个以port命名的slot外面（思考到默认的VueShape会将默认的slot认为是用户自定义的节点，这里应用slots.port辨别一下），也能够间接应用默认的slot

<Node id="1" :x="100" :y="100" label="node1">
  <PortGroup name="in" position="top" :attrs="{circle: {r: 6, magnet: true, stroke: '#31d0c6'}}">
    <Port id="id1" />
    <Port id="id2" :magnet="false" />
  </PortGroup>
</Node>
<Node id="2" :x="200" :y="200" label="node2">
  <Port id="id1" />
</Node>

• [x] 提供内置的一些组件

• [x] Widgets

TODO

• [ ] Stencil反对默认分组（不应用StencilGroup的状况）
• [ ] Dnd也作为组件实现
• [x] ContextMenu：实现一个默认的menu，同时裸露一个useContextMenu不便用户定制
• [x] 实现Connecting，也作为组件应用

• [x] 提供PluginInstallFunction，反对全局注册组件（组件有x6-或者X6前缀，例如X6Node,x6-node都会对应后面提到的Node组件）

  <x6-node id="44" :x="400" :y="300" label="node4">
  <x6-port-group name="in" position="top" :attrs="{circle: {r: 6, magnet: true, stroke: '#31d0c6'}}">
    <x6-port id="id1" />
  </x6-port-group>
  </x6-node>

• [x] 反对群组性能。UI嵌套的时候主动调用embed和unembed函数解决父子关系

  <Node id="9" :x="500" :y="200" label="node9" :width="300" :height="200">
  <Node id="99" :x="550" :y="220" label="node99" :width="200" :height="150">
    <Node id="999" :x="580" :y="240" label="node999"></Node>
  </Node>
  </Node>

• [x] 应用Teleport渲染

  默认的x6-vue-shape把每一个节点渲染成一个vue的app导致渲染性能问题
  通过vue3提供的Teleport性能，让以后App的子组件渲染到foreignobject外部。解决性能问题的同时，也能更好的解决VueShape组件外部数据及时更新的问题

DEMO

import { defineComponent, reactive } from 'vue'
import Graph, { Node, Edge, Grid, Background } from 'antv-x6-vue'


export default defineComponent({
  setup(props) {
    // ...
    const state = reactive({
      showGrid: true,
      y: 10,
      visible: true,
    })
    const methods = {
      added(e) {
        console.log('added', e)
      },
      click(e) {
        console.log('click', e)
      },
      changed(e) {
        console.log('changed', e)
      },
    }
    return { ...toRefs(state), ...methods }
  },
})

// template
<template>
  <Graph>
    <Node id="1" :x="100" :y="100" />
    <Node id="2" :x="200" :y="200" />
    <Edge id="e1" source="1" target="2" />
    <VueShape primer="rect" id="3" :x="200" :y="300" :width="160" :attrs="{rect: {fill: '#ddd', stroke: '#333'}, label: {text: 'VueShape'}}">
      <div>这里是一个vue的组件</div>
      <img style="width: 30px;height:30px;" src="https://v3.cn.vuejs.org/logo.png" />
    </VueShape>
    <CustomNode
      v-if="visible"
      primer="circle"
      id="4"
      :x="400" :y="y"
      :attrs="{circle: {fill: '#ddd', stroke: '#333'}, label: {text: 'CustomNode'}}"
      @added="added"
      @click="click"
      @cell:change:position="changed"
    >
      <span>Hello</span>
    </CustomNode>
    <Edge id="e2" source="1" target="3" />
    <Background />
    <Grid :visible="showGrid" />
    <Snapline />
    <Selection />
    <Clipboard />
  </Graph>
</template>