diff --git a/src/assets/javascripts/observables/agent/viewport/_/index.ts b/src/assets/javascripts/observables/agent/viewport/_/index.ts index 767831adf..4688f0a2a 100644 --- a/src/assets/javascripts/observables/agent/viewport/_/index.ts +++ b/src/assets/javascripts/observables/agent/viewport/_/index.ts @@ -21,7 +21,7 @@ */ import { Observable, combineLatest } from "rxjs" -import { map, shareReplay } from "rxjs/operators" +import { distinctUntilKeyChanged, map, shareReplay } from "rxjs/operators" import { Header } from "../../../header" import { @@ -88,12 +88,22 @@ export function watchViewport(): Observable { export function watchViewportAt( el: HTMLElement, { header$, viewport$ }: WatchRelativeOptions ): Observable { - return combineLatest([header$, viewport$]) + const offset$ = viewport$ .pipe( - map(([{ height }, { offset, size }]) => ({ + distinctUntilKeyChanged("size"), + map(() => ({ + x: el.offsetLeft, + y: el.offsetTop + })) + ) + + /* Compute relative viewport, return hot observable */ + return combineLatest([header$, viewport$, offset$]) + .pipe( + map(([{ height }, { offset, size }, { x, y }]) => ({ offset: { - x: offset.x - el.offsetLeft, - y: offset.y - el.offsetTop + height + x: offset.x - x, + y: offset.y - y + height }, size })),