EditorEvent

编辑器的选中/取消事件，通过 app.editor.on() 监听。

事件属性

editor: Editor

编辑器对象。

value：UI | UI[]

选中 / hover 元素。

oldValue：UI | UI[]

旧的选中 / hover 元素。

list： UI[]

选中 / hover 元素列表，没有时为空数组。

oldList： UI[]

旧的选中 / hover 元素列表，没有时为空数组。

事件名称

EditorEvent.BEFORE_SELECT

before 选择元素事件。

editor.before_select

EditorEvent.SELECT

选择元素事件。

选择和取消都会触发， 通过 editor.target 获取选中的元素。

editor.select

EditorEvent.BEFORE_HOVER

before hover 元素事件。

editor.before_hover

EditorEvent.HOVER

hover 元素事件。

选择和取消都会触发， 通过 editor.hoverTarget 获取选中的元素列表。

editor.hover

继承事件

Event

示例

监听选择事件

select.ts

// #图形编辑器 [选中元素事件]
import { App, Rect } from 'leafer-ui'
import { EditorEvent } from '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: {}
})

app.tree.add(Rect.one({ fill: '#32cd79', editable: true }, 100, 100))
app.tree.add(Rect.one({ fill: '#32cd79', editable: true }, 300, 100))

app.editor.on(EditorEvent.SELECT, (e: EditorEvent) => {
    console.log(e.editor.list)
})

select.js

import { App, Rect } from 'leafer-ui'
import { EditorEvent } from '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: {}
})

app.tree.add(Rect.one({ fill: '#32cd79', editable: true }, 100, 100))
app.tree.add(Rect.one({ fill: '#32cd79', editable: true }, 300, 100))

app.editor.on(EditorEvent.SELECT, (e) => {
    console.log(e.editor.list)
})