setZoom() problem

[Vaxo Basilidze]

Sorry for asking so many questions and thank you for your response. This plugin is really helpful and saves me so much time!

Currently I'm trying to make available zooming on scroll. I have one #mainDiv with multiple .foo tables inside. These tables have endpoints connectable to each other. When the user scrolls, #mainDiv should remain the same size and tables should resize, which actually happens, but tables 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 items and scroll. tables will change size, but endpoints remain the same. I have tried 2 ways for transform. In first case only one table gets transformed, but everything is ok with dragging. If I use second way to transform, all tables change, but something is wrong with dragging. Despite of which way I choose, endpoints remain the same. How can I fix this problem with endpoints?

Also, app must be working on touch devices as well. Does setZoom work on touch?

Thank you in advance.

[Simon Porritt]

Presumably you have read this page?

https://jsplumbtoolkit.com/community/doc/zooming.html

[Vaxo Basilidze]

Yes, I did. My container is #mainDiv, .foo tables are jsPlumb draggable, I'm setting scale to every .foo and then calling function jsPlumb.setZoom(), but it does not work. See the provided fiddle, tables resize, endpoints and connectors remain the same. I'm using community version, can't I use zooming? Is it part of paid version?

четверг, 30 ноября 2017 г., 1:28:49 UTC+4 пользователь Simon Porritt написал:

[Simon Porritt]

You're not supposed to scale the individual elements. In the docs it tells you to scale only the container.

[Vaxo Basilidze]

In this case I will have a problem. Main accent in my application is on the diagram, which takes most of the screen and can be way bigger than my screen. I want to let user resize their content to free the place for more tables. Resizing the container itself won't help me in this situation. Is there another way to achieve what I want?

четверг, 30 ноября 2017 г., 10:49:05 UTC+4 пользователь Simon Porritt написал:

[Simon Porritt]

Do you need to zoom your whole app though?  Like the Toolkit demos in jsPlumb consist of the diagram area and the buttons to drag new items on, but only the diagram is zoomable:

https://jsplumbtoolkit.com/demos/toolkit/flowchart-builder/index.html

--

You received this message because you are subscribed to the Google Groups "jsPlumb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsplumb+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Vaxo Basilidze]

That's the effect I want to achieve. I want only #mainDiv's content to be resizable on scroll, tables, endpoints and connectors. Rest of the app should stay as it is.

четверг, 30 ноября 2017 г., 11:09:12 UTC+4 пользователь Simon Porritt написал:

To unsubscribe from this group and stop receiving emails from it, send an email to jsplumb+u...@googlegroups.com.

[Simon Porritt]

so then why dont you just set mainDiv as the container for jsPlumb, draw your diagram into that, and put the other parts of your app elsewhere.

[Vaxo Basilidze]

This is my DOM tree:

html

header

body

      leftDiv

             there goes menu, settings, etc.

      mainDiv

             there goes my diagram

I'm calling this function:

jsPlumb.setContainer("mainDiv");

Then I do other things, but zooming does not work. Check the fiddle

четверг, 30 ноября 2017 г., 11:15:46 UTC+4 пользователь Simon Porritt написал:

[Vaxo Basilidze]

Can you help me to achieve this zoom effect with my tables please? I really need that. Can you please modify the fiddle or tell me exactly what to do? I've tried everything I could think of...

четверг, 30 ноября 2017 г., 11:15:46 UTC+4 пользователь Simon Porritt написал: