How to programmatically implement zoom in/out

GoJS
1

I checked the example in http://www.gojs.net/latest/samples/pageFlow.html, the diagram will zoom in/out based on the action of mouse wheel. I have a requirement to implement Zoom In/Out in my diagram by clicking zoom in and zoom out button. Can someone tell me how to do it?

Thanks.

2

Just have your buttons call myDiagram.commandHandler.increaseZoom and decreaseZoom.

If you want, you can disable those buttons too. See http://gojs.net/latest/intro/commands.html for an example.

3

Thanks for the quick response. I hook up my buttons with myDiagram.commandHandler.increaseZoom and decreaseZoom, but nothing was changed. Do any properties have to be set before it will work?

4

I checked my diagram and I have:

allowZoom : true
minScale : 0.0001
maxScale : 100

But whenever I called myDiagram.commandHandler.canIncreaseZoom(), it always returned false.


Did I miss anything?

Thanks.

5

This works for me:

And myDiagram.commandHandler.canIncreaseZoom() returns true for me too.

6

My diagram was placed inside our in-house javascript framework which extended from jQuery. Is there any setting I need to check to see if our code conflicts with the settings in goJS?

Thanks.

7

There are no inherent conflicts, since some of our samples make use of jQuery. But it is common to have a local conflict with the definition of "$". You'll note that all of our samples declare "$" to be a local variable. Or you can call jQuery.noConflict().

8

Also, are there any errors or warnings?

9

I knew the local conflict of $ and I have been trying to avoid that. What I suspect is if there is any CSS conflict that cause the zoom to fail.

10

I don’t see any error and warnings.

11

Offhand I cannot think of any CSS that would disable zooming without breaking a lot of stuff.

Can the user zoom without using your buttons?

Does your problem exist identically on all platforms?

12

I have tried in IE9, Firefox and Chrome, none of them worked. Some of the keyboard short cuts like CTRL+A, CTRL+Y and CTRL+Z worked, but not for CTRL+(+) and CTRL+(-).


BTW, I have the following setting as well:


myDiagram.autoScale = go.Diagram.Uniform
myDiagram.initialAutoScale = go.Diagram.Uniform

Are they correct?

13

That’s the problem – by setting Diagram.autoScale to Uniform you are telling the Diagram to always show all of the diagram in the viewport. So of course the user cannot zoom in or out.