- Introduction
- Features
- Project Structure
- Getting Started
- Usage
- Components
- State Management
- Detailed Component Interactions
- Styling
- Build and Deployment
- Contributing
- License
- Acknowledgements
node.app is an interactive, node-based application built with Svelte and Vite. It allows users to create, manipulate, and connect various types of nodes in a canvas-like environment. This project demonstrates the power and flexibility of Svelte for building complex, interactive user interfaces.
The core feature of the application is an interactive canvas where users can drag and drop nodes. Each node can be moved around freely, allowing for a highly customizable layout.
The application supports various node types, each with unique functionalities:
- Basic Node: A simple node with basic properties and a label.
- Make Node: A node that allows users to create new basic nodes.
- Dark Node: A node that toggles the application's dark mode.
- Text Node: A node for displaying and editing simple text content.
- Image Node: A node for displaying images.
- Calculator Node: A node with basic calculator functionalities.
- Todo Node: A node for managing a todo list.
- Budget Node: A comprehensive budgeting tool for tracking income and expenses, featuring:
- Transaction history with categories
- Income vs. expenses tracking
- Real-time balance calculations
- Date-based transaction logging
- Debt Node: A debt management tool with detailed tracking features:
- Credit card and loan tracking
- Credit utilization monitoring
- Minimum payment calculations
- Total debt overview
- Individual debt item management
- Multi-Node Selection: Select multiple nodes using Ctrl/Cmd+Click
- Node Locking: Lock nodes to prevent accidental movement
- Node Color Customization: Change colors of individual or multiple selected nodes
- Bulk Operations: Apply changes to multiple selected nodes simultaneously
- Node Labels: Custom labels for better organization
- Z-Index Management: Control which nodes appear on top
- Dark Mode Toggle: Switch between light and dark modes using the Dark Node
- Canvas Color: Customize the canvas background color for both light and dark modes
- Node Colors: Personalize node colors via context menu
- Visual Feedback: Highlights and shadows for selected and interactive states
- Resizable Interface: Drag the panel edge to adjust width
- Collapsible Design: Toggle panel visibility with tab
- Persistent Width: Remember panel size between sessions
- Quick Access: Efficiently create new nodes with drag-and-drop
- Pan Control: Navigate large canvas layouts
- Zoom Functionality: Adjust view scale for detail work
- Search Navigation: Quickly locate specific nodes
- Context Menus: Right-click access to common actions
- Local Storage: Persistent storage of node layouts and settings
- Context Menus: Advanced node and canvas operations
- Search Functionality: Quick node location and navigation
- Responsive Design: Adapts to different screen sizes
- State Management: Comprehensive Svelte store system
node-APP/
├── src/
│ ├── components/
│ │ ├── Canvas.svelte
│ │ ├── ContextMenu.svelte
│ │ ├── DarkNode.svelte
│ │ ├── ImageNode.svelte
│ │ ├── MakeNode.svelte
│ │ ├── Node.svelte
│ │ ├── NodeFactory.svelte
│ │ ├── SearchBar.svelte
│ │ ├── TextNode.svelte
│ │ ├── TodoNode.svelte
│ │ ├── BudgetNode.svelte
│ │ ├── DebtNode.svelte
│ │ ├── CalculatorNode.svelte
│ │ └── debt/
│ │ ├── DebtForm.svelte
│ │ ├── DebtItem.svelte
│ │ └── DebtItemEditor.svelte
│ ├── stores/
│ │ ├── darkMode.js
│ │ ├── nodeFactoryStore.js
│ │ ├── nodes.js
│ │ ├── panStore.js
│ │ ├── selectionStore.js
│ │ ├── zoomStore.js
│ │ └── zIndex.js
│ ├── utils/
│ │ ├── contextMenuHandlers.js
│ │ ├── NodeManager.js
│ │ └── nodeHandlers.js
│ ├── App.svelte
│ ├── app.css
│ └── main.js
├── public/
│ └── (static assets)
├── index.html
├── package.json
├── vite.config.js
├── svelte.config.js
└── README.md
- Node.js (v14.0.0 or later)
- npm (v6.0.0 or later)
-
Clone the repository:
git clone https://github.com/Periskulum/node-APP.git cd node-APP -
Install dependencies:
npm install
To start the development server:
npm run dev
The application will be available at http://localhost:5173 (or another port if 5173 is in use).
- Drag nodes from the node factory onto the canvas
- Use Ctrl/Cmd+Click to select multiple nodes
- Right-click nodes or canvas for context menu options
- Drag the node factory tab to resize the panel
- Lock/unlock nodes to prevent accidental movement
- Use the zoom controls to adjust the view
- Customize node and canvas colors
- Create and manage budgets with the Budget Node
- Track debts and credit utilization with the Debt Node
- Use the search bar to quickly find nodes
- Save and load your workspace automatically
- Canvas.svelte: Main canvas component for rendering and managing nodes.
- Node.svelte: Base node component providing structure and behavior for all node types.
- NodeFactory.svelte: Manages node creation and factory panel interface.
- DarkNode.svelte: Toggles dark mode and theme settings.
- MakeNode.svelte: Interface for creating new nodes with configurable properties.
- SearchBar.svelte: Quick node location and navigation.
- TextNode.svelte: Text content display and editing.
- ImageNode.svelte: Image display from URLs.
- CalculatorNode.svelte: Basic arithmetic operations.
- TodoNode.svelte: Task management and lists.
- BudgetNode.svelte: Complete budget tracking and management.
- DebtNode.svelte: Debt and credit tracking system.
- DebtForm.svelte: Debt entry and editing interface.
- DebtItem.svelte: Individual debt item display and management.
- ContextMenu.svelte: Right-click menu options.
The application uses Svelte stores for state management:
- nodes.js: Central node state management
- darkMode.js: Theme state control
- panStore.js: Canvas navigation state
- zoomStore.js: View scaling control
- selectionStore.js: Multi-node selection state
- zIndex.js: Node layering management
- nodeFactoryStore.js: Factory panel state
- Canvas.svelte: Acts as the parent component, managing the layout and interactions of all nodes. It passes down properties and event handlers to child components like Node.svelte.
- NodeFactory.svelte: Communicates with Canvas.svelte to add new nodes. It emits events that Canvas.svelte listens to for creating nodes.
- Node.svelte: Receives data from Canvas.svelte and updates its state based on user interactions. It can also emit events to notify Canvas.svelte of changes.
- SearchBar.svelte: Emits events to Canvas.svelte to highlight or navigate to specific nodes.
- Node.svelte: Emits events like
nodeMove,nodeClick, andnodeDeleteto Canvas.svelte. - Canvas.svelte: Listens for events from Node.svelte and NodeFactory.svelte to update the state of the canvas and nodes.
- Canvas.svelte: Handles events emitted by Node.svelte to update the position, selection, or deletion of nodes. It also handles events from NodeFactory.svelte to add new nodes.
- nodes.js: The central store for managing the state of all nodes. Changes in this store affect all components that depend on node data.
- darkMode.js: Affects the theme of the entire application. Components like DarkNode.svelte can toggle this state, affecting the appearance of all components.
- When a node's position or properties are updated in Node.svelte, these changes are propagated to Canvas.svelte and then to the nodes.js store.
- Changes in the nodes.js store are reflected across all components that subscribe to this store, ensuring a consistent state throughout the application.
Styles are scoped to individual components using Svelte's built-in style encapsulation. Global styles are defined in src/app.css.
To build the application for production:
npm run build
This will generate a production-ready build in the dist directory.
To preview the production build:
npm run preview
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.