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

package/src/helper/EditDataHelper.ts

@@ -1,128 +1,173 @@
-import { IBoundsData, IPointData, IAround } from '@leafer-ui/interface'
-import { AroundHelper, PointHelper } from '@leafer-ui/core'
+import { IBoundsData, IPointData, IAround, IAlign, IUI, ILayoutBoundsData } from '@leafer-ui/interface'
+import { AroundHelper, MathHelper, 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
+const { within } = MathHelper
 
 export const EditDataHelper = {
 
-    getScaleData(bounds: IBoundsData, direction: IDirection8, pointMove: IPointData, lockRatio: boolean, around: IAround): IEditorScaleEvent {
-        let origin: IPointData, scaleX: number = 1, scaleY: number = 1
-        const { width, height } = bounds
+    getScaleData(element: IUI, startBounds: ILayoutBoundsData, direction: Direction9, totalMove: IPointData, lockRatio: boolean | 'corner', around: IAround, flipable: boolean, scaleMode: boolean): IEditorScaleEvent {
+        let align: IAlign, origin = {} as IPointData, scaleX: number = 1, scaleY: number = 1
+
+        const { boxBounds, widthRange, heightRange } = element
+        const { width, height } = startBounds
 
         if (around) {
-            pointMove.x *= 2
-            pointMove.y *= 2
+            totalMove.x *= 2
+            totalMove.y *= 2
         }
 
+
+        // 获取已经改变的比例
+        const originChangedScaleX = element.scaleX / startBounds.scaleX
+        const originChangedScaleY = element.scaleY / startBounds.scaleY
+        const signX = originChangedScaleX < 0 ? -1 : 1
+        const signY = originChangedScaleY < 0 ? -1 : 1
+
+        const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width
+        const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height
+
+        totalMove.x *= scaleMode ? originChangedScaleX : signX
+        totalMove.y *= scaleMode ? originChangedScaleY : signY
+
+
         // 防止变为0
-        if (Math.abs(pointMove.x) === width) pointMove.x += 0.1
-        if (Math.abs(pointMove.y) === height) pointMove.y += 0.1
+        if (Math.abs(totalMove.x) === width) totalMove.x += 0.1
+        if (Math.abs(totalMove.y) === height) totalMove.y += 0.1
+
 
-        const topScale = (-pointMove.y + height) / height
-        const rightScale = (pointMove.x + width) / width
-        const bottomScale = (pointMove.y + height) / height
-        const leftScale = (-pointMove.x + width) / width
+        const topScale = (-totalMove.y + height) / height
+        const rightScale = (totalMove.x + width) / width
+        const bottomScale = (totalMove.y + height) / height
+        const leftScale = (-totalMove.x + width) / width
 
         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) {
-            if (scaleX !== 1) scaleY = scaleX
-            else scaleX = scaleY
+            const unlockSide = lockRatio === 'corner' && direction % 2
+            if (!unlockSide) {
+                const scale = Math.sqrt(Math.abs(scaleX * scaleY))
+                scaleX = scaleX < 0 ? -scale : scale
+                scaleY = scaleY < 0 ? -scale : scale
+            }
         }
 
-        toPoint(around || origin, bounds, origin)
+
+        scaleX /= changedScaleX
+        scaleY /= changedScaleY
+
+
+        if (!flipable) {
+            const { worldTransform } = element
+            if (scaleX < 0) scaleX = 1 / boxBounds.width / worldTransform.scaleX
+            if (scaleY < 0) scaleY = 1 / boxBounds.height / worldTransform.scaleY
+        }
+
+
+        if (widthRange) {
+            const nowWidth = boxBounds.width * element.scaleX
+            scaleX = within(nowWidth * scaleX, widthRange) / nowWidth
+        }
+
+        if (heightRange) {
+            const nowHeight = boxBounds.height * element.scaleY
+            scaleY = within(nowHeight * scaleY, heightRange) / nowHeight
+        }
+
+
+        toPoint(around || align, boxBounds, 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
         }
 
@@ -131,7 +176,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
@@ -147,6 +192,32 @@ export const EditDataHelper = {
     getRotateDirection(direction: number, rotation: number, totalDirection = 8): number {
         direction = (direction + Math.round(rotation / (360 / totalDirection))) % totalDirection
         if (direction < 0) direction += totalDirection
+        return direction
+    },
+
+    getFlipDirection(direction: Direction9, flipedX: boolean, flipedY: boolean): Direction9 {
+        if (flipedX) {
+            switch (direction) {
+                case left: direction = right; break
+                case topLeft: direction = topRight; break
+                case bottomLeft: direction = bottomRight; break
+                case right: direction = left; break
+                case topRight: direction = topLeft; break
+                case bottomRight: direction = bottomLeft; break
+            }
+        }
+
+        if (flipedY) {
+            switch (direction) {
+                case top: direction = bottom; break
+                case topLeft: direction = bottomLeft; break
+                case topRight: direction = bottomRight; break
+                case bottom: direction = top; break
+                case bottomLeft: direction = topLeft; break
+                case bottomRight: direction = topRight; break
+            }
+        }
+
         return direction
     }
 

package/src/helper/EditSelectHelper.ts

@@ -1,6 +1,7 @@
-import { AnswerType, IBounds, ILeafList, IUI } from '@leafer-ui/interface'
+import { IBounds, ILeafList, IUI } from '@leafer-ui/interface'
+import { Answer } from '@leafer-ui/draw'
 
-const { No, Yes, NoAndSkip, YesAndSkip } = AnswerType
+const { No, Yes, NoAndSkip, YesAndSkip } = Answer
 
 export const EditSelectHelper = {
 
@@ -8,8 +9,8 @@ export const EditSelectHelper = {
         return path.list.find((leaf) => leaf.editable) as IUI
     },
 
-    findBounds(leaf: IUI, bounds: IBounds): AnswerType {
-        if (leaf.__.hittable && !leaf.__.locked && bounds.hit(leaf.__world)) {
+    findBounds(leaf: IUI, bounds: IBounds): Answer {
+        if (leaf.__.hittable && leaf.__.visible && !leaf.__.locked && bounds.hit(leaf.__world)) {
 
             if (leaf.__.editable) {
                 if (leaf.isBranch && !leaf.__.hitChildren) {

package/src/helper/EditorHelper.ts

@@ -1,5 +1,5 @@
-import { IGroup, ILeaf, IUI } from '@leafer-ui/interface'
-import { Group, Matrix } from '@leafer-ui/core'
+import { IGroup, IGroupInputData, ILeaf, IUI } from '@leafer-ui/interface'
+import { Group, Matrix } from '@leafer-ui/draw'
 
 
 const order = (a: ILeaf, b: ILeaf) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b)
@@ -7,10 +7,17 @@ const reverseOrder = (a: ILeaf, b: ILeaf) => b.parent.children.indexOf(b) - a.pa
 
 export const EditorHelper = {
 
-    group(list: IUI[], element?: IUI, group?: IGroup): IGroup {
+    group(list: IUI[], element?: IUI, userGroup?: IGroup | IGroupInputData): IGroup {
         list.sort(reverseOrder)
         const { app, parent } = list[0]
-        if (!group) group = new Group()
+
+        let group: IGroup
+        if (userGroup && (userGroup as IGroup).add) {
+            group = userGroup as IGroup
+        } else {
+            group = new Group(userGroup)
+        }
+
         parent.addAt(group, parent.children.indexOf(list[0]))
         list.sort(order)
 

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from '@leafer-in/resize'
+
 export { Editor } from './Editor'
 
 export { EditBox } from './display/EditBox'
@@ -6,23 +8,45 @@ export { EditSelect } from './display/EditSelect'
 export { SelectArea } from './display/SelectArea'
 export { Stroker } from './display/Stroker'
 
+
 export { EditorEvent } from './event/EditorEvent'
 export { EditorMoveEvent } from './event/EditorMoveEvent'
 export { EditorScaleEvent } from './event/EditorScaleEvent'
 export { EditorRotateEvent } from './event/EditorRotateEvent'
 export { EditorSkewEvent } from './event/EditorSkewEvent'
+export { EditorGroupEvent } from './event/EditorGroupEvent'
+export { InnerEditorEvent } from './event/InnerEditorEvent'
 
-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, 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) }
+    })
 }

package/src/svg.ts

@@ -0,0 +1,54 @@
+const filterStyle = `
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in="SourceGraphic" result="shape"/>`
+
+
+export const resizeSVG = `
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#f)">
+<g transform="rotate({{rotation}},12,12)">
+<path d="M7.5 8.0H8.5V5.9L6.8 7.2L7.5 8.0ZM3 11.4L2.3 10.6L1.3 11.4L2.3 12.2L3 11.4ZM7.5 10.4H6.5V11.4H7.5V10.4ZM16.5 10.4V11.4H17.5V10.4H16.5ZM16.5 8.0L17.1 7.2L15.5 5.9V8.0H16.5ZM21 11.4L21.6 12.2L22.6 11.4L21.6 10.6L21 11.4ZM16.5 14.9H15.5V16.9L17.1 15.7L16.5 14.9ZM16.5 12.4H17.5V11.4H16.5V12.4ZM7.5 12.4V11.4H6.5V12.4H7.5ZM7.5 14.9L6.8 15.7L8.5 16.9V14.9H7.5ZM6.8 7.2L2.3 10.6L3.6 12.2L8.1 8.7L6.8 7.2ZM8.5 10.4V8.0H6.5V10.4H8.5ZM16.5 9.4H7.5V11.4H16.5V9.4ZM17.5 10.4V8.0H15.5V10.4H17.5ZM15.8 8.7L20.3 12.2L21.6 10.6L17.1 7.2L15.8 8.7ZM20.3 10.6L15.8 14.1L17.1 15.7L21.6 12.2L20.3 10.6ZM17.5 14.9V12.4H15.5V14.9H17.5ZM7.5 13.4H16.5V11.4H7.5V13.4ZM8.5 14.9V12.4H6.5V14.9H8.5ZM2.3 12.2L6.8 15.7L8.1 14.1L3.6 10.6L2.3 12.2Z" fill="white"/>
+<path fill-rule="evenodd" d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter id="f" x="-1.6" y="3.9" width="27.2" height="16.9" filterUnits="userSpaceOnUse">
+${filterStyle}
+</filter>
+</defs>
+</svg>
+`
+
+export const rotateSVG = `
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#f)">
+<g transform="rotate(135,12,12),rotate({{rotation}},12,12)">
+<path d="M20.4 8H21.4L20.8 7.1L17.3 2.6L17 2.1L16.6 2.6L13.1 7.1L12.5 8H13.5H15.4C14.9 11.8 11.8 14.9 8 15.4V13.5V12.5L7.1 13.1L2.6 16.6L2.1 17L2.6 17.3L7.1 20.8L8 21.4V20.4V18.4C13.5 17.9 17.9 13.5 18.4 8H20.4Z" stroke="white"/>
+<path fill-rule="evenodd" d="M17 3L20.4 7.5H17.9C17.7 13.1 13.1 17.7 7.5 17.9V20.4L3 17L7.5 13.5V15.9C12.0 15.7 15.7 12.0 15.9 7.5H13.5L17 3Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter id="f" x="-1.6" y="-0.6" width="27.1" height="27.1" filterUnits="userSpaceOnUse">
+${filterStyle}
+</filter>
+</defs>
+</svg>
+`
+
+export const skewSVG = `
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#f)">
+<g transform="rotate(90,12,12),rotate({{rotation}},12,12)">
+<path d="M21 10.4L21 11.4L23.8 11.4L21.6 9.6L21 10.4ZM17 10.4V11.4L17 11.4L17 10.4ZM15.5 6L16.1 5.2L14.5 3.9V6H15.5ZM15.5 8.4V9.4H16.5V8.4H15.5ZM6 8.4V7.4H5V8.4H6ZM6 10.4H5V11.4H6V10.4ZM7 14.4V13.4L7 13.4L7 14.4ZM3 14.4L3 13.4L0.1 13.4L2.3 15.2L3 14.4ZM8.5 18.9L7.8 19.7L9.5 21.0V18.9H8.5ZM8.5 16.4V15.4H7.5V16.4H8.5ZM19 16.4V17.4H20V16.4H19ZM19 14.4H20V13.4H19V14.4ZM21 9.4L17 9.4L17 11.4L21 11.4L21 9.4ZM14.8 6.7L20.3 11.2L21.6 9.6L16.1 5.2L14.8 6.7ZM16.5 8.4V6H14.5V8.4H16.5ZM6 9.4H15.5V7.4H6V9.4ZM7 10.4V8.4H5V10.4H7ZM15.5 9.4H6V11.4H15.5V9.4ZM17 9.4H15.5V11.4H17V9.4ZM7 15.4H8.5V13.4H7V15.4ZM3 15.4L7 15.4L7 13.4L3 13.4L3 15.4ZM9.1 18.1L3.6 13.6L2.3 15.2L7.8 19.7L9.1 18.1ZM7.5 16.4V18.9H9.5V16.4H7.5ZM19 15.4H8.5V17.4H19V15.4ZM18 14.4V16.4H20V14.4H18ZM8.5 15.4H19V13.4H8.5V15.4Z" fill="white"/>
+<path fill-rule="evenodd" d="M17 10.4L21 10.4L15.5 6V8.4H6V10.4H15.5H17ZM8.5 14.4H7L3 14.4L8.5 18.9V16.4H19V14.4H8.5Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter x="-2.8" y="1.9" width="29.6" height="23.1" filterUnits="userSpaceOnUse" >
+${filterStyle}
+</filter>
+</defs>
+</svg>
+`

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
+        }
+    }
+
+}