Camera

This example shows how to interract with the camera of the graph view. To move the camera, click and drag with the left button of the mouse. To rotate the camera, click and drag with the right button of the mouse. To zoom in and out, scroll or double-click. You can also use the buttons in the bottom right corner of the view.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

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

ogma.generate
  .erdosRenyi({
    nodes: 50,
    p: 0.75
  })
  .then(g => ogma.setGraph(g))
  .then(() => ogma.layouts.force({ duration: 0, locate: true }));

ogma.setOptions({
  interactions: { zoom: { onDoubleClick: true } }
});

document.getElementById('zoom-reset-button')!.addEventListener('click', () => {
  ogma.view.locateGraph({
    easing: 'linear',
    duration: 300
  });
});

document.getElementById('zoom-in-button')!.addEventListener('click', () => {
  ogma.view.zoomIn({ duration: 200 }).then(() => {
    console.log('zoom done');
  });
});

document.getElementById('zoom-out-button')!.addEventListener('click', () => {
  ogma.view.zoomOut({ duration: 200 }).then(() => {
    console.log('zoom done');
  });
});

document
  .getElementById('locate-random-node-button')!
  .addEventListener('click', () => {
    ogma.getNode('0')!.locate({ duration: 600 });
  });

const locateRandomEdge = () => {
  ogma.getEdge('0')!.locate({ duration: 600 });
};

document.getElementById('rotate-left-button')!.addEventListener('click', () => {
  // angle in radian
  ogma.view.rotate(Math.PI / 2, { duration: 600 }).then(() => {
    console.log('rotation done');
  });
});

document
  .getElementById('rotate-right-button')!
  .addEventListener('click', () => {
    // angle in radian
    ogma.view.rotate(-Math.PI / 2, { duration: 600 }).then(() => {
      console.log('rotation done');
    });
  });

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
      rel="stylesheet"
    />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="graph-container"></div>

    <div id="viewController" class="btn-group-vertical">
      <button
        id="zoom-reset-button"
        type="button"
        class="btn btn-default"
        title="Zoom Reset"
      >
        <i class="fa fa-bullseye"></i>
      </button>
      <button
        id="locate-random-node-button"
        type="button"
        class="btn btn-default"
        title="Locate random node"
      >
        <i class="fa fa-location-arrow"></i>
      </button>
      <button
        id="zoom-in-button"
        type="button"
        class="btn btn-default"
        title="Zoom In"
      >
        <i class="fa fa-plus"></i>
      </button>
      <button
        id="zoom-out-button"
        type="button"
        class="btn btn-default"
        title="Zoom Out"
      >
        <i class="fa fa-minus"></i>
      </button>
      <button
        id="rotate-left-button"
        type="button"
        class="btn btn-default"
        title="Rotate Left"
      >
        <i class="fa fa-undo-alt"></i>
      </button>
      <button
        id="rotate-right-button"
        type="button"
        class="btn btn-default"
        title="Rotate Right"
      >
        <i class="fa fa-redo-alt"></i>
      </button>
    </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;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn.focus,
.btn:focus,
.btn:hover {
  color: #333;
  text-decoration: none;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.btn-group-vertical > .btn {
  border: 0;
  padding: 6px 10px;
  position: relative;
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-group-vertical > .btn:focus {
  background-color: #ffffff;
  outline: none;
}

.btn-group-vertical > .btn.active {
  background-color: #cccccc;
}

#viewController {
  position: absolute;
  bottom: 10px;
  right: 10px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 6px rgba(0, 0, 0, 0.23);
}

Camera ​

Camera