关于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>