Autoresize parent node

[Ranzeb]

Is there a way to auto-resize the parent when some child's nodes are moved to the border of the parent node?

I've implemented a bunch of code that works only on width and height so I can only automatically resize my parent in two directions but I'm looking for something that can help me to have a behavior similar to NodeResize but without manually handling the size but trigger the resize when I drag a child node from inside the parent near the border.

I can handle the drag stuff and calculate the current node's dragged position. I'm looking for a way to trigger the NodeResize and change the parent node's size.

[bcakmakoglu]

You're probably looking for the expandParent option?

{
    id: '2',
    data: { label: 'Group A' },
    position: { x: 100, y: 100 },
    className: 'light',
    style: { backgroundColor: 'rgba(255, 0, 0, 0.2)', width: 200, height: 200 },
  },
  {
    id: '2a',
    data: { label: 'Node A.1' },
    position: { x: 10, y: 50 },
    parentNode: '2',
    expandParent: true, // <-- set this to true to expand the parent when reaching it's border
  },

Though be aware that there is no "auto-collapse" option to reverse the resize.

[Ranzeb]

Thank you! I've written a lot of code to just handle the resize in two directions.

Probably I had to read better the documentation.

Am I right that I can make the parent a resizable node type and the add a custom function to onResize method to check for possible collisions with child nodes and the move the inside nodes in a different position to handle the auto-collapse functionality?

[bcakmakoglu]

onResize has nothing to do with expandParent so that event won't be called when the node size is changed through the expandParent option.
Your idea seems right, you'll just have to listen to the resizing changes in a different manner :/

[Ranzeb]

But there's a way to check all the child nodes in a parent node?

[elvin-hwang]

Follow up of this question, is there a way to check the cumulative size of all children's width/height under a parent without writing a recursive function to parse the nodes array?

[moklick]

For this you can use the getNodesBounds function https://reactflow.dev/api-reference/utils/get-nodes-bounds

[tth-ops]

How to achieve automatic reduction of node group size