Custom Node-based Flow Editor using SVG
While working at QuickPivot, I developed a custom node-based editor rendered with SVG. Svg.js was used for basic svg manipulation and the ash framework for the update cycle and entity management, all other code was done from scratch, written in TypeScript, and integrated into the Angular 7+ application. The component was built to support various use cases within the application and was extended for specific purposes..
The primary use case was for a journey editor, enhancing a previously patented UI design based on 'donuts'. Requirements included nodes with multiple edges and anchors, integration with an Html inspector, serialization, validation, and continual addition of new nodes with unique logic. From an architectural perspective, I made something that could be flexible and extensible by centralizing logic in system to prevent brittleness, and that allowing for easy adjustment via backend by strictly separating model data.
Another usage of the framework was in a more traditional node editor for visualizing data table relationships. The initial work was done by another developer, with troubleshooting and optimization help from myself. As we had the possibility of hundreds of tables optimization at the render cycle was required.