630 lines
17 KiB
TypeScript
630 lines
17 KiB
TypeScript
import type { PrintConfig } from "./types";
|
|
|
|
/** A5 portrait dimensions. Two of these fill an A4 landscape sheet exactly. */
|
|
export const PAGE_WIDTH_MM = 148.5;
|
|
export const PAGE_HEIGHT_MM = 210;
|
|
|
|
export interface PaginateOptions extends PrintConfig {
|
|
/** Path of the markdown being printed, used by nested components. */
|
|
articlePath: string;
|
|
}
|
|
|
|
export interface PaginateResult {
|
|
pages: HTMLElement[];
|
|
warnings: string[];
|
|
}
|
|
|
|
export interface SplitResult {
|
|
head: Node;
|
|
tail: Node | null;
|
|
}
|
|
|
|
export function mmToPx(mm: number): number {
|
|
return (mm * 96) / 25.4;
|
|
}
|
|
|
|
export function contentWidthMm(config: PrintConfig): number {
|
|
return PAGE_WIDTH_MM - config.margin * 2;
|
|
}
|
|
|
|
export function contentHeightMm(config: PrintConfig): number {
|
|
return PAGE_HEIGHT_MM - config.margin * 2;
|
|
}
|
|
|
|
export function columnWidthMm(config: PrintConfig): number {
|
|
const width = contentWidthMm(config);
|
|
return (width - (config.columns - 1) * config.gap) / config.columns;
|
|
}
|
|
|
|
/**
|
|
* Create one A5 page: an `<article data-src>` (so nested components can
|
|
* resolve relative paths) containing a fixed-height multi-column flow.
|
|
*/
|
|
export function createPageElement(opts: PaginateOptions): {
|
|
page: HTMLElement;
|
|
flow: HTMLElement;
|
|
} {
|
|
const page = document.createElement("article");
|
|
page.className = "md-print-page";
|
|
page.setAttribute("data-src", opts.articlePath);
|
|
page.style.width = `${PAGE_WIDTH_MM}mm`;
|
|
page.style.height = `${PAGE_HEIGHT_MM}mm`;
|
|
page.style.padding = `${opts.margin}mm`;
|
|
page.style.boxSizing = "border-box";
|
|
page.style.position = "relative";
|
|
page.style.overflow = "hidden";
|
|
page.style.background = "white";
|
|
page.style.setProperty("--md-print-font-size", `${opts.font}mm`);
|
|
|
|
if (opts.title) {
|
|
const header = document.createElement("div");
|
|
header.className = "md-print-header";
|
|
header.textContent = opts.title;
|
|
page.appendChild(header);
|
|
}
|
|
|
|
const flow = document.createElement("div");
|
|
flow.className = "md-print-flow md-print-content prose";
|
|
flow.style.columnCount = String(opts.columns);
|
|
flow.style.columnGap = `${opts.gap}mm`;
|
|
flow.style.columnFill = "auto";
|
|
flow.style.height = "100%";
|
|
flow.style.width = "100%";
|
|
page.appendChild(flow);
|
|
|
|
if (opts.pageNumbers || opts.timestamp) {
|
|
const footer = document.createElement("div");
|
|
footer.className = "md-print-footer";
|
|
page.appendChild(footer);
|
|
}
|
|
|
|
return { page, flow };
|
|
}
|
|
|
|
/**
|
|
* Flow the children of `source` into A5 pages.
|
|
*
|
|
* The algorithm is greedy: append a block to the current page and measure.
|
|
* If it overflows, try to split it at a word / list-item / table-row
|
|
* boundary so the remaining space is used; otherwise start a new page.
|
|
* Blocks are moved (not cloned) so custom elements keep their state.
|
|
*/
|
|
export function paginate(
|
|
source: HTMLElement,
|
|
opts: PaginateOptions,
|
|
mount?: HTMLElement,
|
|
): PaginateResult {
|
|
const pages: HTMLElement[] = [];
|
|
const warnings: string[] = [];
|
|
const queue: Node[] = Array.from(source.childNodes).filter(isMeaningfulNode);
|
|
|
|
const newPage = () => {
|
|
const created = createPageElement(opts);
|
|
// Pages must be in the document for getBoundingClientRect() to work.
|
|
mount?.appendChild(created.page);
|
|
pages.push(created.page);
|
|
return created;
|
|
};
|
|
|
|
// Wrap stray text nodes so they can be measured and moved as blocks.
|
|
for (let i = 0; i < queue.length; i++) {
|
|
const node = queue[i];
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
const p = document.createElement("p");
|
|
p.appendChild(node);
|
|
queue[i] = p;
|
|
}
|
|
}
|
|
|
|
let current = newPage();
|
|
let i = 0;
|
|
let guard = 0;
|
|
|
|
while (i < queue.length) {
|
|
if (++guard > 100000) {
|
|
warnings.push("分页循环次数过多，已中止。");
|
|
break;
|
|
}
|
|
|
|
const node = queue[i];
|
|
current.flow.appendChild(node);
|
|
|
|
if (!overflows(current.flow)) {
|
|
i++;
|
|
continue;
|
|
}
|
|
|
|
current.flow.removeChild(node as ChildNode);
|
|
|
|
const split = splitToFit(node, current.flow);
|
|
if (split) {
|
|
current.flow.appendChild(split.head);
|
|
if (split.tail && hasContent(split.tail)) {
|
|
queue.splice(i, 1, split.tail);
|
|
current = newPage();
|
|
continue;
|
|
}
|
|
i++;
|
|
continue;
|
|
}
|
|
|
|
if (current.flow.childNodes.length > 0) {
|
|
// Avoid leaving a heading alone at the bottom of the last column.
|
|
const heading = takeTrailingHeading(current.flow, opts);
|
|
if (heading) queue.splice(i, 0, heading);
|
|
current = newPage();
|
|
continue;
|
|
}
|
|
|
|
// The block is taller than a whole page and cannot be split.
|
|
current.flow.appendChild(node);
|
|
warnings.push(`内容块过高，已允许溢出：${describeNode(node)}`);
|
|
i++;
|
|
current = newPage();
|
|
}
|
|
|
|
if (pages.length > 1) {
|
|
const last = pages[pages.length - 1];
|
|
const lastFlow = last.querySelector(".md-print-flow");
|
|
if (lastFlow && !lastFlow.hasChildNodes()) pages.pop();
|
|
}
|
|
|
|
return { pages, warnings };
|
|
}
|
|
|
|
/**
|
|
* Poll until the element's scroll size has been stable for `quietMs`.
|
|
* Used to wait for async custom elements (tables, embeds) and images.
|
|
*/
|
|
export async function waitForStableSize(
|
|
el: HTMLElement,
|
|
quietMs = 300,
|
|
maxMs = 4000,
|
|
): Promise<void> {
|
|
const start = Date.now();
|
|
let last = "";
|
|
let lastChange = Date.now();
|
|
|
|
while (Date.now() - start < maxMs) {
|
|
const size = `${el.scrollHeight}x${el.scrollWidth}`;
|
|
if (size !== last) {
|
|
last = size;
|
|
lastChange = Date.now();
|
|
} else if (Date.now() - lastChange >= quietMs) {
|
|
return;
|
|
}
|
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Measurement
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/**
|
|
* A block overflows when its last fragment extends past the flow's right
|
|
* (an extra column) or bottom (taller than the column) edge.
|
|
*/
|
|
function overflows(flow: HTMLElement): boolean {
|
|
// Overflow columns extend the scroll width of a fixed-height multicol box.
|
|
if (flow.scrollWidth > flow.clientWidth + 1) return true;
|
|
|
|
const rect = flow.getBoundingClientRect();
|
|
const last = flow.lastElementChild;
|
|
if (!last) return false;
|
|
const lastRect = last.getBoundingClientRect();
|
|
return lastRect.right > rect.right + 0.5 || lastRect.bottom > rect.bottom + 0.5;
|
|
}
|
|
|
|
function takeTrailingHeading(
|
|
flow: HTMLElement,
|
|
opts: PaginateOptions,
|
|
): HTMLElement | null {
|
|
const last = flow.lastElementChild;
|
|
if (!last || !/^H[1-6]$/.test(last.tagName)) return null;
|
|
if (flow.childNodes.length <= 1) return null;
|
|
|
|
const flowRect = flow.getBoundingClientRect();
|
|
const lastRect = last.getBoundingClientRect();
|
|
const gapPx = mmToPx(opts.gap);
|
|
const columnWidthPx =
|
|
(flowRect.width - (opts.columns - 1) * gapPx) / opts.columns;
|
|
const lastColumnLeft =
|
|
flowRect.left + (opts.columns - 1) * (columnWidthPx + gapPx);
|
|
|
|
// Only move headings that sit in the final column; a heading in an earlier
|
|
// column still has content after it on the same page.
|
|
if (lastRect.left < lastColumnLeft - 0.5) return null;
|
|
|
|
flow.removeChild(last);
|
|
return last as HTMLElement;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Splitting
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const SPLITTABLE_CONTAINERS = new Set([
|
|
"section",
|
|
"article",
|
|
"aside",
|
|
"details",
|
|
"figure",
|
|
]);
|
|
|
|
const BLOCK_TAGS = new Set([
|
|
"p",
|
|
"div",
|
|
"ul",
|
|
"ol",
|
|
"table",
|
|
"blockquote",
|
|
"pre",
|
|
"h1",
|
|
"h2",
|
|
"h3",
|
|
"h4",
|
|
"h5",
|
|
"h6",
|
|
"section",
|
|
"article",
|
|
"aside",
|
|
"details",
|
|
"figure",
|
|
]);
|
|
|
|
function splitToFit(node: Node, flow: HTMLElement): SplitResult | null {
|
|
if (node.nodeType !== Node.ELEMENT_NODE) return null;
|
|
const el = node as HTMLElement;
|
|
const tag = el.tagName.toLowerCase();
|
|
|
|
if (tag === "p") {
|
|
return splitTextElementToFit(el, flow);
|
|
}
|
|
|
|
if (tag === "div" || tag === "blockquote" || tag === "li") {
|
|
return hasBlockChildren(el)
|
|
? splitContainerToFit(el, flow)
|
|
: splitTextElementToFit(el, flow);
|
|
}
|
|
|
|
if (tag === "ul" || tag === "ol") {
|
|
return splitListToFit(el, flow);
|
|
}
|
|
|
|
if (tag === "table") {
|
|
return splitTableToFit(el, flow);
|
|
}
|
|
|
|
if (SPLITTABLE_CONTAINERS.has(tag)) {
|
|
return splitContainerToFit(el, flow);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function hasBlockChildren(el: HTMLElement): boolean {
|
|
return Array.from(el.children).some((child) =>
|
|
BLOCK_TAGS.has(child.tagName.toLowerCase()),
|
|
);
|
|
}
|
|
|
|
function splitTextElementToFit(
|
|
el: HTMLElement,
|
|
flow: HTMLElement,
|
|
): SplitResult | null {
|
|
const total = countWords(el);
|
|
if (total < 2) return null;
|
|
|
|
let lo = 1;
|
|
let hi = total - 1;
|
|
let best = 0;
|
|
|
|
while (lo <= hi) {
|
|
const mid = Math.floor((lo + hi) / 2);
|
|
const [head] = splitTextElementAt(el, mid);
|
|
flow.appendChild(head);
|
|
const fits = !overflows(flow);
|
|
flow.removeChild(head);
|
|
if (fits) {
|
|
best = mid;
|
|
lo = mid + 1;
|
|
} else {
|
|
hi = mid - 1;
|
|
}
|
|
}
|
|
|
|
if (best === 0) return null;
|
|
|
|
const [head, tail] = splitTextElementAt(el, best);
|
|
trimLeadingWhitespace(tail);
|
|
removeEmptyInline(tail);
|
|
return { head, tail: hasContent(tail) ? tail : null };
|
|
}
|
|
|
|
/**
|
|
* Split an element's inline content after `wordCount` words, preserving
|
|
* inline markup (strong/em/code/links) via a DOM Range.
|
|
*/
|
|
export function splitTextElementAt(
|
|
el: HTMLElement,
|
|
wordCount: number,
|
|
): [HTMLElement, HTMLElement] {
|
|
const head = el.cloneNode(false) as HTMLElement;
|
|
const tail = el.cloneNode(false) as HTMLElement;
|
|
const boundary = findWordBoundary(el, wordCount);
|
|
if (!boundary) {
|
|
head.appendChild(el.cloneNode(true));
|
|
return [head, tail];
|
|
}
|
|
|
|
const range = document.createRange();
|
|
range.setStart(el, 0);
|
|
range.setEnd(boundary.node, boundary.offset);
|
|
head.appendChild(range.cloneContents());
|
|
|
|
range.setStart(boundary.node, boundary.offset);
|
|
range.setEnd(el, el.childNodes.length);
|
|
tail.appendChild(range.cloneContents());
|
|
|
|
return [head, tail];
|
|
}
|
|
|
|
function countWords(el: Node): number {
|
|
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
|
|
let count = 0;
|
|
let node: Node | null;
|
|
while ((node = walker.nextNode())) {
|
|
const matches = (node.textContent || "").match(/\S+/g);
|
|
if (matches) count += matches.length;
|
|
}
|
|
return count;
|
|
}
|
|
|
|
function findWordBoundary(
|
|
el: Node,
|
|
wordCount: number,
|
|
): { node: Text; offset: number } | null {
|
|
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
|
|
let count = 0;
|
|
let node: Node | null;
|
|
while ((node = walker.nextNode())) {
|
|
const text = node.textContent || "";
|
|
const re = /\S+/g;
|
|
let match: RegExpExecArray | null;
|
|
while ((match = re.exec(text))) {
|
|
count++;
|
|
if (count === wordCount) {
|
|
return { node: node as Text, offset: match.index + match[0].length };
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function splitListToFit(
|
|
list: HTMLElement,
|
|
flow: HTMLElement,
|
|
): SplitResult | null {
|
|
const items = Array.from(list.children).filter(
|
|
(child) => child.tagName === "LI",
|
|
) as HTMLElement[];
|
|
|
|
if (items.length === 0) return null;
|
|
|
|
if (items.length === 1) {
|
|
const split = splitToFit(items[0], flow);
|
|
if (!split) return null;
|
|
const headList = list.cloneNode(false) as HTMLElement;
|
|
headList.appendChild(split.head);
|
|
const tailList = list.cloneNode(false) as HTMLElement;
|
|
if (split.tail) tailList.appendChild(split.tail);
|
|
return { head: headList, tail: hasContent(tailList) ? tailList : null };
|
|
}
|
|
|
|
let lo = 1;
|
|
let hi = items.length - 1;
|
|
let best = 0;
|
|
|
|
while (lo <= hi) {
|
|
const mid = Math.floor((lo + hi) / 2);
|
|
const head = list.cloneNode(false) as HTMLElement;
|
|
for (let i = 0; i < mid; i++) {
|
|
head.appendChild(items[i].cloneNode(true));
|
|
}
|
|
flow.appendChild(head);
|
|
const fits = !overflows(flow);
|
|
flow.removeChild(head);
|
|
if (fits) {
|
|
best = mid;
|
|
lo = mid + 1;
|
|
} else {
|
|
hi = mid - 1;
|
|
}
|
|
}
|
|
|
|
if (best === 0) return null;
|
|
|
|
const head = list.cloneNode(false) as HTMLElement;
|
|
const tail = list.cloneNode(false) as HTMLElement;
|
|
items.forEach((item, index) => {
|
|
(index < best ? head : tail).appendChild(item.cloneNode(true));
|
|
});
|
|
|
|
return { head, tail: hasContent(tail) ? tail : null };
|
|
}
|
|
|
|
function splitTableToFit(
|
|
table: HTMLElement,
|
|
flow: HTMLElement,
|
|
): SplitResult | null {
|
|
const tbody = table.querySelector("tbody") || table;
|
|
const rows = Array.from(tbody.children).filter(
|
|
(child) => child.tagName === "TR",
|
|
) as HTMLElement[];
|
|
|
|
if (rows.length < 2) return null;
|
|
|
|
let lo = 1;
|
|
let hi = rows.length - 1;
|
|
let best = 0;
|
|
|
|
while (lo <= hi) {
|
|
const mid = Math.floor((lo + hi) / 2);
|
|
const head = cloneTableShell(table);
|
|
const headBody = head.querySelector("tbody")!;
|
|
for (let i = 0; i < mid; i++) {
|
|
headBody.appendChild(rows[i].cloneNode(true));
|
|
}
|
|
flow.appendChild(head);
|
|
const fits = !overflows(flow);
|
|
flow.removeChild(head);
|
|
if (fits) {
|
|
best = mid;
|
|
lo = mid + 1;
|
|
} else {
|
|
hi = mid - 1;
|
|
}
|
|
}
|
|
|
|
if (best === 0) return null;
|
|
|
|
const head = cloneTableShell(table);
|
|
const headBody = head.querySelector("tbody")!;
|
|
const tail = cloneTableShell(table);
|
|
const tailBody = tail.querySelector("tbody")!;
|
|
|
|
rows.forEach((row, index) => {
|
|
(index < best ? headBody : tailBody).appendChild(row.cloneNode(true));
|
|
});
|
|
|
|
return { head, tail: hasContent(tail) ? tail : null };
|
|
}
|
|
|
|
function cloneTableShell(table: HTMLElement): HTMLElement {
|
|
const clone = table.cloneNode(false) as HTMLElement;
|
|
for (const child of Array.from(table.children)) {
|
|
const tag = child.tagName;
|
|
if (tag === "THEAD" || tag === "COLGROUP" || tag === "CAPTION") {
|
|
clone.appendChild(child.cloneNode(true));
|
|
}
|
|
}
|
|
const tbody = document.createElement("tbody");
|
|
clone.appendChild(tbody);
|
|
return clone;
|
|
}
|
|
|
|
function splitContainerToFit(
|
|
el: HTMLElement,
|
|
flow: HTMLElement,
|
|
): SplitResult | null {
|
|
const children = Array.from(el.childNodes).filter(isMeaningfulNode);
|
|
if (children.length === 0) return null;
|
|
|
|
if (children.length === 1) {
|
|
const only = children[0];
|
|
if (only.nodeType === Node.ELEMENT_NODE) {
|
|
const split = splitToFit(only, flow);
|
|
if (split) {
|
|
const head = el.cloneNode(false) as HTMLElement;
|
|
head.appendChild(split.head);
|
|
const tail = el.cloneNode(false) as HTMLElement;
|
|
if (split.tail) tail.appendChild(split.tail);
|
|
return { head, tail: hasContent(tail) ? tail : null };
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
let lo = 1;
|
|
let hi = children.length - 1;
|
|
let best = 0;
|
|
|
|
while (lo <= hi) {
|
|
const mid = Math.floor((lo + hi) / 2);
|
|
const head = el.cloneNode(false) as HTMLElement;
|
|
for (let i = 0; i < mid; i++) {
|
|
head.appendChild(children[i].cloneNode(true));
|
|
}
|
|
flow.appendChild(head);
|
|
const fits = !overflows(flow);
|
|
flow.removeChild(head);
|
|
if (fits) {
|
|
best = mid;
|
|
lo = mid + 1;
|
|
} else {
|
|
hi = mid - 1;
|
|
}
|
|
}
|
|
|
|
if (best === 0) return null;
|
|
|
|
const head = el.cloneNode(false) as HTMLElement;
|
|
const tail = el.cloneNode(false) as HTMLElement;
|
|
children.forEach((child, index) => {
|
|
(index < best ? head : tail).appendChild(child.cloneNode(true));
|
|
});
|
|
|
|
return { head, tail: hasContent(tail) ? tail : null };
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Small helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function isMeaningfulNode(node: Node): boolean {
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
return !!node.textContent?.trim();
|
|
}
|
|
return node.nodeType === Node.ELEMENT_NODE;
|
|
}
|
|
|
|
function trimLeadingWhitespace(el: Node): void {
|
|
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
|
|
let node: Node | null;
|
|
while ((node = walker.nextNode())) {
|
|
const text = node.textContent || "";
|
|
if (!text.trim()) {
|
|
node.textContent = "";
|
|
continue;
|
|
}
|
|
node.textContent = text.replace(/^\s+/, "");
|
|
break;
|
|
}
|
|
}
|
|
|
|
function removeEmptyInline(el: Element): void {
|
|
for (const child of Array.from(el.children)) {
|
|
removeEmptyInline(child);
|
|
if (
|
|
child.children.length === 0 &&
|
|
!child.textContent?.trim() &&
|
|
!["IMG", "BR", "HR", "SVG"].includes(child.tagName)
|
|
) {
|
|
child.remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
function hasContent(node: Node): boolean {
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
return !!node.textContent?.trim();
|
|
}
|
|
if (node.nodeType !== Node.ELEMENT_NODE) return false;
|
|
const el = node as HTMLElement;
|
|
if (["IMG", "BR", "HR", "SVG", "VIDEO", "CANVAS"].includes(el.tagName)) {
|
|
return true;
|
|
}
|
|
if (el.textContent?.trim()) return true;
|
|
return el.querySelector("img, svg, video, canvas, hr, br") !== null;
|
|
}
|
|
|
|
function describeNode(node: Node): string {
|
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
const el = node as HTMLElement;
|
|
const text = (el.textContent || "").trim().slice(0, 40);
|
|
return `<${el.tagName.toLowerCase()}>${text ? ` ${text}…` : ""}`;
|
|
}
|
|
return (node.textContent || "").trim().slice(0, 40) || "文本节点";
|
|
}
|