@uurtech/jdf 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uurtech/jdf",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Render JDF (JSON Document Format) documents in the browser. Drop-in replacement for embedding PDFs — point at a .jdf file and it appears on the page, fully styled, searchable, with a clickable TOC.",
   "license": "MIT",
   "author": "Ugur Kazdal <ugur@uurtech.com>",

package/src/renderers/element.ts

@@ -3,6 +3,7 @@ import type {
   TextElement, RichTextElement, ImageElement, TableElement, ListElement,
   ShapeElement, CollapsibleElement, TocElement, RichTextRun, ListItem, TableCellValue, ImageResource,
   FormInputElement, FormTextareaElement, FormCheckboxElement, FormSelectElement, FormSignatureElement,
+  TextAlign,
 } from "@jdf/core";
 import { unitToPx } from "@jdf/core";
 import { resolveStyle, styleToCss, applyStyle } from "../utils/style";
@@ -187,6 +188,22 @@ function cellAttrs(c: TableCellValue): { colspan?: number; rowspan?: number } {
   if (typeof c === "string") return {};
   return { colspan: c.colspan, rowspan: c.rowspan };
 }
+/** Per-cell style object → CSS map (string ref / array / inline Style). */
+function cellCss(c: TableCellValue, styles: Record<string, Style>): Record<string, string> {
+  if (typeof c === "string" || !c.style) return {};
+  const s = c.style;
+  if (typeof s === "string") return styleToCss(styles[s] || {});
+  if (Array.isArray(s)) { let m = {}; for (const k of s) m = { ...m, ...styleToCss(styles[k] || {}) }; return m; }
+  return styleToCss(s);
+}
+function cellAlign(c: TableCellValue): TextAlign | undefined {
+  return typeof c === "string" ? undefined : c.align;
+}
+/** Normalise a column width (number → px, string passed through, e.g. "30%"). */
+function colWidthCss(w: string | number | undefined): string | undefined {
+  if (w == null) return undefined;
+  return typeof w === "number" ? `${unitToPx(w)}px` : w;
+}
 
 function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
   const wrap = document.createElement("div");
@@ -231,9 +248,23 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
   const table = document.createElement("table");
   table.style.width = "100%";
   table.style.borderCollapse = "collapse";
+  table.style.tableLayout = el.columns?.some((c) => c.width != null) ? "fixed" : "auto";
   table.style.fontSize = "14px";
   if (borders.outer) table.style.border = `${borders.width || 1}px solid ${borders.color || "#e2e8f0"}`;
 
+  // Column widths — honour columns[].width via a <colgroup> so both header
+  // and body cells share the same track sizing.
+  if (el.columns?.some((c) => c.width != null)) {
+    const colgroup = document.createElement("colgroup");
+    el.columns.forEach((c) => {
+      const col = document.createElement("col");
+      const w = colWidthCss(c.width);
+      if (w) col.style.width = w;
+      colgroup.appendChild(col);
+    });
+    table.appendChild(colgroup);
+  }
+
   if (headers && headers.length > 0) {
     const thead = document.createElement("thead");
     const tr = document.createElement("tr");
@@ -265,8 +296,10 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
       if (attrs.rowspan) td.rowSpan = attrs.rowspan;
       td.style.padding = "8px 12px";
       td.style.verticalAlign = "top";
-      td.style.textAlign = colAlign(ci) || "left";
+      // Cell-level align wins over the column default.
+      td.style.textAlign = cellAlign(cell) || colAlign(ci) || "left";
       if (borders.inner) td.style.border = `${borders.width || 1}px solid ${borders.color || "#e2e8f0"}`;
+      applyStyle(td, cellCss(cell, ctx.styles));
       tr.appendChild(td);
     });
     tbody.appendChild(tr);

package/src/viewer.ts

@@ -403,7 +403,8 @@ export class JDFViewer {
     const footerH = footer?.height ?? 0;
 
     if (header) {
-      const h = this.renderHeaderFooter(header, pageIndex, this.doc.pages.length, styles);
+      const headerPath: (string | number)[] = page.header ? ["pages", pageIndex, "header"] : ["header"];
+      const h = this.renderHeaderFooter(header, pageIndex, this.doc.pages.length, styles, headerPath);
       h.classList.add("jdfjs-header");
       h.style.paddingTop = `${unitToPx(margins.top! / 2)}px`;
       h.style.paddingLeft = `${unitToPx(margins.left!)}px`;
@@ -438,7 +439,8 @@ export class JDFViewer {
     pageEl.appendChild(content);
 
     if (footer) {
-      const f = this.renderHeaderFooter(footer, pageIndex, this.doc.pages.length, styles);
+      const footerPath: (string | number)[] = page.footer ? ["pages", pageIndex, "footer"] : ["footer"];
+      const f = this.renderHeaderFooter(footer, pageIndex, this.doc.pages.length, styles, footerPath);
       f.classList.add("jdfjs-footer");
       f.style.paddingBottom = `${unitToPx(margins.bottom! / 2)}px`;
       f.style.paddingLeft = `${unitToPx(margins.left!)}px`;
@@ -450,7 +452,7 @@ export class JDFViewer {
     return wrapper;
   }
 
-  private renderHeaderFooter(hf: HeaderFooter, pageIndex: number, totalPages: number, styles: Record<string, Style>): HTMLDivElement {
+  private renderHeaderFooter(hf: HeaderFooter, pageIndex: number, totalPages: number, styles: Record<string, Style>, basePath: (string | number)[]): HTMLDivElement {
     const div = document.createElement("div");
     if (hf.elements?.length) {
       hf.elements.forEach((el, idx) => {
@@ -458,8 +460,12 @@ export class JDFViewer {
           styles,
           resources: this.doc.resources,
           document: this.doc,
-          path: ["__hf__", pageIndex, idx],
+          // Real doc path so form-field mutations land on the right node and
+          // survive exportJdf (was a synthetic ["__hf__", …] that
+          // handleFormChange could not resolve).
+          path: [...basePath, "elements", idx],
           onNavigatePage: (i) => this.goToPage(i),
+          onFormChange: (path, field, value) => this.handleFormChange(path, field, value),
         });
         if (node) div.appendChild(node);
       });
@@ -559,18 +565,40 @@ export class JDFViewer {
   }
 
   /**
-   * Walk every page's elements and yield each form element with its
-   * resolved name. Used by getFormValues / downloadJdf consumers.
+   * Walk every page's elements — recursing into container elements
+   * (collapsible / table cells / list items) and the doc + per-page
+   * header/footer trees — and yield each form element with its resolved
+   * name. Previously this only scanned top-level `page.elements`, so a
+   * field nested inside a collapsible section or placed in a header was
+   * silently dropped from getFormValues / downloadJdf.
    */
   private *iterFormFields(): Generator<{ name: string; field: any }> {
-    for (const page of this.doc.pages || []) {
-      for (const el of (page.elements || []) as any[]) {
-        if (!el || typeof el !== "object") continue;
-        if (el.type === "input" || el.type === "textarea" || el.type === "checkbox" || el.type === "select" || el.type === "signature") {
-          if (typeof el.name === "string" && el.name.length > 0) yield { name: el.name, field: el };
-        }
+    const seen = new Set<any>();
+    const walk = function* (node: any): Generator<{ name: string; field: any }> {
+      if (!node || typeof node !== "object" || seen.has(node)) return;
+      seen.add(node);
+      if (Array.isArray(node)) {
+        for (const item of node) yield* walk(item);
+        return;
+      }
+      const t = node.type;
+      if (t === "input" || t === "textarea" || t === "checkbox" || t === "select" || t === "signature") {
+        if (typeof node.name === "string" && node.name.length > 0) yield { name: node.name, field: node };
       }
+      // Recurse into any nested element carriers.
+      if (Array.isArray(node.elements)) yield* walk(node.elements);
+      if (Array.isArray(node.items)) yield* walk(node.items);
+      if (Array.isArray(node.rows)) {
+        for (const row of node.rows) if (Array.isArray(row)) yield* walk(row);
+      }
+    };
+    for (const page of this.doc.pages || []) {
+      yield* walk(page.elements);
+      yield* walk(page.header?.elements);
+      yield* walk(page.footer?.elements);
     }
+    yield* walk(this.doc.header?.elements);
+    yield* walk(this.doc.footer?.elements);
   }
 
   toJSON(options: { pretty?: boolean } = {}): string {