I am currently developing an editor that involves placing shapes on a canvas and assigning IDs to them. When a shape is placed, endpoints are automatically created and attached to the shape using its ID as an anchor.
//Function responsible for adding endpoints to shapes.
var _addEndpoints = function (sourceAnchors, targetAnchors, id) {
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = sourceAnchors[i];
epp = jsPlumbInstance.addEndpoint(id, sourceEndpoint, {
anchor: sourceAnchors[i], uuid: sourceUUID
});
sourcepointList.push([id , epp]);
epp = null;
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = targetAnchors[j];
epp = jsPlumbInstance.addEndpoint(id, targetEndpoint, {
anchor: targetAnchors[j], uuid: targetUUID
});
endpointList.push([id, epp]);
epp = null;
}
};
function drawElement(element, canvasId, id) {
$(canvasId).append(element);
_addEndpoints(properties[0].startpoints, properties[0].endpoints, id);
jsPlumbInstance.draggable(jsPlumbInstance.getSelector(".jtk-node"), {
grid: [20, 20]
});
}
The current setup functions well with the endpoints moving along with the shape when dragged. However, I would like to implement a feature where the ID of a shape can be changed by clicking on it. Upon changing the ID, the endpoints no longer move with the shape, though they still remain draggable independently. My attempted solution involved updating the ID in the endpoints by modifying the anchor and element attributes.
//My attempted solution
jsPlumbInstance.selectEndpoints().each(function(endpoint) {
endpoint.setElement(anchor);
endpoint.setAnchor(x, y, newID);
});
Unfortunately, this approach led to an error message:
jsPlumb function failed : TypeError: Cannot read property 'el' of undefined
Upon inspecting the properties of the endpoints, I found several instances where the old ID value was still present. I am unsure how to update all these properties simultaneously. Any assistance on resolving this issue would be greatly appreciated.