エンドポイントアンカーをjsPlumbコンテナに動的に追加する方法を見つけようとしています。
ソースエンドポイントを左側に、ターゲットエンドポイントを右側にのみ配置したいと思います。
問題は、私が今しているように、いくつかのハックに頼らなければ、そうする方法を見つけることができなかったということです。
jsPlumbは連続アンカーをサポートしていますが、個々のアンカーの位置は、コネクタ間の方向と連続アンカーの数に基づいて再計算されます。これは、ソースエンドポイントとターゲットエンドポイントの両方がコンテナーの同じ側を共有している可能性があることを意味します。これは避けたいことです。
これが私が思いついたjsFiddlerコードです
これは、アンカー位置を自分でハッキングして再計算するために使用しているコードの一部です（[追加]ボタンがクリックされた場合）。バグのある結果がいくつかあります:(
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コードを使用します）
