Geertjan's Blog

  • August 29, 2006

Zoom and Pan in Visual Library 2.0

Geertjan Wielenga
Product Manager
Today I was innocently working on my super useful Simpsons integration module (below is a screenshot of current status, which includes drag-and-drop, inline editing, and cool labels with different colors for selection and hovering)...

...when I suddenly, accidentally, moved the middle button (kind of a scrolly thing between the two click buttons) on my mouse. Imagine my surprise when my entire TopComponent suddenly zoomed bigger and bigger:

And, when I moved the middle scrolly button thing backwards, the whole TopComponent magically zoomed smaller:

Then this bit of code made sense:


And that's all I needed to implement that great piece of functionality. Just that one line!

But there was more... there's another line in my code, like this:


Thanks to that one single line, I can press down the middle scrolly button and move my mouse to the left or right when there's a scrollbar. Doing this moves the view along to the left or right, depending how I move my mouse. That's also a really cool feature, again provided by one line.

Both these actions are assigned to a Scene widget, which is the root of the tree of visual elements that you see in the illustrations above. Oh, by the way, the component palette is functional—you can drag and drop characters from the palette into the TopComponent. The biggest stumbling block for me, so far, is realizing how much easier all of this is than in the standard drag-and-drop functionality in the NetBeans APIs. I had to completely forget about the TopComponent's setDropTarget method. Everything is a whole lot simpler with the Visual Library 2.0. However, you first need to know how it is all done. And, fortunately for the rest of the world, the Visual Library 2.0 comes with a very large set of samples. So far, I've just been adapting the samples to my own needs. It's really worked out well so far and the work in progress Visual Library 2.0 document is also a good read, including small code snippets to explain how things fit together.

Join the discussion

Comments ( 8 )
  • Ahmed Mohombe Tuesday, August 29, 2006
    Very nice :)

    However looking at the screenshots, the first question that commes into my mind is: "SVG?" :)

    Can the graph.netbeans.org library display SVG files(icons)? Since SVG can scale well (without edges and other pixelation problems :) ).

    Thanks in advance,

  • Geertjan Wednesday, August 30, 2006
    Sure, I'm going to investigate that too. But the point of this blog entry was just to point out that zooming and panning are just a question of ENABLING, rather than CODING.
  • Geertjan Wednesday, August 30, 2006
    I queried this issue today and was told that improvements in image scaling for the zoom action is being planned in the short term. First priority for this library right now is documentation, Javadoc, etc, and that's what the engineer in question is currently working on.
  • lbownik Monday, June 15, 2009

    HELP !!! - I use it for my project and there is a strange bachawior

    zommig works only after I click on some on some other widget (eg. a JTree that I put next to graph widget)

    I mean that zoomin does not work roght after JFrame gecomes sivible (I need to click something other than grapth view widget) to enable it

    any Ideas ?

  • Geertjan Monday, June 15, 2009

    Don't know. Join the dev@openide.netbeans.org mailing list and ask your question there:


  • ponto Tuesday, May 25, 2010

    Hi, I want to ask you if is possible disable zooming for some widget(f.e. ComponentWidget with fixed size of inserted component into Widget) if the scene has zooming enabled

  • David Kaspar Tuesday, May 25, 2010

    Hi lbownik,

    The strange behavior seems to have a symptoms of missing "Scene.validate()" method call.

    If you modify the Scene outside of the control of the Visual Library e.g. from a actionPerformed method on ActionListener add to a Button, then you always need to call "myScene.validate()" method after all modifications has been performed. Otherwise the Scene does not get refreshed and the refresh itself is postponed to the processing of a first next event e.g. focusLost or mouseClicked on the Scene view.

    For details, see:

    1) http://platform.netbeans.org/graph/faq.html - first Q/A

    2) http://bits.netbeans.org/dev/javadoc/org-netbeans-api-visual/org/netbeans/api/visual/widget/doc-files/documentation.html#ValidationProcess



  • sean Monday, August 2, 2010

    nice work~

    I wonder if it is possible to do zoom in/out with a keyboard press or a JButton click instead of the middle scrolly button ..


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.