or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

constants-utilities.mdindex.mdinput.mdmanager.mdrecognizers.md
tile.json

constants-utilities.mddocs/

Constants and Utilities

Direction constants, state constants, input event types, and utility functions for gesture development and Hammer.js integration.

Capabilities

Direction Constants

Constants for defining and checking gesture directions in recognizers and event handlers.

/** No direction */
const DIRECTION_NONE = 1;

/** Left direction */
const DIRECTION_LEFT = 2;

/** Right direction */
const DIRECTION_RIGHT = 4;

/** Up direction */
const DIRECTION_UP = 8;

/** Down direction */
const DIRECTION_DOWN = 16;

/** Horizontal directions (left or right) */
const DIRECTION_HORIZONTAL = 6;  // LEFT | RIGHT

/** Vertical directions (up or down) */
const DIRECTION_VERTICAL = 24;   // UP | DOWN

/** All directions */
const DIRECTION_ALL = 30;        // HORIZONTAL | VERTICAL

// Access via Hammer object
Hammer.DIRECTION_NONE;
Hammer.DIRECTION_LEFT;
Hammer.DIRECTION_RIGHT;
Hammer.DIRECTION_UP;
Hammer.DIRECTION_DOWN;
Hammer.DIRECTION_HORIZONTAL;
Hammer.DIRECTION_VERTICAL;
Hammer.DIRECTION_ALL;

Usage Examples:

import Hammer from "hammerjs";

// Horizontal pan only
const pan = new Hammer.Pan({
  direction: Hammer.DIRECTION_HORIZONTAL
});

// Vertical swipe only
const swipe = new Hammer.Swipe({
  direction: Hammer.DIRECTION_VERTICAL
});

// Check direction in event handler
mc.on('pan', function(ev) {
  if (ev.direction & Hammer.DIRECTION_LEFT) {
    console.log('Panning left');
  }
  if (ev.direction & Hammer.DIRECTION_RIGHT) {
    console.log('Panning right');
  }
});

// Multiple directions
const panVertical = new Hammer.Pan({
  direction: Hammer.DIRECTION_UP | Hammer.DIRECTION_DOWN
});

Recognition State Constants

Constants representing the current state of gesture recognizers during the recognition process.

/** Initial state - gesture recognition possible */
const STATE_POSSIBLE = 1;

/** Recognition began */
const STATE_BEGAN = 2;

/** Recognition state changed (ongoing) */
const STATE_CHANGED = 4;

/** Recognition ended successfully */
const STATE_ENDED = 8;

/** Same as STATE_ENDED */
const STATE_RECOGNIZED = 8;

/** Recognition was cancelled */
const STATE_CANCELLED = 16;

/** Recognition failed */
const STATE_FAILED = 32;

// Access via Hammer object
Hammer.STATE_POSSIBLE;
Hammer.STATE_BEGAN;
Hammer.STATE_CHANGED;
Hammer.STATE_ENDED;
Hammer.STATE_RECOGNIZED;
Hammer.STATE_CANCELLED;
Hammer.STATE_FAILED;

Usage Examples:

// Custom recognizer implementation
class CustomRecognizer extends Hammer.Recognizer {
  process(input) {
    if (this.state === Hammer.STATE_POSSIBLE) {
      // Start recognition logic
      return Hammer.STATE_BEGAN;
    }
    
    if (this.state === Hammer.STATE_BEGAN) {
      // Continue or end recognition
      return Hammer.STATE_CHANGED;
    }
    
    // Fail recognition
    return Hammer.STATE_FAILED;
  }
}

Input Event Type Constants

Constants for different types of input events processed by input handlers.

/** Input start event (touch down, mouse down) */
const INPUT_START = 1;

/** Input move event (touch move, mouse move) */
const INPUT_MOVE = 2;

/** Input end event (touch up, mouse up) */
const INPUT_END = 4;

/** Input cancel event (touch cancel) */
const INPUT_CANCEL = 8;

// Access via Hammer object
Hammer.INPUT_START;
Hammer.INPUT_MOVE;
Hammer.INPUT_END;
Hammer.INPUT_CANCEL;

Usage Examples:

// Custom input handler logic
function processInput(inputData) {
  switch (inputData.eventType) {
    case Hammer.INPUT_START:
      console.log('Input started');
      break;
    case Hammer.INPUT_MOVE:
      console.log('Input moving');
      break;
    case Hammer.INPUT_END:
      console.log('Input ended');
      break;
    case Hammer.INPUT_CANCEL:
      console.log('Input cancelled');
      break;
  }
}

Event Utility Functions

Static utility functions for event handling and DOM manipulation.

/**
 * Add event listeners with multiple event types
 * @param {Element} target - Target element
 * @param {string} types - Space-separated event types
 * @param {Function} handler - Event handler function
 */
function on(target, types, handler);

/**
 * Remove event listeners with multiple event types  
 * @param {Element} target - Target element
 * @param {string} types - Space-separated event types
 * @param {Function} handler - Event handler function
 */
function off(target, types, handler);

// Access via Hammer object
Hammer.on;
Hammer.off;

Usage Examples:

import Hammer from "hammerjs";

const element = document.getElementById('myElement');

// Add multiple event types at once
Hammer.on(element, 'touchstart mousedown', function(ev) {
  console.log('Input started:', ev.type);
});

// Remove events
const handler = function(ev) { console.log(ev.type); };
Hammer.on(element, 'touchmove mousemove', handler);
Hammer.off(element, 'touchmove mousemove', handler);

Collection Utility Functions

Utility functions for iteration and object manipulation.

/**
 * Iterate over objects and arrays
 * @param {object|Array} obj - Object or array to iterate
 * @param {Function} iterator - Iterator function (value, key, obj)
 * @param {object} [context] - Context for iterator function
 */
function each(obj, iterator, context);

/**
 * Object.assign polyfill/alias
 * @param {object} target - Target object
 * @param {...object} sources - Source objects to merge
 * @returns {object} Target object with merged properties
 */
function assign(target, ...sources);

/**
 * Simple class inheritance utility
 * @param {Function} child - Child constructor
 * @param {Function} base - Base constructor  
 * @param {object} properties - Properties to add to child prototype
 */
function inherit(child, base, properties);

/**
 * Bind function to context
 * @param {Function} fn - Function to bind
 * @param {object} context - Context object
 * @returns {Function} Bound function
 */
function bindFn(fn, context);

// Access via Hammer object
Hammer.each;
Hammer.assign;
Hammer.inherit;
Hammer.bindFn;

Usage Examples:

import Hammer from "hammerjs";

// Iterate over array
Hammer.each([1, 2, 3], function(value, index) {
  console.log(index, value);
});

// Iterate over object
Hammer.each({a: 1, b: 2}, function(value, key) {
  console.log(key, value);
});

// Merge objects
const merged = Hammer.assign({}, {a: 1}, {b: 2}, {c: 3});
// Result: {a: 1, b: 2, c: 3}

// Bind function context
const obj = {name: 'test'};
const fn = function() { return this.name; };
const boundFn = Hammer.bindFn(fn, obj);
console.log(boundFn()); // 'test'

Browser Compatibility Utilities

Utility functions for cross-browser compatibility and feature detection.

/**
 * Get vendor-prefixed property name
 * @param {object} obj - Object to test (usually style object)
 * @param {string} property - Property name to prefix
 * @returns {string|undefined} Prefixed property name or undefined
 */
function prefixed(obj, property);

// Access via Hammer object
Hammer.prefixed;

Usage Examples:

import Hammer from "hammerjs";

// Get prefixed transform property
const element = document.createElement('div');
const transformProp = Hammer.prefixed(element.style, 'transform');
// Returns 'transform', 'webkitTransform', 'mozTransform', etc.

if (transformProp) {
  element.style[transformProp] = 'scale(1.5)';
}

Deprecated Utility Functions

Legacy utility functions maintained for backward compatibility (use modern alternatives).

/**
 * Merge objects (deprecated - use assign instead)
 * @param {object} dest - Destination object
 * @param {object} src - Source object
 * @returns {object} Merged object
 * @deprecated Use Hammer.assign instead
 */
function merge(dest, src);

/**
 * Extend objects (deprecated - use assign instead)
 * @param {object} dest - Destination object
 * @param {object} src - Source object
 * @param {boolean} [merge] - Whether to merge properties
 * @returns {object} Extended object
 * @deprecated Use Hammer.assign instead
 */
function extend(dest, src, merge);

// Access via Hammer object
Hammer.merge;
Hammer.extend;

Version Information

Library version information for compatibility checking.

/**
 * Hammer.js version string
 * @type {string}
 */
Hammer.VERSION;

Usage Examples:

import Hammer from "hammerjs";

console.log('Hammer.js version:', Hammer.VERSION);

// Version-specific feature checks
const version = Hammer.VERSION.split('.');
const majorVersion = parseInt(version[0]);

if (majorVersion >= 2) {
  // Use v2+ features
}

Types

interface DirectionConstants {
  DIRECTION_NONE: 1;
  DIRECTION_LEFT: 2;
  DIRECTION_RIGHT: 4;
  DIRECTION_UP: 8;
  DIRECTION_DOWN: 16;
  DIRECTION_HORIZONTAL: 6;
  DIRECTION_VERTICAL: 24;
  DIRECTION_ALL: 30;
}

interface StateConstants {
  STATE_POSSIBLE: 1;
  STATE_BEGAN: 2;
  STATE_CHANGED: 4;
  STATE_ENDED: 8;
  STATE_RECOGNIZED: 8;
  STATE_CANCELLED: 16;
  STATE_FAILED: 32;
}

interface InputConstants {
  INPUT_START: 1;
  INPUT_MOVE: 2;
  INPUT_END: 4;
  INPUT_CANCEL: 8;
}

interface UtilityFunctions {
  on: (target: Element, types: string, handler: Function) => void;
  off: (target: Element, types: string, handler: Function) => void;
  each: (obj: any, iterator: Function, context?: any) => void;
  assign: (target: object, ...sources: object[]) => object;
  inherit: (child: Function, base: Function, properties: object) => void;
  bindFn: (fn: Function, context: object) => Function;
  prefixed: (obj: object, property: string) => string | undefined;
}