staltz / xstream

An extremely intuitive, small, and fast functional reactive stream library for JavaScript
http://staltz.github.io/xstream/
MIT License
2.38k stars 137 forks source link

how to make the dragEnd stream? #313

Closed bgfist closed 4 years ago

bgfist commented 4 years ago
const ele = ...;

const drag$ = mousedown$.map(md => mousemove$.startWith(md).endWhen(mouseup$)).flatten();

// How to ? 
const dragEnd$ = drag$.sample(mouseup$);

drag$.subscribe({
  next(e) {
     ele.style.top = e.clientX;
     ele.style.left = e.clientY;
 }
})

dragEnd$.subscribe({
  next(e) {
    if (e.clientX > 500) {
     // reset position
     ele.style.top = 0
     ele.style.left = 0
    }
 }
})

I want the dragEnd stream to deal with some logic when mouseup, is there any sample operator like rxjs ?

bgfist commented 4 years ago

I got some idea:

const drags$ = mousedown$.map(md => {
       const moves$ = mousemove$.startWith(md).endWhen(mouseup$);
       const moveEnd$ = moves.last();

       return [moves$, moveEnd$];
});

const drag$ = drags$.map(drags=> drags[0]).flatten();
const dragEnd$ = drags$.map(drags=> drags[1]).flatten();

...