Graphite icon indicating copy to clipboard operation
Graphite copied to clipboard

Build the node graph frontend

Open Keavon opened this issue 2 years ago • 0 comments

Done in #581:

  • [x] Create a Node Graph panel
  • [x] HTML/CSS for the graph
  • [x] HTML/CSS for the nodes
  • [x] Generating horizontal flow connection curves
  • [x] Styling horizontal flow connections
  • [x] Generating vertical composite connection curves
  • [x] JS for panning/zooming in the graph
  • [x] Visualizing grid dots neatly at all zoom levels
  • [x] Starting new flow connections by dragging from output ports

TODO:

  • [ ] Styling vertical composite connections
  • [ ] Solve Z ordering so links are behind nodes, except when entering/exiting a node's port
  • [ ] Swap placeholder HTML for data model-driven Vue templating
  • [ ] Assisting new flow connections by snapping to hovered input ports
  • [ ] Persisting new flow connections by dropping onto input ports
  • [ ] Dragging existing flow connections out of their input ports to be moved elsewhere or dropped
  • [ ] Starting new composite connections by dragging from output ports
  • [ ] Assisting new composite connections by snapping to hovered input ports
  • [ ] Persisting new composite connections by dropping onto input ports
  • [ ] Dragging existing composite connections out of their input ports to be moved elsewhere or dropped
  • [ ] Synchronizing user-drawn links with the Vue data model
  • [ ] Selecting/deselecting nodes by clicking and Shift-clicking them
  • [ ] Selecting/deselecting nodes by dragging a box around them (with Shift to append to an existing selection)
  • [ ] Dragging a(ll) selected node(s), plus nodes that are rigidly attached in a chain (those sharing a port without a link drawn)
  • [ ] Snapping the dragged node(s) to the grid
  • [ ] Smooth interpolation between grid squares when being dragged so grid snapping feels less jarring (look into using CSS transitions for this)
  • [ ] Breaking a rigidly attached chain at a shared port so a link connects the ports
  • [ ] Uniting the Vue data model for nodes and link connections with the backend node graph model (or tree-based folder/layer structure if the node graph backend isn't ready yet)

Keavon avatar Apr 05 '22 02:04 Keavon