API Docs

Class: Interactive

PD. Interactive

new Interactive(elem, handlers)

Adds mouse/pen/touch listeners to the given HTML element to make it interactive.

This is used by some charts and graphs to respond to user interaction.

Parameters:
Name Type Description
elem HTMLElement

The HTML element in the document to make interactive.
handlers object

A configuration object with onPointerDown(), onPointerDrag() and onPointerUp() methods.
Returns:

Returns a simple object with a 'clear()' method to remove the event listeners.

Type
object
Example
///
/// Handles pointer button press/touch events within the canvas.
///
/// @param {boolean} primary Whether or not the primary button was pressed.
/// @param {number}  canvasX The X-axis pixel position of the event in the view canvas.
/// @param {number}  canvasY The Y-axis pixel position of the event in the view canvas.
/// @param {object}  event   The HTML/Custom event that invoked this action.
///
processPointerDown(primary, canvasX, canvasY, event) {
    /// TODO: Handle generic pointer down event.
};

///
/// Acts on pointer drag events when pressed within the canvas.
///
/// @param {number} canvasX The X-axis pixel position of the event in the view canvas.
/// @param {number} canvasY The Y-axis pixel position of the event in the view canvas.
/// @param {object} event The HTML/Custom event that invoked this action.
///
processPointerDrag(canvasX, canvasY, event) {
    /// TODO: Handle generic pointer drag event.
};

///
/// Acts on pointer release events within the canvas.
///
/// @param {boolean} primary Whether or not the primary button was released.
/// @param {object}  event   The HTML/Custom event that invoked this action.
///
processPointerUp(primary, event) {
    /// TODO: Handle generic pointer up event.
};

/// Add interactive event listeners.
const handlers = PD.Interactive(canvas, {
    onPointerDown: processPointerDown,
    onPointerDrag: processPointerDrag,
    onPointerUp: processPointerUp
});

/// ....

/// Remove when done.
handlers.clear();