@anymux/ui-kit 0.1.0

package/src/file-browser/utils/gestures.ts

@@ -0,0 +1,327 @@
+export interface TouchPoint {
+  x: number;
+  y: number;
+  timestamp: number;
+}
+
+export interface SwipeGestureOptions {
+  threshold?: number; // Minimum distance for swipe (default: 50px)
+  restraint?: number; // Maximum perpendicular distance (default: 100px)
+  allowedTime?: number; // Maximum time for swipe (default: 500ms)
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+}
+
+export interface PinchGestureOptions {
+  threshold?: number; // Minimum scale change (default: 0.1)
+  onPinchStart?: (scale: number) => void;
+  onPinchMove?: (scale: number) => void;
+  onPinchEnd?: (scale: number) => void;
+}
+
+export interface LongPressOptions {
+  duration?: number; // Duration in ms (default: 500ms)
+  threshold?: number; // Maximum movement threshold (default: 10px)
+  onLongPress?: (point: TouchPoint) => void;
+}
+
+export class TouchGestureHandler {
+  private element: HTMLElement;
+  private startPoint: TouchPoint | null = null;
+  private endPoint: TouchPoint | null = null;
+  private longPressTimer: number | null = null;
+  private isLongPress = false;
+  private initialDistance = 0;
+  private currentScale = 1;
+
+  constructor(
+    element: HTMLElement,
+    private swipeOptions: SwipeGestureOptions = {},
+    private pinchOptions: PinchGestureOptions = {},
+    private longPressOptions: LongPressOptions = {}
+  ) {
+    this.element = element;
+    this.setupEventListeners();
+  }
+
+  private setupEventListeners() {
+    // Touch events
+    this.element.addEventListener('touchstart', this.handleTouchStart, { passive: false });
+    this.element.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+    this.element.addEventListener('touchend', this.handleTouchEnd, { passive: false });
+    this.element.addEventListener('touchcancel', this.handleTouchCancel, { passive: false });
+
+    // Mouse events for desktop testing
+    this.element.addEventListener('mousedown', this.handleMouseDown);
+    this.element.addEventListener('mousemove', this.handleMouseMove);
+    this.element.addEventListener('mouseup', this.handleMouseUp);
+    this.element.addEventListener('mouseleave', this.handleMouseLeave);
+  }
+
+  private handleTouchStart = (e: TouchEvent) => {
+    if (e.touches.length === 1 && e.touches[0]) {
+      // Single touch - potential swipe or long press
+      this.startPoint = this.getTouchPoint(e.touches[0]);
+      this.isLongPress = false;
+      this.startLongPressTimer();
+    } else if (e.touches.length === 2) {
+      // Two-finger touch - potential pinch
+      this.handlePinchStart(e);
+      this.clearLongPressTimer();
+    }
+  };
+
+  private handleTouchMove = (e: TouchEvent) => {
+    if (e.touches.length === 1 && this.startPoint && e.touches[0]) {
+      const currentPoint = this.getTouchPoint(e.touches[0]);
+      const distance = this.getDistance(this.startPoint, currentPoint);
+      
+      // Cancel long press if movement exceeds threshold
+      if (distance > (this.longPressOptions.threshold || 10)) {
+        this.clearLongPressTimer();
+      }
+    } else if (e.touches.length === 2) {
+      this.handlePinchMove(e);
+    }
+  };
+
+  private handleTouchEnd = (e: TouchEvent) => {
+    this.clearLongPressTimer();
+    
+    if (e.changedTouches.length === 1 && this.startPoint && !this.isLongPress && e.changedTouches[0]) {
+      this.endPoint = this.getTouchPoint(e.changedTouches[0]);
+      this.processSwipeGesture();
+    } else if (e.touches.length < 2) {
+      this.handlePinchEnd();
+    }
+    
+    this.startPoint = null;
+    this.endPoint = null;
+  };
+
+  private handleTouchCancel = () => {
+    this.clearLongPressTimer();
+    this.handlePinchEnd();
+    this.startPoint = null;
+    this.endPoint = null;
+  };
+
+  // Mouse events for desktop testing
+  private handleMouseDown = (e: MouseEvent) => {
+    this.startPoint = {
+      x: e.clientX,
+      y: e.clientY,
+      timestamp: Date.now()
+    };
+    this.startLongPressTimer();
+  };
+
+  private handleMouseMove = (e: MouseEvent) => {
+    if (this.startPoint) {
+      const currentPoint = { x: e.clientX, y: e.clientY, timestamp: Date.now() };
+      const distance = this.getDistance(this.startPoint, currentPoint);
+      
+      if (distance > (this.longPressOptions.threshold || 10)) {
+        this.clearLongPressTimer();
+      }
+    }
+  };
+
+  private handleMouseUp = (e: MouseEvent) => {
+    this.clearLongPressTimer();
+    
+    if (this.startPoint && !this.isLongPress) {
+      this.endPoint = {
+        x: e.clientX,
+        y: e.clientY,
+        timestamp: Date.now()
+      };
+      this.processSwipeGesture();
+    }
+    
+    this.startPoint = null;
+    this.endPoint = null;
+  };
+
+  private handleMouseLeave = () => {
+    this.clearLongPressTimer();
+    this.startPoint = null;
+    this.endPoint = null;
+  };
+
+  private getTouchPoint(touch: Touch): TouchPoint {
+    return {
+      x: touch.clientX,
+      y: touch.clientY,
+      timestamp: Date.now()
+    };
+  }
+
+  private getDistance(point1: TouchPoint, point2: TouchPoint): number {
+    const dx = point2.x - point1.x;
+    const dy = point2.y - point1.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  private processSwipeGesture() {
+    if (!this.startPoint || !this.endPoint) return;
+
+    const threshold = this.swipeOptions.threshold || 50;
+    const restraint = this.swipeOptions.restraint || 100;
+    const allowedTime = this.swipeOptions.allowedTime || 500;
+
+    const deltaX = this.endPoint.x - this.startPoint.x;
+    const deltaY = this.endPoint.y - this.startPoint.y;
+    const deltaTime = this.endPoint.timestamp - this.startPoint.timestamp;
+
+    // Check if gesture was quick enough
+    if (deltaTime > allowedTime) return;
+
+    const absDeltaX = Math.abs(deltaX);
+    const absDeltaY = Math.abs(deltaY);
+
+    // Horizontal swipe
+    if (absDeltaX >= threshold && absDeltaY <= restraint) {
+      if (deltaX > 0) {
+        this.swipeOptions.onSwipeRight?.();
+      } else {
+        this.swipeOptions.onSwipeLeft?.();
+      }
+    }
+    // Vertical swipe
+    else if (absDeltaY >= threshold && absDeltaX <= restraint) {
+      if (deltaY > 0) {
+        this.swipeOptions.onSwipeDown?.();
+      } else {
+        this.swipeOptions.onSwipeUp?.();
+      }
+    }
+  }
+
+  private handlePinchStart(e: TouchEvent) {
+    if (e.touches.length === 2) {
+      const touch1 = e.touches[0];
+      const touch2 = e.touches[1];
+      this.initialDistance = this.getDistance(
+        { x: touch1.clientX, y: touch1.clientY, timestamp: Date.now() },
+        { x: touch2.clientX, y: touch2.clientY, timestamp: Date.now() }
+      );
+      this.currentScale = 1;
+      this.pinchOptions.onPinchStart?.(this.currentScale);
+    }
+  }
+
+  private handlePinchMove(e: TouchEvent) {
+    if (e.touches.length === 2 && this.initialDistance > 0) {
+      const touch1 = e.touches[0];
+      const touch2 = e.touches[1];
+      const currentDistance = this.getDistance(
+        { x: touch1.clientX, y: touch1.clientY, timestamp: Date.now() },
+        { x: touch2.clientX, y: touch2.clientY, timestamp: Date.now() }
+      );
+      
+      const newScale = currentDistance / this.initialDistance;
+      const threshold = this.pinchOptions.threshold || 0.1;
+      
+      if (Math.abs(newScale - this.currentScale) >= threshold) {
+        this.currentScale = newScale;
+        this.pinchOptions.onPinchMove?.(this.currentScale);
+      }
+    }
+  }
+
+  private handlePinchEnd() {
+    if (this.initialDistance > 0) {
+      this.pinchOptions.onPinchEnd?.(this.currentScale);
+      this.initialDistance = 0;
+      this.currentScale = 1;
+    }
+  }
+
+  private startLongPressTimer() {
+    this.clearLongPressTimer();
+    const duration = this.longPressOptions.duration || 500;
+    
+    this.longPressTimer = window.setTimeout(() => {
+      this.isLongPress = true;
+      if (this.startPoint) {
+        this.longPressOptions.onLongPress?.(this.startPoint);
+      }
+    }, duration);
+  }
+
+  private clearLongPressTimer() {
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  }
+
+  // Public methods
+  updateOptions(
+    swipeOptions?: Partial<SwipeGestureOptions>,
+    pinchOptions?: Partial<PinchGestureOptions>,
+    longPressOptions?: Partial<LongPressOptions>
+  ) {
+    if (swipeOptions) {
+      this.swipeOptions = { ...this.swipeOptions, ...swipeOptions };
+    }
+    if (pinchOptions) {
+      this.pinchOptions = { ...this.pinchOptions, ...pinchOptions };
+    }
+    if (longPressOptions) {
+      this.longPressOptions = { ...this.longPressOptions, ...longPressOptions };
+    }
+  }
+
+  destroy() {
+    // Remove touch event listeners
+    this.element.removeEventListener('touchstart', this.handleTouchStart);
+    this.element.removeEventListener('touchmove', this.handleTouchMove);
+    this.element.removeEventListener('touchend', this.handleTouchEnd);
+    this.element.removeEventListener('touchcancel', this.handleTouchCancel);
+
+    // Remove mouse event listeners
+    this.element.removeEventListener('mousedown', this.handleMouseDown);
+    this.element.removeEventListener('mousemove', this.handleMouseMove);
+    this.element.removeEventListener('mouseup', this.handleMouseUp);
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave);
+
+    this.clearLongPressTimer();
+  }
+}
+
+import React from 'react';
+
+// React hook for easier usage
+export function useGestures(
+  elementRef: React.RefObject<HTMLElement>,
+  swipeOptions?: SwipeGestureOptions,
+  pinchOptions?: PinchGestureOptions,
+  longPressOptions?: LongPressOptions
+) {
+  const gestureHandlerRef = React.useRef<TouchGestureHandler | null>(null);
+
+  React.useEffect(() => {
+    if (elementRef.current) {
+      gestureHandlerRef.current = new TouchGestureHandler(
+        elementRef.current,
+        swipeOptions,
+        pinchOptions,
+        longPressOptions
+      );
+    }
+
+    return () => {
+      gestureHandlerRef.current?.destroy();
+    };
+  }, [elementRef.current]);
+
+  React.useEffect(() => {
+    gestureHandlerRef.current?.updateOptions(swipeOptions, pinchOptions, longPressOptions);
+  }, [swipeOptions, pinchOptions, longPressOptions]);
+
+  return gestureHandlerRef.current;
+}