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

figrecipe/_editor/_templates/_scripts/_datatable/_clipboard.py

@@ -0,0 +1,164 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable clipboard operations JavaScript - copy, paste, cut."""
+
+JS_DATATABLE_CLIPBOARD = """
+// ============================================================================
+// Clipboard Operations (Copy, Paste, Cut)
+// ============================================================================
+let datatableCopiedRange = null;  // Track copied cell range for marching ants
+let datatableIsCutOperation = false;  // Track if it was cut (not copy)
+
+function handleCopy(e) {
+    if (!datatableSelectedCells || datatableEditMode) return;
+
+    e.preventDefault();
+    const text = getSelectedCellsAsTSV();
+    e.clipboardData.setData('text/plain', text);
+
+    // Store copied range and show marching ants
+    datatableCopiedRange = { ...datatableSelectedCells };
+    datatableIsCutOperation = false;
+    showMarchingAnts();
+}
+
+function handleCut(e) {
+    if (!datatableSelectedCells || datatableEditMode) return;
+
+    e.preventDefault();
+    const text = getSelectedCellsAsTSV();
+    e.clipboardData.setData('text/plain', text);
+
+    // Store cut range and show marching ants with faded cells
+    datatableCopiedRange = { ...datatableSelectedCells };
+    datatableIsCutOperation = true;
+    showMarchingAnts();
+}
+
+// Show Excel-style marching ants border around copied/cut cells
+function showMarchingAnts() {
+    clearMarchingAnts();  // Clear any existing marching ants
+    if (!datatableCopiedRange) return;
+
+    const { startRow, startCol, endRow, endCol } = datatableCopiedRange;
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+
+    for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+            const cell = document.querySelector(`td[data-row="${r}"][data-col="${c}"]`);
+            if (!cell) continue;
+
+            // Add border classes based on position in selection
+            if (r === minRow) cell.classList.add('copy-border-top');
+            if (r === maxRow) cell.classList.add('copy-border-bottom');
+            if (c === minCol) cell.classList.add('copy-border-left');
+            if (c === maxCol) cell.classList.add('copy-border-right');
+
+            // Add faded effect for cut operation
+            if (datatableIsCutOperation) {
+                cell.classList.add('cut-pending');
+            }
+        }
+    }
+}
+
+// Clear marching ants border
+function clearMarchingAnts() {
+    document.querySelectorAll('.copy-border-top, .copy-border-bottom, .copy-border-left, .copy-border-right, .cut-pending').forEach(cell => {
+        cell.classList.remove('copy-border-top', 'copy-border-bottom', 'copy-border-left', 'copy-border-right', 'cut-pending');
+    });
+}
+
+function handlePaste(e) {
+    if (!datatableCurrentCell || datatableEditMode || !datatableData) return;
+
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+    if (!text) return;
+
+    // If this was a cut operation, clear the source cells
+    if (datatableIsCutOperation && datatableCopiedRange) {
+        const { startRow, startCol, endRow, endCol } = datatableCopiedRange;
+        const minRow = Math.min(startRow, endRow);
+        const maxRow = Math.max(startRow, endRow);
+        const minCol = Math.min(startCol, endCol);
+        const maxCol = Math.max(startCol, endCol);
+
+        for (let r = minRow; r <= maxRow; r++) {
+            for (let c = minCol; c <= maxCol; c++) {
+                if (datatableData.rows[r]) {
+                    datatableData.rows[r][c] = '';
+                }
+            }
+        }
+    }
+
+    const rows = text.split('\\n').map(line => line.split('\\t'));
+    const startRow = datatableCurrentCell.row;
+    const startCol = datatableCurrentCell.col;
+
+    rows.forEach((rowData, rOffset) => {
+        const targetRow = startRow + rOffset;
+        if (targetRow >= datatableData.rows.length) return;
+
+        rowData.forEach((value, cOffset) => {
+            const targetCol = startCol + cOffset;
+            if (targetCol >= datatableData.columns.length) return;
+
+            // Preserve empty strings as empty (not convert to 0)
+            if (value === '' || value === null || value === undefined) {
+                datatableData.rows[targetRow][targetCol] = '';
+            } else {
+                const colType = datatableData.columns[targetCol]?.type;
+                if (colType === 'numeric') {
+                    const num = parseFloat(value);
+                    datatableData.rows[targetRow][targetCol] = isNaN(num) ? value : num;
+                } else {
+                    datatableData.rows[targetRow][targetCol] = value;
+                }
+            }
+        });
+    });
+
+    // Clear marching ants and reset cut state
+    clearMarchingAnts();
+    datatableCopiedRange = null;
+    datatableIsCutOperation = false;
+
+    renderDatatable();
+    updateCellSelectionDisplay();
+}
+
+function getSelectedCellsAsTSV() {
+    if (!datatableSelectedCells || !datatableData) return '';
+
+    const { startRow, startCol, endRow, endCol } = datatableSelectedCells;
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+
+    const lines = [];
+    for (let r = minRow; r <= maxRow; r++) {
+        const cells = [];
+        for (let c = minCol; c <= maxCol; c++) {
+            const value = datatableData.rows[r]?.[c];
+            // Preserve None as "None" string for copy
+            if (value === null || value === undefined) {
+                cells.push('');
+            } else {
+                cells.push(String(value));
+            }
+        }
+        lines.push(cells.join('\\t'));
+    }
+    return lines.join('\\n');
+}
+"""
+
+__all__ = ["JS_DATATABLE_CLIPBOARD"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_datatable/_context_menu.py

@@ -0,0 +1,221 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable right-click context menu JavaScript."""
+
+JS_DATATABLE_CONTEXT_MENU = """
+// ============================================================================
+// Context Menu (Right-Click Menu)
+// ============================================================================
+let datatableContextMenu = null;
+
+function createContextMenu() {
+    if (datatableContextMenu) return;
+
+    datatableContextMenu = document.createElement('div');
+    datatableContextMenu.className = 'datatable-context-menu';
+    datatableContextMenu.style.display = 'none';
+    datatableContextMenu.innerHTML = `
+        <div class="context-menu-item" data-action="cut">
+            Cut<span class="shortcut">Ctrl+X</span>
+        </div>
+        <div class="context-menu-item" data-action="copy">
+            Copy<span class="shortcut">Ctrl+C</span>
+        </div>
+        <div class="context-menu-item" data-action="paste">
+            Paste<span class="shortcut">Ctrl+V</span>
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" data-action="clear">
+            Clear cells<span class="shortcut">Del</span>
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" data-action="insert-row">
+            Insert row below
+        </div>
+        <div class="context-menu-item" data-action="insert-col">
+            Insert column right
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" data-action="delete-row">
+            Delete row
+        </div>
+        <div class="context-menu-item" data-action="delete-col">
+            Delete column
+        </div>
+    `;
+    document.body.appendChild(datatableContextMenu);
+    setupContextMenuListeners();
+}
+
+function setupContextMenuListeners() {
+    if (!datatableContextMenu) return;
+
+    // Click on menu items
+    datatableContextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+        item.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const action = item.dataset.action;
+            handleContextMenuAction(action);
+            hideContextMenu();
+        });
+    });
+
+    // Hide on click outside
+    document.addEventListener('click', hideContextMenu);
+    document.addEventListener('scroll', hideContextMenu, true);
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') hideContextMenu();
+    });
+}
+
+function handleContextMenuAction(action) {
+    if (!datatableData) return;
+
+    switch (action) {
+        case 'cut':
+            // Simulate Ctrl+X
+            document.execCommand('cut');
+            break;
+        case 'copy':
+            // Copy selected cells as TSV
+            const copyText = getSelectedCellsAsTSV();
+            navigator.clipboard.writeText(copyText).catch(console.error);
+            break;
+        case 'paste':
+            // Paste from clipboard
+            navigator.clipboard.readText().then(text => {
+                if (!text || !datatableCurrentCell) return;
+                const rows = text.split('\\n').map(line => line.split('\\t'));
+                const startRow = datatableCurrentCell.row;
+                const startCol = datatableCurrentCell.col;
+                rows.forEach((rowData, rOffset) => {
+                    const targetRow = startRow + rOffset;
+                    if (targetRow >= datatableData.rows.length) return;
+                    rowData.forEach((value, cOffset) => {
+                        const targetCol = startCol + cOffset;
+                        if (targetCol >= datatableData.columns.length) return;
+                        datatableData.rows[targetRow][targetCol] = value;
+                    });
+                });
+                renderDatatable();
+            }).catch(console.error);
+            break;
+        case 'clear':
+            clearSelectedCells();
+            break;
+        case 'insert-row':
+            insertRowBelow();
+            break;
+        case 'insert-col':
+            insertColumnRight();
+            break;
+        case 'delete-row':
+            deleteCurrentRow();
+            break;
+        case 'delete-col':
+            deleteCurrentColumn();
+            break;
+    }
+}
+
+function insertRowBelow() {
+    if (!datatableData || !datatableCurrentCell) return;
+    const row = datatableCurrentCell.row;
+    const newRow = datatableData.columns.map(() => '');
+    datatableData.rows.splice(row + 1, 0, newRow);
+    renderDatatable();
+}
+
+function insertColumnRight() {
+    if (!datatableData || !datatableCurrentCell) return;
+    const col = datatableCurrentCell.col;
+    const newColIdx = datatableData.columns.length;
+    datatableData.columns.splice(col + 1, 0, {
+        name: `col${newColIdx + 1}`,
+        type: 'numeric',
+        index: col + 1
+    });
+    // Reindex columns
+    datatableData.columns.forEach((c, i) => c.index = i);
+    // Add cell to all rows
+    datatableData.rows.forEach(row => row.splice(col + 1, 0, ''));
+    renderDatatable();
+    updateVarAssignSlots();
+}
+
+function deleteCurrentRow() {
+    if (!datatableData || !datatableCurrentCell) return;
+    if (datatableData.rows.length <= 1) return;  // Keep at least 1 row
+    const row = datatableCurrentCell.row;
+    datatableData.rows.splice(row, 1);
+    if (datatableCurrentCell.row >= datatableData.rows.length) {
+        datatableCurrentCell.row = datatableData.rows.length - 1;
+    }
+    renderDatatable();
+}
+
+function deleteCurrentColumn() {
+    if (!datatableData || !datatableCurrentCell) return;
+    if (datatableData.columns.length <= 1) return;  // Keep at least 1 col
+    const col = datatableCurrentCell.col;
+    datatableData.columns.splice(col, 1);
+    // Reindex columns
+    datatableData.columns.forEach((c, i) => c.index = i);
+    // Remove cell from all rows
+    datatableData.rows.forEach(row => row.splice(col, 1));
+    if (datatableCurrentCell.col >= datatableData.columns.length) {
+        datatableCurrentCell.col = datatableData.columns.length - 1;
+    }
+    renderDatatable();
+    updateVarAssignSlots();
+}
+
+function showContextMenu(e) {
+    if (!datatableContextMenu) createContextMenu();
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const x = e.clientX;
+    const y = e.clientY;
+
+    // Position off-screen to measure
+    datatableContextMenu.style.left = '-9999px';
+    datatableContextMenu.style.top = '-9999px';
+    datatableContextMenu.style.display = 'block';
+
+    const menuWidth = datatableContextMenu.offsetWidth;
+    const menuHeight = datatableContextMenu.offsetHeight;
+
+    // Adjust position to fit in viewport
+    let left = x;
+    let top = y;
+    if (x + menuWidth > window.innerWidth - 10) {
+        left = x - menuWidth;
+    }
+    if (y + menuHeight > window.innerHeight - 10) {
+        top = y - menuHeight;
+    }
+
+    datatableContextMenu.style.left = `${Math.max(10, left)}px`;
+    datatableContextMenu.style.top = `${Math.max(10, top)}px`;
+}
+
+function hideContextMenu() {
+    if (datatableContextMenu) {
+        datatableContextMenu.style.display = 'none';
+    }
+}
+
+// Attach context menu to table
+function attachContextMenuListener() {
+    const table = document.querySelector('.datatable-table');
+    if (table) {
+        table.addEventListener('contextmenu', showContextMenu);
+    }
+}
+"""
+
+__all__ = ["JS_DATATABLE_CONTEXT_MENU"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_datatable/_core.py

@@ -0,0 +1,150 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Core datatable JavaScript: state, panel toggle, initialization."""
+
+JS_DATATABLE_CORE = """
+// ============================================================================
+// Datatable Panel State
+// ============================================================================
+let datatableData = null;  // Parsed data: {columns: [...], rows: [...]}
+let datatableSelectedColumns = new Set();  // Selected column indices
+let datatablePlotType = 'plot';  // Default plot type
+let datatableTargetAxis = null;  // null = new figure, 0+ = existing axis index
+let datatableVarAssignments = {};  // Variable name -> column index mapping
+
+// ============================================================================
+// Panel Initialization
+// ============================================================================
+function initDatatablePanel() {
+    // Initialize sub-modules
+    initDatatableDropzone();
+    initPlotTypeButtons();
+
+    // Initialize plot button (New = create new panel)
+    const plotBtn = document.getElementById('btn-datatable-plot');
+    if (plotBtn) {
+        plotBtn.addEventListener('click', () => {
+            datatableTargetAxis = null;  // New panel
+            plotFromVarAssignments();
+        });
+    }
+
+    // Initialize split button dropdown
+    initPlotDropdown();
+
+    // Load existing data if available from figure
+    loadExistingData();
+
+    // Hook into canvas selection to sync with datatable
+    hookCanvasSelection();
+}
+
+function hookCanvasSelection() {
+    // Wrap the selectElement function to add datatable sync
+    if (typeof window.selectElement === 'function') {
+        const originalSelectElement = window.selectElement;
+        window.selectElement = function(element) {
+            originalSelectElement(element);
+            if (typeof syncDatatableToElement === 'function') {
+                syncDatatableToElement(element);
+            }
+        };
+    }
+
+    // Also hook clearSelection
+    if (typeof window.clearSelection === 'function') {
+        const originalClearSelection = window.clearSelection;
+        window.clearSelection = function() {
+            originalClearSelection();
+            if (typeof clearDatatableHighlight === 'function') {
+                clearDatatableHighlight();
+            }
+        };
+    }
+}
+
+function initPlotDropdown() {
+    const dropdownBtn = document.getElementById('btn-plot-dropdown');
+    const dropdownMenu = document.getElementById('plot-dropdown-menu');
+    if (!dropdownBtn || !dropdownMenu) return;
+
+    // Toggle dropdown
+    dropdownBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        dropdownMenu.classList.toggle('show');
+        if (dropdownMenu.classList.contains('show')) {
+            populatePlotDropdown();
+        }
+    });
+
+    // Close on outside click
+    document.addEventListener('click', () => {
+        dropdownMenu.classList.remove('show');
+    });
+}
+
+function populatePlotDropdown() {
+    const menu = document.getElementById('plot-dropdown-menu');
+    if (!menu) return;
+
+    fetch('/get_axes_positions').then(r => r.json()).then(data => {
+        const axes = Object.keys(data)
+            .filter(k => k.startsWith('ax_'))
+            .sort((a, b) => {
+                const matchA = a.match(/ax_(\\d+)_(\\d+)/);
+                const matchB = b.match(/ax_(\\d+)_(\\d+)/);
+                if (matchA && matchB) {
+                    return parseInt(matchA[2]) - parseInt(matchB[2]) || parseInt(matchA[1]) - parseInt(matchB[1]);
+                }
+                return 0;
+            });
+
+        let html = '';
+        axes.forEach((key, i) => {
+            html += `<button class="dropdown-item" onclick="addToPanel(${i})">Add to P${i + 1}</button>`;
+        });
+        menu.innerHTML = html || '<div class="dropdown-item" style="color:var(--text-secondary)">No panels</div>';
+    }).catch(() => {
+        menu.innerHTML = '<div class="dropdown-item" style="color:var(--text-secondary)">No panels</div>';
+    });
+}
+
+function addToPanel(axisIndex) {
+    datatableTargetAxis = axisIndex;
+    document.getElementById('plot-dropdown-menu').classList.remove('show');
+    plotFromVarAssignments();
+}
+
+// ============================================================================
+// Clear Data
+// ============================================================================
+function clearDatatableData() {
+    datatableData = null;
+    datatableSelectedColumns.clear();
+    datatableVarAssignments = {};
+
+    const content = document.getElementById('datatable-content');
+    if (content) {
+        content.innerHTML = '';
+    }
+
+    // Show dropzone again
+    const dropzone = document.getElementById('datatable-dropzone');
+    if (dropzone) dropzone.style.display = 'block';
+
+    const toolbar = document.querySelector('.datatable-toolbar');
+    if (toolbar) toolbar.style.display = 'none';
+
+    const varAssign = document.getElementById('datatable-var-assign');
+    if (varAssign) varAssign.style.display = 'none';
+
+    updateSelectionInfo();
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', initDatatablePanel);
+"""
+
+__all__ = ["JS_DATATABLE_CORE"]
+
+# EOF