自定义控制点
自定义内部编辑器的第 2 步是： 自定义控制点。
控制点一般用来调整路径节点，文本编辑器需要通过创建 DOM 代替控制点，可自由定义。
自定义步骤
1. 创建控制点
在 onCreate() 方法中创建自定义控制点。
实例化内部编辑器时会自动调用此方法。
2. 载入控制点
在 onLoad() 方法中添加控制点到视图中。
当用户双击元素时，会打开内部编辑器，自动调用此方法载入。
3. 更新控制点
在 onUpdate() 方法中更新控制点位置、状态。
当用户操作视图、元素时，会自动调用此方法更新。
4. 卸载控制点
在 onUnload() 方法中将控制点从视图中移除。
当用户退出内部编辑器时，会自动调用此方法卸载。
路径编辑器一般通过点击完成按钮退出，文本编辑器一般点击页面其他位置自动退出。
继承
InnerEditor
示例
ts
import { Box, DragEvent } from 'leafer-ui'
import { InnerEditor, registerInnerEditor } from '@leafer-in/editor'
@registerInnerEditor()
export class CustomEditor extends InnerEditor {
public get tag() { return 'CustomEditor' }
public point: Box
public onCreate(): void { // 1. 创建控制点
this.view.add(this.point = new Box()) // 可以添加多个
this.eventIds = [
this.point.on_(DragEvent.DRAG, () => { console.log('drag point') })
]
}
public onLoad(): void { // 2. 载入控制点
this.point.set({ ...this.editBox.getPointStyle(), strokeWidth: 1 })
this.editBox.add(this.view) // 添加在 editor 或 editBox 中都可以， 注意editBox本身具有定位
}
public onUpdate(): void { // 3. 更新控制点
const { boxBounds, worldTransform } = this.editor.element // 单个选中时 element 代表选中的元素
const { x, y } = boxBounds, { scaleX, scaleY } = worldTransform
this.point.set({ x: (x + 15) * Math.abs(scaleX), y: (y + 15) * Math.abs(scaleY) })
}
public onUnload(): void { // 4. 卸载控制点
this.editBox.remove(this.view)
}
public onDestroy(): void {
this.point = null
}
}js
import { Box, Group, DragEvent } from 'leafer-ui'
import { InnerEditor } from '@leafer-in/editor'
export class CustomEditor extends InnerEditor {
get tag() { return 'CustomEditor' }
onCreate() { // 1. 创建控制点
this.view.add(this.point = new Box()) // 可以添加多个
this.eventIds = [
this.point.on_(DragEvent.DRAG, () => { console.log('drag point') })
]
}
onLoad() { // 2. 载入控制点
this.point.set({ ...this.editBox.getPointStyle(), strokeWidth: 1 })
this.editBox.add(this.view) // 添加在 editor 或 editBox 中都可以， 注意editBox本身具有定位
}
onUpdate() { // 3. 更新控制点
const { boxBounds, worldTransform } = this.editor.element // 单个选中时 element 代表选中的元素
const { x, y } = boxBounds, { scaleX, scaleY } = worldTransform
this.point.set({ x: (x + 15) * Math.abs(scaleX), y: (y + 15) * Math.abs(scaleY) })
}
onUnload() { // 4. 卸载控制点
this.editBox.remove(this.view)
}
onDestroy() {
this.point = null
}
}
CustomEditor.registerInnerEditor()