@uurtech/jdf 0.1.14 → 0.1.17

package/src/viewer.ts

@@ -31,12 +31,18 @@ export interface JDFViewerOptions {
   onLoad?: (doc: JdfDocument) => void;
   /** Called on any rendering error */
   onError?: (err: Error) => void;
+  /**
+   * Called when a form field's value changes. Useful for live previews,
+   * dirty-state tracking, or auto-saving filled forms to a backend instead
+   * of triggering a manual download.
+   */
+  onFormChange?: (doc: JdfDocument, change: { path: (string | number)[]; field: string; value: unknown }) => void;
 }
 
 export interface JDFViewerInstance {
   /** The container element */
   container: HTMLElement;
-  /** The current document */
+  /** The current document — reflects user form input as the user types. */
   document: JdfDocument;
   /** Get / set zoom (1 = 100%) */
   setZoom: (zoom: number) => void;
@@ -48,40 +54,85 @@ export interface JDFViewerInstance {
   setDocument: (doc: JdfDocument) => void;
   /** Tear down — removes DOM and event listeners */
   destroy: () => void;
+  /**
+   * Return the current document as a Blob — ready to attach to a form-data
+   * upload, save through `URL.createObjectURL`, or hand to a Worker. The
+   * blob reflects user form input (whatever the user has typed / ticked /
+   * selected). Pass `{ pretty: false }` for a compact JSON.
+   */
+  exportJdf: (options?: { pretty?: boolean }) => Blob;
+  /** Return the current document as a JSON string (form-filled state). */
+  toJSON: (options?: { pretty?: boolean }) => string;
+  /**
+   * Trigger a browser download of the current document. The host page's
+   * "Save" button can call this directly: `viewer.downloadJdf("form.jdf")`.
+   * Default filename is `<title>.jdf` from `meta.title`.
+   */
+  downloadJdf: (filename?: string) => void;
+  /** Read the value of a single form field by `name`. */
+  getFormValue: (name: string) => unknown;
+  /** Read every form field's value as a flat `{ [name]: value }` map. */
+  getFormValues: () => Record<string, unknown>;
 }
 
 /**
  * Embed a JDF document into a container by URL.
  * The simplest "PDF.js-like" usage.
  */
+// Per-container AbortController so a rapid `src` change cancels the previous
+// fetch and the slower (older) response can't overwrite the newer document.
+const FETCH_ABORTS = new WeakMap<HTMLElement, AbortController>();
+
 export async function embed(
   container: HTMLElement | string,
   url: string,
   options: JDFViewerOptions = {}
 ): Promise<JDFViewerInstance> {
   const el = resolveContainer(container);
+
+  // Abort any in-flight fetch for this element.
+  const previous = FETCH_ABORTS.get(el);
+  if (previous) previous.abort();
+  const controller = new AbortController();
+  FETCH_ABORTS.set(el, controller);
+
   el.classList.add("jdfjs-loading");
   try {
-    const isJdfx = /\.jdfx(\?|#|$)/i.test(url);
+    // Detect .jdfx by extension first; if the URL has no extension hint
+    // (signed URLs, ?download=...), fall back to Content-Type sniffing
+    // after the response arrives.
+    const extLooksJdfx = /\.jdfx(\?|#|$)/i.test(url);
     const res = await fetch(url, {
-      headers: isJdfx
+      signal: controller.signal,
+      headers: extLooksJdfx
         ? { Accept: "application/jdf+zip,application/zip" }
-        : { Accept: "application/json,application/jdf+json" },
+        : { Accept: "application/json,application/jdf+json,application/jdf+zip,application/zip" },
     });
     if (!res.ok) throw new Error(`Failed to fetch ${url} (${res.status})`);
 
+    const ctype = (res.headers.get("content-type") || "").toLowerCase();
+    const ctypeLooksJdfx = ctype.includes("zip") || ctype.includes("jdf+zip");
+
     let doc: JdfDocument;
-    if (isJdfx) {
+    if (extLooksJdfx || ctypeLooksJdfx) {
       const { unpackJdfxToDocument } = await import("./jdfx");
       doc = await unpackJdfxToDocument(await res.arrayBuffer());
     } else {
       doc = (await res.json()) as JdfDocument;
     }
     if (!doc?.$jdf) throw new Error("Not a valid JDF document (missing $jdf field)");
+
+    // Race guard: if another embed() started for this container while we were
+    // parsing, a different controller is now stored — bail without rendering.
+    if (FETCH_ABORTS.get(el) !== controller) {
+      throw new DOMException("Superseded by a newer src change", "AbortError");
+    }
+
     el.classList.remove("jdfjs-loading");
     return render(el, doc, options);
   } catch (err) {
     el.classList.remove("jdfjs-loading");
+    if ((err as Error).name === "AbortError") throw err; // silent abort
     el.classList.add("jdfjs-error");
     el.innerHTML = `<div class="jdfjs-error-msg">${escapeHtml((err as Error).message)}</div>`;
     options.onError?.(err as Error);
@@ -116,6 +167,14 @@ export class JDFViewer {
   private sidebarEl: HTMLDivElement | null = null;
   private root!: HTMLDivElement;
   private observer: IntersectionObserver | null = null;
+  // System dark-mode subscription — needs explicit cleanup so a SPA route
+  // change that destroys the viewer doesn't leave a listener attached to
+  // the matchMedia query.
+  private darkModeMql: MediaQueryList | null = null;
+  private darkModeListener: ((e: MediaQueryListEvent) => void) | null = null;
+  // Window resize fallback for fit-width / fit-page when the host element's
+  // own size doesn't change but the viewport's does (flex re-layout, etc).
+  private windowResizeListener: (() => void) | null = null;
 
   constructor(container: HTMLElement, doc: JdfDocument, options: JDFViewerOptions = {}) {
     this.container = container;
@@ -150,12 +209,7 @@ export class JDFViewer {
   private mount() {
     this.container.innerHTML = "";
     this.container.classList.add("jdfjs");
-    if (this.options.darkMode === "dark") this.container.classList.add("jdfjs-dark");
-    else if (this.options.darkMode === "auto") {
-      if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-        this.container.classList.add("jdfjs-dark");
-      }
-    }
+    this.applyDarkMode();
 
     this.root = document.createElement("div");
     this.root.className = "jdfjs-root";
@@ -187,10 +241,56 @@ export class JDFViewer {
   }
 
   private setupResizeObserver() {
-    if (typeof ResizeObserver === "undefined") return;
-    this.resizeObs?.disconnect();
-    this.resizeObs = new ResizeObserver(() => this.applyFit());
-    this.resizeObs.observe(this.pagesEl);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObs?.disconnect();
+      this.resizeObs = new ResizeObserver(() => this.applyFit());
+      this.resizeObs.observe(this.pagesEl);
+      // Also observe the host container — flex re-layouts can change the
+      // host width without changing pagesEl's computed size synchronously.
+      this.resizeObs.observe(this.container);
+    }
+    // Window resize as a fallback for environments where the ResizeObserver
+    // doesn't fire (older Safari + nested flex). Subscribe once and remove
+    // on destroy.
+    if (this.windowResizeListener == null && typeof window !== "undefined") {
+      this.windowResizeListener = () => this.applyFit();
+      window.addEventListener("resize", this.windowResizeListener);
+    }
+  }
+
+  /**
+   * Apply the current `darkMode` option to the container. For `auto`, also
+   * subscribe to system colour-scheme changes so the embed flips when the
+   * user toggles their OS theme. Replaces a one-shot read at mount that
+   * froze the embed on its boot-time value.
+   */
+  private applyDarkMode() {
+    // Tear down any previous subscription first — used during setDocument
+    // and option changes.
+    if (this.darkModeMql && this.darkModeListener) {
+      this.darkModeMql.removeEventListener("change", this.darkModeListener);
+      this.darkModeMql = null;
+      this.darkModeListener = null;
+    }
+
+    const setDark = (on: boolean) => {
+      this.container.classList.toggle("jdfjs-dark", on);
+    };
+
+    const mode = this.options.darkMode;
+    if (mode === "dark") { setDark(true); return; }
+    if (mode === "light") { setDark(false); return; }
+    // mode === "auto"
+    if (typeof window === "undefined" || !window.matchMedia) {
+      setDark(false);
+      return;
+    }
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    setDark(mql.matches);
+    const listener = (e: MediaQueryListEvent) => setDark(e.matches);
+    mql.addEventListener("change", listener);
+    this.darkModeMql = mql;
+    this.darkModeListener = listener;
   }
 
   /** Auto-zoom for fit modes. */
@@ -331,6 +431,7 @@ export class JDFViewer {
         document: this.doc,
         path: ["pages", pageIndex, "elements", elIdx],
         onNavigatePage: (idx) => this.goToPage(idx),
+        onFormChange: (path, field, value) => this.handleFormChange(path, field, value),
       });
       if (node) content.appendChild(node);
     });
@@ -440,9 +541,99 @@ export class JDFViewer {
     this.options.onLoad?.(doc);
   }
 
+  /**
+   * Apply a form-field value mutation to the in-memory document. Called by
+   * every form renderer on every keystroke / toggle / selection — the
+   * document carries the user's current state so `exportJdf()` returns a
+   * filled JDF that's identical in shape to the source, just with values.
+   *
+   * No re-render: the DOM input already shows what the user typed, and a
+   * full re-render mid-typing would lose focus. The mutation only matters
+   * at export time.
+   */
+  private handleFormChange(path: (string | number)[], field: string, value: unknown) {
+    const target = path.reduce<any>((acc, key) => (acc == null ? acc : acc[key]), this.doc as any);
+    if (target == null) return;
+    target[field] = value;
+    this.options.onFormChange?.(this.doc, { path, field, value });
+  }
+
+  /**
+   * Walk every page's elements and yield each form element with its
+   * resolved name. Used by getFormValues / downloadJdf consumers.
+   */
+  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 };
+        }
+      }
+    }
+  }
+
+  toJSON(options: { pretty?: boolean } = {}): string {
+    return options.pretty === false
+      ? JSON.stringify(this.doc)
+      : JSON.stringify(this.doc, null, 2);
+  }
+
+  exportJdf(options: { pretty?: boolean } = {}): Blob {
+    return new Blob([this.toJSON(options)], { type: "application/jdf+json" });
+  }
+
+  downloadJdf(filename?: string): void {
+    const name = filename
+      || (this.doc.meta?.title ? `${this.doc.meta.title.replace(/[^\w\s.-]+/g, "_")}.jdf` : "document.jdf");
+    const blob = this.exportJdf();
+    const url = URL.createObjectURL(blob);
+    const a = window.document.createElement("a");
+    a.href = url;
+    a.download = name;
+    window.document.body.appendChild(a);
+    a.click();
+    window.document.body.removeChild(a);
+    // Revoke after the click handler returns the file to the browser.
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+
+  getFormValue(name: string): unknown {
+    for (const f of this.iterFormFields()) {
+      if (f.name !== name) continue;
+      if (f.field.type === "checkbox") return f.field.checked === true;
+      if (f.field.type === "select" && f.field.multiple) return f.field.values || [];
+      return f.field.value ?? "";
+    }
+    return undefined;
+  }
+
+  getFormValues(): Record<string, unknown> {
+    const out: Record<string, unknown> = {};
+    for (const f of this.iterFormFields()) {
+      if (f.field.type === "checkbox") out[f.name] = f.field.checked === true;
+      else if (f.field.type === "select" && f.field.multiple) out[f.name] = f.field.values || [];
+      else out[f.name] = f.field.value ?? "";
+    }
+    return out;
+  }
+
   destroy() {
     this.observer?.disconnect();
     this.resizeObs?.disconnect();
+    if (this.darkModeMql && this.darkModeListener) {
+      this.darkModeMql.removeEventListener("change", this.darkModeListener);
+      this.darkModeMql = null;
+      this.darkModeListener = null;
+    }
+    if (this.windowResizeListener && typeof window !== "undefined") {
+      window.removeEventListener("resize", this.windowResizeListener);
+      this.windowResizeListener = null;
+    }
+    // Drop any in-flight fetch tied to this container so a late response
+    // doesn't try to render into a destroyed DOM.
+    const ctrl = FETCH_ABORTS.get(this.container);
+    if (ctrl) { ctrl.abort(); FETCH_ABORTS.delete(this.container); }
     this.container.innerHTML = "";
     this.container.classList.remove("jdfjs", "jdfjs-dark", "jdfjs-loading", "jdfjs-error");
     this.container.style.removeProperty("width");
@@ -450,16 +641,27 @@ export class JDFViewer {
   }
 
   getInstance(): JDFViewerInstance {
-    return {
+    const self = this;
+    // `document` is a getter so callers always see the up-to-date document
+    // (including form values typed after the instance was returned), not a
+    // snapshot from when getInstance() ran. The previous version used
+    // `document: this.doc` which froze the reference at instance time.
+    const inst = {
       container: this.container,
-      document: this.doc,
-      setZoom: (z) => this.setZoom(z),
+      get document() { return self.doc; },
+      setZoom: (z: number) => this.setZoom(z),
       getZoom: () => this.getZoom(),
-      goToPage: (i) => this.goToPage(i),
+      goToPage: (i: number) => this.goToPage(i),
       getCurrentPage: () => this.getCurrentPage(),
-      setDocument: (d) => this.setDocument(d),
+      setDocument: (d: JdfDocument) => this.setDocument(d),
       destroy: () => this.destroy(),
+      exportJdf: (opts?: { pretty?: boolean }) => this.exportJdf(opts),
+      toJSON: (opts?: { pretty?: boolean }) => this.toJSON(opts),
+      downloadJdf: (n?: string) => this.downloadJdf(n),
+      getFormValue: (n: string) => this.getFormValue(n),
+      getFormValues: () => this.getFormValues(),
     };
+    return inst as JDFViewerInstance;
   }
 }