Skip to content
  1. Tutorials
  2. Getting started


To enable user interaction with the graph and connect to the rest of the interface, Ogma uses a set of events.

Events and Interaction

Ogma can handle various mouse, touch and keyboard events, and emits events when its internal graph data changes.

// Display the id of the node under the cursor when the user clicks or taps on it:'click', evt => {
  if (! || ! return;
  console.log(`Node ${evt.node.getId()} was clicked at (${evt.x}, ${evt.y})`);

// Open/close the geographical mode when the user presses Ctrl + M on the keyboard.'ctrl m', evt => ogma.geo.toggle());

// Log a message in the console when a node is added'nodesAdded', evt => {
  console.log('Nodes added with ids: [' + evt.nodes.getId().join(', ') + ']');

More live examples


Users can select nodes and edges with the mouse, touch or with tools (lasso or rectangular selection). Ogma implements a standard selection mechanism with the followind default behavior:

  • A node/edge is selected when clicked.
  • The selection is cleared when the background is clicked.
  • A node/edge is added to the selection when clicked and the 'ctrl' key is held and the node/edge is not in the selection.
  • A node/edge is removed from the selection when clicked and the 'ctrl' key is held and the node/edge is already in the selection.

The current selection can be retrieved as NodeList and EdgeList.

// Log the list of nodes in the selection
const currentSelection = ogma.getSelectedNodes();
console.log(currentSelection.getId().join(', '));

Here is a full example to demonstrate this feature and how to interact with it.

Lasso selection

Ogma has a lasso mode to create custom selections by drawing with the mouse: see the lasso example.

Rectangular selection

In the same spirit as the lasso mode, Ogma offers a rectangular selection mode to facilitate zone selections.