Update index.html

index.html

@@ -236,7 +236,92 @@
         .legend-color.document { background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%); }
         .legend-color.office { background: linear-gradient(135deg, #00b894 0%, #00a085 100%); }
         .legend-color.code { background: linear-gradient(135deg, #81ecec 0%, #00cec9 100%); }
-        .legend-color.other { background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); }
+        .treemap-node.selected {
+            border: 3px solid #667eea !important;
+            z-index: 99;
+        }
+
+        .context-menu {
+            position: fixed;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+            padding: 8px 0;
+            z-index: 10000;
+            min-width: 200px;
+            border: 1px solid #e9ecef;
+            display: none;
+        }
+
+        .context-menu-item {
+            padding: 10px 16px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 14px;
+        }
+
+        .context-menu-item:hover {
+            background-color: #f8f9fa;
+        }
+
+        .context-menu-item.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .context-menu-item.disabled:hover {
+            background-color: white;
+        }
+
+        .context-menu-separator {
+            height: 1px;
+            background-color: #e9ecef;
+            margin: 4px 0;
+        }
+
+        .file-operations-panel {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+            padding: 20px;
+            max-width: 300px;
+            z-index: 1000;
+            display: none;
+        }
+
+        .operations-header {
+            font-weight: bold;
+            margin-bottom: 10px;
+            color: #667eea;
+        }
+
+        .space-savings {
+            background: #e8f5e8;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            border-left: 3px solid #28a745;
+        }
+
+        .warning-note {
+            background: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 5px;
+            padding: 15px;
+            margin: 20px;
+            color: #856404;
+        }
+
+        .warning-note h4 {
+            margin: 0 0 10px 0;
+            color: #856404;
+        }
 
         .tooltip {
             position: absolute;
@@ -381,19 +466,63 @@
         <div class="visualization-area" id="visualizationArea">
             <div style="text-align: center; padding: 60px; color: #999;">
                 <h3>🎯 Ready to Explore</h3>
-                <p>Select a folder above to visualize its structure, or try the demo data to see how it works!</p>
+                <p>Select a folder above to visualize its structure, or try the demo data!</p>
+                <p style="font-size: 0.9em; margin-top: 10px;">💡 <strong>Tip:</strong> Right-click any file or folder for operations menu</p>
             </div>
         </div>
     </div>
 
     <div class="tooltip" id="tooltip"></div>
 
+    <div class="context-menu" id="contextMenu">
+        <div class="context-menu-item" onclick="app.copyPath()">
+            📋 Copy Path
+        </div>
+        <div class="context-menu-item" onclick="app.showFileInfo()">
+            ℹ️ File Info
+        </div>
+        <div class="context-menu-separator"></div>
+        <div class="context-menu-item disabled" onclick="app.showDeleteSimulation()">
+            🗑️ Simulate Delete
+        </div>
+        <div class="context-menu-item disabled">
+            ✂️ Move File (Browser Limited)
+        </div>
+        <div class="context-menu-separator"></div>
+        <div class="context-menu-item" onclick="app.selectSimilarFiles()">
+            🔍 Select Similar Files
+        </div>
+    </div>
+
+    <div class="file-operations-panel" id="operationsPanel">
+        <div class="operations-header">File Operations</div>
+        <div id="operationContent">
+            Select a file or folder to see available operations
+        </div>
+        <button onclick="app.closeOperationsPanel()" style="margin-top: 10px; padding: 5px 10px; border: none; background: #667eea; color: white; border-radius: 3px; cursor: pointer;">Close</button>
+    </div>
+
+    <div class="warning-note">
+        <h4>⚠️ Browser Security Limitations</h4>
+        <p>Web browsers cannot directly modify files on your computer for security reasons. This tool provides:</p>
+        <ul>
+            <li>✅ Local file analysis (no uploads)</li>
+            <li>✅ Visual space usage mapping</li>
+            <li>✅ File information and path copying</li>
+            <li>❌ Cannot delete/move files directly</li>
+        </ul>
+        <p><strong>For actual file operations:</strong> Use your system's file manager with the paths this tool provides.</p>
+    </div>
+
     <script>
         class SquarifiedTreemapExplorer {
             constructor() {
                 this.tooltip = document.getElementById('tooltip');
                 this.visualizationArea = document.getElementById('visualizationArea');
                 this.folderInput = document.getElementById('folderInput');
+                this.contextMenu = document.getElementById('contextMenu');
+                this.operationsPanel = document.getElementById('operationsPanel');
+                this.selectedFileData = null;
                 this.fileData = null;
                 this.setupEventListeners();
             }
@@ -404,6 +533,20 @@
                     this.tooltip.style.top = e.pageY + 10 + 'px';
                 });
 
+                // Hide context menu on click elsewhere
+                document.addEventListener('click', (e) => {
+                    if (!this.contextMenu.contains(e.target)) {
+                        this.contextMenu.style.display = 'none';
+                    }
+                });
+
+                // Prevent default context menu
+                document.addEventListener('contextmenu', (e) => {
+                    if (e.target.classList.contains('treemap-node')) {
+                        e.preventDefault();
+                    }
+                });
+
                 // Listen for file input changes
                 this.folderInput.addEventListener('change', (e) => {
                     if (e.target.files.length > 0) {
@@ -914,6 +1057,222 @@
                 element.addEventListener('mouseleave', () => {
                     this.tooltip.classList.remove('visible');
                 });
+
+                // Add right-click context menu
+                element.addEventListener('contextmenu', (e) => {
+                    e.preventDefault();
+                    this.selectedFileData = data;
+                    this.showContextMenu(e.pageX, e.pageY);
+                });
+
+                // Add click handler for selection
+                element.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.selectedFileData = data;
+                    this.highlightSelection(element);
+                });
+            }
+
+            showContextMenu(x, y) {
+                this.contextMenu.style.left = x + 'px';
+                this.contextMenu.style.top = y + 'px';
+                this.contextMenu.style.display = 'block';
+
+                // Enable/disable menu items based on selection
+                const deleteItem = this.contextMenu.querySelector('.context-menu-item.disabled');
+                if (this.selectedFileData) {
+                    deleteItem.classList.remove('disabled');
+                    deleteItem.onclick = () => this.showDeleteSimulation();
+                }
+            }
+
+            highlightSelection(element) {
+                // Remove previous selection
+                document.querySelectorAll('.treemap-node.selected').forEach(el => {
+                    el.classList.remove('selected');
+                    el.style.border = '1px solid #fff';
+                });
+
+                // Highlight selected element
+                element.classList.add('selected');
+                element.style.border = '3px solid #667eea';
+            }
+
+            copyPath() {
+                if (!this.selectedFileData) return;
+                
+                navigator.clipboard.writeText(this.selectedFileData.path).then(() => {
+                    this.showNotification(`📋 Copied: ${this.selectedFileData.path}`);
+                }).catch(() => {
+                    // Fallback for older browsers
+                    const textArea = document.createElement('textarea');
+                    textArea.value = this.selectedFileData.path;
+                    document.body.appendChild(textArea);
+                    textArea.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(textArea);
+                    this.showNotification(`📋 Copied: ${this.selectedFileData.path}`);
+                });
+                this.contextMenu.style.display = 'none';
+            }
+
+            showFileInfo() {
+                if (!this.selectedFileData) return;
+                
+                const data = this.selectedFileData;
+                let content = `<div class="operations-header">📄 File Information</div>`;
+                content += `<strong>Name:</strong> ${data.name}<br>`;
+                content += `<strong>Type:</strong> ${data.type}`;
+                
+                if (data.type === 'file') {
+                    const fileType = this.getFileTypeCategory(data.name);
+                    const typeLabels = {
+                        image: '🖼️ Image',
+                        video: '🎥 Video', 
+                        audio: '🎵 Audio',
+                        document: '📄 Document',
+                        office: '📊 Office',
+                        code: '💻 Code',
+                        other: '📦 Other'
+                    };
+                    content += ` (${typeLabels[fileType]})`;
+                }
+                
+                content += `<br><strong>Size:</strong> ${this.formatFileSize(data.size)}<br>`;
+                content += `<strong>Path:</strong> <code style="background: #f8f9fa; padding: 2px 4px; border-radius: 3px; font-size: 12px; word-break: break-all;">${data.path}</code><br>`;
+                
+                if (data.type === 'file' && data.lastModified) {
+                    content += `<strong>Modified:</strong> ${new Date(data.lastModified).toLocaleString()}<br>`;
+                }
+                
+                if (data.children) {
+                    content += `<strong>Items:</strong> ${data.children.length}<br>`;
+                    content += `<strong>Subdirectories:</strong> ${data.children.filter(c => c.type === 'directory').length}<br>`;
+                    content += `<strong>Files:</strong> ${data.children.filter(c => c.type === 'file').length}`;
+                }
+
+                document.getElementById('operationContent').innerHTML = content;
+                this.operationsPanel.style.display = 'block';
+                this.contextMenu.style.display = 'none';
+            }
+
+            showDeleteSimulation() {
+                if (!this.selectedFileData) return;
+                
+                const data = this.selectedFileData;
+                let content = `<div class="operations-header">🗑️ Delete Simulation</div>`;
+                content += `<p><strong>Would delete:</strong> ${data.name}</p>`;
+                content += `<div class="space-savings">`;
+                content += `💾 <strong>Space to be freed:</strong> ${this.formatFileSize(data.size)}<br>`;
+                
+                if (data.type === 'directory' && data.children) {
+                    const fileCount = this.countFiles(data);
+                    content += `📁 <strong>Items to be removed:</strong> ${fileCount.files} files, ${fileCount.folders} folders`;
+                }
+                content += `</div>`;
+                
+                content += `<p style="margin-top: 10px; font-size: 12px; color: #666;">`;
+                content += `<strong>To actually delete:</strong><br>`;
+                content += `1. Copy path: <code style="background: #f8f9fa; padding: 2px 4px; border-radius: 3px; font-size: 11px;">${data.path}</code><br>`;
+                content += `2. Use your system's file manager<br>`;
+                content += `3. Navigate to the copied path<br>`;
+                content += `4. Delete the file/folder manually`;
+                content += `</p>`;
+
+                document.getElementById('operationContent').innerHTML = content;
+                this.operationsPanel.style.display = 'block';
+                this.contextMenu.style.display = 'none';
+            }
+
+            selectSimilarFiles() {
+                if (!this.selectedFileData || this.selectedFileData.type !== 'file') return;
+                
+                const extension = this.selectedFileData.name.toLowerCase().split('.').pop();
+                const similarFiles = this.findFilesByExtension(this.fileData, extension);
+                
+                let content = `<div class="operations-header">🔍 Similar Files (.${extension})</div>`;
+                content += `<p>Found ${similarFiles.length} files with .${extension} extension:</p>`;
+                content += `<div style="max-height: 200px; overflow-y: auto; margin: 10px 0;">`;
+                
+                let totalSize = 0;
+                similarFiles.forEach(file => {
+                    totalSize += file.size;
+                    content += `<div style="padding: 5px; border-bottom: 1px solid #eee; font-size: 12px;">`;
+                    content += `<strong>${file.name}</strong><br>`;
+                    content += `<span style="color: #666;">${file.path} - ${this.formatFileSize(file.size)}</span>`;
+                    content += `</div>`;
+                });
+                
+                content += `</div>`;
+                content += `<div class="space-savings">`;
+                content += `📊 <strong>Total size:</strong> ${this.formatFileSize(totalSize)}`;
+                content += `</div>`;
+
+                document.getElementById('operationContent').innerHTML = content;
+                this.operationsPanel.style.display = 'block';
+                this.contextMenu.style.display = 'none';
+            }
+
+            findFilesByExtension(node, extension) {
+                let files = [];
+                
+                if (node.type === 'file' && node.name.toLowerCase().endsWith(`.${extension}`)) {
+                    files.push(node);
+                }
+                
+                if (node.children) {
+                    for (const child of node.children) {
+                        files = files.concat(this.findFilesByExtension(child, extension));
+                    }
+                }
+                
+                return files;
+            }
+
+            countFiles(node) {
+                let count = { files: 0, folders: 0 };
+                
+                if (node.type === 'file') {
+                    count.files = 1;
+                } else if (node.type === 'directory') {
+                    count.folders = 1;
+                    if (node.children) {
+                        for (const child of node.children) {
+                            const childCount = this.countFiles(child);
+                            count.files += childCount.files;
+                            count.folders += childCount.folders;
+                        }
+                    }
+                }
+                
+                return count;
+            }
+
+            closeOperationsPanel() {
+                this.operationsPanel.style.display = 'none';
+            }
+
+            showNotification(message) {
+                // Create temporary notification
+                const notification = document.createElement('div');
+                notification.style.cssText = `
+                    position: fixed;
+                    top: 20px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    background: #28a745;
+                    color: white;
+                    padding: 10px 20px;
+                    border-radius: 5px;
+                    z-index: 10001;
+                    font-size: 14px;
+                `;
+                notification.textContent = message;
+                document.body.appendChild(notification);
+                
+                setTimeout(() => {
+                    document.body.removeChild(notification);
+                }, 3000);
             }
 
             createTooltipContent(data) {