@stll/folio-core 0.32.2 → 0.33.0

package/dist/display-list/build/watermarkPrimitives.js

@@ -0,0 +1,128 @@
+import { pxToPt } from "../../layout-engine/measure/measureHelpers.js";
+import { getFontMetrics } from "../../layout-engine/measure/measureProvider.js";
+import { parseDisplayColor } from "./colors.js";
+import { buildGlyphs, glyphRunText } from "./glyphs.js";
+import { UNSUPPORTED_CONSTRUCT } from "./unsupported.js";
+//#region src/display-list/build/watermarkPrimitives.ts
+/**
+* The document watermark, behind the page's content.
+*
+* Word stores it as a VML shape in a header part; the painter reproduces it
+* with CSS rather than mirroring `v:textpath`, and this reproduces the same
+* result as primitives: a text watermark is one rotated, translucent run
+* centred on the page; a picture watermark is the image scaled to fit a
+* fraction of the page and washed out.
+*
+* A picture watermark needs its bytes. The relationship id → asset mapping
+* belongs to the package layer, so a caller that cannot resolve it hands over
+* no source and the watermark is reported rather than dropped: a page missing
+* its watermark and a page that never had one must not look alike.
+*/
+/**
+* `renderWatermark.ts`: Word's text-watermark preset is ~144px bold silver at
+* half opacity, rotated bottom-left to top-right.
+*/
+const TEXT_FONT_SIZE_PX = 144;
+const TEXT_DEFAULT_FONT = "Calibri";
+const TEXT_DEFAULT_COLOR = "#C0C0C0";
+const TEXT_DEFAULT_OPACITY = .5;
+const TEXT_DIAGONAL_DEGREES = -45;
+const PICTURE_NATIVE_SCALE = 1;
+const PICTURE_WASHOUT_OPACITY = .4;
+const paintTextWatermark = (watermark, page, context) => {
+	if (watermark.text.length === 0) return [];
+	const style = {
+		fontFamily: watermark.font ?? TEXT_DEFAULT_FONT,
+		fontSize: pxToPt(TEXT_FONT_SIZE_PX),
+		bold: true
+	};
+	const glyphs = buildGlyphs({
+		text: watermark.text,
+		style,
+		allCaps: false,
+		spaceDeltaPx: 0,
+		collapsed: false
+	});
+	const authored = watermark.color === void 0 || watermark.color === "auto" ? TEXT_DEFAULT_COLOR : `#${watermark.color}`;
+	const color = parseDisplayColor(authored);
+	if (!color) {
+		context.unsupported.report(UNSUPPORTED_CONSTRUCT.unresolvedColor, context.pageIndex, `watermark colour ${authored}`);
+		return [];
+	}
+	const centerXPx = page.size.w / 2;
+	const centerYPx = page.size.h / 2;
+	const metrics = getFontMetrics(style);
+	const baselineYPx = centerYPx - (metrics.fontBoxAscent + metrics.fontBoxDescent) / 2 + metrics.fontBoxAscent;
+	return [{
+		kind: "rotateGroup",
+		degrees: watermark.diagonal === false ? 0 : TEXT_DIAGONAL_DEGREES,
+		originXPx: centerXPx,
+		originYPx: centerYPx,
+		children: [{
+			kind: "opacityGroup",
+			opacity: watermark.opacity ?? TEXT_DEFAULT_OPACITY,
+			children: [{
+				kind: "glyphRun",
+				font: context.fonts.intern({
+					fontFamily: style.fontFamily ?? TEXT_DEFAULT_FONT,
+					bold: true,
+					measureStyle: style
+				}),
+				fontSizePx: TEXT_FONT_SIZE_PX,
+				color,
+				xPx: centerXPx - glyphs.widthPx / 2,
+				baselineYPx,
+				...glyphRunText(glyphs),
+				direction: "ltr"
+			}]
+		}]
+	}];
+};
+/** `max-width`/`max-height` at `scale` of the page, `object-fit: contain`. */
+const containedRect = (page, scale, pixelWidth, pixelHeight) => {
+	const boxWidthPx = page.size.w * scale;
+	const boxHeightPx = page.size.h * scale;
+	if (pixelWidth <= 0 || pixelHeight <= 0) return {
+		xPx: 0,
+		yPx: 0,
+		widthPx: boxWidthPx,
+		heightPx: boxHeightPx
+	};
+	const fit = Math.min(boxWidthPx / pixelWidth, boxHeightPx / pixelHeight);
+	const widthPx = pixelWidth * fit;
+	const heightPx = pixelHeight * fit;
+	return {
+		xPx: (page.size.w - widthPx) / 2,
+		yPx: (page.size.h - heightPx) / 2,
+		widthPx,
+		heightPx
+	};
+};
+const paintPictureWatermark = (watermark, page, imageSrc, context) => {
+	if (imageSrc === void 0) {
+		context.unsupported.report(UNSUPPORTED_CONSTRUCT.watermark, context.pageIndex, `picture watermark ${watermark.imageRId} has no resolved image source: the relationship id resolves in the package layer, not in the builder`);
+		return [];
+	}
+	const ref = context.images.intern(imageSrc);
+	if (ref === void 0) {
+		const reason = context.images.failureFor(imageSrc) ?? "image could not be decoded";
+		context.unsupported.report(reason.includes("not PNG or JPEG") ? UNSUPPORTED_CONSTRUCT.imageFormat : UNSUPPORTED_CONSTRUCT.imageSource, context.pageIndex, `picture watermark: ${reason}`);
+		return [];
+	}
+	const source = context.images.snapshot()[ref];
+	return [{
+		kind: "image",
+		image: ref,
+		rect: containedRect(page, watermark.scale ?? PICTURE_NATIVE_SCALE, source?.pixelWidth ?? 0, source?.pixelHeight ?? 0),
+		opacity: watermark.washout === false ? 1 : PICTURE_WASHOUT_OPACITY
+	}];
+};
+const paintWatermark = ({ page, watermark, imageSrc, context }) => {
+	switch (watermark.kind) {
+		case "text": return paintTextWatermark(watermark, page, context);
+		case "picture": return paintPictureWatermark(watermark, page, imageSrc, context);
+		default: return [];
+	}
+};
+//#endregion
+export { paintWatermark };

package/dist/display-list/dom/renderDisplayListToDom.d.ts

@@ -0,0 +1,26 @@
+import { DisplayColor, DisplayFontFace, DisplayImageSource, DisplayList, DisplayPage } from "../types.js";
+//#region src/display-list/dom/renderDisplayListToDom.d.ts
+type RenderDisplayListOptions = {
+  /** Document to create elements in. */
+  readonly doc: Document;
+  /** Page background, painted before any primitive. */
+  readonly pageBackground?: DisplayColor;
+};
+/**
+ * A page's glyph runs and images index tables that live on the list, and an
+ * internal link addresses a page by its index in the same list, so rendering
+ * one page needs all three passed alongside it.
+ */
+type RenderDisplayPageOptions = RenderDisplayListOptions & {
+  /** `DisplayList.fonts`. */
+  readonly fonts: readonly DisplayFontFace[];
+  /** `DisplayList.images`. */
+  readonly images: readonly DisplayImageSource[];
+  /** The page's index in `DisplayList.pages`, which names its anchor. */
+  readonly pageIndex: number;
+};
+declare const renderDisplayPageToDom: (page: DisplayPage, options: RenderDisplayPageOptions) => HTMLElement;
+/** One `div.layout-page` per display page, in page order. */
+declare const renderDisplayListToDom: (list: DisplayList, options: RenderDisplayListOptions) => HTMLElement[];
+//#endregion
+export { RenderDisplayListOptions, RenderDisplayPageOptions, renderDisplayListToDom, renderDisplayPageToDom };