node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »



A wrapper module that provides a drag-stream fallback for pointer-lock.

Handles the requestFullScreen pointer lock requirement of firefox.

var interact = require('interact')
  .on('attain', function(stream) {
    // stream attained! it'll emit "move" 
    // events with {dx, dy, dt} attributes. 
    // it also has an `initial` member with `{x, y, t}` 
    // marking the start position and start time. 
    // it's readable, and it'll clean up after itself.  
  .on('release', function() {
    // stream has been released -- either the user 
    // left pointer-lock, or stopped dragging. 
  .on('opt-out', function() {
    // user opted out of pointer lock, 
    // and will be using drag-stream instead. 
    // you can use this event to record a preference 
    // in localStorage. 


interact = require('interact')

interact(element[, skipLock=false]) -> ee

sets a click listener on element that requests pointerLock (if skipLock is false and pointerlock is available) on click. if the lock is declined (politely!) it'll switch to drag-stream-style events.


forwards these commands to the internal handler (whether that be pointer-lock or drag-stream) if a corresponding method exists.

interact.pointerAvailable() -> boolean

returns whether or not pointer lock is available -- forwards from require('pointer-lock').available().

interact.fullscreenAvailable() -> boolean

returns whether or not fullscreen is available -- forwards from require('fullscreen').available().

stream.initial -> {x: int, y: int, t: timestamp int}

the initial position for streams.


ee.on('attain', function(stream) { })

a stream of movement data is ready for consumption.

stream is a readable stream that closes appropriately, so you don't have to clean up after it.

stream.initial has {x: int, y: int, t: timestamp int} members detailing the initial position and time of the stream.

stream's data events are in the form of {dx: int, dy: int, dt: timedelta int}.

when in drag-stream mode, these'll be emitted every time there's a mousedown on the target element.

in pointer-lock mode, it'll be emitted every time the user enters pointer lock -- that is to say, a lot less often.


the last stream has been released. you shouldn't really have to do anything here -- the stream will clean up after itself (it emits close and end events).


emitted when the requestPointerLock is declined by the user. use this to store a preference to send into interact later down the line!

interact(el, localStorage.getItem('no-pointer-lock'))
  .on('opt-out', function() {
    localStorage.setItem('no-pointer-lock', true)

stream.on('data', function(datum) { })