STORM React diagrams V3.0
This post outlines what happened in version 3 of Storm React Diagrams.
In a nutshell: Its significantly faster, it removed lagging links, and it prepared for group nodes!
The reason I bumped the version to 3.0.0, is because the library was fundamentally reworked conceptually and in the event that I have unfortunately missed something, I don’t want to just break everyones projects. Unlike 2.x.x, version 3 makes less use of the DOM on each render cycle to work out the positioning of the links. It now only does this when a link has not been rendered for the first time, all further updates are done the same way in which you would normally move nodes and individual points.
The previous version had a function in the DiagramModel called getSelectedEntities. That function implemented all the logic for getting a set of entities that could be interacted with. By simply making more use of the inheritance and graph model, the logic could be spread out across links, nodes and points. This paves the way for group nodes, because a group node can now add to the selection list, a set of entities that can also be moved. This is the same as saying: A group node can be implemented to now also tell the engine to also move/delete all of its children nodes, when it is moved/deleted.
I used this same system to implement the performance updates. Essentially when you now select a node, I also add to the selection list, all the points of each link that is connected. When you then move a node, you are also effectively moving each of the connected points (which used to get their position from the DOM on each render). While this won’t have a significant performance update on a few nodes, it has a massive performance update when selecting and moving 50+ entities, and it also completely removes the lag that used to occur (where links would appear to be a few renders behind while dragging nodes). DOM calls are expensive, so the more we can get away from them, the better.
The grid system was also reworked. Previously the virtual snap-to-grid calculations would occur when getting the X and Y position of each entity before it was rendered, whereas now the snap-to-grid logic is only calculated on the mouse event while temporarily moving nodes. Its worth noting that because the links used to always get their first and last point location from the DOM directly, I have to apply the grid calculations on the mouse event a bit differently since that DOM function is no longer exclusively used on each render cycle.
Further improvements to performance can be gained by turning off the per-pixel box shadow CSS filter. This is a very expensive call to be making on render cycles because the per-pixel nature introduces time lag before it can render the box. If you still wish to have this functionality, you can easily add it via your own CSS again if you like.
This release also saw the introduction of better code standards, and a bit of clean up here and there. I removed some redundant functions, reduced the amount of duplicate calculations and tried to make the sequential logic in some places more understandable and future proof. I also removed the pesky close button which always seems to give issues (just click on a node and delete it instead
I would also like to shoutout to Andrey Taktaev, chumpler, AlexK and DrummerHead for being really awesome and helping me manage this crazy project (even if they don’t know they are doing it :P). Your help in the recent issues, pull requests and Gitter chat has been awesome and I really really appreciate it.
I am trying to take this project a lot more seriously, and appreciate the constant feedback and help from the community (You guys/gals are awesome). Im going to try and make a more concerted effort to dedicate more time to this project on weekends and will try to also post more (here on the blog) my thoughts and plans on the future of the project.
