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

figrecipe/_editor/_templates/_scripts/_sync.py

@@ -0,0 +1,242 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Tri-directional synchronization between Data/Canvas/Properties panes.
+
+This module coordinates selection state across:
+- Data pane (datatable tabs)
+- Canvas pane (figure preview with hit regions)
+- Properties pane (Figure/Axis/Element tabs)
+
+Sync directions:
+- Canvas → Data: Selecting element highlights datatable tab
+- Canvas → Properties: Selecting element switches to appropriate tab
+- Data → Canvas: Clicking datatable tab selects element on canvas
+- Data → Properties: Clicking datatable tab switches to Element tab
+- Properties → Canvas: Clicking tab filters/selects canvas elements
+- Properties → Data: Clicking tab highlights relevant data
+"""
+
+SCRIPTS_SYNC = """
+// ============================================================================
+// Tri-directional Pane Synchronization
+// ============================================================================
+
+// Sync state flags to prevent infinite loops
+let _syncingFromCanvas = false;
+let _syncingFromData = false;
+let _syncingFromProperties = false;
+
+// ============================================================================
+// Initialize Sync Hooks
+// ============================================================================
+function initPaneSync() {
+    console.log('[PaneSync] Initializing tri-directional synchronization');
+
+    // Hook datatable tab selection
+    hookDatatableTabSync();
+
+    // Hook properties tab clicks
+    hookPropertiesTabSync();
+
+    // Canvas selection is already hooked via hookCanvasSelection() in datatable core
+}
+
+// ============================================================================
+// Data Pane -> Canvas/Properties Sync
+// ============================================================================
+function hookDatatableTabSync() {
+    // Wrap selectTab to add canvas/properties sync
+    if (typeof window.selectTab === 'function') {
+        const originalSelectTab = window.selectTab;
+        window.selectTab = function(tabId) {
+            originalSelectTab(tabId);
+
+            // Avoid infinite loops
+            if (_syncingFromCanvas || _syncingFromProperties) return;
+            _syncingFromData = true;
+
+            try {
+                syncCanvasFromDatatableTab(tabId);
+                syncPropertiesFromDatatableTab(tabId);
+            } finally {
+                _syncingFromData = false;
+            }
+        };
+        console.log('[PaneSync] Datatable tab sync hooked');
+    }
+}
+
+function syncCanvasFromDatatableTab(tabId) {
+    if (!tabId || typeof datatableTabs === 'undefined') return;
+    const tabState = datatableTabs[tabId];
+    if (!tabState) return;
+
+    const callId = tabState.callId || tabState.name;
+    if (!callId) return;
+
+    console.log('[PaneSync] Data->Canvas: Looking for element matching callId:', callId);
+
+    // Search currentBboxes for matching element
+    if (typeof currentBboxes !== 'undefined' && currentBboxes) {
+        // First pass: exact match on call_id or label
+        for (const [key, bbox] of Object.entries(currentBboxes)) {
+            if (key === '_meta' || !bbox) continue;
+            if (bbox.call_id === callId || bbox.label === callId) {
+                if (typeof selectElement === 'function') {
+                    selectElement({ key, ...bbox });
+                    console.log('[PaneSync] Data->Canvas: Selected (exact)', key);
+                }
+                return;
+            }
+        }
+
+        // Second pass: key contains callId (e.g., "scatter" in "ax1_scatter0")
+        for (const [key, bbox] of Object.entries(currentBboxes)) {
+            if (key === '_meta' || !bbox) continue;
+            // Match pattern: ax{N}_{callId}{N} like ax1_scatter0
+            const pattern = new RegExp(`ax\\d+_${callId}\\d*$`, 'i');
+            if (pattern.test(key)) {
+                if (typeof selectElement === 'function') {
+                    selectElement({ key, ...bbox });
+                    console.log('[PaneSync] Data->Canvas: Selected (pattern)', key);
+                }
+                return;
+            }
+        }
+
+        // Third pass: looser match - key contains callId anywhere
+        for (const [key, bbox] of Object.entries(currentBboxes)) {
+            if (key === '_meta' || !bbox) continue;
+            if (key.toLowerCase().includes(callId.toLowerCase())) {
+                if (typeof selectElement === 'function') {
+                    selectElement({ key, ...bbox });
+                    console.log('[PaneSync] Data->Canvas: Selected (contains)', key);
+                }
+                return;
+            }
+        }
+
+        console.log('[PaneSync] Data->Canvas: No matching element found for', callId);
+    }
+
+    // Fallback: select the panel associated with this tab
+    if (tabState.targetAxis !== null && tabState.targetAxis !== undefined) {
+        const axKey = `ax${tabState.targetAxis}_axes`;
+        if (typeof currentBboxes !== 'undefined' && currentBboxes[axKey]) {
+            const bbox = currentBboxes[axKey];
+            if (typeof selectElement === 'function') {
+                selectElement({ key: axKey, ...bbox, type: 'axes', ax_index: tabState.targetAxis });
+                console.log('[PaneSync] Data->Canvas: Selected panel', tabState.targetAxis);
+            }
+        }
+    }
+}
+
+function syncPropertiesFromDatatableTab(tabId) {
+    if (!tabId || typeof datatableTabs === 'undefined') return;
+    const tabState = datatableTabs[tabId];
+    if (!tabState) return;
+
+    // Data tabs represent plot elements, so switch to Element tab
+    if (typeof switchTab === 'function') {
+        switchTab('element');
+        console.log('[PaneSync] Data->Properties: Switched to Element tab');
+    }
+}
+
+// ============================================================================
+// Properties Pane -> Canvas/Data Sync
+// ============================================================================
+function hookPropertiesTabSync() {
+    // Add click listeners to Figure/Axis/Element tab buttons
+    document.addEventListener('DOMContentLoaded', () => {
+        const tabBtns = document.querySelectorAll('.tab-btn');
+        tabBtns.forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                // Avoid infinite loops
+                if (_syncingFromCanvas || _syncingFromData) return;
+                _syncingFromProperties = true;
+
+                try {
+                    const tabName = btn.id.replace('tab-', '');
+                    syncCanvasFromPropertiesTab(tabName);
+                    syncDataFromPropertiesTab(tabName);
+                } finally {
+                    _syncingFromProperties = false;
+                }
+            });
+        });
+        console.log('[PaneSync] Properties tab sync hooked');
+    });
+}
+
+function syncCanvasFromPropertiesTab(tabName) {
+    // When switching to a properties tab, optionally clear or filter canvas selection
+    // For now, we'll just log - actual behavior depends on UX requirements
+    console.log('[PaneSync] Properties->Canvas: Tab', tabName, 'clicked');
+
+    // If Figure tab, clear element selection (show figure-level props)
+    if (tabName === 'figure' && typeof clearSelection === 'function') {
+        // Don't auto-clear as it might be disruptive
+        // clearSelection();
+    }
+}
+
+function syncDataFromPropertiesTab(tabName) {
+    // When switching to Element tab, try to highlight the currently selected element's data
+    if (tabName === 'element' && typeof selectedElement !== 'undefined' && selectedElement) {
+        if (typeof syncDatatableToElement === 'function') {
+            syncDatatableToElement(selectedElement);
+        }
+    }
+    console.log('[PaneSync] Properties->Data: Tab', tabName, 'clicked');
+}
+
+// ============================================================================
+// Enhanced Canvas -> Data/Properties Sync (augments existing hooks)
+// ============================================================================
+function enhanceCanvasSync() {
+    // Wrap selectElement to add enhanced sync
+    if (typeof window.selectElement === 'function') {
+        const originalSelectElement = window.selectElement;
+        window.selectElement = function(element) {
+            // Avoid infinite loops
+            if (_syncingFromData || _syncingFromProperties) {
+                originalSelectElement(element);
+                return;
+            }
+            _syncingFromCanvas = true;
+
+            try {
+                originalSelectElement(element);
+
+                // Auto-switch Properties tab based on element type
+                if (element && typeof autoSwitchTab === 'function') {
+                    autoSwitchTab(element.type);
+                }
+
+                // Sync datatable to element (already done in hookCanvasSelection, but ensure it happens)
+                if (element && typeof syncDatatableToElement === 'function') {
+                    syncDatatableToElement(element);
+                }
+            } finally {
+                _syncingFromCanvas = false;
+            }
+        };
+        console.log('[PaneSync] Canvas selection sync enhanced');
+    }
+}
+
+// Initialize sync on page load
+document.addEventListener('DOMContentLoaded', () => {
+    // Delay to ensure other modules are loaded
+    setTimeout(() => {
+        initPaneSync();
+        enhanceCanvasSync();
+    }, 100);
+});
+"""
+
+__all__ = ["SCRIPTS_SYNC"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_undo_redo.py

@@ -0,0 +1,348 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Undo/Redo functionality for the figure editor.
+
+This module provides a history stack for tracking changes and
+enabling undo/redo operations with Ctrl+Z and Ctrl+Shift+Z.
+"""
+
+SCRIPTS_UNDO_REDO = """
+// ==================== UNDO/REDO HISTORY ====================
+
+// History state
+const historyStack = [];
+const redoStack = [];
+const MAX_HISTORY = 50;  // Maximum number of undo steps
+let isUndoRedoInProgress = false;  // Prevent recursive history recording
+
+// Capture current state as a snapshot
+function captureState() {
+    const state = {
+        overrides: collectOverrides(),
+        panelPositions: typeof panelPositions !== 'undefined' ? JSON.parse(JSON.stringify(panelPositions)) : {},
+        annotationPositions: typeof annotationPositions !== 'undefined' ? JSON.parse(JSON.stringify(annotationPositions)) : {},
+        timestamp: Date.now()
+    };
+    return state;
+}
+
+// Compare two states for equality
+function statesEqual(a, b) {
+    return JSON.stringify(a.overrides) === JSON.stringify(b.overrides) &&
+           JSON.stringify(a.panelPositions) === JSON.stringify(b.panelPositions) &&
+           JSON.stringify(a.annotationPositions) === JSON.stringify(b.annotationPositions);
+}
+
+// Push current state to history (call before making changes)
+function pushToHistory() {
+    if (isUndoRedoInProgress) return;
+
+    const state = captureState();
+
+    // Don't push if identical to last state
+    if (historyStack.length > 0) {
+        const lastState = historyStack[historyStack.length - 1];
+        if (statesEqual(lastState, state)) {
+            return;
+        }
+    }
+
+    historyStack.push(state);
+
+    // Clear redo stack when new action is performed
+    redoStack.length = 0;
+
+    // Trim history if too long
+    while (historyStack.length > MAX_HISTORY) {
+        historyStack.shift();
+    }
+
+    updateUndoRedoButtons();
+    console.log('[History] Pushed state, stack size:', historyStack.length);
+}
+
+// Apply a state snapshot to the form
+async function applyState(state) {
+    isUndoRedoInProgress = true;
+
+    try {
+        const overrides = state.overrides;
+
+        for (const [key, value] of Object.entries(overrides)) {
+            const element = document.getElementById(key);
+            if (!element) continue;
+
+            if (element.type === 'checkbox') {
+                element.checked = Boolean(value);
+            } else if (element.type === 'range') {
+                element.value = value;
+                const valueSpan = document.getElementById(key + '_value');
+                if (valueSpan) valueSpan.textContent = value;
+            } else if (element.type === 'color') {
+                element.value = value;
+            } else if (element.tagName === 'SELECT') {
+                element.value = value;
+            } else {
+                element.value = value;
+            }
+        }
+
+        // Restore panel positions if they differ
+        if (state.panelPositions && typeof panelPositions !== 'undefined') {
+            const axKeys = Object.keys(state.panelPositions).sort();
+            for (let i = 0; i < axKeys.length; i++) {
+                const axKey = axKeys[i];
+                const savedPos = state.panelPositions[axKey];
+                const currentPos = panelPositions[axKey];
+
+                // Check if position changed
+                if (currentPos && savedPos &&
+                    (Math.abs(savedPos.left - currentPos.left) > 0.1 ||
+                     Math.abs(savedPos.top - currentPos.top) > 0.1)) {
+                    // Restore panel position via API
+                    try {
+                        await fetch('/update_axes_position', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                ax_index: i,
+                                left: savedPos.left,
+                                top: savedPos.top,
+                                width: savedPos.width,
+                                height: savedPos.height
+                            })
+                        });
+                        // Update local panelPositions to match restored state
+                        panelPositions[axKey] = { ...savedPos };
+                    } catch (e) {
+                        console.error('[History] Failed to restore panel position:', e);
+                    }
+                }
+            }
+        }
+
+        // Restore annotation positions if they differ
+        if (state.annotationPositions && typeof annotationPositions !== 'undefined') {
+            let needsRefresh = false;
+            for (const [key, savedPos] of Object.entries(state.annotationPositions)) {
+                const currentPos = annotationPositions[key];
+
+                // Check if position changed
+                if (!currentPos ||
+                    Math.abs(savedPos.x - (currentPos?.x || 0)) > 0.001 ||
+                    Math.abs(savedPos.y - (currentPos?.y || 0)) > 0.001) {
+
+                    // Parse key formats:
+                    // "ax0_panel_label" -> axIndex=0, type=panel_label, textIndex=0
+                    // "ax0_text_0" -> axIndex=0, type=text, textIndex=0
+                    let axIndex, annotationType, textIndex;
+
+                    if (key.includes('_panel_label')) {
+                        const match = key.match(/ax(\\d+)_panel_label/);
+                        if (match) {
+                            axIndex = parseInt(match[1], 10);
+                            annotationType = 'panel_label';
+                            textIndex = 0;
+                        }
+                    } else if (key.includes('_text_')) {
+                        const match = key.match(/ax(\\d+)_text_(\\d+)/);
+                        if (match) {
+                            axIndex = parseInt(match[1], 10);
+                            annotationType = 'text';
+                            textIndex = parseInt(match[2], 10);
+                        }
+                    }
+
+                    if (axIndex !== undefined) {
+                        try {
+                            const response = await fetch('/update_annotation_position', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({
+                                    ax_index: axIndex,
+                                    annotation_type: annotationType,
+                                    text_index: textIndex,
+                                    x: savedPos.x,
+                                    y: savedPos.y
+                                })
+                            });
+                            const data = await response.json();
+
+                            if (data.success && data.image) {
+                                // Update preview image
+                                const img = document.getElementById('preview-image');
+                                if (img) {
+                                    img.src = 'data:image/png;base64,' + data.image;
+                                }
+                                // Update bboxes
+                                if (data.bboxes && typeof currentBboxes !== 'undefined') {
+                                    currentBboxes = data.bboxes;
+                                }
+                                needsRefresh = true;
+                            }
+
+                            // Update local annotationPositions to match restored state
+                            annotationPositions[key] = { ...savedPos };
+                            console.log('[History] Restored annotation position:', key);
+                        } catch (e) {
+                            console.error('[History] Failed to restore annotation position:', e);
+                        }
+                    }
+                }
+            }
+
+            // Refresh hitmap if positions were restored
+            if (needsRefresh && typeof loadHitmap === 'function') {
+                loadHitmap();
+                if (typeof updateHitRegions === 'function') {
+                    updateHitRegions();
+                }
+                if (typeof initAnnotationPositions === 'function') {
+                    initAnnotationPositions();
+                }
+            }
+        }
+
+        // Update preview with the restored state
+        updatePreview();
+
+    } finally {
+        isUndoRedoInProgress = false;
+    }
+}
+
+// Undo last action
+async function undo() {
+    if (historyStack.length === 0) {
+        showToast('Nothing to undo', 'info');
+        return;
+    }
+
+    // Save current state to redo stack
+    const currentState = captureState();
+    redoStack.push(currentState);
+
+    // Pop and apply previous state
+    const previousState = historyStack.pop();
+    await applyState(previousState);
+
+    updateUndoRedoButtons();
+    showToast('Undo', 'info');
+    console.log('[History] Undo, remaining:', historyStack.length);
+}
+
+// Redo last undone action
+async function redo() {
+    if (redoStack.length === 0) {
+        showToast('Nothing to redo', 'info');
+        return;
+    }
+
+    // Save current state to history
+    const currentState = captureState();
+    historyStack.push(currentState);
+
+    // Pop and apply redo state
+    const redoState = redoStack.pop();
+    await applyState(redoState);
+
+    updateUndoRedoButtons();
+    showToast('Redo', 'info');
+    console.log('[History] Redo, remaining redo:', redoStack.length);
+}
+
+// Update undo/redo button states
+function updateUndoRedoButtons() {
+    const undoBtn = document.getElementById('btn-undo');
+    const redoBtn = document.getElementById('btn-redo');
+
+    if (undoBtn) {
+        undoBtn.disabled = historyStack.length === 0;
+        undoBtn.title = historyStack.length > 0
+            ? `Undo (${historyStack.length} steps available)`
+            : 'Nothing to undo';
+    }
+
+    if (redoBtn) {
+        redoBtn.disabled = redoStack.length === 0;
+        redoBtn.title = redoStack.length > 0
+            ? `Redo (${redoStack.length} steps available)`
+            : 'Nothing to redo';
+    }
+}
+
+// Clear all history (e.g., when switching files)
+function clearHistory() {
+    historyStack.length = 0;
+    redoStack.length = 0;
+    updateUndoRedoButtons();
+    console.log('[History] Cleared');
+}
+
+// Hook into form changes to record history
+function initUndoRedo() {
+    // Capture initial state
+    pushToHistory();
+
+    // Add change listeners to all form inputs
+    const inputs = document.querySelectorAll('input, select');
+    inputs.forEach(input => {
+        if (input.id === 'dark-mode-toggle') return;
+        if (!input.id) return;
+
+        // Capture state before change
+        input.addEventListener('focus', () => {
+            pushToHistory();
+        });
+
+        // For inputs without focus events (like range sliders)
+        if (input.type === 'range') {
+            let rangeStartValue = null;
+            input.addEventListener('mousedown', () => {
+                rangeStartValue = input.value;
+                pushToHistory();
+            });
+        }
+
+        // For select elements
+        if (input.tagName === 'SELECT') {
+            input.addEventListener('mousedown', () => {
+                pushToHistory();
+            });
+        }
+    });
+
+    // Initialize button states
+    updateUndoRedoButtons();
+
+    console.log('[History] Undo/Redo initialized');
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initUndoRedo);
+} else {
+    // Small delay to ensure other scripts have initialized
+    setTimeout(initUndoRedo, 100);
+}
+
+// Add button click handlers after DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+    const undoBtn = document.getElementById('btn-undo');
+    const redoBtn = document.getElementById('btn-redo');
+
+    if (undoBtn) {
+        undoBtn.addEventListener('click', undo);
+    }
+
+    if (redoBtn) {
+        redoBtn.addEventListener('click', redo);
+    }
+});
+
+console.log('[UndoRedo] Module loaded - Ctrl+Z to undo, Ctrl+Shift+Z to redo');
+"""
+
+__all__ = ["SCRIPTS_UNDO_REDO"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_zoom.py

@@ -11,10 +11,13 @@ function initializeZoomPan() {
 
     if (!wrapper || !container) return;
 
-    // Zoom buttons
-    document.getElementById('btn-zoom-in')?.addEventListener('click', () => setZoom(zoomLevel + ZOOM_STEP));
-    document.getElementById('btn-zoom-out')?.addEventListener('click', () => setZoom(zoomLevel - ZOOM_STEP));
-    document.getElementById('btn-zoom-reset')?.addEventListener('click', () => setZoom(1.0));
+    // Zoom dropdown
+    const zoomSelect = document.getElementById('zoom-select');
+    zoomSelect?.addEventListener('change', (e) => {
+        setZoom(parseInt(e.target.value) / 100);
+    });
+
+    // Fit button
     document.getElementById('btn-zoom-fit')?.addEventListener('click', zoomToFit);
 
     // Mouse wheel zoom
@@ -122,10 +125,16 @@ function setZoom(newLevel) {
         }
     }
 
-    // Update zoom level display
-    const levelDisplay = document.getElementById('zoom-level');
-    if (levelDisplay) {
-        levelDisplay.textContent = Math.round(zoomLevel * 100) + '%';
+    // Update zoom dropdown to nearest value
+    const zoomSelect = document.getElementById('zoom-select');
+    if (zoomSelect) {
+        const percent = Math.round(zoomLevel * 100);
+        // Find closest option
+        const options = Array.from(zoomSelect.options).map(o => parseInt(o.value));
+        const closest = options.reduce((prev, curr) =>
+            Math.abs(curr - percent) < Math.abs(prev - percent) ? curr : prev
+        );
+        zoomSelect.value = closest;
     }
 }
 
@@ -144,32 +153,56 @@ function zoomToFit() {
     setZoom(Math.min(scaleX, scaleY, 1.0));
 }
 
+// Find nearest scrollable parent element
+function findScrollableParent(element) {
+    while (element && element !== document.body) {
+        const style = window.getComputedStyle(element);
+        const overflowY = style.overflowY;
+        const overflowX = style.overflowX;
+        const isScrollable = (overflowY === 'auto' || overflowY === 'scroll' ||
+                             overflowX === 'auto' || overflowX === 'scroll');
+        const canScroll = element.scrollHeight > element.clientHeight ||
+                         element.scrollWidth > element.clientWidth;
+        if (isScrollable && canScroll) {
+            return element;
+        }
+        element = element.parentElement;
+    }
+    return null;
+}
+
 function startPan(e) {
-    const wrapper = document.getElementById('preview-wrapper');
+    // Find scrollable container under mouse
+    panTarget = findScrollableParent(e.target);
+    if (!panTarget) {
+        // Fallback to preview-wrapper for canvas
+        panTarget = document.getElementById('preview-wrapper');
+    }
+    if (!panTarget) return;
+
     isPanning = true;
     panStartX = e.clientX;
     panStartY = e.clientY;
-    scrollStartX = wrapper.scrollLeft;
-    scrollStartY = wrapper.scrollTop;
-    wrapper.classList.add('panning');
+    scrollStartX = panTarget.scrollLeft;
+    scrollStartY = panTarget.scrollTop;
+    panTarget.classList.add('panning');
 }
 
 function doPan(e) {
-    if (!isPanning) return;
+    if (!isPanning || !panTarget) return;
 
-    const wrapper = document.getElementById('preview-wrapper');
     const dx = e.clientX - panStartX;
     const dy = e.clientY - panStartY;
 
-    wrapper.scrollLeft = scrollStartX - dx;
-    wrapper.scrollTop = scrollStartY - dy;
+    panTarget.scrollLeft = scrollStartX - dx;
+    panTarget.scrollTop = scrollStartY - dy;
 }
 
 function endPan() {
-    if (isPanning) {
-        const wrapper = document.getElementById('preview-wrapper');
-        wrapper.classList.remove('panning');
+    if (isPanning && panTarget) {
+        panTarget.classList.remove('panning');
         isPanning = false;
+        panTarget = null;
     }
 }