@leafer-in/editor 1.7.0 → 1.8.0

package/package.json

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

package/src/Editor.ts

@@ -52,9 +52,15 @@ export class Editor extends Group implements IEditor {
     public get multiple(): boolean { return this.list.length > 1 }
     public get single(): boolean { return this.list.length === 1 }
 
+    public get dragPoint(): IEditPoint { return this.editBox.dragPoint }
+
     public get dragging(): boolean { return this.editBox.dragging }
+    public get gesturing(): boolean { return this.editBox.gesturing } // 手势操作元素中
+
     public get moving(): boolean { return this.editBox.moving }
-    public get dragPoint(): IEditPoint { return this.editBox.dragPoint }
+    public get resizing(): boolean { return this.editBox.resizing }
+    public get rotating(): boolean { return this.editBox.rotating }
+    public get skewing(): boolean { return this.editBox.skewing }
 
     // 组件
 
@@ -131,22 +137,26 @@ export class Editor extends Group implements IEditor {
     }
 
     public updateEditTool(): void {
-        let tool = this.editTool
-        if (tool) {
-            this.editBox.unload()
-            tool.unload()
-            this.editTool = null
-        }
+        this.unloadEditTool()
 
         if (this.editing) {
-            const tag = this.element.editOuter || 'EditTool'
-            tool = this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this)
+            const name = this.element.editOuter || 'EditTool'
+            const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this)
             this.editBox.load()
             tool.load()
             this.update()
         }
     }
 
+    public unloadEditTool(): void {
+        let tool = this.editTool
+        if (tool) {
+            this.editBox.unload()
+            tool.unload()
+            this.editTool = null
+        }
+    }
+
 
     // get
 
@@ -255,15 +265,20 @@ export class Editor extends Group implements IEditor {
 
     // inner
 
-    public openInnerEditor(target?: IUI, select?: boolean): void {
+    public openInnerEditor(target?: IUI, nameOrSelect?: string | boolean, select?: boolean): void {
+        let name: string
+        if (typeof nameOrSelect === 'string') name = nameOrSelect
+        else if (!select) select = nameOrSelect
+
         if (target && select) this.target = target
+
         if (this.single) {
             const editTarget = target || this.element
-            const tag = editTarget.editInner
-            if (tag && EditToolCreator.list[tag]) {
+            name || (name = editTarget.editInner)
+            if (name && EditToolCreator.list[name]) {
                 this.editTool.unload()
                 this.innerEditing = true
-                this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this)
+                this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this)
                 this.innerEditor.editTarget = editTarget
 
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN)
@@ -273,7 +288,7 @@ export class Editor extends Group implements IEditor {
         }
     }
 
-    public closeInnerEditor(): void {
+    public closeInnerEditor(onlyInnerEditor?: boolean): void {
         if (this.innerEditing) {
             this.innerEditing = false
 
@@ -281,7 +296,7 @@ export class Editor extends Group implements IEditor {
             this.innerEditor.unload()
             this.emitInnerEvent(InnerEditorEvent.CLOSE)
 
-            this.editTool.load()
+            if (!onlyInnerEditor) this.updateEditTool()
             this.innerEditor = null
         }
     }
@@ -337,14 +352,7 @@ export class Editor extends Group implements IEditor {
             const { app, leafer, editMask } = this
             this.targetEventIds = [
                 leafer.on_(RenderEvent.START, this.onRenderStart, this),
-
-                app.on_([
-                    [RenderEvent.CHILD_START, this.onAppRenderStart, this],
-
-                    [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
-                    [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
-                    [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                ])
+                app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this)
             ]
             if (editMask.visible) editMask.forceRender()
         }

package/src/decorator/data.ts

@@ -19,6 +19,7 @@ export function targetAttr(fn: IFunction) {
                         const isSelect = key === 'target'
                         if (isSelect) {
                             if (value instanceof Array && 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
                             if (beforeSelect) {
@@ -44,8 +45,9 @@ export function mergeConfigAttr() {
     return (target: IEditor, key: string) => {
         defineKey(target, key, {
             get() {
-                const { config, element, dragPoint } = this, mergeConfig = { ...config } // 实时合并，后期可优化
-                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig)
+                const { config, element, dragPoint, editBox } = this, mergeConfig = { ...config } // 实时合并，后期可优化
+                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig) // 元素上的配置
+                if (editBox.config) Object.assign(mergeConfig, editBox.config) // EditBox 上的配置
                 if (dragPoint) {
                     if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig)
                     if (mergeConfig.editSize === 'font-size') mergeConfig.lockRatio = true // 强制锁定比例

package/src/display/EditBox.ts

@@ -1,11 +1,10 @@
 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, KeyEvent } from '@leafer-ui/core'
+import { Group, Box, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper } from '@leafer-ui/draw'
+import { DragEvent, PointerEvent, KeyEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
-import { updateCursor, updateMoveCursor } from '../editor/cursor'
-import { EditorEvent } from '../event/EditorEvent'
+import { updatePointCursor, updateMoveCursor } from '../editor/cursor'
 import { EditPoint } from './EditPoint'
 import { EditDataHelper } from '../helper/EditDataHelper'
 
@@ -17,7 +16,12 @@ export class EditBox extends Group implements IEditBox {
     public editor: IEditor
 
     public dragging: boolean
+    public gesturing: boolean
+
     public moving: boolean
+    public resizing: boolean
+    public rotating: boolean
+    public skewing: boolean
 
     public view: IGroup = new Group()  // 放置默认编辑工具控制点
 
@@ -38,8 +42,8 @@ export class EditBox extends Group implements IEditBox {
     public mergedConfig: IEditorConfig
 
     public get mergeConfig(): IEditorConfig {
-        const { config } = this, { mergeConfig } = this.editor
-        return this.mergedConfig = config ? { ...mergeConfig, ...config } : mergeConfig
+        const { config } = this, { mergeConfig, editBox } = this.editor
+        return this.mergedConfig = config && (editBox !== this) ? { ...mergeConfig, ...config } : mergeConfig // 可能会出现多个editBox的情况
     }
 
     protected _target: IUI
@@ -58,6 +62,13 @@ export class EditBox extends Group implements IEditBox {
     public get flippedY(): boolean { return this.scaleY < 0 }
     public get flippedOne(): boolean { return this.scaleX * this.scaleY < 0 }
 
+    public get canUse(): boolean { return (this.visible && this.view.visible) as boolean } // 编辑框是否处于激活状态
+    public get canGesture(): boolean { // 是否支持手势
+        if (!this.canUse) return false
+        const { moveable, resizeable, rotateable } = this.mergeConfig
+        return typeof moveable === 'string' || typeof resizeable === 'string' || typeof rotateable === 'string'
+    }
+
     protected __eventIds: IEventListenerId[] = []
 
     constructor(editor: IEditor) {
@@ -95,6 +106,7 @@ export class EditBox extends Group implements IEditBox {
         this.add(view)
     }
 
+
     public load(): void {
         const { target, mergeConfig, single, rect, circle, resizePoints } = this
         const { stroke, strokeWidth } = mergeConfig
@@ -107,7 +119,7 @@ export class EditBox extends Group implements IEditBox {
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i]
             resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]))
-            if (!(i % 2)) resizeP.rotation = (i / 2) * 90
+            resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90
         }
 
         // rotate
@@ -118,12 +130,12 @@ export class EditBox extends Group implements IEditBox {
 
         const syncEventer = single && this.transformTool.editTool
 
+        // 编辑框作为底部虚拟元素， 在 unload() 中重置
         rect.hittable = !syncEventer
         rect.syncEventer = syncEventer && this.editor  // 单选下 rect 的事件不会冒泡，需要手动传递给editor
 
-        // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
         if (syncEventer) {
-            target.syncEventer = rect
+            target.syncEventer = rect // 在 target 属性装饰中重置
             this.app.interaction.bottomList = [{ target: rect, proxy: target }]
         }
 
@@ -137,14 +149,22 @@ export class EditBox extends Group implements IEditBox {
         this.updateBounds({ x: 0, y: 0, width, height })
     }
 
+    public unload(): void {
+        this.visible = false
+        if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null
+    }
+
+
     public updateBounds(bounds: IBoundsData): void {
         const { editMask } = this.editor
         const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, spread } = mergeConfig
 
         this.visible = !this.target.locked
         editMask.visible = mask ? true : 0
 
+        if (spread) BoundsHelper.spread(bounds, spread)
+
         if (this.view.worldOpacity) {
             const { width, height } = bounds
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
@@ -175,7 +195,6 @@ export class EditBox extends Group implements IEditBox {
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false
                     } else {
                         resizeL.height = height
-                        resizeP.rotation = 90
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false
                     }
                 }
@@ -238,11 +257,6 @@ export class EditBox extends Group implements IEditBox {
     }
 
 
-    public unload(): void {
-        this.visible = false
-    }
-
-
     public getPointStyle(userStyle?: IBoxInputData): IBoxInputData {
         const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig
         const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig } as IBoxInputData
@@ -259,23 +273,27 @@ export class EditBox extends Group implements IEditBox {
         return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle())
     }
 
-    protected onSelect(e: EditorEvent): void {
-        if (e.oldList.length === 1) {
-            e.oldList[0].syncEventer = null
-            if (this.app) this.app.interaction.bottomList = null
-        }
-    }
 
     // drag
 
     protected onDragStart(e: DragEvent): void {
         this.dragging = true
         const point = this.dragPoint = e.current as IEditPoint, { pointType } = point
-        const { editor, dragStartData } = this, { target } = this
+        const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig
+
+        // 确定模式
         if (point.name === 'rect') {
-            this.moving = true
-            editor.opacity = this.mergeConfig.hideOnMove ? 0 : 1 // move
+            moveable && (this.moving = true)
+            editor.opacity = hideOnMove ? 0 : 1 // move
+        } else {
+            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !resizeable) {
+                rotateable && (this.rotating = true)
+                if (pointType === 'resize-rotate') resizeable && (this.resizing = true)
+                else if (point.name === 'resize-line') skewable && (this.skewing = true), this.rotating = false
+            } else if (pointType === 'resize') resizeable && (this.resizing = true)
+            if (pointType === 'skew') skewable && (this.skewing = true)
         }
+
         dragStartData.x = e.x
         dragStartData.y = e.y
         dragStartData.point = { x: target.x, y: target.y } // 用于移动
@@ -285,37 +303,73 @@ export class EditBox extends Group implements IEditBox {
     }
 
     protected onDragEnd(e: DragEvent): void {
-        this.dragging = false
         this.dragPoint = null
-        this.moving = false
+        this.resetDoing()
         const { name, pointType } = e.current as IEditPoint
         if (name === 'rect') this.editor.opacity = 1 // move
         if (pointType && pointType.includes('resize')) ResizeEvent.resizingKeys = null
     }
 
     protected onDrag(e: DragEvent): void {
-        const { transformTool } = this, point = e.current as IEditPoint
-        if (point.name === 'rect') {
+        const { transformTool, moving, resizing, rotating, skewing } = this
+        if (moving) {
             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)
+        } else if (resizing || rotating || skewing) {
+            const point = e.current as IEditPoint
+            if (point.pointType) this.enterPoint = point// 防止变化
+            if (rotating) transformTool.onRotate(e)
+            if (resizing) transformTool.onScale(e)
+            if (skewing) transformTool.onSkew(e)
+            updatePointCursor(this, e)
+        }
+    }
+
+    protected resetDoing(): void {
+        if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false
+    }
+
+    // 手势控制元素
+
+    public onMove(e: MoveEvent): void {
+        if (this.canGesture && e.moveType !== 'drag') {
+            e.stop()
+            if (typeof this.mergeConfig.moveable === 'string') {
+                this.gesturing = this.moving = true
+                this.transformTool.onMove(e)
+            }
+        }
+    }
+
+    public onScale(e: ZoomEvent): void {
+        if (this.canGesture) {
+            e.stop()
+            if (typeof this.mergeConfig.resizeable === 'string') {
+                this.gesturing = this.resizing = true
+                this.transformTool.onScale(e)
+            }
+        }
+    }
+
+    public onRotate(e: RotateEvent): void {
+        if (this.canGesture) {
+            e.stop()
+            if (typeof this.mergeConfig.rotateable === 'string') {
+                this.gesturing = this.rotating = true
+                this.transformTool.onRotate(e)
+            }
         }
     }
 
+    // 键盘
+
     protected onKey(e: KeyEvent): void {
-        updateCursor(this, e)
+        updatePointCursor(this, e)
     }
 
     public onArrow(e: IKeyEvent): void {
-        const { editor } = this
-        if (editor.editing && this.mergeConfig.keyEvent) {
+        const { editor, transformTool } = this
+        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
             let x = 0, y = 0
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
@@ -331,7 +385,7 @@ export class EditBox extends Group implements IEditBox {
                 case 'ArrowRight':
                     x = distance
             }
-            if (x || y) editor.move(x, y)
+            if (x || y) transformTool.move(x, y)
         }
     }
 
@@ -376,7 +430,7 @@ 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(this, e) }])
+        if (point.name !== 'circle') events.push([PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updatePointCursor(this, e) }])
         this.__eventIds.push(point.on_(events))
     }
 
@@ -384,8 +438,6 @@ export class EditBox extends Group implements IEditBox {
         const { rect, editor, __eventIds: events } = this
 
         events.push(
-            editor.on_(EditorEvent.SELECT, this.onSelect, this),
-
             rect.on_([
                 [DragEvent.START, this.onDragStart, this],
                 [DragEvent.DRAG, this.onDrag, this],
@@ -401,7 +453,13 @@ export class EditBox extends Group implements IEditBox {
             events.push(
                 editor.app.on_([
                     [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
-                    [KeyEvent.DOWN, this.onArrow, this]
+                    [KeyEvent.DOWN, this.onArrow, this],
+                    [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
+                    [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
+                    [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
+                    [MoveEvent.END, this.resetDoing, this],
+                    [ZoomEvent.END, this.resetDoing, this],
+                    [RotateEvent.END, this.resetDoing, this],
                 ])
             )
         })

package/src/display/EditSelect.ts

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

package/src/display/Stroker.ts

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

package/src/editor/cursor.ts

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

package/src/editor/target.ts

@@ -16,7 +16,8 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
         editor.leafList.reset()
     }
 
-    editor.closeInnerEditor()
+    editor.closeInnerEditor(true)
+    editor.unloadEditTool()
 
     const data = { editor, value: target, oldValue }
     editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data))

package/src/helper/EditDataHelper.ts

@@ -116,14 +116,18 @@ export const EditDataHelper = {
 
         if (dragBounds) {
             const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds
-            const localBounds = new Bounds(target.__localBoxBounds)
-            localBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY)
-
-            if (!BoundsHelper.includes(allowBounds, localBounds)) {
-                const realBounds = localBounds.getIntersect(allowBounds)
-                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height
-                if (useScaleX) scaleX *= fitScaleX
-                if (useScaleY) scaleY *= fitScaleY // 后续需优化带旋转的场景
+            const childBounds = new Bounds(target.__localBoxBounds)
+
+            if (BoundsHelper.includes(new Bounds(allowBounds).spread(0.1), childBounds)) {
+
+                childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY)
+
+                if (!BoundsHelper.includes(allowBounds, childBounds)) {
+                    const realBounds = childBounds.getIntersect(allowBounds)
+                    const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height
+                    if (useScaleX) scaleX *= fitScaleX
+                    if (useScaleY) scaleY *= fitScaleY // 后续需优化带旋转的场景
+                }
             }
         }
 

package/src/index.ts

@@ -47,7 +47,7 @@ Creator.editor = function (options?: IEditorConfig, app?: IApp): IEditor {
 Box.addAttr('textBox', false, dataType)
 
 UI.addAttr('editConfig', undefined, dataType)
-UI.addAttr('editOuter', (ui: UI) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType)
+UI.addAttr('editOuter', (ui: UI) => { ui.updateLayout(); return ui.__.__isLinePath ? 'LineEditTool' : 'EditTool' }, dataType) // fix: Line 需要更新布局才能精准确定
 
 UI.addAttr('editInner', 'PathEditor', dataType)
 Group.addAttr('editInner', '', dataType)  // 必须设为空

package/src/tool/TransformTool.ts

@@ -1,5 +1,5 @@
 import { IEvent, IPointData, IAlign, IAxis, IFunction, IMatrix } from '@leafer-ui/interface'
-import { MathHelper, Matrix, LeafHelper } from '@leafer-ui/draw'
+import { MathHelper, Matrix, LeafHelper, AroundHelper } from '@leafer-ui/draw'
 import { DragEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditPoint, IEditTool, IEditorScaleEvent, ISimulateElement, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface'
@@ -23,17 +23,12 @@ export class TransformTool implements ITransformTool { // Editor use
 
     public onMove(e: DragEvent | MoveEvent): void {
 
-        const { target, mergeConfig, dragStartData } = this.editBox
+        const { target, dragStartData } = this.editBox
 
         if (e instanceof MoveEvent) {
 
-            if (e.moveType !== 'drag') {
-                const { moveable, resizeable } = mergeConfig
-                const move = e.getLocalMove(target)
-
-                if (moveable === 'move') e.stop(), this.move(move.x, move.y)
-                else if (resizeable === 'zoom') e.stop()
-            }
+            const move = e.getLocalMove(target)
+            this.move(move.x, move.y)
 
         } else {
 
@@ -52,11 +47,11 @@ export class TransformTool implements ITransformTool { // Editor use
     public onScale(e: DragEvent | ZoomEvent): void {
 
         const { target, mergeConfig, single, dragStartData } = this.editBox
-        let { around, lockRatio, resizeable, flipable, editSize } = mergeConfig
+        let { around, lockRatio, flipable, editSize } = mergeConfig
 
         if (e instanceof ZoomEvent) {
 
-            if (resizeable === 'zoom') e.stop(), this.scaleOf(target.getBoxPoint(e), e.scale, e.scale)
+            this.scaleOf(target.getBoxPoint(e), e.scale, e.scale)
 
         } else {
 
@@ -78,31 +73,24 @@ export class TransformTool implements ITransformTool { // Editor use
     public onRotate(e: DragEvent | RotateEvent): void {
 
         const { target, mergeConfig, dragStartData } = this.editBox
-        const { skewable, rotateable, around, rotateGap } = mergeConfig
-        const { direction, name } = e.current as IEditPoint
-
-        if (skewable && name === 'resize-line') return this.onSkew(e as DragEvent)
+        const { around, rotateAround, rotateGap } = mergeConfig
+        const { direction } = e.current as IEditPoint
 
         let origin: IPointData, rotation: number
 
         if (e instanceof RotateEvent) {
 
-            if (rotateable === 'rotate') e.stop(), rotation = e.rotation, origin = target.getBoxPoint(e)
-            else return
-
-            if (target.scaleX * target.scaleY < 0) rotation = -rotation // flippedOne
+            rotation = e.rotation
+            origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e)
 
         } else {
 
-            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (target.around || target.origin || around || 'center'))
-            rotation = data.rotation
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (rotateAround || target.around || target.origin || around || 'center'))
+            rotation = dragStartData.rotation + data.rotation - target.rotation
             origin = data.origin
 
         }
 
-        if (target.scaleX * target.scaleY < 0) rotation = -rotation // flippedOne
-        if (e instanceof DragEvent) rotation = dragStartData.rotation + rotation - target.rotation
-
         rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2)
         if (!rotation) return