Connector 'click area' too large

[GoogleCodeExporter]

Hi,

Before I start, I appreciate that this may not be your bug.

I have set up a jsFiddle - http://jsfiddle.net/VkTAL/4/

I have set up the CSS to display a hand cursor when you move the mouse over the 
connector, however, you'll notice that the cursor changes before you get near 
to the line.

This area is shown in the (very crudely drawn) image below, in red.

This problem because more apparent when there are two connections that link the 
same components. In certain positions it is possible to get the connections 
sufficiently close enough that clicking one connection actually fires the 
onClick event of the other.

Thanks

Original issue reported on code.google.com by mattdavi...@googlemail.com on 13 Sep 2012 at 11:21

Attachments:

• [Click Bug.png](https://storage.googleapis.com/google-code-attachments/jsplumb/issue-278/comment-0/Click Bug.png)

[GoogleCodeExporter]

yep, you're right.  not my bug, unfortunately. the mouse listeners are attached 
to the path element, so they have no business firing when they do.

Original comment by simon.po...@gmail.com on 13 Sep 2012 at 11:28

[GoogleCodeExporter]

Thought so, thanks for looking.

If I find a solution I post it here as a record for people with similar issues.

Thanks again

Original comment by mattdavi...@googlemail.com on 13 Sep 2012 at 11:43

[GoogleCodeExporter]

yeah sorry i can't be of any more help.  i keep the canvas renderer kicking 
around for those cases where someone hits a problem with svg that is caused by 
the browser and they absolutely can't live with the issue as it is.

Original comment by simon.po...@gmail.com on 14 Sep 2012 at 12:03

[GoogleCodeExporter]

Thanks for pointing me toward canvas. It seems to work a lot better with the 
click event.

The canvas is actually bigger than the svg, so the cursor changes further away 
from the line. Also, the large canvas prohibits dragging the boxes sometimes 
(at least in firefox anyway), see http://jsfiddle.net/VkTAL/8/

Think I'm going to stick with svg and see if I can come up with something.

Thanks for trying

Original comment by mattdavi...@googlemail.com on 14 Sep 2012 at 12:24

[GoogleCodeExporter]

the drag issues are just caused by z-index. this is discussed here:

http://jsplumb.org/doc/content.html#zIndex

the _jsPlumb_connector class shouldn't be added to the canvas.  when using 
canvas you have to hand over control to jsplumb completely for mouse stuff:

http://jsfiddle.net/sporritt/VkTAL/10/

this fiddle also has z-index values set.  note that your draggable elements 
need to be positioned absolute, not relative.

Original comment by simon.po...@gmail.com on 14 Sep 2012 at 12:30

[GoogleCodeExporter]

Amazing! Thank you so much. I will be changing to canvas in the morning.

I managed to find a 'sort of' solution to the problem using svg.

If you delete the 'fill' property of the path then the 'clickable' are becomes 
visible. It seems that even though you are not drawing a closed path the shape 
is still closed. This is shown in the attached image.

As a work around if the following line is changed from

<path d="M 64,64 L 94 64 L 303 64 L 303 123 L 303 153 303,153" 
pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" 
style="" fill="" stroke="#456" stroke-width="8"/>

to

<path d="M 64,64 L 94 64 94,64" pointer-events="all" version="1.1" 
xmlns="http://www.w3.org/1999/xhtml" style="" fill="" stroke="#456" 
stroke-width="8"/>
<path d="M 94 64 L 303 64 303,64" pointer-events="all" version="1.1" 
xmlns="http://www.w3.org/1999/xhtml" style="" fill="" stroke="#456" 
stroke-width="8"/>
<path d="M 303 60 L 303 123 303,123" pointer-events="all" version="1.1" 
xmlns="http://www.w3.org/1999/xhtml" style="" fill="" stroke="#456" 
stroke-width="8"/>
<path d="M 303 123 L 303 153 303,153" pointer-events="all" version="1.1" 
xmlns="http://www.w3.org/1999/xhtml" style="" fill="" stroke="#456" 
stroke-width="8"/>

then everything works as expected. I'm not sure how hard this is to change, but 
I'll maybe have a go tomorrow (it's nearly 2am here).

Thanks for all the help.

Original comment by mattdavi...@googlemail.com on 14 Sep 2012 at 12:46

Attachments:

• withFill.png

[GoogleCodeExporter]

well that is interesting! it'd be a bit of work but not a huge amount to change 
this in the svg renderer.

just keep in mind on the canvas stuff that it uses more memory than svg. so if 
you've got a lot (and really this only applies when you're talking upwards of a 
hundred) of connections it can start to run slow.

i'll find some time to mess around with the svg renderer to see about making 
this change.

Original comment by simon.po...@gmail.com on 14 Sep 2012 at 12:54

[GoogleCodeExporter]

So I know I said I was going to leave it until tomorrow but I started looking 
around and thought the same as you, that it might not be too much to implement.

I looked at the svg.Flowchart code (around line 9186) and modified it to be;

// loop through extra points
for (var i = 0; i < dimensions[8]; i++) {
    p = p + " L " + dimensions[9 + (i*2)] + " " + dimensions[10 + (i*2)];

    var horiz = (dimensions[9 + (i * 2)] == dimensions[9 + ((i + 1) * 2)]) && (dimensions[10 + (i * 2)] != dimensions[10 + ((i + 1) * 2)]);
    var vert = (dimensions[9 + (i * 2)] != dimensions[9 + ((i + 1) * 2)]) && (dimensions[10 + (i * 2)] == dimensions[10 + ((i + 1) * 2)]);

    var addX = 0;
    var addY = 0;

    if(vert) {
        addX = -1 * 4; // <- should be (s.strokeWidth / 2);
    }
    if(horiz) {
        addY = -1 * 4;// <- should be (s.strokeWidth / 2);
    }

    if(i != (dimensions[8] - 1)) {
        p = p + " M " + (dimensions[9 + (i*2)] + addX) + "," + (dimensions[10 + (i*2)] + addY);
    }
}

It generates code that looks similar to this;

<path d="M 64,64 L 94 64 M 94,60 L 303 64 M 303,64 L 303 123 M 303,123 L 303 
153 303,153" pointer-events="all" version="1.1" 
xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#456" 
stroke-width="8"/>

Which seems to work the same as multiple paths.

I couldn't work out how to get the strokeWidth into the function's scope so 
just used a const. value but it seems to be working.

Again, Thanks for all the help

Original comment by mattdavi...@googlemail.com on 14 Sep 2012 at 1:23

[GoogleCodeExporter]

nice.  i'll make this change for 1.3.15.  thanks!

Original comment by simon.po...@gmail.com on 14 Sep 2012 at 10:01

[GoogleCodeExporter]

Original comment by simon.po...@gmail.com on 14 Sep 2012 at 10:04

• Changed state: Accepted
• Added labels: 1.3.15

[GoogleCodeExporter]

i've put a fix for this into 1.3.15 dev.  this really feels like a workaround 
to me, but maybe there's some subtlety i am missing. anyway.  it definitely 
makes the UI behave more nicely with this fix.

Original comment by simon.po...@gmail.com on 20 Sep 2012 at 8:47

• Changed state: Fixed

[GoogleCodeExporter]

1.3.15 was released today.

Original comment by simon.po...@gmail.com on 24 Sep 2012 at 1:28

• Changed state: Verified