fix export

Author: jogibear9988

src/content/export-size.js

@@ -0,0 +1,104 @@
+function getQuadPoints(rawQuad) {
+  if (!rawQuad) return [];
+  if (Array.isArray(rawQuad)) return rawQuad;
+  return [rawQuad.p1, rawQuad.p2, rawQuad.p3, rawQuad.p4].filter(Boolean);
+}
+
+function getIrNodePoints(node) {
+  if (node.type === 'polygon' || node.type === 'polyline') {
+    return node.points ?? [];
+  }
+
+  if (node.type === 'text' || node.type === 'image') {
+    return node.quad ?? [];
+  }
+
+  return [];
+}
+
+function getRootQuads(root) {
+  if (!('getBoxQuads' in root) || typeof root.getBoxQuads !== 'function') {
+    return [];
+  }
+
+  try {
+    return root.getBoxQuads({ box: 'border' });
+  } catch {
+    return [];
+  }
+}
+
+export function getViewportSizeFromMetrics({
+  quads = [],
+  rect = { width: 0, height: 0 },
+  scrollWidth = 0,
+  scrollHeight = 0,
+  clientWidth = 0,
+  clientHeight = 0,
+}) {
+  if (quads.length > 0) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    for (const quad of quads) {
+      for (const point of getQuadPoints(quad)) {
+        if (point.x < minX) minX = point.x;
+        if (point.y < minY) minY = point.y;
+        if (point.x > maxX) maxX = point.x;
+        if (point.y > maxY) maxY = point.y;
+      }
+    }
+
+    if (Number.isFinite(minX) && Number.isFinite(minY) && Number.isFinite(maxX) && Number.isFinite(maxY)) {
+      return {
+        width: Math.ceil(Math.max(maxX - minX, scrollWidth, clientWidth)) || 1,
+        height: Math.ceil(Math.max(maxY - minY, scrollHeight, clientHeight)) || 1,
+      };
+    }
+  }
+
+  return {
+    width: Math.ceil(Math.max(rect.width ?? 0, scrollWidth, clientWidth)) || 1,
+    height: Math.ceil(Math.max(rect.height ?? 0, scrollHeight, clientHeight)) || 1,
+  };
+}
+
+export function getIrExtent(irNodes) {
+  let maxX = 0;
+  let maxY = 0;
+
+  for (const node of irNodes ?? []) {
+    for (const point of getIrNodePoints(node)) {
+      if (point.x > maxX) maxX = point.x;
+      if (point.y > maxY) maxY = point.y;
+    }
+  }
+
+  return { maxX, maxY };
+}
+
+export function applyIrExtentFallback(viewport, irNodes) {
+  const nextViewport = { ...viewport };
+  const { maxX, maxY } = getIrExtent(irNodes);
+
+  if (nextViewport.width <= 1 && maxX > 0) nextViewport.width = Math.ceil(maxX);
+  if (nextViewport.height <= 1 && maxY > 0) nextViewport.height = Math.ceil(maxY);
+
+  return nextViewport;
+}
+
+export function calculateExportSize(root, irNodes) {
+  return applyIrExtentFallback(
+    getViewportSizeFromMetrics({
+      quads: getRootQuads(root),
+      rect: root.getBoundingClientRect(),
+      scrollWidth: root.scrollWidth,
+      scrollHeight: root.scrollHeight,
+      clientWidth: root.clientWidth,
+      clientHeight: root.clientHeight,
+    }),
+    irNodes,
+  );
+}

src/content/run-export.js

@@ -6,6 +6,7 @@
  * data-URL, and sends it to the background service worker which
  * triggers chrome.downloads.download({ saveAs: true }).
  */
+import { calculateExportSize } from './export-size.js';
 import { extensionApi } from '../shared/extension-api.js';
 
 (async () => {
@@ -19,9 +20,6 @@ import { extensionApi } from '../shared/extension-api.js';
     const { extractIR, renderIR, writers } = lib;
 
     const root = document.documentElement;
-    const width = root.scrollWidth;
-    const height = root.scrollHeight;
-    const maxY = height;
 
     const BITMAP_FORMATS = ['png', 'jpeg', 'webp'];
     const isBitmap = BITMAP_FORMATS.includes(format);
@@ -38,6 +36,8 @@ import { extensionApi } from '../shared/extension-api.js';
     }
 
     let ir = await extract(true);
+    const { width, height } = calculateExportSize(root, ir);
+    const maxY = height;
 
     // ── Render to chosen format ───────────────────────────
     let data;   // string | Uint8Array

tests/export-size.test.js

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import {
+  applyIrExtentFallback,
+  getViewportSizeFromMetrics,
+} from '../src/content/export-size.js';
+
+describe('getViewportSizeFromMetrics', () => {
+  it('uses quad bounds when they exceed the root metrics', () => {
+    const viewport = getViewportSizeFromMetrics({
+      quads: [{
+        p1: { x: -20, y: 10 },
+        p2: { x: 100, y: 10 },
+        p3: { x: 100, y: 140 },
+        p4: { x: -20, y: 140 },
+      }],
+      rect: { width: 80, height: 90 },
+      scrollWidth: 60,
+      scrollHeight: 70,
+      clientWidth: 50,
+      clientHeight: 40,
+    });
+
+    expect(viewport).toEqual({ width: 120, height: 130 });
+  });
+
+  it('falls back to rect and scrolling metrics when no quads are available', () => {
+    const viewport = getViewportSizeFromMetrics({
+      quads: [],
+      rect: { width: 220, height: 120 },
+      scrollWidth: 320,
+      scrollHeight: 240,
+      clientWidth: 160,
+      clientHeight: 180,
+    });
+
+    expect(viewport).toEqual({ width: 320, height: 240 });
+  });
+});
+
+describe('applyIrExtentFallback', () => {
+  it('uses IR bounds when the root viewport is unexpectedly empty', () => {
+    const viewport = applyIrExtentFallback(
+      { width: 1, height: 1 },
+      [
+        {
+          type: 'polygon',
+          points: [
+            { x: 0, y: 0 },
+            { x: 150.2, y: 0 },
+            { x: 150.2, y: 90.1 },
+          ],
+        },
+        {
+          type: 'text',
+          quad: [
+            { x: 0, y: 0 },
+            { x: 25, y: 0 },
+            { x: 200.8, y: 101.3 },
+            { x: 5, y: 101.3 },
+          ],
+        },
+      ],
+    );
+
+    expect(viewport).toEqual({ width: 201, height: 102 });
+  });
+});