SubX Submittal Automation

User ▾

Subscription

Logout

Schedule Preview ×

${logoUrl ? `` : ''}

${escapeHtml(companyName)}

${companyAddress ? `

${escapeHtml(companyAddress).replace(/\\n/g, '
')}

` : ''}

${companyEmail ? 'Email: ' + escapeHtml(companyEmail) : ''}${companyEmail && companyPhone ? ' | ' : ''}${companyPhone ? 'Phone: ' + escapeHtml(companyPhone) : ''}

Quote #${escapeHtml(quoteNumber)}

Date: ${dateStr}

Total: ${grandTotal}

📚 Catalogue Search Complete

${results.found > 0 ? 'Click "Review Match" on found components to affirm cut sheets.' : results.notFound > 0 ? 'Components not found can use "I Have Link" to submit manually.' : 'Search complete.'}

✓ Directive logged

Sorry, I encountered an error: ${error.message}

Please try again or check your connection.

Your project has ${context.totalPages} pages total.

${context.extractedPagesCount} pages have been extracted for hardware data.

Your submittal contains ${context.totalComponents} components across ${context.hardwareGroups.length} hardware sets.

Project: ${context.projectName}

`; html += `
• Total Pages: ${context.totalPages}
`; html += `
• Hardware Sets: ${context.hardwareGroups.length}
`; html += `
• Total Components: ${context.totalComponents}
`; html += `

Hardware Sets:

`; context.hardwareGroups.slice(0, 5).forEach(g => { html += `
• ${g.setNumber}: ${g.description} (${g.componentCount} items)
`; }); if (context.hardwareGroups.length > 5) { html += `
• ...and ${context.hardwareGroups.length - 5} more sets
`; } html += `

SubX Assistant Help

Try asking:

• "Give me a summary of my submittal"
• "How many components are there?"
• "What hardware sets do I have?"
• "How do I add a component?"
• "What is DSA compliance?"

You can also use voice input by clicking the microphone icon.

To add a component:

1. Navigate to the page with the hardware set
2. Click the "+ Add Component" button at the bottom of the extracted components
3. Or use Edit → Add Component (Ctrl+N)

To export your submittal:

1. Click 📋 Submittal in the navigation bar
2. Use File → Export to Excel for a spreadsheet
3. Or use File → Generate Submittal for the formatted document

') .replace(/\n/g, '
'); // Wrap in paragraphs if not already if (!html.startsWith('<')) { html = '

' + html + '

.*<\/li>)+/g, '

$&

'); return html; } /** * Toggle voice input using Web Speech API */ function toggleVoiceInput() { const voiceBtn = document.getElementById('voice-btn'); // Check if Speech Recognition is supported const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SpeechRecognition) { alert('Voice input is not supported in this browser. Please try Chrome or Edge.'); return; } if (isListening) { // Stop listening if (voiceRecognition) { voiceRecognition.stop(); } isListening = false; voiceBtn.classList.remove('listening'); return; } // Start listening voiceRecognition = new SpeechRecognition(); voiceRecognition.continuous = false; voiceRecognition.interimResults = true; voiceRecognition.lang = 'en-US'; voiceRecognition.onstart = () => { isListening = true; voiceBtn.classList.add('listening'); document.getElementById('chat-input').placeholder = 'Listening...'; }; voiceRecognition.onresult = (event) => { const input = document.getElementById('chat-input'); let transcript = ''; for (let i = event.resultIndex; i < event.results.length; i++) { transcript += event.results[i][0].transcript; } input.value = transcript; // If it's a final result, stop listening if (event.results[event.results.length - 1].isFinal) { voiceRecognition.stop(); } }; voiceRecognition.onerror = (event) => { console.error('[VOICE] Error:', event.error); isListening = false; voiceBtn.classList.remove('listening'); document.getElementById('chat-input').placeholder = 'Ask about your submittal, request edits, or get help...'; if (event.error === 'not-allowed') { alert('Microphone access denied. Please enable microphone permissions for this site.'); } }; voiceRecognition.onend = () => { isListening = false; voiceBtn.classList.remove('listening'); document.getElementById('chat-input').placeholder = 'Ask about your submittal, request edits, or get help...'; }; voiceRecognition.start(); } /* CH-2026-0125-UI-001: DEPRECATED — chat bar relocated to tab dropdown document.addEventListener('DOMContentLoaded', () => { const mainContents = document.querySelectorAll('.main-content, .app-container'); mainContents.forEach(el => el.classList.add('main-content-with-chat')); }); */ // =========================== // HGSE REGION SELECTOR (CH-2026-0120-REGION-001) // Human-Guided Schedule Extraction - Region Drawing // =========================== // Region drawing state let regionDrawingState = { isDrawing: false, startX: 0, startY: 0, currentRect: null, selectedPageNumber: null, userRegions: [] // Store user-defined regions }; /** * Open the region selector modal * CH-2026-0122-REGION-002: Now uses PDF viewer overlay instead of server-side previews */ function openRegionSelector() { Telemetry.logAction('openRegionSelector', 'Opening HGSE region selector (PDF viewer overlay)'); // CH-2026-0122-REGION-002: Use new PDF viewer overlay instead of legacy modal openRegionSelectorOverlay(); } /** * [LEGACY] Open the old region selector modal with server-side previews * Kept for reference but no longer called */ function openRegionSelectorLegacy() { const modal = document.getElementById('region-selector-modal'); if (modal) { modal.classList.add('visible'); loadPageGalleryForRegions(); } } /** * Close the region selector modal */ function closeRegionSelector() { const modal = document.getElementById('region-selector-modal'); if (modal) { modal.classList.remove('visible'); } // Reset drawing area const drawingArea = document.getElementById('drawing-area'); if (drawingArea) { drawingArea.classList.remove('visible'); } regionDrawingState.selectedPageNumber = null; regionDrawingState.currentRect = null; } /** * Load page thumbnails into the gallery for region selection */ async function loadPageGalleryForRegions() { const gallery = document.getElementById('page-gallery'); if (!gallery) return; const sessionId = sharedState.session.id || sharedState.session.sessionId; if (!sessionId || sessionId.startsWith('session_')) { gallery.innerHTML = '

Please upload a PDF first.

'; return; } // QF-2026-0121-UI-001: Fetch fresh page count from API instead of stale localStorage // QF-2026-0121-UI-002: Fix getAuthHeaders undefined — use authState.token pattern // QF-2026-0121-UI-003: Use sharedState.session.totalPages as primary source for restored sessions let totalPages = sharedState.session.totalPages || 0; // If sharedState doesn't have page count, try API if (!totalPages && authState.token) { try { const statusResponse = await fetch(`${API_BASE_URL}/api/hardware-schedule/session/${sessionId}/status`, { headers: { 'Authorization': `Bearer ${authState.token}` } }); if (statusResponse.ok) { const statusData = await statusResponse.json(); totalPages = statusData.total_pages || statusData.page_count || 0; } } catch (e) { console.error('[REGION] Failed to fetch session status:', e); } } if (!totalPages) { gallery.innerHTML = '

No pages found. Please upload a PDF or load a session first.

'; return; } console.log(`[REGION] Loading gallery for ${totalPages} pages (session: ${sessionId})`) gallery.innerHTML = '

Loading pages...

'; // FX-2026-0121-AUTH-001: Fetch signed URLs for all pages let signedUrls = {}; try { const signedUrlResponse = await fetch(`${API_BASE_URL}/api/sessions/${sessionId}/signed-urls`, { method: 'POST', headers: { 'Authorization': `Bearer ${authState.token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ all: true }) }); if (signedUrlResponse.ok) { const signedUrlData = await signedUrlResponse.json(); signedUrls = signedUrlData.urls || {}; // Cache signed URLs for selectPageForRegionDrawing regionDrawingState.signedUrls = signedUrls; console.log(`[REGION] Got ${Object.keys(signedUrls).length} signed URLs`); } else { console.error('[REGION] Failed to get signed URLs:', signedUrlResponse.status); } } catch (e) { console.error('[REGION] Error fetching signed URLs:', e); } let thumbnailsHtml = ''; for (let i = 1; i <= totalPages; i++) { // Check if this page already has user-defined regions const hasRegions = regionDrawingState.userRegions.some(r => r.page_number === i); // Use signed URL if available, fallback to direct URL (will show error state) const imgSrc = signedUrls[i] || `${API_BASE_URL}/api/hardware-schedule/session/${sessionId}/page/${i}/preview?with_overlay=false`; // QF-2026-0121-UI-004: Remove loading="lazy" — Edge intervention blocks lazy images in modals thumbnailsHtml += `

Page ${i}

`; } gallery.innerHTML = thumbnailsHtml; } /** * Select a page for region drawing */ async function selectPageForRegionDrawing(pageNumber) { regionDrawingState.selectedPageNumber = pageNumber; // Highlight selected thumbnail document.querySelectorAll('.page-thumbnail').forEach(thumb => { thumb.classList.remove('selected'); if (parseInt(thumb.dataset.page) === pageNumber) { thumb.classList.add('selected'); } }); // Show drawing area const drawingArea = document.getElementById('drawing-area'); if (drawingArea) { drawingArea.classList.add('visible'); } // Load full-resolution page image using signed URL // FX-2026-0121-AUTH-001: Use cached signed URL from loadPageGalleryForRegions const sessionId = sharedState.session.id || sharedState.session.sessionId; const img = document.getElementById('region-page-image'); if (img) { // Use signed URL if available (cached from gallery load) const signedUrl = regionDrawingState.signedUrls?.[pageNumber]; img.src = signedUrl || `${API_BASE_URL}/api/hardware-schedule/session/${sessionId}/page/${pageNumber}/preview?with_overlay=false`; img.onload = () => { initRegionDrawingCanvas(img); }; } Telemetry.logAction('selectPageForRegion', `Selected page ${pageNumber} for region drawing`); } /** * Initialize the drawing canvas with proper dimensions */ function initRegionDrawingCanvas(img) { const canvas = document.getElementById('region-drawing-canvas'); if (!canvas || !img) return; const container = document.querySelector('.drawing-container'); if (!container) return; // Get the actual rendered dimensions of the image const imgRect = img.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); // Position canvas over the image canvas.style.left = `${img.offsetLeft}px`; canvas.style.top = `${img.offsetTop}px`; canvas.width = img.clientWidth; canvas.height = img.clientHeight; const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw any existing regions for this page drawExistingRegions(ctx); // Set up drawing handlers setupRegionDrawingHandlers(canvas, img); } /** * Set up mouse event handlers for region drawing */ function setupRegionDrawingHandlers(canvas, img) { const ctx = canvas.getContext('2d'); canvas.onmousedown = (e) => { regionDrawingState.isDrawing = true; const rect = canvas.getBoundingClientRect(); regionDrawingState.startX = e.clientX - rect.left; regionDrawingState.startY = e.clientY - rect.top; }; canvas.onmousemove = (e) => { if (!regionDrawingState.isDrawing) return; const rect = canvas.getBoundingClientRect(); const currentX = e.clientX - rect.left; const currentY = e.clientY - rect.top; // Clear and redraw ctx.clearRect(0, 0, canvas.width, canvas.height); drawExistingRegions(ctx); // Draw current selection ctx.strokeStyle = '#3B82F6'; ctx.lineWidth = 3; ctx.setLineDash([8, 4]); ctx.strokeRect( regionDrawingState.startX, regionDrawingState.startY, currentX - regionDrawingState.startX, currentY - regionDrawingState.startY ); ctx.fillStyle = 'rgba(59, 130, 246, 0.15)'; ctx.fillRect( regionDrawingState.startX, regionDrawingState.startY, currentX - regionDrawingState.startX, currentY - regionDrawingState.startY ); // Store current rect (normalized to positive width/height) regionDrawingState.currentRect = { x: Math.min(regionDrawingState.startX, currentX), y: Math.min(regionDrawingState.startY, currentY), width: Math.abs(currentX - regionDrawingState.startX), height: Math.abs(currentY - regionDrawingState.startY), // Store scale factors for converting to original PDF coordinates scaleX: img.naturalWidth / canvas.width, scaleY: img.naturalHeight / canvas.height }; }; canvas.onmouseup = () => { if (!regionDrawingState.isDrawing) return; regionDrawingState.isDrawing = false; // Only show classification if rectangle is large enough (min 50x50 pixels) if (regionDrawingState.currentRect && regionDrawingState.currentRect.width > 50 && regionDrawingState.currentRect.height > 50) { showRegionClassificationDialog(); } }; canvas.onmouseleave = () => { if (regionDrawingState.isDrawing) { regionDrawingState.isDrawing = false; } }; } /** * Draw existing regions on the canvas */ function drawExistingRegions(ctx) { const pageRegions = regionDrawingState.userRegions.filter( r => r.page_number === regionDrawingState.selectedPageNumber ); pageRegions.forEach(region => { ctx.strokeStyle = '#22c55e'; ctx.lineWidth = 2; ctx.setLineDash([]); ctx.strokeRect(region.display_x, region.display_y, region.display_width, region.display_height); ctx.fillStyle = 'rgba(34, 197, 94, 0.1)'; ctx.fillRect(region.display_x, region.display_y, region.display_width, region.display_height); // Draw label ctx.fillStyle = '#22c55e'; ctx.font = '12px sans-serif'; ctx.fillText(region.schedule_type.replace('_', ' '), region.display_x + 4, region.display_y + 14); }); } /** * Show the classification dialog after drawing a region */ function showRegionClassificationDialog() { const dialog = document.getElementById('classification-dialog'); if (dialog) { dialog.classList.add('visible'); } } /** * Hide the classification dialog */ function hideRegionClassificationDialog() { const dialog = document.getElementById('classification-dialog'); if (dialog) { dialog.classList.remove('visible'); } // Clear the current rect if not saved regionDrawingState.currentRect = null; // Redraw canvas const canvas = document.getElementById('region-drawing-canvas'); if (canvas) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); drawExistingRegions(ctx); } } /** * Save a user-drawn region with the selected schedule type */ async function saveUserRegion(scheduleType) { if (!regionDrawingState.currentRect || !regionDrawingState.selectedPageNumber) { hideRegionClassificationDialog(); return; } const sessionId = sharedState.session.id || sharedState.session.sessionId; const rect = regionDrawingState.currentRect; // Convert display coordinates to PDF coordinates const boundingBox = { x: Math.round(rect.x * rect.scaleX), y: Math.round(rect.y * rect.scaleY), width: Math.round(rect.width * rect.scaleX), height: Math.round(rect.height * rect.scaleY) }; // Store locally for display const localRegion = { page_number: regionDrawingState.selectedPageNumber, schedule_type: scheduleType, bounding_box: boundingBox, display_x: rect.x, display_y: rect.y, display_width: rect.width, display_height: rect.height, detection_method: 'user_identified', created_at: new Date().toISOString() }; regionDrawingState.userRegions.push(localRegion); // Try to save to API try { const response = await fetch(`${API_BASE_URL}/api/hardware-schedule/session/${sessionId}/candidates`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authState.token}` }, body: JSON.stringify({ page_number: regionDrawingState.selectedPageNumber, schedule_type: scheduleType, bounding_box: boundingBox, detection_method: 'user_identified' }) }); if (response.ok) { Telemetry.logAction('saveUserRegion', `Saved ${scheduleType} region on page ${regionDrawingState.selectedPageNumber}`); } else { console.warn('[HGSE] API save failed, region stored locally'); } } catch (error) { console.warn('[HGSE] API save error, region stored locally:', error.message); } // Hide dialog hideRegionClassificationDialog(); // Redraw canvas with new region const canvas = document.getElementById('region-drawing-canvas'); if (canvas) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); drawExistingRegions(ctx); } // Update thumbnail badge const thumb = document.querySelector(`.page-thumbnail[data-page="${regionDrawingState.selectedPageNumber}"]`); if (thumb) { thumb.classList.add('has-regions'); } // Clear current rect regionDrawingState.currentRect = null; } /** * Select entire page as region (quick action) */ function selectEntirePage() { const canvas = document.getElementById('region-drawing-canvas'); const img = document.getElementById('region-page-image'); if (!canvas || !img) return; regionDrawingState.currentRect = { x: 0, y: 0, width: canvas.width, height: canvas.height, scaleX: img.naturalWidth / canvas.width, scaleY: img.naturalHeight / canvas.height }; // Draw the full-page selection const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); drawExistingRegions(ctx); ctx.strokeStyle = '#3B82F6'; ctx.lineWidth = 3; ctx.setLineDash([8, 4]); ctx.strokeRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'rgba(59, 130, 246, 0.15)'; ctx.fillRect(0, 0, canvas.width, canvas.height); showRegionClassificationDialog(); } /** * Get user-defined regions for a specific page */ function getUserRegionsForPage(pageNumber) { return regionDrawingState.userRegions.filter(r => r.page_number === pageNumber); } /** * Get all user-defined regions */ function getAllUserRegions() { return regionDrawingState.userRegions; } // =========================== // CH-2026-0122-REGION-002: PDF Viewer Region Selection Overlay // Eliminates server-side preview rendering by using existing PDF viewer canvas // =========================== // Overlay-specific state const regionOverlayState = { active: false, drawing: false, startX: 0, startY: 0, currentRect: null, pageNumber: 1, totalPages: 1, drawingCanvas: null, imageElement: null, // FX-2026-0122-REGION-003: High-res zoom/pan state baseScale: 3.0, // High-res render scale (3x = 216 DPI equivalent) viewportZoom: 1.0, // Additional viewport zoom on top of base minViewportZoom: 0.33, // Minimum viewport zoom (allows zooming out from 3x) maxViewportZoom: 2.0, // Maximum viewport zoom (3x * 2 = 600% effective) zoomStep: 0.25, // Zoom increment per button click isPanMode: false, // Spacebar pan mode active isPanning: false, // Currently dragging to pan panStartX: 0, panStartY: 0, scrollStartX: 0, scrollStartY: 0, // Canvas dimensions for coordinate normalization sourceCanvasWidth: 0, sourceCanvasHeight: 0, // FX-003 Enhancement: Rotation state rotation: 0 // 0, 90, 180, 270 degrees }; // 10E_FXB: Debounce timer for hi-res re-render after zoom settles let renderDebounceTimer = null; /** * FX-2026-0122-REGION-003: Render PDF page at high resolution for region selection * Implements memory safety cap at 4096×4096 pixels * @param {number} pageNumber - Page to render * @param {number} scale - Render scale (default 3.0 = 216 DPI equivalent) * @returns {Promise<{canvas: HTMLCanvasElement, actualScale: number}>} */ async function renderPdfPageHighRes(pageNumber, scale = 3.0) { const MAX_DIMENSION = 8192; // Memory safety cap (raised for 600% zoom) if (!pdfDocument) { throw new Error('PDF document not loaded'); } const page = await pdfDocument.getPage(pageNumber); let viewport = page.getViewport({ scale }); // Calculate actual scale to fit within memory cap let actualScale = scale; if (viewport.width > MAX_DIMENSION || viewport.height > MAX_DIMENSION) { const widthScale = MAX_DIMENSION / (viewport.width / scale); const heightScale = MAX_DIMENSION / (viewport.height / scale); actualScale = Math.min(widthScale, heightScale, scale); viewport = page.getViewport({ scale: actualScale }); console.log(`[Region Hi-Res] Capped scale from ${scale}x to ${actualScale.toFixed(2)}x for memory safety`); } // Create offscreen canvas const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = Math.floor(viewport.width); canvas.height = Math.floor(viewport.height); // Render PDF page to canvas await page.render({ canvasContext: context, viewport: viewport }).promise; console.log(`[Region Hi-Res] Rendered page ${pageNumber} at ${actualScale}x (${canvas.width}×${canvas.height})`); return { canvas, actualScale }; } /** * FX-2026-0122-REGION-003: Update zoom indicator display * Shows effective scale (baseScale × viewportZoom) */ function updateRegionZoomIndicator() { const indicator = document.getElementById('region-zoom-indicator'); if (indicator) { const effectiveZoom = Math.round(regionOverlayState.baseScale * regionOverlayState.viewportZoom * 100); indicator.textContent = `${effectiveZoom}%`; } } /** * 10E_FXB: Hybrid zoom — instant CSS dimensions + debounced hi-res re-render * Replaces transform:scale approach for proper scroll behavior at all zoom levels */ function applyRegionViewportZoom(skipReRender = false) { const img = document.getElementById('region-overlay-page-image'); const canvas = document.getElementById('region-draw-canvas'); const container = document.querySelector('#region-drawing-layer .page-container'); if (!container || !img) return; const zoom = regionOverlayState.viewportZoom; const rotation = regionOverlayState.rotation; const naturalWidth = img.naturalWidth || regionOverlayState.sourceCanvasWidth; const naturalHeight = img.naturalHeight || regionOverlayState.sourceCanvasHeight; // ZOOM affects image size (no rotation swap — image stays undistorted) const scaledWidth = naturalWidth * zoom; const scaledHeight = naturalHeight * zoom; // ROTATION determines container dimensions (for scroll bounds) const isRotated90or270 = (rotation === 90 || rotation === 270); const containerWidth = isRotated90or270 ? scaledHeight : scaledWidth; const containerHeight = isRotated90or270 ? scaledWidth : scaledHeight; // Container gets EXPLICIT dimensions (not min-) to prevent content override container.style.width = containerWidth + 'px'; container.style.height = containerHeight + 'px'; container.style.position = 'relative'; // Image/canvas are positioned absolutely and centered, then rotated // This keeps image undistorted while allowing container to have rotated bounds const imgStyle = ` position: absolute; left: 50%; top: 50%; width: ${scaledWidth}px; height: ${scaledHeight}px; transform: translate(-50%, -50%) rotate(${rotation}deg); transform-origin: center center; `; img.style.cssText = imgStyle; if (canvas) { canvas.style.cssText = imgStyle; } // Clear the CSS variable (no longer using container rotation) container.style.setProperty('--rotation', '0deg'); updateRegionZoomIndicator(); // SETTLED: Debounced re-render for quality (only if zoom changed, not rotation) if (!skipReRender) { clearTimeout(renderDebounceTimer); renderDebounceTimer = setTimeout(() => reRenderAtCurrentZoom(), 400); } } /** * 10E_FXB WS1-T2: Re-render at current effective scale for hi-res quality * Only triggers if zoomed beyond base scale */ async function reRenderAtCurrentZoom() { const effectiveScale = regionOverlayState.baseScale * regionOverlayState.viewportZoom; const maxScale = 10; // Cap at 720 DPI equivalent const targetScale = Math.min(effectiveScale, maxScale); // Skip re-render if at or near optimal scale (avoid unnecessary work) if (targetScale <= regionOverlayState.baseScale * 1.1) { console.log('[Region Hi-Res] Skip re-render — at/near optimal scale'); return; } showReRenderIndicator(); regionOverlayState.isReRendering = true; // Prevent onload from re-initializing console.log(`[Region Hi-Res] Re-rendering at ${targetScale.toFixed(1)}x...`); try { const { canvas: hiResCanvas, actualScale } = await renderPdfPageHighRes( regionOverlayState.pageNumber, targetScale ); const img = document.getElementById('region-overlay-page-image'); const drawCanvas = document.getElementById('region-draw-canvas'); // Preserve scroll position as percentage before dimension change const drawingLayer = document.getElementById('region-drawing-layer'); const scrollPctX = drawingLayer.scrollWidth > 0 ? drawingLayer.scrollLeft / drawingLayer.scrollWidth : 0; const scrollPctY = drawingLayer.scrollHeight > 0 ? drawingLayer.scrollTop / drawingLayer.scrollHeight : 0; // Update image with hi-res render — wait for load before continuing // This ensures original onload handler sees isReRendering=true and skips img.src = hiResCanvas.toDataURL('image/png'); await new Promise(resolve => { const handler = () => { img.removeEventListener('load', handler); resolve(); }; img.addEventListener('load', handler); }); // Now safe to update state — original onload already fired and skipped regionOverlayState.baseScale = actualScale; regionOverlayState.viewportZoom = 1.0; regionOverlayState.sourceCanvasWidth = hiResCanvas.width; regionOverlayState.sourceCanvasHeight = hiResCanvas.height; // Update drawing canvas buffer dimensions (not CSS — that's handled by applyRegionViewportZoom) if (drawCanvas) { drawCanvas.width = hiResCanvas.width; drawCanvas.height = hiResCanvas.height; } // Let applyRegionViewportZoom handle all CSS dimensions (rotation-aware) // Clear debounce first to prevent re-triggering re-render clearTimeout(renderDebounceTimer); applyRegionViewportZoom(); // Cancel any debounced re-render it may have triggered (we just finished one) clearTimeout(renderDebounceTimer); // Restore scroll position drawingLayer.scrollLeft = scrollPctX * drawingLayer.scrollWidth; drawingLayer.scrollTop = scrollPctY * drawingLayer.scrollHeight; regionOverlayState.isReRendering = false; // Clear flag after onload handled hideReRenderIndicator(); console.log(`[Region Hi-Res] Re-rendered at ${actualScale.toFixed(1)}x (${hiResCanvas.width}×${hiResCanvas.height})`); } catch (e) { regionOverlayState.isReRendering = false; // Clear flag on error console.error('[Region Hi-Res] Re-render failed:', e); hideReRenderIndicator(); } } /** * 10E_FXB WS1-T3: Show loading indicator during hi-res re-render */ function showReRenderIndicator() { let indicator = document.querySelector('.rerender-indicator'); if (!indicator) { indicator = document.createElement('div'); indicator.className = 'rerender-indicator'; indicator.innerHTML = ' Enhancing...'; const overlay = document.getElementById('region-selector-overlay'); if (overlay) overlay.appendChild(indicator); } indicator.classList.add('visible'); } /** * 10E_FXB WS1-T3: Hide loading indicator after re-render */ function hideReRenderIndicator() { const indicator = document.querySelector('.rerender-indicator'); if (indicator) { indicator.classList.remove('visible'); } } /** * FX-003 Enhancement: Rotate view clockwise 90° */ function regionRotateCW() { console.log('[Region Rotate] CW clicked, current:', regionOverlayState.rotation); regionOverlayState.rotation = (regionOverlayState.rotation + 90) % 360; applyRegionViewportZoom(true); // skipReRender — rotation is visual only // QF-001: Re-fit after rotation since container dimensions swap setTimeout(() => regionFitToView(true), 50); // Also skip re-render in fit console.log('[Region Rotate] CW applied, new:', regionOverlayState.rotation); } /** * FX-003 Enhancement: Rotate view counter-clockwise 90° */ function regionRotateCCW() { console.log('[Region Rotate] CCW clicked, current:', regionOverlayState.rotation); regionOverlayState.rotation = (regionOverlayState.rotation - 90 + 360) % 360; applyRegionViewportZoom(true); // skipReRender — rotation is visual only // QF-001: Re-fit after rotation since container dimensions swap setTimeout(() => regionFitToView(true), 50); // Also skip re-render in fit console.log('[Region Rotate] CCW applied, new:', regionOverlayState.rotation); } /** * FX-003 Enhancement: Transform coordinates from rotated view back to original PDF orientation */ function transformToOriginalOrientation(rect, canvasWidth, canvasHeight, rotation) { if (rotation === 0) return { ...rect, refWidth: canvasWidth, refHeight: canvasHeight }; const r = rect; switch (rotation) { case 90: return { x: r.y, y: canvasWidth - r.x - r.width, width: r.height, height: r.width, refWidth: canvasHeight, refHeight: canvasWidth }; case 180: return { x: canvasWidth - r.x - r.width, y: canvasHeight - r.y - r.height, width: r.width, height: r.height, refWidth: canvasWidth, refHeight: canvasHeight }; case 270: return { x: canvasHeight - r.y - r.height, y: r.x, width: r.height, height: r.width, refWidth: canvasHeight, refHeight: canvasWidth }; default: return { ...rect, refWidth: canvasWidth, refHeight: canvasHeight }; } } /** * FX-2026-0122-REGION-003: Zoom in region selector */ function regionZoomIn() { regionOverlayState.viewportZoom = Math.min( regionOverlayState.maxViewportZoom, regionOverlayState.viewportZoom + regionOverlayState.zoomStep ); applyRegionViewportZoom(); console.log(`[Region Zoom] In: ${Math.round(regionOverlayState.viewportZoom * 100)}% viewport, ${Math.round(regionOverlayState.baseScale * regionOverlayState.viewportZoom * 100)}% effective`); } /** * FX-2026-0122-REGION-003: Zoom out region selector */ function regionZoomOut() { regionOverlayState.viewportZoom = Math.max( regionOverlayState.minViewportZoom, regionOverlayState.viewportZoom - regionOverlayState.zoomStep ); applyRegionViewportZoom(); console.log(`[Region Zoom] Out: ${Math.round(regionOverlayState.viewportZoom * 100)}% viewport, ${Math.round(regionOverlayState.baseScale * regionOverlayState.viewportZoom * 100)}% effective`); } /** * FX-2026-0122-REGION-003: Reset zoom to base scale (100% viewport = 300% effective) */ function regionResetZoom() { regionOverlayState.viewportZoom = 1.0; applyRegionViewportZoom(); // Reset scroll position const drawingLayer = document.getElementById('region-drawing-layer'); if (drawingLayer) { drawingLayer.scrollTop = 0; drawingLayer.scrollLeft = 0; } console.log('[Region Zoom] Reset to 100% viewport (300% effective)'); } /** * FX-2026-0122-REGION-003: Fit to view (calculate zoom to fit container) * @param {boolean} skipReRender - If true, don't trigger hi-res re-render (for rotation) */ function regionFitToView(skipReRender = false) { const drawingLayer = document.getElementById('region-drawing-layer'); const container = document.querySelector('#region-drawing-layer .page-container'); if (!drawingLayer || !container) return; // Get container's natural dimensions (at 1.0 viewport zoom) const tempZoom = regionOverlayState.viewportZoom; container.style.transform = 'scale(1)'; const naturalWidth = container.offsetWidth; const naturalHeight = container.offsetHeight; // QF-2026-0123-REGION-001: Clear inline transform so CSS custom properties apply container.style.transform = ''; // Calculate zoom to fit const availableWidth = drawingLayer.clientWidth - 40; // padding const availableHeight = drawingLayer.clientHeight - 40; const fitZoom = Math.min( availableWidth / naturalWidth, availableHeight / naturalHeight, regionOverlayState.maxViewportZoom ); regionOverlayState.viewportZoom = Math.max(regionOverlayState.minViewportZoom, fitZoom); applyRegionViewportZoom(skipReRender); // Pass through skipReRender console.log(`[Region Zoom] Fit to view: ${Math.round(regionOverlayState.viewportZoom * 100)}% viewport`); } /** * FX-2026-0122-REGION-003: Initialize wheel event navigation for touchpad support * 10E_FXB WS3: Alt+wheel horizontal scroll, scroll-during-selection support * Windows Precision Touchpad: Pinch = wheel + ctrlKey, Two-finger scroll = wheel deltaX/deltaY */ function initRegionWheelNavigation(container) { container.addEventListener('wheel', (e) => { // WS3-T1: Alt + Wheel → Horizontal scroll if (e.altKey) { e.preventDefault(); container.scrollLeft += e.deltaY; return; } // Ctrl + Wheel → Zoom (even during selection per WS3-T2) if (e.ctrlKey) { e.preventDefault(); const zoomDelta = e.deltaY > 0 ? -0.1 : 0.1; regionOverlayState.viewportZoom = Math.max( regionOverlayState.minViewportZoom, Math.min(regionOverlayState.maxViewportZoom, regionOverlayState.viewportZoom + zoomDelta) ); applyRegionViewportZoom(); return; } // Plain wheel → Let browser handle naturally (enables scroll-during-selection WS3-T2) // No preventDefault, no manual handling — browser does the right thing }, { passive: false }); console.log('[Region Wheel] Initialized wheel navigation (Alt+wheel=horiz, Ctrl+wheel=zoom)'); } /** * FX-2026-0122-REGION-003: Initialize pan mode (spacebar + drag) */ function initRegionPanMode() { const drawingLayer = document.getElementById('region-drawing-layer'); if (!drawingLayer) return; // Spacebar toggle for pan mode document.addEventListener('keydown', (e) => { if (e.code === 'Space' && regionOverlayState.active && !regionOverlayState.isPanMode) { e.preventDefault(); regionOverlayState.isPanMode = true; drawingLayer.classList.add('pan-mode'); showPanHint('Pan mode - drag to move view'); } }); document.addEventListener('keyup', (e) => { if (e.code === 'Space' && regionOverlayState.active) { regionOverlayState.isPanMode = false; regionOverlayState.isPanning = false; drawingLayer.classList.remove('pan-mode'); hidePanHint(); } }); // Mouse drag for panning when in pan mode drawingLayer.addEventListener('mousedown', (e) => { if (regionOverlayState.isPanMode) { e.preventDefault(); regionOverlayState.isPanning = true; regionOverlayState.panStartX = e.clientX; regionOverlayState.panStartY = e.clientY; regionOverlayState.scrollStartX = drawingLayer.scrollLeft; regionOverlayState.scrollStartY = drawingLayer.scrollTop; } }); drawingLayer.addEventListener('mousemove', (e) => { if (regionOverlayState.isPanning && regionOverlayState.isPanMode) { const dx = e.clientX - regionOverlayState.panStartX; const dy = e.clientY - regionOverlayState.panStartY; drawingLayer.scrollLeft = regionOverlayState.scrollStartX - dx; drawingLayer.scrollTop = regionOverlayState.scrollStartY - dy; } }); drawingLayer.addEventListener('mouseup', () => { regionOverlayState.isPanning = false; }); drawingLayer.addEventListener('mouseleave', () => { regionOverlayState.isPanning = false; }); console.log('[Region Pan] Initialized spacebar + drag pan mode'); } /** * FX-2026-0122-REGION-003: Show pan hint tooltip */ function showPanHint(message) { let hint = document.querySelector('.pan-hint'); if (!hint) { hint = document.createElement('div'); hint.className = 'pan-hint'; document.getElementById('region-selector-overlay').appendChild(hint); } hint.textContent = message; hint.classList.add('visible'); } /** * FX-2026-0122-REGION-003: Hide pan hint tooltip */ function hidePanHint() { const hint = document.querySelector('.pan-hint'); if (hint) { hint.classList.remove('visible'); } } /** * 10E_FXB WS5: Keyboard shortcuts for accessibility * +/- zoom, PageUp/Down nav, Enter confirm, Escape clear/close, R rotate */ function initRegionKeyboardShortcuts() { const handler = (e) => { if (!regionOverlayState.active) return; // Don't interfere with spacebar (pan mode handled elsewhere) if (e.code === 'Space') return; switch (e.key) { case '+': case '=': e.preventDefault(); regionZoomIn(); break; case '-': e.preventDefault(); regionZoomOut(); break; case 'PageUp': e.preventDefault(); regionNavPrevPage(); break; case 'PageDown': e.preventDefault(); regionNavNextPage(); break; case 'Enter': if (regionOverlayState.currentRect) { e.preventDefault(); confirmRegionSelectionOverlay(); } break; case 'Escape': e.preventDefault(); if (regionOverlayState.currentRect) { // First Escape: clear selection clearRegionSelection(); } else { // Second Escape: close overlay closeRegionSelectorOverlay(); } break; case 'r': if (!e.shiftKey && !e.ctrlKey && !e.altKey) { e.preventDefault(); regionRotateCW(); } break; case 'R': if (e.shiftKey && !e.ctrlKey && !e.altKey) { e.preventDefault(); regionRotateCCW(); } break; } }; document.addEventListener('keydown', handler); // Store handler reference for cleanup regionOverlayState.keyboardHandler = handler; console.log('[Region Keyboard] Initialized shortcuts (+/- zoom, PgUp/Dn nav, Enter/Esc, R rotate)'); } /** * 10E_FXB WS5: Remove keyboard shortcuts when overlay closes */ function removeRegionKeyboardShortcuts() { if (regionOverlayState.keyboardHandler) { document.removeEventListener('keydown', regionOverlayState.keyboardHandler); regionOverlayState.keyboardHandler = null; } } /** * FX-2026-0122-REGION-003: Normalize coordinates to percentages (0.0-1.0) * @param {Object} rect - Rectangle {x, y, width, height} in canvas pixels * @param {number} canvasWidth - Source canvas width * @param {number} canvasHeight - Source canvas height * @returns {Object} Normalized coordinates {x_percent, y_percent, width_percent, height_percent} */ function normalizeCoordinates(rect, canvasWidth, canvasHeight) { return { x_percent: parseFloat((rect.x / canvasWidth).toFixed(6)), y_percent: parseFloat((rect.y / canvasHeight).toFixed(6)), width_percent: parseFloat((rect.width / canvasWidth).toFixed(6)), height_percent: parseFloat((rect.height / canvasHeight).toFixed(6)) }; } /** * Open the PDF viewer region selector overlay * CH-2026-0122-REGION-002: Uses existing PDF canvas instead of server-side previews * FX-2026-0122-REGION-003: Now renders at high resolution with zoom/pan support */ async function openRegionSelectorOverlay() { const sessionId = sharedState.session?.id || sharedState.session?.sessionId; if (!sessionId || sessionId.startsWith('session_')) { showCpsToast('Please upload a PDF first', 'error'); return; } // FX-2026-0122-REGION-003: Check if PDF document is loaded for high-res render if (!pdfDocument) { showCpsToast('PDF document not ready. Please wait for PDF to load.', 'error'); return; } // Initialize state regionOverlayState.pageNumber = sharedState.session?.currentPage || 1; regionOverlayState.totalPages = sharedState.session?.totalPages || 1; regionOverlayState.currentRect = null; regionOverlayState.active = true; regionOverlayState.viewportZoom = 1.0; // Reset zoom regionOverlayState.isPanMode = false; regionOverlayState.isPanning = false; regionOverlayState.rotation = sharedState.rotation || 0; // Sync with main viewer rotation // 27A: Auto-focus on first detected schedule page (once per session) if (sharedState.session?.detectedSchedulePages && sharedState.session.detectedSchedulePages.length > 0 && !sharedState.session.hasAutoFocused) { const firstDetected = sharedState.session.detectedSchedulePages[0]; if (firstDetected && firstDetected.page) { regionOverlayState.pageNumber = firstDetected.page; console.log(`[27A] Auto-focusing region selector on detected schedule page ${firstDetected.page} (${firstDetected.title})`); } sharedState.session.hasAutoFocused = true; } // Build the drawing layer content const drawingLayer = document.getElementById('region-drawing-layer'); if (!drawingLayer) return; drawingLayer.innerHTML = ''; drawingLayer.classList.add('highres-mode'); // Enable high-res scrollable mode // Show loading state showCpsToast('Rendering high-resolution view...', 'info'); try { // FX-2026-0122-REGION-003: Render PDF at high resolution const { canvas: hiResCanvas, actualScale } = await renderPdfPageHighRes( regionOverlayState.pageNumber, regionOverlayState.baseScale ); regionOverlayState.baseScale = actualScale; // Store actual scale (may be capped) regionOverlayState.sourceCanvasWidth = hiResCanvas.width; regionOverlayState.sourceCanvasHeight = hiResCanvas.height; const container = document.createElement('div'); container.className = 'page-container'; // Create image from high-res canvas const img = document.createElement('img'); img.id = 'region-overlay-page-image'; img.src = hiResCanvas.toDataURL('image/png'); // Create drawing canvas overlay const drawCanvas = document.createElement('canvas'); drawCanvas.id = 'region-draw-canvas'; img.onload = () => { // 10E_FXB: Skip re-init if this is a hi-res re-render (not initial load) if (regionOverlayState.isReRendering) { console.log('[Region Hi-Res] Skipping re-init (re-render in progress)'); return; } // Size drawing canvas to match image (at full resolution) drawCanvas.width = img.naturalWidth; drawCanvas.height = img.naturalHeight; drawCanvas.style.width = img.naturalWidth + 'px'; drawCanvas.style.height = img.naturalHeight + 'px'; regionOverlayState.imageElement = img; regionOverlayState.drawingCanvas = drawCanvas; initOverlayDrawingHandlers(drawCanvas, img); // FX-2026-0122-REGION-003: Initialize wheel navigation for touchpad initRegionWheelNavigation(drawingLayer); // Update zoom indicator updateRegionZoomIndicator(); // Apply initial fit-to-view zoom setTimeout(() => regionFitToView(), 100); console.log(`[Region Hi-Res] Initialized on page ${regionOverlayState.pageNumber} at ${actualScale}x (${hiResCanvas.width}×${hiResCanvas.height})`); }; container.appendChild(img); container.appendChild(drawCanvas); drawingLayer.appendChild(container); } catch (error) { console.error('[Region Hi-Res] Failed to render:', error); showCpsToast('Failed to render high-resolution view: ' + error.message, 'error'); return; } // Update page indicator updateRegionOverlayPageIndicator(); // Reset confirm button document.getElementById('region-confirm-btn').disabled = true; // Show overlay document.getElementById('region-selector-overlay').classList.add('visible'); // FX-2026-0122-REGION-003: Initialize pan mode initRegionPanMode(); // 10E_FXB WS5: Initialize keyboard shortcuts initRegionKeyboardShortcuts(); Telemetry.logAction('openRegionSelectorOverlay', `Opened on page ${regionOverlayState.pageNumber} at ${regionOverlayState.baseScale}x`); } /** * Close the region selector overlay */ function closeRegionSelectorOverlay() { const overlay = document.getElementById('region-selector-overlay'); if (overlay) { overlay.classList.remove('visible'); } // FX-2026-0122-REGION-003: Reset high-res mode and zoom state const drawingLayer = document.getElementById('region-drawing-layer'); if (drawingLayer) { drawingLayer.classList.remove('highres-mode'); drawingLayer.classList.remove('pan-mode'); } regionOverlayState.active = false; regionOverlayState.currentRect = null; regionOverlayState.drawing = false; regionOverlayState.isPanMode = false; regionOverlayState.isPanning = false; regionOverlayState.viewportZoom = 1.0; // 10E_FXB WS5: Remove keyboard shortcuts removeRegionKeyboardShortcuts(); // Reset confirm button const confirmBtn = document.getElementById('region-confirm-btn'); if (confirmBtn) confirmBtn.disabled = true; // 26M: Reset targeted mode if active if (reExtractState.active && !reExtractState.pendingNewGroup) { // Only reset if we haven't received extraction results yet // (if we have results, the comparison UI is showing) resetRegionSelectorFromTargetedMode(); reExtractState.active = false; } // CH-2026-0212-QUEUE-001: Reset queue mode if active if (extractionQueueState.returnFromOverlay) { resetRegionSelectorFromQueueMode(); extractionQueueState.returnFromOverlay = false; extractionQueueState.currentConfigIndex = null; } Telemetry.logAction('closeRegionSelectorOverlay', 'Closed region selector overlay'); } /** * Initialize drawing handlers for the overlay canvas * FX-2026-0122-REGION-003: Skip drawing when in pan mode */ /** * 10E_FXB: Convert screen coordinates to canvas buffer coordinates * Accounts for CSS rotation transform — getBoundingClientRect() returns * rotated bounds but canvas buffer is unrotated */ function getCanvasCoordinates(e, canvas) { const rect = canvas.getBoundingClientRect(); const rotation = regionOverlayState.rotation; const bufferWidth = canvas.width; const bufferHeight = canvas.height; // Mouse position relative to rotated bounding box const relX = e.clientX - rect.left; const relY = e.clientY - rect.top; // Un-rotate coordinates to buffer space let bufferX, bufferY; switch (rotation) { case 0: bufferX = (relX / rect.width) * bufferWidth; bufferY = (relY / rect.height) * bufferHeight; break; case 90: // Rotated 90° CW: visual X maps to buffer Y (inverted), visual Y maps to buffer X bufferX = (relY / rect.height) * bufferWidth; bufferY = ((rect.width - relX) / rect.width) * bufferHeight; break; case 180: // Rotated 180°: both axes inverted bufferX = ((rect.width - relX) / rect.width) * bufferWidth; bufferY = ((rect.height - relY) / rect.height) * bufferHeight; break; case 270: // Rotated 270° CW (90° CCW): visual Y maps to buffer X (inverted), visual X maps to buffer Y bufferX = ((rect.height - relY) / rect.height) * bufferWidth; bufferY = (relX / rect.width) * bufferHeight; break; default: bufferX = (relX / rect.width) * bufferWidth; bufferY = (relY / rect.height) * bufferHeight; } return { x: bufferX, y: bufferY }; } function initOverlayDrawingHandlers(canvas, img) { const ctx = canvas.getContext('2d'); canvas.onmousedown = (e) => { // FX-2026-0122-REGION-003: Skip drawing when in pan mode if (regionOverlayState.isPanMode) return; regionOverlayState.drawing = true; const coords = getCanvasCoordinates(e, canvas); regionOverlayState.startX = coords.x; regionOverlayState.startY = coords.y; }; canvas.onmousemove = (e) => { if (!regionOverlayState.drawing || regionOverlayState.isPanMode) return; // FX-003 Enhancement: Auto-pan when drawing near viewport edges const container = document.getElementById('region-drawing-layer'); if (container && regionOverlayState.drawing) { const containerRect = container.getBoundingClientRect(); const edgeThreshold = 50; const scrollSpeed = 15; if (e.clientY - containerRect.top < edgeThreshold) { container.scrollTop -= scrollSpeed; } if (containerRect.bottom - e.clientY < edgeThreshold) { container.scrollTop += scrollSpeed; } if (e.clientX - containerRect.left < edgeThreshold) { container.scrollLeft -= scrollSpeed; } if (containerRect.right - e.clientX < edgeThreshold) { container.scrollLeft += scrollSpeed; } } const coords = getCanvasCoordinates(e, canvas); const currentX = coords.x; const currentY = coords.y; // Clear and redraw ctx.clearRect(0, 0, canvas.width, canvas.height); // Calculate normalized rectangle const x = Math.min(regionOverlayState.startX, currentX); const y = Math.min(regionOverlayState.startY, currentY); const w = Math.abs(currentX - regionOverlayState.startX); const h = Math.abs(currentY - regionOverlayState.startY); // Draw selection rectangle ctx.strokeStyle = '#3B82F6'; ctx.lineWidth = 3; ctx.setLineDash([8, 4]); ctx.strokeRect(x, y, w, h); // Semi-transparent fill ctx.fillStyle = 'rgba(59, 130, 246, 0.15)'; ctx.fillRect(x, y, w, h); regionOverlayState.currentRect = { x, y, width: w, height: h }; }; canvas.onmouseup = () => { regionOverlayState.drawing = false; const rect = regionOverlayState.currentRect; // Enable confirm button if selection is large enough (min 20x20 pixels) const confirmBtn = document.getElementById('region-confirm-btn'); if (rect && rect.width > 20 && rect.height > 20) { confirmBtn.disabled = false; console.log('[Region Overlay] Selection:', rect); } else { confirmBtn.disabled = true; } }; // FX-003 Fix: Don't abort drawing on mouseleave - allow re-entry canvas.onmouseleave = () => { // Keep drawing state - user can re-enter canvas to continue // Only finalize on mouseup }; } /** * FX-003 Enhancement: Clear current selection */ function clearRegionSelection() { const canvas = document.getElementById('region-draw-canvas'); if (canvas) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); } regionOverlayState.currentRect = null; regionOverlayState.drawing = false; const confirmBtn = document.getElementById('region-confirm-btn'); if (confirmBtn) confirmBtn.disabled = true; } // FX-003 Fix: Global mouseup to finalize drawing even when released outside canvas document.addEventListener('mouseup', () => { if (regionOverlayState.active && regionOverlayState.drawing) { regionOverlayState.drawing = false; const rect = regionOverlayState.currentRect; const confirmBtn = document.getElementById('region-confirm-btn'); if (confirmBtn) { confirmBtn.disabled = !(rect && rect.width > 20 && rect.height > 20); } } }); /** * Update the page indicator in the overlay toolbar */ function updateRegionOverlayPageIndicator() { const indicator = document.getElementById('region-page-indicator'); if (indicator) { indicator.textContent = `Page ${regionOverlayState.pageNumber} of ${regionOverlayState.totalPages}`; indicator.style.display = ''; // 27A: Ensure indicator visible (reset from page input mode) } // 27A: Hide page input if it was open during navigation const pageInput = document.getElementById('region-page-input'); if (pageInput) pageInput.style.display = 'none'; const prevBtn = document.getElementById('region-prev-page'); const nextBtn = document.getElementById('region-next-page'); if (prevBtn) prevBtn.disabled = regionOverlayState.pageNumber <= 1; if (nextBtn) nextBtn.disabled = regionOverlayState.pageNumber >= regionOverlayState.totalPages; } /** * Navigate to previous page in region selector */ async function regionNavPrevPage() { if (regionOverlayState.pageNumber > 1) { regionOverlayState.pageNumber--; await navigateAndRefreshOverlay(); } } /** * Navigate to next page in region selector */ async function regionNavNextPage() { if (regionOverlayState.pageNumber < regionOverlayState.totalPages) { regionOverlayState.pageNumber++; await navigateAndRefreshOverlay(); } } /** * Navigate PDF viewer to new page and refresh the overlay */ async function navigateAndRefreshOverlay() { // Update main PDF viewer if (typeof goToPage === 'function') { await goToPage(regionOverlayState.pageNumber); } // Wait for PDF render to complete, then refresh overlay setTimeout(() => { refreshOverlayCanvas(); }, 400); } /** * Refresh the overlay canvas with current PDF page * FX-2026-0122-REGION-003: Now uses high-res render */ async function refreshOverlayCanvas() { if (!pdfDocument) return; const img = document.getElementById('region-overlay-page-image'); const drawCanvas = document.getElementById('region-draw-canvas'); const container = document.querySelector('#region-drawing-layer .page-container'); if (img && drawCanvas) { try { // FX-2026-0122-REGION-003: Render at high resolution const { canvas: hiResCanvas, actualScale } = await renderPdfPageHighRes( regionOverlayState.pageNumber, regionOverlayState.baseScale ); regionOverlayState.baseScale = actualScale; regionOverlayState.sourceCanvasWidth = hiResCanvas.width; regionOverlayState.sourceCanvasHeight = hiResCanvas.height; img.src = hiResCanvas.toDataURL('image/png'); img.onload = () => { drawCanvas.width = img.naturalWidth; drawCanvas.height = img.naturalHeight; drawCanvas.style.width = img.naturalWidth + 'px'; drawCanvas.style.height = img.naturalHeight + 'px'; // Clear any existing selection const ctx = drawCanvas.getContext('2d'); ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height); regionOverlayState.currentRect = null; document.getElementById('region-confirm-btn').disabled = true; initOverlayDrawingHandlers(drawCanvas, img); // Reset viewport zoom and rotation, then fit to view regionOverlayState.viewportZoom = 1.0; regionOverlayState.rotation = 0; // FX-003: Reset rotation on page change applyRegionViewportZoom(); setTimeout(() => regionFitToView(), 100); console.log(`[Region Hi-Res] Refreshed page ${regionOverlayState.pageNumber}`); }; } catch (e) { console.error('[Region Hi-Res] Failed to refresh canvas:', e); } } updateRegionOverlayPageIndicator(); } /** * Select entire page as region in overlay */ function selectEntirePageOverlay() { const canvas = document.getElementById('region-draw-canvas'); if (!canvas) return; regionOverlayState.currentRect = { x: 0, y: 0, width: canvas.width, height: canvas.height }; // Draw full-page selection const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = '#3B82F6'; ctx.lineWidth = 3; ctx.setLineDash([8, 4]); ctx.strokeRect(2, 2, canvas.width - 4, canvas.height - 4); ctx.fillStyle = 'rgba(59, 130, 246, 0.15)'; ctx.fillRect(2, 2, canvas.width - 4, canvas.height - 4); document.getElementById('region-confirm-btn').disabled = false; console.log('[Region Overlay] Entire page selected'); } /** * Confirm the region selection and save to API * FX-2026-0122-REGION-003: Now includes normalized coordinates (bounding_box_percent) */ async function confirmRegionSelectionOverlay() { // CH-2026-0212-QUEUE-001: If in queue mode, delegate to queue confirm handler if (extractionQueueState.returnFromOverlay && extractionQueueState.currentConfigIndex !== null) { return confirmQueueRegionConfig(); } const rect = regionOverlayState.currentRect; const scheduleType = document.getElementById('region-schedule-type-select').value; const sessionId = sharedState.session?.id || sharedState.session?.sessionId; if (!rect || !sessionId) { showCpsToast('Invalid selection', 'error'); return; } // FX-2026-0122-REGION-003: Calculate normalized coordinates (0.0-1.0) const canvasWidth = regionOverlayState.sourceCanvasWidth || regionOverlayState.drawingCanvas?.width || 1; const canvasHeight = regionOverlayState.sourceCanvasHeight || regionOverlayState.drawingCanvas?.height || 1; // FX-003 Enhancement: Transform from rotated view back to original PDF orientation let rectForNormalization = rect; let normWidth = canvasWidth; let normHeight = canvasHeight; if (regionOverlayState.rotation !== 0) { const transformed = transformToOriginalOrientation( rect, canvasWidth, canvasHeight, regionOverlayState.rotation ); rectForNormalization = { x: transformed.x, y: transformed.y, width: transformed.width, height: transformed.height }; normWidth = transformed.refWidth; normHeight = transformed.refHeight; } const normalizedCoords = normalizeCoordinates(rectForNormalization, normWidth, normHeight); // Disable button to prevent double-submit const confirmBtn = document.getElementById('region-confirm-btn'); confirmBtn.disabled = true; confirmBtn.textContent = 'Saving...'; try { const response = await fetch(`${API_BASE_URL}/api/hardware-schedule/session/${sessionId}/candidates`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authState.token}` }, body: JSON.stringify({ page_number: regionOverlayState.pageNumber, schedule_type: scheduleType, bounding_box: { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height) }, // FX-2026-0122-REGION-003: DPI-independent normalized coordinates bounding_box_percent: normalizedCoords, detection_method: 'user_drawn', render_scale: regionOverlayState.baseScale // Store the render scale used }) }); if (!response.ok) { const errorText = await response.text(); throw new Error(`Failed to save region: ${response.status} ${errorText}`); } const result = await response.json(); console.log('[Region Overlay] Candidate created:', result); // Also store locally for display regionDrawingState.userRegions.push({ page_number: regionOverlayState.pageNumber, schedule_type: scheduleType, bounding_box: rect, detection_method: 'user_drawn', created_at: new Date().toISOString() }); closeRegionSelectorOverlay(); showCpsToast('Region saved successfully!', 'success'); // Refresh candidates list if the function exists if (typeof loadCandidates === 'function') { loadCandidates(sessionId); } Telemetry.logAction('confirmRegionSelection', `Saved ${scheduleType} region on page ${regionOverlayState.pageNumber}`); } catch (error) { console.error('[Region Overlay] Save error:', error); showCpsToast('Failed to save region: ' + error.message, 'error'); confirmBtn.disabled = false; } finally { confirmBtn.textContent = 'Confirm Region'; } } // END CH-2026-0122-REGION-002 // =========================== // Close region selector on Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { // CH-2026-0122-REGION-002: Check new overlay first const regionOverlay = document.getElementById('region-selector-overlay'); if (regionOverlay && regionOverlay.classList.contains('visible')) { closeRegionSelectorOverlay(); return; } const classificationDialog = document.getElementById('classification-dialog'); if (classificationDialog && classificationDialog.classList.contains('visible')) { hideRegionClassificationDialog(); } else { const regionModal = document.getElementById('region-selector-modal'); if (regionModal && regionModal.classList.contains('visible')) { closeRegionSelector(); } } } });

[SubX Assistant] ×

Select Schedule Region

×

Select Entire Page Or drag to draw a rectangle around the schedule region

What type of schedule is this?

🚪 Door Schedule Door numbers, types, hardware groups 🔧 Hardware Schedule Locksets, hinges, closers, pulls 🎨 Finish Schedule Paint, flooring, wall materials 📋 Other/Unknown Let the system determine

Cancel

Select Schedule Region

← Prev Page 1 of 1 Next →

- 300% + Fit 100%

↺ ↻

×

Door Schedule Hardware Schedule Finish Schedule Other / Unknown Select Entire Page Clear Confirm Region Cancel

Cut Sheet Review

×

Loading cut sheet...

✓ Affirm Match ✗ Reject