Download NetBeans!

20060829 Tuesday August 29, 2006

Zoom and Pan in Visual Library 2.0

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:

scene.getActions().addAction(ActionFactory.createZoomAction());

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:

scene.getActions().addAction(ActionFactory.createPanAction());

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.

Aug 29 2006, 10:44:37 AM PDT Permalink

Trackback URL: http://blogs.sun.com/geertjan/entry/zoom_and_pan_in_visual
Comments:

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,

Ahmed.

Posted by Ahmed Mohombe on August 29, 2006 at 12:38 PM PDT #

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.

Posted by Geertjan on August 30, 2006 at 01:14 AM PDT #

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.

Posted by Geertjan on August 30, 2006 at 10:03 AM PDT #

Post a Comment:

Name:
E-Mail:
URL:

Your Comment:

HTML Syntax: NOT allowed