staltz / rxmarbles

Interactive diagrams of Rx Observables
http://www.rxmarbles.com
BSD 3-Clause "New" or "Revised" License
4.21k stars 537 forks source link

Touch support #39

Closed colltoaction closed 3 years ago

colltoaction commented 8 years ago

Hi!

I was trying to drag the diagram handles around with my touchscreen and it didn't work. From what I've done in a personal project, I think it should be pretty easy to add. This is what I've done to combine touch and mouse events (types are TypeScript, you can ignore them):

// handle is the object we're dragging
let mouseDown: Observable<TouchEvent | MouseEvent> = Observable.merge(
    Observable.fromEvent(handle, "touchstart"),
    Observable.fromEvent(handle, "mousedown"));

let mouseUp: Observable<Touch | MouseEvent> = Observable.merge(
    Observable.fromEvent(handle, "touchend").map((e: TouchEvent) => e.changedTouches[0]),
    Observable.fromEvent(document, "mouseup"));

let mouseMove: Observable<Touch | MouseEvent> = Observable.merge(
    Observable.fromEvent(handle, "touchmove").map((e: TouchEvent) => e.changedTouches[0]),
    Observable.fromEvent(document, "mousemove"));

Both Touch and MouseEvent have the pageX property that is required here https://github.com/staltz/rxmarbles/blob/master/src/components/diagram/diagram-intent.js#L30.

Thanks for implementing this great site!