@leafer-in/editor 1.4.2 → 1.5.1

package/package.json

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

package/src/Editor.ts

@@ -1,8 +1,8 @@
-import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, ILayoutBoundsData, IMatrix } from '@leafer-ui/interface'
-import { Group, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper, Direction9 } from '@leafer-ui/draw'
+import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, IMatrix } from '@leafer-ui/interface'
+import { Group, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper, Direction9, isNull } from '@leafer-ui/draw'
 import { DragEvent, RotateEvent, KeyEvent, ZoomEvent, MoveEvent, Plugin } from '@leafer-ui/core'
 
-import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement } from '@leafer-in/interface'
+import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface'
 
 import { EditorMoveEvent } from './event/EditorMoveEvent'
 import { EditorScaleEvent } from './event/EditorScaleEvent'
@@ -32,8 +32,17 @@ export class Editor extends Group implements IEditor {
     public config = DataHelper.clone(config) as IEditorConfig
 
     public get mergeConfig(): IEditorConfig {
-        const { element, config } = this
-        return this.single && element.editConfig ? { ...config, ...element.editConfig } : config // 实时合并，后期可优化
+        const { config, element, dragPoint } = this, mergeConfig = { ...config } // 实时合并，后期可优化
+        if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig)
+        if (dragPoint) {
+            if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig)
+            if (mergeConfig.editSize === 'font-size') mergeConfig.lockRatio = true // 强制锁定比例
+            if (dragPoint.pointType === 'resize-rotate') {
+                mergeConfig.around || (mergeConfig.around = 'center')
+                isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true)
+            }
+        }
+        return mergeConfig
     }
 
     @targetAttr(onHover)
@@ -61,6 +70,7 @@ export class Editor extends Group implements IEditor {
 
     public get dragging(): boolean { return this.editBox.dragging }
     public get moving(): boolean { return this.editBox.moving }
+    public get dragPoint(): IEditPoint { return this.editBox.dragPoint }
 
     // 组件
 
@@ -78,9 +88,6 @@ export class Editor extends Group implements IEditor {
     public selector: EditSelect = new EditSelect(this)
     public editMask: EditMask = new EditMask(this)
 
-    public dragStartPoint: IPointData
-    public dragStartBounds: ILayoutBoundsData
-
     public targetEventIds: IEventListenerId[] = []
 
 
@@ -180,7 +187,7 @@ export class Editor extends Group implements IEditor {
                 else total.x = 0
             }
 
-            this.move(DragEvent.getValidMove(this.element, this.dragStartPoint, total))
+            this.move(DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total))
 
         }
 
@@ -200,7 +207,7 @@ export class Editor extends Group implements IEditor {
 
             if (e.shiftKey || element.lockRatio) lockRatio = true
 
-            const data = EditDataHelper.getScaleData(element, this.dragStartBounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale')
+            const data = EditDataHelper.getScaleData(element, this.editBox.dragStartData.bounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale')
 
             if (this.editTool.onScaleWithDrag) {
                 data.drag = e
@@ -218,7 +225,7 @@ export class Editor extends Group implements IEditor {
         const { direction, name } = e.current as IEditPoint
         if (skewable && name === 'resize-line') return this.onSkew(e as DragEvent)
 
-        const { element } = this
+        const { element } = this, { dragStartData } = this.editBox
         let origin: IPointData, rotation: number
 
         if (e instanceof RotateEvent) {
@@ -226,21 +233,23 @@ export class Editor extends Group implements IEditor {
             if (rotateable === 'rotate') e.stop(), rotation = e.rotation, origin = element.getBoxPoint(e)
             else return
 
+            if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
+
         } else {
 
-            const last = { x: e.x - e.moveX, y: e.y - e.moveY }
-            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'))
+            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(dragStartData), e.shiftKey ? null : (element.around || element.origin || around || 'center'))
             rotation = data.rotation
             origin = data.origin
 
         }
 
-        rotation = MathHelper.getGapRotation(rotation, rotateGap, element.rotation)
-        if (!rotation) return
-
         if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
+        if (e instanceof DragEvent) rotation = dragStartData.rotation + rotation - element.rotation
 
-        this.rotateOf(origin, MathHelper.float(rotation, 2))
+        rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2)
+        if (!rotation) return
+
+        this.rotateOf(origin, rotation)
     }
 
 
@@ -261,11 +270,12 @@ export class Editor extends Group implements IEditor {
         const { element } = this
         if (!this.checkTransform('moveable')) return
 
-
         const world = element.getWorldPointByLocal(typeof x === 'object' ? { ...x } : { x, y }, null, true)
         if (this.multiple) element.safeChange(() => element.move(x, y))
-        const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y })
+        const data: IEditorMoveEvent = { target: element, editor: this, moveX: world.x, moveY: world.y }
 
+        this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data))
+        const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data)
         this.editTool.onMove(event)
         this.emitEvent(event)
     }
@@ -274,8 +284,10 @@ export class Editor extends Group implements IEditor {
         if (!this.checkTransform('resizeable')) return
 
         const { element } = this
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) })
+        data = { ...data, target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }
 
+        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
         this.editTool.onScaleWithDrag(event)
         this.emitEvent(event)
     }
@@ -287,8 +299,10 @@ export class Editor extends Group implements IEditor {
         const { element } = this
         const worldOrigin = this.getWorldOrigin(origin)
         const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.scaleOf(origin, scaleX, scaleY)))
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform })
+        const data: IEditorScaleEvent = { target: element, editor: this, worldOrigin, scaleX, scaleY, transform }
 
+        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
         this.editTool.onScale(event)
         this.emitEvent(event)
     }
@@ -299,8 +313,10 @@ export class Editor extends Group implements IEditor {
         const { element } = this
         const worldOrigin = this.getWorldOrigin('center')
         const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(element, axis))
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform })
+        const data: IEditorScaleEvent = { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform }
 
+        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
         this.editTool.onScale(event)
         this.emitEvent(event)
     }
@@ -311,8 +327,10 @@ export class Editor extends Group implements IEditor {
         const { element } = this
         const worldOrigin = this.getWorldOrigin(origin)
         const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.rotateOf(origin, rotation)))
-        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform })
+        const data: IEditorRotateEvent = { target: element, editor: this, worldOrigin, rotation, transform }
 
+        this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data))
+        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data)
         this.editTool.onRotate(event)
         this.emitEvent(event)
     }
@@ -323,8 +341,10 @@ export class Editor extends Group implements IEditor {
         const { element } = this
         const worldOrigin = this.getWorldOrigin(origin)
         const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.skewOf(origin, skewX, skewY)))
-        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform })
+        const data: IEditorSkewEvent = { target: element, editor: this, worldOrigin, skewX, skewY, transform }
 
+        this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data))
+        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data)
         this.editTool.onSkew(event)
         this.emitEvent(event)
     }
@@ -349,6 +369,7 @@ export class Editor extends Group implements IEditor {
 
     public group(userGroup?: IGroup | IGroupInputData): IGroup {
         if (this.multiple) {
+            this.emitGroupEvent(EditorGroupEvent.BEFORE_GROUP)
             this.target = EditorHelper.group(this.list, this.element, userGroup)
             this.emitGroupEvent(EditorGroupEvent.GROUP, this.target as IGroup)
         }
@@ -366,12 +387,14 @@ export class Editor extends Group implements IEditor {
     }
 
     public openGroup(group: IGroup): void {
+        this.emitGroupEvent(EditorGroupEvent.BEFORE_OPEN, group)
         this.openedGroupList.add(group)
         group.hitChildren = true
         this.emitGroupEvent(EditorGroupEvent.OPEN, group)
     }
 
     public closeGroup(group: IGroup): void {
+        this.emitGroupEvent(EditorGroupEvent.BEFORE_CLOSE, group)
         this.openedGroupList.remove(group)
         group.hitChildren = false
         this.emitGroupEvent(EditorGroupEvent.CLOSE, group)
@@ -398,10 +421,10 @@ export class Editor extends Group implements IEditor {
         }
     }
 
-    public emitGroupEvent(type: string, group: IGroup): void {
+    public emitGroupEvent(type: string, group?: IGroup): void {
         const event = new EditorGroupEvent(type, { editTarget: group })
         this.emitEvent(event)
-        group.emitEvent(event)
+        if (group) group.emitEvent(event)
     }
 
     // inner

package/src/config.ts

@@ -26,6 +26,7 @@ export const config: IEditorConfig = {
     skewCursor: { url: skewSVG, x: 12, y: 12 },
 
     selector: true,
+    editBox: true,
     hover: true,
     select: 'press',
     openInner: 'double',

package/src/decorator/data.ts

@@ -1,6 +1,10 @@
-import { IFunction, ILeaf, IObject } from '@leafer-ui/interface'
+import { IFunction, ILeaf, IObject, IUI, } from '@leafer-ui/interface'
+import { IEditor } from '@leafer-in/interface'
 import { defineKey } from '@leafer-ui/draw'
 
+import { EditorEvent } from '../event/EditorEvent'
+
+
 
 export function targetAttr(fn: IFunction) {
     return (target: ILeaf, key: string) => {
@@ -9,7 +13,11 @@ export function targetAttr(fn: IFunction) {
             get() { return (this as IObject)[privateKey] },
             set(value: unknown) {
                 const old = (this as IObject)[privateKey]
-                if (old !== value) (this as IObject)[privateKey] = value, fn(this, old)
+                if (old !== value) {
+                    const type = key === 'target' ? 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 }));
+                    (this as IObject)[privateKey] = value, fn(this, old)
+                }
             }
         } as ThisType<ILeaf>)
     }

package/src/display/EditBox.ts

@@ -1,4 +1,4 @@
-import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig } from '@leafer-ui/interface'
+import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData } from '@leafer-ui/interface'
 import { Group, Box, Text, AroundHelper, Direction9 } from '@leafer-ui/draw'
 import { DragEvent, PointerEvent } from '@leafer-ui/core'
 
@@ -10,7 +10,7 @@ import { EditPoint } from './EditPoint'
 import { EditDataHelper } from '../helper/EditDataHelper'
 
 
-const fourDirection = ['top', 'right', 'bottom', 'left']
+const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig: IEditorConfig = undefined
 
 export class EditBox extends Group implements IEditBox {
 
@@ -28,14 +28,17 @@ export class EditBox extends Group implements IEditBox {
     public rotatePoints: IEditPoint[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
     public resizeLines: IEditPoint[] = [] // top, right, bottom, left
 
+    public enterPoint: IEditPoint
+    public dragPoint: IEditPoint // 正在拖拽的控制点
+
+    public dragStartData = {} as IEditorDragStartData
+
     // fliped
     public get flipped(): boolean { return this.flippedX || this.flippedY }
     public get flippedX(): boolean { return this.scaleX < 0 }
     public get flippedY(): boolean { return this.scaleY < 0 }
     public get flippedOne(): boolean { return this.scaleX * this.scaleY < 0 }
 
-    public enterPoint: IEditPoint
-
     protected __eventIds: IEventListenerId[] = []
 
     constructor(editor: IEditor) {
@@ -93,7 +96,7 @@ export class EditBox extends Group implements IEditBox {
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]))
 
         // rect
-        rect.set({ stroke, strokeWidth, ...(mergeConfig.rect || {}) })
+        rect.set({ stroke, strokeWidth, editConfig, ...(mergeConfig.rect || {}) })
         rect.hittable = !single
         rect.syncEventer = single && this.editor  // 单选下 rect 的事件不会冒泡，需要手动传递给editor
 
@@ -105,16 +108,16 @@ export class EditBox extends Group implements IEditBox {
     }
 
     public update(bounds: IBoundsData): void {
-        this.visible = !this.editor.element.locked
+        const { mergeConfig, element, multiple } = this.editor
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig
+        this.visible = !element.locked
 
         if (this.view.worldOpacity) {
-            const { mergeConfig } = this.editor
             const { width, height } = bounds
             const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
-            const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig
 
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
-            const showPoints = !(hideOnSmall && width < smallSize && height < smallSize)
+            const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize)
 
             let point = {} as IPointData, rotateP: IRect, resizeP: IRect, resizeL: IRect
 
@@ -138,11 +141,11 @@ export class EditBox extends Group implements IEditBox {
 
                     if (((i + 1) / 2) % 2) { // top, bottom
                         resizeL.width = width
-                        if (resizeP.width > width - 30) resizeP.visible = false
+                        if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false
                     } else {
                         resizeL.height = height
                         resizeP.rotation = 90
-                        if (resizeP.width > height - 30) resizeP.visible = false
+                        if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false
                     }
                 }
 
@@ -154,7 +157,7 @@ export class EditBox extends Group implements IEditBox {
 
             // rect
             if (rect.path) rect.path = null // line可能会变成path优先模式
-            rect.set({ ...bounds, visible: true })
+            rect.set({ ...bounds, visible: multiple ? true : editBox })
 
             // buttons
             buttons.visible = showPoints && buttons.children.length > 0
@@ -211,7 +214,7 @@ export class EditBox extends Group implements IEditBox {
 
     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, offsetX: 0, offsetY: 0 } as IBoxInputData
+        const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig } as IBoxInputData
         return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle
     }
 
@@ -236,33 +239,31 @@ export class EditBox extends Group implements IEditBox {
 
     protected onDragStart(e: DragEvent): void {
         this.dragging = true
-        const { editor } = this
-        if (e.current.name === 'rect') {
+        const point = this.dragPoint = e.current as IEditPoint
+        const { editor, dragStartData } = this, { element } = editor
+        if (point.name === 'rect') {
             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
         }
+        dragStartData.x = e.x
+        dragStartData.y = e.y
+        dragStartData.point = { x: element.x, y: element.y } // 用于移动
+        dragStartData.bounds = { ...element.getLayoutBounds('box', 'local') } // 用于resize
+        dragStartData.rotation = element.rotation // 用于旋转
     }
 
     protected onDragEnd(e: DragEvent): void {
         this.dragging = false
+        this.dragPoint = null
         this.moving = false
         if (e.current.name === 'rect') this.editor.opacity = 1 // move
-        this.editor.resizeDirection = undefined
-
     }
 
     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.mergeConfig.resizeable) {
-            if (editor.mergeConfig.rotateable) editor.onRotate(e)
-        } else if (point.pointType === 'resize') {
-            editor.onScale(e)
-        }
+        const { pointType } = this.enterPoint = e.current as IEditPoint
+        if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) editor.onRotate(e)
+        if (pointType.includes('resize')) editor.onScale(e)
         updateCursor(editor, e)
     }
 

package/src/display/EditSelect.ts

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

package/src/display/Stroker.ts

@@ -54,7 +54,7 @@ export class Stroker extends UI implements IStroker {
                 leaf = list[i]
                 const { worldTransform, worldRenderBounds } = leaf
 
-                if (!bounds || bounds.hit(worldRenderBounds, options.matrix)) {
+                if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
 
                     const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY)
 

package/src/editor/cursor.ts

@@ -21,7 +21,7 @@ export function updateCursor(editor: IEditor, e: IUIEvent): void {
     const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig
     const { pointType } = point, { flippedX, flippedY } = editBox
 
-    let showResize = pointType === 'resize'
+    let showResize = pointType.includes('resize')
     if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) showResize = false
     const showSkew = skewable && !showResize && point.name === 'resize-line'
 

package/src/editor/target.ts

@@ -1,6 +1,6 @@
 import { LeafList } from '@leafer-ui/draw'
 
-import { IEditor, IUI } from '@leafer-in/interface'
+import { IEditor, ILeaf, IUI } from '@leafer-in/interface'
 
 import { simulate } from './simulate'
 import { updateMoveCursor } from './cursor'
@@ -10,7 +10,11 @@ import { EditorEvent } from '../event/EditorEvent'
 export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     const { target } = editor
     if (target) {
-        editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target as IUI)
+        const { list } = editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target as IUI)
+        if (!list.every(checkEditable)) { // 过滤不合格的元素
+            editor.target = list.filter(checkEditable) as IUI[]
+            return
+        }
         if (editor.multiple) simulate(editor) // 更新模拟元素
     } else {
         editor.simulateTarget.remove()
@@ -37,5 +41,9 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
 
 export function onHover(editor: IEditor, oldValue: IUI): void {
     editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }))
+}
+
 
+function checkEditable(item: ILeaf): boolean {
+    return item.editable && !item.locked
 }

package/src/event/EditorEvent.ts

@@ -10,7 +10,10 @@ function toList(value: IUI | IUI[]): IUI[] {
 
 export class EditorEvent extends Event implements IEditorEvent {
 
+    static BEFORE_SELECT = 'editor.before_select'
     static SELECT = 'editor.select'
+
+    static BEFORE_HOVER = 'editor.before_hover'
     static HOVER = 'editor.hover'
 
     declare readonly target: IUI

package/src/event/EditorGroupEvent.ts

@@ -7,11 +7,17 @@ import { } from '../tool/InnerEditor'
 
 export class EditorGroupEvent extends EditorEvent implements IEditorGroupEvent {
 
+
+    static BEFORE_GROUP = 'editor.before_group'
     static GROUP = 'editor.group'
+
     static BEFORE_UNGROUP = 'editor.before_ungroup'
     static UNGROUP = 'editor.ungroup'
 
+    static BEFORE_OPEN = 'editor.before_open_group'
     static OPEN = 'editor.open_group'
+
+    static BEFORE_CLOSE = 'editor.before_close_group'
     static CLOSE = 'editor.close_group'
 
     readonly editTarget: IGroup

package/src/event/EditorMoveEvent.ts

@@ -5,6 +5,7 @@ import { EditorEvent } from './EditorEvent'
 
 export class EditorMoveEvent extends EditorEvent implements IEditorMoveEvent {
 
+    static BEFORE_MOVE = 'editor.before_move'
     static MOVE = 'editor.move'
 
     readonly moveX: number

package/src/event/EditorRotateEvent.ts

@@ -5,6 +5,7 @@ import { EditorEvent } from './EditorEvent'
 
 export class EditorRotateEvent extends EditorEvent implements IEditorRotateEvent {
 
+    static BEFORE_ROTATE = 'editor.before_rotate'
     static ROTATE = 'editor.rotate'
 
     // rotateOf(origin, rotation)

package/src/event/EditorScaleEvent.ts

@@ -8,6 +8,7 @@ import { EditorEvent } from './EditorEvent'
 
 export class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent {
 
+    static BEFORE_SCALE = 'editor.before_scale'
     static SCALE = 'editor.scale'
 
     // scaleOf(origin, scaleX, scaleY, resize)

package/src/event/EditorSkewEvent.ts

@@ -5,6 +5,7 @@ import { EditorEvent } from './EditorEvent'
 
 export class EditorSkewEvent extends EditorEvent implements IEditorSkewEvent {
 
+    static BEFORE_SKEW = 'editor.before_skew'
     static SKEW = 'editor.skew'
 
     // skewOf(origin, skewX, skewY)

package/src/helper/EditDataHelper.ts

@@ -13,7 +13,7 @@ export const EditDataHelper = {
     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 { boxBounds, widthRange, heightRange, dragBounds } = element
+        const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = element
         const { width, height } = startBounds
 
         if (around) {
@@ -34,12 +34,6 @@ export const EditDataHelper = {
         totalMove.x *= scaleMode ? originChangedScaleX : signX
         totalMove.y *= scaleMode ? originChangedScaleY : signY
 
-
-        // 防止变为0
-        if (Math.abs(totalMove.x) === width) totalMove.x += 0.1
-        if (Math.abs(totalMove.y) === height) totalMove.y += 0.1
-
-
         const topScale = (-totalMove.y + height) / height
         const rightScale = (totalMove.x + width) / width
         const bottomScale = (totalMove.y + height) / height
@@ -142,6 +136,10 @@ export const EditDataHelper = {
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight
         }
 
+        // 防止小于1px
+        if (Math.abs(scaleX * worldBoxBounds.width) < 1) scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width
+        if (Math.abs(scaleY * worldBoxBounds.height) < 1) scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height
+
         return { origin, scaleX, scaleY, direction, lockRatio, around }
     },
 

package/src/index.ts

@@ -26,7 +26,7 @@ export { EditSelectHelper } from './helper/EditSelectHelper'
 
 
 import { IEditor, IEditorConfig, IEditToolFunction, IEditorConfigFunction } from '@leafer-in/interface'
-import { Creator, UI, Group, Text, Box, dataType, defineKey, Plugin } from '@leafer-ui/draw'
+import { Creator, UI, Group, Text, Box, dataType, Plugin } from '@leafer-ui/draw'
 
 import '@leafer-in/resize'
 
@@ -38,41 +38,15 @@ Plugin.add('editor', 'resize')
 
 Creator.editor = function (options?: IEditorConfig): IEditor { return new Editor(options) }
 
+Box.addAttr('textBox', false, dataType)
 
-dataType(false)(Box.prototype, 'textBox')
+UI.addAttr('editConfig', undefined, dataType)
+UI.addAttr('editOuter', (ui: UI) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType)
 
+UI.addAttr('editInner', 'PathEditor', dataType)
+Group.addAttr('editInner', '', dataType)  // 必须设为空
+Text.addAttr('editInner', 'TextEditor', dataType)
 
-defineKey(UI.prototype, 'editOuter', {
-    get(): string { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool' }
-})
-
-defineKey(UI.prototype, 'editInner', {
-    get(): string { return 'PathEditor' }
-})
-
-defineKey(Group.prototype, 'editInner', { // 必须设为空
-    get(): string { return '' }
-})
-
-defineKey(Text.prototype, 'editInner', {
-    get(): string { return 'TextEditor' }
-})
-
-
-UI.setEditConfig = function (config: IEditorConfig | IEditorConfigFunction): void {
-    defineKey(this.prototype, 'editConfig', {
-        get(): IEditorConfig { return typeof config === 'function' ? config(this) : config }
-    })
-}
-
-UI.setEditOuter = function (toolName: string | IEditToolFunction): void {
-    defineKey(this.prototype, 'editOuter', {
-        get(): string { return typeof toolName === 'string' ? toolName : toolName(this) }
-    })
-}
-
-UI.setEditInner = function (editorName: string | IEditToolFunction): void {
-    defineKey(this.prototype, 'editInner', {
-        get(): string { return typeof editorName === 'string' ? editorName : editorName(this) }
-    })
-}
+UI.setEditConfig = function (config: IEditorConfig | IEditorConfigFunction): void { this.changeAttr('editConfig', config) }
+UI.setEditOuter = function (toolName: string | IEditToolFunction): void { this.changeAttr('editOuter', toolName) }
+UI.setEditInner = function (editorName: string | IEditToolFunction): void { this.changeAttr('editInner', editorName) }