antv-x6在vue中使用：拖拽 Dnd、Stencil——以小诺管理平台为例

1、说明

由于antv-x6刚刚开放不久，一方面网上资料很少，此外antv目前官方的实例基本都是以react作为demo进行演示，所以vue的示例几乎没有，自己按照官方文档的react写了一个vue版本，仅供参考。

2、效果

先看一下demo的效果，如下所示

这是官方网文档的效果，同时官方也给了react版本的demo：https://codesandbox.io/s/wbltl 所以如果你用的是react，那么直接按照react的demo直接写就可以了。

下面来看看用vue集成之后的效果，如下图所示：

3、准备：

vue我的用的是小诺管理平台的开源版本，作为底座。这是他们的官方：https://www.xiaonuo.vip/  这是我用的开源版本  https://www.xiaonuo.vip/  演示；有需要的可以直接去官方上下一个开源版本测试一下

4、antv-x6在vue中使用demo：

<template>

  <div class="content">
    <div class="app-stencil" ref="stencilContainer">
    </div>
    <div class="app-content" ref="container">
    </div>
  </div>

</template>

<script>
import { Graph, Shape, Addon } from '@antv/x6';

const { Stencil } = Addon

const { Rect, Circle } = Shape

export default {
  name: "index",
  mounted () {
    this.init();
  },
  methods: {
    init(){
      const graph = new Graph({
        container: this.$refs.container,
        grid: true,
        snapline: {
          enabled: true,
          sharp: true,
        },
        scroller: {
          enabled: true,
          pageVisible: false,
          pageBreak: false,
          pannable: true,
        },
      })

      const source = graph.addNode({
        x: 130,
        y: 30,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'Hello',
            fill: '#6a6c8a',
          },
          body: {
            stroke: '#31d0c6',
          },
        },
      })
      const target = graph.addNode({
        x: 320,
        y: 240,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'World',
            fill: '#6a6c8a',
          },
          body: {
            stroke: '#31d0c6',
          },
        },
      })

      graph.addEdge({ source, target })

      graph.centerContent()

      const stencil = new Stencil({
        title: 'Components',
        target: graph,
        search: true,
        collapsable: true,
        stencilGraphWidth: 200,
        stencilGraphHeight: 180,
        groups: [
          {
            name: 'group1',
            title: 'Group(Collapsable)',
          },
          {
            name: 'group2',
            title: 'Group',
            collapsable: false,
          },
        ],
      })


      this.$refs.stencilContainer.appendChild(stencil.container)

      const r = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })

      const c = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })

      const c2 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#4B4A67', 'stroke-width': 6, stroke: '#FE854F' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })

      const r2 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#4B4A67', stroke: '#31D0C6', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })

      const r3 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })

      const c3 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })

      stencil.load([r, c, c2, r2.clone()], 'group1')
      stencil.load([c2.clone(), r2, r3, c3], 'group2')
    }

  }
}

</script>

<style scoped>

.content {
  font-family: sans-serif;
  display: flex;
}

.app-stencil {
  width: 250px;
  border: 1px solid #f0f0f0;
  position: relative;
}

.app-content {
  flex: 1;
  height: 520px;
  margin-left: 8px;
  margin-right: 8px;
  box-shadow: 0 0 10px 1px #e9e9e9;
}

.x6-graph-scroller {
  border: 1px solid #f0f0f0;
  margin-left: -1px;
}
</style>