flowchart connector and end point issue

[GoogleCodeExporter]

What steps will reproduce the problem?
1.Have 2 div elements on html page with 4 end points on each div and make them 
draggable.
2.Drag elements on page and connect one end point of 1st element to 2nd 
elements end point.
3.Notice that other opposite end point of source div is fine but the top and 
bottom endpoint is disabled. Only connectors can be dragged onto that i.e. it 
will function as target only, even if we have set its property as both target 
and source.

What version of the product are you using? On what browser and OS?
yui.jsPlumb-1.3.1-all-min.js. as well as on 1.2.6.

Please provide any additional information below.
jsPlumb Code in js file is as below,

jsPlumb.bind("ready", function() {

    var exampleGreyEndpointOptions = {
        endpoint:"Rectangle",
        paintStyle:{
            width:25,
            height:21,
            fillStyle:'#666'
        },
        isSource:true,
        connectorStyle : {
            strokeStyle:"#666"
        },
        isTarget:true,
        connector:[ "Flowchart", { stub:40 } ]
    };

    jsPlumb.addEndpoint('ele1', { anchor:"BottomCenter" }, exampleGreyEndpointOptions);
    jsPlumb.addEndpoint('ele1', { anchor:"TopCenter" }, exampleGreyEndpointOptions);
    jsPlumb.addEndpoint('ele1', { anchor:"LeftMiddle" }, exampleGreyEndpointOptions);
    jsPlumb.addEndpoint('ele1', { anchor:"RightMiddle" }, exampleGreyEndpointOptions);
    jsPlumb.addEndpoint('ele2', { anchor:"BottomCenter" }, exampleGreyEndpointOptions);
    jsPlumb.addEndpoint('ele2', { anchor:"TopCenter" }, exampleGreyEndpointOptions);
    jsPlumb.addEndpoint('ele2', { anchor:"LeftMiddle" }, exampleGreyEndpointOptions);
    jsPlumb.addEndpoint('ele2', { anchor:"RightMiddle" }, exampleGreyEndpointOptions);

    jsPlumb.draggable("ele1");
    jsPlumb.draggable("ele2");

});

Original issue reported on code.google.com by abhishek...@gmail.com on 26 Jul 2011 at 10:21

Attachments:

• issue_jsPlumb.JPG

[GoogleCodeExporter]

Browser : Firefox 3.6.18

Original comment by abhishek...@gmail.com on 26 Jul 2011 at 10:37

[GoogleCodeExporter]

um.  this seems odd.  could you do me a favour and try the other connector 
types, just to see if you get the same behaviour?  

Original comment by simon.po...@gmail.com on 28 Jul 2011 at 7:46

[GoogleCodeExporter]

Seeing this behaviour with Flowchart and Straight connectors only. With Bezier 
Connector its working fine as expected.
Please let me know if any more details are required.

Original comment by abhishek...@gmail.com on 28 Jul 2011 at 8:08

[GoogleCodeExporter]

thanks.  so the left middle endpoint on ele1 still functions as a source?  

Original comment by simon.po...@gmail.com on 28 Jul 2011 at 8:21

[GoogleCodeExporter]

Thanks Simon for support.

Yes. But there are 2 situations like 1. either leftmiddle and rightmiddle will 
work as source at one time or 2. topcenter and bottomcenter will work as source.

It depends on the first end point that we use to connect to other element. e.g. 
if we use left middle then right middle will work as source but top center and 
bottom center will be target only.

Original comment by abhishek...@gmail.com on 28 Jul 2011 at 8:28

[GoogleCodeExporter]

could you try something for me?  add "maxConnections:2" to the endpoint 
options, and then go through the steps you outlined.  what happens when you 
then try to drag from top center?

Original comment by simon.po...@gmail.com on 28 Jul 2011 at 10:02

[GoogleCodeExporter]

after making maxConnections:2 and dragging the top center end point, i am able 
to connect to other element but right middle and left middle endpoints are 
getting disabled/target only.

Original comment by abhishek...@gmail.com on 28 Jul 2011 at 10:19

[GoogleCodeExporter]

Is it that I am missing something here ? Please let me know if you need the 
html/css/js details.

Original comment by abhishek...@gmail.com on 28 Jul 2011 at 10:21

[GoogleCodeExporter]

ok, thanks.  i will see if i can reproduce.

Original comment by simon.po...@gmail.com on 28 Jul 2011 at 10:22

[GoogleCodeExporter]

i think you've got a z-index issue.  you need to ensure that you place the 
canvases jsplumb creates below the divs you're connecting.  in the attached pic 
you'll see a blue dotted line.  that is the actual canvas that was created.  
notice how it sits over the top/bottom endpoints but not the one on the left.  
and in that example, for me the top and bottom endpoints didn't work.

so i would try setting z-indices.  the class names that jsplumb adds are here:

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

Original comment by simon.po...@gmail.com on 28 Jul 2011 at 10:34

[GoogleCodeExporter]

Thanks Simon. Setting z index for jsplumb classes resolved the issue.

Original comment by abhishek...@gmail.com on 28 Jul 2011 at 11:10

[GoogleCodeExporter]

great!  i'm going to close out this issue then.

i just updated the docs and put some stuff in about z-index issues in the 
integration section.  this seems like something i should call out a bit more 
prominently.

Original comment by simon.po...@gmail.com on 28 Jul 2011 at 11:15

• Changed state: Invalid