@segnavia/render 0.8.0 → 0.9.1

package/dist/deck-pdf.js

@@ -4,8 +4,9 @@ import { pdfPixelBox } from "./pdf-geometry.js";
 import { composeImposedPdf, drawClippedPage, embedOnePage } from "./pdf-compose.js";
 import { Imposition, fitPage, impose, pagePlacementLayout } from "@segnavia/format";
 import { newNonce } from "@segnavia/frame/bridge";
-import { htmlSlideDocument, notesLayoutGeometry, printableDeck } from "@segnavia/frame/print-document";
+import { htmlSlideDocument, notesLayoutGeometry, paginateNotes, printableDeck } from "@segnavia/frame/print-document";
 import { PDFDocument } from "pdf-lib";
+import { fitImage, imageLayerStyles } from "@segnavia/frame/image-fit";
 //#region src/deck-pdf.ts
 function nameSlideError(error, id) {
 	if (error instanceof Error) {
@@ -14,6 +15,47 @@ function nameSlideError(error, id) {
 	}
 	throw new Error(`Slide "${id}" could not be rendered: ${String(error)}`);
 }
+function firstNotesPages(pageOwners, slideCount) {
+	return Array.from({ length: slideCount }, (_, slide) => pageOwners.indexOf(slide));
+}
+async function placeRenderedImages(tab) {
+	const layers = tab.locator("[data-segnavia-image-layer]");
+	const styles = (await layers.evaluateAll((elements) => elements.map((element) => {
+		const layer = element;
+		const image = layer.querySelector("img");
+		return {
+			slide: {
+				width: Number(layer.dataset.slideWidth),
+				height: Number(layer.dataset.slideHeight)
+			},
+			image: {
+				width: image?.naturalWidth ?? 0,
+				height: image?.naturalHeight ?? 0
+			},
+			fit: layer.dataset.fit,
+			frame: layer.dataset.frame === "true"
+		};
+	}))).map((fact) => {
+		if (fact.image.width <= 0 || fact.image.height <= 0) return null;
+		const placement = fitImage(fact.slide, fact.image, fact.fit, void 0, fact.frame);
+		return imageLayerStyles(fact.image, placement, fact.slide);
+	});
+	await layers.evaluateAll((elements, values) => {
+		elements.forEach((element, index) => {
+			const styles = values[index];
+			if (!styles) return;
+			const layer = element;
+			const image = layer.querySelector("img");
+			if (!image) return;
+			Object.assign(layer.style, styles.layer);
+			Object.assign(image.style, styles.image);
+		});
+	}, styles);
+}
+async function paginateRenderedNotes(tab, maxSheets) {
+	if (maxSheets === void 0) return tab.evaluate(paginateNotes, null);
+	return tab.evaluate(`(${paginateNotes.toString()})(null,${JSON.stringify(maxSheets)})`);
+}
 async function regularDeckPdf(deck, opts, services) {
 	const htmlSlides = deck.slides.flatMap((slide, index) => slide.content.kind === "html" ? [{
 		index,
@@ -23,6 +65,7 @@ async function regularDeckPdf(deck, opts, services) {
 	const css = `${services.fontFaces(opts)}${opts.css ?? ""}`;
 	const slideCss = containFixedPageOverflow(css);
 	const notesGeometry = opts.layout === "notes" ? notesLayoutGeometry(deck.size, opts.notesPaper) : void 0;
+	let pageOwners = [];
 	const [printable, rendered] = await Promise.all([services.renderPdf({
 		viewport: notesGeometry ? {
 			width: Math.round(notesGeometry.sheet.width),
@@ -35,7 +78,14 @@ async function regularDeckPdf(deck, opts, services) {
 			omitHtmlSlideFrames: true
 		}),
 		boundMs: opts.boundMs,
-		beforeOutput: opts.beforeOutput
+		beforeOutput: async (tab) => {
+			await placeRenderedImages(tab);
+			if (notesGeometry) {
+				if ((await paginateRenderedNotes(tab, opts.limits?.maxSheets)).exceeded) throw new RenderRefusedError(`The PDF needs more than ${opts.limits?.maxSheets} sheets; the limit is ${opts.limits?.maxSheets}.`);
+				pageOwners = await tab.locator(".sheet").evaluateAll((sheets) => sheets.map((sheet) => Number(sheet.dataset.slideIndex)));
+			}
+			await opts.beforeOutput?.(tab);
+		}
 	}, {
 		preferCSSPageSize: true,
 		printBackground: true
@@ -77,8 +127,10 @@ async function regularDeckPdf(deck, opts, services) {
 		height: deck.size.height
 	};
 	const geometry = pdfPixelBox(slideBox, notesGeometry?.sheet.height ?? deck.size.height);
+	const firstPages = notesGeometry ? firstNotesPages(pageOwners, deck.slides.length) : [];
 	for (const item of rendered) {
-		const sheet = pages[item.index];
+		const pageIndex = notesGeometry ? firstPages[item.index] ?? -1 : item.index;
+		const sheet = pages[pageIndex < 0 ? item.index : pageIndex];
 		if (!sheet) throw new Error(`The print document has no sheet for slide "${deck.slides[item.index]?.id ?? item.index}".`);
 		const embedded = await embedOnePage(output, item.bytes, `The rendered slide "${deck.slides[item.index]?.id ?? item.index}"`);
 		drawClippedPage(sheet, embedded, geometry, geometry);
@@ -109,7 +161,8 @@ async function imposedDeckPdf(deck, imposition, opts, services) {
 					viewport: deck.size,
 					scripts: slide.content.kind === "html" ? deck.scripts === "sandboxed" : true,
 					html,
-					boundMs: opts.boundMs
+					boundMs: opts.boundMs,
+					beforeOutput: slide.content.kind === "image" ? placeRenderedImages : void 0
 				}, {
 					width: `${deck.size.width}px`,
 					height: `${deck.size.height}px`,
@@ -151,4 +204,4 @@ async function renderDeckPdf(deck, opts, services) {
 	return imposedDeckPdf(deck, Imposition.parse(opts.imposition), opts, services);
 }
 //#endregion
-export { renderDeckPdf };
+export { firstNotesPages, renderDeckPdf };

package/dist/overflow.js

@@ -33,15 +33,33 @@ function solveScale(pageWidth, measurements) {
 	}
 	return { scale: pageWidth / (measured.get(high) !== void 0 && measured.get(high) >= pageWidth ? high : lastSatisfied) };
 }
+/** Returns the visible horizontal part of a box after ancestor clipping. */
+function clippedHorizontalBox(box, clips) {
+	const visible = clips.reduce((current, clip) => ({
+		left: Math.max(current.left, clip.left),
+		right: Math.min(current.right, clip.right)
+	}), box);
+	return visible.right > visible.left ? visible : void 0;
+}
+function horizontalOverflow(box, clips, pageWidth, rtl) {
+	const visible = clippedHorizontalBox(box, clips);
+	return {
+		clippedStart: Math.max(0, rtl ? box.right - pageWidth : -box.left),
+		clippedEnd: Math.max(0, rtl ? -box.left : box.right - pageWidth),
+		rightOverflow: visible ? Math.max(0, visible.right - pageWidth) : 0
+	};
+}
 async function measuredOverflow(tab, pageWidth) {
-	return tab.evaluate((width) => {
+	const measured = await tab.evaluate(() => {
 		const root = document.documentElement;
 		const extent = Math.max(root.scrollWidth, document.body?.scrollWidth ?? 0);
 		const endOverflow = Math.max(0, extent - root.clientWidth);
 		const rtl = getComputedStyle(root).direction === "rtl";
-		const contributions = [];
-		let clippedStart = 0;
-		let rightOverflow = rtl ? 0 : endOverflow;
+		const clipsContent = (style) => {
+			const contain = style.contain.split(/\s+/);
+			return style.overflowX !== "visible" || contain.includes("paint") || contain.includes("strict") || contain.includes("content") || style.clipPath !== "none" || style.clip !== "auto";
+		};
+		const extentClipped = [root, document.body].some((element) => element && clipsContent(getComputedStyle(element)));
 		const locator = (element) => {
 			if (element.id) return `#${CSS.escape(element.id)}`;
 			const parts = [];
@@ -53,29 +71,86 @@ async function measuredOverflow(tab, pageWidth) {
 			}
 			return parts.join(" > ");
 		};
-		for (const element of document.querySelectorAll("*")) {
+		const clipBox = (element, style) => {
 			const box = element.getBoundingClientRect();
-			const elementStart = Math.max(0, rtl ? box.right - width : -box.left);
-			const elementEnd = Math.max(0, rtl ? -box.left : box.right - width);
-			clippedStart = Math.max(clippedStart, elementStart);
-			rightOverflow = Math.max(rightOverflow, box.right - width);
-			if ((elementStart > 0 || elementEnd > 0) && contributions.length < 20) contributions.push({
-				locator: locator(element),
-				clippedStart: elementStart,
-				clippedEnd: elementEnd
-			});
-		}
+			const scale = element instanceof HTMLElement && element.offsetWidth > 0 ? box.width / element.offsetWidth : 1;
+			let left = box.left + element.clientLeft * scale;
+			let right = left + element.clientWidth * scale;
+			if (style.overflowX === "clip") {
+				const values = style.overflowClipMargin.split(/\s+/);
+				const reference = values.find((value) => value === "content-box" || value === "border-box" || value === "padding-box");
+				if (reference === "border-box") {
+					left = box.left;
+					right = box.right;
+				} else if (reference === "content-box") {
+					left += Number.parseFloat(style.paddingLeft) * scale;
+					right -= Number.parseFloat(style.paddingRight) * scale;
+				}
+				const margin = values.map(Number.parseFloat).find(Number.isFinite) ?? 0;
+				left -= margin * scale;
+				right += margin * scale;
+			}
+			const legacy = style.clip.match(/^rect\((?:([^, ]+)[, ]+)(?:([^, ]+)[, ]+)(?:([^, ]+)[, ]+)([^, )]+)\)$/);
+			if (legacy) {
+				const length = (value, fallback) => value && value !== "auto" ? Number.parseFloat(value) * scale : fallback;
+				left = box.left + length(legacy[4], 0);
+				right = box.left + length(legacy[2], box.width);
+			}
+			return {
+				left,
+				right
+			};
+		};
 		return {
-			overflow: {
-				pageWidth: width,
-				extent,
-				clippedStart,
-				clippedEnd: endOverflow,
-				elements: contributions
-			},
-			rightOverflow
+			extent,
+			endOverflow,
+			extentClipped,
+			rtl,
+			elements: [...document.querySelectorAll("*")].map((element) => {
+				const box = element.getBoundingClientRect();
+				const clips = [];
+				let ancestor = element.parentElement;
+				while (ancestor) {
+					const style = getComputedStyle(ancestor);
+					if (clipsContent(style)) clips.push(clipBox(ancestor, style));
+					ancestor = ancestor.parentElement;
+				}
+				return {
+					locator: locator(element),
+					box: {
+						left: box.left,
+						right: box.right
+					},
+					clips
+				};
+			})
 		};
-	}, pageWidth);
+	});
+	const contributions = [];
+	let clippedStart = 0;
+	let clippedEnd = measured.endOverflow;
+	let rightOverflow = measured.rtl || measured.extentClipped ? 0 : measured.endOverflow;
+	for (const element of measured.elements) {
+		const overflow = horizontalOverflow(element.box, element.clips, pageWidth, measured.rtl);
+		clippedStart = Math.max(clippedStart, overflow.clippedStart);
+		clippedEnd = Math.max(clippedEnd, overflow.clippedEnd);
+		rightOverflow = Math.max(rightOverflow, overflow.rightOverflow);
+		if ((overflow.clippedStart > 0 || overflow.clippedEnd > 0) && contributions.length < 20) contributions.push({
+			locator: element.locator,
+			clippedStart: overflow.clippedStart,
+			clippedEnd: overflow.clippedEnd
+		});
+	}
+	return {
+		overflow: {
+			pageWidth,
+			extent: measured.extent,
+			clippedStart,
+			clippedEnd,
+			elements: contributions
+		},
+		rightOverflow
+	};
 }
 function overflowEntry(measured, scale, part, inputIndex) {
 	return {
@@ -120,4 +195,4 @@ async function printWithOverflow(tab, pageWidth, part, pdf, inputIndex) {
 	};
 }
 //#endregion
-export { CHROMIUM_MAX_SHRINK, measureOverflow, printWithOverflow, solveScale };
+export { CHROMIUM_MAX_SHRINK, clippedHorizontalBox, horizontalOverflow, measureOverflow, printWithOverflow, solveScale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segnavia/render",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -26,9 +26,9 @@
     }
   },
   "dependencies": {
-    "@segnavia/format": "0.8.0",
-    "@segnavia/frame": "0.8.0",
-    "@segnavia/html": "0.8.0",
+    "@segnavia/format": "0.9.1",
+    "@segnavia/frame": "0.9.1",
+    "@segnavia/html": "0.9.1",
     "playwright-core": "1.55.1",
     "pdf-lib": "^1.17.1"
   }