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

package/src/helper/EditDataHelper.ts

@@ -1,16 +1,16 @@
-import { IBoundsData, IPointData, IAround } from '@leafer-ui/interface'
-import { AroundHelper, PointHelper } from '@leafer-ui/draw'
+import { IBoundsData, IPointData, IAround, IAlign } from '@leafer-ui/interface'
+import { AroundHelper, PointHelper, Direction9 } from '@leafer-ui/draw'
 
-import { IEditorScaleEvent, IDirection8, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
 
 
-const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
+const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = Direction9
 const { toPoint } = AroundHelper
 
 export const EditDataHelper = {
 
-    getScaleData(bounds: IBoundsData, direction: IDirection8, pointMove: IPointData, lockRatio: boolean | 'corner', around: IAround): IEditorScaleEvent {
-        let origin: IPointData, scaleX: number = 1, scaleY: number = 1
+    getScaleData(bounds: IBoundsData, direction: Direction9, pointMove: IPointData, lockRatio: boolean | 'corner', around: IAround): IEditorScaleEvent {
+        let align: IAlign, origin = {} as IPointData, scaleX: number = 1, scaleY: number = 1
         const { width, height } = bounds
 
         if (around) {
@@ -30,102 +30,103 @@ export const EditDataHelper = {
         switch (direction) {
             case top:
                 scaleY = topScale
-                origin = { x: 0.5, y: 1 }
+                align = 'bottom'
                 break
             case right:
                 scaleX = rightScale
-                origin = { x: 0, y: 0.5 }
+                align = 'left'
                 break
             case bottom:
                 scaleY = bottomScale
-                origin = { x: 0.5, y: 0 }
+                align = 'top'
                 break
             case left:
                 scaleX = leftScale
-                origin = { x: 1, y: 0.5 }
+                align = 'right'
                 break
             case topLeft:
                 scaleY = topScale
                 scaleX = leftScale
-                origin = { x: 1, y: 1 }
+                align = 'bottom-right'
                 break
             case topRight:
                 scaleY = topScale
                 scaleX = rightScale
-                origin = { x: 0, y: 1 }
+                align = 'bottom-left'
                 break
             case bottomRight:
                 scaleY = bottomScale
                 scaleX = rightScale
-                origin = { x: 0, y: 0 }
+                align = 'top-left'
                 break
             case bottomLeft:
                 scaleY = bottomScale
                 scaleX = leftScale
-                origin = { x: 1, y: 0 }
+                align = 'top-right'
         }
 
         if (lockRatio) {
             const unlockSide = lockRatio === 'corner' && direction % 2
             if (!unlockSide) {
-                if (scaleY !== 1) scaleX = scaleY
-                else scaleY = scaleX
+                const scale = Math.sqrt(Math.abs(scaleX * scaleY))
+                scaleX = scaleX < 0 ? -scale : scale
+                scaleY = scaleY < 0 ? -scale : scale
             }
         }
 
-        toPoint(around || origin, bounds, origin)
+        toPoint(around || align, bounds, origin)
 
         return { origin, scaleX, scaleY, direction, lockRatio, around }
     },
 
-    getRotateData(bounds: IBoundsData, direction: IDirection8, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
-        let origin: IPointData
+    getRotateData(bounds: IBoundsData, direction: Direction9, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
+        let align: IAlign, origin = {} as IPointData
 
         switch (direction) {
             case topLeft:
-                origin = { x: 1, y: 1 }
+                align = 'bottom-right'
                 break
             case topRight:
-                origin = { x: 0, y: 1 }
+                align = 'bottom-left'
                 break
             case bottomRight:
-                origin = { x: 0, y: 0 }
+                align = 'top-left'
                 break
             case bottomLeft:
-                origin = { x: 1, y: 0 }
+                align = 'top-right'
                 break
             default:
-                origin = { x: 0.5, y: 0.5 }
+                align = 'center'
         }
 
-        toPoint(around || origin, bounds, origin)
+        toPoint(around || align, bounds, origin)
 
         return { origin, rotation: PointHelper.getRotation(last, origin, current) }
     },
 
-    getSkewData(bounds: IBoundsData, direction: IDirection8, move: IPointData, around: IAround): IEditorSkewEvent {
-        let origin: IPointData, skewX = 0, skewY = 0
+    getSkewData(bounds: IBoundsData, direction: Direction9, move: IPointData, around: IAround): IEditorSkewEvent {
+        let align: IAlign, origin = {} as IPointData, skewX = 0, skewY = 0
         let last: IPointData
 
         switch (direction) {
             case top:
                 last = { x: 0.5, y: 0 }
-                origin = { x: 0.5, y: 1 }
+                align = 'bottom'
                 skewX = 1
                 break
             case bottom:
                 last = { x: 0.5, y: 1 }
-                origin = { x: 0.5, y: 0 }
+                align = 'top'
                 skewX = 1
                 break
             case left:
                 last = { x: 0, y: 0.5 }
-                origin = { x: 1, y: 0.5 }
+                align = 'right'
                 skewY = 1
                 break
             case right:
                 last = { x: 1, y: 0.5 }
-                origin = { x: 0, y: 0.5 }
+                align = 'left'
                 skewY = 1
         }
 
@@ -134,7 +135,7 @@ export const EditDataHelper = {
         last.x = x + last.x * width
         last.y = y + last.y * height
 
-        toPoint(around || origin, bounds, origin)
+        toPoint(around || align, bounds, origin)
 
         const rotation = PointHelper.getRotation(last, origin, { x: last.x + (skewX ? move.x : 0), y: last.y + (skewY ? move.y : 0) })
         skewX ? skewX = -rotation : skewY = rotation
@@ -153,7 +154,7 @@ export const EditDataHelper = {
         return direction
     },
 
-    getFlipDirection(direction: IDirection8, flipedX: boolean, flipedY: boolean): IDirection8 {
+    getFlipDirection(direction: Direction9, flipedX: boolean, flipedY: boolean): Direction9 {
         if (flipedX) {
             switch (direction) {
                 case left: direction = right; break

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)