mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-10 01:50:08 +00:00
a23d8be77b
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