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

package/src/tool/EditTool.ts

@@ -1,70 +1,99 @@
-import { IEditor, IEditorScaleEvent, IEditorRotateEvent, IEditTool, IEditorSkewEvent, IEditorMoveEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent, IEditorRotateEvent, IEditTool, IEditorSkewEvent, IEditorMoveEvent } from '@leafer-in/interface'
 
-export class EditTool implements IEditTool {
+import { registerEditTool, EditToolCreator } from './EditToolCreator'
+import { InnerEditor } from './InnerEditor'
 
-    static list: IEditTool[] = []
 
-    public tag = 'EditTool'
+@registerEditTool()
+export class EditTool extends InnerEditor implements IEditTool {
 
-    onMove(e: IEditorMoveEvent): void {
+    static registerEditTool() {
+        EditToolCreator.register(this)
+    }
+
+
+    public get tag() { return 'EditTool' }
+
+
+    // 操作
+
+    public onMove(e: IEditorMoveEvent): void {
         const { moveX, moveY, editor } = e
         const { app, list } = editor
         app.lockLayout()
         list.forEach(target => {
-            const move = target.getLocalPoint({ x: moveX, y: moveY }, null, true)
-            target.move(move.x, move.y)
+            target.moveWorld(moveX, moveY)
         })
         app.unlockLayout()
     }
 
-    onScale(e: IEditorScaleEvent): void {
+    public onScale(e: IEditorScaleEvent): void {
         const { scaleX, scaleY, transform, worldOrigin, editor } = e
         const { app, list } = editor
         app.lockLayout()
         list.forEach(target => {
-            const resize = editor.getEditSize(target) === 'size'
+            const resize = editor.getEditSize(target) !== 'scale'
             if (transform) {
-                target.transform(transform, resize)
+                target.transformWorld(transform, resize)
             } else {
-                target.scaleOf(target.getInnerPoint(worldOrigin), scaleX, scaleY, resize)
+                target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize)
             }
         })
         app.unlockLayout()
     }
 
-    onRotate(e: IEditorRotateEvent): void {
-        const { rotation, worldOrigin, editor } = e
+    public onRotate(e: IEditorRotateEvent): void {
+        const { rotation, transform, worldOrigin, editor } = e
         const { app, list } = editor
         app.lockLayout()
         list.forEach(target => {
-            target.rotateOf(target.getInnerPoint(worldOrigin), rotation)
+            const resize = editor.getEditSize(target) !== 'scale'
+            if (transform) {
+                target.transformWorld(transform, resize)
+            } else {
+                target.rotateOfWorld(worldOrigin, rotation)
+            }
         })
         app.unlockLayout()
     }
 
-    onSkew(e: IEditorSkewEvent): void {
+    public onSkew(e: IEditorSkewEvent): void {
         const { skewX, skewY, transform, worldOrigin, editor } = e
         const { app, list } = editor
         app.lockLayout()
         list.forEach(target => {
-            const resize = editor.getEditSize(target) === 'size'
+            const resize = editor.getEditSize(target) !== 'scale'
             if (transform) {
-                target.transform(transform, resize)
+                target.transformWorld(transform, resize)
             } else {
-                target.skewOf(target.getInnerPoint(worldOrigin), skewX, skewY, resize)
+                target.skewOfWorld(worldOrigin, skewX, skewY, resize)
             }
         })
         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,68 @@
+import { IGroup, IEventListenerId, IUI, IObject } 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 editTarget: IUI
+
+    public config: IObject
+
+    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,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
         }
     }