How to create a Graph Overview Panel similar to the one used in yEd

Besides the default graph panel, yWorks' powerful graph editor yEd provides another panel which displays an overview of the current graph. This overview illustrates which part of the graph is currently visible, and offers several possibilities to navigate through it.

To use such an overview panel in your own application, simply hand over a y.view.Graph2DView to an instance of y.view.Overview. The overview will then reflect the given view and every modification of it.

To adjust the overview's behavior one can use several settings as seen in the example below:

//view is of type y.view.Graph2DView
Overview overview = new Overview(view);

//animates the scrolling
overview.putClientProperty("Overview.AnimateScrollTo", Boolean.TRUE);

//blurs the part of the graph which can currently not be seen
overview.putClientProperty("Overview.PaintStyle", "Funky");

//allows zooming from within the overview
overview.putClientProperty("Overview.AllowZooming", Boolean.TRUE);

//provides functionality for navigation via keybord (zoom in (+), zoom out (-), navigation with arrow keys)
overview.putClientProperty("Overview.AllowKeyboardNavigation", Boolean.TRUE);

//determines how to differ between the part of the graph that can currently be seen, and the rest
overview.putClientProperty("Overview.Inverse", Boolean.TRUE);

//determines the border color of the border between seen and unseen regions of the graph
overview.putClientProperty("Overview.BorderColor", Color.lightGray);

//determines the degree of blurriness
overview.putClientProperty("Overview.funkyTheta", new Double(0.9));

//determines the color of the part of the graph that can currently not be seen
overview.putClientProperty("Overview.FogColor", new Color(.85f, .85f, .85f, 0.6f));