@neta-art/cohub 12.1.0 → 12.2.0

package/dist/board/stage/scene.js

@@ -1,15 +1,16 @@
 import { parseBoardItem } from "../../protocol/dist/board-model.js";
 import { drawPointsBounds } from "../../protocol/dist/board-layout.js";
+import { itemBounds, rectsIntersect } from "../model/geometry.js";
+import { DEFAULT_BOARD_LOD, boardCardDetailed } from "../render/lod.js";
 import { textZoomBucket } from "../render/text-resolution.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
-import { Graphics } from "pixi.js";
+import { Graphics, Text } from "pixi.js";
 //#region src/board/stage/scene.ts
-const FAR_LAYER_ENTER = 450;
-const FAR_LAYER_EXIT = 350;
-const FAR_PASS_BATCH = 240;
-const FAR_LIVE_LIMIT = 64;
+const FAR_CHUNK = 256;
+const FAR_PAINT_BUDGET = 2400;
+const MATERIALIZE_BATCH = 48;
+const LOD_ZOOM_STEPS = 8;
 const RESOLUTION_BATCH = 32;
-const Z_FAR_LAYER = -1;
 const Z_LIFTED = 1e9;
 const Z_LIVE_STROKE = Number.MAX_SAFE_INTEGER - 1;
 const Z_OVERLAY = Number.MAX_SAFE_INTEGER;
@@ -24,6 +25,9 @@ function idSetSignature(ids) {
 	}
 	return hash;
 }
+function sameItems(a, b) {
+	return a.length === b.length && a.every((item, index) => item === b[index]);
+}
 function createBoardScene(options) {
 	const { world, overlay, getRenderer } = options;
 	world.sortableChildren = true;
@@ -36,8 +40,7 @@ function createBoardScene(options) {
 	const heldKeys = /* @__PURE__ */ new Map();
 	const holders = /* @__PURE__ */ new Map();
 	let orderById = /* @__PURE__ */ new Map();
-	let farSig = null;
-	let farActive = false;
+	let idsByOrder = [];
 	let lastStructureVersion = -1;
 	let lastZoom = NaN;
 	let lastResolution = "";
@@ -105,6 +108,11 @@ function createBoardScene(options) {
 			const host = hostFor(entry.item, scene);
 			if (entry.container.parent !== host) host.addChild(entry.container);
 		}
+		for (const plate of plates.values()) {
+			const first = plate.items[0];
+			const host = first && hostFor(first, scene);
+			if (host && plate.graphics.parent !== host) host.addChild(plate.graphics);
+		}
 		for (const [id, entry] of clips) {
 			const frame = scene.get(id);
 			if (!frame || !isClippingFrame(frame) || entry.group.children.length <= 1) {
@@ -121,6 +129,7 @@ function createBoardScene(options) {
 		const pooled = takeFromPool(renderer.id);
 		const container = pooled ?? renderer.create(item, context);
 		container.visible = true;
+		container.culled = false;
 		if (pooled) renderer.update(container, item, context);
 		container.alpha = scene.opacity(item.id);
 		hostFor(item, scene).addChild(container);
@@ -141,79 +150,173 @@ function createBoardScene(options) {
 		renderer.zoom?.(container, context.zoom);
 		return entry;
 	}
-	let farFront = createFarLayer();
-	let farBack = createFarLayer();
-	let farPainted = false;
-	let farCovered = /* @__PURE__ */ new Set();
-	let farInput = null;
-	let farRunning = false;
-	let farQueued = false;
-	let farFrame = 0;
-	function createFarLayer() {
-		const layer = new Graphics({ label: "board-far-layer" });
-		layer.zIndex = Z_FAR_LAYER;
-		layer.visible = false;
-		world.addChild(layer);
-		return layer;
+	const lodSizes = /* @__PURE__ */ new WeakMap();
+	let nearIds = EMPTY_IDS;
+	let plan = null;
+	let planInputs = [];
+	/** Visible ids in z-order; sorting indices beats comparing ids through the map. */
+	function orderedIds(visibleIds) {
+		if (visibleIds === null) return idsByOrder;
+		const order = new Int32Array(visibleIds.size);
+		let length = 0;
+		for (const id of visibleIds) {
+			const index = orderById.get(id);
+			if (index !== void 0) order[length++] = index;
+		}
+		return Array.from(order.subarray(0, length).sort(), (index) => idsByOrder[index]);
 	}
-	function requestFarPass(signature) {
-		farSig = signature;
-		if (farRunning) farQueued = true;
-		else runFarPass();
+	function lodSize(renderer, item) {
+		let size = lodSizes.get(item);
+		if (size === void 0) {
+			size = renderer.lod?.size?.(item) ?? Math.max(item.frame.width, item.frame.height);
+			lodSizes.set(item, size);
+		}
+		return size;
 	}
-	function runFarPass() {
-		if (!farInput) return;
-		farRunning = true;
-		farQueued = false;
-		const { context, getItem, pinnedIds } = farInput;
-		const ids = visibleFacts(farInput).orderedIds;
-		const target = farPainted ? farBack : farFront;
-		const painted = /* @__PURE__ */ new Set();
-		target.clear();
-		if (target === farFront) farCovered = painted;
-		let index = 0;
-		const step = () => {
-			farFrame = 0;
-			const end = Math.min(ids.length, index + FAR_PASS_BATCH);
-			for (; index < end; index += 1) {
-				const id = ids[index];
-				if (pinnedIds.has(id)) continue;
-				const item = getItem(id);
-				if (!item) continue;
-				getRenderer(item, context).renderFar?.(target, item, context);
-				painted.add(id);
+	/**
+	* Split the visible cards into live ones and z-ordered chunks of far stand-ins.
+	* A card is live while it is legible on screen, until the live budget keeps
+	* the on-screen ones nearest the focus; pinned cards and cards without a far
+	* stand-in stay live.
+	*/
+	function lodPlan(input) {
+		const { visibleIds, context, getItem, pinnedIds, scene } = input;
+		const lod = input.lod ?? DEFAULT_BOARD_LOD;
+		const step = Math.round(Math.log2(Math.max(context.zoom, 1e-4)) * LOD_ZOOM_STEPS);
+		const cell = input.view && input.focus && plan?.limited ? input.view.width / 8 : 0;
+		const at = cell ? `${Math.round((input.focus?.x ?? 0) / cell)},${Math.round((input.focus?.y ?? 0) / cell)}` : "";
+		const inputs = [
+			visibleIds,
+			input.structureVersion,
+			idSetSignature(pinnedIds),
+			step,
+			at,
+			lod.media,
+			lod.text,
+			lod.card,
+			lod.live
+		];
+		const reusable = plan && inputs.every((value, index) => value === planInputs[index]);
+		if (plan && reusable && !plan.deferred && (input.gestureActive || plan.scene === scene)) return plan;
+		planInputs = inputs;
+		const ids = orderedIds(visibleIds);
+		const live = /* @__PURE__ */ new Set();
+		const near = [];
+		for (const id of ids) {
+			const item = getItem(id);
+			if (!item) continue;
+			const renderer = getRenderer(item, context);
+			if (pinnedIds.has(id) || !renderer.renderFar) {
+				live.add(id);
+				continue;
 			}
-			if (index < ids.length) {
-				farFrame = requestAnimationFrame(step);
-				if (target === farFront) options.requestFrame?.();
-				return;
+			if (lodSize(renderer, item) * context.zoom / lod[renderer.lod?.kind ?? "card"] >= (nearIds.has(id) ? .8 : 1)) near.push(item);
+		}
+		const room = Math.max(0, lod.live - live.size);
+		const limited = near.length > room;
+		const { focus, view } = input;
+		const ranked = focus && (limited || near.length > MATERIALIZE_BATCH) ? near.map(({ id, frame }) => ({
+			id,
+			offscreen: view && !rectsIntersect(itemBounds(frame), view) ? 1 : 0,
+			distance: (frame.x + frame.width / 2 - focus.x) ** 2 + (frame.y + frame.height / 2 - focus.y) ** 2
+		})).sort((a, b) => a.offscreen - b.offscreen || a.distance - b.distance) : near;
+		let admitted = 0;
+		let deferred = false;
+		for (const { id } of ranked.slice(0, room)) if (!cards.has(id) && admitted++ >= MATERIALIZE_BATCH) deferred = true;
+		else live.add(id);
+		if (deferred) options.requestFrame?.();
+		nearIds = live;
+		const runs = /* @__PURE__ */ new Map();
+		const far = /* @__PURE__ */ new Set();
+		for (const id of ids) {
+			const item = getItem(id);
+			if (!item || live.has(id)) continue;
+			const order = orderById.get(id) ?? 0;
+			const key = `${Math.floor(order / FAR_CHUNK)}:${clippingAncestor(scene, item) ?? ""}`;
+			const run = runs.get(key);
+			if (run) run.items.push(item);
+			else runs.set(key, {
+				key,
+				order,
+				items: [item]
+			});
+			far.add(id);
+		}
+		plan = {
+			scene,
+			live,
+			far,
+			runs,
+			limited,
+			deferred
+		};
+		return plan;
+	}
+	const plates = /* @__PURE__ */ new Map();
+	let paintedPlan = null;
+	let paintedSig = "";
+	let covered = EMPTY_IDS;
+	/**
+	* Repaint the plates whose cards changed, within a per-frame budget. A card
+	* is covered once a plate draws it; until then it stays live if it already is.
+	*/
+	function paintPlates(input, current) {
+		const { context, globalSig, scene } = input;
+		if (current === paintedPlan && globalSig === paintedSig) return false;
+		let budget = FAR_PAINT_BUDGET;
+		let pending = false;
+		let changed = false;
+		for (const run of current.runs.values()) {
+			let plate = plates.get(run.key);
+			if (plate?.sig === globalSig && sameItems(plate.items, run.items)) continue;
+			if (budget <= 0) {
+				pending = true;
+				continue;
 			}
-			if (target === farBack) {
-				farBack = farFront;
-				farFront = target;
-				farBack.visible = false;
-				farBack.clear();
-				farCovered = painted;
+			budget -= run.items.length;
+			if (!plate) {
+				plate = {
+					graphics: new Graphics({ label: "board-far-plate" }),
+					items: [],
+					sig: ""
+				};
+				plates.set(run.key, plate);
+				changed = true;
 			}
-			farFront.visible = farActive;
-			farPainted = true;
-			farRunning = false;
-			options.requestFrame?.();
-			if (farQueued) runFarPass();
-		};
-		step();
+			const { graphics } = plate;
+			graphics.clear();
+			for (const item of run.items) getRenderer(item, context).renderFar?.(graphics, item, context);
+			plate.items = run.items;
+			plate.sig = globalSig;
+			graphics.zIndex = run.order;
+			const host = hostFor(run.items[0], scene);
+			if (graphics.parent !== host) host.addChild(graphics);
+		}
+		for (const [key, plate] of plates) {
+			if (current.runs.has(key)) continue;
+			plates.delete(key);
+			plate.graphics.destroy();
+			changed = true;
+		}
+		const next = /* @__PURE__ */ new Set();
+		for (const plate of plates.values()) for (const item of plate.items) next.add(item.id);
+		covered = next;
+		if (pending) options.requestFrame?.();
+		else {
+			paintedPlan = current;
+			paintedSig = globalSig;
+		}
+		return changed;
 	}
-	function resetFarLayer() {
-		cancelAnimationFrame(farFrame);
-		farFrame = 0;
-		farRunning = false;
-		farQueued = false;
-		farInput = null;
-		farPainted = false;
-		farCovered = /* @__PURE__ */ new Set();
-		farSig = null;
-		farFront.clear();
-		farBack.clear();
+	function clearPlates() {
+		for (const plate of plates.values()) plate.graphics.destroy();
+		plates.clear();
+		paintedPlan = null;
+		paintedSig = "";
+		covered = EMPTY_IDS;
+		plan = null;
+		planInputs = [];
+		nearIds = EMPTY_IDS;
 	}
 	function syncLiveStrokes(input) {
 		const { strokes, context, getItem } = input;
@@ -274,28 +377,9 @@ function createBoardScene(options) {
 		world.removeChild(entry.container);
 		entry.renderer.destroy?.(entry.container, context);
 	}
-	let visibleMemo = null;
-	function visibleFacts(input) {
-		const { items, visibleIds, structureVersion, context, getItem } = input;
-		if (visibleMemo?.ids === visibleIds && visibleMemo.structureVersion === structureVersion) return visibleMemo;
-		const orderedIds = visibleIds === null ? items.map((item) => item.id) : [...visibleIds].sort((a, b) => (orderById.get(a) ?? 0) - (orderById.get(b) ?? 0));
-		const unbatched = /* @__PURE__ */ new Set();
-		for (const id of orderedIds) {
-			const item = getItem(id);
-			if (item && !getRenderer(item, context).renderFar) unbatched.add(id);
-		}
-		visibleMemo = {
-			ids: visibleIds,
-			structureVersion,
-			signature: visibleIds === null ? 0 : idSetSignature(visibleIds),
-			orderedIds,
-			unbatched
-		};
-		return visibleMemo;
-	}
 	function sync(input) {
-		const { items, scene, context, getItem, visibleIds, pinnedIds, globalSig, structureVersion, geometryVersion, gestureActive } = input;
-		const resolution = `${textZoomBucket(context.zoom)}:${context.textResolution}`;
+		const { items, scene, context, getItem, pinnedIds, globalSig, structureVersion } = input;
+		const resolution = `${textZoomBucket(context.zoom)}:${boardCardDetailed(context.zoom)}:${context.textResolution}`;
 		if (resolution !== lastResolution) {
 			lastResolution = resolution;
 			queueResolution(input.focus);
@@ -305,44 +389,14 @@ function createBoardScene(options) {
 			lastStructureVersion = structureVersion;
 			const liveIds = new Set(items.map((item) => item.id));
 			for (const [id, entry] of [...cards]) if (!liveIds.has(id)) recycle(id, entry, context, false);
-			orderById = new Map(items.map((item, index) => [item.id, index]));
+			idsByOrder = items.map((item) => item.id);
+			orderById = new Map(idsByOrder.map((id, index) => [id, index]));
 		}
-		const visibleCount = visibleIds === null ? items.length : visibleIds.size;
-		const nextFarActive = farActive ? visibleCount > FAR_LAYER_EXIT : visibleCount > FAR_LAYER_ENTER;
-		const farModeChanged = nextFarActive !== farActive;
-		farActive = nextFarActive;
-		farFront.visible = farActive;
-		if (farActive) {
-			farInput = input;
-			const nextFarSig = [
-				structureVersion,
-				geometryVersion,
-				globalSig,
-				idSetSignature(pinnedIds),
-				visibleIds === null ? "all" : visibleFacts(input).signature
-			].join("|");
-			if (farSig === null || nextFarSig !== farSig && !gestureActive) requestFarPass(nextFarSig);
-		} else if (farModeChanged) resetFarLayer();
+		const current = lodPlan(input);
+		const platesChanged = paintPlates(input, current);
 		const wanted = new Set(pinnedIds);
-		if (farActive) {
-			const { orderedIds, unbatched } = visibleFacts(input);
-			for (const id of unbatched) wanted.add(id);
-			let retained = 0;
-			if (!farPainted) {
-				for (const id of cards.keys()) if ((!visibleIds || visibleIds.has(id)) && !farCovered.has(id) && !wanted.has(id)) {
-					wanted.add(id);
-					retained++;
-				}
-			}
-			let budget = Math.max(0, FAR_LIVE_LIMIT - retained);
-			for (const id of orderedIds) {
-				if (budget === 0) break;
-				if (farCovered.has(id) || wanted.has(id)) continue;
-				wanted.add(id);
-				budget -= 1;
-			}
-		} else if (visibleIds === null) for (const item of items) wanted.add(item.id);
-		else for (const id of visibleIds) wanted.add(id);
+		for (const id of current.live) wanted.add(id);
+		for (const id of cards.keys()) if (current.far.has(id) && !covered.has(id)) wanted.add(id);
 		let liveSetChanged = false;
 		for (const [id, entry] of [...cards]) if (!wanted.has(id)) {
 			recycle(id, entry, context, false);
@@ -384,18 +438,27 @@ function createBoardScene(options) {
 				pendingResolution.delete(id);
 			}
 		}
+		if (input.view) cullCards(input.view, pinnedIds);
 		refreshResolution(context);
 		if (liveSetChanged) liveVersion += 1;
-		if (structureChanged || liveSetChanged) syncClips(scene);
+		if (structureChanged || liveSetChanged || platesChanged) syncClips(scene);
 		if (context.zoom !== lastZoom) {
 			lastZoom = context.zoom;
 			for (const entry of cards.values()) entry.renderer.zoom?.(entry.container, lastZoom);
 		}
 		const liftChanged = context.liftedIds !== lifted;
 		lifted = context.liftedIds;
-		if (structureChanged || farModeChanged || liveSetChanged || liftChanged) applyChildOrder(scene);
+		if (structureChanged || liveSetChanged || liftChanged) applyChildOrder(scene);
 		syncLiveStrokes(input);
 	}
+	function cullCards(view, pinnedIds) {
+		for (const [id, entry] of cards) {
+			const culled = !pinnedIds.has(id) && !rectsIntersect(itemBounds(entry.item.frame), view);
+			if (entry.container.culled === culled) continue;
+			entry.container.culled = culled;
+			if (!culled && entry.renderer.tick) tickingIds.add(id);
+		}
+	}
 	function queueResolution(focus) {
 		const ids = [...cards].filter(([, entry]) => entry.renderer.resolution);
 		if (focus) {
@@ -421,7 +484,7 @@ function createBoardScene(options) {
 		let next = null;
 		for (const id of tickingIds) {
 			const entry = cards.get(id);
-			const wait = entry?.container.visible ? entry.renderer.tick?.(entry.container, clock) ?? null : null;
+			const wait = entry?.container.visible && !entry.container.culled ? entry.renderer.tick?.(entry.container, clock) ?? null : null;
 			if (wait === null) tickingIds.delete(id);
 			else next = next === null ? wait : Math.min(next, wait);
 		}
@@ -438,6 +501,14 @@ function createBoardScene(options) {
 		}
 		world.sortChildren();
 	}
+	function redrawText() {
+		const redraw = (container) => {
+			for (const child of container.children) if (child instanceof Text) child.style.update();
+			else redraw(child);
+		};
+		for (const entry of cards.values()) redraw(entry.container);
+		for (const pool of pools.values()) for (const container of pool) redraw(container);
+	}
 	function destroy(context) {
 		for (const entry of cards.values()) entry.renderer.destroy?.(entry.container, context);
 		cards.clear();
@@ -447,14 +518,13 @@ function createBoardScene(options) {
 		heldKeys.clear();
 		holders.clear();
 		orderById = /* @__PURE__ */ new Map();
+		idsByOrder = [];
+		clearPlates();
 		for (const entry of clips.values()) entry.group.destroy({ children: true });
 		clips.clear();
 		animatedIds.clear();
 		tickingIds.clear();
 		for (const id of [...liveStrokes.keys()]) removeLiveStroke(id, context);
-		resetFarLayer();
-		farActive = false;
-		visibleMemo = null;
 		lastStructureVersion = -1;
 		lastZoom = NaN;
 		lastResolution = "";
@@ -474,10 +544,15 @@ function createBoardScene(options) {
 			return liveVersion;
 		},
 		liveIds: () => new Set(cards.keys()),
+		counts: () => ({
+			live: cards.size,
+			far: covered.size
+		}),
 		get animated() {
 			return animatedIds.size > 0;
 		},
 		tick,
+		redrawText,
 		destroy
 	};
 }

package/dist/board/stage/stage.d.ts

@@ -11,6 +11,7 @@ import { BoardPointerEvent } from "../editor/interaction.js";
 import { BoardEditor } from "../editor/editor.js";
 import "../editor/index.js";
 import { BoardRenderStyle } from "../render/style.js";
+import { BoardLod } from "../render/lod.js";
 import { BoardCardRendererResolver, BoardRenderLabels, BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
 import "../render/index.js";
 import { BoardAssetManager } from "./assets.js";
@@ -59,6 +60,8 @@ type BoardStageOptions = {
   onLiveChange?: (ids: ReadonlySet<string>) => void;
   safeRect?: () => Rect;
   scriptCapabilities?: Record<string, (id: string, input: unknown) => Promise<unknown>>;
+  /** Level-of-detail thresholds and live budget; read every frame. */
+  lod?: () => BoardLod | undefined;
 };
 type BoardStage = {
   readonly ready: Promise<boolean>;
@@ -80,8 +83,16 @@ type BoardStage = {
   }): void;
   isMaterialized(id: string): boolean;
   toWorld(clientX: number, clientY: number): WorldPoint;
+  stats(): BoardStageStats;
   destroy(): void;
 };
+type BoardStageStats = {
+  live: number;
+  far: number;
+  textures: number;
+  cooling: number;
+  textureBytes: number;
+};
 declare function mountBoardStage(host: HTMLElement, options: BoardStageOptions): BoardStage;
 //#endregion
-export { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, mountBoardStage };
+export { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageStats, BoardStageTheme, mountBoardStage };