Lasso (nodes)

This example shows how to use the lasso tool to select nodes in the graph.

Press "ctrl" and drag the mouse to use the lasso.

index.tsindex.htmlstyles.css

import Ogma, { LassoOptions } from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

const lassoOptions: LassoOptions = {
  strokeWidth: 1,
  // it's a more straighforward way of using the lasso tool:
  // it would only select nodes and edges that are completely inside the lasso
  bothExtremities: true,
  callback: evt => {
    console.log(
      'lassoed\n nodes: ' + evt.nodes.getId() + '\n edges: ' + evt.edges.getId()
    );
    evt.nodes.setSelected(true);
    evt.edges.setSelected(true);
  }
};

ogma.events.on('dragStart', () => {
  if (ogma.keyboard.isKeyPressed('ctrl')) {
    ogma.getSelectedEdges().setSelected(false);
    ogma.getSelectedNodes().setSelected(false);
    ogma.tools.lasso.enable(lassoOptions);
  }
});

ogma.events.on('nodesSelected', evt => {
  console.log('selected nodes', ogma.getSelectedNodes().getId());
});

// Generate a random graph and assign it to Ogma.
const graph = await ogma.generate.random({ nodes: 8, edges: 10 });
await ogma.setGraph(graph);
await ogma.layouts.force({ duration: 0, locate: true });

const lassoButton = document.getElementById('lasso-button');
ogma.events
  .on('lassoEnabled', () => lassoButton?.classList.add('active'))
  .on('lassoDisabled', () => lassoButton?.classList.remove('active'));

document.getElementById('lasso-button')?.addEventListener('click', () => {
  if (ogma.tools.lasso.enabled()) ogma.tools.lasso.disable();
  else ogma.tools.lasso.enable(lassoOptions);
});

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <button id="lasso-button" type="button" class="btn btn-default">
      <svg
        class="icon"
        viewBox="0 0 24 24"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="currentColor"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g fill="currentColor" fill-rule="nonzero">
            <path
              d="M17.5,12 C20.5375661,12 23,14.4624339 23,17.5 C23,20.5375661 20.5375661,23 17.5,23 C14.4624339,23 12,20.5375661 12,17.5 C12,14.4624339 14.4624339,12 17.5,12 Z M10.294515,20.3247055 C10.7579546,20.4190045 11.2264721,20.4738458 11.7261492,20.4908773 C11.9986018,21.0134696 12.3398413,21.4959026 12.7382384,21.9244751 C12.446133,21.9723528 12.1602748,21.9961534 11.878965,21.9950556 C11.2145213,21.9838295 10.601521,21.917911 9.99542908,21.7945856 C9.58953289,21.7119953 9.32744167,21.3159988 9.41003196,20.9101026 C9.49262225,20.5042064 9.88861879,20.2421152 10.294515,20.3247055 Z M17.5,13.9992349 L17.4101244,14.0072906 C17.2060313,14.0443345 17.0450996,14.2052662 17.0080557,14.4093593 L17,14.4992349 L16.9996498,16.9992349 L14.4976498,17 L14.4077742,17.0080557 C14.2036811,17.0450996 14.0427494,17.2060313 14.0057055,17.4101244 L13.9976498,17.5 L14.0057055,17.5898756 C14.0427494,17.7939687 14.2036811,17.9549004 14.4077742,17.9919443 L14.4976498,18 L17.0006498,17.9992349 L17.0011076,20.5034847 L17.0091633,20.5933603 C17.0462073,20.7974534 17.207139,20.9583851 17.411232,20.995429 L17.5011076,21.0034847 L17.5909833,20.995429 C17.7950763,20.9583851 17.956008,20.7974534 17.993052,20.5933603 L18.0011076,20.5034847 L18.0006498,17.9992349 L20.5045655,18 L20.5944411,17.9919443 C20.7985342,17.9549004 20.9594659,17.7939687 20.9965098,17.5898756 L21.0045655,17.5 L20.9965098,17.4101244 C20.9594659,17.2060313 20.7985342,17.0450996 20.5944411,17.0080557 L20.5045655,17 L17.9996498,16.9992349 L18,14.4992349 L17.9919443,14.4093593 C17.9549004,14.2052662 17.7939687,14.0443345 17.5898756,14.0072906 L17.5,13.9992349 Z M5.89222688,17.9097526 C6.53637864,18.5740798 7.28429536,19.130262 8.10609772,19.5541985 C8.47421651,19.744097 8.61869261,20.1964594 8.42879413,20.5645782 C8.23889565,20.932697 7.78653327,21.0771731 7.41841449,20.8872746 C6.4516742,20.38857 5.57239726,19.734703 4.81534036,18.9539343 C4.52699755,18.6565603 4.53431877,18.181743 4.83169277,17.8934002 C5.12906678,17.6050574 5.60388407,17.6123786 5.89222688,17.9097526 Z M3.60822682,13.407529 C3.76280157,14.3234813 4.06588175,15.2020299 4.50326754,16.0138439 C4.69973498,16.3784991 4.56339186,16.8333789 4.19873665,17.0298463 C3.83408144,17.2263138 3.37920166,17.0899706 3.18273422,16.7253154 C2.66798394,15.7699084 2.31111219,14.7354324 2.12914074,13.6571374 C2.06021329,13.2486991 2.33544125,12.8617176 2.74387959,12.7927902 C3.15231794,12.7238627 3.53929938,12.9990907 3.60822682,13.407529 Z M18.6788312,8.89588321 L18.8173452,8.92402536 C20.2893971,9.21220797 21.2866296,9.90443863 21.7327341,10.9566302 C21.8944192,11.3379841 21.7163424,11.7782042 21.3349885,11.9398892 C21.2094747,11.9931042 21.0775841,12.0095145 20.9513462,11.9939864 C20.7893646,11.889254 20.6219721,11.7941729 20.4501633,11.7065097 L20.3977583,11.6331682 L20.3517294,11.5421437 C20.1352252,11.0314921 19.6267346,10.6527822 18.7401939,10.4417333 L18.370191,10.3637869 C17.9648406,10.2785583 17.7053306,9.88086541 17.7905592,9.475515 C17.8757879,9.07016458 18.2734807,8.81065459 18.6788312,8.89588321 Z M3.56202296,7.41404139 C3.95534219,7.54393696 4.16888925,7.96808637 4.03899367,8.3614056 C3.76188161,9.20049113 3.58790736,10.1286309 3.52037016,11.1253342 C3.49236702,11.5386001 3.13464779,11.8509173 2.7213819,11.8229142 C2.308116,11.794911 1.99579883,11.4371918 2.02380197,11.0239259 C2.09959086,9.90544534 2.29674452,8.85364514 2.61465875,7.89101209 C2.74455433,7.49769286 3.16870374,7.28414581 3.56202296,7.41404139 Z M15.1877309,5.99714002 C15.4542697,6.97181089 15.8198274,7.57919637 16.5464905,8.07331053 C16.8890184,8.30622157 16.9778804,8.77270695 16.7449693,9.11523479 C16.5120583,9.45776264 16.0455729,9.54662463 15.7030451,9.3137136 C14.6404197,8.59115291 14.0935416,7.68249796 13.7408566,6.39281011 C13.6315953,5.99326681 13.8669154,5.58079921 14.2664587,5.47153793 C14.666002,5.36227665 15.0784696,5.59759672 15.1877309,5.99714002 Z M7.27542551,3.45338703 C7.48547095,3.81039374 7.36633531,4.27008033 7.00932861,4.48012577 C6.23176232,4.9376081 5.5766352,5.55069557 5.04835728,6.30739814 C4.8112475,6.64703297 4.3437036,6.73014595 4.00406876,6.49303616 C3.66443392,6.25592637 3.58132095,5.78838247 3.81843074,5.44874763 C4.46849497,4.51759897 5.28273372,3.7556101 6.24868677,3.18729014 C6.60569347,2.97724469 7.06538006,3.09638033 7.27542551,3.45338703 Z M10.9999752,2.00168051 C12.6432298,2.00168051 13.699211,2.45718416 14.3241288,3.40116699 C14.5527764,3.74655541 14.4581392,4.21190353 14.1127508,4.4405511 C13.7987613,4.64841253 13.3856316,4.58909649 13.1413257,4.31709846 L13.0733667,4.22917309 C12.7567092,3.7508394 12.1790849,3.50166915 10.9999897,3.50168051 C10.351745,3.50168051 9.74298623,3.55938675 9.174532,3.67268757 C8.76830867,3.75365352 8.37336373,3.48998032 8.29239778,3.08375699 C8.21143184,2.67753367 8.47510504,2.28258872 8.88132836,2.20162278 C9.54830596,2.06868488 10.2551541,2.00168051 10.9999752,2.00168051 Z"
            ></path>
          </g>
        </g>
      </svg>
    </button>
    <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;
}

#lasso-button {
  position: absolute;
  top: 2em;
  right: 2em;
  padding: 6px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border: 1px solid #bbb;
  border-radius: 4px;
  align-content: center;
  background-color: #fff;
  color: #444;
}

#lasso-button:hover,
#lasso-button.active {
  background-color: #f0f0f0;
  cursor: pointer;
  color: #0094ff;
}

.icon {
  width: 24px;
  height: 24px;
}

Lasso (nodes) ​

Lasso (nodes)