How to enlarge jsPlumb diagram

Question

I am trying to do scaling on a scroll. I have one #mainDiv with multiple .foo tables inside with jsPlumb endpoints. When the user scrolls, #mainDiv should remain the same size, and the tables should change, which actually happens, but the endpoints of the table do not change their size and location. take a look at this jsFiddle:

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

The fiddle is pretty big, but we only need the first javascript function. Drag a few elements in the desired direction, add a new link and scroll it. The tables will resize, but the endpoints will remain unchanged. How to fix this problem with endpoints?

Endpoints are not part of these tables, but they are part of the jsPlumb library, which has a setZoom () function for objects. This feature does not work, and I would like to know why. Connectors must also change their place.

In addition, the application should work on touch devices. Does setZoom work with zoom for touch devices and how can I implement this?

Answer 1

Update:

Thus, based on the question, we can simply use the CSS below to start scaling left or right, depending on the position of the elements in the parent container.

CSS change required in parent container as below

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

Please check out JSFiddle for a solution!

JSFiddle Demo

Old answer:

I assume that scaling in the center is a problem, since we zoom in from the middle, the table always exceeds the border of the container. I would suggest adding a CSS class below so that the endpoints are preserved.

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

Below is a working JSFiddle with implementation.

JSFiddle Demo

My assumption may be wrong, please explain that it is missing, and I will try to solve it!