Port reordering

[eLizardiDevelopair]

Hi everyone,

I want to implement port reordering inside a node. Can I make it clicking a port and dragging it?

After I've been reading the documentation I've not found any solution. Any thoughts?

Kind regards

[igo]

Probably you will have to create an element that looks and behaves like a port and control it's position using dia.Paper.prototype.options.restrictTranslate. If you figure it out please share your code.

[kumilingus]

You could also create a custom element tool (similar to linkTools.Vertices). When the tool is added to the element, it would render several SVGElements positioned above the ports (either visible or not). Then you could implement the dragging logic (similar to how dragging of vertices works now) when the user starts interact with this tool.

Question is how to implement the UX. Perhaps dragging the port would create a link. If you just click on the port, it would switch the "shuffle ports" mode. And if the user clicks outside of the element, it would go back to "create links" mode. It's not clear to me, if this is what you meant in your question.

We might create an example of this in upcoming days.

[kumilingus]

Here's the demo: #1739

[igo]

Thank you! Would it be also possible to change the side on which port is positioned by dragging it?

[kumilingus]

You are welcome. It's definitely possible.

You would first need to check which group the mouse cursor is closest to (to determine the name of the group the port will be inserted into), and then find the index in that group, as is done in the tool now. There are so many variations on how to arrange ports that it would be difficult to write code to cover them all (supporting only left, right, down, up seems feasible to me).

Note, you could use sideNearestToPoint to determine the group name.

[igo]

Ok. Is there any chance this will became a feature of jointjs that can be enabled by some configuration?

[kumilingus]

That would be a great addition to JointJS. I will create an issue from this discussion.

However, it is not a top priority, so unless someone else takes it on, it may take some time to implement.

Note, that we also offer custom development (https://www.jointjs.com/custom).