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

constructor

Accessors

callbacks container isDestroyed isStarted move name pointersMap prefix props

Methods

_addTempClassName _cn _destroy _getMutable _getStatic _handleProps destroy on onDestroy updateProps

Constructors

constructor

  • new Pointers(
        props?: IPointersStaticProps & IPointersMutableProps & Partial<
            {
                onDestroy: (data: undefined, ctx: Pointers) => void;
                onEnd: (data: undefined, ctx: Pointers) => void;
                onMove: (data: IPointersMove, ctx: Pointers) => void;
                onPointerdown: (
                    data: { event: PointerEvent; pointer: IPointersItem },
                    ctx: Pointers,
                ) => void;
                onPointermove: (
                    data: { event: PointerEvent; pointer: IPointersItem },
                    ctx: Pointers,
                ) => void;
                onPointerup: (data: { pointer: IPointersItem }, ctx: Pointers) => void;
                onProps: (data: Partial, ctx: Pointers) => void;
                onStart: (data: undefined, ctx: Pointers) => void;
            },
        >,
        onCallbacks?: Partial<
            {
                onDestroy: (data: undefined, ctx: Pointers) => void;
                onEnd: (data: undefined, ctx: Pointers) => void;
                onMove: (data: IPointersMove, ctx: Pointers) => void;
                onPointerdown: (
                    data: { event: PointerEvent; pointer: IPointersItem },
                    ctx: Pointers,
                ) => void;
                onPointermove: (
                    data: { event: PointerEvent; pointer: IPointersItem },
                    ctx: Pointers,
                ) => void;
                onPointerup: (data: { pointer: IPointersItem }, ctx: Pointers) => void;
                onProps: (data: Partial, ctx: Pointers) => void;
                onStart: (data: undefined, ctx: Pointers) => void;
            },
        >,
    ): Pointers

    Parameters

    • Optionalprops: IPointersStaticProps & IPointersMutableProps & Partial<
          {
              onDestroy: (data: undefined, ctx: Pointers) => void;
              onEnd: (data: undefined, ctx: Pointers) => void;
              onMove: (data: IPointersMove, ctx: Pointers) => void;
              onPointerdown: (
                  data: { event: PointerEvent; pointer: IPointersItem },
                  ctx: Pointers,
              ) => void;
              onPointermove: (
                  data: { event: PointerEvent; pointer: IPointersItem },
                  ctx: Pointers,
              ) => void;
              onPointerup: (data: { pointer: IPointersItem }, ctx: Pointers) => void;
              onProps: (data: Partial, ctx: Pointers) => void;
              onStart: (data: undefined, ctx: Pointers) => void;
          },
      >
    • OptionalonCallbacks: Partial<
          {
              onDestroy: (data: undefined, ctx: Pointers) => void;
              onEnd: (data: undefined, ctx: Pointers) => void;
              onMove: (data: IPointersMove, ctx: Pointers) => void;
              onPointerdown: (
                  data: { event: PointerEvent; pointer: IPointersItem },
                  ctx: Pointers,
              ) => void;
              onPointermove: (
                  data: { event: PointerEvent; pointer: IPointersItem },
                  ctx: Pointers,
              ) => void;
              onPointerup: (data: { pointer: IPointersItem }, ctx: Pointers) => void;
              onProps: (data: Partial, ctx: Pointers) => void;
              onStart: (data: undefined, ctx: Pointers) => void;
          },
      >

    Returns Pointers

Accessors

callbacks

container

isDestroyed

  • get isDestroyed(): boolean

    Checks if the module has been destroyed.

    Returns boolean

isStarted

move

name

  • get name(): string

    The name of the module, derived from the class name

    Returns string

pointersMap

prefix

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

props

Methods

Protected_addTempClassName

  • _addTempClassName(element: Element, className: string): void

    Adds a class name on an element, and keeps track of it for removal when the module is destroyed.

    Parameters

    • element: Element

      The target DOM element.

    • className: string

      The class name to toggle.

    Returns void

Protected_cn

  • _cn(...classNames: string[]): string

    Helper function to generate classnames with the module's prefix.

    Parameters

    • ...classNames: string[]

      The class names to generate.

    Returns string

    A string of class names with the module's prefix applied.

Protected_destroy

_getMutable

  • _getMutable(): { __mutableProp: true; enabled: boolean }

    Returns the default mutable properties.

    Returns { __mutableProp: true; enabled: boolean }

    • __mutableProp: true
    • enabled: boolean

      Enables or disables pointer events.

      Default

      true

_getStatic

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

    Returns the default static properties.

    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.

      Default

      [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

      Disable user selection on drag.

      Default

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

      Maximum number of pointers that can be tracked simultaneously.

      Default

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

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

      Default

      1
    • relative: boolean

      Calculate coordinates relative to the container.

      Default

      false

Protected_handleProps

destroy

on

onDestroy

  • onDestroy(action: () => void): void

    Adds a callback on the module's destruction.

    Parameters

    • action: () => void

      The function to execute during destruction.

    Returns void

updateProps

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods