Bard McKinley's profile

Custom Node-based Editor

Custom Node-based Flow Editor using SVG
Screenshot of journey editor, created for QuickPivot
  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..
Demo of journey editor
   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.
Different usage of node framework for data table representation
   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.
Custom Node-based Editor
Published:

Custom Node-based Editor

Published: