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

figrecipe/_editor/_templates/_scripts/_panel_position.py

@@ -0,0 +1,279 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Panel position JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Loading and displaying panel positions
+- Updating panel positions via numerical inputs
+"""
+
+SCRIPTS_PANEL_POSITION = r"""
+// ===== PANEL POSITION (mm, upper-left origin) =====
+
+let panelPositions = {};
+let figSize = { width_mm: 0, height_mm: 0 };
+
+// Load panel positions from server
+async function loadPanelPositions() {
+    try {
+        const response = await fetch('/get_axes_positions');
+        const data = await response.json();
+
+        // Extract figure size
+        if (data._figsize) {
+            figSize = data._figsize;
+            delete data._figsize;
+        }
+
+        panelPositions = data;
+        updatePanelSelector();
+        updatePanelPositionInputs();
+    } catch (error) {
+        console.error('Failed to load panel positions:', error);
+    }
+}
+
+// Update panel selector dropdown
+function updatePanelSelector() {
+    const selector = document.getElementById('panel_selector');
+    if (!selector) return;
+
+    selector.innerHTML = '';
+    const axKeys = Object.keys(panelPositions).sort();
+
+    axKeys.forEach((key, index) => {
+        const opt = document.createElement('option');
+        opt.value = index;
+        // Show panel label (A, B, C...) if available
+        const label = String.fromCharCode(65 + index); // A, B, C...
+        opt.textContent = `Panel ${label} (${key})`;
+        selector.appendChild(opt);
+    });
+
+    // Add change event listener - mark as explicitly selected on dropdown change
+    selector.addEventListener('change', () => {
+        panelExplicitlySelected = true;
+        updatePanelPositionInputs();
+    });
+}
+
+let panelExplicitlySelected = false;
+
+// Update position input fields based on selected panel
+function updatePanelPositionInputs(showHighlight = true) {
+    const selector = document.getElementById('panel_selector');
+    if (!selector) return;
+
+    const axIndex = parseInt(selector.value, 10);
+    const axKey = Object.keys(panelPositions).sort()[axIndex];
+    const pos = panelPositions[axKey];
+
+    if (!pos) return;
+
+    const leftInput = document.getElementById('panel_left');
+    const topInput = document.getElementById('panel_top');
+    const widthInput = document.getElementById('panel_width');
+    const heightInput = document.getElementById('panel_height');
+
+    // Values are already in mm from server
+    if (leftInput) leftInput.value = pos.left;
+    if (topInput) topInput.value = pos.top;
+    if (widthInput) widthInput.value = pos.width;
+    if (heightInput) heightInput.value = pos.height;
+
+    // Only draw highlight if explicitly selected (not on initial load)
+    if (showHighlight && panelExplicitlySelected) {
+        drawPanelSelectionHighlight(pos);
+    }
+}
+
+// Draw visual highlight around selected panel
+function drawPanelSelectionHighlight(pos) {
+    const overlay = document.getElementById('selection-overlay');
+    if (!overlay) return;
+
+    // Clear previous panel highlight (but keep element selections)
+    const existingHighlight = document.getElementById('panel-selection-highlight');
+    if (existingHighlight) existingHighlight.remove();
+
+    const img = document.getElementById('preview-image');
+    if (!img || !img.naturalWidth || !img.naturalHeight) return;
+
+    // Ensure viewBox is set
+    overlay.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
+    overlay.style.width = `${img.naturalWidth}px`;
+    overlay.style.height = `${img.naturalHeight}px`;
+
+    // Convert mm coords (upper-left origin) to image pixel coords
+    // pos.left, pos.top, pos.width, pos.height are in mm
+    const scaleX = img.naturalWidth / figSize.width_mm;
+    const scaleY = img.naturalHeight / figSize.height_mm;
+
+    const x = pos.left * scaleX;
+    const y = pos.top * scaleY;  // Already in upper-left origin
+    const width = pos.width * scaleX;
+    const height = pos.height * scaleY;
+
+    // Create highlight rectangle
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.id = 'panel-selection-highlight';
+    rect.setAttribute('x', x);
+    rect.setAttribute('y', y);
+    rect.setAttribute('width', width);
+    rect.setAttribute('height', height);
+    rect.setAttribute('fill', 'none');
+    rect.setAttribute('stroke', '#f59e0b');
+    rect.setAttribute('stroke-width', '3');
+    rect.setAttribute('stroke-dasharray', '8,4');
+    rect.style.pointerEvents = 'none';
+
+    overlay.appendChild(rect);
+}
+
+// Clear panel selection highlight
+function clearPanelSelectionHighlight() {
+    const existingHighlight = document.getElementById('panel-selection-highlight');
+    if (existingHighlight) existingHighlight.remove();
+}
+
+// Select panel by index (called when clicking on axes in canvas)
+function selectPanelByIndex(axIndex) {
+    const selector = document.getElementById('panel_selector');
+    if (!selector) return;
+
+    // Mark as explicitly selected
+    panelExplicitlySelected = true;
+
+    // Update dropdown selection
+    selector.value = axIndex;
+
+    // Update inputs and highlight
+    updatePanelPositionInputs();
+
+    // Switch to Axis tab
+    switchTab('axis');
+
+    console.log('Selected panel', axIndex);
+}
+
+// Find panel index from axes key (e.g., "ax_0" -> 0)
+function getPanelIndexFromKey(key) {
+    if (!key) return null;
+
+    // Handle "ax_N" format
+    const match = key.match(/ax_(\d+)/);
+    if (match) {
+        return parseInt(match[1], 10);
+    }
+
+    // Handle axes type elements - find by checking bboxes
+    const axKeys = Object.keys(panelPositions).sort();
+    for (let i = 0; i < axKeys.length; i++) {
+        if (axKeys[i] === key) {
+            return i;
+        }
+    }
+
+    return null;
+}
+
+// Apply panel position changes
+async function applyPanelPosition() {
+    const selector = document.getElementById('panel_selector');
+    const leftInput = document.getElementById('panel_left');
+    const topInput = document.getElementById('panel_top');
+    const widthInput = document.getElementById('panel_width');
+    const heightInput = document.getElementById('panel_height');
+
+    if (!selector || !leftInput || !topInput || !widthInput || !heightInput) {
+        console.error('Panel position inputs not found');
+        return;
+    }
+
+    const axIndex = parseInt(selector.value, 10);
+    const left = parseFloat(leftInput.value);
+    const top = parseFloat(topInput.value);
+    const width = parseFloat(widthInput.value);
+    const height = parseFloat(heightInput.value);
+
+    // Validate values (mm, must be positive and within figure bounds)
+    if ([left, top, width, height].some(v => isNaN(v) || v < 0)) {
+        alert('Position values must be positive numbers in mm');
+        return;
+    }
+
+    if (left + width > figSize.width_mm || top + height > figSize.height_mm) {
+        alert(`Panel extends beyond figure bounds (${figSize.width_mm.toFixed(1)} x ${figSize.height_mm.toFixed(1)} mm)`);
+        return;
+    }
+
+    document.body.classList.add('loading');
+
+    try {
+        const response = await fetch('/update_axes_position', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                ax_index: axIndex,
+                left: left,
+                top: top,
+                width: width,
+                height: height
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            // Update preview image and wait for it to load
+            const img = document.getElementById('preview-image');
+            if (img) {
+                await new Promise((resolve) => {
+                    img.onload = resolve;
+                    img.src = 'data:image/png;base64,' + data.image;
+                });
+            }
+
+            // Update image size
+            if (data.img_size) {
+                currentImgWidth = data.img_size.width;
+                currentImgHeight = data.img_size.height;
+            }
+
+            // Update bboxes
+            currentBboxes = data.bboxes;
+            loadHitmap();
+            updateHitRegions();
+
+            // Reload positions to reflect any adjustments (now with correct image dimensions)
+            await loadPanelPositions();
+
+            console.log('Panel position updated successfully');
+        } else {
+            alert('Failed to update position: ' + data.error);
+        }
+    } catch (error) {
+        alert('Failed to update position: ' + error.message);
+    }
+
+    document.body.classList.remove('loading');
+}
+
+// Initialize panel position controls
+function initPanelPositionControls() {
+    const applyBtn = document.getElementById('apply_panel_position');
+    if (applyBtn) {
+        applyBtn.addEventListener('click', applyPanelPosition);
+    }
+
+    // Load initial positions
+    loadPanelPositions();
+}
+
+// Call initialization on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', initPanelPositionControls);
+"""
+
+__all__ = ["SCRIPTS_PANEL_POSITION"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_selection.py

@@ -0,0 +1,237 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Selection drawing and property synchronization JavaScript.
+
+This module contains the JavaScript code for:
+- Drawing selection overlays (polylines, circles, rectangles)
+- Clearing selection state
+- Syncing properties panel to selected element
+- Updating element property highlights
+"""
+
+SCRIPTS_SELECTION = """
+// ===== SELECTION AND PROPERTY SYNC =====
+
+// Clear current selection
+function clearSelection() {
+    selectedElement = null;
+    clearSelectionOverlay();
+
+    // Clear section and field highlights
+    document.querySelectorAll('.section-highlighted').forEach(s => s.classList.remove('section-highlighted'));
+    document.querySelectorAll('.field-highlighted').forEach(f => f.classList.remove('field-highlighted'));
+
+    // Switch back to Figure tab when nothing selected
+    switchTab('figure');
+
+    // Update hint and show all if in filter mode
+    const hint = document.getElementById('selection-hint');
+    if (hint && viewMode === 'selected') {
+        hint.textContent = '';
+        hint.style.color = '';
+        showAllProperties();
+    }
+}
+
+// Draw selection shape(s) - handles lines, scatter, and rectangles
+function drawSelection(key) {
+    const overlay = document.getElementById('selection-overlay');
+    overlay.innerHTML = '';
+
+    const img = document.getElementById('preview-image');
+    if (!img.naturalWidth || !img.naturalHeight) return;
+
+    // Set SVG viewBox to match natural image size
+    overlay.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
+    overlay.style.width = `${img.naturalWidth}px`;
+    overlay.style.height = `${img.naturalHeight}px`;
+
+    const scaleX = 1.0;
+    const scaleY = 1.0;
+    const offsetX = 0;
+    const offsetY = 0;
+
+    // Determine which elements to highlight
+    let elementsToHighlight = [key];
+    if (selectedElement && selectedElement.groupElements) {
+        elementsToHighlight = selectedElement.groupElements.map(e => e.key);
+    }
+
+    // Draw selection for each element
+    for (const elemKey of elementsToHighlight) {
+        const bbox = currentBboxes[elemKey];
+        if (!bbox) continue;
+
+        const elementColor = bbox.original_color || '#2563eb';
+        const isPrimary = elemKey === key;
+
+        if (bbox.type === 'line' && bbox.points && bbox.points.length > 1) {
+            _drawLineSelection(overlay, bbox, elementColor, isPrimary, offsetX, offsetY, scaleX, scaleY);
+        } else if (bbox.type === 'scatter' && bbox.points && bbox.points.length > 0) {
+            _drawScatterSelection(overlay, bbox, elementColor, isPrimary, offsetX, offsetY, scaleX, scaleY);
+        } else {
+            _drawRectSelection(overlay, bbox, elementColor, isPrimary, offsetX, offsetY, scaleX, scaleY);
+        }
+    }
+}
+
+// Helper: Draw line selection (polyline)
+function _drawLineSelection(overlay, bbox, elementColor, isPrimary, offsetX, offsetY, scaleX, scaleY) {
+    const points = bbox.points.map(pt => {
+        const x = offsetX + pt[0] * scaleX;
+        const y = offsetY + pt[1] * scaleY;
+        return `${x},${y}`;
+    }).join(' ');
+
+    const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    polyline.setAttribute('points', points);
+    polyline.setAttribute('class', 'selection-polyline');
+    polyline.style.setProperty('--element-color', elementColor);
+    if (isPrimary) {
+        polyline.style.strokeWidth = '10';
+        polyline.style.strokeOpacity = '0.6';
+    }
+    overlay.appendChild(polyline);
+}
+
+// Helper: Draw scatter selection (circles)
+function _drawScatterSelection(overlay, bbox, elementColor, isPrimary, offsetX, offsetY, scaleX, scaleY) {
+    bbox.points.forEach(pt => {
+        const cx = offsetX + pt[0] * scaleX;
+        const cy = offsetY + pt[1] * scaleY;
+
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', cx);
+        circle.setAttribute('cy', cy);
+        circle.setAttribute('r', isPrimary ? 4 : 3);
+        circle.setAttribute('class', 'selection-circle-subtle');
+        circle.style.setProperty('--element-color', elementColor);
+        overlay.appendChild(circle);
+    });
+}
+
+// Helper: Draw rectangle selection
+function _drawRectSelection(overlay, bbox, elementColor, isPrimary, offsetX, offsetY, scaleX, scaleY) {
+    const x = offsetX + bbox.x * scaleX;
+    const y = offsetY + bbox.y * scaleY;
+    const width = bbox.width * scaleX;
+    const height = bbox.height * scaleY;
+
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', x);
+    rect.setAttribute('y', y);
+    rect.setAttribute('width', Math.max(width, 2));
+    rect.setAttribute('height', Math.max(height, 2));
+    rect.setAttribute('class', 'selection-rect');
+    rect.style.setProperty('--element-color', elementColor);
+
+    if (isPrimary) {
+        rect.classList.add('selection-primary');
+    }
+
+    overlay.appendChild(rect);
+}
+
+// Clear selection overlay
+function clearSelectionOverlay() {
+    document.getElementById('selection-overlay').innerHTML = '';
+}
+
+// Sync properties panel to selected element
+function syncPropertiesToElement(element) {
+    // Always show dynamic call properties for the selected element
+    showDynamicCallProperties(element);
+
+    // In 'selected' mode, only show call properties (no section highlighting)
+    if (viewMode === 'selected') {
+        return;
+    }
+
+    // Map element types to section IDs (for 'all' mode)
+    const sectionMap = {
+        'axes': 'section-dimensions',
+        'line': 'section-lines',
+        'scatter': 'section-markers',
+        'bar': 'section-lines',
+        'fill': 'section-lines',
+        'boxplot': 'section-boxplot',
+        'violin': 'section-violin',
+        'title': 'section-fonts',
+        'xlabel': 'section-fonts',
+        'ylabel': 'section-fonts',
+        'xticks': 'section-ticks',
+        'yticks': 'section-ticks',
+        'legend': 'section-legend',
+        'spine': 'section-dimensions',
+        'contour': 'section-dimensions',
+        'image': 'section-dimensions',
+        'pie': 'section-dimensions',
+        'hist': 'section-lines',
+        'quiver': 'section-lines',
+    };
+
+    const sectionId = sectionMap[element.type] || 'section-dimensions';
+
+    // Close all sections and remove highlights (accordion behavior)
+    document.querySelectorAll('.section').forEach(section => {
+        section.classList.remove('section-highlighted');
+        if (section.id && section.id !== 'section-download') {
+            section.removeAttribute('open');
+        }
+    });
+
+    // Find and highlight the relevant section
+    const section = document.getElementById(sectionId);
+    if (section) {
+        section.setAttribute('open', '');
+        section.classList.add('section-highlighted');
+        setTimeout(() => {
+            section.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }, 50);
+    }
+
+    updateElementProperties(element);
+}
+
+// Update property values for selected element
+function updateElementProperties(element) {
+    // Clear previous field highlights
+    document.querySelectorAll('.form-row').forEach(row => {
+        row.classList.remove('field-highlighted');
+    });
+
+    // Map element types to relevant form field IDs
+    const fieldMap = {
+        'line': ['lines_trace_mm', 'lines_errorbar_mm', 'lines_errorbar_cap_mm'],
+        'scatter': ['markers_size_mm', 'markers_scatter_mm', 'markers_edge_width_mm'],
+        'bar': ['lines_trace_mm'],
+        'fill': ['lines_trace_mm'],
+        'boxplot': ['lines_trace_mm', 'markers_flier_mm', 'boxplot_median_color'],
+        'violin': ['lines_trace_mm'],
+        'title': ['fonts_title_pt', 'fonts_family'],
+        'xlabel': ['fonts_axis_label_pt', 'fonts_family'],
+        'ylabel': ['fonts_axis_label_pt', 'fonts_family'],
+        'xticks': ['fonts_tick_label_pt', 'ticks_length_mm', 'ticks_direction'],
+        'yticks': ['fonts_tick_label_pt', 'ticks_length_mm', 'ticks_direction'],
+        'legend': ['fonts_legend_pt', 'legend_frameon', 'legend_loc'],
+        'spine': ['axes_thickness_mm'],
+    };
+
+    const relevantFields = fieldMap[element.type] || [];
+
+    // Highlight relevant form rows
+    relevantFields.forEach(fieldId => {
+        const row = document.querySelector(`[data-field="${fieldId}"]`);
+        if (row) {
+            row.classList.add('field-highlighted');
+        }
+    });
+
+    // Show dynamic call properties for this element
+    showDynamicCallProperties(element);
+}
+"""
+
+__all__ = ["SCRIPTS_SELECTION"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_tabs.py

@@ -0,0 +1,89 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Tab navigation JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Tab switching (Figure/Axis/Element)
+- Auto-switching based on selected element
+- Tab hints management
+"""
+
+SCRIPTS_TABS = """
+// ===== TAB NAVIGATION =====
+
+// Current active tab
+let currentTab = 'figure';
+
+// Element type to tab mapping
+const AXIS_TYPES = ['title', 'xlabel', 'ylabel', 'suptitle', 'supxlabel', 'supylabel', 'legend'];
+const ELEMENT_TYPES = ['line', 'scatter', 'bar', 'hist', 'fill', 'boxplot', 'violin', 'image', 'linecollection', 'quiver', 'pie', 'contour', 'specgram'];
+
+// Switch between Figure/Axis/Element tabs
+function switchTab(tabName) {
+    currentTab = tabName;
+
+    // Update tab buttons
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.id === `tab-${tabName}`);
+    });
+
+    // Update tab content
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.toggle('active', content.id === `tab-content-${tabName}`);
+    });
+
+    // Update hints based on selection state
+    updateTabHints();
+}
+
+// Get appropriate tab for element type
+function getTabForElementType(elementType) {
+    if (!elementType) return 'figure';
+    if (AXIS_TYPES.includes(elementType)) return 'axis';
+    if (ELEMENT_TYPES.includes(elementType)) return 'element';
+    return 'figure';
+}
+
+// Auto-switch to appropriate tab based on selected element
+function autoSwitchTab(elementType) {
+    const targetTab = getTabForElementType(elementType);
+    if (targetTab !== currentTab) {
+        switchTab(targetTab);
+    }
+}
+
+// Update tab hints based on current state
+function updateTabHints() {
+    const axisHint = document.getElementById('axis-tab-hint');
+    const elementHint = document.getElementById('element-tab-hint');
+    const elementPanel = document.getElementById('selected-element-panel');
+    const dynamicProps = document.getElementById('dynamic-call-properties');
+
+    if (currentTab === 'axis') {
+        if (selectedElement && AXIS_TYPES.includes(selectedElement.type)) {
+            if (axisHint) axisHint.style.display = 'none';
+        } else {
+            if (axisHint) axisHint.style.display = 'block';
+        }
+    }
+
+    if (currentTab === 'element') {
+        if (selectedElement && ELEMENT_TYPES.includes(selectedElement.type)) {
+            if (elementHint) elementHint.style.display = 'none';
+            if (elementPanel) {
+                elementPanel.style.display = 'block';
+                document.getElementById('element-type-badge').textContent = selectedElement.type;
+                document.getElementById('element-name').textContent = selectedElement.label || selectedElement.key;
+            }
+        } else {
+            if (elementHint) elementHint.style.display = 'block';
+            if (elementPanel) elementPanel.style.display = 'none';
+            if (dynamicProps) dynamicProps.style.display = 'none';
+        }
+    }
+}
+"""
+
+__all__ = ["SCRIPTS_TABS"]
+
+# EOF