@uurtech/jdf 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uurtech/jdf",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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/jdfjs.css

@@ -275,6 +275,22 @@ textarea.jdfjs-form-control {
   line-height: 1.4;
 }
 
+
+/* Compact fields: PDF-form widgets shorter than 9 mm (see compactField). */
+.jdfjs-form-field.jdfjs-form-compact { gap: 0; justify-content: center; }
+.jdfjs-form-compact .jdfjs-form-label { display: none; }
+.jdfjs-form-compact .jdfjs-form-control {
+  height: 100%;
+  min-height: 0;
+  padding: 0 2px;
+  border-radius: 1px;
+  border-color: rgba(100, 116, 139, 0.35);
+  background: transparent;
+  line-height: 1;
+}
+.jdfjs-form-compact textarea.jdfjs-form-control { min-height: 0; resize: none; line-height: 1.1; }
+.jdfjs-form-compact.jdfjs-form-checkbox input[type="checkbox"] { width: 100%; height: 100%; margin: 0; }
+
 .jdfjs-form-checkbox {
   flex-direction: row;
   align-items: center;

package/src/renderers/element.ts

@@ -295,7 +295,13 @@ function colWidthCss(w: string | number | undefined): string | undefined {
 function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
   const wrap = document.createElement("div");
   wrap.className = "jdfjs-table-wrap";
-  applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  // `style.fontSize` / `lineHeight` size the cells and `style.padding` is the
+  // cell padding (the PDF importer writes compact values so a converted
+  // statement occupies the same box as the source rows). Same rules as the
+  // reader's TableElement — keep them identical.
+  const tableCss = resolveStyle(el.style, ctx.styles);
+  const { padding: cellPad = "8px 12px", ...wrapCss } = tableCss;
+  applyStyle(wrap, wrapCss);
   wrap.style.overflowX = "auto";
 
   const headerCss = (() => {
@@ -336,7 +342,8 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
   table.style.width = "100%";
   table.style.borderCollapse = "collapse";
   table.style.tableLayout = el.columns?.some((c) => c.width != null) ? "fixed" : "auto";
-  table.style.fontSize = "14px";
+  table.style.fontSize = tableCss["font-size"] || "14px";
+  if (tableCss["line-height"]) table.style.lineHeight = tableCss["line-height"];
   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
@@ -359,9 +366,11 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
     headers.forEach((h, i) => {
       const th = document.createElement("th");
       th.textContent = h;
-      th.style.padding = "8px 12px";
+      th.style.padding = cellPad;
       th.style.fontWeight = "600";
-      th.style.background = "#f8fafc";
+      // Designed tables get the light header band; a table that brings its own
+      // headerStyle (the PDF importer, hand-authored docs) shows exactly that.
+      if (!el.headerStyle) th.style.background = "#f8fafc";
       th.style.textAlign = colAlign(i) || "left";
       if (borders.inner) th.style.border = `${borders.width || 1}px solid ${borders.color || "#e2e8f0"}`;
       tr.appendChild(th);
@@ -382,13 +391,17 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
     const tr = document.createElement("tr");
     applyStyle(tr, rowCss as any);
     if (ri % 2 === 1) applyStyle(tr, altRowCss as any);
+    // A spacer row (every cell empty — the PDF importer keeps a statement's
+    // blank separator lines) must still be one line tall, so it gets a
+    // non-breaking space; an empty cell in a filled row stays empty.
+    const blankRow = row.every((c) => cellText(c) === "");
     row.forEach((cell, ci) => {
       const td = document.createElement("td");
-      td.textContent = cellText(cell);
+      td.textContent = blankRow ? "\u00a0" : cellText(cell);
       const attrs = cellAttrs(cell);
       if (attrs.colspan) td.colSpan = attrs.colspan;
       if (attrs.rowspan) td.rowSpan = attrs.rowspan;
-      td.style.padding = "8px 12px";
+      td.style.padding = cellPad;
       td.style.verticalAlign = "top";
       // Cell-level align wins over the column default.
       td.style.textAlign = cellAlign(cell) || colAlign(ci) || "left";
@@ -442,6 +455,7 @@ function buildItems(parent: HTMLElement, items: ListItem[], def: "ordered" | "un
 }
 
 // ── shape ───────────────────────────────────────────────────────────────────
+let gradientSeq = 0;
 function renderShape(el: ShapeElement): HTMLElement {
   const wrap = document.createElement("div");
   wrap.className = "jdfjs-shape";
@@ -521,7 +535,35 @@ function renderShape(el: ShapeElement): HTMLElement {
     }
   }
   if (shapeNode) {
-    shapeNode.setAttribute("fill", fill);
+    // Gradient fill via SVG defs (same geometry the reader uses).
+    let paint = fill;
+    const g = el.gradient;
+    if (g && Array.isArray(g.stops) && g.stops.length >= 2) {
+      const id = `jdfjs-grad-${++gradientSeq}`;
+      const defs = document.createElementNS(NS_SVG, "defs");
+      let gradNode: SVGElement;
+      if (g.type === "radial") {
+        gradNode = document.createElementNS(NS_SVG, "radialGradient");
+        gradNode.setAttribute("cx", "50%"); gradNode.setAttribute("cy", "50%"); gradNode.setAttribute("r", "50%");
+      } else {
+        gradNode = document.createElementNS(NS_SVG, "linearGradient");
+        const a = ((g.angle ?? 180) * Math.PI) / 180;
+        const dx = Math.sin(a) / 2, dy = -Math.cos(a) / 2;
+        gradNode.setAttribute("x1", String(0.5 - dx)); gradNode.setAttribute("y1", String(0.5 - dy));
+        gradNode.setAttribute("x2", String(0.5 + dx)); gradNode.setAttribute("y2", String(0.5 + dy));
+      }
+      gradNode.setAttribute("id", id);
+      for (const st of g.stops) {
+        const stop = document.createElementNS(NS_SVG, "stop");
+        stop.setAttribute("offset", `${Math.max(0, Math.min(1, st.offset)) * 100}%`);
+        stop.setAttribute("stop-color", st.color);
+        gradNode.appendChild(stop);
+      }
+      defs.appendChild(gradNode);
+      svg.appendChild(defs);
+      paint = `url(#${id})`;
+    }
+    shapeNode.setAttribute("fill", paint);
     shapeNode.setAttribute("stroke", strokeColor);
     if (strokeWidth) shapeNode.setAttribute("stroke-width", String(strokeWidth));
     svg.appendChild(shapeNode);
@@ -668,10 +710,23 @@ function commitFormChange(ctx: RenderContext, field: string, value: unknown) {
   ctx.onFormChange(ctx.path, field, value);
 }
 
+/**
+ * A field whose box is shorter than 9 mm (an AcroForm widget imported from a
+ * PDF form) renders compact: no label, no padding, font sized to the box, so
+ * the control sits inside the form's printed cell instead of covering the
+ * labels around it. Same rule in the reader's FormElement.
+ */
+function compactField(wrap: HTMLElement, el: { height?: number }) {
+  if (el.height == null || el.height >= 9) return;
+  wrap.classList.add("jdfjs-form-compact");
+  wrap.style.fontSize = `${Math.max(7, Math.min(12, Math.round(el.height * 3.7795 * 0.62)))}px`;
+}
+
 function renderFormInput(el: FormInputElement, ctx: RenderContext): HTMLElement {
   const wrap = document.createElement("div");
   wrap.className = "jdfjs-form-field jdfjs-form-input";
   applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  compactField(wrap, el);
   const lab = makeLabel(el.label);
   if (lab) wrap.appendChild(lab);
   const input = document.createElement("input");
@@ -693,6 +748,7 @@ function renderFormTextarea(el: FormTextareaElement, ctx: RenderContext): HTMLEl
   const wrap = document.createElement("div");
   wrap.className = "jdfjs-form-field jdfjs-form-textarea";
   applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  compactField(wrap, el);
   const lab = makeLabel(el.label);
   if (lab) wrap.appendChild(lab);
   const ta = document.createElement("textarea");
@@ -713,6 +769,7 @@ function renderFormCheckbox(el: FormCheckboxElement, ctx: RenderContext): HTMLEl
   const wrap = document.createElement("label");
   wrap.className = "jdfjs-form-field jdfjs-form-checkbox";
   applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  compactField(wrap, el);
   const cb = document.createElement("input");
   cb.type = "checkbox";
   cb.name = el.name;
@@ -734,6 +791,7 @@ function renderFormSelect(el: FormSelectElement, ctx: RenderContext): HTMLElemen
   const wrap = document.createElement("div");
   wrap.className = "jdfjs-form-field jdfjs-form-select";
   applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  compactField(wrap, el);
   const lab = makeLabel(el.label);
   if (lab) wrap.appendChild(lab);
   const sel = document.createElement("select");

package/src/viewer.ts

@@ -222,6 +222,7 @@ export class JDFViewer {
   }
 
   private mount() {
+    ensureMetricFonts(this.doc);
     this.container.innerHTML = "";
     this.container.classList.add("jdfjs");
     this.applyDarkMode();
@@ -756,3 +757,24 @@ function resolveContainer(c: HTMLElement | string): HTMLElement {
 function escapeHtml(s: string): string {
   return s.replace(/[&<>"']/g, (m) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[m]!));
 }
+
+/**
+ * The PDF importer maps fonts to metric-compatible open families (Carlito =
+ * Calibri, Arimo = Arial, Tinos = Times New Roman, Cousine = Courier New,
+ * Gelasio = Georgia, Caladea = Cambria) so converted lines keep their width.
+ * Load them from Google Fonts once, only when a document uses them; offline
+ * embeds fall through to the stack's next family.
+ */
+const METRIC_FAMILIES = ["Carlito", "Arimo", "Tinos", "Cousine", "Gelasio", "Caladea", "IBM Plex Sans", "IBM Plex Serif"];
+function ensureMetricFonts(doc: JdfDocument) {
+  if (typeof document === "undefined" || document.getElementById("jdfjs-metric-fonts")) return;
+  let json: string;
+  try { json = JSON.stringify(doc.styles ?? {}) + JSON.stringify(doc.pages ?? []); } catch { return; }
+  const used = METRIC_FAMILIES.filter((f) => json.includes(f));
+  if (!used.length) return;
+  const link = document.createElement("link");
+  link.id = "jdfjs-metric-fonts";
+  link.rel = "stylesheet";
+  link.href = "https://fonts.googleapis.com/css2?" + used.map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:ital,wght@0,400;0,700;1,400;1,700`).join("&") + "&display=swap";
+  document.head.appendChild(link);
+}