jsPlumb 删除连接断开的端点答案

【问题标题】：jsPlumb remove endpoints on connection detachedjsPlumb 删除连接断开的端点
【发布时间】：2016-12-11 17:43:26
【问题描述】：

我正在使用 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

【问题讨论】：

标签： jquery jsplumb

【解决方案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;
}

【讨论】：