Visual Node Editor

A modern, web-based presentation creation tool that combines the familiarity of traditional slide-based presentations with the flexibility of a visual node editor.

Overview

Visual Node Editor is a React/TypeScript application that allows users to create dynamic, interactive presentations using a node-and-connection metaphor. Unlike traditional linear slide decks, this tool enables non-linear presentation flows with rich animations and interactive elements.

Features

🎨 Visual Node-Based Design

• Drag-and-drop interface for adding presentation elements
• Visual connections between elements with animated effects
• Non-linear presentation flows
• Snap-to-grid functionality for precise alignment
• Advanced zoom and pan controls with keyboard shortcuts

📝 Rich Content Types

• Shapes: Rectangle, circle, diamond
• Text Elements: Titles, subtitles, body text, code blocks, bullet lists,

• Media:

• Icons: Extensive icon library with customization options
• Lines:

✨ Animation System

• Transition effects (fade, slide, scale, draw)
• Line animations (particles, energy, chase effects)
• Configurable animation speeds and intensities
• Page-to-page transitions

🎤 Presentation Mode

• Full-screen presentation view
• Drawing and annotation tools (fully functional)
• Highlighter and pen tools with customizable colors
• Virtual laser pointer
• Real-time annotations during presentations
• No hover effects or selection highlights in presentation mode
• Fixed presentation toolbar positioning

🗂️ Project Organization

• Hierarchical structure: Projects → Presentations → Pages
• Project-based organization for related presentations
• Search and filter capabilities
• Automatic localStorage management with quota handling

📤 Export Capabilities

• Export to PowerPoint (PPTX) format
• Maintains formatting and layout

📋 Template System

• Pre-built templates for various use cases
• Categories: Business, Education, Technical, Creative
• Customizable placeholders

🎨 Theme System

• Built-in Themes: Default (light), Company (branded), and Dark themes
• Company Theme: Professional blue background (#1A1F71) with yellow text

• Theme Persistence: Selected theme saves to localStorage
• Dynamic Theme Switching: Instant theme changes via dropdown selector
• Presentation Mode Support: Themes apply consistently in both edit and

• Customizable Typography: Each theme includes font families and sizes

🎨 Page Customization

• Configurable page background colors
• Support for transparent backgrounds
• Frame position and size controls
• Automatic frame dimension inheritance between pages

✂️ Node Slicing System

• CSS Clip-Path Based Slicing: Split any node into multiple pieces using CSS

• Universal Compatibility: Works with all node types (text, images, videos,

• Flexible Splitting:

• Slice Management:

• Property Synchronization: When properties are changed on any slice, all

• Magnet Mode: Automatically spaces split pieces with 10px gaps when enabled
• Snap Together: Slices snap back together when dragged close to each other

• Merge Functionality: One-click merge to restore original node for editing
• Context Menu Integration:

• Presentation Benefits: Progressive content reveal with sliced pieces on

⚡ Performance Optimizations

• Optimized component architecture with custom hooks
• Efficient state management to prevent excessive re-renders
• Video performance manager for smooth playback
• Automatic localStorage cleanup when quota is exceeded
• Advanced getEffectiveNodes/Connections with Map-based implementation
• Improved rendering performance with memoized calculations

🔧 Advanced Features

• Ghost Nodes: Visual preview of previous page elements during transitions
• Event Deletion Handlers: Clean up property changes when navigating pages
• Enhanced Copy/Paste: Support for copying and pasting both nodes and

• Template System: Full template functionality with insert position support
• Navigation Handlers: Quick navigation to first/last page and zoom reset
• Frame Property Tracking: Advanced frame property inheritance system

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

git clone [repository-url]
cd present

npm install

npm start

The application will open at http://localhost:3000

Available Scripts

Development

• npm start - Runs the app in development mode
• npm build - Builds the app for production
• npm run storybook - Launch Storybook for component development
• npm run lint - Run ESLint checks
• npm run typecheck - Run TypeScript type checking

Development Helper Scripts

• ./dev-all.sh - Start development environment with React app and Storybook

• ./stop-dev.sh - Stop all development processes started by dev-all.sh

Code Quality & Analysis

• ./analyze.sh - Run full code analysis with complexity metrics
• ./dev-analyze-next.sh - Get AI-powered recommendations for next refactoring

• ./check-storybook.sh - Verify all Storybook stories compile correctly

• ./tools/code-analysis/analyze-with-tools.sh - Advanced analysis toolkit

• npm test - Runs the test suite
• npm eject - Ejects from Create React App (one-way operation)

Usage

Keyboard Shortcuts

#### Edit Mode

• Ctrl/Cmd + C: Copy selected node or connection
• Ctrl/Cmd + V: Paste copied node or connection (with snap-to-grid support)
• Delete/Backspace: Delete selected node or connection
• Ctrl + G: Toggle grid visibility
• Ctrl/Cmd + 0: Zoom to fit
• Ctrl/Cmd + 1: Zoom to actual size
• 0: Zoom to fit (without modifier)
• 1: Zoom to actual size (without modifier)
• Ctrl/Cmd + =/-: Zoom in/out
• WASD/Arrow Keys: Pan the canvas
• F1: Show keyboard shortcuts help
• ?: Show keyboard shortcuts help

• Space: Next page (Shift+Space for previous)
• Arrow Left/Right: Navigate pages
• Home/End: First/last page
• H: Toggle highlighter tool
• P: Toggle pen tool
• L: Toggle laser pointer
• A: Toggle annotation tool
• Escape: Clear active tool
• C: Clear all drawings
• 1-5: Select highlighter colors
• +/-: Increase/decrease stroke width
• F1: Show help
• F11: Toggle fullscreen

Video Features

Video Time Controls

The video node supports precise playback control with start and end time settings:

• Start Time: Set the point (in seconds) where the video should begin

• End Time: Set the point (in seconds) where the video should stop or loop
• Page-Specific Settings: Each page can have different start/end times for

• Loop Support: Videos can loop between the start and end times

Usage

Example Use Cases

• Show only relevant portions of a longer video
• Create video loops for background effects
• Different video segments on different pages without duplicating the video
• Clean editing experience with no unexpected video playback

Edit Mode vs Presentation Mode

• Edit Mode: Videos never autoplay, allowing peaceful content creation and

• Presentation Mode: Videos autoplay according to your settings (autoplay,

• Seamless transition between modes with proper video state management

Tech Stack

• React - UI framework
• TypeScript - Type safety
• react-dnd - Drag and drop functionality
• pptxgenjs - PowerPoint export
• CSS Modules - Component styling

Node Component Architecture (Refactored - v2)

The Node component has been successfully refactored from a single 2900+ line file with complexity score of 602 into a modular architecture for better maintainability:

Refactoring Results

• Before: Single file, 2900+ lines, complexity score 602
• After: Modular architecture with separated concerns
• Location: src/components/organisms/node/

Core Structure

• node/index.tsx - Main orchestrator component (350 lines)
• node/NodeTypes.ts - TypeScript interfaces and type definitions
• node/NodeUtils.ts - Utility functions for all node operations

Component Modules (node/components/)

• NodeText.tsx - Text rendering with markdown support
• NodeImage.tsx - Image handling with loading states
• NodeVideo.tsx - Video playback with time controls
• NodeIcon.tsx - Icon rendering from icon library
• NodeCode.tsx - Code blocks with syntax highlighting
• NodeBulletList.tsx - Lists (bullet/numbered/checklist)
• NodeQuote.tsx - Quote blocks with attribution

Custom Hooks (node/hooks/)

• useNode.ts - Main hook combining all node functionality
• useNodeDrag.ts - Drag behavior with throttling
• useNodeResize.ts - Resize with directional handles
• useNodeConnections.ts - Line endpoint connections

Utility Functions (node/NodeUtils.ts)

• parseMarkdown() - Markdown to HTML conversion
• getTransitionClasses() - Animation class calculation
• applySyntaxHighlighting() - Code highlighting
• getConnectorPosition() - Connector coordinate calculation
• findNearestConnector() - Snap-to-connector detection
• calculateLineEndpoints() - Line endpoint calculations

Storybook Integration

• Component stories in src/stories/node/
• Interactive documentation for each node type
• Visual testing capabilities

Using the Node Components

// Import the refactored Node component
import Node from './components/organisms/node';
import { NodeType } from './types';

// Basic usage remains the same
<Node
  node={nodeData}
  isSelected={selectedNodeId === nodeData.id}
  zoom={currentZoom}
  onMove={handleNodeMove}
  onResize={handleNodeResize}
  onSelect={handleNodeSelect}
  onDelete={handleNodeDelete}
/>

// Individual components can be imported for custom use
import NodeText from './components/organisms/node/components/NodeText';
import { useNodeDrag } from './components/organisms/node/hooks/useNodeDrag';

Project Structure

src/
├── app/                    # Modular architecture (in progress)
│   ├── components/
│   │   ├── AppContainer.tsx    # Main container with integrated hooks
│   │   ├── AppLayout.tsx       # Layout structure component
│   │   └── AppProviders.tsx    # Context providers
│   ├── hooks/
│   │   ├── useProjectManagement.ts     # Project CRUD operations
│   │   ├── usePageManagement.ts        # Page navigation and management
│   │   ├── useConnectionOperations.ts  # Connection CRUD operations
│   │   ├── useClipboardOperations.ts   # Copy/cut/paste functionality
│   │   ├── usePresentationMode.ts      # Presenter mode management
│   │   └── useTemplateManagement.ts    # Template system
│   ├── utils/
│   │   ├── constants.ts        # App-wide constants
│   │   └── adapters.ts         # Type conversion utilities
│   ├── types/
│   │   └── AppTypes.ts         # Modular type definitions
│   └── REFACTORING_PLAN.md     # Detailed refactoring roadmap
├── components/
│   ├── Canvas.tsx          # Main drawing surface
│   ├── Node.tsx            # Presentation elements
│   ├── Connection.tsx      # Visual connections
│   ├── Palette.tsx         # Element palette
│   ├── PropertiesPanel.tsx # Property editor
│   └── ...
├── hooks/
│   ├── useNodeOperations.ts    # Node manipulation logic
│   ├── usePresentationState.ts # Presentation state management
│   ├── useFileOperations.ts    # File import/export
│   ├── useSketchMode.ts        # Sketch/drawing functionality
│   └── useZoomPan.ts           # Zoom and pan controls
├── pages/
│   ├── ProjectHome.tsx     # Project management
│   └── PresentationHome.tsx # Presentation overview
├── utils/
│   └── exportToPowerPoint.ts # Export functionality
├── App.tsx                 # Legacy application component
└── AppNew.tsx             # Current main application (being refactored)

Refactoring Progress

The codebase is currently undergoing a major modular refactoring to improve maintainability and reduce complexity:

• Current Status: ~50% complete
• Main Target: AppNew.tsx (2,268 lines → target: <200 lines per module)
• Complexity Reduction: 241 → target: <20 per module
• Completed Extractions:

• Next Steps: Migrate UI components from AppNew to modular structure

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is private. Please check with the repository owner for licensing information.