scitex 2.7.3__py3-none-any.whl → 2.10.0__py3-none-any.whl

scitex/fig/editor/flask_editor/static/js/editor/overlay.js

@@ -0,0 +1,371 @@
+/**
+ * Overlay Rendering
+ * Handles SVG overlay for element highlighting and debug visualization
+ */
+
+// ============================================================================
+// Main Overlay Update
+// ============================================================================
+function updateOverlay() {
+    const overlay = document.getElementById('hover-overlay');
+    // Find the visible preview element (SVG wrapper or img)
+    const svgWrapper = document.getElementById('preview-svg-wrapper');
+    const imgEl = document.getElementById('preview');
+
+    let targetEl = null;
+    if (svgWrapper) {
+        targetEl = svgWrapper.querySelector('svg') || svgWrapper;
+    } else if (imgEl && imgEl.offsetWidth > 0) {
+        targetEl = imgEl;
+    }
+
+    if (!targetEl) return;
+
+    const rect = targetEl.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+
+    // Guard against zero imgSize (can cause Infinity scale)
+    if (!imgSize || !imgSize.width || !imgSize.height || imgSize.width === 0 || imgSize.height === 0) {
+        return;
+    }
+
+    overlay.setAttribute('width', rect.width);
+    overlay.setAttribute('height', rect.height);
+    overlay.style.width = rect.width + 'px';
+    overlay.style.height = rect.height + 'px';
+
+    // Position overlay over the target element
+    const containerRect = document.getElementById('preview-container').getBoundingClientRect();
+    overlay.style.left = (rect.left - containerRect.left) + 'px';
+    overlay.style.top = (rect.top - containerRect.top) + 'px';
+
+    const scaleX = rect.width / imgSize.width;
+    const scaleY = rect.height / imgSize.height;
+
+    let svg = '';
+
+    // Debug mode: draw ALL bboxes
+    if (debugMode) {
+        svg += drawDebugBboxes(scaleX, scaleY);
+    }
+
+    function drawElement(elementName, type) {
+        const bbox = elementBboxes[elementName];
+        if (!bbox) return '';
+
+        const elementType = bbox.element_type || '';
+        const hasPoints = bbox.points && bbox.points.length > 0;
+
+        // Lines - draw as path
+        if ((elementType === 'line' || elementName.includes('trace_')) && hasPoints) {
+            return drawTracePath(bbox, scaleX, scaleY, type);
+        }
+        // Scatter - draw as circles
+        else if (elementType === 'scatter' && hasPoints) {
+            return drawScatterPoints(bbox, scaleX, scaleY, type);
+        }
+        // Default - draw bbox rectangle
+        else {
+            const rectClass = type === 'hover' ? 'hover-rect' : 'selected-rect';
+            const labelClass = type === 'hover' ? 'hover-label' : 'selected-label';
+            const x = bbox.x0 * scaleX - 2;
+            const y = bbox.y0 * scaleY - 2;
+            const w = (bbox.x1 - bbox.x0) * scaleX + 4;
+            const h = (bbox.y1 - bbox.y0) * scaleY + 4;
+            return `<rect class="${rectClass}" x="${x}" y="${y}" width="${w}" height="${h}" rx="2"/>` +
+                   `<text class="${labelClass}" x="${x}" y="${y - 4}">${bbox.label || elementName}</text>`;
+        }
+    }
+
+    if (hoveredElement && hoveredElement !== selectedElement) {
+        svg += drawElement(hoveredElement, 'hover');
+    }
+
+    if (selectedElement) {
+        svg += drawElement(selectedElement, 'selected');
+    }
+
+    overlay.innerHTML = svg;
+}
+
+// ============================================================================
+// Draw Path/Line Elements
+// ============================================================================
+function drawTracePath(bbox, scaleX, scaleY, type) {
+    if (!Array.isArray(bbox.points) || bbox.points.length < 2) return '';
+
+    const points = bbox.points.filter(pt => Array.isArray(pt) && pt.length >= 2);
+    if (points.length < 2) return '';
+
+    let pathD = `M ${points[0][0] * scaleX} ${points[0][1] * scaleY}`;
+    for (let i = 1; i < points.length; i++) {
+        pathD += ` L ${points[i][0] * scaleX} ${points[i][1] * scaleY}`;
+    }
+
+    const className = type === 'hover' ? 'hover-path' : 'selected-path';
+    const labelX = points[0][0] * scaleX;
+    const labelY = points[0][1] * scaleY - 8;
+    const labelClass = type === 'hover' ? 'hover-label' : 'selected-label';
+
+    return `<path class="${className}" d="${pathD}"/>` +
+           `<text class="${labelClass}" x="${labelX}" y="${labelY}">${bbox.label || ''}</text>`;
+}
+
+// ============================================================================
+// Draw Scatter Points
+// ============================================================================
+function drawScatterPoints(bbox, scaleX, scaleY, type) {
+    // Draw scatter points as circles
+    if (!Array.isArray(bbox.points) || bbox.points.length === 0) return '';
+
+    const className = type === 'hover' ? 'hover-scatter' : 'selected-scatter';
+    const labelClass = type === 'hover' ? 'hover-label' : 'selected-label';
+    const radius = 4;
+
+    let svg = '';
+    for (const pt of bbox.points) {
+        if (!Array.isArray(pt) || pt.length < 2) continue;
+        const [x, y] = pt;
+        svg += `<circle class="${className}" cx="${x * scaleX}" cy="${y * scaleY}" r="${radius}"/>`;
+    }
+
+    // Add label near first point
+    const validPoints = bbox.points.filter(pt => Array.isArray(pt) && pt.length >= 2);
+    if (validPoints.length > 0) {
+        const labelX = validPoints[0][0] * scaleX;
+        const labelY = validPoints[0][1] * scaleY - 10;
+        svg += `<text class="${labelClass}" x="${labelX}" y="${labelY}">${bbox.label || ''}</text>`;
+    }
+
+    return svg;
+}
+
+// ============================================================================
+// Debug Visualization
+// ============================================================================
+function drawDebugBboxes(scaleX, scaleY) {
+    let svg = '';
+    let count = 0;
+
+    for (const [name, bbox] of Object.entries(elementBboxes)) {
+        if (name === '_meta') continue;
+
+        count++;
+        const hasPoints = bbox.points && bbox.points.length > 0;
+        const elementType = bbox.element_type || '';
+
+        // Choose color based on element type
+        let rectClass = 'debug-rect';
+        if (name.includes('trace_') || elementType === 'line') {
+            rectClass = 'debug-rect-trace';
+        } else if (name.includes('legend')) {
+            rectClass = 'debug-rect-legend';
+        }
+
+        // Draw bbox rectangle
+        const x = bbox.x0 * scaleX;
+        const y = bbox.y0 * scaleY;
+        const w = (bbox.x1 - bbox.x0) * scaleX;
+        const h = (bbox.y1 - bbox.y0) * scaleY;
+
+        svg += `<rect class="${rectClass}" x="${x}" y="${y}" width="${w}" height="${h}"/>`;
+        svg += `<text class="debug-label" x="${x + 2}" y="${y + 10}">${name}</text>`;
+
+        // Draw path points if available
+        if (hasPoints && bbox.points.length > 1) {
+            let pathD = `M ${bbox.points[0][0] * scaleX} ${bbox.points[0][1] * scaleY}`;
+            for (let i = 1; i < bbox.points.length; i++) {
+                const pt = bbox.points[i];
+                if (pt && pt.length >= 2) {
+                    pathD += ` L ${pt[0] * scaleX} ${pt[1] * scaleY}`;
+                }
+            }
+            svg += `<path class="debug-path" d="${pathD}"/>`;
+        }
+    }
+
+    return svg;
+}
+
+function toggleDebugMode() {
+    debugMode = !debugMode;
+    const btn = document.getElementById('debug-toggle-btn');
+    if (btn) {
+        btn.classList.toggle('active', debugMode);
+        btn.textContent = debugMode ? 'Hide Hit Areas' : 'Show Hit Areas';
+    }
+    updateOverlay();
+}
+
+// ============================================================================
+// Panel Overlay Update (for multi-panel canvas)
+// ============================================================================
+function updatePanelOverlay(overlay, bboxes, imgSizePanel, displayWidth, displayHeight, hovered, selected, img) {
+    if (!overlay) return;
+
+    overlay.innerHTML = '';
+
+    // Calculate actual rendered dimensions accounting for object-fit: contain
+    let scaleX, scaleY, offsetX = 0, offsetY = 0;
+
+    if (img && img.naturalWidth && img.naturalHeight) {
+        const dims = getObjectFitContainDimensions(img);
+        scaleX = dims.displayWidth / imgSizePanel.width;
+        scaleY = dims.displayHeight / imgSizePanel.height;
+        offsetX = dims.offsetX;
+        offsetY = dims.offsetY;
+
+        // Use container dimensions for the overlay size
+        overlay.setAttribute('width', img.clientWidth);
+        overlay.setAttribute('height', img.clientHeight);
+    } else {
+        // Fallback for backward compatibility
+        scaleX = displayWidth / imgSizePanel.width;
+        scaleY = displayHeight / imgSizePanel.height;
+        overlay.setAttribute('width', displayWidth);
+        overlay.setAttribute('height', displayHeight);
+    }
+
+    let svg = '';
+
+    // Debug mode: draw all bboxes (with offset for object-fit:contain letterboxing)
+    if (panelDebugMode) {
+        svg += drawPanelDebugBboxes(bboxes, scaleX, scaleY, offsetX, offsetY);
+    }
+
+    function drawPanelElement(elementName, type) {
+        const bbox = bboxes[elementName];
+        if (!bbox) return '';
+
+        const elementType = bbox.element_type || '';
+        const hasPoints = bbox.points && bbox.points.length > 0;
+
+        // Lines - draw as path (with offset)
+        if ((elementType === 'line' || elementName.includes('trace_')) && hasPoints) {
+            const points = bbox.points.filter(pt => Array.isArray(pt) && pt.length >= 2);
+            if (points.length < 2) return '';
+
+            let pathD = `M ${points[0][0] * scaleX + offsetX} ${points[0][1] * scaleY + offsetY}`;
+            for (let i = 1; i < points.length; i++) {
+                pathD += ` L ${points[i][0] * scaleX + offsetX} ${points[i][1] * scaleY + offsetY}`;
+            }
+
+            const className = type === 'hover' ? 'hover-path' : 'selected-path';
+            return `<path class="${className}" d="${pathD}"/>`;
+        }
+        // Scatter - draw as circles (with offset)
+        else if (elementType === 'scatter' && hasPoints) {
+            const className = type === 'hover' ? 'hover-scatter' : 'selected-scatter';
+            let circles = '';
+            for (const pt of bbox.points) {
+                if (!Array.isArray(pt) || pt.length < 2) continue;
+                const [x, y] = pt;
+                circles += `<circle class="${className}" cx="${x * scaleX + offsetX}" cy="${y * scaleY + offsetY}" r="3"/>`;
+            }
+            return circles;
+        }
+        // Default - draw bbox rectangle (with offset)
+        else {
+            const rectClass = type === 'hover' ? 'hover-rect' : 'selected-rect';
+            const x = bbox.x0 * scaleX + offsetX;
+            const y = bbox.y0 * scaleY + offsetY;
+            const w = (bbox.x1 - bbox.x0) * scaleX;
+            const h = (bbox.y1 - bbox.y0) * scaleY;
+            return `<rect class="${rectClass}" x="${x}" y="${y}" width="${w}" height="${h}" rx="1"/>`;
+        }
+    }
+
+    if (hovered && hovered !== selected) {
+        svg += drawPanelElement(hovered, 'hover');
+    }
+
+    if (selected) {
+        svg += drawPanelElement(selected, 'selected');
+    }
+
+    overlay.innerHTML = svg;
+}
+
+function drawPanelDebugBboxes(bboxes, scaleX, scaleY, offsetX, offsetY) {
+    let svg = '';
+
+    // Default offset to 0 if not provided
+    offsetX = offsetX || 0;
+    offsetY = offsetY || 0;
+
+    for (const [name, bbox] of Object.entries(bboxes)) {
+        if (name === '_meta') continue;
+
+        const hasPoints = bbox.points && bbox.points.length > 0;
+        const elementType = bbox.element_type || '';
+
+        // Choose color based on element type
+        let rectClass = 'debug-rect';
+        if (name.includes('trace_') || elementType === 'line') {
+            rectClass = 'debug-rect-trace';
+        } else if (name.includes('legend')) {
+            rectClass = 'debug-rect-legend';
+        }
+
+        // Draw bbox rectangle (with offset for object-fit:contain letterboxing)
+        const x = bbox.x0 * scaleX + offsetX;
+        const y = bbox.y0 * scaleY + offsetY;
+        const w = (bbox.x1 - bbox.x0) * scaleX;
+        const h = (bbox.y1 - bbox.y0) * scaleY;
+
+        svg += `<rect class="${rectClass}" x="${x}" y="${y}" width="${w}" height="${h}"/>`;
+
+        // Draw short label (truncated for small panels)
+        const shortName = name.length > 15 ? name.substring(0, 12) + '...' : name;
+        svg += `<text class="debug-label" x="${x + 2}" y="${y + 8}" font-size="8">${shortName}</text>`;
+
+        // Draw path points if available (with offset)
+        if (hasPoints && bbox.points.length > 1) {
+            let pathD = `M ${bbox.points[0][0] * scaleX + offsetX} ${bbox.points[0][1] * scaleY + offsetY}`;
+            for (let i = 1; i < bbox.points.length; i++) {
+                const pt = bbox.points[i];
+                if (pt && pt.length >= 2) {
+                    pathD += ` L ${pt[0] * scaleX + offsetX} ${pt[1] * scaleY + offsetY}`;
+                }
+            }
+            svg += `<path class="debug-path" d="${pathD}" stroke-width="0.5"/>`;
+        }
+    }
+
+    return svg;
+}
+
+function togglePanelDebugMode() {
+    panelDebugMode = !panelDebugMode;
+    const btn = document.getElementById('panel-debug-toggle-btn');
+    if (btn) {
+        btn.classList.toggle('active', panelDebugMode);
+        btn.textContent = panelDebugMode ? 'Hide Panel Hit Areas' : 'Show Panel Hit Areas';
+    }
+
+    // Redraw all panel overlays
+    redrawAllPanelOverlays();
+}
+
+function redrawAllPanelOverlays() {
+    document.querySelectorAll('.panel-canvas-item').forEach((item, idx) => {
+        const panelName = item.dataset.panelName;
+        const overlay = item.querySelector('.panel-card-overlay');
+        const img = item.querySelector('img');
+        const panelCache = panelBboxesCache[panelName];
+
+        if (overlay && img && panelCache) {
+            const rect = img.getBoundingClientRect();
+            updatePanelOverlay(
+                overlay,
+                panelCache.bboxes,
+                panelCache.imgSize,
+                rect.width,
+                rect.height,
+                panelHoveredElement,
+                selectedElement,
+                img
+            );
+        }
+    });
+}

scitex/fig/editor/flask_editor/static/js/editor/preview.js

@@ -0,0 +1,293 @@
+/**
+ * Preview Management
+ * Handles preview loading, panel navigation, and grid view
+ */
+
+// ============================================================================
+// Initial Preview Loading
+// ============================================================================
+async function loadInitialPreview() {
+    setStatus('Loading preview...', false);
+    try {
+        const resp = await fetch('/preview');
+        const data = await resp.json();
+
+        console.log('=== PREVIEW DATA RECEIVED ===');
+        console.log('format:', data.format);
+        console.log('img_size:', data.img_size);
+        console.log('bboxes keys:', Object.keys(data.bboxes || {}));
+
+        const previewContainer = document.getElementById('preview-container');
+        const img = document.getElementById('preview');
+
+        if (data.format === 'svg' && data.svg) {
+            // Handle SVG: replace img with inline SVG
+            const svgWrapper = document.createElement('div');
+            svgWrapper.id = 'preview-svg-wrapper';
+            svgWrapper.innerHTML = data.svg;
+            svgWrapper.style.width = '100%';
+            svgWrapper.style.maxHeight = '70vh';
+
+            // Find the SVG element and set styles
+            const svgEl = svgWrapper.querySelector('svg');
+            if (svgEl) {
+                svgEl.style.width = '100%';
+                svgEl.style.height = 'auto';
+                svgEl.style.maxHeight = '70vh';
+                svgEl.id = 'preview';  // Keep same ID for event handlers
+            }
+
+            img.style.display = 'none';
+            const existingWrapper = document.getElementById('preview-svg-wrapper');
+            if (existingWrapper) existingWrapper.remove();
+            previewContainer.appendChild(svgWrapper);
+        } else if (data.image) {
+            // Handle PNG: show as base64 image
+            img.src = 'data:image/png;base64,' + data.image;
+            img.style.display = 'block';
+            const existingWrapper = document.getElementById('preview-svg-wrapper');
+            if (existingWrapper) existingWrapper.remove();
+        }
+
+        if (data.bboxes) {
+            elementBboxes = data.bboxes;
+            originalBboxes = JSON.parse(JSON.stringify(data.bboxes));  // Deep copy
+            if (data.bboxes._meta) {
+                schemaMeta = data.bboxes._meta;
+            }
+        }
+        if (data.img_size) {
+            imgSize = data.img_size;
+            originalImgSize = {...data.img_size};  // Copy
+        }
+
+        isShowingOriginalPreview = true;
+        updateOverlay();
+        setStatus('Preview loaded', false);
+
+        // Initialize hover system for the SVG if needed
+        if (data.format === 'svg') {
+            const svgWrapper = document.getElementById('preview-svg-wrapper');
+            if (svgWrapper) {
+                initHoverSystemForElement(svgWrapper.querySelector('svg'));
+            }
+        }
+
+        // Draw debug bboxes if debug mode is on
+        if (debugMode) {
+            updateOverlay();
+        }
+
+        // Handle multi-panel figz bundles
+        if (data.panel_info && data.panel_info.panels) {
+            panelData = data.panel_info;
+            currentPanelIndex = data.panel_info.current_index || 0;
+            console.log('Multi-panel figz detected:', panelData.panels.length, 'panels');
+            loadPanelGrid();
+        }
+
+        // Start auto-update AFTER initial preview is loaded
+        setAutoUpdateInterval();
+    } catch (e) {
+        setStatus('Error loading preview: ' + e.message, true);
+        console.error('Preview load error:', e);
+        // Start auto-update even on error so the editor works
+        setAutoUpdateInterval();
+    }
+}
+
+// ============================================================================
+// Multi-Panel Grid Loading
+// ============================================================================
+async function loadPanelGrid() {
+    if (!panelData || panelData.panels.length <= 1) {
+        // Not a multi-panel bundle or only one panel
+        document.getElementById('panel-grid-section').style.display = 'none';
+        document.getElementById('preview-header').style.display = 'none';
+        return;
+    }
+
+    console.log('Loading panel canvas for', panelData.panels.length, 'panels');
+
+    // Hide single-panel preview completely for multi-panel bundles (unified canvas only)
+    document.getElementById('preview-header').style.display = 'none';
+    const previewWrapper = document.querySelector('.preview-wrapper');
+    if (previewWrapper) {
+        previewWrapper.style.display = 'none';
+    }
+
+    // Fetch all panel images with bboxes
+    try {
+        const resp = await fetch('/panels');
+        const data = await resp.json();
+
+        if (data.error) {
+            console.error('Panel canvas error:', data.error);
+            return;
+        }
+
+        const canvasEl = document.getElementById('panel-canvas');
+        canvasEl.innerHTML = '';
+
+        // Use figz layout to position panels as unified canvas (matching export)
+        const hasLayout = data.layout && Object.keys(data.layout).length > 0;
+
+        // Calculate scale factor: convert mm to pixels
+        // Find total figure dimensions from layout
+        let maxX = 0, maxY = 0;
+        if (hasLayout) {
+            Object.values(data.layout).forEach(l => {
+                const right = (l.position?.x_mm || 0) + (l.size?.width_mm || 80);
+                const bottom = (l.position?.y_mm || 0) + (l.size?.height_mm || 50);
+                maxX = Math.max(maxX, right);
+                maxY = Math.max(maxY, bottom);
+            });
+        }
+
+        // Scale to fit canvas (max width ~700px for good display)
+        const canvasMaxWidth = 700;
+        const scale = hasLayout && maxX > 0 ? canvasMaxWidth / maxX : 3;  // ~3px per mm fallback
+        canvasScale = scale;  // Store globally for drag conversions
+
+        // Reset layout tracking
+        panelLayoutMm = {};
+        layoutModified = false;
+
+        data.panels.forEach((panel, idx) => {
+            // Store bboxes and imgSize in cache for interactive hover/click
+            if (panel.bboxes && panel.img_size) {
+                panelBboxesCache[panel.name] = {
+                    bboxes: panel.bboxes,
+                    imgSize: panel.img_size
+                };
+            }
+
+            // Use figz layout for positioning (unified canvas like export)
+            let pos, posMm;
+            if (panel.layout && panel.layout.position && panel.layout.size) {
+                const x_mm = panel.layout.position.x_mm || 0;
+                const y_mm = panel.layout.position.y_mm || 0;
+                const width_mm = panel.layout.size.width_mm || 80;
+                const height_mm = panel.layout.size.height_mm || 50;
+                pos = {
+                    x: x_mm * scale,
+                    y: y_mm * scale,
+                    width: width_mm * scale,
+                    height: height_mm * scale,
+                };
+                posMm = { x_mm, y_mm, width_mm, height_mm };
+            } else {
+                // Fallback grid layout if no figz layout
+                const cols = Math.ceil(Math.sqrt(data.panels.length));
+                const baseWidth = 220, baseHeight = 180, padding = 15;
+                const col = idx % cols;
+                const row = Math.floor(idx / cols);
+                pos = {
+                    x: padding + col * (baseWidth + padding),
+                    y: padding + row * (baseHeight + padding),
+                    width: baseWidth,
+                    height: baseHeight,
+                };
+                // Convert to mm for fallback
+                posMm = {
+                    x_mm: pos.x / scale,
+                    y_mm: pos.y / scale,
+                    width_mm: pos.width / scale,
+                    height_mm: pos.height / scale,
+                };
+            }
+            panelPositions[panel.name] = pos;
+            panelLayoutMm[panel.name] = posMm;
+
+            const item = document.createElement('div');
+            item.className = 'panel-canvas-item' + (idx === currentPanelIndex ? ' active' : '');
+            item.dataset.panelIndex = idx;
+            item.dataset.panelName = panel.name;
+            item.style.left = pos.x + 'px';
+            item.style.top = pos.y + 'px';
+            item.style.width = pos.width + 'px';
+            item.style.height = pos.height + 'px';
+
+            if (panel.image) {
+                item.innerHTML = `
+                    <span class="panel-canvas-label">${panel.name}</span>
+                    <span class="panel-position-indicator" id="pos-${panel.name}"></span>
+                    <div class="panel-drag-handle" title="Drag to move panel">⋮⋮</div>
+                    <div class="panel-card-container">
+                        <img src="data:image/png;base64,${panel.image}" alt="Panel ${panel.name}">
+                        <svg class="panel-card-overlay" id="panel-overlay-${idx}"></svg>
+                    </div>
+                `;
+            } else {
+                item.innerHTML = `
+                    <span class="panel-canvas-label">${panel.name}</span>
+                    <span class="panel-position-indicator" id="pos-${panel.name}"></span>
+                    <div class="panel-drag-handle" title="Drag to move panel">⋮⋮</div>
+                    <div style="padding: 20px; color: var(--text-muted);">No preview</div>
+                `;
+            }
+
+            // Add interactive event handlers (hover, click for element selection)
+            // Note: initCanvasItemInteraction already calls initPanelDrag internally
+            initCanvasItemInteraction(item, idx, panel.name);
+
+            canvasEl.appendChild(item);
+        });
+
+        // Update canvas size to fit all panels (unified canvas)
+        const canvasHeight = Math.max(...Object.values(panelPositions).map(p => p.y + p.height)) + 10;
+        const canvasWidth = Math.max(...Object.values(panelPositions).map(p => p.x + p.width)) + 10;
+        canvasEl.style.minHeight = Math.max(400, canvasHeight) + 'px';
+        canvasEl.style.minWidth = canvasWidth + 'px';
+
+        // Update panel indicator
+        updatePanelIndicator();
+
+        // Show unified canvas for multi-panel figures
+        showingPanelGrid = true;
+        document.getElementById('panel-grid-section').style.display = 'block';
+    } catch (e) {
+        console.error('Error loading panels:', e);
+    }
+}
+
+// ============================================================================
+// Panel Navigation
+// ============================================================================
+function togglePanelGrid() {
+    showingPanelGrid = !showingPanelGrid;
+    if (showingPanelGrid) {
+        loadPanelGrid();
+    } else {
+        document.getElementById('panel-grid-section').style.display = 'none';
+    }
+}
+
+function prevPanel() {
+    if (currentPanelIndex > 0) {
+        loadPanelForEditing(panelData.panels[currentPanelIndex - 1].name);
+    }
+}
+
+function nextPanel() {
+    if (currentPanelIndex < panelData.panels.length - 1) {
+        loadPanelForEditing(panelData.panels[currentPanelIndex + 1].name);
+    }
+}
+
+function updatePanelIndicator() {
+    if (!panelData) return;
+
+    const indicator = document.getElementById('panel-indicator');
+    const prevBtn = document.getElementById('btn-prev-panel');
+    const nextBtn = document.getElementById('btn-next-panel');
+
+    // Update indicator text (if elements exist)
+    if (indicator) {
+        indicator.textContent = `${currentPanelIndex + 1} / ${panelData.panels.length}`;
+    }
+
+    // Update button states
+    if (prevBtn) prevBtn.disabled = currentPanelIndex === 0;
+    if (nextBtn) nextBtn.disabled = currentPanelIndex === panelData.panels.length - 1;
+}