@leafer-in/editor 1.0.0-rc.21 → 1.0.0-rc.22

package/src/display/EditBox.ts

@@ -1,8 +1,8 @@
-import { IRect, IAround, IEventListenerId, IBoundsData, IRectInputData, IPointData, IKeyEvent, IGroup, IBox } from '@leafer-ui/interface'
-import { Group, Box, AroundHelper } from '@leafer-ui/draw'
+import { IRect, IAround, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData } from '@leafer-ui/interface'
+import { Group, Box, AroundHelper, Direction9 } from '@leafer-ui/draw'
 import { DragEvent, PointerEvent } from '@leafer-ui/core'
 
-import { IEditBox, IEditor, IDirection8, IEditPoint, IEditPointType } from '@leafer-in/interface'
+import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
 import { updateCursor, updateMoveCursor } from '../editor/cursor'
 import { EditorEvent } from '../event/EditorEvent'
@@ -18,6 +18,8 @@ export class EditBox extends Group implements IEditBox {
     public dragging: boolean
     public moving: boolean
 
+    public view: IGroup = new Group()  // 放置默认编辑工具控制点
+
     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
 
@@ -47,7 +49,7 @@ export class EditBox extends Group implements IEditBox {
 
     public create() {
         let rotatePoint: IEditPoint, resizeLine: IEditPoint, resizePoint: IEditPoint
-        const { resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this
+        const { view, resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this
         const arounds: IAround[] = [{ x: 1, y: 1 }, { x: 0.5, y: 1 }, { x: 0, y: 1 }, { x: 0, y: 0.5 }, { x: 0, y: 0 }, { x: 0.5, y: 0 }, { x: 1, y: 0 }, { x: 1, y: 0.5 }]
 
         for (let i = 0; i < 8; i++) {
@@ -61,7 +63,7 @@ export class EditBox extends Group implements IEditBox {
                 this.listenPointEvents(resizeLine, 'resize', i)
             }
 
-            resizePoint = new EditPoint({ name: 'resize-point', around: 'center', strokeAlign: 'center', hitRadius: 5 })
+            resizePoint = new EditPoint({ name: 'resize-point', hitRadius: 5 })
             resizePoints.push(resizePoint)
             this.listenPointEvents(resizePoint, 'resize', i)
         }
@@ -69,73 +71,98 @@ export class EditBox extends Group implements IEditBox {
         buttons.add(circle)
         this.listenPointEvents(circle, 'rotate', 2)
 
-        this.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints)
+        view.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints)
+        this.add(view)
     }
 
-    // update
-
-    public update(bounds: IBoundsData): void {
-        const { config, list } = this.editor
-        const { width, height } = bounds
-        const { rect, circle, resizePoints, rotatePoints, resizeLines } = this
-        const { middlePoint, resizeable, rotateable, stroke, strokeWidth, hideOnSmall } = config
+    public load(): void {
+        const { mergeConfig, element, single } = this.editor
+        const { rect, circle, resizePoints } = this
+        const { stroke, strokeWidth, moveable } = mergeConfig
 
         const pointsStyle = this.getPointsStyle()
         const middlePointsStyle = this.getMiddlePointsStyle()
-        const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
-        const showPoints = !(hideOnSmall && width < smallSize && height < smallSize)
-
-        this.visible = list[0] && !list[0].locked // check locked
 
-        let point = {} as IPointData, style: IRectInputData, rotateP: IRect, resizeP: IRect, resizeL: IRect
+        let resizeP: IRect
 
         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
+        }
 
-            AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point)
-            style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length])
-            resizeP = resizePoints[i], rotateP = rotatePoints[i], resizeL = resizeLines[Math.floor(i / 2)]
-            resizeP.set(style)
-            resizeP.set(point), rotateP.set(point), resizeL.set(point)
+        // rotate
+        circle.set(this.getPointStyle(mergeConfig.rotatePoint || pointsStyle[0]))
 
-            // visible 
-            resizeP.visible = resizeL.visible = showPoints && (resizeable || rotateable)
-            rotateP.visible = showPoints && rotateable && resizeable && !config.rotatePoint
+        // rect
+        rect.set({ stroke, strokeWidth, ...(mergeConfig.rect || {}) })
+        rect.hittable = !single && moveable
 
-            if (i % 2) { // top,  right, bottom, left
+        // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
+        element.syncEventer = (single && moveable) ? rect : null
+        this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null
 
-                resizeP.visible = rotateP.visible = showPoints && !!middlePoint
+        this.visible = !element.locked
+    }
 
-                if (((i + 1) / 2) % 2) { // top, bottom
-                    resizeL.width = width
-                    if (resizeP.width > width - 30) resizeP.visible = false
-                } else {
-                    resizeL.height = height
-                    resizeP.rotation = 90
-                    if (resizeP.width > height - 30) resizeP.visible = false
+    public update(bounds: IBoundsData): void {
+        if (this.view.worldOpacity) {
+            const { mergeConfig } = this.editor
+            const { width, height } = bounds
+            const { rect, circle, resizePoints, rotatePoints, resizeLines } = this
+            const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig
+
+            const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
+            const showPoints = !(hideOnSmall && width < smallSize && height < smallSize)
+
+            let point = {} as IPointData, rotateP: IRect, resizeP: IRect, resizeL: IRect
+
+            for (let i = 0; i < 8; i++) {
+
+                AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point)
+                resizeP = resizePoints[i]
+                rotateP = rotatePoints[i]
+                resizeL = resizeLines[Math.floor(i / 2)]
+                resizeP.set(point)
+                rotateP.set(point)
+                resizeL.set(point)
+
+                // visible 
+                resizeP.visible = resizeL.visible = showPoints && (resizeable || rotateable)
+                rotateP.visible = showPoints && rotateable && resizeable && !mergeConfig.rotatePoint
+
+                if (i % 2) { // top,  right, bottom, left
+
+                    resizeP.visible = rotateP.visible = showPoints && !!middlePoint
+
+                    if (((i + 1) / 2) % 2) { // top, bottom
+                        resizeL.width = width
+                        if (resizeP.width > width - 30) resizeP.visible = false
+                    } else {
+                        resizeL.height = height
+                        resizeP.rotation = 90
+                        if (resizeP.width > height - 30) resizeP.visible = false
+                    }
                 }
-            } else {
-                resizeP.rotation = (i / 2) * 90
-            }
 
-        }
+            }
 
-        // rotate
-        circle.visible = showPoints && rotateable && !!config.rotatePoint
-        circle.set(this.getPointStyle(config.rotatePoint || pointsStyle[0]))
+            // rotate
+            circle.visible = showPoints && rotateable && !!mergeConfig.rotatePoint
 
-        // rect
-        rect.set({ stroke, strokeWidth, ...(config.rect || {}) })
-        rect.set({ ...bounds, visible: true })
-        rect.hittable = config.moveable
+            // rect
+            rect.set({ ...bounds, visible: true })
 
-        // buttons
-        this.buttons.visible = showPoints
-        this.layoutButtons()
+            // buttons
+            const buttonVisible = showPoints && (circle.visible || this.buttons.children.length > 1)
+            this.buttons.visible = buttonVisible
+            if (buttonVisible) this.layoutButtons()
+        }
     }
 
     protected layoutButtons(): void {
         const { buttons, resizePoints } = this
-        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.config
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.mergeConfig
 
         const { flippedX, flippedY } = this
         let index = fourDirection.indexOf(buttonsDirection)
@@ -167,44 +194,55 @@ export class EditBox extends Group implements IEditBox {
 
     }
 
-    public getPointStyle(userStyle?: IRectInputData): IRectInputData {
-        const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.config
-        const defaultStyle = { fill: pointFill, stroke, strokeWidth, width: pointSize, height: pointSize, cornerRadius: pointRadius }
+    public unload(): void {
+        this.visible = false
+    }
+
+
+    public getPointStyle(userStyle?: IBoxInputData): IBoxInputData {
+        const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig
+        const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius } as IBoxInputData
         return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle
     }
 
-    public getPointsStyle(): IRectInputData[] {
-        const { point } = this.editor.config
+    public getPointsStyle(): IBoxInputData[] {
+        const { point } = this.editor.mergeConfig
         return point instanceof Array ? point : [point]
     }
 
-    public getMiddlePointsStyle(): IRectInputData[] {
-        const { middlePoint } = this.editor.config
+    public getMiddlePointsStyle(): IBoxInputData[] {
+        const { middlePoint } = this.editor.mergeConfig
         return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle())
     }
 
+    protected onSelect(e: EditorEvent): void {
+        if (e.oldList.length === 1) e.oldList[0].syncEventer = this.app.interaction.bottomList = null
+    }
+
     // drag
 
     protected onDragStart(e: DragEvent): void {
         this.dragging = true
-        if (e.target.name === 'rect') {
+        if (e.current.name === 'rect') {
+            const { editor } = this
             this.moving = true
-            this.editor.opacity = this.editor.config.hideOnMove ? 0 : 1 // move
+            editor.dragStartPoint = { x: editor.element.x, y: editor.element.y }
+            editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1 // move
         }
     }
 
     protected onDragEnd(e: DragEvent): void {
         this.dragging = false
         this.moving = false
-        if (e.target.name === 'rect') this.editor.opacity = 1 // move
+        if (e.current.name === 'rect') this.editor.opacity = 1 // move
 
     }
 
     protected onDrag(e: DragEvent): void {
         const { editor } = this
         const point = this.enterPoint = e.current as IEditPoint
-        if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.config.resizeable) {
-            if (editor.config.rotateable) editor.onRotate(e)
+        if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
+            if (editor.mergeConfig.rotateable) editor.onRotate(e)
         } else {
             editor.onScale(e)
         }
@@ -212,7 +250,7 @@ export class EditBox extends Group implements IEditBox {
     }
 
     public onArrow(e: IKeyEvent): void {
-        if (this.editor.hasTarget && this.editor.config.keyEvent) {
+        if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
             const move = { x: 0, y: 0 }
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
@@ -228,18 +266,34 @@ export class EditBox extends Group implements IEditBox {
                 case 'ArrowRight':
                     move.x = distance
             }
-            if (move.x || move.y) this.editor.move(move.x, move.y)
+            this.editor.move(move)
         }
     }
 
-    protected onDoubleClick(): void {
+
+    protected onDoubleTap(e: PointerEvent): void {
+        if (this.editor.mergeConfig.openInner === 'double') this.openInner(e)
+    }
+
+    protected onLongPress(e: PointerEvent): void {
+        if (this.editor.mergeConfig.openInner === 'long') this.openInner(e)
+    }
+
+    protected openInner(e: PointerEvent): void {
         const { editor } = this
-        if (editor.single && editor.element.isBranch) {
-            //list[0].hitChildren = true
+        if (editor.single) {
+            const { element } = editor
+            if (element.isBranch) {
+                editor.openGroup(element as IGroup)
+                editor.target = editor.selector.findDeepOne(e)
+            } else {
+                editor.openInnerEditor()
+            }
         }
     }
 
-    public listenPointEvents(point: IEditPoint, type: IEditPointType, direction: IDirection8): void {
+
+    public listenPointEvents(point: IEditPoint, type: IEditPointType, direction: Direction9): void {
         const { editor } = this
         point.direction = direction
         point.pointType = type
@@ -253,12 +307,13 @@ export class EditBox extends Group implements IEditBox {
     protected __listenEvents(): void {
         const { rect, editor } = this
         this.__eventIds = [
-            editor.on_(EditorEvent.SELECT, () => { this.visible = editor.hasTarget }),
+            editor.on_(EditorEvent.SELECT, this.onSelect, this),
             rect.on_(DragEvent.START, this.onDragStart, this),
             rect.on_(DragEvent.DRAG, editor.onMove, editor),
             rect.on_(DragEvent.END, this.onDragEnd, this),
             rect.on_(PointerEvent.ENTER, () => updateMoveCursor(editor)),
-            rect.on_(PointerEvent.DOUBLE_CLICK, this.onDoubleClick, this)
+            rect.on_(PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
+            rect.on_(PointerEvent.LONG_PRESS, this.onLongPress, this)
         ]
     }
 

package/src/display/EditPoint.ts

@@ -1,9 +1,9 @@
-import { Box } from '@leafer-ui/draw'
+import { Box, Direction9 } from '@leafer-ui/draw'
 
-import { IDirection8, IEditPoint, IEditPointType } from '@leafer-in/interface'
+import { IEditPoint, IEditPointType } from '@leafer-in/interface'
 
 
 export class EditPoint extends Box implements IEditPoint {
-    public direction: IDirection8
+    public direction: Direction9
     public pointType: IEditPointType
 }

package/src/display/EditSelect.ts

@@ -1,4 +1,4 @@
-import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId } from '@leafer-ui/interface'
+import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId, IPointerEvent } from '@leafer-ui/interface'
 import { Bounds, LeafList, Group } from '@leafer-ui/draw'
 import { PointerEvent, DragEvent, MoveEvent, ZoomEvent } from '@leafer-ui/core'
 
@@ -17,7 +17,7 @@ export class EditSelect extends Group implements IEditSelect {
     public editor: IEditor
 
     public get dragging(): boolean { return !!this.originList }
-    public get running(): boolean { return this.editor.hittable && this.editor.config.selector }
+    public get running(): boolean { const { editor } = this; return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector }
     public get isMoveMode(): boolean { return this.app && this.app.interaction.moveMode }
 
     public hoverStroker: IStroker = new Stroker()
@@ -27,7 +27,7 @@ export class EditSelect extends Group implements IEditSelect {
     public selectArea: ISelectArea = new SelectArea()
 
     protected originList: ILeafList
-    protected lastDownLeaf: IUI
+    protected needRemoveItem: IUI
 
     protected __eventIds: IEventListenerId[] = []
 
@@ -44,8 +44,8 @@ export class EditSelect extends Group implements IEditSelect {
     protected onHover(): void {
         const { editor } = this
         if (this.running && !this.dragging && !editor.dragging) {
-            const { stroke, strokeWidth, hover } = editor.config
-            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth })
+            const { stroke, strokeWidth, hover, hoverStyle } = editor.mergeConfig
+            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth, ...(hoverStyle || {}) })
         } else {
             this.hoverStroker.target = null
         }
@@ -53,7 +53,7 @@ export class EditSelect extends Group implements IEditSelect {
 
     protected onSelect(): void {
         if (this.running) {
-            const { config, list } = this.editor
+            const { mergeConfig: config, list } = this.editor
             const { stroke, strokeWidth } = config
             this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) })
             this.hoverStroker.target = null
@@ -61,7 +61,7 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     public update(): void {
-        if (this.running) this.targetStroker.forceUpdate()
+        if (this.targetStroker.target) this.targetStroker.forceUpdate()
     }
 
     // move / down
@@ -69,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) {
-            const find = e.shiftKey ? this.findDeepOne(e) : findOne(e.path)
+            const find = this.findUI(e)
             editor.hoverTarget = editor.hasItem(find) ? null : find
         } if (this.isMoveMode) {
             editor.hoverTarget = null //  move.dragEmpty
@@ -77,45 +77,38 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected onBeforeDown(e: PointerEvent): void {
-        const { select } = this.editor.config
-        if (select === 'press') this.checkAndSelect(e, true)
+        const { select } = this.editor.mergeConfig
+        if (select === 'press') this.checkAndSelect(e)
     }
 
     protected onTap(e: PointerEvent): void {
         const { editor } = this
-        const { select, continuousSelect } = editor.config
+        const { select } = editor.mergeConfig
         if (select === 'tap') this.checkAndSelect(e)
 
-        if (this.running && (e.shiftKey || continuousSelect) && !e.middle && !this.lastDownLeaf) {
-            const find = this.findDeepOne(e)
-            if (find) editor.shiftItem(find)
-            else if (!e.shiftKey && continuousSelect) editor.target = null
+        if (this.needRemoveItem) {
+            editor.removeItem(this.needRemoveItem)
         } else if (this.isMoveMode) {
             editor.target = null  // move.dragEmpty
         }
 
-        this.lastDownLeaf = null
     }
 
-    protected checkAndSelect(e: PointerEvent, isDownType?: boolean): void { // pointer.down or tap
-        if (this.running && !this.isMoveMode && !e.middle) {
+    protected checkAndSelect(e: PointerEvent): void { // pointer.down or tap
+        this.needRemoveItem = null
+
+        if (this.allowSelect(e)) {
             const { editor } = this
-            const find = this.lastDownLeaf = findOne(e.path)
+            const find = this.findUI(e)
 
             if (find) {
-
-                if (e.shiftKey || editor.config.continuousSelect) {
-                    editor.shiftItem(find)
+                if (this.isMultipleSelect(e)) {
+                    if (editor.hasItem(find)) this.needRemoveItem = find // 等待tap事件再实际移除
+                    else editor.addItem(find)
                 } else {
                     editor.target = find
                 }
 
-                // change down data
-                if (isDownType) {
-                    editor.updateLayout()
-                    if (!find.locked) this.app.interaction.updateDownData(e, { findList: [editor.editBox.rect] }, editor.config.dualEvent)
-                }
-
             } else if (this.allow(e.target)) {
 
                 if (!e.shiftKey) editor.target = null
@@ -127,14 +120,14 @@ export class EditSelect extends Group implements IEditSelect {
     // drag
 
     protected onDragStart(e: DragEvent): void {
-        if (this.running && this.allowDrag(e)) {
+        if (this.allowDrag(e)) {
             const { editor } = this
-            const { stroke, strokeWidth, area } = editor.config
+            const { stroke, area } = editor.mergeConfig
             const { x, y } = e.getInner(this)
 
             this.bounds.set(x, y)
 
-            this.selectArea.setStyle({ visible: true, stroke, strokeWidth, x, y }, area)
+            this.selectArea.setStyle({ visible: true, stroke, x, y }, area)
             this.selectArea.setBounds(this.bounds.get())
 
             this.originList = editor.leafList.clone()
@@ -197,18 +190,30 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected allowDrag(e: DragEvent) {
-        if (this.editor.config.boxSelect && !e.target.draggable) {
-            return (!this.editor.hasTarget && this.allow(e.target)) || (e.shiftKey && !findOne(e.path))
+        if (this.running && this.editor.mergeConfig.boxSelect && !e.target.draggable) {
+            return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path))
         } else {
             return false
         }
     }
 
-    protected findDeepOne(e: PointerEvent): IUI {
+    protected allowSelect(e: IPointerEvent): boolean {
+        return this.running && !this.isMoveMode && !e.middle
+    }
+
+    public findDeepOne(e: PointerEvent): IUI {
         const options = { exclude: new LeafList(this.editor.editBox.rect) }
         return findOne(e.target.leafer.interaction.findPath(e, options)) as IUI
     }
 
+    public findUI(e: PointerEvent): IUI {
+        return this.isMultipleSelect(e) ? this.findDeepOne(e) : findOne(e.path)
+    }
+
+    public isMultipleSelect(e: IPointerEvent): boolean {
+        return e.shiftKey || this.editor.mergeConfig.continuousSelect
+    }
+
     protected __listenEvents(): void {
         const { editor } = this
         editor.waitLeafer(() => {
@@ -243,7 +248,7 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     public destroy(): void {
-        this.editor = this.originList = this.lastDownLeaf = null
+        this.editor = this.originList = this.needRemoveItem = null
         this.__removeListenEvents()
         super.destroy()
     }

package/src/display/Stroker.ts

@@ -24,8 +24,7 @@ export class Stroker extends UI implements IStroker {
     }
 
     public setTarget(target: IUI | IUI[], style: IRectInputData): void {
-        const { stroke, strokeWidth } = style
-        this.set({ stroke, strokeWidth })
+        this.set(style)
         this.target = target
     }
 
@@ -34,7 +33,7 @@ export class Stroker extends UI implements IStroker {
         if (list.length) {
 
             let leaf: IUI
-            const { stroke, strokeWidth } = this.__
+            const { stroke, strokeWidth, fill } = this.__
             const { bounds } = options
 
             for (let i = 0; i < list.length; i++) {
@@ -73,7 +72,8 @@ export class Stroker extends UI implements IStroker {
                         this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX)
                     }
 
-                    typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas)
+                    if (stroke) typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas)
+                    if (fill) typeof fill === 'string' ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas)
                 }
             }
 

package/src/editor/cursor.ts

@@ -10,11 +10,11 @@ const cacheCursors: IObject = {}
 
 export function updateCursor(editor: IEditor, e: IUIEvent): void {
     const { editBox } = editor, point = editBox.enterPoint
-    if (!point || !editor.hasTarget || !editBox.visible) return
+    if (!point || !editor.editing || !editBox.visible) return
     if (point.name === 'circle') return // 独立旋转按钮
 
     let { rotation } = editBox
-    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.config
+    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig
     const { pointType } = point, { flippedX, flippedY } = editBox
 
     let showResize = pointType === 'resize'
@@ -36,7 +36,7 @@ export function updateCursor(editor: IEditor, e: IUIEvent): void {
 }
 
 export function updateMoveCursor(editor: IEditor): void {
-    editor.editBox.rect.cursor = editor.config.moveCursor
+    editor.editBox.rect.cursor = editor.mergeConfig.moveCursor
 }
 
 

package/src/editor/target.ts

@@ -16,8 +16,9 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     }
 
     editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }))
+    editor.checkOpenedGroups()
 
-    if (editor.hasTarget) {
+    if (editor.editing) {
         editor.waitLeafer(() => {
             if (editor.multiple) simulate(editor)
             updateMoveCursor(editor)
@@ -26,6 +27,7 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
             editor.listenTargetEvents()
         })
     } else {
+        editor.updateEditTool()
         editor.removeTargetEvents()
     }
 }

package/src/event/EditorScaleEvent.ts

@@ -1,6 +1,7 @@
 import { IAround, IDragEvent, IMatrixData } from '@leafer-ui/interface'
 
-import { IDirection8, IEditorScaleEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent } from '@leafer-in/interface'
+import { Direction9 } from '@leafer-ui/draw'
 
 import { EditorEvent } from './EditorEvent'
 
@@ -16,7 +17,7 @@ export class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent {
 
     readonly drag: IDragEvent
 
-    readonly direction: IDirection8
+    readonly direction: Direction9
     readonly lockRatio: boolean
     readonly around: IAround
 

package/src/helper/EditDataHelper.ts

@@ -1,15 +1,15 @@
 import { IBoundsData, IPointData, IAround } from '@leafer-ui/interface'
-import { AroundHelper, PointHelper } from '@leafer-ui/draw'
+import { AroundHelper, PointHelper, Direction9 } from '@leafer-ui/draw'
 
-import { IEditorScaleEvent, IDirection8, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
 
 
-const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
+const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = Direction9
 const { toPoint } = AroundHelper
 
 export const EditDataHelper = {
 
-    getScaleData(bounds: IBoundsData, direction: IDirection8, pointMove: IPointData, lockRatio: boolean | 'corner', around: IAround): IEditorScaleEvent {
+    getScaleData(bounds: IBoundsData, direction: Direction9, pointMove: IPointData, lockRatio: boolean | 'corner', around: IAround): IEditorScaleEvent {
         let origin: IPointData, scaleX: number = 1, scaleY: number = 1
         const { width, height } = bounds
 
@@ -67,10 +67,7 @@ export const EditDataHelper = {
 
         if (lockRatio) {
             const unlockSide = lockRatio === 'corner' && direction % 2
-            if (!unlockSide) {
-                if (scaleY !== 1) scaleX = scaleY
-                else scaleY = scaleX
-            }
+            if (!unlockSide) scaleX = scaleY = Math.sqrt(scaleX * scaleY)
         }
 
         toPoint(around || origin, bounds, origin)
@@ -78,7 +75,7 @@ export const EditDataHelper = {
         return { origin, scaleX, scaleY, direction, lockRatio, around }
     },
 
-    getRotateData(bounds: IBoundsData, direction: IDirection8, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
+    getRotateData(bounds: IBoundsData, direction: Direction9, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
         let origin: IPointData
 
         switch (direction) {
@@ -103,7 +100,7 @@ export const EditDataHelper = {
         return { origin, rotation: PointHelper.getRotation(last, origin, current) }
     },
 
-    getSkewData(bounds: IBoundsData, direction: IDirection8, move: IPointData, around: IAround): IEditorSkewEvent {
+    getSkewData(bounds: IBoundsData, direction: Direction9, move: IPointData, around: IAround): IEditorSkewEvent {
         let origin: IPointData, skewX = 0, skewY = 0
         let last: IPointData
 
@@ -153,7 +150,7 @@ export const EditDataHelper = {
         return direction
     },
 
-    getFlipDirection(direction: IDirection8, flipedX: boolean, flipedY: boolean): IDirection8 {
+    getFlipDirection(direction: Direction9, flipedX: boolean, flipedY: boolean): Direction9 {
         if (flipedX) {
             switch (direction) {
                 case left: direction = right; break