@leafer-in/editor 1.0.0-beta.18 → 1.0.0-rc.11

package/src/editor/target.ts

@@ -0,0 +1,37 @@
+import { LeafList } from '@leafer-ui/core'
+
+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 }))
+
+    if (editor.hasTarget) {
+        editor.waitLeafer(() => {
+            if (editor.multiple) simulate(editor)
+            updateMoveCursor(editor)
+            editor.updateEditTool()
+            editor.update()
+            editor.listenTargetEvents()
+        })
+    } else {
+        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,26 @@
+import { IUI, IPointData } from '@leafer-ui/interface'
+import { Event } from '@leafer-ui/core'
+
+import { IEditor, IEditorEvent } from '@leafer-in/interface'
+
+
+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[]
+
+    readonly worldOrigin: IPointData
+    declare readonly origin: IPointData
+
+    constructor(type: string, data?: IEditorEvent) {
+        super(type)
+        if (data) Object.assign(this, 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,27 @@
+import { IAround, IDragEvent, IMatrixData } from '@leafer-ui/interface'
+
+import { IDirection8, IEditorScaleEvent } from '@leafer-in/interface'
+
+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: IDirection8
+    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/helper/EditDataHelper.ts

@@ -0,0 +1,179 @@
+import { IBoundsData, IPointData, IAround } from '@leafer-ui/interface'
+import { AroundHelper, PointHelper } from '@leafer-ui/core'
+
+import { IEditorScaleEvent, IDirection8, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
+
+
+const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
+const { toPoint } = AroundHelper
+
+export const EditDataHelper = {
+
+    getScaleData(bounds: IBoundsData, direction: IDirection8, pointMove: IPointData, lockRatio: boolean, around: IAround): IEditorScaleEvent {
+        let origin: 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
+                origin = { x: 0.5, y: 1 }
+                break
+            case right:
+                scaleX = rightScale
+                origin = { x: 0, y: 0.5 }
+                break
+            case bottom:
+                scaleY = bottomScale
+                origin = { x: 0.5, y: 0 }
+                break
+            case left:
+                scaleX = leftScale
+                origin = { x: 1, y: 0.5 }
+                break
+            case topLeft:
+                scaleY = topScale
+                scaleX = leftScale
+                origin = { x: 1, y: 1 }
+                break
+            case topRight:
+                scaleY = topScale
+                scaleX = rightScale
+                origin = { x: 0, y: 1 }
+                break
+            case bottomRight:
+                scaleY = bottomScale
+                scaleX = rightScale
+                origin = { x: 0, y: 0 }
+                break
+            case bottomLeft:
+                scaleY = bottomScale
+                scaleX = leftScale
+                origin = { x: 1, y: 0 }
+        }
+
+        if (lockRatio) {
+            if (scaleX !== 1) scaleY = scaleX
+            else scaleX = scaleY
+        }
+
+        toPoint(around || origin, bounds, origin)
+
+        return { origin, scaleX, scaleY, direction, lockRatio, around }
+    },
+
+    getRotateData(bounds: IBoundsData, direction: IDirection8, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
+        let origin: IPointData
+
+        switch (direction) {
+            case topLeft:
+                origin = { x: 1, y: 1 }
+                break
+            case topRight:
+                origin = { x: 0, y: 1 }
+                break
+            case bottomRight:
+                origin = { x: 0, y: 0 }
+                break
+            case bottomLeft:
+                origin = { x: 1, y: 0 }
+                break
+            default:
+                origin = { x: 0.5, y: 0.5 }
+        }
+
+        toPoint(around || origin, bounds, origin)
+
+        return { origin, rotation: PointHelper.getRotation(last, origin, current) }
+    },
+
+    getSkewData(bounds: IBoundsData, direction: IDirection8, move: IPointData, around: IAround): IEditorSkewEvent {
+        let origin: IPointData, skewX = 0, skewY = 0
+        let last: IPointData
+
+        switch (direction) {
+            case top:
+                last = { x: 0.5, y: 0 }
+                origin = { x: 0.5, y: 1 }
+                skewX = 1
+                break
+            case bottom:
+                last = { x: 0.5, y: 1 }
+                origin = { x: 0.5, y: 0 }
+                skewX = 1
+                break
+            case left:
+                last = { x: 0, y: 0.5 }
+                origin = { x: 1, y: 0.5 }
+                skewY = 1
+                break
+            case right:
+                last = { x: 1, y: 0.5 }
+                origin = { x: 0, y: 0.5 }
+                skewY = 1
+        }
+
+        const { x, y, width, height } = bounds
+
+        last.x = x + last.x * width
+        last.y = y + last.y * height
+
+        toPoint(around || origin, 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: IDirection8, flipedX: boolean, flipedY: boolean): IDirection8 {
+        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/core'
+
+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/core'
+
+
+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)
+        })
+    }
+
+}

package/src/index.ts

@@ -1,5 +1,30 @@
+export * from '@leafer-ui/scale'
+
 export { Editor } from './Editor'
-export { EditorResizeEvent } from './event/EditorResizeEvent'
+
+export { EditBox } from './display/EditBox'
+export { EditPoint } from './display/EditPoint'
+export { EditSelect } from './display/EditSelect'
+export { SelectArea } from './display/SelectArea'
+export { Stroker } from './display/Stroker'
+
+export { EditorEvent } from './event/EditorEvent'
+export { EditorMoveEvent } from './event/EditorMoveEvent'
+export { EditorScaleEvent } from './event/EditorScaleEvent'
 export { EditorRotateEvent } from './event/EditorRotateEvent'
-export { LineTool } from './tool/LineTool'
-export { RectTool } from './tool/RectTool'
+export { EditorSkewEvent } from './event/EditorSkewEvent'
+
+export { LineEditTool } from './tool/LineEditTool'
+export { EditTool } from './tool/EditTool'
+
+export { EditorHelper } from './helper/EditorHelper'
+export { EditDataHelper } from './helper/EditDataHelper'
+export { EditSelectHelper } from './helper/EditSelectHelper'
+
+import { IEditor, IEditorConfig } from '@leafer-in/interface'
+import { Creator } from '@leafer-ui/core'
+import { Editor } from './Editor'
+
+Creator.editor = function (options?: IEditorConfig): IEditor {
+    return new Editor(options)
+}

package/src/svg.ts

@@ -0,0 +1,54 @@
+const filterStyle = `
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in="SourceGraphic" result="shape"/>`
+
+
+export const resizeSVG = `
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#f)">
+<g transform="rotate({{rotation}},12,12)">
+<path d="M7.5 8.0H8.5V5.9L6.8 7.2L7.5 8.0ZM3 11.4L2.3 10.6L1.3 11.4L2.3 12.2L3 11.4ZM7.5 10.4H6.5V11.4H7.5V10.4ZM16.5 10.4V11.4H17.5V10.4H16.5ZM16.5 8.0L17.1 7.2L15.5 5.9V8.0H16.5ZM21 11.4L21.6 12.2L22.6 11.4L21.6 10.6L21 11.4ZM16.5 14.9H15.5V16.9L17.1 15.7L16.5 14.9ZM16.5 12.4H17.5V11.4H16.5V12.4ZM7.5 12.4V11.4H6.5V12.4H7.5ZM7.5 14.9L6.8 15.7L8.5 16.9V14.9H7.5ZM6.8 7.2L2.3 10.6L3.6 12.2L8.1 8.7L6.8 7.2ZM8.5 10.4V8.0H6.5V10.4H8.5ZM16.5 9.4H7.5V11.4H16.5V9.4ZM17.5 10.4V8.0H15.5V10.4H17.5ZM15.8 8.7L20.3 12.2L21.6 10.6L17.1 7.2L15.8 8.7ZM20.3 10.6L15.8 14.1L17.1 15.7L21.6 12.2L20.3 10.6ZM17.5 14.9V12.4H15.5V14.9H17.5ZM7.5 13.4H16.5V11.4H7.5V13.4ZM8.5 14.9V12.4H6.5V14.9H8.5ZM2.3 12.2L6.8 15.7L8.1 14.1L3.6 10.6L2.3 12.2Z" fill="white"/>
+<path fill-rule="evenodd" d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter id="f" x="-1.6" y="3.9" width="27.2" height="16.9" filterUnits="userSpaceOnUse">
+${filterStyle}
+</filter>
+</defs>
+</svg>
+`
+
+export const rotateSVG = `
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#f)">
+<g transform="rotate(135,12,12),rotate({{rotation}},12,12)">
+<path d="M20.4 8H21.4L20.8 7.1L17.3 2.6L17 2.1L16.6 2.6L13.1 7.1L12.5 8H13.5H15.4C14.9 11.8 11.8 14.9 8 15.4V13.5V12.5L7.1 13.1L2.6 16.6L2.1 17L2.6 17.3L7.1 20.8L8 21.4V20.4V18.4C13.5 17.9 17.9 13.5 18.4 8H20.4Z" stroke="white"/>
+<path fill-rule="evenodd" d="M17 3L20.4 7.5H17.9C17.7 13.1 13.1 17.7 7.5 17.9V20.4L3 17L7.5 13.5V15.9C12.0 15.7 15.7 12.0 15.9 7.5H13.5L17 3Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter id="f" x="-1.6" y="-0.6" width="27.1" height="27.1" filterUnits="userSpaceOnUse">
+${filterStyle}
+</filter>
+</defs>
+</svg>
+`
+
+export const skewSVG = `
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#f)">
+<g transform="rotate(90,12,12),rotate({{rotation}},12,12)">
+<path d="M21 10.4L21 11.4L23.8 11.4L21.6 9.6L21 10.4ZM17 10.4V11.4L17 11.4L17 10.4ZM15.5 6L16.1 5.2L14.5 3.9V6H15.5ZM15.5 8.4V9.4H16.5V8.4H15.5ZM6 8.4V7.4H5V8.4H6ZM6 10.4H5V11.4H6V10.4ZM7 14.4V13.4L7 13.4L7 14.4ZM3 14.4L3 13.4L0.1 13.4L2.3 15.2L3 14.4ZM8.5 18.9L7.8 19.7L9.5 21.0V18.9H8.5ZM8.5 16.4V15.4H7.5V16.4H8.5ZM19 16.4V17.4H20V16.4H19ZM19 14.4H20V13.4H19V14.4ZM21 9.4L17 9.4L17 11.4L21 11.4L21 9.4ZM14.8 6.7L20.3 11.2L21.6 9.6L16.1 5.2L14.8 6.7ZM16.5 8.4V6H14.5V8.4H16.5ZM6 9.4H15.5V7.4H6V9.4ZM7 10.4V8.4H5V10.4H7ZM15.5 9.4H6V11.4H15.5V9.4ZM17 9.4H15.5V11.4H17V9.4ZM7 15.4H8.5V13.4H7V15.4ZM3 15.4L7 15.4L7 13.4L3 13.4L3 15.4ZM9.1 18.1L3.6 13.6L2.3 15.2L7.8 19.7L9.1 18.1ZM7.5 16.4V18.9H9.5V16.4H7.5ZM19 15.4H8.5V17.4H19V15.4ZM18 14.4V16.4H20V14.4H18ZM8.5 15.4H19V13.4H8.5V15.4Z" fill="white"/>
+<path fill-rule="evenodd" d="M17 10.4L21 10.4L15.5 6V8.4H6V10.4H15.5H17ZM8.5 14.4H7L3 14.4L8.5 18.9V16.4H19V14.4H8.5Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter x="-2.8" y="1.9" width="29.6" height="23.1" filterUnits="userSpaceOnUse" >
+${filterStyle}
+</filter>
+</defs>
+</svg>
+`

package/src/tool/EditTool.ts

@@ -0,0 +1,78 @@
+import { IEditor, IEditorScaleEvent, IEditorRotateEvent, IEditTool, IEditorSkewEvent, IEditorMoveEvent } from '@leafer-in/interface'
+import { LeafHelper } from '@leafer-ui/core'
+
+
+const { transformWorld, zoomOfWorld, skewOfWorld, rotateOfWorld, moveWorld } = LeafHelper
+
+export class EditTool implements IEditTool {
+
+    static list: IEditTool[] = []
+
+    public tag = 'EditTool'
+
+    onMove(e: IEditorMoveEvent): void {
+        const { moveX, moveY, editor } = e
+        const { app, list } = editor
+        app.lockLayout()
+        list.forEach(target => {
+            moveWorld(target, moveX, moveY)
+        })
+        app.unlockLayout()
+    }
+
+    onScale(e: IEditorScaleEvent): void {
+        const { scaleX, scaleY, transform, worldOrigin, editor } = e
+        const { app, list } = editor
+        app.lockLayout()
+        list.forEach(target => {
+            const resize = editor.getEditSize(target) === 'size'
+            if (transform) {
+                transformWorld(target, transform, resize)
+            } else {
+                zoomOfWorld(target, worldOrigin, scaleX, scaleY, resize)
+            }
+        })
+        app.unlockLayout()
+    }
+
+    onRotate(e: IEditorRotateEvent): void {
+        const { rotation, transform, worldOrigin, editor } = e
+        const { app, list } = editor
+        app.lockLayout()
+        list.forEach(target => {
+            const resize = editor.getEditSize(target) === 'size'
+            if (transform) {
+                transformWorld(target, transform, resize)
+            } else {
+                rotateOfWorld(target, worldOrigin, rotation)
+            }
+        })
+        app.unlockLayout()
+    }
+
+    onSkew(e: IEditorSkewEvent): void {
+        const { skewX, skewY, transform, worldOrigin, editor } = e
+        const { app, list } = editor
+        app.lockLayout()
+        list.forEach(target => {
+            const resize = editor.getEditSize(target) === 'size'
+            if (transform) {
+                transformWorld(target, transform, resize)
+            } else {
+                skewOfWorld(target, worldOrigin, skewX, skewY, resize)
+            }
+        })
+        app.unlockLayout()
+    }
+
+    update(editor: IEditor) {
+        const { simulateTarget, element } = editor
+
+        if (editor.multiple) simulateTarget.parent.updateLayout()
+
+        const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = element.getLayoutBounds('box', editor, true)
+        editor.editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY })
+        editor.editBox.update({ x: 0, y: 0, width, height })
+    }
+
+}