normalized-interaction-events v2.0.1
normalized-interaction-events
Normalized events for desktop and mobile interactions
Introduction
This module tells you in a consistent manner about the geometry of user interactions, which is perhaps what you really wanted to know when you set out to write a nice graphical interface. All positions are normlized to the inerval [-1, 1]
, where the left bottom of the element is [-1, -1]
and the top right is [1, 1]
.
Mouse buttons and mods are output in the style of mouse-change.
Example
var normalizedInteractionEvents = require('normalized-interaction-events');
normalizedInteractionsEvents({
element: myel
}).on('wheel', function (event) {
console.log(event);
});
// =>
// {
// buttons: 0,
// mods: {
// shift: false,
// alt: false,
// control: false,
// meta: false
// },
// x0: -0.0129,
// y0: -0.923,
// x1: -0.0129,
// y1: -0.923,
// x2: null,
// y2: null,
// x: -0.129,
// y: -0.923,
// dx: -0.0011,
// dy: -0.0038,
// dz: 0,
// zoomx: 1,
// zoomy: 1,
// theta: 0,
// dtheta: 0,
// originalEvent: MouseEvent {isTrusted: true, screenX: 638, …}
// }
Usage
require('normalized-interaction-events')([element])
Creates an event-emitter to which you may subscribe. element
defaults to window
. Event emitter has the following additional methods:
.disable()
.enable()
Enable or disable the emitter by attaching/detaching event listeners. Enabled by default.
Events
The emitter emits the following events:
wheel
mousedown
mousemove
mouseup
touchstart
touchmove
touchend
pinchstart
pinchmove
pinchend
The returned event has the following fields:
buttons
: mouse buttons pressed, in the return format of mouse-change.mods
: modifier keys presed, in the return format of mouse-change.x
: current x position. For wheel reflects current mouse position. For pinches, reflects average x position of touches.y
: current y position.x0
: x position of the corresponding start event (e.g. for a pinchmove event reflects the location of pinchstart)y0
: y position of the corresponding start eventx1
: x position of the first eventy1
: y position of the first eventx2
: x position of the second event.null
for mouse or wheel events of when only one touch is occuring.y2
: y position of the second event.null
for mouse or wheel events of when only one touch is occuring.active
: Number of active touches.0
for passive move events.1
for dragging, wheel, and touch events,2
for pinch events. Better than using the mouse depressed state for detecting when to assume a drag since you want to be sure that the drag originated within the window.dx
: change in x position from previous event. For wheel event returns wheel event deltaX.dy
: change in y position. For wheel event returns wheel event deltaY.dz
: change in z position. For wheel event returns wheel event deltaY. Is zero except for wheel events (where it's still almost certainly zero).zoomx
: horizontal zoom factor relative to previous event.1
reflects no change. For pinch events only. (Interpreting wheel events as a zoom is left to usage.)zoomy
: vertical zoom factor relative to previous event.1
reflects no change. For pinch events only.theta
: angle of the second touch relative to the first. Nonzero for pinch events only. View aspect ratio is taken into account when computing.dtheta
: change in angle from previous event.originalEvent
: A reference to the original event. Note thatpreventDefault
is not called by default.
License
© 2018 Ricky Reusser. MIT License. Touch handling in this code inherits from touch-pinch. See LICENSE.md for more details.