RxJs mousedrag полный обратный вызов

Question

Я играл с RxJs, пытаясь заменить прослушиватели событий мыши на доске на холсте. У меня рисунок отлично работает, но по какой-то причине завершена функция никогда не вызывается.

Это довольно простой и основанный на примере события мыши в документах RxJs. Вот отрывок кода, вы можете увидеть полную версию здесь http://codepen.io/hanloong/pen/YyvqgM?editors=001

point = (start, prev, current) -> 
    start:  {x: start.offsetX, y: start.offsetY} 
    previous: {x: prev.offsetX, y: prev.offsetY} 
    current: {x: current.offsetX, y: current.offsetY} 

    mouseup = Rx.Observable.fromEvent(document, 'mouseup') 
    mousemove = Rx.Observable.fromEvent(document, 'mousemove') 
    mousedown = Rx.Observable.fromEvent(document, 'mousedown') 

    mousedrag = mousedown.flatMap (start) -> 
    mousemove.zip mousemove.skip(1), (prev, current) -> 
     point(start, prev, current) 
    .takeUntil mouseup 

    liveDraw = Rx.Observer.create(
    (pos) -> 
     console.log pos 
     # drawLine stage, shape, pos.previous, pos.current 
    , (err) -> 
     console.log "Error: #{err}" 
    ,() -> 
     # never gets run 
     console.log 'Complete' 
) 

    mousedrag.subscribe liveDraw 

Цель состоит в том, чтобы отправить полный путь к серверу, как только пользователи заканчивает рисунок, который бы идеально произойдет в завершенном обратном вызове. Также можно получить всю коллекцию в этот момент или я должен строить другой массив, когда происходят события?

Answer 1

Проблема в том, что вы подписываетесь на Observable (mouseMove), который никогда не будет завершен. Оператор flatMap проглотит все промежуточные события onCompleted, которые генерируются при поднятии кнопки мыши.

Я предлагаю вам выполнить рисунок как побочный эффект, затем собрать все события в массив и отправить их в конце. Извинения я не использую CoffeeScript так это в ES6:

var mouseup = Rx.Observable.fromEvent(document, 'mouseup'); 
var mousemove = Rx.Observable.fromEvent(document, 'mousemove'); 
var mousedown = Rx.Observable.fromEvent(document, 'mousedown'); 

var mousedrag = mousedown.flatMap(start => { 
        return mousemove 
          //Pair up the events 
          .pairwise() 
          .takeUntil(mouseup) 
          //Draw each event as you receive it 
          .tap(p => drawLine(stage, shape, pos[0], pos[1])) 
          //Gather all the events from this drag 
          .toArray(); 
       }); 

//Subscribe will now receive arrays for each drag that has occured 
mousedrag.subscribe(sendDataToServer, 
        err => `Error: ${err}`); 

Чтобы использовать оператор pairwise вам нужно будет включить файл rx.lite.coincidence.compat.js, а также.