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

figrecipe/_editor/_templates/_scripts/_legend_drag.py

@@ -0,0 +1,270 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Legend drag-to-move JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Detecting mousedown on legend elements
+- Handling drag movement with visual feedback
+- Updating legend position on drop
+
+Legend coordinates are in axes-relative units (0-1 range).
+"""
+
+SCRIPTS_LEGEND_DRAG = """
+// ===== LEGEND DRAG-TO-MOVE =====
+
+let isDraggingLegend = false;
+let legendDragStartPos = null;
+let legendDragStartBbox = null;
+let legendDragOverlay = null;
+let legendAxIndex = 0;
+
+// Initialize legend drag functionality
+function initLegendDrag() {
+    console.log('[LegendDrag] initLegendDrag called');
+    const zoomContainer = document.getElementById('zoom-container');
+    if (!zoomContainer) {
+        console.error('[LegendDrag] zoom-container not found!');
+        return;
+    }
+
+    // Create legend drag overlay element
+    legendDragOverlay = document.createElement('div');
+    legendDragOverlay.id = 'legend-drag-overlay';
+    legendDragOverlay.style.cssText = `
+        position: absolute;
+        border: 2px dashed #10b981;
+        background: rgba(16, 185, 129, 0.1);
+        pointer-events: none;
+        display: none;
+        z-index: 1001;
+    `;
+    zoomContainer.appendChild(legendDragOverlay);
+    console.log('[LegendDrag] Overlay created');
+}
+
+// Handle legend drag start (called from hitmap click handler)
+function startLegendDrag(event, legendKey) {
+    console.log('[LegendDrag] startLegendDrag called for:', legendKey);
+
+    const img = document.getElementById('preview-image');
+    if (!img) return false;
+
+    const bbox = currentBboxes[legendKey];
+    if (!bbox) return false;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Capture state before drag for undo
+    if (typeof pushToHistory === 'function') {
+        pushToHistory();
+    }
+
+    isDraggingLegend = true;
+    legendDragStartPos = { x: event.clientX, y: event.clientY };
+    legendDragStartBbox = { ...bbox };
+
+    // Extract axis index from key (e.g., "legend_ax0" -> 0)
+    const match = legendKey.match(/ax(\\d+)/);
+    legendAxIndex = match ? parseInt(match[1], 10) : 0;
+
+    // Show drag overlay
+    if (legendDragOverlay) {
+        updateLegendDragOverlay(bbox);
+        legendDragOverlay.style.display = 'block';
+    }
+
+    // Add temporary event listeners
+    document.addEventListener('mousemove', handleLegendDragMove);
+    document.addEventListener('mouseup', handleLegendDragEnd);
+
+    document.body.style.cursor = 'move';
+    console.log('[LegendDrag] Started dragging legend');
+    return true;
+}
+
+// Handle mouse move during legend drag
+function handleLegendDragMove(event) {
+    if (!isDraggingLegend) return;
+
+    event.preventDefault();
+
+    const img = document.getElementById('preview-image');
+    if (!img) return;
+
+    const rect = img.getBoundingClientRect();
+
+    // Calculate delta in pixels
+    const deltaX = event.clientX - legendDragStartPos.x;
+    const deltaY = event.clientY - legendDragStartPos.y;
+
+    // Calculate new position in image pixels
+    const scaleX = img.naturalWidth / rect.width;
+    const scaleY = img.naturalHeight / rect.height;
+
+    const newBbox = {
+        x: legendDragStartBbox.x + deltaX * scaleX,
+        y: legendDragStartBbox.y + deltaY * scaleY,
+        width: legendDragStartBbox.width,
+        height: legendDragStartBbox.height
+    };
+
+    // Update visual overlay
+    updateLegendDragOverlay(newBbox);
+}
+
+// Update the legend drag overlay position
+function updateLegendDragOverlay(bbox) {
+    if (!legendDragOverlay) return;
+
+    const img = document.getElementById('preview-image');
+    if (!img) return;
+
+    const rect = img.getBoundingClientRect();
+    const scaleX = rect.width / img.naturalWidth;
+    const scaleY = rect.height / img.naturalHeight;
+
+    const left = bbox.x * scaleX;
+    const top = bbox.y * scaleY;
+    const width = bbox.width * scaleX;
+    const height = bbox.height * scaleY;
+
+    legendDragOverlay.style.left = `${left}px`;
+    legendDragOverlay.style.top = `${top}px`;
+    legendDragOverlay.style.width = `${width}px`;
+    legendDragOverlay.style.height = `${height}px`;
+}
+
+// Handle mouse up - complete the legend drag
+async function handleLegendDragEnd(event) {
+    console.log('[LegendDrag] handleLegendDragEnd called');
+    if (!isDraggingLegend) return;
+
+    // Remove temporary event listeners
+    document.removeEventListener('mousemove', handleLegendDragMove);
+    document.removeEventListener('mouseup', handleLegendDragEnd);
+
+    // Hide overlay
+    if (legendDragOverlay) {
+        legendDragOverlay.style.display = 'none';
+    }
+    document.body.style.cursor = '';
+
+    const img = document.getElementById('preview-image');
+    if (!img) {
+        isDraggingLegend = false;
+        return;
+    }
+
+    const rect = img.getBoundingClientRect();
+
+    // Calculate delta in pixels
+    const deltaX = event.clientX - legendDragStartPos.x;
+    const deltaY = event.clientY - legendDragStartPos.y;
+
+    // Only update if moved significantly (5px threshold)
+    if (Math.abs(deltaX) < 5 && Math.abs(deltaY) < 5) {
+        console.log('[LegendDrag] Movement below threshold, not updating');
+        isDraggingLegend = false;
+        return;
+    }
+
+    // Convert to axes-relative coordinates (0-1 range)
+    // We need to get the axes position to calculate relative coords
+    const axKey = Object.keys(panelPositions).sort()[legendAxIndex];
+    const axPos = panelPositions[axKey];
+
+    if (!axPos || !figSize.width_mm || !figSize.height_mm) {
+        console.error('[LegendDrag] Cannot calculate axes-relative position');
+        isDraggingLegend = false;
+        return;
+    }
+
+    // Calculate scale factors: screen pixels to image pixels
+    const screenToImgX = img.naturalWidth / rect.width;
+    const screenToImgY = img.naturalHeight / rect.height;
+
+    // New legend upper-left corner in image pixels
+    const newImgX = legendDragStartBbox.x + deltaX * screenToImgX;
+    const newImgY = legendDragStartBbox.y + deltaY * screenToImgY;
+
+    // Convert image pixels to mm (upper-left origin)
+    const newMmX = newImgX / img.naturalWidth * figSize.width_mm;
+    const newMmY = newImgY / img.naturalHeight * figSize.height_mm;
+
+    // Convert to axes-relative (0-1) coordinates
+    // Use upper-left corner since we set _loc=2 (upper left) in backend
+    const relX = (newMmX - axPos.left) / axPos.width;
+    const relY = 1 - (newMmY - axPos.top) / axPos.height;  // Flip Y (matplotlib uses bottom-left origin)
+
+    console.log('[LegendDrag] New legend position (rel):', relX.toFixed(3), relY.toFixed(3));
+
+    // Apply the new position
+    await applyLegendPosition(legendAxIndex, relX, relY);
+
+    // Reset state
+    isDraggingLegend = false;
+    legendDragStartPos = null;
+    legendDragStartBbox = null;
+    console.log('[LegendDrag] Drag state reset');
+}
+
+// Apply the dragged legend position to the server
+async function applyLegendPosition(axIndex, x, y) {
+    document.body.classList.add('loading');
+
+    try {
+        const response = await fetch('/update_legend_position', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                ax_index: axIndex,
+                loc: 'custom',
+                x: x,
+                y: y
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            // Update preview image
+            const img = document.getElementById('preview-image');
+            if (img) {
+                await new Promise((resolve) => {
+                    img.onload = resolve;
+                    img.src = 'data:image/png;base64,' + data.image;
+                });
+            }
+
+            // Update bboxes and hitmap
+            if (data.bboxes) {
+                currentBboxes = data.bboxes;
+                loadHitmap();
+                updateHitRegions();
+            }
+
+            console.log('[LegendDrag] Legend position updated successfully');
+        } else {
+            console.error('[LegendDrag] Failed to update legend:', data.error);
+        }
+    } catch (error) {
+        console.error('[LegendDrag] Failed to update legend:', error);
+    }
+
+    document.body.classList.remove('loading');
+}
+
+// Check if a key refers to a legend element
+function isLegendElement(key) {
+    return key && key.startsWith('legend_');
+}
+
+// Initialize on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', initLegendDrag);
+"""
+
+__all__ = ["SCRIPTS_LEGEND_DRAG"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_modals.py

@@ -0,0 +1,226 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Modal dialogs JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Theme modal (view, download, copy theme)
+- Shortcuts modal
+- Theme switching
+"""
+
+SCRIPTS_MODALS = """
+// ===== MODAL DIALOGS =====
+
+// Initialize theme modal handlers
+function initializeThemeModal() {
+    const modal = document.getElementById('theme-modal');
+    const themeSelector = document.getElementById('theme-selector');
+    const btnView = document.getElementById('btn-view-theme');
+    const btnDownload = document.getElementById('btn-download-theme');
+    const btnCopy = document.getElementById('btn-copy-theme');
+    const modalClose = document.getElementById('theme-modal-close');
+    const modalDownload = document.getElementById('theme-modal-download');
+    const modalCopy = document.getElementById('theme-modal-copy');
+
+    // Theme selector change handler
+    if (themeSelector) {
+        loadCurrentTheme();
+        themeSelector.addEventListener('change', function() {
+            switchTheme(this.value);
+        });
+    }
+
+    // View button opens modal
+    if (btnView) btnView.addEventListener('click', showThemeModal);
+
+    // Download and copy buttons
+    if (btnDownload) btnDownload.addEventListener('click', downloadTheme);
+    if (btnCopy) btnCopy.addEventListener('click', copyTheme);
+
+    // Modal close
+    if (modalClose) modalClose.addEventListener('click', hideThemeModal);
+
+    // Modal buttons
+    if (modalDownload) modalDownload.addEventListener('click', downloadTheme);
+    if (modalCopy) modalCopy.addEventListener('click', copyTheme);
+
+    // Close modal on outside click
+    if (modal) {
+        modal.addEventListener('click', function(e) {
+            if (e.target === modal) hideThemeModal();
+        });
+    }
+}
+
+// Show theme modal
+async function showThemeModal() {
+    const modal = document.getElementById('theme-modal');
+    const themeContent = document.getElementById('theme-content');
+    const themeModalName = document.getElementById('theme-modal-name');
+    const themeSelector = document.getElementById('theme-selector');
+
+    try {
+        const response = await fetch('/theme');
+        const data = await response.json();
+
+        const themeName = themeSelector ? themeSelector.value : data.name;
+        if (themeModalName) themeModalName.textContent = themeName;
+        if (themeContent) themeContent.textContent = data.content;
+        if (modal) modal.style.display = 'flex';
+    } catch (error) {
+        console.error('Failed to load theme:', error);
+    }
+}
+
+// Hide theme modal
+function hideThemeModal() {
+    const modal = document.getElementById('theme-modal');
+    if (modal) modal.style.display = 'none';
+}
+
+// Initialize shortcuts modal handlers
+function initializeShortcutsModal() {
+    const modal = document.getElementById('shortcuts-modal');
+    const btnShortcuts = document.getElementById('btn-shortcuts');
+    const modalClose = document.getElementById('shortcuts-modal-close');
+
+    if (btnShortcuts) btnShortcuts.addEventListener('click', showShortcutsModal);
+    if (modalClose) modalClose.addEventListener('click', hideShortcutsModal);
+
+    if (modal) {
+        modal.addEventListener('click', function(e) {
+            if (e.target === modal) hideShortcutsModal();
+        });
+    }
+}
+
+// Show/hide shortcuts modal
+function showShortcutsModal() {
+    const modal = document.getElementById('shortcuts-modal');
+    if (modal) modal.style.display = 'flex';
+}
+
+function hideShortcutsModal() {
+    const modal = document.getElementById('shortcuts-modal');
+    if (modal) modal.style.display = 'none';
+}
+
+// Download theme as YAML
+async function downloadTheme() {
+    try {
+        const response = await fetch('/theme');
+        const data = await response.json();
+
+        const blob = new Blob([data.content], { type: 'text/yaml' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = data.name + '.yaml';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error('Failed to download theme:', error);
+    }
+}
+
+// Copy theme to clipboard
+async function copyTheme() {
+    try {
+        const response = await fetch('/theme');
+        const data = await response.json();
+
+        await navigator.clipboard.writeText(data.content);
+
+        const btn = document.getElementById('btn-copy-theme');
+        const originalText = btn.textContent;
+        btn.textContent = 'Copied!';
+        setTimeout(() => { btn.textContent = originalText; }, 1500);
+    } catch (error) {
+        console.error('Failed to copy theme:', error);
+    }
+}
+
+// Load current theme and set selector
+async function loadCurrentTheme() {
+    try {
+        const response = await fetch('/list_themes');
+        const data = await response.json();
+
+        const selector = document.getElementById('theme-selector');
+        if (selector && data.current) {
+            selector.value = data.current;
+        }
+        console.log('Current theme:', data.current);
+    } catch (error) {
+        console.error('Failed to load current theme:', error);
+    }
+}
+
+// Switch to a different theme preset
+async function switchTheme(themeName) {
+    console.log('Switching theme to:', themeName);
+    document.body.classList.add('loading');
+
+    try {
+        const response = await fetch('/switch_theme', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ theme: themeName })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            const previewImg = document.getElementById('preview-image');
+            previewImg.src = 'data:image/png;base64,' + result.image;
+
+            if (result.img_size) {
+                currentImgWidth = result.img_size.width;
+                currentImgHeight = result.img_size.height;
+            }
+
+            // Update form values from new theme
+            if (result.values) {
+                for (const [key, value] of Object.entries(result.values)) {
+                    const element = document.getElementById(key);
+                    if (element) {
+                        if (element.type === 'checkbox') {
+                            element.checked = Boolean(value);
+                        } else {
+                            element.value = value;
+                        }
+                        if (element.placeholder !== undefined) {
+                            element.placeholder = value;
+                        }
+                    }
+                }
+                Object.assign(themeDefaults, result.values);
+                updateAllModifiedStates();
+            }
+
+            if (result.bboxes) {
+                currentBboxes = result.bboxes;
+                previewImg.onload = () => {
+                    updateHitRegions();
+                    loadHitmap();
+                };
+            }
+            console.log('Theme switched to:', themeName);
+        } else {
+            console.error('Theme switch failed:', result.error);
+            loadCurrentTheme();
+        }
+    } catch (error) {
+        console.error('Failed to switch theme:', error);
+        loadCurrentTheme();
+    } finally {
+        document.body.classList.remove('loading');
+    }
+}
+"""
+
+__all__ = ["SCRIPTS_MODALS"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_multi_select.py

@@ -0,0 +1,198 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Multi-selection JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Ctrl+Click to add/remove elements from selection
+- Managing multiple selected elements
+- Drawing multi-selection highlights
+"""
+
+SCRIPTS_MULTI_SELECT = """
+// ===== MULTI-SELECTION (Ctrl+Click) =====
+
+// Array of selected elements (each element is {key, type, x, y, width, height, ...})
+let selectedElements = [];
+
+// Check if multi-select mode is active (Ctrl or Cmd key held)
+function isMultiSelectMode(event) {
+    return event && (event.ctrlKey || event.metaKey);
+}
+
+// Check if an element is currently selected
+function isElementSelected(key) {
+    return selectedElements.some(el => el.key === key);
+}
+
+// Add element to selection (if not already selected)
+function addToSelection(element) {
+    if (!element || !element.key) return;
+    if (isElementSelected(element.key)) return;
+
+    selectedElements.push(element);
+    console.log('[MultiSelect] Added to selection:', element.key, '- total:', selectedElements.length);
+}
+
+// Remove element from selection
+function removeFromSelection(key) {
+    const idx = selectedElements.findIndex(el => el.key === key);
+    if (idx >= 0) {
+        selectedElements.splice(idx, 1);
+        console.log('[MultiSelect] Removed from selection:', key, '- total:', selectedElements.length);
+    }
+}
+
+// Toggle element in selection
+function toggleInSelection(element) {
+    if (!element || !element.key) return;
+
+    if (isElementSelected(element.key)) {
+        removeFromSelection(element.key);
+    } else {
+        addToSelection(element);
+    }
+}
+
+// Clear all selections
+function clearMultiSelection() {
+    selectedElements = [];
+    console.log('[MultiSelect] Selection cleared');
+
+    // Clear visual selection
+    const selOverlay = document.getElementById('selection-overlay');
+    if (selOverlay) {
+        const svg = selOverlay.querySelector('svg');
+        if (svg) {
+            // Remove multi-selection highlights
+            svg.querySelectorAll('.multi-select-highlight').forEach(el => el.remove());
+        }
+    }
+}
+
+// Draw multi-selection highlights on the selection overlay
+function drawMultiSelection() {
+    const selOverlay = document.getElementById('selection-overlay');
+    if (!selOverlay) return;
+
+    let svg = selOverlay.querySelector('svg');
+    if (!svg) {
+        svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;';
+        selOverlay.appendChild(svg);
+    }
+
+    // Remove existing multi-selection highlights
+    svg.querySelectorAll('.multi-select-highlight').forEach(el => el.remove());
+
+    const img = document.getElementById('preview-image');
+    if (!img || !figSize.width_mm || !figSize.height_mm) return;
+
+    const imgRect = img.getBoundingClientRect();
+    const containerRect = selOverlay.getBoundingClientRect();
+
+    // Update SVG viewBox to match image
+    svg.setAttribute('viewBox', `0 0 ${imgRect.width} ${imgRect.height}`);
+    svg.style.width = imgRect.width + 'px';
+    svg.style.height = imgRect.height + 'px';
+    svg.style.left = (imgRect.left - containerRect.left) + 'px';
+    svg.style.top = (imgRect.top - containerRect.top) + 'px';
+
+    // Draw highlight for each selected element
+    selectedElements.forEach(element => {
+        if (!element.x || !element.width) return;
+
+        // Convert from image pixels to display pixels
+        const scaleX = imgRect.width / img.naturalWidth;
+        const scaleY = imgRect.height / img.naturalHeight;
+
+        const x = element.x * scaleX;
+        const y = element.y * scaleY;
+        const w = element.width * scaleX;
+        const h = element.height * scaleY;
+
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('class', 'multi-select-highlight');
+        rect.setAttribute('x', x);
+        rect.setAttribute('y', y);
+        rect.setAttribute('width', w);
+        rect.setAttribute('height', h);
+        rect.setAttribute('fill', 'rgba(37, 99, 235, 0.15)');
+        rect.setAttribute('stroke', '#2563eb');
+        rect.setAttribute('stroke-width', '2');
+        rect.setAttribute('stroke-dasharray', '4,2');
+        svg.appendChild(rect);
+    });
+
+    console.log('[MultiSelect] Drew selection for', selectedElements.length, 'elements');
+}
+
+// Select all elements of a specific type
+function selectAllOfType(type) {
+    clearMultiSelection();
+
+    for (const [key, bbox] of Object.entries(currentBboxes)) {
+        if (key === '_meta') continue;
+        if (!bbox || typeof bbox.x === 'undefined') continue;
+
+        const info = (colorMap && colorMap[key]) || {};
+        if (info.type === type || bbox.type === type) {
+            addToSelection({ key, ...bbox, ...info });
+        }
+    }
+
+    drawMultiSelection();
+    console.log('[MultiSelect] Selected all', type, 'elements:', selectedElements.length);
+}
+
+// Get indices of selected panels (axes)
+function getSelectedPanelIndices() {
+    return selectedElements
+        .filter(el => el.key && el.key.includes('_axes'))
+        .map(el => {
+            const match = el.key.match(/ax(\\d+)_axes/);
+            return match ? parseInt(match[1], 10) : -1;
+        })
+        .filter(idx => idx >= 0);
+}
+
+// Update UI to show multi-selection state
+function updateMultiSelectionUI() {
+    const countEl = document.getElementById('multi-select-count');
+    if (countEl) {
+        countEl.textContent = selectedElements.length > 1
+            ? `${selectedElements.length} selected`
+            : '';
+    }
+}
+
+// Handle keyboard shortcuts for multi-selection
+function handleMultiSelectKeyboard(event) {
+    // Ctrl+A: Select all panels
+    if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
+        // Only if not in an input field
+        if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
+            event.preventDefault();
+            selectAllOfType('axes');
+        }
+    }
+
+    // Escape: Clear selection
+    if (event.key === 'Escape') {
+        clearMultiSelection();
+        drawMultiSelection();
+    }
+}
+
+// Initialize multi-selection support
+function initMultiSelect() {
+    console.log('[MultiSelect] Initializing multi-selection support');
+    document.addEventListener('keydown', handleMultiSelectKeyboard);
+}
+
+// Initialize on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', initMultiSelect);
+"""
+
+__all__ = ["SCRIPTS_MULTI_SELECT"]
+
+# EOF