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

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/_view_mode.py

@@ -0,0 +1,107 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""View mode JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- View mode management (all/selected)
+- Property filtering by element type
+- Section visibility control
+"""
+
+SCRIPTS_VIEW_MODE = """
+// ===== VIEW MODE MANAGEMENT =====
+// Note: viewMode variable is declared in _core.py
+
+// Set view mode (all or selected)
+function setViewMode(mode) {
+    viewMode = mode;
+
+    // Update toggle buttons (legacy)
+    const btnAll = document.getElementById('btn-show-all');
+    const btnSelected = document.getElementById('btn-show-selected');
+    if (btnAll) btnAll.classList.toggle('active', mode === 'all');
+    if (btnSelected) btnSelected.classList.toggle('active', mode === 'selected');
+
+    // Update controls sections class
+    const controlsSections = document.querySelector('.controls-sections');
+    controlsSections.classList.toggle('filter-mode', mode === 'selected');
+
+    // Update selection hint
+    const hint = document.getElementById('selection-hint');
+    if (mode === 'selected') {
+        if (selectedElement) {
+            hint.textContent = `Showing: ${selectedElement.type}`;
+            hint.style.color = 'var(--accent-color)';
+            // Hide all style sections - only show call properties
+            hideAllStyleSections();
+        } else {
+            hint.textContent = '';
+            hint.style.color = '';
+            // Show all when no selection in filter mode
+            showAllProperties();
+        }
+    } else {
+        hint.textContent = '';
+        showAllProperties();
+    }
+}
+
+// Hide all style sections (for Selected mode - only show call properties)
+function hideAllStyleSections() {
+    const sections = document.querySelectorAll('.section[data-element-types]');
+    sections.forEach(section => {
+        section.classList.add('section-hidden');
+        section.classList.remove('section-visible');
+    });
+}
+
+// Filter properties by element type
+function filterPropertiesByElementType(elementType) {
+    const sections = document.querySelectorAll('.section[data-element-types]');
+
+    sections.forEach(section => {
+        const types = section.getAttribute('data-element-types').split(',');
+        const isGlobal = types.includes('global');
+        const matches = isGlobal || types.includes(elementType);
+
+        section.classList.toggle('section-hidden', !matches);
+        section.classList.toggle('section-visible', matches);
+
+        // If section matches, filter individual form-rows within it
+        if (matches && !isGlobal) {
+            const formRows = section.querySelectorAll('.form-row[data-element-types]');
+            formRows.forEach(row => {
+                const rowTypes = row.getAttribute('data-element-types').split(',');
+                const rowMatches = rowTypes.includes(elementType);
+                row.classList.toggle('field-hidden', !rowMatches);
+            });
+
+            // Open matching sections
+            section.setAttribute('open', '');
+        }
+    });
+
+    // Update hint
+    const hint = document.getElementById('selection-hint');
+    hint.textContent = `Showing: ${elementType}`;
+    hint.style.color = 'var(--accent-color)';
+}
+
+// Show all properties (remove filtering)
+function showAllProperties() {
+    const sections = document.querySelectorAll('.section[data-element-types]');
+
+    sections.forEach(section => {
+        section.classList.remove('section-hidden', 'section-visible');
+
+        const formRows = section.querySelectorAll('.form-row[data-element-types]');
+        formRows.forEach(row => {
+            row.classList.remove('field-hidden');
+        });
+    });
+}
+"""
+
+__all__ = ["SCRIPTS_VIEW_MODE"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_zoom.py

@@ -0,0 +1,212 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Zoom and pan JavaScript for the figure editor."""
+
+SCRIPTS_ZOOM = """
+// ==================== ZOOM/PAN FUNCTIONS ====================
+
+function initializeZoomPan() {
+    const wrapper = document.getElementById('preview-wrapper');
+    const container = document.getElementById('zoom-container');
+
+    if (!wrapper || !container) return;
+
+    // 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
+    wrapper.addEventListener('wheel', (e) => {
+        if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+            const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+            setZoom(zoomLevel + delta);
+        }
+    }, { passive: false });
+
+    // Pan with middle mouse, alt+drag, or left-click on empty area when zoomed
+    wrapper.addEventListener('mousedown', (e) => {
+        // Middle mouse or Alt+drag always pans
+        if (e.button === 1 || (e.button === 0 && e.altKey)) {
+            e.preventDefault();
+            startPan(e);
+            return;
+        }
+        // Left-click when zoomed > 100% and clicking on background (not on elements)
+        if (e.button === 0 && zoomLevel > 1.0) {
+            const target = e.target;
+            // Only pan if clicking on wrapper/container background, not on canvas elements
+            if (target.id === 'preview-wrapper' || target.classList.contains('zoom-container') ||
+                target.tagName === 'svg' || target.id === 'preview-image') {
+                // Don't pan if clicking on hitmap regions (they have data attributes)
+                const hitRegion = document.elementFromPoint(e.clientX, e.clientY);
+                if (!hitRegion || !hitRegion.closest('.hit-region')) {
+                    e.preventDefault();
+                    startPan(e);
+                }
+            }
+        }
+    });
+
+    wrapper.addEventListener('mousemove', (e) => {
+        if (isPanning) {
+            doPan(e);
+        }
+    });
+
+    wrapper.addEventListener('mouseup', endPan);
+    wrapper.addEventListener('mouseleave', endPan);
+
+    // Keyboard shortcuts for zoom
+    document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+        if (e.key === '+' || e.key === '=') {
+            e.preventDefault();
+            setZoom(zoomLevel + ZOOM_STEP);
+        } else if (e.key === '-' || e.key === '_') {
+            e.preventDefault();
+            setZoom(zoomLevel - ZOOM_STEP);
+        } else if (e.key === '0') {
+            e.preventDefault();
+            setZoom(1.0);
+        } else if (e.key === 'f' || e.key === 'F') {
+            e.preventDefault();
+            zoomToFit();
+        }
+    });
+
+    // Initialize fit to view
+    setTimeout(zoomToFit, 200);
+}
+
+function setZoom(newLevel) {
+    zoomLevel = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, newLevel));
+
+    const container = document.getElementById('zoom-container');
+    const wrapper = document.getElementById('preview-wrapper');
+    const img = document.getElementById('preview-image');
+
+    if (container && wrapper) {
+        container.style.transform = `scale(${zoomLevel})`;
+
+        // Update container size to enable proper scrolling
+        // Transform scale doesn't change layout size, so we set explicit dimensions
+        if (img) {
+            // Use rendered dimensions if naturalWidth not available
+            const imgWidth = img.naturalWidth || img.width || img.clientWidth;
+            const imgHeight = img.naturalHeight || img.height || img.clientHeight;
+
+            if (imgWidth && imgHeight) {
+                const scaledWidth = imgWidth * zoomLevel;
+                const scaledHeight = imgHeight * zoomLevel;
+
+                // Set container dimensions for scroll area calculation
+                container.style.width = `${imgWidth}px`;
+                container.style.height = `${imgHeight}px`;
+                container.style.minWidth = `${scaledWidth}px`;
+                container.style.minHeight = `${scaledHeight}px`;
+            }
+        }
+
+        // Update wrapper class for cursor hint
+        if (zoomLevel > 1.0) {
+            wrapper.classList.add('zoomed-in');
+        } else {
+            wrapper.classList.remove('zoomed-in');
+            // Reset scroll position when not zoomed
+            wrapper.scrollLeft = 0;
+            wrapper.scrollTop = 0;
+        }
+    }
+
+    // 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;
+    }
+}
+
+function zoomToFit() {
+    const wrapper = document.getElementById('preview-wrapper');
+    const img = document.getElementById('preview-image');
+
+    if (!wrapper || !img || !img.naturalWidth) return;
+
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const padding = 40;
+
+    const scaleX = (wrapperRect.width - padding) / img.naturalWidth;
+    const scaleY = (wrapperRect.height - padding) / img.naturalHeight;
+
+    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) {
+    // 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 = panTarget.scrollLeft;
+    scrollStartY = panTarget.scrollTop;
+    panTarget.classList.add('panning');
+}
+
+function doPan(e) {
+    if (!isPanning || !panTarget) return;
+
+    const dx = e.clientX - panStartX;
+    const dy = e.clientY - panStartY;
+
+    panTarget.scrollLeft = scrollStartX - dx;
+    panTarget.scrollTop = scrollStartY - dy;
+}
+
+function endPan() {
+    if (isPanning && panTarget) {
+        panTarget.classList.remove('panning');
+        isPanning = false;
+        panTarget = null;
+    }
+}
+
+// ==================== END ZOOM/PAN ====================
+"""
+
+__all__ = ["SCRIPTS_ZOOM"]