# 事件

LogicFlow提供了事件系统用于告知开发者当前流程图发生的事件。事件的详细用法见事件

# 节点事件

事件名 说明 事件对象
element:click 元素单击 data, e, position
node:click 节点单击 data, e, position
node:dbclick 节点双击 data, e, position
node:mousedown 鼠标按下节点 data, e
node:mouseup 鼠标抬起节点 data, e
node:mousemove 鼠标移动节点 data, e
node:mouseenter 鼠标进入节点 data, e
node:mouseleave 鼠标离开节点 data, e
node:delete 节点的删除 data
node:add 节点的添加 data
node:dnd-add 外部拖入节点添加时触发 data
node:dnd-drag 外部拖入节点拖拽中触发 data
node:dragstart 节点开始拖拽 data, e
node:drag 节点拖拽 data, e
node:drop 节点拖拽放开 data, e
node:contextmenu 右键点击节点 data, e, position

事件对象包含如下内容:

属性 类型
data Object 节点的数据属性
e MouseEvent 原生的鼠标事件对象
position Object 鼠标触发点在画布中的坐标(参照getPointByClient的返回值)

# 边事件

事件名 说明 事件对象
element:click 元素单击 data, e, position
edge:click 边单击 data, e, position
edge:dbclick 边双击 data, e
edge:mouseenter 鼠标进入边 data, e
edge:mouseleave 鼠标离开边 data, e
edge:add 边增加 data
edge:delete 边删除 data
edge:contextmenu 边右键 data, e, position
edge:adjust 边拖拽调整 data
edge:exchange-node 调整边的起点/终点 data
connection:not-allowed 不允许建立连接 data, msg

事件对象包含如下内容:

属性 类型
data Object 边的数据属性
e MouseEvent 原生的鼠标事件对象
position Object 鼠标触发点在画布中的坐标(参照getPointByClient的返回值)
msg String 边校验信息

# 锚点事件

事件名 说明 事件对象
anchor:dragstart 锚点连线开始拖动 data, e, nodeModel
anchor:drop 锚点连线拖动完成 data, e, nodeModel

事件对象包含如下内容:

属性 类型
data Object 锚点数据
e MouseEvent 原生的鼠标事件对象
nodeModel Object 锚点所属的节点

# 画布事件

事件名 说明 事件对象
blank:mousedown 画布鼠标按下 e
blank:mousemove 画布鼠标移动 e
blank:mouseup 画布鼠标抬起 e
blank:click 画布单击 e
blank:contextmenu 画布右键 e, position
blank:dragstart 画布开始拖拽 e
blank:drag 画布拖拽 e
blank:drop 画布拖拽放开 e
text:update 文案更新 data
graph:transform 画布平移或者缩放触发 data
graph:rendered 画布渲染数据后触发. 即lf.render(graphData)方法被调用后触发。 v1.1.0新增 graphData

事件对象包含如下内容:

属性 类型
e MouseEvent 原生的鼠标事件对象
position Object 鼠标触发点在画布中的坐标(参照getPointByClient的返回值)

# History 事件

History 用来记录画布上的每一次改动,当画布上的元素发生变化时会触发history:change事件。

事件名 说明 事件对象
history:change 画布变化 data

事件对象中的 data 属性包含以下内容。

属性 类型 说明
undos Array 可撤销的 graph 快照
redos Array 可重做的 graph 快照
undoAble Boolean 是否可以撤销
redoAble Boolean 是否可以重做

# 选区事件

当同时选中多个节点形成选区是,选区触发的事件

事件名 说明 事件对象
selection:selected 选区框选后触发 所有选中的元素
selection:mousedown 选区鼠标按下 e
selection:dragstart 选区开始拖拽 e
selection:drag 选区拖拽 e
selection:drop 选区拖拽放开 e
selection:mousemove 选区鼠标移动 e, position
selection:mouseup 选区鼠标松开 e
selection:contextmenu 选区右键 e

事件对象包含如下内容:

属性 类型
e MouseEvent 原生的鼠标事件对象
position Object 鼠标触发点在画布中的坐标(参照getPointByClient的返回值)

# on

图的监听事件

参数:

名称 类型 必传 默认值 描述
evt String - 事件名称
callback String - 回调函数

示例:

const { eventCenter } = lf.graphModel;

eventCenter.on('node:click', (args) => {
  console.log('node:click', args.position)
})
eventCenter.on('element:click', (args) => {
  console.log('element:click', args.e.target)
})

# off

删除事件监听

参数:

名称 类型 必传 默认值 描述
evt String - 事件名称
callback String - 回调函数

示例:

const { eventCenter } = lf.graphModel;
eventCenter.off('node:click', () => {
  console.log('node:click off')
})
eventCenter.off('element:click', () => {
  console.log('element:click off')
})

# once

事件监听一次

参数:

名称 类型 必传 默认值 描述
evt String - 事件名称
callback String - 回调函数

示例:

const { eventCenter } = lf.graphModel;

eventCenter.once('node:click', () => {
  console.log('node:click')
})

# emit

触发事件

参数:

名称 类型 必传 默认值 描述
evt String - 事件名称
args Array - 触发事件参数

示例:

const { eventCenter } = lf.graphModel;
eventCenter.emit("custom:button-click", data);