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

scitex/fig/editor/flask_editor/static/js/canvas/dragging.js

@@ -0,0 +1,258 @@
+/**
+ * Panel Dragging
+ * Handles drag-and-drop for panel repositioning in canvas view
+ */
+
+// ============================================================================
+// Panel Drag Initialization
+// ============================================================================
+function initPanelDrag(item, panelName) {
+    const handle = item.querySelector('.panel-drag-handle');
+    const label = item.querySelector('.panel-canvas-label');
+
+    // Drag from handle (always works)
+    if (handle) {
+        handle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            startPanelDrag(e, item, panelName);
+        });
+    }
+
+    // Also allow dragging from panel label
+    if (label) {
+        label.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            startPanelDrag(e, item, panelName);
+        });
+    }
+
+    // Allow dragging from anywhere on the panel (except interactive elements)
+    // This enables intuitive drag behavior while preserving element selection
+    item.addEventListener('mousedown', (e) => {
+        // Skip if clicking on interactive elements (legends, text paths, etc.)
+        if (isInteractiveElement(e.target)) return;
+
+        // Skip if clicking on drag handle or label (already handled above)
+        if (e.target === handle || e.target === label) return;
+
+        // Start drag from anywhere else on the panel
+        startPanelDrag(e, item, panelName);
+    });
+
+    // Set cursor to indicate draggability
+    item.style.cursor = 'move';
+}
+
+// ============================================================================
+// Panel Drag Start
+// ============================================================================
+function startPanelDrag(e, item, name) {
+    e.preventDefault();
+
+    // Handle selection based on Ctrl key
+    const isCtrlPressed = e.ctrlKey || e.metaKey;
+    const wasAlreadySelected = item.classList.contains('selected');
+
+    if (isCtrlPressed) {
+        // Ctrl+Click: toggle this panel's selection (add/remove from multi-select)
+        item.classList.toggle('selected');
+    } else if (!wasAlreadySelected) {
+        // Regular click on unselected panel: select only this one
+        deselectAllPanels();
+        item.classList.add('selected');
+    }
+    // If clicking on already-selected panel without Ctrl:
+    // Don't change selection yet - could be start of multi-panel drag
+    // Selection will be finalized in stopPanelDrag based on hasMoved
+
+    // Collect all selected panels for group dragging
+    const selectedItems = Array.from(document.querySelectorAll('.panel-canvas-item.selected'));
+    if (selectedItems.length === 0) {
+        // If somehow nothing selected, select the clicked item
+        item.classList.add('selected');
+        selectedItems.push(item);
+    }
+
+    // Store drag state for all selected panels
+    draggedPanel = {
+        primaryItem: item,
+        primaryName: name,
+        selectedItems: selectedItems,
+        startX: e.clientX,
+        startY: e.clientY,
+        hasMoved: false,  // Track if actual drag occurred
+        wasAlreadySelected,  // Track initial selection state for click handling
+        isCtrlPressed,  // Track if Ctrl was pressed
+        startPositions: selectedItems.map(el => ({
+            item: el,
+            name: el.dataset.panelName,
+            x: parseFloat(el.style.left) || 0,
+            y: parseFloat(el.style.top) || 0
+        }))
+    };
+
+    document.addEventListener('mousemove', onPanelDrag);
+    document.addEventListener('mouseup', stopPanelDrag);
+
+    // Show position indicator for primary panel
+    updatePositionIndicator(name,
+        panelPositions[name]?.x || 0,
+        panelPositions[name]?.y || 0
+    );
+}
+
+// ============================================================================
+// Panel Drag Move
+// ============================================================================
+function onPanelDrag(e) {
+    if (!draggedPanel) return;
+
+    // Calculate delta from drag start
+    const dx = e.clientX - draggedPanel.startX;
+    const dy = e.clientY - draggedPanel.startY;
+
+    // Mark as moved if we've actually dragged (threshold: 3px)
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+        draggedPanel.hasMoved = true;
+    }
+
+    // Snap to grid (optional: 5mm grid)
+    const gridSize = 5 * canvasScale;  // 5mm grid
+    const snappedDx = Math.round(dx / gridSize) * gridSize;
+    const snappedDy = Math.round(dy / gridSize) * gridSize;
+
+    // Move all selected panels by the same delta
+    draggedPanel.startPositions.forEach(({item, name, x, y}) => {
+        const newX = x + snappedDx;
+        const newY = y + snappedDy;
+
+        // Constrain to canvas bounds (allow slight negative for edge alignment)
+        const constrainedX = Math.max(-10, newX);
+        const constrainedY = Math.max(-10, newY);
+
+        // Update pixel positions
+        item.style.left = constrainedX + 'px';
+        item.style.top = constrainedY + 'px';
+
+        panelPositions[name] = {
+            ...panelPositions[name],
+            x: constrainedX,
+            y: constrainedY
+        };
+
+        // Update mm positions
+        panelLayoutMm[name] = {
+            ...panelLayoutMm[name],
+            x_mm: constrainedX / canvasScale,
+            y_mm: constrainedY / canvasScale
+        };
+    });
+
+    // Show position indicator for primary panel
+    const primaryPos = panelPositions[draggedPanel.primaryName];
+    if (primaryPos) {
+        updatePositionIndicator(draggedPanel.primaryName, primaryPos.x, primaryPos.y);
+    }
+
+    // Mark layout as modified
+    layoutModified = true;
+}
+
+// ============================================================================
+// Panel Drag Stop
+// ============================================================================
+function stopPanelDrag() {
+    if (draggedPanel) {
+        // Handle click (no movement) on already-selected panel without Ctrl:
+        // Finalize selection to only the clicked panel
+        if (!draggedPanel.hasMoved && draggedPanel.wasAlreadySelected && !draggedPanel.isCtrlPressed) {
+            // This was a simple click on an already-selected panel
+            // Deselect all others, keep only the clicked panel selected
+            deselectAllPanels();
+            draggedPanel.primaryItem.classList.add('selected');
+        }
+
+        // Reset cursor for all selected panels
+        draggedPanel.selectedItems.forEach(item => {
+            item.style.cursor = 'move';
+        });
+
+        draggedPanel = null;
+        document.removeEventListener('mousemove', onPanelDrag);
+        document.removeEventListener('mouseup', stopPanelDrag);
+
+        // Update canvas size if panel moved outside
+        updateCanvasSize();
+
+        // Hide position indicator after a delay
+        setTimeout(() => {
+            const indicator = document.getElementById('position-indicator');
+            if (indicator) {
+                indicator.style.display = 'none';
+            }
+        }, 1000);
+
+        // Auto-save layout
+        if (layoutModified) {
+            saveLayout();
+        }
+    }
+}
+
+// ============================================================================
+// Position Indicator
+// ============================================================================
+function updatePositionIndicator(panelName, x, y) {
+    let indicator = document.getElementById('position-indicator');
+    if (!indicator) {
+        indicator = document.createElement('div');
+        indicator.id = 'position-indicator';
+        indicator.style.cssText = `
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 12px;
+            z-index: 10000;
+            pointer-events: none;
+        `;
+        document.body.appendChild(indicator);
+    }
+
+    const xMm = (x / canvasScale).toFixed(1);
+    const yMm = (y / canvasScale).toFixed(1);
+    indicator.textContent = `${panelName}: x=${xMm}mm, y=${yMm}mm`;
+    indicator.style.display = 'block';
+}
+
+// ============================================================================
+// Manual Layout Save
+// ============================================================================
+function saveLayoutManually() {
+    if (layoutModified) {
+        saveLayout();
+    } else {
+        setStatus('No changes to save');
+    }
+}
+
+// ============================================================================
+// Legacy Drag Functions (for backward compatibility)
+// ============================================================================
+function startDrag(e, item, name) {
+    startPanelDrag(e, item, name);
+}
+
+function onDrag(e) {
+    onPanelDrag(e);
+}
+
+function stopDrag() {
+    stopPanelDrag();
+}

scitex/fig/editor/flask_editor/static/js/canvas/resize.js

@@ -0,0 +1,48 @@
+/**
+ * Panel Resizing
+ * Handles panel resize operations in canvas view
+ */
+
+// ============================================================================
+// Resize Start
+// ============================================================================
+function startResize(e, item, name) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    resizingPanel = {item, name, startX: e.clientX, startY: e.clientY};
+    document.addEventListener('mousemove', onResize);
+    document.addEventListener('mouseup', stopResize);
+}
+
+// ============================================================================
+// Resize Move
+// ============================================================================
+function onResize(e) {
+    if (!resizingPanel) return;
+
+    const dx = e.clientX - resizingPanel.startX;
+    const dy = e.clientY - resizingPanel.startY;
+
+    const pos = panelPositions[resizingPanel.name];
+    pos.width = Math.max(100, pos.width + dx);
+    pos.height = Math.max(100, pos.height + dy);
+
+    resizingPanel.item.style.width = pos.width + 'px';
+    resizingPanel.item.style.height = pos.height + 'px';
+
+    resizingPanel.startX = e.clientX;
+    resizingPanel.startY = e.clientY;
+}
+
+// ============================================================================
+// Resize Stop
+// ============================================================================
+function stopResize() {
+    if (resizingPanel) {
+        resizingPanel = null;
+        document.removeEventListener('mousemove', onResize);
+        document.removeEventListener('mouseup', stopResize);
+        layoutModified = true;
+    }
+}

scitex/fig/editor/flask_editor/static/js/canvas/selection.js

@@ -0,0 +1,71 @@
+/**
+ * Panel Selection
+ * Handles panel selection and multi-selection in canvas view
+ */
+
+// ============================================================================
+// Select All Panels
+// ============================================================================
+function selectAllPanels() {
+    document.querySelectorAll('.panel-canvas-item').forEach(item => {
+        item.classList.add('selected');
+    });
+}
+
+// ============================================================================
+// Deselect All Panels
+// ============================================================================
+function deselectAllPanels() {
+    document.querySelectorAll('.panel-canvas-item').forEach(item => {
+        item.classList.remove('selected');
+    });
+
+    // Also clear element selection in single-panel view
+    selectedElement = null;
+    hoveredElement = null;
+    updateOverlay();
+}
+
+// ============================================================================
+// Get Selected Panels
+// ============================================================================
+function getSelectedPanels() {
+    const selectedItems = document.querySelectorAll('.panel-canvas-item.selected');
+    return Array.from(selectedItems).map(item => ({
+        item: item,
+        name: item.dataset.panelName,
+        pos: panelPositions[item.dataset.panelName]
+    }));
+}
+
+// ============================================================================
+// Toggle Panel Selection
+// ============================================================================
+function togglePanelSelection(panelName) {
+    const item = document.querySelector(`.panel-canvas-item[data-panel-name="${panelName}"]`);
+    if (item) {
+        item.classList.toggle('selected');
+    }
+}
+
+// ============================================================================
+// Select Single Panel
+// ============================================================================
+function selectPanel(panelName, clearOthers = true) {
+    if (clearOthers) {
+        deselectAllPanels();
+    }
+
+    const item = document.querySelector(`.panel-canvas-item[data-panel-name="${panelName}"]`);
+    if (item) {
+        item.classList.add('selected');
+    }
+}
+
+// ============================================================================
+// Check if Panel is Selected
+// ============================================================================
+function isPanelSelected(panelName) {
+    const item = document.querySelector(`.panel-canvas-item[data-panel-name="${panelName}"]`);
+    return item ? item.classList.contains('selected') : false;
+}

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

@@ -0,0 +1,288 @@
+/**
+ * API Communication
+ * Handles all server requests for preview, update, save, etc.
+ */
+
+// ============================================================================
+// Preview and Update API
+// ============================================================================
+function updatePreview() {
+    const data = collectOverrides();
+
+    // Skip auto-update if showing original preview (user hasn't explicitly requested update)
+    if (isShowingOriginalPreview) {
+        return;
+    }
+
+    setStatus('Updating preview...');
+
+    // Preserve current selection to restore after update
+    const prevSelectedElement = selectedElement;
+
+    fetch('/update', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(data)
+    })
+    .then(r => r.json())
+    .then(result => {
+        // Remove SVG wrapper if exists, show img element for re-rendered preview
+        const svgWrapper = document.getElementById('preview-svg-wrapper');
+        if (svgWrapper) {
+            svgWrapper.style.display = 'none';
+        }
+        document.getElementById('preview').style.display = 'block';
+
+        // Mark that we're no longer showing original preview
+        isShowingOriginalPreview = false;
+
+        if (result.image) {
+            document.getElementById('preview').src = 'data:image/png;base64,' + result.image;
+
+            // Store schema v0.3 metadata if available
+            if (result.schema_meta) {
+                schemaMeta = result.schema_meta;
+            }
+        }
+        elementBboxes = result.bboxes || {};
+        imgSize = result.img_size || {width: 0, height: 0};
+        setStatus('Preview updated');
+
+        // Restore selection if the element still exists in the new bboxes
+        if (prevSelectedElement && elementBboxes[prevSelectedElement]) {
+            selectedElement = prevSelectedElement;
+            updateOverlay();
+        } else {
+            selectedElement = null;
+            updateOverlay();
+        }
+    })
+    .catch(err => {
+        setStatus('Error updating preview: ' + err, true);
+    });
+}
+
+// ============================================================================
+// Save API
+// ============================================================================
+function saveToBundle() {
+    const data = collectOverrides();
+    setStatus('Saving...');
+    return fetch('/save', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(data)
+    })
+    .then(r => r.json())
+    .then(result => {
+        setStatus(result.status || 'Saved successfully');
+    })
+    .catch(err => {
+        setStatus('Error saving: ' + err, true);
+        throw err;
+    });
+}
+
+// ============================================================================
+// Export API
+// ============================================================================
+function exportToFormat(format) {
+    const data = collectOverrides();
+    setStatus('Exporting to ' + format + '...');
+
+    // First export to bundle
+    fetch('/export', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({...data, format: format})
+    })
+    .then(r => r.json())
+    .then(result => {
+        setStatus(result.status || 'Exported successfully');
+        // Then trigger download
+        downloadFile(result.path, format);
+    })
+    .catch(err => {
+        setStatus('Error exporting: ' + err, true);
+    });
+}
+
+function downloadFile(path, format) {
+    const filename = path.split('/').pop();
+    fetch('/download/' + filename)
+        .then(r => r.blob())
+        .then(blob => {
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+}
+
+// ============================================================================
+// Panel API (Multi-panel figures)
+// ============================================================================
+
+// Helper to normalize panel names for comparison (strip .pltz extensions)
+function normalizePanelName(name) {
+    if (typeof name !== 'string') return '';
+    return name.replace('.pltz.d', '').replace('.pltz', '');
+}
+
+function loadPanelForEditing(panelName) {
+    setStatus('Loading panel ' + panelName + '...');
+
+    // Find panel index from panel name
+    // Handle both formats: array of strings ["A", "B"] or array of objects [{name: "A"}, ...]
+    // Also handle extension mismatches (e.g., "A" vs "A.pltz")
+    let panelIndex = -1;
+    const normalizedSearch = normalizePanelName(panelName);
+
+    if (panelData && panelData.panels) {
+        panelIndex = panelData.panels.findIndex(p => {
+            // Check if it's a string or an object with name property
+            if (typeof p === 'string') {
+                return normalizePanelName(p) === normalizedSearch;
+            } else if (p && p.name) {
+                return normalizePanelName(p.name) === normalizedSearch;
+            }
+            return false;
+        });
+    }
+
+    if (panelIndex === -1) {
+        setStatus('Panel not found: ' + panelName, true);
+        return Promise.reject(new Error('Panel not found: ' + panelName));
+    }
+
+    return fetch('/switch_panel/' + panelIndex)
+    .then(r => r.json())
+    .then(result => {
+        if (result.error) {
+            throw new Error(result.error);
+        }
+
+        // Update panel state
+        currentPanelIndex = panelIndex;
+
+        // Update preview image
+        if (result.image) {
+            document.getElementById('preview').src = 'data:image/png;base64,' + result.image;
+        }
+
+        // Update bboxes and overlays
+        elementBboxes = result.bboxes || {};
+        imgSize = result.img_size || {width: 0, height: 0};
+
+        // Sync bboxes cache
+        panelBboxesCache[panelName] = {bboxes: elementBboxes, imgSize: imgSize};
+
+        // Update overrides
+        if (result.overrides) {
+            overrides = result.overrides;
+        }
+
+        // Select the element that was clicked
+        if (result.selected_element) {
+            selectedElement = result.selected_element;
+        }
+
+        // Scroll to section and show properties
+        scrollToSection(selectedElement);
+
+        // Keep unified canvas view only - don't show single-panel preview
+        showingPanelGrid = true;
+        // Update panel path display in right panel header
+        const panelPath = document.getElementById('current-panel-path');
+        if (panelPath) {
+            panelPath.textContent = panelName || 'Single Panel';
+        }
+
+        setStatus('Panel loaded');
+        return result;
+    })
+    .catch(err => {
+        setStatus('Error loading panel: ' + err, true);
+        throw err;
+    });
+}
+
+// ============================================================================
+// Layout Save API
+// ============================================================================
+function saveLayout() {
+    const data = {
+        layout: panelLayoutMm,
+        overrides: overrides
+    };
+
+    setStatus('Saving layout...');
+
+    return fetch('/save_layout', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(data)
+    })
+    .then(r => r.json())
+    .then(result => {
+        setStatus('Layout saved');
+        layoutModified = false;
+    })
+    .catch(err => {
+        setStatus('Error saving layout: ' + err, true);
+        throw err;
+    });
+}
+
+// ============================================================================
+// Element Position Update API
+// ============================================================================
+function updateElementPosition(panelName, elementName, position) {
+    const data = {
+        panel_name: panelName,
+        element_name: elementName,
+        position: position,
+        overrides: overrides
+    };
+
+    return fetch('/save_element_position', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(data)
+    })
+    .then(r => r.json())
+    .then(result => {
+        setStatus('Element position updated');
+        // Reload panel to show updated position
+        return loadPanelForEditing(panelName);
+    })
+    .catch(err => {
+        setStatus('Error updating element position: ' + err, true);
+        throw err;
+    });
+}
+
+// ============================================================================
+// Auto-Update Scheduling
+// ============================================================================
+function scheduleUpdate() {
+    clearTimeout(updateTimer);
+    updateTimer = setTimeout(updatePreview, DEBOUNCE_DELAY);
+}
+
+function setAutoUpdateInterval() {
+    if (autoUpdateIntervalId) {
+        clearInterval(autoUpdateIntervalId);
+        autoUpdateIntervalId = null;
+    }
+
+    const intervalMs = parseInt(document.getElementById('auto_update_interval').value);
+    if (intervalMs > 0) {
+        autoUpdateIntervalId = setInterval(() => {
+            updatePreview();
+        }, intervalMs);
+    }
+}
+