编辑器事件

EditorEvent

基础事件。

继承 Event 事件。

事件属性

editor: Editor

编辑器对象。

value：UI | UI[]

选中 / hover 元素。

oldValue：UI | UI[]

旧的选中 / hover 元素。

list： UI[]

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

oldList： UI[]

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

事件名称

EditorEvent.SELECT

选择元素事件。

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

editor.select

EditorEvent.HOVER

hover 元素事件。

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

editor.hover

EditorMoveEvent

移动事件。

继承 EditorEvent 事件。

事件属性

moveX: number

X 轴移动距离（世界坐标）

moveY: number

Y 轴移动距离（世界坐标）

事件名称

EditorMoveEvent.MOVE

移动元素事件。

editor.move

EditorScaleEvent

缩放大小事件。

继承 EditorEvent 事件。

事件属性

worldOrigin: IPointData

围绕的中心点（世界坐标）。

scaleX: number

X 轴的缩放值

scaleY: number

Y 轴的缩放值

transform?: IMatrixData

变换属性，当选择多个元素进行缩放大小时，内部会通过 transform 操作元素进行变换。

事件名称

EditorScaleEvent.SCALE

缩放大小事件（调整元素大小）。

editor.scale

EditorRotateEvent

旋转事件。

继承 EditorEvent 事件。

事件属性

rotation: number

旋转角度。

transform?: IMatrixData

变换属性，当选择多个元素进行旋转时，内部会通过 transform 操作元素进行变换。

事件名称

EditorRotateEvent.ROTATE

旋转元素事件。

editor.rotate

EditorSkewEvent

倾斜事件。

继承 EditorEvent 事件。

事件属性

worldOrigin: IPointData

围绕的中心点（世界坐标）。

skewX: number

X 轴倾斜值。

skewY: number

Y 轴倾斜值。

transform?: IMatrixData

变换属性，当选择多个元素进行倾斜时，内部会通过 transform 操作元素进行变换。

事件名称

EditorSkewEvent.SKEW

倾斜元素事件。

editor.skew

示例

监听选择事件

import { App, Rect } from 'leafer-ui'
import { EditorEvent } from '@leafer-in/editor'

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

app.tree.add(Rect.one({ fill: 'rgb(50,205,121)', editable: true }, 100, 100))
app.tree.add(Rect.one({ fill: 'rgb(50,205,121)', editable: true }, 300, 100))

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