Allow to set connection radius on each handle individually + allow to set connection rectangle.

[heaven-born]

It might be inconvenient to set a connection radius for all handles at once, moreover, it doesn't always have to be a radius. For example, if I want to make my entire node behave like a handle and accept connections, what I need is a connection rectangle or connection ellipse.

[bcakmakoglu]

I will consider setting radius on a per handle basis but setting a connection "rectangle" or "ellipse" is not necessary imo, that can already be done using existing APIs.
If you need your whole node to be a handle, you can just use a handle and make it the same size as your node - this is not something that requires an additional prop or option to achieve.

[heaven-born]

Is it possible to fix this line connectionPosition = getEventPosition(event, containerBounds) in useHandle.ts to make it get the coordinates from the connection position instead of event position?

[heaven-born]

I'm not sure if this is a technically complex task, but if would propose something like this:

1. For each handle create a div that is responsible for representing the visual shape of the handle (like it is working right now) with the connection spot located in the center of the div.
2. Around this div create a surrounding div that is responsible for representing the 'magnetic' connection area.
3. allow re-shape of both divs with classes provided by developers.

This would allow to keep the connection radius property as it is right now and don't introduce other shapes of connection areas, but will also allow developers to modify the areas of both components of the handle.

[bcakmakoglu]

I'm still not seeing why the library needs to provide any "reshaping" of any sorts.
The Handle component is exported, use it how you see fit and "reshape" it however you like.
This is really not something that the library needs to support further because you can already do it with all the existing APIs.

As mentioned previously, the only idea here that is worth entertaining atm is setting a radius on a per handle basis, but I'm not sure about that yet and will have to think about it, so the feature probably won't be available any time soon either.

[heaven-born]

Technically, I can do it with all the existing APIs and I did, but it was a really hacky trick.

I had to manually implement this magnetic connection functionality for the rectangle using updateConnection when my cursor enters the rectangular area of my node. All build-in handle validation didn't work at this stage, so I had to also manually implement them (maybe I can reuse some API to call default validation. need to investigate). Then I had to stretch my target handle to the size of my node and show/hide it on top of my node when the connection is started/finished.

My point is that making the whole node behave like a handle is a pretty obvious thing to do. I guess a lot of developers may want to do this. But the trick to implement this looks too complex to me.

[heaven-born]

Ah, I got why you think it is easy to implement. I was trying to do the magnetic effect around my node and put the connection to the center of my node when the pointer reaches the surrounding area. If I don't need an effect like this and I only what to connect the nodes when my pointer is mouseup-ed in the node area, there is not much complexity in the solution. Stretching the handle to full node size would be enough.

update: except for the validation. The validation still must be done manually in order to show the user if he can connect this node because the magnetic effect will not be working at this stage.