Fixed more bugs ; qol changes

templates/_revision_notes_preact.html

@@ -81,6 +81,27 @@
     .crm-tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
     .crm-tool-btn { flex-direction: column; gap: 4px; padding: 10px; height: 60px; font-size: 0.75rem; }
     .crm-tool-btn i { font-size: 1.2rem; }
+    .crm-swatch-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }
+    .crm-swatch {
+        height: 30px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.18); cursor: pointer;
+        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
+    }
+    .crm-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
+    .crm-size-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
+    .crm-size-btn { height: 34px; padding: 0; }
+    .crm-size-dot { display: block; border-radius: 999px; background: currentColor; }
+    .crm-input-row {
+        display: flex; align-items: center; justify-content: space-between; gap: 10px;
+        margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
+        font-size: 0.8rem; color: var(--text-muted);
+    }
+    .crm-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
+    .crm-switch input { accent-color: var(--primary); }
+    .crm-badge {
+        display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px;
+        border-radius: 999px; background: rgba(16, 185, 129, 0.12); color: var(--success);
+        font-size: 0.72rem; font-weight: 600;
+    }
 
     /* Canvas Viewport */
     .crm-viewport {
@@ -90,10 +111,10 @@
         width: 100%; height: 100%;
         background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%), linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a1a 75%), linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
         background-size: 20px 20px; background-color: #111;
-        position: relative;
+        position: relative; display: flex; align-items: center; justify-content: center; padding: 20px;
     }
     .crm-canvas-container canvas {
-        box-shadow: 0 20px 50px rgba(0,0,0,0.5); touch-action: none; display: block;
+        box-shadow: 0 20px 50px rgba(0,0,0,0.5); touch-action: none; display: block; max-width: 100%; max-height: 100%; background: white;
     }
     .crm-canvas-container.tool-pen canvas, .crm-canvas-container.tool-marker canvas { cursor: crosshair; }
     .crm-canvas-container.tool-eraser canvas { cursor: cell; }
@@ -137,6 +158,8 @@
     import htm from 'https://esm.sh/htm@3.1.1';
 
     const html = htm.bind(h);
+    const QUICK_COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#06b6d4', '#3b82f6', '#111827'];
+    const QUICK_SIZES = [2, 4, 8, 14];
 
     // === Core Math Utilities ===
     function distSqToSegment(p, v, w) {
@@ -290,6 +313,9 @@
         const [uploadedImages, setUploadedImages] = useState([]);
         const [history, setHistory] = useState([]);
         const [historyIndex, setHistoryIndex] = useState(-1);
+        const [isSaving, setIsSaving] = useState(false);
+        const [stylusDetected, setStylusDetected] = useState(false);
+        const [allowTouchDrawing, setAllowTouchDrawing] = useState(false);
         
         // Core Engine Refs
         const bgImageRef = useRef(null); 
@@ -303,6 +329,29 @@
         const activePointerId = useRef(null);
         const dragState = useRef({ type: 'none', id: null });
         const isEraserActive = useRef(false);
+        const stylusDetectedRef = useRef(false);
+
+        const resizeCanvasToContainer = useCallback(() => {
+            const canvas = visibleCanvasRef.current;
+            const container = containerRef.current;
+            if (!canvas || !container) return;
+
+            const maxW = Math.max(320, container.clientWidth - 40);
+            const maxH = Math.max(320, container.clientHeight - 40);
+            const source = bgImageRef.current;
+            const aspect = source ? source.width / source.height : 4 / 3;
+            let width = maxW;
+            let height = width / aspect;
+            if (height > maxH) {
+                height = maxH;
+                width = height * aspect;
+            }
+
+            canvas.width = Math.round(width);
+            canvas.height = Math.round(height);
+            canvas.style.width = `${Math.round(width)}px`;
+            canvas.style.height = `${Math.round(height)}px`;
+        }, []);
 
         // --- Core Rendering Engine ---
         const renderCanvas = useCallback(() => {
@@ -313,7 +362,7 @@
             // 1. Base Layer
             ctx.fillStyle = '#ffffff';
             ctx.fillRect(0, 0, canvas.width, canvas.height);
-            if (bgImageRef.current) ctx.drawImage(bgImageRef.current, 0, 0);
+            if (bgImageRef.current) ctx.drawImage(bgImageRef.current, 0, 0, canvas.width, canvas.height);
             
             // 2. Images Layer (MUST be below strokes)
             imagesRef.current.forEach(img => {
@@ -427,8 +476,25 @@
             const container = containerRef.current;
             if (!canvas || !container) return;
 
-            canvas.width = container.clientWidth;
-            canvas.height = container.clientHeight;
+            resizeCanvasToContainer();
+
+            const loadBackground = (src, saveInitialState = true) => {
+                const img = new Image();
+                img.crossOrigin = "anonymous";
+                img.onload = () => {
+                    bgImageRef.current = img;
+                    resizeCanvasToContainer();
+                    renderCanvas();
+                    if (saveInitialState) saveState();
+                };
+                img.src = src;
+            };
+            const loadBlankCanvas = () => {
+                bgImageRef.current = null;
+                resizeCanvasToContainer();
+                renderCanvas();
+                saveState();
+            };
 
             const fetchNote = async () => {
                 try {
@@ -442,26 +508,18 @@
                             })).filter(p => p.data));
                         }
                         if (data.success && data.image_data) {
-                            const img = new Image();
-                            img.crossOrigin = "anonymous";
-                            img.onload = () => { 
-                                bgImageRef.current = img;
-                                renderCanvas();
-                                saveState(); 
-                            };
-                            img.src = data.image_data;
-                        } else saveState();
-                    } else saveState();
-                } catch (e) { saveState(); }
+                            loadBackground(data.image_data);
+                        } else loadBlankCanvas();
+                    } else loadBlankCanvas();
+                } catch (e) {
+                    loadBlankCanvas();
+                }
             };
             fetchNote();
 
             const handleResize = () => {
-                if (container.clientWidth !== canvas.width) {
-                    canvas.width = container.clientWidth;
-                    canvas.height = container.clientHeight;
-                    renderCanvas();
-                }
+                resizeCanvasToContainer();
+                renderCanvas();
             };
             
             const handleKeyDown = (e) => {
@@ -508,8 +566,17 @@
         // --- Interaction Handlers ---
         const handlePointerDown = useCallback((e) => {
             e.preventDefault();
+            if (e.button && e.button !== 0) return;
+            if (e.pointerType === 'pen' && !stylusDetectedRef.current) {
+                stylusDetectedRef.current = true;
+                setStylusDetected(true);
+            }
+            if (tool !== 'move' && e.pointerType === 'touch' && stylusDetectedRef.current && !allowTouchDrawing) {
+                return;
+            }
             if (activePointerId.current !== null) return; 
             activePointerId.current = e.pointerId;
+            visibleCanvasRef.current?.setPointerCapture?.(e.pointerId);
 
             const rect = visibleCanvasRef.current.getBoundingClientRect();
             const x = e.clientX - rect.left;
@@ -551,10 +618,13 @@
                 isEraserActive.current = true;
                 executeStrokeEraser(x, y);
             } else {
-                currentPathRef.current = { id: Date.now(), tool: tool, color: color, size: size, points: [{x, y}] };
+                const pressureScale = e.pointerType === 'pen' && e.pressure
+                    ? Math.max(0.55, Math.min(1.5, e.pressure * 1.35))
+                    : 1;
+                currentPathRef.current = { id: Date.now(), tool: tool, color: color, size: size * pressureScale, points: [{x, y}] };
                 renderCanvas(); // Synchronous for immediate dot placement
             }
-        }, [tool, color, size, renderCanvas, executeStrokeEraser]);
+        }, [tool, color, size, renderCanvas, executeStrokeEraser, allowTouchDrawing]);
 
         const handlePointerMove = useCallback((e) => {
             if (activePointerId.current !== e.pointerId) return;
@@ -597,6 +667,10 @@
 
         const handlePointerUp = useCallback((e) => {
             if (activePointerId.current !== e.pointerId) return;
+            const canvas = visibleCanvasRef.current;
+            if (canvas?.hasPointerCapture?.(e.pointerId)) {
+                canvas.releasePointerCapture(e.pointerId);
+            }
             
             if (currentPathRef.current) {
                 pathsRef.current.push(currentPathRef.current);
@@ -625,6 +699,7 @@
         }, [renderCanvas, saveState]);
 
         const handleSave = useCallback(async () => {
+            if (isSaving) return;
             selectedFloatingIdRef.current = null;
             renderCanvas(); // Strip selection UI
 
@@ -632,6 +707,7 @@
             const imageData = canvas.toDataURL('image/png');
 
             try {
+                setIsSaving(true);
                 const response = await fetch('/save_note_json', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -641,15 +717,17 @@
                 const result = await response.json();
                 if (result.success) {
                     if (window.showStatus) window.showStatus('Notes saved!', 'success');
+                    if (window.markRevisionNoteSaved) window.markRevisionNoteSaved(imageId);
                     onClose();
-                    setTimeout(() => location.reload(), 300);
                 } else {
                     if (window.showStatus) window.showStatus('Error: ' + result.error, 'danger');
                 }
             } catch (e) {
                 if (window.showStatus) window.showStatus(e.message, 'danger');
+            } finally {
+                setIsSaving(false);
             }
-        }, [imageId, sessionId, onClose, renderCanvas]);
+        }, [imageId, sessionId, onClose, renderCanvas, isSaving]);
 
         const handleImageToCanvas = useCallback((imgDataUrl) => {
             const img = new Image();
@@ -685,13 +763,16 @@
             <div class="crm-modal-overlay">
                 <header class="crm-header">
                     <div style="font-weight: 700; display: flex; align-items: center; gap: 10px;">
-                        <i class="bi bi-palette" style="color: var(--primary);"></i> ColorRM Notes Pro
+                        <i class="bi bi-pencil-square" style="color: var(--primary);"></i> Revision Notes
                     </div>
                     <div style="display: flex; gap: 8px;">
-                        <button class="crm-btn crm-btn-primary" onClick=${handleSave}>
-                            <i class="bi bi-check2"></i> Save Changes
+                        <button class="crm-btn" onClick=${() => restoreState(historyIndex - 1)} disabled=${historyIndex <= 0 || isSaving} title="Undo">
+                            <i class="bi bi-arrow-counterclockwise"></i>
+                        </button>
+                        <button class="crm-btn crm-btn-primary" onClick=${handleSave} disabled=${isSaving}>
+                            <i class="bi ${isSaving ? 'bi-hourglass-split' : 'bi-check2'}"></i> ${isSaving ? 'Saving...' : 'Save'}
                         </button>
-                        <button class="crm-btn" onClick=${onClose}>
+                        <button class="crm-btn" onClick=${onClose} disabled=${isSaving} title="Close">
                             <i class="bi bi-x-lg"></i>
                         </button>
                     </div>
@@ -704,12 +785,19 @@
                                 <h4>Tools</h4>
                                 <div class="crm-tool-row">
                                     <${ToolButton} icon="bi bi-pen" label="Pen" active=${tool === 'pen'} onClick=${() => setTool('pen')} />
-                                    <${ToolButton} icon="bi bi-highlighter" label="Marker" active=${tool === 'marker'} onClick=${() => setTool('marker')} />
-                                    <${ToolButton} icon="bi bi-eraser" label="Stroke Eraser" active=${tool === 'eraser'} onClick=${() => setTool('eraser')} title="Deletes entire lines on click/touch" />
-                                    <${ToolButton} icon="bi bi-arrows-move" label="Move Tool" active=${tool === 'move'} onClick=${() => setTool('move')} title="Select, move, and resize images" />
+                                    <${ToolButton} icon="bi bi-highlighter" label="Highlight" active=${tool === 'marker'} onClick=${() => setTool('marker')} />
+                                    <${ToolButton} icon="bi bi-eraser" label="Erase" active=${tool === 'eraser'} onClick=${() => setTool('eraser')} title="Deletes entire lines on click/touch" />
+                                    <${ToolButton} icon="bi bi-arrows-move" label="Move" active=${tool === 'move'} onClick=${() => setTool('move')} title="Select, move, and resize images" />
                                 </div>
 
-                                <div style="margin-top: 15px;">
+                                <div style="margin-top: 14px;">
+                                    <div class="crm-size-row">
+                                        ${QUICK_SIZES.map(s => html`
+                                            <button class="crm-btn crm-size-btn ${size === s ? 'active' : ''}" onClick=${() => setSize(s)} disabled=${tool === 'move'} title=${`${s}px`}>
+                                                <span class="crm-size-dot" style=${`width:${Math.min(18, s + 4)}px;height:${Math.min(18, s + 4)}px;`}></span>
+                                            </button>
+                                        `)}
+                                    </div>
                                     <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                         <span style="font-size: 0.8rem; color: var(--text-muted);">Brush Size</span>
                                         <span style="font-size: 0.8rem; color: var(--text-main); font-family: monospace;">${size}px</span>
@@ -720,20 +808,33 @@
                                         onInput=${(e) => setSize(parseInt(e.target.value))}
                                         disabled=${tool === 'move'}
                                     />
+                                    <div class="crm-input-row">
+                                        ${stylusDetected ? html`
+                                            <span class="crm-badge"><i class="bi bi-pen"></i> Stylus</span>
+                                        ` : html`
+                                            <span>Input</span>
+                                        `}
+                                        <label class="crm-switch" title="Allow finger strokes even after stylus detection">
+                                            <input type="checkbox" checked=${allowTouchDrawing} onChange=${(e) => setAllowTouchDrawing(e.currentTarget.checked)} />
+                                            <span>Finger draw</span>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
 
                             <div class="crm-control-section" style="opacity: ${tool === 'move' ? 0.3 : 1}; pointer-events: ${tool === 'move' ? 'none' : 'auto'}">
-                                <h4>Color Selection</h4>
+                                <h4>Color</h4>
+                                <div class="crm-swatch-row">
+                                    ${QUICK_COLORS.map(c => html`
+                                        <button class="crm-swatch ${color === c ? 'active' : ''}" style=${`background:${c}`} onClick=${() => setColor(c)} title=${c}></button>
+                                    `)}
+                                </div>
                                 <${IroColorPicker} color=${color} onChange=${setColor} />
                             </div>
 
                             <div class="crm-control-section">
                                 <h4>Actions</h4>
                                 <div style="display: flex; flex-direction: column; gap: 8px;">
-                                    <button class="crm-btn" onClick=${() => restoreState(historyIndex - 1)} disabled=${historyIndex <= 0} style="justify-content: flex-start;">
-                                        <i class="bi bi-arrow-counterclockwise"></i> Undo
-                                    </button>
                                     <button class="crm-btn crm-btn-danger" onClick=${handleClear} style="justify-content: flex-start;">
                                         <i class="bi bi-trash"></i> Clear Canvas
                                     </button>
@@ -750,6 +851,7 @@
                                 onPointerMove=${handlePointerMove}
                                 onPointerUp=${handlePointerUp}
                                 onPointerLeave=${handlePointerUp}
+                                onPointerCancel=${handlePointerUp}
                             ></canvas>
                         </div>
                     </main>
@@ -787,6 +889,38 @@
         render(null, document.getElementById('notes-modal-root'));
     };
 
+    window.markRevisionNoteSaved = function(imageId) {
+        const fieldset = document.getElementById(`question-fieldset-${imageId}`);
+        if (!fieldset) return;
+
+        const addButton = Array.from(fieldset.querySelectorAll('button[onclick^="openNotesModal"]'))
+            .find(button => !button.closest('.note-card'));
+        if (!addButton) return;
+
+        const onclick = addButton.getAttribute('onclick');
+        addButton.outerHTML = `
+            <div class="note-card">
+                <div class="d-flex align-items-center justify-content-center gap-2 py-2 text-success">
+                    <i class="bi bi-check-circle-fill"></i>
+                    <span class="small">Notes saved</span>
+                </div>
+                <div class="note-actions flex-wrap justify-content-center">
+                    <div class="form-check form-switch include-pdf-toggle">
+                        <input class="form-check-input" type="checkbox" id="include_note_${imageId}" checked
+                               onchange="toggleNoteInPdf('${imageId}', this.checked)">
+                        <label class="form-check-label small" for="include_note_${imageId}">In PDF</label>
+                    </div>
+                    <button type="button" class="btn btn-sm btn-outline-info btn-pill" onclick="${onclick}" title="Edit Note">
+                        <i class="bi bi-pencil"></i>
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-danger btn-pill" onclick="deleteNote('${imageId}')" title="Delete Note">
+                        <i class="bi bi-trash"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+    };
+
     window.deleteNote = async function(imageId) {
         if (!confirm('Delete this revision note?')) return;
         try {

templates/cropv2.html

@@ -2028,6 +2028,8 @@
             const currentLeftPageIndex = CONFIG.leftPageIndex;
             const currentRightPageIndex = CONFIG.rightPageIndex;
             const backgroundRequests = [];
+            const processBtn = document.getElementById('processBtn');
+            const isLastPage = currentImageIndex + 1 >= CONFIG.totalPages;
 
             if (!hasLeftBoxes && !hasRightBoxes) {
                 toast('Skipping page(s)...');
@@ -2036,6 +2038,9 @@
             }
 
             try {
+                if (processBtn) processBtn.disabled = true;
+                toast('Saving page(s)...');
+
                 // Process left page
                 if (hasLeftBoxes || !CONFIG.twoPageMode) {
                     const finalBoxes = boxes.map(b => ({
@@ -2098,20 +2103,34 @@
                     }));
                 }
 
-                navigate(currentImageIndex + 1);
+                if (!isLastPage) {
+                    navigate(currentImageIndex + 1);
+                    Promise.all(backgroundRequests)
+                        .then(() => {
+                            const savedLabel = CONFIG.twoPageMode && currentRightPageIndex < CONFIG.allPages.length
+                                ? `Pages ${currentLeftPageIndex + 1}-${currentRightPageIndex + 1} saved`
+                                : `Page ${currentLeftPageIndex + 1} saved`;
+                            toast(savedLabel);
+                        })
+                        .catch((e) => {
+                            toast(`Save failed: ${e.message}`);
+                        })
+                        .finally(() => {
+                            if (processBtn) processBtn.disabled = false;
+                        });
+                    return;
+                }
 
-                Promise.all(backgroundRequests)
-                    .then(() => {
-                        const savedLabel = CONFIG.twoPageMode && currentRightPageIndex < CONFIG.allPages.length
-                            ? `Pages ${currentLeftPageIndex + 1}-${currentRightPageIndex + 1} saved`
-                            : `Page ${currentLeftPageIndex + 1} saved`;
-                        toast(savedLabel);
-                    })
-                    .catch((e) => {
-                        toast(`Save failed: ${e.message}`);
-                    });
+                await Promise.all(backgroundRequests);
+                const savedLabel = CONFIG.twoPageMode && currentRightPageIndex < CONFIG.allPages.length
+                    ? `Pages ${currentLeftPageIndex + 1}-${currentRightPageIndex + 1} saved`
+                    : `Page ${currentLeftPageIndex + 1} saved`;
+                toast(savedLabel);
+                navigate(currentImageIndex + 1);
             } catch (e) {
                 toast(`Save failed: ${e.message}`);
+            } finally {
+                if (processBtn) processBtn.disabled = false;
             }
         }