scitex 2.7.3__py3-none-any.whl → 2.8.1__py3-none-any.whl

scitex/fig/editor/flask_editor/static/js/core/state.js

@@ -0,0 +1,143 @@
+/**
+ * Global State Variables
+ * Central state management for the Flask figure editor
+ *
+ * Note: `overrides` is set in the HTML page via inline script before loading modules.
+ * This allows Flask to inject the initial data using Jinja2 templating.
+ *
+ * IMPORTANT: Variables use `var` (not `let`) to ensure they're accessible
+ * as globals across all script files loaded via separate <script> tags.
+ */
+
+// ============================================================================
+// Override Data and Element State
+// ============================================================================
+// `overrides` is defined in HTML before this script loads
+// Fallback to empty object if not defined
+if (typeof overrides === 'undefined') {
+    var overrides = {};
+}
+var traces = overrides.traces || [];
+var elementBboxes = {};
+var imgSize = {width: 0, height: 0};
+var hoveredElement = null;
+var selectedElement = null;
+var debugMode = false;  // Debug mode to show all hit areas
+var isShowingOriginalPreview = false;  // True when showing existing SVG/PNG from bundle
+var originalBboxes = null;  // Store original bboxes from /preview
+var originalImgSize = null;  // Store original img size from /preview
+
+// Schema metadata storage
+var schemaMeta = null;
+
+// ============================================================================
+// Multi-Panel State
+// ============================================================================
+var panelData = null;  // Panel info from /preview
+var currentPanelIndex = 0;
+var showingPanelGrid = false;
+var panelBboxesCache = {};  // Cache bboxes per panel {panelName: {bboxes, imgSize}}
+var activePanelCard = null;  // Currently active panel card for hover/click
+var panelHoveredElement = null;  // Hovered element in panel grid
+var panelDebugMode = false;  // Show hit regions in panel grid
+
+// ============================================================================
+// Cycle Selection State
+// ============================================================================
+var elementsAtCursor = [];  // All elements at current cursor position
+var currentCycleIndex = 0;  // Current index in cycle
+
+// ============================================================================
+// Dimension Settings
+// ============================================================================
+var dimensionUnit = 'mm';
+var MM_TO_INCH = 1 / 25.4;
+var INCH_TO_MM = 25.4;
+
+// ============================================================================
+// Hitmap State
+// ============================================================================
+var hitmapCanvas = null;
+var hitmapCtx = null;
+var hitmapColorMap = {};  // Maps RGB string -> element info
+var hitmapLoaded = false;
+var hitmapImgSize = {width: 0, height: 0};
+
+// ============================================================================
+// Background Settings
+// ============================================================================
+var backgroundType = 'transparent';
+var initializingBackground = true;  // Flag to prevent updates during init
+
+// ============================================================================
+// Canvas Mode and Layout State
+// ============================================================================
+var canvasMode = 'grid';  // 'grid' or 'canvas'
+var panelPositions = {};  // Store panel positions {name: {x, y, width, height}} in pixels
+var panelLayoutMm = {};   // Store panel positions in mm for saving {name: {x_mm, y_mm, width_mm, height_mm}}
+var canvasScale = 3;      // Scale factor: pixels per mm (updated in loadPanelGrid)
+var draggedPanel = null;
+var dragOffset = {x: 0, y: 0};
+var layoutModified = false;  // Track if layout has been modified
+
+// ============================================================================
+// Element Drag State
+// ============================================================================
+var elementDragState = null;  // {element, panelName, startPos, elementType, axId}
+
+// Snap positions for legend alignment
+var SNAP_POSITIONS = {
+    'upper right': [1.0, 1.0],
+    'upper left': [0.0, 1.0],
+    'lower left': [0.0, 0.0],
+    'lower right': [1.0, 0.0],
+    'upper center': [0.5, 1.0],
+    'lower center': [0.5, 0.0],
+    'center left': [0.0, 0.5],
+    'center right': [1.0, 0.5],
+    'center': [0.5, 0.5]
+};
+
+// ============================================================================
+// Resize State
+// ============================================================================
+var resizingPanel = null;
+
+// ============================================================================
+// Update Scheduling
+// ============================================================================
+var updateTimer = null;
+var DEBOUNCE_DELAY = 500;
+
+// ============================================================================
+// Shortcut Mode State
+// ============================================================================
+var shortcutMode = null;  // For multi-key shortcuts like Alt+A → L
+
+// ============================================================================
+// Canvas Zoom and View State
+// ============================================================================
+var canvasZoom = 1.0;
+
+// ============================================================================
+// Grid Visibility
+// ============================================================================
+var gridVisible = true;
+
+// ============================================================================
+// Undo/Redo State
+// ============================================================================
+var undoStack = [];
+var redoStack = [];
+
+// ============================================================================
+// Context Menu State
+// ============================================================================
+var contextMenu = null;
+
+// ============================================================================
+// Auto-Update State
+// ============================================================================
+var autoUpdateIntervalId = null;
+
+console.log('state.js loaded - global state variables initialized');

scitex/fig/editor/flask_editor/static/js/core/utils.js

@@ -0,0 +1,245 @@
+/**
+ * Utility Functions
+ * Common helper functions used across the editor
+ */
+
+// ============================================================================
+// Theme Utilities
+// ============================================================================
+function isDarkMode() {
+    return document.body.classList.contains('dark-theme');
+}
+
+// ============================================================================
+// Image Dimension Calculations
+// ============================================================================
+function getObjectFitContainDimensions(img) {
+    const containerWidth = img.clientWidth;
+    const containerHeight = img.clientHeight;
+    const imgWidth = img.naturalWidth;
+    const imgHeight = img.naturalHeight;
+
+    // Handle edge cases
+    if (!containerWidth || !containerHeight || !imgWidth || !imgHeight) {
+        return {
+            displayWidth: containerWidth,
+            displayHeight: containerHeight,
+            offsetX: 0,
+            offsetY: 0
+        };
+    }
+
+    // Calculate scale factor for object-fit: contain
+    const containerRatio = containerWidth / containerHeight;
+    const imgRatio = imgWidth / imgHeight;
+
+    let displayWidth, displayHeight, offsetX, offsetY;
+
+    if (imgRatio > containerRatio) {
+        // Image is wider than container - fit to width, letterbox top/bottom
+        displayWidth = containerWidth;
+        displayHeight = containerWidth / imgRatio;
+        offsetX = 0;
+        offsetY = (containerHeight - displayHeight) / 2;
+    } else {
+        // Image is taller than container - fit to height, letterbox left/right
+        displayHeight = containerHeight;
+        displayWidth = containerHeight * imgRatio;
+        offsetX = (containerWidth - displayWidth) / 2;
+        offsetY = 0;
+    }
+
+    return {displayWidth, displayHeight, offsetX, offsetY};
+}
+
+// ============================================================================
+// Status Display
+// ============================================================================
+function setStatus(msg, isError = false) {
+    document.getElementById('status').textContent = msg;
+    document.getElementById('status').style.color = isError ? 'red' : '';
+
+    // Show/hide spinner for loading states
+    if (msg.toLowerCase().includes('updating') || msg.toLowerCase().includes('loading')) {
+        // Show global overlay (visible for both single and multi-panel views)
+        const globalOverlay = document.getElementById('loading-overlay');
+        if (globalOverlay) globalOverlay.style.display = 'flex';
+
+        // Also show local overlay if visible
+        const localOverlay = document.getElementById('overlay-loading');
+        if (localOverlay) localOverlay.style.display = 'flex';
+    } else {
+        // Hide both overlays
+        const globalOverlay = document.getElementById('loading-overlay');
+        if (globalOverlay) globalOverlay.style.display = 'none';
+        const localOverlay = document.getElementById('overlay-loading');
+        if (localOverlay) localOverlay.style.display = 'none';
+    }
+}
+
+// ============================================================================
+// Loading State Management
+// ============================================================================
+function showLoading(message = 'Loading...') {
+    const overlay = document.getElementById('loading-overlay');
+    if (overlay) {
+        overlay.style.display = 'flex';
+        const text = overlay.querySelector('.loading-text');
+        if (text) text.textContent = message;
+    }
+}
+
+function hideLoading() {
+    const overlay = document.getElementById('loading-overlay');
+    if (overlay) {
+        overlay.style.display = 'none';
+    }
+}
+
+// ============================================================================
+// Section Management
+// ============================================================================
+function toggleSection(header) {
+    const content = header.nextElementSibling;
+    content.style.display = content.style.display === 'none' ? 'block' : 'none';
+}
+
+function expandSection(sectionId) {
+    const section = document.getElementById(sectionId);
+    if (section) {
+        const header = section.querySelector('h3');
+        const content = section.querySelector('.section-content');
+        if (content && content.style.display === 'none') {
+            content.style.display = 'block';
+            if (header) {
+                header.classList.add('expanded');
+            }
+        }
+
+        // Scroll the section into view
+        section.scrollIntoView({behavior: 'smooth', block: 'start'});
+    }
+}
+
+// ============================================================================
+// Scroll to Section by Element Name
+// ============================================================================
+function scrollToSection(elementName) {
+    if (!elementName) return;
+
+    // Map element names to section IDs
+    let sectionId = null;
+    const lowerName = elementName.toLowerCase();
+
+    if (lowerName.includes('legend')) {
+        sectionId = 'section-legend';
+    } else if (lowerName.includes('title')) {
+        sectionId = 'section-labels';
+    } else if (lowerName.includes('xlabel') || lowerName.includes('ylabel') || lowerName.includes('label')) {
+        sectionId = 'section-labels';
+    } else if (lowerName.includes('xaxis') || lowerName.includes('yaxis') || lowerName.includes('axis') || lowerName.includes('tick') || lowerName.includes('spine')) {
+        sectionId = 'section-ticks';
+    } else if (lowerName.includes('trace') || lowerName.includes('line') || lowerName.includes('scatter') || lowerName.includes('bar')) {
+        sectionId = 'section-traces';
+    } else if (lowerName.includes('panel') || lowerName.includes('ax_')) {
+        sectionId = 'section-selected';
+    }
+
+    if (sectionId) {
+        expandSection(sectionId);
+    }
+}
+
+// ============================================================================
+// Color Synchronization
+// ============================================================================
+function setupColorSync(colorId, textId) {
+    const colorInput = document.getElementById(colorId);
+    const textInput = document.getElementById(textId);
+    if (colorInput && textInput) {
+        colorInput.addEventListener('input', function() {
+            textInput.value = this.value;
+        });
+        textInput.addEventListener('input', function() {
+            colorInput.value = this.value;
+        });
+    }
+}
+
+// ============================================================================
+// Dimension Unit Conversion
+// ============================================================================
+function setDimensionUnit(unit) {
+    if (dimensionUnit === unit) return;
+
+    const oldUnit = dimensionUnit;
+    dimensionUnit = unit;
+
+    // Get current values
+    const widthInput = document.getElementById('fig_width');
+    const heightInput = document.getElementById('fig_height');
+
+    // Convert values
+    if (unit === 'mm') {
+        // inch to mm
+        if (widthInput.value) {
+            widthInput.value = (parseFloat(widthInput.value) * INCH_TO_MM).toFixed(1);
+        }
+        if (heightInput.value) {
+            heightInput.value = (parseFloat(heightInput.value) * INCH_TO_MM).toFixed(1);
+        }
+    } else {
+        // mm to inch
+        if (widthInput.value) {
+            widthInput.value = (parseFloat(widthInput.value) * MM_TO_INCH).toFixed(2);
+        }
+        if (heightInput.value) {
+            heightInput.value = (parseFloat(heightInput.value) * MM_TO_INCH).toFixed(2);
+        }
+    }
+
+    // Update values and labels
+    document.getElementById('unit_width').textContent = unit;
+    document.getElementById('unit_height').textContent = unit;
+
+    // Update button states
+    document.getElementById('btn_mm').classList.toggle('active', unit === 'mm');
+    document.getElementById('btn_inch').classList.toggle('active', unit === 'inch');
+}
+
+// ============================================================================
+// Figure Size Conversion
+// ============================================================================
+function getFigSizeInches() {
+    const width = parseFloat(document.getElementById('fig_width').value);
+    const height = parseFloat(document.getElementById('fig_height').value);
+
+    if (dimensionUnit === 'mm') {
+        return {
+            width: width * MM_TO_INCH,
+            height: height * MM_TO_INCH
+        };
+    }
+    return {width, height};
+}
+
+// ============================================================================
+// Significance Class Helper
+// ============================================================================
+function getSigClass(stars) {
+    if (stars >= 3) return 'sig-high';
+    if (stars >= 2) return 'sig-med';
+    if (stars >= 1) return 'sig-low';
+    return '';
+}
+
+// ============================================================================
+// Debounce Helper
+// ============================================================================
+function debounce(func, delay) {
+    let timeoutId;
+    return function(...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func.apply(this, args), delay);
+    };
+}