jsPlumb & bootstrap taps: Соединения отображаются неправильно

Question

Проблема: Im в настоящее время строит моделирование процессов. У меня есть два бутстрапа, один содержит редактор (который отлично работает), другой используется для отображения содержимого во время моделирования. JsPlumb используется для отображения различных объектов моделирования. Проблема в том, что соединения между этими объектами arent отображаются правильно, если кран переключается с редактора на симуляцию. Они «привязываются» в правильное положение после того, как элемент перетаскивается, но я хочу, чтобы они правильно отображались на переключателе крана. Вот скрипку: Problem fiddle
Код:

HTML:

<div class="container-fluid"> 
     <ul class="nav nav-pills"> 
      <li class="active"> 
      <a href="#editor" data-target="#editor" data-toggle="tab"> 
       <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Editor 
      </a> 
      </li> 
      <li> 
      <a href="#display" data-target="#display" data-toggle="tab" id="testlink"> 
      <span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> Simulation 
      </a> 
      </li> 
     </ul> 
    </div> 
<div class="tab-content"> 
    <div class="tab-pane fade in active" id="editor"> </div> 

    <div class="tab-pane fade" id="display"> 
     <div class="container center-block content"> 
     <div id="test1" class="window"> 
      a 
     </div> 

     <div id="test2" class="window"> 
      b 
     </div> 
    </div> 
    </div> 

Javascript:

jsPlumb.ready(function() { 
    jsPlumb.Defaults.Container = $('#display'); 


    jsPlumb.connect({ 
    source: $('#test1'), 
    target: $('#test2'), 
    anchor: "Continuous", 
    endpoint: "Blank", 
    detachable: false 

    }); 

    jsPlumb.draggable($(".window")); 

}); 

То, что я знаю: Про blem напрямую связан с тем фактом, что содержимое вкладки не отображается при загрузке, так как размещение тестовых div в нажатие редактора (которое является активным при загрузке) решает проблему. fiddle: placing divs in aktive tab

Answer 1

не является оптимальным решением, но это работает:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) { 
    if (event.target.id == 'display-tab') { 
    jsPlumb.detachEveryConnection(); 
    redrawEveryConnection(); 
    } 
}); 

Этот код удаляет все соединения на вкладке коммутатора к имитации и вызывает функцию перерисовки, которая должна быть реализована в зависимости от ситуации (начальную и конечную точки, которые нужно сохранить, например, сервер).