I have been working on a project where I am integrating the jsPlumb library to create a node-based interface.
jsPlumb provides an event called 'beforeDrop' which is triggered before connecting two endpoints. I plan to use this event to check a condition and decide whether to allow the connection or not.
If the connection is not allowed, I intend to display a message using ngToast to notify the user.
Below is my implementation of the 'beforeDrop' function:
jsPlumb.bind('beforeDrop', function(info){
var outNodeType = $('#'+info.sourceId).data( "ptype" );
var inNodeType = $('#'+info.targetId).data( "ptype" );
if(outNodeType !== inNodeType){
showMessage('warning', '<strong>Error:</strong> unable to connect '+outNodeType+' to '+inNodeType);
return false;
}
return true;
});
Here is the function responsible for showing the ngToast message:
function showMessage(messageType, message){
ngToast.warning({
class: messageType,
content: message
});
}
However, I am facing an issue where the ngToast message only appears after clicking anywhere on the page. This seems to be a delay in displaying the message, and I am unsure if it's related to jsPlumb and AngularJS integration or how I am calling the ngToast function.
If anyone has any suggestions on resolving this issue, I would greatly appreciate your input. Thank you in advance!