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

figrecipe/_editor/_templates/_scripts/_panel_snap.py

@@ -0,0 +1,307 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Panel snapping JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Grid snapping (snap to mm grid)
+- Edge alignment (snap to other panel edges)
+- Center alignment (snap to other panel centers)
+- Visual alignment guides
+"""
+
+SCRIPTS_PANEL_SNAP = """
+// ===== PANEL SNAPPING =====
+
+// Snapping configuration
+const SNAP_CONFIG = {
+    enabled: true,
+    gridSize: 5,         // mm - snap to 5mm grid
+    snapThreshold: 3,    // mm - distance to trigger hard snap
+    magneticZone: 8,     // mm - distance where magnetic attraction starts
+    magneticStrength: 0.7, // 0-1, how strongly to pull toward target
+    showGuides: true     // Show visual alignment guides
+};
+
+// Alignment guide elements
+let snapGuides = [];
+
+// Initialize snapping UI
+function initPanelSnap() {
+    console.log('[PanelSnap] initPanelSnap called');
+    const zoomContainer = document.getElementById('zoom-container');
+    if (!zoomContainer) return;
+
+    // Create guide line elements (2 horizontal, 2 vertical for edges/centers)
+    for (let i = 0; i < 4; i++) {
+        const guide = document.createElement('div');
+        guide.className = 'snap-guide';
+        guide.style.cssText = `
+            position: absolute;
+            background: #f59e0b;
+            pointer-events: none;
+            display: none;
+            z-index: 999;
+        `;
+        zoomContainer.appendChild(guide);
+        snapGuides.push(guide);
+    }
+    console.log('[PanelSnap] Created', snapGuides.length, 'guide elements');
+}
+
+// Find snap targets from other panels (excluding the panel being dragged)
+function getSnapTargets(excludeIndex) {
+    const targets = { h: [], v: [] };  // horizontal and vertical snap lines
+    const axKeys = Object.keys(panelPositions).sort();
+
+    for (let i = 0; i < axKeys.length; i++) {
+        if (i === excludeIndex) continue;
+
+        const pos = panelPositions[axKeys[i]];
+        const left = pos.left;
+        const right = pos.left + pos.width;
+        const top = pos.top;
+        const bottom = pos.top + pos.height;
+        const centerX = pos.left + pos.width / 2;
+        const centerY = pos.top + pos.height / 2;
+
+        // Vertical lines (for left/right/centerX alignment)
+        targets.v.push({ pos: left, type: 'edge-left', panel: i });
+        targets.v.push({ pos: right, type: 'edge-right', panel: i });
+        targets.v.push({ pos: centerX, type: 'center', panel: i });
+
+        // Horizontal lines (for top/bottom/centerY alignment)
+        targets.h.push({ pos: top, type: 'edge-top', panel: i });
+        targets.h.push({ pos: bottom, type: 'edge-bottom', panel: i });
+        targets.h.push({ pos: centerY, type: 'center', panel: i });
+    }
+
+    // Add figure edges and center
+    targets.v.push({ pos: 0, type: 'figure-edge', panel: -1 });
+    targets.v.push({ pos: figSize.width_mm, type: 'figure-edge', panel: -1 });
+    targets.v.push({ pos: figSize.width_mm / 2, type: 'figure-center', panel: -1 });
+    targets.h.push({ pos: 0, type: 'figure-edge', panel: -1 });
+    targets.h.push({ pos: figSize.height_mm, type: 'figure-edge', panel: -1 });
+    targets.h.push({ pos: figSize.height_mm / 2, type: 'figure-center', panel: -1 });
+
+    return targets;
+}
+
+// Apply magnetic attraction - eases movement toward target
+function applyMagnetic(value, targetPos, dist) {
+    const zone = SNAP_CONFIG.magneticZone;
+    const strength = SNAP_CONFIG.magneticStrength;
+    const threshold = SNAP_CONFIG.snapThreshold;
+
+    if (dist <= threshold) {
+        // Hard snap - lock to target
+        return targetPos;
+    } else if (dist <= zone) {
+        // Magnetic zone - gradual attraction
+        // Strength increases as we get closer (quadratic easing)
+        const progress = 1 - (dist - threshold) / (zone - threshold);
+        const eased = progress * progress * strength;
+        return value + (targetPos - value) * eased;
+    }
+    return value;
+}
+
+// Apply snapping to a position
+// Returns { pos: {left, top}, snapped: {h: bool, v: bool}, guides: [...], magnetic: {h: bool, v: bool} }
+function applySnapping(left, top, width, height, excludeIndex) {
+    if (!SNAP_CONFIG.enabled) {
+        return { pos: { left, top }, snapped: { h: false, v: false }, guides: [], magnetic: { h: false, v: false } };
+    }
+
+    const result = {
+        pos: { left, top },
+        snapped: { h: false, v: false },
+        magnetic: { h: false, v: false },
+        guides: []
+    };
+
+    // Panel edges and center
+    const panelLeft = left;
+    const panelRight = left + width;
+    const panelCenterX = left + width / 2;
+    const panelTop = top;
+    const panelBottom = top + height;
+    const panelCenterY = top + height / 2;
+
+    const targets = getSnapTargets(excludeIndex);
+    const threshold = SNAP_CONFIG.snapThreshold;
+    const zone = SNAP_CONFIG.magneticZone;
+
+    // Find best vertical snap (for X position)
+    let bestVSnap = null;
+    let bestVDist = zone + 1;
+
+    for (const target of targets.v) {
+        // Check left edge
+        const distLeft = Math.abs(panelLeft - target.pos);
+        if (distLeft < bestVDist) {
+            bestVDist = distLeft;
+            bestVSnap = { offset: target.pos - panelLeft, target, edge: 'left' };
+        }
+        // Check right edge
+        const distRight = Math.abs(panelRight - target.pos);
+        if (distRight < bestVDist) {
+            bestVDist = distRight;
+            bestVSnap = { offset: target.pos - panelRight, target, edge: 'right' };
+        }
+        // Check center
+        const distCenter = Math.abs(panelCenterX - target.pos);
+        if (distCenter < bestVDist) {
+            bestVDist = distCenter;
+            bestVSnap = { offset: target.pos - panelCenterX, target, edge: 'center' };
+        }
+    }
+
+    if (bestVSnap && bestVDist <= zone) {
+        const targetLeft = left + bestVSnap.offset;
+        result.pos.left = applyMagnetic(left, targetLeft, bestVDist);
+        result.snapped.v = bestVDist <= threshold;
+        result.magnetic.v = bestVDist > threshold && bestVDist <= zone;
+        result.guides.push({
+            type: 'vertical',
+            pos: bestVSnap.target.pos,
+            targetType: bestVSnap.target.type,
+            strength: result.snapped.v ? 1 : 1 - (bestVDist - threshold) / (zone - threshold)
+        });
+    }
+
+    // Find best horizontal snap (for Y position)
+    let bestHSnap = null;
+    let bestHDist = zone + 1;
+
+    for (const target of targets.h) {
+        // Check top edge
+        const distTop = Math.abs(panelTop - target.pos);
+        if (distTop < bestHDist) {
+            bestHDist = distTop;
+            bestHSnap = { offset: target.pos - panelTop, target, edge: 'top' };
+        }
+        // Check bottom edge
+        const distBottom = Math.abs(panelBottom - target.pos);
+        if (distBottom < bestHDist) {
+            bestHDist = distBottom;
+            bestHSnap = { offset: target.pos - panelBottom, target, edge: 'bottom' };
+        }
+        // Check center
+        const distCenter = Math.abs(panelCenterY - target.pos);
+        if (distCenter < bestHDist) {
+            bestHDist = distCenter;
+            bestHSnap = { offset: target.pos - panelCenterY, target, edge: 'center' };
+        }
+    }
+
+    if (bestHSnap && bestHDist <= zone) {
+        const targetTop = top + bestHSnap.offset;
+        result.pos.top = applyMagnetic(top, targetTop, bestHDist);
+        result.snapped.h = bestHDist <= threshold;
+        result.magnetic.h = bestHDist > threshold && bestHDist <= zone;
+        result.guides.push({
+            type: 'horizontal',
+            pos: bestHSnap.target.pos,
+            targetType: bestHSnap.target.type,
+            strength: result.snapped.h ? 1 : 1 - (bestHDist - threshold) / (zone - threshold)
+        });
+    }
+
+    // Apply grid snapping if no edge/center snap or magnetic attraction
+    if (!result.snapped.v && !result.magnetic.v) {
+        result.pos.left = snapToGrid(result.pos.left);
+    }
+    if (!result.snapped.h && !result.magnetic.h) {
+        result.pos.top = snapToGrid(result.pos.top);
+    }
+
+    return result;
+}
+
+// Snap value to grid
+function snapToGrid(value) {
+    const grid = SNAP_CONFIG.gridSize;
+    return Math.round(value / grid) * grid;
+}
+
+// Show alignment guides with opacity based on magnetic strength
+function showSnapGuides(guides, imgRect) {
+    if (!SNAP_CONFIG.showGuides) {
+        hideSnapGuides();
+        return;
+    }
+
+    const img = document.getElementById('preview-image');
+    if (!img) return;
+
+    // IMPORTANT: Use offsetWidth/offsetHeight (CSS dimensions) NOT imgRect (transformed by zoom)
+    // The guides are positioned in the zoom-container's local coordinate space,
+    // which is NOT affected by the CSS transform scale.
+    // imgRect.width/height = naturalWidth * zoomLevel (visual size, WRONG for positioning)
+    // img.offsetWidth/Height = naturalWidth (CSS size, CORRECT for positioning)
+    const scaleX = img.offsetWidth / figSize.width_mm;
+    const scaleY = img.offsetHeight / figSize.height_mm;
+
+    // Get image offset relative to zoom-container (its offset parent)
+    const imgOffsetX = img.offsetLeft;
+    const imgOffsetY = img.offsetTop;
+
+    // Debug logging for guide positioning
+    console.log('[SnapGuide] imgOffset:', imgOffsetX, imgOffsetY, '| offsetSize:', img.offsetWidth, img.offsetHeight, '| scale:', scaleX.toFixed(3), scaleY.toFixed(3));
+
+    // Hide all guides first
+    snapGuides.forEach(g => g.style.display = 'none');
+
+    // Show active guides
+    let guideIndex = 0;
+    for (const guide of guides) {
+        if (guideIndex >= snapGuides.length) break;
+
+        const el = snapGuides[guideIndex];
+        const isCenter = guide.targetType.includes('center');
+        const baseColor = isCenter ? '139, 92, 246' : '245, 158, 11';  // RGB values
+        const strength = guide.strength || 1;
+        const opacity = 0.3 + strength * 0.7;  // 0.3-1.0 opacity range
+
+        if (guide.type === 'vertical') {
+            el.style.left = `${imgOffsetX + guide.pos * scaleX}px`;
+            el.style.top = `${imgOffsetY}px`;
+            el.style.width = strength >= 1 ? '3px' : '2px';  // Thicker when snapped
+            el.style.height = `${img.offsetHeight}px`;  // Use CSS size, not transformed
+        } else {
+            el.style.left = `${imgOffsetX}px`;
+            el.style.top = `${imgOffsetY + guide.pos * scaleY}px`;
+            el.style.width = `${img.offsetWidth}px`;  // Use CSS size, not transformed
+            el.style.height = strength >= 1 ? '3px' : '2px';  // Thicker when snapped
+        }
+        el.style.background = `rgba(${baseColor}, ${opacity})`;
+        el.style.display = 'block';
+        guideIndex++;
+    }
+}
+
+// Hide all alignment guides
+function hideSnapGuides() {
+    snapGuides.forEach(g => g.style.display = 'none');
+}
+
+// Toggle snapping on/off
+function toggleSnapping(enabled) {
+    SNAP_CONFIG.enabled = enabled;
+    console.log('[PanelSnap] Snapping', enabled ? 'enabled' : 'disabled');
+    if (!enabled) hideSnapGuides();
+}
+
+// Set grid size
+function setSnapGridSize(size) {
+    SNAP_CONFIG.gridSize = size;
+    console.log('[PanelSnap] Grid size set to', size, 'mm');
+}
+
+// Initialize on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', initPanelSnap);
+"""
+
+__all__ = ["SCRIPTS_PANEL_SNAP"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_region_select.py

@@ -0,0 +1,255 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Region selection (marquee) JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Drawing selection rectangle by dragging on the canvas
+- Selecting all elements within the rectangle
+- Combining with multi-select (Ctrl+drag to add to selection)
+"""
+
+SCRIPTS_REGION_SELECT = """
+// ===== REGION SELECTION (Marquee/Rectangle Selection) =====
+
+// Region selection state
+let isRegionSelecting = false;
+let regionSelectStart = null;  // { x, y } in mm
+let regionSelectRect = null;   // { x, y, width, height } in mm
+
+// Region selection overlay element
+let regionSelectOverlay = null;
+
+// Initialize region selection
+function initRegionSelect() {
+    console.log('[RegionSelect] Initializing region selection');
+
+    const zoomContainer = document.getElementById('zoom-container');
+    if (!zoomContainer) return;
+
+    // Create selection rectangle overlay
+    regionSelectOverlay = document.createElement('div');
+    regionSelectOverlay.id = 'region-select-overlay';
+    regionSelectOverlay.style.cssText = `
+        position: absolute;
+        border: 2px dashed #2563eb;
+        background: rgba(37, 99, 235, 0.1);
+        pointer-events: none;
+        display: none;
+        z-index: 100;
+    `;
+    zoomContainer.appendChild(regionSelectOverlay);
+
+    // Add event listeners to zoom container
+    zoomContainer.addEventListener('mousedown', handleRegionSelectStart);
+    document.addEventListener('mousemove', handleRegionSelectMove);
+    document.addEventListener('mouseup', handleRegionSelectEnd);
+}
+
+// Handle mousedown to start region selection
+function handleRegionSelectStart(event) {
+    // Only start region select on left-click
+    if (event.button !== 0) return;
+
+    // Skip if clicking on a hit region, label, or other interactive element
+    const target = event.target;
+    if (target.closest('.hitregion-group') ||
+        target.closest('.panel-label-group') ||
+        target.closest('.hitregion-polyline') ||
+        target.closest('.hitregion-rect') ||
+        target.closest('.hitregion-circle')) {
+        return;
+    }
+
+    // Skip if modifier keys suggest other operations (Alt for cycling)
+    if (event.altKey) return;
+
+    // Skip if clicking directly on the preview image (handled by hitmap)
+    if (target.id === 'preview-image') return;
+
+    // Check if click is on empty area of zoom container or overlays
+    const zoomContainer = document.getElementById('zoom-container');
+    const hitOverlay = document.getElementById('hitregion-overlay');
+    const selOverlay = document.getElementById('selection-overlay');
+
+    if (target !== zoomContainer && target !== hitOverlay && target !== selOverlay) {
+        // Not on container/overlay background - might be clicking on shape
+        return;
+    }
+
+    const img = document.getElementById('preview-image');
+    if (!img || !figSize.width_mm || !figSize.height_mm) return;
+
+    const imgRect = img.getBoundingClientRect();
+
+    // Check if click is within image bounds
+    const x = event.clientX - imgRect.left;
+    const y = event.clientY - imgRect.top;
+    if (x < 0 || x > imgRect.width || y < 0 || y > imgRect.height) return;
+
+    // Start region selection
+    event.preventDefault();
+    event.stopPropagation();
+
+    isRegionSelecting = true;
+
+    // Convert to mm coordinates
+    const mmX = (x / imgRect.width) * figSize.width_mm;
+    const mmY = (y / imgRect.height) * figSize.height_mm;
+
+    regionSelectStart = { x: mmX, y: mmY };
+    regionSelectRect = { x: mmX, y: mmY, width: 0, height: 0 };
+
+    // Clear selection unless Ctrl is held (add mode)
+    if (!isMultiSelectMode(event)) {
+        clearMultiSelection();
+    }
+
+    // Show overlay
+    updateRegionSelectOverlay(imgRect);
+    regionSelectOverlay.style.display = 'block';
+
+    console.log('[RegionSelect] Started at', mmX.toFixed(1), mmY.toFixed(1));
+}
+
+// Handle mousemove during region selection
+function handleRegionSelectMove(event) {
+    if (!isRegionSelecting) return;
+
+    event.preventDefault();
+
+    const img = document.getElementById('preview-image');
+    if (!img) return;
+
+    const imgRect = img.getBoundingClientRect();
+
+    // Convert current position to mm
+    const x = event.clientX - imgRect.left;
+    const y = event.clientY - imgRect.top;
+    const mmX = Math.max(0, Math.min(figSize.width_mm, (x / imgRect.width) * figSize.width_mm));
+    const mmY = Math.max(0, Math.min(figSize.height_mm, (y / imgRect.height) * figSize.height_mm));
+
+    // Update rect (handle negative width/height by using min/max)
+    regionSelectRect = {
+        x: Math.min(regionSelectStart.x, mmX),
+        y: Math.min(regionSelectStart.y, mmY),
+        width: Math.abs(mmX - regionSelectStart.x),
+        height: Math.abs(mmY - regionSelectStart.y)
+    };
+
+    // Update visual overlay
+    updateRegionSelectOverlay(imgRect);
+}
+
+// Handle mouseup to end region selection
+function handleRegionSelectEnd(event) {
+    if (!isRegionSelecting) return;
+
+    isRegionSelecting = false;
+    regionSelectOverlay.style.display = 'none';
+
+    // Only select if rectangle has meaningful size (> 2mm)
+    if (regionSelectRect.width < 2 || regionSelectRect.height < 2) {
+        console.log('[RegionSelect] Rectangle too small, ignored');
+        regionSelectStart = null;
+        regionSelectRect = null;
+        return;
+    }
+
+    // Select elements within the rectangle
+    selectElementsInRegion(regionSelectRect, isMultiSelectMode(event));
+
+    regionSelectStart = null;
+    regionSelectRect = null;
+
+    console.log('[RegionSelect] Ended, selected', selectedElements.length, 'elements');
+}
+
+// Update the visual selection rectangle overlay
+function updateRegionSelectOverlay(imgRect) {
+    if (!regionSelectOverlay || !regionSelectRect) return;
+
+    // Convert mm to pixels
+    const scaleX = imgRect.width / figSize.width_mm;
+    const scaleY = imgRect.height / figSize.height_mm;
+
+    const left = regionSelectRect.x * scaleX;
+    const top = regionSelectRect.y * scaleY;
+    const width = regionSelectRect.width * scaleX;
+    const height = regionSelectRect.height * scaleY;
+
+    regionSelectOverlay.style.left = `${left}px`;
+    regionSelectOverlay.style.top = `${top}px`;
+    regionSelectOverlay.style.width = `${width}px`;
+    regionSelectOverlay.style.height = `${height}px`;
+}
+
+// Select all elements whose bounding boxes intersect with the selection rectangle
+function selectElementsInRegion(rectMm, addToExisting) {
+    if (!addToExisting) {
+        clearMultiSelection();
+    }
+
+    const img = document.getElementById('preview-image');
+    if (!img || !figSize.width_mm || !figSize.height_mm) return;
+
+    // Convert selection rect from mm to image pixels for bbox comparison
+    const scaleX = img.naturalWidth / figSize.width_mm;
+    const scaleY = img.naturalHeight / figSize.height_mm;
+
+    const selRect = {
+        x: rectMm.x * scaleX,
+        y: rectMm.y * scaleY,
+        width: rectMm.width * scaleX,
+        height: rectMm.height * scaleY
+    };
+
+    // Check each element's bbox for intersection
+    for (const [key, bbox] of Object.entries(currentBboxes)) {
+        if (key === '_meta') continue;
+        if (!bbox || typeof bbox.x === 'undefined') continue;
+
+        // Check intersection between selection rect and element bbox
+        if (rectsIntersect(selRect, bbox)) {
+            const info = (colorMap && colorMap[key]) || {};
+            addToSelection({ key, ...bbox, ...info });
+        }
+
+        // Also check line/scatter points
+        if ((bbox.type === 'line' || bbox.type === 'scatter') && bbox.points) {
+            const hasPointInRegion = bbox.points.some(pt =>
+                pt[0] >= selRect.x && pt[0] <= selRect.x + selRect.width &&
+                pt[1] >= selRect.y && pt[1] <= selRect.y + selRect.height
+            );
+            if (hasPointInRegion && !isElementSelected(key)) {
+                const info = (colorMap && colorMap[key]) || {};
+                addToSelection({ key, ...bbox, ...info });
+            }
+        }
+    }
+
+    // Draw selection and update UI
+    drawMultiSelection();
+    updateMultiSelectionUI();
+}
+
+// Check if two rectangles intersect
+function rectsIntersect(rect1, rect2) {
+    return !(rect1.x + rect1.width < rect2.x ||
+             rect2.x + rect2.width < rect1.x ||
+             rect1.y + rect1.height < rect2.y ||
+             rect2.y + rect2.height < rect1.y);
+}
+
+// Check if a point is inside a rectangle
+function pointInRect(px, py, rect) {
+    return px >= rect.x && px <= rect.x + rect.width &&
+           py >= rect.y && py <= rect.y + rect.height;
+}
+
+// Initialize on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', initRegionSelect);
+"""
+
+__all__ = ["SCRIPTS_REGION_SELECT"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_selection.py

@@ -21,6 +21,11 @@ function clearSelection() {
     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');
 
@@ -62,7 +67,9 @@ function drawSelection(key) {
         const bbox = currentBboxes[elemKey];
         if (!bbox) continue;
 
-        const elementColor = bbox.original_color || '#2563eb';
+        // 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) {