Я пытаюсь выяснить, как динамически добавлять якоря конечных точек в контейнер 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, не прибегая к хакам)
