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

package/src/display/Stroker.ts

@@ -1,5 +1,5 @@
 import { IUI, ILeaferCanvas, IRenderOptions, IRectInputData } from '@leafer-ui/interface'
-import { Paint, UI, MatrixHelper } from '@leafer-ui/core'
+import { Paint, UI, MatrixHelper } from '@leafer-ui/draw'
 
 import { IStroker } from '@leafer-in/interface'
 
@@ -24,8 +24,7 @@ export class Stroker extends UI implements IStroker {
     }
 
     public setTarget(target: IUI | IUI[], style: IRectInputData): void {
-        const { stroke, strokeWidth } = style
-        this.set({ stroke, strokeWidth })
+        this.set(style)
         this.target = target
     }
 
@@ -34,40 +33,44 @@ export class Stroker extends UI implements IStroker {
         if (list.length) {
 
             let leaf: IUI
-            const { stroke, strokeWidth } = this.__
+            const { stroke, strokeWidth, fill } = this.__
             const { bounds } = options
 
             for (let i = 0; i < list.length; i++) {
                 leaf = list[i]
                 if (bounds && bounds.hit(leaf.__world, options.matrix)) {
 
-                    let drewPath: boolean
+                    const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY)
 
-                    if (leaf.__.editSize === 'scale') {
-                        const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY)
-                        if (aScaleX !== aScaleY) { // need no scale stroke
-                            copy(matrix, leaf.__world)
-                            scale(matrix, 1 / aScaleX, 1 / aScaleY)
+                    if (aScaleX !== aScaleY) { // need no scale stroke, use rect path
 
-                            canvas.setWorld(matrix, options.matrix)
-                            canvas.beginPath()
-                            this.__.strokeWidth = strokeWidth
+                        copy(matrix, leaf.__world)
+                        scale(matrix, 1 / aScaleX, 1 / aScaleY)
 
-                            const { x, y, width, height } = leaf.__layout.boxBounds
-                            canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY)
+                        canvas.setWorld(matrix, options.matrix)
+                        canvas.beginPath()
+                        this.__.strokeWidth = strokeWidth
 
-                            drewPath = true
-                        }
-                    }
+                        const { x, y, width, height } = leaf.__layout.boxBounds
+                        canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY)
+
+                    } else {
 
-                    if (!drewPath) {
                         canvas.setWorld(leaf.__world, options.matrix)
                         canvas.beginPath()
-                        leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas)
+
+                        if (leaf.__.__useArrow) {
+                            leaf.__drawPath(canvas)
+                        } else {
+                            leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas)
+                        }
+
                         this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX)
+
                     }
 
-                    typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas, options) : Paint.strokes(stroke, this, canvas, options)
+                    if (stroke) typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas)
+                    if (fill) typeof fill === 'string' ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas)
                 }
             }
 

package/src/editor/cursor.ts

@@ -1,58 +1,45 @@
-import { ICursorType, IUIEvent } from '@leafer-ui/interface'
-import { IDirection8, IEditor } from '@leafer-in/interface'
+import { IObject, IUIEvent } from '@leafer-ui/interface'
+
+import { IEditor } from '@leafer-in/interface'
+import { MathHelper } from '@leafer-ui/draw'
 
 import { EditDataHelper } from '../helper/EditDataHelper'
 
 
-const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
+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 || !editor.editing || !editBox.visible) return
+    if (point.name === 'circle') return // 独立旋转按钮
 
     let { rotation } = editBox
-    let { resizeCursor, rotateCursor, resizeable, rotateable } = editor.config
-    const { direction, pointType } = point
+    const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig
+    const { pointType } = point, { flippedX, flippedY } = editBox
 
-    editBox.enterPoint = point
-    const isResizePoint = pointType === 'resize'
+    let showResize = pointType === 'resize'
+    if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) showResize = false
+    const showSkew = skewable && !showResize && point.name === 'resize-line'
 
-    if (isResizePoint && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) resizeCursor = rotateCursor
+    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
 
-    if (editBox.flipped) {
-        const { flippedX, flippedY } = editBox
-        mirrorCursors(resizeCursor = [...resizeCursor], flippedX, flippedY)
-        mirrorCursors(rotateCursor = [...rotateCursor], flippedY, flippedX)
-        if (editBox.flippedOne) rotation = -rotation
-    }
+    const { url, x, y } = cursor
+    const key = url + rotation
 
-    const index = EditDataHelper.getRotateDirection(direction, rotation)
-    point.cursor = isResizePoint ? resizeCursor[index] : rotateCursor[index]
+    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
+    editor.editBox.rect.cursor = editor.mergeConfig.moveCursor
 }
 
 
-export function mirrorCursors(mirror: ICursorType[], mirrorX: boolean, mirrorY: boolean): void {
-    if (mirrorX) {
-        const topCursor = mirror[top], topLeftCursor = mirror[topLeft], topRightCursor = mirror[topRight]
-        mirror[top] = mirror[bottom]
-        mirror[topLeft] = mirror[bottomLeft]
-        mirror[topRight] = mirror[bottomRight]
-        mirror[bottom] = topCursor
-        mirror[bottomLeft] = topLeftCursor
-        mirror[bottomRight] = topRightCursor
-    }
-
-    if (mirrorY) {
-        const leftCursor = mirror[left], topLeftCursor = mirror[topLeft], bottomLeftCursor = mirror[bottomLeft]
-        mirror[left] = mirror[right]
-        mirror[topLeft] = mirror[topRight]
-        mirror[bottomLeft] = mirror[bottomRight]
-        mirror[right] = leftCursor
-        mirror[topRight] = topLeftCursor
-        mirror[bottomRight] = bottomLeftCursor
-    }
+function toDataURL(svg: string, rotation: number): string {
+    return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"'
 }

package/src/editor/simulate.ts

@@ -1,5 +1,5 @@
 import { IGroup, ILeaf } from '@leafer-ui/interface'
-import { Bounds } from '@leafer-ui/core'
+import { Bounds } from '@leafer-ui/draw'
 
 import { IEditor } from '@leafer-in/interface'
 
@@ -8,7 +8,7 @@ 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
+    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

@@ -1,4 +1,4 @@
-import { LeafList } from '@leafer-ui/core'
+import { LeafList } from '@leafer-ui/draw'
 
 import { IEditor, IUI } from '@leafer-in/interface'
 
@@ -16,8 +16,9 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     }
 
     editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }))
+    editor.checkOpenedGroups()
 
-    if (editor.hasTarget) {
+    if (editor.editing) {
         editor.waitLeafer(() => {
             if (editor.multiple) simulate(editor)
             updateMoveCursor(editor)
@@ -26,6 +27,7 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
             editor.listenTargetEvents()
         })
     } else {
+        editor.updateEditTool()
         editor.removeTargetEvents()
     }
 }

package/src/event/EditorEvent.ts

@@ -1,9 +1,13 @@
 import { IUI, IPointData } from '@leafer-ui/interface'
-import { Event } from '@leafer-ui/core'
+import { Event } from '@leafer-ui/draw'
 
 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'
@@ -15,6 +19,9 @@ export class EditorEvent extends Event implements IEditorEvent {
     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
 

package/src/event/EditorGroupEvent.ts

@@ -0,0 +1,23 @@
+import { IEditorGroupEvent } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+import { IGroup } from '@leafer-ui/interface'
+import { } from '../tool/InnerEditor'
+
+
+export class EditorGroupEvent extends EditorEvent implements IEditorGroupEvent {
+
+    static GROUP = 'editor.group'
+    static BEFORE_UNGROUP = 'editor.before_ungroup'
+    static UNGROUP = 'editor.ungroup'
+
+    static OPEN = 'editor.open_group'
+    static CLOSE = 'editor.close_group'
+
+    readonly editTarget: IGroup
+
+    constructor(type: string, data?: IEditorGroupEvent) {
+        super(type, data)
+    }
+
+}

package/src/event/EditorScaleEvent.ts

@@ -1,6 +1,7 @@
 import { IAround, IDragEvent, IMatrixData } from '@leafer-ui/interface'
 
-import { IDirection8, IEditorScaleEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent } from '@leafer-in/interface'
+import { Direction9 } from '@leafer-ui/draw'
 
 import { EditorEvent } from './EditorEvent'
 
@@ -16,7 +17,7 @@ export class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent {
 
     readonly drag: IDragEvent
 
-    readonly direction: IDirection8
+    readonly direction: Direction9
     readonly lockRatio: boolean
     readonly around: IAround
 

package/src/event/InnerEditorEvent.ts

@@ -0,0 +1,23 @@
+import { IInnerEditorEvent, IInnerEditor } from '@leafer-in/interface'
+
+import { EditorEvent } from './EditorEvent'
+import { IUI } from '@leafer-ui/interface'
+import { } from '../tool/InnerEditor'
+
+
+export class InnerEditorEvent extends EditorEvent implements IInnerEditorEvent {
+
+    static BEFORE_OPEN = 'innerEditor.before_open'
+    static OPEN = 'innerEditor.open'
+
+    static BEFORE_CLOSE = 'innerEditor.before_close'
+    static CLOSE = 'innerEditor.close'
+
+    readonly editTarget: IUI
+    readonly innerEditor: IInnerEditor
+
+    constructor(type: string, data?: IInnerEditorEvent) {
+        super(type, data)
+    }
+
+}

package/src/helper/EditDataHelper.ts

@@ -1,16 +1,16 @@
-import { IBoundsData, IPointData, IAround } from '@leafer-ui/interface'
-import { AroundHelper, PointHelper } from '@leafer-ui/core'
+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, 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,99 +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) {
-            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)
+        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
         }
 
@@ -131,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
@@ -147,6 +151,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>
+`