Can we have handle labels?

[ghiscoding]

Hello, I'm currently looking at what the library offers and our needs and at the moment the library seems to be missing these important features required on our side

1. Connector labels (in our use case, we'd like to build programming block like if/else and we need to know which connector is which)
2. I was trying to delete a node connector and it took me 10min to figure out that "Delete" doesn't work but "Backspace" does, which is the default, perhaps making the delete-key-code option accept an array of Keycodes would be better so that both keys could delete a line.
3. resizable node, we'd like to be able to resize and also save/restore to the new dimension
   • related to discussion How can a user resize a node (if is tagged as 'resizable')? #45

So anyway, we're still looking at the lib, but it would be nice if it could have all these missing features mentioned

[bcakmakoglu]

Hey,
I recommend you go into the docs and play around with the examples a bit. 😄

1. What do you mean by connectors? If you're talking about edges, they can be labeled as seen in almost all the examples.
2. The key codes already accept an array of keys. Just try it out.
3. There is a package called @vue-flow/resize-rotate-node, which you can try. It's more or less a beta though.

[ghiscoding]

Thanks, I did check all demos but couldn't find this functionality, our goal would probably be to use the Save & Restore and have these handle labels (it seems I get all these naming wrong lol sorry) coming back in the rendering. Our project let the user add some blocks (nodes), like an "if" block, and connect the handles with other blocks and then save all of that and then reload all of it whenever that project is reloaded. So we need to have a programmatical way of adding the handle labels in every node without having to touch the css, can that all be done with a custom node?

[bcakmakoglu]

No worries about the naming - it's not 100% clear from the docs, I understand that 😄
I will update the docs soon and make it clearer what is named what so these concepts are a bit more obvious to newcomers.

Sure you can, my comment about CSS is purely about styling the Handle, not the Handle content itself.
To clear it up: The Handle component is just a wrapper that simplifies the functionality of a handle - the look and other functionalities your handle should cover, can be done by yourself in any way you want. In the end a Handle is literally just a div element with some event handlers bound to it ^^

As this kind of use-case has been handled by others as well I am positive that you can do all you want (i.e. the if/else casing) with custom nodes.

This, for example, is what a user of Vue Flow has showcased in the Discord:

I am guessing this is pretty much what you want to do as well, right?

[bcakmakoglu]

Here's a very basic example of customizing your handles a bit, just so you get an idea.

[ghiscoding]

wow this is very, very useful, I would totally suggest adding this to the list of Examples as I'm sure this will be helpful to others. The showcase is also quite impressive and similar to what we want to do, do you know if there's a live demo of that with a possible link to visit? I'd be really interested to test it out. Thanks a lot for all the useful tips you give, there's more and more changes we'll use the lib quite soon 😉

[bcakmakoglu]

Sure, I'll add it to the examples as soon as I get to re-working the docs a bit. Time's short rn 😅