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

figrecipe/_editor/_templates/_scripts/_legend_drag.py

@@ -0,0 +1,265 @@
+#!/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();
+
+    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