@leafer-in/editor 1.0.0-rc.3 → 1.0.0-rc.30

package/src/display/Stroker.ts

@@ -0,0 +1,92 @@
+import { IUI, ILeaferCanvas, IRenderOptions, IRectInputData } from '@leafer-ui/interface'
+import { Paint, UI, MatrixHelper } from '@leafer-ui/draw'
+
+import { IStroker } from '@leafer-in/interface'
+
+import { targetAttr } from '../decorator/data'
+
+
+const matrix = MatrixHelper.get()
+const { abs } = Math
+const { copy, scale } = MatrixHelper
+
+export class Stroker extends UI implements IStroker {
+
+    @targetAttr(onTarget)
+    public target: IUI | IUI[]
+
+    public list: IUI[] = []
+
+    constructor() {
+        super()
+        this.hittable = false
+        this.strokeAlign = 'center'
+    }
+
+    public setTarget(target: IUI | IUI[], style: IRectInputData): void {
+        this.set(style)
+        this.target = target
+    }
+
+    public __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        const { list } = this
+        if (list.length) {
+
+            let leaf: IUI
+            const { stroke, strokeWidth, fill } = this.__
+            const { bounds } = options
+
+            for (let i = 0; i < list.length; i++) {
+                leaf = list[i]
+                if (bounds && bounds.hit(leaf.__world, options.matrix)) {
+
+                    const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY)
+
+                    if (aScaleX !== aScaleY) { // need no scale stroke, use rect path
+
+                        copy(matrix, leaf.__world)
+                        scale(matrix, 1 / aScaleX, 1 / aScaleY)
+
+                        canvas.setWorld(matrix, options.matrix)
+                        canvas.beginPath()
+                        this.__.strokeWidth = strokeWidth
+
+                        const { x, y, width, height } = leaf.__layout.boxBounds
+                        canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY)
+
+                    } else {
+
+                        canvas.setWorld(leaf.__world, options.matrix)
+                        canvas.beginPath()
+
+                        if (leaf.__.__useArrow) {
+                            leaf.__drawPath(canvas)
+                        } else {
+                            leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas)
+                        }
+
+                        this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX)
+
+                    }
+
+                    if (stroke) typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas)
+                    if (fill) typeof fill === 'string' ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas)
+                }
+            }
+
+            this.__.strokeWidth = strokeWidth
+        }
+    }
+
+    public destroy(): void {
+        this.target = null
+        super.destroy()
+    }
+
+}
+
+function onTarget(stroker: Stroker): void {
+    const value = stroker.target
+    stroker.list = value ? (value instanceof Array ? value : [value]) : []
+    stroker.forceUpdate()
+}

package/src/editor/cursor.ts

@@ -0,0 +1,45 @@
+import { IObject, IUIEvent } from '@leafer-ui/interface'
+
+import { IEditor } from '@leafer-in/interface'
+import { MathHelper } from '@leafer-ui/draw'
+
+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
+    if (point.name === 'circle') return // 独立旋转按钮
+
+    let { rotation } = editBox
+    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig
+    const { pointType } = point, { flippedX, flippedY } = editBox
+
+    let showResize = pointType === 'resize'
+    if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) showResize = false
+    const showSkew = skewable && !showResize && point.name === 'resize-line'
+
+    const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor)
+    rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45
+    rotation = Math.round(MathHelper.formatRotation(rotation, true) / 2) * 2
+
+    const { url, x, y } = cursor
+    const key = url + rotation
+
+    if (cacheCursors[key]) {
+        point.cursor = cacheCursors[key]
+    } else {
+        cacheCursors[key] = point.cursor = { url: toDataURL(url, rotation), x, y }
+    }
+}
+
+export function updateMoveCursor(editor: IEditor): void {
+    editor.editBox.rect.cursor = editor.mergeConfig.moveCursor
+}
+
+
+function toDataURL(svg: string, rotation: number): string {
+    return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"'
+}

package/src/editor/simulate.ts

@@ -0,0 +1,14 @@
+import { IGroup, ILeaf } from '@leafer-ui/interface'
+import { Bounds } from '@leafer-ui/draw'
+
+import { IEditor } from '@leafer-in/interface'
+
+
+export function simulate(editor: IEditor) {
+    const { simulateTarget, leafList: targetList } = editor
+    const { x, y, width, height } = new Bounds().setListWithFn(targetList.list, (leaf: ILeaf) => leaf.worldBoxBounds)
+
+    const parent = simulateTarget.parent = targetList.list[0].leafer.zoomLayer as IGroup // follow zoomLayer zoom / move
+    const { scaleX, scaleY, e: worldX, f: worldY } = parent.__world
+    simulateTarget.reset({ x: (x - worldX) / scaleX, y: (y - worldY) / scaleY, width: width / scaleX, height: height / scaleY })
+}

package/src/editor/target.ts

@@ -0,0 +1,39 @@
+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'
+
+
+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)
+    } else {
+        editor.leafList.reset()
+    }
+
+    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }))
+    editor.checkOpenedGroups()
+
+    if (editor.editing) {
+        editor.waitLeafer(() => {
+            if (editor.multiple) simulate(editor)
+            updateMoveCursor(editor)
+            editor.updateEditTool()
+            editor.update()
+            editor.listenTargetEvents()
+        })
+    } else {
+        editor.updateEditTool()
+        editor.removeTargetEvents()
+    }
+}
+
+
+export function onHover(editor: IEditor, oldValue: IUI): void {
+    editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }))
+
+}

package/src/event/EditorEvent.ts

@@ -0,0 +1,33 @@
+import { IUI, IPointData } from '@leafer-ui/interface'
+import { Event } from '@leafer-ui/draw'
+
+import { IEditor, IEditorEvent } from '@leafer-in/interface'
+
+
+function toList(value: IUI | IUI[]): IUI[] {
+    return value ? (value instanceof Array ? value : [value]) : []
+}
+
+export class EditorEvent extends Event implements IEditorEvent {
+
+    static SELECT = 'editor.select'
+    static HOVER = 'editor.hover'
+
+    declare readonly target: IUI
+    readonly editor: IEditor
+
+    readonly value: IUI | IUI[]
+    readonly oldValue: IUI | IUI[]
+
+    get list() { return toList(this.value) }
+    get oldList() { return toList(this.oldValue) }
+
+    readonly worldOrigin: IPointData
+    declare readonly origin: IPointData
+
+    constructor(type: string, data?: IEditorEvent) {
+        super(type)
+        if (data) Object.assign(this, data)
+    }
+
+}

package/src/event/EditorGroupEvent.ts

@@ -0,0 +1,23 @@
+import { IEditorGroupEvent } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+import { IGroup } from '@leafer-ui/interface'
+import { } from '../tool/InnerEditor'
+
+
+export class EditorGroupEvent extends EditorEvent implements IEditorGroupEvent {
+
+    static GROUP = 'editor.group'
+    static BEFORE_UNGROUP = 'editor.before_ungroup'
+    static UNGROUP = 'editor.ungroup'
+
+    static OPEN = 'editor.open_group'
+    static CLOSE = 'editor.close_group'
+
+    readonly editTarget: IGroup
+
+    constructor(type: string, data?: IEditorGroupEvent) {
+        super(type, data)
+    }
+
+}

package/src/event/EditorMoveEvent.ts

@@ -0,0 +1,17 @@
+import { IEditorMoveEvent } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+
+
+export class EditorMoveEvent extends EditorEvent implements IEditorMoveEvent {
+
+    static MOVE = 'editor.move'
+
+    readonly moveX: number
+    readonly moveY: number
+
+    constructor(type: string, data?: IEditorMoveEvent) {
+        super(type, data)
+    }
+
+}

package/src/event/EditorRotateEvent.ts

@@ -1,23 +1,17 @@
-import { IUI, IPointData } from '@leafer-ui/interface'
-import { IEditor, IEditorRotateEvent } from '@leafer-in/interface'
+import { IEditorRotateEvent } from '@leafer-in/interface'
 
-import { Event } from '@leafer-ui/core'
+import { EditorEvent } from './EditorEvent'
 
 
-export class EditorRotateEvent extends Event implements IEditorRotateEvent {
+export class EditorRotateEvent extends EditorEvent implements IEditorRotateEvent {
 
     static ROTATE = 'editor.rotate'
 
-    declare readonly target: IUI
-    readonly editor: IEditor
-
     // rotateOf(origin, rotation)
-    readonly origin: IPointData
     readonly rotation: number
 
     constructor(type: string, data?: IEditorRotateEvent) {
-        super(type)
-        if (data) Object.assign(this, data)
+        super(type, data)
     }
 
 }

package/src/event/EditorScaleEvent.ts

@@ -0,0 +1,28 @@
+import { IAround, IDragEvent, IMatrixData } from '@leafer-ui/interface'
+
+import { IEditorScaleEvent } from '@leafer-in/interface'
+import { Direction9 } from '@leafer-ui/draw'
+
+import { EditorEvent } from './EditorEvent'
+
+
+export class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent {
+
+    static SCALE = 'editor.scale'
+
+    // scaleOf(origin, scaleX, scaleY, resize)
+    readonly scaleX: number
+    readonly scaleY: number
+    readonly transform?: IMatrixData
+
+    readonly drag: IDragEvent
+
+    readonly direction: Direction9
+    readonly lockRatio: boolean
+    readonly around: IAround
+
+    constructor(type: string, data?: IEditorScaleEvent) {
+        super(type, data)
+    }
+
+}

package/src/event/EditorSkewEvent.ts

@@ -0,0 +1,18 @@
+import { IEditorSkewEvent } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+
+
+export class EditorSkewEvent extends EditorEvent implements IEditorSkewEvent {
+
+    static SKEW = 'editor.skew'
+
+    // skewOf(origin, skewX, skewY)
+    readonly skewX: number
+    readonly skewY: number
+
+    constructor(type: string, data?: IEditorSkewEvent) {
+        super(type, data)
+    }
+
+}

package/src/event/InnerEditorEvent.ts

@@ -0,0 +1,23 @@
+import { IInnerEditorEvent, IInnerEditor } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+import { IUI } from '@leafer-ui/interface'
+import { } from '../tool/InnerEditor'
+
+
+export class InnerEditorEvent extends EditorEvent implements IInnerEditorEvent {
+
+    static BEFORE_OPEN = 'innerEditor.before_open'
+    static OPEN = 'innerEditor.open'
+
+    static BEFORE_CLOSE = 'innerEditor.before_close'
+    static CLOSE = 'innerEditor.close'
+
+    readonly editTarget: IUI
+    readonly innerEditor: IInnerEditor
+
+    constructor(type: string, data?: IInnerEditorEvent) {
+        super(type, data)
+    }
+
+}

package/src/helper/EditDataHelper.ts

@@ -0,0 +1,183 @@
+import { IBoundsData, IPointData, IAround, IAlign } from '@leafer-ui/interface'
+import { AroundHelper, PointHelper, Direction9 } from '@leafer-ui/draw'
+
+import { IEditorScaleEvent, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
+
+
+const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = Direction9
+const { toPoint } = AroundHelper
+
+export const EditDataHelper = {
+
+    getScaleData(bounds: IBoundsData, direction: Direction9, pointMove: IPointData, lockRatio: boolean | 'corner', around: IAround): IEditorScaleEvent {
+        let align: IAlign, origin = {} as IPointData, scaleX: number = 1, scaleY: number = 1
+        const { width, height } = bounds
+
+        if (around) {
+            pointMove.x *= 2
+            pointMove.y *= 2
+        }
+
+        // 防止变为0
+        if (Math.abs(pointMove.x) === width) pointMove.x += 0.1
+        if (Math.abs(pointMove.y) === height) pointMove.y += 0.1
+
+        const topScale = (-pointMove.y + height) / height
+        const rightScale = (pointMove.x + width) / width
+        const bottomScale = (pointMove.y + height) / height
+        const leftScale = (-pointMove.x + width) / width
+
+        switch (direction) {
+            case top:
+                scaleY = topScale
+                align = 'bottom'
+                break
+            case right:
+                scaleX = rightScale
+                align = 'left'
+                break
+            case bottom:
+                scaleY = bottomScale
+                align = 'top'
+                break
+            case left:
+                scaleX = leftScale
+                align = 'right'
+                break
+            case topLeft:
+                scaleY = topScale
+                scaleX = leftScale
+                align = 'bottom-right'
+                break
+            case topRight:
+                scaleY = topScale
+                scaleX = rightScale
+                align = 'bottom-left'
+                break
+            case bottomRight:
+                scaleY = bottomScale
+                scaleX = rightScale
+                align = 'top-left'
+                break
+            case bottomLeft:
+                scaleY = bottomScale
+                scaleX = leftScale
+                align = 'top-right'
+        }
+
+        if (lockRatio) {
+            const unlockSide = lockRatio === 'corner' && direction % 2
+            if (!unlockSide) {
+                const scale = Math.sqrt(Math.abs(scaleX * scaleY))
+                scaleX = scaleX < 0 ? -scale : scale
+                scaleY = scaleY < 0 ? -scale : scale
+            }
+        }
+
+        toPoint(around || align, bounds, origin)
+
+        return { origin, scaleX, scaleY, direction, lockRatio, around }
+    },
+
+    getRotateData(bounds: IBoundsData, direction: Direction9, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
+        let align: IAlign, origin = {} as IPointData
+
+        switch (direction) {
+            case topLeft:
+                align = 'bottom-right'
+                break
+            case topRight:
+                align = 'bottom-left'
+                break
+            case bottomRight:
+                align = 'top-left'
+                break
+            case bottomLeft:
+                align = 'top-right'
+                break
+            default:
+                align = 'center'
+        }
+
+        toPoint(around || align, bounds, origin)
+
+        return { origin, rotation: PointHelper.getRotation(last, origin, current) }
+    },
+
+    getSkewData(bounds: IBoundsData, direction: Direction9, move: IPointData, around: IAround): IEditorSkewEvent {
+        let align: IAlign, origin = {} as IPointData, skewX = 0, skewY = 0
+        let last: IPointData
+
+        switch (direction) {
+            case top:
+                last = { x: 0.5, y: 0 }
+                align = 'bottom'
+                skewX = 1
+                break
+            case bottom:
+                last = { x: 0.5, y: 1 }
+                align = 'top'
+                skewX = 1
+                break
+            case left:
+                last = { x: 0, y: 0.5 }
+                align = 'right'
+                skewY = 1
+                break
+            case right:
+                last = { x: 1, y: 0.5 }
+                align = 'left'
+                skewY = 1
+        }
+
+        const { x, y, width, height } = bounds
+
+        last.x = x + last.x * width
+        last.y = y + last.y * height
+
+        toPoint(around || align, bounds, origin)
+
+        const rotation = PointHelper.getRotation(last, origin, { x: last.x + (skewX ? move.x : 0), y: last.y + (skewY ? move.y : 0) })
+        skewX ? skewX = -rotation : skewY = rotation
+
+        return { origin, skewX, skewY }
+    },
+
+
+    getAround(around: IAround, altKey: boolean): IAround {
+        return (altKey && !around) ? 'center' : around
+    },
+
+    getRotateDirection(direction: number, rotation: number, totalDirection = 8): number {
+        direction = (direction + Math.round(rotation / (360 / totalDirection))) % totalDirection
+        if (direction < 0) direction += totalDirection
+        return direction
+    },
+
+    getFlipDirection(direction: Direction9, flipedX: boolean, flipedY: boolean): Direction9 {
+        if (flipedX) {
+            switch (direction) {
+                case left: direction = right; break
+                case topLeft: direction = topRight; break
+                case bottomLeft: direction = bottomRight; break
+                case right: direction = left; break
+                case topRight: direction = topLeft; break
+                case bottomRight: direction = bottomLeft; break
+            }
+        }
+
+        if (flipedY) {
+            switch (direction) {
+                case top: direction = bottom; break
+                case topLeft: direction = bottomLeft; break
+                case topRight: direction = bottomRight; break
+                case bottom: direction = top; break
+                case bottomLeft: direction = topLeft; break
+                case bottomRight: direction = topRight; break
+            }
+        }
+
+        return direction
+    }
+
+}

package/src/helper/EditSelectHelper.ts

@@ -0,0 +1,34 @@
+import { IBounds, ILeafList, IUI } from '@leafer-ui/interface'
+import { Answer } from '@leafer-ui/draw'
+
+const { No, Yes, NoAndSkip, YesAndSkip } = Answer
+
+export const EditSelectHelper = {
+
+    findOne(path: ILeafList): IUI {
+        return path.list.find((leaf) => leaf.editable) as IUI
+    },
+
+    findBounds(leaf: IUI, bounds: IBounds): Answer {
+        if (leaf.__.hittable && leaf.__.visible && !leaf.__.locked && bounds.hit(leaf.__world)) {
+
+            if (leaf.__.editable) {
+                if (leaf.isBranch && !leaf.__.hitChildren) {
+                    return leaf.__.hitSelf ? YesAndSkip : NoAndSkip
+                } else if (leaf.isFrame) {
+                    return bounds.includes(leaf.__layout.boxBounds, leaf.__world) ? YesAndSkip : No
+                } else {
+                    if (bounds.hit(leaf.__layout.boxBounds, leaf.__world) && leaf.__.hitSelf) return Yes
+                }
+            }
+
+            return No
+
+        } else {
+
+            return leaf.isBranch ? NoAndSkip : No
+
+        }
+    }
+
+}

package/src/helper/EditorHelper.ts

@@ -0,0 +1,73 @@
+import { IGroup, IGroupInputData, ILeaf, IUI } from '@leafer-ui/interface'
+import { Group, Matrix } from '@leafer-ui/draw'
+
+
+const order = (a: ILeaf, b: ILeaf) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b)
+const reverseOrder = (a: ILeaf, b: ILeaf) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a)
+
+export const EditorHelper = {
+
+    group(list: IUI[], element?: IUI, userGroup?: IGroup | IGroupInputData): IGroup {
+        list.sort(reverseOrder)
+        const { app, parent } = list[0]
+
+        let group: IGroup
+        if (userGroup && (userGroup as IGroup).add) {
+            group = userGroup as IGroup
+        } else {
+            group = new Group(userGroup)
+        }
+
+        parent.addAt(group, parent.children.indexOf(list[0]))
+        list.sort(order)
+
+        const matrx = new Matrix(element.worldTransform)
+        matrx.divideParent(parent.worldTransform)
+        group.setTransform(matrx)
+        group.editable = true
+        group.hitChildren = false
+
+        app.lockLayout()
+        list.forEach(child => child.dropTo(group))
+        app.unlockLayout()
+
+        return group
+    },
+
+    ungroup(list: IUI[]): IUI[] {
+        const { app } = list[0]
+        const ungroupList: IUI[] = []
+
+        app.lockLayout()
+        list.forEach(leaf => {
+            if (leaf.isBranch) {
+                const { parent, children } = leaf
+                while (children.length) {
+                    ungroupList.push(children[0])
+                    children[0].dropTo(parent, parent.children.indexOf(leaf))
+                }
+                leaf.remove()
+            } else {
+                ungroupList.push(leaf)
+            }
+        })
+        app.unlockLayout()
+
+        return ungroupList
+    },
+
+    toTop(list: IUI[]): void {
+        list.sort(order)
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.add(leaf)
+        })
+    },
+
+    toBottom(list: IUI[]): void {
+        list.sort(reverseOrder)
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.addAt(leaf, 0)
+        })
+    }
+
+}