@leafer-in/editor 1.6.7 → 1.7.0

package/package.json

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

package/src/Editor.ts

@@ -1,13 +1,8 @@
 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, Plugin } from '@leafer-ui/draw'
-import { DragEvent, RotateEvent, KeyEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
+import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin } from '@leafer-ui/draw'
+import { DragEvent, RotateEvent, ZoomEvent, MoveEvent, useModule } from '@leafer-ui/core'
 
-import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface'
-
-import { EditorMoveEvent } from './event/EditorMoveEvent'
-import { EditorScaleEvent } from './event/EditorScaleEvent'
-import { EditorRotateEvent } from './event/EditorRotateEvent'
-import { EditorSkewEvent } from './event/EditorSkewEvent'
+import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement } from '@leafer-in/interface'
 
 import { EditSelect } from './display/EditSelect'
 import { EditBox } from './display/EditBox'
@@ -18,15 +13,14 @@ import { config } from './config'
 import { onTarget, onHover } from './editor/target'
 import { targetAttr, mergeConfigAttr } from './decorator/data'
 import { EditorHelper } from './helper/EditorHelper'
-import { EditDataHelper } from './helper/EditDataHelper'
 import { simulate } from './editor/simulate'
-import { updateCursor } from './editor/cursor'
 import { EditToolCreator } from './tool/EditToolCreator'
 import { InnerEditorEvent } from './event/InnerEditorEvent'
 import { EditorGroupEvent } from './event/EditorGroupEvent'
 import { SimulateElement } from './display/SimulateElement'
+import { TransformTool } from './tool/TransformTool'
 
-
+@useModule(TransformTool, ['editBox', 'editTool', 'emitEvent'])
 export class Editor extends Group implements IEditor {
 
     public config: IEditorConfig
@@ -137,7 +131,7 @@ export class Editor extends Group implements IEditor {
     }
 
     public updateEditTool(): void {
-        const tool = this.editTool
+        let tool = this.editTool
         if (tool) {
             this.editBox.unload()
             tool.unload()
@@ -145,10 +139,11 @@ export class Editor extends Group implements IEditor {
         }
 
         if (this.editing) {
-            const tag = this.single ? this.list[0].editOuter as string : 'EditTool'
-            this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this)
+            const tag = this.element.editOuter || 'EditTool'
+            tool = this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this)
             this.editBox.load()
-            this.editTool.load()
+            tool.load()
+            this.update()
         }
     }
 
@@ -159,232 +154,41 @@ export class Editor extends Group implements IEditor {
         return this.mergeConfig.editSize
     }
 
-    // operate
-
-    public onMove(e: DragEvent | MoveEvent): void {
-        if (e instanceof MoveEvent) {
-
-            if (e.moveType !== 'drag') {
-                const { moveable, resizeable } = this.mergeConfig
-                const move = e.getLocalMove(this.element)
-                if (moveable === 'move') e.stop(), this.move(move.x, move.y)
-                else if (resizeable === 'zoom') e.stop()
-            }
-
-        } else {
-
-            const total = { x: e.totalX, y: e.totalY }
-
-            if (e.shiftKey) {
-                if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0
-                else total.x = 0
-            }
-
-            this.move(DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total))
-
-        }
-    }
-
-    public onScale(e: DragEvent | ZoomEvent): void {
-        const { element } = this
-        let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig
 
-        if (e instanceof ZoomEvent) {
+    // TransformTool will rewrite -----
 
-            if (resizeable === 'zoom') e.stop(), this.scaleOf(element.getBoxPoint(e), e.scale, e.scale)
+    // operate 
 
-        } else {
+    public onMove(_e: DragEvent | MoveEvent): void { }
 
-            const { direction } = e.current as IEditPoint
+    public onScale(_e: DragEvent | ZoomEvent): void { }
 
-            if (e.shiftKey || element.lockRatio) lockRatio = true
+    public onRotate(_e: DragEvent | RotateEvent): void { }
 
-            const data = EditDataHelper.getScaleData(element, this.editBox.dragStartData.bounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale')
-
-            if (this.editTool.onScaleWithDrag) {
-                data.drag = e
-                this.scaleWithDrag(data)
-            } else {
-                this.scaleOf(data.origin, data.scaleX, data.scaleY)
-            }
-
-        }
-    }
-
-    public onRotate(e: DragEvent | RotateEvent): void {
-        const { skewable, rotateable, around, rotateGap } = this.mergeConfig
-        const { direction, name } = e.current as IEditPoint
-        if (skewable && name === 'resize-line') return this.onSkew(e as DragEvent)
-
-        const { element } = this, { dragStartData } = this.editBox
-        let origin: IPointData, rotation: number
-
-        if (e instanceof RotateEvent) {
-
-            if (rotateable === 'rotate') e.stop(), rotation = e.rotation, origin = element.getBoxPoint(e)
-            else return
-
-            if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
-
-        } else {
-
-            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(dragStartData), e.shiftKey ? null : (element.around || element.origin || around || 'center'))
-            rotation = data.rotation
-            origin = data.origin
-
-        }
-
-        if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
-        if (e instanceof DragEvent) rotation = dragStartData.rotation + rotation - element.rotation
-
-        rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2)
-        if (!rotation) return
-
-        this.rotateOf(origin, rotation)
-    }
-
-
-    public onSkew(e: DragEvent): void {
-        const { element } = this
-        const { around } = this.mergeConfig
-
-        const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, (e.current as IEditPoint).direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey))
-        if (!skewX && !skewY) return
-
-        this.skewOf(origin, skewX, skewY)
-    }
+    public onSkew(_e: DragEvent): void { }
 
 
     // transform
 
-    public move(x: number | IPointData, y = 0): void {
-        if (!this.checkTransform('moveable')) return
-        if (typeof x === 'object') y = x.y, x = x.x
+    public move(_x: number | IPointData, _y = 0): void { }
 
-        const { element: target } = this, { beforeMove } = this.mergeConfig
-        if (beforeMove) {
-            const check = beforeMove({ target, x, y })
-            if (typeof check === 'object') x = check.x, y = check.y
-            else if (check === false) return
-        }
+    public scaleWithDrag(_data: IEditorScaleEvent): void { }
 
-        const world = target.getWorldPointByLocal({ x, y }, null, true)
-        if (this.multiple) target.safeChange(() => target.move(x, y))
-        const data: IEditorMoveEvent = { target, editor: this, moveX: world.x, moveY: world.y }
+    override scaleOf(_origin: IPointData | IAlign, scaleX: number, _scaleY = scaleX, _resize?: boolean): void { }
 
-        this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data))
-        const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data)
-        this.editTool.onMove(event)
-        this.emitEvent(event)
-    }
-
-    public scaleWithDrag(data: IEditorScaleEvent): void {
-        if (!this.checkTransform('resizeable')) return
-
-        const { element: target } = this, { beforeScale } = this.mergeConfig
-        if (beforeScale) {
-            const { origin, scaleX, scaleY, drag } = data
-            const check = beforeScale({ target, drag, origin, scaleX, scaleY })
-            if (check === false) return
-        }
-
-        data = { ...data, target, editor: this, worldOrigin: target.getWorldPoint(data.origin) }
-
-        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
-        this.editTool.onScaleWithDrag(event)
-        this.emitEvent(event)
-    }
-
-
-    override scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
-        if (!this.checkTransform('resizeable')) return
-
-        const { element: target } = this, { beforeScale } = this.mergeConfig
-        if (beforeScale) {
-            const check = beforeScale({ target, origin, scaleX, scaleY })
-            if (typeof check === 'object') scaleX = check.scaleX, scaleY = check.scaleY
-            else if (check === false) return
-        }
-
-        const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)))
-        const data: IEditorScaleEvent = { target, editor: this, worldOrigin, scaleX, scaleY, transform }
-
-        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
-        this.editTool.onScale(event)
-        this.emitEvent(event)
-    }
-
-    override flip(axis: IAxis): void {
-        if (!this.checkTransform('resizeable')) return
-
-        const { element } = this
-        const worldOrigin = this.getWorldOrigin('center')
-        const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(element, axis))
-        const data: IEditorScaleEvent = { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform }
+    override flip(_axis: IAxis): void { }
 
-        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
-        this.editTool.onScale(event)
-        this.emitEvent(event)
-    }
-
-    override rotateOf(origin: IPointData | IAlign, rotation: number): void {
-        if (!this.checkTransform('rotateable')) return
-
-        const { element: target } = this, { beforeRotate } = this.mergeConfig
-        if (beforeRotate) {
-            const check = beforeRotate({ target, origin, rotation })
-            if (typeof check === 'number') rotation = check
-            else if (check === false) return
-        }
+    override rotateOf(_origin: IPointData | IAlign, _rotation: number): void { }
 
-        const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)))
-        const data: IEditorRotateEvent = { target, editor: this, worldOrigin, rotation, transform }
+    override skewOf(_origin: IPointData | IAlign, _skewX: number, _skewY = 0, _resize?: boolean): void { }
 
-        this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data))
-        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data)
-        this.editTool.onRotate(event)
-        this.emitEvent(event)
-    }
+    public checkTransform(_type: 'moveable' | 'resizeable' | 'rotateable' | 'skewable'): boolean { return undefined }
 
-    override skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
-        if (!this.checkTransform('skewable')) return
+    protected getWorldOrigin(_origin: IPointData | IAlign): IPointData { return undefined }
 
-        const { element: target } = this, { beforeSkew } = this.mergeConfig
-        if (beforeSkew) {
-            const check = beforeSkew({ target, origin, skewX, skewY })
-            if (typeof check === 'object') skewX = check.skewX, skewY = check.skewY
-            else if (check === false) return
-        }
+    protected getChangedTransform(_func: IFunction): IMatrix { return undefined }
 
-        const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)))
-        const data: IEditorSkewEvent = { target, editor: this, worldOrigin, skewX, skewY, transform }
-
-        this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data))
-        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data)
-        this.editTool.onSkew(event)
-        this.emitEvent(event)
-    }
-
-    public checkTransform(type: 'moveable' | 'resizeable' | 'rotateable' | 'skewable'): boolean { return this.element && !this.element.locked && this.mergeConfig[type] as boolean }
-
-    protected getWorldOrigin(origin: IPointData | IAlign): IPointData {
-        return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin))
-    }
-
-    protected getChangedTransform(func: IFunction): IMatrix {
-        const { element } = this
-        if (this.multiple && !element.canChange) return element.changedTransform
-
-        const oldMatrix = new Matrix(element.worldTransform)
-        func()
-        return new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
-    }
+    // --------
 
 
     // group
@@ -525,15 +329,12 @@ export class Editor extends Group implements IEditor {
         if (this.targetChanged) this.update()
     }
 
-    protected onKey(e: KeyEvent): void {
-        updateCursor(this, e)
-    }
 
     // event 
 
     public listenTargetEvents(): void {
         if (!this.targetEventIds.length) {
-            const { app, leafer, editBox, editMask } = this
+            const { app, leafer, editMask } = this
             this.targetEventIds = [
                 leafer.on_(RenderEvent.START, this.onRenderStart, this),
 
@@ -543,9 +344,6 @@ export class Editor extends Group implements IEditor {
                     [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
                     [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
                     [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-
-                    [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
-                    [KeyEvent.DOWN, editBox.onArrow, editBox]
                 ])
             ]
             if (editMask.visible) editMask.forceRender()

package/src/display/EditBox.ts

@@ -1,6 +1,6 @@
-import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, IEventParams } from '@leafer-ui/interface'
+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 } from '@leafer-ui/draw'
-import { DragEvent, PointerEvent } from '@leafer-ui/core'
+import { DragEvent, PointerEvent, KeyEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
@@ -15,6 +15,7 @@ const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig: IEditorCon
 export class EditBox extends Group implements IEditBox {
 
     public editor: IEditor
+
     public dragging: boolean
     public moving: boolean
 
@@ -33,6 +34,24 @@ 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 } = this.editor
+        return this.mergedConfig = config ? { ...mergeConfig, ...config } : mergeConfig
+    }
+
+    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 }
@@ -77,8 +96,7 @@ export class EditBox extends Group implements IEditBox {
     }
 
     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()
@@ -97,22 +115,34 @@ 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
+
+        const syncEventer = single && this.transformTool.editTool
+
+        rect.hittable = !syncEventer
+        rect.syncEventer = syncEventer && this.editor  // 单选下 rect 的事件不会冒泡，需要手动传递给editor
 
         // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
-        if (single) {
-            element.syncEventer = rect
-            this.app.interaction.bottomList = [{ target: rect, proxy: element }]
+        if (syncEventer) {
+            target.syncEventer = rect
+            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
+    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 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 } = mergeConfig
 
-        this.visible = !element.locked
+        this.visible = !this.target.locked
         editMask.visible = mask ? true : 0
 
         if (this.view.worldOpacity) {
@@ -154,27 +184,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)
@@ -214,18 +244,18 @@ export class EditBox extends Group implements IEditBox {
 
 
     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())
     }
 
@@ -241,16 +271,16 @@ export class EditBox extends Group implements IEditBox {
     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
         if (point.name === 'rect') {
             this.moving = true
-            editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1 // move
+            editor.opacity = this.mergeConfig.hideOnMove ? 0 : 1 // move
         }
         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中的元素列表
     }
 
@@ -264,19 +294,28 @@ export class EditBox extends Group implements IEditBox {
     }
 
     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 } = this, point = e.current as IEditPoint
+        if (point.name === 'rect') {
+            transformTool.onMove(e)
+            updateMoveCursor(this)
+        } else {
+            const { pointType } = this.enterPoint = point
+            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !this.mergeConfig.resizeable) {
+                transformTool.onRotate(e)
+                if (pointType === 'resize-rotate') transformTool.onScale(e)
+            } else if (pointType === 'resize') transformTool.onScale(e)
+            if (pointType === 'skew') transformTool.onSkew(e)
+            updateCursor(this, e)
+        }
+    }
+
+    protected onKey(e: KeyEvent): void {
+        updateCursor(this, e)
     }
 
     public onArrow(e: IKeyEvent): void {
         const { editor } = this
-        if (editor.editing && editor.mergeConfig.keyEvent) {
+        if (editor.editing && this.mergeConfig.keyEvent) {
             let x = 0, y = 0
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
@@ -298,26 +337,27 @@ export class EditBox extends Group implements IEditBox {
 
 
     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 +367,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 +376,35 @@ 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, updateCursor(this, e) }])
         this.__eventIds.push(point.on_(events))
     }
 
     protected __listenEvents(): void {
-        const { rect, editor } = this
-        this.__eventIds.push(
+        const { rect, editor, __eventIds: events } = this
+
+        events.push(
             editor.on_(EditorEvent.SELECT, this.onSelect, this),
 
             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]
+                ])
+            )
+        })
     }
 
     protected __removeListenEvents(): void {