jsPlumb - dynamique de terminaison d'ancrage de chaque côté

Je suis en train d'essayer de trouver un moyen comment ajouter des ancres d'extrémité de manière dynamique à jsPlumb conteneur.

Je voudrais avoir une source d'extrémité sur le côté gauche et cible les ordinateurs d'extrémité sur le côté droit seulement.

Le problème, c'est que je n'étais pas en mesure de trouver un moyen de le faire, sans avoir recours à certains hacks, comme je le fais maintenant.

jsPlumb prend en charge Continue Ancres, mais la position de l'ancrage individuel sera recalculé en fonction de l'orientation entre les connecteurs et le nombre continue d'ancres. Cela signifie à la fois la source et la cible des points de terminaison peut être le partage d'un même côté du conteneur, c'est quelque chose que je voudrais éviter.

Ici est un jsFiddler code je suis venu avec

Voici une partie du code que j'utilise hack et recalculer les positions d'ancrage moi-même (lors de l'Ajout du bouton est cliqué), avec quelques buggy résultats 🙁

   function fixEndpoints(endpoints) {
//there are 2 types - input and output
var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isSource; //input
});
var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isTarget; //output
});
calculateEndpoint(inputAr, true);
calculateEndpoint(outputAr, false);
}
function calculateEndpoint(endpointArray, isInput) {
//multiplyer
var mult = 1 / endpointArray.length;
for (var i = 0; i < endpointArray.length; i++) {
if (isInput) {
endpointArray[i].anchor.x = 1;
endpointArray[i].anchor.y = mult * i;//, 1, 0] };
} 
else {
endpointArray[i].anchor.x = 0;
endpointArray[i].anchor.y = mult * i;//, -1, 0] };
}
}
}
//Add additional anchor
$(".button_add").live("click", function () {
var parentnode = $(this)[0].parentNode.parentNode;
jsPlumb.addEndpoint(
parentnode,
anEndpointSource
);
jsPlumb.addEndpoint(
parentnode,
anEndpointDestination
);
//get list of current endpoints
var endpoints = jsPlumb.getEndpoints(parentnode);
//fix endpoints
fixEndpoints(endpoints);
jsPlumb.recalculateOffsets();
jsPlumb.repaint(parentnode);
});

jsPlumb - dynamique de terminaison d'ancrage de chaque côté

Comme vous pouvez le voir sur l'image ci-dessus, de gauche est la seule source d'extrémité (Dot) et à droite (Encadré) ne cible que les points de terminaison, une fois le nouveau point de terminaison est ajouté, les ancres sont recalculées sur la base du nombre d'ancres sur un côté.

Cela fonctionne, mais encore buggé: la position est mise à jour seulement une fois que j'ai déplacer le conteneur et la connexion entre les conteneurs n'est pas correct ainsi.

Ce que j'aimerais avoir, c'est une façon pour elle de travailler et de se connecter correctement ces éléments (de préférence à l'utilisation correcte des jsPlumb code sans avoir recours à des hacks)

InformationsquelleAutor DMINATOR | 2013-03-04

J'ai enfin compris comment le faire. Il a été plus facile que je pensais.

Code est fondamentalement la même, avec quelques modifications, ici est mis à jour fiddler échantillon

<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="./include/jquery.jsPlumb-1.3.16-all-min.js"></script>
<style>
.window { 
background-color: #EEEEEF;
border: 1px solid #346789;
border-radius: 0.5em;
box-shadow: 2px 2px 5px #AAAAAA;
color: black;
height: 5em;
position: absolute;
width: 5em;
}
.window:hover { 
box-shadow: 2px 2px 19px #AAAAAA;
cursor: pointer;
}
.button_add, .button_add_window, .button_remove, .button {
background-color: deepskyblue;
text-align: center;
border: 1px solid;
}
.button_container {
margin: 5px;
background-color: #aaaaaa
}
</style>
<script>
jsPlumb.ready(function () {
//FIX DOM:
$(("#container1"))[0].innerHTML = $(("#container0"))[0].innerHTML;
//all windows are draggable
jsPlumb.draggable($(".window"));
var anEndpointSource = {
endpoint: "Rectangle",
isSource: true,
isTarget: false,
maxConnections: 1,
anchor: [1, 0, 1, 0]
};
var anEndpointDestination = {
endpoint: "Dot",
isSource: false,
isTarget: true,
maxConnections: 1,
anchor: [0, 1, -1, 0]
};
//Fixes endpoints for specified target
function fixEndpoints(parentnode) {
//get list of current endpoints
var endpoints = jsPlumb.getEndpoints(parentnode);
//there are 2 types - input and output
var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isSource; //input
});
var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isTarget; //output
});
calculateEndpoint(inputAr, true);
calculateEndpoint(outputAr, false);
jsPlumb.repaintEverything();
}
//recalculate endpoint anchor position manually
function calculateEndpoint(endpointArray, isInput) {
//multiplyer
var mult = 1 / (endpointArray.length+1);
for (var i = 0; i < endpointArray.length; i++) {
if (isInput) {
//position
endpointArray[i].anchor.x = 1;
endpointArray[i].anchor.y = mult * (i + 1);
} 
else {
//position
endpointArray[i].anchor.x = 0;
endpointArray[i].anchor.y = mult * (i + 1);
}
}
}
//Add additional anchor
$(".button_add").live("click", function () {
var parentnode = $(this)[0].parentNode.parentNode;
jsPlumb.addEndpoint(
parentnode,
anEndpointSource
);
jsPlumb.addEndpoint(
parentnode,
anEndpointDestination
);
fixEndpoints(parentnode);
});
//Remove anchor 
$(".button_remove").live("click", function () {
var parentnode = $(this)[0].parentNode.parentNode;
//get list of current endpoints
var endpoints = jsPlumb.getEndpoints(parentnode);
//remove 2 last one
if (endpoints.length > 1) {
jsPlumb.deleteEndpoint(endpoints[endpoints.length - 2]);
}
if (endpoints.length > 0) {
jsPlumb.deleteEndpoint(endpoints[endpoints.length - 1]);
}
fixEndpoints(parentnode);
});
//adds new window
$(".button_add_window").click(function () {
var id = "dynamic_" + $(".window").length;
//create new window and add it to the body
$('<div class="window" id="' + id + '" >').appendTo('body').html($(("#container0"))[0].innerHTML);
//set jsplumb properties
jsPlumb.draggable($('#' + id));
});
});
</script>
</head>
<body >
<!-- Adds new windows to the page -->
<div class="window" style="left: 600px" id="details">
<p style="text-align: center">Window</p>
<div class="button_container">
<div class="button_add_window">Add</div>
</div>
</div>
<!-- Primary window - used as html templated for descendants -->
<div class="window" style="left: 20px" id="container0">
<div class="button_container">
<div class="button_add">Add</div>
<div class="button_remove">Remove</div>
</div>
</div>
<div class="window" style="left: 200px" id="container1">
</div>
</body>
</html>

Modifications que j'ai effectuées:

Maintenant, je spécifiez point de terminaison d'ancrage de décalage lorsque je l'ajouter, je n'ai calculer la position du point d'ancrage, de sorte compensée ne change jamais, il est toujours correct dès le départ:
```
var anEndpointSource = {
endpoint: "Rectangle",
isSource: true,
isTarget: false,
maxConnections: 1,
anchor: [1, 0, 1, 0]
};
```
Une fois de point de terminaison est ajouté, j'ai re-calculer les positions d'ancrage et d'appel (cela va repeindre les connexions):

jsPlumb.repaintEverything();

Voici le résultat final:

jsPlumb - dynamique de terminaison d'ancrage de chaque côté

très bien fait 🙂 Est-il un moyen de "supprimer" un (choisi) nœud, trop? Je tr pour créer une machine d'état-editeur w/ jsplumb mais juste mal w/ ajout/suppression de nœuds et de connexions. Un jsfiddle serait sympa 🙂

InformationsquelleAutor DMINATOR

Vous pouvez supprimer unis par un double clic en ajoutant

                     newState.dblclick(function(e) {
alert("This will delete the state and its connections");
instance.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});

fonction de votre jsPlumb.prêt de la fonction. vous pouvez ajouter ceci à votre tous les états par l'ajout de

var windows = jsPlumb.getSelector(".statemachine-demo .state");
windows.dblclick(function(e) {
alert("This will delete the state and its connections");
instance.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});

ici statemachine-demo est l'id de la div dans votre contaner et de l'état est de classe de l'etat divs.

InformationsquelleAutor Buddhika

0

merci pour la solution, il fonctionne très bien lorsque le point d'ancrage du côté est prédéfini, comme ici, les sources sont toujours sur le côté gauche, et les objectifs sont toujours sur la droite.

Mais si ils sont dynamiques, nous avons besoin de mettre en œuvre le côté de la sélection aussi par nous-mêmes?

Comme une solution de contournement à ce que j'ai fait est plus possible d'ancrage des postes dans la config par défaut. Une meilleure idée?

grâce

InformationsquelleAutor cn123h

Vous devez vous connecter pour publier un commentaire.