rxjsを使用してグローバル変数なしでドラッグオフセットを累積する方法

Question

マウスドラッグを使用してバックグラウンドオフセット機能を実装する必要があります。通常のドラッグ実装と比較すると難しい部分は、各ドラッグ動作によって合計オフセットを累積します。 問題は、私はrxjsの哲学againtあるオフセットの合計を追跡するために、グローバル変数のadvatageを取ったということである

let xOffset = 0 //not able to fit this state into Observable stream 
const drag$ = 
    mousedown$ 
     .switchMap(({ point: mousedown }) => { 
      return mousemove$ 
       .map(({ point: mousemove }) => mousemove[0] - mousedown[0]) 
       .do((deltaX) => { 
        chart.transform({ x: deltaX + xOffset }) 
       }) 
       .takeUntil(mouseup$) 
       .takeLast(1) 
     }) 
     .scan((x, y) => x + y) 
     .do(x => xOffset = x) 

考え出し、どのような方法は、グローバルずにこれを達成するには？

Answer 1

最後に、私は、キーはマウスダウンとのMouseMoveを比較することではありません

const dragBG$ = mousedown$ 
    .switchMapTo(mousemove$ 
     .pairwise() 
     .map(([[x1], [x2]]) => x2 - x1) 
     .takeUntil(mouseup$) 
    ) 
    .scan((x, y) => x + y) 
    .do((x) => { 
     chart.transform({ x }) 
    }) 

ソリューションを考え出しました。そうすることで、価値を累積することはできません。むしろ、2つのマウスのデルタを計算した