pdf-diff-viewer 1.2.0 → 1.3.2

package/README.md

@@ -136,15 +136,17 @@ new PDFDiffViewer(container, options)
 - `colorTolerance` (number) - Color difference threshold, default: 120
 - `minHighlightArea` (number) - Min area to highlight in pixels, default: 60
 - `minWordSize` (number) - Min word box size in pixels, default: 8
-- `highlightAlpha` (number) - Highlight transparency, default: 0.32
+- `highlightAlpha` (number) - Highlight transparency (0-1), default: 0.32
+- **`highlightColorA` (string)** - Hex color for Document A highlights, default: '#FF1744' (red)
+- **`highlightColorB` (string)** - Hex color for Document B highlights, default: '#2196F3' (blue)
+- **`backgroundFillColor` (string)** - Canvas background fill color, default: 'white'
 - `labelA` (string) - Label for first document, default: 'Document A'
 - `labelB` (string) - Label for second document, default: 'Document B'
 - `showPageNumbers` (boolean) - Show page numbers, default: true
 - `cropRegions` (Array) - Regions to crop: `[{ page: 1, x, y, width, height }]`
 - `maskRegions` (Array) - Regions to mask/ignore: `[{ page: 1, x, y, width, height }]`
-- **`smartAlignment` (boolean)** - Enable text-based page alignment for content reflow, default: true
-- **`alignmentTolerance` (number)** - Search range for matching pages (+/- pages), default: 2
-- **`similarityThreshold` (number)** - Minimum text similarity (0-1) for page matching, default: 0.3
+- `alignmentTolerance` (number) - Search range for matching pages (+/- pages), default: 2
+- `similarityThreshold` (number) - Minimum text similarity (0-1) for page matching, default: 0.3
 
 ### Methods
 
@@ -238,6 +240,41 @@ const viewer = new PDFDiffViewer('#container', {
 });
 ```
 
+### Custom Highlight Colors
+
+```javascript
+// Perfect for gray backgrounds (#D9D9D9)
+const viewer = new PDFDiffViewer('#container', {
+  highlightColorA: '#FF1744',      // Vibrant red for Doc A changes
+  highlightColorB: '#2196F3',      // Bright blue for Doc B changes
+  backgroundFillColor: '#D9D9D9',  // Match your PDF background
+  highlightAlpha: 0.4              // Adjust transparency
+});
+```
+
+**Recommended color combinations:**
+
+For light backgrounds:
+```javascript
+// Red vs Blue (high contrast)
+{ highlightColorA: '#FF1744', highlightColorB: '#2196F3' }
+
+// Purple vs Orange
+{ highlightColorA: '#9C27B0', highlightColorB: '#FF6F00' }
+
+// Pink vs Teal
+{ highlightColorA: '#E91E63', highlightColorB: '#00BCD4' }
+```
+
+For dark backgrounds:
+```javascript
+// Bright yellow vs Cyan
+{ highlightColorA: '#FFEB3B', highlightColorB: '#00E5FF' }
+
+// Lime vs Magenta
+{ highlightColorA: '#CDDC39', highlightColorB: '#E040FB' }
+```
+
 ### With Crop Regions (Compare Specific Areas)
 
 ```javascript
@@ -251,12 +288,12 @@ const viewer = new PDFDiffViewer('#container', {
 ### With Smart Alignment (Content Reflow Handling)
 
 ```javascript
+// Smart alignment is now automatic! No configuration needed
 // Handles cases where content shifts across pages
 // (e.g., adding text pushes content to next page)
 const viewer = new PDFDiffViewer('#container', {
-  smartAlignment: true,         // Enable intelligent page matching
-  alignmentTolerance: 2,        // Search +/- 2 pages for matches
-  similarityThreshold: 0.3      // Require 30% content similarity
+  alignmentTolerance: 2,        // Search +/- 2 pages for matches (default)
+  similarityThreshold: 0.3      // Require 30% content similarity (default)
 });
 
 const results = await viewer.compare(pdfA, pdfB);
@@ -266,10 +303,10 @@ console.log('Page mappings:', results.pageMapping);
 ```
 
 **How it works:**
+- Automatically detects and handles different page counts
 - Extracts text from all pages in both documents
 - Uses Jaccard similarity to find best-matching pages
-- Handles different page counts gracefully
-- Shows similarity scores in the UI
+- Shows similarity scores in the results
 
 ### With Mask Regions (Ignore Dynamic Content)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdf-diff-viewer",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "description": "Browser-based PDF comparison tool with visual diff highlighting. Zero system dependencies, pure JavaScript, client-side processing.",
   "main": "src/PDFDiffViewer.js",
   "type": "module",

package/src/PDFDiffViewer.js

@@ -20,19 +20,21 @@ class PDFDiffViewer {
             scale: options.scale || 3.0,
             maxShift: options.maxShift || 3,
             dilationRadius: options.dilationRadius || 0,
-            colorTolerance: options.colorTolerance || 200,
+            colorTolerance: options.colorTolerance || 120,
             minHighlightArea: options.minHighlightArea || 60,
             minWordSize: options.minWordSize || 8,
             highlightAlpha: options.highlightAlpha || 0.32,
+            highlightColorA: options.highlightColorA || '#FF1744',  // Red for Doc A changes
+            highlightColorB: options.highlightColorB || '#2196F3',  // Blue for Doc B changes
+            backgroundFillColor: options.backgroundFillColor || 'white',  // Canvas background
             labelA: options.labelA || 'Document A',
             labelB: options.labelB || 'Document B',
             workerSrc: options.workerSrc || 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js',
             showPageNumbers: options.showPageNumbers !== false,
             cropRegions: options.cropRegions || [],
             maskRegions: options.maskRegions || [],
-            smartAlignment: options.smartAlignment !== false, // Enable text-based alignment
-            alignmentTolerance: options.alignmentTolerance || 2, // Search +/- 2 pages for matches
-            similarityThreshold: options.similarityThreshold || 0.3 // Minimum similarity score (0-1)
+            alignmentTolerance: options.alignmentTolerance || 2,
+            similarityThreshold: options.similarityThreshold || 0.3
         };
 
         // Check if PDF.js is loaded
@@ -72,13 +74,9 @@ class PDFDiffViewer {
         summaryDiv.className = 'pdf-diff-summary';
         this.container.appendChild(summaryDiv);
 
-        // Use smart alignment if enabled and page counts differ
-        if (this.options.smartAlignment && docA.numPages !== docB.numPages) {
-            summaryDiv.innerHTML = '<p>Analyzing document structure for smart alignment...</p>';
+        // Automatically handle different page counts with smart alignment
+        if (docA.numPages !== docB.numPages) {
             pageMapping = await this._findPageMappings(docA, docB);
-            summaryDiv.innerHTML = `<h3>Smart Alignment Active: Comparing ${pageMapping.length} matched page(s)</h3>`;
-        } else if (docA.numPages !== docB.numPages) {
-            throw new Error(`Page count mismatch: ${docA.numPages} vs ${docB.numPages}. Enable 'smartAlignment' option to handle different page counts.`);
         } else {
             // Direct 1-to-1 mapping
             for (let i = 1; i <= docA.numPages; i++) {
@@ -105,11 +103,7 @@ class PDFDiffViewer {
 
         // Update summary
         if (this.options.showPageNumbers) {
-            if (docA.numPages === docB.numPages) {
-                summaryDiv.innerHTML = `<h3>Comparison Results: ${docA.numPages} page(s)</h3>`;
-            } else {
-                summaryDiv.innerHTML += `<p>Doc A: ${docA.numPages} pages | Doc B: ${docB.numPages} pages</p>`;
-            }
+            summaryDiv.innerHTML = `<h3>Comparison Results: ${pageMapping.length} page(s)</h3>`;
         }
 
         return this.results;
@@ -358,7 +352,7 @@ class PDFDiffViewer {
         padded.height = targetHeight;
 
         const ctx = padded.getContext('2d');
-        ctx.fillStyle = 'white';
+        ctx.fillStyle = this.options.backgroundFillColor;
         ctx.fillRect(0, 0, targetWidth, targetHeight);
         ctx.drawImage(srcCanvas, 0, 0);
         return padded;
@@ -369,7 +363,7 @@ class PDFDiffViewer {
         temp.width = width;
         temp.height = height;
         const ctx = temp.getContext('2d');
-        ctx.fillStyle = 'white';
+        ctx.fillStyle = this.options.backgroundFillColor;
         ctx.fillRect(0, 0, width, height);
         ctx.drawImage(srcCanvas, dx, dy);
         return ctx.getImageData(0, 0, width, height);
@@ -529,11 +523,14 @@ class PDFDiffViewer {
     _drawHighlightBoxes(ctx, boxes, color = 'red') {
         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
         const alpha = this.options.highlightAlpha;
+        
+        // Use configured colors or fallback to color parameter
         if (color === 'red') {
-            ctx.fillStyle = `rgba(255, 0, 0, ${alpha})`;
+            ctx.fillStyle = this._hexToRgba(this.options.highlightColorA, alpha);
         } else if (color === 'green') {
-            ctx.fillStyle = `rgba(0, 200, 0, ${alpha})`;
+            ctx.fillStyle = this._hexToRgba(this.options.highlightColorB, alpha);
         }
+        
         boxes.forEach(({ x, y, width, height }) => {
             ctx.fillRect(x, y, width, height);
         });
@@ -784,6 +781,26 @@ class PDFDiffViewer {
             .split(/\s+/)
             .filter(word => word.length > 2 && !stopwords.has(word));
     }
+
+    /**
+     * Convert hex color to rgba with alpha
+     */
+    _hexToRgba(hex, alpha) {
+        // Handle both #RGB and #RRGGBB formats
+        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
+
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (result) {
+            const r = parseInt(result[1], 16);
+            const g = parseInt(result[2], 16);
+            const b = parseInt(result[3], 16);
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
+        
+        // Fallback to red if invalid hex
+        return `rgba(255, 0, 0, ${alpha})`;
+    }
 }
 
 // Export for different module systems