Skip to content
  1. Tutorials
  2. Getting started

Camera

The view has three components: position, zoom, angle. Here is a short overview of the view API:

js
// Move the view
ogma.view.move({ x: 200, y: 400 }, { duration: 2000 });
// Double the level of zoom over 400 ms
ogma.view.zoomIn({ modifier: 2, duration: 400 });
// Rotate the view by 90 degrees over 1 second
ogma.view.rotate(Math.PI / 2, { duration: 1000 });

The function ogma.view.locateGraph() centers the view and sets the zoom level so the graph is visible. The function Node.locate() (resp. NodeList.locate()) centers the view on a given node (resp. given set of nodes). Similar functions exist for edges.

js
// Adjust the view so the full graph is displayed on the screen.
ogma.view.locateGraph();

// Center the view on the node with id 'n0'.
ogma.getNode('n0').locate();

// Center the view on the node with id 'n0' and its neighboors.
ogma.getNode('n0').getAdjacentNodes().locate();