state.activeBusinessChildName

wujingjing

2025-04-16 692c19940b25bedd5b3d0e2cf2b8e73fe440f5c6

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
/**
 * @author claude
 * @date 2020/3/15
 * @description 边激活事件
 */
 
import G6 from '@antv/g6'
 
export default (g6: typeof G6) => {
  g6.registerBehavior('active-edge', {
    getDefaultCfg() {
      return {
        // editMode: false, // 当前的编辑状态
      }
    },
    getEvents() {
      return {
        'canvas:click': 'onCanvasClick',
        'edge:click': 'onEdgeClick',
        'edge:dblclick': 'ondblEdgeClick',
        'edge:mouseenter': 'onMouseEnter',
        'edge:mousemove': 'onMouseMove',
        'edge:mouseleave': 'onMouseLeave'
      }
    },
    shouldBegin(e) {
      return true
    },
    onCanvasClick(e) {
      this._clearSelected()
    },
    onEdgeClick(e) {
      if (!this.shouldBegin(e)) return
 
      this._clearSelected()
      // 设置当前节点的 click 状态为 true
      e.item.setState('edgeState', 'selected')
      // this.graph.setItemState(e.item, 'edgeState', 'selected');
      // 将点击事件发送给 graph 实例
      this.graph.emit('after-edge-selected', e)
    },
    ondblEdgeClick(e) {
      if (!this.shouldBegin(e)) return
 
      this._clearSelected()
      // 设置当前节点的 click 状态为 true
      e.item.setState('edgeState', 'selected')
      // 将点击事件发送给 graph 实例
      this.graph.emit('after-edge-dblclick', e)
    },
    // hover edge
    onMouseEnter(e) {
      if (!this.shouldBegin(e)) return
 
      if (!e.item.hasState('edgeState:hover') && !e.item.hasState('edgeState:selected')) {
        e.item.setState('edgeState', 'hover')
      }
      this.graph.emit('on-edge-mouseenter', e)
    },
    onMouseMove(e) {
      if (!this.shouldBegin(e)) return
 
      this.graph.emit('on-edge-mousemove', e)
    },
    // out edge
    onMouseLeave(e) {
      if (!this.shouldBegin(e)) return
 
      if (!e.item.hasState('edgeState:selected')) {
        e.item.setState('edgeState', 'default')
      }
      this.graph.emit('on-edge-mouseleave', e)
    },
    // 清空已选
    _clearSelected() {
      const selectedNodes = this.graph.findAllByState('node', 'nodeState:selected')
 
      selectedNodes.forEach((node) => {
        node.clearStates('nodeState:selected')
      })
 
      const selectedEdges = this.graph.findAllByState('edge', 'edgeState:selected')
 
      selectedEdges.forEach((edge) => {
        edge.clearStates('edgeState:selected')
      })
      this.graph.emit('after-edge-selected')
    }
  })
}