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

figrecipe/_editor/_templates/_scripts/_core.py

@@ -5,6 +5,9 @@
 SCRIPTS_CORE = """
 // ==================== CORE STATE & INITIALIZATION ====================
 
+// Debug mode - enabled via FIGRECIPE_DEBUG_MODE=1 env var
+const DEBUG_MODE = DEBUG_MODE_PLACEHOLDER;
+
 // State
 let currentBboxes = initialBboxes;
 let colorMap = initialColorMap;
@@ -34,6 +37,7 @@ const ZOOM_MIN = 0.1;
 const ZOOM_MAX = 5.0;
 const ZOOM_STEP = 0.25;
 let isPanning = false;
+let panTarget = null;  // Current scrollable element being panned
 let panStartX = 0;
 let panStartY = 0;
 let scrollStartX = 0;
@@ -86,6 +90,10 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize measurement overlay controls
     initializeOverlayControls();
+
+    // Initialize context menus
+    if (typeof initializeCanvasContextMenu === 'function') initializeCanvasContextMenu();
+    if (typeof initializeFilesContextMenu === 'function') initializeFilesContextMenu();
 });
 
 // Theme values are passed from server via initialValues
@@ -164,38 +172,43 @@ function updateAllModifiedStates() {
 function initializeEventListeners() {
     // Preview image click for element selection
     const previewImg = document.getElementById('preview-image');
-    previewImg.addEventListener('click', handlePreviewClick);
+    if (previewImg) previewImg.addEventListener('click', handlePreviewClick);
 
     // SVG overlay click - deselect when clicking on empty area (not on a shape)
     const hitregionOverlay = document.getElementById('hitregion-overlay');
-    hitregionOverlay.addEventListener('click', function(event) {
-        // Only clear if clicking directly on the SVG (not on a shape inside it)
-        if (event.target === hitregionOverlay) {
-            clearSelection();
-        }
-    });
+    if (hitregionOverlay) {
+        hitregionOverlay.addEventListener('click', function(event) {
+            if (event.target === hitregionOverlay) clearSelection();
+        });
+    }
 
     // Selection overlay click - same behavior
     const selectionOverlay = document.getElementById('selection-overlay');
-    selectionOverlay.addEventListener('click', function(event) {
-        if (event.target === selectionOverlay) {
-            clearSelection();
-        }
-    });
+    if (selectionOverlay) {
+        selectionOverlay.addEventListener('click', function(event) {
+            if (event.target === selectionOverlay) clearSelection();
+        });
+    }
 
-    // Dark mode toggle
+    // Dark mode toggle button
     const darkModeToggle = document.getElementById('dark-mode-toggle');
-    darkModeToggle.addEventListener('change', function() {
-        document.documentElement.setAttribute('data-theme', this.checked ? 'dark' : 'light');
-        scheduleUpdate();
-    });
+    if (darkModeToggle) {
+        const updateThemeIcon = (theme) => { darkModeToggle.textContent = theme === 'dark' ? '🌙' : '☀️'; };
+        darkModeToggle.addEventListener('click', function() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            updateThemeIcon(newTheme);
+            scheduleUpdate();
+        });
+        updateThemeIcon(document.documentElement.getAttribute('data-theme'));
+    }
 
     // Form inputs - auto update on change
     // Exclude panel position inputs - they have their own Apply button
-    const panelPositionInputIds = ['panel_left', 'panel_top', 'panel_width', 'panel_height', 'panel_selector'];
+    const panelPositionInputIds = ['panel_left', 'panel_top', 'panel_width', 'panel_height'];
     const inputs = document.querySelectorAll('input, select');
     inputs.forEach(input => {
-        if (input.id === 'dark-mode-toggle') return;
         if (panelPositionInputIds.includes(input.id)) return;  // Skip panel position inputs
 
         // Update modified state and trigger preview update
@@ -220,31 +233,36 @@ function initializeEventListeners() {
         }
     });
 
-    // Buttons
-    document.getElementById('btn-refresh').addEventListener('click', updatePreview);
-    document.getElementById('btn-reset').addEventListener('click', resetValues);
-    document.getElementById('btn-save').addEventListener('click', saveOverrides);
-    document.getElementById('btn-restore').addEventListener('click', restoreOriginal);
-    // Hit regions toggle (optional - button may be hidden in production)
+    // Buttons - with null checks
+    const btnRefresh = document.getElementById('btn-refresh');
+    const btnReset = document.getElementById('btn-reset');
+    const btnSave = document.getElementById('btn-save');
+    const btnRestore = document.getElementById('btn-restore');
+    if (btnRefresh) btnRefresh.addEventListener('click', updatePreview);
+    if (btnReset) btnReset.addEventListener('click', resetValues);
+    if (btnSave) btnSave.addEventListener('click', saveOverrides);
+    if (btnRestore) btnRestore.addEventListener('click', restoreOriginal);
     const hitmapBtn = document.getElementById('btn-show-hitmap');
     if (hitmapBtn) hitmapBtn.addEventListener('click', toggleHitmapOverlay);
 
-    // Download dropdown buttons
+    // Download dropdown, label inputs, and captions
     initializeDownloadDropdown();
-
-    // Label input handlers
     initializeLabelInputs();
+    if (typeof initializeCaptionInputs === 'function') initializeCaptionInputs();
 
-    // View mode toggle buttons (legacy - replaced by tabs)
+    // View mode toggle buttons (legacy)
     const btnAll = document.getElementById('btn-show-all');
     const btnSelected = document.getElementById('btn-show-selected');
     if (btnAll) btnAll.addEventListener('click', () => setViewMode('all'));
     if (btnSelected) btnSelected.addEventListener('click', () => setViewMode('selected'));
 
     // Tab navigation
-    document.getElementById('tab-figure').addEventListener('click', () => switchTab('figure'));
-    document.getElementById('tab-axis').addEventListener('click', () => switchTab('axis'));
-    document.getElementById('tab-element').addEventListener('click', () => switchTab('element'));
+    const tabFigure = document.getElementById('tab-figure');
+    const tabAxis = document.getElementById('tab-axis');
+    const tabElement = document.getElementById('tab-element');
+    if (tabFigure) tabFigure.addEventListener('click', () => switchTab('figure'));
+    if (tabAxis) tabAxis.addEventListener('click', () => switchTab('axis'));
+    if (tabElement) tabElement.addEventListener('click', () => switchTab('element'));
 
     // Theme modal handlers
     initializeThemeModal();
@@ -282,6 +300,26 @@ function handleKeyboardShortcuts(event) {
         return;
     }
 
+    // Alt+I (without Ctrl): Element Inspector toggle (DEBUG MODE ONLY)
+    if (DEBUG_MODE && event.altKey && !event.ctrlKey && !event.shiftKey && (event.key === 'i' || event.key === 'I')) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (typeof toggleElementInspector === 'function') {
+            toggleElementInspector();
+        }
+        return;
+    }
+
+    // Alt+B: Show All Bboxes toggle (DEBUG MODE ONLY)
+    if (DEBUG_MODE && event.altKey && !event.ctrlKey && !event.shiftKey && (event.key === 'b' || event.key === 'B')) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (typeof toggleAllBboxes === 'function') {
+            toggleAllBboxes();
+        }
+        return;
+    }
+
     // Ctrl+S: Save overrides
     if (event.ctrlKey && event.key === 's') {
         event.preventDefault();
@@ -299,6 +337,25 @@ function handleKeyboardShortcuts(event) {
         return;
     }
 
+    // Ctrl+Z: Undo
+    if (event.ctrlKey && !event.shiftKey && event.key === 'z') {
+        event.preventDefault();
+        if (typeof undo === 'function') {
+            undo();
+        }
+        return;
+    }
+
+    // Ctrl+Shift+Z or Ctrl+Y: Redo
+    if ((event.ctrlKey && event.shiftKey && event.key === 'Z') ||
+        (event.ctrlKey && event.key === 'y')) {
+        event.preventDefault();
+        if (typeof redo === 'function') {
+            redo();
+        }
+        return;
+    }
+
     // Ctrl+Shift+S: Download PNG
     if (event.ctrlKey && event.shiftKey && event.key === 'S') {
         event.preventDefault();
@@ -306,11 +363,11 @@ function handleKeyboardShortcuts(event) {
         return;
     }
 
-    // F5 or Ctrl+R: Refresh preview
+    // F5 or Ctrl+R: Render preview
     if (event.key === 'F5' || (event.ctrlKey && event.key === 'r')) {
         event.preventDefault();
         updatePreview();
-        showToast('Refreshed', 'info');
+        showToast('Rendered', 'info');
         return;
     }
 
@@ -342,10 +399,10 @@ function handleKeyboardShortcuts(event) {
         return;
     }
 
-    // R: Reset to theme defaults
+    // R: Render (re-render figure)
     if (event.key === 'r' || event.key === 'R') {
-        resetValues();
-        showToast('Reset to defaults', 'info');
+        updatePreview();
+        showToast('Rendered', 'info');
         return;
     }
 

figrecipe/_editor/_templates/_scripts/_datatable/__init__.py

@@ -0,0 +1,59 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable JavaScript modules - orchestrator.
+
+Combines all datatable JavaScript modules:
+- _core.py: State, panel toggle, initialization
+- _tabs.py: Multi-tab management for multiple datasets
+- _import.py: Drag-drop, file parsing
+- _table.py: Table rendering with smart truncation
+- _selection.py: Multi-cell selection and highlights
+- _cell_edit.py: Inline cell editing
+- _clipboard.py: Copy, paste, cut operations
+- _plot.py: Plot type hints, variable assignment, plotting
+- _editable.py: Create and edit tables manually
+"""
+
+from ._cell_edit import JS_DATATABLE_CELL_EDIT
+from ._clipboard import JS_DATATABLE_CLIPBOARD
+from ._context_menu import JS_DATATABLE_CONTEXT_MENU
+from ._core import JS_DATATABLE_CORE
+from ._editable import JS_DATATABLE_EDITABLE
+from ._import import JS_DATATABLE_IMPORT
+from ._plot import get_js_datatable_plot
+from ._selection import JS_DATATABLE_SELECTION
+from ._table import JS_DATATABLE_TABLE
+from ._tabs import JS_DATATABLE_TABS
+
+
+def get_scripts_datatable() -> str:
+    """Generate combined datatable JavaScript."""
+    return (
+        JS_DATATABLE_CORE
+        + "\n"
+        + JS_DATATABLE_TABS
+        + "\n"
+        + JS_DATATABLE_IMPORT
+        + "\n"
+        + JS_DATATABLE_TABLE
+        + "\n"
+        + JS_DATATABLE_SELECTION
+        + "\n"
+        + JS_DATATABLE_CELL_EDIT
+        + "\n"
+        + JS_DATATABLE_CLIPBOARD
+        + "\n"
+        + JS_DATATABLE_CONTEXT_MENU
+        + "\n"
+        + JS_DATATABLE_EDITABLE
+        + "\n"
+        + get_js_datatable_plot()
+    )
+
+
+# For backward compatibility
+SCRIPTS_DATATABLE = get_scripts_datatable()
+
+__all__ = ["SCRIPTS_DATATABLE", "get_scripts_datatable"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_datatable/_cell_edit.py

@@ -0,0 +1,97 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable inline cell editing JavaScript."""
+
+JS_DATATABLE_CELL_EDIT = """
+// ============================================================================
+// Cell Editing (Inline Edit Mode)
+// ============================================================================
+let datatableEditingCell = null;  // Track which cell is being edited
+let datatableSkipBlur = false;    // Flag to skip blur during Tab/Enter navigation
+
+function enterCellEditMode(cell) {
+    if (datatableEditMode) return;
+
+    datatableEditMode = true;
+    datatableEditingCell = cell;
+    cell.classList.add('cell-editing');
+
+    const span = cell.querySelector('.cell-text');
+    const originalValue = span ? span.textContent : '';
+
+    // Replace span with input
+    cell.innerHTML = `<input type="text" class="cell-edit-input" value="${originalValue}">`;
+    const input = cell.querySelector('input');
+    input.focus();
+    input.select();
+
+    // Handle input events
+    input.addEventListener('blur', (e) => {
+        // Skip if Tab/Enter is handling navigation, or if this isn't the editing cell
+        if (datatableSkipBlur || datatableEditingCell !== cell) {
+            return;
+        }
+        if (datatableEditMode && datatableEditingCell === cell) {
+            exitCellEditMode(cell, input.value, false);
+        }
+    });
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            datatableSkipBlur = true;  // Prevent blur from interfering
+            exitCellEditMode(cell, input.value, true);
+            navigateWithTabEnterAndEdit('enter', e.shiftKey);
+            datatableSkipBlur = false;
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            exitCellEditMode(cell, originalValue, false);
+        } else if (e.key === 'Tab') {
+            e.preventDefault();
+            datatableSkipBlur = true;  // Prevent blur from interfering
+            exitCellEditMode(cell, input.value, true);
+            navigateWithTabEnterAndEdit('tab', e.shiftKey);
+            datatableSkipBlur = false;
+        }
+    });
+}
+
+function exitCellEditMode(cell, value, continueEditing = false) {
+    if (!datatableEditMode) return;
+
+    const row = parseInt(cell.dataset.row);
+    const col = parseInt(cell.dataset.col);
+
+    // Update data - preserve empty values as empty (not 0)
+    if (datatableData && datatableData.rows[row]) {
+        if (value === '' || value === null || value === undefined) {
+            datatableData.rows[row][col] = '';
+        } else {
+            const colType = datatableData.columns[col]?.type;
+            if (colType === 'numeric') {
+                const num = parseFloat(value);
+                datatableData.rows[row][col] = isNaN(num) ? value : num;
+            } else {
+                datatableData.rows[row][col] = value;
+            }
+        }
+    }
+
+    // Restore cell display with span wrapper
+    const displayValue = value === null || value === undefined ? '' : value;
+    cell.innerHTML = `<span class="cell-text">${displayValue}</span>`;
+    cell.classList.remove('cell-editing');
+    cell.setAttribute('title', displayValue);
+
+    datatableEditMode = false;
+    datatableEditingCell = null;  // Clear editing cell reference
+
+    // Only focus this cell if we're NOT continuing to next cell
+    if (!continueEditing) {
+        cell.focus();
+    }
+}
+"""
+
+__all__ = ["JS_DATATABLE_CELL_EDIT"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_datatable/_clipboard.py

@@ -0,0 +1,164 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable clipboard operations JavaScript - copy, paste, cut."""
+
+JS_DATATABLE_CLIPBOARD = """
+// ============================================================================
+// Clipboard Operations (Copy, Paste, Cut)
+// ============================================================================
+let datatableCopiedRange = null;  // Track copied cell range for marching ants
+let datatableIsCutOperation = false;  // Track if it was cut (not copy)
+
+function handleCopy(e) {
+    if (!datatableSelectedCells || datatableEditMode) return;
+
+    e.preventDefault();
+    const text = getSelectedCellsAsTSV();
+    e.clipboardData.setData('text/plain', text);
+
+    // Store copied range and show marching ants
+    datatableCopiedRange = { ...datatableSelectedCells };
+    datatableIsCutOperation = false;
+    showMarchingAnts();
+}
+
+function handleCut(e) {
+    if (!datatableSelectedCells || datatableEditMode) return;
+
+    e.preventDefault();
+    const text = getSelectedCellsAsTSV();
+    e.clipboardData.setData('text/plain', text);
+
+    // Store cut range and show marching ants with faded cells
+    datatableCopiedRange = { ...datatableSelectedCells };
+    datatableIsCutOperation = true;
+    showMarchingAnts();
+}
+
+// Show Excel-style marching ants border around copied/cut cells
+function showMarchingAnts() {
+    clearMarchingAnts();  // Clear any existing marching ants
+    if (!datatableCopiedRange) return;
+
+    const { startRow, startCol, endRow, endCol } = datatableCopiedRange;
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+
+    for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+            const cell = document.querySelector(`td[data-row="${r}"][data-col="${c}"]`);
+            if (!cell) continue;
+
+            // Add border classes based on position in selection
+            if (r === minRow) cell.classList.add('copy-border-top');
+            if (r === maxRow) cell.classList.add('copy-border-bottom');
+            if (c === minCol) cell.classList.add('copy-border-left');
+            if (c === maxCol) cell.classList.add('copy-border-right');
+
+            // Add faded effect for cut operation
+            if (datatableIsCutOperation) {
+                cell.classList.add('cut-pending');
+            }
+        }
+    }
+}
+
+// Clear marching ants border
+function clearMarchingAnts() {
+    document.querySelectorAll('.copy-border-top, .copy-border-bottom, .copy-border-left, .copy-border-right, .cut-pending').forEach(cell => {
+        cell.classList.remove('copy-border-top', 'copy-border-bottom', 'copy-border-left', 'copy-border-right', 'cut-pending');
+    });
+}
+
+function handlePaste(e) {
+    if (!datatableCurrentCell || datatableEditMode || !datatableData) return;
+
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+    if (!text) return;
+
+    // If this was a cut operation, clear the source cells
+    if (datatableIsCutOperation && datatableCopiedRange) {
+        const { startRow, startCol, endRow, endCol } = datatableCopiedRange;
+        const minRow = Math.min(startRow, endRow);
+        const maxRow = Math.max(startRow, endRow);
+        const minCol = Math.min(startCol, endCol);
+        const maxCol = Math.max(startCol, endCol);
+
+        for (let r = minRow; r <= maxRow; r++) {
+            for (let c = minCol; c <= maxCol; c++) {
+                if (datatableData.rows[r]) {
+                    datatableData.rows[r][c] = '';
+                }
+            }
+        }
+    }
+
+    const rows = text.split('\\n').map(line => line.split('\\t'));
+    const startRow = datatableCurrentCell.row;
+    const startCol = datatableCurrentCell.col;
+
+    rows.forEach((rowData, rOffset) => {
+        const targetRow = startRow + rOffset;
+        if (targetRow >= datatableData.rows.length) return;
+
+        rowData.forEach((value, cOffset) => {
+            const targetCol = startCol + cOffset;
+            if (targetCol >= datatableData.columns.length) return;
+
+            // Preserve empty strings as empty (not convert to 0)
+            if (value === '' || value === null || value === undefined) {
+                datatableData.rows[targetRow][targetCol] = '';
+            } else {
+                const colType = datatableData.columns[targetCol]?.type;
+                if (colType === 'numeric') {
+                    const num = parseFloat(value);
+                    datatableData.rows[targetRow][targetCol] = isNaN(num) ? value : num;
+                } else {
+                    datatableData.rows[targetRow][targetCol] = value;
+                }
+            }
+        });
+    });
+
+    // Clear marching ants and reset cut state
+    clearMarchingAnts();
+    datatableCopiedRange = null;
+    datatableIsCutOperation = false;
+
+    renderDatatable();
+    updateCellSelectionDisplay();
+}
+
+function getSelectedCellsAsTSV() {
+    if (!datatableSelectedCells || !datatableData) return '';
+
+    const { startRow, startCol, endRow, endCol } = datatableSelectedCells;
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+
+    const lines = [];
+    for (let r = minRow; r <= maxRow; r++) {
+        const cells = [];
+        for (let c = minCol; c <= maxCol; c++) {
+            const value = datatableData.rows[r]?.[c];
+            // Preserve None as "None" string for copy
+            if (value === null || value === undefined) {
+                cells.push('');
+            } else {
+                cells.push(String(value));
+            }
+        }
+        lines.push(cells.join('\\t'));
+    }
+    return lines.join('\\n');
+}
+"""
+
+__all__ = ["JS_DATATABLE_CLIPBOARD"]
+
+# EOF