mtrl-addons 0.1.1 → 0.2.1

package/src/core/gestures/types.ts

@@ -0,0 +1,387 @@
+// src/core/gestures/types.ts
+/**
+ * @module core/gestures
+ * @description Type definitions for the gesture system
+ */
+
+/**
+ * Types of gestures supported by the system
+ */
+export enum GESTURE_TYPES {
+  TAP = 'tap',
+  SWIPE = 'swipe',
+  SWIPE_LEFT = 'swipeleft',
+  SWIPE_RIGHT = 'swiperight',
+  SWIPE_UP = 'swipeup',
+  SWIPE_DOWN = 'swipedown',
+  PINCH = 'pinch',
+  ROTATE = 'rotate',
+  LONG_PRESS = 'longpress',
+  PAN = 'pan'
+}
+
+/**
+ * Direction of swipe gestures
+ */
+export enum SWIPE_DIRECTIONS {
+  UP = 'up',
+  DOWN = 'down',
+  LEFT = 'left',
+  RIGHT = 'right'
+}
+
+/**
+ * Configuration options for gesture recognition
+ */
+export interface GestureConfig {
+  /**
+   * Minimum distance (in pixels) to recognize a swipe
+   * @default 30
+   */
+  swipeThreshold?: number;
+  
+  /**
+   * Maximum time (in ms) in which a swipe must be completed
+   * @default 300
+   */
+  swipeTimeThreshold?: number;
+  
+  /**
+   * Time (in ms) to recognize a long press
+   * @default 500
+   */
+  longPressTime?: number;
+  
+  /**
+   * Distance threshold (in pixels) for tap recognition
+   * @default 10
+   */
+  tapDistanceThreshold?: number;
+  
+  /**
+   * Whether to prevent default behaviors on touch events
+   * @default true
+   */
+  preventDefault?: boolean;
+  
+  /**
+   * Whether to stop event propagation
+   * @default false
+   */
+  stopPropagation?: boolean;
+  
+  [key: string]: any;
+}
+
+/**
+ * Base gesture event data
+ */
+export interface GestureEvent {
+  /**
+   * Type of the gesture
+   */
+  type: string;
+  
+  /**
+   * Original DOM event
+   */
+  originalEvent: Event;
+  
+  /**
+   * Element the gesture was triggered on
+   */
+  target: EventTarget;
+  
+  /**
+   * Timestamp when the gesture started
+   */
+  startTime: number;
+  
+  /**
+   * Timestamp when the gesture ended
+   */
+  endTime: number;
+  
+  /**
+   * Gesture duration in milliseconds
+   */
+  duration: number;
+  
+  /**
+   * Whether default behavior was prevented
+   */
+  defaultPrevented: boolean;
+  
+  /**
+   * Prevent default behavior
+   */
+  preventDefault: () => void;
+  
+  /**
+   * Stop event propagation
+   */
+  stopPropagation: () => void;
+}
+
+/**
+ * Tap gesture event data
+ */
+export interface TapEvent extends GestureEvent {
+  type: 'tap';
+  
+  /**
+   * Number of taps (for double tap detection)
+   */
+  count: number;
+  
+  /**
+   * X position of the tap
+   */
+  x: number;
+  
+  /**
+   * Y position of the tap
+   */
+  y: number;
+}
+
+/**
+ * Swipe gesture event data
+ */
+export interface SwipeEvent extends GestureEvent {
+  type: 'swipe' | 'swipeleft' | 'swiperight' | 'swipeup' | 'swipedown';
+  
+  /**
+   * Direction of the swipe
+   */
+  direction: 'up' | 'down' | 'left' | 'right';
+  
+  /**
+   * Distance swiped in the X direction
+   */
+  deltaX: number;
+  
+  /**
+   * Distance swiped in the Y direction
+   */
+  deltaY: number;
+  
+  /**
+   * Total distance swiped
+   */
+  distance: number;
+  
+  /**
+   * Velocity of the swipe in pixels per millisecond
+   */
+  velocity: number;
+  
+  /**
+   * Start X position
+   */
+  startX: number;
+  
+  /**
+   * Start Y position
+   */
+  startY: number;
+  
+  /**
+   * End X position
+   */
+  endX: number;
+  
+  /**
+   * End Y position
+   */
+  endY: number;
+}
+
+/**
+ * Long press gesture event data
+ */
+export interface LongPressEvent extends GestureEvent {
+  type: 'longpress';
+  
+  /**
+   * X position of the long press
+   */
+  x: number;
+  
+  /**
+   * Y position of the long press
+   */
+  y: number;
+}
+
+/**
+ * Pinch gesture event data
+ */
+export interface PinchEvent extends GestureEvent {
+  type: 'pinch';
+  
+  /**
+   * Scale factor of the pinch (>1 for zoom in, <1 for zoom out)
+   */
+  scale: number;
+  
+  /**
+   * Center X position of the pinch
+   */
+  centerX: number;
+  
+  /**
+   * Center Y position of the pinch
+   */
+  centerY: number;
+}
+
+/**
+ * Rotate gesture event data
+ */
+export interface RotateEvent extends GestureEvent {
+  type: 'rotate';
+  
+  /**
+   * Rotation angle in degrees
+   */
+  rotation: number;
+  
+  /**
+   * Center X position of the rotation
+   */
+  centerX: number;
+  
+  /**
+   * Center Y position of the rotation
+   */
+  centerY: number;
+}
+
+/**
+ * Pan gesture event data
+ */
+export interface PanEvent extends GestureEvent {
+  type: 'pan';
+  
+  /**
+   * Distance panned in the X direction
+   */
+  deltaX: number;
+  
+  /**
+   * Distance panned in the Y direction
+   */
+  deltaY: number;
+  
+  /**
+   * Start X position
+   */
+  startX: number;
+  
+  /**
+   * Start Y position
+   */
+  startY: number;
+  
+  /**
+   * Current X position
+   */
+  currentX: number;
+  
+  /**
+   * Current Y position
+   */
+  currentY: number;
+}
+
+/**
+ * Union type of all gesture events
+ */
+export type AnyGestureEvent = 
+  | TapEvent
+  | SwipeEvent 
+  | LongPressEvent 
+  | PinchEvent 
+  | RotateEvent 
+  | PanEvent;
+
+/**
+ * Handler for gesture events
+ */
+export type GestureHandler = (event: AnyGestureEvent) => void;
+
+/**
+ * Gesture state for tracking touch interactions
+ */
+export interface GestureState {
+  active: boolean;
+  startTime: number;
+  startX: number;
+  startY: number;
+  lastX: number;
+  lastY: number;
+  currentX: number;
+  currentY: number;
+  touchCount: number;
+  longPressTimer: number | null;
+  startDistance: number;
+  startAngle: number;
+  lastTapTime: number;
+  tapCount: number;
+  target: EventTarget | null;
+}
+
+/**
+ * Context for gesture detection
+ */
+export interface GestureDetectionContext {
+  state: GestureState;
+  options: Required<GestureConfig>;
+  originalEvent: Event;
+}
+
+/**
+ * Gesture manager interface
+ */
+export interface GestureManager {
+  /**
+   * Add an event listener for a gesture
+   * @param eventType - Gesture type
+   * @param handler - Event handler
+   * @returns Gesture manager for chaining
+   */
+  on: (eventType: string, handler: GestureHandler) => GestureManager;
+  
+  /**
+   * Remove an event listener for a gesture
+   * @param eventType - Gesture type
+   * @param handler - Event handler
+   * @returns Gesture manager for chaining
+   */
+  off: (eventType: string, handler: GestureHandler) => GestureManager;
+  
+  /**
+   * 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;
+  
+  /**
+   * Enable gesture recognition
+   * @returns Gesture manager for chaining
+   */
+  enable: () => GestureManager;
+  
+  /**
+   * Disable gesture recognition
+   * @returns Gesture manager for chaining
+   */
+  disable: () => GestureManager;
+  
+  /**
+   * Clean up event listeners
+   */
+  destroy: () => void;
+}

package/src/core/gestures/utils.ts

@@ -0,0 +1,128 @@
+// src/core/gestures/utils.ts
+/**
+ * @module core/gestures
+ * @description Utility functions for gesture detection
+ */
+
+import { GestureEvent, GestureState } from "./types";
+
+/**
+ * Calculate distance between two points
+ *
+ * @param x1 - X coordinate of first point
+ * @param y1 - Y coordinate of first point
+ * @param x2 - X coordinate of second point
+ * @param y2 - Y coordinate of second point
+ * @returns Distance between the points
+ */
+export function getDistance(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+): number {
+  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+}
+
+/**
+ * Calculate angle between two points in degrees (0-360)
+ *
+ * @param x1 - X coordinate of first point
+ * @param y1 - Y coordinate of first point
+ * @param x2 - X coordinate of second point
+ * @param y2 - Y coordinate of second point
+ * @returns Angle in degrees
+ */
+export function getAngle(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+): number {
+  const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
+  return angle < 0 ? angle + 360 : angle;
+}
+
+/**
+ * Create a base gesture event
+ *
+ * @param type - Type of gesture
+ * @param originalEvent - Original DOM event
+ * @param state - Current gesture state
+ * @returns Base gesture event object
+ */
+export function createGestureEvent(
+  type: string,
+  originalEvent: Event,
+  state: GestureState
+): GestureEvent {
+  const endTime = Date.now();
+  let defaultPrevented = false;
+
+  const event: GestureEvent = {
+    type,
+    originalEvent,
+    target:
+      (state.target as EventTarget) || (originalEvent.target as EventTarget),
+    startTime: state.startTime,
+    endTime,
+    duration: endTime - state.startTime,
+    defaultPrevented,
+    preventDefault: () => {
+      defaultPrevented = true;
+      event.defaultPrevented = true;
+      if (originalEvent.cancelable) {
+        originalEvent.preventDefault();
+      }
+    },
+    stopPropagation: () => {
+      originalEvent.stopPropagation();
+    },
+  };
+
+  return event;
+}
+
+/**
+ * Detect if the device supports touch events
+ *
+ * @returns Whether touch is supported
+ */
+export function hasTouchSupport(): boolean {
+  const maxPoints = (navigator as any).maxTouchPoints;
+  return (
+    "ontouchstart" in window || (typeof maxPoints === "number" && maxPoints > 0)
+  );
+}
+
+/**
+ * Detect if the device supports pointer events
+ *
+ * @returns Whether pointer events are supported
+ */
+export function hasPointerSupport(): boolean {
+  return !!window.PointerEvent;
+}
+
+/**
+ * Extract normalized touch coordinates from an event
+ * Works with mouse events, touch events and pointer events
+ *
+ * @param e - DOM event
+ * @returns Object with clientX and clientY coordinates
+ */
+export function getTouchCoordinates(
+  e: MouseEvent | TouchEvent | PointerEvent
+): { clientX: number; clientY: number } {
+  if ("touches" in e && Array.isArray(e.touches) && e.touches.length > 0) {
+    return {
+      clientX: e.touches[0].clientX,
+      clientY: e.touches[0].clientY,
+    };
+  }
+
+  return {
+    clientX: (e as MouseEvent | PointerEvent).clientX,
+    clientY: (e as MouseEvent | PointerEvent).clientY,
+  };
+}

package/src/core/index.ts

@@ -1,11 +1,10 @@
 /**
- * @module core
- * @description Core mtrl-addons functionality
+ * Core Module Exports
+ *
+ * Central export point for all core functionality
  */
 
-// Collection system
-export { createCollection, createDataCollection } from "./collection";
-export type { Collection, DataCollection } from "./collection";
+export * from "./compose";
 
 // Layout system
 export {
@@ -13,155 +12,32 @@ export {
   applyLayoutClasses,
   cleanupLayoutClasses,
 } from "./layout";
-export type { Layout, LayoutConfig } from "./layout";
+export type { LayoutConfig } from "./layout/types";
 
-// List Manager system
-export {
-  createListManager,
-  createCustomListManager,
-  withViewport,
-  withCollection,
-  withPlaceholders,
-} from "./list-manager";
-
-// Compose system
-export {
-  pipe,
-  createBase,
-  withElement,
-  withEvents,
-  withLifecycle,
-  withCollection as withCompose,
-  withStyling,
-  withSelection,
-  withPerformance,
-} from "./compose";
-
-// Types
+// Viewport system
+export { createViewport } from "./viewport";
 export type {
-  ListManagerComponent,
-  ListManagerConfig,
-  ListManagerEnhancerConfig,
-  ViewportFeature,
-  CollectionFeature,
+  ViewportConfig,
+  ViewportComponent,
+  ViewportContext,
   ItemRange,
   ViewportInfo,
-  SpeedTracker,
-} from "./list-manager/types";
-
-export type {
-  CollectionConfig,
-  CollectionComponent,
-  StylingConfig,
-  StylingComponent,
-  SelectionConfig,
-  SelectionComponent,
-  SelectableItem,
-  PerformanceConfig,
-  PerformanceComponent,
-  PerformanceMetrics,
-} from "./compose/features";
+} from "./viewport/types";
 
-export type { ViewportComponent } from "./list-manager/features/viewport";
-export type { CollectionComponent as CollectionEnhancerComponent } from "./list-manager/features/collection";
-export type { PlaceholdersComponent } from "./list-manager/features/viewport";
-
-export type { ViewportConfig } from "./list-manager/features/viewport";
-export type { CollectionConfig as CollectionEnhancerConfig } from "./list-manager/features/collection";
-export type { PlaceholdersConfig } from "./list-manager/features/viewport";
-
-// Configuration types
-export type { Collection as CollectionInterface } from "./collection";
-export type { Layout as LayoutInterface } from "./layout";
-
-// Collection types
+// Gesture system
+export { createGestureManager } from "./gestures";
 export type {
-  DataAdapter,
-  LoadingStrategy,
-  LoadingConfig,
-  ApiResponse,
-  PaginationMeta,
-  DataState,
-  CacheStrategy,
-  CacheConfig,
-  LoadingState,
-  ErrorState,
-  EventData,
-  EventHandlers,
-  CollectionCreateConfig,
-  CollectionUpdateConfig,
-  CollectionDestroyConfig,
-  CollectionSetItemsConfig,
-  CollectionSetTotalItemsConfig,
-  CollectionSetLoadingConfig,
-  CollectionSetErrorConfig,
-  CollectionSetCacheConfig,
-  CollectionSetEventHandlersConfig,
-  CollectionGetItemsConfig,
-  CollectionGetTotalItemsConfig,
-  CollectionGetLoadingConfig,
-  CollectionGetErrorConfig,
-  CollectionGetCacheConfig,
-  CollectionGetEventHandlersConfig,
-  CollectionLoadConfig,
-  CollectionLoadMoreConfig,
-  CollectionReloadConfig,
-  CollectionUpdateItemConfig,
-  CollectionUpdateItemsConfig,
-  CollectionUpdateTotalItemsConfig,
-  CollectionUpdateLoadingConfig,
-  CollectionUpdateErrorConfig,
-  CollectionUpdateCacheConfig,
-  CollectionUpdateEventHandlersConfig,
-  CollectionClearConfig,
-  CollectionClearCacheConfig,
-  CollectionClearItemsConfig,
-  CollectionClearErrorConfig,
-  CollectionClearLoadingConfig,
-  CollectionClearEventHandlersConfig,
-  CollectionDestroyAllConfig,
-  CollectionDestroyAllCacheConfig,
-  CollectionDestroyAllItemsConfig,
-  CollectionDestroyAllErrorConfig,
-  CollectionDestroyAllLoadingConfig,
-  CollectionDestroyAllEventHandlersConfig,
-} from "./collection";
-
-// Layout types
-export type {
-  LayoutData,
-  LayoutElement,
-  LayoutElementData,
-  LayoutArrayConfig,
-  LayoutConfig as LayoutTypeConfig,
-  LayoutCreateConfig,
-  LayoutUpdateConfig,
-  LayoutDestroyConfig,
-  LayoutSetDataConfig,
-  LayoutSetElementConfig,
-  LayoutSetElementDataConfig,
-  LayoutSetArrayConfig,
-  LayoutSetConfigConfig,
-  LayoutGetDataConfig,
-  LayoutGetElementConfig,
-  LayoutGetElementDataConfig,
-  LayoutGetArrayConfig,
-  LayoutGetConfigConfig,
-  LayoutRenderConfig,
-  LayoutRenderElementConfig,
-  LayoutRenderElementDataConfig,
-  LayoutRenderArrayConfig,
-  LayoutRenderConfigConfig,
-  LayoutClearConfig,
-  LayoutClearDataConfig,
-  LayoutClearElementConfig,
-  LayoutClearElementDataConfig,
-  LayoutClearArrayConfig,
-  LayoutClearConfigConfig,
-  LayoutDestroyAllConfig,
-  LayoutDestroyAllDataConfig,
-  LayoutDestroyAllElementConfig,
-  LayoutDestroyAllElementDataConfig,
-  LayoutDestroyAllArrayConfig,
-  LayoutDestroyAllConfigConfig,
-} from "./layout";
+  GestureManager,
+  GestureConfig,
+  GestureEvent,
+  TapEvent,
+  SwipeEvent,
+  LongPressEvent,
+  PinchEvent,
+  RotateEvent,
+  PanEvent,
+  AnyGestureEvent,
+  GestureHandler,
+} from "./gestures";
+
+export * from "./compose";