✨ 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:
@@ -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' },
|
||||
|
||||
Reference in New Issue
Block a user