MindFlow - Modern Mind Mapping Application

A beautiful, mobile-first mind mapping application built with vanilla JavaScript and modern web standards.

Project Structure & File Utilities

mindflow/
├── index.html              # Main HTML file: Sets up the basic page structure and loads all CSS and JavaScript modules.
├── styles/
│   └── main.css           # All application styles: Contains all CSS rules for styling components, layout, and responsiveness.
├── js/
│   ├── app.js             # Application entry point: Initializes all components and services, orchestrates the application startup.
│   ├── config/
│   │   └── constants.js   # Application constants: Defines global constants for colors, sizes, default texts, etc.
│   ├── state/
│   │   └── StateManager.js # Centralized state: Manages the entire application state (nodes, zoom, selected items) and notifies listeners of changes.
│   ├── utils/
│   │   ├── DOMHelpers.js        # DOM manipulation utilities: Provides helper functions for creating, querying, and manipulating DOM elements.
│   │   ├── StorageManager.js    # Local storage operations: Handles saving and loading mind map data to/from the browser's local storage, and export/import.
│   │   └── NotificationManager.js # Toast notifications: Manages displaying and dismissing on-screen notifications (success, error, info).
│   ├── components/
│   │   ├── Header.js            # Application header: Renders the top bar with the logo and main action buttons (Add Node, Save, Load, etc.).
│   │   ├── Node.js              # Mind map node component: Manages individual mind map nodes, including rendering, text editing, and drag/drop behavior.
│   │   ├── ColorPalette.js     # Color selection component: Displays color options and handles node color changes.
│   │   ├── ZoomControls.js     # Zoom controls: Provides UI buttons and mouse wheel functionality for zooming in/out and resetting the canvas view.
│   │   ├── ConnectionControls.js # Link mode and connection styles: Manages UI for toggling link mode and selecting connection line styles.
│   │   ├── Canvas.js            # Main canvas container: Manages the main drawing area, including the node canvas and the connections canvas, and handles panning.
│   │   ├── MobileMenu.js       # Mobile responsive menu: Provides a slide-up menu with actions for smaller screens.
│   │   └── Modal.js             # Export/Import modals: Manages the display and logic for export and import dialogs, and the loading indicator.
│   └── services/
│       ├── ConnectionRenderer.js # Renders connections between nodes: Handles drawing lines (curved, straight, elbow) and arrowheads on the connections canvas.
│       ├── NodeManager.js       # Manages node lifecycle: Handles creation, deletion, and updating of node data and their corresponding UI components.
│       └── EventHandler.js      # Global event handling: Manages global mouse, touch, and keyboard events for dragging, panning, shortcuts, etc.
└── README.md               # This file: Provides documentation about the project structure, features, and architecture.

Features

• Mobile-First Design: Fully responsive, touch-enabled interface
• Node Management: Create, edit, delete, and connect nodes
• Drag & Drop: Intuitive node positioning
• Connection Styles: Curved, straight, and elbow connections
• Color Customization: 6 predefined colors for nodes
• Zoom & Pan: Navigate large mind maps easily
• Local Storage: Auto-save functionality
• Import/Export: Share mind maps as JSON files
• Keyboard Shortcuts:
  • Enter: Add new node
  • Delete: Remove selected node
  • Ctrl+S or Cmd+S: Save mind map
  • Escape: Exit link mode

Architecture

The application follows a modular component-based architecture:

1. State Management: Centralized state using the StateManager pattern. This ensures a single source of truth and predictable data flow.
2. Component System: Each UI element (e.g., Header, Node, ColorPalette) is a self-contained component responsible for its own rendering and behavior.
3. Service Layer: Business logic (e.g., node management, connection drawing) is separated into service modules, promoting separation of concerns.
4. Event-Driven: Components and services communicate through a subscription model in the StateManager and global browser events, reducing direct dependencies.
5. Singleton Pattern: Used for global services and managers (e.g., stateManager, storageManager) to ensure a single instance throughout the application.

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Android)

Development

The application uses vanilla JavaScript with no external dependencies. All code is modular and follows ES6+ standards.

Key Design Decisions

• No Build Tools: Direct browser execution for simplicity and ease of setup.
• Component Initialization: Components self-register and initialize on DOMContentLoaded, ensuring they are ready when the page loads.
• Global Access: Key functions and component instances are exposed on the window object for easy access and backward compatibility with HTML onclick handlers.
• Mobile-First: Touch events and responsive CSS are prioritized to ensure a good user experience on all devices.

Usage

Simply open index.html in a modern web browser. The application will:

1. Load any saved mind maps from local storage.
2. Create a central node if no saved map exists.
3. Enable all interactive features for creating and managing your mind map.

License

MIT License - Feel free to use and modify as needed.