Vue.js 使用AntV X6的示例步驟

更新時(shí)間：2021年05月27日 11:44:05 作者：淮南一只貓

X6 是 AntV 旗下的圖編輯引擎，提供了一系列開(kāi)箱即用的交互組件和簡(jiǎn)單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應(yīng)用。接下來(lái)就看看vue如何使用它

0x0 前言

因?yàn)轫?xiàng)目用到流程圖，并且需求也算是不詳細(xì)，所以選擇比較靈活的 x6 圖形編輯器作為流程圖編輯器，從文檔來(lái)看不算復(fù)雜，這邊就是作為參考教程。

Antv X6 文檔

0x1 安裝

根據(jù)教程提示安裝 x6 依賴(lài)即可，然后新建個(gè)容器進(jìn)行實(shí)例化：

<div ref="containerRef" class="area-center-container" />

const data = {
  // 節(jié)點(diǎn)
  nodes: [
    {
      id: 'node1', // String，可選，節(jié)點(diǎn)的唯一標(biāo)識(shí)
      x: 40,       // Number，必選，節(jié)點(diǎn)位置的 x 值
      y: 40,       // Number，必選，節(jié)點(diǎn)位置的 y 值
      width: 80,   // Number，可選，節(jié)點(diǎn)大小的 width 值
      height: 40,  // Number，可選，節(jié)點(diǎn)大小的 height 值
      label: 'hello', // String，節(jié)點(diǎn)標(biāo)簽
    },
    {
      id: 'node2', // String，節(jié)點(diǎn)的唯一標(biāo)識(shí)
      x: 160,      // Number，必選，節(jié)點(diǎn)位置的 x 值
      y: 180,      // Number，必選，節(jié)點(diǎn)位置的 y 值
      width: 80,   // Number，可選，節(jié)點(diǎn)大小的 width 值
      height: 40,  // Number，可選，節(jié)點(diǎn)大小的 height 值
      label: 'world', // String，節(jié)點(diǎn)標(biāo)簽
    },
  ],
  // 邊
  edges: [
    {
      source: 'node1', // String，必須，起始節(jié)點(diǎn) id
      target: 'node2', // String，必須，目標(biāo)節(jié)點(diǎn) id
    },
  ],
}

function initGraph() {
  const graph = new Graph({
    container: this.$refs.containerRef,
    grid: {
      size: 10, // 網(wǎng)格大小 10px
      visible: true // 渲染網(wǎng)格背景
    },
    snapline: {
      enabled: true, // 對(duì)齊線
      sharp: true
    },
    scroller: {
      enabled: true,
      pageVisible: false,
      pageBreak: false,
      pannable: true
    }
  })
  // 畫(huà)布居中
  graph.centerContent()

  graph.fromJSON(data)
}

就這樣最簡(jiǎn)單例子實(shí)現(xiàn)了，上面不同的參數(shù)請(qǐng)參考文檔對(duì)應(yīng)的解釋。

0x2 節(jié)點(diǎn)側(cè)邊欄

根據(jù)文檔的 stencil 例子，可以簡(jiǎn)化很多代碼量，直接用封裝好的業(yè)務(wù)就行了，和上面一樣直接寫(xiě)個(gè)容器實(shí)例化即可：

<el-aside ref="stencilRef" class="area-left" />

this.stencil = new Stencil({
    title: '流程節(jié)點(diǎn)側(cè)邊欄',
    target: graph,
    search: false,
    collapsable: true,
    stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
    stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
    groups: [
        {
            name: 'group',
            title: '流程圖節(jié)點(diǎn)',
            collapsable: false
          }
        ],
    getDropNode: node => {
        let cloneNode = node.clone()
        switch (node.shape) {
            case 'rect':
                cloneNode = new RectShape()
                break
            case 'circle':
                cloneNode = new CircleShape()
                break
            case 'polygon':
                cloneNode = new PolylineShape()
                break
        }
        cloneNode.updateInPorts(graph)
        return cloneNode
    }
})
// 加載節(jié)點(diǎn)
this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')