nodebb-plugin-pdf-secure 1.2.10 → 1.2.11

package/library.js

@@ -36,8 +36,19 @@ plugin.init = async (params) => {
 
 	// PDF direct access blocker middleware
 	// Intercepts requests to uploaded PDF files and returns 403
-	router.get('/assets/uploads/files/:filename', (req, res, next) => {
+	// Admin and Global Moderators can bypass this restriction
+	router.get('/assets/uploads/files/:filename', async (req, res, next) => {
 		if (req.params.filename && req.params.filename.toLowerCase().endsWith('.pdf')) {
+			// Admin ve Global Mod'lar direkt erişebilsin
+			if (req.uid) {
+				const [isAdmin, isGlobalMod] = await Promise.all([
+					groups.isMember(req.uid, 'administrators'),
+					groups.isMember(req.uid, 'Global Moderators'),
+				]);
+				if (isAdmin || isGlobalMod) {
+					return next();
+				}
+			}
 			return res.status(403).json({ error: 'Direct PDF access is not allowed. Use the secure viewer.' });
 		}
 		next();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-pdf-secure",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Secure PDF viewer plugin for NodeBB - prevents downloading, enables canvas-only rendering with Premium group support",
   "main": "library.js",
   "repository": {

package/static/lib/main.js

@@ -215,6 +215,8 @@
 		targetElement.replaceWith(container);
 
 		// LAZY LOADING with Intersection Observer + Queue
+		// Smart loading: only loads PDFs that are actually visible
+		var queueEntry = null;  // Track if this PDF is in queue
 		var observer = new IntersectionObserver(function (entries) {
 			entries.forEach(function (entry) {
 				if (entry.isIntersecting) {
@@ -229,13 +231,36 @@
 						svgEl.innerHTML = '<path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z"/>';
 					}
 
-					// Add to queue
-					queuePdfLoad(iframeWrapper, filename, loadingPlaceholder);
-					observer.disconnect();
+					// Add to queue (if not already)
+					if (!queueEntry) {
+						queueEntry = { wrapper: iframeWrapper, filename, placeholder: loadingPlaceholder };
+						loadQueue.push(queueEntry);
+						processQueue();
+					}
+				} else {
+					// LEFT viewport - remove from queue if waiting
+					if (queueEntry && loadQueue.includes(queueEntry)) {
+						var idx = loadQueue.indexOf(queueEntry);
+						if (idx > -1) {
+							loadQueue.splice(idx, 1);
+							console.log('[PDF-Secure] Queue: Removed (left viewport) -', filename);
+
+							// Reset placeholder to waiting state
+							var textEl = loadingPlaceholder.querySelector('.pdf-loading-text');
+							if (textEl) textEl.textContent = 'Sırada bekliyor...';
+							var svgEl = loadingPlaceholder.querySelector('svg');
+							if (svgEl) {
+								svgEl.style.fill = '#555';
+								svgEl.style.animation = 'none';
+								svgEl.innerHTML = '<path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/>';
+							}
+						}
+						queueEntry = null;
+					}
 				}
 			});
 		}, {
-			rootMargin: '200px',
+			rootMargin: '0px',  // Only trigger when actually visible
 			threshold: 0
 		});
 

package/static/viewer.html

@@ -442,22 +442,46 @@
             font-size: 14px;
             white-space: nowrap;
         }
-        .overflowItem:hover { background: var(--bg-tertiary); }
-        .overflowItem svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
-        .overflowItem.active { color: var(--accent); }
-        .overflowDivider { height: 1px; background: var(--border-color); margin: 6px 0; }
+
+        .overflowItem:hover {
+            background: var(--bg-tertiary);
+        }
+
+        .overflowItem svg {
+            width: 20px;
+            height: 20px;
+            fill: currentColor;
+            flex-shrink: 0;
+        }
+
+        .overflowItem.active {
+            color: var(--accent);
+        }
+
+        .overflowDivider {
+            height: 1px;
+            background: var(--border-color);
+            margin: 6px 0;
+        }
 
         /* Overflow: visible on all screens, originals hidden */
-        #overflowWrapper { display: flex; }
-        .overflowSep { display: block; }
+        #overflowWrapper {
+            display: flex;
+        }
+
+        .overflowSep {
+            display: block;
+        }
 
         /* Hide rotate, sepia and their separators (children 3-8 of view group) */
-        .toolbarGroup:nth-child(5) > :nth-child(3),
-        .toolbarGroup:nth-child(5) > :nth-child(4),
-        .toolbarGroup:nth-child(5) > :nth-child(5),
-        .toolbarGroup:nth-child(5) > :nth-child(6),
-        .toolbarGroup:nth-child(5) > :nth-child(7),
-        .toolbarGroup:nth-child(5) > :nth-child(8) { display: none !important; }
+        .toolbarGroup:nth-child(5)> :nth-child(3),
+        .toolbarGroup:nth-child(5)> :nth-child(4),
+        .toolbarGroup:nth-child(5)> :nth-child(5),
+        .toolbarGroup:nth-child(5)> :nth-child(6),
+        .toolbarGroup:nth-child(5)> :nth-child(7),
+        .toolbarGroup:nth-child(5)> :nth-child(8) {
+            display: none !important;
+        }
 
         /* Shape Grid */
         .shapeGrid {
@@ -1785,23 +1809,32 @@
             <div class="toolbarBtnWithDropdown" id="overflowWrapper">
                 <button class="toolbarBtn" id="overflowBtn" title="Daha Fazla">
                     <svg viewBox="0 0 24 24">
-                        <circle cx="12" cy="5" r="2"/>
-                        <circle cx="12" cy="12" r="2"/>
-                        <circle cx="12" cy="19" r="2"/>
+                        <circle cx="12" cy="5" r="2" />
+                        <circle cx="12" cy="12" r="2" />
+                        <circle cx="12" cy="19" r="2" />
                     </svg>
                 </button>
                 <div class="toolDropdown" id="overflowDropdown">
                     <button class="overflowItem" id="overflowRotateLeft">
-                        <svg viewBox="0 0 24 24"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>
+                        <svg viewBox="0 0 24 24">
+                            <path
+                                d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z" />
+                        </svg>
                         <span>Sola Döndür</span>
                     </button>
                     <button class="overflowItem" id="overflowRotateRight">
-                        <svg viewBox="0 0 24 24"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/></svg>
+                        <svg viewBox="0 0 24 24">
+                            <path
+                                d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z" />
+                        </svg>
                         <span>Sağa Döndür</span>
                     </button>
                     <div class="overflowDivider"></div>
                     <button class="overflowItem" id="overflowSepia">
-                        <svg viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
+                        <svg viewBox="0 0 24 24">
+                            <path
+                                d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+                        </svg>
                         <span>Okuma Modu</span>
                     </button>
                 </div>
@@ -1896,6 +1929,10 @@
             let currentPath = null;
             let currentDrawingPage = null;
 
+            // RAF throttle for smooth drawing performance
+            let pathSegments = [];  // Buffer path segments
+            let drawRAF = null;     // requestAnimationFrame ID
+
             // Annotation persistence - stores SVG innerHTML per page
             const annotationsStore = new Map();
             const annotationRotations = new Map(); // tracks rotation when annotations were saved
@@ -2406,34 +2443,11 @@
                         currentWidth = shapeWidth;
                     }
 
-                    // BUGFIX: Save current annotation state BEFORE re-injecting layers
-                    // This prevents deleted content from being restored when switching tools
-                    // Uses getCleanSvgInnerHTML to strip transient classes/styles
-                    for (let i = 0; i < pdfViewer.pagesCount; i++) {
-                        const pageView = pdfViewer.getPageView(i);
-                        const svg = pageView?.div?.querySelector('.annotationLayer');
-                        if (svg) {
-                            const pageNum = i + 1;
-                            const cleanHTML = getCleanSvgInnerHTML(svg);
-                            if (cleanHTML) {
-                                annotationsStore.set(pageNum, cleanHTML);
-                                annotationRotations.set(pageNum, pdfViewer.pagesRotation || 0);
-                            } else {
-                                annotationsStore.delete(pageNum);
-                                annotationRotations.delete(pageNum);
-                            }
-                        }
-                    }
-
-                    // Inject annotation layers (await all)
-                    const promises = [];
-                    for (let i = 0; i < pdfViewer.pagesCount; i++) {
-                        const pageView = pdfViewer.getPageView(i);
-                        if (pageView?.div) {
-                            promises.push(injectAnnotationLayer(i + 1));
-                        }
-                    }
-                    await Promise.all(promises);
+                    // Performance: Just toggle active class instead of re-injecting layers
+                    // This avoids expensive DOM recreation on every tool change
+                    document.querySelectorAll('.annotationLayer').forEach(layer => {
+                        layer.classList.toggle('active', annotationMode);
+                    });
                 }
 
                 // Update button states
@@ -2602,18 +2616,8 @@
                         annotationsStore.set(pageNum, svg.innerHTML);
                         annotationRotations.set(pageNum, curRot);
 
-                        // Transform undo/redo stack entries to match new rotation
-                        const wrapStackEntries = (stackMap) => {
-                            const entries = stackMap.get(pageNum);
-                            if (!entries) return;
-                            for (let i = 0; i < entries.length; i++) {
-                                if (entries[i].trim()) {
-                                    entries[i] = `<g transform="${transform}">${entries[i]}</g>`;
-                                }
-                            }
-                        };
-                        wrapStackEntries(undoStacks);
-                        wrapStackEntries(redoStacks);
+                        // Note: No need to wrap stack entries anymore
+                        // Rotation is now stored per-entry, transforms applied on restore
                     }
                 }
 
@@ -2645,13 +2649,16 @@
 
             // Strip transient classes, styles, and elements from SVG before saving
             function getCleanSvgInnerHTML(svg) {
+                // Performance: Work on a cloned node to avoid modifying live DOM
+                const clone = svg.cloneNode(true);
+
                 // Remove marquee rect if present
-                const marquee = svg.querySelector('.marquee-rect');
+                const marquee = clone.querySelector('.marquee-rect');
                 if (marquee) marquee.remove();
 
                 // Strip transient classes and inline styles from annotation elements
                 const transientClasses = ['annotation-selected', 'annotation-multi-selected', 'annotation-dragging', 'just-selected'];
-                svg.querySelectorAll('path, rect, ellipse, line, text').forEach(el => {
+                clone.querySelectorAll('path, rect, ellipse, line, text').forEach(el => {
                     transientClasses.forEach(cls => el.classList.remove(cls));
                     // Remove inline cursor style added by multi-drag
                     if (el.style.cursor) el.style.cursor = '';
@@ -2661,7 +2668,50 @@
                     if (el.getAttribute('class') === '') el.removeAttribute('class');
                 });
 
-                return svg.innerHTML.trim();
+                return clone.innerHTML.trim();
+            }
+
+            // Helper: Apply rotation transform from savedRot to curRot
+            // Uses clone-based flatten approach - updates each element's transform individually
+            // This prevents nested <g> accumulation entirely
+            function applyRotationTransform(html, savedRot, curRot, pageNum) {
+                if (!html || !html.trim()) return html;
+
+                const delta = (curRot - savedRot + 360) % 360;
+                if (delta === 0) return html;
+
+                // Calculate transform based on page dimensions
+                const baseDims = pageBaseDimensions.get(pageNum);
+                if (!baseDims) return html; // Fallback if no dims available
+
+                const W = baseDims.width, H = baseDims.height;
+
+                // Old viewBox dimensions (at saved rotation)
+                let oW, oH;
+                if (savedRot === 90 || savedRot === 270) { oW = H; oH = W; }
+                else { oW = W; oH = H; }
+
+                let rotationTransform;
+                if (delta === 90) rotationTransform = `translate(${oH},0) rotate(90)`;
+                else if (delta === 180) rotationTransform = `translate(${oW},${oH}) rotate(180)`;
+                else if (delta === 270) rotationTransform = `translate(0,${oW}) rotate(270)`;
+                else return html;
+
+                // Clone-based flatten: Apply transform to each top-level element individually
+                const tempContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                tempContainer.innerHTML = html;
+
+                // Process each top-level child element
+                Array.from(tempContainer.children).forEach(child => {
+                    const existingTransform = child.getAttribute('transform') || '';
+                    // Prepend rotation transform (rotation first, then existing)
+                    const newTransform = existingTransform
+                        ? `${rotationTransform} ${existingTransform}`
+                        : rotationTransform;
+                    child.setAttribute('transform', newTransform);
+                });
+
+                return tempContainer.innerHTML;
             }
 
             // Save annotations for a page (with undo history)
@@ -2678,7 +2728,8 @@
                 if (previousState !== newState) {
                     if (!undoStacks.has(pageNum)) undoStacks.set(pageNum, []);
                     const stack = undoStacks.get(pageNum);
-                    stack.push(previousState);
+                    // Store as {html, rotation} object to avoid nested <g> wrap accumulation
+                    stack.push({ html: previousState, rotation: annotationRotations.get(pageNum) || 0 });
                     if (stack.length > MAX_HISTORY) stack.shift();
 
                     // Clear redo stack on new action
@@ -2715,20 +2766,24 @@
                 const svg = pageView?.div?.querySelector('.annotationLayer');
                 if (!svg) return;
 
-                // Save current state to redo stack (clean)
+                // Save current state to redo stack with rotation
                 if (!redoStacks.has(pageNum)) redoStacks.set(pageNum, []);
                 const redoStack = redoStacks.get(pageNum);
-                redoStack.push(getCleanSvgInnerHTML(svg));
+                redoStack.push({ html: getCleanSvgInnerHTML(svg), rotation: pdfViewer.pagesRotation || 0 });
                 if (redoStack.length > MAX_HISTORY) redoStack.shift();
 
-                // Restore previous state
-                const previousState = stack.pop();
-                svg.innerHTML = previousState;
+                // Restore previous state with rotation transform if needed
+                const entry = stack.pop();
+                const previousHtml = typeof entry === 'object' ? entry.html : entry;
+                const savedRot = typeof entry === 'object' ? entry.rotation : (annotationRotations.get(pageNum) || 0);
+                const curRot = pdfViewer.pagesRotation || 0;
+
+                svg.innerHTML = applyRotationTransform(previousHtml, savedRot, curRot, pageNum);
 
                 // Update store
-                if (previousState.trim()) {
-                    annotationsStore.set(pageNum, previousState);
-                    annotationRotations.set(pageNum, pdfViewer.pagesRotation || 0);
+                if (previousHtml.trim()) {
+                    annotationsStore.set(pageNum, svg.innerHTML);
+                    annotationRotations.set(pageNum, curRot);
                 } else {
                     annotationsStore.delete(pageNum);
                     annotationRotations.delete(pageNum);
@@ -2747,20 +2802,24 @@
                 const svg = pageView?.div?.querySelector('.annotationLayer');
                 if (!svg) return;
 
-                // Save current state to undo stack (clean)
+                // Save current state to undo stack with rotation
                 if (!undoStacks.has(pageNum)) undoStacks.set(pageNum, []);
                 const undoStack = undoStacks.get(pageNum);
-                undoStack.push(getCleanSvgInnerHTML(svg));
+                undoStack.push({ html: getCleanSvgInnerHTML(svg), rotation: pdfViewer.pagesRotation || 0 });
                 if (undoStack.length > MAX_HISTORY) undoStack.shift();
 
-                // Restore redo state
-                const redoState = stack.pop();
-                svg.innerHTML = redoState;
+                // Restore redo state with rotation transform if needed
+                const entry = stack.pop();
+                const redoHtml = typeof entry === 'object' ? entry.html : entry;
+                const savedRot = typeof entry === 'object' ? entry.rotation : (annotationRotations.get(pageNum) || 0);
+                const curRot = pdfViewer.pagesRotation || 0;
+
+                svg.innerHTML = applyRotationTransform(redoHtml, savedRot, curRot, pageNum);
 
                 // Update store
-                if (redoState.trim()) {
-                    annotationsStore.set(pageNum, redoState);
-                    annotationRotations.set(pageNum, pdfViewer.pagesRotation || 0);
+                if (redoHtml.trim()) {
+                    annotationsStore.set(pageNum, svg.innerHTML);
+                    annotationRotations.set(pageNum, curRot);
                 } else {
                     annotationsStore.delete(pageNum);
                     annotationRotations.delete(pageNum);
@@ -2776,10 +2835,10 @@
                 const svg = pageView?.div?.querySelector('.annotationLayer');
                 if (!svg || !svg.innerHTML.trim()) return;
 
-                // Save current state to undo stack (so it can be undone)
+                // Save current state to undo stack with rotation
                 if (!undoStacks.has(pageNum)) undoStacks.set(pageNum, []);
                 const stack = undoStacks.get(pageNum);
-                stack.push(svg.innerHTML);
+                stack.push({ html: svg.innerHTML, rotation: pdfViewer.pagesRotation || 0 });
                 if (stack.length > MAX_HISTORY) stack.shift();
 
                 // Clear redo stack
@@ -2823,7 +2882,7 @@
 
                 if (currentTool === 'eraser') {
                     eraseAt(svg, x, y, scaleX);
-                    saveAnnotations(pageNum);
+                    // Performance: Don't save here - isDrawing is true, stopDraw will save on mouseup
                     return;
                 }
 
@@ -2924,8 +2983,7 @@
 
                 if (currentTool === 'eraser') {
                     eraseAt(svg, x, y, scaleX);
-                    // Bug fix: Save after continuous erasing so changes aren't lost
-                    if (currentDrawingPage) saveAnnotations(currentDrawingPage);
+                    // Performance: Don't save on every mousemove - let mouseup handle it
                     return;
                 }
 
@@ -2958,12 +3016,33 @@
                     return;
                 }
 
+                // RAF throttle: buffer segments and flush in animation frame
                 if (currentPath) {
-                    currentPath.setAttribute('d', currentPath.getAttribute('d') + ` L${x.toFixed(2)},${y.toFixed(2)}`);
+                    pathSegments.push(`L${x.toFixed(2)},${y.toFixed(2)}`);
+
+                    if (!drawRAF) {
+                        drawRAF = requestAnimationFrame(() => {
+                            if (currentPath && pathSegments.length > 0) {
+                                currentPath.setAttribute('d', currentPath.getAttribute('d') + ' ' + pathSegments.join(' '));
+                                pathSegments = [];
+                            }
+                            drawRAF = null;
+                        });
+                    }
                 }
             }
 
             function stopDraw(pageNum) {
+                // Flush any pending path segments before stopping
+                if (drawRAF) {
+                    cancelAnimationFrame(drawRAF);
+                    drawRAF = null;
+                }
+                if (currentPath && pathSegments.length > 0) {
+                    currentPath.setAttribute('d', currentPath.getAttribute('d') + ' ' + pathSegments.join(' '));
+                    pathSegments = [];
+                }
+
                 // Handle arrow marker
                 if (currentTool === 'shape' && currentShape === 'arrow' && currentSvg) {
                     const shapeEl = currentSvg.querySelector('.current-shape');