Wie zu zoomen jsPlumb Diagramm

Question

Ich versuche, Zoom auf Scroll zur Verfügung zu stellen. Ich habe einen #mainDiv mit mehreren .foo Tabellen innen mit jsPlumb Endpunkten. Wenn der Benutzer scrollt, sollte die gleiche Größe beibehalten und Tabellen sollten die Größe ändern, was tatsächlich passiert, aber die Endpunkte der Tabelle ändern ihre Größe und ihren Platz nicht. werfen Sie einen Blick auf diese jsFiddle:

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

Fiddle ist ziemlich groß, aber wir brauchen nur den ersten JavaScript-Funktion. Ziehen Sie einige Elemente auf die rechte Seite, fügen Sie einen neuen Link hinzu und scrollen Sie. Tabellen ändern ihre Größe, aber die Endpunkte bleiben gleich. Wie kann ich dieses Problem mit Endpunkten beheben?

Endpunkte sind nicht Teil dieser Tabellen, aber sie sind Teil der jsPlumb-Bibliothek, die über die Funktion setZoom() für ihre Objekte verfügt. Diese Funktion funktioniert nicht und ich würde gerne wissen warum. Connectors sollten auch ihren Platz wechseln.

Auch App muss auf Touch-Geräten arbeiten. Arbeitet setZoom am Pinch-Zoom für Touch-Geräte und wie kann ich das umsetzen?

Answer 1

Update:

auf die Frage So basiert, können wir nur die auf unter CSS verwenden entweder die Skalierung von links zu beginnen oder rechts auf die Positionselemente in Abhängigkeit innerhalb des übergeordneten Container.

Eine CSS-Änderung wird in den übergeordneten Container benötigt, wie weiter unten

gezeigt

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

Bitte Prüfung der JSFiddle für die Lösung!

JSFiddle Demo

Alte Antwort:

Ich gehe davon aus, dass der Zoom in der Mitte passiert das Problem ist, da wir von der Mitte vergrößern die Tabelle die Behälter Grenze immer übersteigt. Ich würde vorschlagen, die folgende CSS-Klasse hinzuzufügen, damit die Endpunkte erhalten bleiben.

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

Hier finden Sie eine funktionierende JSFiddle mit der Implementierung.

JSFiddle Demo

Meine Vermutung falsch sein kann, bitte erklären, was seine fehlt, und ich werde es zu lösen versuchen!