jsPlumb：如何建立条件连接

Question

我正在尝试根据规则在节点之间创建连接，例如：

"API request" 端点无法连接到除 "Initiate Call" 之外的任何其他节点。
"Failed" 端点无法连接到 "Play Audio" 等等...

这是我的端点定义代码：

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
      });
    }
  };

有人可以帮忙吗？

Answer 1

为此尝试使用 beforeDrop 拦截器：

https://docs.jsplumbtoolkit.com/community-2.x/current/articles/events-community.html#evt-beforedrop

您可以在此处查看它的使用情况（不是您想如何使用它，它会在此演示中弹出确认信息）：

https://jsplumbtoolkit.com/community/demonstration/draggableConnectors

尝试将蓝色端点之一拖动到其他蓝色端点之一。

Answer 2

经过大量搜索后，我想出了如何访问端点 uuid，但是作为以上答案必须在 beforeDrop 拦截器中调用，如下所示：

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

当新的或现有的连接被删除时会触发此事件，因此现在 info 包含我们需要访问的内容，要获取源端点，命令将如下所示： info.connection.endpoints[0].getUuid() 并获取目标端点： info.dropEndpoint.getUuid().

现在完整的条件是这样的：

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

jsPlumb：如何建立条件连接

jsPlumb: How to make conditional connections

javascript

jquery

jsplumb

vue.js