@neta-art/cohub 11.5.1 → 12.1.0

package/dist/board/stage/canvas-size.js

@@ -0,0 +1,31 @@
+import { getBoardResolution } from "../render/text-resolution.js";
+//#region src/board/stage/canvas-size.ts
+function measureBoardCanvasBox(entry, density) {
+	const css = entry.contentBoxSize?.[0];
+	const device = entry.devicePixelContentBoxSize?.[0];
+	return {
+		width: css?.inlineSize ?? entry.contentRect.width,
+		height: css?.blockSize ?? entry.contentRect.height,
+		density,
+		device: device ? {
+			width: device.inlineSize,
+			height: device.blockSize
+		} : null
+	};
+}
+function boardCanvasSize(box, density) {
+	const resolution = getBoardResolution(box, density);
+	const { device } = box;
+	if (device && box.density === density && resolution === density) return {
+		width: device.width / density,
+		height: device.height / density,
+		resolution
+	};
+	return {
+		width: box.width,
+		height: box.height,
+		resolution
+	};
+}
+//#endregion
+export { boardCanvasSize, measureBoardCanvasBox };

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

@@ -1,10 +1,10 @@
-import { DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions } from "./lru.js";
+import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions } from "./lru.js";
 import { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
-import { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, createBoardAssetManager } from "./assets.js";
+import { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, boardTextureEdge, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene } from "./scene.js";
 import { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer } from "./views.js";
 import { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, mountBoardStage } from "./stage.js";
 import { BoardOverlayInput, drawBoardOverlay, expandFrame } from "./overlay.js";
-export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardModelPreviewRequest, BoardModelPreviews, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardModelPreviewRequest, BoardModelPreviews, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, boardTextureEdge, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/index.js

@@ -1,10 +1,10 @@
-import { DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";
+import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";
 import { boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
-import { boardAssetKey, createBoardAssetManager } from "./assets.js";
+import { boardAssetKey, boardTextureEdge, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { createBoardScene } from "./scene.js";
 import { drawBoardOverlay, expandFrame } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { mountBoardStage } from "./stage.js";
-export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, boardTextureEdge, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

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

@@ -20,8 +20,9 @@ type LruBudget = {
   maxCount: number;
   maxBytes: number;
 };
-/** Default cooling-pool ceiling: 64 images or ~128 MB of GPU memory. */
+/** Default cooling-pool ceiling: 512 images or ~192 MB of GPU memory. */
 declare const DEFAULT_LRU_BUDGET: LruBudget;
+declare const COMPACT_LRU_BUDGET: LruBudget;
 /**
  * Given the unreferenced (cooling) entries and a budget, return the keys to
  * evict — oldest first — so the remaining pool fits within both limits. Returns
@@ -29,4 +30,4 @@ declare const DEFAULT_LRU_BUDGET: LruBudget;
  */
 declare function selectLruEvictions(entries: LruEntry[], budget: LruBudget): string[];
 //#endregion
-export { DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions };

package/dist/board/stage/lru.js

@@ -1,8 +1,12 @@
 //#region src/board/stage/lru.ts
-/** Default cooling-pool ceiling: 64 images or ~128 MB of GPU memory. */
+/** Default cooling-pool ceiling: 512 images or ~192 MB of GPU memory. */
 const DEFAULT_LRU_BUDGET = {
-	maxCount: 64,
-	maxBytes: 134217728
+	maxCount: 512,
+	maxBytes: 201326592
+};
+const COMPACT_LRU_BUDGET = {
+	maxCount: 256,
+	maxBytes: 100663296
 };
 /**
 * Given the unreferenced (cooling) entries and a budget, return the keys to
@@ -26,4 +30,4 @@ function selectLruEvictions(entries, budget) {
 	return evict;
 }
 //#endregion
-export { DEFAULT_LRU_BUDGET, selectLruEvictions };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, selectLruEvictions };

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

@@ -3,6 +3,6 @@ import "../model/index.js";
 import { BoardPointerEvent } from "../editor/interaction.js";
 import "../editor/index.js";
 //#region src/board/stage/pointer.d.ts
-declare function toBoardPointerEvent(event: PointerEvent, rect: DOMRect, camera: BoardViewport, coalesce?: boolean): BoardPointerEvent;
+declare function toBoardPointerEvent(event: PointerEvent, rect: DOMRect | HTMLElement, camera: BoardViewport, coalesce?: boolean): BoardPointerEvent;
 //#endregion
 export { toBoardPointerEvent };

package/dist/board/stage/pointer.js

@@ -1,16 +1,15 @@
 import { pointToWorld, screenPoint } from "../model/geometry.js";
+import { elementClientToLocal } from "../model/client-geometry.js";
 //#region src/board/stage/pointer.ts
 function pressureOf(event) {
 	return event.pointerType === "pen" && event.pressure > 0 ? event.pressure : .5;
 }
-function screenOf(event, rect) {
-	return screenPoint(event.clientX - rect.left, event.clientY - rect.top);
-}
 function toBoardPointerEvent(event, rect, camera, coalesce = false) {
-	const screen = screenOf(event, rect);
+	const local = "getBoundingClientRect" in rect ? elementClientToLocal(rect) : (x, y) => screenPoint(x - rect.left, y - rect.top);
+	const screen = local(event.clientX, event.clientY);
 	const coalesced = coalesce ? event.getCoalescedEvents?.() : void 0;
 	const samples = coalesced && coalesced.length > 1 ? coalesced.map((sample) => ({
-		world: pointToWorld(screenOf(sample, rect), camera),
+		world: pointToWorld(local(sample.clientX, sample.clientY), camera),
 		pressure: pressureOf(sample)
 	})) : void 0;
 	return {

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

@@ -24,6 +24,10 @@ type SceneSyncInput = {
   structureVersion: number;
   geometryVersion: number;
   gestureActive: boolean;
+  focus?: {
+    x: number;
+    y: number;
+  };
 };
 type BoardSceneNode = {
   item: BoardSceneItem;
@@ -32,6 +36,9 @@ type BoardSceneNode = {
 type BoardScene = {
   sync: (input: SceneSyncInput) => void;
   getNode: (itemId: string) => BoardSceneNode | null;
+  holders: (key: string) => ReadonlySet<string>;
+  readonly liveVersion: number;
+  liveIds: () => ReadonlySet<string>;
   readonly animated: boolean;
   tick: (clock: number) => number | null;
   destroy: (context: BoardRenderContext) => void;
@@ -40,7 +47,7 @@ declare function createBoardScene(options: {
   world: Container;
   overlay: Graphics;
   getRenderer: BoardCardRendererResolver;
-  onFarLayerFrame?: () => void;
+  requestFrame?: () => void;
 }): BoardScene;
 //#endregion
 export { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene };

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 { 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
@@ -7,11 +8,13 @@ const FAR_LAYER_ENTER = 450;
 const FAR_LAYER_EXIT = 350;
 const FAR_PASS_BATCH = 240;
 const FAR_LIVE_LIMIT = 64;
+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;
 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 +34,34 @@ 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 = "";
+	const pendingResolution = /* @__PURE__ */ new Set();
+	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);
@@ -54,6 +71,7 @@ function createBoardScene(options) {
 	function recycle(id, entry, context, destroyed) {
 		setHeldKey(context, id, null);
 		cards.delete(id);
+		pendingResolution.delete(id);
 		animatedIds.delete(id);
 		tickingIds.delete(id);
 		if (destroyed) return;
@@ -119,7 +137,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;
 	}
@@ -167,7 +185,7 @@ function createBoardScene(options) {
 			}
 			if (index < ids.length) {
 				farFrame = requestAnimationFrame(step);
-				if (target === farFront) options.onFarLayerFrame?.();
+				if (target === farFront) options.requestFrame?.();
 				return;
 			}
 			if (target === farBack) {
@@ -180,7 +198,7 @@ function createBoardScene(options) {
 			farFront.visible = farActive;
 			farPainted = true;
 			farRunning = false;
-			options.onFarLayerFrame?.();
+			options.requestFrame?.();
 			if (farQueued) runFarPass();
 		};
 		step();
@@ -277,6 +295,11 @@ function createBoardScene(options) {
 	}
 	function sync(input) {
 		const { items, scene, context, getItem, visibleIds, pinnedIds, globalSig, structureVersion, geometryVersion, gestureActive } = input;
+		const resolution = `${textZoomBucket(context.zoom)}:${context.textResolution}`;
+		if (resolution !== lastResolution) {
+			lastResolution = resolution;
+			queueResolution(input.focus);
+		}
 		const structureChanged = structureVersion !== lastStructureVersion;
 		if (structureChanged) {
 			lastStructureVersion = structureVersion;
@@ -304,7 +327,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 +376,16 @@ 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);
+				pendingResolution.delete(id);
 			}
 		}
+		refreshResolution(context);
+		if (liveSetChanged) liveVersion += 1;
 		if (structureChanged || liveSetChanged) syncClips(scene);
 		if (context.zoom !== lastZoom) {
 			lastZoom = context.zoom;
@@ -363,6 +396,27 @@ function createBoardScene(options) {
 		if (structureChanged || farModeChanged || liveSetChanged || liftChanged) applyChildOrder(scene);
 		syncLiveStrokes(input);
 	}
+	function queueResolution(focus) {
+		const ids = [...cards].filter(([, entry]) => entry.renderer.resolution);
+		if (focus) {
+			const distance = ({ item: { frame } }) => (frame.x + frame.width / 2 - focus.x) ** 2 + (frame.y + frame.height / 2 - focus.y) ** 2;
+			ids.sort(([, a], [, b]) => distance(a) - distance(b));
+		}
+		pendingResolution.clear();
+		for (const [id] of ids) pendingResolution.add(id);
+	}
+	function refreshResolution(context) {
+		let budget = RESOLUTION_BATCH;
+		for (const id of pendingResolution) {
+			if (budget-- === 0) break;
+			pendingResolution.delete(id);
+			const entry = cards.get(id);
+			if (!entry) continue;
+			entry.renderer.resolution?.(entry.container, entry.item, context);
+			if (entry.renderer.tick) tickingIds.add(id);
+		}
+		if (pendingResolution.size) options.requestFrame?.();
+	}
 	function tick(clock) {
 		let next = null;
 		for (const id of tickingIds) {
@@ -391,6 +445,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 +457,8 @@ function createBoardScene(options) {
 		visibleMemo = null;
 		lastStructureVersion = -1;
 		lastZoom = NaN;
+		lastResolution = "";
+		pendingResolution.clear();
 	}
 	return {
 		sync,
@@ -412,6 +469,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>>;
 };