kieler / elkjs

ELK's layout algorithms for JavaScript
Other
1.81k stars 97 forks source link

[Question] How to disable automatic wrapping? #310

Closed mscandan closed 1 week ago

mscandan commented 1 week ago

Ask your questions Hello, I am using ElkJS with ReactFlow.

I am using partitions to separate some nodes to a specific partition. When I add more nodes to a column, after some number of nodes it gets wrapped and creates a new column in the partition. I'd like to achieve only one column view. Do you have any tips on achieving this view?

I've created this example

(Optional) Expected behavior I want every node in every partition to be in top to bottom order.

(Optional) Screenshots Current State:

image

Desired View:

image

View with setting elk.hierarchyHandling to INCLUDE_CHILDREN

image

(Optional) ELK Version The ELK or elkjs version: v0.9.3

Eddykasp commented 1 week ago

The problem is that you are using layered for a graph with no edges so the nodes are layouted as separate components. One way you can achieve your goal is by using rectpacking and setting the aspect ratio to a suitable value (see example).

Alternatively you could use layered, add edges, and make them invisible in the rendering.

Eddykasp commented 1 week ago

The aspectRatio option appears to also work for layered so you don't need to use rectpacking.

mscandan commented 1 week ago

@Eddykasp thank you so much, my problem resolved with the aspectRatio