@embedpdf/web 3.0.0-next.15 → 3.0.0-next.16

package/dist/index.cjs

@@ -105,6 +105,263 @@ function browserClock() {
 	return clock;
 }
 //#endregion
+//#region src/printer.ts
+/** The attribute that marks the sheets printed from the page itself. */
+const PRINT_ROOT = "data-epdf-print";
+/** The browser's printer: it prints PDFs where the browser's own PDF viewer does. */
+function browserPrinter() {
+	const printer = {
+		needsTap: printsOnlyFromATap(),
+		stage: stageSheets
+	};
+	if (!printsPdfFiles()) return printer;
+	let removePrinted = null;
+	return {
+		...printer,
+		async stagePdf(pdf, { name, signal }) {
+			removePrinted?.();
+			removePrinted = null;
+			const frame = await loadPdfFrame(pdf, name, signal);
+			let printed = false;
+			return {
+				async print() {
+					frame.view.focus();
+					frame.view.print();
+					printed = true;
+				},
+				dispose() {
+					if (printed) removePrinted = frame.remove;
+					else frame.remove();
+				}
+			};
+		}
+	};
+}
+/** The sheets staged where this browser prints them: from the page on iOS, else a frame. */
+async function stageSheets(sheets, { name, signal }) {
+	const urls = sheets.map((sheet) => URL.createObjectURL(sheet.image));
+	const revoke = () => urls.forEach((url) => URL.revokeObjectURL(url));
+	try {
+		return printsFramesAsPictures() ? await stageInPage(sheets, urls, name, revoke, signal) : await stageInFrame(sheets, urls, name, revoke, signal);
+	} catch (error) {
+		revoke();
+		throw error;
+	}
+}
+/** `pdf` loaded in a hidden frame of its own, where the browser's PDF viewer shows it. */
+async function loadPdfFrame(pdf, name, signal) {
+	const url = URL.createObjectURL(new Blob([pdf], { type: "application/pdf" }));
+	const frame = hiddenFrame();
+	frame.title = name;
+	frame.src = url;
+	const remove = () => {
+		frame.remove();
+		URL.revokeObjectURL(url);
+	};
+	const loaded = untilEvent(frame, "load", signal);
+	document.body.appendChild(frame);
+	try {
+		await loaded;
+		const view = frame.contentWindow;
+		if (!view) throw new Error("the print frame did not load");
+		return {
+			view,
+			remove
+		};
+	} catch (error) {
+		remove();
+		throw error;
+	}
+}
+/**
+* How the sheets print: one named `@page` per page size, and a class per size that puts a sheet
+* on that page, its picture fitted inside. A browser that prints on other paper keeps each sheet
+* on one page: a sheet is never taller or wider than the page it prints on. That cap is a
+* percentage of the page (`html` and `body` are the page's height): Safari resolves `vw` and
+* `vh` against the screen even when it prints, so on a phone they would shrink every sheet to
+* the phone's width. `sizes` is each sheet's class.
+*/
+function printSheetsStyle(sheets) {
+	const named = [];
+	const sizes = sheets.map((sheet) => {
+		const index = named.findIndex((other) => other.widthPt === sheet.widthPt && other.heightPt === sheet.heightPt);
+		return `epdf-sheet-${index >= 0 ? index : named.push(sheet) - 1}`;
+	});
+	return {
+		css: [
+			"@page { margin: 0; }",
+			...named.flatMap(({ widthPt, heightPt }, index) => [`@page epdf-sheet-${index} { size: ${widthPt}pt ${heightPt}pt; margin: 0; }`, `.epdf-sheet-${index} { page: epdf-sheet-${index}; width: ${widthPt}pt; height: ${heightPt}pt; }`]),
+			".epdf-print-sheet { break-after: page; break-inside: avoid; max-width: 100%; max-height: 100%; overflow: hidden; }",
+			".epdf-print-sheet:last-child { break-after: auto; }",
+			".epdf-print-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; }"
+		].join("\n"),
+		sizes
+	};
+}
+/** The sheets, made in `owner` (the frame's document or the page's): one per page, its picture inside. */
+function sheetElements(owner, urls, sizes) {
+	return urls.map((url, index) => {
+		const sheet = owner.createElement("div");
+		sheet.className = `epdf-print-sheet ${sizes[index]}`;
+		const image = owner.createElement("img");
+		image.alt = "";
+		image.src = url;
+		sheet.append(image);
+		return sheet;
+	});
+}
+/** A frame's document before the sheets go in: nothing of the print job's own is in it. */
+const FRAME_DOCUMENT = "<!doctype html><html><head><meta charset=\"utf-8\"></head><body></body></html>";
+/** A frame laid out but out of sight: a frame that is not laid out may never load. */
+function hiddenFrame() {
+	const frame = document.createElement("iframe");
+	frame.setAttribute("aria-hidden", "true");
+	frame.tabIndex = -1;
+	Object.assign(frame.style, {
+		position: "fixed",
+		right: "0",
+		bottom: "0",
+		width: "1px",
+		height: "1px",
+		border: "0",
+		opacity: "0",
+		pointerEvents: "none"
+	});
+	return frame;
+}
+/** The sheets in a hidden frame of their own, so nothing of the host page prints with them. */
+async function stageInFrame(sheets, urls, name, revoke, signal) {
+	const { css, sizes } = printSheetsStyle(sheets);
+	const frame = hiddenFrame();
+	frame.srcdoc = FRAME_DOCUMENT;
+	const loaded = untilEvent(frame, "load", signal);
+	document.body.appendChild(frame);
+	try {
+		await loaded;
+		const view = frame.contentWindow;
+		const frameDocument = frame.contentDocument;
+		if (!view || !frameDocument) throw new Error("the print frame did not load");
+		frameDocument.title = name;
+		const style = frameDocument.createElement("style");
+		style.textContent = `html, body { margin: 0; padding: 0; height: 100%; }\n${css}`;
+		frameDocument.head.append(style);
+		frameDocument.body.append(...sheetElements(frameDocument, urls, sizes));
+		await decodeAll(Array.from(frameDocument.querySelectorAll("img")), signal);
+		return {
+			print: () => printFrom(view),
+			dispose: () => {
+				frame.remove();
+				revoke();
+			}
+		};
+	} catch (error) {
+		frame.remove();
+		throw error;
+	}
+}
+/**
+* The sheets in the page itself, shown only when it prints, and everything else hidden then.
+* While it prints, `html` and `body` are plain blocks the page's height, whatever the host page
+* makes them (an app often keeps its body to the window, which would clip the sheets after the
+* first). The page's title is the print job's name while it prints.
+*/
+async function stageInPage(sheets, urls, name, revoke, signal) {
+	const { css, sizes } = printSheetsStyle(sheets);
+	const style = document.createElement("style");
+	style.textContent = `${css}\n@media screen { [${PRINT_ROOT}] { display: none !important; } }\n@media print { html, body { display: block !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body > :not([${PRINT_ROOT}]) { display: none !important; } [${PRINT_ROOT}] { height: 100%; } }`;
+	const root = document.createElement("div");
+	root.setAttribute(PRINT_ROOT, "");
+	root.append(...sheetElements(document, urls, sizes));
+	document.head.appendChild(style);
+	document.body.appendChild(root);
+	const remove = () => {
+		root.remove();
+		style.remove();
+	};
+	try {
+		await decodeAll(Array.from(root.querySelectorAll("img")), signal);
+	} catch (error) {
+		remove();
+		throw error;
+	}
+	return {
+		async print() {
+			const title = document.title;
+			document.title = name;
+			try {
+				await printFrom(window);
+			} finally {
+				document.title = title;
+			}
+		},
+		dispose: () => {
+			remove();
+			revoke();
+		}
+	};
+}
+/** Open `view`'s print dialog; resolves when the browser says printing finished. */
+function printFrom(view) {
+	return new Promise((resolve, reject) => {
+		view.addEventListener("afterprint", () => resolve(), { once: true });
+		try {
+			view.focus();
+			view.print();
+		} catch (error) {
+			reject(error);
+		}
+	});
+}
+/** Wait until every picture is decoded, so the dialog never shows an empty sheet. */
+async function decodeAll(images, signal) {
+	await untilSettled(Promise.all(images.map((image) => image.decode())), signal);
+}
+function untilEvent(target, type, signal) {
+	return untilSettled(new Promise((resolve) => target.addEventListener(type, () => resolve(), { once: true })), signal);
+}
+/** `work`, or the signal's reason as soon as it aborts. */
+function untilSettled(work, signal) {
+	if (!signal) return work;
+	if (signal.aborted) return Promise.reject(signal.reason);
+	return new Promise((resolve, reject) => {
+		const onAbort = () => reject(signal.reason);
+		signal.addEventListener("abort", onAbort, { once: true });
+		work.then((value) => {
+			signal.removeEventListener("abort", onAbort);
+			resolve(value);
+		}, (error) => {
+			signal.removeEventListener("abort", onAbort);
+			reject(error);
+		});
+	});
+}
+/**
+* Whether this browser prints a PDF file from a frame: its own PDF viewer is on (Chrome set to
+* download PDFs has none, and would download the copy instead), and it is not iOS, which reports
+* a viewer but prints a framed PDF as a picture of its first page, or Android.
+*/
+function printsPdfFiles() {
+	if (typeof navigator === "undefined" || navigator.pdfViewerEnabled !== true) return false;
+	return !printsFramesAsPictures() && !/Android/i.test(navigator.userAgent);
+}
+/**
+* Whether this browser prints only while a tap or click is being handled: Safari's engine, whose
+* vendor is Apple. On iOS a print that waited shows "This website has been blocked from
+* automatically printing"; Safari on the Mac opens its print dialog, but with blank pages.
+*/
+function printsOnlyFromATap() {
+	if (typeof navigator === "undefined") return false;
+	return navigator.vendor === "Apple Computer, Inc." || printsFramesAsPictures();
+}
+/**
+* Whether this browser prints a frame as a picture of the page around it: every browser on
+* iOS and iPadOS (all use Safari's engine; iPadOS presents itself as a Mac with touch).
+*/
+function printsFramesAsPictures() {
+	if (typeof navigator === "undefined") return false;
+	return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.userAgent.includes("Macintosh") && navigator.maxTouchPoints > 1;
+}
+//#endregion
 //#region src/css-text.ts
 /**
 * Style records as CSS text. This package hands styles out as records with
@@ -3213,8 +3470,54 @@ function chromeInPixels(nodes, page) {
 	});
 }
 //#endregion
+//#region src/legible-text.ts
+/**
+* Editors laid out at a legible size and drawn at the page's. iOS Safari zooms the page in when
+* a field takes focus with text under 16 CSS pixels, to 16 over that size, and it reads the
+* field's own computed font size: a transform doesn't change that size (CSS `zoom` does). Text
+* on a page is drawn at the page's scale, so a form field or a text box on a phone often has
+* smaller text. Such an editor is laid out {@link legibleScaleOf} times bigger (its text, lines
+* and box alike), and a `scale()` from its top-left corner draws it back at the page's size: the
+* same picture, with text iOS reads as legible. Every other browser draws it the same way.
+*/
+/** The smallest text, in CSS pixels, a field takes focus with on iOS without the page zooming in. */
+const LEGIBLE_FONT_PX = 16;
+/**
+* How many times bigger to lay out an editor whose text is `fontPx` CSS pixels, so its text is
+* at least {@link LEGIBLE_FONT_PX}: 1 when it already is.
+*/
+function legibleScaleOf(fontPx) {
+	return fontPx > 0 && fontPx < 16 ? 16 / fontPx : 1;
+}
+/**
+* The transform that draws an element laid out `legible` times bigger back at its size, from its
+* top-left corner (`transformOrigin: '0 0'`), or null when it is laid out at its size.
+*/
+function legibleShrinkOf(legible) {
+	return legible === 1 ? null : `scale(${1 / legible})`;
+}
+//#endregion
 //#region src/text-box-editor.ts
 /**
+* A free text box's editor on an element: the controller behind the
+* annotation layer's own text boxes and behind a renderer's element that
+* draws one itself. The shared rich-text binding ({@link attachRichTextEditor})
+* renders the runs as inline-styled spans, turns typing back into runs, maps
+* the selection to flat offsets and keeps the caret through a restyle; the
+* browser owns layout, the caret, input methods and the clipboard; the
+* annotation plugin owns the text, the range routing and the write after a
+* pause. This module adds what makes the element a text box of the layer:
+* focus and `contentEditable` follow the plugin's `editing`, never the other
+* way, and a press inside the box stays inside it. A framework binding keeps
+* one {@link createTextBoxEditorFollower} per element and hands it what
+* changed. {@link freeTextBoxOf} is the layer's own editor element and
+* {@link ownTextBoxOf} one a renderer draws itself, both laid out at a legible
+* size (`legible-text.ts`).
+*
+* The plugin's types are mirrored structurally, so this package stays free of
+* EmbedPDF imports.
+*/
+/**
 * Make `element` the editor of a text box. Typing shows at once and reaches
 * the engine in one write after a pause (or when the edit ends), not one
 * write per keystroke.
@@ -3324,22 +3627,67 @@ function textBoxStyleOf(css, scale) {
 	};
 }
 /**
-* The editor element of a free text box in the page layer's pixels: the
-* engine's text plate (`SetPlateRect` and its `re W n` clip), the box inset
-* by its padding. Place it there with no CSS padding, so its edge is the
-* plate's: CSS padding doesn't clip overflow, and scrolled lines would paint
-* over the border band. The box never grows with its text.
+* The layer's own editor element for a free text box: the engine's text
+* plate (`SetPlateRect` and its `re W n` clip), the box inset by its padding,
+* with no CSS padding, so its edge is the plate's: CSS padding doesn't clip
+* overflow, and scrolled lines would paint over the border band. The box
+* never grows with its text. It is laid out at a legible size and drawn back
+* at the plate's (`legible-text.ts`), and a turned box turns about its
+* centre, as the baked appearance does. While someone types it takes the
+* pointer and shows an `outline` of that color.
 */
-function textPlateInPixels(item, page) {
+function freeTextBoxOf(item, page, outline) {
 	const box = rectInPixels(item.box, page);
-	const scale = item.box.width > 0 ? box.width / item.box.width : 1;
-	const inset = item.css.padding * scale;
+	const onPage = item.box.width > 0 ? box.width / item.box.width : 1;
+	const inset = item.css.padding * onPage;
+	const width = Math.max(0, box.width - 2 * inset);
+	const height = Math.max(0, box.height - 2 * inset);
+	const legible = legibleScaleOf(item.css.fontSize * onPage);
+	const scale = onPage * legible;
+	const turn = item.rot ? `translate(${width / 2}px, ${height / 2}px) rotate(${item.rot}deg) translate(${-width / 2}px, ${-height / 2}px)` : null;
+	return {
+		scale,
+		style: {
+			position: "absolute",
+			left: `${box.left + inset}px`,
+			top: `${box.top + inset}px`,
+			width: `${width * legible}px`,
+			height: `${height * legible}px`,
+			...textBoxStyleOf(item.css, scale),
+			boxSizing: "border-box",
+			background: "transparent",
+			whiteSpace: "pre-wrap",
+			overflowWrap: "break-word",
+			overflowX: "hidden",
+			overflowY: item.editing ? "auto" : "hidden",
+			outline: item.editing ? `${legible}px solid ${outline}` : "none",
+			cursor: item.editing ? "text" : "default",
+			transform: [turn, legibleShrinkOf(legible)].filter(Boolean).join(" ") || "none",
+			transformOrigin: "0 0",
+			pointerEvents: item.editing ? "auto" : "none"
+		}
+	};
+}
+/**
+* Your own element as the editor of a text box you draw yourself, at `scale`
+* pixels per point where it is ({@link textBoxEditorScaleOf}): the box's body
+* style, filling the element's parent, laid out at a legible size and drawn
+* back at the parent's (`legible-text.ts`). Draw the box's frame (its fill,
+* border and padding) on the parent: what's on the element scales with it.
+*/
+function ownTextBoxOf(item, scale) {
+	const legible = legibleScaleOf(item.css.fontSize * scale);
 	return {
-		left: box.left + inset,
-		top: box.top + inset,
-		width: Math.max(0, box.width - 2 * inset),
-		height: Math.max(0, box.height - 2 * inset),
-		scale
+		scale: scale * legible,
+		style: {
+			...textBoxStyleOf(item.css, scale * legible),
+			width: `${100 * legible}%`,
+			height: `${100 * legible}%`,
+			boxSizing: "border-box",
+			transform: legibleShrinkOf(legible) ?? "none",
+			transformOrigin: "0 0",
+			...item.editing ? { pointerEvents: "auto" } : {}
+		}
 	};
 }
 //#endregion
@@ -3626,19 +3974,25 @@ function cssFontOf(pdfFont) {
 /** Pixels per page point where the widget is drawn. */
 const scaleOf = (field, frame) => field.box.width > 0 ? frame.width / field.box.width : 1;
 /**
-* A text field's editor style. A font size of 0 means "fit the box" in PDF:
-* the box height for one line, Acrobat's 12 pt for several.
+* The size of a text field's text in pixels at `frame`. A font size of 0 means "fit the box" in
+* PDF: the box height for one line, Acrobat's 12 pt for several.
 */
-function textFieldStyleOf(field, frame, colors) {
+function textFieldFontPxOf(field, frame) {
 	const scale = scaleOf(field, frame);
-	const fontSize = field.look.fontSize ? field.look.fontSize * scale : field.multiline ? 12 * scale : Math.max(6, frame.height * .72);
+	return field.look.fontSize ? field.look.fontSize * scale : field.multiline ? 12 * scale : Math.max(6, frame.height * .72);
+}
+/**
+* A text field's editor style at `frame`, with its lengths `legible` times bigger for an editor
+* laid out at a legible size (`legible-text.ts`).
+*/
+function textFieldStyleOf(field, frame, colors, legible = 1) {
 	return {
 		...cssFontOf(field.look.fontFamily),
-		fontSize: `${fontSize}px`,
+		fontSize: `${textFieldFontPxOf(field, frame) * legible}px`,
 		textAlign: field.look.textAlign,
 		color: field.look.color ?? colors.text,
 		background: field.look.background ?? colors.background,
-		...field.comb && field.maxLength ? { letterSpacing: `${frame.width / field.maxLength / 2}px` } : {}
+		...field.comb && field.maxLength ? { letterSpacing: `${frame.width / field.maxLength / 2 * legible}px` } : {}
 	};
 }
 /** A list box's style: the field's own look, the settings where it has none (12 pt for a fitted size). */
@@ -3858,6 +4212,9 @@ function widgetBoxStyleOf(widget, frame, colors, { edge = true } = {}) {
 * control would swallow clicks, and the box below runs the widget's action
 * (the read-only "button" pattern), so a disabled one lets them through.
 *
+* It fills the widget's box, laid out at a legible size and drawn back at the
+* box's (`legible-text.ts`), so iOS doesn't zoom the page in when it takes focus.
+*
 * With the engine's `layout` of the text being typed, the editor writes it
 * where the engine will draw it: in the engine's face (mounted), at the size
 * it draws (a fitted size resolved), in the box inside the border, a line of
@@ -3865,14 +4222,24 @@ function widgetBoxStyleOf(widget, frame, colors, { edge = true } = {}) {
 */
 function textFieldEditorStyleOf(field, frame, colors, focused, layout = null) {
 	const scale = scaleOf(field, frame);
-	const pixels = (points) => `${points * scale}px`;
+	const legible = legibleScaleOf(layout ? layout.fontSize * scale : textFieldFontPxOf(field, frame));
+	const px = (pixels) => `${pixels * legible}px`;
+	const pixels = (points) => px(points * scale);
 	return {
-		...FORM_CONTROL_FILL,
+		position: "absolute",
+		left: "0",
+		top: "0",
+		width: `${100 * legible}%`,
+		height: `${100 * legible}%`,
+		boxSizing: "border-box",
+		margin: "0",
+		transform: legibleShrinkOf(legible) ?? "none",
+		transformOrigin: "0 0",
 		border: "none",
-		outline: focused ? `2px solid ${colors.focus}` : "none",
-		outlineOffset: "-2px",
-		padding: "0 2px",
-		...textFieldStyleOf(field, frame, colors),
+		outline: focused ? `${px(2)} solid ${colors.focus}` : "none",
+		outlineOffset: px(-2),
+		padding: `0 ${px(2)}`,
+		...textFieldStyleOf(field, frame, colors, legible),
 		...layout ? {
 			fontFamily: layout.fontFamily,
 			fontWeight: layout.fontWeight,
@@ -5086,18 +5453,19 @@ function createSurfaceFocusFollower() {
 //#region src/standard-commands-platform.ts
 /**
 * The browser's part of the standard commands (`createStandardCommands` in
-* `@embedpdf/plugin-commands/standard`): copying the selected text, handing
-* the document to the user as a download, and the print dialog. Every
-* framework adapter builds its `standardCommands` from this one object.
+* `@embedpdf/plugin-commands/standard`): copying the selected text, and
+* handing the document to the user as a download. Every framework adapter
+* builds its `standardCommands` from this one object. Printing is the
+* kernel's, with `browserPrinter()`.
 */
 const standardCommandsBrowser = {
 	copySelection,
-	saveFile: (bytes, fileName) => saveFile(bytes, fileName, "application/pdf"),
-	print: () => window.print()
+	saveFile: (bytes, fileName) => saveFile(bytes, fileName, "application/pdf")
 };
 //#endregion
 exports.EPDF_VARIABLES = EPDF_VARIABLES;
 exports.FORM_CONTROL_FILL = FORM_CONTROL_FILL;
+exports.LEGIBLE_FONT_PX = LEGIBLE_FONT_PX;
 exports.TOOLBAR_ITEM_ATTRIBUTE = TOOLBAR_ITEM_ATTRIBUTE;
 exports.anchoredViewOf = anchoredViewOf;
 exports.annotationChromePaint = annotationChromePaint;
@@ -5116,6 +5484,7 @@ exports.bindCommandShortcuts = bindCommandShortcuts;
 exports.bindPaintedImage = bindPaintedImage;
 exports.bindWidgetEvents = bindWidgetEvents;
 exports.browserClock = browserClock;
+exports.browserPrinter = browserPrinter;
 exports.canTakeFocus = canTakeFocus;
 exports.chromeInPixels = chromeInPixels;
 exports.clientPageProjector = clientPageProjector;
@@ -5149,6 +5518,7 @@ exports.fontProgramsOf = fontProgramsOf;
 exports.formColorsOf = formColorsOf;
 exports.formFocusRingStyleOf = formFocusRingStyleOf;
 exports.frameInPixels = frameInPixels;
+exports.freeTextBoxOf = freeTextBoxOf;
 exports.ghostOpacity = ghostOpacity;
 exports.hoverLink = hoverLink;
 exports.indexedDbByteStore = indexedDbByteStore;
@@ -5161,6 +5531,8 @@ exports.isUprightQuad = isUprightQuad;
 exports.isolatePointerDown = isolatePointerDown;
 exports.isolateWheel = isolateWheel;
 exports.layerTextBoxesOf = layerTextBoxesOf;
+exports.legibleScaleOf = legibleScaleOf;
+exports.legibleShrinkOf = legibleShrinkOf;
 exports.lineModelFor = lineModelFor;
 exports.linkActivateContextOf = linkActivateContextOf;
 exports.linkAnchorOf = linkAnchorOf;
@@ -5191,6 +5563,7 @@ exports.observeOutsidePress = observeOutsidePress;
 exports.observeWidth = observeWidth;
 exports.offsetOfPosition = offsetOfPosition;
 exports.openExternalUri = openExternalUri;
+exports.ownTextBoxOf = ownTextBoxOf;
 exports.pageClientSpace = pageClientSpace;
 exports.pageLayersOf = pageLayersOf;
 exports.pageSurfaceLayout = pageSurfaceLayout;
@@ -5240,10 +5613,9 @@ exports.svgPoints = svgPoints;
 exports.svgShapesOf = svgShapesOf;
 exports.tabbablesIn = tabbablesIn;
 exports.textBoxEditorScaleOf = textBoxEditorScaleOf;
-exports.textBoxStyleOf = textBoxStyleOf;
 exports.textFieldEditorStyleOf = textFieldEditorStyleOf;
+exports.textFieldFontPxOf = textFieldFontPxOf;
 exports.textFieldStyleOf = textFieldStyleOf;
-exports.textPlateInPixels = textPlateInPixels;
 exports.toolCursorsOf = toolCursorsOf;
 exports.toolbarMeasureKey = toolbarMeasureKey;
 exports.toolbarStopsOf = toolbarStopsOf;