djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: enhance PDF comparison with new change types and zoom functionality

Browse Source 
- Added support for 'moved' and 'style-changed' change types in PDF comparison.
- Implemented category filters for changes, allowing users to filter by text, images, headers, annotations, formatting, and background.
- Introduced zoom functionality with buttons for zooming in, out, and resetting to default.
- Updated UI to reflect new change types and categories, including visual indicators for moved and style-changed items.
- Enhanced summary display to include counts for moved and style-changed changes.
- Refactored rendering logic to accommodate zoom levels and improve performance.
- Added tests for new change detection features and category assignments.
This commit is contained in:
alam00000
2026-03-10 13:47:46 +05:30
parent 89d7cd8e3d
commit 5232102ac0
31 changed files with 2503 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
src/pages/compare-pdfs.html
View File

@@ -209,6 +209,14 @@
background: rgba(245, 158, 11, 0.28);
}
.compare-highlight.moved {
background: rgba(168, 85, 247, 0.28);
}
.compare-highlight.style-changed {
background: rgba(59, 130, 246, 0.28);
}
.compare-highlight.active {
outline: 2px solid rgba(99, 102, 241, 0.7);
outline-offset: 1px;
@@ -232,11 +240,6 @@
display: none;
}
.compare-change-item.active {
border-color: #818cf8;
background: rgba(79, 70, 229, 0.12);
}
.compare-sidebar {
display: flex;
flex-direction: column;
@@ -245,30 +248,50 @@
border: 1px solid rgba(51, 65, 85, 0.5);
border-radius: 0.75rem;
overflow: hidden;
height: clamp(36rem, 82vh, 72rem);
min-height: 0;
}
.compare-sidebar-header {
padding: 0.75rem 1rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}
.compare-sidebar-filters {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 1rem;
flex-direction: column;
gap: 0;
padding: 0;
border-bottom: 1px solid rgba(51, 65, 85, 0.4);
}
.compare-filter-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.75rem;
}
.compare-filter-group + .compare-filter-group {
border-top: 1px solid rgba(51, 65, 85, 0.25);
}
.compare-filter-label {
width: 100%;
font-size: 0.5625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
}
.compare-pill {
display: inline-flex;
align-items: center;
gap: 0.25rem;
gap: 0.1875rem;
border-radius: 9999px;
padding: 0.25rem 0.625rem;
font-size: 0.6875rem;
padding: 0.125rem 0.5rem;
font-size: 0.625rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
@@ -309,51 +332,130 @@
border-color: rgba(34, 197, 94, 0.5);
}
.compare-pill.moved {
color: #c4b5fd;
background: rgba(168, 85, 247, 0.1);
border-color: rgba(168, 85, 247, 0.15);
}
.compare-pill.moved.active {
background: rgba(168, 85, 247, 0.25);
border-color: rgba(168, 85, 247, 0.5);
}
.compare-pill.style-changed {
color: #93c5fd;
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.15);
}
.compare-pill.style-changed.active {
background: rgba(59, 130, 246, 0.25);
border-color: rgba(59, 130, 246, 0.5);
}
.compare-pill.category {
color: #a5b4fc;
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.15);
}
.compare-pill.category.active {
background: rgba(99, 102, 241, 0.25);
border-color: rgba(99, 102, 241, 0.5);
}
.compare-pill.category.disabled {
opacity: 0.35;
text-decoration: line-through;
}
.compare-change-list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.75rem;
}
#compare-change-list {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
gap: 0.5rem;
}
.compare-change-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.75rem 1rem;
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background 0.1s;
transition: background 0.15s;
border: 1px solid rgba(51, 65, 85, 0.3);
border-left: 2px solid transparent;
border-radius: 0.5rem;
font-size: 0.8125rem;
color: #cbd5e1;
line-height: 1.4;
line-height: 1.5;
}
.compare-change-item:hover {
background: rgba(99, 102, 241, 0.08);
background: rgba(99, 102, 241, 0.06);
border-color: rgba(99, 102, 241, 0.2);
}
.compare-change-item.active {
background: rgba(99, 102, 241, 0.15);
border-left: 2px solid #818cf8;
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
}
.compare-section-header {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0;
margin-top: 0.25rem;
}
.compare-section-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.compare-section-label.added,
.compare-section-label.page-added {
color: #86efac;
}
.compare-section-label.removed,
.compare-section-label.page-removed {
color: #fca5a5;
}
.compare-section-label.modified {
color: #fcd34d;
}
.compare-section-label.moved {
color: #c4b5fd;
}
.compare-section-label.style-changed {
color: #93c5fd;
}
.compare-section-count {
font-size: 0.625rem;
font-weight: 600;
color: #64748b;
}
.compare-section-line {
flex: 1;
height: 1px;
background: rgba(51, 65, 85, 0.4);
}
.compare-change-dot {
width: 0.5rem;
height: 0.5rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
flex-shrink: 0;
}
.compare-change-item .compare-change-dot {
margin-top: 0.35rem;
}
.compare-change-dot.added {
background: #22c55e;
}
@@ -369,36 +471,18 @@
.compare-change-dot.page-removed {
background: #ef4444;
}
.compare-change-dot.moved {
background: #a855f7;
}
.compare-change-dot.style-changed {
background: #3b82f6;
}
.compare-change-desc {
flex: 1;
min-width: 0;
}
.compare-change-desc-text {
white-space: normal;
font-size: 0.8125rem;
color: #e2e8f0;
overflow-wrap: anywhere;
}
.compare-change-type {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
margin-top: 0.2rem;
}
.compare-change-type.added,
.compare-change-type.page-added {
color: #86efac;
}
.compare-change-type.removed,
.compare-change-type.page-removed {
color: #fca5a5;
}
.compare-change-type.modified {
color: #fcd34d;
white-space: pre-line;
}
.compare-change-empty {
@@ -415,7 +499,7 @@
.compare-sidebar {
height: auto;
max-height: 20rem;
max-height: 24rem;
}
.compare-viewer-wrapper.side-by-side-mode {
@@ -592,6 +676,35 @@
<i data-lucide="chevron-down" class="w-3.5 h-3.5"></i>
</button>
<div class="border-l border-gray-700 h-5 mx-1"></div>
<button
id="zoom-out-btn"
class="btn p-1.5 rounded bg-gray-700 hover:bg-gray-600 disabled:opacity-50"
title="Zoom out"
>
<i data-lucide="minus" class="w-3.5 h-3.5"></i>
</button>
<span
id="zoom-level-display"
class="text-xs text-gray-300 font-medium min-w-[3rem] text-center select-none"
>100%</span
>
<button
id="zoom-in-btn"
class="btn p-1.5 rounded bg-gray-700 hover:bg-gray-600 disabled:opacity-50"
title="Zoom in"
>
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
</button>
<button
id="zoom-reset-btn"
class="btn px-2.5 py-1 rounded bg-gray-700 hover:bg-gray-600 text-xs font-semibold"
title="Reset zoom to fit"
>
Fit
</button>
<div class="flex-1"></div>
<div id="overlay-controls" class="hidden flex items-center gap-2">
@@ -624,6 +737,17 @@
/>
Sync scroll
</label>
<label
class="flex items-center gap-1.5 text-xs text-gray-300 cursor-pointer"
>
<input
type="checkbox"
id="ocr-toggle"
checked
class="w-3.5 h-3.5 rounded text-indigo-600 bg-gray-700 border-gray-600"
/>
OCR
</label>
</div>
<div class="relative" id="export-dropdown-wrapper">
@@ -732,35 +856,71 @@
</div>
<div class="compare-sidebar-filters">
<button id="filter-removed" class="compare-pill removed">
<span class="compare-change-dot removed"></span>
<span id="summary-removed-count">0</span> Deleted
</button>
<button id="filter-added" class="compare-pill added">
<span class="compare-change-dot added"></span>
<span id="summary-added-count">0</span> Added
</button>
<button id="filter-modified" class="compare-pill modified">
<span class="compare-change-dot modified"></span>
<span id="summary-modified-count">0</span> Modified
</button>
<label
class="compare-pill"
style="
color: #94a3b8;
background: rgba(51, 65, 85, 0.3);
border-color: rgba(51, 65, 85, 0.4);
cursor: pointer;
"
>
<input
id="ocr-toggle"
type="checkbox"
checked
class="w-3 h-3 rounded text-indigo-600 bg-gray-700 border-gray-600"
/>
OCR
</label>
<div class="compare-filter-group">
<div class="compare-filter-label">Change Type</div>
<button id="filter-removed" class="compare-pill removed">
<span class="compare-change-dot removed"></span>
<span id="summary-removed-count">0</span> Deleted
</button>
<button id="filter-added" class="compare-pill added">
<span class="compare-change-dot added"></span>
<span id="summary-added-count">0</span> Added
</button>
<button id="filter-modified" class="compare-pill modified">
<span class="compare-change-dot modified"></span>
<span id="summary-modified-count">0</span> Modified
</button>
<button id="filter-moved" class="compare-pill moved">
<span class="compare-change-dot moved"></span>
<span id="summary-moved-count">0</span> Moved
</button>
<button
id="filter-style-changed"
class="compare-pill style-changed"
>
<span class="compare-change-dot style-changed"></span>
<span id="summary-style-changed-count">0</span> Style
</button>
</div>
<div class="compare-filter-group">
<div class="compare-filter-label">Content</div>
<button
id="category-text"
class="compare-pill category active"
>
<span id="category-count-text">0</span> Text
</button>
<button
id="category-image"
class="compare-pill category active"
>
<span id="category-count-image">0</span> Images
</button>
<button
id="category-header-footer"
class="compare-pill category active"
>
<span id="category-count-header-footer">0</span> Headers
</button>
<button
id="category-annotation"
class="compare-pill category active"
>
<span id="category-count-annotation">0</span> Annotations
</button>
<button
id="category-formatting"
class="compare-pill category active"
>
<span id="category-count-formatting">0</span> Formatting
</button>
<button
id="category-background"
class="compare-pill category active"
>
<span id="category-count-background">0</span> Backgrounds
</button>
</div>
</div>
<div class="compare-change-list">