x-ipe 1.0.23__py3-none-any.whl → 1.0.25__py3-none-any.whl

x_ipe/static/js/features/tree-drag.js

@@ -0,0 +1,227 @@
+/**
+ * TreeDragManager - Drag-drop file/folder reorganization
+ * FEATURE-008 CR-006: Folder Tree UX Enhancement
+ * 
+ * Provides:
+ * - Drag-and-drop to move files/folders
+ * - Visual feedback (dragging state, valid/invalid targets)
+ * - Validation (prevent drop into self/children)
+ * - API integration for move operations
+ */
+class TreeDragManager {
+    constructor(options) {
+        this.treeContainer = options.treeContainer;
+        this.onMove = options.onMove; // Callback: async (sourcePath, targetPath) => boolean
+        this.onMoveComplete = options.onMoveComplete || null; // Called after successful move
+        this.draggedItem = null;
+        this.draggedPath = null;
+        this.draggedType = null;
+    }
+
+    /**
+     * Initialize drag-drop functionality
+     */
+    init() {
+        this._bindEvents();
+    }
+
+    /**
+     * Bind drag-drop event listeners using event delegation
+     */
+    _bindEvents() {
+        // Use event delegation on tree container
+        this.treeContainer.addEventListener('dragstart', this._onDragStart.bind(this));
+        this.treeContainer.addEventListener('dragend', this._onDragEnd.bind(this));
+        this.treeContainer.addEventListener('dragover', this._onDragOver.bind(this));
+        this.treeContainer.addEventListener('dragleave', this._onDragLeave.bind(this));
+        this.treeContainer.addEventListener('drop', this._onDrop.bind(this));
+    }
+
+    /**
+     * Make an item draggable
+     * @param {HTMLElement} item - Tree item element
+     */
+    enableDrag(item) {
+        item.setAttribute('draggable', 'true');
+        item.dataset.draggable = 'true';
+    }
+
+    /**
+     * Handle drag start
+     */
+    _onDragStart(e) {
+        const item = e.target.closest('.tree-item[data-draggable="true"]');
+        if (!item) return;
+
+        this.draggedItem = item;
+        this.draggedPath = item.dataset.path;
+        this.draggedType = item.dataset.type;
+
+        // Set drag data
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', this.draggedPath);
+
+        // Add dragging class after a small delay (to allow drag image to be captured)
+        setTimeout(() => {
+            item.classList.add('dragging');
+        }, 0);
+    }
+
+    /**
+     * Handle drag end
+     */
+    _onDragEnd(e) {
+        if (this.draggedItem) {
+            this.draggedItem.classList.remove('dragging');
+        }
+        
+        // Clear all drag states
+        this.treeContainer.querySelectorAll('.drag-over, .drag-invalid').forEach(el => {
+            el.classList.remove('drag-over', 'drag-invalid');
+        });
+
+        this.draggedItem = null;
+        this.draggedPath = null;
+        this.draggedType = null;
+    }
+
+    /**
+     * Handle drag over
+     */
+    _onDragOver(e) {
+        e.preventDefault();
+        
+        if (!this.draggedItem) return;
+
+        const target = e.target.closest('.tree-item[data-type="folder"]');
+        if (!target || target === this.draggedItem) {
+            e.dataTransfer.dropEffect = 'none';
+            return;
+        }
+
+        const targetPath = target.dataset.path;
+        
+        if (this._isValidDrop(targetPath)) {
+            e.dataTransfer.dropEffect = 'move';
+            target.classList.add('drag-over');
+            target.classList.remove('drag-invalid');
+        } else {
+            e.dataTransfer.dropEffect = 'none';
+            target.classList.add('drag-invalid');
+            target.classList.remove('drag-over');
+        }
+    }
+
+    /**
+     * Handle drag leave
+     */
+    _onDragLeave(e) {
+        const target = e.target.closest('.tree-item');
+        if (target) {
+            // Only remove if we're actually leaving (not entering a child)
+            const relatedTarget = e.relatedTarget;
+            if (!target.contains(relatedTarget)) {
+                target.classList.remove('drag-over', 'drag-invalid');
+            }
+        }
+    }
+
+    /**
+     * Handle drop
+     */
+    async _onDrop(e) {
+        e.preventDefault();
+        
+        const target = e.target.closest('.tree-item[data-type="folder"]');
+        
+        if (!target || !this.draggedItem) {
+            return;
+        }
+
+        const targetPath = target.dataset.path;
+        
+        // Clear visual states
+        target.classList.remove('drag-over', 'drag-invalid');
+
+        if (!this._isValidDrop(targetPath)) {
+            this._showInvalidFeedback(target);
+            return;
+        }
+
+        // Perform the move
+        const sourcePath = this.draggedPath;
+        
+        try {
+            // Show loading state
+            this.draggedItem.classList.add('moving');
+            
+            if (this.onMove) {
+                const success = await this.onMove(sourcePath, targetPath);
+                
+                if (success && this.onMoveComplete) {
+                    this.onMoveComplete(sourcePath, targetPath);
+                }
+            }
+        } catch (error) {
+            console.error('Move failed:', error);
+            this._showInvalidFeedback(this.draggedItem);
+        } finally {
+            if (this.draggedItem) {
+                this.draggedItem.classList.remove('moving');
+            }
+        }
+    }
+
+    /**
+     * Check if drop is valid
+     * @param {string} targetPath - Target folder path
+     * @returns {boolean}
+     */
+    _isValidDrop(targetPath) {
+        if (!this.draggedPath) return false;
+        
+        // Cannot drop onto self
+        if (this.draggedPath === targetPath) return false;
+        
+        // Cannot drop folder into its own child
+        if (this.draggedType === 'folder') {
+            if (targetPath.startsWith(this.draggedPath + '/')) {
+                return false;
+            }
+        }
+        
+        return true;
+    }
+
+    /**
+     * Show invalid drop feedback (shake animation)
+     * @param {HTMLElement} target - Target element
+     */
+    _showInvalidFeedback(target) {
+        if (!target) return;
+        
+        target.classList.add('drag-invalid');
+        target.style.animation = 'shake 0.3s ease';
+        
+        setTimeout(() => {
+            target.classList.remove('drag-invalid');
+            target.style.animation = '';
+        }, 300);
+    }
+
+    /**
+     * Destroy the drag manager
+     */
+    destroy() {
+        this.treeContainer.removeEventListener('dragstart', this._onDragStart);
+        this.treeContainer.removeEventListener('dragend', this._onDragEnd);
+        this.treeContainer.removeEventListener('dragover', this._onDragOver);
+        this.treeContainer.removeEventListener('dragleave', this._onDragLeave);
+        this.treeContainer.removeEventListener('drop', this._onDrop);
+    }
+}
+
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = TreeDragManager;
+}

x_ipe/static/js/features/tree-search.js

@@ -0,0 +1,228 @@
+/**
+ * TreeSearchManager - Search/filter tree functionality
+ * FEATURE-008 CR-006: Folder Tree UX Enhancement
+ * 
+ * Provides:
+ * - Search bar in tree header
+ * - Real-time filtering with debounce
+ * - Preserves parent folder context for matches
+ * - Clear button and keyboard shortcuts
+ */
+class TreeSearchManager {
+    constructor(options) {
+        this.treeContainer = options.treeContainer;
+        this.onSearch = options.onSearch || null; // Optional callback for API-based search
+        this.searchInput = null;
+        this.clearBtn = null;
+        this.debounceTimer = null;
+        this.debounceDelay = 150;
+    }
+
+    /**
+     * Initialize search functionality
+     */
+    init() {
+        this._createSearchBar();
+        this._bindEvents();
+    }
+
+    /**
+     * Create the search bar UI
+     */
+    _createSearchBar() {
+        const header = this.treeContainer.closest('.workplace-sidebar-content')
+            ?.querySelector('.workplace-sidebar-header');
+        
+        if (!header) {
+            console.warn('TreeSearchManager: Could not find sidebar header');
+            return;
+        }
+
+        // Check if search bar already exists
+        if (header.parentElement.querySelector('.tree-search-container')) {
+            this.searchInput = header.parentElement.querySelector('.tree-search-input');
+            this.clearBtn = header.parentElement.querySelector('.tree-search-clear');
+            return;
+        }
+
+        const searchHtml = `
+            <div class="tree-search-container">
+                <div class="tree-search-wrapper">
+                    <i class="bi bi-search tree-search-icon"></i>
+                    <input type="text" 
+                           class="tree-search-input" 
+                           placeholder="Filter files and folders..."
+                           aria-label="Search files and folders">
+                    <button class="tree-search-clear" 
+                            type="button" 
+                            title="Clear search"
+                            style="display: none;">
+                        <i class="bi bi-x-lg"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        header.insertAdjacentHTML('afterend', searchHtml);
+        this.searchInput = header.nextElementSibling.querySelector('.tree-search-input');
+        this.clearBtn = header.nextElementSibling.querySelector('.tree-search-clear');
+    }
+
+    /**
+     * Bind event listeners
+     */
+    _bindEvents() {
+        if (!this.searchInput) return;
+
+        // Input handler with debounce
+        this.searchInput.addEventListener('input', (e) => {
+            const query = e.target.value;
+            
+            // Show/hide clear button
+            this.clearBtn.style.display = query ? 'flex' : 'none';
+            
+            // Debounce the filter
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => {
+                this._filterTree(query);
+            }, this.debounceDelay);
+        });
+
+        // Clear button handler
+        this.clearBtn.addEventListener('click', () => {
+            this.clear();
+        });
+
+        // Keyboard shortcuts
+        this.searchInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.clear();
+                this.searchInput.blur();
+            }
+        });
+    }
+
+    /**
+     * Filter tree items based on query
+     * @param {string} query - Search query
+     */
+    _filterTree(query) {
+        const normalizedQuery = query.toLowerCase().trim();
+        
+        // If callback provided, use API-based search
+        if (this.onSearch) {
+            this.onSearch(normalizedQuery);
+            return;
+        }
+
+        // Client-side filtering
+        const items = this.treeContainer.querySelectorAll('.tree-item');
+        
+        if (!normalizedQuery) {
+            // Show all items and collapse folders
+            items.forEach(item => {
+                item.style.display = '';
+                item.classList.remove('search-match', 'search-parent', 'expanded');
+                const childContainer = item.querySelector('.tree-children');
+                if (childContainer) {
+                    childContainer.style.display = 'none';
+                }
+            });
+            return;
+        }
+
+        // Find matching items and their parent paths
+        const matchingPaths = new Set();
+        const parentPaths = new Set();
+
+        items.forEach(item => {
+            const label = item.querySelector('.tree-label');
+            const name = label?.textContent?.toLowerCase() || '';
+            const path = item.dataset.path;
+
+            if (name.includes(normalizedQuery)) {
+                matchingPaths.add(path);
+                
+                // Add all parent paths for context
+                if (path) {
+                    const parts = path.split('/');
+                    for (let i = 1; i < parts.length; i++) {
+                        parentPaths.add(parts.slice(0, i).join('/'));
+                    }
+                }
+            }
+        });
+
+        // Apply visibility and styling
+        items.forEach(item => {
+            const path = item.dataset.path;
+            const isMatch = matchingPaths.has(path);
+            const isParent = parentPaths.has(path);
+            
+            if (isMatch || isParent) {
+                item.style.display = '';
+                item.classList.toggle('search-match', isMatch);
+                item.classList.toggle('search-parent', isParent && !isMatch);
+                
+                // Expand parent folders
+                if (isParent) {
+                    const childContainer = item.querySelector('.tree-children');
+                    if (childContainer) {
+                        childContainer.style.display = 'block';
+                    }
+                    item.classList.add('expanded');
+                }
+            } else {
+                item.style.display = 'none';
+                item.classList.remove('search-match', 'search-parent');
+            }
+        });
+    }
+
+    /**
+     * Clear the search
+     */
+    clear() {
+        if (!this.searchInput) return;
+        
+        this.searchInput.value = '';
+        this.clearBtn.style.display = 'none';
+        this._filterTree('');
+    }
+
+    /**
+     * Get current search query
+     * @returns {string}
+     */
+    getQuery() {
+        return this.searchInput?.value || '';
+    }
+
+    /**
+     * Set search query programmatically
+     * @param {string} query 
+     */
+    setQuery(query) {
+        if (!this.searchInput) return;
+        
+        this.searchInput.value = query;
+        this.clearBtn.style.display = query ? 'flex' : 'none';
+        this._filterTree(query);
+    }
+
+    /**
+     * Destroy the search manager
+     */
+    destroy() {
+        clearTimeout(this.debounceTimer);
+        const container = this.searchInput?.closest('.tree-search-container');
+        if (container) {
+            container.remove();
+        }
+    }
+}
+
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = TreeSearchManager;
+}