@leafer-in/editor 1.0.0-beta.15

package/src/Editor.ts

@@ -0,0 +1,232 @@
+import { IGroupInputData, IPolygon, IUI, IEventListenerId } from '@leafer-ui/interface'
+import { IEditor, IEditorConfig, IEditorTool, IDirection8 } from '@leafer-in/interface'
+
+import { Group, Rect, Polygon, DragEvent, PointHelper, PointerEvent, KeyEvent, RotateEvent, DataHelper, MathHelper, RenderEvent } from '@leafer-ui/core'
+
+import { getResizeData } from './resize'
+import { updateCursor } from './cursor'
+
+import { LineTool } from './tool/LineTool'
+import { RectTool } from './tool/RectTool'
+
+import { EditorResizeEvent } from './event/EditorResizeEvent'
+import { EditorRotateEvent } from './event/EditorRotateEvent'
+
+
+export class Editor extends Group implements IEditor {
+
+    public config: IEditorConfig = {
+        type: 'pc',
+        stroke: '#836DFF',
+        pointFill: '#FFFFFF',
+        pointSize: 10,
+        pointRadius: 10,
+        rotateGap: 90,
+        hideOnMove: false,
+        moveCursor: 'move',
+        resizeType: 'auto',
+        resizeCursor: ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'],
+        rotateCursor: ['ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize', 'n-resize'],
+        resizeable: true,
+        rotateable: true
+    }
+
+    public resizePoints: IUI[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
+    public rotatePoints: IUI[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
+    public resizeLines: IUI[] = [] // top, right, bottom, left
+
+    public targetRect: IUI = new Rect({ hitFill: 'all', hitRadius: 5 })
+    public rect: IPolygon = new Polygon({ hittable: false, strokeAlign: 'center' })
+    public circle: IUI = new Rect({ around: 'center', hitRadius: 10 }) // rotate point
+
+    public tool: IEditorTool
+
+    private _target: IUI
+    public get target(): IUI { return this._target }
+    public set target(value: IUI) {
+        this.__removeTargetEvents()
+        this.visible = !!value
+
+        this._target = value
+        if (value) this.onTarget()
+    }
+
+    public enterPoint: IUI
+
+    protected __eventIds: IEventListenerId[] = []
+    protected __targetEventIds: IEventListenerId[] = []
+
+    constructor(userConfig?: IEditorConfig, data?: IGroupInputData) {
+        super(data)
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config)
+        this.init()
+    }
+
+    protected init() {
+        let rotatePoint: IUI, resizeLine: IUI, resizePoint: IUI
+        const { resizePoints, rotatePoints, resizeLines } = this
+
+        for (let i = 0; i < 8; i++) {
+            rotatePoint = new Rect({ around: 'center', width: 30, height: 30, hitRadius: 10, hitFill: "all" })
+            rotatePoints.push(rotatePoint)
+            this.__listenPointEvents(rotatePoint, 'rotate', i)
+
+            if (i % 2) {
+                resizeLine = new Rect({ around: 'center', width: 10, height: 10, hitFill: "all" })
+                resizeLines.push(resizeLine)
+                this.__listenPointEvents(resizeLine, 'resize', i)
+            }
+
+            resizePoint = new Rect({ around: 'center', hitRadius: 5 })
+            resizePoints.push(resizePoint)
+            this.__listenPointEvents(resizePoint, 'resize', i)
+        }
+
+        this.__listenPointEvents(this.circle, 'rotate', 1)
+        this.addMany(...rotatePoints, this.targetRect, this.rect, this.circle, ...resizeLines, ...resizePoints)
+
+        this.__listenEvents()
+    }
+
+
+    protected onTarget(): void {
+        this.tool = this.getTool(this.target)
+        this.waitLeafer(() => {
+            this.update()
+            this.updateMoveCursor()
+            this.__listenTargetEvents()
+        })
+    }
+
+    public getTool(value: IUI): IEditorTool {
+        return (value.tag === 'Line' && value.resizeable) ? LineTool : RectTool
+    }
+
+    public update(): void {
+        if (!this.target) return
+        this.tool.update(this)
+    }
+
+
+    protected onDrag(e: DragEvent): void {
+        const { resizeable, rotateable } = this.config
+        if (e.metaKey || e.ctrlKey || !resizeable) {
+            if (rotateable) this.onRotate(e)
+        } else {
+            this.onResize(e)
+        }
+    }
+
+    protected onMove(e: DragEvent): void {
+        const { target } = this
+        const { x, y } = e.getLocalMove(target)
+        if (e.shiftKey) {
+            if (Math.abs(x) > Math.abs(y)) {
+                target.x += x
+            } else {
+                target.y += y
+            }
+        } else {
+            target.x += x
+            target.y += y
+        }
+    }
+
+    protected onRotate(e: DragEvent | RotateEvent): void {
+        const { target } = this
+        const { rotateGap } = this.config
+        const { x, y, width, height } = target.boxBounds
+        const origin = { x: x + width / 2, y: y + height / 2 }
+
+        let rotation: number
+
+        if (e instanceof RotateEvent) {
+            rotation = e.rotation
+        } else {
+            const point = e
+            const last = { x: point.x - e.moveX, y: point.y - e.moveY }
+            rotation = PointHelper.getChangeAngle(last, target.getWorldPoint(origin), point)
+        }
+
+        rotation = MathHelper.getGapRotation(target.rotation + rotation, rotateGap) - target.rotation
+
+        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { editor: this, target, origin, rotation })
+
+        this.tool.rotate(event)
+        target.emitEvent(event)
+    }
+
+    public onResize(e: DragEvent): void {
+        const { target } = this
+        const { __direction } = e.current.__
+
+        let { resizeType, around, lockRatio } = this.config
+
+        if (e.shiftKey) lockRatio = true
+        if (e.altKey && !around) around = 'center'
+
+        if (resizeType === 'auto') resizeType = target.resizeable ? 'size' : 'scale'
+        const data = getResizeData(target.boxBounds, __direction, e.getInnerMove(this.targetRect), lockRatio, around)
+
+        const event = new EditorResizeEvent(EditorResizeEvent.RESIZE, { ...data, target, editor: this, dragEvent: e, resizeType })
+
+        this.tool.resize(event)
+        target.emitEvent(event)
+    }
+
+
+    public updateMoveCursor(): void {
+        this.targetRect.cursor = this.config.moveCursor
+    }
+
+
+    protected __listenEvents(): void {
+        this.__eventIds = [
+            this.targetRect.on_(DragEvent.START, () => { this.opacity = this.config.hideOnMove ? 0 : 1 }),
+            this.targetRect.on_(DragEvent.DRAG, this.onMove, this),
+            this.targetRect.on_(DragEvent.END, () => { this.opacity = 1 }),
+            this.targetRect.on_(PointerEvent.ENTER, this.updateMoveCursor, this)
+        ]
+    }
+
+    protected __removeListenEvents(): void {
+        this.targetRect.off_(this.__eventIds)
+        this.__eventIds.length = 0
+    }
+
+
+    protected __listenPointEvents(point: IUI, type: 'rotate' | 'resize', direction: IDirection8): void {
+        point.__.__direction = direction
+        const resize = point.__.__isResizePoint = type === 'resize'
+        point.on_(DragEvent.DRAG, resize ? this.onDrag : this.onRotate, this) // i % 2 ? this.onSkew : 
+        point.on_(PointerEvent.LEAVE, () => this.enterPoint = null)
+        point.on_(PointerEvent.ENTER, (e) => { this.enterPoint = point; updateCursor(this, e) })
+    }
+
+
+    protected __listenTargetEvents(): void {
+        if (this.target) {
+            const { leafer } = this.target
+            this.__targetEventIds = [
+                leafer.on_(RenderEvent.START, this.update, this),
+                leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e) })
+            ]
+        }
+    }
+
+    protected __removeTargetEvents(): void {
+        if (this.__targetEventIds.length) {
+            const { leafer } = this.target
+            if (leafer) leafer.off_(this.__targetEventIds)
+            this.__targetEventIds.length = 0
+        }
+    }
+
+
+    public destroy(): void {
+        this.__removeListenEvents()
+        this._target = null
+        super.destroy()
+    }
+
+}

package/src/cursor.ts

@@ -0,0 +1,57 @@
+import { ICursorType, IUIEvent } from '@leafer-ui/interface'
+import { IDirection8, IEditor } from '@leafer-in/interface'
+
+
+const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
+
+export function updateCursor(editor: IEditor, e: IUIEvent): void {
+
+    const point = editor.enterPoint
+    if (!point || !editor.target || !editor.visible) return
+
+    let { rotation } = editor
+    let { resizeCursor, rotateCursor, resizeable } = editor.config
+    const mirror = editor.tool.getMirrorData(editor)
+    const { __direction, __isResizePoint } = point.__
+
+    editor.enterPoint = point
+
+    if (__isResizePoint && (e.metaKey || e.ctrlKey || !resizeable)) resizeCursor = rotateCursor
+
+    if (mirror.x || mirror.y) {
+        mirrorCursors(resizeCursor = [...resizeCursor], mirror.x, mirror.y)
+        mirrorCursors(rotateCursor = [...rotateCursor], mirror.y, mirror.x)
+        if (mirror.x + mirror.y === 1) rotation = -rotation
+    }
+
+    let index = (__direction + Math.round(rotation / 45)) % 8
+    if (index < 0) index += 8
+
+    point.cursor = __isResizePoint ? resizeCursor[index] : rotateCursor[index]
+
+}
+
+
+export function mirrorCursors(mirror: ICursorType[], mirrorX: number, mirrorY: number): void {
+
+    if (mirrorX) {
+        const topCursor = mirror[top], topLeftCursor = mirror[topLeft], topRightCursor = mirror[topRight]
+        mirror[top] = mirror[bottom]
+        mirror[topLeft] = mirror[bottomLeft]
+        mirror[topRight] = mirror[bottomRight]
+        mirror[bottom] = topCursor
+        mirror[bottomLeft] = topLeftCursor
+        mirror[bottomRight] = topRightCursor
+    }
+
+    if (mirrorY) {
+        const leftCursor = mirror[left], topLeftCursor = mirror[topLeft], bottomLeftCursor = mirror[bottomLeft]
+        mirror[left] = mirror[right]
+        mirror[topLeft] = mirror[topRight]
+        mirror[bottomLeft] = mirror[bottomRight]
+        mirror[right] = leftCursor
+        mirror[topRight] = topLeftCursor
+        mirror[bottomRight] = bottomLeftCursor
+    }
+
+}

package/src/event/EditorResizeEvent.ts

@@ -0,0 +1,34 @@
+import { IUI, IResizeType, IBoundsData, IPointData, IAround, IDragEvent } from '@leafer-ui/interface'
+import { IEditor, IDirection8, IEditorResizeEvent } from '@leafer-in/interface'
+
+import { Event } from '@leafer-ui/core'
+
+export class EditorResizeEvent extends Event implements IEditorResizeEvent {
+
+    static RESIZE = 'editor.resize'
+
+    declare readonly target: IUI
+    readonly editor: IEditor
+
+    readonly resizeType: IResizeType
+    readonly lockRatio: boolean
+    readonly around: IAround
+
+    readonly dragEvent: IDragEvent
+    readonly direction: IDirection8
+
+    // from old to bounds
+    readonly bounds: IBoundsData
+    readonly old: IBoundsData
+
+    // scaleOf(origin, scaleX, scaleY)
+    readonly origin: IPointData
+    readonly scaleX: number
+    readonly scaleY: number
+
+    constructor(type: string, data?: IEditorResizeEvent) {
+        super(type)
+        if (data) Object.assign(this, data)
+    }
+
+}

package/src/event/EditorRotateEvent.ts

@@ -0,0 +1,23 @@
+import { IUI, IPointData } from '@leafer-ui/interface'
+import { IEditor, IEditorRotateEvent } from '@leafer-in/interface'
+
+import { Event } from '@leafer-ui/core'
+
+
+export class EditorRotateEvent extends Event 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)
+    }
+
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { Editor } from './Editor'
+export { EditorResizeEvent } from './event/EditorResizeEvent'
+export { EditorRotateEvent } from './event/EditorRotateEvent'
+export { LineTool } from './tool/LineTool'
+export { RectTool } from './tool/RectTool'

package/src/resize.ts

@@ -0,0 +1,87 @@
+import { IBoundsData, IPointData, IMatrixData, IAround } from '@leafer-ui/interface'
+import { IEditorResizeEvent, IDirection8 } from '@leafer-in/interface'
+
+import { MatrixHelper } from '@leafer-ui/core'
+
+
+const { scaleOfOuter, reset } = MatrixHelper
+const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
+const matrix = {} as IMatrixData
+
+export function getResizeData(old: IBoundsData, direction: IDirection8, move: IPointData, lockRatio: boolean, around: IAround): IEditorResizeEvent {
+
+    if (around) {
+        move.x *= 2
+        move.y *= 2
+    }
+
+    let origin: IPointData, scaleX: number = 1, scaleY: number = 1
+    const { x, y, width, height } = old
+
+    const topScale = (-move.y + height) / height
+    const rightScale = (move.x + width) / width
+    const bottomScale = (move.y + height) / height
+    const leftScale = (-move.x + width) / width
+
+    switch (direction) {
+        case top:
+            scaleY = topScale
+            if (lockRatio) scaleX = scaleY
+            origin = { x: x + width / 2, y: y + height }
+            break
+        case right:
+            scaleX = rightScale
+            if (lockRatio) scaleY = scaleX
+            origin = { x, y: y + height / 2 }
+            break
+        case bottom:
+            scaleY = bottomScale
+            if (lockRatio) scaleX = scaleY
+            origin = { x: x + width / 2, y }
+            break
+        case left:
+            scaleX = leftScale
+            if (lockRatio) scaleY = scaleX
+            origin = { x: x + width, y: y + height / 2 }
+            break
+        case topLeft:
+            scaleY = topScale
+            scaleX = leftScale
+            if (lockRatio) scaleX = scaleY
+            origin = { x: x + width, y: y + height }
+            break
+        case topRight:
+            scaleY = topScale
+            scaleX = rightScale
+            if (lockRatio) scaleX = scaleY
+            origin = { x, y: y + height }
+            break
+        case bottomRight:
+            scaleY = bottomScale
+            scaleX = rightScale
+            if (lockRatio) scaleX = scaleY
+            origin = { x, y }
+            break
+        case bottomLeft:
+            scaleY = bottomScale
+            scaleX = leftScale
+            if (lockRatio) scaleX = scaleY
+            origin = { x: x + width, y }
+            break
+    }
+
+    if (around) {
+        if (typeof around === 'object') {
+            origin = { x: x + width / around.x, y: y + height / around.y }
+        } else {
+            origin = { x: x + width / 2, y: y + height / 2 }
+        }
+    }
+
+    reset(matrix)
+    scaleOfOuter(matrix, origin, scaleX, scaleY)
+    const bounds = { x: old.x + matrix.e, y: old.y + matrix.f, width: width * scaleX, height: height * scaleY }
+    return { bounds, old, origin, scaleX, scaleY, direction, lockRatio, around, }
+
+}
+

package/src/tool/LineTool.ts

@@ -0,0 +1,88 @@
+import { IDirection8, IEditor, IEditorTool, IEditorResizeEvent, IEditorRotateEvent, ILine, IPointData } from '@leafer-in/interface'
+
+import { RectTool } from './RectTool'
+
+
+const { left, right } = IDirection8
+
+export const LineTool: IEditorTool = {
+
+    name: 'LineTool',
+
+    getMirrorData(_editor: IEditor): IPointData {
+        return {
+            x: 0,
+            y: 0
+        }
+    },
+
+    resize(e: IEditorResizeEvent): void {
+        const { direction, dragEvent, lockRatio, around } = e
+        const target = e.target as ILine
+
+        const fromPoint = { x: 0, y: 0 }
+        const { toPoint } = target
+
+        target.rotation = 0
+
+        let { x, y } = dragEvent.getInnerMove(target)
+
+        if (lockRatio) {
+            if (Math.abs(x) > Math.abs(y)) {
+                y = 0
+            } else {
+                x = 0
+            }
+        }
+
+        if (direction === left) {
+
+            fromPoint.x += x
+            fromPoint.y += y
+
+            if (around) {
+                toPoint.x -= x
+                toPoint.y -= y
+            }
+
+        } else {
+
+            if (around) {
+                fromPoint.x -= x
+                fromPoint.y -= y
+            }
+
+            toPoint.x += x
+            toPoint.y += y
+
+        }
+
+        target.getLocalPointByInner(fromPoint, null, null, true)
+        target.getLocalPointByInner(toPoint, null, null, true)
+        target.x = fromPoint.x
+        target.y = fromPoint.y
+
+        target.getInnerPointByLocal(toPoint, null, null, true)
+        target.toPoint = toPoint
+
+    },
+
+    rotate(e: IEditorRotateEvent): void {
+        RectTool.rotate(e)
+    },
+
+    update(editor: IEditor) {
+
+        const { rotatePoints, circle, resizeLines, resizePoints } = editor
+        RectTool.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
+        }
+
+        circle.visible = false
+
+    }
+
+}

package/src/tool/RectTool.ts

@@ -0,0 +1,139 @@
+import { IUI, IUIInputData, IPointData } from '@leafer-ui/interface'
+import { IEditor, IEditorResizeEvent, IEditorRotateEvent, IEditorTool } from '@leafer-in/interface'
+
+import { Bounds, Matrix } from '@leafer-ui/core'
+
+
+export const RectTool: IEditorTool = {
+
+    name: 'RectTool',
+
+    getMirrorData(editor: IEditor): IPointData {
+        const { scaleX, scaleY } = editor.target
+        return {
+            x: scaleX < 0 ? 1 : 0, // 1 = mirrorX
+            y: scaleY < 0 ? 1 : 0
+        }
+    },
+
+    resize(e: IEditorResizeEvent): void {
+        const { target, bounds, resizeType, old } = e
+        const { x, y, width, height } = bounds
+        const point = { x: x - old.x, y: y - old.y }
+
+        target.innerToWorld(point, null, true, target.parent)
+        target.x += point.x
+        target.y += point.y
+
+        if (resizeType === 'scale') {
+            target.scaleX *= width / old.width
+            target.scaleY *= height / old.height
+        } else {
+            if (width < 0) {
+                target.width = -width
+                target.scaleX *= -1
+            } else {
+                if (target.width !== width) target.width = width
+            }
+
+            if (height < 0) {
+                target.height = -height
+                target.scaleY *= -1
+            } else {
+                if (target.height !== height) target.height = height // Text auto height
+            }
+
+
+        }
+    },
+
+    rotate(e: IEditorRotateEvent): void {
+        const { target, rotation, origin } = e
+        target.rotateOf(origin, rotation)
+    },
+
+    update(editor: IEditor) {
+        const { target, config, rotatePoints, targetRect, rect, circle, resizeLines, resizePoints } = editor
+        const { type, resizeable, rotateable, stroke, pointFill, pointSize, pointRadius } = config
+
+        const defaultStyle = { fill: pointFill, stroke, width: pointSize, height: pointSize, cornerRadius: pointRadius }
+        const pointStyles = config.point instanceof Array ? config.point : [config.point || defaultStyle]
+
+        const box = new Bounds(target.boxBounds)
+        const w = target.worldTransform, pw = editor.parent.worldTransform
+
+        const matrix = new Matrix(w)
+        matrix.divide(pw)
+        const worldX = matrix.e, worldY = matrix.f
+
+
+        let { scaleX, scaleY, rotation, skewX, skewY } = w
+        scaleX /= pw.scaleX, scaleY /= pw.scaleY, rotation -= pw.rotation, skewX -= pw.skewX, skewY -= pw.skewY
+
+        const { x, y, width, height } = box.scale(scaleX, scaleY) // maybe width / height < 0
+
+        editor.set({ x: worldX, y: worldY, rotation, skewX, skewY })
+        targetRect.set({ x, y, width: box.width / scaleX, height: box.height / scaleY, scaleX, scaleY, visible: true })
+
+
+        const points: IPointData[] = [ // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
+            { x, y },
+            { x: x + width / 2, y },
+            { x: x + width, y },
+            { x: x + width, y: y + height / 2 },
+            { x: x + width, y: y + height },
+            { x: x + width / 2, y: y + height },
+            { x, y: y + height },
+            { x, y: y + height / 2 }
+        ]
+
+        const rectPoints: number[] = []
+        let point: IPointData, style: IUIInputData, rotateP: IUI, resizeP: IUI, resizeL: IUI
+
+        for (let i = 0; i < 8; i++) {
+            point = points[i]
+            style = pointStyles[i % pointStyles.length]
+
+            resizeP = resizePoints[i]
+            resizeL = resizeLines[Math.floor(i / 2)]
+            rotateP = rotatePoints[i]
+
+            resizeP.set(style)
+            resizeP.x = rotateP.x = resizeL.x = point.x
+            resizeP.y = rotateP.y = resizeL.y = point.y
+
+            resizeP.visible = resizeL.visible = resizeable || rotateable
+            rotateP.visible = rotateable && resizeable
+
+            if (i % 2) { // top,  right, bottom, left
+                if (((i + 1) / 2) % 2) { // top, bottom
+                    resizeL.width = Math.abs(width)
+                    rotateP.width = Math.max(10, Math.abs(width) - 30) // skew
+                } else {
+                    resizeL.height = Math.abs(height)
+                    rotateP.height = Math.max(10, Math.abs(height) - 30) // skew
+                }
+
+                resizeP.rotation = 90
+                resizeP.visible = type === 'mobile'
+
+            } else {
+                rectPoints.push(point.x, point.y)
+            }
+        }
+
+
+
+        style = config.rotatePoint || style
+
+        circle.set(style)
+        circle.x = x + width / 2
+        if (!style.y) circle.y = y - (10 + (resizeP.height + circle.height) / 2) * (this.getMirrorData(editor).y ? -1 : 1)
+        circle.visible = rotateable && type === 'mobile'
+
+        rect.set(config.rect || { stroke })
+        rect.points = rectPoints
+        rect.visible = true
+    }
+
+}