jsPlumb - Zeichnen mehrerer Verbindungen mit einem einzelnen Endpunkt für Quelle und Ziel

Question

Ich versuche, mehr als eine Verbindung von einer Quelle zu einem Ziel mit nur einem Endpunkt zu erstellen.

Wenn der Benutzer versucht, den zweiten Pfad zum selben Knoten von einer Quelle neu zu zeichnen, sollte der Pfad zwischen Quelle und Ziel geteilt und erneut an einem einzelnen Endpunkt verbunden werden. Außerdem wird jeder Verbindung ein Etikett hinzugefügt.

Damit das Diagramm wie folgt aussehen würde, würde eine einzelne Zeile in Anzahl von Pfaden zu und von demselben Endpunkt aufgeteilt werden.

So etwas wie das im Bild angebrachte.

Ich frage mich nur, ob dies mit der Community Edition erreicht werden kann, oder sollten wir uns für eine kostenpflichtige Version von JSPlumb entscheiden? Something like the one attached in the image

Vielen Dank im Voraus, Balaji

Answer 1

Modelle ein Endpunkt - ein Ende einer Verbindung. Ein Endpunkt hat einen zugrunde liegenden Anker, der die Position des Endpunkts bestimmt. Jeder Endpunkt kann 1 bis maxConnections-Verbindungen haben, die von ihm ausgehen (setzen Sie maxConnections auf -1, um unbegrenzte Verbindungen zuzulassen; der Standardwert ist 1).

http://jsfiddle.net/dL1ua517/

HTML

<div id="item_input" class="itemin">PROJECT NAME</div> 
<div class="down"> 
    <div id="downstream_1" class="ds">Output 1</div> 
    <div id="downstream_2" class="ds">Output 2</div> 
    <div id="downstream_3" class="ds">Output 3</div> 
</div> 

CSS

.item { 
    height:80px; 
    width: 80px; 
    border: 1px solid blue; 
    float: left; 
} 
.ds { 
    width:100px; 
    height:100px; 
    border:1px solid brown; 
    float:left; 
    margin-left:50px; 
} 
.down{ 
    width:100%; 
    height:auto; 
    float:left; 
} 
.itemin{ 
    margin-top:150px; 
    margin-bottom:100px; 
    border:2px pink solid; 
    width:100px; 
    height:100px; 
    float:left; 
} 

Javascript

jsPlumb.ready(function() { 

    /*Second Instance*/ 
    var instance = jsPlumb.getInstance(); 
    instance.importDefaults({ 
     Connector: ["Bezier", { 
      curviness: 150 
     }], 
     Anchors: ["BottomCenter", "TopCenter"] 
    }); 

    instance.connect({ 
     source: "item_input", 
     target: "downstream_1", 
     scope: "someScope" 
    }); 
    instance.connect({ 
     source: "item_input", 
     target: "downstream_2", 
     scope: "someScope" 
    }); 
    instance.connect({ 
     source: "item_input", 
     target: "downstream_3", 
     scope: "someScope" 
    }); 
});