Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modular mouse and touch handling #8

Open
vorg opened this issue Nov 9, 2016 · 3 comments
Open

Modular mouse and touch handling #8

vorg opened this issue Nov 9, 2016 · 3 comments

Comments

@vorg
Copy link
Member

vorg commented Nov 9, 2016

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
Copy link
Member Author

vorg commented Nov 9, 2016

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
Copy link
Member Author

vorg commented Nov 9, 2016

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
Copy link
Member Author

vorg commented Nov 9, 2016

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 jquery-archive/PEP#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants