vue shape

[lloydzhou]

使用vue-shape

1. 利用x6 graph和x6-vue-shape管理图关联关系
2. x6-vue-shape内部的UI组件实际上可以和最外层的组件处在同一级

3. 提供useVueShape，可以很容易的自定义一个vue组件定制出来的节点。
4. 使用useCellEvent，可以比较方便的给当前节点绑定事件。

const CustomNode = defineComponent({
  name: 'CustomNode',
  props: [...VueShapeProps, 'otherOptions'],
  inject: [contextSymbol],
  setup(props, context) {
    const cell = useVueShape(props, context)
    useCellEvent('node:click', (e) => context.emit('click', e), { cell })
    return () => null
  }
})

// template
<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>