The jsPlumb connection does not move depending on the location of the item

advertisements

What I'm trying to do is to make a connection between two elements. Here is what I have right now.

asp.net:

<asp:Button ID="centerCircle" runat="server" CssClass="dependencyCircle centerCircle core" Text="Core Apps" OnClientClick="test2()"></asp:Button>

<asp:Button ID="apiCircle" runat="server" CssClass="dependencyCircle rightCornersB support" Text="APIs" OnClientClick="test()"></asp:Button>

jsplumb:

jsPlumb.importDefaults({ 

ConnectionsDetachable:false

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

var firstInstance = jsPlumb.getInstance({
    PaintStyle: {
        lineWidth: 10,
        strokeStyle: "#567567",
        outlineColor: "black",
        outlineWidth: 1
    },
    Connector: ["Bezier", { curviness: 30 }],
    Endpoint: ["Dot", { radius: 8 }],
});
firstInstance.connect({
    source: "apiCircle",
    target: "centerCircle",
    anchors: ["Left", "BottomRight"],

});
});

It generates the connection between the two elements when I run the application, but when I resize the window size and the position of two elements changes, the connection does not move accordingly to the position of two elements. Is there any reason why the connection is not re-adjusting its position accordingly to the position of two elements?


Use the following code for repainting the jsPlumb components on window resize.

$( window ).resize(function() {
   firstInstance.repaintEverything();
});