事件系统

EditorHost 内置类型安全的事件总线，插件和用户代码都可以发布/订阅事件。

事件监听与移除

import type { ElementEventData } from 'vkedit'

// 监听事件（使用具名函数）
const onElementAdded = (data: ElementEventData) => {
  console.log('元素已添加:', data.element.id)
}
host.on('element:added', onElementAdded)

// 移除特定监听（传入同一函数引用）
host.off('element:added', onElementAdded)

移除监听

在组件卸载时务必移除事件监听，否则会导致内存泄漏。使用具名函数而非匿名函数，以便精确移除。

事件回调参数

所有事件回调接收一个 payload 对象。例如 element:added 的 payload 包含 element（元素实例）、elementId、timestamp、source 等字段。

内置事件列表

元素事件

事件名	Payload 关键字段	触发时机
element:added	element, elementId	元素被添加到画布
element:removed	element, elementId	元素被删除
element:transformed	element, oldState, newState, transformType	元素位置/大小/旋转变化
element:updated	element, updatedProperties	元素属性更新
element:copied	element, elementId	元素被复制
element:pasted	element, elementId	元素被粘贴
element:cloned	element, elementId	元素被克隆

选择事件

事件名	Payload 关键字段	触发时机
selection:changed	selection（IGraphicElement[]）	选中元素集合变化（包括清空选择时触发，payload 中 selection 为空数组）

舞台事件

事件名	Payload 关键字段	触发时机
stage:mousedown	point, target, evt	画布鼠标按下
stage:mousemove	point, target, evt	画布鼠标移动
stage:mouseup	point, target, evt	画布鼠标释放
stage:click	point, target, evt	画布点击
stage:dblclick	point, element, elementId	画布双击
stage:keydown	evt	键盘按下

命令历史事件

事件名	Payload 关键字段	触发时机
command:executed	command	命令执行
command:undone	command	命令撤销
command:redone	command	命令重做

状态事件

事件名	Payload 关键字段	触发时机
host:status-changed	status	画布状态变化（尺寸、DPM、缩放等）
plugin:registered	plugin	插件注册
plugin:unregistered	plugin	插件注销

视图事件

事件名	Payload 关键字段	触发时机
view:snap-change	zoom	吸附开关切换

缩放变化监听

view:zoom-change 事件目前在类型中定义但尚未实际触发。如需监听缩放变化，请监听 host:status-changed 事件并检查 status.zoom 是否变化。

在 Vue 中使用

<script setup lang="ts">
import { createEditorHost, type SelectionEventData } from 'vkedit'
import { ref, onMounted, onUnmounted } from 'vue'

const host = createEditorHost()
const selectedCount = ref(0)

const onSelectionChanged = (data: SelectionEventData) => {
  selectedCount.value = data.selection.length
}

onMounted(() => {
  host.on('selection:changed', onSelectionChanged)
})

onUnmounted(() => {
  host.off('selection:changed', onSelectionChanged)
})
</script>

下一步

• 事件系统详解 -- 完整事件列表和自定义事件
• 插件系统 -- 插件如何发布事件