@leafer-ui/interaction 1.0.0-rc.18 → 1.0.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/interaction",
-  "version": "1.0.0-rc.18",
+  "version": "1.0.0-rc.20",
   "description": "@leafer-ui/interaction",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,12 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-rc.18",
-    "@leafer-ui/draw": "1.0.0-rc.18",
-    "@leafer-ui/event": "1.0.0-rc.18"
+    "@leafer/core": "1.0.0-rc.20",
+    "@leafer-ui/draw": "1.0.0-rc.20",
+    "@leafer-ui/event": "1.0.0-rc.20"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.18"
+    "@leafer/interface": "1.0.0-rc.20",
+    "@leafer-ui/interface": "1.0.0-rc.20"
   }
 }

package/src/Dragger.ts

@@ -56,7 +56,7 @@ export class Dragger {
         }
 
         if (!this.moving && canDrag) {
-            if (this.moving = interaction.moveMode || interaction.isHoldRightKey) interaction.emit(MoveEvent.START, this.dragData)
+            if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty) interaction.emit(MoveEvent.START, this.dragData)
         }
 
         if (!this.moving) {
@@ -109,7 +109,7 @@ export class Dragger {
         const list = this.getList()
         if (list.length && running) {
             const { moveX, moveY } = this.dragData
-            list.forEach(leaf => leaf.moveWorld(moveX, moveY))
+            list.forEach(leaf => leaf.draggable && leaf.moveWorld(moveX, moveY))
         }
     }
 
@@ -141,7 +141,7 @@ export class Dragger {
     }
 
     public dragEnd(data: IPointerEvent, speed?: number): void {
-        if (!this.dragData) return
+        if (!this.dragging && !this.moving) return
 
         const { moveX, moveY } = this.dragData
         if (this.interaction.config.move.dragAnimate && this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
@@ -165,12 +165,19 @@ export class Dragger {
         if (throughPath) endDragData.throughPath = throughPath
         endDragData.path = path
 
-        if (this.moving) interaction.emit(MoveEvent.END, endDragData)
+        if (this.moving) {
+            this.moving = false
+            interaction.emit(MoveEvent.END, endDragData)
+        }
+
         if (this.dragging) {
+            const dropList = this.getList()
+
+            this.dragging = false
             interaction.emit(DragEvent.END, endDragData)
 
-            this.swipe(data, endDragData)
-            this.drop(data)
+            this.swipe(data, downData, dragData, endDragData)
+            this.drop(data, dropList, this.dragEnterPath)
         }
 
         this.autoMoveCancel()
@@ -185,24 +192,23 @@ export class Dragger {
     }
 
 
-    protected swipe(data: IPointerEvent, endDragData: IDragEvent): void {
-        const { interaction, downData } = this
+    protected swipe(data: IPointerEvent, downData: IPointerEvent, dragData: IDragEvent, endDragData: IDragEvent): void {
+        const { interaction } = this
         if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
-            const swipeData = getSwipeEventData(downData, this.dragData, endDragData)
+            const swipeData = getSwipeEventData(downData, dragData, endDragData)
             this.interaction.emit(swipeData.type, swipeData)
         }
     }
 
-    protected drop(data: IPointerEvent): void {
-        const dropData = getDropEventData(data, this.getList(), DragEvent.data)
-        dropData.path = this.dragEnterPath
+    protected drop(data: IPointerEvent, dropList: ILeafList, dragEnterPath: ILeafList): void {
+        const dropData = getDropEventData(data, dropList, DragEvent.data)
+        dropData.path = dragEnterPath
         this.interaction.emit(DropEvent.DROP, dropData)
-        this.interaction.emit(DragEvent.LEAVE, data, this.dragEnterPath)
+        this.interaction.emit(DragEvent.LEAVE, data, dragEnterPath)
     }
 
     protected dragReset(): void {
         DragEvent.list = DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null
-        this.dragging = this.moving = false
     }
 
 

package/src/HitCanvasManager.ts

@@ -1,28 +1,32 @@
-import { IScreenSizeData, IHitCanvasManager, ILeaf, IHitCanvas, ILeafList } from '@leafer/interface'
+import { IHitCanvasManager, ILeaf, IHitCanvas, ILeafList, ILeaferCanvasConfig } from '@leafer/interface'
 import { CanvasManager, LeafList, Creator } from '@leafer/core'
 
 
 export class HitCanvasManager extends CanvasManager implements IHitCanvasManager {
 
-    protected pathTypeList: ILeafList = new LeafList()
-    protected imageTypeList: ILeafList = new LeafList()
+    public maxTotal = 1000 // 最多缓存多少张画布
 
-    public getImageType(leaf: ILeaf, size: IScreenSizeData): IHitCanvas {
-        this.imageTypeList.add(leaf)
-        return Creator.hitCanvas(size)
+    protected pathList: ILeafList = new LeafList()
+    protected pixelList: ILeafList = new LeafList()
+
+    public getPixelType(leaf: ILeaf, config: ILeaferCanvasConfig): IHitCanvas {
+        this.__autoClear()
+        this.pixelList.add(leaf)
+        return Creator.hitCanvas(config)
     }
 
     public getPathType(leaf: ILeaf): IHitCanvas {
-        this.pathTypeList.add(leaf)
+        this.__autoClear()
+        this.pathList.add(leaf)
         return Creator.hitCanvas()
     }
 
     public clearImageType(): void {
-        this.__clearLeafList(this.imageTypeList)
+        this.__clearLeafList(this.pixelList)
     }
 
     public clearPathType(): void {
-        this.__clearLeafList(this.pathTypeList)
+        this.__clearLeafList(this.pathList)
     }
 
     protected __clearLeafList(leafList: ILeafList): void {
@@ -37,6 +41,10 @@ export class HitCanvasManager extends CanvasManager implements IHitCanvasManager
         }
     }
 
+    protected __autoClear(): void {
+        if (this.pathList.length + this.pixelList.length > this.maxTotal) this.clear()
+    }
+
     public clear(): void {
         this.clearPathType()
         this.clearImageType()

package/src/Interaction.ts

@@ -1,6 +1,7 @@
 import { IUIEvent, IPointerEvent, ILeaf, IInteraction, IInteractionConfig, ILeafList, IMoveEvent, IZoomEvent, IRotateEvent, ISelector, IBounds, IEventListenerId, IInteractionCanvas, ITimer, IKeepTouchData, IKeyEvent, IPickOptions, ICursorType, IBooleanMap } from '@leafer/interface'
 import { LeaferEvent, ResizeEvent, LeafList, Bounds, PointHelper, DataHelper } from '@leafer/core'
 
+import { IApp } from '@leafer-ui/interface'
 import { PointerEvent, DropEvent, KeyEvent, PointerButton, Keyboard } from '@leafer-ui/event'
 
 import { Transformer } from './Transformer'
@@ -21,9 +22,13 @@ export class InteractionBase implements IInteraction {
     public running: boolean
 
     public get dragging(): boolean { return this.dragger.dragging }
-    public get isDragEmpty(): boolean { return this.config.move.dragEmpty && (this.hoverData && (this.hoverData.path.list[0] as ILeaf).isLeafer) && (!this.downData || (this.downData.path.list[0] as ILeaf).isLeafer) }
+    public get moveMode(): boolean { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty }
+
+    public get isDragEmpty(): boolean { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)) }
+    public get isMobileDragEmpty(): boolean { return this.config.move.dragEmpty && !this.config.pointer.hover && this.downData && this.isTreePath(this.downData) }
+    public get isHoldMiddleKey(): boolean { return this.config.move.holdMiddleKey && this.downData && PointerButton.middle(this.downData) }
     public get isHoldRightKey(): boolean { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData) }
-    public get moveMode(): boolean { return this.config.move.drag || (this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey()) || (this.downData && ((this.config.move.holdMiddleKey && PointerButton.middle(this.downData)) || (this.isHoldRightKey && this.dragger.moving))) || this.isDragEmpty }
+    public get isHoldSpaceKey(): boolean { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey() }
 
     public config: IInteractionConfig = config
 
@@ -33,12 +38,10 @@ export class InteractionBase implements IInteraction {
     public shrinkCanvasBounds: IBounds
 
     public downData: IPointerEvent
-    protected oldDownData?: IPointerEvent // 通过updateDownData强制更新下来的数据
     public hoverData: IPointerEvent
     public focusData: ILeaf
 
     public downTime: number
-    protected downed: boolean
 
     protected overPath: LeafList
     protected enterPath: LeafList
@@ -90,24 +93,22 @@ export class InteractionBase implements IInteraction {
         PointerButton.defaultLeft(data)
 
         this.updateDownData(data)
-        if (useDefaultPath) data.path = this.defaultPath
+        this.checkPath(data, useDefaultPath)
 
         this.downTime = Date.now()
 
-        if (this.downed = !this.moveMode) {
-            this.emit(PointerEvent.BEFORE_DOWN, data) // downData maybe changed
-            this.emit(PointerEvent.DOWN, data)
+        this.emit(PointerEvent.BEFORE_DOWN, data) // downData maybe changed
+        this.emit(PointerEvent.DOWN, data)
 
-            if (PointerButton.left(data)) {
-                this.tapWait()
-                this.longPressWait(data)
-            } else if (PointerButton.right(data)) {
-                this.waitMenuTap = true
-            }
+        if (PointerButton.left(data)) {
+            this.tapWait()
+            this.longPressWait(data)
+        } else if (PointerButton.right(data)) {
+            this.waitMenuTap = true
         }
 
         this.dragger.setDragData(data) // must after down event
-        this.updateCursor(data)
+        if (!this.isHoldRightKey) this.updateCursor(data)
     }
 
     public pointerMove(data?: IPointerEvent): void {
@@ -119,20 +120,17 @@ export class InteractionBase implements IInteraction {
 
         const hit = this.canvas.bounds.hitPoint(data)
         if (hit || downData) {
-            if (hit && !downData && PointerButton.left(data)) {
-                this.pointerDown(data, true) // 从外部拖拽内容进入，需要先模拟down事件
-                this.dragger.canDragOut = false
-            }
             this.pointerMoveReal(data)
             if (downData) this.dragger.checkDragOut(data)
         }
     }
 
     public pointerMoveReal(data: IPointerEvent): void {
+        const { dragHover, dragDistance } = this.config.pointer
         this.emit(PointerEvent.BEFORE_MOVE, data, this.defaultPath)
 
         if (this.downData) {
-            const canDrag = PointHelper.getDistance(this.downData, data) > this.config.pointer.dragDistance
+            const canDrag = PointHelper.getDistance(this.downData, data) > dragDistance
             if (canDrag) {
                 if (this.waitTap) this.pointerWaitCancel()
                 this.waitMenuTap = false
@@ -143,11 +141,11 @@ export class InteractionBase implements IInteraction {
 
         if (!this.dragger.moving) {
             this.updateHoverData(data)
-            if (this.moveMode) data.path = this.defaultPath
+            this.checkPath(data)
 
             this.emit(PointerEvent.MOVE, data)
 
-            if (!(this.dragging && !this.config.pointer.dragHover)) this.pointerHover(data)
+            if (!(this.dragging && !dragHover)) this.pointerHover(data)
 
             if (this.dragger.dragging) {
                 this.dragger.dragOverOrOut(data)
@@ -159,35 +157,39 @@ export class InteractionBase implements IInteraction {
     }
 
     public pointerUp(data?: IPointerEvent): void {
-        const { downData, oldDownData } = this
+        const { downData } = this
         if (!data) data = downData
         if (!downData) return
+
         PointerButton.defaultLeft(data)
 
         this.findPath(data)
+        const upData = { ...data, path: data.path.clone() }
 
-        if (this.downed) {
-            this.downed = false
-            this.emit(PointerEvent.BEFORE_UP, data)
-            this.emit(PointerEvent.UP, data)
-            if (oldDownData) this.emit(PointerEvent.UP, oldDownData, undefined, data.path) // oldDownPath必须触发up
-            this.emit(PointerEvent.UP, downData, undefined, data.path) // downPath必须触发up
+        data.path.addList(downData.path.list)  // downPath必须触发
 
-            this.touchLeave(data)
+        this.checkPath(data)
 
+        this.downData = null // must before pointer.up event
+        this.emit(PointerEvent.BEFORE_UP, data)
+        this.emit(PointerEvent.UP, data)
+
+        this.touchLeave(data)
+
+        if (!data.isCancel) {
             this.tap(data)
             this.menuTap(data)
         }
 
         this.dragger.dragEnd(data)
 
-        this.downData = this.oldDownData = null
-
-        this.updateCursor(data)
+        this.updateCursor(upData)
     }
 
     public pointerCancel(): void {
-        this.pointerUp(this.dragger.dragData)
+        const data = { ...this.dragger.dragData }
+        data.isCancel = true
+        this.pointerUp(data)
     }
 
 
@@ -257,8 +259,10 @@ export class InteractionBase implements IInteraction {
 
     // helper
     protected pointerHover(data: IPointerEvent): void {
-        this.pointerOverOrOut(data)
-        this.pointerEnterOrLeave(data)
+        if (this.config.pointer.hover) {
+            this.pointerOverOrOut(data)
+            this.pointerEnterOrLeave(data)
+        }
     }
 
     protected pointerOverOrOut(data: IPointerEvent): void {
@@ -348,14 +352,31 @@ export class InteractionBase implements IInteraction {
         return find.path
     }
 
+    public isRootPath(data: IPointerEvent): boolean {
+        return data && (data.path.list[0] as ILeaf).isLeafer
+    }
+
+    public isTreePath(data: IPointerEvent): boolean {
+        const app = this.target.app as IApp
+        if (!app || !app.isApp) return false
+        return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree)) // 当dragEmpty为true时，在手机端(pointer.hover为false)可以拖动tree层（编辑器选中的元素除外）
+    }
+
+    protected checkPath(data: IPointerEvent, useDefaultPath?: boolean): void {
+        if (useDefaultPath || this.canMove(data)) data.path = this.defaultPath
+    }
+
+    public canMove(data: IPointerEvent): boolean { // moveMode and path can move
+        return this.moveMode && data && data.path.list.every(item => !item.isOutside)
+    }
+
 
     public isDrag(leaf: ILeaf): boolean {
         return this.dragger.getList().has(leaf)
     }
 
     public isPress(leaf: ILeaf): boolean {
-        const { downData, oldDownData } = this
-        return this.downed && ((downData && downData.path.has(leaf)) || (oldDownData && oldDownData.path.has(leaf)))
+        return this.downData && this.downData.path.has(leaf)
     }
 
     public isHover(leaf: ILeaf): boolean {
@@ -376,12 +397,12 @@ export class InteractionBase implements IInteraction {
     }
 
 
-    public updateDownData(data?: IPointerEvent, options?: IPickOptions): void {
+    public updateDownData(data?: IPointerEvent, options?: IPickOptions, merge?: boolean): void {
         const { downData } = this
-        if (!data && downData) data = { ...downData }
+        if (!data && downData) data = downData
         if (!data) return
-        this.oldDownData = downData
         this.findPath(data, options)
+        if (merge && downData) data.path.addList(downData.path.list)
         this.downData = data
     }
 
@@ -393,7 +414,7 @@ export class InteractionBase implements IInteraction {
     }
 
     public updateCursor(data?: IPointerEvent): void {
-        if (this.config.cursor.stop) return
+        if (this.config.cursor.stop || !this.config.pointer.hover) return
 
         if (!data) {
             this.updateHoverData()
@@ -402,7 +423,7 @@ export class InteractionBase implements IInteraction {
 
         if (this.dragger.moving) {
             return this.setCursor('grabbing')
-        } else if (this.moveMode) {
+        } else if (this.canMove(data)) {
             return this.setCursor(this.downData ? 'grabbing' : 'grab')
         } else if (!data) return
 

package/src/config.ts

@@ -13,6 +13,7 @@ export const config: IInteractionConfig = {
         tapTime: 120,
         longPressTime: 800,
         transformTime: 500,
+        hover: true,
         dragHover: true,
         dragDistance: 2,
         swipeDistance: 20,

package/src/index.ts

@@ -2,4 +2,28 @@ export { InteractionBase } from './Interaction'
 export { InteractionHelper } from './InteractionHelper'
 export { MultiTouchHelper } from './MultiTouchHelper'
 export { Cursor } from './Cursor'
-export { HitCanvasManager } from './HitCanvasManager'
+export { HitCanvasManager } from './HitCanvasManager'
+
+import { IPointData, IRadiusPointData, IWindingRule } from '@leafer/interface'
+import { LeaferCanvasBase, tempBounds } from '@leafer/core'
+
+
+const canvas = LeaferCanvasBase.prototype
+
+canvas.hitFill = function (point: IPointData, fillRule?: IWindingRule): boolean {
+    return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y)
+}
+
+canvas.hitStroke = function (point: IPointData, strokeWidth?: number): boolean {
+    this.strokeWidth = strokeWidth
+    return this.context.isPointInStroke(point.x, point.y)
+}
+
+canvas.hitPixel = function (radiusPoint: IRadiusPointData, offset?: IPointData, scale = 1): boolean { // 画布必须有alpha通道
+    let { x, y, radiusX, radiusY } = radiusPoint
+    if (offset) x -= offset.x, y -= offset.y
+    tempBounds.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil()
+    const { data } = this.context.getImageData(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height)
+    for (let i = 0, len = data.length; i < len; i += 4) { if (data[i + 3] > 0) return true }
+    return data[3] > 0
+}

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { IMoveEvent, IZoomEvent, IRotateEvent, ITimer, IDragEvent, IPointerEvent, ILeafList, IFunction, IInteraction, ILeaf, IInteractionCanvas, ISelector, IInteractionConfig, ICursorType, IBounds, IEventListenerId, IBooleanMap, IUIEvent, IKeepTouchData, IKeyEvent, IPickOptions, IPointData, IEvent, IObject, IDropEvent, ISwipeEvent, IMultiTouchData, ICursorTypeMap, IHitCanvasManager, IScreenSizeData, IHitCanvas } from '@leafer/interface';
+import { IMoveEvent, IZoomEvent, IRotateEvent, ITimer, IDragEvent, IPointerEvent, ILeafList, IFunction, IInteraction, ILeaf, IInteractionCanvas, ISelector, IInteractionConfig, ICursorType, IBounds, IEventListenerId, IBooleanMap, IUIEvent, IKeepTouchData, IKeyEvent, IPickOptions, IPointData, IEvent, IObject, IDropEvent, ISwipeEvent, IMultiTouchData, ICursorTypeMap, IHitCanvasManager, ILeaferCanvasConfig, IHitCanvas } from '@leafer/interface';
 import { LeafList, CanvasManager } from '@leafer/core';
 
 declare class Transformer {
@@ -45,8 +45,8 @@ declare class Dragger {
     dragEnd(data: IPointerEvent, speed?: number): void;
     protected dragEndReal(data?: IPointerEvent): void;
     protected animate(func?: IFunction, off?: 'off'): void;
-    protected swipe(data: IPointerEvent, endDragData: IDragEvent): void;
-    protected drop(data: IPointerEvent): void;
+    protected swipe(data: IPointerEvent, downData: IPointerEvent, dragData: IDragEvent, endDragData: IDragEvent): void;
+    protected drop(data: IPointerEvent, dropList: ILeafList, dragEnterPath: ILeafList): void;
     protected dragReset(): void;
     checkDragOut(data: IPointerEvent): void;
     protected autoMoveOnDragOut(data: IPointerEvent): void;
@@ -60,19 +60,20 @@ declare class InteractionBase implements IInteraction {
     selector: ISelector;
     running: boolean;
     get dragging(): boolean;
+    get moveMode(): boolean;
     get isDragEmpty(): boolean;
+    get isMobileDragEmpty(): boolean;
+    get isHoldMiddleKey(): boolean;
     get isHoldRightKey(): boolean;
-    get moveMode(): boolean;
+    get isHoldSpaceKey(): boolean;
     config: IInteractionConfig;
     cursor: ICursorType | ICursorType[];
     get hitRadius(): number;
     shrinkCanvasBounds: IBounds;
     downData: IPointerEvent;
-    protected oldDownData?: IPointerEvent;
     hoverData: IPointerEvent;
     focusData: ILeaf;
     downTime: number;
-    protected downed: boolean;
     protected overPath: LeafList;
     protected enterPath: LeafList;
     protected waitMenuTap: boolean;
@@ -110,12 +111,16 @@ declare class InteractionBase implements IInteraction {
     protected touchLeave(data: IPointerEvent): void;
     protected tap(data: IPointerEvent): void;
     findPath(data: IPointerEvent, options?: IPickOptions): ILeafList;
+    isRootPath(data: IPointerEvent): boolean;
+    isTreePath(data: IPointerEvent): boolean;
+    protected checkPath(data: IPointerEvent, useDefaultPath?: boolean): void;
+    canMove(data: IPointerEvent): boolean;
     isDrag(leaf: ILeaf): boolean;
     isPress(leaf: ILeaf): boolean;
     isHover(leaf: ILeaf): boolean;
     isFocus(leaf: ILeaf): boolean;
     cancelHover(): void;
-    updateDownData(data?: IPointerEvent, options?: IPickOptions): void;
+    updateDownData(data?: IPointerEvent, options?: IPickOptions, merge?: boolean): void;
     updateHoverData(data?: IPointerEvent): void;
     updateCursor(data?: IPointerEvent): void;
     setCursor(cursor: ICursorType | ICursorType[]): void;
@@ -158,13 +163,15 @@ declare class Cursor {
 }
 
 declare class HitCanvasManager extends CanvasManager implements IHitCanvasManager {
-    protected pathTypeList: ILeafList;
-    protected imageTypeList: ILeafList;
-    getImageType(leaf: ILeaf, size: IScreenSizeData): IHitCanvas;
+    maxTotal: number;
+    protected pathList: ILeafList;
+    protected pixelList: ILeafList;
+    getPixelType(leaf: ILeaf, config: ILeaferCanvasConfig): IHitCanvas;
     getPathType(leaf: ILeaf): IHitCanvas;
     clearImageType(): void;
     clearPathType(): void;
     protected __clearLeafList(leafList: ILeafList): void;
+    protected __autoClear(): void;
     clear(): void;
 }