Graphite
Graphite copied to clipboard
Build the node graph frontend
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)