- Test transform synchronization with mocked canvas interactions
- Verify viewport and debug overlay functionality
- Test interaction state management and pointer event delegation
- Cover error handling for missing canvas properties
- Ensure proper cleanup and event listener management
- Add nodeManager.cleanup() call in onUnmounted hook
- Set nodeManager to null after cleanup to clear reference
- Improve type safety by removing 'any' types and using proper interfaces
- Fix LGraphCanvas type import and usage
This ensures all event listeners and resources managed by useGraphNodeManager
are properly cleaned up when the GraphCanvas component unmounts, preventing
memory accumulation in long-running sessions.
- Remove recursive requestAnimationFrame loop that was causing memory leaks
- Remove startFPSTracking, stopFPSTracking, and updateFPS functions
- Remove FPS tracking variables and initialization
- Refactor code structure with extracted helper functions for better maintainability
The FPS tracking was only used for debugging and created an infinite RAF loop
that accumulated memory over time in long-running sessions.
Complete Vue node lifecycle management system that safely extracts data from LiteGraph and renders nodes with working widgets in Vue components.
Key features:
- Safe data extraction pattern to avoid Vue proxy issues with LiteGraph private fields
- Event-driven lifecycle management using onNodeAdded/onNodeRemoved hooks
- Widget system integration with functional dropdowns, inputs, and controls
- Performance optimizations including viewport culling and RAF batching
- Transform container pattern for O(1) scaling regardless of node count
- QuadTree spatial indexing for efficient visibility queries
- Debug tools and performance monitoring
- Feature flag system for safe rollout
Architecture:
- LiteGraph remains source of truth for all graph logic and data
- Vue components render nodes positioned over canvas using CSS transforms
- Widget updates flow through LiteGraph callbacks to maintain consistency
- Reactive state separated from node references to prevent proxy overhead
Components:
- useGraphNodeManager: Core lifecycle management with safe data extraction
- TransformPane: Performance-optimized viewport container
- LGraphNode.vue: Vue node component with widget rendering
- Widget system: PrimeVue-based components for all widget types
- Implements efficient O(log n) spatial queries for large node graphs
- Supports dynamic insertion, removal, and updates
- Configurable depth and capacity parameters
- Comprehensive test suite covering performance scenarios
- Benchmark tools for performance validation
- Designed for viewport culling optimization in 100+ node workflows
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Widget callbacks now explicitly set widget.value (fixes empty LiteGraph callbacks)
- Created useWidgetValue composable for consistent widget patterns
- Updated all widget components to use proper props/emit pattern
- Callbacks are set up before data extraction to ensure proper state sync
- Add optional red border overlay showing viewport bounds with 10px inset
- Display viewport dimensions and device pixel ratio in overlay
- Enable via "Show Performance Overlay" checkbox in debug panel
- Helps visualize actual culling boundaries during development
- Chain widget callbacks to trigger immediate Vue state updates
- Remove need for RAF polling of widget values
- Add performance tracking for callback vs RAF updates
- Implement proper FPS tracking with 1-second intervals
This change makes widget updates reactive and immediate rather than
waiting for the next RAF cycle, improving responsiveness.
- Add useFeatureFlags composable for Vue nodes
- Update coreSettings with Vue nodes feature flag
- Minor typing improvements in useTransformState
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Support nodeData prop with VueNodeData interface
- Update emit types to use VueNodeData instead of LGraphNode
- Remove unnecessary imports and debug comments
- Proper color calculations for node headers
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use SafeWidgetData interface instead of raw LiteGraph widgets
- Proper TypeScript typing without any types
- Use widget registry for component resolution
- Remove unnecessary imports and debug comments
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Map LiteGraph widget types to Vue components
- Support text, combo, number, boolean widget types
- Check if widgets should render as Vue components
- Proper TypeScript interfaces instead of any
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements reactive position tracking, viewport culling, and event-driven
node management for Vue-based node rendering system.
Ready for demo and developer handoff.
- LGraphNode: Main container with transform-based positioning
- NodeHeader: Collapsible title bar with dynamic coloring
- NodeSlots: Input/output connection visualization
- NodeWidgets: Integration with existing widget system
- NodeContent: Extensibility placeholder
- Error boundaries and performance optimizations (v-memo, CSS containment)
- WidgetColorPicker: Color selection with ColorPicker component
- WidgetImage: Single image display with Image component
- WidgetImageCompare: Before/after comparison with ImageCompare component
- WidgetGalleria: Image gallery/carousel with Galleria component
- WidgetChart: Data visualization with Chart component
- WidgetInputText: Single-line text input with InputText component
- WidgetTextarea: Multi-line text input with Textarea component
- WidgetSlider: Numeric range input with Slider component
- WidgetToggleSwitch: Boolean toggle with ToggleSwitch component
- Complete widget type enum with all 15 widget types
- Component mapping registry for dynamic widget rendering
- Helper function for type-safe widget component resolution
- SimplifiedWidget interface for Vue-based node widgets
- widgetPropFilter utility with component-specific exclusion lists
- Removes DOM manipulation and positioning concerns
- Provides clean API for value binding and prop filtering
