search

Hareeshchandera / jsplumb

Automatically exported from code.google.com/p/jsplumb
0 stars 0 forks source link

Enhancement Request: Avoid overlaping connections between elements #205

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
I'd be very interested in a feature in jsplumb to avoided the overlap of 
connections, see screenshot as to what i mean, in the scenario where labels are 
not used and before mouse over the connections, it's not clear from a visual 
perspective what element is connected to what.

Item 4 'South' endpoint could be connected to item 3 'North' endpoint, item 1 
'North' endpoint, item 1 'South' endpoint or item 2 'East' endpoint. Or even 
connected 1, more or all of these elements.

If there was a way to introduce a bridge type connection at the area where 
connections overlap?

Regards,
Brendan

Original issue reported on code.google.com by Brendan....@gmail.com on 23 Feb 2012 at 2:46

Attachments:

GoogleCodeExporter commented 8 years ago 
this would certainly be a nice feature, but i haven't the time to implement it 
- it's not a trivial amount of work.

Original comment by simon.po...@gmail.com on 23 Feb 2012 at 8:10

GoogleCodeExporter commented 8 years ago 
it just occurred to me that you could use the "outlineColor" and "outlineWidth" 
properties to a connector's paint style to do a pseudo version of this...

Original comment by simon.po...@gmail.com on 31 Mar 2012 at 5:55

Attachments:

GoogleCodeExporter commented 8 years ago 
Simon, could you explain a little more? How can the "pseudo version" be 
implemented?

-teekay

Original comment by kumaranr...@gmail.com on 2 May 2012 at 4:06

GoogleCodeExporter commented 8 years ago 
if you set outlineWidth to be reasonably wide, like

jsPlumb.connect({
  source:"div1",
  target:"div2",
  outlineColor:"white",
  outlineWidth:8,
  paintStyle:{lineWidth:2, strokeStyle:"red"}
});

and you set a "mouseenter" event handler on connections, you can bump up their 
z-index so it sits on top of all the other connections. right now it's a bit 
hacky since it requires that you access the 'canvas' member of a connection, 
which is not really exposed for public usage.  but i think i might build this 
in to jsPlumb.  so you might do this:

jsPlumb.bind("jsPlumbConnection", function(connInfo) {
  connInfo.connection.bind("mouseenter", function() {
   jsPlumb.select().each(function(conn) {
     $(conn.canvas).css("z-index", 1);
   });
   $(connInfo.connection.canvas).css("z-index", 2);
  });

something like that (i havent actually tried to run this). like i said, a bit 
messy. but what's happening here is that on mouseenter we are switching all 
connectors back to some default z-index and then bumping up the connector for 
the given connection.

in jsPlumb itself i thought it would be good to capture this behaviour somehow. 
 like the notion that there is a default z-index for connections but that the 
currently hovered connection should sit on top of the others. maybe this could 
be done with two new defaults:

jsPlumb.Defaults.ConnectorZIndex

and

jsPlumb.Defaults.ConnectorsToFrontOnHover

i'm a little wary of this since i like the fact that people can (and should!) 
use css to set z indices.  well maybe its just the first one i am wary of.  
maybe i can just get the z-index on hover start and stash it on the connection, 
and hook it all up with the setHover function.

Original comment by simon.po...@gmail.com on 14 May 2012 at 3:12

GoogleCodeExporter commented 8 years ago 
ok so in fact i'm not going to add either of those defaults. I just added 
'HoverClass' instead. so you can set this and it will be applied to all 
connections on hover, regardless of whether they were made with the mouse or 
with jsPlumb.connect. then you can set a zindex on there.

you don't need half of that rambling explanation i wrote up there.  just the 
bit about outlineColor and outlineWidth, coupled with a HoverClass.

closing this out. i won't be doing any smart routing stuff in the connectors.

Original comment by simon.po...@gmail.com on 14 May 2012 at 3:30