spawn3dStore.ts

import { SvelteMap } from 'svelte/reactivity'
import type { Snippet } from 'svelte'

export type LockMode = 'element' | 'camera' | 'none'

export type Spawn3DItem = {
	// DOM Metrics (Read-only for the renderer)
	left: number
	top: number
	width: number
	height: number

	// State Flags
	visible: boolean // Is the DOM element intersecting the viewport?

	// User Config
	lockAt: LockMode
	distance: number
	absoluteSizing: boolean
	visibleOverride: boolean // Manual visibility control
	autoHide: boolean // Should it hide when DOM is off-screen?

	// Content
	snippet?: Snippet<[Spawn3DItem]>
}

type MeasureFn = () => { left: number; top: number; width: number; height: number } | undefined

export class Spawn3DManager {
	items = new SvelteMap<string, Spawn3DItem>()

	// --- Batching Scheduler ---
	private measureFns = new Map<string, MeasureFn>()
	private dirtyIds = new Set<string>()
	private raf = 0

	register(id: string, data: Spawn3DItem) {
		this.items.set(id, data)
	}

	setMeasureFn(id: string, measure: MeasureFn) {
		this.measureFns.set(id, measure)
	}

	unregister(id: string) {
		this.items.delete(id)
		this.measureFns.delete(id)
		this.dirtyIds.delete(id)
		if (this.raf && this.dirtyIds.size === 0) {
			cancelAnimationFrame(this.raf)
			this.raf = 0
		}
	}

	update(id: string, updates: Partial<Spawn3DItem>) {
		if (this.items.has(id)) {
			const current = this.items.get(id)!
			this.items.set(id, { ...current, ...updates })
		}
	}

	// Schedule a measurement for the next frame
	markDirty(id: string) {
		if (!this.items.has(id)) return
		this.dirtyIds.add(id)

		if (this.raf) return

		this.raf = requestAnimationFrame(() => {
			this.raf = 0
			this.flushUpdates()
		})
	}

	// The optimization: Separate READS from WRITES
	private flushUpdates() {
		const ids = Array.from(this.dirtyIds)
		this.dirtyIds.clear()

		const measurements: { id: string; rect: ReturnType<MeasureFn> }[] = []

		// Phase 1: READ (Fast, no reflows if layout is clean)
		for (const id of ids) {
			const fn = this.measureFns.get(id)
			if (fn) measurements.push({ id, rect: fn() })
		}

		// Phase 2: WRITE (Triggers Reactivity)
		for (const { id, rect } of measurements) {
			if (rect) {
				this.update(id, rect)
			}
		}
	}
}

export const spawn3dStore = new Spawn3DManager()