From 2a5e0d231edca54d2078fdefc7165af056f398cc Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Mon, 1 Sep 2025 17:01:17 -0400 Subject: [PATCH] Decouple link and slot hit-testing out of Litegraph (#5134) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [feat] TransformPane - Viewport synchronization layer for Vue nodes (#4304) Co-authored-by: Claude Co-authored-by: Benjamin Lu Co-authored-by: github-actions * Update locales [skip ci] * Update locales [skip ci] * Add vue node feature flag (#4927) * feat: Implement CRDT-based layout system for Vue nodes (#4959) * feat: Implement CRDT-based layout system for Vue nodes Major refactor to solve snap-back issues and create single source of truth for node positions: - Add Yjs-based CRDT layout store for conflict-free position management - Implement layout mutations service with clean API - Create Vue composables for layout access and node dragging - Add one-way sync from layout store to LiteGraph - Disable LiteGraph dragging when Vue nodes mode is enabled - Add z-index management with bring-to-front on node interaction - Add comprehensive TypeScript types for layout system - Include unit tests for layout store operations - Update documentation to reflect CRDT architecture This provides a solid foundation for both single-user performance and future real-time collaboration features. Co-Authored-By: Claude * style: Apply linter fixes to layout system * fix: Remove unnecessary README files and revert services README - Remove unnecessary types/README.md file - Revert unrelated changes to services/README.md - Keep only relevant documentation for the layout system implementation These were issues identified during PR review that needed to be addressed. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * refactor: Clean up layout store and implement proper CRDT operations - Created dedicated layoutOperations.ts with production-grade CRDT interfaces - Integrated existing QuadTree spatial index instead of simple cache - Split composables into separate files (useLayout, useNodeLayout, useLayoutSync) - Cleaned up operation handlers using specific types instead of Extract - Added proper operation interfaces with type guards and extensibility - Updated all type references to use new operation structure The layout store now properly uses the existing QuadTree infrastructure for efficient spatial queries and follows CRDT best practices with well-defined operation interfaces. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * refactor: Extract services and split composables for better organization - Created SpatialIndexManager to handle QuadTree operations separately - Added LayoutAdapter interface for CRDT abstraction (Yjs, mock implementations) - Split GraphNodeManager into focused composables: - useNodeWidgets: Widget state and callback management - useNodeChangeDetection: RAF-based geometry change detection - useNodeState: Node visibility and reactive state management - Extracted constants for magic numbers and configuration values - Updated layout store to use SpatialIndexManager and constants This improves code organization, testability, and makes it easier to swap CRDT implementations or mock services for testing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * Add node slots to layout tree * Revert "Add node slots to layout tree" This reverts commit 460493a6203d0d7c15422fb4fd2f021eb6809e37. * Remove slots from layoutTypes * Totally not scuffed renderer and adapter * Revert "Totally not scuffed renderer and adapter" This reverts commit 2b9d83efb81d9b9800f868e8804601ce7983c0d8. * Revert "Remove slots from layoutTypes" This reverts commit 18f78ff786411f640bb22dd52d917501fad53b04. * Reapply "Add node slots to layout tree" This reverts commit 236fecb549c9ffcb642412d8a70df3d37629260d. * Revert "Add node slots to layout tree" This reverts commit 460493a6203d0d7c15422fb4fd2f021eb6809e37. * docs: Replace architecture docs with comprehensive ADR - Add ADR-0002 for CRDT-based layout system decision - Follow established ADR template with persuasive reasoning - Include performance benefits, collaboration readiness, and architectural advantages - Update ADR index --------- Co-authored-by: Claude Co-authored-by: Benjamin Lu * [chore] Extract link rendering out of LGraphCanvas (#4994) * feat: Implement CRDT-based layout system for Vue nodes Major refactor to solve snap-back issues and create single source of truth for node positions: - Add Yjs-based CRDT layout store for conflict-free position management - Implement layout mutations service with clean API - Create Vue composables for layout access and node dragging - Add one-way sync from layout store to LiteGraph - Disable LiteGraph dragging when Vue nodes mode is enabled - Add z-index management with bring-to-front on node interaction - Add comprehensive TypeScript types for layout system - Include unit tests for layout store operations - Update documentation to reflect CRDT architecture This provides a solid foundation for both single-user performance and future real-time collaboration features. Co-Authored-By: Claude * style: Apply linter fixes to layout system * fix: Remove unnecessary README files and revert services README - Remove unnecessary types/README.md file - Revert unrelated changes to services/README.md - Keep only relevant documentation for the layout system implementation These were issues identified during PR review that needed to be addressed. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * refactor: Clean up layout store and implement proper CRDT operations - Created dedicated layoutOperations.ts with production-grade CRDT interfaces - Integrated existing QuadTree spatial index instead of simple cache - Split composables into separate files (useLayout, useNodeLayout, useLayoutSync) - Cleaned up operation handlers using specific types instead of Extract - Added proper operation interfaces with type guards and extensibility - Updated all type references to use new operation structure The layout store now properly uses the existing QuadTree infrastructure for efficient spatial queries and follows CRDT best practices with well-defined operation interfaces. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * refactor: Extract services and split composables for better organization - Created SpatialIndexManager to handle QuadTree operations separately - Added LayoutAdapter interface for CRDT abstraction (Yjs, mock implementations) - Split GraphNodeManager into focused composables: - useNodeWidgets: Widget state and callback management - useNodeChangeDetection: RAF-based geometry change detection - useNodeState: Node visibility and reactive state management - Extracted constants for magic numbers and configuration values - Updated layout store to use SpatialIndexManager and constants This improves code organization, testability, and makes it easier to swap CRDT implementations or mock services for testing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * Add node slots to layout tree * Revert "Add node slots to layout tree" This reverts commit 460493a6203d0d7c15422fb4fd2f021eb6809e37. * Remove slots from layoutTypes * Totally not scuffed renderer and adapter * Revert "Totally not scuffed renderer and adapter" This reverts commit 2b9d83efb81d9b9800f868e8804601ce7983c0d8. * Revert "Remove slots from layoutTypes" This reverts commit 18f78ff786411f640bb22dd52d917501fad53b04. * Reapply "Add node slots to layout tree" This reverts commit 236fecb549c9ffcb642412d8a70df3d37629260d. * Revert "Add node slots to layout tree" This reverts commit 460493a6203d0d7c15422fb4fd2f021eb6809e37. * docs: Replace architecture docs with comprehensive ADR - Add ADR-0002 for CRDT-based layout system decision - Follow established ADR template with persuasive reasoning - Include performance benefits, collaboration readiness, and architectural advantages - Update ADR index * Add node slots to layout tree * Revert "Add node slots to layout tree" This reverts commit 460493a6203d0d7c15422fb4fd2f021eb6809e37. * Remove slots from layoutTypes * Totally not scuffed renderer and adapter * Remove unused methods in LGLA * Extract slot position calculations to shared utility - Create slotCalculations.ts utility for centralized slot position logic - Update LGraphNode to delegate to helper while maintaining compatibility - Modify LitegraphLinkAdapter to use layout tree positions when available - Enable link rendering to use layout system coordinates instead of litegraph positions This allows the layout tree to control link rendering positions, enabling proper synchronization between Vue components and canvas rendering. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * [fix] Restore original link rendering behavior after refactor This commit fixes several rendering discrepancies introduced during the link rendering refactor to ensure exact parity with the original litegraph implementation: Path Shape Fixes: - STRAIGHT_LINK: Now correctly applies l=10 offset to create innerA/innerB points and uses midX=(innerA.x+innerB.x)*0.5 for elbow placement, matching the original 6-segment path - LINEAR_LINK: Restored 4-point path with l=15 directional offsets (start → innerA → innerB → end) Arrow Rendering: - computeConnectionPoint: Now always uses bezier math with 0.25 factor spline offsets regardless of render mode, ensuring arrow positions match original - Arrow positions: Fixed to render at 0.25 and 0.75 positions along the path - Arrow gating: Moved scale>=0.6 and highQuality checks to adapter layer to maintain PathRenderer purity - Arrow shape: Restored original triangle dimensions (-5,-3) to (0,+7) to (+5,-3) Center Marker: - Fixed 'None' option: Center marker now correctly hidden when LinkMarkerShape.None is selected - Center point calculation: Updated for all render modes to match original positions - STRAIGHT_LINK center: Uses midX and average of innerA/innerB y-coordinates - LINEAR_LINK center: Uses midpoint between innerA and innerB control points These fixes ensure backward compatibility while maintaining the clean separation between the pure PathRenderer and litegraph-specific LitegraphLinkAdapter. Fixes #Issue-Number --------- Co-authored-by: bymyself Co-authored-by: Claude * feat: Add slot registration and spatial indexing for hit detection - Implement slot registration for all nodes (Vue and LiteGraph) - Add spatial indexes for slots and reroutes to improve hit detection performance - Register slots when nodes are drawn via new registerSlots() method - Update LayoutStore to use spatial indexing for O(log n) queries instead of O(n) Resolves #5125 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * Revert "feat: Add slot registration and spatial indexing for hit detection" This reverts commit 70fbfd0f5e1659305070761d6a4a0c0f597651df. * feat: Add slot registration and spatial indexing for hit detection - Implement slot registration for all nodes (Vue and LiteGraph) - Add spatial indexes for slots and reroutes to improve hit detection performance - Register slots when nodes are drawn via new registerSlots() method - Update LayoutStore to use spatial indexing for O(log n) queries instead of O(n) Resolves #5125 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * relocate slot update to layoutstore * Revert "relocate slot update to layoutstore" This reverts commit 0b17ef148bdded35cb231bef25b8d5c77dc14c1f. * add useSlotLayoutSync * feat: Extend Layout Store with CRDT support for links and reroutes Move links and reroutes to be first-class CRDT entities in the Layout Store, eliminating per-frame registration during rendering. This provides a ~100x reduction in spatial index operations by using event-driven updates instead of polling. Key changes: - Add CRDT maps for links and reroutes with automatic observers - Add mutation operations for link/reroute lifecycle management - Update LiteGraph to use mutations instead of direct store calls - Remove per-frame updateLinkLayout and updateRerouteLayout calls 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * Scuffed diff, change to dirty later * Fix reroute move desync * Terrible reroute fixes * Use LinkId for LinkLayout * refactor: Remove unused duplicate layout type files Deleted src/types/layoutTypes.ts and src/types/layoutOperations.ts which were duplicates of src/renderer/core/layout/types.ts. These files had zero imports and were creating confusion in the codebase. The active types are in src/renderer/core/layout/types.ts which is properly integrated with the current architecture. 🤖 Generated with Claude Code Co-Authored-By: Claude * refactor: Extract layout source strings into LayoutSource enum Replace hardcoded 'canvas' | 'vue' | 'external' string literals with a proper TypeScript enum for better type safety and maintainability. This change provides a single source of truth for layout source types and makes future modifications easier. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * refactor: Unify CRDT layout operations under type-safe entity bases Replace node-centric BaseOperation with a clean hierarchy: - Add OperationMeta base containing common fields (timestamp, actor, source, type) - Introduce entity-specific bases (NodeOpBase, LinkOpBase, RerouteOpBase) - Each operation now extends its appropriate entity base with proper typing - Add entity discriminator field for runtime type narrowing Benefits: - Eliminates duplicate meta fields across link/reroute operations - Provides type-safe discriminated unions for each entity type - Enables clean extension path for future operation types - Zero breaking changes - type-only refactor with no runtime impact Also adds helper functions: - getAffectedNodeIds() to extract node IDs affected by any operation - Entity-specific helper checks for operation classification 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * Fix initial link seeding * fix: Fix reroute hit detection and type consistency issues - Use instanceof Reroute type guard instead of structural 'linkIds' check - Remove unnecessary Number() conversions for reroute IDs (already numeric) - Fix parentId truthiness bug (0 is valid parent ID) - Pass numeric IDs directly in GraphCanvas seeding - Add missing link/reroute methods to LayoutMutations interface - Make hit test tolerance scale-aware using ctx.lineWidth and DPI 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * Add debug logs * Add missing reroute path * cleanup * feat: Implement event-driven link layout sync Remove layout store writes from render loop and update link geometry only on actual changes (node move/resize, link/reroute operations, collapse toggles). Key improvements: - No layout writes during canvas render (decoupled from draw cycle) - Link layouts update only on causal events via useLinkLayoutSync - Hit testing remains precise using stored Path2D objects - Optimized adapter: calculations only when enableLayoutStoreWrites=true - Store-level deduplication prevents spatial index churn Performance impact: - Render path: Zero layout work, no equality checks, no store writes - Event path: Direct writes with cheap store-level dedup - Significant CPU savings per frame on complex graphs 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * feat: Implement DOM-based slot registration with unified position system - Add centralized getSlotPosition() function in SlotCalculations - Create SlotIdentifier utilities for consistent slot key generation - Implement DOM-based slot registration composable with performance optimizations: - Cache slot offsets to avoid DOM reads during drag operations - Batch measurements via requestAnimationFrame - Skip redundant updates when bounds unchanged - Update Vue slot components to register DOM positions - Fix widget-to-input index mapping in NodeWidgets - Prevent double registration when Vue nodes enabled This improves slot hit-detection accuracy by using actual DOM positions while maintaining performance through intelligent caching and batching. 🤖 Generated with Claude Code Co-Authored-By: Claude * Remove unused files * Remove duplicated markdown file * Remove duplicated files and address knip concerns * Remove outdated test * warning comment * Update test snapshots --------- Co-authored-by: Christian Byrne Co-authored-by: Claude Co-authored-by: github-actions --- src/components/graph/GraphCanvas.vue | 69 +- .../graph/debug/QuadTreeDebugSection.vue | 112 --- .../graph/debug/QuadTreeVisualization.vue | 112 --- .../graph/vueWidgets/WidgetButton.vue | 43 -- .../graph/vueWidgets/WidgetChart.vue | 78 --- .../graph/vueWidgets/WidgetColorPicker.vue | 52 -- .../graph/vueWidgets/WidgetFileUpload.vue | 324 --------- .../graph/vueWidgets/WidgetGalleria.vue | 123 ---- .../graph/vueWidgets/WidgetImage.vue | 29 - .../graph/vueWidgets/WidgetImageCompare.vue | 70 -- .../graph/vueWidgets/WidgetInputText.vue | 46 -- .../graph/vueWidgets/WidgetMarkdown.vue | 95 --- .../graph/vueWidgets/WidgetMultiSelect.vue | 56 -- .../graph/vueWidgets/WidgetSelect.vue | 72 -- .../graph/vueWidgets/WidgetSelectButton.vue | 63 -- .../graph/vueWidgets/WidgetSlider.vue | 163 ----- .../graph/vueWidgets/WidgetTextarea.vue | 44 -- .../graph/vueWidgets/WidgetToggleSwitch.vue | 54 -- .../graph/vueWidgets/WidgetTreeSelect.vue | 54 -- src/composables/graph/useGraphNodeManager.ts | 7 +- src/composables/graph/useLOD.ts | 186 ----- .../graph/useNodeChangeDetection.ts | 180 ----- src/composables/graph/useNodeState.ts | 260 ------- src/composables/graph/useNodeWidgets.ts | 182 ----- src/composables/graph/useWidgetRenderer.ts | 117 ---- src/composables/widgets/useBooleanWidget.ts | 33 - src/composables/widgets/useChartWidget.ts | 29 - .../widgets/useChatHistoryWidget.ts | 52 -- src/composables/widgets/useColorWidget.ts | 21 - src/composables/widgets/useComboWidget.ts | 111 --- .../widgets/useFileUploadWidget.ts | 21 - src/composables/widgets/useFloatWidget.ts | 81 --- src/composables/widgets/useGalleriaWidget.ts | 27 - .../widgets/useImageCompareWidget.ts | 21 - .../widgets/useImagePreviewWidget.ts | 317 --------- .../widgets/useImageUploadWidget.ts | 121 ---- src/composables/widgets/useImageWidget.ts | 21 - src/composables/widgets/useIntWidget.ts | 97 --- src/composables/widgets/useMarkdownWidget.ts | 115 --- .../widgets/useMultiSelectWidget.ts | 22 - .../widgets/useProgressTextWidget.ts | 55 -- src/composables/widgets/useRemoteWidget.ts | 274 -------- .../widgets/useSelectButtonWidget.ts | 29 - src/composables/widgets/useStringWidget.ts | 139 ---- src/composables/widgets/useTextareaWidget.ts | 29 - .../widgets/useTreeSelectWidget.ts | 25 - src/lib/litegraph/src/LGraph.ts | 20 + src/lib/litegraph/src/LGraphCanvas.ts | 114 ++- src/lib/litegraph/src/LGraphNode.ts | 12 + src/lib/litegraph/src/LLink.ts | 8 + src/lib/litegraph/src/LiteGraphGlobal.ts | 1 + src/lib/litegraph/src/Reroute.ts | 12 + src/locales/en/main.json | 6 +- src/locales/es/main.json | 6 +- src/locales/fr/main.json | 6 +- src/locales/ja/main.json | 7 +- src/locales/ko/main.json | 11 +- src/locales/ru/main.json | 6 +- src/locales/zh/commands.json | 6 +- src/locales/zh/main.json | 6 +- .../canvas/litegraph/LitegraphLinkAdapter.ts | 143 ++-- .../core/canvas/litegraph/SlotCalculations.ts | 54 +- .../core/layout/adapters/MockAdapter.ts | 137 ---- .../core/layout/adapters/YjsAdapter.ts | 207 ------ .../core/layout/adapters/layoutAdapter.ts | 82 --- src/renderer/core/layout/constants.ts | 3 +- .../core/layout/operations/LayoutMutations.ts | 140 +++- .../core/layout/slots/SlotIdentifier.ts | 76 ++ src/renderer/core/layout/slots/register.ts | 75 ++ .../layout/slots/useDomSlotRegistration.ts | 228 ++++++ src/renderer/core/layout/store/LayoutStore.ts | 655 +++++++++++++++++- .../core/layout/sync/useLinkLayoutSync.ts | 365 ++++++++++ .../core/layout/sync/useSlotLayoutSync.ts | 163 +++++ src/renderer/core/layout/types.ts | 282 +++++++- .../vueNodes/components/InputSlot.vue | 23 +- .../vueNodes/components/NodeSlots.vue | 4 +- .../vueNodes/components/NodeWidgets.vue | 18 +- .../vueNodes/components/OutputSlot.vue | 23 +- src/renderer/extensions/vueNodes/index.ts | 34 - .../vueNodes/layout/useNodeLayout.ts | 8 +- .../widgets/composables/useWidgetValue.ts | 155 ----- .../vueNodes/widgets/useNodeWidgets.ts | 182 ----- src/types/layoutOperations.ts | 168 ----- src/types/layoutTypes.ts | 204 ------ .../tests/litegraph/core/LGraphNode.test.ts | 34 - .../core/__snapshots__/LGraph.test.ts.snap | 6 + .../core/__snapshots__/litegraph.test.ts.snap | 12 + .../tests/performance/QuadTreeBenchmark.ts | 225 ------ .../renderer/core/layout/layoutStore.test.ts | 37 +- 89 files changed, 2464 insertions(+), 5731 deletions(-) delete mode 100644 src/components/graph/debug/QuadTreeDebugSection.vue delete mode 100644 src/components/graph/debug/QuadTreeVisualization.vue delete mode 100644 src/components/graph/vueWidgets/WidgetButton.vue delete mode 100644 src/components/graph/vueWidgets/WidgetChart.vue delete mode 100644 src/components/graph/vueWidgets/WidgetColorPicker.vue delete mode 100644 src/components/graph/vueWidgets/WidgetFileUpload.vue delete mode 100644 src/components/graph/vueWidgets/WidgetGalleria.vue delete mode 100644 src/components/graph/vueWidgets/WidgetImage.vue delete mode 100644 src/components/graph/vueWidgets/WidgetImageCompare.vue delete mode 100644 src/components/graph/vueWidgets/WidgetInputText.vue delete mode 100644 src/components/graph/vueWidgets/WidgetMarkdown.vue delete mode 100644 src/components/graph/vueWidgets/WidgetMultiSelect.vue delete mode 100644 src/components/graph/vueWidgets/WidgetSelect.vue delete mode 100644 src/components/graph/vueWidgets/WidgetSelectButton.vue delete mode 100644 src/components/graph/vueWidgets/WidgetSlider.vue delete mode 100644 src/components/graph/vueWidgets/WidgetTextarea.vue delete mode 100644 src/components/graph/vueWidgets/WidgetToggleSwitch.vue delete mode 100644 src/components/graph/vueWidgets/WidgetTreeSelect.vue delete mode 100644 src/composables/graph/useLOD.ts delete mode 100644 src/composables/graph/useNodeChangeDetection.ts delete mode 100644 src/composables/graph/useNodeState.ts delete mode 100644 src/composables/graph/useNodeWidgets.ts delete mode 100644 src/composables/graph/useWidgetRenderer.ts delete mode 100644 src/composables/widgets/useBooleanWidget.ts delete mode 100644 src/composables/widgets/useChartWidget.ts delete mode 100644 src/composables/widgets/useChatHistoryWidget.ts delete mode 100644 src/composables/widgets/useColorWidget.ts delete mode 100644 src/composables/widgets/useComboWidget.ts delete mode 100644 src/composables/widgets/useFileUploadWidget.ts delete mode 100644 src/composables/widgets/useFloatWidget.ts delete mode 100644 src/composables/widgets/useGalleriaWidget.ts delete mode 100644 src/composables/widgets/useImageCompareWidget.ts delete mode 100644 src/composables/widgets/useImagePreviewWidget.ts delete mode 100644 src/composables/widgets/useImageUploadWidget.ts delete mode 100644 src/composables/widgets/useImageWidget.ts delete mode 100644 src/composables/widgets/useIntWidget.ts delete mode 100644 src/composables/widgets/useMarkdownWidget.ts delete mode 100644 src/composables/widgets/useMultiSelectWidget.ts delete mode 100644 src/composables/widgets/useProgressTextWidget.ts delete mode 100644 src/composables/widgets/useRemoteWidget.ts delete mode 100644 src/composables/widgets/useSelectButtonWidget.ts delete mode 100644 src/composables/widgets/useStringWidget.ts delete mode 100644 src/composables/widgets/useTextareaWidget.ts delete mode 100644 src/composables/widgets/useTreeSelectWidget.ts delete mode 100644 src/renderer/core/layout/adapters/MockAdapter.ts delete mode 100644 src/renderer/core/layout/adapters/YjsAdapter.ts delete mode 100644 src/renderer/core/layout/adapters/layoutAdapter.ts create mode 100644 src/renderer/core/layout/slots/SlotIdentifier.ts create mode 100644 src/renderer/core/layout/slots/register.ts create mode 100644 src/renderer/core/layout/slots/useDomSlotRegistration.ts create mode 100644 src/renderer/core/layout/sync/useLinkLayoutSync.ts create mode 100644 src/renderer/core/layout/sync/useSlotLayoutSync.ts delete mode 100644 src/renderer/extensions/vueNodes/index.ts delete mode 100644 src/renderer/extensions/vueNodes/widgets/composables/useWidgetValue.ts delete mode 100644 src/renderer/extensions/vueNodes/widgets/useNodeWidgets.ts delete mode 100644 src/types/layoutOperations.ts delete mode 100644 src/types/layoutTypes.ts delete mode 100644 tests-ui/tests/performance/QuadTreeBenchmark.ts diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue index c79ccaf27..e2d31755a 100644 --- a/src/components/graph/GraphCanvas.vue +++ b/src/components/graph/GraphCanvas.vue @@ -142,6 +142,9 @@ import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph' import { layoutStore } from '@/renderer/core/layout/store/LayoutStore' import { useLayout } from '@/renderer/core/layout/sync/useLayout' import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync' +import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync' +import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync' +import { LayoutSource } from '@/renderer/core/layout/types' import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue' import { UnauthorizedError, api } from '@/scripts/api' import { app as comfyApp } from '@/scripts/app' @@ -283,6 +286,10 @@ watch(canvasRef, () => { // Vue node lifecycle management - initialize after graph is ready let nodeManager: ReturnType | null = null let cleanupNodeManager: (() => void) | null = null + +// Slot layout sync management +let slotSync: ReturnType | null = null +let linkSync: ReturnType | null = null const vueNodeData = ref>(new Map()) const nodeState = ref>(new Map()) const nodePositions = ref>( @@ -324,15 +331,46 @@ const initializeNodeManager = () => { })) layoutStore.initializeFromLiteGraph(nodes) + // Seed reroutes into the Layout Store so hit-testing uses the new path + for (const reroute of comfyApp.graph.reroutes.values()) { + const [x, y] = reroute.pos + const parent = reroute.parentId ?? undefined + const linkIds = Array.from(reroute.linkIds) + layoutMutations.createReroute(reroute.id, { x, y }, parent, linkIds) + } + + // Seed existing links into the Layout Store (topology only) + for (const link of comfyApp.graph._links.values()) { + layoutMutations.createLink( + link.id, + link.origin_id, + link.origin_slot, + link.target_id, + link.target_slot + ) + } + // Initialize layout sync (one-way: Layout Store → LiteGraph) const { startSync } = useLayoutSync() startSync(canvasStore.canvas) + // Initialize slot layout sync for hit detection + slotSync = useSlotLayoutSync() + if (canvasStore.canvas) { + slotSync.start(canvasStore.canvas as LGraphCanvas) + } + + // Initialize link layout sync for event-driven updates + linkSync = useLinkLayoutSync() + if (canvasStore.canvas) { + linkSync.start(canvasStore.canvas as LGraphCanvas) + } + // Force computed properties to re-evaluate nodeDataTrigger.value++ } -const disposeNodeManager = () => { +const disposeNodeManagerAndSyncs = () => { if (!nodeManager) return try { cleanupNodeManager?.() @@ -341,6 +379,19 @@ const disposeNodeManager = () => { } nodeManager = null cleanupNodeManager = null + + // Clean up slot layout sync + if (slotSync) { + slotSync.stop() + slotSync = null + } + + // Clean up link layout sync + if (linkSync) { + linkSync.stop() + linkSync = null + } + // Reset reactive maps to inert defaults vueNodeData.value = new Map() nodeState.value = new Map() @@ -360,7 +411,7 @@ watch( if (enabled) { initializeNodeManager() } else { - disposeNodeManager() + disposeNodeManagerAndSyncs() } }, { immediate: true } @@ -509,7 +560,7 @@ const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => { // Bring node to front when clicked (similar to LiteGraph behavior) // Skip if node is pinned if (!node.flags?.pinned) { - layoutMutations.setSource('vue') + layoutMutations.setSource(LayoutSource.Vue) layoutMutations.bringNodeToFront(nodeData.id) } node.selected = true @@ -827,5 +878,17 @@ onUnmounted(() => { nodeManager.cleanup() nodeManager = null } + + // Clean up slot layout sync + if (slotSync) { + slotSync.stop() + slotSync = null + } + + // Clean up link layout sync + if (linkSync) { + linkSync.stop() + linkSync = null + } }) diff --git a/src/components/graph/debug/QuadTreeDebugSection.vue b/src/components/graph/debug/QuadTreeDebugSection.vue deleted file mode 100644 index 74d26e946..000000000 --- a/src/components/graph/debug/QuadTreeDebugSection.vue +++ /dev/null @@ -1,112 +0,0 @@ - - - - diff --git a/src/components/graph/debug/QuadTreeVisualization.vue b/src/components/graph/debug/QuadTreeVisualization.vue deleted file mode 100644 index 28ade900d..000000000 --- a/src/components/graph/debug/QuadTreeVisualization.vue +++ /dev/null @@ -1,112 +0,0 @@ - - - - - diff --git a/src/components/graph/vueWidgets/WidgetButton.vue b/src/components/graph/vueWidgets/WidgetButton.vue deleted file mode 100644 index ae8fb7567..000000000 --- a/src/components/graph/vueWidgets/WidgetButton.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - diff --git a/src/components/graph/vueWidgets/WidgetChart.vue b/src/components/graph/vueWidgets/WidgetChart.vue deleted file mode 100644 index 1c40d35a7..000000000 --- a/src/components/graph/vueWidgets/WidgetChart.vue +++ /dev/null @@ -1,78 +0,0 @@ - - - diff --git a/src/components/graph/vueWidgets/WidgetColorPicker.vue b/src/components/graph/vueWidgets/WidgetColorPicker.vue deleted file mode 100644 index 16a3dd374..000000000 --- a/src/components/graph/vueWidgets/WidgetColorPicker.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - - diff --git a/src/components/graph/vueWidgets/WidgetFileUpload.vue b/src/components/graph/vueWidgets/WidgetFileUpload.vue deleted file mode 100644 index e918a4302..000000000 --- a/src/components/graph/vueWidgets/WidgetFileUpload.vue +++ /dev/null @@ -1,324 +0,0 @@ - - - diff --git a/src/components/graph/vueWidgets/WidgetGalleria.vue b/src/components/graph/vueWidgets/WidgetGalleria.vue deleted file mode 100644 index 3603b7ab6..000000000 --- a/src/components/graph/vueWidgets/WidgetGalleria.vue +++ /dev/null @@ -1,123 +0,0 @@ - - - - - diff --git a/src/components/graph/vueWidgets/WidgetImage.vue b/src/components/graph/vueWidgets/WidgetImage.vue deleted file mode 100644 index d7af95cf0..000000000 --- a/src/components/graph/vueWidgets/WidgetImage.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/src/components/graph/vueWidgets/WidgetImageCompare.vue b/src/components/graph/vueWidgets/WidgetImageCompare.vue deleted file mode 100644 index e51413a30..000000000 --- a/src/components/graph/vueWidgets/WidgetImageCompare.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - diff --git a/src/components/graph/vueWidgets/WidgetInputText.vue b/src/components/graph/vueWidgets/WidgetInputText.vue deleted file mode 100644 index 924ce9ee3..000000000 --- a/src/components/graph/vueWidgets/WidgetInputText.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/src/components/graph/vueWidgets/WidgetMarkdown.vue b/src/components/graph/vueWidgets/WidgetMarkdown.vue deleted file mode 100644 index 4749e561c..000000000 --- a/src/components/graph/vueWidgets/WidgetMarkdown.vue +++ /dev/null @@ -1,95 +0,0 @@ -