# 事件 Event

当我们使用鼠标或其它方式与画布交互时,会触发的对应的事件。通过监听这些事件,可以获取其在触发时所产生的数据,根据这些数据来实现需要的功能。

所有的事件都可以通过lf.on()进行监听。

lf.on('element:type', (eventObject) => {});

# 节点事件

事件名 说明 事件对象
'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 连线校验信息

# 画布事件

事件名 说明 事件对象
'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

事件对象包含如下内容。

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

# History 事件

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

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

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

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

# 示例