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

package/src/display/EditSelect.ts

@@ -1,5 +1,6 @@
-import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId } from '@leafer-ui/interface'
-import { Bounds, PointerEvent, DragEvent, MoveEvent, LeafList, Group, ZoomEvent } from '@leafer-ui/core'
+import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId, IPointerEvent, IFunction } from '@leafer-ui/interface'
+import { Bounds, LeafList, Group } from '@leafer-ui/draw'
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent } from '@leafer-ui/core'
 
 import { IEditSelect, IEditor, ISelectArea, IStroker } from '@leafer-in/interface'
 
@@ -16,7 +17,7 @@ export class EditSelect extends Group implements IEditSelect {
     public editor: IEditor
 
     public get dragging(): boolean { return !!this.originList }
-    public get running(): boolean { return this.editor.hittable && this.editor.config.selector }
+    public get running(): boolean { const { editor } = this; return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector }
     public get isMoveMode(): boolean { return this.app && this.app.interaction.moveMode }
 
     public hoverStroker: IStroker = new Stroker()
@@ -26,10 +27,11 @@ export class EditSelect extends Group implements IEditSelect {
     public selectArea: ISelectArea = new SelectArea()
 
     protected originList: ILeafList
-    protected lastDownLeaf: IUI
+    protected needRemoveItem: IUI
 
-    protected __eventIds: IEventListenerId[] = []
+    protected waitSelect: IFunction // 手机端延迟选中，防止多点触屏误选元素
 
+    protected __eventIds: IEventListenerId[] = []
 
     constructor(editor: IEditor) {
         super()
@@ -43,8 +45,8 @@ export class EditSelect extends Group implements IEditSelect {
     protected onHover(): void {
         const { editor } = this
         if (this.running && !this.dragging && !editor.dragging) {
-            const { stroke, strokeWidth, hover } = editor.config
-            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth })
+            const { stroke, strokeWidth, hover, hoverStyle } = editor.mergeConfig
+            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth, ...(hoverStyle || {}) })
         } else {
             this.hoverStroker.target = null
         }
@@ -52,7 +54,7 @@ export class EditSelect extends Group implements IEditSelect {
 
     protected onSelect(): void {
         if (this.running) {
-            const { config, list } = this.editor
+            const { mergeConfig: config, list } = this.editor
             const { stroke, strokeWidth } = config
             this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) })
             this.hoverStroker.target = null
@@ -60,66 +62,88 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     public update(): void {
-        if (this.running) this.targetStroker.forceUpdate()
+        if (this.targetStroker.target) this.targetStroker.forceUpdate()
     }
 
     // move / down
 
     protected onPointerMove(e: PointerEvent): void {
-        if (this.running && !this.isMoveMode) {
-            const find = e.shiftKey ? this.findDeepOne(e) : findOne(e.path)
-            this.editor.hoverTarget = this.editor.hasItem(find) ? null : find
+        const { app, editor } = this
+        if (this.running && !this.isMoveMode && app.interaction.canHover && !app.interaction.dragging) {
+            const find = this.findUI(e)
+            editor.hoverTarget = editor.hasItem(find) ? null : find
         } if (this.isMoveMode) {
-            this.editor.hoverTarget = null //  move.dragEmpty
+            editor.hoverTarget = null //  move.dragEmpty
         }
     }
 
     protected onBeforeDown(e: PointerEvent): void {
-        if (this.running && !this.isMoveMode && !e.middle) {
-            const find = this.lastDownLeaf = findOne(e.path)
+        if (e.multiTouch) return
 
-            if (find) {
+        const { select } = this.editor.mergeConfig
+        if (select === 'press') {
+            if (this.app.config.mobile) {
+                this.waitSelect = () => this.checkAndSelect(e)
+            } else {
+                this.checkAndSelect(e)
+            }
+        }
+    }
 
-                if (e.shiftKey) {
-                    this.editor.shiftItem(find)
+    protected onTap(e: PointerEvent): void {
+        if (e.multiTouch) return
+
+        const { editor } = this
+        const { select } = editor.mergeConfig
+
+        if (select === 'tap') this.checkAndSelect(e)
+        else if (this.waitSelect) this.waitSelect()
+
+        if (this.needRemoveItem) {
+            editor.removeItem(this.needRemoveItem)
+        } else if (this.isMoveMode) {
+            editor.target = null  // move.dragEmpty
+        }
+
+    }
+
+    protected checkAndSelect(e: PointerEvent): void { // pointer.down or tap
+        this.needRemoveItem = null
+
+        if (this.allowSelect(e)) {
+            const { editor } = this
+            const find = this.findUI(e)
+
+            if (find) {
+                if (this.isMultipleSelect(e)) {
+                    if (editor.hasItem(find)) this.needRemoveItem = find // 等待tap事件再实际移除
+                    else editor.addItem(find)
                 } else {
-                    this.editor.target = find
+                    editor.target = find
                 }
 
-                // change down data
-                this.editor.updateLayout()
-                find.leafer.interaction.updateDownData()
-
             } else if (this.allow(e.target)) {
 
-                if (!e.shiftKey) this.editor.target = null
+                if (!e.shiftKey) editor.target = null
 
             }
         }
     }
 
-    protected onTap(e: PointerEvent): void {
-        if (this.running && e.shiftKey && !e.middle && !this.lastDownLeaf) {
-            const find = this.findDeepOne(e)
-            if (find) this.editor.shiftItem(find)
-        } else if (this.isMoveMode) {
-            this.editor.target = null  // move.dragEmpty
-        }
-
-        this.lastDownLeaf = null
-    }
-
     // drag
 
     protected onDragStart(e: DragEvent): void {
-        if (this.running && this.allowDrag(e)) {
+        if (e.multiTouch) return
+        if (this.waitSelect) this.waitSelect()
+
+        if (this.allowDrag(e)) {
             const { editor } = this
-            const { stroke, strokeWidth, area } = editor.config
+            const { stroke, area } = editor.mergeConfig
             const { x, y } = e.getInner(this)
 
             this.bounds.set(x, y)
 
-            this.selectArea.setStyle({ visible: true, stroke, strokeWidth, x, y }, area)
+            this.selectArea.setStyle({ visible: true, stroke, x, y }, area)
             this.selectArea.setBounds(this.bounds.get())
 
             this.originList = editor.leafList.clone()
@@ -127,10 +151,8 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected onDrag(e: DragEvent): void {
-        if (this.editor.dragging) {
-            this.onDragEnd()
-            return
-        }
+        if (e.multiTouch) return
+        if (this.editor.dragging) return this.onDragEnd(e)
 
         if (this.dragging) {
             const { editor } = this
@@ -158,13 +180,14 @@ export class EditSelect extends Group implements IEditSelect {
             } else {
 
                 editor.target = this.originList.list as IUI[]
-                if (editor.leafList.length) editor.update()
 
             }
         }
     }
 
-    protected onDragEnd(): void {
+    protected onDragEnd(e: DragEvent): void {
+        if (e.multiTouch) return
+
         if (this.dragging) this.originList = null, this.selectArea.visible = false
     }
 
@@ -183,18 +206,30 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected allowDrag(e: DragEvent) {
-        if (this.editor.config.boxSelect && !e.target.draggable) {
-            return (!this.editor.hasTarget && this.allow(e.target)) || (e.shiftKey && !findOne(e.path))
+        if (this.running && this.editor.mergeConfig.boxSelect && !e.target.draggable) {
+            return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path))
         } else {
             return false
         }
     }
 
-    protected findDeepOne(e: PointerEvent): IUI {
+    protected allowSelect(e: IPointerEvent): boolean {
+        return this.running && !this.isMoveMode && !e.middle
+    }
+
+    public findDeepOne(e: PointerEvent): IUI {
         const options = { exclude: new LeafList(this.editor.editBox.rect) }
         return findOne(e.target.leafer.interaction.findPath(e, options)) as IUI
     }
 
+    public findUI(e: PointerEvent): IUI {
+        return this.isMultipleSelect(e) ? this.findDeepOne(e) : findOne(e.path)
+    }
+
+    public isMultipleSelect(e: IPointerEvent): boolean {
+        return e.shiftKey || this.editor.mergeConfig.continuousSelect
+    }
+
     protected __listenEvents(): void {
         const { editor } = this
         editor.waitLeafer(() => {
@@ -210,7 +245,7 @@ export class EditSelect extends Group implements IEditSelect {
                 app.on_(PointerEvent.BEFORE_DOWN, this.onBeforeDown, this),
                 app.on_(PointerEvent.TAP, this.onTap, this),
 
-                app.on_(DragEvent.START, this.onDragStart, this),
+                app.on_(DragEvent.START, this.onDragStart, this, true), // 采用捕获事件，需要比EditBox中的dragStart早触发
                 app.on_(DragEvent.DRAG, this.onDrag, this),
                 app.on_(DragEvent.END, this.onDragEnd, this),
 
@@ -229,7 +264,7 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     public destroy(): void {
-        this.editor = this.originList = this.lastDownLeaf = null
+        this.editor = this.originList = this.needRemoveItem = null
         this.__removeListenEvents()
         super.destroy()
     }

package/src/display/SelectArea.ts

@@ -1,5 +1,5 @@
 import { IBoundsData, IGroupInputData, IRect, IRectInputData } from '@leafer-ui/interface'
-import { Group, Rect } from '@leafer-ui/core'
+import { Group, Rect } from '@leafer-ui/draw'
 
 import { ISelectArea } from '@leafer-in/interface'
 

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,49 @@
-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 // 独立旋转按钮
+    if (point.pointType === 'button') { // 普通按钮
+        if (!point.cursor) point.cursor = 'pointer'
+        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)
+    }
+
+}