How to add Zoom support to a GEF editor?

Adding Zoom support to GEF editors is a trivial task, yet many people struggle to do that. Probably lack of all the documentation in a single place? Let me fill up that void with this tip. Let me take the Shapes example and add Zoom support, step by step.

GEF gives you first class support for Zooming. It gives you ZoomManager class which handles the the functionality in a GEF Editor. The first step is to make our Editor to understand the ZoomManager. To make that happen in the ShapesEditor.getAdapter() method add these lines:

if (type == ZoomManager.class)

     return getGraphicalViewer().getProperty(ZoomManager.class.toString());

Ok. Now that our Editor understands the Zooming, how to control it? How about adding a Combo box in the Editor's toolbar with the percentages? Don't worry. You don't have to implement it from the scratch. GEF already has the ZoomComboContributionItem and all you need to is instantiate it and add it to the tool bar. Add this line to ShapesEditorActionBarContributor.contributeToToolBar() method

toolBarManager.add(new ZoomComboContributionItem(getPage()));

Just these two steps and you can see the Zoom working in your editor. 

 

Alright. Now that we have the basics working, lets move on to the extras.

Adding predefined Zoom Levels:

The Zoom levels are currently integers. Either you can choose from the Combo or type in a custom % value there. But if you want to see the entire image, you may want to zoom to "Fit Page", "Fit Width" etc. Again, this is as simple as adding the following line in the ShapesEditor.configureGraphicalViewer() method:

List zoomContributions = Arrays.asList(new String[] { 

     ZoomManager.FIT_ALL, 

     ZoomManager.FIT_HEIGHT, 

     ZoomManager.FIT_WIDTH });

rootEditPart.getZoomManager().setZoomLevelContributions(zoomContributions);

Adding keyboard shortcuts for Zooming:

Keyboard shortcuts are great way to save time. You don't have to lift your hand out of the keyboard, pick up the mouse, click something, when you can so the same thing in a split second by pressing a key sequence. How about Ctrl+ or Ctrl - for Zooming in our GEF Editor?

GEF provides you two predefined actions (ZoomInAction & ZoomOutAction)  for this. You can use these actions to have keyboard shortcut support. Right after the zoomContributions you have added in the ShapesEditor.configureGraphicalViewer() method, add these lines:

IAction zoomIn = new ZoomInAction(rootEditPart.getZoomManager());

IAction zoomOut = new ZoomOutAction(rootEditPart.getZoomManager());

getActionRegistry().registerAction(zoomIn);

getActionRegistry().registerAction(zoomOut);

getSite().getKeyBindingService().registerAction(zoomIn);

getSite().getKeyBindingService().registerAction(zoomOut);

Adding menu options for Zoom:

It would be nice to have menu options for this Zoom functions. That would give hint about the keyboard shortcuts as well. GEF provides two retargetable actions ( ZoomInRetargetAction & ZoomOutRetargetAction) to assist you.

Adding these actions is a two step process. First add you need to create these actions. Add the below two lines in the ShapesEditorActionBarContributor.buildActions() method for that:

addRetargetAction(new ZoomInRetargetAction());

addRetargetAction(new ZoomOutRetargetAction());

Now, override contributeToMenu() method in ShapesEditorActionBarContributor and add this as contents:

public void contributeToMenu(IMenuManager menubar) {
    super.contributeToMenu(menubar);
    MenuManager viewMenu = new MenuManager("&View");
    viewMenu.add(getAction(GEFActionConstants.ZOOM_IN));
    viewMenu.add(getAction(GEFActionConstants.ZOOM_OUT));
    menubar.insertAfter(IWorkbenchActionConstants.M_EDIT, viewMenu);
}

Adding MouseWheel support: 

Zooming through keyboard shortcuts is fine, but what about mouse wheel support? There are numerous users who want to Zoom In/Out using the Ctrl+Mouse Wheel. Once again, GEF comes to resue with its MouseWheelZoomHandler class. All you need to do is set the property on the viewer. In the ShapesEditor.configureGraphicalViewer() method add this:

viewer.setProperty(MouseWheelHandler.KeyGenerator.getKey(SWT.MOD1), MouseWheelZoomHandler.SINGLETON);

In case you want Alt+Mouse Wheel to handle the Zoom functionality, in the above line change SWT.MOD1 to SWT.MOD3. (or SWT.MOD2 if you want Shift + Mouse Wheel)

As I said in the beginning, adding the complete support for Zooming in a GEF editor is pretty simple. GEF already has all the required implementations and all you have to do is to add them in proper places. Use these in your GEF editor and make your users happy :-)