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

figrecipe/_editor/_templates/_scripts/_api.py

@@ -0,0 +1,228 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""API calls JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Preview update and refresh
+- Form data collection
+- Save/reset/restore operations
+- Override status management
+- Download functionality
+"""
+
+SCRIPTS_API = """
+// ===== API CALLS AND SERVER COMMUNICATION =====
+
+// Schedule update with debounce
+function scheduleUpdate() {
+    if (updateTimeout) {
+        clearTimeout(updateTimeout);
+    }
+    updateTimeout = setTimeout(updatePreview, UPDATE_DEBOUNCE);
+}
+
+// Collect current overrides from form
+function collectOverrides() {
+    const overrides = {};
+
+    const inputs = document.querySelectorAll('input, select');
+    inputs.forEach(input => {
+        if (input.id === 'dark-mode-toggle') return;
+        if (!input.id) return;
+
+        let value;
+        if (input.type === 'checkbox') {
+            value = input.checked;
+        } else if (input.type === 'number' || input.type === 'range') {
+            value = parseFloat(input.value);
+            if (isNaN(value)) return;
+        } else {
+            value = input.value;
+        }
+
+        overrides[input.id] = value;
+    });
+
+    return overrides;
+}
+
+// Update preview
+async function updatePreview() {
+    const overrides = collectOverrides();
+    const darkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+
+    document.body.classList.add('loading');
+
+    try {
+        const response = await fetch('/update', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ overrides, dark_mode: darkMode })
+        });
+
+        const data = await response.json();
+
+        // Update preview image
+        const img = document.getElementById('preview-image');
+        img.src = 'data:image/png;base64,' + data.image;
+
+        // Update dimensions for hitmap scaling
+        if (data.img_size) {
+            currentImgWidth = data.img_size.width;
+            currentImgHeight = data.img_size.height;
+        }
+
+        // Update bboxes
+        currentBboxes = data.bboxes;
+
+        // Redraw selection if element still exists
+        if (selectedElement && currentBboxes[selectedElement.key]) {
+            drawSelection(selectedElement.key);
+        } else {
+            clearSelection();
+        }
+
+        // Reload hitmap and redraw hit regions
+        loadHitmap();
+        updateHitRegions();
+
+    } catch (error) {
+        console.error('Update failed:', error);
+    }
+
+    document.body.classList.remove('loading');
+}
+
+// Reset values to initial
+function resetValues() {
+    initializeValues();
+    updatePreview();
+}
+
+// Save overrides
+async function saveOverrides() {
+    const overrides = collectOverrides();
+
+    try {
+        const response = await fetch('/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ overrides })
+        });
+
+        const data = await response.json();
+        if (data.success) {
+            if (data.has_overrides) {
+                showOverrideStatus(data.timestamp);
+            }
+            alert('Saved successfully!' + (data.path ? '\\nPath: ' + data.path : ''));
+        }
+    } catch (error) {
+        console.error('Save failed:', error);
+        alert('Save failed: ' + error.message);
+    }
+}
+
+// Download figure
+function downloadFigure(format) {
+    window.location.href = '/download/' + format;
+}
+
+// Restore to original programmatic style (clear manual overrides)
+async function restoreOriginal() {
+    if (!confirm('Restore to original programmatic style? This will clear all manual overrides.')) {
+        return;
+    }
+
+    document.body.classList.add('loading');
+
+    try {
+        const response = await fetch('/restore', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            const img = document.getElementById('preview-image');
+            img.src = 'data:image/png;base64,' + data.image;
+
+            currentBboxes = data.bboxes;
+
+            // Reset form values to original style
+            if (data.original_style) {
+                for (const [key, value] of Object.entries(data.original_style)) {
+                    const element = document.getElementById(key);
+                    if (element) {
+                        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 {
+                            element.value = value;
+                        }
+                    }
+                }
+            }
+
+            clearSelection();
+            hideOverrideStatus();
+            loadHitmap();
+        }
+    } catch (error) {
+        console.error('Restore failed:', error);
+        alert('Restore failed: ' + error.message);
+    }
+
+    document.body.classList.remove('loading');
+}
+
+// Check and display override status
+async function checkOverrideStatus() {
+    try {
+        const response = await fetch('/style');
+        const data = await response.json();
+
+        if (data.has_overrides) {
+            showOverrideStatus(data.manual_timestamp);
+        } else {
+            hideOverrideStatus();
+        }
+    } catch (error) {
+        console.error('Failed to check override status:', error);
+    }
+}
+
+// Show override status indicator
+function showOverrideStatus(timestamp) {
+    const statusEl = document.getElementById('override-status');
+    const timestampEl = document.getElementById('override-timestamp');
+
+    if (statusEl) statusEl.style.display = 'flex';
+
+    if (timestampEl && timestamp) {
+        const date = new Date(timestamp);
+        timestampEl.textContent = 'Last modified: ' + date.toLocaleString();
+    }
+}
+
+// Hide override status indicator
+function hideOverrideStatus() {
+    const statusEl = document.getElementById('override-status');
+    if (statusEl) statusEl.style.display = 'none';
+}
+
+// Update override status after save
+async function updateOverrideStatusAfterSave(data) {
+    if (data.has_overrides) {
+        showOverrideStatus(data.timestamp);
+    }
+}
+"""
+
+__all__ = ["SCRIPTS_API"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_canvas_context_menu.py

@@ -0,0 +1,182 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Canvas right-click context menu JavaScript."""
+
+JS_CANVAS_CONTEXT_MENU = """
+// ============================================================================
+// Canvas Context Menu (Right-Click Menu)
+// ============================================================================
+let canvasContextMenu = null;
+
+function createCanvasContextMenu() {
+    if (canvasContextMenu) return;
+
+    canvasContextMenu = document.createElement('div');
+    canvasContextMenu.className = 'canvas-context-menu';
+    canvasContextMenu.style.display = 'none';
+    canvasContextMenu.innerHTML = `
+        <div class="context-menu-item" data-action="copy-image">
+            Copy image<span class="shortcut">Ctrl+C</span>
+        </div>
+        <div class="context-menu-item" data-action="download-png">
+            Download PNG
+        </div>
+        <div class="context-menu-item" data-action="download-svg">
+            Download SVG
+        </div>
+        <div class="context-menu-item" data-action="download-pdf">
+            Download PDF
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" data-action="zoom-fit">
+            Fit to view<span class="shortcut">F</span>
+        </div>
+        <div class="context-menu-item" data-action="zoom-100">
+            Zoom 100%<span class="shortcut">0</span>
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" data-action="render">
+            Re-render<span class="shortcut">R</span>
+        </div>
+        <div class="context-menu-item" data-action="toggle-grid">
+            Toggle grid<span class="shortcut">G</span>
+        </div>
+    `;
+    document.body.appendChild(canvasContextMenu);
+    setupCanvasContextMenuListeners();
+}
+
+function setupCanvasContextMenuListeners() {
+    if (!canvasContextMenu) return;
+
+    // Click on menu items
+    canvasContextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+        item.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const action = item.dataset.action;
+            handleCanvasContextMenuAction(action);
+            hideCanvasContextMenu();
+        });
+    });
+
+    // Hide on click outside
+    document.addEventListener('click', hideCanvasContextMenu);
+    document.addEventListener('scroll', hideCanvasContextMenu, true);
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') hideCanvasContextMenu();
+    });
+}
+
+function handleCanvasContextMenuAction(action) {
+    switch (action) {
+        case 'copy-image':
+            copyCanvasImage();
+            break;
+        case 'download-png':
+            document.getElementById('btn-download-png-menu')?.click();
+            break;
+        case 'download-svg':
+            document.getElementById('btn-download-svg-menu')?.click();
+            break;
+        case 'download-pdf':
+            document.getElementById('btn-download-pdf-menu')?.click();
+            break;
+        case 'zoom-fit':
+            zoomToFit();
+            break;
+        case 'zoom-100':
+            setZoom(1.0);
+            break;
+        case 'render':
+            document.getElementById('btn-refresh')?.click();
+            break;
+        case 'toggle-grid':
+            document.getElementById('btn-ruler-grid')?.click();
+            break;
+    }
+}
+
+async function copyCanvasImage() {
+    const img = document.getElementById('preview-image');
+    if (!img) return;
+
+    try {
+        // Fetch the image and convert to blob
+        const response = await fetch(img.src);
+        const blob = await response.blob();
+        await navigator.clipboard.write([
+            new ClipboardItem({ 'image/png': blob })
+        ]);
+        showToast('Image copied to clipboard');
+    } catch (err) {
+        console.error('Failed to copy image:', err);
+        showToast('Failed to copy image', 'error');
+    }
+}
+
+function showCanvasContextMenu(e) {
+    if (!canvasContextMenu) createCanvasContextMenu();
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const x = e.clientX;
+    const y = e.clientY;
+
+    // Position off-screen to measure
+    canvasContextMenu.style.left = '-9999px';
+    canvasContextMenu.style.top = '-9999px';
+    canvasContextMenu.style.display = 'block';
+
+    const menuWidth = canvasContextMenu.offsetWidth;
+    const menuHeight = canvasContextMenu.offsetHeight;
+
+    // Adjust position to fit in viewport
+    let left = x;
+    let top = y;
+    if (x + menuWidth > window.innerWidth - 10) {
+        left = x - menuWidth;
+    }
+    if (y + menuHeight > window.innerHeight - 10) {
+        top = y - menuHeight;
+    }
+
+    canvasContextMenu.style.left = `${Math.max(10, left)}px`;
+    canvasContextMenu.style.top = `${Math.max(10, top)}px`;
+}
+
+function hideCanvasContextMenu() {
+    if (canvasContextMenu) {
+        canvasContextMenu.style.display = 'none';
+    }
+}
+
+// Simple toast notification
+function showToast(message, type = 'success') {
+    let toast = document.getElementById('toast-notification');
+    if (!toast) {
+        toast = document.createElement('div');
+        toast.id = 'toast-notification';
+        toast.className = 'toast-notification';
+        document.body.appendChild(toast);
+    }
+    toast.textContent = message;
+    toast.className = `toast-notification ${type}`;
+    toast.style.display = 'block';
+    setTimeout(() => {
+        toast.style.display = 'none';
+    }, 2000);
+}
+
+// Initialize canvas context menu
+function initializeCanvasContextMenu() {
+    const wrapper = document.getElementById('preview-wrapper');
+    if (wrapper) {
+        wrapper.addEventListener('contextmenu', showCanvasContextMenu);
+    }
+}
+"""
+
+__all__ = ["JS_CANVAS_CONTEXT_MENU"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_captions.py

@@ -0,0 +1,231 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Caption controls JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Scientific figure captions (Fig. 1. Description...)
+- Panel captions for multi-panel figures
+- Caption preview and backend synchronization
+"""
+
+SCRIPTS_CAPTIONS = """
+// ===== CAPTION CONTROLS (Scientific Figure Captions) =====
+
+// Initialize caption input event handlers
+function initializeCaptionInputs() {
+    const figNumInput = document.getElementById('caption_figure_number');
+    const figTextInput = document.getElementById('caption_figure_text');
+    const panelTextInput = document.getElementById('caption_panel_text');
+    const previewEl = document.getElementById('caption-preview-text');
+
+    // Update caption preview when figure number changes
+    if (figNumInput) {
+        figNumInput.addEventListener('input', function() {
+            updateCaptionPreview();
+        });
+    }
+
+    // Update caption preview and send to backend when caption text changes
+    if (figTextInput) {
+        let timeout;
+        figTextInput.addEventListener('input', function() {
+            updateCaptionPreview();
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                updateFigureCaption();
+            }, UPDATE_DEBOUNCE);
+        });
+    }
+
+    // Update panel caption on input
+    if (panelTextInput) {
+        let timeout;
+        panelTextInput.addEventListener('input', function() {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                updatePanelCaption();
+            }, UPDATE_DEBOUNCE);
+        });
+    }
+
+    // Initial preview update
+    updateCaptionPreview();
+    loadCaptions();
+}
+
+// Update the caption preview text (composed caption in both properties panel and canvas pane)
+function updateCaptionPreview() {
+    const figNumInput = document.getElementById('caption_figure_number');
+    const figTextInput = document.getElementById('caption_figure_text');
+    const composedEl = document.getElementById('composed-caption-text');
+    const canvasCaptionEl = document.getElementById('canvas-caption-text');
+
+    const figNum = figNumInput?.value || '1';
+    const figText = figTextInput?.value || '';
+
+    // Build composed caption HTML
+    let html = `<b>Fig. ${figNum}.</b>`;
+    if (figText) {
+        html += ` ${figText}`;
+    }
+
+    // Add panel captions if available
+    const panelCaptions = getPanelCaptions();
+    if (panelCaptions.length > 0) {
+        const panelHtml = panelCaptions
+            .map((pc, i) => pc ? `<span class="panel-caption">(${String.fromCharCode(65 + i)}) ${pc}</span>` : '')
+            .filter(s => s)  // Filter empty strings
+            .join(' ');
+        if (panelHtml) {
+            html += ' ' + panelHtml;
+        }
+    }
+
+    // Update both preview locations
+    if (composedEl) composedEl.innerHTML = html;
+    if (canvasCaptionEl) canvasCaptionEl.innerHTML = html;
+}
+
+// Get all panel captions from stored state
+function getPanelCaptions() {
+    // Start with loaded panel captions from server
+    const captions = [...loadedPanelCaptions];
+
+    // Check for UI overrides
+    for (let i = 0; i < 9; i++) {  // Support up to 9 panels (A-I)
+        const input = document.querySelector(`[data-panel-caption="${i}"]`);
+        if (input && input.value) {
+            captions[i] = input.value;
+        }
+    }
+    // Also check current panel caption input
+    const currentPanel = document.getElementById('caption_panel_text');
+    if (currentPanel && currentPanel.value && selectedElement?.ax_index !== undefined) {
+        captions[selectedElement.ax_index] = currentPanel.value;
+    }
+    return captions;  // Keep all entries (including empty) for proper indexing
+}
+
+// Store loaded panel captions globally
+let loadedPanelCaptions = [];
+
+// Update panel caption input when panel is selected
+function updatePanelCaptionInput(axIndex) {
+    const panelTextInput = document.getElementById('caption_panel_text');
+    if (!panelTextInput) return;
+
+    // Get caption for this panel index
+    const caption = loadedPanelCaptions[axIndex] || '';
+    panelTextInput.value = caption;
+}
+
+// Load existing captions from server
+async function loadCaptions() {
+    try {
+        const response = await fetch('/get_captions');
+        const data = await response.json();
+
+        if (data.figure_number) {
+            const figNumInput = document.getElementById('caption_figure_number');
+            if (figNumInput) figNumInput.value = data.figure_number;
+        }
+
+        if (data.figure_caption) {
+            const figTextInput = document.getElementById('caption_figure_text');
+            if (figTextInput) figTextInput.value = data.figure_caption;
+        }
+
+        // Store panel captions for composed caption
+        if (data.panel_captions && Array.isArray(data.panel_captions)) {
+            loadedPanelCaptions = data.panel_captions;
+        }
+
+        updateCaptionPreview();
+        console.log('Loaded captions:', data);
+    } catch (error) {
+        console.log('Captions not loaded (endpoint may not exist yet):', error.message);
+    }
+}
+
+// Update figure caption on server
+async function updateFigureCaption() {
+    const figNumInput = document.getElementById('caption_figure_number');
+    const figTextInput = document.getElementById('caption_figure_text');
+
+    const figNum = parseInt(figNumInput?.value) || 1;
+    const figText = figTextInput?.value || '';
+
+    console.log(`Updating figure caption: Fig. ${figNum}. ${figText}`);
+
+    try {
+        const response = await fetch('/update_caption', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                type: 'figure',
+                figure_number: figNum,
+                text: figText
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            console.log('Figure caption updated');
+        } else {
+            console.error('Figure caption update failed:', data.error);
+        }
+    } catch (error) {
+        console.error('Figure caption update failed:', error);
+    }
+}
+
+// Update panel caption on server
+async function updatePanelCaption() {
+    const panelTextInput = document.getElementById('caption_panel_text');
+    const panelText = panelTextInput?.value || '';
+
+    // Get current panel index - prefer currentSelectedPanelIndex, fallback to selectedElement
+    let panelIndex = 0;
+    if (typeof currentSelectedPanelIndex !== 'undefined' && currentSelectedPanelIndex !== null) {
+        panelIndex = currentSelectedPanelIndex;
+    } else if (selectedElement && selectedElement.ax_index !== undefined) {
+        panelIndex = selectedElement.ax_index;
+    }
+
+    // Update local cache
+    while (loadedPanelCaptions.length <= panelIndex) {
+        loadedPanelCaptions.push('');
+    }
+    loadedPanelCaptions[panelIndex] = panelText;
+
+    console.log(`Updating panel ${panelIndex} caption: ${panelText}`);
+
+    try {
+        const response = await fetch('/update_caption', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                type: 'panel',
+                panel_index: panelIndex,
+                text: panelText
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            console.log('Panel caption updated');
+            updateCaptionPreview();  // Update composed caption preview
+        } else {
+            console.error('Panel caption update failed:', data.error);
+        }
+    } catch (error) {
+        console.error('Panel caption update failed:', error);
+    }
+}
+"""
+
+__all__ = ["SCRIPTS_CAPTIONS"]
+
+# EOF