API Docs

Class: Interaction

PD. Interaction

new Interaction()

Provides access to a global multi-touch monitoring variables and real-time active touch data.

Author:
  • drajmarsh
Example
addInteraction() {

    const _self = this;

    let g_snapValue = 25.0;
    let g_targetValue = 0.0;
    let g_dragStartValue = 0.0;
    let g_dragValue = 0.0;

    function onPress(event) {
         if (event.button == 0) { // Left mouse, pen or single touch.
             g_dragStartValue = g_targetValue;
             g_dragValue = g_dragStartValue;
         }
    };

    function onDrag(event) {
        if (event.button == 0) {

            let snap = g_snapValue;

            if (event.shiftKey) {
                snap *= 10.0;
            }
            else if (event.ctrlKey || event.metaKey) {
                snap += 0.1;
            }

            g_targetValue = PD.Utils.snapTo(g_dragValue += event.dragY, snap);
            if (!PD.Utils.closeTo(g_targetValue, g_dragStartValue)) {
                svgElem.style.cursor = 'move';
                if (_self.callbackTargetChanged) {
                    _self.callbackTargetChanged(g_targetValue);
                }
            }
        }
    };

    function onRelease(event) {
       if (event.button == 0) {
             svgElem.style.cursor = 'default';
        }
    };

    function onScroll(event) {
        if (event.delta) {

            let snap = g_snapValue;

            if (event.shiftKey) {
                 snap *= 10.0;
            }
            else if (event.ctrlKey || event.metaKey) {
                snap *= 0.1;
            }

            g_targetValue = PD.Utils.snapTo(g_targetValue + (PD.Utils.sign(event.delta) * snap), snap);
            if (_self.callbackTargetChanged) {
                _self.callbackTargetChanged(g_targetValue);
            }
        }
    };

    PD.Interaction.makeInteractive(_self, {
         onpress: onPress,
         ondrag: onDrag,
         onrelease: onRelease,
         onscroll: onScroll
    });

};

Members

:Array

activeTouchList <static>

A dynamic list of all active touch points.

Type
  • Array

Methods

createEvent(event, element) <static>

Converts a system MouseEvent, TouchEvent or PointerEvent into a more generic custom InteractionEvent.

InteractionEvents contain the following properties:

PROPERTY TYPE DESCRIPTION
event object The original MouseEvent, TouchEvent or PointerEvent.
isTouchEvent boolean A flag for touch related events rather than pen or mouse.
touchCount number The number of currently active touch events (0 to 10).
timeStamp DOMHighResTimeStamp
or DOMTimeStamp		 The system time when this event occurred.
button number The currently active pointer button or touch action (0: Left, 1: Middle, 2: Right, 3: Aux1, 4 Aux2, 5 Eraser).
x number The X-axis position relative to the left side of the element.
y number The Y-axis position relative to the top side of the element.
scale number The relative scale change due to a two-finger pinch since the last event.
rotation number The relative 2D rotation change due to a two-finger twist since the last event.
dragX number The movement in the X-axis since the last pointer event, averaged over all touches.
dragY number The movement in the Y-axis since the last pointer event, averaged over all touches.
delta number The direction and degree of change due to scroll, mousewheel and keydown events.
ctrlKey boolean The pressed state of the Control key when the event occurred.
shiftKey boolean The pressed state of the Shift key when the event occurred.
metaKey boolean The pressed state of the OSX Meta key when the event occurred.
altKey boolean The pressed state of the Alt key when the event occurred.
Parameters:
Name Type Description
event object

The MouseEvent, TouchEvent or PointerEvent to process.
element object

The DOMElement for relative event positions.
Returns:

Returns an InteractionEvent object.

Type
object

hasMoved( [threshold]) <static>

Returns true if the last or current drag event moved more than the given threshold.

Parameters:
Name Type Argument Description
threshold number <optional>

The number of pixels of tolerance to allow, defaults to (3 + (3 * window.devicePixelRatio)).
Returns:

Returns true if has moved more than threshold in either axis.

Type
boolean

makeInteractive(element, options) <static>

Wraps an element in event listeners to create a simplified pointer/touch API.

Each callback is invoked with an event argument that is an object created with PD.Interaction.createEvent. This generates a higher-level object which abstracts the various MouseEvent/PointerEvent/TouchEvent objects from different systems into one unified interaction event.

Parameters:
Name Type Description
element object

The DOM element to be made interactive.
options object

A configuration object containing callback methods.
Properties of options:
Name Type Argument Description
onmove function <optional>

Callback invoked when a pointer/pen is moved while not pressed.
onpress function <optional>

Callback invoked when a pointer, pen or finger is first pressed.
ondrag function <optional>

Callback invoked when a pointer, pen or finger is moved while pressed.
onrelease function <optional>

Callback invoked when a pointer, pen or finger is released.
onscroll function <optional>

Callback invoked when a mouse wheel, scroller or arrow key is used.
ondoubletap function <optional>

Callback invoked when a pointer, pen or finger is double tapped quickly.
onlongclick function <optional>

Callback invoked when a pointer, pen or finger is held static for 1.5 seconds then released.
onlongpress function <optional>

Callback invoked when a pointer, pen or finger is held static for 1.5 seconds.
onkeydown function <optional>

Callback invoked when a keyboard key is pressed.
allowDefaultOnTouch boolean <optional>

When true, preventDefault() is not called on touch events.
Returns:

Returns the wrapper object so you can call dispose() to remove interaction wrapper.

Type
object