jsPlumb 删除连接分离的端点

Question

我正在使用 jsPlumb 创建一个包含两列的匹配小部件。

jsPlumb 实例创建为：

var container = $element.find('.match-widget .widget-output:not(.edit)');

jsPlumb.getInstance({
        PaintStyle: {
          lineWidth: 6,
          strokeStyle: '#567567',
          outlineColor: 'black',
          outlineWidth: 1
        },
        MaxConnections: -1,
        LogEnabled: true,
        Anchors: ['Center', 'Center'],
        DragOptions: {
          cursor: 'pointer',
          zIndex: 2000
        },
        Connector: ['Bezier', {
          curviness: 30
        }],
        Endpoints: [
          ['Dot', {
            radius: 11
          }],
          ['Dot', {
            radius: 11
          }]
        ],
        EndpointStyles: [{
          fillStyle: '#FF7D19'
        }, {
          fillStyle: '#FF7D19'
        }],
        Container: container
});

我创建的源和目标如下：

jsPlumb.makeSource($(element[0]).find('.match-source-anchor')[0], {
    maxConnections: 1,
    uniqueEndpoint: true,
    isSource: true,
    enabled: true
 });

 jsPlumb.makeTarget($(element[0]).find('.match-target-anchor')[0], {
    uniqueEndpoint: true,
    isTarget: true,
    maxConnections: 1,
    enabled: true
 });

连接过程正常。但是如果我删除连接，建立一个连接后的问题，连接端点仍然可见。

我尝试添加配置“_deleteOnDetach”，还尝试删除 connectionDetach 上的端点。在这两种情况下，终点都被删除了，但在我尝试连接相同的元素时，它会出错。

那么谁能帮我解决这个问题？

演示：jsfiddle

Answer 1

通常在删除连接时，它的端点通常会随之删除。有一个例外情况，即在端点设置为唯一的情况下，端点不会被删除。

从 jsPlumb 代码中看到：

// if unique endpoint and it's already been created, push it onto the endpoint we create. at the end
// of a successful connection we'll switch to that endpoint.
// TODO this is the same code as the programmatic endpoints create on line 1050 ish
if (def.uniqueEndpoint) {
  if (!def.endpoint) {
    def.endpoint = ep;
    ep._deleteOnDetach = false;
    ep._doNotDeleteOnDetach = true;
  }
  else
    ep.finalEndpoint = def.endpoint;
}

jsPlumb 删除连接分离的端点

jsPlumb remove endpoints on connection detached

jquery

jsplumb