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

figrecipe/_editor/_templates/_scripts/_overlays.py

@@ -0,0 +1,292 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Ruler, grid, and column overlay JavaScript for the figure editor."""
+
+SCRIPTS_OVERLAYS = """
+// ============================================
+// MEASUREMENT OVERLAYS (Ruler, Grid, Columns)
+// ============================================
+
+// State for overlays
+let rulerVisible = false;
+let gridVisible = false;
+let columnsVisible = false;
+
+// Get figure DPI from server (default 300 for preview at 150)
+// Preview DPI is 150, which is half of output DPI
+const PREVIEW_DPI = 150;
+const MM_PER_INCH = 25.4;
+
+// Pixels per mm at preview resolution
+function getPxPerMm() {
+    return PREVIEW_DPI / MM_PER_INCH;
+}
+
+// Unified ruler & grid state
+let rulerGridVisible = false;
+
+// Initialize overlay controls (single toggle button)
+function initializeOverlayControls() {
+    const btn = document.getElementById('btn-ruler-grid');
+    if (btn) {
+        btn.addEventListener('click', toggleRulerGrid);
+    }
+}
+
+// Toggle all ruler/grid overlays together
+function toggleRulerGrid() {
+    rulerGridVisible = !rulerGridVisible;
+
+    // Sync all three visibility states
+    rulerVisible = rulerGridVisible;
+    gridVisible = rulerGridVisible;
+    columnsVisible = rulerGridVisible;
+
+    // Update overlays
+    const rulerOverlay = document.getElementById('ruler-overlay');
+    const gridOverlay = document.getElementById('grid-overlay');
+    const columnOverlay = document.getElementById('column-overlay');
+
+    if (rulerOverlay) rulerOverlay.classList.toggle('visible', rulerGridVisible);
+    if (gridOverlay) gridOverlay.classList.toggle('visible', rulerGridVisible);
+    if (columnOverlay) columnOverlay.classList.toggle('visible', rulerGridVisible);
+
+    // Draw overlays if visible
+    if (rulerGridVisible) {
+        drawRuler();
+        drawGrid();
+        drawColumnGuides();
+    }
+
+    // Update button state
+    const btn = document.getElementById('btn-ruler-grid');
+    if (btn) {
+        btn.classList.toggle('active', rulerGridVisible);
+    }
+}
+
+// Legacy functions for backward compatibility
+function toggleRuler() { toggleRulerGrid(); }
+function toggleGrid() { toggleRulerGrid(); }
+function toggleColumns() { toggleRulerGrid(); }
+
+// Draw ruler overlay (top and left edges)
+function drawRuler() {
+    const overlay = document.getElementById('ruler-overlay');
+    const img = document.getElementById('preview-image');
+    if (!overlay || !img) return;
+
+    // Clear existing
+    overlay.innerHTML = '';
+
+    const imgWidth = img.naturalWidth || img.width;
+    const imgHeight = img.naturalHeight || img.height;
+    const pxPerMm = getPxPerMm();
+
+    // Set SVG size
+    overlay.setAttribute('viewBox', `0 0 ${imgWidth} ${imgHeight}`);
+    overlay.style.width = imgWidth + 'px';
+    overlay.style.height = imgHeight + 'px';
+
+    const rulerThickness = 15;  // pixels
+
+    // Background for horizontal ruler (top)
+    const hBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    hBg.setAttribute('x', 0);
+    hBg.setAttribute('y', 0);
+    hBg.setAttribute('width', imgWidth);
+    hBg.setAttribute('height', rulerThickness);
+    hBg.setAttribute('class', 'ruler-bg');
+    overlay.appendChild(hBg);
+
+    // Background for vertical ruler (left)
+    const vBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    vBg.setAttribute('x', 0);
+    vBg.setAttribute('y', 0);
+    vBg.setAttribute('width', rulerThickness);
+    vBg.setAttribute('height', imgHeight);
+    vBg.setAttribute('class', 'ruler-bg');
+    overlay.appendChild(vBg);
+
+    const widthMm = imgWidth / pxPerMm;
+    const heightMm = imgHeight / pxPerMm;
+
+    // Draw horizontal ruler ticks (every 1mm, labels every 5mm)
+    for (let mm = 0; mm <= widthMm; mm++) {
+        const x = mm * pxPerMm;
+        const isMajor = mm % 5 === 0;
+        const tickLen = isMajor ? 10 : 5;
+
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', x);
+        line.setAttribute('y1', 0);
+        line.setAttribute('x2', x);
+        line.setAttribute('y2', tickLen);
+        line.setAttribute('class', isMajor ? 'ruler-line-major' : 'ruler-line');
+        overlay.appendChild(line);
+
+        // Label every 10mm
+        if (mm % 10 === 0 && mm > 0) {
+            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            text.setAttribute('x', x);
+            text.setAttribute('y', 13);
+            text.setAttribute('class', 'ruler-text');
+            text.setAttribute('text-anchor', 'middle');
+            text.textContent = mm.toString();
+            overlay.appendChild(text);
+        }
+    }
+
+    // Draw vertical ruler ticks (every 1mm, labels every 5mm)
+    for (let mm = 0; mm <= heightMm; mm++) {
+        const y = mm * pxPerMm;
+        const isMajor = mm % 5 === 0;
+        const tickLen = isMajor ? 10 : 5;
+
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', 0);
+        line.setAttribute('y1', y);
+        line.setAttribute('x2', tickLen);
+        line.setAttribute('y2', y);
+        line.setAttribute('class', isMajor ? 'ruler-line-major' : 'ruler-line');
+        overlay.appendChild(line);
+
+        // Label every 10mm
+        if (mm % 10 === 0 && mm > 0) {
+            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            text.setAttribute('x', 2);
+            text.setAttribute('y', y + 3);
+            text.setAttribute('class', 'ruler-text');
+            text.setAttribute('text-anchor', 'start');
+            text.setAttribute('transform', `rotate(-90, 2, ${y})`);
+            text.textContent = mm.toString();
+            overlay.appendChild(text);
+        }
+    }
+}
+
+// Draw grid overlay (1mm and 5mm intervals)
+function drawGrid() {
+    const overlay = document.getElementById('grid-overlay');
+    const img = document.getElementById('preview-image');
+    if (!overlay || !img) return;
+
+    // Clear existing
+    overlay.innerHTML = '';
+
+    const imgWidth = img.naturalWidth || img.width;
+    const imgHeight = img.naturalHeight || img.height;
+    const pxPerMm = getPxPerMm();
+
+    // Set SVG size
+    overlay.setAttribute('viewBox', `0 0 ${imgWidth} ${imgHeight}`);
+    overlay.style.width = imgWidth + 'px';
+    overlay.style.height = imgHeight + 'px';
+
+    const widthMm = imgWidth / pxPerMm;
+    const heightMm = imgHeight / pxPerMm;
+
+    // Draw vertical lines (every 1mm)
+    for (let mm = 0; mm <= widthMm; mm++) {
+        const x = mm * pxPerMm;
+        const is5mm = mm % 5 === 0;
+
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', x);
+        line.setAttribute('y1', 0);
+        line.setAttribute('x2', x);
+        line.setAttribute('y2', imgHeight);
+        line.setAttribute('class', is5mm ? 'grid-line-5mm' : 'grid-line-1mm');
+        overlay.appendChild(line);
+    }
+
+    // Draw horizontal lines (every 1mm)
+    for (let mm = 0; mm <= heightMm; mm++) {
+        const y = mm * pxPerMm;
+        const is5mm = mm % 5 === 0;
+
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', 0);
+        line.setAttribute('y1', y);
+        line.setAttribute('x2', imgWidth);
+        line.setAttribute('y2', y);
+        line.setAttribute('class', is5mm ? 'grid-line-5mm' : 'grid-line-1mm');
+        overlay.appendChild(line);
+    }
+}
+
+// Draw column guide lines (45mm intervals: 0, 45, 90, 135, 180mm)
+function drawColumnGuides() {
+    const overlay = document.getElementById('column-overlay');
+    const img = document.getElementById('preview-image');
+    if (!overlay || !img) return;
+
+    // Clear existing
+    overlay.innerHTML = '';
+
+    const imgWidth = img.naturalWidth || img.width;
+    const imgHeight = img.naturalHeight || img.height;
+    const pxPerMm = getPxPerMm();
+
+    // Set SVG size
+    overlay.setAttribute('viewBox', `0 0 ${imgWidth} ${imgHeight}`);
+    overlay.style.width = imgWidth + 'px';
+    overlay.style.height = imgHeight + 'px';
+
+    // Journal column width: 45mm
+    // Lines at 0, 45, 90, 135, 180mm for 0, 1, 2, 3, 4 columns
+    const columnPositions = [
+        { mm: 0, label: '0' },
+        { mm: 45, label: '1 col' },
+        { mm: 90, label: '2 col' },
+        { mm: 135, label: '3 col' },
+        { mm: 180, label: '4 col' }
+    ];
+
+    for (const col of columnPositions) {
+        const x = col.mm * pxPerMm;
+
+        // Skip if beyond image width
+        if (x > imgWidth) continue;
+
+        // Draw vertical line
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', x);
+        line.setAttribute('y1', 0);
+        line.setAttribute('x2', x);
+        line.setAttribute('y2', imgHeight);
+        line.setAttribute('class', 'column-line');
+        overlay.appendChild(line);
+
+        // Label background
+        const labelBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        const labelText = `${col.label} (${col.mm}mm)`;
+        const labelWidth = labelText.length * 7 + 8;
+        labelBg.setAttribute('x', x + 3);
+        labelBg.setAttribute('y', 3);
+        labelBg.setAttribute('width', labelWidth);
+        labelBg.setAttribute('height', 18);
+        labelBg.setAttribute('rx', 3);
+        labelBg.setAttribute('class', 'column-bg');
+        overlay.appendChild(labelBg);
+
+        // Label
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('x', x + 6);
+        text.setAttribute('y', 16);
+        text.setAttribute('class', 'column-text');
+        text.setAttribute('text-anchor', 'start');
+        text.textContent = labelText;
+        overlay.appendChild(text);
+    }
+}
+
+// Update all overlays when image changes
+function updateOverlays() {
+    if (rulerVisible) drawRuler();
+    if (gridVisible) drawGrid();
+    if (columnsVisible) drawColumnGuides();
+}
+"""
+
+__all__ = ["SCRIPTS_OVERLAYS"]

figrecipe/_editor/_templates/_scripts/_panel_drag.py

@@ -0,0 +1,334 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Panel drag-to-move JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- Detecting mousedown on axes/panel elements
+- Handling drag movement with visual feedback
+- Updating panel position on drop
+
+Coordinates are in mm with upper-left origin.
+"""
+
+SCRIPTS_PANEL_DRAG = """
+// ===== PANEL DRAG-TO-MOVE (mm, upper-left origin) =====
+
+let isDraggingPanel = false;
+let draggedPanelIndex = null;
+let dragStartPos = null;
+let dragStartPanelPos = null;
+let panelDragOverlay = null;
+
+// Initialize panel drag functionality
+function initPanelDrag() {
+    console.log('[PanelDrag] initPanelDrag called');
+    const zoomContainer = document.getElementById('zoom-container');
+    if (!zoomContainer) {
+        console.error('[PanelDrag] zoom-container not found!');
+        return;
+    }
+
+    // Add mouse event listeners to zoom container
+    zoomContainer.addEventListener('mousedown', handlePanelDragStart);
+    document.addEventListener('mousemove', handlePanelDragMove);
+    document.addEventListener('mouseup', handlePanelDragEnd);
+    console.log('[PanelDrag] Event listeners attached');
+
+    // Create drag overlay element
+    panelDragOverlay = document.createElement('div');
+    panelDragOverlay.id = 'panel-drag-overlay';
+    panelDragOverlay.style.cssText = `
+        position: absolute;
+        border: 2px dashed #2563eb;
+        background: rgba(37, 99, 235, 0.1);
+        pointer-events: none;
+        display: none;
+        z-index: 1000;
+    `;
+    zoomContainer.appendChild(panelDragOverlay);
+    console.log('[PanelDrag] Overlay created:', panelDragOverlay ? 'success' : 'failed');
+}
+
+// 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;
+    }
+
+    // Only start drag if clicking on axes element or empty panel area
+    // Skip if clicking on specific elements (they should be selected instead)
+    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 img = document.getElementById('preview-image');
+    if (!img || !figSize.width_mm || !figSize.height_mm) {
+        console.log('[PanelDrag] Skipped - img or figSize not ready');
+        return;
+    }
+
+    const rect = img.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // Convert to mm coordinates (upper-left origin)
+    const mmX = (x / rect.width) * figSize.width_mm;
+    const mmY = (y / rect.height) * figSize.height_mm;
+
+    // Find which panel was clicked (using expanded bounds including labels)
+    const panelIndex = findPanelAtPositionMm(mmX, mmY);
+    console.log('[PanelDrag] Click at mm:', mmX.toFixed(1), mmY.toFixed(1), '-> panel:', panelIndex);
+
+    if (panelIndex !== null) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        isDraggingPanel = true;
+        draggedPanelIndex = panelIndex;
+        dragStartPos = { x: event.clientX, y: event.clientY };
+
+        // Get current panel position (in mm)
+        const axKey = Object.keys(panelPositions).sort()[panelIndex];
+        const pos = panelPositions[axKey];
+        dragStartPanelPos = { ...pos };
+
+        // Create overlay if it doesn't exist
+        if (!panelDragOverlay) {
+            console.log('[PanelDrag] Creating overlay on-demand');
+            const zoomContainer = document.getElementById('zoom-container');
+            if (zoomContainer) {
+                panelDragOverlay = document.createElement('div');
+                panelDragOverlay.id = 'panel-drag-overlay';
+                panelDragOverlay.style.cssText = `
+                    position: absolute;
+                    border: 2px dashed #2563eb;
+                    background: rgba(37, 99, 235, 0.1);
+                    pointer-events: none;
+                    display: none;
+                    z-index: 1000;
+                `;
+                zoomContainer.appendChild(panelDragOverlay);
+                console.log('[PanelDrag] Overlay created on-demand');
+            }
+        }
+
+        // Show drag overlay
+        if (panelDragOverlay) {
+            updateDragOverlayMm(pos, rect);
+            panelDragOverlay.style.display = 'block';
+            console.log('[PanelDrag] Overlay shown');
+        } else {
+            console.warn('[PanelDrag] Overlay still null after creation attempt');
+        }
+
+        // Change cursor
+        document.body.style.cursor = 'move';
+
+        console.log('Started dragging panel', panelIndex);
+    }
+}
+
+// Find which panel contains the given position (in mm, upper-left origin)
+// Uses expanded bounds to include title, labels, and tick areas
+function findPanelAtPositionMm(mmX, mmY) {
+    const axKeys = Object.keys(panelPositions).sort();
+
+    // Margins in mm to expand panel bounds for labels/title/ticks
+    const marginLeft = 15;   // Space for y-axis label and ticks
+    const marginRight = 5;   // Small buffer on right
+    const marginTop = 8;     // Space for title
+    const marginBottom = 12; // Space for x-axis label and ticks
+
+    for (let i = 0; i < axKeys.length; i++) {
+        const pos = panelPositions[axKeys[i]];
+
+        // Expanded bounds including label/title areas
+        const expandedLeft = Math.max(0, pos.left - marginLeft);
+        const expandedTop = Math.max(0, pos.top - marginTop);
+        const expandedRight = Math.min(figSize.width_mm, pos.left + pos.width + marginRight);
+        const expandedBottom = Math.min(figSize.height_mm, pos.top + pos.height + marginBottom);
+
+        // Check if point is within expanded panel bounds
+        if (mmX >= expandedLeft && mmX <= expandedRight &&
+            mmY >= expandedTop && mmY <= expandedBottom) {
+            return i;
+        }
+    }
+    return null;
+}
+
+// Handle mouse move during drag
+function handlePanelDragMove(event) {
+    if (!isDraggingPanel) return;
+
+    event.preventDefault();
+
+    const img = document.getElementById('preview-image');
+    if (!img) return;
+
+    const rect = img.getBoundingClientRect();
+
+    // Calculate delta in mm
+    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));
+
+    const newPos = {
+        left: newLeft,
+        top: newTop,
+        width: dragStartPanelPos.width,
+        height: dragStartPanelPos.height
+    };
+
+    // Update visual overlay
+    updateDragOverlayMm(newPos, rect);
+}
+
+// Update the drag overlay position (pos in mm, upper-left origin)
+function updateDragOverlayMm(pos, imgRect) {
+    if (!panelDragOverlay || !figSize.width_mm) 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;
+
+    panelDragOverlay.style.left = `${left}px`;
+    panelDragOverlay.style.top = `${top}px`;
+    panelDragOverlay.style.width = `${width}px`;
+    panelDragOverlay.style.height = `${height}px`;
+}
+
+// Handle mouse up - complete the drag
+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');
+    }
+    document.body.style.cursor = '';
+
+    const img = document.getElementById('preview-image');
+    if (!img) {
+        isDraggingPanel = false;
+        return;
+    }
+
+    const rect = img.getBoundingClientRect();
+
+    // Calculate final position in mm
+    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));
+
+    // Only update if position actually changed (threshold in mm)
+    const threshold = 1.0;  // 1mm threshold
+    const deltaLeft = Math.abs(newLeft - dragStartPanelPos.left);
+    const deltaTop = Math.abs(newTop - dragStartPanelPos.top);
+    console.log('[PanelDrag] Delta: left=', deltaLeft.toFixed(2), 'top=', deltaTop.toFixed(2), 'threshold=', threshold);
+
+    if (deltaLeft > threshold || deltaTop > threshold) {
+        console.log('[PanelDrag] Applying new position:', newLeft.toFixed(2), newTop.toFixed(2));
+        // Apply the new position (in mm)
+        await applyDraggedPanelPosition(
+            draggedPanelIndex,
+            newLeft,
+            newTop,
+            dragStartPanelPos.width,
+            dragStartPanelPos.height
+        );
+    } else {
+        console.log('[PanelDrag] Movement below threshold, not updating');
+    }
+
+    // Reset state
+    isDraggingPanel = false;
+    draggedPanelIndex = null;
+    dragStartPos = null;
+    dragStartPanelPos = null;
+    console.log('[PanelDrag] Drag state reset');
+}
+
+// Apply the dragged panel position to the server (values in mm)
+async function applyDraggedPanelPosition(axIndex, left, top, width, height) {
+    document.body.classList.add('loading');
+
+    try {
+        const response = await fetch('/update_axes_position', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                ax_index: axIndex,
+                left: left,
+                top: top,
+                width: width,
+                height: height
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            // Update preview image and wait for it to load
+            const img = document.getElementById('preview-image');
+            if (img) {
+                await new Promise((resolve) => {
+                    img.onload = resolve;
+                    img.src = 'data:image/png;base64,' + data.image;
+                });
+            }
+
+            // Update image size
+            if (data.img_size) {
+                currentImgWidth = data.img_size.width;
+                currentImgHeight = data.img_size.height;
+            }
+
+            // Update bboxes and hitmap
+            currentBboxes = data.bboxes;
+            loadHitmap();
+            updateHitRegions();
+
+            // Reload positions (now with correct image dimensions)
+            await loadPanelPositions();
+
+            console.log('Panel position updated via drag');
+        } else {
+            console.error('Failed to update position:', data.error);
+        }
+    } catch (error) {
+        console.error('Failed to update position:', error);
+    }
+
+    document.body.classList.remove('loading');
+}
+
+// Initialize on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', initPanelDrag);
+"""
+
+__all__ = ["SCRIPTS_PANEL_DRAG"]
+
+# EOF