endpoint location not updating in jsPlumb resize

Question

I am trying to implement a flowchart editor using jsPlumb and this is my first time using it. I have a square element (which is draggable also) and when I try to re-size it, the endpoints do not move (see 1). I use jsPlumb-2.0.7.js here.

When I used jquery.jsPlumb-1.4.1-all-min.js, the endpoints move as the element is re-sized. But, there are some problems in the endpoints of the diamond shape element in the editor (see 2). I implemented this diamond shaped element by rotating the square element by 45 degrees.

Here is how I make the elements re-sizable:

function makeResizable(classname){
    $(classname).resizable({
        resize : function(event, ui) {
            jsPlumb.repaint(ui.helper);
        }
    });
}

This is my source endpoint:

var connectorPaintStyle = {
    lineWidth: 4,
    strokeStyle: "#61B7CF",
    joinstyle: "round",
    outlineColor: "white",
    outlineWidth: 2
},
connectorHoverStyle = {
    lineWidth: 4,
    strokeStyle: "#216477",
    outlineWidth: 2,
    outlineColor: "white"
},
endpointHoverStyle = {
    fillStyle: "#216477",
    strokeStyle: "#216477"
},
sourceEndpoint = {
        endpoint: "Dot",
        paintStyle: {
            strokeStyle: "#7AB02C",
            fillStyle: "transparent",
            radius: 7,
            lineWidth: 3
        },
        isSource: true,
        connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
        connectorStyle: connectorPaintStyle,
        hoverPaintStyle: endpointHoverStyle,
        connectorHoverStyle: connectorHoverStyle,
        maxConnections: -1,
        dragOptions: {},
        overlays: [
            [ "Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel",
                visible:false
            } ]
        ]
    };

This is my target endpoint:

targetEndpoint = {
        endpoint: "Dot",
        paintStyle: { fillStyle: "#7AB02C", radius: 11 },
        hoverPaintStyle: endpointHoverStyle,
        maxConnections: -1,
        dropOptions: { hoverClass: "hover", activeClass: "active" },
        isTarget: true,
        overlays: [
            [ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
        ]
    }

I use the jsPlumb.addEndpoint() method to add the endpoints. I searched for help but could not find a suitable answer. Can anyone provide a solution for this problem?

Answer 1

I am posting this as an answer because it solved my problem! I used the latest version of jsPlumb-2.0.7.js and created an instance of jsPlumb.

var instance = jsPlumb.getInstance({/*Drag options and connection overlays*/});

Then I used this instance to make the elements draggable and resizable.

And also, instead of using instance.repaint(ui.helper) I used instance.revalidate(ui.helper) within the resizable function. Then it perfectly worked!