@leafer-in/editor 1.6.7 → 1.8.0

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,25 +115,29 @@ 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)
-
-            if (!BoundsHelper.includes(allowBounds, localBounds)) {
-                const realBounds = localBounds.getIntersect(allowBounds)
-                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height
-                if (useScaleX) scaleX *= fitScaleX
-                if (useScaleY) scaleY *= fitScaleY // 后续需优化带旋转的场景
+            const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds
+            const childBounds = new Bounds(target.__localBoxBounds)
+
+            if (BoundsHelper.includes(new Bounds(allowBounds).spread(0.1), childBounds)) {
+
+                childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY)
+
+                if (!BoundsHelper.includes(allowBounds, childBounds)) {
+                    const realBounds = childBounds.getIntersect(allowBounds)
+                    const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height
+                    if (useScaleX) scaleX *= fitScaleX
+                    if (useScaleY) scaleY *= fitScaleY // 后续需优化带旋转的场景
+                }
             }
         }
 
         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 +150,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 +170,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'
@@ -45,7 +47,7 @@ Creator.editor = function (options?: IEditorConfig, app?: IApp): IEditor {
 Box.addAttr('textBox', false, dataType)
 
 UI.addAttr('editConfig', undefined, dataType)
-UI.addAttr('editOuter', (ui: UI) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType)
+UI.addAttr('editOuter', (ui: UI) => { ui.updateLayout(); return ui.__.__isLinePath ? 'LineEditTool' : 'EditTool' }, dataType) // fix: Line 需要更新布局才能精准确定
 
 UI.addAttr('editInner', 'PathEditor', dataType)
 Group.addAttr('editInner', '', dataType)  // 必须设为空

package/src/tool/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,282 @@
+import { IEvent, IPointData, IAlign, IAxis, IFunction, IMatrix } from '@leafer-ui/interface'
+import { MathHelper, Matrix, LeafHelper, AroundHelper } from '@leafer-ui/draw'
+import { DragEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
+
+import { IEditBox, IEditPoint, IEditTool, IEditorScaleEvent, ISimulateElement, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface'
+
+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, dragStartData } = this.editBox
+
+        if (e instanceof MoveEvent) {
+
+            const move = e.getLocalMove(target)
+            this.move(move.x, move.y)
+
+        } 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, flipable, editSize } = mergeConfig
+
+        if (e instanceof ZoomEvent) {
+
+            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 { around, rotateAround, rotateGap } = mergeConfig
+        const { direction } = e.current as IEditPoint
+
+        let origin: IPointData, rotation: number
+
+        if (e instanceof RotateEvent) {
+
+            rotation = e.rotation
+            origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e)
+
+        } else {
+
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (rotateAround || target.around || target.origin || around || 'center'))
+            rotation = dragStartData.rotation + data.rotation - target.rotation
+            origin = data.origin
+
+        }
+
+        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)
+    }
+
+}