Skip to content

Frontend for the node graph #580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
23 of 26 tasks
Tracked by #144
Keavon opened this issue Apr 5, 2022 · 1 comment · Fixed by #581
Closed
23 of 26 tasks
Tracked by #144

Frontend for the node graph #580

Keavon opened this issue Apr 5, 2022 · 1 comment · Fixed by #581
Assignees
Labels
Web Involves web programming (TypeScript, Svelte, CSS)
Milestone

Comments

@Keavon
Copy link
Member

Keavon commented Apr 5, 2022

Done in #581:

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

Done in #846:

  • Swap placeholder HTML for data model-driven Vue templating
  • Assisting new flow connections by snapping to hovered input 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)
  • Selecting/deselecting nodes by clicking
  • Displaying parameters in the Properties panel

Done in #855:

  • Synchronizing user-drawn links with the Vue data model
  • Persisting new flow connections by dropping onto input ports
  • Multi-selecting nodes by Shift-clicking them

Done in #863:

  • Secondary inputs
  • Dragging nodes
  • Snapping the dragged node(s) to the grid

Done in #866:

  • Exposing inputs to the graph

Done in #869:

  • Node add menu
  • Search box in add menu

Later (post-MVP) improvements:

  • Solve Z ordering so links are behind nodes, except when entering/exiting a node's port
  • Selecting/deselecting nodes by dragging a box around them (with Shift to append to an existing selection)
  • Smooth interpolation between grid squares when being dragged so grid snapping feels less jarring (look into using CSS transitions for this)
@Keavon Keavon added Feature Web Involves web programming (TypeScript, Svelte, CSS) labels Apr 5, 2022
@Keavon Keavon added this to the Sprint 13 (ongoing) milestone Apr 5, 2022
@Keavon Keavon self-assigned this Apr 5, 2022
@Keavon Keavon reopened this May 11, 2022
@Keavon Keavon linked a pull request May 11, 2022 that will close this issue
9 tasks
@Keavon Keavon modified the milestones: Sprint 14, Sprint 15 (ongoing) May 14, 2022
@Keavon Keavon modified the milestones: Sprint 16, Sprint 17 (ongoing) Jul 9, 2022
@Keavon Keavon changed the title Build the node graph frontend Frontend for the node graph Oct 22, 2022
@Keavon Keavon added this to the Sprint 20 milestone Dec 12, 2022
@Keavon
Copy link
Member Author

Keavon commented Dec 12, 2022

Closed by the various PRs listed in the issue description during Sprint 20.

@Keavon Keavon closed this as completed Dec 12, 2022
@Keavon Keavon added Rust and removed In-Progress labels Dec 12, 2022
@0HyperCube 0HyperCube moved this to Completed This Sprint in Task Board Mar 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Web Involves web programming (TypeScript, Svelte, CSS)
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants