Grid background new

stylesui

This example shows the GridBackground plugin, which renders an adaptive multi-level SVG grid behind the Ogma canvas.

The grid automatically switches between finer and coarser cell levels as you zoom in and out, keeping the cell density readable at any zoom level. You can optionally snap dragged nodes to the nearest grid line or intersection.

Pass a GridBackground instance to the background option of the Ogma constructor to attach it automatically:

import Ogma, { GridBackground } from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'app',
  background: new GridBackground({
    levels: [{ size: 10, color: '#ccc' }, { size: 100, color: '#aaa', width: 2 }],
    snap: { line: true },
  }),
});

Use the controls to toggle the grid on and off, show or hide the origin marker, change the snap mode (none / lines / dots / both), and adjust the minimum cell screen size.