We decided to implement a generic node view more or less from scratch. The view should use the normal shadcn design (e.g. base components, icons) whenever possible. It should be implemented so that it can used for different scenarios, e.g. #18.
The node views should be implemented using DOM elements, not a canvas. Edges between nodes should be implemented using SVG paths.
Base requirements:
- Ability to store and load nodes and edges from a JSON format:
- one array containing all nodes, with content, custom state, position
- one array containing all edges, with nodes a, b, edge direction, edge type, custom metadata
- Ability to place and move nodes on a canvas (loaded from JSON, later with user input)
- Ability to connect nodes with edges (loaded from JSON, later with user input)
Advanced requirements:
- Ability to move the entire canvas (infinite scroll)
- Ability to zoom in and out
- Auto placement of nodes
Some examples from the old workbench implementation for inspiration:
We decided to implement a generic node view more or less from scratch. The view should use the normal shadcn design (e.g. base components, icons) whenever possible. It should be implemented so that it can used for different scenarios, e.g. #18.
The node views should be implemented using DOM elements, not a canvas. Edges between nodes should be implemented using SVG paths.
Base requirements:
Advanced requirements:
Some examples from the old workbench implementation for inspiration: