@office-kit/pptx-preview 0.11.0 → 0.12.0

package/README.md

@@ -151,6 +151,23 @@ the label text:
 Example: `svg.querySelectorAll('[data-pptx-fallback]')` lists every shape that
 did not fully render.
 
+### Mapping the SVG back to the deck
+
+Slide shapes, and the paragraphs and table cells inside them, carry attributes
+that tie a click on the SVG back to the presentation. Master and layout
+decoration carries none.
+
+| Attribute             | On                                                        | Value                                                |
+| --------------------- | --------------------------------------------------------- | ---------------------------------------------------- |
+| `data-pptx-shape-id`  | A `<g>` wrapping each shape; groups and each member alike | `getShapeId(shape)`                                  |
+| `data-pptx-paragraph` | `<p>` (foreignObject), each line's `<text>` (`svg` mode)  | 0-based paragraph index                              |
+| `data-pptx-cell`      | A `<g>` wrapping each table cell's fill and text          | `row,col`, 0-based; paragraphs count within the cell |
+
+```ts
+const shape = target.closest('[data-pptx-shape-id]')?.getAttribute('data-pptx-shape-id');
+const paragraph = target.closest('[data-pptx-paragraph]')?.getAttribute('data-pptx-paragraph');
+```
+
 ## License
 
 MIT (code). Bundled fonts: OFL-1.1 / Apache-2.0 — see `fonts/LICENSES.md`.

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as MONO, c as TIMES, d as substituteFamily, l as defaultMeasurer, n as renderSlideSvg, o as SANS, r as ARIAL, s as SERIF, t as auditTextLayout } from "./src-DC6HxO-i.js";
+import { a as MONO, c as TIMES, d as substituteFamily, l as defaultMeasurer, n as renderSlideSvg, o as SANS, r as ARIAL, s as SERIF, t as auditTextLayout } from "./src-C2HIGS1C.js";
 export { ARIAL, MONO, SANS, SERIF, TIMES, auditTextLayout, defaultMeasurer, renderSlideSvg as renderSlideToSvg, substituteFamily };

package/dist/node.js

@@ -1,4 +1,4 @@
-import { a as MONO, c as TIMES, d as substituteFamily, i as AVG_GLYPH_W_RATIO, l as defaultMeasurer, n as renderSlideSvg, o as SANS, r as ARIAL, s as SERIF, t as auditTextLayout, u as isCjk } from "./src-DC6HxO-i.js";
+import { a as MONO, c as TIMES, d as substituteFamily, i as AVG_GLYPH_W_RATIO, l as defaultMeasurer, n as renderSlideSvg, o as SANS, r as ARIAL, s as SERIF, t as auditTextLayout, u as isCjk } from "./src-C2HIGS1C.js";
 import { getSlideSize } from "@office-kit/pptx";
 import { Resvg } from "@resvg/resvg-js";
 import * as fontkit from "fontkit";

package/dist/{src-DC6HxO-i.js → src-C2HIGS1C.js}

@@ -1,4 +1,4 @@
-import { getEffectiveColorMap, getGroupChildren, getGroupTransform, getParagraphAlignment, getParagraphBullet, getParagraphBulletImageBytes, getParagraphBulletStyle, getParagraphIndent, getParagraphLevel, getParagraphPropertiesEffective, getParagraphSpacing, getPresentationFonts, getPresentationTheme, getShapeAdjustValues, getShapeAltTitle, getShapeBodyPrEffective, getShapeBoundsResolved, getShapeChartSpec, getShapeClickAction, getShapeCustomGeometry, getShapeDescription, getShapeEffectsEffective, getShapeFillColorResolved, getShapeFillEffective, getShapeFillOpacity, getShapeFlip, getShapeGradientFill, getShapeGradientFillEffective, getShapeHyperlink, getShapeHyperlinkTooltip, getShapeImageBiLevelThreshold, getShapeImageBrightness, getShapeImageBytes, getShapeImageContrast, getShapeImageCrop, getShapeImageDuotone, getShapeImageFillBytes, getShapeImageFormat, getShapeImageLinkUrl, getShapeImageOpacity, getShapeImagePartName, getShapeKind, getShapeName, getShapeParagraphCount, getShapeParagraphElements, getShapePatternFill, getShapePlaceholderType, getShapePreset, getShapeRotation, getShapeRunClickAction, getShapeRunFormat, getShapeRunFormatEffective, getShapeRunHyperlink, getShapeRunHyperlinkTooltip, getShapeStrokeArrow, getShapeStrokeCap, getShapeStrokeColorResolved, getShapeStrokeCompound, getShapeStrokeDash, getShapeStrokeEffective, getShapeStrokeJoin, getShapeStrokeOpacity, getShapeTextAnchor, getShapeTextAutoFitParams, getShapeTextBodyRotationDeg, getShapeTextColumns, getShapeTextDirection, getShapeTextMargins, getShapeXmlString, getSlideBackground, getSlideBackgroundGradientFill, getSlideBackgroundImageBytes, getSlideBackgroundPatternFill, getSlideIndex, getSlideLayout, getSlideLayoutBackground, getSlideLayoutBackgroundGradientFill, getSlideLayoutBackgroundImageBytes, getSlideLayoutBackgroundPatternFill, getSlideLayoutShapes, getSlideMasterBackground, getSlideMasterBackgroundGradientFill, getSlideMasterBackgroundImageBytes, getSlideMasterBackgroundPatternFill, getSlideMasterShapes, getSlideShapes, getSlideSize, getSlides, getTableCellAnchor, getTableCellBorders, getTableCellFill, getTableCellMargins, getTableCellParagraphs, getTableCellSpan, getTableCells, getTableColumnWidths, getTableDimensions, getTableRowHeights, getTableStyleFlags, isChartShape, isParagraphBulletPicture, isShapeImageGrayscale, isShapePlaceholder, isShapeTextBox, isTableShape, resolveDeckBodyTextColor } from "@office-kit/pptx";
+import { getEffectiveColorMap, getGroupChildren, getGroupTransform, getParagraphAlignment, getParagraphBullet, getParagraphBulletImageBytes, getParagraphBulletStyle, getParagraphIndent, getParagraphLevel, getParagraphPropertiesEffective, getParagraphSpacing, getPresentationFonts, getPresentationTheme, getShapeAdjustValues, getShapeAltTitle, getShapeBodyPrEffective, getShapeBoundsResolved, getShapeChartSpec, getShapeClickAction, getShapeCustomGeometry, getShapeDescription, getShapeEffectsEffective, getShapeFillColorResolved, getShapeFillEffective, getShapeFillOpacity, getShapeFlip, getShapeGradientFill, getShapeGradientFillEffective, getShapeHyperlink, getShapeHyperlinkTooltip, getShapeId, getShapeImageBiLevelThreshold, getShapeImageBrightness, getShapeImageBytes, getShapeImageContrast, getShapeImageCrop, getShapeImageDuotone, getShapeImageFillBytes, getShapeImageFormat, getShapeImageLinkUrl, getShapeImageOpacity, getShapeImagePartName, getShapeKind, getShapeName, getShapeParagraphCount, getShapeParagraphElements, getShapePatternFill, getShapePlaceholderType, getShapePreset, getShapeRotation, getShapeRunClickAction, getShapeRunFormat, getShapeRunFormatEffective, getShapeRunHyperlink, getShapeRunHyperlinkTooltip, getShapeStrokeArrow, getShapeStrokeCap, getShapeStrokeColorResolved, getShapeStrokeCompound, getShapeStrokeDash, getShapeStrokeEffective, getShapeStrokeJoin, getShapeStrokeOpacity, getShapeTextAnchor, getShapeTextAutoFitParams, getShapeTextBodyRotationDeg, getShapeTextColumns, getShapeTextDirection, getShapeTextMargins, getShapeXmlString, getSlideBackground, getSlideBackgroundGradientFill, getSlideBackgroundImageBytes, getSlideBackgroundPatternFill, getSlideIndex, getSlideLayout, getSlideLayoutBackground, getSlideLayoutBackgroundGradientFill, getSlideLayoutBackgroundImageBytes, getSlideLayoutBackgroundPatternFill, getSlideLayoutShapes, getSlideMasterBackground, getSlideMasterBackgroundGradientFill, getSlideMasterBackgroundImageBytes, getSlideMasterBackgroundPatternFill, getSlideMasterShapes, getSlideShapes, getSlideSize, getSlides, getTableCellAnchor, getTableCellBorders, getTableCellFill, getTableCellMargins, getTableCellParagraphs, getTableCellSpan, getTableCells, getTableColumnWidths, getTableDimensions, getTableRowHeights, getTableStyleFlags, isChartShape, isParagraphBulletPicture, isShapeImageGrayscale, isShapePlaceholder, isShapeTextBox, isTableShape, resolveDeckBodyTextColor } from "@office-kit/pptx";
 //#region src/emf.ts
 const WORD_BYTES = 4;
 const SHORT_BYTES = 2;
@@ -564,7 +564,7 @@ const emitPlacements = (placements) => {
 		if (line.bullet) {
 			const b = line.bullet.b;
 			if (b.imageHref) parts.push(`<image x="${fmt(line.bullet.x + dx + GRID_NUDGE_X)}" y="${fmt(baselineY - b.sizePx)}" width="${fmt(b.sizePx)}" height="${fmt(b.sizePx)}" href="${b.imageHref}" xlink:href="${b.imageHref}" preserveAspectRatio="xMidYMid meet"/>`);
-			else parts.push(`<text x="${fmt(line.bullet.x + dx + GRID_NUDGE_X)}" y="${fmt(baselineY)}" font-family="${escapeXml$1(b.family)}" font-size="${fmt(b.sizePx)}" fill="${b.fillHex}" xml:space="preserve">${escapeXml$1(b.text)}</text>`);
+			else parts.push(`<text x="${fmt(line.bullet.x + dx + GRID_NUDGE_X)}" y="${fmt(baselineY)}" font-family="${escapeXml$1(b.family)}" font-size="${fmt(b.sizePx)}" fill="${b.fillHex}" xml:space="preserve" data-pptx-paragraph="${line.paraIndex}">${escapeXml$1(b.text)}</text>`);
 		}
 		parts.push(emitLine(line, baselineY, dx));
 	}
@@ -591,7 +591,7 @@ const emitLine = (line, baselineY, dx) => {
 	const tspans = groups.map((g) => tspan(g)).join("");
 	if (tspans === "") return "";
 	const x0 = line.anchorX + dx + GRID_NUDGE_X;
-	return `<text x="${fmt(x0)}" y="${fmt(baselineY)}" text-anchor="${line.textAnchor}" xml:space="preserve">${tspans}</text>` + emitWavyUnderlines(groups, line.textAnchor, x0, baselineY);
+	return `<text x="${fmt(x0)}" y="${fmt(baselineY)}" text-anchor="${line.textAnchor}" xml:space="preserve" data-pptx-paragraph="${line.paraIndex}">${tspans}</text>` + emitWavyUnderlines(groups, line.textAnchor, x0, baselineY);
 };
 const groupTokens = (toks) => {
 	const groups = [];
@@ -2686,7 +2686,7 @@ const renderTextBody = (pres, shape, bounds, theme, phType, ctx) => {
 			bulletStyles.push(para.bulletDetail.font ? `font-family:${escapeXml(para.bulletDetail.font)}, ${DEFAULT_FONT}` : `font-family:${DEFAULT_BULLET_FONT}, ${DEFAULT_FONT}`);
 			prefix = `<span style="${bulletStyles.join(";")}">${escapeXml(char)}</span>`;
 		}
-		paragraphs.push(`<p style="${pStyles.join(";")}">${prefix}${runHtmls.join("") || "&#8203;"}</p>`);
+		paragraphs.push(`<p data-pptx-paragraph="${pi}" style="${pStyles.join(";")}">${prefix}${runHtmls.join("") || "&#8203;"}</p>`);
 	}
 	const justify = ANCHOR_TO_CSS[anchor] ?? "flex-start";
 	if (ctx.mode === "svg") {
@@ -4174,9 +4174,9 @@ const renderTableCellText = (paragraphs, cx, cy, cw, ch, color, pres, shape, the
 	});
 	const justify = vAnchor === "top" ? "flex-start" : vAnchor === "bottom" ? "flex-end" : "center";
 	const familyFont = themeFace ? `${escapeXml(themeFace)}, ${DEFAULT_FONT}` : DEFAULT_FONT;
-	const body = paraData.map((para) => {
+	const body = paraData.map((para, index) => {
 		const runHtml = para.runs.map((run) => renderRun(run.text, run.fmt, theme, run.sizePt, run.fmt?.size === void 0)).join("");
-		return `<p style="margin:0;padding:0;text-align:${ALIGNMENT_TO_CSS[para.align] ?? "left"};line-height:1.2">${runHtml || "&#8203;"}</p>`;
+		return `<p data-pptx-paragraph="${index}" style="margin:0;padding:0;text-align:${ALIGNMENT_TO_CSS[para.align] ?? "left"};line-height:1.2">${runHtml || "&#8203;"}</p>`;
 	}).join("");
 	return `<foreignObject x="${px(innerX)}" y="${px(innerY)}" width="${px(innerW)}" height="${px(innerH)}"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;flex-direction:column;justify-content:${justify};width:100%;height:100%;box-sizing:border-box;overflow:hidden;font-family:${familyFont};color:${color};word-break:break-word">${body}</div></foreignObject>`;
 };
@@ -4240,7 +4240,7 @@ const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 		else if (flags.bandCol) resolvedFill = (c - (flags.firstCol ? 1 : 0)) % 2 === 0 ? bandFill : bandFill2;
 		else resolvedFill = "none";
 		const cellTextColor = resolvedFill === headerFill ? "#FFFFFF" : textColor;
-		out.push(`<rect x="${px(cx)}" y="${px(cy)}" width="${px(cw)}" height="${px(ch)}" fill="${resolvedFill}"/>`);
+		out.push(`<g data-pptx-cell="${r},${c}"><rect x="${px(cx)}" y="${px(cy)}" width="${px(cw)}" height="${px(ch)}" fill="${resolvedFill}"/>`);
 		const borders = getTableCellBorders(pres, typedCell);
 		const dashAttr = (dash, widthPx) => {
 			if (!dash || dash === "solid") return "";
@@ -4275,7 +4275,7 @@ const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 		const cellParagraphs = getTableCellParagraphs(cell);
 		const vAnchor = getTableCellAnchor(typedCell) ?? "top";
 		const cellMargins = getTableCellMargins(typedCell);
-		out.push(renderTableCellText(cellParagraphs, cx, cy, cw, ch, cellTextColor, pres, shape, theme, tableThemeFace, ctx, vAnchor, cellMargins));
+		out.push(renderTableCellText(cellParagraphs, cx, cy, cw, ch, cellTextColor, pres, shape, theme, tableThemeFace, ctx, vAnchor, cellMargins), "</g>");
 	}
 	out.push(borderEdges.join(""));
 	out.push("</g>");
@@ -4398,6 +4398,10 @@ const customGeometryToSvg = (geom, x, y, w, h, fill, fillExtra, stroke, strokeWi
 	return out.join("");
 };
 const renderShape = (shape, pres, theme, ctx) => {
+	const svg = renderShapeMarkup(shape, pres, theme, ctx);
+	return svg && ctx.tagShapes ? `<g data-pptx-shape-id="${escapeXml(String(getShapeId(shape)))}">${svg}</g>` : svg;
+};
+const renderShapeMarkup = (shape, pres, theme, ctx) => {
 	const bounds = getShapeBoundsResolved(pres, shape);
 	if (!bounds) return "";
 	const x = bounds.x;
@@ -4758,7 +4762,8 @@ const renderSlideSvg = (pres, slide, opts = {}) => {
 			sy: 1
 		},
 		mode: opts.textLayout ?? "foreignObject",
-		measure: opts.measureText ?? defaultMeasurer
+		measure: opts.measureText ?? defaultMeasurer,
+		tagShapes: false
 	};
 	let bg = getSlideBackground(slide);
 	if (bg.kind === "inherit") {
@@ -4830,7 +4835,11 @@ const renderSlideSvg = (pres, slide, opts = {}) => {
 	} catch {
 		layoutBgShapes = "";
 	}
-	const shapesSvg = topLevelShapes(getSlideShapes(slide), { dropPlaceholders: false }).map((s) => renderShape(s, pres, theme, ctx)).join("");
+	const slideCtx = {
+		...ctx,
+		tagShapes: true
+	};
+	const shapesSvg = topLevelShapes(getSlideShapes(slide), { dropPlaceholders: false }).map((s) => renderShape(s, pres, theme, slideCtx)).join("");
 	return [
 		`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${E(W)} ${E(H)}" preserveAspectRatio="xMidYMid meet">`,
 		bgGradientDefs,
@@ -5004,4 +5013,4 @@ const auditTextLayout = (pres, options = {}) => {
 //#endregion
 export { MONO as a, TIMES as c, substituteFamily as d, AVG_GLYPH_W_RATIO as i, defaultMeasurer as l, renderSlideSvg as n, SANS as o, ARIAL as r, SERIF as s, auditTextLayout as t, isCjk as u };
 
-//# sourceMappingURL=src-DC6HxO-i.js.map
+//# sourceMappingURL=src-C2HIGS1C.js.map