All settings

This example shows how to tweak Ogma settings.

index.tsindex.htmlstyles.css

import Ogma, { Easing } from '@linkurious/ogma';
import { GUI } from '@linkurious/ogma-ui-kit/gui';

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

const graph = await Ogma.parse.jsonFromUrl('files/solarCity.json');
await ogma.view.locateRawGraph(graph);
await ogma.setGraph(graph);

const options = ogma.getOptions();

const colorOptions: {
  [key: string]: { r: number; g: number; b: number; a: number };
} = {};

const easingArray: Easing[] = [
  'quadraticOut',
  'quadraticInOut',
  'quadraticIn',
  'linear',
  'easeIn',
  'easeOut',
  'easeInOut',
  'cubicIn',
  'cubicOut',
  'cubicInOut',
  'elasticIn',
  'elasticOut',
  'elasticInOut'
];

const easingValues = <Record<Easing, string>>Object.fromEntries(
  easingArray.map(e => [e, e])
);
const stringValues: { [key: string]: { [key: string]: string } } = {
  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: easingValues
};

interface RGBAColor {
  r: number;
  g: number;
  b: number;
  a: number;
}

/**
 * @param rgba - RGBA color object
 * @returns formatted RGBA string
 */
function formatRGBA(rgba: RGBAColor): string {
  const r = Math.round(255 * rgba.r);
  const g = Math.round(255 * rgba.g);
  const b = Math.round(255 * rgba.b);

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

function createUIRecursive(parent: any, obj: any): void {
  Object.entries(obj).forEach(([key, value]) => {
    if (
      ['default', 'debug', 'nodeCornerRadius', 'removalStrategy'].includes(key)
    )
      return;
    let input: any;

    if (typeof value === 'boolean') {
      input = parent.add(obj, key);
    }

    if (typeof value === 'number') {
      const max = Math.min(1000, value > 1 ? value * 2 : 100);
      input = parent.add(obj, key, 0, max);
    }

    if (typeof value === 'object' && value !== null) {
      const folder = parent.addFolder(key);
      return createUIRecursive(folder, obj[key]);
    }

    if (typeof value === 'string') {
      if (key.match(/Color/)) {
        colorOptions[key] = { r: 1, g: 1, b: 1, a: 1 };
        return parent
          .addColor(colorOptions, key)
          .onFinishChange((color: RGBAColor) => {
            console.log(`Setting ${key} to`, color, formatRGBA(color));
            obj[key] = formatRGBA(color);
            ogma.setOptions(options);
          });
      }

      const fieldOptions =
        stringValues[key] ||
        (['default', 'node', 'edge'].includes(key)
          ? stringValues.cursor
          : null);

      if (fieldOptions) {
        input = parent.add(obj, key, fieldOptions);
      }
    }

    if (!input) return;
    input.onChange(() => ogma.setOptions(options));
  });
}

const gui = new GUI({
  container: document.getElementById('gui-container')!
});

createUIRecursive(gui, options);

html

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

    <link type="text/css" rel="stylesheet" href="styles.css" />
    <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.ts" type="module"></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;
}

All settings ​

All settings