@leafer-in/editor 1.0.0 → 1.0.2

package/src/Editor.ts

@@ -1,6 +1,6 @@
-import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign } from '@leafer-ui/interface'
-import { Group, Rect, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper } from '@leafer-ui/draw'
-import { DragEvent, RotateEvent, KeyEvent, ZoomEvent } from '@leafer-ui/core'
+import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, ILayoutBoundsData } from '@leafer-ui/interface'
+import { Group, Rect, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper, Direction9 } from '@leafer-ui/draw'
+import { DragEvent, RotateEvent, KeyEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor } from '@leafer-in/interface'
 
@@ -28,7 +28,7 @@ import { EditorGroupEvent } from './event/EditorGroupEvent'
 
 export class Editor extends Group implements IEditor {
 
-    public config = config
+    public config = DataHelper.clone(config)
 
     public get mergeConfig(): IEditorConfig {
         const { element, config } = this
@@ -52,6 +52,7 @@ export class Editor extends Group implements IEditor {
     public get editing(): boolean { return !!this.list.length }
     public innerEditing: boolean
     public get groupOpening(): boolean { return !!this.openedGroupList.length }
+    public resizeDirection?: Direction9
 
     public get multiple(): boolean { return this.list.length > 1 }
     public get single(): boolean { return this.list.length === 1 }
@@ -75,6 +76,7 @@ export class Editor extends Group implements IEditor {
     public editMask: EditMask = new EditMask(this)
 
     public dragStartPoint: IPointData
+    public dragStartBounds: ILayoutBoundsData
 
     public targetEventIds: IEventListenerId[] = []
 
@@ -153,32 +155,47 @@ export class Editor extends Group implements IEditor {
 
     // operate
 
-    public onMove(e: DragEvent): void {
-        const total = { x: e.totalX, y: e.totalY }
+    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.dragStartPoint, total))
 
-        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.dragStartPoint, total))
     }
 
     public onScale(e: DragEvent | ZoomEvent): void {
         const { element } = this
+        let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig
 
         if (e instanceof ZoomEvent) {
-            if (this.mergeConfig.resizeable === 'zoom') {
-                e.stop()
-                this.scaleOf(element.getInnerPoint(e), e.scale, e.scale)
-            }
+
+            if (resizeable === 'zoom') e.stop(), this.scaleOf(element.getInnerPoint(e), e.scale, e.scale)
+
         } else {
 
             const { direction } = e.current as IEditPoint
-            let { around, lockRatio } = this.mergeConfig
+
             if (e.shiftKey || element.lockRatio) lockRatio = true
 
-            const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey))
+            const data = EditDataHelper.getScaleData(element, this.dragStartBounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale')
 
             if (this.editTool.onScaleWithDrag) {
                 data.drag = e
@@ -192,7 +209,7 @@ export class Editor extends Group implements IEditor {
     }
 
     public onRotate(e: DragEvent | RotateEvent): void {
-        const { skewable, around, rotateGap } = this.mergeConfig
+        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)
 
@@ -200,15 +217,17 @@ export class Editor extends Group implements IEditor {
         let origin: IPointData, rotation: number
 
         if (e instanceof RotateEvent) {
-            if (this.mergeConfig.rotateable === 'rotate') {
-                e.stop()
-                rotation = e.rotation, origin = element.getInnerPoint(e)
-            } else return
+
+            if (rotateable === 'rotate') e.stop(), rotation = e.rotation, origin = element.getInnerPoint(e)
+            else return
+
         } else {
+
             const last = { x: e.x - e.moveX, y: e.y - e.moveY }
-            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (around || 'center'))
+            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'))
             rotation = data.rotation
             origin = data.origin
+
         }
 
         rotation = MathHelper.getGapRotation(rotation, rotateGap, element.rotation)
@@ -250,77 +269,74 @@ export class Editor extends Group implements IEditor {
         if (!this.mergeConfig.resizeable || this.element.locked) return
 
         const { element } = this
-        const worldOrigin = element.getWorldPoint(data.origin)
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin })
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) })
 
         this.editTool.onScaleWithDrag(event)
         this.emitEvent(event)
     }
 
 
-    public scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
+    override scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
         if (!this.mergeConfig.resizeable || this.element.locked) return
 
         const { element } = this
-        const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin))
-
-        let transform: Matrix
-
-        if (this.multiple) {
-            const oldMatrix = new Matrix(element.worldTransform)
-            element.scaleOf(origin, scaleX, scaleY)
-            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
-        }
-
+        const worldOrigin = this.getWorldOrigin(origin)
+        const transform = this.multiple && this.getChangedTransform(() => element.scaleOf(origin, scaleX, scaleY))
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform })
 
         this.editTool.onScale(event)
         this.emitEvent(event)
     }
 
-    public rotateOf(origin: IPointData | IAlign, rotation: number): void {
-        if (!this.mergeConfig.rotateable || this.element.locked) return
+    override flip(axis: IAxis): void {
+        if (this.element.locked) return
 
         const { element } = this
-        const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin))
-
+        const worldOrigin = this.getWorldOrigin('center')
+        const transform = this.multiple ? this.getChangedTransform(() => element.flip(axis)) : new Matrix(LeafHelper.getFlipTransform(element, axis))
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform })
 
-        let transform: Matrix
+        this.editTool.onScale(event)
+        this.emitEvent(event)
+    }
 
-        if (this.multiple) {
-            const oldMatrix = new Matrix(element.worldTransform)
-            element.rotateOf(origin, rotation)
-            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
-        }
+    override rotateOf(origin: IPointData | IAlign, rotation: number): void {
+        if (!this.mergeConfig.rotateable || this.element.locked) return
 
+        const { element } = this
+        const worldOrigin = this.getWorldOrigin(origin)
+        const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation))
         const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform })
 
         this.editTool.onRotate(event)
         this.emitEvent(event)
     }
 
-    public skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
+    override skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
         if (!this.mergeConfig.skewable || this.element.locked) return
 
         const { element } = this
-        const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin))
+        const worldOrigin = this.getWorldOrigin(origin)
+        const transform = this.multiple && this.getChangedTransform(() => element.skewOf(origin, skewX, skewY))
+        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform })
 
-        let transform: Matrix
+        this.editTool.onSkew(event)
+        this.emitEvent(event)
+    }
 
-        if (this.multiple) {
-            const oldMatrix = new Matrix(element.worldTransform)
-            element.skewOf(origin, skewX, skewY)
-            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
-        }
 
-        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, {
-            target: element, editor: this, skewX, skewY, transform, worldOrigin
-        })
+    protected getWorldOrigin(origin: IPointData | IAlign): IPointData {
+        return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin))
+    }
 
-        this.editTool.onSkew(event)
-        this.emitEvent(event)
+    protected getChangedTransform(func: IFunction): Matrix {
+        const { element } = this
+        const oldMatrix = new Matrix(element.worldTransform)
+        func()
+        return new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
     }
 
+
     // group
 
     public group(userGroup?: IGroup | IGroupInputData): IGroup {
@@ -455,6 +471,9 @@ export class Editor extends Group implements IEditor {
         if (!this.targetEventIds.length) {
             const { leafer } = this.list[0]
             this.targetEventIds = [
+                this.app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
+                this.app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
+                this.app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
                 leafer.on_(RenderEvent.START, this.update, this),
                 leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e: KeyEvent) => { updateCursor(this, e) }),
                 leafer.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)

package/src/config.ts

@@ -33,6 +33,7 @@ export const config: IEditorConfig = {
 
     moveable: true,
     resizeable: true,
+    flipable: true,
     rotateable: true,
     skewable: true
 }

package/src/display/EditBox.ts

@@ -1,6 +1,6 @@
-import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign } from '@leafer-ui/interface'
+import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig } from '@leafer-ui/interface'
 import { Group, Box, AroundHelper, Direction9 } from '@leafer-ui/draw'
-import { DragEvent, PointerEvent, RotateEvent, ZoomEvent } from '@leafer-ui/core'
+import { DragEvent, PointerEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
@@ -22,7 +22,6 @@ 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 resizePoints: IEditPoint[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
@@ -69,10 +68,9 @@ export class EditBox extends Group implements IEditBox {
             this.listenPointEvents(resizePoint, 'resize', i)
         }
 
-        buttons.add(circle)
         this.listenPointEvents(circle, 'rotate', 2)
 
-        view.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints)
+        view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints)
         this.add(view)
     }
 
@@ -93,11 +91,11 @@ export class EditBox extends Group implements IEditBox {
         }
 
         // rotate
-        circle.set(this.getPointStyle(mergeConfig.rotatePoint || pointsStyle[0]))
+        circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]))
 
         // rect
         rect.set({ stroke, strokeWidth, ...(mergeConfig.rect || {}) })
-        rect.hittable = !single && moveable
+        rect.hittable = !single && !!moveable
 
         // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
         element.syncEventer = (single && moveable) ? rect : null
@@ -111,7 +109,7 @@ export class EditBox extends Group implements IEditBox {
         if (this.view.worldOpacity) {
             const { mergeConfig } = this.editor
             const { width, height } = bounds
-            const { rect, circle, resizePoints, rotatePoints, resizeLines } = this
+            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
             const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig
 
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
@@ -150,36 +148,50 @@ export class EditBox extends Group implements IEditBox {
             }
 
             // rotate
-            circle.visible = showPoints && rotateable && !!mergeConfig.rotatePoint
+            circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint)
+            if (circle.visible) this.layoutCircle(mergeConfig)
 
             // rect
             if (rect.path) rect.path = null // line可能会变成path优先模式
             rect.set({ ...bounds, visible: true })
 
             // buttons
-            const buttonVisible = showPoints && (circle.visible || this.buttons.children.length > 1)
-            this.buttons.visible = buttonVisible
-            if (buttonVisible) this.layoutButtons()
+            buttons.visible = showPoints && buttons.children.length > 0
+            if (buttons.visible) this.layoutButtons(mergeConfig)
         }
     }
 
-    protected layoutButtons(): void {
-        const { buttons, resizePoints } = this
-        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.mergeConfig
+    protected layoutCircle(config: IEditorConfig): void {
+        const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config
+        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 {
+        const { buttons } = this
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config
 
         const { flippedX, flippedY } = this
         let index = fourDirection.indexOf(buttonsDirection)
         if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
             if (buttonsFixed) index = (index + 2) % 4 // flip x / y
         }
+
         const direction = buttonsFixed ? EditDataHelper.getRotateDirection(index, this.flippedOne ? this.rotation : -this.rotation, 4) : index
+        this.setButtonPosition(buttons, direction, buttonsMargin, !!middlePoint)
 
-        const point = resizePoints[direction * 2 + 1] // 4 map 8 direction
+        if (buttonsFixed) buttons.rotation = (direction - index) * 90
+        buttons.scaleX = flippedX ? -1 : 1
+        buttons.scaleY = flippedY ? -1 : 1
+    }
+
+    protected setButtonPosition(buttons: IUI, direction: number, buttonsMargin: number, useMiddlePoint: boolean): void {
+        const point = this.resizePoints[direction * 2 + 1] // 4 map 8 direction
         const useX = direction % 2  // left / right
         const sign = (!direction || direction === 3) ? -1 : 1 // top / left = -1
 
-        const useWidth = index % 2 // left / right  origin direction
-        const margin = (buttonsMargin + (useWidth ? ((middlePoint ? point.width : 0) + buttons.boxBounds.width) : ((middlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign
+        const useWidth = direction % 2 // left / right  origin direction
+        const margin = (buttonsMargin + (useWidth ? ((useMiddlePoint ? point.width : 0) + buttons.boxBounds.width) : ((useMiddlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign
 
         if (useX) {
             buttons.x = point.x + margin
@@ -188,15 +200,9 @@ export class EditBox extends Group implements IEditBox {
             buttons.x = point.x
             buttons.y = point.y + margin
         }
-
-        if (buttonsFixed) {
-            buttons.rotation = (direction - index) * 90
-            buttons.scaleX = flippedX ? -1 : 1
-            buttons.scaleY = flippedY ? -1 : 1
-        }
-
     }
 
+
     public unload(): void {
         this.visible = false
     }
@@ -229,11 +235,14 @@ export class EditBox extends Group implements IEditBox {
 
     protected onDragStart(e: DragEvent): void {
         this.dragging = true
+        const { editor } = this
         if (e.current.name === 'rect') {
-            const { editor } = this
             this.moving = true
             editor.dragStartPoint = { x: editor.element.x, y: editor.element.y }
             editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1 // move
+        } else if ((e.current as IEditPoint).pointType === 'resize') {
+            editor.dragStartBounds = { ...editor.element.getLayoutBounds('box', 'local') }
+            editor.resizeDirection = (e.current as IEditPoint).direction
         }
     }
 
@@ -241,6 +250,7 @@ export class EditBox extends Group implements IEditBox {
         this.dragging = false
         this.moving = false
         if (e.current.name === 'rect') this.editor.opacity = 1 // move
+        this.editor.resizeDirection = undefined
 
     }
 
@@ -249,7 +259,7 @@ export class EditBox extends Group implements IEditBox {
         const point = this.enterPoint = e.current as IEditPoint
         if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
             if (editor.mergeConfig.rotateable) editor.onRotate(e)
-        } else {
+        } else if (point.pointType === 'resize') {
             editor.onScale(e)
         }
         updateCursor(editor, e)
@@ -319,9 +329,6 @@ export class EditBox extends Group implements IEditBox {
             rect.on_(DragEvent.DRAG, editor.onMove, editor),
             rect.on_(DragEvent.END, this.onDragEnd, this),
 
-            rect.on_(ZoomEvent.BEFORE_ZOOM, editor.onScale, editor, true),
-            rect.on_(RotateEvent.BEFORE_ROTATE, editor.onRotate, editor, true),
-
             rect.on_(PointerEvent.ENTER, () => updateMoveCursor(editor)),
             rect.on_(PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
             rect.on_(PointerEvent.LONG_PRESS, this.onLongPress, this)

package/src/display/EditMask.ts

@@ -23,7 +23,7 @@ export class EditMask extends UI {
             const { width, height } = rect.__
 
             canvas.resetTransform()
-            canvas.fillWorld(canvas.bounds, mask)
+            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)
         }

package/src/display/EditSelect.ts

@@ -1,4 +1,4 @@
-import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId, IPointerEvent } from '@leafer-ui/interface'
+import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId, IPointerEvent, IFunction } from '@leafer-ui/interface'
 import { Bounds, LeafList, Group } from '@leafer-ui/draw'
 import { PointerEvent, DragEvent, MoveEvent, ZoomEvent } from '@leafer-ui/core'
 
@@ -29,8 +29,9 @@ export class EditSelect extends Group implements IEditSelect {
     protected originList: ILeafList
     protected needRemoveItem: IUI
 
-    protected __eventIds: IEventListenerId[] = []
+    protected waitSelect: IFunction // 手机端延迟选中，防止多点触屏误选元素
 
+    protected __eventIds: IEventListenerId[] = []
 
     constructor(editor: IEditor) {
         super()
@@ -68,7 +69,7 @@ export class EditSelect extends Group implements IEditSelect {
 
     protected onPointerMove(e: PointerEvent): void {
         const { app, editor } = this
-        if (this.running && !this.isMoveMode && app.config.pointer.hover && !app.interaction.dragging) {
+        if (this.running && !this.isMoveMode && app.interaction.canHover && !app.interaction.dragging) {
             const find = this.findUI(e)
             editor.hoverTarget = editor.hasItem(find) ? null : find
         } if (this.isMoveMode) {
@@ -77,14 +78,26 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected onBeforeDown(e: PointerEvent): void {
+        if (e.multiTouch) return
+
         const { select } = this.editor.mergeConfig
-        if (select === 'press') this.checkAndSelect(e)
+        if (select === 'press') {
+            if (this.app.config.mobile) {
+                this.waitSelect = () => this.checkAndSelect(e)
+            } else {
+                this.checkAndSelect(e)
+            }
+        }
     }
 
     protected onTap(e: PointerEvent): void {
+        if (e.multiTouch) return
+
         const { editor } = this
         const { select } = editor.mergeConfig
+
         if (select === 'tap') this.checkAndSelect(e)
+        else if (this.waitSelect) this.waitSelect()
 
         if (this.needRemoveItem) {
             editor.removeItem(this.needRemoveItem)
@@ -120,6 +133,9 @@ export class EditSelect extends Group implements IEditSelect {
     // drag
 
     protected onDragStart(e: DragEvent): void {
+        if (e.multiTouch) return
+        if (this.waitSelect) this.waitSelect()
+
         if (this.allowDrag(e)) {
             const { editor } = this
             const { stroke, area } = editor.mergeConfig
@@ -135,10 +151,8 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected onDrag(e: DragEvent): void {
-        if (this.editor.dragging) {
-            this.onDragEnd()
-            return
-        }
+        if (e.multiTouch) return
+        if (this.editor.dragging) return this.onDragEnd(e)
 
         if (this.dragging) {
             const { editor } = this
@@ -171,7 +185,9 @@ export class EditSelect extends Group implements IEditSelect {
         }
     }
 
-    protected onDragEnd(): void {
+    protected onDragEnd(e: DragEvent): void {
+        if (e.multiTouch) return
+
         if (this.dragging) this.originList = null, this.selectArea.visible = false
     }
 
@@ -229,7 +245,7 @@ export class EditSelect extends Group implements IEditSelect {
                 app.on_(PointerEvent.BEFORE_DOWN, this.onBeforeDown, this),
                 app.on_(PointerEvent.TAP, this.onTap, this),
 
-                app.on_(DragEvent.START, this.onDragStart, this),
+                app.on_(DragEvent.START, this.onDragStart, this, true), // 采用捕获事件，需要比EditBox中的dragStart早触发
                 app.on_(DragEvent.DRAG, this.onDrag, this),
                 app.on_(DragEvent.END, this.onDragEnd, this),
 

package/src/editor/cursor.ts

@@ -12,6 +12,10 @@ export function updateCursor(editor: IEditor, e: IUIEvent): void {
     const { editBox } = editor, point = editBox.enterPoint
     if (!point || !editor.editing || !editBox.visible) return
     if (point.name === 'circle') return // 独立旋转按钮
+    if (point.pointType === 'button') { // 普通按钮
+        if (!point.cursor) point.cursor = 'pointer'
+        return
+    }
 
     let { rotation } = editBox
     const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig

package/src/helper/EditDataHelper.ts

@@ -1,31 +1,49 @@
-import { IBoundsData, IPointData, IAround, IAlign } from '@leafer-ui/interface'
-import { AroundHelper, PointHelper, Direction9 } from '@leafer-ui/draw'
+import { IBoundsData, IPointData, IAround, IAlign, IUI, ILayoutBoundsData } from '@leafer-ui/interface'
+import { AroundHelper, MathHelper, PointHelper, Direction9 } from '@leafer-ui/draw'
 
 import { IEditorScaleEvent, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
 
 
 const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = Direction9
 const { toPoint } = AroundHelper
+const { within } = MathHelper
 
 export const EditDataHelper = {
 
-    getScaleData(bounds: IBoundsData, direction: Direction9, pointMove: IPointData, lockRatio: boolean | 'corner', around: IAround): IEditorScaleEvent {
+    getScaleData(element: IUI, startBounds: ILayoutBoundsData, direction: Direction9, totalMove: IPointData, lockRatio: boolean | 'corner', around: IAround, flipable: boolean, scaleMode: boolean): IEditorScaleEvent {
         let align: IAlign, origin = {} as IPointData, scaleX: number = 1, scaleY: number = 1
-        const { width, height } = bounds
+
+        const { boxBounds, widthRange, heightRange } = element
+        const { width, height } = startBounds
 
         if (around) {
-            pointMove.x *= 2
-            pointMove.y *= 2
+            totalMove.x *= 2
+            totalMove.y *= 2
         }
 
+
+        // 获取已经改变的比例
+        const originChangedScaleX = element.scaleX / startBounds.scaleX
+        const originChangedScaleY = element.scaleY / startBounds.scaleY
+        const signX = originChangedScaleX < 0 ? -1 : 1
+        const signY = originChangedScaleY < 0 ? -1 : 1
+
+        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
+
+
         // 防止变为0
-        if (Math.abs(pointMove.x) === width) pointMove.x += 0.1
-        if (Math.abs(pointMove.y) === height) pointMove.y += 0.1
+        if (Math.abs(totalMove.x) === width) totalMove.x += 0.1
+        if (Math.abs(totalMove.y) === height) totalMove.y += 0.1
+
 
-        const topScale = (-pointMove.y + height) / height
-        const rightScale = (pointMove.x + width) / width
-        const bottomScale = (pointMove.y + height) / height
-        const leftScale = (-pointMove.x + width) / width
+        const topScale = (-totalMove.y + height) / height
+        const rightScale = (totalMove.x + width) / width
+        const bottomScale = (totalMove.y + height) / height
+        const leftScale = (-totalMove.x + width) / width
 
         switch (direction) {
             case top:
@@ -68,13 +86,49 @@ export const EditDataHelper = {
         if (lockRatio) {
             const unlockSide = lockRatio === 'corner' && direction % 2
             if (!unlockSide) {
-                const scale = Math.sqrt(Math.abs(scaleX * scaleY))
+                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
             }
         }
 
-        toPoint(around || align, bounds, origin)
+
+        scaleX /= changedScaleX
+        scaleY /= changedScaleY
+
+
+        if (!flipable) {
+            const { worldTransform } = element
+            if (scaleX < 0) scaleX = 1 / boxBounds.width / worldTransform.scaleX
+            if (scaleY < 0) scaleY = 1 / boxBounds.height / worldTransform.scaleY
+        }
+
+
+        if (widthRange) {
+            const nowWidth = boxBounds.width * element.scaleX
+            scaleX = within(nowWidth * scaleX, widthRange) / nowWidth
+        }
+
+        if (heightRange) {
+            const nowHeight = boxBounds.height * element.scaleY
+            scaleY = within(nowHeight * scaleY, heightRange) / nowHeight
+        }
+
+
+        toPoint(around || align, boxBounds, origin)
 
         return { origin, scaleX, scaleY, direction, lockRatio, around }
     },