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

package/types/index.d.ts

@@ -1,68 +1,316 @@
-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';
+export * from '@leafer-in/resize';
+import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IPointerEvent, ILeaferCanvas, IRenderOptions, IGroup, IObject, IPointData, IGroupInputData, IEditSize, IAlign, IBox, IBoundsData, IBoxInputData, IKeyEvent, IRect, IRectInputData, IMatrixData, IDragEvent, IAround } from '@leafer-ui/interface';
+import { Group, UI, Event, Direction9, Box, Answer } from '@leafer-ui/draw';
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent } from '@leafer-ui/core';
+import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IInnerEditor, IEditorScaleEvent, IEditorEvent, IEditPoint, IEditPointType, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent, IEditorGroupEvent, IInnerEditorEvent, IUI as IUI$1, IDragEvent as IDragEvent$1, IPointData as IPointData$1, IPathCommandData, IFromToData, IAround as IAround$1 } from '@leafer-in/interface';
 
-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;
+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 needRemoveItem: IUI;
     protected __eventIds: IEventListenerId[];
-    protected __targetEventIds: IEventListenerId[];
-    constructor(userConfig?: IEditorConfig, data?: IGroupInputData);
-    protected init(): void;
-    protected onTarget(): void;
-    getTool(value: IUI): IEditorTool;
+    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 checkAndSelect(e: PointerEvent): void;
+    protected onDragStart(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;
+    protected onDragEnd(): void;
+    protected onAutoMove(e: MoveEvent): void;
+    protected allow(target: ILeaf): boolean;
+    protected allowDrag(e: DragEvent): boolean;
+    protected allowSelect(e: IPointerEvent): boolean;
+    findDeepOne(e: PointerEvent): IUI;
+    findUI(e: PointerEvent): IUI;
+    isMultipleSelect(e: IPointerEvent): boolean;
     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 EditMask extends UI {
+    editor: IEditor;
+    constructor(editor: IEditor);
+    __draw(canvas: ILeaferCanvas, options: IRenderOptions): void;
+    destroy(): void;
+}
+
+declare class Editor extends Group implements IEditor {
+    config: IEditorConfig;
+    get mergeConfig(): IEditorConfig;
+    hoverTarget?: IUI;
+    target?: IUI | IUI[];
+    get list(): IUI[];
+    leafList: ILeafList;
+    openedGroupList: ILeafList;
+    get editing(): boolean;
+    innerEditing: boolean;
+    get groupOpening(): boolean;
+    get multiple(): boolean;
+    get single(): boolean;
+    get dragging(): boolean;
+    get element(): IUI;
+    simulateTarget: IUI;
+    editBox: IEditBox;
+    get buttons(): IGroup;
+    editTool?: IEditTool;
+    innerEditor?: IInnerEditor;
+    editToolList: IObject;
+    selector: EditSelect;
+    editMask: EditMask;
+    dragStartPoint: IPointData;
+    targetEventIds: IEventListenerId[];
+    constructor(userConfig?: IEditorConfig, data?: IGroupInputData);
+    select(target: IUI | IUI[]): void;
+    cancel(): void;
+    hasItem(item: IUI): boolean;
+    addItem(item: IUI): void;
+    removeItem(item: IUI): void;
+    shiftItem(item: IUI): void;
+    update(): void;
+    updateEditBox(): void;
+    updateEditTool(): void;
+    getEditSize(_ui: IUI): IEditSize;
+    onMove(e: DragEvent): void;
+    onScale(e: DragEvent | ZoomEvent): void;
+    onRotate(e: DragEvent | RotateEvent): void;
+    onSkew(e: DragEvent): void;
+    move(x: number | IPointData, y?: number): void;
+    scaleWithDrag(data: IEditorScaleEvent): void;
+    scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY?: number, _resize?: boolean): void;
+    rotateOf(origin: IPointData | IAlign, rotation: number): void;
+    skewOf(origin: IPointData | IAlign, skewX: number, skewY?: number, _resize?: boolean): void;
+    group(userGroup?: IGroup | IGroupInputData): IGroup;
+    ungroup(): IUI[];
+    openGroup(group: IGroup): void;
+    closeGroup(group: IGroup): void;
+    checkOpenedGroups(): void;
+    checkDeepSelect(): void;
+    emitGroupEvent(type: string, group: IGroup): void;
+    openInnerEditor(target?: IUI): void;
+    closeInnerEditor(): void;
+    emitInnerEvent(type: string): void;
+    lock(): void;
+    unlock(): void;
+    toTop(): void;
+    toBottom(): void;
+    listenTargetEvents(): void;
+    removeTargetEvents(): 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 value: IUI | IUI[];
+    readonly oldValue: IUI | IUI[];
+    get list(): IUI[];
+    get oldList(): IUI[];
+    readonly worldOrigin: IPointData;
     readonly origin: IPointData;
+    constructor(type: string, data?: IEditorEvent);
+}
+
+declare class EditBox extends Group implements IEditBox {
+    editor: IEditor;
+    dragging: boolean;
+    moving: boolean;
+    view: IGroup;
+    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;
+    load(): void;
+    update(bounds: IBoundsData): void;
+    protected layoutButtons(): void;
+    unload(): void;
+    getPointStyle(userStyle?: IBoxInputData): IBoxInputData;
+    getPointsStyle(): IBoxInputData[];
+    getMiddlePointsStyle(): IBoxInputData[];
+    protected onSelect(e: EditorEvent): void;
+    protected onDragStart(e: DragEvent): void;
+    protected onDragEnd(e: DragEvent): void;
+    protected onDrag(e: DragEvent): void;
+    onArrow(e: IKeyEvent): void;
+    protected onDoubleTap(e: PointerEvent): void;
+    protected onLongPress(e: PointerEvent): void;
+    protected openInner(e: PointerEvent): void;
+    listenPointEvents(point: IEditPoint, type: IEditPointType, direction: Direction9): void;
+    protected __listenEvents(): void;
+    protected __removeListenEvents(): void;
+    destroy(): void;
+}
+
+declare class EditPoint extends Box implements IEditPoint {
+    direction: Direction9;
+    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 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: Direction9;
+    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 EditorGroupEvent extends EditorEvent implements IEditorGroupEvent {
+    static GROUP: string;
+    static BEFORE_UNGROUP: string;
+    static UNGROUP: string;
+    static OPEN: string;
+    static CLOSE: string;
+    readonly editTarget: IGroup;
+    constructor(type: string, data?: IEditorGroupEvent);
+}
+
+declare class InnerEditorEvent extends EditorEvent implements IInnerEditorEvent {
+    static BEFORE_OPEN: string;
+    static OPEN: string;
+    static BEFORE_CLOSE: string;
+    static CLOSE: string;
+    readonly editTarget: IUI;
+    readonly innerEditor: IInnerEditor;
+    constructor(type: string, data?: IInnerEditorEvent);
+}
+
+declare function registerEditTool(): (target: IObject) => void;
+declare const registerInnerEditor: typeof registerEditTool;
+declare const EditToolCreator: {
+    list: IObject;
+    register(EditTool: IObject): void;
+    get(tag: string, editor: IEditor): IEditTool;
+};
+
+declare class InnerEditor implements IInnerEditor {
+    static registerInnerEditor(): void;
+    get tag(): string;
+    editTarget: IUI;
+    config: IObject;
+    editor: IEditor;
+    get editBox(): IEditBox;
+    view: IGroup;
+    eventIds: IEventListenerId[];
+    constructor(editor: IEditor);
+    onCreate(): void;
+    create(): void;
+    onLoad(): void;
+    load(): void;
+    onUpdate(): void;
+    update(): void;
+    onUnload(): void;
+    unload(): void;
+    onDestroy(): void;
+    destroy(): void;
+}
+
+declare class EditTool extends InnerEditor implements IEditTool {
+    static registerEditTool(): void;
+    get tag(): string;
+    onMove(e: IEditorMoveEvent): void;
+    onScale(e: IEditorScaleEvent): void;
+    onRotate(e: IEditorRotateEvent): void;
+    onSkew(e: IEditorSkewEvent): void;
+    load(): void;
+    update(): void;
+    unload(): void;
+}
+
+declare class LineEditTool extends EditTool {
+    get tag(): string;
+    scaleOfEvent: boolean;
+    onScaleWithDrag(e: IEditorScaleEvent): void;
+    getInnerMove(ui: IUI$1, event: IDragEvent$1, lockRatio: boolean | 'corner'): IPointData$1;
+    getFromToByPath(path: IPathCommandData): IFromToData;
+    getFromToByPoints(points: number[]): IFromToData;
+    dragPoint(fromPoint: IPointData$1, toPoint: IPointData$1, isDragFrom: boolean, around: IAround$1, movePoint: IPointData$1): void;
+    onSkew(_e: IEditorSkewEvent): void;
+    onUpdate(): void;
+}
+
+declare const EditorHelper: {
+    group(list: IUI[], element?: IUI, userGroup?: IGroup | IGroupInputData): IGroup;
+    ungroup(list: IUI[]): IUI[];
+    toTop(list: IUI[]): void;
+    toBottom(list: IUI[]): void;
+};
+
+declare const EditDataHelper: {
+    getScaleData(bounds: IBoundsData, direction: Direction9, pointMove: IPointData, lockRatio: boolean | "corner", around: IAround): IEditorScaleEvent;
+    getRotateData(bounds: IBoundsData, direction: Direction9, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent;
+    getSkewData(bounds: IBoundsData, direction: Direction9, move: IPointData, around: IAround): IEditorSkewEvent;
+    getAround(around: IAround, altKey: boolean): IAround;
+    getRotateDirection(direction: number, rotation: number, totalDirection?: number): number;
+    getFlipDirection(direction: Direction9, flipedX: boolean, flipedY: boolean): Direction9;
+};
 
-declare const RectTool: IEditorTool;
+declare const EditSelectHelper: {
+    findOne(path: ILeafList): IUI;
+    findBounds(leaf: IUI, bounds: IBounds): Answer;
+};
 
-export { Editor, EditorResizeEvent, EditorRotateEvent, LineTool, RectTool };
+export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, InnerEditor, InnerEditorEvent, LineEditTool, SelectArea, Stroker, registerEditTool, registerInnerEditor };

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)
-    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/LineTool.ts

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