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.

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 Summary)

Implements

Constructors

Accessors

  • get element(): undefined | HTMLElement
  • Returns undefined | HTMLElement

  • set element(value: undefined | HTMLElement): void
  • Parameters

    • value: undefined | 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: IEvent<"drag" | "dragStart" | "dragEnd">) => void

      The function that gets called when the event is fired.

    Returns void

  • Fire an event type.

    Parameters

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

      A simple event interface with typed event types.

      • [attachment: string]: any
      • Optionaltarget?: any
      • type: T

    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: IEvent<"drag" | "dragStart" | "dragEnd">) => void

      The function that gets called when the event is fired.

    Returns boolean

  • Removes a listener from an event type.

    Parameters

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

      The type of the listener that gets removed.

    • listener: (event: IEvent<"drag" | "dragStart" | "dragEnd">) => void

      The listener function that gets removed.

    Returns void