jsPlumb - Dessiner plusieurs connexions en utilisant un point de terminaison unique pour la source et la cible

Question

Je tente de créer plusieurs connexions d'une source à une cible en utilisant un seul point de terminaison. Fondamentalement, lorsque l'utilisateur essaie de dessiner de nouveau le deuxième chemin vers le même nœud à partir d'une source, le chemin reliant la source et la destination doit se diviser et rejoindre à un seul point de terminaison. En outre, chaque connexion sera associée à une étiquette.

Pour que le diagramme ressemble, une ligne unique divisant en nombre de chemins vers et depuis la même extrémité.

Quelque chose comme celui attaché à l'image. Je me demande simplement si cela peut être atteint en utilisant l'édition de la communauté, ou devrions-nous aller pour la version payante de JSPlumb? Something like the one attached in the image

Merci à l'avance, Balaji

Answer 1

Modèles un point final - une extrémité d'une connexion. Un point d'extrémité a une ancre sous-jacente, qui détermine la position du point de terminaison. Chaque point d'extrémité peut avoir des connexions de 1 à maxConnections émanant de lui (définissez maxConnections sur -1 pour autoriser des connexions illimitées, la valeur par défaut est 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" 
    }); 
});