@leafer-in/editor 1.6.7 → 1.7.0

package/src/display/EditMask.ts

@@ -29,10 +29,11 @@ export class EditMask extends UI {
             if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix)) return
 
             canvas.saveBlendMode('destination-out')
+            options = { ...options, shape: true }
             editor.list.forEach(item => {
-                item.__renderShape(canvas, options)
-                const { __box, parent } = item
-                if ((item = __box) || ((item = parent) && (parent as IBox).textBox)) item.__renderShape(canvas, options) // 文本框
+                item.__render(canvas, options)
+                const { parent } = item
+                if (parent && (parent as IBox).textBox) parent.__renderShape(canvas, options) // 文本框
             })
             canvas.restoreBlendMode()
         }

package/src/editor/cursor.ts

@@ -1,6 +1,6 @@
 import { IObject, IUIEvent } from '@leafer-ui/interface'
 
-import { IEditor } from '@leafer-in/interface'
+import { IEditBox } from '@leafer-in/interface'
 import { MathHelper } from '@leafer-ui/draw'
 
 import { EditDataHelper } from '../helper/EditDataHelper'
@@ -8,18 +8,17 @@ import { EditDataHelper } from '../helper/EditDataHelper'
 
 const cacheCursors: IObject = {}
 
-export function updateCursor(editor: IEditor, e: IUIEvent): void {
-    const { editBox } = editor, point = editBox.enterPoint
-    if (!point || !editor.editing || !editBox.visible) return
+export function updateCursor(editBox: IEditBox, e: IUIEvent): void {
+    const { enterPoint: point } = editBox
+    if (!point || !editBox.editor.editing || !editBox.visible) return
     if (point.name === 'circle') return // 独立旋转按钮
     if (point.pointType === 'button') { // 普通按钮
         if (!point.cursor) point.cursor = 'pointer'
         return
     }
 
-    let { rotation } = editBox
-    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig
-    const { pointType } = point, { flippedX, flippedY } = editBox
+    let { rotation, flippedX, flippedY } = 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
@@ -39,9 +38,9 @@ export function updateCursor(editor: IEditor, e: IUIEvent): void {
     }
 }
 
-export function updateMoveCursor(editor: IEditor): void {
-    const { moveCursor, moveable } = editor.mergeConfig
-    editor.editBox.rect.cursor = moveable ? moveCursor : undefined
+export function updateMoveCursor(editBox: IEditBox): void {
+    const { moveCursor, moveable } = editBox.mergeConfig
+    editBox.rect.cursor = moveable ? moveCursor : undefined
 }
 
 

package/src/editor/simulate.ts

@@ -1,4 +1,4 @@
-import { IGroup, ILeaf } from '@leafer-ui/interface'
+import { ILeaf } from '@leafer-ui/interface'
 import { Bounds } from '@leafer-ui/draw'
 
 import { IEditor } from '@leafer-in/interface'
@@ -8,7 +8,7 @@ const bounds = new Bounds()
 
 export function simulate(editor: IEditor) {
     const { simulateTarget, list } = editor
-    const { zoomLayer } = list[0].leafer.zoomLayer as IGroup // follow zoomLayer zoom / move
+    const { zoomLayer } = list[0].leafer // follow zoomLayer zoom / move
     simulateTarget.safeChange(() => {
         bounds.setListWithFn(list, (leaf: ILeaf) => leaf.getBounds('box', 'page'))
         if (bounds.width === 0) bounds.width = 0.1 // fix

package/src/editor/target.ts

@@ -3,7 +3,6 @@ import { LeafList } from '@leafer-ui/draw'
 import { IEditor, IUI } from '@leafer-in/interface'
 
 import { simulate } from './simulate'
-import { updateMoveCursor } from './cursor'
 import { EditorEvent } from '../event/EditorEvent'
 
 
@@ -15,23 +14,25 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     } else {
         editor.simulateTarget.remove()
         editor.leafList.reset()
-        editor.closeInnerEditor()
     }
 
-    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }))
+    editor.closeInnerEditor()
+
+    const data = { editor, value: target, oldValue }
+    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data))
     editor.checkOpenedGroups()
 
     if (editor.editing) {
         editor.waitLeafer(() => {
-            updateMoveCursor(editor)
             editor.updateEditTool()
-            editor.update()
             editor.listenTargetEvents()
         })
     } else {
         editor.updateEditTool()
         editor.removeTargetEvents()
     }
+
+    editor.emitEvent(new EditorEvent(EditorEvent.AFTER_SELECT, data))
 }
 
 

package/src/event/EditorEvent.ts

@@ -12,6 +12,7 @@ export class EditorEvent extends Event implements IEditorEvent {
 
     static BEFORE_SELECT = 'editor.before_select'
     static SELECT = 'editor.select'
+    static AFTER_SELECT = 'editor.after_select'
 
     static BEFORE_HOVER = 'editor.before_hover'
     static HOVER = 'editor.hover'

package/src/helper/EditDataHelper.ts

@@ -10,10 +10,10 @@ const { within } = MathHelper
 
 export const EditDataHelper = {
 
-    getScaleData(element: IUI, startBounds: ILayoutBoundsData, direction: Direction9, totalMove: IPointData, lockRatio: boolean | 'corner', around: IAround, flipable: boolean, scaleMode: boolean): IEditorScaleEvent {
+    getScaleData(target: 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, worldBoxBounds } = element
+        const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = target
         const { width, height } = startBounds
 
         if (around) {
@@ -23,8 +23,8 @@ export const EditDataHelper = {
 
 
         // 获取已经改变的比例
-        const originChangedScaleX = element.scaleX / startBounds.scaleX
-        const originChangedScaleY = element.scaleY / startBounds.scaleY
+        const originChangedScaleX = target.scaleX / startBounds.scaleX
+        const originChangedScaleY = target.scaleY / startBounds.scaleY
         const signX = originChangedScaleX < 0 ? -1 : 1
         const signY = originChangedScaleY < 0 ? -1 : 1
 
@@ -105,7 +105,7 @@ export const EditDataHelper = {
         if (useScaleY) scaleY /= changedScaleY
 
         if (!flipable) {
-            const { worldTransform } = element
+            const { worldTransform } = target
             if (scaleX < 0) scaleX = 1 / boxBounds.width / worldTransform.scaleX
             if (scaleY < 0) scaleY = 1 / boxBounds.height / worldTransform.scaleY
         }
@@ -115,9 +115,9 @@ export const EditDataHelper = {
         toPoint(around || align, boxBounds, origin, true)
 
         if (dragBounds) {
-            const allowBounds = dragBounds === 'parent' ? element.parent.boxBounds : dragBounds
-            const localBounds = new Bounds(element.__localBoxBounds)
-            localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY)
+            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)
@@ -128,12 +128,12 @@ export const EditDataHelper = {
         }
 
         if (useScaleX && widthRange) {
-            const nowWidth = boxBounds.width * element.scaleX
+            const nowWidth = boxBounds.width * target.scaleX
             scaleX = within(nowWidth * scaleX, widthRange) / nowWidth
         }
 
         if (useScaleY && heightRange) {
-            const nowHeight = boxBounds.height * element.scaleY
+            const nowHeight = boxBounds.height * target.scaleY
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight
         }
 
@@ -146,7 +146,7 @@ export const EditDataHelper = {
         return { origin, scaleX, scaleY, direction, lockRatio, around }
     },
 
-    getRotateData(bounds: IBoundsData, direction: Direction9, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
+    getRotateData(target: IUI, direction: Direction9, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
         let align: IAlign, origin = {} as IPointData
 
         switch (direction) {
@@ -166,9 +166,9 @@ export const EditDataHelper = {
                 align = 'center'
         }
 
-        toPoint(around || align, bounds, origin, true)
+        toPoint(around || align, target.boxBounds, origin, true)
 
-        return { origin, rotation: PointHelper.getRotation(last, origin, current) }
+        return { origin, rotation: PointHelper.getRotation(last, target.getWorldPointByBox(origin), current) }
     },
 
     getSkewData(bounds: IBoundsData, direction: Direction9, move: IPointData, around: IAround): IEditorSkewEvent {

package/src/index.ts

@@ -19,6 +19,8 @@ export { EditToolCreator, registerEditTool, registerInnerEditor } from './tool/E
 export { InnerEditor } from './tool/InnerEditor'
 export { EditTool } from './tool/EditTool'
 export { LineEditTool } from './tool/LineEditTool'
+export { TransformTool } from './tool/TransformTool'
+
 
 export { EditorHelper } from './helper/EditorHelper'
 export { EditDataHelper } from './helper/EditDataHelper'

package/src/tool/EditTool.ts

@@ -69,10 +69,7 @@ export class EditTool extends InnerEditor implements IEditTool {
     }
 
     public update(): void {
-        const { editor, editBox } = this
-        const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = editor.element.getLayoutBounds('box', editor, true)
-        editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY })
-        editBox.update({ x: 0, y: 0, width, height })
+        this.editBox.update()
         this.onUpdate()
     }
 

package/src/tool/InnerEditor.ts

@@ -1,5 +1,5 @@
 import { IGroup, IEventListenerId, IUI, IObject } from '@leafer-ui/interface'
-import { IInnerEditor, IEditor, IEditBox } from '@leafer-in/interface'
+import { IInnerEditor, IEditor, IEditBox, IInnerEditorMode } from '@leafer-in/interface'
 
 import { Group } from '@leafer-ui/draw'
 import { EditToolCreator } from './EditToolCreator'
@@ -13,6 +13,8 @@ export class InnerEditor implements IInnerEditor {
 
     public get tag() { return 'InnerEditor' }
 
+    public get mode(): IInnerEditorMode { return 'focus' } // 专注模式
+
     public editTarget: IUI
 
     public config: IObject
@@ -22,7 +24,7 @@ export class InnerEditor implements IInnerEditor {
 
     public view: IGroup
 
-    public eventIds: IEventListenerId[]
+    public eventIds: IEventListenerId[] = []
 
 
     constructor(editor: IEditor) {
@@ -44,7 +46,7 @@ export class InnerEditor implements IInnerEditor {
     public load(): void {
         const { editor } = this
         if (editor) {
-            if (editor.app) editor.selector.hittable = editor.app.tree.hitChildren = false
+            if (editor.app && this.mode === 'focus') editor.selector.hittable = editor.app.tree.hitChildren = false
             this.onLoad()
         }
     }
@@ -56,7 +58,7 @@ export class InnerEditor implements IInnerEditor {
     public unload(): void {
         const { editor } = this
         if (editor) {
-            if (editor.app) editor.selector.hittable = editor.app.tree.hitChildren = true
+            if (editor.app && this.mode === 'focus') editor.selector.hittable = editor.app.tree.hitChildren = true
             this.onUnload()
         }
     }

package/src/tool/TransformTool.ts

@@ -0,0 +1,294 @@
+import { IEvent, IPointData, IAlign, IAxis, IFunction, IMatrix } from '@leafer-ui/interface'
+import { MathHelper, Matrix, LeafHelper } 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'
+
+import { EditorMoveEvent } from '../event/EditorMoveEvent'
+import { EditorScaleEvent } from '../event/EditorScaleEvent'
+import { EditorRotateEvent } from '../event/EditorRotateEvent'
+import { EditorSkewEvent } from '../event/EditorSkewEvent'
+
+import { EditDataHelper } from '../helper/EditDataHelper'
+import { ITransformTool } from '@leafer-ui/interface'
+
+export class TransformTool implements ITransformTool { // Editor use
+
+    public editBox: IEditBox
+
+    public editTool?: IEditTool // 可能不存在值
+
+
+    // operate
+
+    public onMove(e: DragEvent | MoveEvent): void {
+
+        const { target, mergeConfig, 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()
+            }
+
+        } 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(target, dragStartData.point, total))
+
+        }
+    }
+
+    public onScale(e: DragEvent | ZoomEvent): void {
+
+        const { target, mergeConfig, single, dragStartData } = this.editBox
+        let { around, lockRatio, resizeable, flipable, editSize } = mergeConfig
+
+        if (e instanceof ZoomEvent) {
+
+            if (resizeable === 'zoom') e.stop(), this.scaleOf(target.getBoxPoint(e), e.scale, e.scale)
+
+        } else {
+
+            const { direction } = e.current as IEditPoint
+            if (e.shiftKey || target.lockRatio) lockRatio = true
+
+            const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, e.getInnerTotal(target), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === 'scale')
+
+            if (this.editTool && 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 { 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)
+
+        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
+
+        } else {
+
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (target.around || target.origin || around || 'center'))
+            rotation = data.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
+
+        this.rotateOf(origin, rotation)
+    }
+
+    public onSkew(e: DragEvent): void {
+
+        const { target, mergeConfig } = this.editBox
+        const { around } = mergeConfig
+
+        const { origin, skewX, skewY } = EditDataHelper.getSkewData(target.boxBounds, (e.current as IEditPoint).direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey))
+        if (!skewX && !skewY) return
+
+        this.skewOf(origin, skewX, skewY)
+    }
+
+
+    // 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 { target, mergeConfig, single, editor } = this.editBox
+        const { beforeMove } = 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 (!single) (target as ISimulateElement).safeChange(() => target.move(x, y))
+        const data: IEditorMoveEvent = { target, editor, moveX: world.x, moveY: world.y }
+
+        this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data))
+        const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data)
+        this.doMove(event)
+        this.emitEvent(event)
+    }
+
+    public scaleWithDrag(data: IEditorScaleEvent): void {
+        if (!this.checkTransform('resizeable')) return
+
+        const { target, mergeConfig, editor } = this.editBox
+        const { beforeScale } = 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, 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 scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
+        if (!this.checkTransform('resizeable')) return
+
+        const { target, mergeConfig, single, editor } = this.editBox
+
+        const { beforeScale } = 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
+        }
+
+        const worldOrigin = this.getWorldOrigin(origin)
+        const transform = !single && this.getChangedTransform(() => (target as ISimulateElement).safeChange(() => target.scaleOf(origin, scaleX, scaleY)))
+        const data: IEditorScaleEvent = { target, editor, worldOrigin, scaleX, scaleY, transform }
+
+        this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
+        this.doScale(event)
+        this.emitEvent(event)
+    }
+
+    public flip(axis: IAxis): void {
+        if (!this.checkTransform('resizeable')) return
+
+        const { target, single, editor } = this.editBox
+
+        const worldOrigin = this.getWorldOrigin('center')
+        const transform = !single ? this.getChangedTransform(() => (target as ISimulateElement).safeChange(() => target.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(target, axis))
+        const data: IEditorScaleEvent = { target, editor, 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.doScale(event)
+        this.emitEvent(event)
+    }
+
+    public rotateOf(origin: IPointData | IAlign, rotation: number): void {
+        if (!this.checkTransform('rotateable')) return
+
+        const { target, mergeConfig, single, editor } = this.editBox
+
+        const { beforeRotate } = 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 = !single && this.getChangedTransform(() => (target as ISimulateElement).safeChange(() => target.rotateOf(origin, rotation)))
+        const data: IEditorRotateEvent = { target, editor, worldOrigin, rotation, transform }
+
+        this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data))
+        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data)
+        this.doRotate(event)
+        this.emitEvent(event)
+    }
+
+    public skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
+        if (!this.checkTransform('skewable')) return
+
+        const { target, mergeConfig, single, editor } = this.editBox
+
+        const { beforeSkew } = 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 = !single && this.getChangedTransform(() => (target as ISimulateElement).safeChange(() => target.skewOf(origin, skewX, skewY)))
+        const data: IEditorSkewEvent = { target, editor, worldOrigin, skewX, skewY, transform }
+
+        this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data))
+        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data)
+        this.doSkew(event)
+        this.emitEvent(event)
+    }
+
+
+    // do
+
+    protected doMove(event: IEditorMoveEvent) {
+        this.editTool.onMove(event)
+    }
+
+    protected doScale(event: IEditorScaleEvent): void {
+        this.editTool.onScale(event)
+    }
+
+    protected doRotate(event: IEditorRotateEvent): void {
+        this.editTool.onRotate(event)
+    }
+
+    protected doSkew(event: IEditorSkewEvent): void {
+        this.editTool.onSkew(event)
+    }
+
+    // helper
+
+    public checkTransform(type: 'moveable' | 'resizeable' | 'rotateable' | 'skewable'): boolean {
+        const { target, mergeConfig } = this.editBox
+        return target && !target.locked && mergeConfig[type] as boolean
+    }
+
+    protected getWorldOrigin(origin: IPointData | IAlign): IPointData {
+        const { target } = this.editBox
+        return target.getWorldPoint(LeafHelper.getInnerOrigin(target, origin))
+    }
+
+    protected getChangedTransform(func: IFunction): IMatrix {
+
+        const { target, single } = this.editBox
+        if (!single && !(target as ISimulateElement).canChange) return (target as ISimulateElement).changedTransform
+
+        const oldMatrix = new Matrix(target.worldTransform)
+        func()
+        return new Matrix(target.worldTransform).divide(oldMatrix) // world change transform
+    }
+
+    // need rewrite
+    public emitEvent(event?: IEvent, capture?: boolean): void {
+        this.editBox.editor.emitEvent(event, capture)
+    }
+
+}