Search code examples
javascriptjquery-uijsplumb

incorrect offset of lines using jsPlumb and jquery-ui

I want to connect div's using jsPlumb. It works when I used styles, but the final lines have an incorrect offset when I use jquery-ui decorations like accordion.

Code:

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
    <script src="js/jquery.jsPlumb-1.3.16-all.js"></script>

    <script>
    $(function() {
        $( "#top" ).accordion({
            collapsible: false,
            icons: false
            });
    });
    </script>
</head>

<body>

<h1>jsPlumb tests</h1>

<div id="top"  style="border-width: 2px; border-style: solid; border-color: red;">
    <h1>TOP</h1>
</div>
<div>
    <p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
    <h1>Bottom</h1>
</div>

<script>
jsPlumb.ready(function() {

jsPlumb.importDefaults({
    ConnectorZIndex:5
});

var jsP = jsPlumb.getInstance({
    PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
    Connector: "Straight",
    Endpoint: "Blank"
});

var e0 = jsP.addEndpoint("top", { 
    anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});

var e1 = jsP.addEndpoint("bottom", { 
    anchor: ["TopCenter"]
});

jsP.connect({ source:e0, target:e1});

}); 

</script>


</body>
</html>

Produces: Result of code

The desired effect (without accordion decoration) is: Desired result

What I am doing wrong? It seems that the line is rendered before the accordion decoration.

Solution

  • I have found a solution changing the order of the scripts, including the style one inside the jsPlumb one:

    <!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
    <script src="js/jquery.jsPlumb-1.3.16-all.js"></script>
</head>

<body>

<h1>jsPlumb tests</h1>

<div id="top"  style="border-width: 2px; border-style: solid; border-color: red;">
    <h1>TOP</h1>
</div>
<div>
    <p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
    <h1>Bottom</h1>
</div>

<script>
        $( "#top" ).accordion({
            collapsible: false,
            icons: false
            });


jsPlumb.ready(function() {

jsPlumb.importDefaults({
    ConnectorZIndex:5
});

var jsP = jsPlumb.getInstance({
    PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
    Connector: "Straight",
    Endpoint: "Blank"
});

var e0 = jsP.addEndpoint("top", { 
    anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});

var e1 = jsP.addEndpoint("bottom", { 
    anchor: ["TopCenter"]
});

jsP.connect({ source:e0, target:e1});

}); 

</script>


</body>
</html>

    And the result is: Desired reuslt