Skip to content

Latest commit

 

History

History
59 lines (55 loc) · 3.89 KB

File metadata and controls

59 lines (55 loc) · 3.89 KB

Roadmap

Core (anode)

  • 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 -100k to 100k bounds with a dynamic boundary that auto-grows as nodes are added or moved. Implement remove(pos, data) and move(oldPos, newPos, data) methods in the QuadTree class 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 the Context class. 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 a Set<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.

React Wrapper (anode-react)

  • Viewport Management:
    • Pan and Zoom (Canvas-like interaction).
    • fitView functionality 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.
    • Controls: Zoom in/out/reset buttons.
    • Panel: Generic container for floating UI elements.
  • API:
    • Selection API: Path selection and multi-select.
    • Validation Hooks: isValidConnection for 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 World component into smaller, focused units.
    • How: Break down World.tsx into sub-components like ViewportManager (pan/zoom/resize), InteractionHandler (selection/dragging/connection), SyncManager (declarative prop-to-engine sync), and ShortcutProvider (keyboard events).
  • 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 ResizeObserver and 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.