@leafer-in/editor 1.0.0-rc.2 → 1.0.0-rc.20

package/src/editor/cursor.ts

@@ -0,0 +1,45 @@
+import { IObject, IUIEvent } from '@leafer-ui/interface'
+
+import { IEditor } from '@leafer-in/interface'
+import { MathHelper } from '@leafer-ui/core'
+
+import { EditDataHelper } from '../helper/EditDataHelper'
+
+
+const cacheCursors: IObject = {}
+
+export function updateCursor(editor: IEditor, e: IUIEvent): void {
+    const { editBox } = editor, point = editBox.enterPoint
+    if (!point || !editor.hasTarget || !editBox.visible) return
+    if (point.name === 'circle') return // 独立旋转按钮
+
+    let { rotation } = editBox
+    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.config
+    const { pointType } = point, { flippedX, flippedY } = editBox
+
+    let showResize = pointType === 'resize'
+    if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) showResize = false
+    const showSkew = skewable && !showResize && point.name === 'resize-line'
+
+    const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor)
+    rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45
+    rotation = Math.round(MathHelper.formatRotation(rotation, true) / 2) * 2
+
+    const { url, x, y } = cursor
+    const key = url + rotation
+
+    if (cacheCursors[key]) {
+        point.cursor = cacheCursors[key]
+    } else {
+        cacheCursors[key] = point.cursor = { url: toDataURL(url, rotation), x, y }
+    }
+}
+
+export function updateMoveCursor(editor: IEditor): void {
+    editor.editBox.rect.cursor = editor.config.moveCursor
+}
+
+
+function toDataURL(svg: string, rotation: number): string {
+    return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"'
+}

package/src/editor/simulate.ts

@@ -0,0 +1,14 @@
+import { IGroup, ILeaf } from '@leafer-ui/interface'
+import { Bounds } from '@leafer-ui/core'
+
+import { IEditor } from '@leafer-in/interface'
+
+
+export function simulate(editor: IEditor) {
+    const { simulateTarget, leafList: targetList } = editor
+    const { x, y, width, height } = new Bounds().setListWithFn(targetList.list, (leaf: ILeaf) => leaf.worldBoxBounds)
+
+    const parent = simulateTarget.parent = targetList.list[0].leafer.zoomLayer as IGroup // follow zoomLayer zoom / move
+    const { scaleX, scaleY, e: worldX, f: worldY } = parent.__world
+    simulateTarget.reset({ x: (x - worldX) / scaleX, y: (y - worldY) / scaleY, width: width / scaleX, height: height / scaleY })
+}

package/src/editor/target.ts

@@ -0,0 +1,37 @@
+import { LeafList } from '@leafer-ui/core'
+
+import { IEditor, IUI } from '@leafer-in/interface'
+
+import { simulate } from './simulate'
+import { updateMoveCursor } from './cursor'
+import { EditorEvent } from '../event/EditorEvent'
+
+
+export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
+    const { target } = editor
+    if (target) {
+        editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target as IUI)
+    } else {
+        editor.leafList.reset()
+    }
+
+    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }))
+
+    if (editor.hasTarget) {
+        editor.waitLeafer(() => {
+            if (editor.multiple) simulate(editor)
+            updateMoveCursor(editor)
+            editor.updateEditTool()
+            editor.update()
+            editor.listenTargetEvents()
+        })
+    } else {
+        editor.removeTargetEvents()
+    }
+}
+
+
+export function onHover(editor: IEditor, oldValue: IUI): void {
+    editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }))
+
+}

package/src/event/EditorEvent.ts

@@ -0,0 +1,33 @@
+import { IUI, IPointData } from '@leafer-ui/interface'
+import { Event } from '@leafer-ui/core'
+
+import { IEditor, IEditorEvent } from '@leafer-in/interface'
+
+
+function toList(value: IUI | IUI[]): IUI[] {
+    return value ? (value instanceof Array ? value : [value]) : []
+}
+
+export class EditorEvent extends Event implements IEditorEvent {
+
+    static SELECT = 'editor.select'
+    static HOVER = 'editor.hover'
+
+    declare readonly target: IUI
+    readonly editor: IEditor
+
+    readonly value: IUI | IUI[]
+    readonly oldValue: IUI | IUI[]
+
+    get list() { return toList(this.value) }
+    get oldList() { return toList(this.oldValue) }
+
+    readonly worldOrigin: IPointData
+    declare readonly origin: IPointData
+
+    constructor(type: string, data?: IEditorEvent) {
+        super(type)
+        if (data) Object.assign(this, data)
+    }
+
+}

package/src/event/EditorMoveEvent.ts

@@ -0,0 +1,17 @@
+import { IEditorMoveEvent } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+
+
+export class EditorMoveEvent extends EditorEvent implements IEditorMoveEvent {
+
+    static MOVE = 'editor.move'
+
+    readonly moveX: number
+    readonly moveY: number
+
+    constructor(type: string, data?: IEditorMoveEvent) {
+        super(type, data)
+    }
+
+}

package/src/event/EditorRotateEvent.ts

@@ -1,23 +1,17 @@
-import { IUI, IPointData } from '@leafer-ui/interface'
-import { IEditor, IEditorRotateEvent } from '@leafer-in/interface'
+import { IEditorRotateEvent } from '@leafer-in/interface'
 
-import { Event } from '@leafer-ui/core'
+import { EditorEvent } from './EditorEvent'
 
 
-export class EditorRotateEvent extends Event implements IEditorRotateEvent {
+export class EditorRotateEvent extends EditorEvent implements IEditorRotateEvent {
 
     static ROTATE = 'editor.rotate'
 
-    declare readonly target: IUI
-    readonly editor: IEditor
-
     // rotateOf(origin, rotation)
-    readonly origin: IPointData
     readonly rotation: number
 
     constructor(type: string, data?: IEditorRotateEvent) {
-        super(type)
-        if (data) Object.assign(this, data)
+        super(type, data)
     }
 
 }

package/src/event/EditorScaleEvent.ts

@@ -0,0 +1,27 @@
+import { IAround, IDragEvent, IMatrixData } from '@leafer-ui/interface'
+
+import { IDirection8, IEditorScaleEvent } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+
+
+export class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent {
+
+    static SCALE = 'editor.scale'
+
+    // scaleOf(origin, scaleX, scaleY, resize)
+    readonly scaleX: number
+    readonly scaleY: number
+    readonly transform?: IMatrixData
+
+    readonly drag: IDragEvent
+
+    readonly direction: IDirection8
+    readonly lockRatio: boolean
+    readonly around: IAround
+
+    constructor(type: string, data?: IEditorScaleEvent) {
+        super(type, data)
+    }
+
+}

package/src/event/EditorSkewEvent.ts

@@ -0,0 +1,18 @@
+import { IEditorSkewEvent } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+
+
+export class EditorSkewEvent extends EditorEvent implements IEditorSkewEvent {
+
+    static SKEW = 'editor.skew'
+
+    // skewOf(origin, skewX, skewY)
+    readonly skewX: number
+    readonly skewY: number
+
+    constructor(type: string, data?: IEditorSkewEvent) {
+        super(type, data)
+    }
+
+}

package/src/helper/EditDataHelper.ts

@@ -0,0 +1,182 @@
+import { IBoundsData, IPointData, IAround } from '@leafer-ui/interface'
+import { AroundHelper, PointHelper } from '@leafer-ui/core'
+
+import { IEditorScaleEvent, IDirection8, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
+
+
+const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
+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
+        const { width, height } = bounds
+
+        if (around) {
+            pointMove.x *= 2
+            pointMove.y *= 2
+        }
+
+        // 防止变为0
+        if (Math.abs(pointMove.x) === width) pointMove.x += 0.1
+        if (Math.abs(pointMove.y) === height) pointMove.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
+
+        switch (direction) {
+            case top:
+                scaleY = topScale
+                origin = { x: 0.5, y: 1 }
+                break
+            case right:
+                scaleX = rightScale
+                origin = { x: 0, y: 0.5 }
+                break
+            case bottom:
+                scaleY = bottomScale
+                origin = { x: 0.5, y: 0 }
+                break
+            case left:
+                scaleX = leftScale
+                origin = { x: 1, y: 0.5 }
+                break
+            case topLeft:
+                scaleY = topScale
+                scaleX = leftScale
+                origin = { x: 1, y: 1 }
+                break
+            case topRight:
+                scaleY = topScale
+                scaleX = rightScale
+                origin = { x: 0, y: 1 }
+                break
+            case bottomRight:
+                scaleY = bottomScale
+                scaleX = rightScale
+                origin = { x: 0, y: 0 }
+                break
+            case bottomLeft:
+                scaleY = bottomScale
+                scaleX = leftScale
+                origin = { x: 1, y: 0 }
+        }
+
+        if (lockRatio) {
+            const unlockSide = lockRatio === 'corner' && direction % 2
+            if (!unlockSide) {
+                if (scaleY !== 1) scaleX = scaleY
+                else scaleY = scaleX
+            }
+        }
+
+        toPoint(around || origin, bounds, origin)
+
+        return { origin, scaleX, scaleY, direction, lockRatio, around }
+    },
+
+    getRotateData(bounds: IBoundsData, direction: IDirection8, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent {
+        let origin: IPointData
+
+        switch (direction) {
+            case topLeft:
+                origin = { x: 1, y: 1 }
+                break
+            case topRight:
+                origin = { x: 0, y: 1 }
+                break
+            case bottomRight:
+                origin = { x: 0, y: 0 }
+                break
+            case bottomLeft:
+                origin = { x: 1, y: 0 }
+                break
+            default:
+                origin = { x: 0.5, y: 0.5 }
+        }
+
+        toPoint(around || origin, 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
+        let last: IPointData
+
+        switch (direction) {
+            case top:
+                last = { x: 0.5, y: 0 }
+                origin = { x: 0.5, y: 1 }
+                skewX = 1
+                break
+            case bottom:
+                last = { x: 0.5, y: 1 }
+                origin = { x: 0.5, y: 0 }
+                skewX = 1
+                break
+            case left:
+                last = { x: 0, y: 0.5 }
+                origin = { x: 1, y: 0.5 }
+                skewY = 1
+                break
+            case right:
+                last = { x: 1, y: 0.5 }
+                origin = { x: 0, y: 0.5 }
+                skewY = 1
+        }
+
+        const { x, y, width, height } = bounds
+
+        last.x = x + last.x * width
+        last.y = y + last.y * height
+
+        toPoint(around || origin, 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
+
+        return { origin, skewX, skewY }
+    },
+
+
+    getAround(around: IAround, altKey: boolean): IAround {
+        return (altKey && !around) ? 'center' : around
+    },
+
+    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: IDirection8, flipedX: boolean, flipedY: boolean): IDirection8 {
+        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

@@ -0,0 +1,34 @@
+import { IBounds, ILeafList, IUI } from '@leafer-ui/interface'
+import { Answer } from '@leafer-ui/core'
+
+const { No, Yes, NoAndSkip, YesAndSkip } = Answer
+
+export const EditSelectHelper = {
+
+    findOne(path: ILeafList): IUI {
+        return path.list.find((leaf) => leaf.editable) as IUI
+    },
+
+    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) {
+                    return leaf.__.hitSelf ? YesAndSkip : NoAndSkip
+                } else if (leaf.isFrame) {
+                    return bounds.includes(leaf.__layout.boxBounds, leaf.__world) ? YesAndSkip : No
+                } else {
+                    if (bounds.hit(leaf.__layout.boxBounds, leaf.__world) && leaf.__.hitSelf) return Yes
+                }
+            }
+
+            return No
+
+        } else {
+
+            return leaf.isBranch ? NoAndSkip : No
+
+        }
+    }
+
+}

package/src/helper/EditorHelper.ts

@@ -0,0 +1,73 @@
+import { IGroup, IGroupInputData, ILeaf, IUI } from '@leafer-ui/interface'
+import { Group, Matrix } from '@leafer-ui/core'
+
+
+const order = (a: ILeaf, b: ILeaf) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b)
+const reverseOrder = (a: ILeaf, b: ILeaf) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a)
+
+export const EditorHelper = {
+
+    group(list: IUI[], element?: IUI, userGroup?: IGroup | IGroupInputData): IGroup {
+        list.sort(reverseOrder)
+        const { app, parent } = list[0]
+
+        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)
+
+        const matrx = new Matrix(element.worldTransform)
+        matrx.divideParent(parent.worldTransform)
+        group.setTransform(matrx)
+        group.editable = true
+        group.hitChildren = false
+
+        app.lockLayout()
+        list.forEach(child => child.dropTo(group))
+        app.unlockLayout()
+
+        return group
+    },
+
+    ungroup(list: IUI[]): IUI[] {
+        const { app } = list[0]
+        const ungroupList: IUI[] = []
+
+        app.lockLayout()
+        list.forEach(leaf => {
+            if (leaf.isBranch) {
+                const { parent, children } = leaf
+                while (children.length) {
+                    ungroupList.push(children[0])
+                    children[0].dropTo(parent, parent.children.indexOf(leaf))
+                }
+                leaf.remove()
+            } else {
+                ungroupList.push(leaf)
+            }
+        })
+        app.unlockLayout()
+
+        return ungroupList
+    },
+
+    toTop(list: IUI[]): void {
+        list.sort(order)
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.add(leaf)
+        })
+    },
+
+    toBottom(list: IUI[]): void {
+        list.sort(reverseOrder)
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.addAt(leaf, 0)
+        })
+    }
+
+}

package/src/index.ts

@@ -1,5 +1,30 @@
+export * from '@leafer-ui/scale'
+
 export { Editor } from './Editor'
-export { EditorResizeEvent } from './event/EditorResizeEvent'
+
+export { EditBox } from './display/EditBox'
+export { EditPoint } from './display/EditPoint'
+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 { LineTool } from './tool/LineTool'
-export { RectTool } from './tool/RectTool'
+export { EditorSkewEvent } from './event/EditorSkewEvent'
+
+export { LineEditTool } from './tool/LineEditTool'
+export { EditTool } from './tool/EditTool'
+
+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 { Editor } from './Editor'
+
+Creator.editor = function (options?: IEditorConfig): IEditor {
+    return new Editor(options)
+}

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

@@ -0,0 +1,75 @@
+import { IEditor, IEditorScaleEvent, IEditorRotateEvent, IEditTool, IEditorSkewEvent, IEditorMoveEvent } from '@leafer-in/interface'
+
+
+export class EditTool implements IEditTool {
+
+    static list: IEditTool[] = []
+
+    public tag = 'EditTool'
+
+    onMove(e: IEditorMoveEvent): void {
+        const { moveX, moveY, editor } = e
+        const { app, list } = editor
+        app.lockLayout()
+        list.forEach(target => {
+            target.moveWorld(moveX, moveY)
+        })
+        app.unlockLayout()
+    }
+
+    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'
+            if (transform) {
+                target.transformWorld(transform, resize)
+            } else {
+                target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize)
+            }
+        })
+        app.unlockLayout()
+    }
+
+    onRotate(e: IEditorRotateEvent): void {
+        const { rotation, transform, worldOrigin, editor } = e
+        const { app, list } = editor
+        app.lockLayout()
+        list.forEach(target => {
+            const resize = editor.getEditSize(target) === 'size'
+            if (transform) {
+                target.transformWorld(transform, resize)
+            } else {
+                target.rotateOfWorld(worldOrigin, rotation)
+            }
+        })
+        app.unlockLayout()
+    }
+
+    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'
+            if (transform) {
+                target.transformWorld(transform, resize)
+            } else {
+                target.skewOfWorld(worldOrigin, skewX, skewY, resize)
+            }
+        })
+        app.unlockLayout()
+    }
+
+    update(editor: IEditor) {
+        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 })
+    }
+
+}