figrecipe 0.7.4__py3-none-any.whl → 0.9.0__py3-none-any.whl

figrecipe/_editor/_templates/_scripts/_panel_position.py

@@ -12,6 +12,7 @@ SCRIPTS_PANEL_POSITION = r"""
 
 let panelPositions = {};
 let figSize = { width_mm: 0, height_mm: 0 };
+let currentSelectedPanelIndex = null;  // Track currently selected panel
 
 // Load panel positions from server
 async function loadPanelPositions() {
@@ -26,54 +27,57 @@ async function loadPanelPositions() {
         }
 
         panelPositions = data;
-        updatePanelSelector();
-        updatePanelPositionInputs();
+        // Update inputs if a panel is selected
+        if (currentSelectedPanelIndex !== null) {
+            updatePanelPositionInputs();
+        }
     } catch (error) {
         console.error('Failed to load panel positions:', error);
     }
 }
 
-// Update panel selector dropdown
-function updatePanelSelector() {
-    const selector = document.getElementById('panel_selector');
-    if (!selector) return;
-
-    selector.innerHTML = '';
-    const axKeys = Object.keys(panelPositions).sort();
-
-    axKeys.forEach((key, index) => {
-        const opt = document.createElement('option');
-        opt.value = index;
-        // Show panel label (A, B, C...) if available
-        const label = String.fromCharCode(65 + index); // A, B, C...
-        opt.textContent = `Panel ${label} (${key})`;
-        selector.appendChild(opt);
-    });
-
-    // Add change event listener - mark as explicitly selected on dropdown change
-    selector.addEventListener('change', () => {
-        panelExplicitlySelected = true;
-        updatePanelPositionInputs();
-    });
-}
-
-let panelExplicitlySelected = false;
-
-// Update position input fields based on selected panel
+// Update position input fields based on currently selected panel
 function updatePanelPositionInputs(showHighlight = true) {
-    const selector = document.getElementById('panel_selector');
-    if (!selector) return;
+    const indicator = document.getElementById('current_panel_indicator');
+    const leftInput = document.getElementById('panel_left');
+    const topInput = document.getElementById('panel_top');
+    const widthInput = document.getElementById('panel_width');
+    const heightInput = document.getElementById('panel_height');
+    const applyBtn = document.getElementById('apply_panel_position');
+
+    // If no panel selected, show placeholder and disable inputs
+    if (currentSelectedPanelIndex === null) {
+        if (indicator) {
+            indicator.textContent = 'Select an element';
+            indicator.classList.remove('panel-selected');
+        }
+        [leftInput, topInput, widthInput, heightInput].forEach(input => {
+            if (input) {
+                input.value = '';
+                input.disabled = true;
+            }
+        });
+        if (applyBtn) applyBtn.disabled = true;
+        return;
+    }
 
-    const axIndex = parseInt(selector.value, 10);
-    const axKey = Object.keys(panelPositions).sort()[axIndex];
+    const axKey = Object.keys(panelPositions).sort()[currentSelectedPanelIndex];
     const pos = panelPositions[axKey];
 
     if (!pos) return;
 
-    const leftInput = document.getElementById('panel_left');
-    const topInput = document.getElementById('panel_top');
-    const widthInput = document.getElementById('panel_width');
-    const heightInput = document.getElementById('panel_height');
+    // Update indicator
+    if (indicator) {
+        const label = String.fromCharCode(65 + currentSelectedPanelIndex); // A, B, C...
+        indicator.textContent = `Panel ${label}`;
+        indicator.classList.add('panel-selected');
+    }
+
+    // Enable inputs and update values
+    [leftInput, topInput, widthInput, heightInput].forEach(input => {
+        if (input) input.disabled = false;
+    });
+    if (applyBtn) applyBtn.disabled = false;
 
     // Values are already in mm from server
     if (leftInput) leftInput.value = pos.left;
@@ -81,13 +85,13 @@ function updatePanelPositionInputs(showHighlight = true) {
     if (widthInput) widthInput.value = pos.width;
     if (heightInput) heightInput.value = pos.height;
 
-    // Only draw highlight if explicitly selected (not on initial load)
-    if (showHighlight && panelExplicitlySelected) {
+    // Draw highlight
+    if (showHighlight) {
         drawPanelSelectionHighlight(pos);
     }
 }
 
-// Draw visual highlight around selected panel
+// Draw visual highlight around selected panel (axis bbox only)
 function drawPanelSelectionHighlight(pos) {
     const overlay = document.getElementById('selection-overlay');
     if (!overlay) return;
@@ -130,6 +134,60 @@ function drawPanelSelectionHighlight(pos) {
     overlay.appendChild(rect);
 }
 
+// Draw full panel bbox (union of all elements belonging to the panel)
+function drawPanelBbox(axIndex) {
+    const overlay = document.getElementById('selection-overlay');
+    if (!overlay) return;
+
+    // Clear previous panel bbox
+    const existingBbox = document.getElementById('panel-bbox-highlight');
+    if (existingBbox) existingBbox.remove();
+
+    // Get panel_bboxes from currentBboxes metadata
+    const panelBboxes = currentBboxes?._meta?.panel_bboxes;
+    if (!panelBboxes || !panelBboxes[axIndex]) {
+        console.log('[PanelBbox] No panel bbox for ax', axIndex);
+        return;
+    }
+
+    const panelBbox = panelBboxes[axIndex];
+    const img = document.getElementById('preview-image');
+    if (!img || !img.naturalWidth || !img.naturalHeight) return;
+
+    // Ensure viewBox is set
+    overlay.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
+    overlay.style.width = `${img.naturalWidth}px`;
+    overlay.style.height = `${img.naturalHeight}px`;
+
+    // panel bbox is already in pixel coordinates
+    const x = panelBbox.x;
+    const y = panelBbox.y;
+    const width = panelBbox.width;
+    const height = panelBbox.height;
+
+    // Create panel bbox rectangle (different style from axis highlight)
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.id = 'panel-bbox-highlight';
+    rect.setAttribute('x', x - 2);  // Small padding
+    rect.setAttribute('y', y - 2);
+    rect.setAttribute('width', width + 4);
+    rect.setAttribute('height', height + 4);
+    rect.setAttribute('fill', 'rgba(59, 130, 246, 0.05)');  // Very light blue fill
+    rect.setAttribute('stroke', '#3b82f6');  // Blue stroke
+    rect.setAttribute('stroke-width', '2');
+    rect.setAttribute('stroke-dasharray', '6,3');
+    rect.style.pointerEvents = 'none';
+
+    overlay.appendChild(rect);
+    console.log('[PanelBbox] Drew bbox for panel', axIndex, panelBbox);
+}
+
+// Clear panel bbox highlight
+function clearPanelBbox() {
+    const existingBbox = document.getElementById('panel-bbox-highlight');
+    if (existingBbox) existingBbox.remove();
+}
+
 // Clear panel selection highlight
 function clearPanelSelectionHighlight() {
     const existingHighlight = document.getElementById('panel-selection-highlight');
@@ -137,25 +195,37 @@ function clearPanelSelectionHighlight() {
 }
 
 // Select panel by index (called when clicking on axes in canvas)
-function selectPanelByIndex(axIndex) {
-    const selector = document.getElementById('panel_selector');
-    if (!selector) return;
-
-    // Mark as explicitly selected
-    panelExplicitlySelected = true;
-
-    // Update dropdown selection
-    selector.value = axIndex;
+function selectPanelByIndex(axIndex, switchToAxisTab = true) {
+    // Update the current selected panel index
+    currentSelectedPanelIndex = axIndex;
 
     // Update inputs and highlight
     updatePanelPositionInputs();
 
-    // Switch to Axis tab
-    switchTab('axis');
+    // Draw panel bbox (union of all elements)
+    drawPanelBbox(axIndex);
+
+    // Update panel caption input
+    if (typeof updatePanelCaptionInput === 'function') {
+        updatePanelCaptionInput(axIndex);
+    }
+
+    // Switch to Axis tab only if requested (default true for backwards compat)
+    if (switchToAxisTab) {
+        switchTab('axis');
+    }
 
     console.log('Selected panel', axIndex);
 }
 
+// Clear panel selection (called when selection is cleared)
+function clearPanelSelection() {
+    currentSelectedPanelIndex = null;
+    updatePanelPositionInputs(false);
+    clearPanelSelectionHighlight();
+    clearPanelBbox();
+}
+
 // Find panel index from axes key (e.g., "ax_0" -> 0)
 function getPanelIndexFromKey(key) {
     if (!key) return null;
@@ -179,18 +249,22 @@ function getPanelIndexFromKey(key) {
 
 // Apply panel position changes
 async function applyPanelPosition() {
-    const selector = document.getElementById('panel_selector');
     const leftInput = document.getElementById('panel_left');
     const topInput = document.getElementById('panel_top');
     const widthInput = document.getElementById('panel_width');
     const heightInput = document.getElementById('panel_height');
 
-    if (!selector || !leftInput || !topInput || !widthInput || !heightInput) {
+    if (currentSelectedPanelIndex === null) {
+        console.error('No panel selected');
+        return;
+    }
+
+    if (!leftInput || !topInput || !widthInput || !heightInput) {
         console.error('Panel position inputs not found');
         return;
     }
 
-    const axIndex = parseInt(selector.value, 10);
+    const axIndex = currentSelectedPanelIndex;
     const left = parseFloat(leftInput.value);
     const top = parseFloat(topInput.value);
     const width = parseFloat(widthInput.value);
@@ -268,6 +342,116 @@ function initPanelPositionControls() {
 
     // Load initial positions
     loadPanelPositions();
+
+    // Initialize debug toolbar if in debug mode
+    if (typeof DEBUG_MODE !== 'undefined' && DEBUG_MODE) {
+        initDebugToolbar();
+    }
+}
+
+// ===== DEBUG MODE: SHOW ALL BBOXES =====
+
+let allBboxesVisible = false;
+
+// Toggle showing all panel bboxes at once
+function toggleAllBboxes() {
+    allBboxesVisible = !allBboxesVisible;
+
+    const overlay = document.getElementById('selection-overlay');
+    if (!overlay) return;
+
+    // Remove existing debug bboxes
+    document.querySelectorAll('.debug-panel-bbox').forEach(el => el.remove());
+
+    if (!allBboxesVisible) {
+        console.log('[Debug] All bboxes hidden');
+        updateDebugButton(false);
+        return;
+    }
+
+    const panelBboxes = currentBboxes?._meta?.panel_bboxes;
+    if (!panelBboxes) {
+        console.warn('[Debug] No panel bboxes available');
+        showToast('No panel bboxes available', 'warning');
+        return;
+    }
+
+    const img = document.getElementById('preview-image');
+    if (!img || !img.naturalWidth || !img.naturalHeight) return;
+
+    // Ensure viewBox is set
+    overlay.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
+    overlay.style.width = `${img.naturalWidth}px`;
+    overlay.style.height = `${img.naturalHeight}px`;
+
+    // Colors for different panels
+    const colors = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16', '#f97316'];
+
+    // Draw bbox for each panel
+    Object.entries(panelBboxes).forEach(([axIdx, bbox], idx) => {
+        const color = colors[idx % colors.length];
+        const label = String.fromCharCode(65 + parseInt(axIdx)); // A, B, C...
+
+        // Create bbox rectangle
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.classList.add('debug-panel-bbox');
+        rect.setAttribute('x', bbox.x);
+        rect.setAttribute('y', bbox.y);
+        rect.setAttribute('width', bbox.width);
+        rect.setAttribute('height', bbox.height);
+        rect.setAttribute('fill', 'none');
+        rect.setAttribute('stroke', color);
+        rect.setAttribute('stroke-width', '2');
+        rect.setAttribute('stroke-dasharray', '5,3');
+        rect.style.pointerEvents = 'none';
+        overlay.appendChild(rect);
+
+        // Create label
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.classList.add('debug-panel-bbox');
+        text.setAttribute('x', bbox.x + 5);
+        text.setAttribute('y', bbox.y + 15);
+        text.setAttribute('fill', color);
+        text.setAttribute('font-size', '14');
+        text.setAttribute('font-weight', 'bold');
+        text.style.pointerEvents = 'none';
+        text.textContent = `Panel ${label}`;
+        overlay.appendChild(text);
+    });
+
+    console.log('[Debug] Showing all panel bboxes:', Object.keys(panelBboxes).length);
+    updateDebugButton(true);
+}
+
+// Update debug button state
+function updateDebugButton(active) {
+    const btn = document.getElementById('btn-debug-bboxes');
+    if (btn) {
+        btn.classList.toggle('active', active);
+        btn.title = active ? 'Hide All Bboxes (Alt+B)' : 'Show All Bboxes (Alt+B)';
+    }
+}
+
+// Initialize debug toolbar
+function initDebugToolbar() {
+    // Find the preview controls area
+    const previewControls = document.querySelector('.preview-controls');
+    if (!previewControls) return;
+
+    // Create debug button
+    const debugBtn = document.createElement('button');
+    debugBtn.id = 'btn-debug-bboxes';
+    debugBtn.className = 'btn-icon btn-debug';
+    debugBtn.title = 'Show All Bboxes (Alt+B)';
+    debugBtn.innerHTML = '🔲';
+    debugBtn.style.cssText = 'margin-left: 8px; background: #374151; border: 1px dashed #f59e0b; color: #f59e0b;';
+    debugBtn.onclick = toggleAllBboxes;
+
+    // Add to controls
+    previewControls.appendChild(debugBtn);
+
+    console.log('[Debug] Debug toolbar initialized (FIGRECIPE_DEBUG_MODE=1)');
+    console.log('[Debug] Shortcuts: Alt+I = Element Inspector, Alt+B = Show All Bboxes');
 }
 
 // Call initialization on DOMContentLoaded

figrecipe/_editor/_templates/_scripts/_panel_resize.py

@@ -0,0 +1,230 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Panel resize JavaScript for the figure editor.
+
+This module handles resizing of panels by dragging dividers:
+- File browser panel (left)
+- Data panel (left)
+- Properties panel (right)
+
+Features smart accordion:
+- Auto-collapse when dragged below threshold
+- Auto-expand when dragging from collapsed state
+"""
+
+SCRIPTS_PANEL_RESIZE = """
+// ==================== PANEL RESIZE ====================
+// Enables dragging panel dividers to resize panels with smart accordion
+
+// Store default widths for each panel
+const panelDefaultWidths = {
+    'file-browser-panel': 200,
+    'datatable-panel': 280,
+    'controls-panel': 350
+};
+
+// Collapse threshold - panels collapse when dragged below this width
+const COLLAPSE_THRESHOLD = 60;
+
+// Expand threshold - collapsed panels expand when dragged beyond this
+const EXPAND_THRESHOLD = 50;
+
+function initPanelResize() {
+    // File browser resize handle
+    const fileBrowserResize = document.getElementById('file-browser-resize');
+    const fileBrowserPanel = document.getElementById('file-browser-panel');
+
+    // Datatable resize handle
+    const datatableResize = document.getElementById('datatable-resize');
+    const datatablePanel = document.getElementById('datatable-panel');
+
+    // Properties panel resize handle (will be added to controls-panel)
+    const controlsPanel = document.querySelector('.controls-panel');
+
+    if (fileBrowserResize && fileBrowserPanel) {
+        initSmartResizer(fileBrowserResize, fileBrowserPanel, 'left', 'file-browser-panel');
+    }
+
+    if (datatableResize && datatablePanel) {
+        initSmartResizer(datatableResize, datatablePanel, 'left', 'datatable-panel');
+    }
+
+    // Add resize handle for properties panel
+    if (controlsPanel) {
+        let propertiesResize = document.getElementById('properties-resize');
+        if (!propertiesResize) {
+            propertiesResize = document.createElement('div');
+            propertiesResize.id = 'properties-resize';
+            propertiesResize.className = 'properties-resize';
+            controlsPanel.insertBefore(propertiesResize, controlsPanel.firstChild);
+        }
+        initSmartResizer(propertiesResize, controlsPanel, 'right', 'controls-panel');
+    }
+
+    console.log('[PanelResize] Initialized with smart accordion');
+}
+
+function initSmartResizer(resizeHandle, panel, side, panelId) {
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+    let wasCollapsed = false;
+
+    // Handle click on resize handle when panel is collapsed - expand it
+    resizeHandle.addEventListener('click', (e) => {
+        if (panel.classList.contains('collapsed')) {
+            e.stopPropagation();
+            expandPanel(panel, panelId);
+        }
+    });
+
+    resizeHandle.addEventListener('mousedown', (e) => {
+        isResizing = true;
+        startX = e.clientX;
+        wasCollapsed = panel.classList.contains('collapsed');
+
+        // If collapsed, start with minimal width
+        if (wasCollapsed) {
+            startWidth = panel.offsetWidth;
+        } else {
+            startWidth = panel.offsetWidth;
+            // Save current width as default if it's reasonable
+            if (startWidth > COLLAPSE_THRESHOLD) {
+                panelDefaultWidths[panelId] = startWidth;
+            }
+        }
+
+        resizeHandle.classList.add('resizing');
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (!isResizing) return;
+
+        const deltaX = e.clientX - startX;
+        let newWidth;
+
+        if (side === 'left') {
+            // For left panel, positive delta increases width
+            newWidth = startWidth + deltaX;
+        } else {
+            // For right panel, negative delta increases width
+            newWidth = startWidth - deltaX;
+        }
+
+        // Smart accordion behavior
+        if (wasCollapsed) {
+            // Expanding from collapsed state
+            if (Math.abs(deltaX) > EXPAND_THRESHOLD) {
+                // Expand to default width
+                expandPanel(panel, panelId);
+                // Continue resizing from expanded state
+                startX = e.clientX;
+                startWidth = panelDefaultWidths[panelId];
+                wasCollapsed = false;
+            }
+        } else {
+            // Normal resize - check for collapse threshold
+            if (newWidth < COLLAPSE_THRESHOLD) {
+                // Collapse the panel
+                collapsePanel(panel, panelId);
+                isResizing = false;
+                resizeHandle.classList.remove('resizing');
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+                return;
+            }
+
+            // Clamp to min/max (but above collapse threshold)
+            const minWidth = Math.max(COLLAPSE_THRESHOLD, parseInt(getComputedStyle(panel).minWidth) || 160);
+            const maxWidth = parseInt(getComputedStyle(panel).maxWidth) || 500;
+            newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+
+            panel.style.width = newWidth + 'px';
+        }
+    });
+
+    document.addEventListener('mouseup', () => {
+        if (isResizing) {
+            isResizing = false;
+            resizeHandle.classList.remove('resizing');
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+
+            // Save width if not collapsed
+            if (!panel.classList.contains('collapsed')) {
+                const currentWidth = panel.offsetWidth;
+                if (currentWidth > COLLAPSE_THRESHOLD) {
+                    panelDefaultWidths[panelId] = currentWidth;
+                    localStorage.setItem(`figrecipe_${panelId}_width`, currentWidth);
+                }
+            }
+        }
+    });
+
+    // Also handle mouse leaving window
+    document.addEventListener('mouseleave', () => {
+        if (isResizing) {
+            isResizing = false;
+            resizeHandle.classList.remove('resizing');
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        }
+    });
+}
+
+function collapsePanel(panel, panelId) {
+    panel.classList.add('collapsed');
+
+    // Update localStorage
+    const storageKey = getStorageKey(panelId);
+    if (storageKey) {
+        localStorage.setItem(storageKey, 'true');
+    }
+
+    // Dispatch custom event for accordion sync
+    panel.dispatchEvent(new CustomEvent('panelCollapsed', { bubbles: true }));
+    console.log(`[PanelResize] ${panelId} collapsed via drag`);
+}
+
+function expandPanel(panel, panelId) {
+    panel.classList.remove('collapsed');
+
+    // Restore saved width or default
+    const savedWidth = localStorage.getItem(`figrecipe_${panelId}_width`);
+    const width = savedWidth ? parseInt(savedWidth) : panelDefaultWidths[panelId];
+    panel.style.width = width + 'px';
+
+    // Update localStorage
+    const storageKey = getStorageKey(panelId);
+    if (storageKey) {
+        localStorage.setItem(storageKey, 'false');
+    }
+
+    // Dispatch custom event for accordion sync
+    panel.dispatchEvent(new CustomEvent('panelExpanded', { bubbles: true }));
+    console.log(`[PanelResize] ${panelId} expanded via drag to ${width}px`);
+}
+
+function getStorageKey(panelId) {
+    const keyMap = {
+        'file-browser-panel': 'figrecipe_filebrowser_collapsed',
+        'datatable-panel': 'figrecipe_data_collapsed',
+        'controls-panel': 'figrecipe_properties_collapsed'
+    };
+    return keyMap[panelId];
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPanelResize);
+} else {
+    initPanelResize();
+}
+"""
+
+__all__ = ["SCRIPTS_PANEL_RESIZE"]
+
+# EOF