@openpresentation/opf-render 0.3.0 → 0.5.0

package/README.md

@@ -114,7 +114,7 @@ Raster updates produce an HTML gallery and `artifacts/golden/candidate.json`; th
 
 Version 0.1.1 adds rich-text line offsets and measured boxes to opt-in SVG tracing, including blank lines, for editor caret placement. Normal SVG/PNG output is unchanged.
 
-## Embedded WebP in PNG/PDF output (unreleased)
+## Embedded WebP in PNG/PDF output (since 0.2.0)
 
 PNG and PDF conversion now decode embedded WebP image data URIs to static PNG before rasterization. This preserves fit/crop, transparency, EXIF orientation and the first animation frame. The source SVG and OPF document remain unchanged; browser SVG output keeps the original embedded image. Both href and legacy xlink:href are supported, including base64 and percent-encoded data. This step does not resolve local filenames, download remote images or change the existing host imageResolver contract.
 
@@ -122,7 +122,7 @@ The Node-only raster path lazily loads pinned Sharp 0.35.4, requiring Node 20.9
 
 Regression checks compare six fixtures against independent Pillow pixels, verify fit/crop, inspect actual PDF image streams and transparency masks, and exercise input encodings and diagnostics. All 805 existing raster baselines remain unchanged. Test fixtures are project-authored and MIT licensed; the decoder and its bundled codecs retain their upstream licenses.
 
-## JPEG EXIF orientation in raster output (unreleased)
+## JPEG EXIF orientation in raster output (since 0.2.0)
 
 PNG/PDF raster preparation now honors all eight JPEG EXIF orientations. JPEGs with orientation 2–8 are decoded to oriented PNG pixels for rasterization; JPEGs with orientation 1 or no orientation keep their original SVG attribute spelling and compressed bytes. This does not modify the source document or the browser SVG output. The Node path reads JPEG metadata through the same lazy Sharp dependency used for WebP.
 
@@ -131,3 +131,15 @@ Twenty-four cases verify fit/crop, PNG pixels and actual PDF image streams again
 `npm test` also builds the browser comparison and rejects native raster modules in browser output. Serve this repository and open `/artifacts/jpeg/browser/index.html` to run it. The harness permits mean channel error up to 1 and at most 2% of channels differing by more than 10; a deliberately unrotated image must fail that criterion.
 
 Version 0.2.0 requires Node 20.9 or later for native image decoding. Browser bundles continue using browser-safe entrypoints.
+
+## Styled and merged table cells
+
+Renderer 0.5.0 requires core 0.7.0 and uses its shared styled-cell geometry. A cell may wrap a scalar or rich value with styles and spans:
+
+```json
+{"rows":[[{"value":"Merged heading","colSpan":2,"style":{"fill":"#DBEAFE","align":"center","padding":{"top":12},"borders":{"bottom":{"color":"#445566","width":2,"dash":"dot"}}}},null],["Left","Right"]]}
+```
+
+Every covered position is explicit `null`. Each merged anchor renders once; traced text uses its `.value` path for editing. Styles support RGB/RGBA fills and text colors, horizontal and vertical alignment, reference-pixel padding and per-edge solid/dashed/dotted borders. Rich-run colors override the cell text color. Columns remain equal width; rows grow from measured text, padding and span constraints. Pagination preserves connected vertical merge groups.
+
+The Node20/24 renderer suite retains all 805 existing raster baselines. Browser fixtures verify merged text containment and styled-cell typing, formatting, cancellation and undo with actual loaded fonts. Native PowerPoint appearance remains a separate converter verification boundary.

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,50 +911,70 @@ 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 = [];
+  const separateBorders = layout.rows.some(row => row.cells.some(cell => cell.style?.borders));
+  const defaultEdges = [], explicitEdges = [];
+  for (const row of layout.rows) for (const cell of row.cells) {
+    const style = cell.style ?? {};
+    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: style.fill ?? (cell.header ? bound.design.colors.primary : bound.design.colors.surface),
+      stroke: separateBorders ? undefined : bound.design.colors.border, "stroke-width":separateBorders ? undefined : 1,
+      ...traceAttrs(options, cell.sourcePath ?? cell.path)
+    }));
+    if (separateBorders) {
+      const {x, y, width, height} = cell.box;
+      const edges = {top:[x,y,x+width,y],right:[x+width,y,x+width,y+height],bottom:[x,y+height,x+width,y+height],left:[x,y,x,y+height]};
+      for (const [edge, coordinates] of Object.entries(edges)) {
+        const border = style.borders?.[edge];
+        (border ? explicitEdges : defaultEdges).push({coordinates, border, path:`${cell.sourcePath ?? cell.path}.style.borders.${edge}`});
+      }
+    }
+    // Core layout has already applied vertical alignment to cell.textBox.y.
+    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:style.color ?? (cell.header ? "#FFFFFF" : bound.design.colors.text), align:style.align, options
+    }));
+  }
 
-  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)
-      }));
-      const rich = Array.isArray(cells[columnIndex]);
-      children.push((rich ? renderRichTextBox : renderTextBox)(rich ? cells[columnIndex] : 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
-      }));
+  return tag("g", traceAttrs(options, item.path), [...children, ...renderTableBorders(defaultEdges, explicitEdges, scale, bound.design.colors.border, options)].join("\n"));
+}
+
+// Explicit edges own their shared segment, including invisible/zero-width edges.
+// Split implicit neighbors at merge boundaries so they cannot fill dashed gaps,
+// cover alpha strokes, or reintroduce a border the author removed.
+function renderTableBorders(defaultEdges, explicitEdges, scale, defaultColor, options) {
+  const epsilon = 1e-7;
+  const segment = ({coordinates:[x1,y1,x2,y2]}) => y1 === y2
+    ? {horizontal:true, fixed:y1, start:x1, end:x2}
+    : {horizontal:false, fixed:x1, start:y1, end:y2};
+  const blockers = explicitEdges.map(segment);
+  const defaults = defaultEdges.flatMap(edge => {
+    const axis = segment(edge);
+    let intervals = [[axis.start, axis.end]];
+    for (const blocker of blockers) {
+      if (axis.horizontal !== blocker.horizontal || Math.abs(axis.fixed - blocker.fixed) > epsilon) continue;
+      intervals = intervals.flatMap(([start,end]) => {
+        if (blocker.end <= start + epsilon || blocker.start >= end - epsilon) return [[start,end]];
+        return [[start,Math.min(end,blocker.start)],[Math.max(start,blocker.end),end]].filter(([a,b]) => b-a > epsilon);
+      });
     }
+    return intervals.map(([start,end]) => ({...edge,coordinates:axis.horizontal
+      ? [start,axis.fixed,end,axis.fixed] : [axis.fixed,start,axis.fixed,end]}));
+  });
+  return [...defaults,...explicitEdges].flatMap(({coordinates:[x1,y1,x2,y2],border,path}) => {
+    const width = border ? border.width * scale : 1;
+    if (width === 0) return [];
+    return [tag('line', {
+      x1:stableNumber(x1), y1:stableNumber(y1), x2:stableNumber(x2), y2:stableNumber(y2),
+      stroke:border?.color ?? defaultColor, 'stroke-width':stableNumber(width),
+      'stroke-dasharray':border?.dash === 'dash' ? `${width*4} ${width*3}` : border?.dash === 'dot' ? `${width} ${width*2}` : undefined,
+      ...traceAttrs(options,path)
+    })];
   });
-
-  return tag("g", traceAttrs(options, item.path), children.join("\n"));
 }
 
 function renderImportedChart(item, box, bound, options) {
@@ -1168,7 +1188,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);
 }
@@ -1196,8 +1216,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,
@@ -1306,4 +1326,3 @@ function tag(name, attrs = {}, children = "") {
   if (children === "") return `<${name}${serializedAttrs}/>`;
   return `<${name}${serializedAttrs}>${children}</${name}>`;
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -55,13 +55,14 @@
   "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 && node --check test/rich-table.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 && node --check test/rich-table.mjs && node --check test/styled-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/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": "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 && npm run test:styled-table",
     "test:golden": "npm run build && node test/golden.mjs",
     "golden:update": "npm run build && node test/golden.mjs --update",
     "prepack": "npm run build",
-    "build:browser-check": "node scripts/build-browser-check.mjs"
+    "build:browser-check": "node scripts/build-browser-check.mjs",
+    "test:styled-table": "node test/styled-table.mjs"
   },
   "dependencies": {
     "@expo-google-fonts/arimo": "0.4.3",
@@ -72,7 +73,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.5.0",
+    "@openpresentation/opf": "^0.7.0",
     "@resvg/resvg-js": "^2.6.2",
     "fontkit": "^2.0.4",
     "pdf-lib": "^1.17.1",