mtrl-addons 0.2.2 → 0.2.4

package/src/core/gestures/manager.ts

@@ -1,418 +0,0 @@
-// src/core/gestures/manager.ts
-/**
- * @module core/gestures
- * @description Gesture management system for handling touch and mouse interactions
- */
-
-import { 
-  GestureConfig,
-  GestureManager,
-  GestureState,
-  GestureHandler,
-  GestureDetectionContext,
-  AnyGestureEvent,
-  GESTURE_TYPES,
-  SWIPE_DIRECTIONS
-} from './types';
-
-import { detectTap } from './tap';
-import { detectSwipe } from './swipe';
-import { detectLongPress, shouldCancelLongPress } from './longpress';
-import { detectPan } from './pan';
-import { detectPinch } from './pinch';
-import { detectRotate } from './rotate';
-import { hasTouchSupport, hasPointerSupport, getTouchCoordinates } from './utils';
-
-// Re-export types and constants
-export { GESTURE_TYPES, SWIPE_DIRECTIONS };
-
-/**
- * Creates a gesture manager for handling touch and mouse interactions
- * 
- * @param element - DOM element to attach gesture recognition to
- * @param config - Configuration options
- * @returns Gesture manager instance
- */
-export const createGestureManager = (
-  element: HTMLElement,
-  config: GestureConfig = {}
-): GestureManager => {
-  // Default configuration
-  const options: Required<GestureConfig> = {
-    swipeThreshold: 30,
-    swipeTimeThreshold: 300,
-    longPressTime: 500,
-    tapDistanceThreshold: 10,
-    preventDefault: true,
-    stopPropagation: false,
-    ...config
-  };
-  
-  // Event handlers storage
-  const handlers: Map<string, Set<GestureHandler>> = new Map();
-  
-  // Gesture state
-  const state: GestureState = {
-    active: false,
-    startTime: 0,
-    startX: 0,
-    startY: 0,
-    lastX: 0,
-    lastY: 0,
-    currentX: 0,
-    currentY: 0,
-    touchCount: 0,
-    longPressTimer: null,
-    startDistance: 0,
-    startAngle: 0,
-    lastTapTime: 0,
-    tapCount: 0,
-    target: null
-  };
-  
-  // Detect feature support
-  const supportTouch = hasTouchSupport();
-  const supportPointer = hasPointerSupport();
-    
-  const gestureSupport = {
-    tap: true,
-    swipe: true,
-    swipeleft: true,
-    swiperight: true,
-    swipeup: true,
-    swipedown: true,
-    longpress: true,
-    pan: true,
-    pinch: supportTouch || supportPointer,
-    rotate: supportTouch || supportPointer
-  };
-  
-  /**
-   * Dispatch a gesture event
-   */
-  const dispatchGesture = (event: AnyGestureEvent): void => {
-    // Get handlers for this event type
-    const eventHandlers = handlers.get(event.type);
-    if (!eventHandlers) return;
-    
-    // Call each handler
-    eventHandlers.forEach(handler => {
-      try {
-        handler(event);
-      } catch (error) {
-        console.error(`Error in gesture handler for ${event.type}:`, error);
-      }
-    });
-    
-    // For swipe, also dispatch direction-specific events
-    if (event.type === 'swipe' && 'direction' in event) {
-      const directionEvent = { ...event, type: `swipe${event.direction}` as any };
-      dispatchGesture(directionEvent as any);
-    }
-    
-    // Apply default configuration for preventDefault and stopPropagation
-    if (options.preventDefault && !event.defaultPrevented) {
-      event.preventDefault();
-    }
-    
-    if (options.stopPropagation) {
-      event.stopPropagation();
-    }
-  };
-  
-  // Reference to the longpress cleanup function
-  let longPressCleanup: (() => void) | null = null;
-  
-  /**
-   * Handle touch/mouse start
-   */
-  const handleStart = (e: TouchEvent | MouseEvent | PointerEvent): void => {
-    const touch = getTouchCoordinates(e);
-    const touchCount = 'touches' in e ? e.touches.length : 1;
-    
-    // Store gesture state
-    state.active = true;
-    state.startTime = Date.now();
-    state.startX = state.lastX = state.currentX = touch.clientX;
-    state.startY = state.lastY = state.currentY = touch.clientY;
-    state.touchCount = touchCount;
-    state.target = e.target;
-    
-    // Handle multi-touch gestures
-    if (touchCount === 2 && 'touches' in e) {
-      const touch1 = e.touches[0];
-      const touch2 = e.touches[1];
-      
-      // Set initial values for pinch and rotate
-      state.startDistance = Math.sqrt(
-        Math.pow(touch2.clientX - touch1.clientX, 2) + 
-        Math.pow(touch2.clientY - touch1.clientY, 2)
-      );
-      
-      state.startAngle = Math.atan2(
-        touch2.clientY - touch1.clientY,
-        touch2.clientX - touch1.clientX
-      ) * 180 / Math.PI;
-      
-      if (state.startAngle < 0) state.startAngle += 360;
-    }
-    
-    // Setup context for gesture detection
-    const context: GestureDetectionContext = {
-      state,
-      options,
-      originalEvent: e
-    };
-    
-    // Start long press detection
-    if (longPressCleanup) {
-      longPressCleanup();
-    }
-    
-    longPressCleanup = detectLongPress(context, (longPressEvent) => {
-      dispatchGesture(longPressEvent);
-    });
-  };
-  
-  /**
-   * Handle touch/mouse move
-   */
-  const handleMove = (e: TouchEvent | MouseEvent | PointerEvent): void => {
-    if (!state.active) return;
-    
-    const touch = getTouchCoordinates(e);
-    const touchCount = 'touches' in e ? e.touches.length : 1;
-    
-    // Update positions
-    state.lastX = state.currentX;
-    state.lastY = state.currentY;
-    state.currentX = touch.clientX;
-    state.currentY = touch.clientY;
-    
-    // Setup context for gesture detection
-    const context: GestureDetectionContext = {
-      state,
-      options,
-      originalEvent: e
-    };
-    
-    // Check if we should cancel longpress
-    if (shouldCancelLongPress(context) && longPressCleanup) {
-      longPressCleanup();
-      longPressCleanup = null;
-    }
-    
-    // Detect pan gesture
-    const panEvent = detectPan(context);
-    if (panEvent) {
-      dispatchGesture(panEvent);
-    }
-    
-    // Multi-touch gestures
-    if (touchCount === 2 && 'touches' in e) {
-      const touch1 = e.touches[0];
-      const touch2 = e.touches[1];
-      
-      // Detect pinch
-      const pinchEvent = detectPinch(context, touch1, touch2);
-      if (pinchEvent) {
-        dispatchGesture(pinchEvent);
-      }
-      
-      // Detect rotate
-      const rotateEvent = detectRotate(context, touch1, touch2);
-      if (rotateEvent) {
-        dispatchGesture(rotateEvent);
-      }
-    }
-  };
-  
-  /**
-   * Handle touch/mouse end
-   */
-  const handleEnd = (e: TouchEvent | MouseEvent | PointerEvent): void => {
-    if (!state.active) return;
-    
-    // Cancel any ongoing long press detection
-    if (longPressCleanup) {
-      longPressCleanup();
-      longPressCleanup = null;
-    }
-    
-    // Setup context for gesture detection
-    const context: GestureDetectionContext = {
-      state,
-      options,
-      originalEvent: e
-    };
-    
-    // Detect tap
-    const tapEvent = detectTap(context);
-    if (tapEvent) {
-      // Update tap count for next tap
-      state.lastTapTime = Date.now();
-      state.tapCount = tapEvent.count;
-      
-      dispatchGesture(tapEvent);
-    } else {
-      // Detect swipe
-      const swipeEvent = detectSwipe(context);
-      if (swipeEvent) {
-        dispatchGesture(swipeEvent);
-      }
-    }
-    
-    // Reset state
-    state.active = false;
-  };
-  
-  /**
-   * Handle touch/mouse cancel
-   */
-  const handleCancel = (): void => {
-    // Cancel long press detection
-    if (longPressCleanup) {
-      longPressCleanup();
-      longPressCleanup = null;
-    }
-    
-    // Reset state
-    state.active = false;
-  };
-  
-  // Event listener references
-  let eventListeners: { 
-    [event: string]: EventListener 
-  } = {};
-  
-  /**
-   * Set up event listeners based on available APIs
-   */
-  const setupEventListeners = (): void => {
-    if (supportPointer) {
-      // Use Pointer Events API
-      eventListeners = {
-        pointerdown: handleStart as EventListener,
-        pointermove: handleMove as EventListener,
-        pointerup: handleEnd as EventListener,
-        pointercancel: handleCancel as EventListener
-      };
-    } else if (supportTouch) {
-      // Use Touch Events API
-      eventListeners = {
-        touchstart: handleStart as EventListener,
-        touchmove: handleMove as EventListener,
-        touchend: handleEnd as EventListener,
-        touchcancel: handleCancel as EventListener
-      };
-    } else {
-      // Fall back to Mouse Events API
-      eventListeners = {
-        mousedown: handleStart as EventListener,
-        mousemove: handleMove as EventListener,
-        mouseup: handleEnd as EventListener,
-        mouseleave: handleCancel as EventListener
-      };
-    }
-    
-    // Add listeners to element
-    Object.entries(eventListeners).forEach(([event, listener]) => {
-      element.addEventListener(event, listener, { passive: !options.preventDefault });
-    });
-  };
-  
-  /**
-   * Remove all event listeners
-   */
-  const removeEventListeners = (): void => {
-    // Remove all listeners from element
-    Object.entries(eventListeners).forEach(([event, listener]) => {
-      element.removeEventListener(event, listener);
-    });
-    
-    // Clear eventListeners object
-    eventListeners = {};
-  };
-  
-  // Initialize event listeners
-  setupEventListeners();
-  
-  return {
-    /**
-     * Add a gesture event listener
-     * @param eventType - Type of gesture to listen for
-     * @param handler - Event handler function
-     * @returns Gesture manager for chaining
-     */
-    on(eventType: string, handler: GestureHandler): GestureManager {
-      if (!handlers.has(eventType)) {
-        handlers.set(eventType, new Set());
-      }
-      
-      handlers.get(eventType)!.add(handler);
-      return this;
-    },
-    
-    /**
-     * Remove a gesture event listener
-     * @param eventType - Type of gesture
-     * @param handler - Event handler to remove
-     * @returns Gesture manager for chaining
-     */
-    off(eventType: string, handler: GestureHandler): GestureManager {
-      const eventHandlers = handlers.get(eventType);
-      if (eventHandlers) {
-        eventHandlers.delete(handler);
-        
-        if (eventHandlers.size === 0) {
-          handlers.delete(eventType);
-        }
-      }
-      return this;
-    },
-    
-    /**
-     * Check if a gesture is supported on the current device
-     * @param gestureType - Type of gesture to check
-     * @returns Whether the gesture is supported
-     */
-    isSupported(gestureType: string): boolean {
-      return gestureType in gestureSupport && gestureSupport[gestureType as keyof typeof gestureSupport];
-    },
-    
-    /**
-     * Enable gesture recognition by adding event listeners
-     * @returns Gesture manager for chaining
-     */
-    enable(): GestureManager {
-      setupEventListeners();
-      return this;
-    },
-    
-    /**
-     * Disable gesture recognition by removing event listeners
-     * @returns Gesture manager for chaining
-     */
-    disable(): GestureManager {
-      removeEventListeners();
-      return this;
-    },
-    
-    /**
-     * Clean up event listeners and timers
-     */
-    destroy(): void {
-      // Clean up listeners
-      removeEventListeners();
-      
-      // Clear long press timer
-      if (longPressCleanup) {
-        longPressCleanup();
-        longPressCleanup = null;
-      }
-      
-      // Clear handler references
-      handlers.clear();
-    }
-  };
-};

package/src/core/gestures/pan.ts

@@ -1,48 +0,0 @@
-// src/core/gestures/pan.ts
-/**
- * @module core/gestures
- * @description Pan gesture detection
- */
-
-import { PanEvent, GestureDetectionContext } from "./types";
-import { createGestureEvent } from "./utils";
-
-/**
- * Detect pan gesture
- *
- * @param context - Gesture detection context
- * @returns Pan event or null if no significant movement
- */
-export function detectPan(context: GestureDetectionContext): PanEvent | null {
-  const { state, originalEvent } = context;
-
-  // Calculate delta from start position
-  const deltaX = state.currentX - state.startX;
-  const deltaY = state.currentY - state.startY;
-
-  // Calculate delta from last position to determine if there's significant movement
-  const moveDeltaX = state.currentX - state.lastX;
-  const moveDeltaY = state.currentY - state.lastY;
-  const moveDelta = Math.sqrt(
-    moveDeltaX * moveDeltaX + moveDeltaY * moveDeltaY
-  );
-
-  // Check if movement is significant
-  if (moveDelta > 0) {
-    // Create pan event
-    const panEvent: PanEvent = {
-      ...createGestureEvent("pan", originalEvent, state),
-      type: "pan",
-      deltaX,
-      deltaY,
-      startX: state.startX,
-      startY: state.startY,
-      currentX: state.currentX,
-      currentY: state.currentY,
-    };
-
-    return panEvent;
-  }
-
-  return null;
-}

package/src/core/gestures/pinch.ts

@@ -1,58 +0,0 @@
-// src/core/gestures/pinch.ts
-/**
- * @module core/gestures
- * @description Pinch gesture detection
- */
-
-import { PinchEvent, GestureDetectionContext } from "./types";
-import { createGestureEvent, getDistance } from "./utils";
-
-/**
- * Detect pinch gesture
- *
- * @param context - Gesture detection context
- * @param touch1 - First touch point
- * @param touch2 - Second touch point
- * @returns Pinch event or null if no pinch detected
- */
-export function detectPinch(
-  context: GestureDetectionContext,
-  touch1: Touch,
-  touch2: Touch
-): PinchEvent | null {
-  const { state, originalEvent } = context;
-
-  // Calculate current distance between touch points
-  const currentDistance = getDistance(
-    touch1.clientX,
-    touch1.clientY,
-    touch2.clientX,
-    touch2.clientY
-  );
-
-  // Minimum movement threshold for pinch detection
-  const PINCH_THRESHOLD = 10;
-
-  // Check if the distance change is significant
-  if (Math.abs(currentDistance - state.startDistance) > PINCH_THRESHOLD) {
-    // Calculate scale factor
-    const scale = currentDistance / state.startDistance;
-
-    // Calculate center point
-    const centerX = (touch1.clientX + touch2.clientX) / 2;
-    const centerY = (touch1.clientY + touch2.clientY) / 2;
-
-    // Create pinch event
-    const pinchEvent: PinchEvent = {
-      ...createGestureEvent("pinch", originalEvent, state),
-      type: "pinch",
-      scale,
-      centerX,
-      centerY,
-    };
-
-    return pinchEvent;
-  }
-
-  return null;
-}

package/src/core/gestures/rotate.ts

@@ -1,58 +0,0 @@
-// src/core/gestures/rotate.ts
-/**
- * @module core/gestures
- * @description Rotate gesture detection
- */
-
-import { RotateEvent, GestureDetectionContext } from "./types";
-import { createGestureEvent, getAngle } from "./utils";
-
-/**
- * Detect rotate gesture
- *
- * @param context - Gesture detection context
- * @param touch1 - First touch point
- * @param touch2 - Second touch point
- * @returns Rotate event or null if no rotation detected
- */
-export function detectRotate(
-  context: GestureDetectionContext,
-  touch1: Touch,
-  touch2: Touch
-): RotateEvent | null {
-  const { state, originalEvent } = context;
-
-  // Calculate current angle between touch points
-  const currentAngle = getAngle(
-    touch1.clientX,
-    touch1.clientY,
-    touch2.clientX,
-    touch2.clientY
-  );
-
-  // Minimum rotation threshold for detection
-  const ROTATION_THRESHOLD = 10;
-
-  // Calculate rotation difference
-  const rotationDiff = currentAngle - state.startAngle;
-
-  // Check if rotation is significant
-  if (Math.abs(rotationDiff) > ROTATION_THRESHOLD) {
-    // Calculate center point
-    const centerX = (touch1.clientX + touch2.clientX) / 2;
-    const centerY = (touch1.clientY + touch2.clientY) / 2;
-
-    // Create rotate event
-    const rotateEvent: RotateEvent = {
-      ...createGestureEvent("rotate", originalEvent, state),
-      type: "rotate",
-      rotation: rotationDiff,
-      centerX,
-      centerY,
-    };
-
-    return rotateEvent;
-  }
-
-  return null;
-}

package/src/core/gestures/swipe.ts

@@ -1,66 +0,0 @@
-// src/core/gestures/swipe.ts
-/**
- * @module core/gestures
- * @description Swipe gesture detection
- */
-
-import { SwipeEvent, GestureDetectionContext, SWIPE_DIRECTIONS } from './types';
-import { createGestureEvent } from './utils';
-
-/**
- * Determine swipe direction based on delta X and Y
- * 
- * @param deltaX - Distance moved in X direction
- * @param deltaY - Distance moved in Y direction
- * @returns Direction of the swipe
- */
-export function getSwipeDirection(deltaX: number, deltaY: number): SWIPE_DIRECTIONS {
-  if (Math.abs(deltaX) > Math.abs(deltaY)) {
-    return deltaX > 0 ? SWIPE_DIRECTIONS.RIGHT : SWIPE_DIRECTIONS.LEFT;
-  }
-  return deltaY > 0 ? SWIPE_DIRECTIONS.DOWN : SWIPE_DIRECTIONS.UP;
-}
-
-/**
- * Detect swipe gesture
- * 
- * @param context - Gesture detection context
- * @returns Swipe event or null if no swipe detected
- */
-export function detectSwipe(context: GestureDetectionContext): SwipeEvent | null {
-  const { state, options, originalEvent } = context;
-  
-  // Calculate deltas and distance
-  const deltaX = state.currentX - state.startX;
-  const deltaY = state.currentY - state.startY;
-  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-  
-  // Calculate time and velocity
-  const endTime = Date.now();
-  const deltaTime = endTime - state.startTime;
-  const velocity = distance / deltaTime;
-  
-  // Check if it's a swipe
-  if (distance >= options.swipeThreshold && deltaTime <= options.swipeTimeThreshold) {
-    const direction = getSwipeDirection(deltaX, deltaY);
-    
-    // Create swipe event
-    const swipeEvent: SwipeEvent = {
-      ...createGestureEvent('swipe', originalEvent, state),
-      type: 'swipe',
-      direction,
-      deltaX,
-      deltaY,
-      distance,
-      velocity,
-      startX: state.startX,
-      startY: state.startY,
-      endX: state.currentX,
-      endY: state.currentY
-    };
-    
-    return swipeEvent;
-  }
-  
-  return null;
-}

package/src/core/gestures/tap.ts

@@ -1,45 +0,0 @@
-// src/core/gestures/tap.ts
-/**
- * @module core/gestures
- * @description Tap gesture detection
- */
-
-import { TapEvent, GestureDetectionContext } from './types';
-import { createGestureEvent } from './utils';
-
-/**
- * Detect tap gesture
- * 
- * @param context - Gesture detection context
- * @returns Tap event or null if no tap detected
- */
-export function detectTap(context: GestureDetectionContext): TapEvent | null {
-  const { state, options, originalEvent } = context;
-  
-  // Calculate distance between start and current position
-  const deltaX = state.currentX - state.startX;
-  const deltaY = state.currentY - state.startY;
-  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-  
-  // Check if movement is within threshold
-  if (distance < options.tapDistanceThreshold) {
-    // Check for double tap
-    const now = Date.now();
-    const isDoubleTap = now - state.lastTapTime < 300;
-    
-    const tapCount = isDoubleTap ? state.tapCount + 1 : 1;
-    
-    // Create tap event
-    const tapEvent: TapEvent = {
-      ...createGestureEvent('tap', originalEvent, state),
-      type: 'tap',
-      count: tapCount,
-      x: state.currentX,
-      y: state.currentY
-    };
-    
-    return tapEvent;
-  }
-  
-  return null;
-}