@leafer-ui/interaction 1.0.0-rc.10

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-ui/interaction

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@leafer-ui/interaction",
+  "version": "1.0.0-rc.10",
+  "description": "@leafer-ui/interaction",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "types/index.d.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/ui.git"
+  },
+  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/interaction/interaction",
+  "bugs": "https://github.com/leaferjs/ui/issues",
+  "keywords": [
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer/core": "1.0.0-rc.10",
+    "@leafer-ui/event": "1.0.0-rc.10"
+  },
+  "devDependencies": {
+    "@leafer/interface": "1.0.0-rc.10"
+  }
+}

package/src/Cursor.ts

@@ -0,0 +1,16 @@
+import { ICursorTypeMap, ICursorType } from '@leafer/interface'
+
+
+export class Cursor {
+
+    static custom: ICursorTypeMap = {}
+
+    static set(name: string, value: ICursorType | ICursorType[]): void {
+        this.custom[name] = value
+    }
+
+    static get(name: string): ICursorType | ICursorType[] {
+        return this.custom[name]
+    }
+
+}

package/src/Dragger.ts

@@ -0,0 +1,252 @@
+import { IPointerEvent, IDragEvent, ILeaf, ILeafList, ITimer, IFunction } from '@leafer/interface'
+import { BoundsHelper, PointHelper, LeafHelper, LeafList } from '@leafer/core'
+
+import { MoveEvent, DragEvent, DropEvent, PointerButton } from '@leafer-ui/event'
+
+import { InteractionHelper } from './InteractionHelper'
+import { InteractionBase } from './Interaction'
+
+
+const emptyList = new LeafList()
+const { getDragEventData, getDropEventData, getSwipeEventData } = InteractionHelper
+
+export class Dragger {
+
+    protected interaction: InteractionBase
+
+    public moving: boolean
+    public dragging: boolean
+
+    public dragData: IDragEvent
+    protected downData: IPointerEvent
+
+    public dragableList: ILeafList
+    protected dragOverPath: ILeafList
+    protected dragEnterPath: ILeafList
+
+    protected autoMoveTimer: ITimer
+
+    protected canAnimate: boolean
+    protected animateWait: IFunction
+
+    constructor(interaction: InteractionBase) {
+        this.interaction = interaction
+    }
+
+    public setDragData(data: IPointerEvent): void { // pointer down
+        if (this.animateWait) this.dragEndReal()
+        this.downData = this.interaction.downData
+        this.dragData = getDragEventData(data, data, data)
+    }
+
+    public getList(): ILeafList {
+        const { proxy } = this.interaction.selector
+        return this.dragging && (!proxy || !proxy.list.length) ? (DragEvent.list || this.dragableList || emptyList) : emptyList
+    }
+
+    public checkDrag(data: IPointerEvent, canDrag: boolean): void {
+        const { interaction } = this
+
+        if (this.moving && data.buttons < 1) {
+            this.canAnimate = false // 防止dragEnd动画
+            interaction.pointerCancel() // 按住中键/右键拖出页面后的up事件接收不到
+            return
+        } else {
+            this.canAnimate = true
+        }
+
+        if (!this.moving && canDrag) {
+            if (this.moving = interaction.moveMode || interaction.isHoldRightKey) interaction.emit(MoveEvent.START, this.dragData)
+        }
+
+        if (!this.moving) {
+            this.dragStart(data, canDrag)
+        }
+
+        this.drag(data)
+    }
+
+    public dragStart(data: IPointerEvent, canDrag: boolean): void {
+        if (!this.dragging) {
+            this.dragging = canDrag && PointerButton.left(data)
+            if (this.dragging) {
+                this.interaction.emit(DragEvent.START, this.dragData)
+                this.getDragableList(this.dragData.path)
+            }
+        }
+    }
+
+    protected getDragableList(path: ILeafList): void {
+        let leaf: ILeaf
+        for (let i = 0, len = path.length; i < len; i++) {
+            leaf = path.list[i]
+            if ((leaf.__.draggable || leaf.__.editable) && leaf.__.hitSelf && !leaf.__.locked) {
+                this.dragableList = new LeafList(leaf)
+                break
+            }
+        }
+    }
+
+    protected drag(data: IPointerEvent): void {
+        const { interaction, dragData, downData } = this
+        const { path, throughPath } = downData
+        this.dragData = getDragEventData(downData, dragData, data)
+        if (throughPath) this.dragData.throughPath = throughPath
+        this.dragData.path = path
+
+        if (this.moving) {
+            interaction.emit(MoveEvent.BEFORE_MOVE, this.dragData)
+            interaction.emit(MoveEvent.MOVE, this.dragData)
+        } else if (this.dragging) {
+            this.dragReal()
+            interaction.emit(DragEvent.BEFORE_DRAG, this.dragData)
+            interaction.emit(DragEvent.DRAG, this.dragData)
+        }
+    }
+
+    protected dragReal(): void {
+        const { running } = this.interaction
+        const list = this.getList()
+        if (list.length && running) {
+            const { moveX, moveY } = this.dragData
+            list.forEach(leaf => LeafHelper.moveWorld(leaf, moveX, moveY))
+        }
+    }
+
+    public dragOverOrOut(data: IPointerEvent): void {
+        const { interaction } = this
+        const { dragOverPath } = this
+        const { path } = data
+
+        if (dragOverPath) {
+            if (path.indexAt(0) !== dragOverPath.indexAt(0)) {
+                interaction.emit(DragEvent.OUT, data, dragOverPath)
+                interaction.emit(DragEvent.OVER, data, path)
+            }
+        } else {
+            interaction.emit(DragEvent.OVER, data, path)
+        }
+        this.dragOverPath = path
+    }
+
+    public dragEnterOrLeave(data: IPointerEvent): void {
+        const { interaction } = this
+        const { dragEnterPath } = this
+        const { path } = data
+
+        interaction.emit(DragEvent.LEAVE, data, dragEnterPath, path)
+        interaction.emit(DragEvent.ENTER, data, path, dragEnterPath)
+        this.dragEnterPath = path
+    }
+
+    public dragEnd(data: IPointerEvent, speed?: number): void {
+        if (!this.dragData) return
+
+        const { moveX, moveY } = this.dragData
+        if (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)
+
+            this.drag(data)
+            this.animate(() => { this.dragEnd(data, 1) })
+
+        } else {
+            this.dragEndReal(data)
+        }
+    }
+
+    protected dragEndReal(data?: IPointerEvent): void {
+        const { interaction, downData, dragData } = this
+        if (!data) data = dragData
+        const { path, throughPath } = downData
+        const endDragData = getDragEventData(downData, data, data)
+        if (throughPath) endDragData.throughPath = throughPath
+        endDragData.path = path
+
+        if (this.moving) interaction.emit(MoveEvent.END, endDragData)
+        if (this.dragging) {
+            interaction.emit(DragEvent.END, endDragData)
+
+            this.swipe(data, endDragData)
+            this.drop(data)
+        }
+
+        this.autoMoveCancel()
+        this.dragReset()
+        this.animate(null, 'off')
+    }
+
+    protected animate(func?: IFunction, off?: 'off'): void { // dragEnd animation
+        const animateWait = func || this.animateWait
+        if (animateWait) this.interaction.target.nextRender(animateWait, off)
+        this.animateWait = func
+    }
+
+
+    protected swipe(data: IPointerEvent, endDragData: IDragEvent): void {
+        const { interaction } = this
+        const { downData } = interaction
+        if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
+            const swipeData = getSwipeEventData(downData, this.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
+        this.interaction.emit(DropEvent.DROP, dropData)
+        this.interaction.emit(DragEvent.LEAVE, data, this.dragEnterPath)
+    }
+
+    protected dragReset(): void {
+        DragEvent.list = DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null
+        this.dragging = this.moving = false
+    }
+
+
+    public checkDragOut(data: IPointerEvent): void {
+        const { interaction } = this
+        this.autoMoveCancel()
+        if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data)) this.autoMoveOnDragOut(data)
+    }
+
+
+    protected autoMoveOnDragOut(data: IPointerEvent): void {
+        const { interaction, downData } = this
+        const { autoDistance, dragOut } = interaction.config.move
+        if (!dragOut || !autoDistance) return
+
+        const bounds = interaction.shrinkCanvasBounds
+        const { x, y } = bounds
+        const right = BoundsHelper.maxX(bounds)
+        const bottom = BoundsHelper.maxY(bounds)
+
+        const moveX = data.x < x ? autoDistance : (right < data.x ? -autoDistance : 0)
+        const moveY = data.y < y ? autoDistance : (bottom < data.y ? -autoDistance : 0)
+        let totalX = 0, totalY = 0
+
+        this.autoMoveTimer = setInterval(() => {
+            totalX += moveX
+            totalY += moveY
+
+            PointHelper.move(downData, moveX, moveY)
+            PointHelper.move(this.dragData, moveX, moveY)
+
+            interaction.move({ ...data, moveX, moveY, totalX, totalY })
+            interaction.pointerMoveReal(data)
+        }, 10)
+    }
+
+    protected autoMoveCancel(): void {
+        if (this.autoMoveTimer) {
+            clearInterval(this.autoMoveTimer)
+            this.autoMoveTimer = 0
+        }
+    }
+
+    public destroy(): void {
+        this.dragReset()
+    }
+}

package/src/HitCanvasManager.ts

@@ -0,0 +1,45 @@
+import { IScreenSizeData, IHitCanvasManager, ILeaf, IHitCanvas, ILeafList } 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 getImageType(leaf: ILeaf, size: IScreenSizeData): IHitCanvas {
+        this.imageTypeList.add(leaf)
+        return Creator.hitCanvas(size)
+    }
+
+    public getPathType(leaf: ILeaf): IHitCanvas {
+        this.pathTypeList.add(leaf)
+        return Creator.hitCanvas()
+    }
+
+    public clearImageType(): void {
+        this.__clearLeafList(this.imageTypeList)
+    }
+
+    public clearPathType(): void {
+        this.__clearLeafList(this.pathTypeList)
+    }
+
+    protected __clearLeafList(leafList: ILeafList): void {
+        if (leafList.length) {
+            leafList.forEach(leaf => {
+                if (leaf.__hitCanvas) {
+                    leaf.__hitCanvas.destroy()
+                    leaf.__hitCanvas = null
+                }
+            })
+            leafList.reset()
+        }
+    }
+
+    public clear(): void {
+        this.clearPathType()
+        this.clearImageType()
+    }
+
+}

package/src/Interaction.ts

@@ -0,0 +1,456 @@
+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 { PointerEvent, DropEvent, KeyEvent, PointerButton, Keyboard } from '@leafer-ui/event'
+
+import { Transformer } from './Transformer'
+import { Dragger } from './Dragger'
+import { emit } from './emit'
+import { InteractionHelper } from './InteractionHelper'
+import { MultiTouchHelper } from './MultiTouchHelper'
+import { config } from './config'
+
+
+const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper
+export class InteractionBase implements IInteraction {
+
+    public target: ILeaf
+    public canvas: IInteractionCanvas
+    public selector: ISelector
+
+    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 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 config: IInteractionConfig = config
+
+    public cursor: ICursorType | ICursorType[]
+    public get hitRadius(): number { return this.config.pointer.hitRadius }
+
+    public shrinkCanvasBounds: IBounds
+
+    public downData: IPointerEvent
+    protected oldDownData?: IPointerEvent // 通过updateDownData强制更新下来的数据
+    public hoverData: IPointerEvent
+
+    public downTime: number
+    protected overPath: LeafList
+    protected enterPath: LeafList
+
+    protected waitMenuTap: boolean
+    protected waitTap: boolean
+    protected longPressTimer: ITimer
+    protected longPressed: boolean
+    protected tapCount = 0
+    protected tapTimer: ITimer
+
+    protected dragger: Dragger
+    protected transformer: Transformer
+
+    protected __eventIds: IEventListenerId[]
+    protected defaultPath: ILeafList
+
+    protected downKeyMap: IBooleanMap = {}
+
+    constructor(target: ILeaf, canvas: IInteractionCanvas, selector: ISelector, userConfig?: IInteractionConfig) {
+        this.target = target
+        this.canvas = canvas
+        this.selector = selector
+        this.defaultPath = new LeafList(target)
+
+        this.transformer = new Transformer(this)
+        this.dragger = new Dragger(this)
+
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config)
+        this.__listenEvents()
+    }
+
+
+    public start(): void {
+        this.running = true
+    }
+
+    public stop(): void {
+        this.running = false
+    }
+
+
+    public receive(_event: any): void { }
+
+
+    public pointerDown(data?: IPointerEvent, useDefaultPath?: boolean): void {
+        if (!data) data = this.hoverData
+        if (!data) return
+        PointerButton.defaultLeft(data)
+
+        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 (PointerButton.left(data)) {
+            this.tapWait()
+            this.longPressWait(data)
+        } else if (PointerButton.right(data)) {
+            this.waitMenuTap = true
+        }
+
+        this.updateCursor(data)
+    }
+
+    public pointerMove(data?: IPointerEvent): void {
+        if (!data) data = this.hoverData
+        if (!data) return
+        if (this.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事件
+            this.pointerMoveReal(data)
+            this.dragger.checkDragOut(data)
+        }
+    }
+
+    public pointerMoveReal(data: IPointerEvent): void {
+        this.emit(PointerEvent.BEFORE_MOVE, data, this.defaultPath)
+
+        if (this.downData) {
+            const canDrag = PointHelper.getDistance(this.downData, data) > this.config.pointer.dragDistance
+            if (canDrag) {
+                if (this.waitTap) this.pointerWaitCancel()
+                this.waitMenuTap = false
+            }
+
+            this.dragger.checkDrag(data, canDrag)
+        }
+
+        if (!this.dragger.moving) {
+            this.updateHoverData(data)
+            this.emit(PointerEvent.MOVE, data)
+
+            this.pointerOverOrOut(data)
+            this.pointerEnterOrLeave(data)
+            if (this.dragger.dragging) {
+                this.dragger.dragOverOrOut(data)
+                this.dragger.dragEnterOrLeave(data)
+            }
+        }
+
+        this.updateCursor(this.downData || data)
+    }
+
+    public pointerUp(data?: IPointerEvent): void {
+        if (!data) data = this.downData
+        if (!this.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
+
+        this.touchLeave(data)
+
+        this.tap(data)
+        this.menuTap(data)
+
+        this.dragger.dragEnd(data)
+
+        this.downData = this.oldDownData = null
+
+        this.updateCursor(data)
+    }
+
+    public pointerCancel(): void {
+        this.pointerUp(this.dragger.dragData)
+    }
+
+
+    public multiTouch(data: IUIEvent, list: IKeepTouchData[]): void {
+        const { move, angle, scale, center } = MultiTouchHelper.getData(list)
+        this.rotate(getRotateEventData(center, angle, data))
+        this.zoom(getZoomEventData(center, scale, data))
+        this.move(getMoveEventData(center, move, data))
+    }
+
+    // context menu
+
+    public menu(data: IPointerEvent): void {
+        this.findPath(data)
+        this.emit(PointerEvent.MENU, data)
+    }
+
+    public menuTap(data: IPointerEvent): void {
+        if (this.waitMenuTap) this.emit(PointerEvent.MENU_TAP, data)
+    }
+
+    // window transform
+
+    public move(data: IMoveEvent): void {
+        this.transformer.move(data)
+    }
+
+    public zoom(data: IZoomEvent): void {
+        this.transformer.zoom(data)
+    }
+
+    public rotate(data: IRotateEvent): void {
+        this.transformer.rotate(data)
+    }
+
+    public transformEnd(): void {
+        this.transformer.transformEnd()
+    }
+
+
+    // key
+
+    public keyDown(data: IKeyEvent): void {
+        const { code } = data
+        if (!this.downKeyMap[code]) {
+            this.downKeyMap[code] = true
+            Keyboard.setDownCode(code)
+
+            this.emit(KeyEvent.HOLD, data, this.defaultPath)
+            if (this.moveMode) this.updateCursor()
+        }
+        this.emit(KeyEvent.DOWN, data, this.defaultPath)
+    }
+
+    public keyUp(data: IKeyEvent): void {
+        const { code } = data
+        this.downKeyMap[code] = false
+        Keyboard.setUpCode(code)
+
+        this.emit(KeyEvent.UP, data, this.defaultPath)
+        if (this.cursor === 'grab') this.updateCursor()
+    }
+
+
+    // helper
+    protected pointerOverOrOut(data: IPointerEvent): void {
+        if (this.dragger.moving) return
+        if (this.dragging && !this.config.pointer.dragHover) return
+
+        const { path } = data
+        if (this.overPath) {
+            if (path.indexAt(0) !== this.overPath.indexAt(0)) {
+                this.emit(PointerEvent.OUT, data, this.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
+
+        const { path } = data
+        this.emit(PointerEvent.LEAVE, data, this.enterPath, path)
+        this.emit(PointerEvent.ENTER, data, path, this.enterPath)
+        this.enterPath = path
+    }
+
+    protected touchLeave(data: IPointerEvent): void {
+        if (data.pointerType === 'touch') {
+            if (this.enterPath) {
+                this.emit(PointerEvent.LEAVE, data)
+                if (this.dragger.dragging) this.emit(DropEvent.LEAVE, data)
+            }
+        }
+    }
+
+    protected tap(data: IPointerEvent): void {
+        const { pointer } = this.config
+
+        const longTap = this.longTap(data)
+        if (!pointer.tapMore && longTap) return
+
+        if (!this.waitTap) return
+        if (pointer.tapMore) this.emitTap(data)
+
+        const useTime = Date.now() - this.downTime
+
+        const hasDouble = [PointerEvent.DOUBLE_TAP, PointerEvent.DOUBLE_CLICK].some(type => pathHasEventType(data.path, type))
+
+        if (useTime < pointer.tapTime + 50 && hasDouble) {
+
+            this.tapCount++
+            if (this.tapCount === 2) {
+                this.tapWaitCancel()
+                this.emitDoubleTap(data)
+            } else {
+                clearTimeout(this.tapTimer)
+                this.tapTimer = setTimeout(() => {
+                    if (!pointer.tapMore) {
+                        this.tapWaitCancel()
+                        this.emitTap(data)
+                    }
+                }, pointer.tapTime)
+            }
+
+        } else {
+
+            if (!pointer.tapMore) {
+                this.tapWaitCancel()
+                this.emitTap(data)
+            }
+        }
+    }
+
+
+    // update
+    public findPath(data: IPointerEvent, options?: IPickOptions): ILeafList {
+        const { hitRadius, through } = this.config.pointer
+        const find = this.selector.getByPoint(data, hitRadius, options || { through })
+        if (find.throughPath) data.throughPath = find.throughPath
+        data.path = find.path
+        return find.path
+    }
+
+    public isDrag(leaf: ILeaf): boolean {
+        return this.dragger.getList().has(leaf)
+    }
+
+    public updateDownData(data?: IPointerEvent, options?: IPickOptions): void {
+        const { downData } = this
+        if (!data && downData) data = { ...downData }
+        if (!data) return
+        this.oldDownData = downData
+        this.findPath(data, options)
+        this.downData = data
+    }
+
+    public updateHoverData(data?: IPointerEvent): void {
+        if (!data) data = this.hoverData
+        if (!data) return
+        this.findPath(data, { exclude: this.dragger.getList(), name: PointerEvent.MOVE })
+        this.hoverData = data
+    }
+
+    public updateCursor(data?: IPointerEvent): void {
+        if (this.config.cursor.stop) return
+
+        if (!data) {
+            this.updateHoverData()
+            data = this.downData || this.hoverData
+        }
+
+        if (this.dragger.moving) {
+            return this.setCursor('grabbing')
+        } else if (this.moveMode) {
+            return this.setCursor(this.downData ? 'grabbing' : 'grab')
+        } else if (!data) return
+
+        let leaf: ILeaf
+        let cursor: ICursorType | ICursorType[]
+
+        const { path } = data
+        for (let i = 0, len = path.length; i < len; i++) {
+            leaf = path.list[i]
+            cursor = leaf.cursor
+            if (cursor) break
+        }
+
+        this.setCursor(cursor)
+    }
+
+    public setCursor(cursor: ICursorType | ICursorType[]): void {
+        this.cursor = cursor
+    }
+
+    protected emitTap(data: IPointerEvent) {
+        this.emit(PointerEvent.TAP, data)
+        this.emit(PointerEvent.CLICK, data)
+    }
+
+    protected emitDoubleTap(data: IPointerEvent) {
+        this.emit(PointerEvent.DOUBLE_TAP, data)
+        this.emit(PointerEvent.DOUBLE_CLICK, data)
+    }
+
+    public pointerWaitCancel(): void {
+        this.tapWaitCancel()
+        this.longPressWaitCancel()
+    }
+
+    protected tapWait(): void {
+        clearTimeout(this.tapTimer)
+        this.waitTap = true
+    }
+
+    protected tapWaitCancel(): void {
+        clearTimeout(this.tapTimer)
+        this.waitTap = false
+        this.tapCount = 0
+    }
+
+    protected longPressWait(data: IPointerEvent): void {
+        clearTimeout(this.longPressTimer)
+        this.longPressTimer = setTimeout(() => {
+            this.longPressed = true
+            this.emit(PointerEvent.LONG_PRESS, data)
+        }, this.config.pointer.longPressTime)
+    }
+
+    protected longTap(data: IPointerEvent): boolean {
+        let longTap
+        if (this.longPressed) {
+            this.emit(PointerEvent.LONG_TAP, data)
+            if (pathHasEventType(data.path, PointerEvent.LONG_TAP)) longTap = true
+        }
+        this.longPressWaitCancel()
+        return longTap
+    }
+
+    protected longPressWaitCancel(): void {
+        clearTimeout(this.longPressTimer)
+        this.longPressed = false
+    }
+
+    protected __onResize(): void {
+        this.shrinkCanvasBounds = new Bounds(this.canvas.bounds)
+        this.shrinkCanvasBounds.spread(-2)
+    }
+
+    protected __listenEvents(): void {
+        const { target } = this
+        this.__eventIds = [target.on_(ResizeEvent.RESIZE, this.__onResize, this)]
+        target.once(LeaferEvent.READY, () => this.__onResize())
+    }
+
+    protected __removeListenEvents(): void {
+        this.target.off_(this.__eventIds)
+        this.__eventIds.length = 0
+    }
+
+
+    public emit(type: string, data: IUIEvent, path?: ILeafList, excludePath?: ILeafList): void {
+        if (this.running) emit(type, data, path, excludePath)
+    }
+
+
+    public destroy(): void {
+        if (this.__eventIds.length) {
+            this.stop()
+            this.__removeListenEvents()
+            this.dragger.destroy()
+            this.transformer.destroy()
+            this.downData = this.overPath = this.enterPath = null
+        }
+    }
+
+}

package/src/InteractionHelper.ts

@@ -0,0 +1,111 @@
+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'
+
+
+export const InteractionHelper = {
+
+    getMoveEventData(center: IPointData, move: IPointData, event: IEvent): IMoveEvent {
+        return {
+            ...event,
+            x: center.x,
+            y: center.y,
+            moveX: move.x,
+            moveY: move.y
+        } as IMoveEvent
+    },
+
+    getRotateEventData(center: IPointData, angle: number, event: IEvent): IRotateEvent {
+        return {
+            ...event,
+            x: center.x,
+            y: center.y,
+            rotation: angle
+        } as IRotateEvent
+    },
+
+    getZoomEventData(center: IPointData, scale: number, event: IEvent): IZoomEvent {
+        return {
+            ...event,
+            x: center.x,
+            y: center.y,
+            scale,
+        } as IZoomEvent
+    },
+
+    getDragEventData(startPoint: IPointData, lastPoint: IPointData, event: IPointerEvent): IDragEvent {
+        return {
+            ...event,
+            x: event.x,
+            y: event.y,
+            moveX: event.x - lastPoint.x,
+            moveY: event.y - lastPoint.y,
+            totalX: event.x - startPoint.x,
+            totalY: event.y - startPoint.y,
+        } as IDragEvent
+    },
+
+    getDropEventData(event: IPointerEvent, list: ILeafList, data: IObject): IDropEvent {
+        return {
+            ...event,
+            list,
+            data
+        }
+    },
+
+    getSwipeDirection(angle: number): string {
+        if (angle < -45 && angle > -135) {
+            return SwipeEvent.UP
+        } else if (angle > 45 && angle < 135) {
+            return SwipeEvent.DOWN
+        } else if (angle <= 45 && angle >= -45) {
+            return SwipeEvent.RIGHT
+        } else {
+            return SwipeEvent.LEFT
+        }
+    },
+
+    getSwipeEventData(startPoint: IPointData, lastDragData: IDragEvent, event: IPointerEvent): ISwipeEvent {
+        return {
+            ...event,
+            moveX: lastDragData.moveX,
+            moveY: lastDragData.moveY,
+            totalX: event.x - startPoint.x,
+            totalY: event.y - startPoint.y,
+            type: I.getSwipeDirection(PointHelper.getAngle(startPoint, event)),
+        }
+    },
+
+
+    getBase(e: IObject): IUIEvent {
+        const pointerUpButtons = e.button === 1 ? 4 : e.button // 0: left, 1: middle, 2: right
+        return {
+            altKey: e.altKey,
+            ctrlKey: e.ctrlKey,
+            shiftKey: e.shiftKey,
+            metaKey: e.metaKey,
+            buttons: e.buttons === undefined ? 1 : (e.buttons === 0 ? pointerUpButtons : e.buttons), // touchEvent no button and buttons, set default
+            origin: e
+        } as IUIEvent
+    },
+
+    pathHasEventType(path: ILeafList, type: string): boolean {
+        const { list } = path
+        for (let i = 0, len = list.length; i < len; i++) {
+            if (list[i].hasEvent(type)) return true
+        }
+        return false
+    },
+
+    filterPathByEventType(path: ILeafList, type: string): ILeafList {
+        const find = new LeafList()
+        const { list } = path
+        for (let i = 0, len = list.length; i < len; i++) {
+            if (list[i].hasEvent(type)) find.add(list[i])
+        }
+        return find
+    }
+}
+
+const I = InteractionHelper

package/src/MultiTouchHelper.ts

@@ -0,0 +1,22 @@
+import { IMultiTouchData, IKeepTouchData } from '@leafer/interface'
+import { PointHelper } from '@leafer/core'
+
+
+export const MultiTouchHelper = {
+
+    getData(list: IKeepTouchData[]): IMultiTouchData {
+        const a = list[0]
+        const b = list[1]
+        const lastCenter = PointHelper.getCenter(a.from, b.from)
+        const center = PointHelper.getCenter(a.to, b.to)
+        const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y }
+
+        const lastDistance = PointHelper.getDistance(a.from, b.from)
+        const distance = PointHelper.getDistance(a.to, b.to)
+        const scale = distance / lastDistance
+
+        const angle = PointHelper.getRotation(a.from, b.from, a.to, b.to)
+
+        return { move, scale, angle, center }
+    }
+}

package/src/Transformer.ts

@@ -0,0 +1,108 @@
+import { IMoveEvent, IZoomEvent, IRotateEvent, ITimer } from '@leafer/interface'
+import { MoveEvent, ZoomEvent, RotateEvent } from '@leafer-ui/event'
+
+import { InteractionBase } from './Interaction'
+
+
+export class Transformer {
+
+    protected interaction: InteractionBase
+    protected moveData: IMoveEvent
+    protected zoomData: IZoomEvent
+    protected rotateData: IRotateEvent
+    protected transformTimer: ITimer
+
+    constructor(interaction: InteractionBase) {
+        this.interaction = interaction
+    }
+
+    public move(data: IMoveEvent): void {
+        const { interaction } = this
+
+        if (!this.moveData) {
+            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
+            data.path = path
+            this.moveData = { ...data, moveX: 0, moveY: 0 }
+            interaction.emit(MoveEvent.START, this.moveData)
+        }
+
+        data.path = this.moveData.path
+        interaction.emit(MoveEvent.BEFORE_MOVE, data)
+        interaction.emit(MoveEvent.MOVE, data)
+
+        this.transformEndWait()
+    }
+
+    public zoom(data: IZoomEvent): void {
+        const { interaction } = this
+
+        if (!this.zoomData) {
+            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
+            data.path = path
+            this.zoomData = { ...data, scale: 1 }
+            interaction.emit(ZoomEvent.START, this.zoomData)
+        }
+
+        data.path = this.zoomData.path
+        interaction.emit(ZoomEvent.BEFORE_ZOOM, data)
+        interaction.emit(ZoomEvent.ZOOM, data)
+
+        this.transformEndWait()
+    }
+
+    public rotate(data: IRotateEvent): void {
+        const { interaction } = this
+
+        if (!this.rotateData) {
+            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
+            data.path = path
+            this.rotateData = { ...data, rotation: 0 }
+            interaction.emit(RotateEvent.START, this.rotateData)
+        }
+
+        data.path = this.rotateData.path
+        interaction.emit(RotateEvent.BEFORE_ROTATE, data)
+        interaction.emit(RotateEvent.ROTATE, data)
+
+        this.transformEndWait()
+    }
+
+
+    protected transformEndWait(): void {
+        clearTimeout(this.transformTimer)
+        this.transformTimer = setTimeout(() => {
+            this.transformEnd()
+        }, this.interaction.config.pointer.transformTime)
+    }
+
+    public transformEnd(): void {
+        this.moveEnd()
+        this.zoomEnd()
+        this.rotateEnd()
+    }
+
+    protected moveEnd(): void {
+        if (this.moveData) {
+            this.interaction.emit(MoveEvent.END, this.moveData)
+            this.moveData = null
+        }
+    }
+
+    protected zoomEnd(): void {
+        if (this.zoomData) {
+            this.interaction.emit(ZoomEvent.END, this.zoomData)
+            this.zoomData = null
+        }
+    }
+
+    protected rotateEnd(): void {
+        if (this.rotateData) {
+            this.interaction.emit(RotateEvent.END, this.rotateData)
+            this.rotateData = null
+        }
+    }
+
+    public destroy(): void {
+        this.zoomData = this.moveData = this.rotateData = null
+    }
+}

package/src/config.ts

@@ -0,0 +1,25 @@
+import { IInteractionConfig } from '@leafer/interface'
+
+export const config: IInteractionConfig = {
+    wheel: {
+        zoomMode: false,
+        zoomSpeed: 0.5,
+        moveSpeed: 0.5,
+        rotateSpeed: 0.5,
+        delta: { x: 80 / 4, y: 8.0 }, // 基准速度（会影响zoomSpeed)，可根据不同系统、浏览器细化定制
+        preventDefault: true
+    },
+    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

@@ -0,0 +1,64 @@
+import { IUIEvent, ILeaf, ILeafList } from '@leafer/interface'
+import { EventCreator, Debug } from '@leafer/core'
+
+const debug = Debug.get('emit')
+
+export function emit(type: string, data: IUIEvent, path?: ILeafList, excludePath?: ILeafList): void {
+    if (!path && !data.path) return
+
+    let leaf: ILeaf
+    data.type = type
+    if (path) {
+        data = { ...data, path }
+    } else {
+        path = data.path
+    }
+
+    data.target = path.indexAt(0)
+
+    try {
+
+        // capture
+        for (let i = path.length - 1; i > -1; i--) {
+            leaf = path.list[i]
+            if (emitEvent(leaf, type, data, true, excludePath)) return
+            if (leaf.isApp) emitAppChildren(leaf, type, data, true, excludePath) //  other leafer
+        }
+
+        // bubble
+        for (let i = 0, len = path.length; i < len; i++) {
+            leaf = path.list[i]
+            if (leaf.isApp) emitAppChildren(leaf, type, data, false, excludePath) //  other leafer
+            if (emitEvent(leaf, type, data, false, excludePath)) return
+        }
+
+    } catch (e) {
+        debug.error(e)
+    }
+}
+
+const allowTypes = ['move', 'zoom', 'rotate', 'key']
+function emitAppChildren(leaf: ILeaf, type: string, data: IUIEvent, capture?: boolean, excludePath?: ILeafList): void {
+    if (allowTypes.some(name => type.startsWith(name)) && leaf.__.hitChildren && !exclude(leaf, excludePath)) {
+        let child: ILeaf
+        for (let i = 0, len = leaf.children.length; i < len; i++) {
+            child = leaf.children[i]
+            if (!data.path.has(child) && child.__.hittable) emitEvent(child, type, data, capture, excludePath) //  other leafer
+        }
+    }
+}
+
+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
+    }
+    return false
+}
+
+function exclude(leaf: ILeaf, excludePath?: ILeafList): boolean {
+    return excludePath && excludePath.has(leaf)
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { InteractionBase } from './Interaction'
+export { InteractionHelper } from './InteractionHelper'
+export { MultiTouchHelper } from './MultiTouchHelper'
+export { Cursor } from './Cursor'
+export { HitCanvasManager } from './HitCanvasManager'

package/types/index.d.ts

@@ -0,0 +1,163 @@
+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 { LeafList, CanvasManager } from '@leafer/core';
+
+declare class Transformer {
+    protected interaction: InteractionBase;
+    protected moveData: IMoveEvent;
+    protected zoomData: IZoomEvent;
+    protected rotateData: IRotateEvent;
+    protected transformTimer: ITimer;
+    constructor(interaction: InteractionBase);
+    move(data: IMoveEvent): void;
+    zoom(data: IZoomEvent): void;
+    rotate(data: IRotateEvent): void;
+    protected transformEndWait(): void;
+    transformEnd(): void;
+    protected moveEnd(): void;
+    protected zoomEnd(): void;
+    protected rotateEnd(): void;
+    destroy(): void;
+}
+
+declare class Dragger {
+    protected interaction: InteractionBase;
+    moving: boolean;
+    dragging: boolean;
+    dragData: IDragEvent;
+    protected downData: IPointerEvent;
+    dragableList: ILeafList;
+    protected dragOverPath: ILeafList;
+    protected dragEnterPath: ILeafList;
+    protected autoMoveTimer: ITimer;
+    protected canAnimate: boolean;
+    protected animateWait: IFunction;
+    constructor(interaction: InteractionBase);
+    setDragData(data: IPointerEvent): void;
+    getList(): ILeafList;
+    checkDrag(data: IPointerEvent, canDrag: boolean): void;
+    dragStart(data: IPointerEvent, canDrag: boolean): void;
+    protected getDragableList(path: ILeafList): void;
+    protected drag(data: IPointerEvent): void;
+    protected dragReal(): void;
+    dragOverOrOut(data: IPointerEvent): void;
+    dragEnterOrLeave(data: IPointerEvent): void;
+    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 dragReset(): void;
+    checkDragOut(data: IPointerEvent): void;
+    protected autoMoveOnDragOut(data: IPointerEvent): void;
+    protected autoMoveCancel(): void;
+    destroy(): void;
+}
+
+declare class InteractionBase implements IInteraction {
+    target: ILeaf;
+    canvas: IInteractionCanvas;
+    selector: ISelector;
+    running: boolean;
+    get dragging(): boolean;
+    get isDragEmpty(): boolean;
+    get isHoldRightKey(): boolean;
+    get moveMode(): boolean;
+    config: IInteractionConfig;
+    cursor: ICursorType | ICursorType[];
+    get hitRadius(): number;
+    shrinkCanvasBounds: IBounds;
+    downData: IPointerEvent;
+    protected oldDownData?: IPointerEvent;
+    hoverData: IPointerEvent;
+    downTime: number;
+    protected overPath: LeafList;
+    protected enterPath: LeafList;
+    protected waitMenuTap: boolean;
+    protected waitTap: boolean;
+    protected longPressTimer: ITimer;
+    protected longPressed: boolean;
+    protected tapCount: number;
+    protected tapTimer: ITimer;
+    protected dragger: Dragger;
+    protected transformer: Transformer;
+    protected __eventIds: IEventListenerId[];
+    protected defaultPath: ILeafList;
+    protected downKeyMap: IBooleanMap;
+    constructor(target: ILeaf, canvas: IInteractionCanvas, selector: ISelector, userConfig?: IInteractionConfig);
+    start(): void;
+    stop(): void;
+    receive(_event: any): void;
+    pointerDown(data?: IPointerEvent, useDefaultPath?: boolean): void;
+    pointerMove(data?: IPointerEvent): void;
+    pointerMoveReal(data: IPointerEvent): void;
+    pointerUp(data?: IPointerEvent): void;
+    pointerCancel(): void;
+    multiTouch(data: IUIEvent, list: IKeepTouchData[]): void;
+    menu(data: IPointerEvent): void;
+    menuTap(data: IPointerEvent): void;
+    move(data: IMoveEvent): void;
+    zoom(data: IZoomEvent): void;
+    rotate(data: IRotateEvent): void;
+    transformEnd(): void;
+    keyDown(data: IKeyEvent): void;
+    keyUp(data: IKeyEvent): 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;
+    updateDownData(data?: IPointerEvent, options?: IPickOptions): void;
+    updateHoverData(data?: IPointerEvent): void;
+    updateCursor(data?: IPointerEvent): void;
+    setCursor(cursor: ICursorType | ICursorType[]): void;
+    protected emitTap(data: IPointerEvent): void;
+    protected emitDoubleTap(data: IPointerEvent): void;
+    pointerWaitCancel(): void;
+    protected tapWait(): void;
+    protected tapWaitCancel(): void;
+    protected longPressWait(data: IPointerEvent): void;
+    protected longTap(data: IPointerEvent): boolean;
+    protected longPressWaitCancel(): void;
+    protected __onResize(): void;
+    protected __listenEvents(): void;
+    protected __removeListenEvents(): void;
+    emit(type: string, data: IUIEvent, path?: ILeafList, excludePath?: ILeafList): void;
+    destroy(): void;
+}
+
+declare const InteractionHelper: {
+    getMoveEventData(center: IPointData, move: IPointData, event: IEvent): IMoveEvent;
+    getRotateEventData(center: IPointData, angle: number, event: IEvent): IRotateEvent;
+    getZoomEventData(center: IPointData, scale: number, event: IEvent): IZoomEvent;
+    getDragEventData(startPoint: IPointData, lastPoint: IPointData, event: IPointerEvent): IDragEvent;
+    getDropEventData(event: IPointerEvent, list: ILeafList, data: IObject): IDropEvent;
+    getSwipeDirection(angle: number): string;
+    getSwipeEventData(startPoint: IPointData, lastDragData: IDragEvent, event: IPointerEvent): ISwipeEvent;
+    getBase(e: IObject): IUIEvent;
+    pathHasEventType(path: ILeafList, type: string): boolean;
+    filterPathByEventType(path: ILeafList, type: string): ILeafList;
+};
+
+declare const MultiTouchHelper: {
+    getData(list: IKeepTouchData[]): IMultiTouchData;
+};
+
+declare class Cursor {
+    static custom: ICursorTypeMap;
+    static set(name: string, value: ICursorType | ICursorType[]): void;
+    static get(name: string): ICursorType | ICursorType[];
+}
+
+declare class HitCanvasManager extends CanvasManager implements IHitCanvasManager {
+    protected pathTypeList: ILeafList;
+    protected imageTypeList: ILeafList;
+    getImageType(leaf: ILeaf, size: IScreenSizeData): IHitCanvas;
+    getPathType(leaf: ILeaf): IHitCanvas;
+    clearImageType(): void;
+    clearPathType(): void;
+    protected __clearLeafList(leafList: ILeafList): void;
+    clear(): void;
+}
+
+export { Cursor, HitCanvasManager, InteractionBase, InteractionHelper, MultiTouchHelper };