@leafer-ui/interaction-miniapp 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-miniapp

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@leafer-ui/interaction-miniapp",
+  "version": "1.0.0-rc.10",
+  "description": "@leafer-ui/interaction-miniapp",
+  "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-miniapp",
+  "bugs": "https://github.com/leaferjs/ui/issues",
+  "keywords": [
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer-ui/core": "1.0.0-rc.10"
+  },
+  "devDependencies": {
+    "@leafer/interface": "1.0.0-rc.10"
+  }
+}

package/src/Interaction.ts

@@ -0,0 +1,140 @@
+import { IKeepTouchData, IPointData } from '@leafer/interface'
+import { InteractionBase, InteractionHelper } from '@leafer-ui/core'
+
+import { PointerEventHelper } from './PointerEventHelper'
+
+
+interface IClientPoint {
+    clientX: number
+    clientY: number
+    x?: number
+    y?: number
+}
+
+interface ITouch {
+    readonly clientX: number
+    readonly clientY: number
+    readonly identifier: number
+    readonly pageX: number
+    readonly pageY: number
+    readonly x?: number
+    readonly y?: number
+}
+
+
+export class Interaction extends InteractionBase {
+
+    protected useMultiTouch: boolean
+    protected useTouch: boolean
+    protected touches?: ITouch[]
+
+    protected __listenEvents(): void {
+        super.__listenEvents()
+        if (this.config.eventer) this.config.eventer.receiveEvent = this.receive.bind(this)
+
+    }
+
+    public receive(e: any): void {
+        switch (e.type) {
+            case 'touchstart':
+                this.onTouchStart(e)
+                break
+            case 'touchmove':
+                this.onTouchMove(e)
+                break
+            case 'touchend':
+                this.onTouchEnd(e)
+                break
+            case 'touchcancel':
+                this.onTouchCancel()
+        }
+    }
+
+    protected getLocal(p: IClientPoint, updateClient?: boolean): IPointData {
+        if (updateClient) this.canvas.updateClientBounds()
+        if (p.x !== undefined) {
+            return { x: p.x, y: p.y } // Canvas
+        } else {
+            const { clientBounds } = this.canvas
+            return { x: p.clientX - clientBounds.x, y: p.clientY - clientBounds.y }
+        }
+    }
+
+    protected getTouches(touches: any): ITouch[] {
+        return touches
+    }
+
+
+    // touch
+    protected onTouchStart(e: TouchEvent): void {
+        this.multiTouchStart(e)
+
+        const touch = PointerEventHelper.getTouch(e)
+        this.pointerDown(PointerEventHelper.convertTouch(e, this.getLocal(touch, true)))
+    }
+
+    protected onTouchMove(e: TouchEvent): void {
+        this.multiTouchMove(e)
+        if (this.useMultiTouch) return
+        const touch = PointerEventHelper.getTouch(e)
+        this.pointerMove(PointerEventHelper.convertTouch(e, this.getLocal(touch)))
+    }
+
+    protected onTouchEnd(e: TouchEvent): void {
+        this.multiTouchEnd()
+
+        const touch = PointerEventHelper.getTouch(e)
+        this.pointerUp(PointerEventHelper.convertTouch(e, this.getLocal(touch)))
+    }
+
+    protected onTouchCancel(): void {
+        this.pointerCancel()
+    }
+
+
+    // multiTouch
+    protected multiTouchStart(e: TouchEvent): void {
+        this.useMultiTouch = (e.touches.length >= 2)
+        this.touches = this.useMultiTouch ? this.getTouches(e.touches) : undefined
+        if (this.useMultiTouch) this.pointerCancel()
+    }
+
+    protected multiTouchMove(e: TouchEvent): void {
+        if (!this.useMultiTouch) return
+        if (e.touches.length > 1) {
+            const touches = this.getTouches(e.touches)
+            const list = this.getKeepTouchList(this.touches, touches)
+            if (list.length > 1) {
+                this.multiTouch(InteractionHelper.getBase(e), list)
+                this.touches = touches
+            }
+        }
+    }
+
+    protected multiTouchEnd(): void {
+        this.touches = null
+        this.useMultiTouch = false
+        this.transformEnd()
+    }
+
+    protected getKeepTouchList(old: ITouch[], touches: ITouch[]): IKeepTouchData[] {
+        let to: ITouch
+        const list: IKeepTouchData[] = []
+        old.forEach(from => {
+            to = touches.find(touch => touch.identifier === from.identifier)
+            if (to) list.push({ from: this.getLocal(from), to: this.getLocal(to) })
+        })
+        return list
+    }
+
+    protected getLocalTouchs(points: ITouch[]): IPointData[] {
+        return points.map(point => this.getLocal(point))
+    }
+
+
+    public destroy(): void {
+        super.destroy()
+        this.touches = null
+    }
+
+}

package/src/PointerEventHelper.ts

@@ -0,0 +1,25 @@
+import { IPointData, IPointerEvent } from '@leafer/interface'
+import { InteractionHelper } from '@leafer-ui/core'
+
+
+export const PointerEventHelper = {
+
+    convertTouch(e: TouchEvent, local: IPointData): IPointerEvent {
+        const touch = PointerEventHelper.getTouch(e)
+        const base = InteractionHelper.getBase(e)
+        return {
+            ...base,
+            x: local.x,
+            y: local.y,
+            width: 1,
+            height: 1,
+            pointerType: 'touch',
+            pressure: touch.force || 1,
+        }
+    },
+
+    getTouch(e: TouchEvent): Touch {
+        return e.touches[0] || e.changedTouches[0]
+    }
+
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { Interaction } from './Interaction'

package/types/index.d.ts

@@ -0,0 +1,39 @@
+import { IPointData, IKeepTouchData } from '@leafer/interface';
+import { InteractionBase } from '@leafer-ui/core';
+
+interface IClientPoint {
+    clientX: number;
+    clientY: number;
+    x?: number;
+    y?: number;
+}
+interface ITouch {
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly identifier: number;
+    readonly pageX: number;
+    readonly pageY: number;
+    readonly x?: number;
+    readonly y?: number;
+}
+declare class Interaction extends InteractionBase {
+    protected useMultiTouch: boolean;
+    protected useTouch: boolean;
+    protected touches?: ITouch[];
+    protected __listenEvents(): void;
+    receive(e: any): void;
+    protected getLocal(p: IClientPoint, updateClient?: boolean): IPointData;
+    protected getTouches(touches: any): ITouch[];
+    protected onTouchStart(e: TouchEvent): void;
+    protected onTouchMove(e: TouchEvent): void;
+    protected onTouchEnd(e: TouchEvent): void;
+    protected onTouchCancel(): void;
+    protected multiTouchStart(e: TouchEvent): void;
+    protected multiTouchMove(e: TouchEvent): void;
+    protected multiTouchEnd(): void;
+    protected getKeepTouchList(old: ITouch[], touches: ITouch[]): IKeepTouchData[];
+    protected getLocalTouchs(points: ITouch[]): IPointData[];
+    destroy(): void;
+}
+
+export { Interaction };