@stll/folio-core 0.61.0 → 0.63.0

package/dist/display-list/dom/renderDisplayListToDom.js

@@ -1,7 +1,9 @@
 import { writeCommentAnchorIds } from "../../render-dom/commentAnchorAttributes.js";
 import { bytesToDataUrl } from "../../utils/base64.js";
 import { imageLuminanceFilter } from "../../utils/imageLuminance.js";
+import { applyTextAdvanceGaps } from "../../utils/textAdvanceGapsDom.js";
 import { anchorTargetAttrs } from "../../utils/urlSecurity.js";
+import { retainObjectUrl } from "../pageResourceOwnership.js";
 import { STROKE_DASH_FACTORS, strokeCrossExtentPx, walkRegions } from "../primitives.js";
 import { panic } from "better-result";
 //#region src/display-list/dom/renderDisplayListToDom.ts
@@ -34,9 +36,9 @@ import { panic } from "better-result";
 * surfaces it, because a page missing marks must say so.
 *
 * Object URLs minted for images and embedded fonts outlive this call, one per
-* image and one per embedded face for the whole render. A caller that discards
-* the returned elements should revoke them (`img[src^="blob:"]` and the `src`
-* of each `@font-face` rule).
+* image and one embedded face for the whole render. A caller that discards a
+* rendered page must release its resources with `releaseDisplayPageResources`
+* before removing the page.
 */
 const PAGE_CLASS_NAME = "layout-page";
 /**
@@ -48,7 +50,8 @@ const PAGE_ELEMENT_ID_PREFIX = "page-";
 const DEGREES_PER_RADIAN = 180 / Math.PI;
 const IMAGE_MIME_TYPES = {
 	png: "image/png",
-	jpeg: "image/jpeg"
+	jpeg: "image/jpeg",
+	svg: "image/svg+xml"
 };
 /**
 * The display list does not say whether an embedded face is sfnt or WOFF, so a
@@ -115,16 +118,23 @@ const fontFaceRule = (face, embedded, src) => `@font-face { font-family: ${quote
 */
 const embeddedFontFaceCss = (fonts, urls) => {
 	const srcById = /* @__PURE__ */ new Map();
+	const objectUrls = [];
 	const rules = [];
 	for (const face of fonts) {
 		const embedded = face.embedded;
 		if (embedded === void 0) continue;
 		const cached = srcById.get(embedded.id);
 		const src = cached ?? binarySrc(embedded.bytes, FONT_MIME_TYPE, urls);
-		if (cached === void 0) srcById.set(embedded.id, src);
+		if (cached === void 0) {
+			srcById.set(embedded.id, src);
+			if (src.startsWith("blob:")) objectUrls.push(src);
+		}
 		rules.push(fontFaceRule(face, embedded, src));
 	}
-	return rules.join("\n");
+	return {
+		css: rules.join("\n"),
+		objectUrls
+	};
 };
 const createAbsoluteDiv = (context, rect) => {
 	const element = context.doc.createElement("div");
@@ -174,7 +184,7 @@ const strokeBackground = (stroke, axes) => {
 		}
 		case "double": {
 			const rulePercent = 100 / 3;
-			return `linear-gradient(${axes.cross}, ${color} 0%, ${color} ${rulePercent}%, transparent ${rulePercent}%, transparent ${100 - rulePercent}%, ${color} ${100 - rulePercent}%)`;
+			return `linear-gradient(${axes.cross}, ${color} 0%, ${color} ${rulePercent}%, transparent ${rulePercent}%, transparent 66.66666666666666%, ${color} 66.66666666666666%)`;
 		}
 		case "wavy": {
 			const halfPeriod = stroke.thicknessPx * 6 / 2;
@@ -219,6 +229,21 @@ const paintLineSegment = (line, context) => {
 	}
 	context.parent.append(element);
 };
+const paintPolyline = ({ points, stroke }, context) => {
+	for (let index = 1; index < points.length; index += 1) {
+		const from = points[index - 1];
+		const to = points[index];
+		if (from === void 0 || to === void 0) continue;
+		paintLineSegment({
+			kind: "line",
+			x1Px: from.xPx,
+			y1Px: from.yPx,
+			x2Px: to.xPx,
+			y2Px: to.yPx,
+			stroke
+		}, context);
+	}
+};
 /**
 * Reapply what the measurer added to the advances.
 *
@@ -252,11 +277,11 @@ const applyAdjustments = (span, adjustments) => {
 * and in each note, so a surface has to know which one it landed in before it
 * can use the number at all.
 */
-const applyModelRange = (span, range) => {
+const applyModelRange = (span, range, purpose = "editing") => {
 	if (range === void 0) return;
-	span.className = "layout-run-text";
-	span.dataset["pmStart"] = String(range.start);
-	span.dataset["pmEnd"] = String(range.end);
+	if (purpose === "editing") span.className = "layout-run-text";
+	span.dataset[purpose === "editing" ? "pmStart" : "decorationStart"] = String(range.start);
+	span.dataset[purpose === "editing" ? "pmEnd" : "decorationEnd"] = String(range.end);
 	const { story } = range;
 	span.dataset["story"] = story.kind;
 	switch (story.kind) {
@@ -300,6 +325,8 @@ const paintGlyphRun = (run, context) => {
 	applyAdjustments(span, run.adjustments);
 	span.dataset["advanceSum"] = String(advanceSum);
 	applyModelRange(span, run.pmRange);
+	applyModelRange(span, run.decorationRange, "decoration");
+	if (run.decorationRange) span.dataset["decorationTextOffset"] = String(run.decorationRange.textOffset);
 	if (run.collapsedEdge !== void 0) {
 		span.dataset[run.collapsedEdge.side === "leading" ? "collapsedLeadingSpaces" : "collapsedTrailingSpaces"] = "true";
 		span.dataset["collapsedSpaceAdvance"] = String(run.collapsedEdge.spaceAdvancePx);
@@ -308,6 +335,7 @@ const paintGlyphRun = (run, context) => {
 		span.style.wordSpacing = "0";
 	}
 	span.textContent = run.text;
+	applyTextAdvanceGaps(span, run.adjustments?.automaticTextSpacingGaps ?? []);
 	context.parent.append(span);
 };
 const grownRect = (rect, amountPx) => ({
@@ -399,7 +427,9 @@ const paintImage = ({ image, rect, crop, opacity, brightness, contrast }, contex
 		element.style.height = px(fullHeight);
 	}
 	element.alt = "";
-	element.src = binarySrc(source.bytes, IMAGE_MIME_TYPES[source.format], context.binaryUrls);
+	const src = binarySrc(source.bytes, IMAGE_MIME_TYPES[source.format], context.binaryUrls);
+	element.src = src;
+	if (src.startsWith("blob:")) retainObjectUrl(element, src);
 	clip.append(element);
 	context.parent.append(clip);
 };
@@ -447,6 +477,18 @@ const paintPrimitive = (primitive, context) => {
 		case "glyphRun": return paintGlyphRun(primitive, context);
 		case "rect": return paintRect(primitive, context);
 		case "line": return paintLineSegment(primitive, context);
+		case "polygon": {
+			const element = context.doc.createElement("div");
+			element.style.position = "absolute";
+			element.style.inset = "0";
+			element.style.width = "100%";
+			element.style.height = "100%";
+			element.style.clipPath = `polygon(${primitive.points.map(({ xPx, yPx }) => `${px(xPx - context.originXPx)} ${px(yPx - context.originYPx)}`).join(", ")})`;
+			element.style.background = cssColor(primitive.fill);
+			context.parent.append(element);
+			return;
+		}
+		case "polyline": return paintPolyline(primitive, context);
 		case "image": return paintImage(primitive, context);
 		case "clipGroup": return paintClipGroup(primitive, context);
 		case "rotateGroup": return paintRotateGroup(primitive, context);
@@ -490,9 +532,10 @@ const renderPage = (page, options) => {
 	element.style.height = px(page.heightPx);
 	element.style.overflow = "hidden";
 	if (options.pageBackground !== void 0) element.style.backgroundColor = cssColor(options.pageBackground);
-	if (options.fontFaceCss.length > 0) {
+	if (options.fontFaceCss.css.length > 0) {
 		const style = options.doc.createElement("style");
-		style.textContent = options.fontFaceCss;
+		style.textContent = options.fontFaceCss.css;
+		for (const url of options.fontFaceCss.objectUrls) retainObjectUrl(style, url);
 		element.append(style);
 	}
 	const context = {
@@ -594,12 +637,14 @@ const paintRegionTree = ({ primitives, regions }, context) => {
 		}
 	});
 };
+/** Render one page; release its resources before discarding the element. */
 const renderDisplayPageToDom = (page, options) => renderPage(page, {
 	...options,
 	fontFaceCss: embeddedFontFaceCss(options.fonts, options.binaryUrls ?? "objectUrl")
 });
-/** One `div.layout-page` per display page, in page order. */
+/** One `div.layout-page` per display page, in page order. Release each page's resources before discarding it. */
 const renderDisplayListToDom = (list, options) => {
+	if (list.pages.length === 0) return [];
 	const fontFaceCss = embeddedFontFaceCss(list.fonts, options.binaryUrls ?? "objectUrl");
 	return list.pages.map((page, pageIndex) => renderPage(page, {
 		...options,

package/dist/display-list/editor/displayListPagePainter.d.ts

@@ -2,11 +2,11 @@ import { Page } from "../../layout-engine/types.js";
 import { DisplayList } from "../types.js";
 import { BuildDisplayListOptions } from "../build/buildDisplayList.js";
 //#region src/display-list/editor/displayListPagePainter.d.ts
-type DisplayListPagePainterOptions = BuildDisplayListOptions & {
+export type DisplayListPagePainterOptions = BuildDisplayListOptions & {
   /** Document to create elements in. */
   readonly doc: Document;
 };
-type DisplayListPagePainter = {
+export type DisplayListPagePainter = {
   /** Matches `RenderPageOptions.paintPage`. */
   readonly paintPage: (request: {
     readonly page: Page;
@@ -17,6 +17,5 @@ type DisplayListPagePainter = {
    */
   readonly list: () => DisplayList;
 };
-declare const createDisplayListPagePainter: (options: DisplayListPagePainterOptions) => DisplayListPagePainter;
-//#endregion
-export { DisplayListPagePainter, DisplayListPagePainterOptions, createDisplayListPagePainter };
+export declare const createDisplayListPagePainter: (options: DisplayListPagePainterOptions) => DisplayListPagePainter;
+//#endregion

package/dist/display-list/editor/pageRenderer.d.ts

@@ -1,14 +1,14 @@
 import { RenderPageOptions } from "../../layout-painter/renderPage.js";
 import { PageFurnitureInputs } from "../build/furniture.js";
 //#region src/display-list/editor/pageRenderer.d.ts
-declare const PAGE_RENDERER: {
+export declare const PAGE_RENDERER: {
   /** The painter that has always painted the editor. */
   readonly legacy: "legacy";
   /** Builds the paint IR from the layout and paints the pages from it. */
   readonly displayList: "display-list";
 };
-type PageRendererName = (typeof PAGE_RENDERER)[keyof typeof PAGE_RENDERER];
-declare const isPageRendererName: (value: unknown) => value is PageRendererName;
+export type PageRendererName = (typeof PAGE_RENDERER)[keyof typeof PAGE_RENDERER];
+export declare const isPageRendererName: (value: unknown) => value is PageRendererName;
 /**
  * Read the display-list producer's furniture inputs out of the render options
  * the pipeline already computed.
@@ -19,6 +19,5 @@ declare const isPageRendererName: (value: unknown) => value is PageRendererName;
  * second derivation is how the two renderers would come to disagree about
  * which header a page carries.
  */
-declare const displayListFurnitureFrom: (options: RenderPageOptions) => PageFurnitureInputs;
-//#endregion
-export { PAGE_RENDERER, PageRendererName, displayListFurnitureFrom, isPageRendererName };
+export declare const displayListFurnitureFrom: (options: RenderPageOptions) => PageFurnitureInputs;
+//#endregion

package/dist/display-list/editor/pageRenderer.js

@@ -17,6 +17,7 @@ const isPageRendererName = (value) => value === PAGE_RENDERER.legacy || value ==
 * which header a page carries.
 */
 const displayListFurnitureFrom = (options) => ({
+	...options.documentFontFacts ? { documentFontFacts: options.documentFontFacts } : {},
 	...options.embeddedFontFamilyMap ? { embeddedFontFamilyMap: options.embeddedFontFamilyMap } : {},
 	...options.pageBorders === void 0 ? {} : { pageBorders: options.pageBorders },
 	...options.theme === void 0 ? {} : { theme: options.theme },

package/dist/display-list/html/renderDisplayListToHtml.d.ts

@@ -1,7 +1,7 @@
 import { DisplayColor, DisplayList } from "../types.js";
 //#region src/display-list/html/renderDisplayListToHtml.d.ts
-declare const escapeHtmlText: (value: string) => string;
-type RenderDisplayListToHtmlOptions = {
+export declare const escapeHtmlText: (value: string) => string;
+export type RenderDisplayListToHtmlOptions = {
   /** `@font-face` rules for the families the list names, placed in the head. */
   readonly fontFaceCss?: string;
   /** The document title. */
@@ -14,8 +14,7 @@ type RenderDisplayListToHtmlOptions = {
   readonly pageBackground?: DisplayColor;
 };
 /** The pages' markup, one slot per display page, in page order. */
-declare const renderDisplayListPagesToHtml: (list: DisplayList, options?: Pick<RenderDisplayListToHtmlOptions, "pageBackground">) => string[];
+export declare const renderDisplayListPagesToHtml: (list: DisplayList, options?: Pick<RenderDisplayListToHtmlOptions, "pageBackground">) => string[];
 /** A complete HTML document showing every page of the list. */
-declare const renderDisplayListToHtml: (list: DisplayList, options?: RenderDisplayListToHtmlOptions) => string;
-//#endregion
-export { RenderDisplayListToHtmlOptions, escapeHtmlText, renderDisplayListPagesToHtml, renderDisplayListToHtml };
+export declare const renderDisplayListToHtml: (list: DisplayList, options?: RenderDisplayListToHtmlOptions) => string;
+//#endregion

package/dist/display-list/pageResourceOwnership.d.ts

@@ -0,0 +1,4 @@
+//#region src/display-list/pageResourceOwnership.d.ts
+export declare const retainObjectUrl: (element: object, url: string) => void;
+export declare const releaseDisplayPageResources: (root: Element) => void;
+//#endregion

package/dist/display-list/pageResourceOwnership.js

@@ -0,0 +1,32 @@
+import { panic } from "better-result";
+//#region src/display-list/pageResourceOwnership.ts
+const objectUrlsByElement = /* @__PURE__ */ new WeakMap();
+const objectUrlReferences = /* @__PURE__ */ new Map();
+const retainObjectUrl = (element, url) => {
+	const urls = objectUrlsByElement.get(element) ?? [];
+	urls.push(url);
+	objectUrlsByElement.set(element, urls);
+	objectUrlReferences.set(url, (objectUrlReferences.get(url) ?? 0) + 1);
+};
+const releaseDisplayPageResources = (root) => {
+	const pending = [root];
+	const urlsToRelease = [];
+	while (pending.length > 0) {
+		const element = pending.pop();
+		if (!element) continue;
+		const ownedUrls = objectUrlsByElement.get(element) ?? [];
+		for (const url of ownedUrls) urlsToRelease.push(url);
+		objectUrlsByElement.delete(element);
+		for (const child of Array.from(element.children)) pending.push(child);
+	}
+	for (const url of urlsToRelease) {
+		const references = objectUrlReferences.get(url);
+		if (references === void 0 || references < 1) panic(`releaseDisplayPageResources: object URL ${url} has no owner`);
+		if (references === 1) {
+			objectUrlReferences.delete(url);
+			if (typeof URL !== "undefined" && typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
+		} else objectUrlReferences.set(url, references - 1);
+	}
+};
+//#endregion
+export { releaseDisplayPageResources, retainObjectUrl };

package/dist/display-list/primitives.d.ts

@@ -15,8 +15,8 @@ type PrimitiveKind = DisplayPrimitive["kind"];
  * left edge is where a glyph is placed in either direction, because a glyph
  * advances rightward from its origin whatever the paragraph does.
  */
-declare const glyphCellOffsetsPx: (run: DisplayGlyphRun) => readonly number[];
-declare const DISPLAY_PRIMITIVE_KINDS: readonly PrimitiveKind[];
+export declare const glyphCellOffsetsPx: (run: DisplayGlyphRun) => readonly number[];
+export declare const DISPLAY_PRIMITIVE_KINDS: readonly PrimitiveKind[];
 /**
  * Dash geometry of each stroke pattern, as multiples of the stroke thickness.
  *
@@ -26,7 +26,7 @@ declare const DISPLAY_PRIMITIVE_KINDS: readonly PrimitiveKind[];
  * export the same dash: with the pattern name alone, each backend would pick
  * its own period and nobody would notice until the two were laid side by side.
  */
-declare const STROKE_DASH_FACTORS: {
+export declare const STROKE_DASH_FACTORS: {
   readonly solid: null;
   readonly dashed: {
     readonly dash: 3;
@@ -43,7 +43,7 @@ declare const STROKE_DASH_FACTORS: {
  * Gap between the two lines of a `double` stroke, as a multiple of thickness.
  * Word draws the pair at the authored width with an equal gap between them.
  */
-declare const DOUBLE_STROKE_GAP_FACTOR = 1;
+export declare const DOUBLE_STROKE_GAP_FACTOR = 1;
 /**
  * Period and peak-to-peak amplitude of a `wavy` stroke, in thicknesses.
  *
@@ -54,8 +54,8 @@ declare const DOUBLE_STROKE_GAP_FACTOR = 1;
  * the thickness is inside or outside, and the two answers differ by a
  * thickness on every wavy underline in the document.
  */
-declare const WAVY_STROKE_PERIOD_FACTOR = 6;
-declare const WAVY_STROKE_AMPLITUDE_FACTOR = 2;
+export declare const WAVY_STROKE_PERIOD_FACTOR = 6;
+export declare const WAVY_STROKE_AMPLITUDE_FACTOR = 2;
 /**
  * How far a stroke reaches across its path: the band it occupies, centred on
  * the path. A dash pattern stays within the thickness; `double` spans two rules
@@ -66,15 +66,15 @@ declare const WAVY_STROKE_AMPLITUDE_FACTOR = 2;
  * with it, so two strokes meant to clear each other are pushed apart by exactly
  * the band the backend then paints.
  */
-declare const strokeCrossExtentPx: (stroke: DisplayStroke) => number;
-declare const BLACK: DisplayColor;
-declare const WHITE: DisplayColor;
+export declare const strokeCrossExtentPx: (stroke: DisplayStroke) => number;
+export declare const BLACK: DisplayColor;
+export declare const WHITE: DisplayColor;
 /**
  * The kinds of region a click can land in, as a total map over the union: a
  * new kind that is not listed fails to compile, and so does a name that is not
  * a kind.
  */
-declare const HIT_REGION_KINDS: {
+export declare const HIT_REGION_KINDS: {
   readonly pageContent: "pageContent";
   readonly headerSlot: "headerSlot";
   readonly footerSlot: "footerSlot";
@@ -97,11 +97,11 @@ declare const HIT_REGION_KINDS: {
  * the tree any other way would paint a page in an order the producer did not
  * choose.
  */
-type RegionVisitor = {
+export type RegionVisitor = {
   readonly onPrimitive: (primitive: DisplayPrimitive, index: number) => void;
   readonly enter: (region: DisplayHitRegion) => void;
   readonly exit: (region: DisplayHitRegion) => void;
 };
-declare const walkRegions: (primitives: readonly DisplayPrimitive[], regions: readonly DisplayHitRegion[], visitor: RegionVisitor) => void;
+export declare const walkRegions: (primitives: readonly DisplayPrimitive[], regions: readonly DisplayHitRegion[], visitor: RegionVisitor) => void;
 //#endregion
-export { BLACK, DISPLAY_PRIMITIVE_KINDS, DOUBLE_STROKE_GAP_FACTOR, HIT_REGION_KINDS, RegionVisitor, STROKE_DASH_FACTORS, WAVY_STROKE_AMPLITUDE_FACTOR, WAVY_STROKE_PERIOD_FACTOR, WHITE, glyphCellOffsetsPx, hasComplexScript, hasCursiveLetter, isComplexScriptCodePoint, joinsAcrossBoundary, strokeCrossExtentPx, walkRegions };
+export { hasComplexScript, hasCursiveLetter, isComplexScriptCodePoint, joinsAcrossBoundary };

package/dist/display-list/primitives.js

@@ -39,6 +39,8 @@ const DISPLAY_PRIMITIVE_KINDS = Object.values({
 	glyphRun: "glyphRun",
 	rect: "rect",
 	line: "line",
+	polygon: "polygon",
+	polyline: "polyline",
 	image: "image",
 	clipGroup: "clipGroup",
 	rotateGroup: "rotateGroup",

package/dist/display-list/selectDisplayPages.d.ts

@@ -1,6 +1,5 @@
 import { DisplayList } from "./types.js";
 //#region src/display-list/selectDisplayPages.d.ts
 /** Keep `pageIndices` (0-based, in the order given; duplicates are dropped). */
-declare const selectDisplayPages: (list: DisplayList, pageIndices: readonly number[]) => DisplayList;
-//#endregion
-export { selectDisplayPages };
+export declare const selectDisplayPages: (list: DisplayList, pageIndices: readonly number[]) => DisplayList;
+//#endregion