@openpresentation/opf-render 0.2.0 → 0.4.0

package/README.md

@@ -104,6 +104,8 @@ This repo does not require an npm automation token when Trusted Publishing is co
 
 The current checkout uses `@openpresentation/opf/composition` for portable geometry. Slides can select `auto`, `row`, `column`, or `grid`, set weighted tracks, and request path-specific overflow diagnostics. See the sibling OPF repo's `docs/dynamic-composition.md` for the complete contract.
 
+Version 0.3.0 requires core 0.5.0 and renders rich table cells and headers using canonical `TextRun[]`, including editor trace geometry.
+
 Version 0.2.x requires the published `@openpresentation/opf@^0.4.1` for composition, pagination and measured text. A clean `npm ci && npm test` uses registry packages and runs the full raster corpus without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` checks editing, rendering, editable PowerPoint geometry and import together.
 
 For actual font measurement, load `loadBundledFontRegistry()` from `@openpresentation/opf-render/fonts-node`, then pass its `textMeasurement` to rendering and its `embeddedFonts` to SVG export. Pass its `fontFiles` to PNG/PDF conversion. The browser-safe `@openpresentation/opf-render/fonts` entry accepts local font bytes. Missing fonts/glyphs fail explicitly; aliases and fallback are opt-in and recorded in `registry.substitutions`. Bundled font license notices travel with embedded SVG fonts.

package/dist/svg.js

@@ -1,4 +1,4 @@
-import { fitList, fitRichText, composeSlide, resolveCanvasDimensions, resolveFontFamilies, resolveTextStyle, textWidthMeasurer, fitText } from "@openpresentation/opf/composition";
+import { layoutTable, fitList, fitRichText, composeSlide, resolveCanvasDimensions, resolveFontFamilies, resolveTextStyle, textWidthMeasurer, fitText } from "@openpresentation/opf/composition";
 import {
   catalogs as bundledCatalogs,
   validatePresentation
@@ -911,47 +911,22 @@ function renderTimeline(item, box, bound, options) {
 
 function renderTable(item, box, bound, options) {
   const scale = Math.min(bound.design.dimensions.width, bound.design.dimensions.height) / 720;
-  const table = item.value ?? {};
-  const columns = Array.isArray(table.columns) ? table.columns : [];
-  const rows = Array.isArray(table.rows) ? table.rows : [];
-  const allRows = columns.length ? [columns, ...rows] : rows;
-  const columnCount = Math.max(1, ...allRows.map((row) => Array.isArray(row) ? row.length : 1));
-  const rowCount = Math.max(1, allRows.length);
-  const cellWidth = box.width / columnCount;
-  const cellHeight = Math.min(54 * scale, box.height / rowCount);
+  const layout = layoutTable(item.value, box, {scale, minFontSize:(bound.composition ?? bound.geometry.composition).minFontSize, fontFamily:bound.design.fonts.body, textMeasurement:options.textMeasurement, path:item.path});
   const children = [];
-
-  allRows.forEach((row, rowIndex) => {
-    const cells = Array.isArray(row) ? row : [row];
-    for (let columnIndex = 0; columnIndex < columnCount; columnIndex += 1) {
-      const x = box.x + columnIndex * cellWidth;
-      const y = box.y + rowIndex * cellHeight;
-      const cellPath = rowIndex === 0 && columns.length ? `${item.path}.columns.${columnIndex}` : `${item.path}.rows.${rowIndex - (columns.length ? 1 : 0)}.${columnIndex}`;
-      children.push(tag("rect", {
-        x: stableNumber(x),
-        y: stableNumber(y),
-        width: stableNumber(cellWidth),
-        height: stableNumber(cellHeight),
-        fill: rowIndex === 0 && columns.length ? bound.design.colors.primary : bound.design.colors.surface,
-        stroke: bound.design.colors.border,
-        "stroke-width": 1,
-        ...traceAttrs(options, cellPath)
-      }));
-      children.push(renderTextBox(flattenText(cells[columnIndex] ?? ""), {
-        x: x + 10 * scale,
-        y: y + 8 * scale,
-        width: Math.max(scale, cellWidth - 20 * scale),
-        height: Math.max(scale, cellHeight - 12 * scale)
-      }, bound, {
-        path: cellPath,
-        fontSize: 15,
-        fontFamily: bound.design.fonts.body,
-        fontWeight: rowIndex === 0 && columns.length ? 700 : 400,
-        fill: rowIndex === 0 && columns.length ? "#FFFFFF" : bound.design.colors.text,
-        options
-      }));
-    }
-  });
+  for (const row of layout.rows) for (const cell of row.cells) {
+    children.push(tag("rect", {
+      x: stableNumber(cell.box.x), y: stableNumber(cell.box.y),
+      width: stableNumber(cell.box.width), height: stableNumber(cell.box.height),
+      fill: cell.header ? bound.design.colors.primary : bound.design.colors.surface,
+      stroke: bound.design.colors.border, "stroke-width":1,
+      ...traceAttrs(options, cell.path)
+    }));
+    children.push((cell.rich ? renderRichTextBox : renderTextBox)(cell.rich ? cell.value : flattenText(cell.value ?? ""), cell.textBox, bound, {
+      path:cell.path, fontSize:15, fontFamily:bound.design.fonts.body,
+      fontWeight:cell.header ? 700 : 400, textStyle:cell.textStyle, fit:cell.fit,
+      fill:cell.header ? "#FFFFFF" : bound.design.colors.text, options
+    }));
+  }
 
   return tag("g", traceAttrs(options, item.path), children.join("\n"));
 }
@@ -1167,7 +1142,7 @@ function renderEmbeddedFonts(fonts = []) {
 
 function renderRichTextBox(value, box, bound, config) {
   const scale=Math.min(bound.design.dimensions.width,bound.design.dimensions.height)/720;
-  const fit=fitRichText(value,box,config.fontSize*scale,((bound.composition??bound.geometry.composition).minFontSize??16)*scale,{style:{fontFamily:config.fontFamily,fontWeight:config.fontWeight??400,path:config.path},textMeasurement:config.options.textMeasurement});
+  const fit=config.fit??fitRichText(value,box,config.fontSize*scale,((bound.composition??bound.geometry.composition).minFontSize??16)*scale,{style:{fontFamily:config.fontFamily,fontWeight:config.fontWeight??400,path:config.path},textMeasurement:config.options.textMeasurement});
   if(fit.overflow){const diagnostic={code:'text-overflow',path:config.path,message:'Mixed-style text exceeds its cell at the minimum font size.'};reportDiagnostic(diagnostic,config.options);if((bound.composition??bound.geometry.composition).overflow==='error')throw new OPFRenderError('layout-overflow',diagnostic.message,{issues:[diagnostic]});}
   return renderRichLines(value,fit,box,bound,config);
 }
@@ -1195,8 +1170,8 @@ function renderRichLines(value,fit,box,bound,config) {
 
 function renderTextBox(text, box, bound, config) {
   const scale = Math.min(bound.design.dimensions.width, bound.design.dimensions.height) / 720;
-  const style = resolveTextStyle({fontFamily:config.fontFamily,fontWeight:config.fontWeight ?? 400,italic:config.italic ?? false,path:config.path},config.options.textMeasurement);
-  const fit = fitText(String(text ?? ""), box, config.fontSize * scale,
+  const style = config.textStyle ?? resolveTextStyle({fontFamily:config.fontFamily,fontWeight:config.fontWeight ?? 400,italic:config.italic ?? false,path:config.path},config.options.textMeasurement);
+  const fit = config.fit ?? fitText(String(text ?? ""), box, config.fontSize * scale,
     ((bound.composition ?? bound.geometry.composition).minFontSize ?? 16) * scale, textWidthMeasurer(style,config.options.textMeasurement));
   if (fit.overflow) {
     const diagnostic = { code: "text-overflow", path: config.path,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -55,9 +55,9 @@
   "sideEffects": false,
   "scripts": {
     "build": "node scripts/build.mjs",
-    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js",
+    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js && node --check test/rich-table.mjs",
     "validate": "node scripts/validate-package.mjs",
-    "test": "npm run build && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/timeline.mjs && node test/rich-trace.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/design-preview.mjs && npm run build:browser-check",
+    "test": "npm run build && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/timeline.mjs && node test/rich-trace.mjs && node test/rich-table.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/design-preview.mjs && npm run build:browser-check",
     "test:golden": "npm run build && node test/golden.mjs",
     "golden:update": "npm run build && node test/golden.mjs --update",
     "prepack": "npm run build",
@@ -72,7 +72,7 @@
     "@expo-google-fonts/roboto": "^0.4.3",
     "@expo-google-fonts/roboto-mono": "^0.4.2",
     "@expo-google-fonts/tinos": "0.4.2",
-    "@openpresentation/opf": "^0.4.1",
+    "@openpresentation/opf": "^0.6.0",
     "@resvg/resvg-js": "^2.6.2",
     "fontkit": "^2.0.4",
     "pdf-lib": "^1.17.1",