Right click on a connection

[GoogleCodeExporter]

I am trying to pop up a context menu upon right clicking a connection. When I 
bind the 'click' event to the created connection, it only seems to fire on the 
left mouse click. Here is a quick sample I put together in jsFiddle:

http://jsfiddle.net/bLGGU/

I feel that I am missing something silly, but I can't figure it out for the 
life of me. I have also tried binding the 'mouseup' and 'mousedown' events to 
the connection sans any luck.

I have seen an earlier issue here where the poster claimed that the 'click' 
event binding fires for both left and right mouse click events, though it 
doesn't happen in my case.

Could you please take a look and see what could be wrong?

Thanks in advance!

Original issue reported on code.google.com by sures...@gmail.com on 28 Oct 2011 at 6:55

[GoogleCodeExporter]

Simplified to a new jsFiddle:

http://jsfiddle.net/WtvR5/

Original comment by sures...@gmail.com on 28 Oct 2011 at 6:58

[GoogleCodeExporter]

have you tried registering a right click listener on some element when jsplumb 
is not involved? i mean like just a simple test page type of thing?

Original comment by simon.po...@gmail.com on 28 Oct 2011 at 10:21

[GoogleCodeExporter]

Thanks for the reply. Please take a look at the following jsfiddle for a 
demonstration of my question:

http://jsfiddle.net/L7LMQ/

Quick summary:

1. The "click" event on an element (the DIV "w1" in this example) only captures 
the left mouse click, same behavior in FF7 and Chrome 15.

2. I can bind the "mousedown" event on an element (the DIV "w2" in this 
example) to capture the left and right clicks - works in FF7 and Chrome 15.

3. However, when I bind the "click" event to the connection created, FF7 
captures the left and right clicks successfully (unlike in the case of "w1"), 
whereas Chrome 15 only recognizes the left mouse click. I was hoping that the 
behavior will be the same across (at least) these two browsers. Since the 
connection object do not have the mousedown event associated with it (as I 
understand from the API docs), I am unable to get the right click on a 
connection working in Chrome.

P.S - the right click doesn't work in FF7 either if I switch the rendering mode 
from CANVAS to SVG - any ideas?

Hope this clarifies the issue a bit more. Any help will be appreciated and once 
again, great job with this amazing library!

Original comment by sures...@gmail.com on 2 Nov 2011 at 8:22

[GoogleCodeExporter]

the mouse events when using the Canvas renderer actually involve a fair bit of 
thinking under the hood, because of the way the UI is constituted of a whole 
bunch of Canvas elements overlaid on each other.  So the blank space in some 
Canvas may sit right on top of the connecting line painted in some other Canvas 
etc.  Under the hood, jsPlumb runs a mouse motion listener which is continually 
going off to each Connector and asking it if the mouse is hovering over it at 
that point in time.  there is also a click listener on the entire document, 
which checks the hover state of each Connector to figure out whether or not to 
report a click.

both of those listeners are added using the underlying library's event 
registration code; jsPlumb does nothing special.  so what i would expect to see 
is that any element created by jsPlumb works identically to how elements in a 
UI that do not have jsPlumb kicking around work.

so in the examples you give, if FF and Chrome only fire a click event for left 
mouse button, i would have expected jsPlumb to do the same from connections.  
the fact that is responds to the right mouse button was not what i expected.

the SVG stuff, then, is working exactly as i expected, responding only to left 
clicks.  because SVG elements are just elements like anything else in the page, 
so it works like point (1).

i will take a look at the right mouse button in FF today and see what i can 
see.  i actually think it would be cool if jsPlumb could capture a right click, 
given the nature of the sorts of UIs it gets used in. but i also want jsPlumb 
to be as transparent as possible when it comes to playing nicely in the page. 

Original comment by simon.po...@gmail.com on 6 Nov 2011 at 3:13

[GoogleCodeExporter]

ok i can reproduce the right-click in FF.  i compared it to a click listener 
registered on a normal div and that one ignores the right click.  so, um,  
although you raised this issue about needing right-click, i actually think that 
FF should _not_ be reporting it as it does.

Original comment by simon.po...@gmail.com on 6 Nov 2011 at 3:58

[GoogleCodeExporter]

...and also, i got intrigued about how you could do this...have you seen the 
"contextmenu" event?

try this:

    $(document).bind("contextmenu", function() { alert("CTX"); return false; });

i tested in Chrome, FF 7 and IE8 and it works in all of those.

Original comment by simon.po...@gmail.com on 6 Nov 2011 at 4:05

[GoogleCodeExporter]

here's what you could do in jsPlumb:

var bindRightClick = function(connection, callback) {
  $(connection.canvas).bind("contextmenu", function() {
      callback(connection);
  });    
};

var c = jsPlumb.connect({source:someDiv, target:someOtherDiv});
bindRightClick(c, function(conn) {
  console.log("right click on ", conn);
});

Original comment by simon.po...@gmail.com on 6 Nov 2011 at 4:33

[GoogleCodeExporter]

actually that will not work because of all the z-index issues.  you can't be 
sure that the canvas you think you're clicking on will be the one on top.

Original comment by simon.po...@gmail.com on 6 Nov 2011 at 10:48

[GoogleCodeExporter]

closing this.  no activity from bug reporter for over three weeks.

Original comment by simon.po...@gmail.com on 28 Nov 2011 at 1:18

• Changed state: Invalid

[GoogleCodeExporter]

In relation to comment 8, is it possible to detect the canvas in question from 
the connection bind mouseenter event and then bring this canvas to the top?

Original comment by Brendan....@gmail.com on 2 Dec 2011 at 2:31

[GoogleCodeExporter]

Brendan, yes, it's the "canvas" member of the connection in the callback.

another issue has been raised for this - issue 166 - which I'm going to do for 
1.3.5.

Original comment by simon.po...@gmail.com on 9 Jan 2012 at 11:53