How to let a node dynamically resize to fit its content?

[microdou]

It looks like node's dimension is set upon mount. Thus when node's content changes size during user interaction, node container unfortunately remains its original size.

I'm currently using a workaround, by modifying the following code

Svelvet/src/lib/components/Node/InternalNode.svelte

Lines 271 to 272 in 6f53df1

	style:width="{$widthStore}px"
	style:height="{$heightStore}px"

to:

style:width="fit-content"
style:height="fit-content"

I have to fork/copy Svelvet to do so, and the workaround forces every single node to use css fit-content instead of Svelvet's internal stores.

Is there a better way, or it has to be a new feature?

[briangregoryholmes]

This is something I'm actively looking into. It's obviously very easy to implement this, but doing so without impacting other functionality requires some thought. I think I have the right solution and will probably release something today to enable this, but do you mind providing a code snippet of your custom Node? There's a similar open issue here: #323.

Just want to make sure my implementation covers the broadest use cases and is testable.

[microdou]

Thanks for prompt response!

I don't have code at hand, but the issue #323 pretty much explains what I encountered.

My current use case is having a table in node, and the table's size naturally changes when its content/rows/columns changes, and node should have an adaptive size.

My future use case will likely also need dynamic change of the size of a Group. The Group size should change accordingly when dragging a node into the group, or new nodes are programmatically created in the group. (I don't know if currently Svelvet is able to do so, since I haven't really tried customizing the Group yet)

[microdou]

BTW, Svelvet is such an awesome library!

I used it for simple flow charts prior to v7.

Now with v7 introducing infinite possibilities, I'm actually trying to migrate my current app from traditional UI into a Node-based UI 😅

[briangregoryholmes]

Thanks for the kind words! We're really excited about the direction of the library and appreciate when you guys bring needs like this to our attention.

I think I figured it out. The crux for me was making sure that resizability was still possible via our handles. I didn't want to have to put in the docs that you had to choose one or the other. Take a look at the video below and let me know if this is how you expect this feature to behave. It won't require props or anything. It should just work.

Tagging @rohanrajpal as well.

Untitled.mov

[microdou]

The video looks pretty good. Height correctly fits the change of content.

Does width also adapt? In my use case, I would like the node to tightly wrap the content. This is particularly useful:

1. To ensure the node is as small as possible to maximize canvas space usage.
2. No need to figure out the dimension of node. Developer only needs to focus on the component inside the node. As long as the component itself is accurately sized, the node tightly wrapping around it is correctly sized.

That's based on my use case, to size the component and let node size itself. But I guess some may want it the other way: size the node, and let the component within to flex 😅

Also, I noticed in the video some components pops out of the node when node becomes too small. I guess some people may want this behavior, but I would like the node to be never smaller than the content. Maybe there can be some props to specify different kinds of behaviors.

[rohanrajpal]

Lovely! This is exactly what I wanted.

[briangregoryholmes]

That popping is really just a quirk of how unstyled buttons behave, unfortunately. Anything styled wouldn't have that issue. Width also adapts as seen below. I pushed this update into main but haven't released yet. Will do some more testing and release tomorrow.

Screen.Recording.2023-05-03.at.10.21.37.PM.mov

[microdou]

Awesome!

I guess anchors will correctly move along with the borders of the node? We don't want anchor stuck at the original place 😅

[briangregoryholmes]

Yep, they respect whatever relative or absolute position you're using.

[briangregoryholmes]

This is live in v7.0.41

[microdou]

@briangregoryholmes Thanks for the awesome work!

I'm still encountering an issue in my own use case. It may or may not be a Svelvet issue though, I'm not sure yet.

I embed Carbon DataTables in custom nodes, as shown in the sample code below. You should see two table nodes side by side.

https://stackblitz.com/edit/svelvet-carbon-q2efd2

Carbon DataTable has a Pagination component. Some buttons don't work when embedded in a svelvet node, as in right-side table. Once I wrap the same table with a div and set stopPropagation as in the left table, the buttons work, but then table & node size constantly get unsync, until I click anywhere of the canvas.

[microdou]

That was 7.0.42. Interesting that the latest 7.0.43 resolved part of the issue: dropdown buttons in the embedded Table is now clickable even without stopPropagation.

https://stackblitz.com/edit/svelvet-carbon-fxtsux

Now both tables behave exactly the same:
clicking buttons
-> table size changes
-> node auto resizes, but not to the correct size
-> manually click anywhere on canvas -> node resizes to the correct size

[briangregoryholmes]

Actively working on this. I'll let you know when the release has the correct fix. 7.0.43 was unrelated, but had a small change about handling select tags.

[microdou]

Thank you so much! Imagine when all components from 3rd party libraries work in a Svelvet Node the same way as in a regular page. Endless possibilities :)

[briangregoryholmes]

@microdou Alright. v7.0.44 is up now. There were a lot of moving pieces to enabling this, not the least of which is some weird difference in implementation of the HTML select element between browsers, but I think I settled on something that covers most cases. Give it a shot and let me know.

[microdou]

Wow, works brilliantly for my Table components so far!

For an embedded Carbon Slider, featuring dragging event, I still have to add a stopPropagation div wrapper. It's not a bothering issue to me. But who knows, maybe solving the issue will eliminate some edge cases for Svelvet :) I will add a code example later on, or next week.

Have a good weekend!

[anoopsinghbayes]

is there a minimum example where i can see the nodes make way for another node above it ,
i have a situation where i got details summary inside the node and would like the node lets say below it to push down if the detail is opened