### public start(inputs: Array)

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Tap.js~Tap.html

Event hook for the start of a gesture. Keeps track of when the inputs trigger the start event.

```APIDOC
## public start(inputs: Array)

### Description
Event hook for the start of a gesture. Keeps track of when the inputs trigger the start event.

### Parameters
#### Path Parameters
- **inputs** (Array) - Required - The array of Inputs on the screen.

### Response
- **null** - Tap does not trigger on a start event.
```

--------------------------------

### Panning Example Structure

Source: https://zingchart.github.io/zingtouch

HTML, CSS, and JavaScript implementation for a panning interaction demo.

```html
<div id="parent" >
  <div class="name">Parent</div>
  <div id="child">
    <div class="name">Child</div>
  </div>
</div>

<div id="output">
  Input currently panned: 0 times
</div>
```

```css
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans";
}

*{
  box-sizing: border-box;
}

#parent {
  display: flex;
  background-color: #679AEF;
  padding: 0.5rem;
/*   max-width: 555px; */
  width: 100%;
  height: 250px;
  color: #FFF
}

#child {
  display: flex;
  background-color: #99BEF9;
  padding: 1rem;
  margin: 1rem;
  color: #FFF;
  height: 150px;
  width: 100%;
}

.name {
  font-size: 1rem;
  height: 1rem;
}

#output {
  background-color: #333;
  width: 100%;
/*   max-width: 555px; */
  display: block;
  min-height: 30px;
  padding: 10px;
  font-size: 0.8em;
  color: white;
}
```

```javascript
var counter = 0;
var region = new ZingTouch.Region(document.getElementById('parent'));
var target = document.getElementById('child');

region.bind(target, 'pan', function(e){
  counter++;
  document.getElementById('output').innerHTML = 
    "Input currently panned: " + counter + " times";
})
```

--------------------------------

### Region Bind Example

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Region.js~Region.html

Demonstrates the basic usage of the bind method with just an element.

```javascript
bind(element)
```

--------------------------------

### Region Gesture Tracking

Source: https://zingchart.github.io/zingtouch/docs

Examples of setting up regions to track gestures on elements.

```javascript
var touchArea = document.getElementById('toucharea');
var myRegion = new ZingTouch.Region(touchArea);

myRegion.bind(touchArea, 'swipe', function(e){
    console.log(e.detail);
});
```

```javascript
var parentTouchArea = document.getElementById('parent-toucharea')
var touchArea = document.getElementById('toucharea')
var myRegion = new ZingTouch.Region(parentTouchArea);

myRegion.bind(touchArea, 'swipe', function(e){
    console.log(e.detail);
});
```

--------------------------------

### Initialize Expand Gesture

Source: https://zingchart.github.io/zingtouch/docs

Instantiate an Expand gesture. No specific options are shown in the example, implying default settings.

```javascript
new ZingTouch.Expand()

```

--------------------------------

### Initial State and Animation Setup

Source: https://zingchart.github.io/zingtouch

Initializes the application state and sets up a looping animation for an element with the ID 'target'. This is typically used for visual effects or interactive elements.

```javascript
//Initial Setup

resetState();

//Move omanyte
anime({
    targets: ['#target'],
    rotate: 20,
    duration: 800,
    loop: true,
    easing: 'easeInOutQuad',
    direction: 'alternate'
});
```

--------------------------------

### Build Documentation with ESDoc

Source: https://zingchart.github.io/zingtouch/docs/index.html

Generates documentation using ESDoc, which is compatible with ES6 class-structured codebases. Ensure ESDoc is installed.

```bash
npm run docs
```

--------------------------------

### Initialize Pinch Gesture

Source: https://zingchart.github.io/zingtouch/docs

Instantiate a Pinch gesture. No specific options are shown in the example, implying default settings.

```javascript
new ZingTouch.Pinch()

```

--------------------------------

### Instantiate Gesture Class

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/gestures/Gesture.spec.js.html

Tests that the Gesture class can be successfully instantiated. No specific setup is required beyond importing the class.

```javascript
import Gesture from './../../src/gestures/Gesture.js';

/** @test {Gesture} */
describe('Gesture', function () {
  it('should be instantiated', function () {
    expect(Gesture).to.not.equal(null);
  });
});
```

--------------------------------

### Initialize Rotate Gesture

Source: https://zingchart.github.io/zingtouch/docs

Instantiate a Rotate gesture. No specific options are shown in the example, implying default settings.

```javascript
new ZingTouch.Rotate()

```

--------------------------------

### Build Production Library with Webpack

Source: https://zingchart.github.io/zingtouch/docs/index.html

Builds the minified version of the ZingTouch library for production use with Webpack. Ensure Webpack is installed globally.

```bash
npm run build:prod
```

--------------------------------

### Build Development Library with Webpack

Source: https://zingchart.github.io/zingtouch/docs/index.html

Builds the unminified version of the ZingTouch library using Webpack. Ensure Webpack is installed globally.

```bash
npm run build:dev
```

--------------------------------

### Distance Methods

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Distance.js~Distance.html

Methods for handling gesture lifecycle events such as start and move.

```APIDOC
## move(inputs, state)

### Description
Event hook for the move of a gesture. Determines if the two points are moved in the expected direction relative to the current distance and the last distance.

### Parameters
- **inputs** (Array) - Required - The array of Inputs on the screen.
- **state** (Object) - Required - The state object of the current region.

### Response
- **Returns** (Object | null) - The distance in pixels between the two inputs.

## start(inputs)

### Description
Event hook for the start of a gesture. Initializes the lastEmitted gesture and stores it in the first input for reference.

### Parameters
- **inputs** (*) - Required - The input data.
```

--------------------------------

### Gesture getType Method Example

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Gesture.js~Gesture.html

Example demonstrating the usage of the `getType` method on a Gesture object. This method returns the generic type of the gesture.

```javascript
* Gesture.getType
```

--------------------------------

### Distance Start Method

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Distance.js~Distance.html

This event hook is called at the beginning of a gesture. It initializes the lastEmitted gesture and stores it in the first input for reference.

```javascript
start(inputs: *)
```

--------------------------------

### ZingChart Initialization with Zooming Enabled

Source: https://zingchart.github.io/zingtouch

Example of initializing a ZingChart line chart with zooming enabled on both X and Y axes, allowing users to pinch and expand to zoom.

```APIDOC
## ZingChart Initialization with Zooming Enabled

### Description
This example demonstrates how to render a ZingChart line chart and enable zooming functionality on both the X and Y axes, allowing users to interactively zoom in and out using pinch and expand gestures.

### Endpoint
N/A (Client-side rendering)

### Method
N/A (Client-side rendering)

### Parameters
#### Request Body (Implicit via `zingchart.render` data object)
- **data.scaleY.zooming** (boolean) - Required - Set to `true` to enable zooming on the Y-axis.
- **data.scaleX.zooming** (boolean) - Required - Set to `true` to enable zooming on the X-axis.

### Request Example
```javascript
var values = [];
for (var i = 0; i < 100; i++) {
  values.push(Math.floor(Math.random() * 100));
}
zingchart.render({
  id: 'myChart',
  data: {
    type: 'line',
    plotarea: {
      marginLeft: 60,
      marginBottom: 60
    },
    crosshairX: {
      plotLabel: {
        visible: false,
        y: 0,
      },
      scaleLabel: {
        text: "%v<br>| | |",
        borderRadius: 2,
        backgroundColor: "#777"
      }
    },
    scaleY: {
      zooming: true, // Enable Y-axis zooming
      offsetStart: 5,
      lineColor: "#E3E8E9",
      fontColor: "#879CAB",
      guide: {
        visible: true,
        lineWidth: "1px",
        lineStyle: "solid",
        lineColor: "#EEE"
      },
      tick: {
        visible: false
      }
    },
    scaleX: {
      zooming: true, // Enable X-axis zooming
      lineColor: "#E3E8E9",
      fontColor: "#879CAB",
      guide: {
        visible: false
      },
      tick: {
        visible: false
      }
    },
    scrollY: {
      bar: {
        width: 25,
        borderTop: '0px solid none',
        borderRight: '2px solid #D1D3D4',
        borderBottom: '2px solid #D1D3D4',
        borderLeft: '2px solid #D1D3D4'
      },
      handle: {
        marginLeft: 7
      }
    },
    scrollX: {
      bar: {
        height: 25,
        borderTop: '0px solid none',
        borderRight: '2px solid #D1D3D4',
        borderBottom: '2px solid #D1D3D4',
        borderLeft: '2px solid #D1D3D4'
      },
      handle: {
        height: 12,
        marginTop: 5
      }
    },
    series: [{
      values: values,
      lineColor: "#00AEF1",
      marker: {
        backgroundColor: "#fff",
        borderColor: "#00AEF1"
      }
    }]
  },
  height: "300px",
  width: "99%"
});
```

### Response
#### Success Response (200)
N/A (Client-side rendering)

#### Response Example
N/A (Client-side rendering)
```

--------------------------------

### Create a ZingTouch Region

Source: https://zingchart.github.io/zingtouch/docs/index.html

Instantiate a ZingTouch Region to define an area for listening to touch gestures. This example sets the region to the document's body.

```javascript
var zt = new ZingTouch.Region(document.body);
```

--------------------------------

### Get Current Event Type

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Input.js~Input.html

Returns the normalized type of the current event associated with this input. Useful for determining if the input is in a 'start', 'move', or 'end' state.

```javascript
input.getCurrentEventType()
```

--------------------------------

### Gesture Class Definition

Source: https://zingchart.github.io/zingtouch/docs/file/src/gestures/Gesture.js.html

Defines the base Gesture class with properties for type and ID, and methods for setting, getting, and updating these properties. Includes event hooks for start, move, and end gestures.

```javascript
/**
 * @file Gesture.js
 * Contains the Gesture class
 */

/**
 * The Gesture class that all gestures inherit from.
 */
class Gesture {
  /**
   * Constructor function for the Gesture class.
   * @class Gesture
   */
  constructor() {
    /**
     * The generic string type of gesture ('expand'|'pan'|'pinch'|'rotate'|'swipe'|'tap').
     * @type {String}
     */
    this.type = null;

    /**
     * The unique identifier for each gesture determined at bind time by the state object. This
     * allows for distinctions across instance variables of Gestures that are created on the fly
     * (e.g. Tap-1, Tap-2, etc).
     * @type {String|null}
     */
    this.id = null;
  }

  /**
   * Set the type of the gesture to be called during an event
   * @param {String} type - The unique identifier of the gesture being created.
   */
  setType(type) {
    this.type = type;
  }
  /*setId*/

  /**
   * getType() - Returns the generic type of the gesture
   * @returns {String} - The type of gesture
   */
  getType() {
    return this.type;
  }
  /*getType*/

  /**
   * Set the id of the gesture to be called during an event
   * @param {String} id - The unique identifier of the gesture being created.
   */
  setId(id) {
    this.id = id;
  }
  /*setId*/

  /**
   * Return the id of the event. If the id does not exist, return the type.
   * @return {String}
   */
  getId() {
    return (this.id !== null) ? this.id : this.type;
  }
  /*getId*/

  /**
   * Updates internal properties with new ones, only if the properties exist.
   * @param object
   */
  update(object) {

    for (var key in object) {
      if (this[key]) {
        this[key] = object[key];
      }
    }
  }

  //noinspection JSUnusedLocalSymbols
  /**
   * start() - Event hook for the start of a gesture
   * @param {Array} inputs - The array of Inputs on the screen
   * @returns {null|Object}  - Default of null
   */
  start(inputs) {
    return null;
  }
  /*start*/

  //noinspection JSUnusedLocalSymbols
  /**
   * move() - Event hook for the move of a gesture
   * @param {Array} inputs - The array of Inputs on the screen
   * @param {Object} state - The state object of the current region.
   * @returns {null|Object} - Default of null
   */
  move(inputs, state) {
    return null;
  }
  /*move*/

  //noinspection JSUnusedLocalSymbols
  /**
   * end() - Event hook for the move of a gesture
   * @param {Array} inputs - The array of Inputs on the screen
   * @returns {null|Object}  - Default of null
   */
  end(inputs) {
    return null;
  }
  /*end*/

}

export default Gesture;

```

--------------------------------

### Initialize Screen Dimensions and Resources

Source: https://zingchart.github.io/zingtouch

Sets up initial screen dimensions and defines resource URLs for images. This is crucial for responsive design and asset loading.

```javascript
var Screen = {
    height: window.innerHeight,
    width: window.innerWidth
};
var MAX_VELOCITY = Screen.height * 0.009;
var Resources = {
    pokeball: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/pkmngo-pokeball.png',
    pokeballActive: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/pkmngo-pokeballactive.png',
    pokeballClosed: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/pkmngo-pokeballclosed.png'
};
```

--------------------------------

### Gesture Class Public Methods

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Gesture.js~Gesture.html

Outlines the public methods available on the Gesture class for managing gesture events and properties. These include hooks for start, move, and end events, as well as methods for setting and getting gesture identifiers and types.

```javascript
end(inputs: Array): null | Object end() - Event hook for the move of a gesture |   
```

```javascript
getId(): String Return the id of the event. |   
```

```javascript
getType(): String getType() - Returns the generic type of the gesture |   
```

```javascript
move(inputs: Array, state: Object): null | Object move() - Event hook for the move of a gesture |   
```

```javascript
setId(id: String) Set the id of the gesture to be called during an event |   
```

```javascript
setType(type: String) Set the type of the gesture to be called during an event |   
```

```javascript
start(inputs: Array): null | Object start() - Event hook for the start of a gesture |   
```

```javascript
update(object: *) Updates internal properties with new ones, only if the properties exist. |   
```

--------------------------------

### Get Event Propagation Path

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/util.js.html

Provides a polyfill for `event.path` to get the DOM event propagation path. Supports older browsers by manually constructing the path from the target to the document.

```javascript
getPropagationPath(event) {
      if (event.path) {
        return event.path;
      } else {
        var path = [];
        var node = event.target;
        while (node != document) {
          path.push(node);
          node = node.parentNode;
        }

        return path;
      }
    }
```

--------------------------------

### Initialize ZingTouch Library

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/main.js.html

Exposes the ZingTouch object to the window and exports it as a module.

```javascript
/**
 * @file main.js
 * Main file to setup event listeners on the document, and to expose the ZingTouch object
 */
 
import ZingTouch from './../ZingTouch.js';
window.ZingTouch = ZingTouch;
export {ZingTouch};
 
```

--------------------------------

### Performance comparison: creating gesture instances in a loop

Source: https://zingchart.github.io/zingtouch/docs

Illustrates a less performant pattern of creating new gesture instances within a loop. For better performance, reuse gesture instances.

```javascript
//Poor performance
var delay = 100;
for (var i = 0; i < 100; i++){
    myRegion.bind(myElement, new ZingTouch.Tap({maxDelay : delay}),function(e){});
}

```

--------------------------------

### Tap Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Tap.js~Tap.html

Initialize a new Tap gesture instance. Configure minimum and maximum delays, the number of inputs required, and movement tolerance.

```javascript
new Tap(options: Object)
```

--------------------------------

### Pan Event Hooks

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Pan.js~Pan.html

Lifecycle methods for handling the start, move, and end phases of a Pan gesture.

```APIDOC
## Methods

### start(inputs)
- **inputs** (*) - Required - The array of Inputs on the screen.

### move(inputs, state)
- **inputs** (Array) - Required - The array of Inputs on the screen.
- **state** (Object) - Required - The state object of the current region.
- **Returns** (Object) - The distance in pixels between the two inputs.

### end(inputs)
- **inputs** (Array) - Required - The array of Inputs on the screen.
- **Returns** (null|Object) - null if the gesture is not to be emitted, Object with information otherwise.
```

--------------------------------

### Tap Gesture End Event

Source: https://zingchart.github.io/zingtouch/docs/file/src/gestures/Tap.js.html

Handles the end of a tap gesture, calculating the interval between start and end events.

```APIDOC
## Tap.end(inputs)

### Description
Calculates the interval time between the start and end of a tap gesture. Returns null if the input is invalid or the interval is outside the allowed delay range.

### Method
`end`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **inputs** (Array) - Required - An array of input objects representing the gesture.

### Request Example
```json
{
  "inputs": [
    {
      "getCurrentEventType": function() { return 'end'; },
      "getGestureProgress": function(type) { return { start: 1678886400000 }; }
    }
  ]
}
```

### Response
#### Success Response (200)
- **interval** (Number) - The time interval in milliseconds between the start and end of the gesture.

#### Response Example
```json
{
  "interval": 50
}
```

#### Error Response
- **null** - Returned if the input is invalid or the interval is outside the allowed delay range.
```

--------------------------------

### Instantiate and Test Input Class Properties

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/core/classes/Input.spec.js.html

Tests the instantiation of the Input class and verifies its initial properties like 'initial', 'current', and 'previous' events. Ensures these properties are instances of ZingEvent and have the expected relationships.

```javascript
import Input from './../../../src/core/classes/Input.js';
import ZingEvent from './../../../src/core/classes/ZingEvent.js';
/** @test {Input} */
describe('Input', function () {
  var event = document.createEvent('Event');
  var input = new Input(event, 1234);
  
  it('should be instantiated', function () {
    expect(Input).to.not.equal(null);
  });
  
  it('should have an initial event', function () {
    expect(input.initial).to.be.an.instanceof(ZingEvent);
  });
  
  it('should have an current event', function () {
    expect(input.current).to.be.an.instanceof(ZingEvent);
    expect(input.current).to.equal(input.current);
  });
  
  it('should have an previous event', function () {
    expect(input.previous).to.be.an.instanceof(ZingEvent);
    expect(input.previous).to.equal(input.current);
  });
  
});
```

--------------------------------

### Constructor: Binding

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Binding.js~Binding.html

Initializes a new Binding instance to link an element with a gesture.

```APIDOC
## Constructor: Binding

### Description
Constructor function for the Binding class. Responsible for creating a binding between an element and a gesture.

### Parameters
#### Path Parameters
- **element** (Element) - Required - The element to associate the gesture to.
- **gesture** (Gesture) - Required - An instance of the Gesture type.
- **handler** (Function) - Required - The function handler to execute when a gesture is recognized on the associated element.
- **capture** (Boolean) - Optional (default: false) - A boolean signifying if the event is to be emitted during the capture or bubble phase.
- **bindOnce** (Boolean) - Optional (default: false) - A boolean flag used for the bindOnce syntax.
```

--------------------------------

### Normalize Browser Events

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/util.js.html

Maps various browser event types to a standardized set of 'start', 'move', or 'end' strings.

```javascript
normalizeEvent(type) {
    switch (type) {
      case 'mousedown' :
      case 'touchstart' :
      case 'pointerdown' :
        return 'start';
      case 'mousemove' :
      case 'touchmove' :
      case 'pointermove' :
        return 'move';
      case 'mouseup' :
      case 'touchend' :
      case 'pointerup' :
        return 'end';
      default :
        return null;
    }
  }
```

--------------------------------

### Input Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Input.js~Input.html

Initializes a new Input object with the provided event and identifier.

```APIDOC
## Public Constructor: constructor

### Endpoint

N/A (Class Constructor)

### Description

Constructor function for the Input class.

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

None

### Parameters

*   **event** (Event) - Required - The Event object from the window.
*   **identifier** (Number) - Optional - The identifier for each input event (taken from event.changedTouches). Defaults to 0.
```

--------------------------------

### Initialize Tap Gesture

Source: https://zingchart.github.io/zingtouch/docs

Configure a Tap gesture with custom maximum delay, number of inputs, and tolerance.

```javascript
new ZingTouch.Tap({
    maxDelay: 200,
    numInputs: 2,
    tolerance: 125
})

```

--------------------------------

### Initialize ZingTouch API

Source: https://zingchart.github.io/zingtouch/docs/file/src/ZingTouch.js.html

The main entry point for importing gesture classes and creating new interaction regions.

```javascript
/**
 * @file ZingTouch.js
 * Main object containing API methods and Gesture constructors
 */
 
import Region from './core/classes/Region.js';
import Gesture from './gestures/Gesture.js';
import Expand from './gestures/Expand.js';
import Pan from './gestures/Pan.js';
import Pinch from './gestures/Pinch.js';
import Rotate from './gestures/Rotate.js';
import Swipe from './gestures/Swipe.js';
import Tap from './gestures/Tap.js';
 
/**
 * The global API interface for ZingTouch. Contains a constructor for the Region Object,
 * and constructors for each predefined Gesture.
 * @type {Object}
 * @namespace ZingTouch
 */
var ZingTouch = {
  _regions: [],
 
  //Constructors
  Gesture: Gesture,
  Expand: Expand,
  Pan: Pan,
  Pinch: Pinch,
  Rotate: Rotate,
  Swipe: Swipe,
  Tap: Tap,
  Region: function (element, capture, preventDefault) {
    var id = ZingTouch._regions.length;
    var region = new Region(element, capture, preventDefault, id);
    ZingTouch._regions.push(region);
    return region;
  }
};
 
export default ZingTouch;
```

--------------------------------

### Get Rightmost Input

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/util.js.html

Finds the input with the largest x-coordinate from a list of inputs. Useful for determining the farthest right interaction point.

```javascript
getRightMostInput(inputs) {
      var rightMost = null;
      var distance = Number.MIN_VALUE;
      inputs.forEach(input => {
        if (input.initial.x > distance) {
          rightMost = input;
        }
      });
      return rightMost;
    }
```

--------------------------------

### Tap Constructor Parameters

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/gestures/Tap.spec.js.html

Checks if the Tap constructor correctly accepts and assigns `maxDelay` and `numInputs` parameters. Ensure these configuration options are functional.

```javascript
it('should return accept delay and number of inputs as parameters', function () {
  let _tap = new Tap({
    maxDelay:  2000,
    numInputs: 2
  });
  expect(_tap.maxDelay).to.equal(2000);
  expect(_tap.numInputs).to.equal(2);
});
```

--------------------------------

### Get Gesture Progress

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/classes/Input.js.html

Retrieves the progress object for a specific gesture. If the gesture's progress has not been initialized, it creates an empty object for it.

```javascript
getGestureProgress(id) {
  if (!this.progress[id]) {
    this.progress[id] = {};
  }
  return this.progress[id];
}
```

--------------------------------

### Binder Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Binder.js~Binder.html

Initializes a new Binder instance to manage gesture bindings for a specific element.

```APIDOC
## public constructor(element: Element, bindOnce: Boolean, state: Object): Object

### Description
Constructor function for the Binder class.

### Method
Constructor

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Request Example
```javascript
// Example usage within ZingTouch.bind()
const region = new ZingTouch.Region(myElement);
const binder = region.bind(myElement, function(gesture) {
  // Handle gesture
});
```

### Response
#### Success Response (200)
- **this** (Object) - Returns 'this' to be chained over and over again.

#### Response Example
```javascript
// The constructor returns the binder instance for chaining
// Example: binder.bindOnce()... (though bindOnce is a constructor param)
```
```

--------------------------------

### Initialize Input Class

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/classes/Input.js.html

The constructor initializes the Input object with the initial event, setting up properties for current, previous, and initial event states, as well as gesture progress tracking.

```javascript
class Input {
  constructor(event, identifier) {
    var currentEvent = new ZingEvent(event, identifier);
    this.initial = currentEvent;
    this.current = currentEvent;
    this.previous = currentEvent;
    this.identifier = (typeof identifier !== 'undefined') ? identifier : 0;
    this.progress = {};
  }
  /*constructor*/
}
```

--------------------------------

### Tap Object Return

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/gestures/Tap.spec.js.html

Verifies that instantiating Tap returns a valid Tap object. This confirms the constructor works as expected.

```javascript
it('should return a Tap object.', function () {
  let _tap = new Tap();
  expect(_tap instanceof Tap).to.be.true;
});
```

--------------------------------

### Get Path Index

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/util.js.html

Finds the index of a specific element within a given path array. Returns the length of the path if the element is not found.

```javascript
getPathIndex(path, element) {
      var index = path.length;

      path.forEach(obj => {
        if (obj === element) {
          index = i;
        }
      });

      return index;
    }
```

--------------------------------

### Performance comparison: reusing gesture instances in a loop

Source: https://zingchart.github.io/zingtouch/docs

Demonstrates a more performant approach by creating a single gesture instance and reusing it within a loop for binding. This avoids repeated object instantiation.

```javascript
//Better performance
var delay = 100;
var customTap = new ZingTouch.Tap({maxDelay : delay});
for (var i = 0; i < 100; i++){
    myRegion.bind(myElement, customTap, function(e){});
}

```

--------------------------------

### Initialize Input Class

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Input.js~Input.html

Constructor for the Input class. It initializes an Input object with the first event and an optional touch identifier. Use this when a new input interaction begins.

```javascript
new Input(event, touchIdentifier)
```

--------------------------------

### Get Pixel Color Data

Source: https://zingchart.github.io/zingtouch

Retrieves the RGBA color data from a specific pixel on a canvas. This function is used to determine the color of a clicked point on the canvas.

```javascript
y = Math.floor(y);
  var canvas = document.getElementById('picker-canvas');
  ctx = canvas.getContext('2d');
  var colors = ctx.getImageData(x, y, 1, 1).data;
  var str = "";
  for (var i = 0; i < colors.length - 1; i++) {
    str += colors[i];
  }
  return parseInt(str);
}

```

--------------------------------

### Bind Element to Swipe Gesture

Source: https://zingchart.github.io/zingtouch/docs/index.html

Example of binding a swipe gesture to an element within a defined ZingTouch Region. The console will log the gesture details upon detection.

```javascript
var touchArea = document.getElementById('toucharea');
var myRegion = new ZingTouch.Region(touchArea);

myRegion.bind(touchArea, 'swipe', function(e){
    console.log(e.detail);
});
```

--------------------------------

### Initialize Pan Gesture

Source: https://zingchart.github.io/zingtouch/docs

Configure a Pan gesture to trigger with two inputs.

```javascript
new ZingTouch.Pan({
    numInputs: 2
})

```

--------------------------------

### Reset Gesture Progress

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Input.js~Input.html

Resets the progress state for a specified gesture. This is useful for clearing the internal state of a gesture, for example, when a new gesture is initiated or an interaction ends.

```javascript
input.resetProgress(id)
```

--------------------------------

### Import ZingTouch Utility Functions

Source: https://zingchart.github.io/zingtouch/docs/variable/index.html

Import the utility functions module. This module contains generic helper functions for ZingTouch.

```javascript
import util from 'zingtouch/src/core/util.js'
```

--------------------------------

### Swipe Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Swipe.js~Swipe.html

Initializes a new Swipe gesture instance with optional configuration parameters.

```APIDOC
## constructor(options: Object)

### Description
Constructor function for the Swipe class.

### Parameters
#### Request Body
- **options** (Object) - Optional - The options object.
- **options.numInputs** (Number) - Optional - The number of inputs to trigger a Swipe.
- **options.maxRestTime** (Number) - Optional - The maximum resting time between move events.
- **options.escapeVelocity** (Number) - Optional - The minimum velocity required to emit a swipe.
- **options.timeDistortion** (Number) - Optional - (EXPERIMENTAL) Time in milliseconds to distort between events.
- **options.maxProgressStack** (Number) - Optional - (EXPERIMENTAL) Maximum move events to track.
```

--------------------------------

### ZingTouch Life Cycle

Source: https://zingchart.github.io/zingtouch/docs

Information on utilizing ZingTouch's life cycle events (start, move, end) for creating new gestures and finer control over mobile events.

```APIDOC
# ZingTouch Life Cycle

Utilizing ZingTouch's life cycle (start, move, end) allows you to create new gestures and to interface with the mobile event cycle in a much finer detail. It will allow you to hook into events and to apply external functions during events. Imagine the `Pan` gesture allowing in-between events to be triggered:

* Pan - start
* Pan - move
* Pan - end
* Pan -> Event detected.

The syntax for utilizing the life cycle is still to be determined, but will be released in the near future.
```

--------------------------------

### Pinch Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Pinch.js~Pinch.html

Initializes a new instance of the Pinch gesture class.

```APIDOC
## constructor(options)

### Description
Constructor function for the Pinch class. This gesture is defined as two inputs moving closer to each other.

### Parameters
#### Options
- **options** (*) - Required - Configuration options for the Pinch gesture.
```

--------------------------------

### Test Input.getCurrentEventType Method

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/core/classes/Input.spec.js.html

Tests the 'getCurrentEventType' method. It checks that the method returns null for unrecognized events and correctly identifies the event type ('start') for a recognized touch event.

```javascript
/** @test {Input.getCurrentEventType} */
describe('Input.getCurrentEventType', function () {
  
  it('should be null for an event it does not understand', function () {
    var event = document.createEvent('Event');
    var input = new Input(event, 1234);
    expect(input.getCurrentEventType()).to.be.null;
  });
  
  it('should not be null for an event it does understand', function () {
    var event = document.createEvent('TouchEvent');
    event.initUIEvent('touchstart', true, true);
    var touchInput = new Input(event, 1234);
    expect(touchInput.getCurrentEventType()).to.equal('start');
  });
});
```

--------------------------------

### Initialize Binding Class

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/classes/Binding.js.html

Use the constructor to create a new binding instance. It associates a gesture with an element and specifies the handler function, capture phase preference, and a flag for single-event binding.

```javascript
class Binding {
  constructor(element, gesture, handler, capture, bindOnce) {
    this.element = element;
    this.gesture = gesture;
    this.handler = handler;
    this.capture = (typeof capture !== 'undefined') ? capture : false;
    this.bindOnce = (typeof bindOnce !== 'undefined') ? bindOnce : false;
  }
}
```

--------------------------------

### Get Gesture Type

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/gestures/Gesture.spec.js.html

Tests the getType method of the Gesture class, ensuring it returns null for a generic gesture instance. This verifies the default behavior before specific gesture types are assigned.

```javascript
/** @test {Gesture.getType} */
describe('Gesture.getType', function () {
  it('should return null for a generic gesture', function () {
    var _gesture = new Gesture();
    expect(_gesture.getType()).to.equal(null);
  });
});
```

--------------------------------

### Expand Class Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Expand.js~Expand.html

Initializes a new instance of the Expand gesture class.

```APIDOC
## constructor(options)

### Description
Constructor function for the Expand class.

### Parameters
#### Request Body
- **options** (*) - Required - Configuration options for the Expand gesture.
```

--------------------------------

### Get Gesture Progress

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Input.js~Input.html

Retrieves the internal progress state for a specific gesture. If no progress has been recorded for the gesture ID, an empty object is returned. Use this to inspect the state of a gesture during an interaction.

```javascript
input.getGestureProgress(id)
```

--------------------------------

### Pan Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Pan.js~Pan.html

Initializes a new Pan gesture instance with optional configuration for input count and movement threshold.

```APIDOC
## Constructor Pan

### Description
Constructor function for the Pan class.

### Parameters
#### Request Body
- **options** (Object) - Optional - The options object.
- **options.numInputs** (Number) - Optional - Number of inputs for the Pan gesture (default: 1).
- **options.threshold** (Number) - Optional - The minimum number of pixels the input has to move to trigger this gesture (default: 1).
```

--------------------------------

### Tap Gesture End Event Handling

Source: https://zingchart.github.io/zingtouch/docs/file/src/gestures/Tap.js.html

Handles the end of a tap gesture, validating inputs and calculating the interval between start and end events. Returns the interval if it's within the allowed delay range, otherwise resets progress and returns null.

```javascript
end(inputs) {
      if (inputs.length !== this.numInputs) {
        return null;
      }
    
      var startTime = Number.MAX_VALUE;
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].getCurrentEventType() !== 'end') {
          return null;
        }
    
        var progress = inputs[i].getGestureProgress(this.type);
        if (!progress.start) {
          return null;
        }
    
        //Find the most recent input's startTime
        if (progress.start < startTime) {
          startTime = progress.start;
        }
      }
    
      var interval = new Date().getTime() - startTime;
      if ((this.minDelay <= interval) && (this.maxDelay >= interval)) {
        return {
          interval: interval
        };
      } else {
        let type = this.type;
        inputs.forEach(function (input) {
          input.resetProgress(type);
        });
    
        return null;
      }
    }
```

--------------------------------

### Initialize Pan Gesture

Source: https://zingchart.github.io/zingtouch/docs/index.html

Configures a pan gesture with a specific number of required inputs.

```javascript
new ZingTouch.Pan({
    numInputs: 2
})
```

--------------------------------

### Initialize State and Register Gestures

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/classes/State.js.html

The constructor initializes the State object, setting up properties for region ID, inputs, bindings, and gesture counts. It then registers default gestures like Expand, Pan, Rotate, Pinch, Swipe, and Tap.

```javascript
class State {
  constructor(regionId) {
    this.regionId = regionId;
    this.inputs = [];
    this.bindings = [];
    this.numGestures = 0;
    this.registeredGestures = {};

    this.registerGesture(new Expand(), 'expand');
    this.registerGesture(new Pan(), 'pan');
    this.registerGesture(new Rotate(), 'rotate');
    this.registerGesture(new Pinch(), 'pinch');
    this.registerGesture(new Swipe(), 'swipe');
    this.registerGesture(new Tap(), 'tap');
  }
  // ... other methods
```

--------------------------------

### Initialize Expand Gesture

Source: https://zingchart.github.io/zingtouch/docs/index.html

Initializes a standard expand gesture detection.

```javascript
new ZingTouch.Expand()
```

--------------------------------

### Usage of registered custom gesture with bind

Source: https://zingchart.github.io/zingtouch/docs

Demonstrates how to use a previously registered custom gesture with the `Region.bind` method, using its registered key.

```javascript
myRegion.bind(myElement, 'shortTap', function(e){});

```

--------------------------------

### Binder Class

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/classes/Binder.js.html

The Binder class constructor and its methods for adding gesture bindings.

```APIDOC
## Binder Class

### Description
A chainable object that contains a single element to be bound upon. Called from ZingTouch.bind(), and is used to chain over gesture callbacks.

### Constructor

#### Parameters
- **element** (Element) - Required - The element to bind gestures to.
- **bindOnce** (Boolean) - Optional - Option to bind once and only emit the event once.
- **state** (Object) - Required - The state of the Region that is being bound to.

### Methods

Each method corresponds to a registered gesture and allows for adding a handler for that gesture.

#### Example Usage

```javascript
// Assuming 'myElement' is an HTML element and 'zingtouch' is initialized
zingtouch.bind(myElement, {
  gesture: function(event) {
    console.log('Gesture detected!');
  }
});
```

#### Available Gestures (Dynamically added based on state.registeredGestures)

For each registered gesture (e.g., 'tap', 'swipe', 'pan'), a method with the same name is available on the Binder instance.

##### **gestureName**(handler, capture)

- **handler** (Function) - Required - The callback function to execute when the gesture is detected.
- **capture** (Boolean) - Optional - Whether to use capture phase for the event.

Returns 'this' to allow for chaining.
```

--------------------------------

### State Class Constructor

Source: https://zingchart.github.io/zingtouch/docs/file/src/core/classes/State.js.html

Initializes a new State object for a given region, registering default gestures.

```APIDOC
## State Constructor

### Description
Creates an object related to a Region's state, and contains helper methods to update and clean up different states. It also registers default gestures like Expand, Pan, Rotate, Pinch, Swipe, and Tap.

### Method
Constructor

### Parameters
- **regionId** (String) - The id for the region this state is bound to.

### Properties
- **inputs** (Array<Input>) - An array of current and recently inactive Input objects related to a gesture.
- **bindings** (Array<Binding>) - An array of Binding objects; the list of relations between elements, their gestures, and the handlers.
- **numGestures** (Number) - The number of gestures that have been registered with this state.
- **registeredGestures** (Object) - A key/value map of all the registered gestures for the listener. Note: Can only have one gesture registered to one key.
```

--------------------------------

### Import Pinch Gesture

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Pinch.js~Pinch.html

Import the Pinch gesture class from the ZingTouch source directory.

```javascript
import Pinch from 'zingtouch/src/gestures/Pinch.js'
```

--------------------------------

### Test Binder instantiation and functionality

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/core/classes/Binder.spec.js.html

Verifies that the Binder class can be instantiated and correctly registers gestures from the State object.

```javascript
  1. /**
  2.  * @file Binder.js
  3.  * Tests Binder class
  4.  */
  5. import Binder from './../../../src/core/classes/Binder.js';
  6. import State from './../../../src/core/classes/State.js';
  7.  
  8. /** @test {Binder} */
  9. describe('Binder', function () {
  10.   it('should be instantiated', function () {
  11.     expect(Binder).to.not.equal(null);
  12.   });
  13.  
  14.   it('should return a new object with a valid element parameter', function () {
  15.     var myState = new State();
  16.     var myBinder = new Binder(document.body, false, myState);
  17.     expect(myBinder).to.not.equal.null;
  18.     expect(myBinder.element).to.equal(document.body);
  19.   });
  20.  
  21.   it('should return a chainable object with all of the current registered gestures', function () {
  22.     var myState = new State();
  23.     var myBinder = new Binder(document.body, false, myState);
  24.     var gestures = Object.keys(myState.registeredGestures);
  25.  
  26.     for (var key in myBinder) {
  27.       if (key !== 'element') {
  28.         expect(gestures.indexOf(key) >= 0).to.be.true;
  29.       }
  30.     }
  31.   });
  32.  
  33. });
  34.  
```

--------------------------------

### Import State Class

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/State.js~State.html

Import the State class from the core library.

```javascript
import State from 'zingtouch/src/core/classes/State.js'
```

--------------------------------

### Initialize Swipe Gesture

Source: https://zingchart.github.io/zingtouch/docs/index.html

Configures a swipe gesture with velocity and timing constraints.

```javascript
new ZingTouch.Swipe({
    numInputs: 2,
    maxRestTime: 100,
    escapeVelocity: 0.25
});
```

--------------------------------

### Initialize Tap Gesture

Source: https://zingchart.github.io/zingtouch/docs/index.html

Configures a tap gesture with specific input requirements and tolerance settings.

```javascript
new ZingTouch.Tap({
    maxDelay: 200,
    numInputs: 2,
    tolerance: 125
})
```

--------------------------------

### Instantiate and Test State Class

Source: https://zingchart.github.io/zingtouch/docs/test-file/test/core/classes/state.spec.js.html

Tests the instantiation of the State class and checks for the presence of default gestures. Ensure the State class is imported before use.

```javascript
import State from './../../../src/core/classes/State.js';
import Gesture from './../../../src/gestures/Gesture.js';

/** @test {State} */
describe('State', function () {
  var state = new State();
  it('should be instantiated', function () {
    expect(state).to.not.equal(null);
  });

  it('should have no inputs', function () {
    expect(state.inputs).to.be.empty;
  });

  it('should have no bindings', function () {
    expect(state.bindings).to.be.empty;
  });

  it('should have instances of the 6 default gestures', function () {
    var gestures = ['expand', 'pan', 'pinch', 'rotate', 'swipe', 'tap'];
    for (var i = 0; i < state.registeredGestures.length; i++) {
      expect(gestures.indexOf(state.registeredGestures[i].type)).to.not.equal(-1);
    }
  });
});
```

--------------------------------

### Pan Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Pan.js~Pan.html

Initialize a new Pan gesture instance. The constructor accepts an optional options object to configure gesture behavior, such as the number of inputs and the movement threshold.

```javascript
constructor(options: Object)
```

--------------------------------

### Import Pan Gesture

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Pan.js~Pan.html

Import the Pan gesture class from the ZingTouch library. This is typically the first step before using the Pan gesture in your application.

```javascript
import Pan from 'zingtouch/src/gestures/Pan.js'
```

--------------------------------

### Import Expand Gesture

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Expand.js~Expand.html

Import the Expand gesture class from the ZingTouch library. This is necessary to use the Expand gesture in your project.

```javascript
import Expand from 'zingtouch/src/gestures/Expand.js'
```

--------------------------------

### State Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/State.js~State.html

Details the constructor for the State class, including its parameters.

```APIDOC
## Public Constructors

### public constructor(regionId: *)

Constructor for the State class.

#### Params:

Name| Type| Attribute| Description  
---|---|---|---
regionId | * |  |   
```

--------------------------------

### Expand Gesture API

Source: https://zingchart.github.io/zingtouch/docs/index.html

Configuration and emitted events for the Expand gesture.

```APIDOC
## Expand Gesture

### Description
An expand is detected when the user has two inputs on the screen and moves one or both away from the other input.

### Method
`new ZingTouch.Expand()`

### Request Example
```javascript
new ZingTouch.Expand()
```

### Response
#### Emits
- **expand** (number) - The distance in pixels between the two inputs.
```

--------------------------------

### Import Binder Class

Source: https://zingchart.github.io/zingtouch/docs/class/src/core/classes/Binder.js~Binder.html

Import the Binder class from the ZingTouch core source files.

```javascript
import Binder from 'zingtouch/src/core/classes/Binder.js'
```

--------------------------------

### Expand Gesture Constructor

Source: https://zingchart.github.io/zingtouch/docs/class/src/gestures/Expand.js~Expand.html

Constructor function for the Expand class. It accepts an options object for configuration.

```javascript
constructor(options: *)
```