What are people using to develop web-based node-an...
# present-company
o
What are people using to develop web-based node-and-wire programming interfaces? I need to implement a robust, high-performance, graph based programming interface at work for a DSL and am looking for things that will help. Any pointers to JS tools for graph interfaces, vertex layout, edge routing, etc would be welcome!
m
I am curious to this as well what other use.. I myself currently use a hybrid-canvas based approach where the wires are drawn using the konva library (canvas wrapper) and I calculate the controlpoints for the curves in custom code. For the nodes themselves I use react. To get higher performance I do direct manipulation of elements using references to elements (a lot of useRef usage in react).
m
m
Yeah, thats an awesome library! I have plans todo a big rewrite/refactor and will use this library as an inspiration source. I dont want to use the library myself because I want to try keep the dependencies limited and also be in control as much as possible. One thing that I do wonder: Svg is used here and not canvas. Performance is still very good there. Do you think svg is better performance wise for node and wire interfaces in a web interface?
t
m
Anybody here experience with coding a custom webgl node and wire web interface?
m
I think https://cables.gl/ is all webgl
n
I ended up building my graph dataset editor with SVG because it’s declarative and natively supported in the DOM: https://grapheralpha.netlify.app/
m
For the browser it might be possible to render using the gpu if you mix svg and dom elements versus canvas in combination with dom elements (that's why I currently do). Does anybody have knowledge about this here?
j
This seems very close to the interface I have been hoping for, which would allow nested graphs, (which RF does), and would allow you to change the content based on the zoom level (which RF does), AND would allow you to nest arbitrarily deeply, without reaching a resolution limit. So the canvas is infinite in width, height, AND resolution. Can RF do that?
n
@Jason Morris For "nested graphs", check out this thing I built: https://grapherx.netlify.app/ (code at https://codeberg.org/nilesh/grapher )