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

figrecipe/_editor/_templates/_scripts/_files.py

@@ -1,53 +1,185 @@
 #!/usr/bin/env python3
 # -*- coding: utf-8 -*-
-"""File switcher JavaScript for switching between recipe files."""
+"""File browser JavaScript for the file tree panel."""
 
 SCRIPTS_FILES = """
-// ==================== FILE SWITCHER ====================
-// Allows switching between recipe files without restarting the server
+// ==================== FILE BROWSER ====================
+// File tree panel for browsing and switching between recipe files
 
 let currentFilePath = null;
+let fileBrowserCollapsed = false;
+let expandedFolders = new Set();
+
+// Load expanded state from localStorage
+function loadExpandedState() {
+    try {
+        const saved = localStorage.getItem('figrecipe-expanded-folders');
+        if (saved) {
+            expandedFolders = new Set(JSON.parse(saved));
+        }
+    } catch (e) {
+        console.warn('[FileBrowser] Failed to load expanded state:', e);
+    }
+}
+
+// Save expanded state to localStorage
+function saveExpandedState() {
+    try {
+        localStorage.setItem('figrecipe-expanded-folders', JSON.stringify([...expandedFolders]));
+    } catch (e) {
+        console.warn('[FileBrowser] Failed to save expanded state:', e);
+    }
+}
+
+// Toggle folder expand/collapse
+function toggleFolder(folderPath) {
+    if (expandedFolders.has(folderPath)) {
+        expandedFolders.delete(folderPath);
+    } else {
+        expandedFolders.add(folderPath);
+    }
+    saveExpandedState();
+
+    // Update DOM
+    const folderEl = document.querySelector(`.file-tree-folder[data-path="${folderPath}"]`);
+    if (folderEl) {
+        folderEl.classList.toggle('expanded', expandedFolders.has(folderPath));
+    }
+}
+
+// Render a tree item (file or folder)
+function renderTreeItem(item, level = 0) {
+    const indent = level * 16; // 16px per level
+
+    if (item.type === 'directory') {
+        const isExpanded = expandedFolders.has(item.path);
+        const expandedClass = isExpanded ? ' expanded' : '';
+
+        let childrenHtml = '';
+        if (item.children && item.children.length > 0) {
+            childrenHtml = item.children.map(child => renderTreeItem(child, level + 1)).join('');
+        }
+
+        return `<li class="file-tree-folder${expandedClass}" data-path="${item.path}">
+            <div class="file-tree-entry" data-path="${item.path}" data-type="folder" style="padding-left: ${12 + indent}px;">
+                <span class="file-tree-icon">📁</span>
+                <span class="file-tree-name">${item.name}</span>
+                <span class="file-tree-badge folder-badge">${item.children ? item.children.length : 0}</span>
+            </div>
+            <ul class="file-tree-children">
+                ${childrenHtml}
+            </ul>
+        </li>`;
+    } else {
+        // File item
+        const isCurrent = item.is_current;
+        const currentClass = isCurrent ? ' current' : '';
+        const hasImageClass = item.has_image ? ' has-image' : '';
+        const icon = item.has_image ? '📊' : '📄';
+        const badge = item.has_image ? '<span class="file-tree-badge">PNG</span>' : '';
+
+        return `<li class="file-tree-item">
+            <div class="file-tree-entry${currentClass}${hasImageClass}" data-path="${item.path}" data-type="file" style="padding-left: ${12 + indent}px;">
+                <span class="file-tree-icon">${icon}</span>
+                <span class="file-tree-name">${item.name}</span>
+                ${badge}
+                <span class="file-tree-actions">
+                    <button class="file-action-btn btn-rename" data-path="${item.path}" title="Rename">✏️</button>
+                    <button class="file-action-btn btn-delete" data-path="${item.path}" title="Delete">🗑️</button>
+                </span>
+            </div>
+        </li>`;
+    }
+}
 
 async function loadFileList() {
-    const selector = document.getElementById('file-selector');
-    if (!selector) return;
+    const fileTree = document.getElementById('file-tree');
+    if (!fileTree) return;
+
+    // Load saved expanded state
+    loadExpandedState();
 
     try {
         const response = await fetch('/api/files');
         if (!response.ok) {
-            selector.innerHTML = '<option value="">No files found</option>';
+            fileTree.innerHTML = '<li class="file-tree-empty"><p>No files found</p></li>';
             return;
         }
 
         const data = await response.json();
+        const tree = data.tree || [];
         const files = data.files || [];
         currentFilePath = data.current_file;
 
-        if (files.length === 0) {
-            selector.innerHTML = '<option value="">(No recipe files in directory)</option>';
-            return;
-        }
+        // Build file tree HTML
+        let treeHtml = '';
 
-        // Build options
-        let optionsHtml = '';
+        // Show unsaved figure entry when no current file path (new/unsaved figure)
         if (!currentFilePath) {
-            optionsHtml += '<option value="" selected>(Unsaved figure)</option>';
+            treeHtml += `<li class="file-tree-item">
+                <div class="file-tree-entry current" data-path="" data-type="file">
+                    <span class="file-tree-icon">✨</span>
+                    <span class="file-tree-name">(Unsaved figure)</span>
+                </div>
+            </li>`;
+        }
+
+        // Show empty state only if no unsaved figure AND no files
+        if (tree.length === 0 && files.length === 0 && currentFilePath !== null) {
+            fileTree.innerHTML = '<li class="file-tree-empty"><p>No recipe files</p><p>Create one with figrecipe.subplots()</p></li>';
+            return;
         }
 
-        files.forEach(file => {
-            const isCurrent = file.is_current;
-            const icon = file.has_image ? '📊 ' : '📄 ';
-            const selected = isCurrent ? ' selected' : '';
-            optionsHtml += `<option value="${file.path}"${selected}>${icon}${file.name}</option>`;
+        // Render tree structure
+        tree.forEach(item => {
+            treeHtml += renderTreeItem(item, 0);
+        });
+
+        fileTree.innerHTML = treeHtml;
+
+        // Add click handlers for folder entries (expand/collapse)
+        fileTree.querySelectorAll('.file-tree-folder > .file-tree-entry').forEach(entry => {
+            entry.addEventListener('click', (e) => {
+                const folderPath = entry.dataset.path;
+                if (folderPath !== undefined) {
+                    toggleFolder(folderPath);
+                }
+            });
+        });
+
+        // Add click handlers for file entries
+        fileTree.querySelectorAll('.file-tree-entry[data-type="file"]').forEach(entry => {
+            entry.addEventListener('click', (e) => {
+                // Don't switch if clicking action buttons
+                if (e.target.closest('.file-action-btn')) return;
+                const path = entry.dataset.path;
+                if (path) {
+                    switchToFile(path);
+                }
+            });
+        });
+
+        // Add click handlers for rename buttons
+        fileTree.querySelectorAll('.btn-rename').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                renameFile(btn.dataset.path);
+            });
         });
 
-        selector.innerHTML = optionsHtml;
+        // Add click handlers for delete buttons
+        fileTree.querySelectorAll('.btn-delete').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                deleteFile(btn.dataset.path);
+            });
+        });
 
-        console.log('[FileSwitcher] Loaded', files.length, 'files');
+        console.log('[FileBrowser] Loaded', files.length, 'files in', tree.length, 'root items');
 
     } catch (error) {
-        console.error('[FileSwitcher] Error loading files:', error);
-        selector.innerHTML = '<option value="">Error loading files</option>';
+        console.error('[FileBrowser] Error loading files:', error);
+        fileTree.innerHTML = '<li class="file-tree-empty"><p>Error loading files</p></li>';
     }
 }
 
@@ -139,8 +271,8 @@ async function createNewFigure() {
             window.currentColorMap = data.color_map;
         }
 
-        // Clear current file path (unsaved figure)
-        currentFilePath = null;
+        // Update current file path to the new file
+        currentFilePath = data.file || null;
 
         // Clear selection
         if (typeof clearSelection === 'function') {
@@ -149,8 +281,9 @@ async function createNewFigure() {
         const selectedPanel = document.getElementById('selected-element-panel');
         if (selectedPanel) selectedPanel.style.display = 'none';
 
-        showToast('New blank figure created', 'success');
-        console.log('[FileSwitcher] Created new blank figure');
+        const fileName = data.file_name || 'new_figure';
+        showToast(`Created: ${fileName}.yaml`, 'success');
+        console.log('[FileSwitcher] Created new figure:', data.file);
 
         // Reload file list to show (Unsaved figure)
         loadFileList();
@@ -161,35 +294,136 @@ async function createNewFigure() {
     }
 }
 
-function initFileSwitcher() {
-    const selector = document.getElementById('file-selector');
-    const newBtn = document.getElementById('btn-new-figure');
+function toggleFileBrowser() {
+    const panel = document.getElementById('file-browser-panel');
+    const collapseBtn = document.getElementById('btn-collapse-browser');
+    if (!panel) return;
 
-    if (selector) {
-        selector.addEventListener('change', (e) => {
-            const filePath = e.target.value;
-            if (filePath) {
-                switchToFile(filePath);
-            }
-        });
+    fileBrowserCollapsed = !fileBrowserCollapsed;
+    panel.classList.toggle('collapsed', fileBrowserCollapsed);
+    if (collapseBtn) {
+        collapseBtn.innerHTML = fileBrowserCollapsed ? '&#x276F;' : '&#x276E;';
+        collapseBtn.title = fileBrowserCollapsed ? 'Expand panel' : 'Collapse panel';
     }
+}
+
+function initFileBrowser() {
+    const newBtn = document.getElementById('btn-new-file');
+    const refreshBtn = document.getElementById('btn-refresh-files');
+    const collapseBtn = document.getElementById('btn-collapse-browser');
 
     if (newBtn) {
         newBtn.addEventListener('click', createNewFigure);
     }
 
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', loadFileList);
+    }
+
+    if (collapseBtn) {
+        collapseBtn.addEventListener('click', toggleFileBrowser);
+    }
+
     // Load file list on init
     loadFileList();
 }
 
-// Initialize file switcher after DOM is ready
+// Initialize file browser after DOM is ready
 if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initFileSwitcher);
+    document.addEventListener('DOMContentLoaded', initFileBrowser);
 } else {
-    initFileSwitcher();
+    initFileBrowser();
+}
+
+async function deleteFile(filePath) {
+    if (!filePath) return;
+
+    const fileName = filePath.split('/').pop().replace('.yaml', '');
+    if (!confirm(`Delete "${fileName}" and its associated files (.yaml, .png)?`)) {
+        return;
+    }
+
+    showToast('Deleting...', 'info');
+
+    try {
+        const response = await fetch('/api/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: filePath })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to delete');
+        }
+
+        showToast(`Deleted: ${data.deleted.join(', ')}`, 'success');
+        console.log('[FileBrowser] Deleted:', data.deleted);
+
+        // If we deleted the current file, switch to another or create new
+        if (data.was_current) {
+            if (data.switch_to) {
+                // Switch to another existing file
+                console.log('[FileBrowser] Switching to:', data.switch_to);
+                await switchToFile(data.switch_to);
+            } else {
+                // No other files, create a new one
+                console.log('[FileBrowser] No files left, creating new figure');
+                await createNewFigure();
+            }
+        } else {
+            // Just reload file list
+            loadFileList();
+        }
+
+    } catch (error) {
+        console.error('[FileBrowser] Delete error:', error);
+        showToast('Error: ' + error.message, 'error');
+    }
+}
+
+async function renameFile(filePath) {
+    if (!filePath) return;
+
+    const oldName = filePath.split('/').pop().replace('.yaml', '');
+    const newName = prompt(`Rename "${oldName}" to:`, oldName);
+
+    if (!newName || newName === oldName) return;
+
+    showToast('Renaming...', 'info');
+
+    try {
+        const response = await fetch('/api/rename', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: filePath, new_name: newName })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to rename');
+        }
+
+        showToast(`Renamed to: ${data.new_name}`, 'success');
+        console.log('[FileBrowser] Renamed:', data.renamed);
+
+        // Update current file path if it was the renamed file
+        if (currentFilePath === filePath) {
+            currentFilePath = data.new_name + '.yaml';
+        }
+
+        // Reload file list
+        loadFileList();
+
+    } catch (error) {
+        console.error('[FileBrowser] Rename error:', error);
+        showToast('Error: ' + error.message, 'error');
+    }
 }
 
-console.log('[FileSwitcher] Loaded - Use dropdown to switch figures');
+console.log('[FileBrowser] Loaded - Use file tree to switch figures');
 """
 
 __all__ = ["SCRIPTS_FILES"]

figrecipe/_editor/_templates/_scripts/_files_context_menu.py

@@ -0,0 +1,240 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Files tree right-click context menu JavaScript."""
+
+JS_FILES_CONTEXT_MENU = """
+// ============================================================================
+// Files Tree Context Menu (Right-Click Menu)
+// ============================================================================
+let filesContextMenu = null;
+let filesContextTarget = null;  // Track which file was right-clicked
+
+function createFilesContextMenu() {
+    if (filesContextMenu) return;
+
+    filesContextMenu = document.createElement('div');
+    filesContextMenu.className = 'files-context-menu';
+    filesContextMenu.style.display = 'none';
+    filesContextMenu.innerHTML = `
+        <div class="context-menu-item" data-action="open">
+            Open
+        </div>
+        <div class="context-menu-item" data-action="rename">
+            Rename
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" data-action="duplicate">
+            Duplicate
+        </div>
+        <div class="context-menu-item" data-action="download">
+            Download
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item context-menu-danger" data-action="delete">
+            Delete
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" data-action="new-file">
+            New figure
+        </div>
+        <div class="context-menu-item" data-action="refresh">
+            Refresh list
+        </div>
+    `;
+    document.body.appendChild(filesContextMenu);
+    setupFilesContextMenuListeners();
+}
+
+function setupFilesContextMenuListeners() {
+    if (!filesContextMenu) return;
+
+    // Click on menu items
+    filesContextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+        item.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const action = item.dataset.action;
+            handleFilesContextMenuAction(action);
+            hideFilesContextMenu();
+        });
+    });
+
+    // Hide on click outside
+    document.addEventListener('click', hideFilesContextMenu);
+    document.addEventListener('scroll', hideFilesContextMenu, true);
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') hideFilesContextMenu();
+    });
+}
+
+function handleFilesContextMenuAction(action) {
+    switch (action) {
+        case 'open':
+            if (filesContextTarget) {
+                loadFile(filesContextTarget);
+            }
+            break;
+        case 'rename':
+            if (filesContextTarget) {
+                const newName = prompt('Enter new name:', filesContextTarget.split('/').pop());
+                if (newName && newName !== filesContextTarget.split('/').pop()) {
+                    renameFile(filesContextTarget, newName);
+                }
+            }
+            break;
+        case 'duplicate':
+            if (filesContextTarget) {
+                duplicateFile(filesContextTarget);
+            }
+            break;
+        case 'download':
+            if (filesContextTarget) {
+                downloadFile(filesContextTarget);
+            }
+            break;
+        case 'delete':
+            if (filesContextTarget) {
+                if (confirm(`Delete "${filesContextTarget.split('/').pop()}"?`)) {
+                    deleteFile(filesContextTarget);
+                }
+            }
+            break;
+        case 'new-file':
+            document.getElementById('btn-new-file')?.click();
+            break;
+        case 'refresh':
+            document.getElementById('btn-refresh-files')?.click();
+            break;
+    }
+    filesContextTarget = null;
+}
+
+async function renameFile(filePath, newName) {
+    try {
+        const response = await fetch('/api/rename', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: filePath, new_name: newName })
+        });
+        const result = await response.json();
+        if (result.success) {
+            refreshFileList();
+            showToast('File renamed');
+        } else {
+            showToast(result.error || 'Failed to rename', 'error');
+        }
+    } catch (err) {
+        console.error('Rename error:', err);
+        showToast('Failed to rename', 'error');
+    }
+}
+
+async function duplicateFile(filePath) {
+    try {
+        const response = await fetch('/api/duplicate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: filePath })
+        });
+        const result = await response.json();
+        if (result.success) {
+            refreshFileList();
+            showToast('File duplicated');
+        } else {
+            showToast(result.error || 'Failed to duplicate', 'error');
+        }
+    } catch (err) {
+        console.error('Duplicate error:', err);
+        showToast('Failed to duplicate', 'error');
+    }
+}
+
+function downloadFile(filePath) {
+    window.location.href = `/api/download?path=${encodeURIComponent(filePath)}`;
+}
+
+async function deleteFile(filePath) {
+    try {
+        const response = await fetch('/api/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: filePath })
+        });
+        const result = await response.json();
+        if (result.success) {
+            refreshFileList();
+            showToast('File deleted');
+        } else {
+            showToast(result.error || 'Failed to delete', 'error');
+        }
+    } catch (err) {
+        console.error('Delete error:', err);
+        showToast('Failed to delete', 'error');
+    }
+}
+
+function showFilesContextMenu(e, filePath) {
+    if (!filesContextMenu) createFilesContextMenu();
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    filesContextTarget = filePath;
+
+    const x = e.clientX;
+    const y = e.clientY;
+
+    // Position off-screen to measure
+    filesContextMenu.style.left = '-9999px';
+    filesContextMenu.style.top = '-9999px';
+    filesContextMenu.style.display = 'block';
+
+    const menuWidth = filesContextMenu.offsetWidth;
+    const menuHeight = filesContextMenu.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;
+    }
+
+    filesContextMenu.style.left = `${Math.max(10, left)}px`;
+    filesContextMenu.style.top = `${Math.max(10, top)}px`;
+
+    // Update menu based on context
+    const isFile = filePath && !filePath.endsWith('/');
+    filesContextMenu.querySelectorAll('[data-action="open"], [data-action="rename"], [data-action="duplicate"], [data-action="download"], [data-action="delete"]').forEach(item => {
+        item.style.display = isFile ? 'flex' : 'none';
+    });
+}
+
+function hideFilesContextMenu() {
+    if (filesContextMenu) {
+        filesContextMenu.style.display = 'none';
+    }
+}
+
+// Initialize files context menu
+function initializeFilesContextMenu() {
+    const fileTree = document.getElementById('file-tree');
+    if (fileTree) {
+        fileTree.addEventListener('contextmenu', (e) => {
+            const fileEntry = e.target.closest('.file-tree-entry');
+            if (fileEntry) {
+                const filePath = fileEntry.dataset.path;
+                showFilesContextMenu(e, filePath);
+            } else {
+                // Right-click on empty area
+                showFilesContextMenu(e, null);
+            }
+        });
+    }
+}
+"""
+
+__all__ = ["JS_FILES_CONTEXT_MENU"]
+
+# EOF