antv x6流程图图绘制编辑：初始化配置（一）

最近使用Vue开发中，需要实现流程图的编辑和绘制，发现了一款好用的图编辑框架antv x6  点击查看官网api

安装

通过 npm 或 yarn 命令安装 X6。

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

使用

 <!--绘图面板组件-->
 <div id="container" class="x6-graph"/>

// 导入 Graph 
import { Graph } from '@antv/x6';
// 初始化面板
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
 // 格子属性
  grid: {
       size: 10,// 网格大小 10px
       visible: true,// 渲染网格背景
       type: 'dot',// 网格类型
   },
});

const  data = {
  // 节点
  nodes: [
    {
      id: 'node1', // String，可选，节点的唯一标识
      x: 40,       // Number，必选，节点位置的 x 值
      y: 40,       // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'hello', // String，节点标签
    },
  ],
  // 边
  edges: [
    {
      source: 'node1', // String，必须，起始节点 id
      target: 'node2', // String，必须，目标节点 id
    },
  ],
};
// 渲染节点数据
graph.fromJSON(data)

实际项目

效果图

vue项目结构

 

开发步骤

流程图组件结构

建立graph文件初始化流程图相关配置  多余代码...源码到git下载

• data.js 存放初始化流程图数据

const graphData = {
  cells: [
    {
    // 设置节点位置
      position: {
        x: 420,
        y: 40
      },
      size: {
        width: 80,// 节点 widrth 值
        height: 42// 节点 height 值
      },
// 设置节点样式
      attrs: {
        text: {
          text: '开始',
          nodeType: 'start'
        }
      },
      shape: 'flow-chart-rect',
      zIndex: 1
    },
}

export default graphData

• shape.js 存放节点库的节点配置

注意：

1.自定义节点的时候，图片引入通过require导入

2.ports：链接桩是节点上的固定连接点。很多图应用都有链接桩，并且有些应用还将链接桩分为输入链接桩和输出连接桩。

建节点时我们可以通过 ports 选项来配置链接桩，像下面这样：

 ports: {
    groups: { ... }, // 链接桩组定义
    items: [ ... ],  // 链接桩
  }
// 或者
  ports: [ ... ],  // 链接桩

import { Graph, Dom, Node } from '@antv/x6'
export const ChartH5Rect = Graph.registerNode('flow-H5-rect', {
  inherit: 'rect',
  ...
  attrs: {
    body: {...},
    image: {
      'xlink:href':
        require('../../../assets/h5.png'),
      ...
    }
  },
  markup: [
    ...
    {
      tagName: 'image',
      selector: 'image'
    },
  ],
  ports: {
    groups: {...},
    items: [
      {
        group: 'top'
      },
...
    ]
  }
})
Graph.registerNode('groupNode', NodeGroup)

• index.js初始化流程图和渲染数据

注意：

1.grid是网格，

2.selecting内是点选/框选，默认禁用。创建画布时，通过selecting的配置开启选择交互，开启后可以通过点击或者套索框选节点。

3.connecting:配置全局的连线规则

import { Graph, FunctionExt, Shape, Addon } from '@antv/x6'
import './shape'
import graphData from './data'
export default class FlowGraph {
  // 类构造方法
  constructor () {
    this.initGraph()
    this.initStencil()
    this.initEvent()
  }
  initGraph () {// 初始化面板
    this.graph = new Graph({
      container: document.getElementById('container'),
      // 格子属性
      grid: {...},
      selecting: {....},
      connecting: {....},
    })
  }
  initStencil () { // 初始化左侧组件
    this.stencil = new Addon.Stencil({
      target: this.graph,
      ...
    })
  }
  initGraphShape () { // 面板渲染
    this.graph.fromJSON(graphData)
  }
  initEvent () {// 初始化事件
    ...
   }
}

在页面中创建用于容纳 X6 绘图的容器元素

1.stencil 左侧节点库

2.panel 操作栏

3.container画布

  <!--左侧工具栏-->
  <div id="stencil" class="sider"></div>
  <div class="panel">
     <div class="toolbar">
       <tool-bar :flowGraph="flowGraph" />
     </div>
   </div>
  <!--绘图面板组件-->
  <div id="container" class="x6-graph"/></div>
  <!--配置面板组件：传递flowGraph给子组件使用-->
  <div class="config">
      <config-panel :flowGraph="flowGraph"/>
  </div>