nexa-mobile 0.6.4 → 0.7.0

package/dist/gestures/index.d.ts

@@ -0,0 +1,5 @@
+export * from './GestureManager.js';
+export * from './usePan.js';
+export * from './usePinch.js';
+export * from './useLongPress.js';
+export * from './useDoubleTap.js';

package/dist/gestures/index.js

@@ -0,0 +1,5 @@
+export * from './GestureManager.js';
+export * from './usePan.js';
+export * from './usePinch.js';
+export * from './useLongPress.js';
+export * from './useDoubleTap.js';

package/dist/gestures/useDoubleTap.d.ts

@@ -0,0 +1,8 @@
+export interface DoubleTapOptions {
+    interval?: number;
+    radius?: number;
+}
+export interface DoubleTapHandle {
+    destroy: () => void;
+}
+export declare function useDoubleTap(el: HTMLElement, callback: (e: TouchEvent) => void, options?: DoubleTapOptions): DoubleTapHandle;

package/dist/gestures/useDoubleTap.js

@@ -0,0 +1,32 @@
+export function useDoubleTap(el, callback, options = {}) {
+    const interval = options.interval ?? 300;
+    const radius = options.radius ?? 30;
+    let lastTapTime = 0;
+    let lastX = 0;
+    let lastY = 0;
+    const onTouchStart = (e) => {
+        const t = e.touches[0];
+        const now = Date.now();
+        const dt = now - lastTapTime;
+        const dx = Math.abs(t.clientX - lastX);
+        const dy = Math.abs(t.clientY - lastY);
+        if (dt < interval && dx <= radius && dy <= radius) {
+            callback(e);
+            lastTapTime = 0;
+        }
+        else {
+            lastTapTime = now;
+            lastX = t.clientX;
+            lastY = t.clientY;
+        }
+    };
+    const onTouchEnd = () => { };
+    el.addEventListener('touchstart', onTouchStart, { passive: true });
+    el.addEventListener('touchend', onTouchEnd, { passive: true });
+    return {
+        destroy() {
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchend', onTouchEnd);
+        },
+    };
+}

package/dist/gestures/useLongPress.d.ts

@@ -0,0 +1,8 @@
+export interface LongPressOptions {
+    threshold?: number;
+    moveTolerance?: number;
+}
+export interface LongPressHandle {
+    destroy: () => void;
+}
+export declare function useLongPress(el: HTMLElement, callback: (e: TouchEvent | MouseEvent) => void, options?: LongPressOptions): LongPressHandle;

package/dist/gestures/useLongPress.js

@@ -0,0 +1,52 @@
+export function useLongPress(el, callback, options = {}) {
+    const threshold = options.threshold ?? 500;
+    const moveTolerance = options.moveTolerance ?? 10;
+    let timer = null;
+    let startX = 0;
+    let startY = 0;
+    let currentEvent = null;
+    const clear = () => {
+        if (timer !== null) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+    const start = (x, y, e) => {
+        clear();
+        startX = x;
+        startY = y;
+        currentEvent = e;
+        timer = setTimeout(() => {
+            if (currentEvent)
+                callback(currentEvent);
+            timer = null;
+        }, threshold);
+    };
+    const move = (x, y) => {
+        const dx = Math.abs(x - startX);
+        const dy = Math.abs(y - startY);
+        if (dx > moveTolerance || dy > moveTolerance)
+            clear();
+    };
+    const onTouchStart = (e) => {
+        const t = e.touches[0];
+        start(t.clientX, t.clientY, e);
+    };
+    const onTouchMove = (e) => {
+        const t = e.touches[0];
+        move(t.clientX, t.clientY);
+    };
+    el.addEventListener('touchstart', onTouchStart, { passive: true });
+    el.addEventListener('touchmove', onTouchMove, { passive: true });
+    el.addEventListener('touchend', clear, { passive: true });
+    el.addEventListener('touchcancel', clear, { passive: true });
+    return {
+        destroy() {
+            clear();
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('touchend', clear);
+            el.removeEventListener('touchcancel', clear);
+        },
+    };
+}

package/dist/gestures/usePan.d.ts

@@ -0,0 +1,10 @@
+import { signal } from 'nexa-reactivity';
+export interface PanState {
+    active: ReturnType<typeof signal<boolean>>;
+    deltaX: ReturnType<typeof signal<number>>;
+    deltaY: ReturnType<typeof signal<number>>;
+    velocityX: ReturnType<typeof signal<number>>;
+    velocityY: ReturnType<typeof signal<number>>;
+    destroy: () => void;
+}
+export declare function usePan(el: HTMLElement): PanState;

package/dist/gestures/usePan.js

@@ -0,0 +1,88 @@
+import { signal, batch } from 'nexa-reactivity';
+export function usePan(el) {
+    const active = signal(false);
+    const deltaX = signal(0);
+    const deltaY = signal(0);
+    const velocityX = signal(0);
+    const velocityY = signal(0);
+    let startX = 0;
+    let startY = 0;
+    let lastX = 0;
+    let lastY = 0;
+    let lastTime = 0;
+    const onStart = (x, y) => {
+        startX = x;
+        startY = y;
+        lastX = x;
+        lastY = y;
+        lastTime = Date.now();
+        batch(() => {
+            active.value = true;
+            deltaX.value = 0;
+            deltaY.value = 0;
+            velocityX.value = 0;
+            velocityY.value = 0;
+        });
+    };
+    const onMove = (x, y) => {
+        if (!active.value)
+            return;
+        const now = Date.now();
+        batch(() => {
+            deltaX.value = x - startX;
+            deltaY.value = y - startY;
+        });
+        lastX = x;
+        lastY = y;
+        lastTime = now;
+    };
+    const onEnd = (x, y) => {
+        const dt = Date.now() - lastTime;
+        if (dt > 0) {
+            batch(() => {
+                velocityX.value = (x - lastX) / dt;
+                velocityY.value = (y - lastY) / dt;
+                active.value = false;
+            });
+        }
+        else {
+            active.value = false;
+        }
+    };
+    const onTouchStart = (e) => {
+        const t = e.touches[0];
+        onStart(t.clientX, t.clientY);
+    };
+    const onTouchMove = (e) => {
+        const t = e.touches[0];
+        onMove(t.clientX, t.clientY);
+    };
+    const onTouchEnd = (e) => {
+        const t = e.changedTouches[0];
+        onEnd(t ? t.clientX : lastX, t ? t.clientY : lastY);
+    };
+    const onMouseDown = (e) => onStart(e.clientX, e.clientY);
+    const onMouseMove = (e) => onMove(e.clientX, e.clientY);
+    const onMouseUp = (e) => onEnd(e.clientX, e.clientY);
+    el.addEventListener('touchstart', onTouchStart, { passive: true });
+    el.addEventListener('touchmove', onTouchMove, { passive: false });
+    el.addEventListener('touchend', onTouchEnd, { passive: true });
+    el.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    return {
+        active,
+        deltaX,
+        deltaY,
+        velocityX,
+        velocityY,
+        destroy() {
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('touchend', onTouchEnd);
+            el.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        },
+    };
+}

package/dist/gestures/usePinch.d.ts

@@ -0,0 +1,9 @@
+import { signal } from 'nexa-reactivity';
+export interface PinchState {
+    active: ReturnType<typeof signal<boolean>>;
+    scale: ReturnType<typeof signal<number>>;
+    originX: ReturnType<typeof signal<number>>;
+    originY: ReturnType<typeof signal<number>>;
+    destroy: () => void;
+}
+export declare function usePinch(el: HTMLElement): PinchState;

package/dist/gestures/usePinch.js

@@ -0,0 +1,57 @@
+import { signal, batch } from 'nexa-reactivity';
+const getDistance = (t1, t2) => {
+    const dx = t1.clientX - t2.clientX;
+    const dy = t1.clientY - t2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+};
+const getMidpoint = (t1, t2) => ({
+    x: (t1.clientX + t2.clientX) / 2,
+    y: (t1.clientY + t2.clientY) / 2,
+});
+export function usePinch(el) {
+    const active = signal(false);
+    const scale = signal(1);
+    const originX = signal(0);
+    const originY = signal(0);
+    let startDistance = 0;
+    let startScale = 1;
+    const onTouchStart = (e) => {
+        if (e.touches.length < 2)
+            return;
+        startDistance = getDistance(e.touches[0], e.touches[1]);
+        startScale = scale.value;
+        const mid = getMidpoint(e.touches[0], e.touches[1]);
+        batch(() => {
+            active.value = true;
+            originX.value = mid.x;
+            originY.value = mid.y;
+        });
+    };
+    const onTouchMove = (e) => {
+        if (e.touches.length < 2 || !active.value)
+            return;
+        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+        if (startDistance === 0)
+            return;
+        scale.value = startScale * (currentDistance / startDistance);
+    };
+    const onTouchEnd = (e) => {
+        if (e.touches.length < 2) {
+            active.value = false;
+        }
+    };
+    el.addEventListener('touchstart', onTouchStart, { passive: true });
+    el.addEventListener('touchmove', onTouchMove, { passive: false });
+    el.addEventListener('touchend', onTouchEnd, { passive: true });
+    return {
+        active,
+        scale,
+        originX,
+        originY,
+        destroy() {
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('touchend', onTouchEnd);
+        },
+    };
+}

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './gestures/GestureManager.js';
+export * from './gestures/index.js';

package/dist/index.js

@@ -1 +1 @@
-export * from './gestures/GestureManager.js';
+export * from './gestures/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-mobile",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,8 +13,8 @@
     }
   },
   "dependencies": {
-    "nexa-reactivity": "0.6.4",
-    "nexa-runtime": "0.6.4"
+    "nexa-reactivity": "0.7.0",
+    "nexa-runtime": "0.7.0"
   },
   "files": [
     "dist"