Jak powiększać diagram jsPlumb

Question

Próbuję udostępnić powiększanie przewijania. Mam jeden #mainDiv z wieloma tabelami .foo wewnątrz z punktami końcowymi jsPlumb. Gdy użytkownik przewinie się, #mainDiv powinien pozostać w tym samym rozmiarze, a tabele powinny zmieniać rozmiar, co faktycznie ma miejsce, ale punkty końcowe tabeli nie zmieniają swojego rozmiaru i miejsca. przyjrzeć się tej jsFiddle:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/

Fiddle jest dość duży, ale musimy tylko pierwszy funkcji javascript. Przeciągnij kilka elementów z prawej strony, dodaj nowy link i przewiń. tabele zmienią rozmiar, ale punkty końcowe pozostaną takie same. Jak mogę naprawić ten problem z punktami końcowymi?

Punkty końcowe nie są częścią tych tabel, ale są częścią biblioteki jsPlumb, która ma funkcję setZoom() dla swoich obiektów. Ta funkcja nie działa i chciałbym wiedzieć dlaczego. Złącza powinny również zmienić swoje miejsce.

Aplikacja musi również działać na urządzeniach dotykowych. Czy setZoom działa na powiększeniu zbliżeniowym dla urządzeń dotykowych i jak mogę to zaimplementować?

Answer 1

Aktualizacja:

Więc oparte na pytaniu, możemy po prostu użyć poniższy CSS albo rozpocząć skalowanie z lewej lub prawej strony w zależności od położenia elementów w kontenerze nadrzędnym.

Zmiana CSS jest potrzebna w kontenerze nadrzędnym, tak jak pokazano poniżej

#mainDiv { 
    display: inline-block; 
    width: 82%; 
    min-height: 100%; 
    box-sizing: border-box; 
    float: left; 
    position:relative; 
    margin: 0; 
    padding: 3px; 
} 

proszę wyewidencjonowania JSFiddle za rozwiązanie!

JSFiddle Demo

Old Odpowiedź:

jestem przy założeniu, że zoom dzieje w środku jest problem, ponieważ przybliżyć ze środka tabeli zawsze przekracza granice kontenera. Sugerowałbym dodanie poniższej klasy CSS, aby punkty końcowe zostały zachowane.

.elementTable{ 
    transform-origin: 0% 0%; 
} 

Poniżej znajduje się działający JSFiddle z implementacją.

JSFiddle Demo

Moje założenie może być nie tak, proszę wyjaśnić, co jej brakuje, a ja postaram się go rozwiązać!