Why connection line shows away from Div in JSPlumb? - jsplumb

Question

This is my JSFiddle
Query - When I am trying to establish the connnection between IDs A1 and B the connection pink line shows away from Div B. Below the pink line highlighted is away from Div B. This is the problem
JQuery
//Setting up drop options
var targetDropOptions = {
};
connectorHoverStyle = {
lineWidth: 7,
strokeStyle: "#2e2aF8",
cursor: 'pointer'
}
//Setting up a Target endPoint
var targetColor = "#316b31";
var targetEndpoint = {
anchor: "LeftMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: targetColor },
//isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: -1,
isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
//Setting up a Source endPoint
var sourceColor = "#ff9696";
var sourceEndpoint = {
anchor: "RightMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: sourceColor },
isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: -1,
// isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
jsPlumb.bind("ready", function () {
jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#C"), { "left": 540, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#D"), { "left": 780, "top": 100 }, { duration: "slow" });
var window = jsPlumb.getSelector('.window');
jsPlumb.addEndpoint(window, targetEndpoint);
jsPlumb.addEndpoint(window, sourceEndpoint);
jsPlumb.addEndpoint(jsPlumb.getSelector('#A1'), sourceEndpoint, targetEndpoint);
jsPlumb.draggable(window);
jsPlumb.importDefaults({
ConnectionOverlays: [
["Arrow", { location: 0.8}],
["Label", {
location: 0.5,
id: "label",
cssClass: "aLabel"
}]
]
});
});
HTML
<div id="A" class="a window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>A</strong>
<div id="A1">
</div>
</div>
<div id="B" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>B</strong>
</div>
<div id="C" class="c window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>C</strong>
</div>
<div id="D" class="d window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>D</strong>
</div>

Answer 1

I wanted to have multiple Anchors on the same Div provided ID should be the attributes for those anchors somehow.
In order to accomplish this. I first removed the extra div. Now Suppose somebody wants to display two Source Anchors. For that I made modification in
jquery.jsPlumb-1.3.16-all-min.js file
Following was the Original line of code in this file
this.makeNode = function (E, D) {
return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2
}
Modification is below. I am now adding id attributes to each anchor(circle).
this.makeNode = function (E, D) {
var attr = $('#'+obj[0].endpoint.elementId).attr('actionID');
return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2, id: attr
}
How am I getting the value of id ?
In, the Div shown above in the query, I added an Attribute Action and assigned some ID that I want to assign. Like below
jsPlumb.getSelector('#first').attr('actionID', 'p1');
and finally adding the EndPoint
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), sourceEndpoint);
Similarly, I can assign as many distinct Anchors in terms of IDs as much required.
jsPlumb.getSelector('#first').attr('actionID', 'p3');
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), [TopMiddle]);
How will you assign the Source ID and target ID on Connection ?
jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
if (CurrentConnection.connection.targetId ==
CurrentConnection.connection.sourceId)
jsPlumb.detach(CurrentConnection.connection);
else {
var obj = CurrentConnection.sourceEndpoint.canvas.children[0].firstChild.id;
init(CurrentConnection.connection, obj);
}
});
init = function (connection, CircleID) {
connection.getOverlay("label").setLabel(CircleID + "-" + connection.targetId);
};
Hope this will be helpful to those users facing the same issue...