@neta-art/cohub 11.5.0 → 12.0.0

package/dist/board/stage/scene.js

@@ -1,5 +1,6 @@
 import { parseBoardItem } from "../../protocol/dist/board-model.js";
 import { drawPointsBounds } from "../../protocol/dist/board-layout.js";
+import { getBoardResolution, textZoomBucket } from "../render/text-resolution.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
 import { Graphics } from "pixi.js";
 //#region src/board/stage/scene.ts
@@ -12,6 +13,7 @@ const Z_LIFTED = 1e9;
 const Z_LIVE_STROKE = Number.MAX_SAFE_INTEGER - 1;
 const Z_OVERLAY = Number.MAX_SAFE_INTEGER;
 const POOL_LIMIT_PER_RENDERER = 48;
+const EMPTY_IDS = /* @__PURE__ */ new Set();
 function idSetSignature(ids) {
 	let hash = ids.size;
 	for (const id of ids) {
@@ -31,20 +33,33 @@ function createBoardScene(options) {
 	const tickingIds = /* @__PURE__ */ new Set();
 	const pools = /* @__PURE__ */ new Map();
 	const heldKeys = /* @__PURE__ */ new Map();
+	const holders = /* @__PURE__ */ new Map();
 	let orderById = /* @__PURE__ */ new Map();
 	let farSig = null;
 	let farActive = false;
 	let lastStructureVersion = -1;
 	let lastZoom = NaN;
+	let lastResolution = "";
+	let liveVersion = 0;
 	let lifted = /* @__PURE__ */ new Set();
 	const liveStrokes = /* @__PURE__ */ new Map();
-	function setHeldKey(context, cardId, desiredKey) {
+	function setHeldKey(context, cardId, item) {
+		const desiredKey = item ? context.assetKey(item) : null;
 		const heldKey = heldKeys.get(cardId) ?? null;
 		if (desiredKey === heldKey) return;
-		if (heldKey) context.releaseTexture(heldKey);
-		if (desiredKey) context.acquireTexture(desiredKey);
-		if (desiredKey) heldKeys.set(cardId, desiredKey);
-		else heldKeys.delete(cardId);
+		if (heldKey) {
+			context.releaseTexture(heldKey);
+			const ids = holders.get(heldKey);
+			ids?.delete(cardId);
+			if (ids?.size === 0) holders.delete(heldKey);
+		}
+		if (desiredKey && item) {
+			heldKeys.set(cardId, desiredKey);
+			const ids = holders.get(desiredKey);
+			if (ids) ids.add(cardId);
+			else holders.set(desiredKey, /* @__PURE__ */ new Set([cardId]));
+			context.acquireTexture(desiredKey, item);
+		} else heldKeys.delete(cardId);
 	}
 	function takeFromPool(rendererId) {
 		const pool = pools.get(rendererId);
@@ -119,7 +134,7 @@ function createBoardScene(options) {
 			scriptRevision: context.scripts?.revision?.(item.id) ?? 0
 		};
 		cards.set(item.id, entry);
-		setHeldKey(context, item.id, context.assetKey(item));
+		setHeldKey(context, item.id, item);
 		renderer.zoom?.(container, context.zoom);
 		return entry;
 	}
@@ -277,6 +292,9 @@ function createBoardScene(options) {
 	}
 	function sync(input) {
 		const { items, scene, context, getItem, visibleIds, pinnedIds, globalSig, structureVersion, geometryVersion, gestureActive } = input;
+		const resolution = `${textZoomBucket(context.zoom)}:${getBoardResolution()}`;
+		const resolutionChanged = resolution !== lastResolution;
+		lastResolution = resolution;
 		const structureChanged = structureVersion !== lastStructureVersion;
 		if (structureChanged) {
 			lastStructureVersion = structureVersion;
@@ -304,7 +322,14 @@ function createBoardScene(options) {
 		if (farActive) {
 			const { orderedIds, unbatched } = visibleFacts(input);
 			for (const id of unbatched) wanted.add(id);
-			let budget = FAR_LIVE_LIMIT;
+			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;
@@ -346,13 +371,17 @@ function createBoardScene(options) {
 			entry.hovered = hovered;
 			entry.resizing = resizing;
 			entry.globalSig = globalSig;
-			setHeldKey(context, id, context.assetKey(item));
+			setHeldKey(context, id, item);
 			if (changed) {
 				entry.renderer.update(entry.container, item, context);
 				entry.container.alpha = scene.opacity(id);
 				if (entry.renderer.tick) tickingIds.add(id);
+			} else if (resolutionChanged && entry.renderer.resolution) {
+				entry.renderer.resolution(entry.container, item, context);
+				if (entry.renderer.tick) tickingIds.add(id);
 			}
 		}
+		if (liveSetChanged) liveVersion += 1;
 		if (structureChanged || liveSetChanged) syncClips(scene);
 		if (context.zoom !== lastZoom) {
 			lastZoom = context.zoom;
@@ -391,6 +420,7 @@ function createBoardScene(options) {
 		pools.clear();
 		for (const key of heldKeys.values()) context.releaseTexture(key);
 		heldKeys.clear();
+		holders.clear();
 		orderById = /* @__PURE__ */ new Map();
 		for (const entry of clips.values()) entry.group.destroy({ children: true });
 		clips.clear();
@@ -402,6 +432,7 @@ function createBoardScene(options) {
 		visibleMemo = null;
 		lastStructureVersion = -1;
 		lastZoom = NaN;
+		lastResolution = "";
 	}
 	return {
 		sync,
@@ -412,6 +443,11 @@ function createBoardScene(options) {
 				container: entry.container
 			} : null;
 		},
+		holders: (key) => holders.get(key) ?? EMPTY_IDS,
+		get liveVersion() {
+			return liveVersion;
+		},
+		liveIds: () => new Set(cards.keys()),
 		get animated() {
 			return animatedIds.size > 0;
 		},

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

@@ -56,6 +56,7 @@ type BoardStageOptions = {
     height: number;
   }) => void;
   onVisibleChange?: (ids: ReadonlySet<string> | null) => void;
+  onLiveChange?: (ids: ReadonlySet<string>) => void;
   safeRect?: () => Rect;
   scriptCapabilities?: Record<string, (id: string, input: unknown) => Promise<unknown>>;
 };

package/dist/board/stage/stage.js

@@ -1,22 +1,25 @@
 import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
-import { screenPoint, screenToWorld, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { pointToWorld, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, validateBoardScriptCommit } from "../model/script-scene.js";
+import { boardScriptTarget } from "../model/script-hit.js";
 import { createBoardAnimationSampler, resolveBoardAnimationCamera } from "../model/sampling.js";
+import { resolveSceneArrow } from "../model/arrow-geometry.js";
 import { buildFallbackShapeColors, pickBoardColor, resolveItemColor } from "../model/palette.js";
+import { elementClientToLocal } from "../model/client-geometry.js";
+import { isCreationBoardTool } from "../editor/tool.js";
+import { resizeCursorForHandle } from "../editor/selection-transform.js";
+import { createBoardPlayer } from "../player/index.js";
+import { createBoardScriptObservers } from "../model/script-observers.js";
 import { parseBoardCssColor } from "../render/css-color.js";
-import { defaultBoardPalette, itemAlpha } from "../render/palette.js";
-import { resolveSceneArrow } from "../model/arrow-geometry.js";
 import { createBoardBackground, updateBoardBackground } from "../render/board-background.js";
-import { getBoardResolution, textZoomBucket } from "../render/text-resolution.js";
+import { getBoardResolution } from "../render/text-resolution.js";
+import { defaultBoardPalette, itemAlpha } from "../render/palette.js";
 import { DEFAULT_BOARD_RENDER_LABELS, getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
-import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, validateBoardScriptCommit } from "../model/script-scene.js";
-import { boardScriptTarget } from "../model/script-hit.js";
 import { createBoardScriptHost } from "../render/script-host.js";
 import { defaultBoardRenderStyle } from "../render/style.js";
-import { isCreationBoardTool } from "../editor/tool.js";
-import { resizeCursorForHandle } from "../editor/selection-transform.js";
-import { createBoardScriptObservers } from "../model/script-observers.js";
-import { createBoardPlayer } from "../player/index.js";
+import { boardTextureEdge } from "./assets.js";
+import { observeDisplayDensity } from "./display-density.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { createBoardScene } from "./scene.js";
@@ -48,6 +51,7 @@ function defaultTheme() {
 const NO_IDS = /* @__PURE__ */ new Set();
 const MARCH_STEP_MS = 160;
 const MARCH_SMOOTH_MS = 40;
+const TEXTURE_SETTLE_MS = 150;
 const ROTATE_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, crosshair`;
 const defaultStyles = /* @__PURE__ */ new Map();
 function styleOf(theme) {
@@ -96,17 +100,18 @@ function mountBoardStage(host, options) {
 	let scriptHover = null;
 	const scriptPointers = createBoardScriptPointerRouter();
 	let stopMaintenance = null;
+	let stopDensity = null;
 	let active = true;
 	let disposed = false;
 	let renderFrame = 0;
 	let tickFrame = 0;
+	let scriptTickFrame = 0;
 	let cardTickFrame = 0;
 	let cardTickTimer = null;
 	let cardTickDue = 0;
 	const staleIds = /* @__PURE__ */ new Set();
 	let resizeFrame = 0;
 	let cardEpoch = 0;
-	let assetVersion = 0;
 	let surface = {
 		width: 0,
 		height: 0
@@ -114,7 +119,7 @@ function mountBoardStage(host, options) {
 	let playbackCamera = null;
 	let cursor = "";
 	const renderCamera = () => playbackCamera ?? editor.camera;
-	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera);
+	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera, scheduleTick);
 	const player = createBoardPlayer({ resolveColor: (color) => {
 		const current = theme();
 		return {
@@ -138,29 +143,70 @@ function mountBoardStage(host, options) {
 			scene: editor.scene
 		};
 		options.onVisibleChange?.(cull.ids);
-		requestAssets = true;
 		return cull.ids;
 	}
-	let requestAssets = true;
-	function syncAssets(ids) {
-		if (!requestAssets || !ids) return;
-		requestAssets = false;
+	const textureScale = () => renderCamera().zoom * (app?.renderer.resolution ?? 1);
+	let refined = {
+		scale: 0,
+		geometry: 0
+	};
+	let pendingRefine = "";
+	let refineTimer = null;
+	function stopRefine() {
+		if (refineTimer !== null) clearTimeout(refineTimer);
+		refineTimer = null;
+		refined = {
+			scale: 0,
+			geometry: 0
+		};
+		pendingRefine = "";
+	}
+	function scheduleRefine() {
+		const scale = textureScale();
+		const geometry = editor.geometryVersion;
+		const key = `${scale}:${geometry}`;
+		if (key === pendingRefine) return;
+		pendingRefine = key;
+		if (refineTimer !== null) clearTimeout(refineTimer);
+		refineTimer = null;
+		if (refined.scale === 0 || scale <= refined.scale && geometry === refined.geometry) {
+			refined = {
+				scale,
+				geometry
+			};
+			return;
+		}
+		refineTimer = setTimeout(() => {
+			refineTimer = null;
+			refined = {
+				scale,
+				geometry
+			};
+			for (const id of scene?.liveIds() ?? []) {
+				const item = editor.scene.get(id);
+				if (item) assets.requestItem(item, boardTextureEdge(item, scale));
+			}
+		}, TEXTURE_SETTLE_MS);
+	}
+	const naturalIds = /* @__PURE__ */ new Set();
+	let liveVersion = -1;
+	function adoptNaturalSizes() {
+		if (naturalIds.size === 0) return;
 		const sizes = [];
-		for (const id of ids) {
+		for (const id of naturalIds) {
 			const item = editor.itemById(id);
-			if (!item) continue;
-			const key = assets.assetKey(item);
-			if (!key) continue;
-			assets.requestItem(item);
+			const key = item && assets.assetKey(item);
+			if (!item || !key) continue;
 			const artifact = item.type === "task" ? featuredTaskArtifact(item.props.snapshot.artifacts) : null;
 			const recorded = artifact?.type === "image" || artifact?.type === "video" ? artifact : item.type === "image" || item.type === "video" ? item.props.snapshot : null;
 			if (!recorded || recorded.naturalWidth && recorded.naturalHeight) continue;
 			const natural = assets.getNaturalSize(key);
 			if (natural?.width && natural.height) sizes.push({
-				id: item.id,
+				id,
 				...natural
 			});
 		}
+		naturalIds.clear();
 		if (sizes.length > 0) editor.adoptMediaNaturalSizes(sizes);
 	}
 	let lifted = null;
@@ -201,7 +247,11 @@ function mountBoardStage(host, options) {
 			getTexture: (key) => assets.getTexture(key),
 			hasError: (key) => assets.hasError(key),
 			fileState: (path) => options.fileState?.(path) ?? "ok",
-			acquireTexture: (key) => assets.acquire(key),
+			acquireTexture: (key, item) => {
+				assets.acquire(key);
+				assets.requestItem(item, boardTextureEdge(item, textureScale()));
+				if (assets.getTexture(key)) naturalIds.add(item.id);
+			},
 			releaseTexture: (key) => assets.release(key)
 		};
 	}
@@ -440,9 +490,37 @@ function mountBoardStage(host, options) {
 		}, owner, retained);
 		if (!retained || scriptHover && scriptHover.owner === owner && !Object.hasOwn(retained, scriptHover.target)) scriptHover = null;
 	}
+	function syncScripts() {
+		if (!scripts) return;
+		const now = performance.now();
+		if (scriptMode !== "paused") scriptTime += Math.min(250, Math.max(0, now - scriptLastTick));
+		scriptLastTick = now;
+		const camera = renderCamera();
+		if (scriptMode !== "paused" && scriptObservers.size) scriptObservers.sync(editor.document, editor.selection, () => ({
+			camera: { ...camera },
+			...surface,
+			safeRect: options.safeRect?.() ?? {
+				x: 0,
+				y: 0,
+				...surface
+			}
+		}));
+		scripts.sync(editor.document, editor.scene, camera, scriptTime, scriptMode === "interact", visibleIds());
+	}
+	function scheduleScriptTick() {
+		if (scriptTickFrame || !active || disposed) return;
+		scriptTickFrame = requestAnimationFrame(() => {
+			scriptTickFrame = 0;
+			if (tickFrame) return;
+			syncScripts();
+			if (scriptMode !== "paused" && scripts?.animated) scheduleScriptTick();
+		});
+	}
 	function createScripts() {
 		return createBoardScriptHost({
 			host,
+			isMaterialized: (id) => Boolean(scene?.getNode(id)),
+			onSchedule: scheduleScriptTick,
 			capabilities: {
 				...options.scriptCapabilities,
 				"board.emit": async (id, value) => {
@@ -550,25 +628,9 @@ function mountBoardStage(host, options) {
 			}
 		}
 		const renderScene = editor.scene;
-		if (scripts) {
-			const now = performance.now();
-			if (scriptMode !== "paused") scriptTime += Math.min(250, Math.max(0, now - scriptLastTick));
-			scriptLastTick = now;
-			if (scriptMode !== "paused" && scriptObservers.size) scriptObservers.sync(editor.document, editor.selection, () => ({
-				camera: { ...camera },
-				...surface,
-				safeRect: options.safeRect?.() ?? {
-					x: 0,
-					y: 0,
-					...surface
-				}
-			}));
-			scripts.sync(editor.document, renderScene, camera, scriptTime, scriptMode === "interact", visibleIds());
-		}
 		world.position.set(camera.x, camera.y);
 		world.scale.set(camera.zoom);
 		const ids = visibleIds();
-		syncAssets(ids);
 		const context = renderContext(current, renderScene, frame.time);
 		if (animationId && effectSampler) {
 			context.time = editor.playhead?.time ?? frame.time;
@@ -591,18 +653,20 @@ function mountBoardStage(host, options) {
 			getItem: (id) => renderScene.get(id) ?? null,
 			visibleIds: ids,
 			pinnedIds,
-			globalSig: [
-				assetVersion,
-				cardEpoch,
-				current.key,
-				textZoomBucket(camera.zoom)
-			].join("|"),
+			globalSig: [cardEpoch, current.key].join("|"),
 			staleIds,
 			structureVersion: editor.structureVersion,
 			geometryVersion: editor.geometryVersion,
 			gestureActive: editor.gestureActive && editor.interaction.type !== "panning"
 		});
 		staleIds.clear();
+		if (scene.liveVersion !== liveVersion) {
+			liveVersion = scene.liveVersion;
+			options.onLiveChange?.(scene.liveIds());
+		}
+		adoptNaturalSizes();
+		scheduleRefine();
+		syncScripts();
 		drawInteraction();
 		views.sync({
 			ids,
@@ -614,28 +678,35 @@ function mountBoardStage(host, options) {
 		const nextCursor = cursorFor();
 		if (nextCursor !== cursor) host.style.cursor = cursor = nextCursor;
 		scheduleRender();
-		if (frame.running || scene.animated || scriptMode !== "paused" && scripts?.animated) scheduleTick();
+		if (frame.running || scene.animated) scheduleTick();
+		if (scriptMode !== "paused" && scripts?.animated) scheduleScriptTick();
 		const cardWait = scene.tick(performance.now());
 		if (cardWait !== null) scheduleCardTick(cardWait);
 	}
 	function resize() {
 		cancelAnimationFrame(resizeFrame);
 		resizeFrame = requestAnimationFrame(() => {
-			if (!app) return;
-			app.resize();
-			surface = {
-				width: app.screen.width,
-				height: app.screen.height
+			if (!app || !active) return;
+			const size = {
+				width: host.clientWidth,
+				height: host.clientHeight
 			};
-			editor.surfaceSize = surface;
-			options.onSurfaceChange?.(surface);
+			if (size.width <= 0 || size.height <= 0) return;
+			const resolution = getBoardResolution(size);
+			const sizeChanged = size.width !== surface.width || size.height !== surface.height;
+			if (sizeChanged || app.renderer.resolution !== resolution) app.renderer.resize(size.width, size.height, resolution);
+			if (sizeChanged) {
+				surface = size;
+				editor.surfaceSize = surface;
+				options.onSurfaceChange?.(surface);
+			}
 			sync();
 		});
 	}
-	const rectOf = () => host.getBoundingClientRect();
+	const localPoint = (x, y) => elementClientToLocal(host)(x, y);
 	const inViews = (event) => event.target instanceof Node && views.element.contains(event.target);
 	function toInput(event) {
-		return toBoardPointerEvent(event, rectOf(), renderCamera(), event.type === "pointermove" && editor.interaction.type === "drawing");
+		return toBoardPointerEvent(event, host, renderCamera(), event.type === "pointermove" && editor.interaction.type === "drawing");
 	}
 	function scriptTarget(input) {
 		if (!scriptOutputs.size) return null;
@@ -742,13 +813,12 @@ function mountBoardStage(host, options) {
 		if (inViews(event)) return;
 		event.preventDefault();
 		editor.takeCameraControl();
-		const rect = rectOf();
-		const point = screenPoint(event.clientX - rect.left, event.clientY - rect.top);
+		const point = localPoint(event.clientX, event.clientY);
 		editor.wheel(point, event.deltaX, event.deltaY, event.ctrlKey || event.metaKey, event.deltaMode);
 	}
 	function handleDoubleClick(event) {
 		if (inViews(event)) return;
-		const point = screenToWorld(event.clientX, event.clientY, rectOf(), renderCamera());
+		const point = pointToWorld(localPoint(event.clientX, event.clientY), renderCamera());
 		const item = editor.itemAt(point);
 		if (options.onDoubleClick?.(item, point) === true || editor.readonly) return;
 		if (item && !item.locked && editor.registry.capabilities(item).canEdit) {
@@ -774,9 +844,13 @@ function mountBoardStage(host, options) {
 		["dblclick", handleDoubleClick]
 	];
 	const stopEditor = editor.subscribe(LIVE_CHANNELS, scheduleTick);
-	const stopAssets = assets.subscribe(() => {
-		assetVersion += 1;
-		requestAssets = true;
+	const stopAssets = assets.subscribe((key) => {
+		const ids = scene?.holders(key);
+		if (!ids?.size) return;
+		for (const id of ids) {
+			staleIds.add(id);
+			naturalIds.add(id);
+		}
 		scheduleTick();
 	});
 	const resizeObserver = new ResizeObserver(resize);
@@ -788,8 +862,12 @@ function mountBoardStage(host, options) {
 					antialias: true,
 					autoDensity: true,
 					backgroundAlpha: 0,
-					resizeTo: host,
-					resolution: getBoardResolution(),
+					width: host.clientWidth,
+					height: host.clientHeight,
+					resolution: getBoardResolution({
+						width: host.clientWidth,
+						height: host.clientHeight
+					}),
 					autoStart: false
 				});
 			} catch (error) {
@@ -829,6 +907,8 @@ function mountBoardStage(host, options) {
 			});
 			for (const [type, listener, listenerOptions] of listeners) host.addEventListener(type, listener, listenerOptions);
 			resizeObserver.observe(host);
+			const window = host.ownerDocument.defaultView;
+			if (window) stopDensity = observeDisplayDensity(window, resize);
 			resize();
 			return true;
 		})(),
@@ -880,7 +960,10 @@ function mountBoardStage(host, options) {
 			if (!active) {
 				pointers.cancel();
 				stopMarch();
+				stopRefine();
 				cancelScriptPointers();
+				cancelAnimationFrame(scriptTickFrame);
+				scriptTickFrame = 0;
 				cancelAnimationFrame(renderFrame);
 				cancelAnimationFrame(tickFrame);
 				cancelAnimationFrame(cardTickFrame);
@@ -896,27 +979,27 @@ function mountBoardStage(host, options) {
 			resize();
 		},
 		invalidate(invalidation) {
-			if (invalidation?.cards) {
-				cardEpoch += 1;
-				requestAssets = true;
-			}
+			if (invalidation?.cards) cardEpoch += 1;
 			for (const id of invalidation?.items ?? []) staleIds.add(id);
 			scheduleTick();
 		},
 		isMaterialized: (id) => Boolean(scene?.getNode(id)),
-		toWorld: (clientX, clientY) => screenToWorld(clientX, clientY, rectOf(), renderCamera()),
+		toWorld: (clientX, clientY) => pointToWorld(localPoint(clientX, clientY), renderCamera()),
 		destroy() {
 			disposed = true;
 			pointers.cancel();
 			stopMarch();
+			stopRefine();
 			scriptPointers.clear();
 			stopTransforms?.();
 			scriptObservers.clear();
 			scriptListeners.clear();
 			stopMaintenance?.();
+			stopDensity?.();
 			stopEditor();
 			stopAssets();
 			resizeObserver.disconnect();
+			cancelAnimationFrame(scriptTickFrame);
 			cancelAnimationFrame(resizeFrame);
 			cancelAnimationFrame(renderFrame);
 			cancelAnimationFrame(tickFrame);

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

@@ -7,7 +7,7 @@ import "../editor/index.js";
 //#region src/board/stage/views.d.ts
 type BoardItemViewContext = {
   editor: BoardEditor;
-  zoom: number;
+  detailed: boolean;
   selected: boolean;
   toPointerEvent(event: PointerEvent): BoardPointerEvent;
 };
@@ -17,6 +17,11 @@ type BoardItemViewInstance = {
 };
 type BoardItemView = {
   type: string | ((item: BoardSceneItem) => boolean);
+  /** Optional screen-pixel threshold for expensive content, with built-in hysteresis. */
+  contentSize?: {
+    width: number;
+    height: number;
+  };
   mount(element: HTMLElement, item: BoardSceneItem, context: BoardItemViewContext): BoardItemViewInstance;
 };
 type BoardItemViewLayer = {
@@ -33,6 +38,6 @@ type BoardItemViewLayer = {
   }): void;
   destroy(): void;
 };
-declare function createBoardItemViewLayer(host: HTMLElement, editor: BoardEditor, views: readonly BoardItemView[], camera: () => BoardViewport): BoardItemViewLayer;
+declare function createBoardItemViewLayer(host: HTMLElement, editor: BoardEditor, views: readonly BoardItemView[], camera: () => BoardViewport, onInvalidate?: () => void): BoardItemViewLayer;
 //#endregion
 export { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer };