@leafer-in/editor 1.0.0-rc.21 → 1.0.0-rc.22

package/src/index.ts

@@ -14,17 +14,40 @@ export { EditorScaleEvent } from './event/EditorScaleEvent'
 export { EditorRotateEvent } from './event/EditorRotateEvent'
 export { EditorSkewEvent } from './event/EditorSkewEvent'
 
-export { LineEditTool } from './tool/LineEditTool'
+export { EditToolCreator, registerEditTool, registerInnerEditor } from './tool/EditToolCreator'
+export { InnerEditor } from './tool/InnerEditor'
 export { EditTool } from './tool/EditTool'
+export { LineEditTool } from './tool/LineEditTool'
 
 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 { IEditor, IEditorConfig, IEditToolFunction, IEditorConfigFunction } from '@leafer-in/interface'
+import { Creator, UI, Line, defineKey } from '@leafer-ui/draw'
+
 import { Editor } from './Editor'
 
-Creator.editor = function (options?: IEditorConfig): IEditor {
-    return new Editor(options)
-}
+Creator.editor = function (options?: IEditorConfig): IEditor { return new Editor(options) }
+
+UI.setEditConfig = function (config: IEditorConfig | IEditorConfigFunction): void {
+    defineKey(this.prototype, 'editConfig', {
+        get(): IEditorConfig { return typeof config === 'function' ? config(this) : config }
+    })
+}
+
+UI.setEditOuter = function (toolName: string | IEditToolFunction): void {
+    defineKey(this.prototype, 'editOuter', {
+        get(): string { return typeof toolName === 'string' ? toolName : toolName(this) }
+    })
+}
+
+UI.setEditInner = function (editorName: string | IEditToolFunction): void {
+    defineKey(this.prototype, 'editInner', {
+        get(): string { return typeof editorName === 'string' ? editorName : editorName(this) }
+    })
+}
+
+Line.setEditOuter(function (line: Line): string {
+    return (line.points || line.pathInputed) ? 'EditTool' : 'LineEditTool'
+})

package/src/tool/EditTool.ts

@@ -1,13 +1,23 @@
-import { IEditor, IEditorScaleEvent, IEditorRotateEvent, IEditTool, IEditorSkewEvent, IEditorMoveEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent, IEditorRotateEvent, IEditTool, IEditorSkewEvent, IEditorMoveEvent } from '@leafer-in/interface'
 
+import { registerEditTool, EditToolCreator } from './EditToolCreator'
+import { InnerEditor } from './InnerEditor'
 
-export class EditTool implements IEditTool {
 
-    static list: IEditTool[] = []
+@registerEditTool()
+export class EditTool extends InnerEditor implements IEditTool {
 
-    public tag = 'EditTool'
+    static registerEditTool() {
+        EditToolCreator.register(this)
+    }
+
+
+    public get tag() { return 'EditTool' }
 
-    onMove(e: IEditorMoveEvent): void {
+
+    // 操作
+
+    public onMove(e: IEditorMoveEvent): void {
         const { moveX, moveY, editor } = e
         const { app, list } = editor
         app.lockLayout()
@@ -17,7 +27,7 @@ export class EditTool implements IEditTool {
         app.unlockLayout()
     }
 
-    onScale(e: IEditorScaleEvent): void {
+    public onScale(e: IEditorScaleEvent): void {
         const { scaleX, scaleY, transform, worldOrigin, editor } = e
         const { app, list } = editor
         app.lockLayout()
@@ -32,7 +42,7 @@ export class EditTool implements IEditTool {
         app.unlockLayout()
     }
 
-    onRotate(e: IEditorRotateEvent): void {
+    public onRotate(e: IEditorRotateEvent): void {
         const { rotation, transform, worldOrigin, editor } = e
         const { app, list } = editor
         app.lockLayout()
@@ -47,7 +57,7 @@ export class EditTool implements IEditTool {
         app.unlockLayout()
     }
 
-    onSkew(e: IEditorSkewEvent): void {
+    public onSkew(e: IEditorSkewEvent): void {
         const { skewX, skewY, transform, worldOrigin, editor } = e
         const { app, list } = editor
         app.lockLayout()
@@ -62,14 +72,28 @@ export class EditTool implements IEditTool {
         app.unlockLayout()
     }
 
-    update(editor: IEditor) {
-        const { simulateTarget, element } = editor
+    // 状态
 
+    public load(): void {
+        this.editBox.view.visible = true
+        this.onLoad()
+    }
+
+    public update(): void {
+        const { editor, editBox } = this
+
+        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 })
+        editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY })
+        editBox.update({ x: 0, y: 0, width, height })
+        this.onUpdate()
+    }
+
+    public unload(): void {
+        this.editBox.view.visible = false
+        this.onUnload()
     }
 
 }

package/src/tool/EditToolCreator.ts

@@ -0,0 +1,32 @@
+import { IObject } from '@leafer-ui/interface'
+import { Debug } from '@leafer-ui/draw'
+
+import { IEditTool, IEditor } from '@leafer-in/interface'
+
+
+const debug = Debug.get('EditToolCreator')
+
+export function registerEditTool() {
+    return (target: IObject) => {
+        EditToolCreator.register(target)
+    }
+}
+
+export const registerInnerEditor = registerEditTool
+
+export const EditToolCreator = {
+
+    list: {} as IObject,
+
+    register(EditTool: IObject): void {
+        const { tag } = EditTool.prototype as IEditTool
+        list[tag] ? debug.repeat(tag) : (list[tag] = EditTool)
+    },
+
+    get(tag: string, editor: IEditor): IEditTool {
+        return new list[tag](editor)
+    }
+
+}
+
+const { list } = EditToolCreator

package/src/tool/InnerEditor.ts

@@ -0,0 +1,64 @@
+import { IGroup, IEventListenerId } from '@leafer-ui/interface'
+import { IInnerEditor, IEditor, IEditBox } from '@leafer-in/interface'
+
+import { Group } from '@leafer-ui/draw'
+import { EditToolCreator } from './EditToolCreator'
+
+export class InnerEditor implements IInnerEditor {
+
+    static registerInnerEditor() {
+        EditToolCreator.register(this)
+    }
+
+
+    public get tag() { return 'InnerEditor' }
+
+    public editor: IEditor
+    public get editBox(): IEditBox { return this.editor.editBox }
+
+    public view: IGroup
+
+    public eventIds: IEventListenerId[]
+
+
+    constructor(editor: IEditor) {
+        this.editor = editor
+        this.create()
+    }
+
+
+    public onCreate(): void { }
+    public create(): void {
+        this.view = new Group()
+        this.onCreate()
+    }
+
+
+    // 状态
+
+    public onLoad(): void { }
+    public load(): void {
+        this.editor.selector.hittable = this.editor.app.tree.hitChildren = false
+        this.onLoad()
+    }
+
+    public onUpdate(): void { }
+    public update(): void { this.onUpdate() }
+
+    public onUnload(): void { }
+    public unload(): void {
+        this.editor.selector.hittable = this.editor.app.tree.hitChildren = true
+        this.onUnload()
+    }
+
+    public onDestroy(): void { }
+    public destroy(): void {
+        this.onDestroy()
+        if (this.editor) {
+            if (this.view) this.view.destroy()
+            if (this.eventIds) this.editor.off_(this.eventIds)
+            this.editor = this.view = this.eventIds = null
+        }
+    }
+
+}

package/src/tool/LineEditTool.ts

@@ -1,16 +1,18 @@
-import { IDirection8, IEditor, IEditorScaleEvent, ILine, IEditorSkewEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent, ILine, IEditorSkewEvent } from '@leafer-in/interface'
 
-import { getPointData } from '@leafer-ui/draw'
+import { getPointData, Direction9 } from '@leafer-ui/draw'
 
 import { EditTool } from './EditTool'
+import { registerEditTool } from './EditToolCreator'
 
 
 
-const { left, right } = IDirection8
+const { left, right } = Direction9
 
+@registerEditTool()
 export class LineEditTool extends EditTool {
 
-    public tag = 'LineEditTool'
+    public get tag() { return 'LineEditTool' }
 
     public scaleOfEvent = true
 
@@ -69,10 +71,8 @@ export class LineEditTool extends EditTool {
 
     }
 
-    update(editor: IEditor) {
-        const { rotatePoints, resizeLines, resizePoints } = editor.editBox
-        super.update(editor)
-
+    onUpdate() {
+        const { rotatePoints, resizeLines, resizePoints } = this.editor.editBox
         for (let i = 0; i < 8; i++) {
             if (i < 4) resizeLines[i].visible = false
             resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right)

package/types/index.d.ts

@@ -1,8 +1,8 @@
 export * from '@leafer-ui/scale';
-import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IGroup, IGroupInputData, IEditSize, IPointData, IBox, IBoundsData, IRectInputData, IKeyEvent, IRect, ILeaferCanvas, IRenderOptions, IMatrixData, IDragEvent, IAround } from '@leafer-ui/interface';
-import { Group, Box, UI, Event, Answer } from '@leafer-ui/draw';
+import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IPointerEvent, IGroup, IObject, IPointData, IGroupInputData, IEditSize, IBox, IBoundsData, IBoxInputData, IKeyEvent, IRect, IRectInputData, ILeaferCanvas, IRenderOptions, IMatrixData, IDragEvent, IAround } from '@leafer-ui/interface';
+import { Group, Event, Direction9, Box, UI, Answer } from '@leafer-ui/draw';
 import { PointerEvent, DragEvent, MoveEvent, RotateEvent } from '@leafer-ui/core';
-import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IEditorScaleEvent, IEditPoint, IEditPointType, IDirection8, IEditorEvent, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface';
+import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IInnerEditor, IEditorScaleEvent, IEditorEvent, IEditPoint, IEditPointType, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface';
 
 declare class EditSelect extends Group implements IEditSelect {
     editor: IEditor;
@@ -14,7 +14,7 @@ declare class EditSelect extends Group implements IEditSelect {
     bounds: IBounds;
     selectArea: ISelectArea;
     protected originList: ILeafList;
-    protected lastDownLeaf: IUI;
+    protected needRemoveItem: IUI;
     protected __eventIds: IEventListenerId[];
     constructor(editor: IEditor);
     protected onHover(): void;
@@ -23,14 +23,17 @@ 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, isDownType?: boolean): void;
+    protected checkAndSelect(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 allowSelect(e: IPointerEvent): boolean;
+    findDeepOne(e: PointerEvent): IUI;
+    findUI(e: PointerEvent): IUI;
+    isMultipleSelect(e: IPointerEvent): boolean;
     protected __listenEvents(): void;
     protected __removeListenEvents(): void;
     destroy(): void;
@@ -38,22 +41,31 @@ declare class EditSelect extends Group implements IEditSelect {
 
 declare class Editor extends Group implements IEditor {
     config: IEditorConfig;
+    mergeConfig: IEditorConfig;
     hoverTarget: IUI;
     target: IUI | IUI[];
-    leafList: ILeafList;
     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;
+    innerEditor: IInnerEditor;
+    editToolList: IObject;
     selector: EditSelect;
-    get dragging(): boolean;
+    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;
@@ -65,13 +77,18 @@ declare class Editor extends Group implements IEditor {
     onScale(e: DragEvent): 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(userGroup?: IGroup | IGroupInputData): IGroup;
     ungroup(): IUI[];
+    openGroup(group: IGroup): void;
+    closeGroup(group: IGroup): void;
+    checkOpenedGroups(): void;
+    openInnerEditor(): void;
+    closeInnerEditor(): void;
     lock(): void;
     unlock(): void;
     toTop(): void;
@@ -81,10 +98,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;
@@ -99,24 +131,29 @@ 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[];
+    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;
 }
 
@@ -137,20 +174,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[];
-    get list(): IUI[];
-    get oldList(): 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;
@@ -164,7 +187,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);
@@ -183,22 +206,52 @@ declare class EditorSkewEvent extends EditorEvent implements IEditorSkewEvent {
     constructor(type: string, data?: IEditorSkewEvent);
 }
 
-declare class EditTool implements IEditTool {
-    static list: IEditTool[];
-    tag: string;
+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;
+    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;
     onSkew(_e: IEditorSkewEvent): void;
-    update(editor: IEditor): void;
+    onUpdate(): void;
 }
 
 declare const EditorHelper: {
@@ -209,12 +262,12 @@ declare const EditorHelper: {
 };
 
 declare const EditDataHelper: {
-    getScaleData(bounds: IBoundsData, direction: IDirection8, pointMove: IPointData, lockRatio: boolean | 'corner', 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(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: IDirection8, flipedX: boolean, flipedY: boolean): IDirection8;
+    getFlipDirection(direction: Direction9, flipedX: boolean, flipedY: boolean): Direction9;
 };
 
 declare const EditSelectHelper: {
@@ -222,4 +275,4 @@ declare const EditSelectHelper: {
     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, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, InnerEditor, 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/draw'
-
-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()
-    }
-}