react+antvX6制作可编辑图表7——事件系统

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

前情提要： 上一期我们讲了节点和边的交互，这一期我们讲一讲事件系统。

系统鼠标事件

通过鼠标、键盘或者各种可交互的组件与应用产生交互时触发的事件，如单击节点 'node:click' 等。

鼠标事件

鼠标事件包括鼠标点击，鼠标进入，鼠标离开等事件。除了鼠标进入和鼠标离开外，事件回调函数的参数都包含鼠标相对于画布的位置 x、y 和鼠标事件对象 e 等参数。

graph.on('cell:click', ({ e, x, y, cell, view }) => { })
graph.on('node:click', ({ e, x, y, node, view }) => { })
graph.on('edge:click', ({ e, x, y, edge, view }) => { })

我们常常会对不同的cell，node进行不同的操作，所以在函数内部，我们会使用node的名字或者某一个属性值进行判断。

 if (name === 'node:delete') {
    e.stopPropagation()
    view.cell.remove()
  }

节点/边

还可以在节点或者边上添加响应事件，例如： 当节点/边被添加到画布时，触发以下事件：

• added
• cell:added
• node:added（仅当 cell 是节点时才触发）
• edge:added（仅当 cell 是边时才触发）

当节点/边被移除时，触发以下事件：

• removed
• cell:removed
• node:removed（仅当 cell 是节点时才触发）
• edge:removed（仅当 cell 是边时才触发）

当节点/边发生任何改变时，触发以下事件：

• changed
• cell:changed
• node:changed（仅当 cell 是节点时才触发）
• edge:changed（仅当 cell 是边时才触发）

可以在节点/边上监听：

cell.on('changed', ({ cell, options }) => { })

或者在 Graph 上监听：

graph.on('cell:changed', ({ cell, options }) => { })
graph.on('node:changed', ({ node, options }) => { })
graph.on('edge:changed', ({ edge, options }) => { })

示例

例如我们在节点中添加一个删除按钮，只有鼠标移上去的会显示，鼠标移出去就会消失。

首先，在鼠标移入到节点mouseenter时，给每个节点添加一个删除按钮。节点小工具中就有删除按钮，我们再使用node.addTools的方式添加。

graph.on('node:mouseenter', ({ node }) => {
      node.addTools({
        name: 'button-remove',
        args: {
          x: 0,
          y: 0,
          offset: { x: 10 * rate, y: 10 * rate }
        }
      });
    });

然后在鼠标移出节点mouseleave时，删除button-remove名称的按钮。

    graph.on('node:mouseleave', ({ node }) => {
      node.removeTool('button-remove');
    });