@leafer-in/editor 1.6.7 → 1.8.0

package/src/display/EditBox.ts

@@ -1,11 +1,10 @@
-import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, IEventParams } from '@leafer-ui/interface'
-import { Group, Box, Text, AroundHelper, Direction9, ResizeEvent } from '@leafer-ui/draw'
-import { DragEvent, PointerEvent } from '@leafer-ui/core'
+import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, IEventParams, ITransformTool } from '@leafer-ui/interface'
+import { Group, Box, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper } from '@leafer-ui/draw'
+import { DragEvent, PointerEvent, KeyEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
-import { updateCursor, updateMoveCursor } from '../editor/cursor'
-import { EditorEvent } from '../event/EditorEvent'
+import { updatePointCursor, updateMoveCursor } from '../editor/cursor'
 import { EditPoint } from './EditPoint'
 import { EditDataHelper } from '../helper/EditDataHelper'
 
@@ -15,8 +14,14 @@ const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig: IEditorCon
 export class EditBox extends Group implements IEditBox {
 
     public editor: IEditor
+
     public dragging: boolean
+    public gesturing: boolean
+
     public moving: boolean
+    public resizing: boolean
+    public rotating: boolean
+    public skewing: boolean
 
     public view: IGroup = new Group()  // 放置默认编辑工具控制点
 
@@ -33,12 +38,37 @@ export class EditBox extends Group implements IEditBox {
 
     public dragStartData = {} as IEditorDragStartData
 
+    public config: IEditorConfig
+    public mergedConfig: IEditorConfig
+
+    public get mergeConfig(): IEditorConfig {
+        const { config } = this, { mergeConfig, editBox } = this.editor
+        return this.mergedConfig = config && (editBox !== this) ? { ...mergeConfig, ...config } : mergeConfig // 可能会出现多个editBox的情况
+    }
+
+    protected _target: IUI
+    public get target(): IUI { return this._target || this.editor.element } // 操作的元素，默认为editor.element
+    public set target(target: IUI) { this._target = target }
+
+    public get single(): boolean { return !!this._target || this.editor.single }
+
+    protected _transformTool: ITransformTool
+    public get transformTool(): ITransformTool { return this._transformTool || this.editor }
+    public set transformTool(tool: ITransformTool) { this._transformTool = tool }
+
     // fliped
     public get flipped(): boolean { return this.flippedX || this.flippedY }
     public get flippedX(): boolean { return this.scaleX < 0 }
     public get flippedY(): boolean { return this.scaleY < 0 }
     public get flippedOne(): boolean { return this.scaleX * this.scaleY < 0 }
 
+    public get canUse(): boolean { return (this.visible && this.view.visible) as boolean } // 编辑框是否处于激活状态
+    public get canGesture(): boolean { // 是否支持手势
+        if (!this.canUse) return false
+        const { moveable, resizeable, rotateable } = this.mergeConfig
+        return typeof moveable === 'string' || typeof resizeable === 'string' || typeof rotateable === 'string'
+    }
+
     protected __eventIds: IEventListenerId[] = []
 
     constructor(editor: IEditor) {
@@ -76,9 +106,9 @@ export class EditBox extends Group implements IEditBox {
         this.add(view)
     }
 
+
     public load(): void {
-        const { mergeConfig, element, single } = this.editor
-        const { rect, circle, resizePoints } = this
+        const { target, mergeConfig, single, rect, circle, resizePoints } = this
         const { stroke, strokeWidth } = mergeConfig
 
         const pointsStyle = this.getPointsStyle()
@@ -89,7 +119,7 @@ export class EditBox extends Group implements IEditBox {
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i]
             resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]))
-            if (!(i % 2)) resizeP.rotation = (i / 2) * 90
+            resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90
         }
 
         // rotate
@@ -97,24 +127,44 @@ export class EditBox extends Group implements IEditBox {
 
         // rect
         rect.set({ stroke, strokeWidth, editConfig, ...(mergeConfig.rect || {}) })
-        rect.hittable = !single
-        rect.syncEventer = single && this.editor  // 单选下 rect 的事件不会冒泡，需要手动传递给editor
 
-        // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
-        if (single) {
-            element.syncEventer = rect
-            this.app.interaction.bottomList = [{ target: rect, proxy: element }]
+        const syncEventer = single && this.transformTool.editTool
+
+        // 编辑框作为底部虚拟元素， 在 unload() 中重置
+        rect.hittable = !syncEventer
+        rect.syncEventer = syncEventer && this.editor  // 单选下 rect 的事件不会冒泡，需要手动传递给editor
+
+        if (syncEventer) {
+            target.syncEventer = rect // 在 target 属性装饰中重置
+            this.app.interaction.bottomList = [{ target: rect, proxy: target }]
         }
+
+        updateMoveCursor(this)
     }
 
-    public update(bounds: IBoundsData): void {
-        const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this
-        const { mergeConfig, element, multiple, editMask } = editor
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig
+    public update(): void {
+        const { editor } = this
+        const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = this.target.getLayoutBounds('box', editor, true)
+        this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY })
+        this.updateBounds({ x: 0, y: 0, width, height })
+    }
+
+    public unload(): void {
+        this.visible = false
+        if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null
+    }
+
+
+    public updateBounds(bounds: IBoundsData): void {
+        const { editMask } = this.editor
+        const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, spread } = mergeConfig
 
-        this.visible = !element.locked
+        this.visible = !this.target.locked
         editMask.visible = mask ? true : 0
 
+        if (spread) BoundsHelper.spread(bounds, spread)
+
         if (this.view.worldOpacity) {
             const { width, height } = bounds
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
@@ -145,7 +195,6 @@ export class EditBox extends Group implements IEditBox {
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false
                     } else {
                         resizeL.height = height
-                        resizeP.rotation = 90
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false
                     }
                 }
@@ -154,27 +203,27 @@ export class EditBox extends Group implements IEditBox {
 
             // rotate
             circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint)
-            if (circle.visible) this.layoutCircle(mergeConfig)
+            if (circle.visible) this.layoutCircle()
 
             // rect
             if (rect.path) rect.path = null // line可能会变成path优先模式
-            rect.set({ ...bounds, visible: multiple ? true : editBox })
+            rect.set({ ...bounds, visible: single ? editBox : true })
 
             // buttons
             buttons.visible = showPoints && buttons.children.length > 0 || 0
-            if (buttons.visible) this.layoutButtons(mergeConfig)
+            if (buttons.visible) this.layoutButtons()
         } else rect.set(bounds) // 需要更新大小
     }
 
-    protected layoutCircle(config: IEditorConfig): void {
-        const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config
+    protected layoutCircle(): void {
+        const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = this.mergedConfig
         const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'))
         this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint)
     }
 
-    protected layoutButtons(config: IEditorConfig): void {
+    protected layoutButtons(): void {
         const { buttons } = this
-        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.mergedConfig
 
         const { flippedX, flippedY } = this
         let index = fourDirection.indexOf(buttonsDirection)
@@ -208,75 +257,119 @@ export class EditBox extends Group implements IEditBox {
     }
 
 
-    public unload(): void {
-        this.visible = false
-    }
-
-
     public getPointStyle(userStyle?: IBoxInputData): IBoxInputData {
-        const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig
+        const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig
         const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig } as IBoxInputData
         return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle
     }
 
     public getPointsStyle(): IBoxInputData[] {
-        const { point } = this.editor.mergeConfig
+        const { point } = this.mergedConfig
         return point instanceof Array ? point : [point]
     }
 
     public getMiddlePointsStyle(): IBoxInputData[] {
-        const { middlePoint } = this.editor.mergeConfig
+        const { middlePoint } = this.mergedConfig
         return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle())
     }
 
-    protected onSelect(e: EditorEvent): void {
-        if (e.oldList.length === 1) {
-            e.oldList[0].syncEventer = null
-            if (this.app) this.app.interaction.bottomList = null
-        }
-    }
 
     // drag
 
     protected onDragStart(e: DragEvent): void {
         this.dragging = true
         const point = this.dragPoint = e.current as IEditPoint, { pointType } = point
-        const { editor, dragStartData } = this, { element } = editor
+        const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig
+
+        // 确定模式
         if (point.name === 'rect') {
-            this.moving = true
-            editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1 // move
+            moveable && (this.moving = true)
+            editor.opacity = hideOnMove ? 0 : 1 // move
+        } else {
+            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !resizeable) {
+                rotateable && (this.rotating = true)
+                if (pointType === 'resize-rotate') resizeable && (this.resizing = true)
+                else if (point.name === 'resize-line') skewable && (this.skewing = true), this.rotating = false
+            } else if (pointType === 'resize') resizeable && (this.resizing = true)
+            if (pointType === 'skew') skewable && (this.skewing = true)
         }
+
         dragStartData.x = e.x
         dragStartData.y = e.y
-        dragStartData.point = { x: element.x, y: element.y } // 用于移动
-        dragStartData.bounds = { ...element.getLayoutBounds('box', 'local') } // 用于resize
-        dragStartData.rotation = element.rotation // 用于旋转
+        dragStartData.point = { x: target.x, y: target.y } // 用于移动
+        dragStartData.bounds = { ...target.getLayoutBounds('box', 'local') } // 用于resize
+        dragStartData.rotation = target.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
+        this.resetDoing()
         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 === 'resize-rotate') editor.onScale(e)
-        } else if (pointType === 'resize') editor.onScale(e)
-        if (pointType === 'skew') editor.onSkew(e)
-        updateCursor(editor, e)
+        const { transformTool, moving, resizing, rotating, skewing } = this
+        if (moving) {
+            transformTool.onMove(e)
+            updateMoveCursor(this)
+        } else if (resizing || rotating || skewing) {
+            const point = e.current as IEditPoint
+            if (point.pointType) this.enterPoint = point// 防止变化
+            if (rotating) transformTool.onRotate(e)
+            if (resizing) transformTool.onScale(e)
+            if (skewing) transformTool.onSkew(e)
+            updatePointCursor(this, e)
+        }
+    }
+
+    protected resetDoing(): void {
+        if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false
+    }
+
+    // 手势控制元素
+
+    public onMove(e: MoveEvent): void {
+        if (this.canGesture && e.moveType !== 'drag') {
+            e.stop()
+            if (typeof this.mergeConfig.moveable === 'string') {
+                this.gesturing = this.moving = true
+                this.transformTool.onMove(e)
+            }
+        }
+    }
+
+    public onScale(e: ZoomEvent): void {
+        if (this.canGesture) {
+            e.stop()
+            if (typeof this.mergeConfig.resizeable === 'string') {
+                this.gesturing = this.resizing = true
+                this.transformTool.onScale(e)
+            }
+        }
+    }
+
+    public onRotate(e: RotateEvent): void {
+        if (this.canGesture) {
+            e.stop()
+            if (typeof this.mergeConfig.rotateable === 'string') {
+                this.gesturing = this.rotating = true
+                this.transformTool.onRotate(e)
+            }
+        }
+    }
+
+    // 键盘
+
+    protected onKey(e: KeyEvent): void {
+        updatePointCursor(this, e)
     }
 
     public onArrow(e: IKeyEvent): void {
-        const { editor } = this
-        if (editor.editing && editor.mergeConfig.keyEvent) {
+        const { editor, transformTool } = this
+        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
             let x = 0, y = 0
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
@@ -292,32 +385,33 @@ export class EditBox extends Group implements IEditBox {
                 case 'ArrowRight':
                     x = distance
             }
-            if (x || y) editor.move(x, y)
+            if (x || y) transformTool.move(x, y)
         }
     }
 
 
     protected onDoubleTap(e: PointerEvent): void {
-        if (this.editor.mergeConfig.openInner === 'double') this.openInner(e)
+        const { openInner, preventEditInner } = this.mergeConfig
+        if (openInner === 'double' && !preventEditInner) this.openInner(e)
     }
 
     protected onLongPress(e: PointerEvent): void {
-        if (this.editor.mergeConfig.openInner === 'long') this.openInner(e)
+        const { openInner, preventEditInner } = this.mergeConfig
+        if (openInner === 'long' && preventEditInner) this.openInner(e)
     }
 
     protected openInner(e: PointerEvent): void {
-        const { editor } = this
-        if (editor.single) {
-            const { element } = editor
-            if (element.locked) return
-            if (element.isBranch && !element.editInner) {
-                if ((element as IBox).textBox) {
-                    const { children } = element
+        const { editor, target } = this
+        if (this.single) {
+            if (target.locked) return
+            if (target.isBranch && !target.editInner) {
+                if ((target as IBox).textBox) {
+                    const { children } = target
                     const find = children.find(item => item.editable && item instanceof Text) || children.find(item => item instanceof Text)
                     if (find) return editor.openInnerEditor(find) // 文本Box直接进入编辑状态，如便利贴文本
                 }
 
-                editor.openGroup(element as IGroup)
+                editor.openGroup(target as IGroup)
                 editor.target = editor.selector.findDeepOne(e)
             } else {
                 editor.openInnerEditor()
@@ -327,7 +421,6 @@ export class EditBox extends Group implements IEditBox {
 
 
     public listenPointEvents(point: IEditPoint, type: IEditPointType, direction: Direction9): void {
-        const { editor } = this
         point.direction = direction
         point.pointType = type
 
@@ -337,25 +430,39 @@ export class EditBox extends Group implements IEditBox {
             [DragEvent.END, this.onDragEnd, this],
             [PointerEvent.LEAVE, () => { this.enterPoint = null }],
         ]
-        if (point.name !== 'circle') events.push([PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updateCursor(editor, e) }])
+        if (point.name !== 'circle') events.push([PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updatePointCursor(this, e) }])
         this.__eventIds.push(point.on_(events))
     }
 
     protected __listenEvents(): void {
-        const { rect, editor } = this
-        this.__eventIds.push(
-            editor.on_(EditorEvent.SELECT, this.onSelect, this),
+        const { rect, editor, __eventIds: events } = this
 
+        events.push(
             rect.on_([
                 [DragEvent.START, this.onDragStart, this],
-                [DragEvent.DRAG, editor.onMove, editor],
+                [DragEvent.DRAG, this.onDrag, this],
                 [DragEvent.END, this.onDragEnd, this],
 
-                [PointerEvent.ENTER, () => updateMoveCursor(editor)],
+                [PointerEvent.ENTER, () => updateMoveCursor(this)],
                 [PointerEvent.DOUBLE_TAP, this.onDoubleTap, this],
                 [PointerEvent.LONG_PRESS, this.onLongPress, this]
             ])
         )
+
+        this.waitLeafer(() => {
+            events.push(
+                editor.app.on_([
+                    [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
+                    [KeyEvent.DOWN, this.onArrow, this],
+                    [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
+                    [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
+                    [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
+                    [MoveEvent.END, this.resetDoing, this],
+                    [ZoomEvent.END, this.resetDoing, this],
+                    [RotateEvent.END, this.resetDoing, this],
+                ])
+            )
+        })
     }
 
     protected __removeListenEvents(): void {

package/src/display/EditMask.ts

@@ -29,10 +29,11 @@ export class EditMask extends UI {
             if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix)) return
 
             canvas.saveBlendMode('destination-out')
+            options = { ...options, shape: true }
             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) // 文本框
+                item.__render(canvas, options)
+                const { parent } = item
+                if (parent && (parent as IBox).textBox) parent.__renderShape(canvas, options) // 文本框
             })
             canvas.restoreBlendMode()
         }

package/src/display/EditSelect.ts

@@ -54,16 +54,16 @@ export class EditSelect extends Group implements IEditSelect {
 
     protected onSelect(): void {
         if (this.running) {
-            const { mergeConfig, list } = this.editor
-            const { stroke, strokeWidth, selectedStyle } = mergeConfig
-            this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2), ...(selectedStyle || {}) })
+            this.targetStroker.setTarget(this.editor.list)
             this.hoverStroker.target = null
         }
     }
 
     public update(): void {
         this.hoverStroker.update()
-        this.targetStroker.update()
+
+        const { stroke, strokeWidth, selectedStyle } = this.editor.mergedConfig
+        this.targetStroker.update({ stroke, strokeWidth: strokeWidth && Math.max(1, strokeWidth / 2), ...(selectedStyle || {}) })
     }
 
     // move / down

package/src/display/Stroker.ts

@@ -27,16 +27,17 @@ export class Stroker extends UI implements IStroker {
         this.strokeAlign = 'center'
     }
 
-    public setTarget(target: IUI | IUI[], style: IRectInputData): void {
-        this.set(style)
+    public setTarget(target: IUI | IUI[], style?: IRectInputData): void {
+        if (style) this.set(style)
         this.target = target
         this.update()
     }
 
-    public update(): void {
+    public update(style?: IRectInputData): void {
         const { list } = this
         if (list.length) {
             setListWithFn(bounds, list, worldBounds)
+            if (style) this.set(style)
             this.set(bounds)
             this.visible = true
         } else this.visible = 0

package/src/editor/cursor.ts

@@ -1,6 +1,6 @@
 import { IObject, IUIEvent } from '@leafer-ui/interface'
 
-import { IEditor } from '@leafer-in/interface'
+import { IEditBox } from '@leafer-in/interface'
 import { MathHelper } from '@leafer-ui/draw'
 
 import { EditDataHelper } from '../helper/EditDataHelper'
@@ -8,9 +8,9 @@ import { EditDataHelper } from '../helper/EditDataHelper'
 
 const cacheCursors: IObject = {}
 
-export function updateCursor(editor: IEditor, e: IUIEvent): void {
-    const { editBox } = editor, point = editBox.enterPoint
-    if (!point || !editor.editing || !editBox.visible) return
+export function updatePointCursor(editBox: IEditBox, e: IUIEvent): void {
+    const { enterPoint: point, dragging, skewing, resizing, flippedX, flippedY } = editBox
+    if (!point || !editBox.editor.editing || !editBox.canUse) return
     if (point.name === 'circle') return // 独立旋转按钮
     if (point.pointType === 'button') { // 普通按钮
         if (!point.cursor) point.cursor = 'pointer'
@@ -18,14 +18,16 @@ export function updateCursor(editor: IEditor, e: IUIEvent): void {
     }
 
     let { rotation } = editBox
-    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig
-    const { pointType } = point, { flippedX, flippedY } = editBox
+    const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig
 
     let showResize = pointType.includes('resize')
     if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) showResize = false
     const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew')
 
-    const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor)
+    const cursor = dragging
+        ? (skewing ? skewCursor : (resizing ? resizeCursor : rotateCursor))
+        : (showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor))
+
     rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45
     rotation = Math.round(MathHelper.formatRotation(rotation, true) / 2) * 2
 
@@ -39,9 +41,9 @@ export function updateCursor(editor: IEditor, e: IUIEvent): void {
     }
 }
 
-export function updateMoveCursor(editor: IEditor): void {
-    const { moveCursor, moveable } = editor.mergeConfig
-    editor.editBox.rect.cursor = moveable ? moveCursor : undefined
+export function updateMoveCursor(editBox: IEditBox): void {
+    const { moveCursor, moveable } = editBox.mergeConfig
+    if (editBox.canUse) editBox.rect.cursor = moveable ? moveCursor : undefined
 }
 
 

package/src/editor/simulate.ts

@@ -1,4 +1,4 @@
-import { IGroup, ILeaf } from '@leafer-ui/interface'
+import { ILeaf } from '@leafer-ui/interface'
 import { Bounds } from '@leafer-ui/draw'
 
 import { IEditor } from '@leafer-in/interface'
@@ -8,7 +8,7 @@ const bounds = new Bounds()
 
 export function simulate(editor: IEditor) {
     const { simulateTarget, list } = editor
-    const { zoomLayer } = list[0].leafer.zoomLayer as IGroup // follow zoomLayer zoom / move
+    const { zoomLayer } = list[0].leafer // follow zoomLayer zoom / move
     simulateTarget.safeChange(() => {
         bounds.setListWithFn(list, (leaf: ILeaf) => leaf.getBounds('box', 'page'))
         if (bounds.width === 0) bounds.width = 0.1 // fix

package/src/editor/target.ts

@@ -3,7 +3,6 @@ import { LeafList } from '@leafer-ui/draw'
 import { IEditor, IUI } from '@leafer-in/interface'
 
 import { simulate } from './simulate'
-import { updateMoveCursor } from './cursor'
 import { EditorEvent } from '../event/EditorEvent'
 
 
@@ -15,23 +14,26 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     } else {
         editor.simulateTarget.remove()
         editor.leafList.reset()
-        editor.closeInnerEditor()
     }
 
-    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }))
+    editor.closeInnerEditor(true)
+    editor.unloadEditTool()
+
+    const data = { editor, value: target, oldValue }
+    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data))
     editor.checkOpenedGroups()
 
     if (editor.editing) {
         editor.waitLeafer(() => {
-            updateMoveCursor(editor)
             editor.updateEditTool()
-            editor.update()
             editor.listenTargetEvents()
         })
     } else {
         editor.updateEditTool()
         editor.removeTargetEvents()
     }
+
+    editor.emitEvent(new EditorEvent(EditorEvent.AFTER_SELECT, data))
 }
 
 

package/src/event/EditorEvent.ts

@@ -12,6 +12,7 @@ export class EditorEvent extends Event implements IEditorEvent {
 
     static BEFORE_SELECT = 'editor.before_select'
     static SELECT = 'editor.select'
+    static AFTER_SELECT = 'editor.after_select'
 
     static BEFORE_HOVER = 'editor.before_hover'
     static HOVER = 'editor.hover'