@neta-art/cohub 12.2.0 → 12.4.0

package/dist/board/render/renderers/file-card-renderer.js

@@ -1,4 +1,5 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { boardItemPreview } from "../../../protocol/dist/board-model.js";
 import { fileCategory, fileStem } from "../../model/file-snapshot.js";
 import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
 import { boardCardDetailed } from "../lod.js";
@@ -7,7 +8,7 @@ import { syncTextResolution } from "../text-resolution.js";
 import { createCardTag, syncCardTag, zoomCardTag } from "../card-tag.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.ts
 const PADDING = 10;
@@ -27,8 +28,34 @@ const partsByContainer = /* @__PURE__ */ new WeakMap();
 function detailFor(zoom) {
 	return boardCardDetailed(zoom) ? "full" : "title";
 }
-function coverHeight(item, height) {
-	if (filePreviewKind(item.props.snapshot) !== "cover") return 0;
+function viewOf(item) {
+	if (item.type === "file") {
+		const { src, snapshot } = item.props;
+		return {
+			src,
+			title: snapshot?.title || fileStem(src),
+			excerpt: snapshot?.excerpt ?? "",
+			kind: filePreviewKind(snapshot),
+			meta: fileMetaLine(src, snapshot?.size),
+			mark: fileTypeLabel(src),
+			category: fileCategory(src, snapshot?.mimeType)
+		};
+	}
+	const preview = boardItemPreview(item);
+	if (!preview) return null;
+	const label = (item.type.split(".").pop() ?? item.type).toUpperCase();
+	return {
+		src: preview.src ?? null,
+		title: preview.title || item.type,
+		excerpt: preview.excerpt ?? "",
+		kind: preview.cover ? "cover" : preview.excerpt ? "text" : "blank",
+		meta: label,
+		mark: label,
+		category: preview.src ? fileCategory(preview.src) : "other"
+	};
+}
+function coverHeight(view, height) {
+	if (view.kind !== "cover") return 0;
 	const ideal = Math.round(height * COVER_RATIO);
 	return Math.max(0, Math.min(ideal, height - MIN_BODY_FOR_COVER));
 }
@@ -47,31 +74,31 @@ function syncClip(parts, rect, style) {
 }
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
-	if (!parts) return;
-	syncContent(parts, item, context);
+	const view = viewOf(item);
+	if (!parts || !view) return;
+	syncContent(parts, item, view, context);
 	for (const text of [
 		parts.title,
 		parts.excerpt,
 		parts.typeMark
 	]) syncTextResolution(text, context.textResolution);
 }
-function syncContent(parts, item, context) {
+function syncContent(parts, item, view, context) {
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const detail = detailFor(context.zoom);
 	const elevation = cardElevation(context, item.id);
 	syncCardTag(parts.tag, {
 		glyph: "file",
-		text: fileMetaLine(item.props.src, item.props.snapshot?.size),
+		text: view.meta,
 		width
 	}, context);
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
 	const coverFailed = Boolean(key && !texture && context.hasError(key));
-	const fileState = context.fileState(item.props.src);
-	const band = coverHeight(item, height);
-	const kind = filePreviewKind(item.props.snapshot);
-	const category = fileCategory(item.props.src, item.props.snapshot?.mimeType);
+	const fileState = view.src ? context.fileState(view.src) : "ok";
+	const band = coverHeight(view, height);
+	const { kind, category, title, excerpt, mark } = view;
 	const accent = fileCategoryAccent(category, context.palette);
 	const visualSig = [
 		key ?? "",
@@ -130,9 +157,6 @@ function syncContent(parts, item, context) {
 		parts.excerpt.visible = detail === "full";
 		parts.typeMark.visible = kind === "blank";
 	}
-	const title = item.props.snapshot?.title || fileStem(item.props.src);
-	const excerpt = item.props.snapshot?.excerpt ?? "";
-	const mark = fileTypeLabel(item.props.src);
 	const innerWidth = Math.max(1, width - 20);
 	const showTypeMark = kind === "blank";
 	const textSig = [
@@ -188,7 +212,7 @@ function syncContent(parts, item, context) {
 }
 const fileCardRenderer = {
 	id: "file-card",
-	canRender: (item) => item.type === "file",
+	canRender: (item) => item.type === "file" || boardItemPreview(item) !== null,
 	create: (item, context) => {
 		const root = new Container();
 		const plate = new Graphics();
@@ -252,23 +276,19 @@ const fileCardRenderer = {
 			visualSig: "",
 			textSig: ""
 		});
-		if (item.type === "file") sync(root, item, context);
+		sync(root, item, context);
 		return root;
 	},
-	update: (container, item, context) => {
-		if (item.type === "file") sync(container, item, context);
-	},
-	resolution: (container, item, context) => {
-		if (item.type === "file") sync(container, item, context);
-	},
+	update: sync,
+	resolution: sync,
 	zoom: (container, zoom) => {
 		const tag = partsByContainer.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);
 	},
 	renderFar: (graphics, item, context) => {
-		const category = fileCategory(item.type === "file" ? item.props.src : "", item.type === "file" ? item.props.snapshot?.mimeType : void 0);
+		const category = viewOf(item)?.category ?? "other";
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .96,
 			accent: fileCategoryAccent(category, context.palette),
 			accentAlpha: .45

package/dist/board/render/renderers/frame-card-renderer.js

@@ -1,9 +1,11 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { BOARD_FRAME_LABEL_LINE_HEIGHT, frameLabelOffset } from "../../model/text-metrics.js";
 import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { createLabel, positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
+import "../labels.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/frame-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -57,19 +59,24 @@ function sync(container, item, context) {
 	parts.label.visible = decorated;
 	const title = locked ? `🔒 ${props.label}`.trim() : props.label;
 	const labelColor = style.stroke ? baseStroke : context.palette.muted;
+	const size = context.style.frameLabelSize;
 	const textSig = [
 		title,
 		labelColor,
-		context.style.font
+		context.style.font,
+		size
 	].join("|");
 	if (textSig !== parts.textSig) {
 		parts.textSig = textSig;
 		parts.label.text = title;
 		parts.label.style.fill = labelColor;
 		parts.label.style.fontFamily = context.style.font;
+		parts.label.style.fontSize = size;
+		parts.label.style.lineHeight = size * BOARD_FRAME_LABEL_LINE_HEIGHT;
+		const offset = frameLabelOffset(size);
+		parts.label.position.set(offset.x, offset.y);
 	}
 	syncTextResolution(parts.label, context.textResolution);
-	parts.label.position.set(4, -18);
 }
 const frameCardRenderer = {
 	id: "frame-card",
@@ -80,7 +87,6 @@ const frameCardRenderer = {
 		const label = createLabel("", {
 			fill: context.palette.muted,
 			fontFamily: BOARD_FONT_STACK,
-			fontSize: 12,
 			fontWeight: "600"
 		}, context.textResolution);
 		root.addChild(box, label);

package/dist/board/render/renderers/image-card-renderer.js

@@ -1,6 +1,6 @@
 import { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/image-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -137,7 +137,7 @@ const imageCardRenderer = {
 	lod: { kind: "media" },
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.hover,
+			fill: farPictureTone(item, context) ?? context.palette.hover,
 			fillAlpha: FAR_ALPHA
 		});
 	},

package/dist/board/render/renderers/model-card-renderer.js

@@ -5,7 +5,7 @@ import { boardCardDetailed } from "../lod.js";
 import { createCardTag, syncCardTag, traceCube, zoomCardTag } from "../card-tag.js";
 import { cardElevation, containRect, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { drawModelKey } from "./media-key.js";
 import { Container, Graphics, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/model-card-renderer.ts
@@ -120,7 +120,7 @@ const modelCardRenderer = {
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .96,
 			accent: context.palette.legendary,
 			accentAlpha: .45

package/dist/board/render/renderers/task-card-renderer.js

@@ -7,7 +7,7 @@ import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "..
 import { drawAudioWaveform } from "../audio-waveform.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { Container, FillGradient, Graphics, Sprite, Text } from "pixi.js";
 //#region src/board/render/renderers/task-card-renderer.ts
 const PADDING = 12;
@@ -512,7 +512,7 @@ const taskCardRenderer = {
 		const { status } = liveStatus(item, context);
 		const active = status === "failed" || status === "running" || status === "pending";
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .82,
 			...active ? {
 				accent: statusColor(status, context),

package/dist/board/render/renderers/video-card-renderer.js

@@ -3,7 +3,7 @@ import { boardCardDetailed } from "../lod.js";
 import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
 import { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { drawMediaPlayKey } from "./media-key.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/video-card-renderer.ts
@@ -125,7 +125,7 @@ const videoCardRenderer = {
 	lod: { kind: "media" },
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .96,
 			accent: context.palette.brand,
 			accentAlpha: .75

package/dist/board/render/style.d.ts

@@ -9,6 +9,7 @@ type BoardRenderStyle = {
   icons: "line" | "pixel";
   motion: "smooth" | "stepped";
   font: string;
+  frameLabelSize: number;
 };
 type BoardShadowStyle = {
   color: number;

package/dist/board/render/style.js

@@ -1,4 +1,5 @@
 import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
+import "../model/text-metrics.js";
 //#region src/board/render/style.ts
 const BASE = {
 	corner: "round",
@@ -14,7 +15,8 @@ const BASE = {
 	progress: "shimmer",
 	icons: "line",
 	motion: "smooth",
-	font: BOARD_FONT_STACK
+	font: BOARD_FONT_STACK,
+	frameLabelSize: 12
 };
 const SHADOW = {
 	light: {

package/dist/board/render/text-edit.d.ts

@@ -0,0 +1,32 @@
+import { BoardViewport } from "../model/geometry.js";
+import { BoardScene, BoardSceneItem } from "../model/scene.js";
+import { BoardRenderStyle } from "./style.js";
+import { BoardTextStyle } from "./text-measurement.js";
+//#region src/board/render/text-edit.d.ts
+/** A content-box textarea at left/top, transformed by `rotate(rotation deg) scale(scale)` about its center. */
+type BoardTextEditLayout = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  padding: {
+    x: number;
+    y: number;
+  };
+  scale: number;
+  rotation: number;
+  font: BoardTextStyle;
+  lineHeight: number;
+  textAlign: "left" | "center" | "right";
+  whiteSpace: "pre" | "pre-wrap";
+  live: boolean;
+};
+type BoardTextEditInput = {
+  viewport: BoardViewport;
+  scene: BoardScene;
+  style?: Partial<Pick<BoardRenderStyle, "font" | "frameLabelSize">>;
+  draft: string;
+};
+declare function boardTextEditLayout(item: BoardSceneItem, { viewport, scene, style, draft }: BoardTextEditInput): BoardTextEditLayout | null;
+//#endregion
+export { BoardTextEditInput, BoardTextEditLayout, boardTextEditLayout };

package/dist/board/render/text-edit.js

@@ -0,0 +1,134 @@
+import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
+import { layoutBoardText } from "../../protocol/dist/board-layout.js";
+import { degToRad, rotatePointAround, worldPoint, worldToScreen } from "../model/geometry.js";
+import { resolveSceneArrow } from "../model/arrow-geometry.js";
+import { BOARD_FRAME_LABEL_LINE_HEIGHT, frameLabelOffset, layoutShapeLabel } from "../model/text-metrics.js";
+import { boardTextStyle, canvasFont, canvasFontFamily, layoutTextLines } from "./text-measurement.js";
+import { ARROW_LABEL, arrowLabelAnchor } from "./labels.js";
+//#region src/board/render/text-edit.ts
+function place({ center, ...box }, viewport) {
+	const screen = worldToScreen(center, viewport);
+	return {
+		left: screen.x - box.width / 2 - box.padding.x,
+		top: screen.y - box.height / 2 - box.padding.y,
+		...box
+	};
+}
+function label(draft, font, lineHeight) {
+	const { lines, width } = layoutTextLines(draft, canvasFont(font));
+	return {
+		width: Math.max(width, font.fontSize * 4),
+		height: lines.length * lineHeight
+	};
+}
+function boardTextEditLayout(item, { viewport, scene, style, draft }) {
+	const { frame } = item;
+	const rotation = frame.rotation || 0;
+	const center = worldPoint(frame.x + frame.width / 2, frame.y + frame.height / 2);
+	const { zoom } = viewport;
+	if (item.type === "text") {
+		const { props } = item;
+		const text = layoutBoardText({
+			...props,
+			text: draft
+		});
+		const scale = zoom * frame.width / text.width;
+		return place({
+			center,
+			width: text.width,
+			height: text.height,
+			padding: {
+				x: 1 / scale,
+				y: 0
+			},
+			scale,
+			rotation,
+			font: boardTextStyle(props),
+			lineHeight: text.lineHeight,
+			textAlign: props.align ?? "left",
+			whiteSpace: props.width ? "pre-wrap" : "pre",
+			live: true
+		}, viewport);
+	}
+	if (item.type === "shape") {
+		const { props } = item;
+		const text = layoutShapeLabel({
+			text: draft,
+			fontSize: props.fontSize
+		}, frame.width);
+		return place({
+			center,
+			width: Math.max(0, frame.width - 16),
+			height: Math.min(frame.height, text.height),
+			padding: {
+				x: 8,
+				y: Math.max(0, (frame.height - text.height) / 2)
+			},
+			scale: zoom,
+			rotation,
+			font: boardTextStyle({
+				font: "sans",
+				fontSize: props.fontSize,
+				fontWeight: 500
+			}),
+			lineHeight: text.lineHeight,
+			textAlign: props.align ?? "center",
+			whiteSpace: "pre-wrap",
+			live: false
+		}, viewport);
+	}
+	if (item.type === "frame") {
+		const fontSize = style?.frameLabelSize ?? 12;
+		const lineHeight = fontSize * BOARD_FRAME_LABEL_LINE_HEIGHT;
+		const font = {
+			fontFamily: canvasFontFamily(style?.font ?? "\"Geist Variable\", \"Geist\", \"Noto Sans CJK SC\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", system-ui, -apple-system, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", \"Noto Sans Math\", \"Noto Sans Symbols 2\", \"DejaVu Sans\", \"FreeSans\", \"FreeSerif\", sans-serif"),
+			fontSize,
+			fontWeight: "600"
+		};
+		const size = label(draft, font, lineHeight);
+		const { x, y } = frameLabelOffset(fontSize);
+		const local = worldPoint(frame.x + x + size.width / 2, frame.y + y + size.height / 2);
+		return place({
+			center: rotation ? rotatePointAround(local, center, degToRad(rotation)) : local,
+			...size,
+			padding: {
+				x: 4,
+				y: 2
+			},
+			scale: zoom,
+			rotation,
+			font,
+			lineHeight,
+			textAlign: "left",
+			whiteSpace: "pre",
+			live: false
+		}, viewport);
+	}
+	if (item.type === "arrow") {
+		const { fontSize } = item.props;
+		const font = {
+			fontFamily: canvasFontFamily(BOARD_FONT_STACK),
+			fontSize,
+			fontWeight: ARROW_LABEL.fontWeight
+		};
+		const lineHeight = fontSize * ARROW_LABEL.lineHeight;
+		return place({
+			center: arrowLabelAnchor(resolveSceneArrow(item, scene), item.style),
+			...label(draft, font, lineHeight),
+			padding: {
+				x: fontSize * ARROW_LABEL.padX,
+				y: fontSize * ARROW_LABEL.padY
+			},
+			scale: zoom,
+			rotation: 0,
+			font,
+			lineHeight,
+			textAlign: "center",
+			whiteSpace: "pre",
+			live: false
+		}, viewport);
+	}
+	return null;
+}
+//#endregion
+export { boardTextEditLayout };

package/dist/board/render/text-fit.d.ts

@@ -1,8 +1,6 @@
 import { Text } from "pixi.js";
 //#region src/board/render/text-fit.d.ts
-declare function ellipsizeWrappedLines(lines: string[], maxLines: number): string;
-declare function fitLineWithEllipsis(line: string, wrapWidth: number, measureWidth: (value: string) => number): string;
 declare function fitTextToLines(text: Text, value: string, maxLines: number, wrapWidth: number): void;
 declare function fitTextToWidth(text: Text, value: string, width: number): void;
 //#endregion
-export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };
+export { fitTextToLines, fitTextToWidth };

package/dist/board/render/text-fit.js

@@ -1,49 +1,10 @@
-import { layoutTextLines } from "./text-measurement.js";
+import { fitLineWithEllipsis, layoutTextLines } from "./text-measurement.js";
 import { CanvasTextMetrics, fontStringFromTextStyle } from "pixi.js";
 //#region src/board/render/text-fit.ts
-function ellipsizeWrappedLines(lines, maxLines) {
-	if (maxLines <= 0 || lines.length === 0) return "";
-	if (lines.length <= maxLines) return lines.join("\n");
-	const kept = lines.slice(0, maxLines);
-	const lastIndex = kept.length - 1;
-	const last = (kept[lastIndex] ?? "").replace(/\s+$/u, "");
-	kept[lastIndex] = last ? `${last}…` : "…";
-	return kept.join("\n");
-}
-function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
-	const trimmed = line.replace(/\s+$/u, "");
-	if (!trimmed) return "…";
-	const full = `${trimmed}…`;
-	if (measureWidth(full) <= wrapWidth) return full;
-	let lo = 0;
-	let hi = trimmed.length;
-	let best = "…";
-	while (lo <= hi) {
-		const mid = lo + hi >> 1;
-		const candidate = mid > 0 ? `${trimmed.slice(0, mid)}…` : "…";
-		if (measureWidth(candidate) <= wrapWidth) {
-			best = candidate;
-			lo = mid + 1;
-		} else hi = mid - 1;
-	}
-	return best;
-}
 function fitTextToLines(text, value, maxLines, wrapWidth) {
-	const width = Math.max(1, wrapWidth);
 	text.style.wordWrap = false;
-	if (!value || maxLines <= 0) {
-		if (text.text !== "") text.text = "";
-		return;
-	}
-	const charCap = Math.max(maxLines * Math.ceil(width), maxLines * 4);
-	const sample = value.length > charCap ? value.slice(0, charCap) : value;
-	const { lines } = layoutTextLines(sample, fontStringFromTextStyle(text.style), width);
-	const kept = lines.slice(0, maxLines);
-	if (lines.length > maxLines || sample !== value) {
-		const lastIndex = kept.length - 1;
-		kept[lastIndex] = fitLineWithEllipsis(kept[lastIndex] ?? "", width, (candidate) => CanvasTextMetrics.measureText(candidate, text.style).width);
-	}
-	const fitted = kept.join("\n");
+	const { lines } = layoutTextLines(value, fontStringFromTextStyle(text.style), Math.max(1, wrapWidth), { maxLines });
+	const fitted = lines.join("\n");
 	if (text.text !== fitted) text.text = fitted;
 }
 function fitTextToWidth(text, value, width) {
@@ -53,4 +14,4 @@ function fitTextToWidth(text, value, width) {
 	if (text.text !== fitted) text.text = fitted;
 }
 //#endregion
-export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };
+export { fitTextToLines, fitTextToWidth };

package/dist/board/render/text-measurement.d.ts

@@ -15,10 +15,20 @@ type BoardTextStyle = {
 declare function canvasFontFamily(families: string): string;
 declare function boardTextStyle({ font, fontSize, fontWeight }: BoardTextFont): BoardTextStyle;
 declare function canvasFont({ fontFamily, fontSize, fontWeight }: BoardTextStyle): string;
-declare function layoutTextLines(text: string, font: string, maxWidth?: number): BoardTextLines;
+declare function measureTextWidth(text: string, font: string): number;
+type BoardTextWhiteSpace = "normal" | "pre-wrap";
+type BoardTextLineOptions = {
+  whiteSpace?: BoardTextWhiteSpace;
+  maxLines?: number;
+};
+type BoardTextLineLayout = BoardTextLines & {
+  truncated: boolean;
+};
+declare function layoutTextLines(text: string, font: string, maxWidth?: number, { whiteSpace, maxLines }?: BoardTextLineOptions): BoardTextLineLayout;
+declare function fitLineWithEllipsis(line: string, width: number, measureWidth: (value: string) => number): string;
 declare function cssBaselineShift(style: TextStyle): number;
 declare function installBoardTextMeasurement(): void;
 declare function ensureBoardTextMeasurement(): void;
 declare function onBoardTextFontsChange(listener: () => void): () => void;
 //#endregion
-export { BOARD_FONT_STACKS, BoardTextStyle, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, installBoardTextMeasurement, layoutTextLines, onBoardTextFontsChange };
+export { BOARD_FONT_STACKS, BoardTextLineLayout, BoardTextLineOptions, BoardTextStyle, BoardTextWhiteSpace, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, fitLineWithEllipsis, installBoardTextMeasurement, layoutTextLines, measureTextWidth, onBoardTextFontsChange };

package/dist/board/render/text-measurement.js

@@ -43,8 +43,8 @@ const measuredFonts = /* @__PURE__ */ new Set();
 const measuredFamilies = /* @__PURE__ */ new Set();
 const TRAILING_SPACE = /[ \t]+$/u;
 const unquote = (name) => name.trim().replace(/^["']|["']$/gu, "");
-function prepareText(text, font) {
-	const key = `${font}\n${text}`;
+function prepareText(text, font, whiteSpace) {
+	const key = `${whiteSpace}\n${font}\n${text}`;
 	let value = prepared.get(key);
 	if (value) {
 		prepared.delete(key);
@@ -55,30 +55,75 @@ function prepareText(text, font) {
 		measuredFonts.add(font);
 		for (const name of /px\s+(.+)$/u.exec(font)?.[1]?.split(",") ?? []) measuredFamilies.add(unquote(name));
 	}
-	value = prepareWithSegments(text, font, { whiteSpace: "pre-wrap" });
+	value = prepareWithSegments(text, font, { whiteSpace });
 	if (prepared.size >= PREPARED_LIMIT) prepared.delete(prepared.keys().next().value);
 	prepared.set(key, value);
 	return value;
 }
-function layoutTextLines(text, font, maxWidth = Number.POSITIVE_INFINITY) {
+let measureContext;
+function measureTextWidth(text, font) {
+	measureContext ??= DOMAdapter.get().createCanvas(1, 1).getContext("2d");
+	if (!measureContext) return 0;
+	measureContext.font = font;
+	return measureContext.measureText(text).width;
+}
+function layoutTextLines(text, font, maxWidth = Number.POSITIVE_INFINITY, { whiteSpace = "pre-wrap", maxLines = Number.POSITIVE_INFINITY } = {}) {
 	const lines = [];
-	let width = 0;
-	for (const paragraph of text.replace(/\r\n?/gu, "\n").replaceAll("	", " ").split("\n")) {
+	const widths = [];
+	if (maxLines <= 0) return {
+		lines,
+		width: 0,
+		truncated: text.length > 0
+	};
+	let source = whiteSpace === "normal" ? text.replace(/\s+/gu, " ").trim() : text.replace(/\r\n?/gu, "\n").replaceAll("	", " ");
+	const cap = Number.isFinite(maxLines) && Number.isFinite(maxWidth) ? maxLines * (Math.ceil(maxWidth) + 1) : Number.POSITIVE_INFINITY;
+	let truncated = source.length > cap;
+	if (truncated) source = source.slice(0, cap);
+	const paragraphs = whiteSpace === "normal" ? source ? [source] : [] : source.split("\n");
+	for (const paragraph of paragraphs) {
+		if (lines.length > maxLines) break;
 		if (!paragraph) {
 			lines.push("");
+			widths.push(0);
 			continue;
 		}
-		const wrapped = layoutWithLines(prepareText(paragraph, font), maxWidth, 1).lines;
+		const wrapped = layoutWithLines(prepareText(paragraph, font, whiteSpace), maxWidth, 1).lines;
 		for (const [index, line] of wrapped.entries()) {
 			lines.push(index === wrapped.length - 1 ? line.text : line.text.replace(TRAILING_SPACE, ""));
-			width = Math.max(width, line.width);
+			widths.push(line.width);
 		}
 	}
+	if (lines.length > maxLines) {
+		truncated = true;
+		lines.length = maxLines;
+		widths.length = maxLines;
+	}
+	if (truncated && lines.length > 0) {
+		const last = lines.length - 1;
+		lines[last] = fitLineWithEllipsis(lines[last], maxWidth, (value) => measureTextWidth(value, font));
+		widths[last] = measureTextWidth(lines[last], font);
+	}
 	return {
 		lines,
-		width
+		width: widths.reduce((max, width) => Math.max(max, width), 0),
+		truncated
 	};
 }
+const graphemes = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+function fitLineWithEllipsis(line, width, measureWidth) {
+	const trimmed = line.replace(/\s+$/u, "");
+	if (!trimmed) return "…";
+	if (measureWidth(`${trimmed}…`) <= width) return `${trimmed}…`;
+	const parts = graphemes ? Array.from(graphemes.segment(trimmed), ({ segment }) => segment) : Array.from(trimmed);
+	let lo = 0;
+	let hi = parts.length - 1;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (measureWidth(`${parts.slice(0, mid).join("")}…`) <= width) lo = mid;
+		else hi = mid - 1;
+	}
+	return `${parts.slice(0, lo).join("")}…`;
+}
 const baselineShifts = /* @__PURE__ */ new Map();
 function cssBaselineShift(style) {
 	const font = fontStringFromTextStyle(style);
@@ -128,4 +173,4 @@ function onBoardTextFontsChange(listener) {
 	return () => fontListeners.delete(listener);
 }
 //#endregion
-export { BOARD_FONT_STACKS, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, installBoardTextMeasurement, layoutTextLines, onBoardTextFontsChange };
+export { BOARD_FONT_STACKS, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, fitLineWithEllipsis, installBoardTextMeasurement, layoutTextLines, measureTextWidth, onBoardTextFontsChange };