Hiding endpoints on div hover

[Yash Soni]

Hi!

I am creating a simple program based on the 'flowchartConnectorsDemo.html' where I want to hide the endpoints in normal usage and display them only when I hover on the respective div.

Can you please tell me hw can I do it?

Thanks!

[Simon Porritt]

You need to look at the 'selectEndpoints' function - you could have something like:

$("someSelector").hover(

  function() { jsPlumb.selectEndpoints({element:$(this)}).setVisible(true); },

  function() { jsPlumb.selectEndpoints({element:$(this)}).setVisible(false); }

);

[Yash Soni]

Thanks for the prompt reply! :)

Actually the main idea is to hide the endpoints always and make them visible only while connecting. 

For example, when I hover on a particular div, all the 4 endpoints should be visible so that I can drag one of them. While connecting, if I move the connector line to the target div, they should be visible again so that I can make the connection.

I tried changing visibility but I am facing many problems. 

[Simon Porritt]

Well the code I pasted would definitely hide/show the endpoints based on hover, but of course there's a possibility that as soon as you hover over one of the endpoints it gets hidden, since a mouseout has been posted on that div, right?  So it would actually have to be a little bit more clever than just what I put there.  You might want to check that the target of the event is not an endpoint, for example:

function(e) { if (!$(e.target).hasClass("_jsPlumb_endpoint")) { ... hide/show } }

and then you have the problem of what will happen once you start dragging a connection. i would suggest to you that subscribe to the connectionDrag event, and set a flag whenever a connection is being dragged, which you would also check in your hover code.  But for some reason I didn't hook up that event for new connections, only existing ones (I have fixed this in 1.4.0, but I'm not yet sure when 1.4.0 will come out).

As for making target endpoints visible, yeah I'm not sure how you will handle that. I'm not sure if it's a great user experience to have to drag the connection over the target div to see what endpoints are available on there. I kind of think it would be more intuitive if available endpoints were made visible as soon as i started dragging a connection.

but of course it's your UI ;)