React-diagrams: Dynamic generating node and automatic positioning

[MBehtemam]

hi , first thanks for your awsome library, i create nodes and links with for loop , now my question is , is this library has any automatic arrangement for positioning nodes on the page ? if not what do i can for positioning nodes correctly and nicely on page

[alex-enchi]

No, but you can do auto-arrangement via dagre
with some limitations. But it works

[Kepro]

@alex-enchi any small demo? how to do it in correct way? please :)

[slvnperron]

+1

[alex-enchi]

Small update.
I've created a small example of how to use dagre rdi-94-dagre-example branch
I'll clean it up this week and make a pull request

Some important notes:

Because i don't know yet how to update node position properly (see #107) it'll work only before first render.

Default for dagre layout direction is top to bottom, it is possible to change it dagre wiki. But there are difficulties if node has ports on all sides of the node. I.e. if distribution is top -> bottom and 2 nodes are connected via ports on the sides there is no way to tell ranking function to keep this 2 nodes on the same level

Example:
Instead of this

Dagre will generate that layout

[slvnperron]

Awesome Alex, can't wait for the PR!

On Nov 14, 2017 4:14 PM, "Alex K" [e-mail] wrote:

Small update.
I've created a small example of how to use dagre rdi-94-dagre-example
branch
https://github.com/alex-enchi/react-diagrams/tree/rdi-94-dagre-example
I'll clean it up this week and make a pull request
Some important notes:

Because i don't know yet how to update node position properly (see #107
https://github.com/projectstorm/react-diagrams/issues/107) it'll work
only before first render.

Default for dagre layout direction is top to bottom, it is possible to
change it dagre wiki
https://github.com/cpettitt/dagre/wiki#configuring-the-layout. But
there are difficulties if node has ports on all sides of the node. I.e. if
distribution is top -> bottom and 2 nodes are connected via ports on the
sides there is no way to tell ranking function to keep this 2 nodes on the
same level

Example:
Instead of this
[image: example-not-gona-happen]
https://user-images.githubusercontent.com/24417201/32805133-3b716de2-c991-11e7-8ab3-4989e47cf4c4.png

Dagre will generate that layout
[image: example-actual-result]
https://user-images.githubusercontent.com/24417201/32805134-3b9400b4-c991-11e7-9379-b589879ebdff.png

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/projectstorm/react-diagrams/issues/94#issuecomment-344400770,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABQStJwRemynZzXgZNX9OodC_SxhHQ7mks5s2gLRgaJpZM4Pnw7W
.

[alex-enchi]

PR is more or less ready #112
But there are still couple of issues to address

[dylanvorster]

8b7b32f4edbfac625a4953060c1d62f732af078a

[kumar-tdx]

Hi. Is it missing in the latest version?

[Kepro]

@kumar-tdx are you serious? post from 2017 that is closed already? :) http://projectstorm.cloud/react-diagrams/?path=/story/3rd-party-libraries--auto-distribute-dagre but demo page is not working... but check source code...

[kumar-tdx]

@Kepro Thanks for the quick response. I already checked the source code. I could not find recalculatePortsVisually method in DiagramEngine. So I was wondering if it was removed in the latest version or is there any other way to achieve it?