distinguish click and drag with rxjs6

by hivesbee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>
<div id="sample" />

CSS

#sample {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: #00a1e9;
}

Babel + JSX

const { fromEvent, merge, of } = rxjs;
const { delay, filter, first, share, switchMap } = rxjs.operators;


const el = document.getElementById('sample')

const source = fromEvent(el, 'mousedown').pipe(
	switchMap((e) =>{
    // 200ms 遅延した mousedown イベント または
    // mouseup イベントの
    // どちらか早く発火した方を次へ流す
    return merge(
      of(e).pipe(delay(200)),
      fromEvent(el, 'mouseup')
    ).pipe(first())
  }),
  share()
)

// e.type でクリックかドラッグか識別する
const click = source.pipe(
  filter((e) => e.type === 'mouseup')
).subscribe((e) => {
  alert('click！')
})

const drag = source.pipe(
  filter((e) => e.type !== 'mouseup')
).subscribe((e) => {
  alert('drag！')
})