diff --git a/web/src/lib/managers/timeline-manager/day-group.svelte.ts b/web/src/lib/managers/timeline-manager/day-group.svelte.ts index 75793f598e003..3f5169d4cafc5 100644 --- a/web/src/lib/managers/timeline-manager/day-group.svelte.ts +++ b/web/src/lib/managers/timeline-manager/day-group.svelte.ts @@ -148,6 +148,7 @@ export class DayGroup { // TODO: lazily get positions instead of loading them all here for (let i = 0; i < this.viewerAssets.length; i++) { this.viewerAssets[i].position = geometry.getPosition(i); + this.viewerAssets[i].updateIntersecting(); } } diff --git a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts index 3c6f2d825644a..d3d9c6578587d 100644 --- a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts +++ b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts @@ -21,6 +21,7 @@ export function updateIntersectionMonthGroup(timelineManager: TimelineManager, m month.actuallyIntersecting = actuallyIntersecting; if (preIntersecting || actuallyIntersecting) { timelineManager.clearDeferredLayout(month); + month.updateAllViewerAssetIntersections(); } } diff --git a/web/src/lib/managers/timeline-manager/month-group.svelte.ts b/web/src/lib/managers/timeline-manager/month-group.svelte.ts index b41deb57854f2..ee7a1efbf95e3 100644 --- a/web/src/lib/managers/timeline-manager/month-group.svelte.ts +++ b/web/src/lib/managers/timeline-manager/month-group.svelte.ts @@ -377,4 +377,11 @@ export class MonthGroup { cancel() { this.loader?.cancel(); } + updateAllViewerAssetIntersections() { + for (const dayGroup of this.dayGroups) { + for (const viewerAsset of dayGroup.viewerAssets) { + viewerAsset.updateIntersecting(); + } + } + } } diff --git a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts index 161cc049f1bab..303e1b1f4e551 100644 --- a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts +++ b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts @@ -7,23 +7,29 @@ import type { TimelineAsset } from './types'; export class ViewerAsset { readonly #group: DayGroup; - intersecting = $derived.by(() => { + intersecting = $state(false); + + updateIntersecting() { if (!this.position) { - return false; + this.intersecting = false; + return; } const store = this.#group.monthGroup.timelineManager; const positionTop = this.#group.absoluteDayGroupTop + this.position.top; - return calculateViewerAssetIntersecting(store, positionTop, this.position.height); - }); + this.intersecting = calculateViewerAssetIntersecting(store, positionTop, this.position.height); + } position: CommonPosition | undefined = $state.raw(); asset: TimelineAsset = $state(); id: string = $derived(this.asset.id); + // asset: TimelineAsset; + // id: string; constructor(group: DayGroup, asset: TimelineAsset) { this.#group = group; this.asset = asset; + // this.id = asset.id; } }