pretext-pdfjs 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pretext-pdfjs",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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);
@@ -83,25 +156,26 @@ async function extractFontMetadata(page, opList, OPS) {
 // ─── 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().
+ * Extract fill colors per beginText/endText block pair.
+ * Returns an array of color strings, one per text block.
+ *
+ * The previous approach pushed one color per text-drawing operator (showText,
+ * showSpacedText, etc.) and tried to index into text items 1:1. That mapping
+ * is broken because a single showSpacedText operator can produce multiple text
+ * items via buildTextContentItem(). Instead, we track color at text-block
+ * boundaries — all text items within the same beginText/endText pair share
+ * the same color context.
  */
-function extractTextColors(opList, OPS) {
-  const textColors = [];
+function extractTextBlockColors(opList, OPS) {
+  const blockColors = []; // one entry per beginText/endText pair
   let currentColor = "#000000";
-
-  const textDrawOps = new Set([
-    OPS.showText,
-    OPS.showSpacedText,
-    OPS.nextLineShowText,
-    OPS.nextLineSetSpacingShowText,
-  ]);
+  let blockColor = "#000000";
+  let inTextBlock = false;
 
   for (let i = 0; i < opList.fnArray.length; i++) {
     const fn = opList.fnArray[i];
 
+    // Track color changes
     if (fn === OPS.setFillRGBColor) {
       currentColor = opList.argsArray[i][0];
     } else if (fn === OPS.setFillTransparent) {
@@ -118,12 +192,30 @@ function extractTextColors(opList, OPS) {
       }
     }
 
-    if (textDrawOps.has(fn)) {
-      textColors.push(currentColor);
+    if (fn === OPS.beginText) {
+      inTextBlock = true;
+      blockColor = currentColor; // color at start of block
+    }
+
+    // If color changes within a text block, update (last color wins)
+    if (inTextBlock && (
+      fn === OPS.setFillRGBColor ||
+      fn === OPS.setFillTransparent ||
+      fn === OPS.setFillGray ||
+      fn === OPS.setFillColor ||
+      fn === OPS.setFillCMYKColor ||
+      fn === OPS.setFillColorN
+    )) {
+      blockColor = currentColor;
+    }
+
+    if (fn === OPS.endText) {
+      blockColors.push(blockColor);
+      inTextBlock = false;
     }
   }
 
-  return textColors;
+  return blockColors;
 }
 
 // ─── Page analysis ────────────────────────────────────────────────────────
@@ -132,15 +224,43 @@ function extractTextColors(opList, OPS) {
  * Group adjacent text items into text blocks by proximity.
  * Also extracts font metadata: average size, italic, bold.
  */
-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;
+function groupTextBlocks(textItems, pageHeight, styles, fontMap, blockColors) {
+  // Map text items to beginText/endText blocks by detecting position
+  // discontinuities. Items within the same text block are contiguous and
+  // share the same color. When there's a large Y-position jump or font
+  // change, we advance to the next block's color.
+  if (blockColors && blockColors.length > 0) {
+    let blockIdx = 0;
+    let prevY = null;
+    let prevFontName = null;
+    let itemsInCurrentBlock = 0;
+
     for (const item of textItems) {
-      if (item.str !== undefined) {
-        item._color = textColors[colorIdx++] || "#000000";
+      if (item.str === undefined) continue; // skip marked content
+
+      const y = item.transform ? item.transform[5] : null;
+      const fontHeight = item.transform
+        ? Math.hypot(item.transform[2], item.transform[3])
+        : 12;
+
+      // Detect text block boundary by position discontinuity
+      if (prevY !== null && y !== null && itemsInCurrentBlock > 0) {
+        const yDiff = Math.abs(y - prevY);
+        const fontChanged = item.fontName !== prevFontName;
+
+        if (
+          (yDiff > fontHeight * 3) ||
+          (fontChanged && yDiff > fontHeight * 0.5)
+        ) {
+          blockIdx = Math.min(blockIdx + 1, blockColors.length - 1);
+          itemsInCurrentBlock = 0;
+        }
       }
+
+      item._color = blockColors[blockIdx] || "#000000";
+      itemsInCurrentBlock++;
+      prevY = y;
+      prevFontName = item.fontName;
     }
   }
 
@@ -301,6 +421,29 @@ function groupTextBlocks(textItems, pageHeight, styles, fontMap, textColors) {
       }
     }
     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;
@@ -649,6 +792,32 @@ 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 = 0; // padding handles top margin
+  }
+
+  // Store absolute pixel gaps and compute body font size for scaling
+  const bodyBlocks = regions.filter(r =>
+    r.type === "text" && r.block?.fontScale && Math.abs(r.block.fontScale - 1) < 0.15);
+  const avgBodyFontSize = bodyBlocks.length > 0
+    ? bodyBlocks.reduce((s, r) => s + r.block.avgFontSize, 0) / bodyBlocks.length
+    : 12;
+  for (const region of regions) {
+    region.gapAbsolute = region.gapBefore || 0;
+    region._avgBodyFontSize = avgBodyFontSize;
+    // Keep gapRatio as fallback for any code that reads it
+    const avgBodyLH = avgBodyFontSize * 1.6;
+    region.gapRatio = (region.gapBefore || 0) / avgBodyLH;
+  }
+
   return regions;
 }
 
@@ -747,11 +916,11 @@ async function analyzePage(page, OPS) {
   // Extract real font metadata from commonObjs (bold, italic, weight, loadedName)
   const fontMap = await extractFontMetadata(page, opList, OPS);
 
-  // Extract text colors from operator list (parallel to text items)
-  const textColors = extractTextColors(opList, OPS);
+  // Extract text colors per beginText/endText block (not per operator)
+  const blockColors = extractTextBlockColors(opList, OPS);
 
-  // Now group text blocks with real font data and colors
-  const textBlocks = groupTextBlocks(textContent.items, pageHeight, textContent.styles, fontMap, textColors);
+  // Now group text blocks with real font data and block colors
+  const textBlocks = groupTextBlocks(textContent.items, pageHeight, textContent.styles, fontMap, blockColors);
 
   // Compute body font size (most common size = body text)
   const allSizes = textBlocks.map(b => Math.round(b.avgFontSize * 10) / 10);
@@ -809,6 +978,7 @@ async function analyzePage(page, OPS) {
     graphicRegions,
     offCanvas,
     fontMap,
+    bodyFontSize,
   };
 }
 
@@ -877,6 +1047,7 @@ function reflowAndComposite(analysis, opts) {
         fontFamily: blockFamily,
         align: block.align || "left",
         color: block.color,
+        colorSpans: block.colorSpans || [],
         region,
       });
     } else {
@@ -908,12 +1079,15 @@ function reflowAndComposite(analysis, opts) {
     }
   }
 
-  // Total height
+  // Total height — use absolute pixel gaps scaled by font ratio
   const baseLH = fontSize * lineHeight;
   let totalHeight = padding;
   for (const r of reflowedRegions) {
     totalHeight += r.height;
-    totalHeight += baseLH * 0.4;
+    const gapAbs = r.region?.gapAbsolute ?? 0;
+    const bodyFS = r.region?._avgBodyFontSize || 12;
+    const scaledGap = gapAbs * (fontSize / bodyFS);
+    totalHeight += Math.max(4, Math.min(scaledGap, baseLH * 2.0));
   }
   totalHeight += padding;
 
@@ -946,6 +1120,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;
 
@@ -1050,11 +1225,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 = 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;
@@ -1098,6 +1277,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";
@@ -1110,6 +1304,7 @@ export function createReflowRenderer(container, options = {}) {
               }
             }
           }
+          lineCharOffset += line.text.length;
           cursorY += lh;
         }
       } else if (r.type === "graphic" && r.bitmap) {
@@ -1132,7 +1327,10 @@ export function createReflowRenderer(container, options = {}) {
         }
         cursorY += r.drawH;
       }
-      cursorY += baseLH * 0.4;
+      const gapAbs = r.region?.gapAbsolute ?? 0;
+      const bodyFS = r.region?._avgBodyFontSize || 12;
+      const scaledGap = gapAbs * (fontSize / bodyFS);
+      cursorY += Math.max(4, Math.min(scaledGap, baseLH * 2.0));
     }
   }
 
@@ -1268,6 +1466,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();
@@ -1279,6 +1483,7 @@ export function createReflowRenderer(container, options = {}) {
         graphicRegions: currentAnalysis.graphicRegions,
         pageWidth: currentAnalysis.pageWidth,
         pageHeight: currentAnalysis.pageHeight,
+        bodyFontSize: currentAnalysis.bodyFontSize,
       });
     },