Local force

This example shows how to use the local force layout algorithm on a subgraph. Press "ctrl" and select some nodes with the lasso tool using the mouse. Only the selected nodes will be moved by the layout. You can also take the pinned nodes into account, allowing the algorithm to avoid them when placing the other nodes.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

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

ogma.generate
  .barabasiAlbert({
    nodes: 100,
    m0: 10,
    m: 1
  })
  .then(graph => {
    ogma.setGraph(graph);
    ogma.view.locateGraph();
  });

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

ogma.events.on('nodesSelected', () => {
  const pinUnselected = (
    document.getElementById('pin-unselected') as HTMLInputElement
  ).checked;
  // reset the pinning flag on all nodes
  ogma.getNodes().setAttribute('layoutable', true);
  let nodes = ogma.getSelectedNodes();
  if (pinUnselected) {
    // include all the nodes for the layout
    nodes = ogma.getNodes();
    // 'pin' the rest of the nodes
    ogma.getSelectedNodes().inverse().setAttribute('layoutable', false);
  }
  ogma.layouts.force({ nodes: nodes }).then(() => {
    return ogma.view.locateGraph({
      easing: 'linear',
      duration: 300
    });
  });
});

// re-enable lasso when nodes are unselected
ogma.events.on('nodesUnselected', () => {
  ogma.tools.lasso.enable();
});

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>
    <div class="control">
      <label>
        <input type="checkbox" checked id="pin-unselected" /> Pin remaining
        nodes
      </label>
    </div>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.control {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 15px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

Local force ​

Local force