Enhanced mindmap visualization with professional UI

🎯 Major Features Added:
- Snap to grid functionality (20x20 grid, default enabled)
- Tidy Up button for instant node reorganization
- Copy node values with one-click clipboard integration
- HTML rendering toggle (render/raw modes for HTML content)
- Accordion-style collapsible panels (Controls & Legend)
- Automatic fitView on fullscreen toggle with smooth animations

🎨 UI/UX Improvements:
- Professional accordion layout with exclusive panel opening
- Consistent button alignment and styling across all controls
- Legend moved to top-right with icon+color indicators
- Vertical button stack: Controls → Legend → Tidy Up → Fullscreen
- Smooth transitions and hover effects throughout
- Clean, uncluttered interface with folded panels by default

🔧 Technical Enhancements:
- Fixed ResizeObserver errors with proper error handling
- Optimized React rendering with memo and useCallback
- Debounced DOM updates to prevent infinite loops
- React Flow instance management for programmatic control
- Removed redundant Raw Input button for cleaner interface

🚀 Performance & Stability:
- Error boundary implementation for ResizeObserver issues
- Proper cleanup of event listeners and timeouts
- Memoized components to prevent unnecessary re-renders
- Smooth 300ms animations for all state transitions
This commit is contained in:
dwindown
2025-09-21 12:33:39 +07:00
parent 82d14622ac
commit d3ca407777
9 changed files with 1750 additions and 21 deletions

View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Search, FileText, Database, LinkIcon, Hash, FileSpreadsheet, Wand2, GitCompare, Home, ChevronLeft, ChevronRight, Type } from 'lucide-react';
import { Search, FileText, Database, LinkIcon, Hash, FileSpreadsheet, Wand2, GitCompare, Home, ChevronLeft, ChevronRight, Type, Edit3 } from 'lucide-react';
const ToolSidebar = () => {
const location = useLocation();
@@ -9,8 +9,7 @@ const ToolSidebar = () => {
const tools = [
{ path: '/', name: 'Home', icon: Home, description: 'Back to homepage' },
{ path: '/json', name: 'JSON Tool', icon: FileText, description: 'Format & validate JSON' },
{ path: '/serialize', name: 'Serialize Tool', icon: Database, description: 'PHP serialize/unserialize' },
{ path: '/object-editor', name: 'Object Editor', icon: Edit3, description: 'Visual editor for JSON & PHP objects' },
{ path: '/url', name: 'URL Tool', icon: LinkIcon, description: 'URL encode/decode' },
{ path: '/base64', name: 'Base64 Tool', icon: Hash, description: 'Base64 encode/decode' },
{ path: '/csv-json', name: 'CSV/JSON Tool', icon: FileSpreadsheet, description: 'Convert CSV ↔ JSON' },