Flag first and last events during mouse drag using rxjs - rxjs

Question

I'm a newbie with rxjs but I want to create a drag and drop handler with it and I have the following function:
function createDraggable$(element) {
const mouseDown$ = fromEvent(element, 'mousedown');
const mouseMove$ = fromEvent(window, 'mousemove');
const mouseUp$ = fromEvent(window, 'mouseup');
return mouseDown$.pipe(
switchMap((start) => {
const {
offsetLeft: initialLeft,
offsetTop: initialTop,
} = element;
return mouseMove$.pipe(
map((move) => {
const deltaX = move.pageX - start.pageX;
const deltaY = move.pageY - start.pageY;
return {
isFirst: false,
isLast: false,
start,
move,
deltaX,
deltaY,
initialLeft,
initialTop,
left: initialLeft + deltaX,
top: initialTop + deltaY,
};
}),
takeUntil(mouseUp$),
);
}),
);
}
createDraggable$(el).subscribe((drag) => {
if (drag.isFirst) {
dragstart.emit();
} else if (drag.isLast) {
dragend.emit();
} else {
drag.emit();
}
if (isHorizontal) {
el.style.top = `${drag.top}px`;
} else {
el.style.left = `${drag.left}px`;
}
});
As you can see the isFirst and isLast values are constant, but I would like to change them to true accordingly. The first drag event is when the first mousemove fires and the last is the one when mouseup fires.
I've tried using combineLatest with two extra streams:
const first$ = mouseMove$.pipe(first());
const last$ = mouseMove$.pipe(takeUntil(mouseUp$), last());
return combineLatest([first$, mouseMove$, last$]).pipe(
switchMap(([_first, _move, _last]) => {
...
But to no avail, since combineLatest waits on last$ to produce at least one value, which it won't...
Any help in the right direction would be greatly appreciated.

Answer 1

Probably you can enforce an emission on $last stream
mouseMove$.pipe(takeUntil(mouseUp$), last(),startWith(null))
and in switchMap you can try to handle the null case and do nothing by returning empty
switchMap(([_first, _move, _last]) => { if(!last) return empty() ...

Answer 2

As clunky as it is this is my solution:
function createDraggable$(element) {
const mouseDown$ = fromEvent(element, 'mousedown');
const mouseMove$ = fromEvent(window, 'mousemove');
const mouseUp$ = fromEvent(window, 'mouseup');
return mouseDown$.pipe(
switchMap((start) => {
const {
offsetLeft: initialLeft,
offsetTop: initialTop,
} = element;
const drag$ = mouseMove$.pipe(takeUntil(mouseUp$));
return combineLatest([
merge(of(true), drag$.pipe(take(2), last(), switchMapTo(of(false)))),
merge(of(false), drag$.pipe(last(), switchMapTo(of(true)))),
drag$,
]).pipe(
map(([isFirst, isLast, move]) => {
const deltaX = move.pageX - start.pageX;
const deltaY = move.pageY - start.pageY;
return {
isFirst,
isLast,
start,
move,
deltaX,
deltaY,
initialLeft,
initialTop,
left: initialLeft + deltaX,
top: initialTop + deltaY,
};
}),
);
}),
);
}
It is not ideal, since the isFirst and isLast events double up:
1. isFirst: true, isLast: false, move.deltaX: -1
2. isFirst: false isLast: false, move.deltaX: -1 // deltaX is again -1
3. isFirst: false isLast: false, move.deltaX: -2
4. isFirst: false isLast: false, move.deltaX: -3
5. isFirst: false isLast: false, move.deltaX: -4
6. isFirst: false isLast: true, move.deltaX: -4 // deltaX is again -4
Ideally events 1 and 2 as well as 5 and 6 will be both combined, but I really don't know rxjs to properly do it.