jsPlumb 다이어그램 확대/축소

Question

스크롤 할 때 확대/축소를 사용하려고합니다. 하나의 #mainDiv에 jsPlumb 끝점이있는 .foo 개의 테이블이 여러 개 있습니다. 사용자가 스크롤 할 때 #mainDiv은 같은 크기로 유지되어야하며 실제로 크기는 변경되지만 표의 크기는 변경되지 않습니다.

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

바이올린이 꽤 큰이지만, 우리는 첫 번째 자바 스크립트 기능을 필요 :이 jsFiddle에서 봐. 몇 개의 항목을 오른쪽으로 드래그하고 새 링크를 추가하고 스크롤하십시오. 테이블의 크기는 변경되지만 종점은 동일하게 유지됩니다. 엔드 포인트에서이 문제점을 어떻게 해결할 수 있습니까?

끝점은이 테이블의 일부가 아니지만 개체의 setZoom() 함수가있는 jsPlumb 라이브러리의 일부입니다. 이 기능은 작동하지 않으며 이유를 알고 싶습니다. 커넥터도 장소를 변경해야합니다.

또한 앱은 터치 장치에서도 작동해야합니다. setZoom이 터치 장치의 핀치 확대/축소 기능을 작동합니까? 어떻게 구현할 수 있습니까?

Answer 1

업데이트 :

그래서 질문을 기반으로, 우리는 단지 왼쪽이나 부모 컨테이너 내의 요소의 위치에 따라 오른쪽에서 스케일링을 시작 하나에 CSS 아래를 사용할 수 있습니다. 솔루션에 대한 JSFiddle를 체크 아웃하십시오

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

아래와 같이

CSS 변경은, 부모 컨테이너 필요하다!

JSFiddle Demo

올드 답 : 나는 우리가 테이블이 항상 컨테이너 경계를 초과하는 중간에서 확대 이후 센터에서 일어나고 줌이 문제라고 가정하고

. 끝점을 보존 할 수 있도록 아래 CSS 클래스를 추가하는 것이 좋습니다.

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

다음은 구현 된 JSFiddle입니다.

JSFiddle Demo

내 가정이 잘못 될 수있다, 그 누락 된 것을 설명하고 나는 그것을 해결하기 위해 노력하겠습니다!