Class Pointers

Manages pointer events, including tracking multiple pointers, and emitting callbacks for pointer interactions.

For proper functionality, ensure the container has an appropriate touch-action property.

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get container(): HTMLElement | SVGElement

    The element that listens for pointer events.

    Returns HTMLElement | SVGElement

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get isStarted(): boolean

    Whether the required number of pointers has been reached (start fired).

    Returns boolean

  • get move(): null | IPointersMove

    Latest aggregated gesture snapshot from the most recent move update, or null before the first move after start / after end.

    Returns null | IPointersMove

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get pointersMap(): Map<number, IPointersItem>

    Active pointers keyed by native pointerId.

    Returns Map<number, IPointersItem>

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

Methods

  • Adds prefixed classes to an element and removes them on destroy.

    Skips classes that are already present on the element.

    Parameters

    • element: Element

      Target DOM element.

    • ...classes: string[]

      Unprefixed class name segments.

    Returns void

  • Builds one or more prefixed class names.

    Parameters

    • ...classes: string[]

      Unprefixed class name segments.

    Returns string

    Space-separated prefixed class string.

  • Internal method to handle the destruction of the module. It removes all callbacks, destroys properties, and cleans up event listeners and class names.

    Returns void

  • Set default mutable props

    Returns { __mutableProp: true; enabled: boolean }

    • __mutableProp: true
    • enabled: boolean

      Enables or disables pointer events.

      true
      
  • Get default static props

    Returns {
        __staticProp: true;
        buttons: number[] | (type: TPointersType) => number[];
        container: HTMLElement | SVGElement;
        disableUserSelect: boolean;
        maxPointers: number | (type: TPointersType) => number;
        minPointers: number | (type: TPointersType) => number;
        relative: boolean;
    }

    • __staticProp: true
    • buttons: number[] | (type: TPointersType) => number[]

      Determines which mouse buttons trigger events.

      • 0: Main button pressed, usually the left button or the un-initialized state
      • 1: Auxiliary button pressed, usually the wheel button or the middle button (if present)
      • 2: Secondary button pressed, usually the right button
      • 3: Fourth button, typically the Browser Back button
      • 4: Fifth button, typically the Browser Forward button

      See MouseEvent.button.

      [0]
      
    • container: HTMLElement | SVGElement

      The element that listens for pointer events.

      Ensure the element has the appropriate touch-action property to prevent conflicts with browser gestures.

    • disableUserSelect: boolean

      Prevent text selection during a mouse gesture.

      true
      
    • maxPointers: number | (type: TPointersType) => number

      Maximum number of pointers that can be tracked simultaneously.

      5
      
    • minPointers: number | (type: TPointersType) => number

      Minimum number of active pointers required to trigger the "start" callback.

      1
      
    • relative: boolean

      Calculate coordinates relative to the container.

      false
      
  • Destroys the instance and runs all registered cleanup actions.

    Safe to call multiple times; subsequent calls are ignored.

    Execution order:

    1. _destroy
    2. all onDestroy callbacks, in registration order
    3. isDestroyed is set to true

    Returns void

  • Registers a function to run when the instance is destroyed.

    If the instance is already destroyed, action runs immediately.

    Parameters

    • action: () => void

      Cleanup function (for example remove listeners or DOM classes).

    Returns void