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 event -
x1
: x position of the first event -
y1
: y position of the first event -
x2
: 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.