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

figrecipe/_editor/_templates/_scripts/_panel_drag.py

@@ -18,6 +18,11 @@ let draggedPanelIndex = null;
 let dragStartPos = null;
 let dragStartPanelPos = null;
 let panelDragOverlay = null;
+let panelBboxDragOverlay = null;  // Outer panel bbox overlay
+let panelHoverOverlay = null;
+let hoveredPanelIndex = null;
+let dragStartPanelBbox = null;  // Initial panel bbox in pixels
+let panelBboxOffset = null;  // Offset from axis to panel bbox (in mm)
 
 // Initialize panel drag functionality
 function initPanelDrag() {
@@ -34,48 +39,68 @@ function initPanelDrag() {
     document.addEventListener('mouseup', handlePanelDragEnd);
     console.log('[PanelDrag] Event listeners attached');
 
-    // Create drag overlay element
+    // Create drag overlay for axis bbox (inner, subtle orange)
     panelDragOverlay = document.createElement('div');
     panelDragOverlay.id = 'panel-drag-overlay';
     panelDragOverlay.style.cssText = `
+        position: absolute;
+        border: 2px dashed #f59e0b;
+        background: rgba(245, 158, 11, 0.08);
+        pointer-events: none;
+        display: none;
+        z-index: 999;
+    `;
+    zoomContainer.appendChild(panelDragOverlay);
+
+    // Create outer panel bbox overlay (prominent blue)
+    panelBboxDragOverlay = document.createElement('div');
+    panelBboxDragOverlay.id = 'panel-bbox-drag-overlay';
+    panelBboxDragOverlay.style.cssText = `
         position: absolute;
         border: 2px dashed #2563eb;
-        background: rgba(37, 99, 235, 0.1);
+        background: rgba(37, 99, 235, 0.05);
         pointer-events: none;
         display: none;
         z-index: 1000;
     `;
-    zoomContainer.appendChild(panelDragOverlay);
-    console.log('[PanelDrag] Overlay created:', panelDragOverlay ? 'success' : 'failed');
+    zoomContainer.appendChild(panelBboxDragOverlay);
+
+    // Create hover overlay element for visual feedback
+    panelHoverOverlay = document.createElement('div');
+    panelHoverOverlay.id = 'panel-hover-overlay';
+    panelHoverOverlay.style.cssText = `
+        position: absolute;
+        border: 2px solid rgba(37, 99, 235, 0.5);
+        background: rgba(37, 99, 235, 0.05);
+        pointer-events: none;
+        display: none;
+        z-index: 999;
+        transition: opacity 0.15s ease-in-out;
+    `;
+    zoomContainer.appendChild(panelHoverOverlay);
+
+    // Add hover detection on zoom container
+    zoomContainer.addEventListener('mousemove', handlePanelHover);
+    zoomContainer.addEventListener('mouseleave', hidePanelHover);
+
+    console.log('[PanelDrag] Overlays created');
 }
 
 // Handle mouse down - check if on a panel/axes (only drag from empty panel area)
 function handlePanelDragStart(event) {
-    console.log('[PanelDrag] handlePanelDragStart called, button:', event.button);
-    // Skip if using modifier keys for other actions
-    if (event.ctrlKey || event.metaKey || event.altKey) {
-        console.log('[PanelDrag] Skipped - modifier key pressed');
-        return;
-    }
+    if (event.ctrlKey || event.metaKey || event.altKey) return;  // Skip modifier keys
 
-    // Only start drag if clicking on axes element or empty panel area
-    // Skip if clicking on specific elements (they should be selected instead)
+    // Only allow drag from axes/imshow/contour/quadmesh/quiver (fills panel area)
     const target = event.target;
     const targetKey = target.getAttribute ? target.getAttribute('data-key') : null;
     if (targetKey && typeof currentBboxes !== 'undefined' && currentBboxes[targetKey]) {
         const elemType = currentBboxes[targetKey].type;
-        // Only allow drag from axes bbox or if no specific element type
-        if (elemType && elemType !== 'axes') {
-            console.log('[PanelDrag] Skipped - clicked on element:', elemType);
-            return;
-        }
+        const dragAllowedTypes = ['axes', 'image', 'contour', 'quadmesh', 'quiver'];
+        if (elemType && !dragAllowedTypes.includes(elemType)) return;
     }
 
     const img = document.getElementById('preview-image');
-    if (!img || !figSize.width_mm || !figSize.height_mm) {
-        console.log('[PanelDrag] Skipped - img or figSize not ready');
-        return;
-    }
+    if (!img || !figSize.width_mm || !figSize.height_mm) return;
 
     const rect = img.getBoundingClientRect();
     const x = event.clientX - rect.left;
@@ -93,15 +118,41 @@ function handlePanelDragStart(event) {
         event.preventDefault();
         event.stopPropagation();
 
+        // Capture state before drag for undo
+        if (typeof pushToHistory === 'function') {
+            pushToHistory();
+        }
+
         isDraggingPanel = true;
         draggedPanelIndex = panelIndex;
         dragStartPos = { x: event.clientX, y: event.clientY };
 
+        // Hide hover overlay when starting drag
+        hidePanelHover();
+
         // Get current panel position (in mm)
         const axKey = Object.keys(panelPositions).sort()[panelIndex];
         const pos = panelPositions[axKey];
         dragStartPanelPos = { ...pos };
 
+        // Get panel bbox (outer bounds including labels) and calculate offset from axis
+        const panelBboxes = currentBboxes?._meta?.panel_bboxes;
+        if (panelBboxes && panelBboxes[panelIndex] && img.naturalWidth) {
+            dragStartPanelBbox = { ...panelBboxes[panelIndex] };
+            // Convert panel bbox to mm and calculate offset from axis position
+            const pxToMmX = figSize.width_mm / img.naturalWidth;
+            const pxToMmY = figSize.height_mm / img.naturalHeight;
+            panelBboxOffset = {
+                left: dragStartPanelBbox.x * pxToMmX - pos.left,
+                top: dragStartPanelBbox.y * pxToMmY - pos.top,
+                width: dragStartPanelBbox.width * pxToMmX,
+                height: dragStartPanelBbox.height * pxToMmY
+            };
+        } else {
+            dragStartPanelBbox = null;
+            panelBboxOffset = null;
+        }
+
         // Create overlay if it doesn't exist
         if (!panelDragOverlay) {
             console.log('[PanelDrag] Creating overlay on-demand');
@@ -122,15 +173,27 @@ function handlePanelDragStart(event) {
             }
         }
 
-        // Show drag overlay
+        // Show drag overlay (axis bbox)
         if (panelDragOverlay) {
             updateDragOverlayMm(pos, rect);
             panelDragOverlay.style.display = 'block';
-            console.log('[PanelDrag] Overlay shown');
+            console.log('[PanelDrag] Axis overlay shown');
         } else {
             console.warn('[PanelDrag] Overlay still null after creation attempt');
         }
 
+        // Show panel bbox overlay (outer bounds) - follows snapped axis position
+        if (panelBboxDragOverlay && panelBboxOffset) {
+            updatePanelBboxDragOverlayMm(pos, rect);
+            panelBboxDragOverlay.style.display = 'block';
+            console.log('[PanelDrag] Panel bbox overlay shown');
+        }
+
+        // Create and show panel snapshot for visual feedback
+        if (typeof startSnapshotDrag === 'function') {
+            startSnapshotDrag(panelIndex, rect, pos);
+        }
+
         // Change cursor
         document.body.style.cursor = 'move';
 
@@ -167,6 +230,84 @@ function findPanelAtPositionMm(mmX, mmY) {
     return null;
 }
 
+// Handle mouse hover over panels - show visual feedback
+function handlePanelHover(event) {
+    // Skip if dragging
+    if (isDraggingPanel) {
+        hidePanelHover();
+        return;
+    }
+
+    const img = document.getElementById('preview-image');
+    if (!img || !figSize.width_mm || !figSize.height_mm) return;
+
+    const rect = img.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // Check if mouse is within image bounds
+    if (x < 0 || x > rect.width || y < 0 || y > rect.height) {
+        hidePanelHover();
+        return;
+    }
+
+    // Convert to mm coordinates
+    const mmX = (x / rect.width) * figSize.width_mm;
+    const mmY = (y / rect.height) * figSize.height_mm;
+
+    // Find panel at position
+    const panelIndex = findPanelAtPositionMm(mmX, mmY);
+
+    if (panelIndex !== null && panelIndex !== hoveredPanelIndex) {
+        showPanelHover(panelIndex, rect);
+    } else if (panelIndex === null) {
+        hidePanelHover();
+    }
+}
+
+// Show hover feedback for a panel
+function showPanelHover(panelIndex, imgRect) {
+    if (!panelHoverOverlay) return;
+
+    hoveredPanelIndex = panelIndex;
+
+    // Get panel position
+    const axKey = Object.keys(panelPositions).sort()[panelIndex];
+    const pos = panelPositions[axKey];
+    if (!pos) return;
+
+    // Convert mm to screen pixels
+    const scaleX = imgRect.width / figSize.width_mm;
+    const scaleY = imgRect.height / figSize.height_mm;
+
+    const left = pos.left * scaleX;
+    const top = pos.top * scaleY;
+    const width = pos.width * scaleX;
+    const height = pos.height * scaleY;
+
+    panelHoverOverlay.style.left = `${left}px`;
+    panelHoverOverlay.style.top = `${top}px`;
+    panelHoverOverlay.style.width = `${width}px`;
+    panelHoverOverlay.style.height = `${height}px`;
+    panelHoverOverlay.style.display = 'block';
+
+    // Change cursor to indicate draggable
+    document.body.style.cursor = 'move';
+}
+
+// Hide hover feedback
+function hidePanelHover() {
+    if (panelHoverOverlay) {
+        panelHoverOverlay.style.display = 'none';
+    }
+    hoveredPanelIndex = null;
+
+    // Reset cursor if not dragging
+    if (!isDraggingPanel) {
+        document.body.style.cursor = '';
+    }
+}
+
 // Handle mouse move during drag
 function handlePanelDragMove(event) {
     if (!isDraggingPanel) return;
@@ -182,9 +323,17 @@ function handlePanelDragMove(event) {
     const deltaMmX = (event.clientX - dragStartPos.x) / rect.width * figSize.width_mm;
     const deltaMmY = (event.clientY - dragStartPos.y) / rect.height * figSize.height_mm;
 
-    // Calculate new position (clamped to figure bounds)
-    const newLeft = Math.max(0, Math.min(figSize.width_mm - dragStartPanelPos.width, dragStartPanelPos.left + deltaMmX));
-    const newTop = Math.max(0, Math.min(figSize.height_mm - dragStartPanelPos.height, dragStartPanelPos.top + deltaMmY));
+    // Calculate raw new position (clamped to figure bounds)
+    let newLeft = Math.max(0, Math.min(figSize.width_mm - dragStartPanelPos.width, dragStartPanelPos.left + deltaMmX));
+    let newTop = Math.max(0, Math.min(figSize.height_mm - dragStartPanelPos.height, dragStartPanelPos.top + deltaMmY));
+
+    // Apply snapping (Alt key disables snapping for fine control)
+    let snapResult = { pos: { left: newLeft, top: newTop }, guides: [] };
+    if (typeof applySnapping === 'function' && !event.altKey) {
+        snapResult = applySnapping(newLeft, newTop, dragStartPanelPos.width, dragStartPanelPos.height, draggedPanelIndex);
+        newLeft = snapResult.pos.left;
+        newTop = snapResult.pos.top;
+    }
 
     const newPos = {
         left: newLeft,
@@ -193,27 +342,40 @@ function handlePanelDragMove(event) {
         height: dragStartPanelPos.height
     };
 
-    // Update visual overlay
+    // Update visual overlays - both use snapped position in mm
     updateDragOverlayMm(newPos, rect);
+    updatePanelBboxDragOverlayMm(newPos, rect);
+
+    // Update snapshot position
+    if (typeof updateSnapshotPosition === 'function') {
+        updateSnapshotPosition(newPos, rect);
+    }
+
+    // Show/hide alignment guides
+    if (typeof showSnapGuides === 'function') {
+        showSnapGuides(snapResult.guides, rect);
+    }
 }
 
-// Update the drag overlay position (pos in mm, upper-left origin)
+// Update axis drag overlay (mm to screen pixels)
 function updateDragOverlayMm(pos, imgRect) {
     if (!panelDragOverlay || !figSize.width_mm) return;
+    const scaleX = imgRect.width / figSize.width_mm, scaleY = imgRect.height / figSize.height_mm;
+    panelDragOverlay.style.left = `${pos.left * scaleX}px`;
+    panelDragOverlay.style.top = `${pos.top * scaleY}px`;
+    panelDragOverlay.style.width = `${pos.width * scaleX}px`;
+    panelDragOverlay.style.height = `${pos.height * scaleY}px`;
+}
 
-    // Convert mm to screen pixels
-    const scaleX = imgRect.width / figSize.width_mm;
-    const scaleY = imgRect.height / figSize.height_mm;
-
-    const left = pos.left * scaleX;
-    const top = pos.top * scaleY;
-    const width = pos.width * scaleX;
-    const height = pos.height * scaleY;
-
-    panelDragOverlay.style.left = `${left}px`;
-    panelDragOverlay.style.top = `${top}px`;
-    panelDragOverlay.style.width = `${width}px`;
-    panelDragOverlay.style.height = `${height}px`;
+// Update panel bbox overlay based on snapped axis position (in mm)
+function updatePanelBboxDragOverlayMm(axisPos, imgRect) {
+    if (!panelBboxDragOverlay || !panelBboxOffset || !figSize.width_mm) return;
+    const scaleX = imgRect.width / figSize.width_mm, scaleY = imgRect.height / figSize.height_mm;
+    // Panel bbox position = axis position + offset (both in mm, converted to screen pixels)
+    panelBboxDragOverlay.style.left = `${(axisPos.left + panelBboxOffset.left) * scaleX}px`;
+    panelBboxDragOverlay.style.top = `${(axisPos.top + panelBboxOffset.top) * scaleY}px`;
+    panelBboxDragOverlay.style.width = `${panelBboxOffset.width * scaleX}px`;
+    panelBboxDragOverlay.style.height = `${panelBboxOffset.height * scaleY}px`;
 }
 
 // Handle mouse up - complete the drag
@@ -221,12 +383,14 @@ async function handlePanelDragEnd(event) {
     console.log('[PanelDrag] handlePanelDragEnd called, isDraggingPanel:', isDraggingPanel);
     if (!isDraggingPanel) return;
 
-    // Hide overlay (with null check)
-    if (panelDragOverlay) {
-        panelDragOverlay.style.display = 'none';
-        console.log('[PanelDrag] Overlay hidden');
-    }
+    // Hide overlays, snapshot, and snap guides
+    if (panelDragOverlay) panelDragOverlay.style.display = 'none';
+    if (panelBboxDragOverlay) panelBboxDragOverlay.style.display = 'none';
+    if (typeof endSnapshotDrag === 'function') endSnapshotDrag();
+    if (typeof hideSnapGuides === 'function') hideSnapGuides();
     document.body.style.cursor = '';
+    dragStartPanelBbox = null;
+    panelBboxOffset = null;
 
     const img = document.getElementById('preview-image');
     if (!img) {
@@ -240,8 +404,15 @@ async function handlePanelDragEnd(event) {
     const deltaMmX = (event.clientX - dragStartPos.x) / rect.width * figSize.width_mm;
     const deltaMmY = (event.clientY - dragStartPos.y) / rect.height * figSize.height_mm;
 
-    const newLeft = Math.max(0, Math.min(figSize.width_mm - dragStartPanelPos.width, dragStartPanelPos.left + deltaMmX));
-    const newTop = Math.max(0, Math.min(figSize.height_mm - dragStartPanelPos.height, dragStartPanelPos.top + deltaMmY));
+    let newLeft = Math.max(0, Math.min(figSize.width_mm - dragStartPanelPos.width, dragStartPanelPos.left + deltaMmX));
+    let newTop = Math.max(0, Math.min(figSize.height_mm - dragStartPanelPos.height, dragStartPanelPos.top + deltaMmY));
+
+    // Apply snapping to final position (unless Alt was held)
+    if (typeof applySnapping === 'function' && !event.altKey) {
+        const snapResult = applySnapping(newLeft, newTop, dragStartPanelPos.width, dragStartPanelPos.height, draggedPanelIndex);
+        newLeft = snapResult.pos.left;
+        newTop = snapResult.pos.top;
+    }
 
     // Only update if position actually changed (threshold in mm)
     const threshold = 1.0;  // 1mm threshold

figrecipe/_editor/_templates/_scripts/_panel_drag_snapshot.py

@@ -0,0 +1,33 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Panel drag snapshot functionality with server-side isolated rendering.
+
+This module provides clean panel snapshots rendered in isolation (no overlap)
+by fetching from the server, with async caching for smooth UX.
+"""
+
+SCRIPTS_PANEL_DRAG_SNAPSHOT = """
+// ===== PANEL DRAG SNAPSHOT (DISABLED - corrupts figure state) =====
+// Server-side snapshot rendering was disabled because matplotlib figures
+// are not thread-safe. Modifying visibility to render isolated panels
+// corrupts the shared figure state in Flask's threaded mode.
+
+// No-op stubs to prevent errors from panel_drag.py calls
+function startSnapshotDrag(panelIndex, imgRect, initialPos) {
+    // Disabled - no snapshot during drag
+}
+
+function updateSnapshotPosition(pos, imgRect) {
+    // Disabled - no snapshot during drag
+}
+
+function endSnapshotDrag() {
+    // Disabled - no snapshot during drag
+}
+
+// No initialization needed
+"""
+
+__all__ = ["SCRIPTS_PANEL_DRAG_SNAPSHOT"]
+
+# EOF