scitex 2.10.3__py3-none-any.whl → 2.11.0__py3-none-any.whl

scitex/fts/_fig/_editor/_gui/_flask_editor/static/js/main.js

@@ -1,426 +0,0 @@
-/**
- * Main Entry Point
- * Initializes all modules and sets up the Flask figure editor
- *
- * Module Structure:
- * - core/: State management, utilities, API communication
- * - canvas/: Canvas view, panel dragging, resizing, selection
- * - editor/: Preview management, element detection, overlay rendering
- * - alignment/: Panel alignment (basic and axis-based)
- * - shortcuts/: Keyboard shortcuts and context menus
- * - ui/: Form controls, downloads, help, theme
- */
-
-// ============================================================================
-// Initialization
-// ============================================================================
-document.addEventListener('DOMContentLoaded', function() {
-    console.log('Flask Figure Editor initializing...');
-
-    // Initialize theme
-    initializeTheme();
-
-    // Initialize form controls
-    initializeControls();
-
-    // Load initial preview
-    loadInitialPreview();
-
-    // Setup resize observer for overlay
-    setupResizeObserver();
-
-    // Setup field-to-element sync
-    setupFieldToElementSync();
-
-    console.log('Flask Figure Editor initialized');
-});
-
-// ============================================================================
-// Form Controls Initialization
-// ============================================================================
-function initializeControls() {
-    // Labels - Title
-    const titleInput = document.getElementById('title');
-    if (titleInput) titleInput.addEventListener('input', scheduleUpdate);
-
-    // Labels - Caption
-    const captionInput = document.getElementById('caption');
-    if (captionInput) captionInput.addEventListener('input', scheduleUpdate);
-
-    // Labels - Axis
-    const xlabelInput = document.getElementById('xlabel');
-    const ylabelInput = document.getElementById('ylabel');
-    if (xlabelInput) xlabelInput.addEventListener('input', scheduleUpdate);
-    if (ylabelInput) ylabelInput.addEventListener('input', scheduleUpdate);
-
-    // Axis limits
-    ['xmin', 'xmax', 'ymin', 'ymax'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('input', scheduleUpdate);
-    });
-
-    // Traces
-    updateTracesList();
-
-    // Legend
-    const legendVisibleInput = document.getElementById('legend_visible');
-    if (legendVisibleInput) legendVisibleInput.addEventListener('change', scheduleUpdate);
-
-    const legendLocInput = document.getElementById('legend_loc');
-    if (legendLocInput) {
-        legendLocInput.addEventListener('change', function() {
-            toggleCustomLegendPosition();
-            scheduleUpdate();
-        });
-    }
-
-    // Axis and Ticks - X Axis (Bottom)
-    ['x_n_ticks', 'hide_x_ticks', 'x_tick_fontsize', 'x_tick_direction', 'x_tick_length', 'x_tick_width'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('change', scheduleUpdate);
-    });
-
-    // X Axis (Top)
-    ['show_x_top', 'x_top_mirror'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('change', scheduleUpdate);
-    });
-
-    // Y Axis (Left)
-    ['y_n_ticks', 'hide_y_ticks', 'y_tick_fontsize', 'y_tick_direction', 'y_tick_length', 'y_tick_width'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('change', scheduleUpdate);
-    });
-
-    // Y Axis (Right)
-    ['show_y_right', 'y_right_mirror'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('change', scheduleUpdate);
-    });
-
-    // Spines
-    ['hide_bottom_spine', 'hide_left_spine'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('change', scheduleUpdate);
-    });
-
-    // Z Axis (3D)
-    ['hide_z_ticks', 'z_n_ticks', 'z_tick_fontsize', 'z_tick_direction'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('change', scheduleUpdate);
-    });
-
-    // Style
-    ['grid', 'hide_top_spine', 'hide_right_spine', 'axis_width', 'axis_fontsize'].forEach(id => {
-        const input = document.getElementById(id);
-        if (input) input.addEventListener('change', scheduleUpdate);
-    });
-
-    // Initialize background type from overrides
-    if (overrides.transparent) {
-        setBackgroundType('transparent');
-    } else if (overrides.facecolor === 'black') {
-        setBackgroundType('black');
-    } else {
-        setBackgroundType('white');
-    }
-
-    // Dimensions (convert from inches in metadata to mm by default)
-    if (overrides.fig_size) {
-        // fig_size is in inches in the JSON - convert to mm for default display
-        const widthInput = document.getElementById('fig_width');
-        const heightInput = document.getElementById('fig_height');
-        if (widthInput && heightInput) {
-            widthInput.value = (overrides.fig_size[0] * INCH_TO_MM).toFixed(1);
-            heightInput.value = (overrides.fig_size[1] * INCH_TO_MM).toFixed(1);
-        }
-    }
-
-    // Default unit is mm, which is already set in HTML and JS state
-
-    // Setup color sync for selected element property inputs
-    setupColorSync('trace-color-picker', 'trace-color-text');
-    setupColorSync('scatter-color-picker', 'scatter-color-text');
-    setupColorSync('fill-color-picker', 'fill-color-text');
-
-    // Mark initialization complete - now background changes will trigger updates
-    initializingBackground = false;
-
-    console.log('Controls initialized');
-}
-
-// ============================================================================
-// Resize Observer Setup
-// ============================================================================
-function setupResizeObserver() {
-    // Add resize handler to update overlay when window/image size changes
-    window.addEventListener('resize', updateOverlay);
-
-    // Use ResizeObserver to detect when the preview container changes size
-    const previewContainer = document.getElementById('preview-container');
-    if (previewContainer && typeof ResizeObserver !== 'undefined') {
-        const resizeObserver = new ResizeObserver(() => {
-            updateOverlay();
-        });
-        resizeObserver.observe(previewContainer);
-    }
-}
-
-// ============================================================================
-// Field-to-Element Synchronization
-// ============================================================================
-function setupFieldToElementSync() {
-    // Map field IDs to element names
-    const fieldToElement = {
-        // Title, Labels & Caption section
-        'title': 'title',
-        'caption': 'caption',
-        'xlabel': 'xlabel',
-        'ylabel': 'ylabel',
-
-        // Axis & Ticks section
-        'xmin': 'xaxis',
-        'xmax': 'xaxis',
-        'ymin': 'yaxis',
-        'ymax': 'yaxis',
-        'x_n_ticks': 'xaxis',
-        'y_n_ticks': 'yaxis',
-        'hide_x_ticks': 'xaxis',
-        'hide_y_ticks': 'yaxis',
-
-        // Legend section
-        'legend_visible': 'legend',
-        'legend_loc': 'legend',
-        'legend_frameon': 'legend',
-        'legend_fontsize': 'legend',
-        'legend_ncols': 'legend',
-        'legend_x': 'legend',
-        'legend_y': 'legend',
-    };
-
-    // Add focus listeners to all mapped fields
-    for (const [fieldId, elementName] of Object.entries(fieldToElement)) {
-        const field = document.getElementById(fieldId);
-        if (field) {
-            field.addEventListener('focus', function() {
-                // Find the element in bboxes - for multi-panel, check ax_00 first
-                let foundElement = elementName;
-                if (elementBboxes[`ax_00_${elementName}`]) {
-                    foundElement = `ax_00_${elementName}`;
-                } else if (elementBboxes[elementName]) {
-                    foundElement = elementName;
-                } else {
-                    // Try to find with axis prefix (e.g., ax_00_title)
-                    for (const key of Object.keys(elementBboxes)) {
-                        if (key.endsWith(`_${elementName}`)) {
-                            foundElement = key;
-                            break;
-                        }
-                    }
-                }
-
-                if (elementBboxes[foundElement]) {
-                    hoveredElement = foundElement;
-                    updateOverlay();
-                }
-            });
-
-            // Also handle mouseenter for hover feedback
-            field.addEventListener('mouseenter', function() {
-                const helpText = this.getAttribute('title') || this.getAttribute('placeholder');
-                if (helpText) {
-                    setStatus(helpText, false);
-                }
-            });
-
-            field.addEventListener('mouseleave', function() {
-                setStatus('Ready', false);
-            });
-        }
-    }
-}
-
-// ============================================================================
-// Traces List Update
-// ============================================================================
-function updateTracesList() {
-    const container = document.getElementById('traces-list');
-    if (!container) return;
-
-    container.innerHTML = '';
-    if (!traces || traces.length === 0) return;
-
-    traces.forEach((trace, idx) => {
-        const item = document.createElement('div');
-        item.className = 'trace-item';
-        item.innerHTML = `
-            <label>${trace.label || `Trace ${idx}`}</label>
-            <input type="color" value="${trace.color || '#000000'}" onchange="updateTraceColor(${idx}, this.value)">
-            <select onchange="updateTraceStyle(${idx}, this.value)">
-                <option value="-" ${trace.linestyle === '-' ? 'selected' : ''}>Solid</option>
-                <option value="--" ${trace.linestyle === '--' ? 'selected' : ''}>Dashed</option>
-                <option value="-." ${trace.linestyle === '-.' ? 'selected' : ''}>Dash-dot</option>
-                <option value=":" ${trace.linestyle === ':' ? 'selected' : ''}>Dotted</option>
-            </select>
-        `;
-        container.appendChild(item);
-    });
-}
-
-function updateTraceColor(idx, color) {
-    if (traces[idx]) {
-        traces[idx].color = color;
-        scheduleUpdate();
-    }
-}
-
-function updateTraceStyle(idx, style) {
-    if (traces[idx]) {
-        traces[idx].linestyle = style;
-        scheduleUpdate();
-    }
-}
-
-// ============================================================================
-// Hover System Initialization (for SVG mode)
-// ============================================================================
-function initHoverSystemForElement(el) {
-    // Initialize hover detection for inline SVG elements
-    if (!el) return;
-
-    el.addEventListener('mousemove', (e) => {
-        // Find element at cursor position
-        // This would require SVG-specific hit detection
-        // For now, just update overlay
-        updateOverlay();
-    });
-
-    el.addEventListener('click', (e) => {
-        // Select element on click
-        // This would require SVG-specific hit detection
-    });
-}
-
-// ============================================================================
-// Canvas Item Interaction (Multi-Panel)
-// ============================================================================
-function initCanvasItemInteraction(item, panelIdx, panelName) {
-    const container = item.querySelector('.panel-card-container');
-    if (!container) return;
-
-    const img = container.querySelector('img');
-    const overlay = container.querySelector('svg');
-    if (!img || !overlay) return;
-
-    // Wait for image to load to get dimensions
-    img.addEventListener('load', () => {
-        overlay.setAttribute('width', img.offsetWidth);
-        overlay.setAttribute('height', img.offsetHeight);
-        overlay.style.width = img.offsetWidth + 'px';
-        overlay.style.height = img.offsetHeight + 'px';
-    });
-
-    // Mousemove for hover detection (accounting for object-fit:contain letterboxing)
-    container.addEventListener('mousemove', (e) => {
-        const panelCache = panelBboxesCache[panelName];
-        if (!panelCache) return;
-
-        const rect = img.getBoundingClientRect();
-        const dims = getObjectFitContainDimensions(img);
-
-        // Mouse position relative to container
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-
-        // Adjust for letterbox offset to get position relative to actual rendered image
-        const imgRelX = x - dims.offsetX;
-        const imgRelY = y - dims.offsetY;
-
-        // Check if click is within rendered image bounds
-        if (imgRelX < 0 || imgRelY < 0 || imgRelX > dims.displayWidth || imgRelY > dims.displayHeight) {
-            // Outside rendered image area (in letterbox region)
-            if (panelHoveredElement !== null) {
-                panelHoveredElement = null;
-                updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, null, null, img);
-            }
-            return;
-        }
-
-        // Scale to original image coordinates
-        const scaleX = panelCache.imgSize.width / dims.displayWidth;
-        const scaleY = panelCache.imgSize.height / dims.displayHeight;
-        const imgX = imgRelX * scaleX;
-        const imgY = imgRelY * scaleY;
-
-        const element = findElementInPanelAt(imgX, imgY, panelCache.bboxes);
-        if (element !== panelHoveredElement || activePanelCard !== item) {
-            panelHoveredElement = element;
-            activePanelCard = item;
-            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, element, selectedElement, img);
-        }
-    });
-
-    // Mouseleave to clear hover
-    container.addEventListener('mouseleave', () => {
-        panelHoveredElement = null;
-        activePanelCard = null;
-        const panelCache = panelBboxesCache[panelName];
-        if (panelCache) {
-            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, img.offsetWidth, img.offsetHeight, null, selectedElement, img);
-        }
-    });
-
-    // Mousedown to start element drag (ONLY for legends and panel letters)
-    container.addEventListener('mousedown', (e) => {
-        if (panelHoveredElement && isDraggableElement(panelHoveredElement, panelBboxesCache[panelName]?.bboxes)) {
-            // Only allow dragging of legends and panel letters (scientific rigor)
-            startElementDrag(e, panelHoveredElement, panelName, img, panelBboxesCache[panelName].bboxes);
-        }
-    });
-
-    // Click to select element (accounting for object-fit:contain letterboxing)
-    container.addEventListener('click', (e) => {
-        // Recalculate element at click position (in case hover didn't detect it)
-        const panelCache = panelBboxesCache[panelName];
-        if (!panelCache) return;
-
-        const rect = img.getBoundingClientRect();
-        const dims = getObjectFitContainDimensions(img);
-
-        // Mouse position relative to container
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-
-        // Adjust for letterbox offset
-        const imgRelX = x - dims.offsetX;
-        const imgRelY = y - dims.offsetY;
-
-        // Check if click is within rendered image bounds
-        if (imgRelX >= 0 && imgRelY >= 0 && imgRelX <= dims.displayWidth && imgRelY <= dims.displayHeight) {
-            // Scale to original image coordinates
-            const scaleX = panelCache.imgSize.width / dims.displayWidth;
-            const scaleY = panelCache.imgSize.height / dims.displayHeight;
-            const imgX = imgRelX * scaleX;
-            const imgY = imgRelY * scaleY;
-
-            const element = findElementInPanelAt(imgX, imgY, panelCache.bboxes);
-            if (element) {
-                loadPanelForEditing(panelName);
-            }
-        }
-    });
-
-    // Drag support for repositioning
-    initPanelDrag(item, panelName);
-}
-
-// ============================================================================
-// Panel Card Interaction (for panel grid view - if used)
-// ============================================================================
-function initPanelCardInteraction(card, panelIdx, panelName) {
-    // Similar to initCanvasItemInteraction but for panel grid cards
-    // Simplified version - delegates to initCanvasItemInteraction
-    initCanvasItemInteraction(card, panelIdx, panelName);
-}
-
-console.log('main.js loaded');

scitex/fts/_fig/_editor/_gui/_flask_editor/static/js/shortcuts/context-menu.js

@@ -1,152 +0,0 @@
-/**
- * Context Menu
- * Right-click context menu for panel operations
- */
-
-// ============================================================================
-// Show Context Menu
-// ============================================================================
-function showContextMenu(e, panelName) {
-    e.preventDefault();
-    hideContextMenu();
-
-    const selectedCount = document.querySelectorAll('.panel-canvas-item.selected').length;
-    const hasSelection = selectedCount > 0;
-
-    const menu = document.createElement('div');
-    menu.id = 'canvas-context-menu';
-    menu.className = 'context-menu';
-    menu.innerHTML = `
-        <div class="context-menu-item" onclick="selectAllPanels(); hideContextMenu();">
-            <span class="context-menu-icon">⬚</span> Select All <span class="context-menu-shortcut">Ctrl+A</span>
-        </div>
-        <div class="context-menu-item ${!hasSelection ? 'disabled' : ''}" onclick="${hasSelection ? 'deselectAllPanels(); hideContextMenu();' : ''}">
-            <span class="context-menu-icon">○</span> Deselect All <span class="context-menu-shortcut">Esc</span>
-        </div>
-        <div class="context-menu-divider"></div>
-        <div class="context-menu-item ${!hasSelection ? 'disabled' : ''}" onclick="${hasSelection ? 'bringPanelToFront(); hideContextMenu();' : ''}">
-            <span class="context-menu-icon">↑</span> Bring to Front <span class="context-menu-shortcut">Alt+F</span>
-        </div>
-        <div class="context-menu-item ${!hasSelection ? 'disabled' : ''}" onclick="${hasSelection ? 'sendPanelToBack(); hideContextMenu();' : ''}">
-            <span class="context-menu-icon">↓</span> Send to Back <span class="context-menu-shortcut">Alt+B</span>
-        </div>
-        <div class="context-menu-divider"></div>
-        <div class="context-menu-submenu">
-            <div class="context-menu-item">
-                <span class="context-menu-icon">≡</span> Align <span class="context-menu-arrow">▶</span>
-            </div>
-            <div class="context-submenu">
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('left'); hideContextMenu();" : ''}">Left</div>
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('right'); hideContextMenu();" : ''}">Right</div>
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('top'); hideContextMenu();" : ''}">Top</div>
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('bottom'); hideContextMenu();" : ''}">Bottom</div>
-                <div class="context-menu-divider"></div>
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('center-h'); hideContextMenu();" : ''}">Center H</div>
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('center-v'); hideContextMenu();" : ''}">Center V</div>
-            </div>
-        </div>
-        <div class="context-menu-submenu">
-            <div class="context-menu-item">
-                <span class="context-menu-icon">⊞</span> Align by Axis <span class="context-menu-arrow">▶</span>
-            </div>
-            <div class="context-submenu">
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanelsByAxis('left'); hideContextMenu();" : ''}">Y-Axis (Left)</div>
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanelsByAxis('bottom'); hideContextMenu();" : ''}">X-Axis (Bottom)</div>
-                <div class="context-menu-divider"></div>
-                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "stackPanelsVertically(); hideContextMenu();" : ''}">Stack Vertically</div>
-            </div>
-        </div>
-        <div class="context-menu-submenu">
-            <div class="context-menu-item">
-                <span class="context-menu-icon">⇔</span> Distribute <span class="context-menu-arrow">▶</span>
-            </div>
-            <div class="context-submenu">
-                <div class="context-menu-item ${selectedCount < 3 ? 'disabled' : ''}" onclick="${selectedCount >= 3 ? "distributePanels('horizontal'); hideContextMenu();" : ''}">Horizontal</div>
-                <div class="context-menu-item ${selectedCount < 3 ? 'disabled' : ''}" onclick="${selectedCount >= 3 ? "distributePanels('vertical'); hideContextMenu();" : ''}">Vertical</div>
-            </div>
-        </div>
-        <div class="context-menu-divider"></div>
-        <div class="context-menu-item" onclick="toggleGridVisibility(); hideContextMenu();">
-            <span class="context-menu-icon">⊞</span> Toggle Grid <span class="context-menu-shortcut">G</span>
-        </div>
-        <div class="context-menu-divider"></div>
-        <div class="context-menu-item" onclick="showShortcutHelp(); hideContextMenu();">
-            <span class="context-menu-icon">⌨</span> Keyboard Shortcuts <span class="context-menu-shortcut">?</span>
-        </div>
-    `;
-
-    // Position menu at cursor
-    menu.style.left = e.clientX + 'px';
-    menu.style.top = e.clientY + 'px';
-
-    document.body.appendChild(menu);
-    contextMenu = menu;
-
-    // Adjust position if menu goes off screen
-    const rect = menu.getBoundingClientRect();
-    if (rect.right > window.innerWidth) {
-        menu.style.left = (window.innerWidth - rect.width - 5) + 'px';
-    }
-    if (rect.bottom > window.innerHeight) {
-        menu.style.top = (window.innerHeight - rect.height - 5) + 'px';
-    }
-}
-
-// ============================================================================
-// Hide Context Menu
-// ============================================================================
-function hideContextMenu() {
-    if (contextMenu) {
-        contextMenu.remove();
-        contextMenu = null;
-    }
-}
-
-// ============================================================================
-// Event Listeners for Context Menu
-// ============================================================================
-
-// Close context menu on click outside
-document.addEventListener('click', (e) => {
-    if (contextMenu && !contextMenu.contains(e.target)) {
-        hideContextMenu();
-    }
-});
-
-// Close context menu on Escape
-document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && contextMenu) {
-        hideContextMenu();
-    }
-});
-
-// Attach context menu to canvas
-document.addEventListener('DOMContentLoaded', () => {
-    const canvas = document.getElementById('panel-canvas');
-    if (canvas) {
-        canvas.addEventListener('contextmenu', (e) => {
-            // Check if right-click is on a panel
-            const panel = e.target.closest('.panel-canvas-item');
-            const panelName = panel ? panel.dataset.panelName : null;
-
-            // If clicking on a panel that's not selected, select it
-            if (panel && !panel.classList.contains('selected')) {
-                if (!e.ctrlKey && !e.metaKey) {
-                    deselectAllPanels();
-                }
-                panel.classList.add('selected');
-            }
-
-            showContextMenu(e, panelName);
-        });
-
-        // Click on empty canvas space deselects all panels
-        canvas.addEventListener('click', (e) => {
-            // Only deselect if clicking directly on canvas background, not on a panel
-            const panel = e.target.closest('.panel-canvas-item');
-            if (!panel && !e.ctrlKey && !e.metaKey) {
-                deselectAllPanels();
-            }
-        });
-    }
-});