@leafer-in/editor 1.0.0-rc.6 → 1.0.0-rc.7

package/src/editor/simulate.ts

@@ -0,0 +1,14 @@
+import { IGroup, ILeaf } from '@leafer-ui/interface'
+import { Bounds } from '@leafer-ui/core'
+
+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
+    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,38 @@
+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): 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 }))
+
+    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): void {
+    editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor }))
+
+}

package/src/event/EditorEvent.ts

@@ -0,0 +1,23 @@
+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 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)
-    declare 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,149 @@
+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
+        }
+
+        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) ? AroundHelper.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
+    }
+
+}

package/src/helper/EditSelectHelper.ts

@@ -0,0 +1,33 @@
+import { AnswerType, IBounds, ILeafList, IUI } from '@leafer-ui/interface'
+
+const { No, Yes, NoAndSkip, YesAndSkip } = AnswerType
+
+export const EditSelectHelper = {
+
+    findOne(path: ILeafList): IUI {
+        return path.list.find((leaf) => leaf.editable) as IUI
+    },
+
+    findBounds(leaf: IUI, bounds: IBounds): AnswerType {
+        if (leaf.__.hittable && !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,95 @@
+import { IGroup, 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, group?: IGroup): IGroup {
+        list.sort(reverseOrder)
+        const { app, parent } = list[0]
+        if (!group) group = new Group()
+        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 => {
+            let zIndex
+            const { parent } = leaf
+            if (parent) {
+                const { children } = parent
+                const top = children.length - 1
+                const zIndexOfTop = children[top].__.zIndex
+                const current = children.indexOf(leaf)
+                if (current !== top) {
+                    children.splice(current, 1)
+                    children.push(leaf)
+                    zIndex = zIndexOfTop + 1
+                } else {
+                    zIndex = zIndexOfTop
+                }
+                leaf.zIndex = zIndex
+            }
+        })
+    },
+
+    toBottom(list: IUI[]): void {
+        list.sort(reverseOrder)
+        list.forEach(leaf => {
+            let zIndex
+            const { parent } = leaf
+            if (parent) {
+                const { children } = parent
+                const zIndexOfBottom = children[0].__.zIndex
+                const current = children.indexOf(leaf)
+                if (current !== 0) {
+                    children.splice(current, 1)
+                    children.unshift(leaf)
+                    zIndex = zIndexOfBottom - 1
+                } else {
+                    zIndex = zIndexOfBottom
+                }
+                leaf.zIndex = zIndex
+            }
+        })
+    }
+
+}

package/src/index.ts

@@ -1,5 +1,28 @@
 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/tool/EditTool.ts

@@ -0,0 +1,70 @@
+import { IEditor, IEditorScaleEvent, IEditorRotateEvent, IEditTool, IEditorSkewEvent, IEditorMoveEvent } from '@leafer-in/interface'
+
+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 => {
+            const move = target.getLocalPoint({ x: moveX, y: moveY }, null, true)
+            target.move(move.x, move.y)
+        })
+        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) {
+                target.transform(transform, resize)
+            } else {
+                target.scaleOf(target.getInnerPoint(worldOrigin), scaleX, scaleY, resize)
+            }
+        })
+        app.unlockLayout()
+    }
+
+    onRotate(e: IEditorRotateEvent): void {
+        const { rotation, worldOrigin, editor } = e
+        const { app, list } = editor
+        app.lockLayout()
+        list.forEach(target => {
+            target.rotateOf(target.getInnerPoint(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) {
+                target.transform(transform, resize)
+            } else {
+                target.skewOf(target.getInnerPoint(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 })
+    }
+
+}

package/src/tool/{LineTool.ts → LineEditTool.ts}

@@ -1,23 +1,18 @@
-import { IDirection8, IEditor, IEditorTool, IEditorResizeEvent, IEditorRotateEvent, ILine, IPointData } from '@leafer-in/interface'
+import { IDirection8, IEditor, IEditorScaleEvent, ILine, IEditorSkewEvent } from '@leafer-in/interface'
 
-import { RectTool } from './RectTool'
+import { EditTool } from './EditTool'
 
 
 const { left, right } = IDirection8
 
-export const LineTool: IEditorTool = {
+export class LineEditTool extends EditTool {
 
-    name: 'LineTool',
+    public tag = 'LineEditTool'
 
-    getMirrorData(_editor: IEditor): IPointData {
-        return {
-            x: 0,
-            y: 0
-        }
-    },
+    public scaleOfEvent = true
 
-    resize(e: IEditorResizeEvent): void {
-        const { direction, dragEvent, lockRatio, around } = e
+    onScaleWithDrag(e: IEditorScaleEvent): void {
+        const { drag, direction, lockRatio, around } = e
         const target = e.target as ILine
 
         const fromPoint = { x: 0, y: 0 }
@@ -25,7 +20,7 @@ export const LineTool: IEditorTool = {
 
         target.rotation = 0
 
-        let { x, y } = dragEvent.getInnerMove(target)
+        let { x, y } = drag.getInnerMove(target)
 
         if (lockRatio) {
             if (Math.abs(x) > Math.abs(y)) {
@@ -65,24 +60,20 @@ export const LineTool: IEditorTool = {
         target.getInnerPointByLocal(toPoint, null, null, true)
         target.toPoint = toPoint
 
-    },
+    }
 
-    rotate(e: IEditorRotateEvent): void {
-        RectTool.rotate(e)
-    },
+    onSkew(_e: IEditorSkewEvent): void {
 
-    update(editor: IEditor) {
+    }
 
-        const { rotatePoints, circle, resizeLines, resizePoints } = editor
-        RectTool.update(editor)
+    update(editor: IEditor) {
+        const { rotatePoints, resizeLines, resizePoints } = editor.editBox
+        super.update(editor)
 
         for (let i = 0; i < 8; i++) {
             if (i < 4) resizeLines[i].visible = false
-            resizePoints[i].visible = rotatePoints[i].visible = i === left || i === right
+            resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right)
         }
-
-        circle.visible = false
-
     }
 
 }

package/src/tool/index.ts

@@ -0,0 +1,21 @@
+import { IUI } from '@leafer-ui/interface'
+import { Line } from '@leafer-ui/core'
+
+import { IEditTool } from '@leafer-in/interface'
+
+import { EditTool } from './EditTool'
+import { LineEditTool } from './LineEditTool'
+
+
+export function getEditTool(list: IUI[]): IEditTool {
+    if (list.length === 1) {
+        const leaf = list[0]
+        if (leaf instanceof Line && !leaf.points) {
+            return new LineEditTool()
+        } else {
+            return new EditTool()
+        }
+    } else {
+        return new EditTool()
+    }
+}