Modular mouse and touch handling

[vorg]

Currently we depend on pex-sys/Window.addEventListener or manually calling gui.onMouseMove callbacks. It would be good to move to shared library between pex-sys,pex-gui and pex-cam.

Requirements:

• works with mouse and touch (ideally using PointerEvents)
• works in plask and borwser (can be via pex-gl.canvas)
• has clear prioritisation (e.g. gui/GUI before cam/Arcball)
• can cancel events or mark as handled (so Arcball doesn't move when i move the slider)
• can filter events / record
• allows implementing gestures
• can map/filter/transform events (e.g. limit mouse movement to a viewport)

Ideal scenario:

• create stream of events for a canvas
• pass stream to a Logger
• pass stream to GUI
• pass stream to Arcball
• on canvas.mousedown new event is added to the stream
• Logger responds to a change, console.logs the event and leaves it in the stream
• GUI responds to the change, if click is inside a slider the event is consumed, otherwise it's passed to the Arcball

Questions:

• am i reinventing the wheel and try to compensate for lack of event bubbling that I would have for free when using HTML based GUI?

[vorg]

Some of the stack.gl modules that DON'T fulfil the requirements

http://stack.gl/packages/#mattdesl/touch-position

var position = require('touch-position')();

//inside your render loop... 
function render () {
  drawSprite(position[0], position[1]);
}

http://stack.gl/packages/#Jam3/touches

const mouseDown = (ev, position) => { }

//get mouse/touch events on window 
require('touches')()
  .on('start', mouseDown)   //-> mousedown / touchstart 
  .on('move', mouseMove)    //-> mousemove / touchmove 
  .on('end', mouseEnd)      //-> mouseup   / touchend 

[vorg]

Approaches to events

Flyd Streams https://www.npmjs.com/package/flyd https://www.npmjs.com/package/pointer-stream , github (uses {x, y} objects) https://github.com/raine/flyd-keyboard https://github.com/paldepind/functional-frontend-architecture http://requirebin.com/?gist=bd641eadffff6ba6b8a6dca1835f3c2f (me playing with flyd)

Pull Streams? https://github.com/pull-stream/pull-stream (doesn't seem to be very suitable for events, more for data processing)

Channels? https://www.npmjs.com/package/js-csp (requires generators*)

[vorg]

Pointer Events (unifies mouse + touch) https://www.npmjs.com/package/pepjs (slow development, seems to be in maintenance mode, doesn't stop the event after releasing mouse out of window https://github.com/jquery/PEP/pull/297)

Possible events

pointermove: a pointer moves, similar to touchmove or mousemove.
pointerdown: a pointer is activated, or a device button held.
pointerup: a pointer is deactivated, or a device button released.
pointerover: a pointer has moved onto an element.
pointerout: a pointer is no longer on an element it once was.
pointerenter: a pointer enters the bounding box of an element.
pointerleave: a pointer leaves the bounding box of an element.
pointercancel: a pointer will no longer generate events.