scitex 2.10.3__py3-none-any.whl → 2.13.0__py3-none-any.whl

scitex/fts/_fig/_editor/_gui/_flask_editor/static/js/editor/overlay.js

@@ -1,371 +0,0 @@
-/**
- * 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/fts/_fig/_editor/_gui/_flask_editor/static/js/editor/preview.js

@@ -1,293 +0,0 @@
-/**
- * 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;
-}