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

package/types/index.d.ts

@@ -1,68 +1,218 @@
-import { IUI, IPolygon, IEventListenerId, IGroupInputData, IResizeType, IAround, IDragEvent, IBoundsData, IPointData } from '@leafer-ui/interface';
-import { IEditor, IEditorConfig, IEditorTool, IDirection8, IEditorResizeEvent, IEditorRotateEvent } from '@leafer-in/interface';
-import { Group, DragEvent, RotateEvent, Event } from '@leafer-ui/core';
+import * as _leafer_ui_interface from '@leafer-ui/interface';
+import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IGroupInputData, IEditSize, IPointData, IBox, IGroup, IBoundsData, IRectInputData, IKeyEvent, IRect, ILeaferCanvas, IRenderOptions, IMatrixData, IDragEvent, IAround, AnswerType } from '@leafer-ui/interface';
+import { Group, PointerEvent, DragEvent, MoveEvent, RotateEvent, Box, UI, Event } from '@leafer-ui/core';
+import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IEditorScaleEvent, IEditPoint, IEditPointType, IDirection8, IEditorEvent, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface';
+
+declare class EditSelect extends Group implements IEditSelect {
+    editor: IEditor;
+    get dragging(): boolean;
+    get running(): boolean;
+    get isMoveMode(): boolean;
+    hoverStroker: IStroker;
+    targetStroker: IStroker;
+    bounds: IBounds;
+    selectArea: ISelectArea;
+    protected originList: ILeafList;
+    protected lastDownLeaf: IUI;
+    protected __eventIds: IEventListenerId[];
+    constructor(editor: IEditor);
+    protected onHover(): void;
+    protected onSelect(): void;
+    update(): void;
+    protected onPointerMove(e: PointerEvent): void;
+    protected onBeforeDown(e: PointerEvent): void;
+    protected onTap(e: PointerEvent): void;
+    protected onDragStart(e: DragEvent): void;
+    protected onDrag(e: DragEvent): void;
+    protected onDragEnd(): void;
+    protected onAutoMove(e: MoveEvent): void;
+    protected allow(target: ILeaf): boolean;
+    protected allowDrag(e: DragEvent): boolean;
+    protected findDeepOne(e: PointerEvent): IUI;
+    protected __listenEvents(): void;
+    protected __removeListenEvents(): void;
+    destroy(): void;
+}
 
 declare class Editor extends Group implements IEditor {
     config: IEditorConfig;
-    resizePoints: IUI[];
-    rotatePoints: IUI[];
-    resizeLines: IUI[];
-    targetRect: IUI;
-    rect: IPolygon;
-    circle: IUI;
-    tool: IEditorTool;
-    private _target;
-    get target(): IUI;
-    set target(value: IUI);
-    enterPoint: IUI;
-    protected __eventIds: IEventListenerId[];
-    protected __targetEventIds: IEventListenerId[];
+    hoverTarget: IUI;
+    target: IUI | IUI[] | ILeafList;
+    leafList: ILeafList;
+    get list(): IUI[];
+    get hasTarget(): boolean;
+    get multiple(): boolean;
+    get single(): boolean;
+    get element(): IUI;
+    simulateTarget: IUI;
+    editBox: IEditBox;
+    get buttons(): _leafer_ui_interface.IGroup;
+    editTool: IEditTool;
+    selector: EditSelect;
+    get dragging(): boolean;
+    targetEventIds: IEventListenerId[];
     constructor(userConfig?: IEditorConfig, data?: IGroupInputData);
-    protected init(): void;
-    protected onTarget(): void;
-    getTool(value: IUI): IEditorTool;
+    hasItem(item: IUI): boolean;
+    addItem(item: IUI): void;
+    removeItem(item: IUI): void;
+    shiftItem(item: IUI): void;
     update(): void;
+    updateEditTool(): void;
+    getEditSize(ui: IUI): IEditSize;
+    onMove(e: DragEvent): void;
+    onScale(e: DragEvent): void;
+    onRotate(e: DragEvent | RotateEvent): void;
+    onSkew(e: DragEvent): void;
+    move(x: number, y: number): void;
+    scaleWithDrag(data: IEditorScaleEvent): void;
+    scaleOf(origin: IPointData, scaleX: number, scaleY?: number, _resize?: boolean): void;
+    rotateOf(origin: IPointData, rotation: number): void;
+    skewOf(origin: IPointData, skewX: number, skewY?: number, _resize?: boolean): void;
+    group(): void;
+    ungroup(): void;
+    lock(): void;
+    unlock(): void;
+    toTop(): void;
+    toBottom(): void;
+    listenTargetEvents(): void;
+    removeTargetEvents(): void;
+    destroy(): void;
+}
+
+declare class EditBox extends Group implements IEditBox {
+    editor: IEditor;
+    dragging: boolean;
+    rect: IBox;
+    circle: IEditPoint;
+    buttons: IGroup;
+    resizePoints: IEditPoint[];
+    rotatePoints: IEditPoint[];
+    resizeLines: IEditPoint[];
+    get flipped(): boolean;
+    get flippedX(): boolean;
+    get flippedY(): boolean;
+    get flippedOne(): boolean;
+    enterPoint: IEditPoint;
+    protected __eventIds: IEventListenerId[];
+    constructor(editor: IEditor);
+    create(): void;
+    update(bounds: IBoundsData): void;
+    protected layoutButtons(): void;
+    getPointStyle(userStyle?: IRectInputData): IRectInputData;
+    getPointsStyle(): IRectInputData[];
+    getMiddlePointsStyle(): IRectInputData[];
+    getDirection8Points(bounds: IBoundsData): IPointData[];
+    protected onDragStart(e: DragEvent): void;
+    protected onDragEnd(e: DragEvent): void;
     protected onDrag(e: DragEvent): void;
-    protected onMove(e: DragEvent): void;
-    protected onRotate(e: DragEvent | RotateEvent): void;
-    onResize(e: DragEvent): void;
-    updateMoveCursor(): void;
+    onArrow(e: IKeyEvent): void;
+    protected onDoubleClick(): void;
+    listenPointEvents(point: IEditPoint, type: IEditPointType, direction: IDirection8): void;
     protected __listenEvents(): void;
     protected __removeListenEvents(): void;
-    protected __listenPointEvents(point: IUI, type: 'rotate' | 'resize', direction: IDirection8): void;
-    protected __listenTargetEvents(): void;
-    protected __removeTargetEvents(): void;
     destroy(): void;
 }
 
-declare class EditorResizeEvent extends Event implements IEditorResizeEvent {
-    static RESIZE: string;
+declare class EditPoint extends Box implements IEditPoint {
+    direction: IDirection8;
+    pointType: IEditPointType;
+}
+
+declare class SelectArea extends Group implements ISelectArea {
+    protected strokeArea: IRect;
+    protected fillArea: IRect;
+    constructor(data?: IGroupInputData);
+    setStyle(style: IRectInputData, userStyle?: IRectInputData): void;
+    setBounds(bounds: IBoundsData): void;
+}
+
+declare class Stroker extends UI implements IStroker {
+    target: IUI | IUI[];
+    list: IUI[];
+    constructor();
+    setTarget(target: IUI | IUI[], style: IRectInputData): void;
+    __draw(canvas: ILeaferCanvas, options: IRenderOptions): void;
+    destroy(): void;
+}
+
+declare class EditorEvent extends Event implements IEditorEvent {
+    static SELECT: string;
+    static HOVER: string;
     readonly target: IUI;
     readonly editor: IEditor;
-    readonly resizeType: IResizeType;
-    readonly lockRatio: boolean;
-    readonly around: IAround;
-    readonly dragEvent: IDragEvent;
-    readonly direction: IDirection8;
-    readonly bounds: IBoundsData;
-    readonly old: IBoundsData;
+    readonly worldOrigin: IPointData;
     readonly origin: IPointData;
+    constructor(type: string, data?: IEditorEvent);
+}
+
+declare class EditorMoveEvent extends EditorEvent implements IEditorMoveEvent {
+    static MOVE: string;
+    readonly moveX: number;
+    readonly moveY: number;
+    constructor(type: string, data?: IEditorMoveEvent);
+}
+
+declare class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent {
+    static SCALE: string;
     readonly scaleX: number;
     readonly scaleY: number;
-    constructor(type: string, data?: IEditorResizeEvent);
+    readonly transform?: IMatrixData;
+    readonly drag: IDragEvent;
+    readonly direction: IDirection8;
+    readonly lockRatio: boolean;
+    readonly around: IAround;
+    constructor(type: string, data?: IEditorScaleEvent);
 }
 
-declare class EditorRotateEvent extends Event implements IEditorRotateEvent {
+declare class EditorRotateEvent extends EditorEvent implements IEditorRotateEvent {
     static ROTATE: string;
-    readonly target: IUI;
-    readonly editor: IEditor;
-    readonly origin: IPointData;
     readonly rotation: number;
     constructor(type: string, data?: IEditorRotateEvent);
 }
 
-declare const LineTool: IEditorTool;
+declare class EditorSkewEvent extends EditorEvent implements IEditorSkewEvent {
+    static SKEW: string;
+    readonly skewX: number;
+    readonly skewY: number;
+    constructor(type: string, data?: IEditorSkewEvent);
+}
+
+declare class EditTool implements IEditTool {
+    static list: IEditTool[];
+    tag: string;
+    onMove(e: IEditorMoveEvent): void;
+    onScale(e: IEditorScaleEvent): void;
+    onRotate(e: IEditorRotateEvent): void;
+    onSkew(e: IEditorSkewEvent): void;
+    update(editor: IEditor): void;
+}
+
+declare class LineEditTool extends EditTool {
+    tag: string;
+    scaleOfEvent: boolean;
+    onScaleWithDrag(e: IEditorScaleEvent): void;
+    onSkew(_e: IEditorSkewEvent): void;
+    update(editor: IEditor): void;
+}
+
+declare const EditorHelper: {
+    group(list: IUI[], element?: IUI, group?: IGroup): IGroup;
+    ungroup(list: IUI[]): IUI[];
+    toTop(list: IUI[]): void;
+    toBottom(list: IUI[]): void;
+};
+
+declare const EditDataHelper: {
+    getScaleData(bounds: IBoundsData, direction: IDirection8, pointMove: IPointData, lockRatio: boolean, around: IAround): IEditorScaleEvent;
+    getRotateData(bounds: IBoundsData, direction: IDirection8, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent;
+    getSkewData(bounds: IBoundsData, direction: IDirection8, move: IPointData, around: IAround): IEditorSkewEvent;
+    getAround(around: IAround, altKey: boolean): IAround;
+    getRotateDirection(direction: number, rotation: number, totalDirection?: number): number;
+};
 
-declare const RectTool: IEditorTool;
+declare const EditSelectHelper: {
+    findOne(path: ILeafList): IUI;
+    findBounds(leaf: IUI, bounds: IBounds): AnswerType;
+};
 
-export { Editor, EditorResizeEvent, EditorRotateEvent, LineTool, RectTool };
+export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, Editor, EditorEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, LineEditTool, SelectArea, Stroker };

package/src/cursor.ts

@@ -1,57 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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)
-    declare readonly origin: IPointData
-    readonly scaleX: number
-    readonly scaleY: number
-
-    constructor(type: string, data?: IEditorResizeEvent) {
-        super(type)
-        if (data) Object.assign(this, data)
-    }
-
-}

package/src/resize.ts

@@ -1,87 +0,0 @@
-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/RectTool.ts

@@ -1,141 +0,0 @@
-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'
-                rotateP.visible = false
-
-            } else {
-                rotateP.visible = type !== 'mobile'
-                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
-    }
-
-}