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

figrecipe/_editor/_templates/_scripts/_selection.py

@@ -0,0 +1,244 @@
+#!/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'));
+
+    // Clear panel selection
+    if (typeof clearPanelSelection === 'function') {
+        clearPanelSelection();
+    }
+
+    // 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;
+
+        // Get element color from colorMap (primary source) or bbox (fallback)
+        const colorMapInfo = (colorMap && colorMap[elemKey]) || {};
+        const elementColor = colorMapInfo.original_color || 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/_sync.py

@@ -0,0 +1,242 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Tri-directional synchronization between Data/Canvas/Properties panes.
+
+This module coordinates selection state across:
+- Data pane (datatable tabs)
+- Canvas pane (figure preview with hit regions)
+- Properties pane (Figure/Axis/Element tabs)
+
+Sync directions:
+- Canvas → Data: Selecting element highlights datatable tab
+- Canvas → Properties: Selecting element switches to appropriate tab
+- Data → Canvas: Clicking datatable tab selects element on canvas
+- Data → Properties: Clicking datatable tab switches to Element tab
+- Properties → Canvas: Clicking tab filters/selects canvas elements
+- Properties → Data: Clicking tab highlights relevant data
+"""
+
+SCRIPTS_SYNC = """
+// ============================================================================
+// Tri-directional Pane Synchronization
+// ============================================================================
+
+// Sync state flags to prevent infinite loops
+let _syncingFromCanvas = false;
+let _syncingFromData = false;
+let _syncingFromProperties = false;
+
+// ============================================================================
+// Initialize Sync Hooks
+// ============================================================================
+function initPaneSync() {
+    console.log('[PaneSync] Initializing tri-directional synchronization');
+
+    // Hook datatable tab selection
+    hookDatatableTabSync();
+
+    // Hook properties tab clicks
+    hookPropertiesTabSync();
+
+    // Canvas selection is already hooked via hookCanvasSelection() in datatable core
+}
+
+// ============================================================================
+// Data Pane -> Canvas/Properties Sync
+// ============================================================================
+function hookDatatableTabSync() {
+    // Wrap selectTab to add canvas/properties sync
+    if (typeof window.selectTab === 'function') {
+        const originalSelectTab = window.selectTab;
+        window.selectTab = function(tabId) {
+            originalSelectTab(tabId);
+
+            // Avoid infinite loops
+            if (_syncingFromCanvas || _syncingFromProperties) return;
+            _syncingFromData = true;
+
+            try {
+                syncCanvasFromDatatableTab(tabId);
+                syncPropertiesFromDatatableTab(tabId);
+            } finally {
+                _syncingFromData = false;
+            }
+        };
+        console.log('[PaneSync] Datatable tab sync hooked');
+    }
+}
+
+function syncCanvasFromDatatableTab(tabId) {
+    if (!tabId || typeof datatableTabs === 'undefined') return;
+    const tabState = datatableTabs[tabId];
+    if (!tabState) return;
+
+    const callId = tabState.callId || tabState.name;
+    if (!callId) return;
+
+    console.log('[PaneSync] Data->Canvas: Looking for element matching callId:', callId);
+
+    // Search currentBboxes for matching element
+    if (typeof currentBboxes !== 'undefined' && currentBboxes) {
+        // First pass: exact match on call_id or label
+        for (const [key, bbox] of Object.entries(currentBboxes)) {
+            if (key === '_meta' || !bbox) continue;
+            if (bbox.call_id === callId || bbox.label === callId) {
+                if (typeof selectElement === 'function') {
+                    selectElement({ key, ...bbox });
+                    console.log('[PaneSync] Data->Canvas: Selected (exact)', key);
+                }
+                return;
+            }
+        }
+
+        // Second pass: key contains callId (e.g., "scatter" in "ax1_scatter0")
+        for (const [key, bbox] of Object.entries(currentBboxes)) {
+            if (key === '_meta' || !bbox) continue;
+            // Match pattern: ax{N}_{callId}{N} like ax1_scatter0
+            const pattern = new RegExp(`ax\\d+_${callId}\\d*$`, 'i');
+            if (pattern.test(key)) {
+                if (typeof selectElement === 'function') {
+                    selectElement({ key, ...bbox });
+                    console.log('[PaneSync] Data->Canvas: Selected (pattern)', key);
+                }
+                return;
+            }
+        }
+
+        // Third pass: looser match - key contains callId anywhere
+        for (const [key, bbox] of Object.entries(currentBboxes)) {
+            if (key === '_meta' || !bbox) continue;
+            if (key.toLowerCase().includes(callId.toLowerCase())) {
+                if (typeof selectElement === 'function') {
+                    selectElement({ key, ...bbox });
+                    console.log('[PaneSync] Data->Canvas: Selected (contains)', key);
+                }
+                return;
+            }
+        }
+
+        console.log('[PaneSync] Data->Canvas: No matching element found for', callId);
+    }
+
+    // Fallback: select the panel associated with this tab
+    if (tabState.targetAxis !== null && tabState.targetAxis !== undefined) {
+        const axKey = `ax${tabState.targetAxis}_axes`;
+        if (typeof currentBboxes !== 'undefined' && currentBboxes[axKey]) {
+            const bbox = currentBboxes[axKey];
+            if (typeof selectElement === 'function') {
+                selectElement({ key: axKey, ...bbox, type: 'axes', ax_index: tabState.targetAxis });
+                console.log('[PaneSync] Data->Canvas: Selected panel', tabState.targetAxis);
+            }
+        }
+    }
+}
+
+function syncPropertiesFromDatatableTab(tabId) {
+    if (!tabId || typeof datatableTabs === 'undefined') return;
+    const tabState = datatableTabs[tabId];
+    if (!tabState) return;
+
+    // Data tabs represent plot elements, so switch to Element tab
+    if (typeof switchTab === 'function') {
+        switchTab('element');
+        console.log('[PaneSync] Data->Properties: Switched to Element tab');
+    }
+}
+
+// ============================================================================
+// Properties Pane -> Canvas/Data Sync
+// ============================================================================
+function hookPropertiesTabSync() {
+    // Add click listeners to Figure/Axis/Element tab buttons
+    document.addEventListener('DOMContentLoaded', () => {
+        const tabBtns = document.querySelectorAll('.tab-btn');
+        tabBtns.forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                // Avoid infinite loops
+                if (_syncingFromCanvas || _syncingFromData) return;
+                _syncingFromProperties = true;
+
+                try {
+                    const tabName = btn.id.replace('tab-', '');
+                    syncCanvasFromPropertiesTab(tabName);
+                    syncDataFromPropertiesTab(tabName);
+                } finally {
+                    _syncingFromProperties = false;
+                }
+            });
+        });
+        console.log('[PaneSync] Properties tab sync hooked');
+    });
+}
+
+function syncCanvasFromPropertiesTab(tabName) {
+    // When switching to a properties tab, optionally clear or filter canvas selection
+    // For now, we'll just log - actual behavior depends on UX requirements
+    console.log('[PaneSync] Properties->Canvas: Tab', tabName, 'clicked');
+
+    // If Figure tab, clear element selection (show figure-level props)
+    if (tabName === 'figure' && typeof clearSelection === 'function') {
+        // Don't auto-clear as it might be disruptive
+        // clearSelection();
+    }
+}
+
+function syncDataFromPropertiesTab(tabName) {
+    // When switching to Element tab, try to highlight the currently selected element's data
+    if (tabName === 'element' && typeof selectedElement !== 'undefined' && selectedElement) {
+        if (typeof syncDatatableToElement === 'function') {
+            syncDatatableToElement(selectedElement);
+        }
+    }
+    console.log('[PaneSync] Properties->Data: Tab', tabName, 'clicked');
+}
+
+// ============================================================================
+// Enhanced Canvas -> Data/Properties Sync (augments existing hooks)
+// ============================================================================
+function enhanceCanvasSync() {
+    // Wrap selectElement to add enhanced sync
+    if (typeof window.selectElement === 'function') {
+        const originalSelectElement = window.selectElement;
+        window.selectElement = function(element) {
+            // Avoid infinite loops
+            if (_syncingFromData || _syncingFromProperties) {
+                originalSelectElement(element);
+                return;
+            }
+            _syncingFromCanvas = true;
+
+            try {
+                originalSelectElement(element);
+
+                // Auto-switch Properties tab based on element type
+                if (element && typeof autoSwitchTab === 'function') {
+                    autoSwitchTab(element.type);
+                }
+
+                // Sync datatable to element (already done in hookCanvasSelection, but ensure it happens)
+                if (element && typeof syncDatatableToElement === 'function') {
+                    syncDatatableToElement(element);
+                }
+            } finally {
+                _syncingFromCanvas = false;
+            }
+        };
+        console.log('[PaneSync] Canvas selection sync enhanced');
+    }
+}
+
+// Initialize sync on page load
+document.addEventListener('DOMContentLoaded', () => {
+    // Delay to ensure other modules are loaded
+    setTimeout(() => {
+        initPaneSync();
+        enhanceCanvasSync();
+    }, 100);
+});
+"""
+
+__all__ = ["SCRIPTS_SYNC"]
+
+# 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