Frontend — JavaScript Module Reference
The frontend is a single-page application built with vanilla JavaScript (no build step). Scripts are loaded in order via <script> tags in index.html.
Loading Order
The scripts must load in this exact order because later modules depend on globals defined by earlier ones:
| Order | File | Defines | Depends On |
|---|---|---|---|
| 1 | state.js | state, els | DOM elements |
| 2 | api.js | addName, calculateAllWidths, renderCandidates, selectRedaction, updateAllMatchesView | state, els |
| 3 | webgl-mask.js | setupWebGLOverlay, clearWebGLContexts, updateWebGLUniforms, fetchMasksAsync | state, els |
| 4 | pdf-viewer.js | handleFileUpload, goToPage, injectRedactionOverlays | state, els, api.js, webgl-mask.js |
| 5 | embedded-text-viewer.js | createETVOverlay, findNearestETVLine, connectRedactionsToETVLines, initDragETV | state, els, pdf-viewer.js |
| 6 | redaction-matching.js | injectMatchingLabel | api.js |
| 7 | ui-events.js | updateCSSZoom, processZoomFromText, initResize, initDragRedaction, renderThumbnails | state, els |
| 8 | app.js | IIFE — wires all event listeners | All above |
| 9 | text-tool.js | Formatting Toolbar Bridge (CustomEvents) | state, els, app.js |
External Libraries
| Library | CDN | Purpose |
|---|---|---|
| Fabric.js 5.3.1 | cloudflare | Canvas-based text overlays with drag/resize |
| Material Symbols | Google Fonts | Toolbar icons |
| Inter font | Google Fonts | UI typography |
Module Documentation
- State Management —
stateobject schema andelsDOM cache - PDF Viewer — File upload, page navigation, redaction overlay rendering
- API & Candidate Logic — Width calculation, candidate matching, sort/pagination
- UI Events — Zoom, resize, drag, thumbnails
- Embedded Text Viewer — Automatic text spans, bidirectional sync, snapping
- Formatting Bridge — Shared options bar and formatting bridge
- WebGL Mask — GPU-accelerated redaction mask rendering