web icon indicating copy to clipboard operation
web copied to clipboard

Document how to expand a parent node based on its children, remove `expandParent` from docs

Open superstes opened this issue 10 months ago • 6 comments

What platform were you using when you found the bug?

  • React Flow / Svelte Flow version: 0.1.30
  • Browser and version: Chromium Version 133.0.6943.53 (Official Build)
  • OS and version: Debian GNU/Linux 12 (bookworm) (64-bit)

Live code example

https://stackblitz.com/edit/x75pr7nk-f4atnmyp

Describe the Bug

If expandParent: true is set for node 2a for the official docs-example - it does not work. The same example for reactflow works as expected.

Steps to reproduce the bug or issue

  1. Add two nested nodes
  2. Add expandParent: true to the child-node
  3. Drag the child to an edge of the parent and see that the parents size does not change

Expected behavior

expandParent to work as seen in reactflow.

Screenshots or Videos

No response

Additional context

No response

superstes avatar Feb 12 '25 20:02 superstes

Same issue on 1.0.0-next.3 (#4878)

superstes avatar Feb 16 '25 20:02 superstes

We decided not to implement parentExpand in Svelte Flow because the feature is flawed in many ways and makes things just far too complicated.

Is this functionality what you are after? https://codesandbox.io/p/sandbox/boring-poitras-x5z223

I will make it an official example once I have ported it - should work pretty much the same way in Svelte Flow.

peterkogo avatar Feb 17 '25 09:02 peterkogo

Thank you for the clarification. In that case the docs should not mention that field: https://svelteflow.dev/api-reference/types/node#expand-parent

Is this functionality what you are after?

Yes - exactly. Will take a look 👍

superstes avatar Feb 17 '25 12:02 superstes

Good point! Will fix it!

peterkogo avatar Feb 17 '25 12:02 peterkogo

If relevant: this is a very basic svelte-5 example for that functionality => https://stackblitz.com/edit/x75pr7nk-9bgtirai

Note: I'm not that experienced in using Svelte and xyflow. I'm sure it can be optimized.. (;

superstes avatar Feb 17 '25 16:02 superstes

I've extended the example to include a resizable node.

What's interesting is that it works fine when resizing to the right or bottom. But to the top or left will result in something of a 'feedback loop' and the node and its parent 'fly off in the abyss' ^^ I would guess it has to do with the combination of position and size change of a child-node. Might look into the expansion-handling the next days in more detail to understand what might be happening here..

superstes avatar Feb 18 '25 22:02 superstes