Gesture System

/**
 * Add a gesture event listener to a element
 * @param node - Element to add listener to
 * @param evType - Event type (e.g., 'tap', 'track', 'down', 'up')
 * @param handler - Event handler function
 */
function addListener(node: Element, evType: string, handler: (event: Event) => void): void;

/**
 * Remove a gesture event listener from an element
 * @param node - Element to remove listener from
 * @param evType - Event type
 * @param handler - Event handler function to remove
 */
function removeListener(node: Element, evType: string, handler: (event: Event) => void): void;

import { addListener, removeListener } from '@polymer/polymer/lib/utils/gestures.js';

class GestureExample extends PolymerElement {
  connectedCallback() {
    super.connectedCallback();
    
    // Add tap gesture listener
    addListener(this, 'tap', this._onTap.bind(this));
    
    // Add track gesture listener for drag operations
    addListener(this, 'track', this._onTrack.bind(this));
  }
  
  disconnectedCallback() {
    super.disconnectedCallback();
    
    // Clean up listeners
    removeListener(this, 'tap', this._onTap.bind(this));
    removeListener(this, 'track', this._onTrack.bind(this));
  }
  
  _onTap(event) {
    console.log('Element tapped at:', event.detail.x, event.detail.y);
  }
  
  _onTrack(event) {
    switch(event.detail.state) {
      case 'start':
        console.log('Track started');
        break;
      case 'track':
        console.log('Tracking:', event.detail.dx, event.detail.dy);
        break;
      case 'end':
        console.log('Track ended');
        break;
    }
  }
}

/**
 * Global gestures registry
 */
const gestures: {[eventType: string]: GestureRecognizer};

/**
 * Array of registered recognizers
 */
const recognizers: GestureRecognizer[];

/**
 * Register a gesture recognizer
 * @param recognizer - Gesture recognizer object
 */
function register(recognizer: GestureRecognizer): void;

import { register } from '@polymer/polymer/lib/utils/gestures.js';

// Custom gesture recognizer for double-tap
const doubleTapRecognizer = {
  name: 'doubletap',
  deps: ['mousedown', 'touchstart'],
  flow: {
    start: ['mousedown', 'touchstart'],
    end: ['mouseup', 'touchend']
  },
  
  emits: ['doubletap'],
  
  info: {
    movefn: null,
    upfn: null,
    prevent: false
  },
  
  reset: function() {
    this.info.movefn = null;
    this.info.upfn = null;
    this.info.prevent = false;
  },
  
  mousedown: function(e) {
    // Custom double-tap detection logic
    this.info.prevent = this._fireDoubleTap(e);
    return this.info.prevent;
  },
  
  _fireDoubleTap: function(e) {
    // Implementation details...
    return false;
  }
};

// Register the custom recognizer
register(doubleTapRecognizer);

/**
 * Set touch-action CSS property on an element
 * @param node - Element to set touch-action on
 * @param value - Touch action value ('auto', 'none', 'pan-x', 'pan-y', 'manipulation')
 */
function setTouchAction(node: Element, value: string): void;

/**
 * Prevent a gesture event from firing
 * @param evName - Event name to prevent
 */
function prevent(evName: string): void;

/**
 * Reset mouse event cancellation state
 */
function resetMouseCanceller(): void;

import { setTouchAction, prevent } from '@polymer/polymer/lib/utils/gestures.js';

class TouchExample extends PolymerElement {
  connectedCallback() {
    super.connectedCallback();
    
    // Prevent default scrolling on this element
    setTouchAction(this, 'none');
    
    // Prevent tap events in certain conditions
    if (this.disabled) {
      prevent('tap');
    }
  }
}

/**
 * Find the deepest target at given coordinates
 * @param x - X coordinate
 * @param y - Y coordinate
 * @returns Element at coordinates or null
 */
function deepTargetFind(x: number, y: number): Element | null;

/**
 * Find the original event target (before any retargeting)
 */
const findOriginalTarget: (event: Event) => EventTarget | null;

import { deepTargetFind } from '@polymer/polymer/lib/utils/gestures.js';

class DropZone extends PolymerElement {
  _onTrack(event) {
    const target = deepTargetFind(event.detail.x, event.detail.y);
    
    if (target && target.classList.contains('drop-target')) {
      // Handle drop operation
      this._handleDrop(target, event);
    }
  }
}

/**
 * Gesture recognizer interface
 */
interface GestureRecognizer {
  /** Recognizer name */
  name?: string;
  
  /** Dependent event types */
  deps?: string[];
  
  /** Event flow configuration */
  flow?: {
    start: string[];
    end: string[];
  };
  
  /** Events this recognizer emits */
  emits?: string[];
  
  /** Reset recognizer state */
  reset(): void;
  
  /** Handle mouse down events */
  mousedown?(event: MouseEvent): boolean | void;
  
  /** Handle mouse move events */
  mousemove?(event: MouseEvent): boolean | void;
  
  /** Handle mouse up events */
  mouseup?(event: MouseEvent): boolean | void;
  
  /** Handle touch start events */
  touchstart?(event: TouchEvent): boolean | void;
  
  /** Handle touch move events */
  touchmove?(event: TouchEvent): boolean | void;
  
  /** Handle touch end events */
  touchend?(event: TouchEvent): boolean | void;
  
  /** Handle click events */
  click?(event: MouseEvent): boolean | void;
}

/**
 * Gesture event detail
 */
interface GestureEventDetail {
  /** X coordinate */
  x: number;
  
  /** Y coordinate */
  y: number;
  
  /** Source event */
  sourceEvent: Event;
  
  /** Gesture state (for track events) */
  state?: 'start' | 'track' | 'end';
  
  /** Delta X (for track events) */
  dx?: number;
  
  /** Delta Y (for track events) */
  dy?: number;
  
  /** Delta delta X (for track events) */
  ddx?: number;
  
  /** Delta delta Y (for track events) */
  ddy?: number;
  
  /** Velocity X (for track events) */
  vx?: number;
  
  /** Velocity Y (for track events) */
  vy?: number;
  
  /** Hover state (for track events) */
  hover?(): Element;
}