@leafer-in/editor 1.0.0-rc.9 → 1.0.1

package/src/tool/LineEditTool.ts

@@ -1,78 +1,134 @@
-import { IDirection8, IEditor, IEditorScaleEvent, ILine, IEditorSkewEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent, ILine, IEditorSkewEvent, IPointData, IAround, IPathCommandData, IFromToData, IUI, IDragEvent } from '@leafer-in/interface'
+
+import { getPointData, Direction9, PointHelper } from '@leafer-ui/draw'
 
 import { EditTool } from './EditTool'
+import { registerEditTool } from './EditToolCreator'
 
 
-const { left, right } = IDirection8
+const { left, right } = Direction9
+const { move, copy } = PointHelper
 
+@registerEditTool()
 export class LineEditTool extends EditTool {
 
-    public tag = 'LineEditTool'
+    public get tag() { return 'LineEditTool' }
 
     public scaleOfEvent = true
 
     onScaleWithDrag(e: IEditorScaleEvent): void {
         const { drag, direction, lockRatio, around } = e
-        const target = e.target as ILine
+        const line = e.target as ILine
+        const isDragFrom = direction === left
 
-        const fromPoint = { x: 0, y: 0 }
-        const { toPoint } = target
+        if (line.pathInputed) {
 
-        target.rotation = 0
+            const { path } = line.__
+            const { from, to } = this.getFromToByPath(path)
 
-        let { x, y } = drag.getInnerMove(target)
+            this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio))
 
-        if (lockRatio) {
-            if (Math.abs(x) > Math.abs(y)) {
-                y = 0
-            } else {
-                x = 0
-            }
-        }
+            path[1] = from.x, path[2] = from.y
+            path[4] = to.x, path[5] = to.y
+            line.path = path
 
-        if (direction === left) {
+        } else if (line.points) {
 
-            fromPoint.x += x
-            fromPoint.y += y
+            const { points } = line
+            const { from, to } = this.getFromToByPoints(points)
 
-            if (around) {
-                toPoint.x -= x
-                toPoint.y -= y
-            }
+            this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio))
+
+            points[0] = from.x, points[1] = from.y
+            points[2] = to.x, points[3] = to.y
+            line.points = points
 
         } else {
 
-            if (around) {
-                fromPoint.x -= x
-                fromPoint.y -= y
-            }
+            const from = getPointData()
+            const { toPoint } = line
+            line.rotation = 0
+
+            this.dragPoint(from, toPoint, isDragFrom, around, this.getInnerMove(line, drag, lockRatio))
+
+            line.getLocalPointByInner(from, null, null, true)
+            line.getLocalPointByInner(toPoint, null, null, true)
+            line.x = from.x
+            line.y = from.y
+
+            line.getInnerPointByLocal(toPoint, null, null, true)
+            line.toPoint = toPoint
+
+        }
 
-            toPoint.x += x
-            toPoint.y += y
+    }
 
+    getInnerMove(ui: IUI, event: IDragEvent, lockRatio: boolean | 'corner'): IPointData {
+        const movePoint = event.getInnerMove(ui)
+        if (lockRatio) {
+            if (Math.abs(movePoint.x) > Math.abs(movePoint.y)) {
+                movePoint.y = 0
+            } else {
+                movePoint.x = 0
+            }
         }
+        return movePoint
+    }
 
-        target.getLocalPointByInner(fromPoint, null, null, true)
-        target.getLocalPointByInner(toPoint, null, null, true)
-        target.x = fromPoint.x
-        target.y = fromPoint.y
+    getFromToByPath(path: IPathCommandData): IFromToData {
+        return {
+            from: { x: path[1], y: path[2] },
+            to: { x: path[4], y: path[5] }
+        }
+    }
 
-        target.getInnerPointByLocal(toPoint, null, null, true)
-        target.toPoint = toPoint
+    getFromToByPoints(points: number[]): IFromToData {
+        return {
+            from: { x: points[0], y: points[1] },
+            to: { x: points[2], y: points[3] }
+        }
+
+    }
 
+    dragPoint(fromPoint: IPointData, toPoint: IPointData, isDragFrom: boolean, around: IAround, movePoint: IPointData): void {
+        const { x, y } = movePoint
+        if (isDragFrom) {
+            move(fromPoint, x, y)
+            if (around) move(toPoint, -x, -y)
+        } else {
+            if (around) move(fromPoint, -x, -y)
+            move(toPoint, x, y)
+        }
     }
 
     onSkew(_e: IEditorSkewEvent): void {
 
     }
 
-    update(editor: IEditor) {
-        const { rotatePoints, resizeLines, resizePoints } = editor.editBox
-        super.update(editor)
+    onUpdate() {
+        const { editBox } = this, { rotatePoints, resizeLines, resizePoints, rect } = editBox
+        const line = this.editor.element as ILine
+
+        let fromTo: IFromToData, leftOrRight: boolean
+        if (line.pathInputed) fromTo = this.getFromToByPath(line.__.path)
+        else if (line.points) fromTo = this.getFromToByPoints(line.__.points)
+
+        if (fromTo) {
+            const { from, to } = fromTo
+            line.innerToWorld(from, from, false, editBox)
+            line.innerToWorld(to, to, false, editBox)
+            rect.pen.clearPath().moveTo(from.x, from.y).lineTo(to.x, to.y)
+            copy(resizePoints[7] as IPointData, from)
+            copy(rotatePoints[7] as IPointData, from)
+            copy(resizePoints[3] as IPointData, to)
+            copy(rotatePoints[3] as IPointData, to)
+        }
 
         for (let i = 0; i < 8; i++) {
             if (i < 4) resizeLines[i].visible = false
-            resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right)
+            leftOrRight = i === left || i === right
+            resizePoints[i].visible = leftOrRight
+            rotatePoints[i].visible = fromTo ? false : leftOrRight
         }
     }
 

package/types/index.d.ts

@@ -1,6 +1,8 @@
-import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IGroup, IGroupInputData, IEditSize, IPointData, IBox, 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';
+export * from '@leafer-in/resize';
+import { IBounds, ILeafList, IUI, IFunction, IEventListenerId, ILeaf, IPointerEvent, ILeaferCanvas, IRenderOptions, IGroup, IObject, IPointData, ILayoutBoundsData, IGroupInputData, IEditSize, IAlign, IAxis, IBox, IBoundsData, IEditorConfig as IEditorConfig$1, IBoxInputData, IKeyEvent, IRect, IRectInputData, IMatrixData, IDragEvent, IAround } from '@leafer-ui/interface';
+import { Group, UI, Matrix, 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 EditSelect extends Group implements IEditSelect {
     editor: IEditor;
@@ -12,7 +14,8 @@ declare class EditSelect extends Group implements IEditSelect {
     bounds: IBounds;
     selectArea: ISelectArea;
     protected originList: ILeafList;
-    protected lastDownLeaf: IUI;
+    protected needRemoveItem: IUI;
+    protected waitSelect: IFunction;
     protected __eventIds: IEventListenerId[];
     constructor(editor: IEditor);
     protected onHover(): void;
@@ -21,54 +24,88 @@ declare class EditSelect extends Group implements IEditSelect {
     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 onDragEnd(): void;
+    protected onDragEnd(e: DragEvent): void;
     protected onAutoMove(e: MoveEvent): void;
     protected allow(target: ILeaf): boolean;
     protected allowDrag(e: DragEvent): boolean;
-    protected findDeepOne(e: PointerEvent): IUI;
+    protected allowSelect(e: IPointerEvent): boolean;
+    findDeepOne(e: PointerEvent): IUI;
+    findUI(e: PointerEvent): IUI;
+    isMultipleSelect(e: IPointerEvent): boolean;
     protected __listenEvents(): void;
     protected __removeListenEvents(): void;
     destroy(): void;
 }
 
+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;
-    hoverTarget: IUI;
-    target: IUI | IUI[];
-    leafList: ILeafList;
+    get mergeConfig(): IEditorConfig;
+    hoverTarget?: IUI;
+    target?: IUI | IUI[];
     get list(): IUI[];
-    get hasTarget(): boolean;
+    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;
+    editTool?: IEditTool;
+    innerEditor?: IInnerEditor;
+    editToolList: IObject;
     selector: EditSelect;
-    get dragging(): boolean;
+    editMask: EditMask;
+    dragStartPoint: IPointData;
+    dragStartBounds: ILayoutBoundsData;
     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): void;
+    getEditSize(_ui: IUI): IEditSize;
+    onMove(e: DragEvent | MoveEvent): void;
+    onScale(e: DragEvent | ZoomEvent): void;
     onRotate(e: DragEvent | RotateEvent): void;
     onSkew(e: DragEvent): void;
-    move(x: number, y: number): void;
+    move(x: number | IPointData, 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(group?: IGroup): IGroup;
+    scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY?: number, _resize?: boolean): void;
+    flip(axis: IAxis): void;
+    rotateOf(origin: IPointData | IAlign, rotation: number): void;
+    skewOf(origin: IPointData | IAlign, skewX: number, skewY?: number, _resize?: boolean): void;
+    protected getWorldOrigin(origin: IPointData | IAlign): IPointData;
+    protected getChangedTransform(func: IFunction): Matrix;
+    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;
@@ -78,9 +115,25 @@ declare class Editor extends Group implements IEditor {
     destroy(): void;
 }
 
+declare class EditorEvent extends Event implements IEditorEvent {
+    static SELECT: string;
+    static HOVER: string;
+    readonly target: IUI;
+    readonly editor: IEditor;
+    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;
@@ -95,24 +148,31 @@ declare class EditBox extends Group implements IEditBox {
     protected __eventIds: IEventListenerId[];
     constructor(editor: IEditor);
     create(): void;
+    load(): void;
     update(bounds: IBoundsData): void;
-    protected layoutButtons(): void;
-    getPointStyle(userStyle?: IRectInputData): IRectInputData;
-    getPointsStyle(): IRectInputData[];
-    getMiddlePointsStyle(): IRectInputData[];
+    protected layoutCircle(config: IEditorConfig$1): void;
+    protected layoutButtons(config: IEditorConfig$1): void;
+    protected setButtonPosition(buttons: IUI, direction: number, buttonsMargin: number, useMiddlePoint: boolean): 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 onDoubleClick(): void;
-    listenPointEvents(point: IEditPoint, type: IEditPointType, direction: IDirection8): 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: IDirection8;
+    direction: Direction9;
     pointType: IEditPointType;
 }
 
@@ -133,18 +193,6 @@ declare class Stroker extends UI implements IStroker {
     destroy(): void;
 }
 
-declare class EditorEvent extends Event implements IEditorEvent {
-    static SELECT: string;
-    static HOVER: string;
-    readonly target: IUI;
-    readonly editor: IEditor;
-    readonly value: IUI | IUI[];
-    readonly oldValue: IUI | IUI[];
-    readonly worldOrigin: IPointData;
-    readonly origin: IPointData;
-    constructor(type: string, data?: IEditorEvent);
-}
-
 declare class EditorMoveEvent extends EditorEvent implements IEditorMoveEvent {
     static MOVE: string;
     readonly moveX: number;
@@ -158,7 +206,7 @@ declare class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent
     readonly scaleY: number;
     readonly transform?: IMatrixData;
     readonly drag: IDragEvent;
-    readonly direction: IDirection8;
+    readonly direction: Direction9;
     readonly lockRatio: boolean;
     readonly around: IAround;
     constructor(type: string, data?: IEditorScaleEvent);
@@ -177,42 +225,99 @@ declare class EditorSkewEvent extends EditorEvent implements IEditorSkewEvent {
     constructor(type: string, data?: IEditorSkewEvent);
 }
 
-declare class EditTool implements IEditTool {
-    static list: IEditTool[];
-    tag: string;
+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;
-    update(editor: IEditor): void;
+    load(): void;
+    update(): void;
+    unload(): void;
 }
 
 declare class LineEditTool extends EditTool {
-    tag: string;
+    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;
-    update(editor: IEditor): void;
+    onUpdate(): void;
 }
 
 declare const EditorHelper: {
-    group(list: IUI[], element?: IUI, group?: IGroup): IGroup;
+    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: 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;
+    getScaleData(element: IUI, startBounds: ILayoutBoundsData, direction: Direction9, totalMove: IPointData, lockRatio: boolean | "corner", around: IAround, flipable: boolean, scaleMode: boolean): 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 EditSelectHelper: {
     findOne(path: ILeafList): IUI;
-    findBounds(leaf: IUI, bounds: IBounds): AnswerType;
+    findBounds(leaf: IUI, bounds: IBounds): Answer;
 };
 
-export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, Editor, EditorEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, LineEditTool, SelectArea, Stroker };
+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/tool/index.ts

@@ -1,21 +0,0 @@
-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()
-    }
-}