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

package/package.json

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

package/src/Dragger.ts

@@ -1,5 +1,5 @@
 import { IPointerEvent, IDragEvent, ILeaf, ILeafList, ITimer, IFunction } from '@leafer/interface'
-import { BoundsHelper, PointHelper, LeafHelper, LeafList } from '@leafer/core'
+import { BoundsHelper, PointHelper, LeafList } from '@leafer/core'
 
 import { MoveEvent, DragEvent, DropEvent, PointerButton } from '@leafer-ui/event'
 
@@ -26,7 +26,8 @@ export class Dragger {
 
     protected autoMoveTimer: ITimer
 
-    protected canAnimate: boolean
+    public canAnimate: boolean
+    public canDragOut: boolean
     protected animateWait: IFunction
 
     constructor(interaction: InteractionBase) {
@@ -37,6 +38,7 @@ export class Dragger {
         if (this.animateWait) this.dragEndReal()
         this.downData = this.interaction.downData
         this.dragData = getDragEventData(data, data, data)
+        this.canAnimate = this.canDragOut = true
     }
 
     public getList(): ILeafList {
@@ -51,8 +53,6 @@ export class Dragger {
             this.canAnimate = false // 防止dragEnd动画
             interaction.pointerCancel() // 按住中键/右键拖出页面后的up事件接收不到
             return
-        } else {
-            this.canAnimate = true
         }
 
         if (!this.moving && canDrag) {
@@ -109,7 +109,7 @@ export class Dragger {
         const list = this.getList()
         if (list.length && running) {
             const { moveX, moveY } = this.dragData
-            list.forEach(leaf => LeafHelper.moveWorld(leaf, moveX, moveY))
+            list.forEach(leaf => leaf.moveWorld(moveX, moveY))
         }
     }
 
@@ -117,6 +117,7 @@ export class Dragger {
         const { interaction } = this
         const { dragOverPath } = this
         const { path } = data
+        this.dragOverPath = path
 
         if (dragOverPath) {
             if (path.indexAt(0) !== dragOverPath.indexAt(0)) {
@@ -126,7 +127,7 @@ export class Dragger {
         } else {
             interaction.emit(DragEvent.OVER, data, path)
         }
-        this.dragOverPath = path
+
     }
 
     public dragEnterOrLeave(data: IPointerEvent): void {
@@ -143,7 +144,7 @@ export class Dragger {
         if (!this.dragData) return
 
         const { moveX, moveY } = this.dragData
-        if (this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
+        if (this.interaction.config.move.dragAnimate && this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
             data = { ...data }
             speed = (speed || (data.pointerType === 'touch' ? 2 : 1)) * 0.9
             PointHelper.move(data, moveX * speed, moveY * speed)
@@ -179,14 +180,13 @@ export class Dragger {
 
     protected animate(func?: IFunction, off?: 'off'): void { // dragEnd animation
         const animateWait = func || this.animateWait
-        if (animateWait) this.interaction.target.nextRender(animateWait, off)
+        if (animateWait) this.interaction.target.nextRender(animateWait, null, off)
         this.animateWait = func
     }
 
 
     protected swipe(data: IPointerEvent, endDragData: IDragEvent): void {
-        const { interaction } = this
-        const { downData } = interaction
+        const { interaction, downData } = this
         if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
             const swipeData = getSwipeEventData(downData, this.dragData, endDragData)
             this.interaction.emit(swipeData.type, swipeData)
@@ -214,9 +214,9 @@ export class Dragger {
 
 
     protected autoMoveOnDragOut(data: IPointerEvent): void {
-        const { interaction, downData } = this
+        const { interaction, downData, canDragOut } = this
         const { autoDistance, dragOut } = interaction.config.move
-        if (!dragOut || !autoDistance) return
+        if (!dragOut || !canDragOut || !autoDistance) return
 
         const bounds = interaction.shrinkCanvasBounds
         const { x, y } = bounds

package/src/Interaction.ts

@@ -35,8 +35,11 @@ export class InteractionBase implements IInteraction {
     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
 
@@ -89,33 +92,39 @@ export class InteractionBase implements IInteraction {
         this.updateDownData(data)
         if (useDefaultPath) data.path = this.defaultPath
 
-        this.emit(PointerEvent.BEFORE_DOWN, data)
-        this.emit(PointerEvent.DOWN, data)
-
         this.downTime = Date.now()
 
-        this.dragger.setDragData(data)
+        if (this.downed = !this.moveMode) {
+            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)
     }
 
     public pointerMove(data?: IPointerEvent): void {
         if (!data) data = this.hoverData
         if (!data) return
-        if (this.downData) PointerButton.defaultLeft(data)
+
+        const { downData } = this
+        if (downData) PointerButton.defaultLeft(data)
 
         const hit = this.canvas.bounds.hitPoint(data)
-        if (hit || this.downData) {
-            if (hit && !this.downData && PointerButton.left(data)) this.pointerDown(data, true) // 从外部拖拽内容进入，需要先模拟down事件
+        if (hit || downData) {
+            if (hit && !downData && PointerButton.left(data)) {
+                this.pointerDown(data, true) // 从外部拖拽内容进入，需要先模拟down事件
+                this.dragger.canDragOut = false
+            }
             this.pointerMoveReal(data)
-            this.dragger.checkDragOut(data)
+            if (downData) this.dragger.checkDragOut(data)
         }
     }
 
@@ -134,10 +143,12 @@ export class InteractionBase implements IInteraction {
 
         if (!this.dragger.moving) {
             this.updateHoverData(data)
+            if (this.moveMode) data.path = this.defaultPath
+
             this.emit(PointerEvent.MOVE, data)
 
-            this.pointerOverOrOut(data)
-            this.pointerEnterOrLeave(data)
+            if (!(this.dragging && !this.config.pointer.dragHover)) this.pointerHover(data)
+
             if (this.dragger.dragging) {
                 this.dragger.dragOverOrOut(data)
                 this.dragger.dragEnterOrLeave(data)
@@ -148,21 +159,25 @@ export class InteractionBase implements IInteraction {
     }
 
     public pointerUp(data?: IPointerEvent): void {
-        if (!data) data = this.downData
-        if (!this.downData) return
+        const { downData, oldDownData } = this
+        if (!data) data = downData
+        if (!downData) return
         PointerButton.defaultLeft(data)
 
         this.findPath(data)
 
-        this.emit(PointerEvent.BEFORE_UP, data)
-        this.emit(PointerEvent.UP, data)
-        if (this.oldDownData) this.emit(PointerEvent.UP, this.oldDownData, undefined, data.path) // oldDownPath必须触发up
-        this.emit(PointerEvent.UP, this.downData, undefined, data.path) // downPath必须触发up
+        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
 
-        this.touchLeave(data)
+            this.touchLeave(data)
 
-        this.tap(data)
-        this.menuTap(data)
+            this.tap(data)
+            this.menuTap(data)
+        }
 
         this.dragger.dragEnd(data)
 
@@ -222,7 +237,10 @@ export class InteractionBase implements IInteraction {
             Keyboard.setDownCode(code)
 
             this.emit(KeyEvent.HOLD, data, this.defaultPath)
-            if (this.moveMode) this.updateCursor()
+            if (this.moveMode) {
+                this.cancelHover()
+                this.updateCursor()
+            }
         }
         this.emit(KeyEvent.DOWN, data, this.defaultPath)
     }
@@ -238,30 +256,39 @@ export class InteractionBase implements IInteraction {
 
 
     // helper
-    protected pointerOverOrOut(data: IPointerEvent): void {
-        if (this.dragger.moving) return
-        if (this.dragging && !this.config.pointer.dragHover) return
+    protected pointerHover(data: IPointerEvent): void {
+        this.pointerOverOrOut(data)
+        this.pointerEnterOrLeave(data)
+    }
 
+    protected pointerOverOrOut(data: IPointerEvent): void {
         const { path } = data
-        if (this.overPath) {
-            if (path.indexAt(0) !== this.overPath.indexAt(0)) {
-                this.emit(PointerEvent.OUT, data, this.overPath)
+        const { overPath } = this
+        this.overPath = path
+
+        if (overPath) {
+            if (path.indexAt(0) !== overPath.indexAt(0)) {
+                this.emit(PointerEvent.OUT, data, overPath)
                 this.emit(PointerEvent.OVER, data, path)
             }
         } else {
             this.emit(PointerEvent.OVER, data, path)
         }
-        this.overPath = path
     }
 
     protected pointerEnterOrLeave(data: IPointerEvent): void {
-        if (this.dragger.moving) return
-        if (this.dragging && !this.config.pointer.dragHover) return
+        let { path } = data
 
-        const { path } = data
-        this.emit(PointerEvent.LEAVE, data, this.enterPath, path)
-        this.emit(PointerEvent.ENTER, data, path, this.enterPath)
+        if (this.downData && !this.moveMode) {
+            path = path.clone()
+            this.downData.path.forEach(leaf => path.add(leaf))
+        }
+
+        const { enterPath } = this
         this.enterPath = path
+
+        this.emit(PointerEvent.LEAVE, data, enterPath, path)
+        this.emit(PointerEvent.ENTER, data, path, enterPath)
     }
 
     protected touchLeave(data: IPointerEvent): void {
@@ -321,10 +348,34 @@ export class InteractionBase implements IInteraction {
         return find.path
     }
 
+
     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)))
+    }
+
+    public isHover(leaf: ILeaf): boolean {
+        return this.enterPath && this.enterPath.has(leaf)
+    }
+
+    public isFocus(leaf: ILeaf): boolean {
+        return this.focusData === leaf
+    }
+
+
+    public cancelHover(): void {
+        const { hoverData } = this
+        if (hoverData) {
+            hoverData.path = this.defaultPath
+            this.pointerHover(hoverData)
+        }
+    }
+
+
     public updateDownData(data?: IPointerEvent, options?: IPickOptions): void {
         const { downData } = this
         if (!data && downData) data = { ...downData }
@@ -355,8 +406,7 @@ export class InteractionBase implements IInteraction {
             return this.setCursor(this.downData ? 'grabbing' : 'grab')
         } else if (!data) return
 
-        let leaf: ILeaf
-        let cursor: ICursorType | ICursorType[]
+        let leaf: ILeaf, cursor: ICursorType | ICursorType[]
 
         const { path } = data
         for (let i = 0, len = path.length; i < len; i++) {
@@ -372,6 +422,7 @@ export class InteractionBase implements IInteraction {
         this.cursor = cursor
     }
 
+
     protected emitTap(data: IPointerEvent) {
         this.emit(PointerEvent.TAP, data)
         this.emit(PointerEvent.CLICK, data)

package/src/Transformer.ts

@@ -23,6 +23,7 @@ export class Transformer {
             const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
             data.path = path
             this.moveData = { ...data, moveX: 0, moveY: 0 }
+            interaction.cancelHover()
             interaction.emit(MoveEvent.START, this.moveData)
         }
 
@@ -40,6 +41,7 @@ export class Transformer {
             const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
             data.path = path
             this.zoomData = { ...data, scale: 1 }
+            interaction.cancelHover()
             interaction.emit(ZoomEvent.START, this.zoomData)
         }
 
@@ -57,6 +59,7 @@ export class Transformer {
             const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
             data.path = path
             this.rotateData = { ...data, rotation: 0 }
+            interaction.cancelHover()
             interaction.emit(RotateEvent.START, this.rotateData)
         }
 

package/src/config.ts

@@ -2,7 +2,6 @@ import { IInteractionConfig } from '@leafer/interface'
 
 export const config: IInteractionConfig = {
     wheel: {
-        zoomMode: false,
         zoomSpeed: 0.5,
         moveSpeed: 0.5,
         rotateSpeed: 0.5,
@@ -11,14 +10,12 @@ export const config: IInteractionConfig = {
     },
     pointer: {
         hitRadius: 5,
-        through: false,
         tapTime: 120,
         longPressTime: 800,
         transformTime: 500,
         dragHover: true,
         dragDistance: 2,
         swipeDistance: 20,
-        ignoreMove: false,
         preventDefaultMenu: true
     },
     cursor: {}

package/src/emit.ts

@@ -1,5 +1,7 @@
 import { IUIEvent, ILeaf, ILeafList } from '@leafer/interface'
 import { EventCreator, Debug } from '@leafer/core'
+import { State } from '@leafer-ui/draw'
+
 
 const debug = Debug.get('emit')
 
@@ -50,11 +52,16 @@ function emitAppChildren(leaf: ILeaf, type: string, data: IUIEvent, capture?: bo
 
 function emitEvent(leaf: ILeaf, type: string, data: IUIEvent, capture?: boolean, excludePath?: ILeafList): boolean {
     if (leaf.destroyed) return true
-    if (leaf.__.hitSelf && leaf.hasEvent(type, capture) && !exclude(leaf, excludePath)) {
-        data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3)
-        const event = EventCreator.get(type, data)
-        leaf.emitEvent(event, capture)
-        if (event.isStop) return true
+    if (leaf.__.hitSelf && !exclude(leaf, excludePath)) {
+
+        if (State.updateEventStyle) State.updateEventStyle(leaf, type) // hoverStyle / pressStyle
+
+        if (leaf.hasEvent(type, capture)) {
+            data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3)
+            const event = EventCreator.get(type, data)
+            leaf.emitEvent(event, capture)
+            if (event.isStop) return true
+        }
     }
     return false
 }

package/types/index.d.ts

@@ -29,7 +29,8 @@ declare class Dragger {
     protected dragOverPath: ILeafList;
     protected dragEnterPath: ILeafList;
     protected autoMoveTimer: ITimer;
-    protected canAnimate: boolean;
+    canAnimate: boolean;
+    canDragOut: boolean;
     protected animateWait: IFunction;
     constructor(interaction: InteractionBase);
     setDragData(data: IPointerEvent): void;
@@ -69,7 +70,9 @@ declare class InteractionBase implements IInteraction {
     downData: IPointerEvent;
     protected oldDownData?: IPointerEvent;
     hoverData: IPointerEvent;
+    focusData: ILeaf;
     downTime: number;
+    protected downed: boolean;
     protected overPath: LeafList;
     protected enterPath: LeafList;
     protected waitMenuTap: boolean;
@@ -101,12 +104,17 @@ declare class InteractionBase implements IInteraction {
     transformEnd(): void;
     keyDown(data: IKeyEvent): void;
     keyUp(data: IKeyEvent): void;
+    protected pointerHover(data: IPointerEvent): void;
     protected pointerOverOrOut(data: IPointerEvent): void;
     protected pointerEnterOrLeave(data: IPointerEvent): void;
     protected touchLeave(data: IPointerEvent): void;
     protected tap(data: IPointerEvent): void;
     findPath(data: IPointerEvent, options?: IPickOptions): ILeafList;
     isDrag(leaf: ILeaf): boolean;
+    isPress(leaf: ILeaf): boolean;
+    isHover(leaf: ILeaf): boolean;
+    isFocus(leaf: ILeaf): boolean;
+    cancelHover(): void;
     updateDownData(data?: IPointerEvent, options?: IPickOptions): void;
     updateHoverData(data?: IPointerEvent): void;
     updateCursor(data?: IPointerEvent): void;