前言

本文记录了使用G6开发工作流设计器的基础技术POC，目前实现节点绘制，边绘制，节点选择事件

代码

import { Component, OnInit } from '@angular/core';
import * as G6 from '@antv/g6';
import * as dagre from 'dagre';

@Component({
  selector: 'app-workflow-node',
  templateUrl: './workflow-node.component.html',
  styleUrls: ['./workflow-node.component.css']
})
export class WorkflowNodeComponent implements OnInit {

  constructor() { }
  data:any = {
    nodes: [
      {      id: 'node1',      label: '开始',      x: 50,       size:50, y: 50   },
      {      id: 'node2',      label: '起草提起书', x: 150, shape: 'rect',      size:[100,50], y: 100   },
      {      id: 'node3',      label: '受理',      x: 150,      shape: 'rect',      size:[100,50],      y: 200   },
      {      id: 'node4',      label: '认证',      x: 200,      shape: 'rect',      size:[100,50],      y: 300   },
      {      id: 'node5',      label: '复核',      x: 250,      shape: 'rect',      size:[100,50],      y: 400   },
      {      id: 'node6',      label: '签发',      x: 300,      shape: 'rect',      size:[100,50],      y: 500   },
      {      id: 'node7',      label: '结束',      x: 350,         size:50,      y: 600   }
],
    edges: [
      {      source: 'node1',      target: 'node2', label : '提起申请'  },
      {      source: 'node2',      target: 'node3', label : '受理'   },
      {      source: 'node3',      target: 'node4', label : '分配认定人'   },
      {      source: 'node4',      target: 'node5', label : '邀请复核'   },
      {      source: 'node5',      target: 'node6', label : '申请签发'   },
      {      source: 'node6',      target: 'node7', label : '签发'   },
      {      source: 'node3',      target: 'node2', label : '打回' }
  ]
  };
  ngOnInit() {
    let that = this;
    let g = new dagre.graphlib.Graph();
    g.setDefaultEdgeLabel(function() {
      return {};
    });
    g.setGraph({
      rankdir: 'TB'
    });
    this.data.nodes.forEach(function(node) {
      /*node.label = node.id;*/
      g.setNode(node.id, {
        width: 150,
        height: 50
      });
    });
    this.data.edges.forEach(function(edge) {
      g.setEdge(edge.source, edge.target);
    });
    dagre.layout(g);
    let coord = void 0;
    g.nodes().forEach(function(node, i) {
      coord = g.node(node);
      that.data.nodes[i].x = coord.x;
      that.data.nodes[i].y = coord.y;
    });
    g.edges().forEach(function(edge, i) {
      coord = g.edge(edge);
      that.data.edges[i].startPoint = coord.points[0];
      that.data.edges[i].endPoint = coord.points[coord.points.length - 1];
      that.data.edges[i].controlPoints = coord.points.slice(0.5, coord.points.length - 1);
    });
    const graph = new G6.Graph({
      container: 'mountNode',
      width: 1000,
      height: 900,
      modes: {
        default: ['drag-node', 'drag-canvas', 'zoom-canvas']
      },
      nodeStyle: {
        // 节点在默认状态下的样式
        default: {
          fill: '#1890FF',
          stroke: '#1890FF'
        },
        // 当节点在 selected 状态下的样式                         
        selected: {
          lineWidth: 6,
          fillOpacity: 0.5
        },
        active:{
          lineWidth: 6,
          fillOpacity: 0.5
        }
      },
      defaultEdge: {
        shape: 'polyline'
      },
      edgeStyle: {
        default: {
          endArrow: true,
          lineWidth: 2,
          stroke: '#ccc'
        }
      }
    });

    G6.registerBehavior('bedit', {
      getDefaultCfg() {
        return {
          multiple: false
        };
      },
      getEvents() {
        return {
          'node:click': 'onNodeClick'
        }
      },
      onNodeClick(e) {
        const graph = this.graph;
        const item = e.item;
        if (item.hasState('active')) {
          graph.setItemState(item, 'active', false);
          return;
        }
        // this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态
        console.log(this.multiple);
        if (!this.multiple) {
          this.removeNodesState(graph);
        }
        // 置点击的节点状态为active
        graph.setItemState(item, 'active', true);
      },
      onEdgeClick(evt) {
        console.log("Edge:Click");
        console.log(evt);
      },
      onMouseMove(evt) {
        console.log("MouseMove");
        console.log(evt);
      },
      removeNodesState(graph) {

        graph.findAllByState('node', 'active').forEach(node => {
          console.log(node)
          graph.setItemState(node, 'active', false);
        });
      }
    });

    graph.data(this.data);
    graph.render();
    graph.setMode('edit');
    graph.addBehaviors('bedit', 'default');
    graph.fitView();

  }

}