How to zoom into a GraphStream View?


In GraphStream visualizations Graphs can be dense. The enableAutoLayout method gives a global visualization of the Graph and so zooming is needed. How to zoom into a GraphStream View?

Graph go=...; Viewer viewer = new Viewer(go, Viewer.ThreadingModel.GRAPH_IN_ANOTHER_THREAD); viewer.enableAutoLayout(); View view = viewer.addDefaultView(false); swingNode.setContent((JComponent) view);

I tried to find a way to zoom to the mouse cursor using the mouse wheel and stumbled across this thread, hoping to find an answer. I figured out how to zoom to the mouse eventually with GraphStream:

The zoom-factor for each mouse wheel rotation in my case is 1.25 (or 0.8 when zooming out). The code calculates the new center of the graph based on the original center of the graph, the clicked point in the graph, the zoom and eventually the ratio of Px to Gu which can be retrieved from the camera.

final Viewer viewer = new Viewer(graph, Viewer.ThreadingModel.GRAPH_IN_ANOTHER_THREAD); viewer.enableAutoLayout(); final View view = viewer.addDefaultView(false); view.getCamera().setViewPercent(1); ((Component) view).addMouseWheelListener(new MouseWheelListener() { @Override public void mouseWheelMoved(MouseWheelEvent e) { e.consume(); int i = e.getWheelRotation(); double factor = Math.pow(1.25, i); Camera cam = view.getCamera(); double zoom = cam.getViewPercent() * factor; Point2 pxCenter = cam.transformGuToPx(cam.getViewCenter().x, cam.getViewCenter().y, 0); Point3 guClicked = cam.transformPxToGu(e.getX(), e.getY()); double newRatioPx2Gu = cam.getMetrics().ratioPx2Gu/factor; double x = guClicked.x + (pxCenter.x - e.getX())/newRatioPx2Gu; double y = guClicked.y - (pxCenter.y - e.getY())/newRatioPx2Gu; cam.setViewCenter(x, y, 0); cam.setViewPercent(zoom); } });

Here a simple code to show you how you can zoom a graph:

<pre class="lang-java prettyprint-override">public class zoomGraph{ public zoomGraph(){ } //the methode that will zoom the graph public static void zoomGraphMouseWheelMoved(MouseWheelEvent mwe, ViewPanel view_panel){ if (Event.ALT_MASK != 0) { if (mwe.getWheelRotation() > 0) { double new_view_percent = view_panel.getCamera().getViewPercent() + 0.05; view_panel.getCamera().setViewPercent(new_view_percent); } else if (mwe.getWheelRotation() < 0) { double current_view_percent = view_panel.getCamera().getViewPercent(); if(current_view_percent > 0.05){ view_panel.getCamera().setViewPercent(current_view_percent - 0.05); } } } } public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new GridLayout()); frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); frame.setBounds(0, 0, 700, 500); frame.setPreferredSize(new Dimension(700, 500)); //Components JPanel panel = new JPanel(); panel.setLayout(new GridLayout()); frame.add(panel); //create a simple graph Graph graph = new SingleGraph("tuto_zoom", false, true); graph.addNode("node_1"); graph.addNode("node_2"); graph.addEdge("edge_1_2", "node_1","node_2"); //show the graph in the panel Viewer viewer = new Viewer(graph, Viewer.ThreadingModel.GRAPH_IN_ANOTHER_THREAD); viewer.enableAutoLayout(); ViewPanel view_panel = viewer.addDefaultView(false); Rectangle rec = panel.getBounds(); view_panel.setBounds(0, 0, rec.width, rec.height); view_panel.setPreferredSize(new Dimension(rec.width, rec.height)); panel.add(view_panel); //add a mouse wheel listener to the ViewPanel for zooming the graph view_panel.addMouseWheelListener(new MouseWheelListener() { @Override public void mouseWheelMoved(MouseWheelEvent mwe) { zoomGraph.zoomGraphMouseWheelMoved(mwe, view_panel); } }); frame.setVisible(true); } }

From the official documentation at http://graphstream-project.org/doc/Tutorials/Graph-Visualisation:


You can also zoom in or out using:


This will zoom of 200% on the view center.