@qrcommunication/gigapdf-lib 0.1.0 → 0.8.0

package/dist/editor.js

@@ -0,0 +1,1126 @@
+// src/viewer.ts
+var CSS = `
+.gpv{position:relative;display:flex;flex-direction:column;height:100%;width:100%;background:var(--gpv-bg,#525659);color:#eee;font:13px/1.4 system-ui,sans-serif;overflow:hidden}
+.gpv-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#323639;border-bottom:1px solid #000;flex:0 0 auto;user-select:none}
+.gpv-bar button{background:#4a4f52;color:#eee;border:0;border-radius:4px;padding:4px 9px;cursor:pointer;font:inherit}
+.gpv-bar button:hover{background:#5a6063}
+.gpv-bar .gpv-sp{flex:1}
+.gpv-bar input{width:46px;background:#222;color:#eee;border:1px solid #000;border-radius:4px;padding:3px;text-align:center;font:inherit}
+.gpv-bar select{background:#222;color:#eee;border:1px solid #000;border-radius:4px;padding:3px;font:inherit;cursor:pointer}
+.gpv-bar .gpv-zoom{min-width:44px;text-align:center;color:#ddd;font-variant-numeric:tabular-nums}
+.gpv-body{flex:1;display:flex;min-height:0}
+.gpv-thumbs{flex:0 0 132px;overflow-y:auto;background:#2a2d2f;padding:8px;display:flex;flex-direction:column;gap:8px}
+.gpv-thumbs img{width:100%;display:block;border:2px solid transparent;border-radius:2px;cursor:pointer;background:#fff}
+.gpv-thumbs .gpv-on img{border-color:#3b82f6}
+.gpv-thumbs span{display:block;text-align:center;color:#aaa;font-size:11px}
+.gpv-pages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;align-items:center;gap:18px;scroll-behavior:smooth}
+.gpv-page{position:relative;box-shadow:0 1px 6px rgba(0,0,0,.6);background:#fff}
+.gpv-page img{display:block;width:100%;height:auto}
+.gpv:fullscreen{--gpv-bg:#000}
+.gpv.gpv-present .gpv-thumbs,.gpv.gpv-present .gpv-bar{display:none}
+.gpv.gpv-present .gpv-pages{padding:0;justify-content:center;overflow:hidden}
+.gpv.gpv-present .gpv-page{box-shadow:none;max-height:100vh}
+.gpv.gpv-present .gpv-page img{width:auto;max-width:100vw;max-height:100vh}
+`;
+var styleInjected = false;
+function injectStyle(doc) {
+  if (styleInjected) return;
+  const el = doc.createElement("style");
+  el.textContent = CSS;
+  doc.head.appendChild(el);
+  styleInjected = true;
+}
+function pngSize(b) {
+  if (b.length < 24) return { w: 1, h: 1 };
+  const dv = new DataView(b.buffer, b.byteOffset, b.byteLength);
+  return { w: dv.getUint32(16) || 1, h: dv.getUint32(20) || 1 };
+}
+var GigaPdfViewer = class {
+  constructor(engine, container, options = {}) {
+    this.engine = engine;
+    this.options = options;
+    this.cssScale = options.scale ?? 1;
+    this.renderScale = options.renderScale ?? 2;
+    this.root = container;
+    injectStyle(container.ownerDocument);
+    this.buildChrome();
+    this.onKey = (e) => this.handleKey(e);
+    this.onFsChange = () => this.syncPresentClass();
+    container.ownerDocument.addEventListener("keydown", this.onKey);
+    container.ownerDocument.addEventListener("fullscreenchange", this.onFsChange);
+  }
+  engine;
+  options;
+  // `protected` members are the surface the editor subclass builds on.
+  doc = null;
+  count = 0;
+  current = 1;
+  cssScale;
+  renderScale;
+  /** Active auto-fit mode; re-applied on resize and page change. */
+  fitMode = "none";
+  presenting = false;
+  resizeObs = null;
+  // Per-page caches (1-indexed; slot 0 unused).
+  urls = [];
+  sizes = [];
+  // DOM nodes.
+  root;
+  bar = null;
+  body;
+  thumbs;
+  pages;
+  pageInput = null;
+  zoomReadout = null;
+  zoomSelect = null;
+  pageEls = [];
+  onKey;
+  onFsChange;
+  /** Number of pages currently open. */
+  get pageCount() {
+    return this.count;
+  }
+  /** The page currently in view (1-based). */
+  get currentPage() {
+    return this.current;
+  }
+  /** Orientation of `page` (after open). */
+  orientation(page) {
+    const s = this.sizes[page];
+    return s && s.w > s.h ? "landscape" : "portrait";
+  }
+  /** The current document as PDF bytes (including any applied edits). */
+  save() {
+    if (!this.doc) return new Uint8Array(0);
+    return this.doc.save();
+  }
+  /** Open a document; Office/HTML are converted to PDF in-engine. Returns the page count. */
+  async open(src) {
+    const pdf = this.toPdf(src);
+    this.close();
+    this.doc = this.engine.open(pdf);
+    this.count = this.doc.pageCount();
+    this.urls = new Array(this.count + 1).fill(null);
+    this.sizes = new Array(this.count + 1).fill(null);
+    this.pageEls = new Array(this.count + 1).fill(null);
+    this.current = 1;
+    this.renderAllPages();
+    if (this.options.thumbnails !== false) this.buildThumbs();
+    this.goTo(1);
+    return this.count;
+  }
+  toPdf(src) {
+    switch (src.kind) {
+      case "pdf":
+        return src.bytes;
+      case "office":
+        return this.engine.officeToPdf(src.bytes);
+      case "html":
+        return src.fonts?.length ? this.engine.htmlRender(src.html, src.fonts) : this.engine.htmlToPdf(src.html);
+      case "auto":
+        return this.detectAndConvert(src.bytes);
+    }
+  }
+  detectAndConvert(b) {
+    const is = (...sig) => sig.every((v, i) => b[i] === v);
+    if (is(37, 80, 68, 70)) return b;
+    if (is(80, 75)) return this.engine.officeToPdf(b);
+    if (is(208, 207, 17, 224)) return this.engine.officeToPdf(b);
+    return this.engine.htmlToPdf(new TextDecoder().decode(b));
+  }
+  // ── rendering ────────────────────────────────────────────────────────────────
+  renderPageRaster(page) {
+    const cachedUrl = this.urls[page];
+    const cachedSize = this.sizes[page];
+    if (cachedUrl && cachedSize) return { url: cachedUrl, ...cachedSize };
+    const png = this.doc.renderPage(page, this.renderScale);
+    const size = pngSize(png);
+    const buf = new ArrayBuffer(png.byteLength);
+    new Uint8Array(buf).set(png);
+    const url = URL.createObjectURL(new Blob([buf], { type: "image/png" }));
+    this.urls[page] = url;
+    this.sizes[page] = size;
+    return { url, ...size };
+  }
+  /** The page's width / height in PDF points (raster pixels ÷ render scale). */
+  pageWidthPt(page) {
+    const s = this.sizes[page];
+    return s ? s.w / this.renderScale : 0;
+  }
+  pageHeightPt(page) {
+    const s = this.sizes[page];
+    return s ? s.h / this.renderScale : 0;
+  }
+  /** Re-raster a page after its content changed (drops the cached image). */
+  reRenderPage(page) {
+    const old = this.urls[page];
+    if (old) URL.revokeObjectURL(old);
+    this.urls[page] = null;
+    this.sizes[page] = null;
+    const { url, w } = this.renderPageRaster(page);
+    const box = this.pageEls[page];
+    if (!box) return;
+    box.style.width = `${w / this.renderScale * this.cssScale}px`;
+    const img = box.querySelector("img");
+    if (img) img.src = url;
+  }
+  /** Hook for subclasses (the editor) to attach per-page overlays. */
+  afterRender() {
+  }
+  renderAllPages() {
+    this.pages.replaceChildren();
+    for (let p = 1; p <= this.count; p++) {
+      const { url, w, h } = this.renderPageRaster(p);
+      const box = this.root.ownerDocument.createElement("div");
+      box.className = "gpv-page";
+      box.dataset.page = String(p);
+      box.style.width = `${w / this.renderScale * this.cssScale}px`;
+      const img = this.root.ownerDocument.createElement("img");
+      img.src = url;
+      img.alt = `Page ${p}`;
+      img.loading = "lazy";
+      box.appendChild(img);
+      this.pages.appendChild(box);
+      this.pageEls[p] = box;
+    }
+    this.afterRender();
+  }
+  buildThumbs() {
+    this.thumbs.replaceChildren();
+    for (let p = 1; p <= this.count; p++) {
+      const url = this.urls[p];
+      const item = this.root.ownerDocument.createElement("div");
+      item.dataset.page = String(p);
+      const img = this.root.ownerDocument.createElement("img");
+      if (url) img.src = url;
+      img.addEventListener("click", () => this.goTo(p));
+      const label = this.root.ownerDocument.createElement("span");
+      label.textContent = String(p);
+      item.append(img, label);
+      this.thumbs.appendChild(item);
+    }
+    this.highlightThumb();
+  }
+  highlightThumb() {
+    for (const child of Array.from(this.thumbs.children)) {
+      child.classList.toggle("gpv-on", child.getAttribute("data-page") === String(this.current));
+    }
+  }
+  // ── navigation ───────────────────────────────────────────────────────────────
+  /** Scroll/jump to `page` (clamped to range). */
+  goTo(page) {
+    if (this.count === 0) return;
+    this.current = Math.min(Math.max(1, Math.round(page)), this.count);
+    if (this.presenting) {
+      for (let p = 1; p <= this.count; p++) {
+        const el = this.pageEls[p];
+        if (el) el.style.display = p === this.current ? "" : "none";
+      }
+    } else {
+      this.pageEls[this.current]?.scrollIntoView({ block: "start" });
+    }
+    if (this.pageInput) this.pageInput.value = String(this.current);
+    if (this.fitMode !== "none") this.applyFitMode();
+    this.highlightThumb();
+  }
+  next() {
+    this.goTo(this.current + 1);
+  }
+  prev() {
+    this.goTo(this.current - 1);
+  }
+  // ── zoom ─────────────────────────────────────────────────────────────────────
+  /** Current CSS zoom multiplier (1 = 100%). */
+  get zoom() {
+    return this.cssScale;
+  }
+  /** Resize the page boxes to the current `cssScale` (no re-raster). */
+  applyScale(scale) {
+    this.cssScale = Math.min(Math.max(0.08, scale), 8);
+    for (let p = 1; p <= this.count; p++) {
+      const box = this.pageEls[p];
+      const size = this.sizes[p];
+      if (box && size) box.style.width = `${size.w / this.renderScale * this.cssScale}px`;
+    }
+    this.updateZoomReadout();
+    this.onZoomChange();
+  }
+  /** Set an explicit zoom multiplier (cancels any auto-fit mode). */
+  setZoom(scale) {
+    this.fitMode = "none";
+    this.applyScale(scale);
+  }
+  /** Set zoom as a percentage (e.g. `125`). */
+  setZoomPercent(pct) {
+    this.setZoom(pct / 100);
+  }
+  /** Reset to 100 % (actual size). */
+  actualSize() {
+    this.setZoom(1);
+  }
+  zoomIn() {
+    this.setZoom(this.cssScale * 1.2);
+  }
+  zoomOut() {
+    this.setZoom(this.cssScale / 1.2);
+  }
+  /** Fit the current page's **width** to the viewport (sticks across resizes). */
+  fitWidth() {
+    this.fitMode = "width";
+    this.applyFitMode();
+  }
+  /** Fit the **whole** current page (width *and* height) to the viewport. */
+  fitPage() {
+    this.fitMode = "page";
+    this.applyFitMode();
+  }
+  /** Recompute the zoom for the active fit mode against the current page. */
+  applyFitMode() {
+    if (this.fitMode === "none" || this.presenting || this.count === 0) return;
+    const size = this.sizes[this.current];
+    if (!size) return;
+    const wPt = size.w / this.renderScale;
+    const hPt = size.h / this.renderScale;
+    if (this.fitMode === "width") {
+      this.applyScale((this.pages.clientWidth - 36) / wPt || 1);
+    } else {
+      const availW = this.pages.clientWidth - 36;
+      const availH = this.pages.clientHeight - 36;
+      this.applyScale(Math.min(availW / wPt, availH / hPt) || 1);
+    }
+  }
+  /** Hook for subclasses (the editor) to react to zoom changes. */
+  onZoomChange() {
+  }
+  updateZoomReadout() {
+    if (this.zoomReadout) this.zoomReadout.textContent = `${Math.round(this.cssScale * 100)}%`;
+    if (this.zoomSelect) {
+      const v = this.fitMode === "width" ? "width" : this.fitMode === "page" ? "page" : String(this.cssScale);
+      const has = Array.from(this.zoomSelect.options).some((o) => o.value === v);
+      this.zoomSelect.value = has ? v : "";
+    }
+  }
+  // ── presentation (fullscreen slideshow) ───────────────────────────────────────
+  /** Enter fullscreen single-page presentation mode. */
+  present() {
+    this.presenting = true;
+    this.root.classList.add("gpv-present");
+    this.goTo(this.current);
+    void this.root.requestFullscreen?.();
+  }
+  /** Leave presentation mode. */
+  exitPresent() {
+    this.presenting = false;
+    this.root.classList.remove("gpv-present");
+    if (this.root.ownerDocument.fullscreenElement) void this.root.ownerDocument.exitFullscreen?.();
+    for (let p = 1; p <= this.count; p++) {
+      const el = this.pageEls[p];
+      if (el) el.style.display = "";
+    }
+    this.goTo(this.current);
+  }
+  syncPresentClass() {
+    if (this.presenting && !this.root.ownerDocument.fullscreenElement) this.exitPresent();
+  }
+  // ── keyboard ─────────────────────────────────────────────────────────────────
+  handleKey(e) {
+    if (!this.isActive()) return;
+    switch (e.key) {
+      case "ArrowRight":
+      case "PageDown":
+      case " ":
+        this.next();
+        break;
+      case "ArrowLeft":
+      case "PageUp":
+        this.prev();
+        break;
+      case "Home":
+        this.goTo(1);
+        break;
+      case "End":
+        this.goTo(this.count);
+        break;
+      case "+":
+      case "=":
+        this.zoomIn();
+        break;
+      case "-":
+        this.zoomOut();
+        break;
+      case "0":
+        this.actualSize();
+        break;
+      case "f":
+      case "F":
+        this.presenting ? this.exitPresent() : this.present();
+        break;
+      case "Escape":
+        if (this.presenting) this.exitPresent();
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  }
+  isActive() {
+    return this.presenting || this.root.contains(this.root.ownerDocument.activeElement) || this.root.matches(":hover");
+  }
+  // ── chrome ───────────────────────────────────────────────────────────────────
+  buildChrome() {
+    const d = this.root.ownerDocument;
+    this.root.classList.add("gpv");
+    if (this.options.background) this.root.style.setProperty("--gpv-bg", this.options.background);
+    this.root.replaceChildren();
+    if (this.options.toolbar !== false) {
+      const bar = d.createElement("div");
+      bar.className = "gpv-bar";
+      const btn = (label, fn, title) => {
+        const b = d.createElement("button");
+        b.textContent = label;
+        if (title) b.title = title;
+        b.addEventListener("click", fn);
+        bar.appendChild(b);
+        return b;
+      };
+      btn("\u2039", () => this.prev(), "Previous page");
+      btn("\u203A", () => this.next(), "Next page");
+      const input = d.createElement("input");
+      input.value = "1";
+      input.addEventListener("change", () => this.goTo(Number(input.value) || 1));
+      bar.appendChild(input);
+      this.pageInput = input;
+      btn("\u2212", () => this.zoomOut(), "Zoom out");
+      const zr = d.createElement("span");
+      zr.className = "gpv-zoom";
+      zr.textContent = "100%";
+      bar.appendChild(zr);
+      this.zoomReadout = zr;
+      btn("+", () => this.zoomIn(), "Zoom in");
+      const zsel = d.createElement("select");
+      zsel.title = "Zoom level";
+      const zopts = [
+        ["width", "Fit width"],
+        ["page", "Fit page"],
+        ["0.5", "50%"],
+        ["0.75", "75%"],
+        ["1", "100%"],
+        ["1.25", "125%"],
+        ["1.5", "150%"],
+        ["2", "200%"],
+        ["4", "400%"]
+      ];
+      for (const [val, label] of zopts) {
+        const o = d.createElement("option");
+        o.value = val;
+        o.textContent = label;
+        zsel.appendChild(o);
+      }
+      zsel.value = "1";
+      zsel.addEventListener("change", () => {
+        const v = zsel.value;
+        if (v === "width") this.fitWidth();
+        else if (v === "page") this.fitPage();
+        else if (v) this.setZoom(Number(v));
+      });
+      bar.appendChild(zsel);
+      this.zoomSelect = zsel;
+      const sp = d.createElement("div");
+      sp.className = "gpv-sp";
+      bar.appendChild(sp);
+      btn("\u26F6 Present", () => this.present(), "Fullscreen presentation (F)");
+      this.root.appendChild(bar);
+      this.bar = bar;
+    }
+    this.body = d.createElement("div");
+    this.body.className = "gpv-body";
+    this.thumbs = d.createElement("div");
+    this.thumbs.className = "gpv-thumbs";
+    if (this.options.thumbnails === false) this.thumbs.style.display = "none";
+    this.pages = d.createElement("div");
+    this.pages.className = "gpv-pages";
+    this.pages.addEventListener("scroll", () => this.trackScroll());
+    this.body.append(this.thumbs, this.pages);
+    this.root.appendChild(this.body);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObs = new ResizeObserver(() => this.applyFitMode());
+      this.resizeObs.observe(this.pages);
+    }
+    this.pages.addEventListener(
+      "wheel",
+      (e) => {
+        if (!e.ctrlKey && !e.metaKey) return;
+        e.preventDefault();
+        this.setZoom(this.cssScale * (e.deltaY < 0 ? 1.1 : 1 / 1.1));
+      },
+      { passive: false }
+    );
+  }
+  trackScroll() {
+    if (this.presenting || this.count === 0) return;
+    const mid = this.pages.scrollTop + this.pages.clientHeight / 2;
+    let best = this.current;
+    for (let p = 1; p <= this.count; p++) {
+      const el = this.pageEls[p];
+      if (el && el.offsetTop <= mid) best = p;
+    }
+    if (best !== this.current) {
+      this.current = best;
+      if (this.pageInput) this.pageInput.value = String(best);
+      if (this.fitMode !== "none") this.applyFitMode();
+      this.highlightThumb();
+    }
+  }
+  // ── lifecycle ────────────────────────────────────────────────────────────────
+  /** Close the current document and free its rendered pages. */
+  close() {
+    for (const u of this.urls) if (u) URL.revokeObjectURL(u);
+    this.urls = [];
+    this.sizes = [];
+    this.pageEls = [];
+    this.doc?.close();
+    this.doc = null;
+    this.count = 0;
+    this.pages?.replaceChildren();
+    this.thumbs?.replaceChildren();
+  }
+  /** Destroy the viewer: close the document and detach listeners. */
+  destroy() {
+    this.close();
+    this.resizeObs?.disconnect();
+    this.resizeObs = null;
+    this.root.ownerDocument.removeEventListener("keydown", this.onKey);
+    this.root.ownerDocument.removeEventListener("fullscreenchange", this.onFsChange);
+    this.root.classList.remove("gpv", "gpv-present");
+    this.root.replaceChildren();
+  }
+};
+
+// src/editor.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var PT_PER_MM = 72 / 25.4;
+var hex = (n) => "#" + (n & 16777215).toString(16).padStart(6, "0");
+var GigaPdfEditor = class extends GigaPdfViewer {
+  tool = "select";
+  style = { color: 1710618, fill: null, lineWidth: 1.5, fontSize: 16, opacity: 1 };
+  els = [];
+  overlays = [];
+  idSeq = 1;
+  selected = null;
+  fontObj = null;
+  editorOpts;
+  palette = null;
+  // Rulers & margins. Margins are stored in **PDF points**, shared across pages.
+  margins = { top: 56.7, right: 56.7, bottom: 56.7, left: 56.7 };
+  // ≈20 mm
+  guides = [];
+  showGuides = true;
+  marginInputs = {
+    top: null,
+    right: null,
+    bottom: null,
+    left: null
+  };
+  constructor(engine, container, opts = {}) {
+    super(engine, container, opts);
+    this.editorOpts = opts;
+    this.buildPalette();
+  }
+  // ── public API ─────────────────────────────────────────────────────────────
+  setTool(tool) {
+    this.tool = tool;
+    for (const b of this.palette?.querySelectorAll("button[data-tool]") ?? []) {
+      b.classList.toggle("gpe-on", b.getAttribute("data-tool") === tool);
+    }
+    if (this.selected && tool !== "select") {
+      this.selected = null;
+      this.redrawAll();
+    }
+  }
+  setStyle(patch) {
+    this.style = { ...this.style, ...patch };
+    if (this.selected) {
+      this.selected.s = { ...this.selected.s, ...patch };
+      this.redraw(this.selected.page);
+    }
+  }
+  /** Edits drawn but not yet baked into the PDF. */
+  get pendingEdits() {
+    return this.els.length;
+  }
+  /** Delete the currently selected element. */
+  removeSelected() {
+    if (!this.selected) return;
+    const page = this.selected.page;
+    this.els = this.els.filter((e) => e !== this.selected);
+    this.selected = null;
+    this.redraw(page);
+  }
+  /** Discard all un-applied edits. */
+  clearEdits() {
+    this.els = [];
+    this.selected = null;
+    this.redrawAll();
+  }
+  /** Bake every pending edit into the PDF, then re-render the affected pages. */
+  applyEdits() {
+    if (!this.doc || this.els.length === 0) return 0;
+    const pages = /* @__PURE__ */ new Set();
+    let applied = 0;
+    for (const e of this.els) {
+      if (this.bake(e)) {
+        pages.add(e.page);
+        applied++;
+      }
+    }
+    this.els = [];
+    this.selected = null;
+    for (const p of pages) this.reRenderPage(p);
+    this.redrawAll();
+    return applied;
+  }
+  // ── apply one element to the PDF (flip Y: top-left points → PDF bottom-left) ──
+  bake(e) {
+    const doc = this.doc;
+    const H = this.pageHeightPt(e.page);
+    const nx = Math.min(e.x, e.x + e.w);
+    const ny = Math.min(e.y, e.y + e.h);
+    const nw = Math.abs(e.w);
+    const nh = Math.abs(e.h);
+    const { color, fill, lineWidth, opacity } = e.s;
+    switch (e.kind) {
+      case "rect":
+        return doc.addRectangle(e.page, nx, H - (ny + nh), nw, nh, color, fill, lineWidth, opacity);
+      case "ellipse":
+        return doc.addEllipse(e.page, nx + nw / 2, H - (ny + nh / 2), nw / 2, nh / 2, color, fill, lineWidth, opacity);
+      case "line":
+        return doc.addPolygon(e.page, [e.x, H - e.y, e.x + e.w, H - (e.y + e.h)], false, color, null, lineWidth, opacity);
+      case "ink": {
+        const flat = [];
+        const pts = e.pts ?? [];
+        for (let i = 0; i + 1 < pts.length; i += 2) {
+          flat.push(pts[i], H - pts[i + 1]);
+        }
+        return flat.length >= 4 ? doc.addPolygon(e.page, flat, false, color, null, lineWidth, opacity) : false;
+      }
+      case "text": {
+        const id = this.ensureFont();
+        if (id === null || !e.text) return false;
+        return doc.addText(e.page, e.x, H - e.y, e.s.fontSize, e.text, id, color);
+      }
+      case "image":
+        return e.data ? doc.addImage(e.page, e.data, nx, H - (ny + nh), nw, nh, opacity) : false;
+      case "highlight":
+        return doc.addRectangle(e.page, nx, H - (ny + nh), nw, nh, null, color, 0, 0.4);
+      case "redact":
+        return doc.redact(e.page, nx, H - (ny + nh), nw, nh, 0, false) >= 0;
+      default:
+        return false;
+    }
+  }
+  ensureFont() {
+    if (this.fontObj !== null) return this.fontObj;
+    const f = this.editorOpts.defaultFont;
+    if (!f || !this.doc) return null;
+    this.fontObj = this.doc.embedFont(f.family, f.ttf);
+    return this.fontObj;
+  }
+  // ── overlays (rebuilt after each (re)render) ─────────────────────────────────
+  afterRender() {
+    this.overlays = new Array(this.count + 1).fill(null);
+    this.guides = new Array(this.count + 1).fill(null);
+    const d = this.root.ownerDocument;
+    for (let p = 1; p <= this.count; p++) {
+      const box = this.pageEls[p];
+      if (!box) continue;
+      box.style.position = "relative";
+      const svg = d.createElementNS(SVG_NS, "svg");
+      svg.setAttribute("viewBox", `0 0 ${this.pageWidthPt(p)} ${this.pageHeightPt(p)}`);
+      svg.setAttribute("preserveAspectRatio", "none");
+      svg.style.cssText = "position:absolute;inset:0;width:100%;height:100%;touch-action:none";
+      svg.dataset.page = String(p);
+      box.appendChild(svg);
+      this.overlays[p] = svg;
+      this.bindOverlay(svg, p);
+      const g = d.createElementNS(SVG_NS, "svg");
+      g.setAttribute("viewBox", `0 0 ${this.pageWidthPt(p)} ${this.pageHeightPt(p)}`);
+      g.setAttribute("preserveAspectRatio", "none");
+      g.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible";
+      g.dataset.page = String(p);
+      box.appendChild(g);
+      this.guides[p] = g;
+    }
+    this.redrawAll();
+    this.redrawGuidesAll();
+  }
+  /** Keep ruler ticks / handles a constant on-screen size as the zoom changes. */
+  onZoomChange() {
+    this.redrawGuidesAll();
+  }
+  // ── rulers & margins (public API) ────────────────────────────────────────────
+  /** Set page margins (default unit: millimetres). */
+  setMargins(m, unit = "mm") {
+    const k = unit === "mm" ? PT_PER_MM : 1;
+    for (const side of ["top", "right", "bottom", "left"]) {
+      const v = m[side];
+      if (typeof v === "number" && isFinite(v)) this.margins[side] = Math.max(0, v * k);
+    }
+    this.syncMarginInputs();
+    this.redrawGuidesAll();
+  }
+  /** Current margins in the requested unit (millimetres by default). */
+  getMargins(unit = "mm") {
+    const k = unit === "mm" ? PT_PER_MM : 1;
+    return {
+      top: this.margins.top / k,
+      right: this.margins.right / k,
+      bottom: this.margins.bottom / k,
+      left: this.margins.left / k
+    };
+  }
+  /** Show or hide the rulers and margin guides. */
+  showRulers(on) {
+    this.showGuides = on;
+    this.redrawGuidesAll();
+  }
+  syncMarginInputs() {
+    for (const side of ["top", "right", "bottom", "left"]) {
+      const inp = this.marginInputs[side];
+      if (inp) inp.value = String(Math.round(this.margins[side] / PT_PER_MM));
+    }
+  }
+  // ── ruler / margin drawing ───────────────────────────────────────────────────
+  redrawGuidesAll() {
+    for (let p = 1; p <= this.count; p++) this.redrawGuides(p);
+  }
+  redrawGuides(page) {
+    const g = this.guides[page];
+    if (!g) return;
+    g.replaceChildren();
+    if (!this.showGuides) return;
+    const W = this.pageWidthPt(page);
+    const H = this.pageHeightPt(page);
+    if (!W || !H) return;
+    const d = this.root.ownerDocument;
+    const z = this.zoom || 1;
+    const band = 14 / z;
+    const fs = 8 / z;
+    const line = (x1, y1, x2, y2, stroke, dash) => {
+      const l = d.createElementNS(SVG_NS, "line");
+      l.setAttribute("x1", String(x1));
+      l.setAttribute("y1", String(y1));
+      l.setAttribute("x2", String(x2));
+      l.setAttribute("y2", String(y2));
+      l.setAttribute("stroke", stroke);
+      l.setAttribute("stroke-width", "1");
+      l.setAttribute("vector-effect", "non-scaling-stroke");
+      if (dash) l.setAttribute("stroke-dasharray", dash);
+      g.appendChild(l);
+    };
+    const label = (x, y, text) => {
+      const t = d.createElementNS(SVG_NS, "text");
+      t.setAttribute("x", String(x));
+      t.setAttribute("y", String(y));
+      t.setAttribute("font-size", String(fs));
+      t.setAttribute("fill", "#c9ced2");
+      t.setAttribute("font-family", "system-ui,sans-serif");
+      t.textContent = text;
+      g.appendChild(t);
+    };
+    const bandRect = (w, h) => {
+      const r = d.createElementNS(SVG_NS, "rect");
+      r.setAttribute("x", "0");
+      r.setAttribute("y", "0");
+      r.setAttribute("width", String(w));
+      r.setAttribute("height", String(h));
+      r.setAttribute("fill", "rgba(38,42,45,0.86)");
+      g.appendChild(r);
+    };
+    bandRect(W, band);
+    bandRect(band, H);
+    const step = PT_PER_MM * 5;
+    for (let x = 0, m = 0; x <= W + 0.5; x += step, m += 5) {
+      const major = m % 10 === 0;
+      line(x, 0, x, major ? band : band * 0.55, "#7a8085");
+      if (major && m > 0) label(x + 1 / z, band - 1.5 / z, String(m));
+    }
+    for (let y = 0, m = 0; y <= H + 0.5; y += step, m += 5) {
+      const major = m % 10 === 0;
+      line(0, y, major ? band : band * 0.55, y, "#7a8085");
+      if (major && m > 0) label(1 / z, y - 1 / z, String(m));
+    }
+    const ml = this.margins.left;
+    const mr = W - this.margins.right;
+    const mt = this.margins.top;
+    const mb = H - this.margins.bottom;
+    line(ml, 0, ml, H, "#3b82f6", "5 3");
+    line(mr, 0, mr, H, "#3b82f6", "5 3");
+    line(0, mt, W, mt, "#3b82f6", "5 3");
+    line(0, mb, W, mb, "#3b82f6", "5 3");
+    const hs = 11 / z;
+    this.marginHandle(g, page, "left", ml, band / 2, hs, "ew-resize", W, H);
+    this.marginHandle(g, page, "right", mr, band / 2, hs, "ew-resize", W, H);
+    this.marginHandle(g, page, "top", band / 2, mt, hs, "ns-resize", W, H);
+    this.marginHandle(g, page, "bottom", band / 2, mb, hs, "ns-resize", W, H);
+  }
+  marginHandle(g, page, side, cx, cy, size, cursor, W, H) {
+    const d = this.root.ownerDocument;
+    const r = d.createElementNS(SVG_NS, "rect");
+    r.setAttribute("x", String(cx - size / 2));
+    r.setAttribute("y", String(cy - size / 2));
+    r.setAttribute("width", String(size));
+    r.setAttribute("height", String(size));
+    r.setAttribute("rx", String(size * 0.25));
+    r.setAttribute("fill", "#3b82f6");
+    r.setAttribute("stroke", "#fff");
+    r.setAttribute("stroke-width", "1");
+    r.setAttribute("vector-effect", "non-scaling-stroke");
+    r.style.cssText = `pointer-events:all;cursor:${cursor}`;
+    r.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      try {
+        g.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const move = (ev) => {
+        const pp = this.toPagePt(g, ev.clientX, ev.clientY);
+        const val = side === "left" ? pp.x : side === "right" ? W - pp.x : side === "top" ? pp.y : H - pp.y;
+        this.dragMargin(page, side, val);
+      };
+      const up = (ev) => {
+        try {
+          g.releasePointerCapture(ev.pointerId);
+        } catch {
+        }
+        g.removeEventListener("pointermove", move);
+        g.removeEventListener("pointerup", up);
+        g.removeEventListener("pointercancel", up);
+      };
+      g.addEventListener("pointermove", move);
+      g.addEventListener("pointerup", up);
+      g.addEventListener("pointercancel", up);
+    });
+    g.appendChild(r);
+  }
+  dragMargin(page, side, val) {
+    const W = this.pageWidthPt(page);
+    const H = this.pageHeightPt(page);
+    const lim = side === "left" || side === "right" ? W : H;
+    const opp = side === "left" ? this.margins.right : side === "right" ? this.margins.left : side === "top" ? this.margins.bottom : this.margins.top;
+    this.margins[side] = Math.max(0, Math.min(val, lim - opp - 8));
+    this.syncMarginInputs();
+    this.redrawGuidesAll();
+  }
+  toPagePt(svg, clientX, clientY) {
+    const m = svg.getScreenCTM();
+    if (!m) return { x: 0, y: 0 };
+    const pt = new DOMPoint(clientX, clientY).matrixTransform(m.inverse());
+    return { x: pt.x, y: pt.y };
+  }
+  bindOverlay(svg, page) {
+    let draft = null;
+    let origin = null;
+    let moving = null;
+    svg.addEventListener("pointerdown", (e) => {
+      svg.setPointerCapture(e.pointerId);
+      const p = this.toPagePt(svg, e.clientX, e.clientY);
+      if (this.tool === "select") {
+        const hit = this.hitTest(page, p);
+        this.selected = hit;
+        if (hit) moving = { el: hit, dx: p.x - hit.x, dy: p.y - hit.y };
+        this.redraw(page);
+        return;
+      }
+      if (this.tool === "text") {
+        this.placeText(page, p);
+        return;
+      }
+      if (this.tool === "image") {
+        void this.placeImage(page, p);
+        return;
+      }
+      origin = p;
+      draft = {
+        id: this.idSeq++,
+        page,
+        kind: this.tool,
+        x: p.x,
+        y: p.y,
+        w: 0,
+        h: 0,
+        s: { ...this.style },
+        ...this.tool === "ink" ? { pts: [p.x, p.y] } : {}
+      };
+      this.els.push(draft);
+    });
+    svg.addEventListener("pointermove", (e) => {
+      const p = this.toPagePt(svg, e.clientX, e.clientY);
+      if (moving) {
+        moving.el.x = p.x - moving.dx;
+        moving.el.y = p.y - moving.dy;
+        this.redraw(page);
+        return;
+      }
+      if (!draft || !origin) return;
+      if (draft.kind === "ink") {
+        draft.pts.push(p.x, p.y);
+      } else {
+        draft.x = origin.x;
+        draft.y = origin.y;
+        draft.w = p.x - origin.x;
+        draft.h = p.y - origin.y;
+      }
+      this.redraw(page);
+    });
+    const end = () => {
+      if (draft && !this.isMeaningful(draft)) {
+        this.els = this.els.filter((x) => x !== draft);
+        this.redraw(page);
+      } else if (draft) {
+        this.selected = draft;
+        this.redraw(page);
+      }
+      draft = null;
+      origin = null;
+      moving = null;
+    };
+    svg.addEventListener("pointerup", end);
+    svg.addEventListener("pointercancel", end);
+  }
+  isMeaningful(e) {
+    if (e.kind === "ink") return (e.pts?.length ?? 0) >= 4;
+    return Math.abs(e.w) > 1 || Math.abs(e.h) > 1;
+  }
+  hitTest(page, p) {
+    for (let i = this.els.length - 1; i >= 0; i--) {
+      const e = this.els[i];
+      if (e.page !== page) continue;
+      const nx = Math.min(e.x, e.x + e.w);
+      const ny = Math.min(e.y, e.y + e.h);
+      const nw = Math.abs(e.w) || 12;
+      const nh = Math.abs(e.h) || 12;
+      if (p.x >= nx - 4 && p.x <= nx + nw + 4 && p.y >= ny - 4 && p.y <= ny + nh + 4) return e;
+    }
+    return null;
+  }
+  placeText(page, p) {
+    const text = this.root.ownerDocument.defaultView?.prompt("Text:") ?? "";
+    if (!text.trim()) return;
+    this.els.push({ id: this.idSeq++, page, kind: "text", x: p.x, y: p.y + this.style.fontSize, w: 0, h: 0, text, s: { ...this.style } });
+    this.redraw(page);
+  }
+  async placeImage(page, p) {
+    const d = this.root.ownerDocument;
+    const input = d.createElement("input");
+    input.type = "file";
+    input.accept = "image/png,image/jpeg";
+    input.addEventListener("change", async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const data = new Uint8Array(await file.arrayBuffer());
+      const url = URL.createObjectURL(file);
+      this.els.push({ id: this.idSeq++, page, kind: "image", x: p.x, y: p.y, w: 120, h: 120, data, imgUrl: url, s: { ...this.style } });
+      this.redraw(page);
+    });
+    input.click();
+  }
+  // ── overlay drawing ──────────────────────────────────────────────────────────
+  redrawAll() {
+    for (let p = 1; p <= this.count; p++) this.redraw(p);
+  }
+  redraw(page) {
+    const svg = this.overlays[page];
+    if (!svg) return;
+    svg.replaceChildren();
+    const d = this.root.ownerDocument;
+    for (const e of this.els) {
+      if (e.page !== page) continue;
+      const node = this.elNode(d, e);
+      if (node) svg.appendChild(node);
+    }
+    if (this.selected && this.selected.page === page) {
+      const nx = Math.min(this.selected.x, this.selected.x + this.selected.w);
+      const ny = Math.min(this.selected.y, this.selected.y + this.selected.h);
+      const sel = d.createElementNS(SVG_NS, "rect");
+      sel.setAttribute("x", String(nx - 3));
+      sel.setAttribute("y", String(ny - 3));
+      sel.setAttribute("width", String((Math.abs(this.selected.w) || 12) + 6));
+      sel.setAttribute("height", String((Math.abs(this.selected.h) || 12) + 6));
+      sel.setAttribute("fill", "none");
+      sel.setAttribute("stroke", "#3b82f6");
+      sel.setAttribute("stroke-dasharray", "4 3");
+      sel.setAttribute("stroke-width", "1");
+      svg.appendChild(sel);
+    }
+  }
+  elNode(d, e) {
+    const stroke = hex(e.s.color);
+    const fill = e.s.fill === null ? "none" : hex(e.s.fill);
+    const nx = Math.min(e.x, e.x + e.w);
+    const ny = Math.min(e.y, e.y + e.h);
+    const nw = Math.abs(e.w);
+    const nh = Math.abs(e.h);
+    switch (e.kind) {
+      case "rect":
+      case "highlight":
+      case "redact": {
+        const r = d.createElementNS(SVG_NS, "rect");
+        r.setAttribute("x", String(nx));
+        r.setAttribute("y", String(ny));
+        r.setAttribute("width", String(nw));
+        r.setAttribute("height", String(nh));
+        if (e.kind === "rect") {
+          r.setAttribute("fill", fill);
+          r.setAttribute("stroke", stroke);
+          r.setAttribute("stroke-width", String(e.s.lineWidth));
+          r.setAttribute("opacity", String(e.s.opacity));
+        } else if (e.kind === "highlight") {
+          r.setAttribute("fill", stroke);
+          r.setAttribute("opacity", "0.4");
+        } else {
+          r.setAttribute("fill", "#000");
+          r.setAttribute("stroke", "#f00");
+          r.setAttribute("stroke-dasharray", "3 2");
+          r.setAttribute("stroke-width", "0.5");
+        }
+        return r;
+      }
+      case "ellipse": {
+        const el = d.createElementNS(SVG_NS, "ellipse");
+        el.setAttribute("cx", String(nx + nw / 2));
+        el.setAttribute("cy", String(ny + nh / 2));
+        el.setAttribute("rx", String(nw / 2));
+        el.setAttribute("ry", String(nh / 2));
+        el.setAttribute("fill", fill);
+        el.setAttribute("stroke", stroke);
+        el.setAttribute("stroke-width", String(e.s.lineWidth));
+        el.setAttribute("opacity", String(e.s.opacity));
+        return el;
+      }
+      case "line": {
+        const ln = d.createElementNS(SVG_NS, "line");
+        ln.setAttribute("x1", String(e.x));
+        ln.setAttribute("y1", String(e.y));
+        ln.setAttribute("x2", String(e.x + e.w));
+        ln.setAttribute("y2", String(e.y + e.h));
+        ln.setAttribute("stroke", stroke);
+        ln.setAttribute("stroke-width", String(e.s.lineWidth));
+        return ln;
+      }
+      case "ink": {
+        const pl = d.createElementNS(SVG_NS, "polyline");
+        const pts = e.pts ?? [];
+        let s = "";
+        for (let i = 0; i + 1 < pts.length; i += 2) s += `${pts[i]},${pts[i + 1]} `;
+        pl.setAttribute("points", s.trim());
+        pl.setAttribute("fill", "none");
+        pl.setAttribute("stroke", stroke);
+        pl.setAttribute("stroke-width", String(e.s.lineWidth));
+        pl.setAttribute("stroke-linejoin", "round");
+        pl.setAttribute("stroke-linecap", "round");
+        return pl;
+      }
+      case "text": {
+        const t = d.createElementNS(SVG_NS, "text");
+        t.setAttribute("x", String(e.x));
+        t.setAttribute("y", String(e.y));
+        t.setAttribute("font-size", String(e.s.fontSize));
+        t.setAttribute("fill", stroke);
+        t.setAttribute("font-family", "sans-serif");
+        t.textContent = e.text ?? "";
+        return t;
+      }
+      case "image": {
+        const im = d.createElementNS(SVG_NS, "image");
+        im.setAttribute("x", String(nx));
+        im.setAttribute("y", String(ny));
+        im.setAttribute("width", String(nw || 120));
+        im.setAttribute("height", String(nh || 120));
+        if (e.imgUrl) im.setAttribute("href", e.imgUrl);
+        return im;
+      }
+      default:
+        return null;
+    }
+  }
+  // ── tool palette ─────────────────────────────────────────────────────────────
+  buildPalette() {
+    const d = this.root.ownerDocument;
+    const bar = d.createElement("div");
+    bar.className = "gpe-bar";
+    bar.style.cssText = "display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 10px;background:#3a3f42;border-bottom:1px solid #000;color:#eee;font:13px system-ui";
+    const tools = [
+      ["select", "\u25B8"],
+      ["text", "T"],
+      ["rect", "\u25AD"],
+      ["ellipse", "\u25EF"],
+      ["line", "\u2571"],
+      ["ink", "\u270E"],
+      ["image", "\u{1F5BC}"],
+      ["highlight", "\u25A5"],
+      ["redact", "\u2588"]
+    ];
+    for (const [t, label] of tools) {
+      const b = d.createElement("button");
+      b.textContent = label;
+      b.title = t;
+      b.dataset.tool = t;
+      b.style.cssText = "background:#4a4f52;color:#eee;border:0;border-radius:4px;padding:4px 8px;cursor:pointer";
+      b.addEventListener("click", () => this.setTool(t));
+      bar.appendChild(b);
+    }
+    const color = d.createElement("input");
+    color.type = "color";
+    color.value = hex(this.style.color);
+    color.title = "Colour";
+    color.addEventListener("input", () => this.setStyle({ color: parseInt(color.value.slice(1), 16) }));
+    bar.appendChild(color);
+    const mg = d.createElement("span");
+    mg.style.cssText = "display:flex;align-items:center;gap:3px;margin-left:8px";
+    const mtog = d.createElement("input");
+    mtog.type = "checkbox";
+    mtog.checked = this.showGuides;
+    mtog.title = "Show rulers & margins";
+    mtog.addEventListener("change", () => this.showRulers(mtog.checked));
+    const mlbl = d.createElement("span");
+    mlbl.textContent = "Marges mm";
+    mlbl.style.color = "#bbb";
+    mg.append(mtog, mlbl);
+    for (const side of ["top", "right", "bottom", "left"]) {
+      const inp = d.createElement("input");
+      inp.type = "number";
+      inp.min = "0";
+      inp.value = String(Math.round(this.margins[side] / PT_PER_MM));
+      inp.title = side;
+      inp.style.cssText = "width:44px;background:#222;color:#eee;border:1px solid #000;border-radius:4px;padding:3px;text-align:center";
+      inp.addEventListener("change", () => this.setMargins({ [side]: Number(inp.value) || 0 }, "mm"));
+      this.marginInputs[side] = inp;
+      mg.appendChild(inp);
+    }
+    bar.appendChild(mg);
+    const sp = d.createElement("span");
+    sp.style.flex = "1";
+    bar.appendChild(sp);
+    const apply = d.createElement("button");
+    apply.textContent = "Apply";
+    apply.style.cssText = "background:#2563eb;color:#fff;border:0;border-radius:4px;padding:4px 12px;cursor:pointer";
+    apply.addEventListener("click", () => this.applyEdits());
+    bar.appendChild(apply);
+    const del = d.createElement("button");
+    del.textContent = "Delete";
+    del.style.cssText = "background:#4a4f52;color:#eee;border:0;border-radius:4px;padding:4px 10px;cursor:pointer";
+    del.addEventListener("click", () => this.removeSelected());
+    bar.appendChild(del);
+    const style = d.createElement("style");
+    style.textContent = ".gpe-bar button.gpe-on{outline:2px solid #3b82f6}";
+    d.head.appendChild(style);
+    this.root.insertBefore(bar, this.root.children[1] ?? null);
+    this.palette = bar;
+    this.setTool("select");
+  }
+};
+export {
+  GigaPdfEditor
+};
+//# sourceMappingURL=editor.js.map