Appearance

  2. Examples

Rectangle selection ​

interactionstools

This example shows how to use the rectangleSelect tool.

Press "ctrl" and drag the mouse to enable the rectangle select. If no node is inside the rectangle, edges will be selected instead.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container',
  graph: {
    nodes: [
      { id: 0, attributes: { x: 0, y: 0 } },
      { id: 1, attributes: { x: 100, y: 0 } },
      { id: 2, attributes: { x: 50, y: 50 } },
      { id: 3, attributes: { x: 50, y: -50 } }
    ],
    edges: [
      { id: 0, source: 0, target: 1 },
      { id: 1, source: 0, target: 1 },
      { id: 2, source: 0, target: 1 },
      { id: 3, source: 3, target: 3 }
    ]
  }
});

ogma.events.on('dragStart', () => {
  if (ogma.keyboard.isKeyPressed('ctrl')) {
    ogma.getSelectedNodes().setSelected(false);
    ogma.getSelectedEdges().setSelected(false);
    ogma.tools.rectangleSelect.enable({
      bothExtremities: true, // only if both endpoints are inside the rectangle
      callback({ nodes, edges }) {
        nodes.setSelected(true);
        edges.setSelected(true);
      }
    });
  }
});
html
<!doctype html>
<html>
  <head>
    <title>Rectangle select</title>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}