Position the source endpoint on managed parent instead of child during drag

[panayotisk]

Version: jsplumb 5.4.0 Summary: Setting a managed element's child element as a source selector, a connection's starting endpoint remains on the child while dragging the connection. It seems more intuitive to directly position it on the element that will ultimately act as the connection source.
On the above image the target endpoint is not yet dropped on the blue element and it seems more natural to have the source endpoint directly being on the red element - not position it there after the drop. The functionality would look similar to the one we get when detaching a target endpoint. Maybe ideal would be to have an option as to where should the start endpoint be positioned. This is a feature request which might be difficult. If it cannot be done by the library is there some way we can do it by calculating the resulting endpoint position ourselves on INTERCEPT_BEFORE_DRAG and position it? Related issues: jsplumb/community-edition#60 I think this describes a similar issue.

[sporritt]

can you share the html for the screenshot above? and the addSourceSelector call?

[panayotisk]

Code sandbox: https://codesandbox.io/s/connect-from-child-element-test-mcspoi

[sporritt]

and so in this case when the user starts dragging you'd want the source endpoint to be in the middle of the bottom of the red element?

Personally - for what it's worth - I don't really agree that that approach seems more natural. To me it feels like a bit of a disconnect. But jsPlumb is not just about my personal tastes of course. It might be possible to do this - but I would indulge my own viewpoint a little and have it on a flag...

To be clear, though, currently I have no idea how much effort this could be. I havent looked into the code yet.

[panayotisk]

Yes, in this particular test case I would want the source endpoint in the middle of the bottom face. In real-world scenario I would probably configure it to start from the middle of the right face (or, if it is a continuous anchor, to auto-position on the right face) for a right handler (child) element. This is the way miro (miro.com), a great flowcharting tool, handles new connections. In the 1st picture when selecting the node, 4 circle handles are displayed each on every side.
Then, when starting a connection, the source endpoint is on the middle of the face of the corresponding handler while dragging (it does not leave the endpoint on the handler).

The same UX is also true for whimsical (whimsical.com) when dragging a new connection from a handler. Thank you for taking all requests into consideration. By the way, version 5.x is a major improvement in all aspects over the older 2.x!

[panayotisk]

I forgot to mention that these tools actually hide (or destroy) the handler elements on starting a connection drag. They do not keep it visible until the drop. But for this to happen, the connection's source should get positioned on the node immediately.

[sporritt]

This sounds like what you have in that codepen to me - drag starts on some element and the connection remains attached to that element for the duration of the drag? If in that codepen the white box was closer to the red box and a little smaller, plus perhaps only appearing on hover, would that not mimic the behaviour you're describing?

[panayotisk]

Well, it is not the same exactly because the handler may need to be a bit further away from the actual source element (see the miro handler). I thought I could mimic the behavior by repositioning the handler element on INTERCEPT_BEFORE_DRAG interceptor on the actual source element (and then hide or destroy it), but I suspect the starting endpoint will not move if I reposition the handler because it is not attached to the handler. I will try it in a codepen though, to see it. Moreover it will not cover the case of a continuous anchor where the endpoint may not start in the middle of a face and may also need to be repositioned during drag.