Interactions

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:
ogma.events.on('click', evt => {
  if (!evt.target || !evt.target.isNode) 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.
ogma.events.onKeyPress('ctrl m', evt => ogma.geo.toggle());

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

More live examples

• Click
• Double click
• Right Click
• Hover
• Drag
• Draggable and non-draggable nodes
• Keyboard

Selection

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.