mtrl-addons 0.2.2 → 0.2.4

package/src/core/gestures/types.ts

@@ -1,387 +0,0 @@
-// 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

@@ -1,128 +0,0 @@
-// 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,43 +0,0 @@
-/**
- * Core Module Exports
- *
- * Central export point for all core functionality
- */
-
-export * from "./compose";
-
-// Layout system
-export {
-  createLayout,
-  applyLayoutClasses,
-  cleanupLayoutClasses,
-} from "./layout";
-export type { LayoutConfig } from "./layout/types";
-
-// Viewport system
-export { createViewport } from "./viewport";
-export type {
-  ViewportConfig,
-  ViewportComponent,
-  ViewportContext,
-  ItemRange,
-  ViewportInfo,
-} from "./viewport/types";
-
-// Gesture system
-export { createGestureManager } from "./gestures";
-export type {
-  GestureManager,
-  GestureConfig,
-  GestureEvent,
-  TapEvent,
-  SwipeEvent,
-  LongPressEvent,
-  PinchEvent,
-  RotateEvent,
-  PanEvent,
-  AnyGestureEvent,
-  GestureHandler,
-} from "./gestures";
-
-export * from "./compose";

package/src/core/layout/config.ts

@@ -1,102 +0,0 @@
-/**
- * @module core/layout/config
- * @description Essential layout configuration utilities
- * Core functionality is integrated into schema.ts for better performance
- */
-
-// Configuration constants
-const PREFIX = "mtrl"; // TODO: Make this configurable from main mtrl config
-const PREFIX_WITH_DASH = `${PREFIX}-`;
-
-/**
- * Simple DOM utilities
- */
-function addClass(element: any, className: string): void {
-  if (element && className && element.classList) {
-    element.classList.add(className);
-  }
-}
-
-function hasClass(element: any, className: string): boolean {
-  return element && element.classList && element.classList.contains(className);
-}
-
-/**
- * Helper function to clean up previous layout classes from an element
- * Useful for dynamic class management
- *
- * @param element - Element to clean layout classes from
- */
-export function cleanupLayoutClasses(element: any): void {
-  if (!element || !element.classList) return;
-
-  // Get all classes from the element
-  const classList = Array.from(element.classList) as string[];
-
-  // Find and remove layout-related classes
-  const layoutClasses = classList.filter(
-    (cls: string) =>
-      cls.startsWith(`${PREFIX_WITH_DASH}layout--`) ||
-      cls.includes(`-${PREFIX_WITH_DASH}layout--`)
-  );
-
-  // Remove each layout class
-  layoutClasses.forEach((cls: string) => {
-    element.classList.remove(cls);
-  });
-}
-
-/**
- * Helper function to get the layout type from element classes
- *
- * @param element - Element to check
- * @returns Layout type if found, empty string otherwise
- */
-export function getLayoutType(element: any): string {
-  return hasClass(element, `${PREFIX_WITH_DASH}layout--stack`)
-    ? "stack"
-    : hasClass(element, `${PREFIX_WITH_DASH}layout--row`)
-    ? "row"
-    : hasClass(element, `${PREFIX_WITH_DASH}layout--grid`)
-    ? "grid"
-    : "";
-}
-
-/**
- * Gets the configured prefix for the layout system
- * @returns Current prefix with dash
- */
-export function getLayoutPrefix(): string {
-  return PREFIX_WITH_DASH;
-}
-
-/**
- * Sets layout classes on an element dynamically
- * Useful for programmatic layout updates
- *
- * @param element - Target element
- * @param layoutType - Layout type to apply
- * @param classes - Additional classes to apply
- */
-export function setLayoutClasses(
-  element: any,
-  layoutType: string,
-  classes: string[] = []
-): void {
-  if (!element || !layoutType) return;
-
-  // Clean up existing layout classes first
-  cleanupLayoutClasses(element);
-
-  // Apply base layout type
-  addClass(element, `${PREFIX_WITH_DASH}layout--${layoutType}`);
-
-  // Apply additional classes
-  classes.forEach((cls) => {
-    if (cls.startsWith("layout--") || cls.startsWith("layout__")) {
-      addClass(element, `${PREFIX_WITH_DASH}${cls}`);
-    } else {
-      addClass(element, cls);
-    }
-  });
-}