@leafer-in/editor 1.0.0-rc.9 → 1.0.1

package/src/Editor.ts

@@ -1,7 +1,8 @@
-import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup } from '@leafer-ui/interface'
-import { Group, Rect, DragEvent, RotateEvent, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, KeyEvent } from '@leafer-ui/core'
+import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, ILayoutBoundsData } from '@leafer-ui/interface'
+import { Group, Rect, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper } from '@leafer-ui/draw'
+import { DragEvent, RotateEvent, KeyEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
-import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent } from '@leafer-in/interface'
+import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor } from '@leafer-in/interface'
 
 import { EditorMoveEvent } from './event/EditorMoveEvent'
 import { EditorScaleEvent } from './event/EditorScaleEvent'
@@ -10,44 +11,71 @@ import { EditorSkewEvent } from './event/EditorSkewEvent'
 
 import { EditSelect } from './display/EditSelect'
 import { EditBox } from './display/EditBox'
+import { EditMask } from './display/EditMask'
 
 import { config } from './config'
-import { getEditTool } from './tool'
 
 import { onTarget, onHover } from './editor/target'
 import { targetAttr } 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'
 
 
 export class Editor extends Group implements IEditor {
 
     public config = config
 
+    public get mergeConfig(): IEditorConfig {
+        const { element, config } = this
+        return this.single && element.editConfig ? { ...config, ...element.editConfig } : config // 实时合并，后期可优化
+    }
+
     @targetAttr(onHover)
-    public hoverTarget: IUI
+    public hoverTarget?: IUI
 
     @targetAttr(onTarget)
-    public target: IUI | IUI[]
+    public target?: IUI | IUI[]
+
+    // 列表
 
-    public leafList: ILeafList = new LeafList() // from target
     public get list(): IUI[] { return this.leafList.list as IUI[] }
+    public leafList: ILeafList = new LeafList() // from target
+    public openedGroupList: ILeafList = new LeafList()
+
+    // 状态
+
+    public get editing(): boolean { return !!this.list.length }
+    public innerEditing: boolean
+    public get groupOpening(): boolean { return !!this.openedGroupList.length }
 
-    public get hasTarget(): boolean { return !!this.list.length }
     public get multiple(): boolean { return this.list.length > 1 }
     public get single(): boolean { return this.list.length === 1 }
 
+    public get dragging(): boolean { return this.editBox.dragging }
+
+    // 组件
+
     public get element() { return this.multiple ? this.simulateTarget : this.list[0] as IUI }
     public simulateTarget: IUI = new Rect({ visible: false })
 
     public editBox: IEditBox = new EditBox(this)
     public get buttons() { return this.editBox.buttons }
 
-    public editTool: IEditTool
+    public editTool?: IEditTool
+
+    public innerEditor?: IInnerEditor
+    public editToolList: IObject = {}
+
     public selector: EditSelect = new EditSelect(this)
+    public editMask: EditMask = new EditMask(this)
 
-    public get dragging(): boolean { return this.editBox.dragging }
+    public dragStartPoint: IPointData
+    public dragStartBounds: ILayoutBoundsData
 
     public targetEventIds: IEventListenerId[] = []
 
@@ -55,7 +83,17 @@ export class Editor extends Group implements IEditor {
     constructor(userConfig?: IEditorConfig, data?: IGroupInputData) {
         super(data)
         if (userConfig) this.config = DataHelper.default(userConfig, this.config)
-        this.addMany(this.selector, this.editBox)
+        this.addMany(this.editMask, this.selector, this.editBox)
+    }
+
+    // select 
+
+    public select(target: IUI | IUI[]): void {
+        this.target = target
+    }
+
+    public cancel(): void {
+        this.target = null
     }
 
     // item
@@ -79,83 +117,130 @@ export class Editor extends Group implements IEditor {
     // update
 
     public update(): void {
-        if (this.target) {
-            this.editTool.update(this)
+        if (this.editing) {
+            if (this.innerEditing) this.innerEditor.update()
+            this.editTool.update()
             this.selector.update()
         }
     }
 
+    public updateEditBox(): void {
+        if (this.multiple) simulate(this)
+        this.update()
+    }
+
     public updateEditTool(): void {
-        this.editTool = getEditTool(this.list)
+        const 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()
+        }
     }
 
+
     // get
 
-    public getEditSize(ui: IUI): IEditSize {
-        let { editSize } = this.config
-        return editSize === 'auto' ? ui.editSize : editSize
+    public getEditSize(_ui: IUI): IEditSize {
+        return this.mergeConfig.editSize
     }
 
     // operate
 
-    public onMove(e: DragEvent): void {
-        const move = e.getLocalMove(this.element)
+    public onMove(e: DragEvent | MoveEvent): void {
+
+        if (e instanceof MoveEvent) {
+
+            if (e.moveType !== 'drag') {
+                const { moveable, resizeable } = this.mergeConfig
+                const move = e.getLocalMove(this.element)
+                if (moveable === 'move') e.stop(), this.move(move.x, move.y)
+                else if (resizeable === 'zoom') e.stop()
+            }
+
+        } else {
+
+            const total = { x: e.totalX, y: e.totalY }
+
+            if (e.shiftKey) {
+                if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0
+                else total.x = 0
+            }
+
+            this.move(DragEvent.getValidMove(this.element, this.dragStartPoint, total))
 
-        if (e.shiftKey) {
-            if (Math.abs(move.x) > Math.abs(move.y)) move.y = 0
-            else move.x = 0
         }
 
-        this.move(move.x, move.y)
     }
 
-    public onScale(e: DragEvent): void {
+    public onScale(e: DragEvent | ZoomEvent): void {
         const { element } = this
-        const { direction } = e.current as IEditPoint
+        let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig
 
-        let { around, lockRatio } = this.config
-        if (e.shiftKey) lockRatio = true
+        if (e instanceof ZoomEvent) {
 
-        const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey))
+            if (resizeable === 'zoom') e.stop(), this.scaleOf(element.getInnerPoint(e), e.scale, e.scale)
 
-        if (this.editTool.onScaleWithDrag) {
-            data.drag = e
-            this.scaleWithDrag(data)
         } else {
-            this.scaleOf(data.origin, data.scaleX, data.scaleY)
+
+            const { direction } = e.current as IEditPoint
+
+            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')
+
+            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, around, rotateGap } = this.config
+        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, editBox } = this
+        const { element } = this
         let origin: IPointData, rotation: number
 
         if (e instanceof RotateEvent) {
-            rotation = e.rotation, origin = element.getInnerPoint(e)
+
+            if (rotateable === 'rotate') e.stop(), rotation = e.rotation, origin = element.getInnerPoint(e)
+            else return
+
         } else {
+
             const last = { x: e.x - e.moveX, y: e.y - e.moveY }
-            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (around || 'center'))
+            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'))
             rotation = data.rotation
             origin = data.origin
+
         }
 
         rotation = MathHelper.getGapRotation(rotation, rotateGap, element.rotation)
         if (!rotation) return
 
-        if (editBox.flippedOne) rotation = -rotation
+        if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
 
-        this.rotateOf(origin, rotation)
+        this.rotateOf(origin, MathHelper.float(rotation, 2))
     }
 
 
     public onSkew(e: DragEvent): void {
         const { element } = this
-        const { around } = this.config
+        const { around } = this.mergeConfig
 
         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
@@ -166,9 +251,11 @@ export class Editor extends Group implements IEditor {
 
     // transform
 
-    public move(x: number, y: number): void {
+    public move(x: number | IPointData, y = 0): void {
+        if (!this.mergeConfig.moveable || this.element.locked) return
+
         const { element } = this
-        const world = element.getWorldPointByLocal({ x, y }, null, true)
+        const world = element.getWorldPointByLocal(typeof x === 'object' ? { ...x } : { x, y }, null, true)
         const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y })
 
         this.editTool.onMove(event)
@@ -178,77 +265,177 @@ export class Editor extends Group implements IEditor {
     }
 
     public scaleWithDrag(data: IEditorScaleEvent): void {
+        if (!this.mergeConfig.resizeable || this.element.locked) return
+
         const { element } = this
-        const worldOrigin = element.getWorldPoint(data.origin)
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin })
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) })
 
         this.editTool.onScaleWithDrag(event)
         this.emitEvent(event)
     }
 
-    public scaleOf(origin: IPointData, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
-        const { element } = this
-        const worldOrigin = element.getWorldPoint(origin)
-
-        let transform: Matrix
 
-        if (this.multiple) {
-            const childMatrix = { ...element.localTransform }
-            element.scaleOf(origin, scaleX, scaleY)
-            transform = new Matrix(element.localTransform).divide(childMatrix)
-        }
+    override scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
+        if (!this.mergeConfig.resizeable || this.element.locked) return
 
+        const { element } = this
+        const worldOrigin = this.getWorldOrigin(origin)
+        const transform = this.multiple && this.getChangedTransform(() => element.scaleOf(origin, scaleX, scaleY))
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform })
 
         this.editTool.onScale(event)
         this.emitEvent(event)
     }
 
-    public rotateOf(origin: IPointData, rotation: number): void {
-        const { element } = this
-        const worldOrigin = element.getWorldPoint(origin)
+    override flip(axis: IAxis): void {
+        if (this.element.locked) return
 
-        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation })
+        const { element } = this
+        const worldOrigin = this.getWorldOrigin('center')
+        const transform = this.multiple ? this.getChangedTransform(() => element.flip(axis)) : new Matrix(LeafHelper.getFlipTransform(element, axis))
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform })
 
-        this.editTool.onRotate(event)
+        this.editTool.onScale(event)
         this.emitEvent(event)
-
-        if (this.multiple) element.rotateOf(origin, rotation)
     }
 
-    public skewOf(origin: IPointData, skewX: number, skewY = 0, _resize?: boolean): void {
+    override rotateOf(origin: IPointData | IAlign, rotation: number): void {
+        if (!this.mergeConfig.rotateable || this.element.locked) return
+
         const { element } = this
-        const worldOrigin = element.getWorldPoint(origin)
+        const worldOrigin = this.getWorldOrigin(origin)
+        const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation))
+        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform })
 
-        let transform: Matrix
+        this.editTool.onRotate(event)
+        this.emitEvent(event)
+    }
 
-        if (this.multiple) {
-            const childMatrix = { ...element.localTransform }
-            element.skewOf(origin, skewX, skewY)
-            transform = new Matrix(element.localTransform).divide(childMatrix)
-        }
+    override skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
+        if (!this.mergeConfig.skewable || this.element.locked) return
 
-        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, {
-            target: element, editor: this, skewX, skewY, transform, worldOrigin
-        })
+        const { element } = this
+        const worldOrigin = this.getWorldOrigin(origin)
+        const transform = this.multiple && this.getChangedTransform(() => element.skewOf(origin, skewX, skewY))
+        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform })
 
         this.editTool.onSkew(event)
         this.emitEvent(event)
     }
 
+
+    protected getWorldOrigin(origin: IPointData | IAlign): IPointData {
+        return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin))
+    }
+
+    protected getChangedTransform(func: IFunction): Matrix {
+        const { element } = this
+        const oldMatrix = new Matrix(element.worldTransform)
+        func()
+        return new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
+    }
+
+
     // group
 
-    public group(group?: IGroup): IGroup {
-        if (this.multiple) this.target = EditorHelper.group(this.list, this.element, group)
+    public group(userGroup?: IGroup | IGroupInputData): IGroup {
+        if (this.multiple) {
+            this.target = EditorHelper.group(this.list, this.element, userGroup)
+            this.emitGroupEvent(EditorGroupEvent.GROUP, this.target as IGroup)
+        }
         return this.target as IGroup
     }
 
-
     public ungroup(): IUI[] {
-        if (this.list.length) this.target = EditorHelper.ungroup(this.list)
+        const { list } = this
+        if (list.length) {
+            list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.BEFORE_UNGROUP, item as IGroup))
+            this.target = EditorHelper.ungroup(list)
+            list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.UNGROUP, item as IGroup))
+        }
         return this.list
     }
 
+    public openGroup(group: IGroup): void {
+        this.openedGroupList.add(group)
+        group.hitChildren = true
+        this.emitGroupEvent(EditorGroupEvent.OPEN, group)
+    }
+
+    public closeGroup(group: IGroup): void {
+        this.openedGroupList.remove(group)
+        group.hitChildren = false
+        this.emitGroupEvent(EditorGroupEvent.CLOSE, group)
+    }
+
+    public checkOpenedGroups(): void {
+        const opened = this.openedGroupList
+        if (opened.length) {
+            let { list } = opened
+            if (this.editing) list = [], opened.forEach(item => this.list.every(leaf => !LeafHelper.hasParent(leaf, item)) && list.push(item))
+            list.forEach(item => this.closeGroup(item as IGroup))
+        }
+        if (this.editing && !this.selector.dragging) this.checkDeepSelect()
+    }
+
+    public checkDeepSelect(): void {
+        let parent: IGroup, { list } = this
+        for (let i = 0; i < list.length; i++) {
+            parent = list[i].parent
+            while (parent && !parent.hitChildren) {
+                this.openGroup(parent)
+                parent = parent.parent
+            }
+        }
+    }
+
+    public emitGroupEvent(type: string, group: IGroup): void {
+        const event = new EditorGroupEvent(type, { editTarget: group })
+        this.emitEvent(event)
+        group.emitEvent(event)
+    }
+
+    // inner
+
+    public openInnerEditor(target?: IUI): void {
+        if (target) this.target = target
+        if (this.single) {
+            const editTarget = this.element
+            const tag = editTarget.editInner
+            if (tag && EditToolCreator.list[tag]) {
+                this.editTool.unload()
+                this.innerEditing = true
+                this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this)
+                this.innerEditor.editTarget = editTarget
+
+                this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN)
+                this.innerEditor.load()
+                this.emitInnerEvent(InnerEditorEvent.OPEN)
+            }
+        }
+    }
+
+    public closeInnerEditor(): void {
+        if (this.innerEditing) {
+            this.innerEditing = false
+
+            this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE)
+            this.innerEditor.unload()
+            this.emitInnerEvent(InnerEditorEvent.CLOSE)
+
+            this.editTool.load()
+            this.innerEditor = null
+        }
+    }
+
+    public emitInnerEvent(type: string): void {
+        const { innerEditor } = this
+        const { editTarget } = innerEditor
+        const event = new InnerEditorEvent(type, { editTarget, innerEditor })
+        this.emitEvent(event)
+        editTarget.emitEvent(event)
+    }
+
     // lock
 
     public lock(): void {
@@ -283,6 +470,9 @@ export class Editor extends Group implements IEditor {
         if (!this.targetEventIds.length) {
             const { leafer } = this.list[0]
             this.targetEventIds = [
+                this.app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
+                this.app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
+                this.app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
                 leafer.on_(RenderEvent.START, this.update, this),
                 leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e: KeyEvent) => { updateCursor(this, e) }),
                 leafer.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
@@ -301,7 +491,9 @@ export class Editor extends Group implements IEditor {
     public destroy(): void {
         if (!this.destroyed) {
             this.simulateTarget.destroy()
-            this.target = this.hoverTarget = this.simulateTarget = null
+            Object.values(this.editToolList).forEach(item => item.destroy())
+            this.editToolList = {}
+            this.target = this.hoverTarget = this.simulateTarget = this.editTool = this.innerEditor = null
             super.destroy()
         }
     }

package/src/config.ts

@@ -1,13 +1,16 @@
 import { IEditorConfig } from '@leafer-in/interface'
+import { resizeSVG, rotateSVG, skewSVG } from './svg'
+
 
 export const config: IEditorConfig = {
-    editSize: 'auto',
+    editSize: 'size',
+    keyEvent: true,
 
     stroke: '#836DFF',
     strokeWidth: 2,
 
     pointFill: '#FFFFFF',
-    pointSize: 8,
+    pointSize: 10,
     pointRadius: 16,
 
     rotateGap: 45,
@@ -15,15 +18,22 @@ export const config: IEditorConfig = {
     buttonsDirection: 'bottom',
     buttonsMargin: 12,
 
+    hideOnSmall: true,
+
     moveCursor: 'move',
-    resizeCursor: ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'],
-    rotateCursor: ['ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize', 'n-resize'],
+    resizeCursor: { url: resizeSVG, x: 12, y: 12 },
+    rotateCursor: { url: rotateSVG, x: 12, y: 12 },
+    skewCursor: { url: skewSVG, x: 12, y: 12 },
 
     selector: true,
     hover: true,
+    select: 'press',
+    openInner: 'double',
     boxSelect: true,
 
+    moveable: true,
     resizeable: true,
+    flipable: true,
     rotateable: true,
     skewable: true
 }

package/src/decorator/data.ts

@@ -1,5 +1,5 @@
 import { IFunction, ILeaf, IObject } from '@leafer-ui/interface'
-import { defineKey } from '@leafer-ui/core'
+import { defineKey } from '@leafer-ui/draw'
 
 
 export function targetAttr(fn: IFunction) {