Cách phóng to biểu đồ jsPlumb

Question

Tôi đang cố gắng phóng to thu nhỏ khi di chuyển. Tôi có một #mainDiv với nhiều bảng .foo bên trong với điểm cuối jsPlumb. Khi người dùng cuộn, #mainDiv nên giữ nguyên kích thước và bảng nên thay đổi kích thước, điều thực sự xảy ra, nhưng điểm cuối của bảng không thay đổi kích thước và địa điểm của chúng. hãy nhìn vào jsFiddle này:

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

Fiddle là khá lớn, nhưng chúng ta chỉ cần chức năng javascript đầu tiên. Kéo vài mục sang bên phải, thêm liên kết mới và cuộn. các bảng sẽ thay đổi kích thước, nhưng các điểm cuối vẫn giữ nguyên. Làm cách nào để khắc phục sự cố này với điểm cuối?

Điểm cuối không phải là một phần của các bảng này, nhưng chúng là một phần của thư viện jsPlumb, có hàm setZoom() cho các đối tượng của nó. Chức năng này không hoạt động và tôi muốn biết tại sao. Kết nối cũng nên thay đổi vị trí của chúng.

Ngoài ra, ứng dụng cũng phải hoạt động trên các thiết bị cảm ứng. SetZoom có ​​hoạt động trên thu phóng pinch cho các thiết bị cảm ứng không và làm thế nào tôi có thể thực hiện điều này?

Answer 1

Cập nhật:

Vì vậy, dựa trên các câu hỏi, chúng tôi chỉ có thể sử dụng dưới CSS để một trong hai bắt đầu mở rộng quy mô từ bên trái hay bên phải tùy thuộc vào các yếu tố vị trí trong vùng chứa mẹ.

Một sự thay đổi CSS là cần thiết trong các thùng chứa phụ huynh, như hình dưới đây

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

hãy kiểm tra các JSFiddle cho các giải pháp!

JSFiddle Demo

Cũ Trả lời:

Tôi giả định rằng zoom xảy ra tại trung tâm là vấn đề, kể từ khi chúng tôi phóng to từ giữa bàn luôn vượt quá ranh giới container. Tôi sẽ đề nghị thêm lớp CSS bên dưới, để các điểm cuối được giữ nguyên.

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

Vui lòng tìm bên dưới JSFiddle đang hoạt động với việc triển khai.

JSFiddle Demo

Giả định của tôi có thể sai, xin vui lòng giải thích những gì còn thiếu của mình và tôi sẽ cố gắng giải quyết nó!