search

tone-row / flowchart-fun

Easily generate flowcharts and diagrams from text ⿻
https://flowchart.fun/
MIT License
3.15k stars 229 forks source link

Define the minimum spacing between nodes #149

Closed physics515 closed 3 years ago

physics515 commented 3 years ago

First off, I love this project. I have been using it to plan another project I'm working on for the last couple weeks and it has proven to be far superior to nearly every other tool I have tried thus far. So take my few "gripes" with a small grain of salt, as they are much more akin to a wish list.

The Question

Is there a way, or could we add a way, to define a minimum distance between nodes?

The problem

The problem is that for projects with a large number of nodes, there is often an overlap of nodes (nodes displayed over top of one another making one node not visible to the user) or node that are very close to one another making it difficult to read.

The proposed solution

Add a value for the minimum distance (center to center) from one node to another. This could be a setting defined in the the header of the file or in the settings page. The user could enter a value of 200px (units not important) and the minimum distance between the center of one node to any other node would be 200px. Or a setting of either 0 or "auto" to keep the current behavior.

I don't know if this is possible to implement with the current algorithms or if the performance hit would make it not worth implementing but I think it would prove useful to myself at least.

Thank you in advance for your comments.

rob-gordon commented 3 years ago

Hey! I'm glad the project is helpful for you. Thanks for taking the time to open up issues with feature ideas. I haven't been able to add features in a couple of months but I'm glad that there are still interested people using the app!

I saw in another issue you opened that you have some familiarity with cytoscape.js- everything under the layout key in your chart's frontmatter is actually passed along to cytoscape's .layout() function.

~~~
layout:
  (ANYTHING YOU PUT HERE)
~~~

So although there's no UI for it, there is already a way to control minimum spacing using the spacingFactor option. Here's an example.

Different layouts (dagre, circular, etc.) have different layout options, but I'm pretty sure the spacingFactor key is used by most if not all of them. A good place to look at options is on the cytoscape dagre API.

physics515 commented 3 years ago

Awesome, I didn't realize that this was feature complete! This is extremely helpful. Thank you.

physics515 commented 3 years ago

I was able to play around with the spacingFactor option and a few others from the documentation. spacingFactor seemd to only add padding to the canvas and not between the nodes themselves. On top of that, it seems that most algorithms seem to implement options differently, if at all.

I would still love to have this feature to prevent nodes from overlapping but I have no idea how you would pull it off. Huge kudos if you manage it.

Edit: A way I see that it could be done is to wait for the layout algo to finish then loop over the nodes and spread them out.

rob-gordon commented 3 years ago

@physics515 Going to go ahead and close this one. I know it's not a perfect solution but I think this is probably as close I can get for the time-being. Thanks for your interest and support! Please don't hesitate to open other issues / feature requests in the future.