How to zoom jsPlumb diagram

Question

I'm trying to make available zooming on scroll. I have one #mainDiv with multiple .foo tables inside with jsPlumb endpoints. When the user scrolls, #mainDiv should remain the same size and tables should resize, which actually happens, but table's endpoints don't change their size and place. take a look at this jsFiddle:

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

Fiddle is pretty big, but we only need the first javascript function. Drag few items to the right side, add new link and scroll. tables will change size, but endpoints remain the same. How can I fix this problem with endpoints?

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

Also, app must be working on touch devices as well. Does setZoom work on pinch zoom for touch devices and how can I implement this?

Answer 1

Update:

So based on the question, we can just use the below CSS to either start the scaling from the left or the right depending on the elements position within the parent container.

A CSS change is needed in the parent container, as shown below

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

Please checkout the JSFiddle for the solution!

JSFiddle Demo

Old Answer:

I am assuming that the zoom happening at the center is the problem, since we zoom from the middle the table always exceeds the container boundary. I would suggest adding the below CSS class, so that the endpoints are preserved.

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

Please find below a working JSFiddle with the implementation.

JSFiddle Demo

My assumption may be wrong, please explain what its missing and I'll try to solve it!