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

refactor: update PDF comparison types and enhance UI for better usability

Browse Source 
- Refactored CompareState to import from a centralized type definition.
- Enhanced the compare-pdfs.html layout with improved styles for overlay and side-by-side modes.
- Added new CSS styles for various UI components including panels, buttons, and highlights.
- Implemented a new sidebar for displaying change summaries and filters.
- Created unit tests for text comparison logic, including diffing text runs and page pairing.
- Added tests for text normalization functions to ensure proper handling of punctuation and character normalization.
This commit is contained in:
alam00000
2026-03-08 23:55:04 +05:30
parent 86cbaf6cd3
commit 1d68691331
20 changed files with 3447 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -72,31 +72,362 @@
<style>
.compare-viewer-wrapper.overlay-mode {
position: relative;
background: #ffffff;
overflow: hidden;
padding: 1.5rem;
}
.compare-viewer-wrapper.overlay-mode #panel-1,
.compare-viewer-wrapper.overlay-mode #panel-2 {
position: absolute;
top: 0;
left: 0;
.compare-viewer-wrapper.overlay-mode #panel-1 {
width: 100%;
height: 100%;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.compare-viewer-wrapper.overlay-mode #panel-1::-webkit-scrollbar {
display: none;
}
.compare-viewer-wrapper.overlay-mode #panel-2 {
position: absolute;
inset: 1.5rem;
overflow: hidden;
pointer-events: none;
background: transparent;
}
.compare-viewer-wrapper.overlay-mode .compare-panel-label {
display: none;
}
.compare-viewer-wrapper.overlay-mode .compare-canvas-stage canvas {
position: static;
top: auto;
left: auto;
width: auto;
height: auto;
}
.compare-viewer-wrapper.overlay-mode
#panel-2
.compare-canvas-stage
canvas {
background: transparent;
}
.compare-viewer-wrapper.side-by-side-mode {
display: flex;
gap: 0;
padding: 0;
background: #ffffff;
}
.compare-workspace {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 1fr) 20rem;
align-items: stretch;
}
.compare-viewer-wrapper.side-by-side-mode #panel-1,
.compare-viewer-wrapper.side-by-side-mode #panel-2 {
flex: 1;
overflow: auto;
max-height: 70vh;
min-height: 0;
height: 100%;
border: none;
border-radius: 0;
box-shadow: none;
}
.compare-viewer-wrapper.side-by-side-mode #panel-1 {
border-right: 2px solid #cbd5e1;
}
.compare-panel {
position: relative;
min-width: 0;
min-height: 0;
background: #ffffff;
}
.compare-panel-label {
position: sticky;
top: 0;
z-index: 5;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #e2e8f0;
backdrop-filter: blur(4px);
}
.compare-canvas-stage {
--compare-stage-pad-top: 1.5rem;
--compare-stage-pad-x: 1.75rem;
--compare-stage-pad-bottom: 1.75rem;
position: relative;
width: max-content;
margin: 0 auto;
padding: var(--compare-stage-pad-top) var(--compare-stage-pad-x)
var(--compare-stage-pad-bottom);
}
.compare-canvas-stage canvas {
display: block;
background: #ffffff;
}
.compare-highlight-layer {
position: absolute;
inset: var(--compare-stage-pad-top) var(--compare-stage-pad-x)
var(--compare-stage-pad-bottom);
pointer-events: none;
}
.compare-highlight {
position: absolute;
border-radius: 2px;
border: none;
}
.compare-highlight.added {
background: rgba(34, 197, 94, 0.28);
}
.compare-highlight.removed,
.compare-highlight.page-removed {
background: rgba(239, 68, 68, 0.28);
}
.compare-highlight.modified {
background: rgba(245, 158, 11, 0.28);
}
.compare-highlight.active {
outline: 2px solid rgba(99, 102, 241, 0.7);
outline-offset: 1px;
}
.compare-placeholder {
position: absolute;
inset: 2rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
border: 1px dashed #94a3b8;
border-radius: 0.75rem;
color: #475569;
background: rgba(255, 255, 255, 0.92);
}
.compare-placeholder.hidden {
display: none;
}
.compare-change-item.active {
border-color: #818cf8;
background: rgba(79, 70, 229, 0.12);
}
.compare-sidebar {
display: flex;
flex-direction: column;
gap: 0;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(51, 65, 85, 0.5);
border-radius: 0.75rem;
overflow: hidden;
height: clamp(36rem, 82vh, 72rem);
}
.compare-sidebar-header {
padding: 0.75rem 1rem;
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;
border-bottom: 1px solid rgba(51, 65, 85, 0.4);
flex-wrap: wrap;
}
.compare-pill {
display: inline-flex;
align-items: center;
gap: 0.25rem;
border-radius: 9999px;
padding: 0.25rem 0.625rem;
font-size: 0.6875rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.compare-pill.removed {
color: #fca5a5;
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.15);
}
.compare-pill.removed.active {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.5);
}
.compare-pill.modified {
color: #fcd34d;
background: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.15);
}
.compare-pill.modified.active {
background: rgba(245, 158, 11, 0.25);
border-color: rgba(245, 158, 11, 0.5);
}
.compare-pill.added {
color: #86efac;
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.15);
}
.compare-pill.added.active {
background: rgba(34, 197, 94, 0.25);
border-color: rgba(34, 197, 94, 0.5);
}
.compare-change-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.compare-change-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background 0.1s;
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;
}
.compare-change-item:hover {
background: rgba(99, 102, 241, 0.08);
}
.compare-change-item.active {
background: rgba(99, 102, 241, 0.15);
border-left: 2px solid #818cf8;
}
.compare-change-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
flex-shrink: 0;
}
.compare-change-item .compare-change-dot {
margin-top: 0.35rem;
}
.compare-change-dot.added {
background: #22c55e;
}
.compare-change-dot.removed {
background: #ef4444;
}
.compare-change-dot.modified {
background: #f59e0b;
}
.compare-change-dot.page-added {
background: #22c55e;
}
.compare-change-dot.page-removed {
background: #ef4444;
}
.compare-change-desc {
flex: 1;
min-width: 0;
}
.compare-change-desc-text {
white-space: normal;
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;
}
.compare-change-empty {
padding: 2rem 1rem;
font-size: 0.8125rem;
color: #64748b;
text-align: center;
}
@media (max-width: 1023px) {
.compare-workspace {
grid-template-columns: minmax(0, 1fr);
}
.compare-sidebar {
height: auto;
max-height: 20rem;
}
.compare-viewer-wrapper.side-by-side-mode {
gap: 1rem;
padding: 1rem;
}
.compare-canvas-stage {
--compare-stage-pad-top: 1rem;
--compare-stage-pad-x: 1rem;
--compare-stage-pad-bottom: 1rem;
}
}
</style>
@@ -134,7 +465,7 @@
>
<div
id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-5xl w-full text-gray-200 border border-gray-700"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-[96rem] w-full text-gray-200 border border-gray-700"
>
<button
id="back-to-tools"
@@ -200,69 +531,76 @@
<!-- Compare Viewer (hidden until both files loaded) -->
<div id="compare-viewer" class="hidden">
<!-- Unified Toolbar -->
<!-- Toolbar -->
<div
class="flex flex-wrap items-center justify-center gap-4 mb-4 p-3 bg-gray-900 rounded-lg border border-gray-700"
class="flex flex-wrap items-center gap-3 mb-3 p-2 bg-gray-900 rounded-lg border border-gray-700"
>
<!-- Page Navigation -->
<button
id="prev-page-compare"
class="btn p-2 rounded-full bg-gray-700 hover:bg-gray-600 disabled:opacity-50"
class="btn p-1.5 rounded bg-gray-700 hover:bg-gray-600 disabled:opacity-50"
disabled
title="Previous page"
>
<i data-lucide="chevron-left"></i>
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</button>
<span class="text-white font-medium">
Page <span id="current-page-display-compare">1</span> of
<span class="text-sm text-white font-medium">
Page <span id="current-page-display-compare">1</span> /
<span id="total-pages-display-compare">1</span>
</span>
<button
id="next-page-compare"
class="btn p-2 rounded-full bg-gray-700 hover:bg-gray-600 disabled:opacity-50"
class="btn p-1.5 rounded bg-gray-700 hover:bg-gray-600 disabled:opacity-50"
disabled
title="Next page"
>
<i data-lucide="chevron-right"></i>
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
<!-- Divider -->
<div
class="border-l border-gray-600 h-6 mx-2 hidden sm:block"
></div>
<div class="border-l border-gray-700 h-5 mx-1"></div>
<!-- View Mode Buttons -->
<div class="bg-gray-700 p-1 rounded-md flex gap-1">
<div class="bg-gray-700 p-0.5 rounded flex gap-0.5">
<button
id="view-mode-overlay"
class="btn bg-indigo-600 px-3 py-1 rounded text-sm font-semibold"
class="btn bg-indigo-600 px-2.5 py-1 rounded text-xs font-semibold"
>
Overlay
</button>
<button
id="view-mode-side"
class="btn px-3 py-1 rounded text-sm font-semibold"
class="btn px-2.5 py-1 rounded text-xs font-semibold"
>
Side-by-Side
</button>
</div>
<!-- Divider -->
<div
class="border-l border-gray-600 h-6 mx-2 hidden sm:block"
></div>
<div class="border-l border-gray-700 h-5 mx-1"></div>
<!-- Overlay Controls -->
<div id="overlay-controls" class="flex items-center gap-2">
<button
id="prev-change-btn"
class="btn bg-gray-700 hover:bg-gray-600 px-2.5 py-1 rounded text-xs font-semibold disabled:opacity-50"
disabled
title="Previous change"
>
<i data-lucide="chevron-up" class="w-3.5 h-3.5"></i>
</button>
<button
id="next-change-btn"
class="btn bg-gray-700 hover:bg-gray-600 px-2.5 py-1 rounded text-xs font-semibold disabled:opacity-50"
disabled
title="Next change"
>
<i data-lucide="chevron-down" class="w-3.5 h-3.5"></i>
</button>
<div class="flex-1"></div>
<div id="overlay-controls" class="hidden flex items-center gap-2">
<button
id="flicker-btn"
class="btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md text-sm font-semibold"
class="btn bg-gray-700 hover:bg-gray-600 px-2.5 py-1 rounded text-xs font-semibold"
>
Flicker
</button>
<label
for="opacity-slider"
class="text-sm font-medium text-gray-300"
>Opacity:</label
>
<input
type="range"
id="opacity-slider"
@@ -270,44 +608,127 @@
max="1"
step="0.05"
value="0.5"
class="w-24 accent-indigo-500"
class="w-20 accent-indigo-500"
/>
</div>
<!-- Side-by-side Controls (hidden initially) -->
<div
id="side-by-side-controls"
class="hidden flex items-center gap-2"
>
<div id="side-by-side-controls" class="flex items-center gap-2">
<label
class="flex items-center gap-2 text-sm font-medium text-gray-300 cursor-pointer"
class="flex items-center gap-1.5 text-xs text-gray-300 cursor-pointer"
>
<input
type="checkbox"
id="sync-scroll-toggle"
checked
class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500"
class="w-3.5 h-3.5 rounded text-indigo-600 bg-gray-700 border-gray-600"
/>
Sync Scrolling
Sync scroll
</label>
</div>
<button
id="export-report-btn"
class="btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded disabled:opacity-50"
disabled
title="Export report"
>
<i data-lucide="download" class="w-4 h-4"></i>
</button>
</div>
<!-- Viewer Wrapper -->
<div
id="compare-viewer-wrapper"
class="compare-viewer-wrapper overlay-mode bg-gray-900 rounded-lg border border-gray-700 min-h-[400px] relative"
>
<div id="panel-1" class="overflow-auto">
<canvas id="canvas-compare-1" class="block mx-auto"></canvas>
</div>
<div id="panel-2" class="overflow-auto">
<canvas
id="canvas-compare-2"
class="block mx-auto"
style="opacity: 0.5"
></canvas>
<div class="compare-workspace">
<div
id="compare-viewer-wrapper"
class="compare-viewer-wrapper side-by-side-mode border border-slate-200 relative"
>
<div id="panel-1" class="compare-panel overflow-auto">
<div class="compare-panel-label" id="compare-panel-label-1">
Original
</div>
<div class="compare-canvas-stage">
<canvas id="canvas-compare-1" class="block mx-auto"></canvas>
<div id="highlights-1" class="compare-highlight-layer"></div>
<div
id="placeholder-1"
class="compare-placeholder hidden"
></div>
</div>
</div>
<div id="panel-2" class="compare-panel overflow-auto">
<div class="compare-panel-label" id="compare-panel-label-2">
Modified
</div>
<div class="compare-canvas-stage">
<canvas
id="canvas-compare-2"
class="block mx-auto"
style="opacity: 1"
></canvas>
<div id="highlights-2" class="compare-highlight-layer"></div>
<div
id="placeholder-2"
class="compare-placeholder hidden"
></div>
</div>
</div>
</div>
<aside class="compare-sidebar">
<div class="compare-sidebar-header">
<div class="relative">
<span
class="absolute inset-y-0 left-0 flex items-center pl-3"
>
<i data-lucide="search" class="w-4 h-4 text-gray-400"></i>
</span>
<input
type="text"
id="compare-search-input"
placeholder="Search changes..."
class="w-full pl-9 pr-3 py-2 bg-gray-700 text-white text-sm border border-gray-600 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
</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>
<div class="compare-change-list">
<div id="change-list-empty" class="compare-change-empty">
Upload two PDFs to see differences.
</div>
<div id="compare-change-list" class="hidden"></div>
</div>
</aside>
</div>
</div>
</div>