7 ms·
Pretty neat! I appreciate the time that went into making the graph render nicely. I was recently having fun with Reactflow myself. It took a bit of time to fig
by graup 3y ago
Pretty neat! I appreciate the time that went into making the graph render nicely.
I was recently having fun with Reactflow myself. It took a bit of time to figure out custom nodes and edges. I found that ELK 'layered' (with some tweaking of settings) produces very nice layouts, but of course, we can't use its edge routing in real time if we want to allow users to move nodes around. Thanks for pointing me to @tisoap/react-flow-smart-edge ! I also came up with a similar `wasManuallyMoved` logic. https://github.com/3rd/tsdiagram/blob/66b186e85bf176e47128d0d6b114cd54038f39d1/src/components/Renderer/Renderer.tsx#L53-L98 https://github.com/3rd/tsdiagram/blob/66b186e85bf176e47128d0...
Reactflow's docs have a decent example for using ELK but I wish it went into a bit more detail regarding these choices.
For tweaking ELK settings, this online editor is also super valuable: https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?compressedContent=IYGw5g9gTglgLgCwLYC4AEJgE8CmUcAmAUDiANYB0BM+AxnDBAHboAiA8gOoByRSeYHAFECggM7o4UAK44iTCARwAFTLRz8mcCgCNKAMxgAPQgEEQMME01x0AGSEAxACoceRMQAdgtGEzAUhIIigugAbB7evv6BojjcijjoAIwRXj5+AQpKCUopEZi4+AQU6dEBQcJxAEI4cADuODhMdth4EmgALESFeISlUZmxgrk4tQ1NLW1QHak90-1lQ9nxieONza1FsxHyiWhMAMyHABwArMkAnCedqWgA3hjYENJwaADaaGIwAF5JaFcAEwAGjQlzCaAAumgAL57JQHToABlunWulzOZweTywLzen2+fxSlxBYIh0LhK0RAHZqScSZdGdjCniPl9fv8gaDwVDYfCcAdjodOidTsdOsznq82YTOSTueS+VSmMjDoCzkjqWFLslJbjpQSOcTSTyKfyDskkclhaLqUi9azDUSAfKybzKfsjuKSdSRScHQb2c6uW6zcrAZ00clOmdAVqA-ig3KTYq4ZUDhGozG4xCALQAPkF3rjfpIcQzkZ12fjBcRSLVGq1OrLggrWdjNcLXptYuFLYFTEt1pFhztaFrKtp9MBjMu-YtVp7Y4nmarHYi6cHi5Hy67yNR6Mx863w9t9onx3OVxuc03QpHouF4739fVmu1yWP++jh6xK8r0brse94+n6z51g277NnepwXNctx5l2q6ATmX5TgyTL-u2OZAA https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?c...
- _andrei_ 3y agoGlad we share the same pain! I'm not happy with the edge routing, it's ok in most cases, but it could be so much better. It's definitely where most of the upcoming development time will go. I'll bite the bullet and make something custom with what I can learn from react-fow-smart-edge and https://medium.com/swlh/routing-orthogonal-diagram-connectors-in-javascript-191dc2c5ff70 https://medium.com/swlh/routing-orthogonal-diagram-connector..., I really really want the edges not to overlap, but be a bit spaced out, so it's clear where each one goes.