Changing layout direction and running functions on chart load

[juanmrtnz]

Hi @copyfactory , I've been using Alpine Flow recently and I have a couple of questions:

• Is there a way to change the layout direction of the chart, so that instead of going from top to bottom, it goes, for example, from left to right? (like setting rankdir: 'lr' in dagre).
• How can I make the chart center automatically when it is loaded? I know there's the function editor.setViewportToCenter() that runs when the corresponding toolbar button is clicked, but I'm having trouble running it myself. It'd be nice if this was the default behaviour when the chart is loaded.

Thanks in advance!

[copyfactory]

Hi @juanmrtnz!

1. Not yet... This is something I was going to implement if/when someone requested it since I need to update the edge drawing logic. Will look at updating to support this and the other dagre layout configs.
2. Have you tried the flow-init event? It's triggered after the first drawing of nodes. Depending on how you are loading the nodes this may not work so do let me know. I'll also add an auto-center config option for the editor so that when nodes are deleted/added, the center is triggered.

@flow-init.window="$nextTick(() => { setViewportToCenter() });"

Do let me know any other thoughts you have as the project is still early and trying to determine the events to let you hook into and API is of interest.

Thank you!

[juanmrtnz]

Hey, thanks for the quick answer!

1. Great. Would you mind letting me know when you implement (if you do) the left to right layout? I'd start using it right away hehe.
2. I've tried @flow-init.window as you suggested but the editor is centered to the first node, instead of the whole chart. I think it is because of the way I'm loading the nodes, but I'm not entirely sure. I think adding an auto-center config option so that it triggers on chart load would be a nice feature.

Apart from that, I have no complaints. The project is very nice and easy to use. Keep it up!