Cannot create connection from JS Plumb Endpoint which is in use by another connection

Question

I have set set of DIVs which should be connectable using jsPlumb (v2.0.7).

Each of the div elements has an Anchor and Endpoint on all of its four sides. I'm able to create connections from these endpoints by drag and drop.

The Problem: As soon a connection between two endpoints is established, it cannot act as a source Endpoint for a new "create connection" drag operation anymore. Using such used endpoint as the target of a connection, works fine though.

The configuration looks like this:

jsPlumbConfig = {
      PaintStyle: {
        lineWidth: 1
        outlineWidth: 5
        strokeStyle: "#FFF"
        outlineColor: "transparent"
      }
      Connector: [ "Bezier", { curviness: 69 } ]
      ConnectionsDetachable: false
      DeleteEndpointsOnDetach: false
      ReattachConnections : false
      Anchors: [ "Top", "Right", "Bottom", "Left" ]
      MaxConnections: 50
      Endpoint: [ "Rectangle" ]
      EndpointStyle : {
        paintStyle: { fillStyle:'#FFF' }
      }
}

The Endpoint options are like that:

endpointOptions = {
      endpoint: "Rectangle"
      maxConnections: 50
      connectionsDetachable: false
      deleteEndpointsOnDetach: false
      paintStyle: { fillStyle: "#EEE", outlineColor: "rgba(0, 0, 0, -0.8)" }
      endpointHoverStyle: { fillStyle: "rgba(255, 255, 255, 0.8)" }
      isSource: true
      isTarget: true
}

JSFiddle: https://jsfiddle.net/v0aw81v3/

Answer 1

I found the solution by setting

ConnectionsDetachable: true

Strangely this doesn't remove existing connections from one Endpoint, but allows adding additional ones.