I am impressed with Node Red interactive Flow Editor. I have to develop same flow editor for learning purpose. After some RND I found these things
1 - Node Red using GRID like background image just for helping users align nodes and create flows more easily.
2 - Node-RED using SVG's
Note: If I am wrong please guide me write path to learn these things. I have to learn any how
The Editor's main panel uses a combination of helper libraries. Probably the most critical being D3.js
D3 is a library designed to make complex graphical web UI's a bit easier to work with.
Without looking at the code, I couldn't say how the optional grid is displayed. It won't be "an image" though, it will most likely be an SVG pattern generated by D3 (though that's a guess).
Yes, the Editor uses SVG's extensively.
Here you can see the SVG that defines the main panel and can clearly see the grid:
1 Like
Thanks a lot, for clearing my doubt.
