Unifying nodes/edges into a hierarchy from a base 'element' type
When extending react-flow with more advanced features (for example the pro editable edges) you quickly run into certain limitations such as not being able to select control points. this makes moving those control points harder when moving the selected edge. or the ability to just select two control points and move those individually. This is technically possible with custom wrappers around the selection but it would be nice if there was a built in way to select these elements.
My thinking is treating both nodes & edges as a singular 'element' type internally, this can then be extended for custom things such as a 'controlPoint' or perhaps other types. All of these elements are then selectable, draggable, moveable, all the functions that both nodes & edges already do individually, except that logic is now shifted to only work with that base 'element' type instead of having that logic for nodes and edges alike.
This also makes updating elements easier by using a setElements(...) call instead of both setEdges(...) and setNodes(...) calls when moving elements for example, but also advanced features such as custom data, helper lines, snapping etc, both nodes and edges can easily make use of these features if those features only rely on the 'core' positions/size or other shared properties like data. Same goes for the custom elements like 'control points', since these would also share those 'core' properties, they can make use of the same system for selection, snapping, grouping etc.
I can't speak much for the internals of react-flow, but this is likely a breaking change. I'm not sure how easy it would be to make it backwards compatible with the current way of working. but from a high-level point of view it should make things simpler?
Hope my description is clear, let me know your thoughts also
Source: xyflow/xyflow