- Coordinate System: Formalize world vs local coordinates (including Quad-Trees for spatial indexing and efficient rendering).
- Grouping Enhancements: Nested groups and group-level move listeners.
- Validation: Add link validation rules (e.g., prevent cycles).
- Undo / Redo History: Command pattern for all graph modifications.
- Auto-Layout: Tree and Grid layout algorithms (Dagre-like).
- QuadTree Optimization:
- Goal: Dynamic boundaries and incremental updates.
- How: Replace fixed
-100kto100kbounds with a dynamic boundary that auto-grows as nodes are added or moved. Implementremove(pos, data)andmove(oldPos, newPos, data)methods in theQuadTreeclass to avoid full rebuilds on every node drag.
- Atomic Patching & Synchronization:
- Goal: Apply fine-grained updates to the graph state, ideal for real-time collaboration.
- How: Expose an
apply(actions: HistoryAction[])method in theContextclass. This allows external systems to push atomic changes (created by another user or a diffing engine) directly into the graph. This replaces monolithic merging with a stream of verifiable operations.
- Reactivity Safety:
- Goal: Prevent stack overflows and infinite loops during data propagation.
- How: In
setSocketValue, implement aSet<number>or a recursion depth counter to track "visited" sockets during a single propagation cycle. This prevents cycles from manual state injections or complex circular dependencies.
- Viewport Management:
- Pan and Zoom (Canvas-like interaction).
-
fitViewfunctionality to center the graph.
- Interactivity:
- Selection state (Nodes/Links).
- Deletion support (Backspace/Delete keys).
- Snap-to-grid while dragging.
- Box Selection: Drag marquee to select multiple elements.
- Touch Support: Pinch-to-zoom and touch dragging.
- Group Interactivity: Drag group background to move all children.
- Advanced Link Interaction:
- Goal: Re-connecting links and adding path points.
- Why: Improves UX for complex graphs and allows routing links around nodes.
- Components:
- MiniMap: A small preview of the graph.
- MiniMap Interactivity:
- Goal: Click and drag on the MiniMap to pan the main viewport.
- Why: Standard navigation pattern for professional node editors.
- MiniMap Interactivity:
- Controls: Zoom in/out/reset buttons.
- Panel: Generic container for floating UI elements.
- MiniMap: A small preview of the graph.
- API:
- Selection API: Path selection and multi-select.
- Validation Hooks:
isValidConnectionfor custom rules. - Full Declarative Sync: One-way/Two-way sync between props and core context.
- Specialized Hooks:
useNodes,useEdges,useVisibleNodes.
- Component Refactoring:
- Goal: Decompose the monolithic
Worldcomponent into smaller, focused units. - How: Break down
World.tsxinto sub-components likeViewportManager(pan/zoom/resize),InteractionHandler(selection/dragging/connection),SyncManager(declarative prop-to-engine sync), andShortcutProvider(keyboard events).
- Goal: Decompose the monolithic
- Testing Infrastructure:
- Goal: Robust unit and behavioral testing for React components and hooks.
- How: Set up Vitest with JSDOM and React Testing Library. Added specialized mocks for
ResizeObserverand verified core context provisioning and declarative sync.
- Aesthetics:
- Customizable link paths (Straight, Step, SmoothStep, Bezier).
- Custom Link Components:
- Goal: Allow custom React components along link paths (e.g., buttons, labels).
- Why: Enables richer interactions and data visualization on connections.
- Transition animations for node movements.
- Dynamic Background: Scaling and panning grid/dots.