Fullscreen

This example shows how to toggle the fullscreen mode of the visualization. It uses the setFullScreen method.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

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

const graph = await ogma.generate.random({ nodes: 50, edges: 50 });
await ogma.setGraph(graph);
await ogma.view.locateGraph();

document.getElementById('btn')!.addEventListener('click', () => {
  ogma.view.setFullScreen(!ogma.view.isFullScreen());
});

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="btn"
        type="button"
        class="btn btn-default"
        title="Full screen"
      >
        <i class="fa fa-expand"></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;
}

.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);
}

Fullscreen ​

Fullscreen