@leafer-in/editor 1.6.7 → 1.8.0

package/package.json

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

@@ -1,13 +1,8 @@
 import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, IMatrix, IApp } from '@leafer-ui/interface'
-import { Group, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper, Direction9, Plugin } from '@leafer-ui/draw'
-import { DragEvent, RotateEvent, KeyEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
+import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin } from '@leafer-ui/draw'
+import { DragEvent, RotateEvent, ZoomEvent, MoveEvent, useModule } from '@leafer-ui/core'
 
-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'
-import { EditorRotateEvent } from './event/EditorRotateEvent'
-import { EditorSkewEvent } from './event/EditorSkewEvent'
+import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement } from '@leafer-in/interface'
 
 import { EditSelect } from './display/EditSelect'
 import { EditBox } from './display/EditBox'
@@ -18,15 +13,14 @@ import { config } from './config'
 import { onTarget, onHover } from './editor/target'
 import { targetAttr, mergeConfigAttr } from './decorator/data'
 import { EditorHelper } from './helper/EditorHelper'
-import { EditDataHelper } from './helper/EditDataHelper'
 import { simulate } from './editor/simulate'
-import { updateCursor } from './editor/cursor'
 import { EditToolCreator } from './tool/EditToolCreator'
 import { InnerEditorEvent } from './event/InnerEditorEvent'
 import { EditorGroupEvent } from './event/EditorGroupEvent'
 import { SimulateElement } from './display/SimulateElement'
+import { TransformTool } from './tool/TransformTool'
 
-
+@useModule(TransformTool, ['editBox', 'editTool', 'emitEvent'])
 export class Editor extends Group implements IEditor {
 
     public config: IEditorConfig
@@ -58,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 }
 
     // 组件
 
@@ -137,19 +137,24 @@ export class Editor extends Group implements IEditor {
     }
 
     public updateEditTool(): void {
-        const tool = this.editTool
+        this.unloadEditTool()
+
+        if (this.editing) {
+            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
         }
-
-        if (this.editing) {
-            const tag = this.single ? this.list[0].editOuter as string : 'EditTool'
-            this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this)
-            this.editBox.load()
-            this.editTool.load()
-        }
     }
 
 
@@ -159,232 +164,41 @@ export class Editor extends Group implements IEditor {
         return this.mergeConfig.editSize
     }
 
-    // operate
-
-    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.editBox.dragStartData.point, total))
-
-        }
-    }
-
-    public onScale(e: DragEvent | ZoomEvent): void {
-        const { element } = this
-        let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig
-
-        if (e instanceof ZoomEvent) {
-
-            if (resizeable === 'zoom') e.stop(), this.scaleOf(element.getBoxPoint(e), e.scale, e.scale)
-
-        } else {
-
-            const { direction } = e.current as IEditPoint
-
-            if (e.shiftKey || element.lockRatio) lockRatio = true
-
-            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
-                this.scaleWithDrag(data)
-            } else {
-                this.scaleOf(data.origin, data.scaleX, data.scaleY)
-            }
-
-        }
-    }
-
-    public onRotate(e: DragEvent | RotateEvent): void {
-        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)
-
-        const { element } = this, { dragStartData } = this.editBox
-        let origin: IPointData, rotation: number
-
-        if (e instanceof RotateEvent) {
-
-            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 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
-
-        }
-
-        if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
-        if (e instanceof DragEvent) rotation = dragStartData.rotation + rotation - element.rotation
 
-        rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2)
-        if (!rotation) return
+    // TransformTool will rewrite -----
 
-        this.rotateOf(origin, rotation)
-    }
+    // operate 
 
+    public onMove(_e: DragEvent | MoveEvent): void { }
 
-    public onSkew(e: DragEvent): void {
-        const { element } = this
-        const { around } = this.mergeConfig
+    public onScale(_e: DragEvent | ZoomEvent): void { }
 
-        const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, (e.current as IEditPoint).direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey))
-        if (!skewX && !skewY) return
+    public onRotate(_e: DragEvent | RotateEvent): void { }
 
-        this.skewOf(origin, skewX, skewY)
-    }
+    public onSkew(_e: DragEvent): void { }
 
 
     // transform
 
-    public move(x: number | IPointData, y = 0): void {
-        if (!this.checkTransform('moveable')) return
-        if (typeof x === 'object') y = x.y, x = x.x
-
-        const { element: target } = this, { beforeMove } = this.mergeConfig
-        if (beforeMove) {
-            const check = beforeMove({ target, x, y })
-            if (typeof check === 'object') x = check.x, y = check.y
-            else if (check === false) return
-        }
-
-        const world = target.getWorldPointByLocal({ x, y }, null, true)
-        if (this.multiple) target.safeChange(() => target.move(x, y))
-        const data: IEditorMoveEvent = { target, 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)
-    }
-
-    public scaleWithDrag(data: IEditorScaleEvent): void {
-        if (!this.checkTransform('resizeable')) return
-
-        const { element: target } = this, { beforeScale } = this.mergeConfig
-        if (beforeScale) {
-            const { origin, scaleX, scaleY, drag } = data
-            const check = beforeScale({ target, drag, origin, scaleX, scaleY })
-            if (check === false) return
-        }
-
-        data = { ...data, target, editor: this, worldOrigin: target.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)
-    }
-
+    public move(_x: number | IPointData, _y = 0): void { }
 
-    override scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
-        if (!this.checkTransform('resizeable')) return
+    public scaleWithDrag(_data: IEditorScaleEvent): void { }
 
-        const { element: target } = this, { beforeScale } = this.mergeConfig
-        if (beforeScale) {
-            const check = beforeScale({ target, origin, scaleX, scaleY })
-            if (typeof check === 'object') scaleX = check.scaleX, scaleY = check.scaleY
-            else if (check === false) return
-        }
+    override scaleOf(_origin: IPointData | IAlign, scaleX: number, _scaleY = scaleX, _resize?: boolean): void { }
 
-        const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)))
-        const data: IEditorScaleEvent = { target, editor: this, worldOrigin, scaleX, scaleY, transform }
+    override flip(_axis: IAxis): void { }
 
-        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
-        this.editTool.onScale(event)
-        this.emitEvent(event)
-    }
+    override rotateOf(_origin: IPointData | IAlign, _rotation: number): void { }
 
-    override flip(axis: IAxis): void {
-        if (!this.checkTransform('resizeable')) return
+    override skewOf(_origin: IPointData | IAlign, _skewX: number, _skewY = 0, _resize?: boolean): void { }
 
-        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 data: IEditorScaleEvent = { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform }
+    public checkTransform(_type: 'moveable' | 'resizeable' | 'rotateable' | 'skewable'): boolean { return undefined }
 
-        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
-        this.editTool.onScale(event)
-        this.emitEvent(event)
-    }
+    protected getWorldOrigin(_origin: IPointData | IAlign): IPointData { return undefined }
 
-    override rotateOf(origin: IPointData | IAlign, rotation: number): void {
-        if (!this.checkTransform('rotateable')) return
+    protected getChangedTransform(_func: IFunction): IMatrix { return undefined }
 
-        const { element: target } = this, { beforeRotate } = this.mergeConfig
-        if (beforeRotate) {
-            const check = beforeRotate({ target, origin, rotation })
-            if (typeof check === 'number') rotation = check
-            else if (check === false) return
-        }
-
-        const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)))
-        const data: IEditorRotateEvent = { target, 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)
-    }
-
-    override skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
-        if (!this.checkTransform('skewable')) return
-
-        const { element: target } = this, { beforeSkew } = this.mergeConfig
-        if (beforeSkew) {
-            const check = beforeSkew({ target, origin, skewX, skewY })
-            if (typeof check === 'object') skewX = check.skewX, skewY = check.skewY
-            else if (check === false) return
-        }
-
-        const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)))
-        const data: IEditorSkewEvent = { target, 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)
-    }
-
-    public checkTransform(type: 'moveable' | 'resizeable' | 'rotateable' | 'skewable'): boolean { return this.element && !this.element.locked && this.mergeConfig[type] as boolean }
-
-    protected getWorldOrigin(origin: IPointData | IAlign): IPointData {
-        return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin))
-    }
-
-    protected getChangedTransform(func: IFunction): IMatrix {
-        const { element } = this
-        if (this.multiple && !element.canChange) return element.changedTransform
-
-        const oldMatrix = new Matrix(element.worldTransform)
-        func()
-        return new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
-    }
+    // --------
 
 
     // group
@@ -451,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)
@@ -469,7 +288,7 @@ export class Editor extends Group implements IEditor {
         }
     }
 
-    public closeInnerEditor(): void {
+    public closeInnerEditor(onlyInnerEditor?: boolean): void {
         if (this.innerEditing) {
             this.innerEditing = false
 
@@ -477,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
         }
     }
@@ -525,28 +344,15 @@ export class Editor extends Group implements IEditor {
         if (this.targetChanged) this.update()
     }
 
-    protected onKey(e: KeyEvent): void {
-        updateCursor(this, e)
-    }
 
     // event 
 
     public listenTargetEvents(): void {
         if (!this.targetEventIds.length) {
-            const { app, leafer, editBox, editMask } = this
+            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],
-
-                    [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
-                    [KeyEvent.DOWN, editBox.onArrow, editBox]
-                ])
+                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 // 强制锁定比例