@leafer-ui/interaction 1.0.0 → 1.0.2

package/package.json

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

package/src/Dragger.ts

@@ -1,4 +1,4 @@
-import { IPointerEvent, IDragEvent, ILeaf, ILeafList, ITimer, IFunction, IPointDataMap } from '@leafer/interface'
+import { IPointerEvent, IDragEvent, ILeaf, ILeafList, ITimer, IFunction, IPointDataMap, IMoveEvent } from '@leafer/interface'
 import { BoundsHelper, PointHelper, LeafList } from '@leafer/core'
 
 import { MoveEvent, DragEvent, DropEvent, PointerButton } from '@leafer-ui/event'
@@ -58,7 +58,10 @@ export class Dragger {
         }
 
         if (!this.moving && canDrag) {
-            if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty) interaction.emit(MoveEvent.START, this.dragData)
+            if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty) {
+                (this.dragData as IMoveEvent).moveType = 'drag'
+                interaction.emit(MoveEvent.START, this.dragData)
+            }
         }
 
         if (!this.moving) {
@@ -103,6 +106,7 @@ export class Dragger {
         this.dragData.path = path
 
         if (this.moving) {
+            (this.dragData as IMoveEvent).moveType = 'drag'
             interaction.emit(MoveEvent.BEFORE_MOVE, this.dragData)
             interaction.emit(MoveEvent.MOVE, this.dragData)
         } else if (this.dragging) {
@@ -174,7 +178,8 @@ export class Dragger {
         endDragData.path = path
 
         if (this.moving) {
-            this.moving = false
+            this.moving = false;
+            (endDragData as IMoveEvent).moveType = 'drag'
             interaction.emit(MoveEvent.END, endDragData)
         }
 
@@ -248,7 +253,7 @@ export class Dragger {
             PointHelper.move(downData, moveX, moveY)
             PointHelper.move(this.dragData, moveX, moveY)
 
-            interaction.move({ ...data, moveX, moveY, totalX, totalY })
+            interaction.move({ ...data, moveX, moveY, totalX, totalY, moveType: 'drag' })
             interaction.pointerMoveReal(data)
         }, 10)
     }

package/src/Interaction.ts

@@ -1,4 +1,4 @@
-import { IUIEvent, IPointerEvent, ILeaf, IInteraction, IInteractionConfig, ILeafList, IMoveEvent, IZoomEvent, IRotateEvent, ISelector, IBounds, IEventListenerId, IInteractionCanvas, ITimer, IKeepTouchData, IKeyEvent, IPickOptions, ICursorType, IBooleanMap, IPickBottom, IClientPointData, IPointData } from '@leafer/interface'
+import { IUIEvent, IPointerEvent, ILeaf, IInteraction, IInteractionConfig, ILeafList, IMoveEvent, IZoomEvent, IRotateEvent, ISelector, IBounds, IEventListenerId, IInteractionCanvas, ITimer, IKeepTouchData, IKeyEvent, IPickOptions, ICursorType, IBooleanMap, IPickBottom, IClientPointData, IPointData, ILeaferConfig } from '@leafer/interface'
 import { LeaferEvent, ResizeEvent, LeafList, Bounds, PointHelper, DataHelper } from '@leafer/core'
 
 import { IApp } from '@leafer-ui/interface'
@@ -12,7 +12,7 @@ import { MultiTouchHelper } from './MultiTouchHelper'
 import { config } from './config'
 
 
-const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper
+const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData, pathCanDrag, pathHasOutside } = InteractionHelper
 export class InteractionBase implements IInteraction {
 
     public target: ILeaf
@@ -22,15 +22,18 @@ export class InteractionBase implements IInteraction {
     public running: boolean
 
     public get dragging(): boolean { return this.dragger.dragging }
-    public get moveMode(): boolean { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty }
+    public get transforming(): boolean { return this.transformer.transforming }
+
+    public get moveMode(): boolean { return this.config.move.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty }
+    public get canHover(): boolean { return this.config.pointer.hover && !(this.config as ILeaferConfig).mobile }
 
     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 isMobileDragEmpty(): boolean { return this.config.move.dragEmpty && !this.canHover && 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 isHoldSpaceKey(): boolean { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey() }
 
-    public config: IInteractionConfig = config
+    public config: IInteractionConfig = DataHelper.clone(config)
 
     public cursor: ICursorType | ICursorType[]
     public get hitRadius(): number { return this.config.pointer.hitRadius }
@@ -164,6 +167,7 @@ export class InteractionBase implements IInteraction {
         if (!downData) return
 
         PointerButton.defaultLeft(data)
+        data.multiTouch = downData.multiTouch
 
         this.findPath(data)
         const upData = { ...data, path: data.path.clone() }
@@ -265,7 +269,7 @@ export class InteractionBase implements IInteraction {
 
     // helper
     protected pointerHover(data: IPointerEvent): void {
-        if (this.config.pointer.hover) {
+        if (this.canHover) {
             this.pointerOverOrOut(data)
             this.pointerEnterOrLeave(data)
         }
@@ -370,11 +374,11 @@ export class InteractionBase implements IInteraction {
     }
 
     protected checkPath(data: IPointerEvent, useDefaultPath?: boolean): void {
-        if (useDefaultPath || this.canMove(data)) data.path = this.defaultPath
+        if (useDefaultPath || (this.moveMode && !pathHasOutside(data.path))) 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)
+        return data && (this.moveMode || (this.config.move.drag === 'auto' && !pathCanDrag(data.path))) && !pathHasOutside(data.path)
     }
 
 
@@ -421,7 +425,7 @@ export class InteractionBase implements IInteraction {
     }
 
     public updateCursor(data?: IPointerEvent): void {
-        if (!this.config.cursor || !this.config.pointer.hover) return
+        if (!this.config.cursor || !this.canHover) return
 
         if (!data) {
             this.updateHoverData()

package/src/InteractionHelper.ts

@@ -1,7 +1,7 @@
 import { IEvent, IPointerEvent, IMoveEvent, IZoomEvent, IRotateEvent, IDragEvent, ISwipeEvent, IUIEvent, IPointData, ILeafList, IDropEvent, IObject } from '@leafer/interface'
 import { PointHelper, LeafList } from '@leafer/core'
 
-import { SwipeEvent } from '@leafer-ui/event'
+import { SwipeEvent, DragEvent } from '@leafer-ui/event'
 
 
 export const InteractionHelper = {
@@ -105,7 +105,15 @@ export const InteractionHelper = {
             if (list[i].hasEvent(type)) find.add(list[i])
         }
         return find
-    }
+    },
+
+    pathCanDrag(path: ILeafList): boolean {
+        return path && path.list.some(item => item.draggable || item.editable || (!item.isLeafer && item.hasEvent(DragEvent.DRAG)))
+    },
+
+    pathHasOutside(path: ILeafList): boolean { // 滚动条元素
+        return path && path.list.some(item => item.isOutside)
+    },
 }
 
 const I = InteractionHelper

package/src/Transformer.ts

@@ -6,6 +6,8 @@ import { InteractionBase } from './Interaction'
 
 export class Transformer {
 
+    public get transforming(): boolean { return !!(this.moveData || this.zoomData || this.rotateData) }
+
     protected interaction: InteractionBase
     protected moveData: IMoveEvent
     protected zoomData: IZoomEvent
@@ -18,6 +20,7 @@ export class Transformer {
 
     public move(data: IMoveEvent): void {
         const { interaction } = this
+        if (!data.moveType) data.moveType = 'move'
 
         if (!this.moveData) {
             const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)

package/src/config.ts

@@ -19,6 +19,9 @@ export const config: IInteractionConfig = {
         swipeDistance: 20,
         preventDefaultMenu: true
     },
+    touch: {
+        preventDefault: true
+    },
     cursor: true,
     keyEvent: true
 }

package/types/index.d.ts

@@ -2,6 +2,7 @@ import { IMoveEvent, IZoomEvent, IRotateEvent, ITimer, IDragEvent, IPointerEvent
 import { LeafList } from '@leafer/core';
 
 declare class Transformer {
+    get transforming(): boolean;
     protected interaction: InteractionBase;
     protected moveData: IMoveEvent;
     protected zoomData: IZoomEvent;
@@ -63,7 +64,9 @@ declare class InteractionBase implements IInteraction {
     selector: ISelector;
     running: boolean;
     get dragging(): boolean;
+    get transforming(): boolean;
     get moveMode(): boolean;
+    get canHover(): boolean;
     get isDragEmpty(): boolean;
     get isMobileDragEmpty(): boolean;
     get isHoldMiddleKey(): boolean;
@@ -155,6 +158,8 @@ declare const InteractionHelper: {
     getBase(e: IObject): IUIEvent;
     pathHasEventType(path: ILeafList, type: string): boolean;
     filterPathByEventType(path: ILeafList, type: string): ILeafList;
+    pathCanDrag(path: ILeafList): boolean;
+    pathHasOutside(path: ILeafList): boolean;
 };
 
 declare const MultiTouchHelper: {