pretext-pdfjs 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pretext-pdfjs",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Pretext-native text layer for PDF.js — zero DOM reflows, per-block reflow with image preservation, pinch-to-zoom text",
   "type": "module",
   "main": "./src/index.js",

package/src/reflow.js

@@ -25,7 +25,16 @@ function drawJustifiedLine(ctx, text, x, y, availWidth) {
   }
   let totalWordWidth = 0;
   for (const w of words) totalWordWidth += ctx.measureText(w).width;
+
+  const normalSpaceWidth = ctx.measureText(" ").width;
   const extraSpace = (availWidth - totalWordWidth) / (words.length - 1);
+
+  // Fall back to left-aligned if gaps would be too large
+  if (extraSpace > normalSpaceWidth * 3 || totalWordWidth < availWidth * 0.7) {
+    ctx.fillText(text, x, y);
+    return;
+  }
+
   let xPos = x;
   for (const w of words) {
     ctx.fillText(w, xPos, y);
@@ -33,6 +42,70 @@ function drawJustifiedLine(ctx, text, x, y, availWidth) {
   }
 }
 
+/**
+ * Draw a line of text with per-span coloring (for inline colored text like links).
+ */
+function drawColoredLine(ctx, text, charOffset, spans, defaultColor, x, y) {
+  const lineStart = charOffset;
+  const lineEnd = charOffset + text.length;
+  let xPos = x;
+  let pos = 0;
+
+  for (const span of spans) {
+    if (span.charEnd <= lineStart || span.charStart >= lineEnd) continue;
+    const overlapStart = Math.max(span.charStart - lineStart, 0);
+    const overlapEnd = Math.min(span.charEnd - lineStart, text.length);
+
+    if (overlapStart > pos) {
+      const gapText = text.slice(pos, overlapStart);
+      ctx.fillStyle = defaultColor;
+      ctx.fillText(gapText, xPos, y);
+      xPos += ctx.measureText(gapText).width;
+    }
+
+    const spanText = text.slice(overlapStart, overlapEnd);
+    ctx.fillStyle = span.color;
+    ctx.fillText(spanText, xPos, y);
+    xPos += ctx.measureText(spanText).width;
+    pos = overlapEnd;
+  }
+
+  if (pos < text.length) {
+    ctx.fillStyle = defaultColor;
+    ctx.fillText(text.slice(pos), xPos, y);
+  }
+}
+
+/**
+ * Draw a line of justified text with per-span coloring.
+ */
+function drawColoredJustifiedLine(ctx, text, charOffset, spans, defaultColor, x, y, availWidth) {
+  const words = text.split(" ");
+  if (words.length <= 1) {
+    drawColoredLine(ctx, text, charOffset, spans, defaultColor, x, y);
+    return;
+  }
+  let totalWordWidth = 0;
+  for (const w of words) totalWordWidth += ctx.measureText(w).width;
+  const normalSpaceWidth = ctx.measureText(" ").width;
+  const extraSpace = (availWidth - totalWordWidth) / (words.length - 1);
+
+  if (extraSpace > normalSpaceWidth * 3 || totalWordWidth < availWidth * 0.7) {
+    drawColoredLine(ctx, text, charOffset, spans, defaultColor, x, y);
+    return;
+  }
+
+  // Draw word by word with per-span coloring and justified spacing
+  let xPos = x;
+  let charPos = 0;
+  for (let wi = 0; wi < words.length; wi++) {
+    const word = words[wi];
+    drawColoredLine(ctx, word, charOffset + charPos, spans, defaultColor, xPos, y);
+    xPos += ctx.measureText(word).width + extraSpace;
+    charPos += word.length + 1; // +1 for space
+  }
+}
+
 function bboxOverlap(a, b) {
   const x1 = Math.max(a.x, b.x);
   const y1 = Math.max(a.y, b.y);
@@ -80,13 +153,70 @@ async function extractFontMetadata(page, opList, OPS) {
   return fontMap;
 }
 
+// ─── Text color extraction ───────────────────────────────────────────────
+
+/**
+ * Extract fill colors from the operator list, indexed by text-drawing op.
+ * The evaluator normalizes all fill-color commands to setFillRGBColor with
+ * a hex string, so that's the primary path. Returns an array parallel to
+ * the text items from getTextContent().
+ */
+function extractTextColors(opList, OPS) {
+  const textColors = [];
+  let currentColor = "#000000";
+
+  const textDrawOps = new Set([
+    OPS.showText,
+    OPS.showSpacedText,
+    OPS.nextLineShowText,
+    OPS.nextLineSetSpacingShowText,
+  ]);
+
+  for (let i = 0; i < opList.fnArray.length; i++) {
+    const fn = opList.fnArray[i];
+
+    if (fn === OPS.setFillRGBColor) {
+      currentColor = opList.argsArray[i][0];
+    } else if (fn === OPS.setFillTransparent) {
+      currentColor = "transparent";
+    } else if (
+      fn === OPS.setFillGray ||
+      fn === OPS.setFillColor ||
+      fn === OPS.setFillCMYKColor ||
+      fn === OPS.setFillColorN
+    ) {
+      const args = opList.argsArray[i];
+      if (args?.[0] && typeof args[0] === "string" && args[0].startsWith("#")) {
+        currentColor = args[0];
+      }
+    }
+
+    if (textDrawOps.has(fn)) {
+      textColors.push(currentColor);
+    }
+  }
+
+  return textColors;
+}
+
 // ─── Page analysis ────────────────────────────────────────────────────────
 
 /**
  * Group adjacent text items into text blocks by proximity.
  * Also extracts font metadata: average size, italic, bold.
  */
-function groupTextBlocks(textItems, pageHeight, styles, fontMap) {
+function groupTextBlocks(textItems, pageHeight, styles, fontMap, textColors) {
+  // Attach colors to text items before filtering (textColors is parallel to
+  // the full items array from getTextContent, including empty items)
+  if (textColors) {
+    let colorIdx = 0;
+    for (const item of textItems) {
+      if (item.str !== undefined) {
+        item._color = textColors[colorIdx++] || "#000000";
+      }
+    }
+  }
+
   const sorted = [...textItems].filter(i => i.str?.trim()).sort((a, b) => {
     const ay = pageHeight - a.transform[5];
     const by = pageHeight - b.transform[5];
@@ -226,6 +356,47 @@ function groupTextBlocks(textItems, pageHeight, styles, fontMap) {
 
     // Store the font metadata for the dominant font in this block
     block.fontMeta = fontMap?.get(block.items[0]?.fontName) || null;
+
+    // Compute dominant fill color for the block
+    const colorFreq = {};
+    for (const item of block.items) {
+      const c = item._color || "#000000";
+      if (c !== "transparent") {
+        colorFreq[c] = (colorFreq[c] || 0) + 1;
+      }
+    }
+    let dominantColor = "#000000";
+    let maxColorFreq = 0;
+    for (const [c, freq] of Object.entries(colorFreq)) {
+      if (freq > maxColorFreq) {
+        maxColorFreq = freq;
+        dominantColor = c;
+      }
+    }
+    block.color = dominantColor;
+
+    // Build color spans — contiguous runs of items sharing the same color
+    // Character indices map to the concatenated text produced by blockToText
+    block.colorSpans = [];
+    if (block.items.length > 0) {
+      let spanColor = block.items[0]._color || "#000000";
+      let spanCharStart = 0;
+      let charCount = 0;
+
+      for (let i = 0; i < block.items.length; i++) {
+        const c = block.items[i]._color || "#000000";
+        const itemLen = (block.items[i].str || "").length;
+        if (c !== spanColor) {
+          block.colorSpans.push({ charStart: spanCharStart, charEnd: charCount, color: spanColor });
+          spanCharStart = charCount;
+          spanColor = c;
+        }
+        charCount += itemLen;
+        // Account for spaces inserted between items by blockToText
+        if (i < block.items.length - 1) charCount++;
+      }
+      block.colorSpans.push({ charStart: spanCharStart, charEnd: charCount, color: spanColor });
+    }
   }
 
   return blocks;
@@ -389,26 +560,40 @@ function detectGraphicRegionsFromRender(offCanvas, textBlocks, renderScale) {
 function blockToText(block, pageHeight) {
   let result = "";
   let lastY = null;
+  let lastX = null;
+  let lastW = 0;
   let lastFontSize = 12;
 
   for (const item of block.items) {
     if (!item.str) continue;
+    const currentX = item.transform[4];
     const currentY = pageHeight - item.transform[5];
     const fontHeight = Math.hypot(item.transform[2], item.transform[3]);
     if (fontHeight > 0) lastFontSize = fontHeight;
 
     if (lastY !== null) {
-      const gap = Math.abs(currentY - lastY);
+      const vGap = Math.abs(currentY - lastY);
       const isShortItem = (item.str || "").trim().length <= 2;
-      if (gap > lastFontSize * 1.8 && !isShortItem) {
+      if (vGap > lastFontSize * 1.8 && !isShortItem) {
         result += "\n\n";
-      } else if (gap > lastFontSize * 0.3) {
+      } else if (vGap > lastFontSize * 0.3) {
+        // Different line — insert space
         if (!result.endsWith(" ") && !result.endsWith("\n")) {
           result += " ";
         }
+      } else if (lastX !== null) {
+        // Same line — check horizontal gap between items
+        const hGap = currentX - (lastX + lastW);
+        if (hGap > lastFontSize * 0.15) {
+          if (!result.endsWith(" ") && !result.endsWith("\n")) {
+            result += " ";
+          }
+        }
       }
     }
     lastY = currentY;
+    lastX = currentX;
+    lastW = item.width || 0;
     result += item.str;
   }
   return result.trim();
@@ -560,6 +745,28 @@ function buildRegionMap(textBlocks, graphicRegions, pageHeight) {
     });
   }
 
+  // ── Compute inter-block vertical gaps from original PDF layout ──
+  for (let i = 1; i < regions.length; i++) {
+    const prev = regions[i - 1];
+    const curr = regions[i];
+    const prevBottom = prev.bbox.y + prev.bbox.h;
+    const currTop = curr.bbox.y;
+    curr.gapBefore = Math.max(0, currTop - prevBottom);
+  }
+  if (regions.length > 0) {
+    regions[0].gapBefore = regions[0].bbox.y;
+  }
+
+  // Normalize gaps relative to average body line height
+  const bodyBlocks = regions.filter(r =>
+    r.type === "text" && r.block?.fontScale && Math.abs(r.block.fontScale - 1) < 0.15);
+  const avgBodyLH = bodyBlocks.length > 0
+    ? bodyBlocks.reduce((s, r) => s + r.block.avgFontSize * 1.6, 0) / bodyBlocks.length
+    : 12 * 1.6;
+  for (const region of regions) {
+    region.gapRatio = (region.gapBefore || 0) / avgBodyLH;
+  }
+
   return regions;
 }
 
@@ -658,8 +865,11 @@ async function analyzePage(page, OPS) {
   // Extract real font metadata from commonObjs (bold, italic, weight, loadedName)
   const fontMap = await extractFontMetadata(page, opList, OPS);
 
-  // Now group text blocks with real font data
-  const textBlocks = groupTextBlocks(textContent.items, pageHeight, textContent.styles, fontMap);
+  // Extract text colors from operator list (parallel to text items)
+  const textColors = extractTextColors(opList, OPS);
+
+  // Now group text blocks with real font data and colors
+  const textBlocks = groupTextBlocks(textContent.items, pageHeight, textContent.styles, fontMap, textColors);
 
   // Compute body font size (most common size = body text)
   const allSizes = textBlocks.map(b => Math.round(b.avgFontSize * 10) / 10);
@@ -717,6 +927,7 @@ async function analyzePage(page, OPS) {
     graphicRegions,
     offCanvas,
     fontMap,
+    bodyFontSize,
   };
 }
 
@@ -784,6 +995,8 @@ function reflowAndComposite(analysis, opts) {
         fontWeight: weight,
         fontFamily: blockFamily,
         align: block.align || "left",
+        color: block.color,
+        colorSpans: block.colorSpans || [],
         region,
       });
     } else {
@@ -815,12 +1028,13 @@ function reflowAndComposite(analysis, opts) {
     }
   }
 
-  // Total height
+  // Total height — use original PDF gap ratios between regions
   const baseLH = fontSize * lineHeight;
   let totalHeight = padding;
   for (const r of reflowedRegions) {
     totalHeight += r.height;
-    totalHeight += baseLH * 0.4;
+    const gapRatio = r.region?.gapRatio ?? 0.4;
+    totalHeight += baseLH * Math.max(0.2, Math.min(gapRatio, 2.0));
   }
   totalHeight += padding;
 
@@ -853,6 +1067,7 @@ export function createReflowRenderer(container, options = {}) {
   let pdfjs = null;
   let pdfDoc = null;
   let currentPage = 0;
+  const userSetFontSize = options.fontSize != null;
   let fontSize = options.fontSize ?? 16;
   let destroyed = false;
 
@@ -957,11 +1172,15 @@ export function createReflowRenderer(container, options = {}) {
         const justified = r.align === "justify";
         const availW = W - padding * 2;
 
+        const hasMultipleColors = r.colorSpans && r.colorSpans.length > 1 &&
+          !r.colorSpans.every(s => s.color === r.colorSpans[0].color);
+
         if (!enableMorph) {
-          ctx.fillStyle = textColor;
+          ctx.fillStyle = r.color || textColor;
           ctx.font = `${style} ${weight} ${fs * d}px ${rFamily}`;
         }
 
+        let lineCharOffset = 0;
         for (let lineIdx = 0; lineIdx < r.lines.length; lineIdx++) {
           const line = r.lines[lineIdx];
           const screenY = cursorY - scrollY;
@@ -976,10 +1195,24 @@ export function createReflowRenderer(container, options = {}) {
               const ease = 1 - (1 - t) ** 3;
               const morphedFS = fs * (1 - ease * (1 - edgeFontRatio));
               const opacity = 1.0 + (0.2 - 1.0) * ease;
-              const c = Math.round(37 - (37 - 160) * ease);
+              // Blend the block's actual color toward gray at edges
+              const blockColor = r.color || textColor;
+              let morphColor;
+              if (blockColor.startsWith("#") && blockColor.length === 7) {
+                const br = parseInt(blockColor.slice(1, 3), 16);
+                const bg_ = parseInt(blockColor.slice(3, 5), 16);
+                const bb = parseInt(blockColor.slice(5, 7), 16);
+                const dimR = Math.round(br + (160 - br) * ease);
+                const dimG = Math.round(bg_ + (160 - bg_) * ease);
+                const dimB = Math.round(bb + (160 - bb) * ease);
+                morphColor = `rgb(${dimR},${dimG},${dimB})`;
+              } else {
+                const c = Math.round(37 - (37 - 160) * ease);
+                morphColor = `rgb(${c},${c - 2},${c - 3})`;
+              }
               ctx.save();
               ctx.globalAlpha = opacity;
-              ctx.fillStyle = `rgb(${c},${c - 2},${c - 3})`;
+              ctx.fillStyle = morphColor;
               ctx.font = `${style} ${weight} ${morphedFS * d}px ${rFamily}`;
               if (centered) {
                 ctx.textAlign = "center";
@@ -991,6 +1224,21 @@ export function createReflowRenderer(container, options = {}) {
                 ctx.fillText(line.text, padding * d, screenY * d);
               }
               ctx.restore();
+            } else if (hasMultipleColors) {
+              // Per-span coloring for inline colored text (links, emphasis)
+              if (shouldJustify) {
+                drawColoredJustifiedLine(ctx, line.text, lineCharOffset, r.colorSpans,
+                  r.color || textColor, padding * d, screenY * d, availW * d);
+              } else if (centered) {
+                // Measure full line to center it, then draw colored from offset
+                const lineW = ctx.measureText(line.text).width;
+                const startX = (W * d - lineW) / 2;
+                drawColoredLine(ctx, line.text, lineCharOffset, r.colorSpans,
+                  r.color || textColor, startX, screenY * d);
+              } else {
+                drawColoredLine(ctx, line.text, lineCharOffset, r.colorSpans,
+                  r.color || textColor, padding * d, screenY * d);
+              }
             } else {
               if (centered) {
                 ctx.textAlign = "center";
@@ -1003,6 +1251,7 @@ export function createReflowRenderer(container, options = {}) {
               }
             }
           }
+          lineCharOffset += line.text.length;
           cursorY += lh;
         }
       } else if (r.type === "graphic" && r.bitmap) {
@@ -1025,7 +1274,8 @@ export function createReflowRenderer(container, options = {}) {
         }
         cursorY += r.drawH;
       }
-      cursorY += baseLH * 0.4;
+      const gapRatio = r.region?.gapRatio ?? 0.4;
+      cursorY += baseLH * Math.max(0.2, Math.min(gapRatio, 2.0));
     }
   }
 
@@ -1161,6 +1411,12 @@ export function createReflowRenderer(container, options = {}) {
 
       currentAnalysis = analysisCache.get(pageNum);
       currentPage = pageNum;
+
+      // Auto-match PDF body font size when user hasn't set an explicit fontSize
+      if (!userSetFontSize && currentAnalysis.bodyFontSize) {
+        fontSize = clamp(Math.round(currentAnalysis.bodyFontSize), minFont, maxFont);
+      }
+
       scrollY = 0;
       scrollVelocity = 0;
       reflow();
@@ -1172,6 +1428,7 @@ export function createReflowRenderer(container, options = {}) {
         graphicRegions: currentAnalysis.graphicRegions,
         pageWidth: currentAnalysis.pageWidth,
         pageHeight: currentAnalysis.pageHeight,
+        bodyFontSize: currentAnalysis.bodyFontSize,
       });
     },