@leafer-in/editor 1.0.0-rc.3 → 1.0.0-rc.30

package/src/Editor.ts

@@ -1,232 +1,483 @@
-import { IGroupInputData, IPolygon, IUI, IEventListenerId } from '@leafer-ui/interface'
-import { IEditor, IEditorConfig, IEditorTool, IDirection8 } from '@leafer-in/interface'
+import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign } from '@leafer-ui/interface'
+import { Group, Rect, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper } from '@leafer-ui/draw'
+import { DragEvent, RotateEvent, KeyEvent, ZoomEvent } from '@leafer-ui/core'
 
-import { Group, Rect, Polygon, DragEvent, PointHelper, PointerEvent, KeyEvent, RotateEvent, DataHelper, MathHelper, RenderEvent } from '@leafer-ui/core'
+import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor } from '@leafer-in/interface'
 
-import { getResizeData } from './resize'
-import { updateCursor } from './cursor'
+import { EditorMoveEvent } from './event/EditorMoveEvent'
+import { EditorScaleEvent } from './event/EditorScaleEvent'
+import { EditorRotateEvent } from './event/EditorRotateEvent'
+import { EditorSkewEvent } from './event/EditorSkewEvent'
 
-import { LineTool } from './tool/LineTool'
-import { RectTool } from './tool/RectTool'
+import { EditSelect } from './display/EditSelect'
+import { EditBox } from './display/EditBox'
+import { EditMask } from './display/EditMask'
 
-import { EditorResizeEvent } from './event/EditorResizeEvent'
-import { EditorRotateEvent } from './event/EditorRotateEvent'
+import { config } from './config'
+
+import { onTarget, onHover } from './editor/target'
+import { targetAttr } from './decorator/data'
+import { EditorHelper } from './helper/EditorHelper'
+import { EditDataHelper } from './helper/EditDataHelper'
+import { simulate } from './editor/simulate'
+import { updateCursor } from './editor/cursor'
+import { EditToolCreator } from './tool/EditToolCreator'
+import { InnerEditorEvent } from './event/InnerEditorEvent'
+import { EditorGroupEvent } from './event/EditorGroupEvent'
 
 
 export class Editor extends Group implements IEditor {
 
-    public config: IEditorConfig = {
-        type: 'pc',
-        stroke: '#836DFF',
-        pointFill: '#FFFFFF',
-        pointSize: 10,
-        pointRadius: 10,
-        rotateGap: 90,
-        hideOnMove: false,
-        moveCursor: 'move',
-        resizeType: 'auto',
-        resizeCursor: ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'],
-        rotateCursor: ['ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize', 'n-resize'],
-        resizeable: true,
-        rotateable: true
+    public config = config
+
+    public get mergeConfig(): IEditorConfig {
+        const { element, config } = this
+        return this.single && element.editConfig ? { ...config, ...element.editConfig } : config // 实时合并，后期可优化
     }
 
-    public resizePoints: IUI[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
-    public rotatePoints: IUI[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
-    public resizeLines: IUI[] = [] // top, right, bottom, left
+    @targetAttr(onHover)
+    public hoverTarget?: IUI
 
-    public targetRect: IUI = new Rect({ hitFill: 'all', hitRadius: 5 })
-    public rect: IPolygon = new Polygon({ hittable: false, strokeAlign: 'center' })
-    public circle: IUI = new Rect({ around: 'center', hitRadius: 10 }) // rotate point
+    @targetAttr(onTarget)
+    public target?: IUI | IUI[]
 
-    public tool: IEditorTool
+    // 列表
 
-    private _target: IUI
-    public get target(): IUI { return this._target }
-    public set target(value: IUI) {
-        this.__removeTargetEvents()
-        this.visible = !!value
+    public get list(): IUI[] { return this.leafList.list as IUI[] }
+    public leafList: ILeafList = new LeafList() // from target
+    public openedGroupList: ILeafList = new LeafList()
 
-        this._target = value
-        if (value) this.onTarget()
-    }
+    // 状态
+
+    public get editing(): boolean { return !!this.list.length }
+    public innerEditing: boolean
+    public get groupOpening(): boolean { return !!this.openedGroupList.length }
+
+    public get multiple(): boolean { return this.list.length > 1 }
+    public get single(): boolean { return this.list.length === 1 }
+
+    public get dragging(): boolean { return this.editBox.dragging }
+
+    // 组件
+
+    public get element() { return this.multiple ? this.simulateTarget : this.list[0] as IUI }
+    public simulateTarget: IUI = new Rect({ visible: false })
+
+    public editBox: IEditBox = new EditBox(this)
+    public get buttons() { return this.editBox.buttons }
+
+    public editTool?: IEditTool
+
+    public innerEditor?: IInnerEditor
+    public editToolList: IObject = {}
+
+    public selector: EditSelect = new EditSelect(this)
+    public editMask: EditMask = new EditMask(this)
+
+    public dragStartPoint: IPointData
 
-    public enterPoint: IUI
+    public targetEventIds: IEventListenerId[] = []
 
-    protected __eventIds: IEventListenerId[] = []
-    protected __targetEventIds: IEventListenerId[] = []
 
     constructor(userConfig?: IEditorConfig, data?: IGroupInputData) {
         super(data)
         if (userConfig) this.config = DataHelper.default(userConfig, this.config)
-        this.init()
+        this.addMany(this.editMask, this.selector, this.editBox)
     }
 
-    protected init() {
-        let rotatePoint: IUI, resizeLine: IUI, resizePoint: IUI
-        const { resizePoints, rotatePoints, resizeLines } = this
+    // select 
 
-        for (let i = 0; i < 8; i++) {
-            rotatePoint = new Rect({ around: 'center', width: 30, height: 30, hitRadius: 10, hitFill: "all" })
-            rotatePoints.push(rotatePoint)
-            this.__listenPointEvents(rotatePoint, 'rotate', i)
-
-            if (i % 2) {
-                resizeLine = new Rect({ around: 'center', width: 10, height: 10, hitFill: "all" })
-                resizeLines.push(resizeLine)
-                this.__listenPointEvents(resizeLine, 'resize', i)
-            }
+    public select(target: IUI | IUI[]): void {
+        this.target = target
+    }
 
-            resizePoint = new Rect({ around: 'center', hitRadius: 5 })
-            resizePoints.push(resizePoint)
-            this.__listenPointEvents(resizePoint, 'resize', i)
-        }
+    public cancel(): void {
+        this.target = null
+    }
 
-        this.__listenPointEvents(this.circle, 'rotate', 1)
-        this.addMany(...rotatePoints, this.targetRect, this.rect, this.circle, ...resizeLines, ...resizePoints)
+    // item
 
-        this.__listenEvents()
+    public hasItem(item: IUI): boolean {
+        return this.leafList.has(item)
     }
 
+    public addItem(item: IUI): void {
+        if (!this.hasItem(item) && !item.locked) this.leafList.add(item), this.target = this.leafList.list as IUI[]
+    }
 
-    protected onTarget(): void {
-        this.tool = this.getTool(this.target)
-        this.waitLeafer(() => {
-            this.update()
-            this.updateMoveCursor()
-            this.__listenTargetEvents()
-        })
+    public removeItem(item: IUI): void {
+        if (this.hasItem(item)) this.leafList.remove(item), this.target = this.leafList.list as IUI[]
     }
 
-    public getTool(value: IUI): IEditorTool {
-        return (value.tag === 'Line' && value.resizeable) ? LineTool : RectTool
+    public shiftItem(item: IUI): void {
+        this.hasItem(item) ? this.removeItem(item) : this.addItem(item)
     }
 
+    // update
+
     public update(): void {
-        if (!this.target) return
-        this.tool.update(this)
+        if (this.editing) {
+            if (this.innerEditing) this.innerEditor.update()
+            this.editTool.update()
+            this.selector.update()
+        }
     }
 
+    public updateEditBox(): void {
+        if (this.multiple) simulate(this)
+        this.update()
+    }
 
-    protected onDrag(e: DragEvent): void {
-        const { resizeable, rotateable } = this.config
-        if (e.metaKey || e.ctrlKey || !resizeable) {
-            if (rotateable) this.onRotate(e)
-        } else {
-            this.onResize(e)
+    public updateEditTool(): void {
+        const tool = this.editTool
+        if (tool) {
+            this.editBox.unload()
+            tool.unload()
+            this.editTool = null
+        }
+
+        if (this.editing) {
+            const tag = this.single ? this.list[0].editOuter as string : 'EditTool'
+            this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this)
+            this.editBox.load()
+            this.editTool.load()
         }
     }
 
-    protected onMove(e: DragEvent): void {
-        const { target } = this
-        const { x, y } = e.getLocalMove(target)
+
+    // get
+
+    public getEditSize(_ui: IUI): IEditSize {
+        return this.mergeConfig.editSize
+    }
+
+    // operate
+
+    public onMove(e: DragEvent): void {
+        const total = { x: e.totalX, y: e.totalY }
+
         if (e.shiftKey) {
-            if (Math.abs(x) > Math.abs(y)) {
-                target.x += x
-            } else {
-                target.y += y
+            if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0
+            else total.x = 0
+        }
+
+        this.move(DragEvent.getValidMove(this.element, this.dragStartPoint, total))
+    }
+
+    public onScale(e: DragEvent | ZoomEvent): void {
+        const { element } = this
+
+        if (e instanceof ZoomEvent) {
+            if (this.mergeConfig.resizeable === 'zoom') {
+                e.stop()
+                this.scaleOf(element.getInnerPoint(e), e.scale, e.scale)
             }
         } else {
-            target.x += x
-            target.y += y
+
+            const { direction } = e.current as IEditPoint
+            let { around, lockRatio } = this.mergeConfig
+            if (e.shiftKey || element.lockRatio) lockRatio = true
+
+            const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey))
+
+            if (this.editTool.onScaleWithDrag) {
+                data.drag = e
+                this.scaleWithDrag(data)
+            } else {
+                this.scaleOf(data.origin, data.scaleX, data.scaleY)
+            }
+
         }
+
     }
 
-    protected onRotate(e: DragEvent | RotateEvent): void {
-        const { target } = this
-        const { rotateGap } = this.config
-        const { x, y, width, height } = target.boxBounds
-        const origin = { x: x + width / 2, y: y + height / 2 }
+    public onRotate(e: DragEvent | RotateEvent): void {
+        const { skewable, around, rotateGap } = this.mergeConfig
+        const { direction, name } = e.current as IEditPoint
+        if (skewable && name === 'resize-line') return this.onSkew(e as DragEvent)
 
-        let rotation: number
+        const { element } = this
+        let origin: IPointData, rotation: number
 
         if (e instanceof RotateEvent) {
-            rotation = e.rotation
+            if (this.mergeConfig.rotateable === 'rotate') {
+                e.stop()
+                rotation = e.rotation, origin = element.getInnerPoint(e)
+            } else return
         } else {
-            const point = e
-            const last = { x: point.x - e.moveX, y: point.y - e.moveY }
-            rotation = PointHelper.getChangeAngle(last, target.getWorldPoint(origin), point)
+            const last = { x: e.x - e.moveX, y: e.y - e.moveY }
+            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (around || 'center'))
+            rotation = data.rotation
+            origin = data.origin
         }
 
-        rotation = MathHelper.getGapRotation(target.rotation + rotation, rotateGap) - target.rotation
+        rotation = MathHelper.getGapRotation(rotation, rotateGap, element.rotation)
+        if (!rotation) return
+
+        if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
+
+        this.rotateOf(origin, MathHelper.float(rotation, 2))
+    }
+
+
+    public onSkew(e: DragEvent): void {
+        const { element } = this
+        const { around } = this.mergeConfig
 
-        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { editor: this, target, origin, rotation })
+        const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, (e.current as IEditPoint).direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey))
+        if (!skewX && !skewY) return
 
-        this.tool.rotate(event)
-        target.emitEvent(event)
+        this.skewOf(origin, skewX, skewY)
     }
 
-    public onResize(e: DragEvent): void {
-        const { target } = this
-        const { __direction } = e.current.__
 
-        let { resizeType, around, lockRatio } = this.config
+    // transform
 
-        if (e.shiftKey) lockRatio = true
-        if (e.altKey && !around) around = 'center'
+    public move(x: number | IPointData, y = 0): void {
+        if (!this.mergeConfig.moveable || this.element.locked) return
 
-        if (resizeType === 'auto') resizeType = target.resizeable ? 'size' : 'scale'
-        const data = getResizeData(target.boxBounds, __direction, e.getInnerMove(this.targetRect), lockRatio, around)
+        const { element } = this
+        const world = element.getWorldPointByLocal(typeof x === 'object' ? { ...x } : { x, y }, null, true)
+        const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y })
 
-        const event = new EditorResizeEvent(EditorResizeEvent.RESIZE, { ...data, target, editor: this, dragEvent: e, resizeType })
+        this.editTool.onMove(event)
+        this.emitEvent(event)
 
-        this.tool.resize(event)
-        target.emitEvent(event)
+        if (this.multiple) element.move(x, y)
     }
 
+    public scaleWithDrag(data: IEditorScaleEvent): void {
+        if (!this.mergeConfig.resizeable || this.element.locked) return
 
-    public updateMoveCursor(): void {
-        this.targetRect.cursor = this.config.moveCursor
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(data.origin)
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin })
+
+        this.editTool.onScaleWithDrag(event)
+        this.emitEvent(event)
     }
 
 
-    protected __listenEvents(): void {
-        this.__eventIds = [
-            this.targetRect.on_(DragEvent.START, () => { this.opacity = this.config.hideOnMove ? 0 : 1 }),
-            this.targetRect.on_(DragEvent.DRAG, this.onMove, this),
-            this.targetRect.on_(DragEvent.END, () => { this.opacity = 1 }),
-            this.targetRect.on_(PointerEvent.ENTER, this.updateMoveCursor, this)
-        ]
+    public scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
+        if (!this.mergeConfig.resizeable || this.element.locked) return
+
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin))
+
+        let transform: Matrix
+
+        if (this.multiple) {
+            const oldMatrix = new Matrix(element.worldTransform)
+            element.scaleOf(origin, scaleX, scaleY)
+            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
+        }
+
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform })
+
+        this.editTool.onScale(event)
+        this.emitEvent(event)
     }
 
-    protected __removeListenEvents(): void {
-        this.targetRect.off_(this.__eventIds)
-        this.__eventIds.length = 0
+    public rotateOf(origin: IPointData | IAlign, rotation: number): void {
+        if (!this.mergeConfig.rotateable || this.element.locked) return
+
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin))
+
+
+        let transform: Matrix
+
+        if (this.multiple) {
+            const oldMatrix = new Matrix(element.worldTransform)
+            element.rotateOf(origin, rotation)
+            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
+        }
+
+        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform })
+
+        this.editTool.onRotate(event)
+        this.emitEvent(event)
+    }
+
+    public skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
+        if (!this.mergeConfig.skewable || this.element.locked) return
+
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin))
+
+        let transform: Matrix
+
+        if (this.multiple) {
+            const oldMatrix = new Matrix(element.worldTransform)
+            element.skewOf(origin, skewX, skewY)
+            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
+        }
+
+        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, {
+            target: element, editor: this, skewX, skewY, transform, worldOrigin
+        })
+
+        this.editTool.onSkew(event)
+        this.emitEvent(event)
+    }
+
+    // group
+
+    public group(userGroup?: IGroup | IGroupInputData): IGroup {
+        if (this.multiple) {
+            this.target = EditorHelper.group(this.list, this.element, userGroup)
+            this.emitGroupEvent(EditorGroupEvent.GROUP, this.target as IGroup)
+        }
+        return this.target as IGroup
+    }
+
+    public ungroup(): IUI[] {
+        const { list } = this
+        if (list.length) {
+            list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.BEFORE_UNGROUP, item as IGroup))
+            this.target = EditorHelper.ungroup(list)
+            list.forEach(item => item.isBranch && this.emitGroupEvent(EditorGroupEvent.UNGROUP, item as IGroup))
+        }
+        return this.list
+    }
+
+    public openGroup(group: IGroup): void {
+        this.openedGroupList.add(group)
+        group.hitChildren = true
+        this.emitGroupEvent(EditorGroupEvent.OPEN, group)
+    }
+
+    public closeGroup(group: IGroup): void {
+        this.openedGroupList.remove(group)
+        group.hitChildren = false
+        this.emitGroupEvent(EditorGroupEvent.CLOSE, group)
+    }
+
+    public checkOpenedGroups(): void {
+        const opened = this.openedGroupList
+        if (opened.length) {
+            let { list } = opened
+            if (this.editing) list = [], opened.forEach(item => this.list.every(leaf => !LeafHelper.hasParent(leaf, item)) && list.push(item))
+            list.forEach(item => this.closeGroup(item as IGroup))
+        }
+        if (this.editing && !this.selector.dragging) this.checkDeepSelect()
+    }
+
+    public checkDeepSelect(): void {
+        let parent: IGroup, { list } = this
+        for (let i = 0; i < list.length; i++) {
+            parent = list[i].parent
+            while (parent && !parent.hitChildren) {
+                this.openGroup(parent)
+                parent = parent.parent
+            }
+        }
+    }
+
+    public emitGroupEvent(type: string, group: IGroup): void {
+        const event = new EditorGroupEvent(type, { editTarget: group })
+        this.emitEvent(event)
+        group.emitEvent(event)
     }
 
+    // inner
+
+    public openInnerEditor(target?: IUI): void {
+        if (target) this.target = target
+        if (this.single) {
+            const editTarget = this.element
+            const tag = editTarget.editInner
+            if (tag && EditToolCreator.list[tag]) {
+                this.editTool.unload()
+                this.innerEditing = true
+                this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this)
+                this.innerEditor.editTarget = editTarget
+
+                this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN)
+                this.innerEditor.load()
+                this.emitInnerEvent(InnerEditorEvent.OPEN)
+            }
+        }
+    }
+
+    public closeInnerEditor(): void {
+        if (this.innerEditing) {
+            this.innerEditing = false
+
+            this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE)
+            this.innerEditor.unload()
+            this.emitInnerEvent(InnerEditorEvent.CLOSE)
+
+            this.editTool.load()
+            this.innerEditor = null
+        }
+    }
 
-    protected __listenPointEvents(point: IUI, type: 'rotate' | 'resize', direction: IDirection8): void {
-        point.__.__direction = direction
-        const resize = point.__.__isResizePoint = type === 'resize'
-        point.on_(DragEvent.DRAG, resize ? this.onDrag : this.onRotate, this) // i % 2 ? this.onSkew : 
-        point.on_(PointerEvent.LEAVE, () => this.enterPoint = null)
-        point.on_(PointerEvent.ENTER, (e) => { this.enterPoint = point; updateCursor(this, e) })
+    public emitInnerEvent(type: string): void {
+        const { innerEditor } = this
+        const { editTarget } = innerEditor
+        const event = new InnerEditorEvent(type, { editTarget, innerEditor })
+        this.emitEvent(event)
+        editTarget.emitEvent(event)
     }
 
+    // lock
 
-    protected __listenTargetEvents(): void {
-        if (this.target) {
-            const { leafer } = this.target
-            this.__targetEventIds = [
+    public lock(): void {
+        this.list.forEach(leaf => leaf.locked = true)
+        this.update()
+    }
+
+    public unlock(): void {
+        this.list.forEach(leaf => leaf.locked = false)
+        this.update()
+    }
+
+    // level
+
+    public toTop(): void {
+        if (this.list.length) {
+            EditorHelper.toTop(this.list)
+            this.leafList.update()
+        }
+    }
+
+    public toBottom(): void {
+        if (this.list.length) {
+            EditorHelper.toBottom(this.list)
+            this.leafList.update()
+        }
+    }
+
+    // event 
+
+    public listenTargetEvents(): void {
+        if (!this.targetEventIds.length) {
+            const { leafer } = this.list[0]
+            this.targetEventIds = [
                 leafer.on_(RenderEvent.START, this.update, this),
-                leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e) })
+                leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e: KeyEvent) => { updateCursor(this, e) }),
+                leafer.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
             ]
         }
     }
 
-    protected __removeTargetEvents(): void {
-        if (this.__targetEventIds.length) {
-            const { leafer } = this.target
-            if (leafer) leafer.off_(this.__targetEventIds)
-            this.__targetEventIds.length = 0
+    public removeTargetEvents(): void {
+        const { targetEventIds } = this
+        if (targetEventIds.length) {
+            this.off_(targetEventIds)
+            targetEventIds.length = 0
         }
     }
 
-
     public destroy(): void {
-        this.__removeListenEvents()
-        this._target = null
-        super.destroy()
+        if (!this.destroyed) {
+            this.simulateTarget.destroy()
+            Object.values(this.editToolList).forEach(item => item.destroy())
+            this.editToolList = {}
+            this.target = this.hoverTarget = this.simulateTarget = this.editTool = this.innerEditor = null
+            super.destroy()
+        }
     }
 
 }

package/src/config.ts

@@ -0,0 +1,38 @@
+import { IEditorConfig } from '@leafer-in/interface'
+import { resizeSVG, rotateSVG, skewSVG } from './svg'
+
+
+export const config: IEditorConfig = {
+    editSize: 'size',
+    keyEvent: true,
+
+    stroke: '#836DFF',
+    strokeWidth: 2,
+
+    pointFill: '#FFFFFF',
+    pointSize: 10,
+    pointRadius: 16,
+
+    rotateGap: 45,
+
+    buttonsDirection: 'bottom',
+    buttonsMargin: 12,
+
+    hideOnSmall: true,
+
+    moveCursor: 'move',
+    resizeCursor: { url: resizeSVG, x: 12, y: 12 },
+    rotateCursor: { url: rotateSVG, x: 12, y: 12 },
+    skewCursor: { url: skewSVG, x: 12, y: 12 },
+
+    selector: true,
+    hover: true,
+    select: 'press',
+    openInner: 'double',
+    boxSelect: true,
+
+    moveable: true,
+    resizeable: true,
+    rotateable: true,
+    skewable: true
+}