Appearance

  2. Examples

All settings ​

styles

This example shows how to tweak Ogma settings.

js
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});
Ogma.parse
  .jsonFromUrl('files/solarCity.json')
  .then(g => ogma.setGraph(g))
  .then(() => ogma.view.locateGraph());

const options = ogma.getOptions();
const colorOptions = {};
const stringValues = {
  renderer: { webgl: 'webgl', canvas: 'canvas', svg: 'svg' },
  removalStrategy: { topDown: 'topDown', bottomUp: 'bottomUp' },
  // the values below are not exhaustive:
  // cursor can be any CSS cursor, easing can be linear etc
  cursor: { pointer: 'pointer', wait: 'wait', grab: 'grab', help: 'help' },
  multiSelectionKey: { ctrl: 'ctrl', shift: 'shift', alt: 'alt' },
  easing: { quadraticOut: 'quadraticOut', quadraticInOut: 'quadraticInOut' }
};

/**
 * @param {object} rgba
 * @param {number} rgba.r
 * @param {number} rgba.g
 * @param {number} rgba.b
 * @returns {string}
 */
function formatGRBA(rgba) {
  const r = Math.floor(rgba.r);
  const g = Math.floor(rgba.g);
  const b = Math.floor(rgba.b);

  return `rgba(${r},${g},${b},${rgba.a})`;
}

function createUIRecursive(parent, obj) {
  Object.entries(obj).forEach(([key, value]) => {
    let input;
    if (typeof value === 'boolean') {
      input = parent.addInput(obj, key);
    }

    if (typeof value === 'number') {
      input = parent.addInput(obj, key, {
        min: 0,
        max: value > 1 ? value * 2 : 100
      });
    }
    if (typeof value === 'object') {
      const folder = parent.addFolder({
        title: key
      });
      return createUIRecursive(folder, obj[key]);
    }

    if (typeof value === 'string') {
      if (key.match(/Color/)) {
        colorOptions[key] = { r: 255, g: 255, b: 255, a: 1 };
        return parent.addInput(colorOptions, key).on('change', evt => {
          obj[key] = formatGRBA(evt);
          ogma.setOptions(options);
        });
      }
      const fieldOptions =
        stringValues[key] ||
        (['default', 'node', 'edge'].includes(key)
          ? stringValues.cursor
          : null);

      if (fieldOptions) {
        input = parent.addInput(obj, key, { options: fieldOptions });
      }
    }
    if (!input) return;
    input.on('change', () => ogma.setOptions(options));
  });
}

const pane = new Tweakpane({
  container: document.getElementById('gui-container')
});
createUIRecursive(pane, options);
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/tweakpane@1.5.7/dist/tweakpane.min.js"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/lucide-static@0.483.0/font/lucide.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  </head>
  <body>
    <div id="graph-container"></div>
    <div id="gui-container"></div>
    <script src="index.js"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}
#gui-container{
  position: absolute;
  z-index: 100;
  opacity: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 400px;
  right: 0px;
}

#gui-container::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#gui-container::-webkit-scrollbar
{
	width: 5px;
	background-color: #F5F5F5;
}

#gui-container::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}