reamkit 1.31.0 → 1.32.0

package/dist/esm/svg/svg-writer.js

@@ -1,8 +1,10 @@
+import { pageLayers, paintPlan } from "../layout/page-doc.js";
 import { FEATURES } from "../core/ir/features.js";
 import { svgPathData } from "../core/vector.js";
 import { gradientSvgDef } from "../core/drawingml/shape-render.js";
-import { paintPlan } from "../layout/page-doc.js";
+import { BORDER_DASHES, washVeil } from "../layout/line-paint.js";
 import { toBase64 } from "../core/bytes.js";
+import { SvgGlyphs, emitSvgLine } from "./svg-text.js";
 //#region src/svg/svg-writer.ts
 var PAGE_GAP = 12;
 /**
@@ -23,17 +25,25 @@ function writeSvg(laid, opts = {}) {
 	const width = Math.max(1, ...laid.pages.map((p) => p.width));
 	const height = laid.pages.reduce((s, p) => s + p.height, 0) + gap * Math.max(0, laid.pages.length - 1);
 	const parts = [];
-	parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${fmt(width)}" height="${fmt(height)}" viewBox="0 0 ${fmt(width)} ${fmt(height)}">`);
+	const ids = { n: 0 };
+	const glyphs = new SvgGlyphs();
+	const ctx = {
+		glyphs,
+		ids,
+		laid,
+		image: (out, placed) => emitPlaced(out, placed, laid, ids),
+		shape: (out, shape) => emitShape(out, shape, ids)
+	};
 	let yOffset = 0;
-	const idc = { n: 0 };
 	laid.pages.forEach((page, i) => {
 		parts.push(`<g transform="translate(0 ${fmt(yOffset)})" data-page="${i + 1}">`);
 		parts.push(`<rect x="0" y="0" width="${fmt(page.width)}" height="${fmt(page.height)}" fill="#ffffff" stroke="#cccccc"/>`);
-		emitPage(parts, page, laid, losses, idc);
+		emitPage(parts, page, ctx);
 		parts.push("</g>");
 		yOffset += page.height + gap;
 	});
 	parts.push("</svg>");
+	parts.unshift(`<svg xmlns="http://www.w3.org/2000/svg" width="${fmt(width)}" height="${fmt(height)}" viewBox="0 0 ${fmt(width)} ${fmt(height)}">`, glyphs.defsXml());
 	return {
 		bytes: new TextEncoder().encode(parts.join("\n")),
 		losses
@@ -54,11 +64,24 @@ var svgWriter = {
 	]),
 	write: (doc, opts) => writeSvg(doc, opts ?? {})
 };
-function emitPage(out, page, laid, losses, idc) {
-	const plan = paintPlan(page.commands);
-	for (const item of plan.behind) emitPageItem(out, item, laid, losses, idc);
+function emitPage(out, page, ctx) {
+	for (const layer of pageLayers(page.commands)) {
+		const w = layer.window;
+		if (!w) {
+			emitLayer(out, layer.items, ctx);
+			continue;
+		}
+		const id = `win${String(ctx.ids.n++)}`;
+		out.push(`<clipPath id="${id}"><rect x="${fmt(w.x)}" y="${fmt(w.y)}" width="${fmt(w.width)}" height="${fmt(w.height)}"/></clipPath>`, `<g clip-path="url(#${id})">`);
+		emitLayer(out, layer.items, ctx);
+		out.push("</g>");
+	}
+}
+function emitLayer(out, commands, ctx) {
+	const plan = paintPlan(commands);
+	for (const item of plan.behind) emitPageItem(out, item, ctx);
 	for (const f of plan.fills) out.push(`<rect x="${fmt(f.x)}" y="${fmt(f.y)}" width="${fmt(f.width)}" height="${fmt(f.height)}" fill="#${f.fillColorHex}"/>`);
-	for (const img of plan.images) emitImage(out, img, laid, idc);
+	for (const img of plan.images) emitImage(out, img, ctx);
 	for (const b of plan.borders) {
 		const x2 = b.x + b.width;
 		const yTop = b.y;
@@ -84,104 +107,148 @@ function emitPage(out, page, laid, losses, idc) {
 			x2,
 			yBottom
 		];
-		out.push(`<line x1="${fmt(ax)}" y1="${fmt(ay)}" x2="${fmt(bx)}" y2="${fmt(by)}" stroke="#${b.borderColorHex}" stroke-width="${fmt(b.borderSizePt)}"${b.borderStyle === "dashed" ? " stroke-dasharray=\"8 2.5\"" : b.borderStyle === "dashSmallGap" ? " stroke-dasharray=\"3 1\"" : b.borderStyle === "dotted" ? " stroke-dasharray=\"0.5 1\"" : ""}/>`);
+		const dash = b.borderStyle !== void 0 ? BORDER_DASHES.get(b.borderStyle) : void 0;
+		out.push(`<line x1="${fmt(ax)}" y1="${fmt(ay)}" x2="${fmt(bx)}" y2="${fmt(by)}" stroke="#${b.borderColorHex}" stroke-width="${fmt(b.borderSizePt)}"${dash ? ` stroke-dasharray="${dash.map(fmt).join(" ")}"` : ""}/>`);
 	}
-	for (const sh of plan.shapes) emitShape(out, sh.shape, idc);
-	for (const picture of plan.pictures) for (const item of picture) emitPageItem(out, item, laid, losses, idc);
-	for (const run of plan.ordered) for (const item of run) emitPageItem(out, item, laid, losses, idc);
-	for (const t of plan.lines) emitTextLine(out, t, losses, idc);
+	for (const sh of plan.shapes) emitShape(out, sh.shape, ctx.ids);
+	for (const picture of plan.pictures) for (const item of picture) emitPageItem(out, item, ctx);
+	for (const run of plan.ordered) for (const item of run) emitPageItem(out, item, ctx);
+	for (const t of plan.lines) emitSvgLine(out, t, ctx);
 }
 /**
-* One picture. §20.1.8.23 `a:duotone` recolours it between two colours — its
-* dark end and its light end — which is a luminance-to-two-tone map, and SVG
-* states exactly that: luminance into every channel, then a two-entry transfer
-* table per channel.
+* One picture item, its placement and its effects: §20.1.8.23 `a:duotone`
+* recolours it between its dark end and its light end — luminance into every
+* channel, then a two-entry transfer table per channel — and a picture FILL
+* (§20.1.8.14) is clipped to the outline of the shape it fills.
 *
 * @param out  The SVG fragment sink.
 * @param img  The image item.
-* @param laid The laid-out document, for the image's data URI.
-* @param idc  The shared id counter, for the filter's id.
+* @param ctx  The document, its id counter, its drawing.
 */
-function emitImage(out, img, laid, idc) {
-	const href = imageHref(img.imageResourceName, laid);
-	if (!href) return;
-	let filter = "";
+function emitImage(out, img, ctx) {
+	let filter;
 	if (img.duotone) {
-		const id = `duo${String(idc.n++)}`;
+		const id = `duo${String(ctx.ids.n++)}`;
 		const chan = (hex, at) => parseInt(hex.slice(at, at + 2), 16) / 255;
 		const table = (at) => `${fmt(chan(img.duotone.shadowHex, at))} ${fmt(chan(img.duotone.highlightHex, at))}`;
 		out.push(`<filter id="${id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"/><feComponentTransfer><feFuncR type="table" tableValues="${table(0)}"/><feFuncG type="table" tableValues="${table(2)}"/><feFuncB type="table" tableValues="${table(4)}"/></feComponentTransfer></filter>`);
-		filter = ` filter="url(#${id})"`;
+		filter = id;
+	}
+	let clipped = false;
+	if (img.clip) {
+		const id = `pic${String(ctx.ids.n++)}`;
+		const [a, b, c, d, e, f] = img.clip.transform;
+		out.push(`<clipPath id="${id}">` + img.clip.paths.map((p) => `<path d="${pathData(p.segments)}" transform="matrix(${fmt(a)} ${fmt(b)} ${fmt(c)} ${fmt(d)} ${fmt(e)} ${fmt(f)})"/>`).join("") + `</clipPath>`, `<g clip-path="url(#${id})">`);
+		clipped = true;
+	}
+	emitPlaced(out, {
+		resourceName: img.imageResourceName,
+		x: img.x,
+		y: img.y,
+		width: img.width,
+		height: img.height,
+		...img.crop ? { crop: img.crop } : {},
+		...img.rotationDeg !== void 0 ? { rotationDeg: img.rotationDeg } : {},
+		...img.flipH === true ? { flipH: true } : {},
+		...img.flipV === true ? { flipV: true } : {},
+		...img.alpha !== void 0 ? { alpha: img.alpha } : {}
+	}, ctx.laid, ctx.ids, filter, img.wash);
+	if (clipped) out.push("</g>");
+}
+/**
+* A picture in its box, as the PDF places one: turned about the box's centre
+* (clockwise, as DrawingML measures), mirrored about it, and — cropped by
+* `a:srcRect` (§20.1.8.55) — drawn larger than the box with the box as its clip,
+* so the part that was kept fills it. A wash (§14.1.2.10) is the veil laid over
+* it.
+*/
+function emitPlaced(out, placed, laid, ids, filter, wash) {
+	const href = imageHref(placed.resourceName, laid);
+	if (!href) return;
+	const { x, y, width, height } = placed;
+	const cx = x + width / 2;
+	const cy = y + height / 2;
+	const turns = [];
+	if (placed.rotationDeg) turns.push(`rotate(${fmt(placed.rotationDeg)} ${fmt(cx)} ${fmt(cy)})`);
+	if (placed.flipH === true || placed.flipV === true) {
+		const sx = placed.flipH === true ? -1 : 1;
+		const sy = placed.flipV === true ? -1 : 1;
+		turns.push(`matrix(${String(sx)} 0 0 ${String(sy)} ${fmt(sx === -1 ? 2 * cx : 0)} ${fmt(sy === -1 ? 2 * cy : 0)})`);
 	}
-	out.push(`<image x="${fmt(img.x)}" y="${fmt(img.y)}" width="${fmt(img.width)}" height="${fmt(img.height)}" href="${href}" preserveAspectRatio="none"${filter}/>`);
+	const open = turns.length > 0 ? `<g transform="${turns.join(" ")}">` : "";
+	if (open) out.push(open);
+	const crop = placed.crop;
+	let clipId;
+	let drawn = {
+		x,
+		y,
+		width,
+		height
+	};
+	if (crop) {
+		const keptW = 1 - crop.left - crop.right;
+		const keptH = 1 - crop.top - crop.bottom;
+		if (keptW > 0 && keptH > 0) {
+			const fullW = width / keptW;
+			const fullH = height / keptH;
+			drawn = {
+				x: x - crop.left * fullW,
+				y: y - crop.top * fullH,
+				width: fullW,
+				height: fullH
+			};
+			clipId = `crop${String(ids.n++)}`;
+			out.push(`<clipPath id="${clipId}"><rect x="${fmt(x)}" y="${fmt(y)}" width="${fmt(width)}" height="${fmt(height)}"/></clipPath>`);
+		}
+	}
+	const alpha = placed.alpha !== void 0 && placed.alpha < 1 ? ` opacity="${fmt(placed.alpha)}"` : "";
+	out.push(`<image x="${fmt(drawn.x)}" y="${fmt(drawn.y)}" width="${fmt(drawn.width)}" height="${fmt(drawn.height)}" href="${href}" preserveAspectRatio="none"${clipId ? ` clip-path="url(#${clipId})"` : ""}${filter ? ` filter="url(#${filter})"` : ""}${alpha}/>`);
+	const veil = washVeil(wash);
+	if (veil) {
+		const grey = Math.round(veil.grey * 255).toString(16).padStart(2, "0");
+		out.push(`<rect x="${fmt(x)}" y="${fmt(y)}" width="${fmt(width)}" height="${fmt(height)}" fill="#${grey}${grey}${grey}" opacity="${fmt(veil.alpha)}"/>`);
+	}
+	if (open) out.push("</g>");
 }
 /**
 * One page item, whatever its kind — for the runs that paint in their own order
 * (what stands behind the content, and a picture's own primitives) rather than
 * in the by-kind passes.
 *
-* @param out    The SVG fragment sink.
-* @param item   The item to draw.
-* @param laid   The laid-out document, for image resources.
-* @param losses Where an unrenderable item records itself.
-* @param idc    The shared id counter for generated defs.
+* @param out  The SVG fragment sink.
+* @param item The item to draw.
+* @param ctx  The document, its glyphs, its id counter and its drawing.
 */
-function emitPageItem(out, item, laid, losses, idc) {
+function emitPageItem(out, item, ctx) {
 	if (item.type === "shape") {
-		emitShape(out, item.shape, idc);
+		emitShape(out, item.shape, ctx.ids);
 		return;
 	}
 	if (item.type === "line") {
-		emitTextLine(out, item, losses, idc);
+		emitSvgLine(out, item, ctx);
 		return;
 	}
 	if (item.type === "image") {
-		emitImage(out, item, laid, idc);
+		emitImage(out, item, ctx);
 		return;
 	}
 	if (item.type === "fill") out.push(`<rect x="${fmt(item.x)}" y="${fmt(item.y)}" width="${fmt(item.width)}" height="${fmt(item.height)}" fill="#${item.fillColorHex}"/>`);
 }
-function emitTextLine(out, item, losses, idc) {
-	const clip = item.clip;
-	if (clip) {
-		const id = `clip${idc.n++}`;
-		out.push(`<clipPath id="${id}"><rect x="${fmt(clip.x)}" y="${fmt(clip.y)}" width="${fmt(clip.width)}" height="${fmt(clip.height)}"/></clipPath>`, `<g clip-path="url(#${id})">`);
-	}
-	const y = item.baselineY;
-	let x = item.originX;
-	const rot = item.rotationDeg ? ` transform="rotate(${fmt(-item.rotationDeg)} ${fmt(item.originX)} ${fmt(item.baselineY)})"` : "";
-	for (const tok of item.line.tokens) {
-		if (tok.kind === "image") {
-			x += tok.widthPt;
-			continue;
-		}
-		if (tok.kind === "math") {
-			losses.push({
-				severity: "dropped",
-				feature: FEATURES.math,
-				detail: "inline math box not rendered by the SVG writer (v0)"
-			});
-			x += tok.widthPt;
-			continue;
-		}
-		if (tok.text.trim().length > 0) out.push(`<text x="${fmt(x)}" y="${fmt(y)}"${rot} font-family="sans-serif" font-size="${fmt(tok.fontSizePt)}" fill="#${tok.resolvedRun.colorHex}">${escapeXml(tok.text)}</text>`);
-		x += tok.widthPt;
-	}
-	if (clip) out.push("</g>");
-}
-function emitShape(out, shape, idc) {
+function emitShape(out, shape, ids) {
 	const [a, b, c, d, e, f] = shape.transform;
 	const transform = `matrix(${fmt(a)} ${fmt(b)} ${fmt(c)} ${fmt(d)} ${fmt(e)} ${fmt(f)})`;
 	let fill;
 	if (shape.fillGradient) {
-		const id = `grad${idc.n++}`;
+		const id = `grad${String(ids.n++)}`;
 		out.push(gradientSvgDef(id, shape.fillGradient));
 		fill = `url(#${id})`;
 	} else fill = shape.fillColorHex ? `#${shape.fillColorHex}` : "none";
-	const stroke = shape.stroke ? ` stroke="#${shape.stroke.colorHex}" stroke-width="${fmt(shape.stroke.widthPt)}"` : "";
+	const fillAlpha = shape.fillAlpha !== void 0 && shape.fillAlpha < 1 && fill !== "none" ? ` fill-opacity="${fmt(shape.fillAlpha)}"` : "";
+	const s = shape.stroke;
+	const stroke = s ? ` stroke="#${s.colorHex}" stroke-width="${fmt(s.widthPt)}"` + (s.cap !== void 0 ? ` stroke-linecap="${s.cap}"` : "") + (s.join !== void 0 ? ` stroke-linejoin="${s.join}"` : "") + (s.dash && s.dash.length > 0 ? ` stroke-dasharray="${s.dash.map(fmt).join(" ")}"` : "") : "";
 	const shadow = shape.shadow;
 	if (shadow) {
-		const id = `shadow${idc.n++}`;
+		const id = `shadow${String(ids.n++)}`;
 		if (shadow.blurPt > 0) out.push(`<filter id="${id}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="${fmt(shadow.blurPt / 2)}"/></filter>`);
 		const shTransform = `matrix(${fmt(a)} ${fmt(b)} ${fmt(c)} ${fmt(d)} ${fmt(e + shadow.dxPt)} ${fmt(f + shadow.dyPt)})`;
 		out.push(`<g opacity="${fmt(shadow.alpha)}"${shadow.blurPt > 0 ? ` filter="url(#${id})"` : ""}>`);
@@ -194,7 +261,7 @@ function emitShape(out, shape, idc) {
 	for (const path of shape.paths) {
 		const d2 = pathData(path.segments);
 		const rule = path.fillRule === "evenodd" ? " fill-rule=\"evenodd\"" : "";
-		out.push(`<path d="${d2}" fill="${fill}"${rule}${stroke} transform="${transform}"/>`);
+		out.push(`<path d="${d2}" fill="${fill}"${fillAlpha}${rule}${stroke} transform="${transform}"/>`);
 	}
 }
 function pathData(segments) {
@@ -209,9 +276,6 @@ function imageHref(resourceName, laid) {
 		return `data:${res.prepared.mimeType};base64,${toBase64(bytes)}`;
 	}
 }
-function escapeXml(s) {
-	return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
-}
 function fmt(n) {
 	const r = Math.round(n * 100) / 100;
 	return Object.is(r, -0) ? "0" : String(r);

package/dist/esm/word/docx-writer.js

@@ -156,7 +156,8 @@ function writeDocx(flow) {
 		familiesUsed: /* @__PURE__ */ new Map(),
 		...flow.faceOutlines ? { faceOutlines: flow.faceOutlines } : {},
 		facesUsed: /* @__PURE__ */ new Set(),
-		zRanks: zRanksOf(flow)
+		zRanks: zRanksOf(flow),
+		overlaid: /* @__PURE__ */ new Set()
 	};
 	const docScope = newScope();
 	const extraParts = [];
@@ -355,7 +356,10 @@ function zRanksOf(flow) {
 		for (const el of blocks) {
 			const z = el.kind === "image" ? el.image.float?.zOrder : el.kind === "shape" ? el.shape.float?.zOrder : el.kind === "chart" ? el.chart.float?.zOrder : void 0;
 			if (z !== void 0 && Number.isFinite(z)) seen.add(z);
-			if (el.kind === "table") for (const row of el.table.rows) for (const cell of row.cells) visit(cell.content);
+			if (el.kind === "table") {
+				for (const row of el.table.rows) for (const cell of row.cells) visit(cell.content);
+				visit(el.table.overlay?.drawings ?? []);
+			}
 		}
 	};
 	visit(flow.body);
@@ -593,6 +597,11 @@ function emitBlock(out, el, losses, state, scope, closingSectPr) {
 	}
 	if (el.kind === "table") {
 		out.push(tableXml(el.table, losses, state, scope));
+		for (const drawing of el.table.overlay?.drawings ?? []) {
+			if (state.overlaid.has(drawing)) continue;
+			state.overlaid.add(drawing);
+			emitBlock(out, drawing, losses, state, scope);
+		}
 		if (closingSectPr) out.push(`<w:p><w:pPr>${closingSectPr}</w:pPr></w:p>`);
 		return;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reamkit",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Ream — convert DOCX, XLSX, PPTX, PDF and legacy DOC, XLS and PPT to PDF, SVG, HTML, Markdown, DOCX and XLSX, built from scratch on the ECMA-376 and ISO 32000 specifications. Parse once, convert anywhere.",
   "license": "MIT",
   "author": "Alex Krassavin <info@reamkit.dev>",
@@ -84,6 +84,10 @@
     "corpus:pixel": "tsx scripts/corpus/pixel-scout.ts",
     "stand": "tsx stand/serve.ts",
     "stand:build": "tsx stand/build.ts",
+    "stand:html": "tsx stand/serve.ts html",
+    "stand:html:build": "tsx stand/html-build.ts",
+    "stand:svg": "tsx stand/serve.ts svg",
+    "stand:svg:build": "tsx stand/svg-build.ts",
     "typecheck:dist": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {