Resizeable nodes [new feature]

[ulissepress]

What about a new feature: at node level we can specify a new property 'resize' with the following allowed values 'no', 'horizontal', 'vertical', 'both'.

When the value if not 'no', the user can change the node size using the mouse and related resize handle(s).

See this discussion for more details.

[bcakmakoglu]

I am not fully convinced of the use-cases as I don't see why the regular nodes would need to be manually resized.
When the node content changes, the size of a node would usually change "automatically" with a resize observer.

Also a custom node can handle the use-case pretty easily without adding extra options to vue flow.

This post can serve as a sort of interest check is my suggestion, if there's a couple people interested in the feature I will consider it and add it to a future release 😄

Alternatively I would suggest an "Addon" similar to the Pathfinding Edge (demo here).

[ulissepress]

ok, got it!

[bcakmakoglu]

@ulissepress
I've thought about this for a while now and will possibly create a plugin with an additional node that can handle resizing, rotating etc.
Meaning it will not be part of the core @braks/vue-flow package (to keep it slim) but rather a separate package like @braks/vue-flow-resizable-node or something that people can opt into if they need a resizable node.

Would that sound good to your use case? 😄

[ulissepress]

Yes absolutely This will be perfect!

[ulissepress]

Let me know when this is ready! :-)

[bcakmakoglu]

I will try to get to it this weekend but I can't promise it as I got regular work as well 😅
Though it shouldn't be too difficult to create it in a couple hours so you might be lucky 🚀

[ulissepress]

Great!

[ulissepress]

thanks, the best should be to support it natively when you pass the node information (today we pass x and y, tomorrow we (optionally) pass also width, height, rotation). Of course while the user is dragging/resizing all the nodes this data are automatically updated, so when we call toObject() method we get all required data to re-create the graph with the same state.

[bcakmakoglu]

Well you can actually use width and height as properties on a node.
Check the typedocs to see all possible properties for a node you can define on initial render.

So that part should actually be copied when calling toObject().
The issue is a) the rotation and b) the fact that the underlying element is not at the same position as the visible node (check your devtools and see how the elements are layered) simply because the visible area needs to be able to move away from the actual position but maybe that can be remedied by aligning them properly after resizing.

Rotation is something that probably won't be built-in into vue flow for the foreseeable future (but who knows) - so rotation values might have to be stored in the data object to save & restore it.

[ulissepress]

ok clear, supporting natively (i.e. without any specific plugin) width/height properties and interactive resizing will be already a good result!

[bcakmakoglu]

@ulissepress there'll be an update of the resize-rotate-node pkg soon; All frame related data (size, rotation etc.) will be saved to data object of a resize-rotate node so if you save them you can load them with the correct frame again.

[ulissepress]

thank you @bcakmakoglu to keep me updated on this topic