Class PointerDragHelper

A helper class to handle pointer events and dispatch drag events: drag, dragStart and dragEnd with NDC coordinates and time.

To use, create an object of the class, set element with the HTML element(like canvas) and add event listeners to drag events.

Example

const pointerDragHelper = new PointerDragHelper()
pointerDragHelper.element = canvas
pointerDragHelper.addEventListener('dragStart', (e) => {
console.log('dragStart', e.pointer)
// {x: -0.5, y: 0.5, time: 123456789}
// x and y are NDC coordinates, time is the time when the event is fired.
// x and y are in the range of [-1, 1].
// x is left to right, y is bottom to top.
// time is in milliseconds.
})
pointerDragHelper.addEventListener('drag', (e) => {
console.log('drag', e.pointer)
// {x: -0.5, y: 0.5, time: 123456789}
})
pointerDragHelper.addEventListener('dragEnd', (e) => {
console.log('dragEnd', e.pointer)
// {x: -0.5, y: 0.5, time: 123456789}
})

Hierarchy (view full)

Implements

Constructors

Accessors

  • get element(): HTMLElement
  • Returns HTMLElement

  • set element(value): void
  • Parameters

    • value: HTMLElement

    Returns void

Methods

  • Adds a listener to an event type.

    Parameters

    • type: "drag" | "dragStart" | "dragEnd"

      The type of event to listen to.

    • listener: ((event) => void)

      The function that gets called when the event is fired.

        • (event): void
        • Parameters

          • event: IEvent<"drag" | "dragStart" | "dragEnd">

          Returns void

    Returns void

  • Checks if listener is added to an event type.

    Parameters

    • type: "drag" | "dragStart" | "dragEnd"

      The type of event to listen to.

    • listener: ((event) => void)

      The function that gets called when the event is fired.

        • (event): void
        • Parameters

          • event: IEvent<"drag" | "dragStart" | "dragEnd">

          Returns void

    Returns boolean

  • Removes a listener from an event type.

    Parameters

    • type: "drag" | "dragStart" | "dragEnd"

      The type of the listener that gets removed.

    • listener: ((event) => void)

      The listener function that gets removed.

        • (event): void
        • Parameters

          • event: IEvent<"drag" | "dragStart" | "dragEnd">

          Returns void

    Returns void