Search code examples
javascriptjqueryvue.jsjsplumb

jsPlumb: How to make conditional connections


Am trying to create connections between nodes based on rules for example: enter image description here

  1. "API request" endpoint can't connect to any other nodes except the "Initiate Call".
  2. "Failed" endpoint can't connect to "Play Audio" And so on...

and here is my endpoints definition code:

let addEndpoints = function(toId, sourceAnchors, targetAnchors) {
    console.log(toId, sourceAnchors, targetAnchors);
    for (var i = 0; i < sourceAnchors.length; i++) {
      var sourceUUID = toId + sourceAnchors[i];
      instance.addEndpoint(toId, sourceEndpoint, {
        anchor: sourceAnchors[i],
        uuid: sourceUUID
      });
    }
    for (var j = 0; j < targetAnchors.length; j++) {
      var targetUUID = toId + targetAnchors[j];
      instance.addEndpoint(toId, targetEndpoint, {
        anchor: targetAnchors[j],
        // anchor: 'Continuous',
        uuid: targetUUID
      });
    }
  };

anyone can help?


Solution

  • After a lot of searches i figured out how to access endpoints uuids, but as the above answer it must be called in beforeDrop interceptor like this:

        instance.bind("beforeDrop", function(info) {
          ...
        });
    

    This event is fired when a new or existing connection has been dropped, so now info contains what we need to access, to get source endpoint the command will be like this: info.connection.endpoints[0].getUuid() and to get target endpoint: info.dropEndpoint.getUuid().

    Now the full condition will be something like this:

     if (info.connection.endpoints[0].getUuid().includes("start") &&
      info.dropEndpoint.getUuid().includes("playaudio")) {
     instance.deleteConnection(connInfo.connection)
      } else {
       init(info.connection);
       }