@leafer-in/editor 1.9.6 → 1.9.8

package/package.json

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

package/src/Editor.ts

@@ -1,5 +1,5 @@
 import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, IMatrix, IApp, ILeaferMode } from '@leafer-ui/interface'
-import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin, isString, PropertyEvent, LeaferEvent } from '@leafer-ui/draw'
+import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin, isString, PropertyEvent, LeaferEvent, isArray } from '@leafer-ui/draw'
 import { DragEvent, RotateEvent, ZoomEvent, MoveEvent, useModule } from '@leafer-ui/core'
 
 import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement } from '@leafer-in/interface'
@@ -29,11 +29,13 @@ export class Editor extends Group implements IEditor {
     readonly mergeConfig: IEditorConfig
     readonly mergedConfig: IEditorConfig
 
+    @targetAttr(onTarget)
+    public target?: IUI | IUI[]
+
     @targetAttr(onHover)
     public hoverTarget?: IUI
 
-    @targetAttr(onTarget)
-    public target?: IUI | IUI[]
+    public dimTarget?: IGroup | IGroup[] // 需要淡化的容器
 
     // 列表
 
@@ -121,6 +123,20 @@ export class Editor extends Group implements IEditor {
         this.hasItem(item) ? this.removeItem(item) : this.addItem(item)
     }
 
+    // 淡化 / 突出
+
+    public setDimOthers(value: boolean | number, attrName: 'bright' | 'dim' = 'dim', list?: IUI[]): void {
+        if (!list) {
+            const { dimTarget, targetLeafer } = this
+            list = dimTarget ? (isArray(dimTarget) ? dimTarget : [dimTarget]) : [targetLeafer]
+        }
+        if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => DataHelper.stintSet(item, attrName, value))
+    }
+
+    public setBright(value: boolean): void {
+        this.setDimOthers(value, 'bright', this.list)
+    }
+
     // update
 
     public update(): void {

package/src/decorator/data.ts

@@ -15,23 +15,28 @@ export function targetAttr(fn: IFunction) {
                 const old = (this as IObject)[privateKey]
                 if (old !== value) {
 
-                    if ((this as IEditor).config) { // Editor
+                    const t = this as IEditor
+
+                    if (t.config) { // Editor
 
                         const isSelect = key === 'target'
                         if (isSelect) {
-                            if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1) // fix: 单个锁定 + shift多选
-                            if ((this as IEditor).single) (this as IEditor).element.syncEventer = null // 重置 EditBox.load() 设置
-
-                            const { beforeSelect } = (this as IEditor).config
+                            const { beforeSelect } = t.config
                             if (beforeSelect) {
                                 const check = beforeSelect({ target: value })
                                 if (isObject(check)) value = check
                                 else if (check === false) return
                             }
+
+                            t.setDimOthers(false)
+                            t.setBright(false)
+
+                            if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1) // fix: 单个锁定 + shift多选
+                            if (t.single) t.element.syncEventer = null // 重置 EditBox.load() 设置
                         }
 
                         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 }))
+                        if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, { editor: t, value: value as IUI, oldValue: old }))
                     }
 
                     (this as IObject)[privateKey] = value, fn(this, old)

package/src/display/EditBox.ts

@@ -1,5 +1,5 @@
-import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, IEventParams, ITransformTool, IUIEvent } from '@leafer-ui/interface'
-import { Group, Box, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper, isArray, isString, isNumber } from '@leafer-ui/draw'
+import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, ITransformTool, IUIEvent, IEditPointInputData } from '@leafer-ui/interface'
+import { Group, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper, isArray, isString, isNumber, getPointData } from '@leafer-ui/draw'
 import { DragEvent, PointerEvent, KeyEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
@@ -25,7 +25,7 @@ export class EditBox extends Group implements IEditBox {
 
     public view: IGroup = new Group()  // 放置默认编辑工具控制点
 
-    public rect: IBox = new Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 }) // target rect
+    public rect: IEditPoint = new EditPoint({ 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, visible: 0 })
 
@@ -68,6 +68,7 @@ export class EditBox extends Group implements IEditBox {
         const { moveable, resizeable, rotateable } = this.mergeConfig
         return isString(moveable) || isString(resizeable) || isString(rotateable)
     }
+    public get canDragLimitAnimate(): boolean { return (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) as any as boolean }
 
     protected __eventIds: IEventListenerId[] = []
 
@@ -101,6 +102,7 @@ export class EditBox extends Group implements IEditBox {
         }
 
         this.listenPointEvents(circle, 'rotate', 2)
+        this.listenPointEvents(rect, 'move', 8) // center
 
         view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints)
         this.add(view)
@@ -108,8 +110,8 @@ export class EditBox extends Group implements IEditBox {
 
 
     public load(): void {
-        const { target, mergeConfig, single, rect, circle, resizePoints } = this
-        const { stroke, strokeWidth } = mergeConfig
+        const { target, mergeConfig, single, rect, circle, resizePoints, resizeLines } = this
+        const { stroke, strokeWidth, resizeLine } = mergeConfig
 
         const pointsStyle = this.getPointsStyle()
         const middlePointsStyle = this.getMiddlePointsStyle()
@@ -122,6 +124,7 @@ export class EditBox extends Group implements IEditBox {
             resizeP = resizePoints[i]
             resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]))
             resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90
+            if (i % 2) resizeLines[(i - 1) / 2].set({ pointType: 'resize', rotation: (i - 1) / 2 * 90, ...(resizeLine || {}) } as IEditPointInputData)
         }
 
         // rotate
@@ -159,12 +162,15 @@ export class EditBox extends Group implements IEditBox {
 
 
     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, hideRotatePoints, hideResizeLines } = mergeConfig
+        const { editor, mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
+        const { editMask } = editor
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, dimOthers, bright, spread, hideRotatePoints, hideResizeLines } = mergeConfig
 
         editMask.visible = mask ? true : 0
 
+        editor.setDimOthers(dimOthers)
+        editor.setBright(!!dimOthers || bright)
+
         if (spread) BoundsHelper.spread(bounds, spread)
 
         if (this.view.worldOpacity) {
@@ -195,10 +201,10 @@ export class EditBox extends Group implements IEditBox {
                     resizeP.visible = rotateP.visible = showPoints && !!middlePoint
 
                     if (((i + 1) / 2) % 2) { // top, bottom
-                        resizeL.width = width
+                        resizeL.width = width + resizeL.height
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false
                     } else {
-                        resizeL.height = height
+                        resizeL.width = height + resizeL.height
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false
                     }
                 }
@@ -280,15 +286,14 @@ export class EditBox extends Group implements IEditBox {
 
     // drag
 
-    protected onDragStart(e: DragEvent): void {
+    public onDragStart(e: DragEvent): void {
         this.dragging = true
         const point = this.dragPoint = e.current as IEditPoint, { pointType } = point
-        const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig
+        const { moveable, resizeable, rotateable, skewable } = this.mergeConfig
 
         // 确定模式
-        if (point.name === 'rect') {
+        if (pointType === 'move') {
             moveable && (this.moving = true)
-            editor.opacity = hideOnMove ? 0 : 1 // move
         } else {
             if (pointType.includes('rotate') || this.isHoldRotateKey(e) || !resizeable) {
                 rotateable && (this.rotating = true)
@@ -298,41 +303,54 @@ export class EditBox extends Group implements IEditBox {
             if (pointType === 'skew') skewable && (this.skewing = true)
         }
 
-        dragStartData.x = e.x
-        dragStartData.y = e.y
-        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 {
-        if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e)
-
-        this.dragPoint = null
-        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
+        this.onTransformStart(e)
     }
 
-    protected onDrag(e: DragEvent): void {
+    public onDrag(e: DragEvent): void {
         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)
+        }
+        updatePointCursor(this, e)
+    }
+
+    public onDragEnd(e: DragEvent): void {
+        this.onTransformEnd(e)
+        this.dragPoint = null
+    }
+
+    // 操作事件共用
+
+    public onTransformStart(e: IUIEvent): void {
+        if (this.canUse) {
+            if (this.moving) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1 // move
+            if (this.resizing) ResizeEvent.resizingKeys = this.editor.leafList.keys // 记录正在resize中的元素列表
+
+            const { dragStartData, target } = this
+            dragStartData.x = e.x
+            dragStartData.y = e.y
+            dragStartData.totalOffset = getPointData() // 缩放、旋转造成的总偏移量，一般用于手势操作的move纠正
+            dragStartData.point = { x: target.x, y: target.y } // 用于移动
+            dragStartData.bounds = { ...target.getLayoutBounds('box', 'local') } // 用于resize
+            dragStartData.rotation = target.rotation // 用于旋转
         }
     }
 
-    protected resetDoing(): void {
-        if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false
+    public onTransformEnd(e: IUIEvent): void {
+        if (this.canUse) {
+            if (this.canDragLimitAnimate && (e instanceof DragEvent || e instanceof MoveEvent)) this.transformTool.onMove(e)
+            if (this.resizing) ResizeEvent.resizingKeys = null
+
+            this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false
+            this.editor.opacity = 1
+            this.update() // 移动端手势操作hideOnMove移动需强制更新一次           
+        }
     }
 
     // 手势控制元素
@@ -340,24 +358,19 @@ export class EditBox extends Group implements IEditBox {
     public onMove(e: MoveEvent): void {
         if (this.canGesture && e.moveType !== 'drag') {
             e.stop()
-            if (isString(this.mergeConfig.moveable)) {
+            if (isString(this.mergedConfig.moveable)) {
                 this.gesturing = this.moving = true
-                this.transformTool.onMove(e)
+                e.type === MoveEvent.START ? this.onTransformStart(e) : this.transformTool.onMove(e)
             }
         }
     }
 
-    public onMoveEnd(e: MoveEvent): void {
-        if (this.moving) this.transformTool.onMove(e)
-        this.resetDoing()
-    }
-
     public onScale(e: ZoomEvent): void {
         if (this.canGesture) {
             e.stop()
-            if (isString(this.mergeConfig.resizeable)) {
+            if (isString(this.mergedConfig.resizeable)) {
                 this.gesturing = this.resizing = true
-                this.transformTool.onScale(e)
+                e.type === ZoomEvent.START ? this.onTransformStart(e) : this.transformTool.onScale(e)
             }
         }
     }
@@ -365,14 +378,15 @@ export class EditBox extends Group implements IEditBox {
     public onRotate(e: RotateEvent): void {
         if (this.canGesture) {
             e.stop()
-            if (isString(this.mergeConfig.rotateable)) {
+            if (isString(this.mergedConfig.rotateable)) {
                 this.gesturing = this.rotating = true
-                this.transformTool.onRotate(e)
+                e.type === RotateEvent.START ? this.onTransformStart(e) : this.transformTool.onRotate(e)
             }
         }
     }
 
     // 键盘
+
     public isHoldRotateKey(e: IUIEvent): boolean { // 按住ctrl在控制点上变旋转功能
         const { rotateKey } = this.mergedConfig
         if (rotateKey) return e.isHoldKeys(rotateKey)
@@ -384,8 +398,7 @@ export class EditBox extends Group implements IEditBox {
     }
 
     public onArrow(e: IKeyEvent): void {
-        const { editor, transformTool } = this
-        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
+        if (this.canUse && this.mergeConfig.keyEvent) {
             let x = 0, y = 0
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
@@ -401,7 +414,7 @@ export class EditBox extends Group implements IEditBox {
                 case 'ArrowRight':
                     x = distance
             }
-            if (x || y) transformTool.move(x, y)
+            if (x || y) this.transformTool.move(x, y)
         }
     }
 
@@ -440,14 +453,16 @@ export class EditBox extends Group implements IEditBox {
         point.direction = direction
         point.pointType = type
 
-        const events: IEventParams[] = [
-            [DragEvent.START, this.onDragStart, this],
-            [DragEvent.DRAG, this.onDrag, this],
-            [DragEvent.END, this.onDragEnd, this],
-            [PointerEvent.LEAVE, () => { this.enterPoint = null }],
-        ]
-        if (point.name !== 'circle') events.push([PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updatePointCursor(this, e) }])
-        this.__eventIds.push(point.on_(events))
+        this.__eventIds.push(
+            point.on_([
+                [DragEvent.START, this.onDragStart, this],
+                [DragEvent.DRAG, this.onDrag, this],
+                [DragEvent.END, this.onDragEnd, this],
+
+                [PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updatePointCursor(this, e) }],
+                [PointerEvent.LEAVE, () => { this.enterPoint = null }]
+            ])
+        )
     }
 
     protected __listenEvents(): void {
@@ -455,11 +470,6 @@ export class EditBox extends Group implements IEditBox {
 
         events.push(
             rect.on_([
-                [DragEvent.START, this.onDragStart, this],
-                [DragEvent.DRAG, this.onDrag, this],
-                [DragEvent.END, this.onDragEnd, this],
-
-                [PointerEvent.ENTER, () => updateMoveCursor(this)],
                 [PointerEvent.DOUBLE_TAP, this.onDoubleTap, this],
                 [PointerEvent.LONG_PRESS, this.onLongPress, this]
             ])
@@ -470,12 +480,12 @@ export class EditBox extends Group implements IEditBox {
                 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.onMoveEnd, this],
-                    [ZoomEvent.END, this.resetDoing, this],
-                    [RotateEvent.END, this.resetDoing, this],
+
+                    [[MoveEvent.START, MoveEvent.BEFORE_MOVE], this.onMove, this, true],
+                    [[ZoomEvent.START, ZoomEvent.BEFORE_ZOOM], this.onScale, this, true],
+                    [[RotateEvent.START, RotateEvent.BEFORE_ROTATE], this.onRotate, this, true],
+
+                    [[MoveEvent.END, ZoomEvent.END, RotateEvent.END], this.onTransformEnd, this],
                 ])
             )
         })

package/src/display/EditSelect.ts

@@ -17,8 +17,8 @@ export class EditSelect extends Group implements IEditSelect {
     public editor: IEditor
 
     public get dragging(): boolean { return !!this.originList }
-    public get running(): boolean { const { editor } = this; return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && this.app.mode === 'normal' }
-    public get isMoveMode(): boolean { return this.app && this.app.interaction.moveMode }
+    public get running(): boolean { const { editor, app } = this; return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && (app && app.mode === 'normal') }
+    public get isMoveMode(): boolean { const { app } = this; return app && app.interaction.moveMode }
 
     public hoverStroker: IStroker = new Stroker()
     public targetStroker: IStroker = new Stroker()
@@ -95,7 +95,7 @@ export class EditSelect extends Group implements IEditSelect {
         if (e.multiTouch) return
 
         const { editor } = this
-        const { select } = editor.mergeConfig
+        const { select, selectKeep } = editor.mergeConfig
 
         if (select === 'tap') this.checkAndSelect(e)
         else if (this.waitSelect) this.waitSelect()
@@ -103,7 +103,7 @@ export class EditSelect extends Group implements IEditSelect {
         if (this.needRemoveItem) {
             editor.removeItem(this.needRemoveItem)
         } else if (this.isMoveMode) {
-            editor.target = null  // move.dragEmpty
+            if (!selectKeep) editor.target = null  // move.dragEmpty
         }
 
     }
@@ -125,7 +125,7 @@ export class EditSelect extends Group implements IEditSelect {
 
             } else if (this.allow(e.target)) {
 
-                if (!this.isHoldMultipleSelectKey(e)) editor.target = null
+                if (!this.isHoldMultipleSelectKey(e) && !this.editor.mergedConfig.selectKeep) editor.target = null
 
             }
         }

package/src/editor/cursor.ts

@@ -11,15 +11,21 @@ const cacheCursors: IObject = {}
 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 === 'rect') return updateMoveCursor(editBox) // rect 移动元素
     if (point.name === 'circle') return // 独立旋转按钮
-    if (point.pointType === 'button') { // 普通按钮
+
+    let { rotation } = editBox
+    const { pointType } = point, { moveCursor, resizeCursor, rotateCursor, skewCursor, moveable, resizeable, rotateable, skewable } = editBox.mergeConfig
+
+    if (pointType === 'move') { // 移动类型
+        point.cursor = moveCursor
+        if (!moveable) point.visible = false
+        return
+    } else if (pointType === 'button') { // 普通按钮
         if (!point.cursor) point.cursor = 'pointer'
         return
     }
 
-    let { rotation } = editBox
-    const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig
-
     let showResize = pointType.includes('resize')
     if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false
     const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew')

package/src/helper/EditDataHelper.ts

@@ -1,5 +1,5 @@
 import { IBoundsData, IPointData, IAround, IAlign, IUI, ILayoutBoundsData } from '@leafer-ui/interface'
-import { AroundHelper, MathHelper, PointHelper, Direction9, DragBoundsHelper } from '@leafer-ui/draw'
+import { AroundHelper, MathHelper, PointHelper, Direction9, DragBoundsHelper, isNumber } from '@leafer-ui/draw'
 
 import { IEditorScaleEvent, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
 
@@ -10,18 +10,12 @@ const { within, sign } = MathHelper
 
 export const EditDataHelper = {
 
-    getScaleData(target: IUI, startBounds: ILayoutBoundsData, direction: Direction9, totalMove: IPointData, lockRatio: boolean | 'corner', around: IAround, flipable: boolean, scaleMode: boolean): IEditorScaleEvent {
+    getScaleData(target: IUI, startBounds: ILayoutBoundsData, direction: Direction9, totalMoveOrScale: IPointData | number, lockRatio: boolean | 'corner', around: IAround, flipable: boolean, scaleMode: boolean): IEditorScaleEvent {
         let align: IAlign, origin = {} as IPointData, scaleX: number = 1, scaleY: number = 1
 
         const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = target
         const { width, height } = startBounds
 
-        if (around) {
-            totalMove.x *= 2
-            totalMove.y *= 2
-        }
-
-
         // 获取已经改变的比例
         const originChangedScaleX = target.scaleX / startBounds.scaleX
         const originChangedScaleY = target.scaleY / startBounds.scaleY
@@ -31,72 +25,85 @@ export const EditDataHelper = {
         const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width
         const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height
 
-        totalMove.x *= scaleMode ? originChangedScaleX : signX
-        totalMove.y *= scaleMode ? originChangedScaleY : signY
+        if (isNumber(totalMoveOrScale)) {
 
-        const topScale = (-totalMove.y + height) / height
-        const rightScale = (totalMove.x + width) / width
-        const bottomScale = (totalMove.y + height) / height
-        const leftScale = (-totalMove.x + width) / width
+            scaleX = scaleY = Math.sqrt(totalMoveOrScale)
 
-        switch (direction) {
-            case top:
-                scaleY = topScale
-                align = 'bottom'
-                break
-            case right:
-                scaleX = rightScale
-                align = 'left'
-                break
-            case bottom:
-                scaleY = bottomScale
-                align = 'top'
-                break
-            case left:
-                scaleX = leftScale
-                align = 'right'
-                break
-            case topLeft:
-                scaleY = topScale
-                scaleX = leftScale
-                align = 'bottom-right'
-                break
-            case topRight:
-                scaleY = topScale
-                scaleX = rightScale
-                align = 'bottom-left'
-                break
-            case bottomRight:
-                scaleY = bottomScale
-                scaleX = rightScale
-                align = 'top-left'
-                break
-            case bottomLeft:
-                scaleY = bottomScale
-                scaleX = leftScale
-                align = 'top-right'
-        }
+        } else {
+
+            if (around) {
+                totalMoveOrScale.x *= 2
+                totalMoveOrScale.y *= 2
+            }
+
+            totalMoveOrScale.x *= scaleMode ? originChangedScaleX : signX
+            totalMoveOrScale.y *= scaleMode ? originChangedScaleY : signY
+
+            const topScale = (-totalMoveOrScale.y + height) / height
+            const rightScale = (totalMoveOrScale.x + width) / width
+            const bottomScale = (totalMoveOrScale.y + height) / height
+            const leftScale = (-totalMoveOrScale.x + width) / width
 
-        if (lockRatio) {
-            if (lockRatio === 'corner' && direction % 2) {
-                lockRatio = false
-            } else {
-                let scale: number
-                switch (direction) {
-                    case top:
-                    case bottom:
-                        scale = scaleY
-                        break
-                    case left:
-                    case right:
-                        scale = scaleX
-                        break
-                    default:
-                        scale = Math.sqrt(Math.abs(scaleX * scaleY))
+            switch (direction) {
+                case top:
+                    scaleY = topScale
+                    align = 'bottom'
+                    break
+                case right:
+                    scaleX = rightScale
+                    align = 'left'
+                    break
+                case bottom:
+                    scaleY = bottomScale
+                    align = 'top'
+                    break
+                case left:
+                    scaleX = leftScale
+                    align = 'right'
+                    break
+                case topLeft:
+                    scaleY = topScale
+                    scaleX = leftScale
+                    align = 'bottom-right'
+                    break
+                case topRight:
+                    scaleY = topScale
+                    scaleX = rightScale
+                    align = 'bottom-left'
+                    break
+                case bottomRight:
+                    scaleY = bottomScale
+                    scaleX = rightScale
+                    align = 'top-left'
+                    break
+                case bottomLeft:
+                    scaleY = bottomScale
+                    scaleX = leftScale
+                    align = 'top-right'
+            }
+
+            if (lockRatio) {
+                if (lockRatio === 'corner' && direction % 2) {
+                    lockRatio = false
+                } else {
+                    let scale: number
+                    switch (direction) {
+                        case top:
+                        case bottom:
+                            scale = scaleY
+                            break
+                        case left:
+                        case right:
+                            scale = scaleX
+                            break
+                        default:
+                            scale = Math.sqrt(Math.abs(scaleX * scaleY))
+                    }
+                    scaleX = scaleX < 0 ? -scale : scale
+                    scaleY = scaleY < 0 ? -scale : scale
                 }
-                scaleX = scaleX < 0 ? -scale : scale
-                scaleY = scaleY < 0 ? -scale : scale
             }
+
         }
 
         const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1