jsPlumb diyagramı nasıl büyütülür

Question

Kaydırma üzerinde yakınlaştırma yapmaya çalışıyorum. İçinde jsPlumb uç noktaları ile birden çok .foo tablonun bulunduğu bir #mainDiv var. Kullanıcı kaydırdığında, #mainDiv aynı boyutta kalmalı ve tabloların yeniden boyutlandırılması gerekir, aslında gerçekleşir, ancak tablonun uç noktaları boyutlarını ve yerlerini değiştirmez.

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

Fiddle oldukça büyük, ama biz sadece ilk javascript fonksiyonu gerekir: Bu jsFiddle bakabilirsiniz. Birkaç öğeyi sağ tarafa sürükleyin, yeni bağlantı ekleyin ve ilerleyin. tablolar boyut değiştirir, ancak uç noktalar aynı kalır. Bu sorunu son noktalarda nasıl düzeltebilirim?

Bitiş noktaları bu tabloların bir parçası değildir, ancak nesneler için setZoom() işlevine sahip jsPlumb kitaplığının parçasıdır. Bu işlev çalışmıyor ve nedenini bilmek istiyorum. Konektörler de yerlerini değiştirmelidir.

Ayrıca, uygulama aynı zamanda dokunmatik cihazlarda da çalışıyor olmalıdır. SetZoom, dokunmatik cihazlar için tutam zoom üzerinde çalışır mı ve bunu nasıl uygulayabilirim?

Answer 1

Güncelleme:

Sorunun temelinde, sadece sol veya üst kapsayıcı içindeki elemanları konumuna bağlı olarak sağdan ölçeklendirme başlamak birine CSS altında kullanabilirsiniz. çözüm için JSFiddle ödeme Lütfen

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

aşağıda gösterildiği gibi

bir CSS değişikliğinde, üst kapsayıcı içinde ihtiyaç vardır!

JSFiddle Demo

Eski Cevap: Bence tablo hep konteyner sınırını aştığı ortasından Büyütmek beri merkezde oluyor yakınlaştırma, sorun olduğunu varsayıyorum

. Aşağıdaki CSS sınıfını eklemeyi öneririm, böylece uç noktalar korunur.

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

Uygulama ile birlikte çalışan bir JSFiddle'ı aşağıda bulabilirsiniz.

JSFiddle Demo

Benim varsayım yanlış olabilir, onun eksik ne anlatmak ve bunu çözmeye çalışacağım lütfen!