@leafer-in/editor 1.5.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-in/editor",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "@leafer-in/editor",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -34,9 +34,9 @@
     "leaferjs"
   ],
   "peerDependencies": {
-    "@leafer-ui/core": "^1.5.2",
-    "@leafer-in/resize": "^1.5.2",
-    "@leafer-ui/interface": "^1.5.2",
-    "@leafer-in/interface": "^1.5.2"
+    "@leafer-ui/core": "^1.6.0",
+    "@leafer-in/resize": "^1.6.0",
+    "@leafer-ui/interface": "^1.6.0",
+    "@leafer-in/interface": "^1.6.0"
   }
 }

package/src/Editor.ts

@@ -1,5 +1,5 @@
-import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, IMatrix } from '@leafer-ui/interface'
-import { Group, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper, Direction9, isNull } from '@leafer-ui/draw'
+import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, IMatrix, IApp } from '@leafer-ui/interface'
+import { Group, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper, Direction9 } from '@leafer-ui/draw'
 import { DragEvent, RotateEvent, KeyEvent, ZoomEvent, MoveEvent, Plugin } from '@leafer-ui/core'
 
 import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface'
@@ -16,7 +16,7 @@ import { EditMask } from './display/EditMask'
 import { config } from './config'
 
 import { onTarget, onHover } from './editor/target'
-import { targetAttr } from './decorator/data'
+import { targetAttr, mergeConfigAttr } from './decorator/data'
 import { EditorHelper } from './helper/EditorHelper'
 import { EditDataHelper } from './helper/EditDataHelper'
 import { simulate } from './editor/simulate'
@@ -29,21 +29,11 @@ import { SimulateElement } from './display/SimulateElement'
 
 export class Editor extends Group implements IEditor {
 
-    public config = DataHelper.clone(config) as IEditorConfig
-
-    public get mergeConfig(): IEditorConfig {
-        const { config, element, dragPoint } = this, mergeConfig = { ...config } // 实时合并，后期可优化
-        if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig)
-        if (dragPoint) {
-            if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig)
-            if (mergeConfig.editSize === 'font-size') mergeConfig.lockRatio = true // 强制锁定比例
-            if (dragPoint.pointType === 'resize-rotate') {
-                mergeConfig.around || (mergeConfig.around = 'center')
-                isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true)
-            }
-        }
-        return mergeConfig
-    }
+    public config: IEditorConfig
+
+    @mergeConfigAttr()
+    readonly mergeConfig: IEditorConfig
+    readonly mergedConfig: IEditorConfig
 
     @targetAttr(onHover)
     public hoverTarget?: IUI
@@ -88,12 +78,16 @@ export class Editor extends Group implements IEditor {
     public selector: EditSelect = new EditSelect(this)
     public editMask: EditMask = new EditMask(this)
 
+    public targetChanged: boolean
     public targetEventIds: IEventListenerId[] = []
 
 
     constructor(userConfig?: IEditorConfig, data?: IGroupInputData) {
         super(data)
-        if (userConfig) this.config = DataHelper.default(userConfig, this.config)
+        let mergedConfig: IEditorConfig = DataHelper.clone(config)
+        if (userConfig) mergedConfig = DataHelper.default(userConfig, mergedConfig)
+        this.mergedConfig = this.config = mergedConfig
+
         this.addMany(this.editMask, this.selector, this.editBox)
         if (!Plugin.has('resize')) this.config.editSize = 'scale'
     }
@@ -489,8 +483,7 @@ export class Editor extends Group implements IEditor {
     }
 
     public emitInnerEvent(type: string): void {
-        const { innerEditor } = this
-        const { editTarget } = innerEditor
+        const { innerEditor } = this, { editTarget } = innerEditor
         const event = new InnerEditorEvent(type, { editTarget, innerEditor })
         this.emitEvent(event)
         editTarget.emitEvent(event)
@@ -524,28 +517,42 @@ export class Editor extends Group implements IEditor {
         }
     }
 
+    protected onAppRenderStart(app: IApp): void {
+        if (this.targetChanged = app.children.some(leafer => leafer !== this.leafer && leafer.renderer.changed)) this.editBox.forceRender()
+    }
+
+    protected onRenderStart(): void {
+        if (this.targetChanged) this.update()
+    }
+
+    protected onKey(e: KeyEvent): void {
+        updateCursor(this, e)
+    }
+
     // event 
 
     public listenTargetEvents(): void {
         if (!this.targetEventIds.length) {
-            const { app, leafer } = this
+            const { app, leafer, editBox, editMask } = this
             this.targetEventIds = [
-                leafer.on_(RenderEvent.START, this.update, this),
-                app.on_(RenderEvent.CHILD_START, this.forceRender, this),
+                leafer.on_(RenderEvent.START, this.onRenderStart, this),
+                app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this),
                 app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
                 app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
                 app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
-                app.on_([KeyEvent.HOLD, KeyEvent.UP], (e: KeyEvent) => { updateCursor(this, e) }),
-                app.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
+                app.on_([KeyEvent.HOLD, KeyEvent.UP], this.onKey, this),
+                app.on_(KeyEvent.DOWN, editBox.onArrow, editBox)
             ]
+            if (editMask.visible) editMask.forceRender()
         }
     }
 
     public removeTargetEvents(): void {
-        const { targetEventIds } = this
+        const { targetEventIds, editMask } = this
         if (targetEventIds.length) {
             this.off_(targetEventIds)
             targetEventIds.length = 0
+            if (editMask.visible) editMask.forceRender()
         }
     }
 

package/src/decorator/data.ts

@@ -1,24 +1,63 @@
 import { IFunction, ILeaf, IObject, IUI, } from '@leafer-ui/interface'
 import { IEditor } from '@leafer-in/interface'
-import { defineKey } from '@leafer-ui/draw'
+import { defineKey, isNull } from '@leafer-ui/draw'
 
 import { EditorEvent } from '../event/EditorEvent'
 
 
-
 export function targetAttr(fn: IFunction) {
     return (target: ILeaf, key: string) => {
         const privateKey = '_' + key
         defineKey(target, key, {
             get() { return (this as IObject)[privateKey] },
-            set(value: unknown) {
+            set(value: IUI | IUI[]) {
                 const old = (this as IObject)[privateKey]
                 if (old !== value) {
-                    const type = key === 'target' ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER
-                    if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, { editor: this as IEditor, value: value as IUI, oldValue: old }));
+
+                    if ((this as IEditor).config) { // Editor
+
+                        const isSelect = key === 'target'
+                        if (isSelect) {
+                            if (value instanceof Array && value.length > 1 && value[0].locked) value.splice(0, 1) // fix: 单个锁定 + shift多选
+
+                            const { beforeSelect } = (this as IEditor).config
+                            if (beforeSelect) {
+                                const check = beforeSelect({ target: value })
+                                if (typeof check === 'object') value = check
+                                else if (check === false) return
+                            }
+                        }
+
+                        const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER
+                        if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, { editor: this as IEditor, value: value as IUI, oldValue: old }))
+                    }
+
                     (this as IObject)[privateKey] = value, fn(this, old)
                 }
             }
         } as ThisType<ILeaf>)
     }
-}
+}
+
+
+export function mergeConfigAttr() {
+    return (target: IEditor, key: string) => {
+        defineKey(target, key, {
+            get() {
+                const { config, element, dragPoint } = this, mergeConfig = { ...config } // 实时合并，后期可优化
+                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig)
+                if (dragPoint) {
+                    if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig)
+                    if (mergeConfig.editSize === 'font-size') mergeConfig.lockRatio = true // 强制锁定比例
+                    if (dragPoint.pointType === 'resize-rotate') {
+                        mergeConfig.around || (mergeConfig.around = 'center')
+                        isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true)
+                    }
+                }
+                return (this as IObject).mergedConfig = mergeConfig
+            }
+        } as ThisType<IEditor>)
+    }
+}
+
+

package/src/display/EditBox.ts

@@ -1,5 +1,5 @@
 import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData } from '@leafer-ui/interface'
-import { Group, Box, Text, AroundHelper, Direction9 } from '@leafer-ui/draw'
+import { Group, Box, Text, AroundHelper, Direction9, ResizeEvent } from '@leafer-ui/draw'
 import { DragEvent, PointerEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
@@ -22,7 +22,7 @@ export class EditBox extends Group implements IEditBox {
 
     public rect: IBox = new Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 }) // target rect
     public circle: IEditPoint = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 }) // rotate point
-    public buttons: IGroup = new Group({ around: 'center', hitSelf: false })
+    public buttons: IGroup = new Group({ around: 'center', hitSelf: false, visible: 0 })
 
     public resizePoints: IEditPoint[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
     public rotatePoints: IEditPoint[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
@@ -108,14 +108,15 @@ export class EditBox extends Group implements IEditBox {
     }
 
     public update(bounds: IBoundsData): void {
-        const { mergeConfig, element, multiple } = this.editor
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig
+        const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this
+        const { mergeConfig, element, multiple, editMask } = editor
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig
+
         this.visible = !element.locked
+        editMask.visible = mask ? true : 0
 
         if (this.view.worldOpacity) {
             const { width, height } = bounds
-            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
-
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
             const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize)
 
@@ -160,9 +161,9 @@ export class EditBox extends Group implements IEditBox {
             rect.set({ ...bounds, visible: multiple ? true : editBox })
 
             // buttons
-            buttons.visible = showPoints && buttons.children.length > 0
+            buttons.visible = showPoints && buttons.children.length > 0 || 0
             if (buttons.visible) this.layoutButtons(mergeConfig)
-        }
+        } else rect.set(bounds) // 需要更新大小
     }
 
     protected layoutCircle(config: IEditorConfig): void {
@@ -239,7 +240,7 @@ export class EditBox extends Group implements IEditBox {
 
     protected onDragStart(e: DragEvent): void {
         this.dragging = true
-        const point = this.dragPoint = e.current as IEditPoint
+        const point = this.dragPoint = e.current as IEditPoint, { pointType } = point
         const { editor, dragStartData } = this, { element } = editor
         if (point.name === 'rect') {
             this.moving = true
@@ -250,42 +251,48 @@ export class EditBox extends Group implements IEditBox {
         dragStartData.point = { x: element.x, y: element.y } // 用于移动
         dragStartData.bounds = { ...element.getLayoutBounds('box', 'local') } // 用于resize
         dragStartData.rotation = element.rotation // 用于旋转
+        if (pointType && pointType.includes('resize')) ResizeEvent.resizingKeys = editor.leafList.keys // 记录正在resize中的元素列表
     }
 
     protected onDragEnd(e: DragEvent): void {
         this.dragging = false
         this.dragPoint = null
         this.moving = false
-        if (e.current.name === 'rect') this.editor.opacity = 1 // move
+        const { name, pointType } = e.current as IEditPoint
+        if (name === 'rect') this.editor.opacity = 1 // move
+        if (pointType && pointType.includes('resize')) ResizeEvent.resizingKeys = null
     }
 
     protected onDrag(e: DragEvent): void {
         const { editor } = this
         const { pointType } = this.enterPoint = e.current as IEditPoint
-        if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) editor.onRotate(e)
-        if (pointType.includes('resize')) editor.onScale(e)
+        if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
+            editor.onRotate(e)
+            if (pointType === 'resize-rotate') editor.onScale(e)
+        } else if (pointType === 'resize') editor.onScale(e)
         if (pointType === 'skew') editor.onSkew(e)
         updateCursor(editor, e)
     }
 
     public onArrow(e: IKeyEvent): void {
-        if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
-            const move = { x: 0, y: 0 }
+        const { editor } = this
+        if (editor.editing && editor.mergeConfig.keyEvent) {
+            let x = 0, y = 0
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
                 case 'ArrowDown':
-                    move.y = distance
+                    y = distance
                     break
                 case 'ArrowUp':
-                    move.y = -distance
+                    y = -distance
                     break
                 case 'ArrowLeft':
-                    move.x = -distance
+                    x = -distance
                     break
                 case 'ArrowRight':
-                    move.x = distance
+                    x = distance
             }
-            this.editor.move(move)
+            if (x || y) editor.move(x, y)
         }
     }
 

package/src/display/EditMask.ts

@@ -1,8 +1,9 @@
-import { ILeaferCanvas, IRenderOptions } from '@leafer-ui/interface'
+import { IBox, ILeaferCanvas, IRenderOptions } from '@leafer-ui/interface'
 import { UI } from '@leafer-ui/draw'
 
 import { IEditor } from '@leafer-in/interface'
 
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 }
 
 export class EditMask extends UI {
 
@@ -12,20 +13,28 @@ export class EditMask extends UI {
         super()
         this.editor = editor
         this.hittable = false
+        this.visible = 0
     }
 
-    public __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
-        const { editor } = this
-        const { mask } = editor.mergeConfig
+    override __updateWorldBounds(): void {
+        Object.assign(this.__local, bigBounds) // 强制修改渲染包围盒
+        Object.assign(this.__world, bigBounds)
+    }
 
-        if (mask && editor.list.length) {
-            const { rect } = editor.editBox
-            const { width, height } = rect.__
+    public __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
 
-            canvas.resetTransform()
+        const { editor } = this, { mask } = editor.mergedConfig
+        if (mask && editor.editing) {
             canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask)
-            canvas.setWorld(rect.__world, options.matrix)
-            canvas.clearRect(0, 0, width, height)
+            if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix)) return
+
+            canvas.saveBlendMode('destination-out')
+            editor.list.forEach(item => {
+                item.__renderShape(canvas, options)
+                const { __box, parent } = item
+                if ((item = __box) || ((item = parent) && (parent as IBox).textBox)) item.__renderShape(canvas, options) // 文本框
+            })
+            canvas.restoreBlendMode()
         }
     }
 

package/src/display/EditSelect.ts

@@ -189,7 +189,7 @@ export class EditSelect extends Group implements IEditSelect {
     protected onDragEnd(e: DragEvent): void {
         if (e.multiTouch) return
 
-        if (this.dragging) this.originList = null, this.selectArea.visible = false
+        if (this.dragging) this.originList = null, this.selectArea.visible = 0
     }
 
     protected onAutoMove(e: MoveEvent): void {

package/src/display/SelectArea.ts

@@ -11,7 +11,8 @@ export class SelectArea extends Group implements ISelectArea {
 
     constructor(data?: IGroupInputData) {
         super(data)
-        this.visible = this.hittable = false
+        this.visible = 0
+        this.hittable = false
         this.addMany(this.fillArea, this.strokeArea)
     }
 

package/src/display/Stroker.ts

@@ -1,4 +1,4 @@
-import { IUI, ILeaferCanvas, IRenderOptions, IRectInputData } from '@leafer-ui/interface'
+import { IUI, ILeaferCanvas, IRenderOptions, IRectInputData, IMatrixWithOptionHalfData } from '@leafer-ui/interface'
 import { Paint, UI, MatrixHelper, getBoundsData, getMatrixData, BoundsHelper, LeafBoundsHelper } from '@leafer-ui/draw'
 
 import { IStroker } from '@leafer-in/interface'
@@ -10,7 +10,7 @@ const { abs } = Math
 const { copy, scale } = MatrixHelper
 const { setListWithFn } = BoundsHelper
 const { worldBounds } = LeafBoundsHelper
-const matrix = getMatrixData()
+const matrix = getMatrixData() as IMatrixWithOptionHalfData
 const bounds = getBoundsData()
 
 export class Stroker extends UI implements IStroker {
@@ -22,6 +22,7 @@ export class Stroker extends UI implements IStroker {
 
     constructor() {
         super()
+        this.visible = 0
         this.hittable = false
         this.strokeAlign = 'center'
     }
@@ -37,9 +38,8 @@ export class Stroker extends UI implements IStroker {
         if (list.length) {
             setListWithFn(bounds, list, worldBounds)
             this.set(bounds)
-        } else {
-            this.width = this.height = 1
-        }
+            this.visible = true
+        } else this.visible = 0
     }
 
     public __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
@@ -58,11 +58,12 @@ export class Stroker extends UI implements IStroker {
 
                     const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY)
 
+                    copy(matrix, worldTransform)
+                    matrix.half = strokeWidth % 2
+
                     if (aScaleX !== aScaleY) { // need no scale stroke, use rect path
 
-                        copy(matrix, worldTransform)
                         scale(matrix, 1 / aScaleX, 1 / aScaleY)
-
                         canvas.setWorld(matrix, options.matrix)
                         canvas.beginPath()
                         data.strokeWidth = strokeWidth
@@ -72,7 +73,7 @@ export class Stroker extends UI implements IStroker {
 
                     } else {
 
-                        canvas.setWorld(worldTransform, options.matrix)
+                        canvas.setWorld(matrix, options.matrix)
                         canvas.beginPath()
 
                         if (leaf.__.__useArrow) leaf.__drawPath(canvas)

package/src/editor/target.ts

@@ -1,6 +1,6 @@
 import { LeafList } from '@leafer-ui/draw'
 
-import { IEditor, ILeaf, IUI } from '@leafer-in/interface'
+import { IEditor, IUI } from '@leafer-in/interface'
 
 import { simulate } from './simulate'
 import { updateMoveCursor } from './cursor'
@@ -10,11 +10,7 @@ import { EditorEvent } from '../event/EditorEvent'
 export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     const { target } = editor
     if (target) {
-        const { list } = editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target as IUI)
-        if (!list.every(checkEditable)) { // 过滤不合格的元素
-            editor.target = list.filter(checkEditable) as IUI[]
-            return
-        }
+        editor.leafList = target instanceof LeafList ? target : new LeafList(target)
         if (editor.multiple) simulate(editor) // 更新模拟元素
     } else {
         editor.simulateTarget.remove()
@@ -41,9 +37,4 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
 
 export function onHover(editor: IEditor, oldValue: IUI): void {
     editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }))
-}
-
-
-function checkEditable(item: ILeaf): boolean {
-    return item.editable && !item.locked
 }

package/src/helper/EditDataHelper.ts

@@ -99,10 +99,10 @@ export const EditDataHelper = {
             }
         }
 
+        const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1
 
-        scaleX /= changedScaleX
-        scaleY /= changedScaleY
-
+        if (useScaleX) scaleX /= changedScaleX
+        if (useScaleY) scaleY /= changedScaleY
 
         if (!flipable) {
             const { worldTransform } = element
@@ -121,24 +121,27 @@ export const EditDataHelper = {
 
             if (!BoundsHelper.includes(allowBounds, localBounds)) {
                 const realBounds = localBounds.getIntersect(allowBounds)
-                scaleX *= realBounds.width / localBounds.width
-                scaleY *= realBounds.height / localBounds.height // 后续需优化带旋转的场景
+                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height
+                if (useScaleX) scaleX *= fitScaleX
+                if (useScaleY) scaleY *= fitScaleY // 后续需优化带旋转的场景
             }
         }
 
-        if (widthRange) {
+        if (useScaleX && widthRange) {
             const nowWidth = boxBounds.width * element.scaleX
             scaleX = within(nowWidth * scaleX, widthRange) / nowWidth
         }
 
-        if (heightRange) {
+        if (useScaleY && heightRange) {
             const nowHeight = boxBounds.height * element.scaleY
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight
         }
 
         // 防止小于1px
-        if (Math.abs(scaleX * worldBoxBounds.width) < 1) scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width
-        if (Math.abs(scaleY * worldBoxBounds.height) < 1) scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height
+        if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1) scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width
+        if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1) scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height
+
+        if (lockRatio && scaleX !== scaleY) scaleY = scaleX = Math.min(scaleX, scaleY)
 
         return { origin, scaleX, scaleY, direction, lockRatio, around }
     },

package/src/tool/EditTool.ts

@@ -21,9 +21,7 @@ export class EditTool extends InnerEditor implements IEditTool {
         const { moveX, moveY, editor } = e
         const { app, list } = editor
         app.lockLayout()
-        list.forEach(target => {
-            target.moveWorld(moveX, moveY)
-        })
+        list.forEach(target => { target.moveWorld(moveX, moveY) })
         app.unlockLayout()
     }
 
@@ -33,11 +31,8 @@ export class EditTool extends InnerEditor implements IEditTool {
         app.lockLayout()
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale'
-            if (transform) {
-                target.transformWorld(transform, resize)
-            } else {
-                target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize)
-            }
+            if (transform) target.transformWorld(transform, resize)
+            else target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize)
         })
         app.unlockLayout()
     }
@@ -48,11 +43,8 @@ export class EditTool extends InnerEditor implements IEditTool {
         app.lockLayout()
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale'
-            if (transform) {
-                target.transformWorld(transform, resize)
-            } else {
-                target.rotateOfWorld(worldOrigin, rotation)
-            }
+            if (transform) target.transformWorld(transform, resize)
+            else target.rotateOfWorld(worldOrigin, rotation)
         })
         app.unlockLayout()
     }
@@ -63,11 +55,8 @@ export class EditTool extends InnerEditor implements IEditTool {
         app.lockLayout()
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale'
-            if (transform) {
-                target.transformWorld(transform, resize)
-            } else {
-                target.skewOfWorld(worldOrigin, skewX, skewY, resize)
-            }
+            if (transform) target.transformWorld(transform, resize)
+            else target.skewOfWorld(worldOrigin, skewX, skewY, resize)
         })
         app.unlockLayout()
     }

package/types/index.d.ts

@@ -1,6 +1,6 @@
-import { IBounds, ILeafList, IUI, IFunction, IEventListenerId, ILeaf, IPointerEvent, ILeaferCanvas, IRenderOptions, IGroup, IObject, IGroupInputData, IEditSize, IPointData, IAlign, IAxis, IMatrix, IBox, IEditorDragStartData, IBoundsData, IEditorConfig as IEditorConfig$1, IBoxInputData, IKeyEvent, IRect, IRectInputData, IMatrixData, IDragEvent, IAround, ILayoutBoundsData } from '@leafer-ui/interface';
+import { IBounds, ILeafList, IUI, IFunction, IEventListenerId, ILeaf, IPointerEvent, ILeaferCanvas, IRenderOptions, IGroup, IObject, IGroupInputData, IEditSize, IPointData, IAlign, IAxis, IMatrix, IApp, IBox, IEditorDragStartData, IBoundsData, IEditorConfig as IEditorConfig$1, IBoxInputData, IKeyEvent, IRect, IRectInputData, IMatrixData, IDragEvent, IAround, ILayoutBoundsData } from '@leafer-ui/interface';
 import { Group, UI, Direction9, Event, Box } from '@leafer-ui/draw';
-import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent } from '@leafer-ui/core';
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent, KeyEvent } from '@leafer-ui/core';
 import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditPoint, ISimulateElement, IEditBox, IEditTool, IInnerEditor, IEditorScaleEvent, IEditorEvent, IEditPointType, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent, IEditorGroupEvent, IInnerEditorEvent, IUI as IUI$1, IDragEvent as IDragEvent$1, IPointData as IPointData$1, IPathCommandData, IFromToData, IAround as IAround$1 } from '@leafer-in/interface';
 
 declare class EditSelect extends Group implements IEditSelect {
@@ -42,13 +42,15 @@ declare class EditSelect extends Group implements IEditSelect {
 declare class EditMask extends UI {
     editor: IEditor;
     constructor(editor: IEditor);
+    __updateWorldBounds(): void;
     __draw(canvas: ILeaferCanvas, options: IRenderOptions): void;
     destroy(): void;
 }
 
 declare class Editor extends Group implements IEditor {
     config: IEditorConfig;
-    get mergeConfig(): IEditorConfig;
+    readonly mergeConfig: IEditorConfig;
+    readonly mergedConfig: IEditorConfig;
     hoverTarget?: IUI;
     target?: IUI | IUI[];
     leafList: ILeafList;
@@ -73,6 +75,7 @@ declare class Editor extends Group implements IEditor {
     editToolList: IObject;
     selector: EditSelect;
     editMask: EditMask;
+    targetChanged: boolean;
     targetEventIds: IEventListenerId[];
     constructor(userConfig?: IEditorConfig, data?: IGroupInputData);
     select(target: IUI | IUI[]): void;
@@ -112,6 +115,9 @@ declare class Editor extends Group implements IEditor {
     unlock(): void;
     toTop(): void;
     toBottom(): void;
+    protected onAppRenderStart(app: IApp): void;
+    protected onRenderStart(): void;
+    protected onKey(e: KeyEvent): void;
     listenTargetEvents(): void;
     removeTargetEvents(): void;
     destroy(): void;