How to set a graps outer container to the exact heigth of the grap only

[tobiasgraeber]

Hi, i want to set a graps outer container to the exact heigth of the grap only, and show the graph as big as possible, without any margins/paddings around it, depending on the viewport/window width and height (availeable space) - how can i accomplish this?

[bcakmakoglu]

Im not sure what exactly you’re trying to do
Can you describe the expected outcome a bit more in detail or give me some visual? 😅

[tobiasgraeber]

Hi @bcakmakoglu first of all, thanks for your reply. Sure, i´ll try todo so.

We have a graph which we are currently creating via vue Flow and dagre.js (https://github.com/dagrejs/dagre).

• The first part of the graph is created based on dagre.js (regular nodes)
• then we go and add more custom nodes to this graph afterwards, whereby these are then only added afterwards with vue Flow.

We use onPaneReady for the reasons described here #1352

That works so far. Graph generated.

Now to the problem:

Lets assume our graph looks like the one shown in the example here https://vueflow.dev/examples/#basic

But: Depending on our input/data, the graph can of course be of different "size/length".

Now we want the container in which the graph is located to be dynamically and automatically adjusted when initiating or loading the page/graph so that it is at most as high and wide as the graph itself.

If you use the icon for "fitView()" in the example https://vueflow.dev/examples/#basic then this is close but not exactle what we want. With this option, the graph is more or less fitted in width. But not in height. And container stays "fixed" height anyway.

So in other words: There is still space above and below the graph. This means that the initial container for the graph may still be unnecessarily high/wide - as we have to assign an initial height.

We are looking for an option to make the grap container dynamically as high/wide as it is.

In other words, only as high/wide as the red area here:

I think, with "fitView()" alone this cannot be achieved as it seems. I assumed that something like fitBounds() ? https://vueflow.dev/typedocs/type-aliases/FitBounds.html#type-alias-fitbounds

might be the right approach for this. Is this the case or how could we best solve this?

fitBounds(vueFlow.value.getNodes); unfortunately shows no effect so far.

If you could provide a simple example or fiddle, on how you would suggest do solve this, this would be great.

Many thanks in advance for your help

[bcakmakoglu]

I don't think fitbounds is gonna do anything for you here since from what I understand you want the outer container to fit the size of the graph.
So what you would have to do is render the graph and afterwards shrink the container to the size of the node bounds (there's a function called getNodeBounds that can help here), but I'll tell you that this is going to cause a jumping effect because if you can't "pre-calculate" the size of your graph you will have to rely on it being rendered first, get it's size and change the container size, which would also be a layout shift (something you generally would want to avoid since users might try to click buttons and suddenly the layout shifts and they click somewhere unexpected instead ^^)

[tobiasgraeber]

@bcakmakoglu any idea =) ?

[tobiasgraeber]

Or someone else? :-)