Pan + Zoom for a graph editor

[Rémi Bèges]

I wish to achieve zoom and pan, along with jsPlumb based node graph editor.

So far the node graph is done, but I am struggling to find a solution for pan and zoom.

I found a D3JS demo doing exactly what I am looking for:

http://bl.ocks.org/mbostock/3892928

+ jsPlumb graphs

But it is based on a single <svg>.

Since jsPlumb does not have a single svg but a <div> with several <svg>, I am starting to worry I cannot achieve what I want with jsPlumb.

Any idea on how to mix the two ?

[Simon Porritt]

The Toolkit edition of jsPlumb has zoom and pan support. To do the same thing in the Community edition you need to apply transforms to the Container of the jsPlumb instance.

[Rémi Bèges]

Thanks for your quick answer.

I'm still running into some issues.

If apply a css transform to the container, it's the container itself that is moving, not its contents. I tried applying css transform to all its child but that gives very bad results, elements not aligned anymore, during movement and after.

By transform do you really mean css transform ?

[Simon Porritt]

Yes, a css transform. A scale transform.

[Rémi Bèges]

I tried several different things, none of them worked correctly.

transform on the jsPlumb container led to the container itself being transformed. When scaling, this also results in scale offset for dragging (dragging keeps the original scale)

 

transform on its immediate children led to children being scaled individually.

For now, I don't see any other option.

[Simon Porritt]

I’m pretty sure there was a previous discussion on this, either in the groups or in a github issue, in which people talked about how they got it going. One thing you need to do is to call setZoom on the jsPlumb instance, to fix the drag scale issue you mentioned.

You would have seen the Toolkit demos, right? Zooming is achievable. Making it work really nicely is not a trivial piece of work though.

​

[Yuri Gor]

Hi! If you limited with Community Edition of jsPlumb - it's possible to use jquery.panzoom plugin
Here is a demo: http://codepen.io/yurigor/pen/vXYomB

среда, 25 ноября 2015 г., 19:07:14 UTC+3 пользователь Rémi Bèges написал: