welabx-g6/src/components/graph/graph.js at master · claudewowo/welabx-g6 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
 * g6 流程图构造器
 * 将G6封装后返回
 */

import registerFactory from './register-factory';

export default (G6, config) => {
  const options = Object.assign({
    container:      'canvasPanel',
    width:          window.innerWidth,
    height:         window.innerHeight,
    // renderer:       'svg',
    fitViewPadding: 20,
    animate:        true,
    animateCfg:     {
      duration: 500,
      easing:   'easeLinear',
    },
    layout: {
      type:    'dagre',
      // rankdir: 'LR',
      nodesep: 30,
      ranksep: 30,
    },
    modes: {
      // 允许拖拽画布、缩放画布、拖拽节点
      default: [
        'drag-canvas', // 官方内置的行为
        // 'zoom-canvas',
        /* {
            type:    'click-select',
            trigger: 'ctrl',
        }, */
        /* {
            type:           'drag-node',
            enableDelegate: true,
        }, */
        // 'activate-relations',
        'canvas-event', // 自定义行为
        'delete-item',
        'select-node',
        'hover-node',
        'drag-shadow-node',
        'active-edge',
      ],
    },
    defaultNode: {
      type:  'rect-node',
      style: {
        radius: 10,
      },
    },
    defaultEdge: {
      type:  'polyline-edge', // polyline
      style: {
        radius:          6,
        offset:          15,
        stroke:          '#aab7c3',
        lineAppendWidth: 10, // 防止线太细没法点中
        /* startArrow:      {
            path: 'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
            fill: '#aab7c3',
        }, */
        endArrow:        {
          path:   'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
          fill:   '#aab7c3',
          stroke: '#aab7c3',
        },
      },
    },
    // 默认节点不同状态下的样式集合
    nodeStateStyles: {
      'nodeState:default': {
        fill:   '#E7F7FE',
        stroke: '#1890FF',
      },
      'nodeState:hover': {
        fill: '#d5f1fd',
      },
      'nodeState:selected': {
        fill:   '#caebf9',
        stroke: '#1890FF',
      },
    },
    // 默认边不同状态下的样式集合
    edgeStateStyles: {
      'edgeState:default': {
        stroke:   '#aab7c3',
        endArrow: {
          path:   'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
          fill:   '#aab7c3',
          stroke: '#aab7c3',
        },
      },
      'edgeState:selected': {
        stroke: '#1890FF',
      },
      'edgeState:hover': {
        stroke: '#1890FF',
      },
    },
  }, config);

  const el = typeof options.container === 'string' ? document.getElementById(options.container) : options.container;

  if (el) {
    setTimeout(() => {
      for (let i = 0; i < el.children.length; i++) {
        const dom = el.children[i];

        if (dom.nodeName === 'CANVAS') {
          dom.$id = `${options.container}-canvas`;

          /* 监听键盘事件 */
          document.addEventListener('click', e => {
            // 内部键盘事件是否可被触发
            dom.setAttribute('isFocused', e.target.$id === dom.$id);
          });
          break;
        }
      }
    });

    // 注册自定义节点/边等
    registerFactory(G6);
  } else {
    console.warn('未找到注册节点!');
  }

  return options;
};