chat-layout 1.1.0 → 1.1.2

package/README.md

@@ -108,6 +108,7 @@ Notes:
 ## Migration notes
 
 - Use `memoRenderItemBy(keyOf, renderItem)` when list items are primitives.
+- `memoRenderItemBy()` now uses a bounded LRU cache by default; pass `{ maxEntries: Infinity }` to keep the old unbounded behavior explicitly.
 - `FlexItem` exposes `grow`, `shrink`, and `alignSelf`; `basis` is no longer public.
 - `MultilineText` now uses `align` / `physicalAlign` instead of `alignment`.
 - `ListState.position` uses `undefined` for the renderer default anchor.

package/index.d.mts

@@ -518,7 +518,9 @@ declare function memoRenderItem<C extends CanvasRenderingContext2D, T extends ob
 /**
  * Memoizes `renderItem` by a caller-provided cache key.
  */
-declare function memoRenderItemBy<C extends CanvasRenderingContext2D, T, K>(keyOf: (item: T) => K, renderItem: (item: T) => Node<C>): ((item: T) => Node<C>) & {
+declare function memoRenderItemBy<C extends CanvasRenderingContext2D, T, K>(keyOf: (item: T) => K, renderItem: (item: T) => Node<C>, options?: {
+  maxEntries?: number;
+}): ((item: T) => Node<C>) & {
   reset: (item: T) => boolean;
   resetKey: (key: K) => boolean;
 };

package/index.mjs

@@ -1,5 +1,5 @@
 import { layoutNextLine, layoutWithLines, measureLineStats, measureNaturalWidth, prepareWithSegments } from "@chenglou/pretext";
-import { layoutNextRichInlineLineRange, materializeRichInlineLineRange, measureRichInlineStats, prepareRichInline, walkRichInlineLineRanges } from "@chenglou/pretext/rich-inline";
+import { layoutNextRichInlineLineRange, materializeRichInlineLineRange, measureRichInlineStats, prepareRichInline } from "@chenglou/pretext/rich-inline";
 //#region src/internal/node-registry.ts
 const registry = /* @__PURE__ */ new WeakMap();
 const revisions = /* @__PURE__ */ new WeakMap();
@@ -818,17 +818,15 @@ var Place = class extends Wrapper {
 };
 const INTRINSIC_MAX_WIDTH = Number.POSITIVE_INFINITY;
 const MIN_CONTENT_WIDTH_EPSILON = .001;
-const fontShiftCache = /* @__PURE__ */ new Map();
-const ellipsisWidthCache = /* @__PURE__ */ new Map();
 let sharedGraphemeSegmenter;
-function readLruValue(cache, key) {
+function readLruValue$1(cache, key) {
 	const cached = cache.get(key);
 	if (cached == null) return;
 	cache.delete(key);
 	cache.set(key, cached);
 	return cached;
 }
-function writeLruValue(cache, key, value, capacity) {
+function writeLruValue$1(cache, key, value, capacity) {
 	if (cache.has(key)) cache.delete(key);
 	else if (cache.size >= capacity) {
 		const firstKey = cache.keys().next().value;
@@ -838,17 +836,11 @@ function writeLruValue(cache, key, value, capacity) {
 	return value;
 }
 function measureFontShift(ctx) {
-	const font = ctx.graphics.font;
-	const cached = readLruValue(fontShiftCache, font);
-	if (cached != null) return cached;
 	const { fontBoundingBoxAscent: ascent = 0, fontBoundingBoxDescent: descent = 0 } = ctx.graphics.measureText("M");
-	return writeLruValue(fontShiftCache, font, ascent - descent, 64);
+	return ascent - descent;
 }
 function measureEllipsisWidth(ctx) {
-	const font = ctx.graphics.font;
-	const cached = readLruValue(ellipsisWidthCache, font);
-	if (cached != null) return cached;
-	return writeLruValue(ellipsisWidthCache, font, ctx.graphics.measureText("…").width, 64);
+	return ctx.graphics.measureText("…").width;
 }
 function getGraphemeSegmenter() {
 	if (sharedGraphemeSegmenter !== void 0) return sharedGraphemeSegmenter;
@@ -936,15 +928,14 @@ const LINE_START_CURSOR$1 = {
 	graphemeIndex: 0
 };
 const preparedTextCache = /* @__PURE__ */ new Map();
-const preparedUnitCache = /* @__PURE__ */ new WeakMap();
 function getPreparedTextCacheKey(text, font, whiteSpace, wordBreak) {
 	return `${font}\u0000${whiteSpace}\u0000${wordBreak}\u0000${text}`;
 }
 function readPreparedText(text, font, whiteSpace, wordBreak) {
 	const key = getPreparedTextCacheKey(text, font, whiteSpace, wordBreak);
-	const cached = readLruValue(preparedTextCache, key);
+	const cached = readLruValue$1(preparedTextCache, key);
 	if (cached != null) return cached;
-	return writeLruValue(preparedTextCache, key, prepareWithSegments(text, font, {
+	return writeLruValue$1(preparedTextCache, key, prepareWithSegments(text, font, {
 		whiteSpace,
 		wordBreak
 	}), 512);
@@ -973,8 +964,6 @@ function measurePreparedMinContentWidth(prepared, overflowWrap = "break-word") {
 	return maxWidth > 0 ? maxWidth : maxAnyWidth;
 }
 function getPreparedUnits(prepared) {
-	const cached = preparedUnitCache.get(prepared);
-	if (cached != null) return cached;
 	const units = [];
 	for (let index = 0; index < prepared.segments.length; index += 1) {
 		const segment = prepared.segments[index] ?? "";
@@ -995,7 +984,6 @@ function getPreparedUnits(prepared) {
 			width: segmentWidth
 		});
 	}
-	preparedUnitCache.set(prepared, units);
 	return units;
 }
 function joinUnitText(units, start, end) {
@@ -1231,6 +1219,8 @@ function layoutTextWithOverflow(ctx, text, maxWidth, options = {}) {
 //#endregion
 //#region src/text/rich.ts
 const RICH_PREPARED_CACHE_CAPACITY = 256;
+const LEADING_COLLAPSIBLE_BOUNDARY_RE = /^[ \t\n\f\r]+/;
+const TRAILING_COLLAPSIBLE_BOUNDARY_RE = /[ \t\n\f\r]+$/;
 const richPreparedCache = /* @__PURE__ */ new Map();
 function withFont(ctx, font, cb) {
 	const previousFont = ctx.graphics.font;
@@ -1246,20 +1236,87 @@ function getRichPreparedCacheKey(spans, defaultFont) {
 }
 function readRichPrepared(spans, defaultFont) {
 	const key = getRichPreparedCacheKey(spans, defaultFont);
-	const cached = readLruValue(richPreparedCache, key);
+	const cached = readLruValue$1(richPreparedCache, key);
 	if (cached != null) return cached;
-	return writeLruValue(richPreparedCache, key, prepareRichInline(spans.map((span) => ({
+	const items = spans.map((span) => ({
 		text: span.text,
 		font: span.font ?? defaultFont,
 		break: span.break,
 		extraWidth: span.extraWidth
-	}))), RICH_PREPARED_CACHE_CAPACITY);
+	}));
+	const preparedItemIndexBySourceItemIndex = buildPreparedItemIndexBySourceItemIndex(spans);
+	return writeLruValue$1(richPreparedCache, key, {
+		prepared: prepareRichInline(items),
+		preparedItemIndexBySourceItemIndex
+	}, RICH_PREPARED_CACHE_CAPACITY);
+}
+function trimRichInlineBoundaryWhitespace(text) {
+	return text.replace(LEADING_COLLAPSIBLE_BOUNDARY_RE, "").replace(TRAILING_COLLAPSIBLE_BOUNDARY_RE, "");
+}
+function buildPreparedItemIndexBySourceItemIndex(spans) {
+	const preparedItemIndexBySourceItemIndex = Array.from({ length: spans.length });
+	let preparedItemIndex = 0;
+	for (let index = 0; index < spans.length; index += 1) {
+		if (trimRichInlineBoundaryWhitespace(spans[index].text).length === 0) continue;
+		preparedItemIndexBySourceItemIndex[index] = preparedItemIndex;
+		preparedItemIndex += 1;
+	}
+	return preparedItemIndexBySourceItemIndex;
+}
+function getRichFragmentStartCursor(prepared, fragment) {
+	const itemIndex = prepared.preparedItemIndexBySourceItemIndex[fragment.itemIndex];
+	if (itemIndex == null) return null;
+	return {
+		itemIndex,
+		segmentIndex: fragment.start.segmentIndex,
+		graphemeIndex: fragment.start.graphemeIndex
+	};
+}
+function splitOverflowingRichLineRange(prepared, lineRange, maxWidth) {
+	if (lineRange.width <= maxWidth || lineRange.fragments.length <= 1) return lineRange;
+	const trailingFragment = lineRange.fragments[lineRange.fragments.length - 1];
+	const splitCursor = getRichFragmentStartCursor(prepared, trailingFragment);
+	if (splitCursor == null) return lineRange;
+	const fragments = lineRange.fragments.slice(0, -1);
+	return {
+		fragments,
+		width: fragments.reduce((total, fragment) => total + fragment.gapBefore + fragment.occupiedWidth, 0),
+		end: splitCursor
+	};
+}
+function layoutNextConstrainedRichInlineLineRange(prepared, maxWidth, start) {
+	const lineRange = layoutNextRichInlineLineRange(prepared.prepared, maxWidth, start);
+	if (lineRange == null) return null;
+	return splitOverflowingRichLineRange(prepared, lineRange, maxWidth);
+}
+function walkConstrainedRichInlineLineRanges(prepared, maxWidth, onLine) {
+	let lineCount = 0;
+	let cursor;
+	while (true) {
+		const lineRange = layoutNextConstrainedRichInlineLineRange(prepared, maxWidth, cursor);
+		if (lineRange == null) return lineCount;
+		onLine(lineRange);
+		lineCount += 1;
+		cursor = lineRange.end;
+	}
+}
+function measureConstrainedRichInlineStats(prepared, maxWidth) {
+	let lineCount = 0;
+	let maxLineWidth = 0;
+	walkConstrainedRichInlineLineRanges(prepared, maxWidth, (lineRange) => {
+		lineCount += 1;
+		if (lineRange.width > maxLineWidth) maxLineWidth = lineRange.width;
+	});
+	return {
+		lineCount,
+		maxLineWidth
+	};
 }
 function measureRichFragmentShift(ctx, font) {
 	return withFont(ctx, font, () => measureFontShift(ctx));
 }
 function materializeRichLine(ctx, spans, defaultFont, defaultColor, lineRange, overflowed) {
-	const richLine = materializeRichInlineLineRange(readRichPrepared(spans, defaultFont), lineRange);
+	const richLine = materializeRichInlineLineRange(readRichPrepared(spans, defaultFont).prepared, lineRange);
 	const fragments = richLine.fragments.map((fragment) => {
 		const span = spans[fragment.itemIndex];
 		const font = span?.font ?? defaultFont;
@@ -1412,7 +1469,7 @@ function layoutRichFirstLineIntrinsic(ctx, spans, defaultFont, defaultColor) {
 		fragments: [],
 		overflowed: false
 	};
-	const lineRange = layoutNextRichInlineLineRange(readRichPrepared(spans, defaultFont), INTRINSIC_MAX_WIDTH);
+	const lineRange = layoutNextRichInlineLineRange(readRichPrepared(spans, defaultFont).prepared, INTRINSIC_MAX_WIDTH);
 	if (lineRange == null) return {
 		width: 0,
 		fragments: [],
@@ -1427,7 +1484,7 @@ function layoutRichFirstLine(ctx, spans, maxWidth, defaultFont, defaultColor) {
 		fragments: [],
 		overflowed: false
 	};
-	const lineRange = layoutNextRichInlineLineRange(readRichPrepared(spans, defaultFont), clampedMaxWidth);
+	const lineRange = layoutNextConstrainedRichInlineLineRange(readRichPrepared(spans, defaultFont), clampedMaxWidth);
 	if (lineRange == null) return {
 		width: 0,
 		fragments: [],
@@ -1454,7 +1511,7 @@ function measureRichText(_ctx, spans, maxWidth, defaultFont) {
 		width: 0,
 		lineCount: 0
 	};
-	const { maxLineWidth: width, lineCount } = measureRichInlineStats(readRichPrepared(spans, defaultFont), maxWidth);
+	const { maxLineWidth: width, lineCount } = measureConstrainedRichInlineStats(readRichPrepared(spans, defaultFont), maxWidth);
 	return {
 		width,
 		lineCount
@@ -1465,7 +1522,7 @@ function measureRichTextIntrinsic(_ctx, spans, defaultFont) {
 		width: 0,
 		lineCount: 0
 	};
-	const { maxLineWidth: width, lineCount } = measureRichInlineStats(readRichPrepared(spans, defaultFont), INTRINSIC_MAX_WIDTH);
+	const { maxLineWidth: width, lineCount } = measureRichInlineStats(readRichPrepared(spans, defaultFont).prepared, INTRINSIC_MAX_WIDTH);
 	return {
 		width,
 		lineCount
@@ -1487,7 +1544,7 @@ function measureRichTextMinContent(_ctx, spans, defaultFont, overflowWrap = "bre
 		width: 0,
 		lineCount: 0
 	};
-	const { lineCount } = measureRichInlineStats(readRichPrepared(spans, defaultFont), Math.max(maxWidth, MIN_CONTENT_WIDTH_EPSILON));
+	const { lineCount } = measureConstrainedRichInlineStats(readRichPrepared(spans, defaultFont), Math.max(maxWidth, MIN_CONTENT_WIDTH_EPSILON));
 	return {
 		width: maxWidth,
 		lineCount
@@ -1501,7 +1558,7 @@ function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultColor) {
 	};
 	const prepared = readRichPrepared(spans, defaultFont);
 	const lineRanges = [];
-	walkRichInlineLineRanges(prepared, maxWidth, (lineRange) => lineRanges.push(lineRange));
+	walkConstrainedRichInlineLineRanges(prepared, maxWidth, (lineRange) => lineRanges.push(lineRange));
 	if (lineRanges.length === 0) return {
 		width: 0,
 		lines: [],
@@ -2086,27 +2143,56 @@ var DebugRenderer = class extends BaseRenderer {
 	}
 };
 //#endregion
+//#region src/renderer/weak-listeners.ts
+function pruneWeakListenerMap(listeners) {
+	for (const [token, listener] of listeners) if (listener.ownerRef.deref() == null) listeners.delete(token);
+}
+function emitWeakListeners(listeners, event) {
+	for (const [token, listener] of [...listeners]) {
+		const owner = listener.ownerRef.deref();
+		if (owner == null) {
+			listeners.delete(token);
+			continue;
+		}
+		listener.notify(owner, event);
+	}
+}
+//#endregion
 //#region src/renderer/list-state.ts
 const listStateListeners = /* @__PURE__ */ new WeakMap();
+const listStateListenerRegistry = typeof FinalizationRegistry === "function" ? new FinalizationRegistry(({ listRef, token }) => {
+	const list = listRef.deref();
+	if (list == null) return;
+	deleteListStateListener(list, token);
+}) : null;
+function deleteListStateListener(list, token) {
+	const listeners = listStateListeners.get(list);
+	if (listeners == null) return;
+	listeners.delete(token);
+	if (listeners.size === 0) listStateListeners.delete(list);
+}
 function emitListStateChange(list, change) {
 	const listeners = listStateListeners.get(list);
-	if (listeners == null || listeners.size === 0) return;
-	for (const listener of [...listeners]) listener(change);
+	if (listeners == null) return;
+	emitWeakListeners(listeners, change);
+	if (listeners.size === 0) listStateListeners.delete(list);
 }
-function subscribeListState(list, listener) {
+function subscribeListState(list, owner, listener) {
 	const key = list;
 	let listeners = listStateListeners.get(key);
 	if (listeners == null) {
-		listeners = /* @__PURE__ */ new Set();
+		listeners = /* @__PURE__ */ new Map();
 		listStateListeners.set(key, listeners);
-	}
-	listeners.add(listener);
-	return () => {
-		const current = listStateListeners.get(key);
-		if (current == null) return;
-		current.delete(listener);
-		if (current.size === 0) listStateListeners.delete(key);
-	};
+	} else pruneWeakListenerMap(listeners);
+	const token = Symbol();
+	listeners.set(token, {
+		ownerRef: new WeakRef(owner),
+		notify: listener
+	});
+	listStateListenerRegistry?.register(owner, {
+		listRef: new WeakRef(key),
+		token
+	});
 }
 var ListState = class {
 	#items;
@@ -2200,9 +2286,31 @@ var ListState = class {
 };
 //#endregion
 //#region src/renderer/memo.ts
+const DEFAULT_MEMO_RENDER_ITEM_BY_MAX_ENTRIES = 512;
 function isWeakMapKey(value) {
 	return typeof value === "object" && value !== null || typeof value === "function";
 }
+function normalizeMaxEntries(maxEntries) {
+	if (maxEntries === Number.POSITIVE_INFINITY) return Number.POSITIVE_INFINITY;
+	if (maxEntries == null || !Number.isFinite(maxEntries)) return DEFAULT_MEMO_RENDER_ITEM_BY_MAX_ENTRIES;
+	return Math.max(0, Math.trunc(maxEntries));
+}
+function readLruValue(cache, key) {
+	const cached = cache.get(key);
+	if (cached == null) return;
+	cache.delete(key);
+	cache.set(key, cached);
+	return cached;
+}
+function writeLruValue(cache, key, value, maxEntries) {
+	if (cache.has(key)) cache.delete(key);
+	else if (Number.isFinite(maxEntries) && cache.size >= maxEntries) {
+		const oldestKey = cache.keys().next().value;
+		if (oldestKey != null) cache.delete(oldestKey);
+	}
+	if (maxEntries > 0) cache.set(key, value);
+	return value;
+}
 /**
 * Memoizes `renderItem` by object identity.
 */
@@ -2222,15 +2330,14 @@ function memoRenderItem(renderItem) {
 /**
 * Memoizes `renderItem` by a caller-provided cache key.
 */
-function memoRenderItemBy(keyOf, renderItem) {
+function memoRenderItemBy(keyOf, renderItem, options = {}) {
 	const cache = /* @__PURE__ */ new Map();
+	const maxEntries = normalizeMaxEntries(options.maxEntries);
 	function fn(item) {
 		const key = keyOf(item);
-		const cached = cache.get(key);
+		const cached = readLruValue(cache, key);
 		if (cached != null) return cached;
-		const result = renderItem(item);
-		cache.set(key, result);
-		return result;
+		return writeLruValue(cache, key, renderItem(item), maxEntries);
 	}
 	return Object.assign(fn, {
 		reset: (item) => cache.delete(keyOf(item)),
@@ -2272,11 +2379,10 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	#jumpAnimation;
 	#replacementAnimations = /* @__PURE__ */ new Map();
 	#nextReplacementLayerKey = 0;
-	#unsubscribeListState;
 	constructor(graphics, options) {
 		super(graphics, options);
-		this.#unsubscribeListState = subscribeListState(options.list, (change) => {
-			this.#handleListStateChange(change);
+		subscribeListState(options.list, this, (owner, change) => {
+			owner.#handleListStateChange(change);
 		});
 	}
 	/** Current anchor item index. */