Sigma.js

https://www.sigmajs.org
Admin
Sigma.js is a modern JavaScript library for rendering and interacting with network graphs in the...
Tokens:258,373
Snippets:2,185
Trust Score:9
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install sigma and graphology with npm or yarn

Source: https://www.sigmajs.org/get-started/quickstart/

Install sigma.js and graphology using a package manager. The example shows npm and yarn commands.

```bash
npm install sigma graphology
# or using another package manager
yarn add sigma graphology
```

--------------------------------

### Install @sigma/export-image

Source: https://www.sigmajs.org/how-to/technical/export-image/

Install the package via npm.

```bash
npm install @sigma/export-image
```

--------------------------------

### Install @sigma/layer-webgl via npm

Source: https://www.sigmajs.org/how-to/layers/webgl-layers/

Install the WebGL layers package for Sigma.js using npm in a terminal.

```bash
npm install @sigma/layer-webgl
```

--------------------------------

### Full example: downloadAsImage with controls

Source: https://www.sigmajs.org/how-to/technical/export-image/

Complete example from the cookbook showing how to set up a Sigma renderer and use downloadAsImage with a format selector, reset camera option, and save button. Requires the @sigma/export-image package and a graph data source.

```typescript
import { downloadAsImage } from "@sigma/export-image";
import Sigma from "sigma";

import { getSmallGraph } from "../_data/small-graph";
import { registerControls } from "../_controls";

const container = document.getElementById("sigma-container") as HTMLElement;

const graph = getSmallGraph();

const { format, resetCamera } = registerControls({
  format: {
    type: "select",
    label: "Format",
    default: "png",
    options: [
      { label: "PNG", value: "png" },
      { label: "JPEG", value: "jpeg" },
    ],
  },
  resetCamera: { type: "boolean", label: "Reset camera", default: false },
  save: {
    type: "button",
    label: "Save image",
    action: () => {
      downloadAsImage(renderer, {
        format: format as "png" | "jpeg",
        fileName: "graph",
        backgroundColor: "#ffffff",
        cameraState: resetCamera ? { x: 0.5, y: 0.5, angle: 0, ratio: 1 } : undefined,
      });
    },
  },
});

const renderer = new Sigma(graph, container);
```

--------------------------------

### handleStart(e)

Source: https://www.sigmajs.org/api/sigma/classes/touchcaptor/

Handles the touch start event.

```APIDOC
## handleStart(e)

### Description
Handles the touch start event.

### Method
`handleStart`

### Parameters
- **e** (`TouchEvent`) - The touch event.

### Returns
`void`
```

--------------------------------

### Full example: community-based viewport controls with Sigma.js

Source: https://www.sigmajs.org/how-to/interactivity/camera-viewport/

Complete example that imports graphology, louvain, seedrandom, and Sigma. It detects communities, assigns colors, creates buttons to fit the viewport to each community, and displays a live count of visible nodes.

```typescript
import { fitViewportToNodes, getNodesInViewport } from "@sigma/utils";
import Graph from "graphology";
import louvain from "graphology-communities-louvain";
import seedrandom from "seedrandom";
import Sigma from "sigma";

import { registerControls } from "../_controls";
import data from "../_data/data.json";

// Hardcoded color palette with readable names
const COMMUNITY_COLORS: { color: string; name: string }[] = [
  { color: "#e63946", name: "red" },
  { color: "#457b9d", name: "blue" },
  { color: "#2a9d8f", name: "teal" },
  { color: "#e9c46a", name: "yellow" },
  { color: "#f4a261", name: "orange" },
  { color: "#6a4c93", name: "purple" },
  { color: "#8ac926", name: "green" },
  { color: "#ff6b6b", name: "pink" },
  { color: "#4cc9f0", name: "cyan" },
  { color: "#b5838d", name: "mauve" },
];

const graph = new Graph();
graph.import(data);

// Detect communities (seeded, so results are stable across runs)
louvain.assign(graph, { nodeCommunityAttribute: "community", rng: seedrandom("sigma") });
const communities = new Set<string>();
graph.forEachNode((_, attrs) => communities.add(attrs.community));
const communitiesArray = Array.from(communities);

// Assign colors per community
const palette: Record<string, { color: string; name: string }> = {};
communitiesArray.forEach((c, i) => (palette[c] = COMMUNITY_COLORS[i % COMMUNITY_COLORS.length]));
graph.forEachNode((node, attrs) => graph.setNodeAttribute(node, "color", palette[attrs.community].color));

const container = document.getElementById("sigma-container") as HTMLElement;
const renderer = new Sigma(graph, container);

// Register a button per community to fit viewport
const controls: Record<string, { type: "button"; label: string; action: () => void }> = {};
communitiesArray.forEach((community) => {
  const { name } = palette[community];
  controls[`community-${name}`] = {
    type: "button",
    label: `Fit ${name}`,
    action: () => {
      fitViewportToNodes(
        renderer,
        graph.filterNodes((_, attrs) => attrs.community === community),
        { animate: true },
      );
    },
  };
});
controls["fit-all"] = {
  type: "button",
  label: "Fit all",
  action: () => {
    renderer.getCamera().animate({ x: 0.5, y: 0.5, ratio: 1 }, { duration: 300 });
  },
};
registerControls(controls);

// Display live count of visible nodes in the bottom-left
const infoEl = document.getElementById("visible-nodes-info") as HTMLDivElement;
setInterval(() => {
  const count = getNodesInViewport(renderer).length;
  infoEl.textContent = count === 0 ? "No visible nodes" : count === 1 ? "1 visible node" : `${count} visible nodes`;
}, 100);
```

--------------------------------

### on() - Add event listener with example

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Adds a listener to the end of the listeners array for the specified event. The example shows listening for the 'connection' event. Multiple calls with the same listener will add it multiple times.

```javascript
server.on('connection', (stream) => {
  console.log('someone connected!');
});
```

--------------------------------

### Install Leaflet and MapLibre packages

Source: https://www.sigmajs.org/how-to/layers/map-layers/

Install the package that matches your preferred map provider. Use the Leaflet command for OpenStreetMap base layers, or the MapLibre command for MapLibre GL.

```bash
# Leaflet
npm install @sigma/layer-leaflet leaflet

# MapLibre
npm install @sigma/layer-maplibre maplibre-gl
```

--------------------------------

### npm install @sigma/layer-webgl

Source: https://www.sigmajs.org/how-to/layers/webgl-layers/

Install the @sigma/layer-webgl package via npm.

```APIDOC
## npm install @sigma/layer-webgl

### Description
Install the @sigma/layer-webgl package using npm.

### Method
npm install

### Endpoint
npm install @sigma/layer-webgl

### Parameters
None

### Request Example
```bash
npm install @sigma/layer-webgl
```

### Response
#### Success Response
- Package installed successfully.

#### Response Example
```
added 1 package in 1s
```
```

--------------------------------

### Interactive example: custom size settings with controls

Source: https://www.sigmajs.org/how-to/technical/custom-sizes/

Full example that sets up a graph with a grid layout and uses `registerControls` to let users change `autoRescale`, `itemSizesReference`, and `zoomToSizeRatioFunction`. It demonstrates how to pass these settings to a Sigma instance and apply custom node/edge styles.

```typescript
import Graph from "graphology";
import Sigma, { DEFAULT_STYLES } from "sigma";
import { registerControls } from "../_controls";
import { sdfSquare } from "sigma/rendering";

const container = document.getElementById("sigma-container") as HTMLElement;

const { autoRescale, itemSizesReference, zoomScaling } = registerControls({
  autoRescale: {
    type: "select",
    label: "autoRescale",
    default: "true",
    options: [
      { label: "true", value: "true" },
      { label: "false", value: "false" },
      { label: "once", value: "once" },
    ],
  },
  itemSizesReference: {
    type: "select",
    label: "itemSizesReference",
    default: "screen",
    options: [
      { label: "screen", value: "screen" },
      { label: "positions", value: "positions" },
    ],
  },
  zoomScaling: {
    type: "select",
    label: "zoomToSizeRatioFunction",
    default: "sqrt",
    options: [
      { label: "sqrt (default)", value: "sqrt" },
      { label: "linear", value: "linear" },
      { label: "constant", value: "constant" },
    ],
  },
});

const ZOOM_FUNCTIONS: Record<string, (ratio: number) => number> = {
  sqrt: Math.sqrt,
  linear: (ratio: number) => ratio,
  constant: () => 1,
};

const graph = new Graph();

// Grid layout with varying sizes
const COLS = 8;
const ROWS = 6;
const SPACING = 100;
const COLORS = ["#e22653", "#277da1", "#33cc33", "#ff9900", "#9b59b6", "#1abc9c"];

for (let row = 0; row < ROWS; row++) {
  for (let col = 0; col < COLS; col++) {
    const id = `${row}-${col}`;
    graph.addNode(id, {
      x: (col - (COLS - 1) / 2) * SPACING,
      y: ((ROWS - 1) / 2 - row) * SPACING,
      color: COLORS[(row + col) % COLORS.length],
    });

    if (col > 0) graph.addEdge(`${row}-${col - 1}`, id);
    if (row > 0) graph.addEdge(`${row - 1}-${col}`, id);
  }
}

let autoRescaleValue: boolean | "once";
if (autoRescale === "true") autoRescaleValue = true;
else if (autoRescale === "once") autoRescaleValue = "once";
else autoRescaleValue = false;

new Sigma(graph, container, {
  settings: {
    autoRescale: autoRescaleValue,
    itemSizesReference: itemSizesReference as "screen" | "positions",
    zoomToSizeRatioFunction: ZOOM_FUNCTIONS[zoomScaling],
  },
  primitives: {
    nodes: {
      shapes: [sdfSquare()],
    },
  },
  styles: {
    edges: [
      DEFAULT_STYLES.edges,
      {
        size: 10,
        color: "darkgrey",
      },
    ],
    nodes: [
      DEFAULT_STYLES.nodes,
      {
        size: 10,
      },
    ],
  },
});
```

--------------------------------

### prependListener() - Add listener to beginning example

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Adds a listener to the beginning of the listeners array for the specified event. The example shows listening for the 'connection' event.

```javascript
server.prependListener('connection', (stream) => {
  console.log('someone connected!');
});
```

--------------------------------

### Install graphology-gexf package

Source: https://www.sigmajs.org/how-to/technical/loading-data/

Install the graphology-gexf package to parse GEXF files in the browser.

```bash
npm install graphology-gexf
```

--------------------------------

### once() with prependOnceListener - EventEmitter example

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Demonstrates adding one-time listeners with once() and prependOnceListener() to control invocation order. The example shows that prependOnceListener adds the listener to the beginning, so 'b' is printed before 'a'.

```javascript
import { EventEmitter } from 'node:events';
const myEE = new EventEmitter();
myEE.once('foo', () => console.log('a'));
myEE.prependOnceListener('foo', () => console.log('b'));
myEE.emit('foo');
// Prints:
//   b
//   a
```

--------------------------------

### Live example: logging all Sigma events

Source: https://www.sigmajs.org/how-to/interactivity/interactions-events/

This example creates a Sigma renderer with edge events enabled and logs all node, edge, label, and stage events to a DOM overlay. It uses `nodeLabelEvents` and `edgeLabelEvents` set to 'separate' and custom styles for hovered states.

```typescript
import Graph from "graphology";
import Sigma, { DEFAULT_STYLES } from "sigma";
import type {
  MouseCoords,
  SigmaEdgeEventPayload,
  SigmaEdgeLabelEventPayload,
  SigmaNodeEventPayload,
  SigmaNodeLabelEventPayload,
  SigmaStageEventPayload,
} from "sigma/types";

import data from "../_data/data.json";

const container = document.getElementById("sigma-container") as HTMLElement;
const logsDOM = document.getElementById("sigma-logs") as HTMLElement;

const graph = new Graph();
graph.import(data);
graph.forEachEdge((edge, attributes) => {
  graph.setEdgeAttribute(edge, "label", `cooccurences: ${attributes.size}`);
});

function logEvent(event: string, itemType: "node" | "edge" | "positions", item: string | MouseCoords): void {
  const div = document.createElement("div");
  let message = `"${event}"`;
  if (item && itemType) {
    if (itemType === "positions") {
      item = item as MouseCoords;
      message += `, x ${item.x}, y ${item.y}`;
    } else {
      const label =
        itemType === "node" ? graph.getNodeAttribute(item, "label") : graph.getEdgeAttribute(item, "label");
      message += `, ${itemType} ${label || "with no label"} (id "${item}")`;

      if (itemType === "edge") {
        message += `, source ${graph.getSourceAttribute(item, "label")}, target: ${graph.getTargetAttribute(
          item,
          "label",
        )}`;
      }
    }
  }
  div.innerHTML = `<span>${message}</span>`;
  logsDOM.appendChild(div);
  logsDOM.scrollTo({ top: logsDOM.scrollHeight });

  if (logsDOM.children.length > 50) logsDOM.children[0].remove();
}

const renderer = new Sigma(graph, container, {
  settings: {
    enableEdgeEvents: true,
    nodeLabelEvents: "separate",
    edgeLabelEvents: "separate",
    renderEdgeLabels: true,
    edgePickingPadding: 30,
  },
  styles: {
    edges: [
      DEFAULT_STYLES.edges,
      { labelPosition: "above" },
      { whenState: "isHovered", then: { color: "#cc0000" } },
      { whenState: "isLabelHovered", then: { labelColor: "#cc0000", labelDepth: "topEdges" } },
    ],
    nodes: [
      DEFAULT_STYLES.nodes,
      { whenState: "isLabelHovered", then: { labelColor: "#cc0000", depth: "topNodes" } },
    ],
  },
});

const nodeEvents = [
  "enterNode",
  "leaveNode",
  "downNode",
  "clickNode",
  "rightClickNode",
  "doubleClickNode",
  "wheelNode",
] as const;
const edgeEvents = [
  "enterEdge",
  "leaveEdge",
  "downEdge",
  "clickEdge",
  "rightClickEdge",
  "doubleClickEdge",
  "wheelEdge",
] as const;
const nodeLabelEvents = [
  "enterNodeLabel",
  "leaveNodeLabel",
  "downNodeLabel",
  "upNodeLabel",
  "clickNodeLabel",
] as const;
const edgeLabelEvents = [
  "enterEdgeLabel",
  "leaveEdgeLabel",
  "downEdgeLabel",
  "upEdgeLabel",
  "clickEdgeLabel",
] as const;
const stageEvents = ["downStage", "clickStage", "doubleClickStage", "wheelStage"] as const;

nodeEvents.forEach((eventType) => {
  renderer.on(eventType, ({ node }: SigmaNodeEventPayload) => {
    logEvent(eventType, "node", node);
  });
});
edgeEvents.forEach((eventType) => {
  renderer.on(eventType, ({ edge }: SigmaEdgeEventPayload) => {
    logEvent(eventType, "edge", edge);
  });
});
nodeLabelEvents.forEach((eventType) => {
  renderer.on(eventType, ({ node }: SigmaNodeLabelEventPayload) => {
    logEvent(eventType, "node", node);
  });
});
edgeLabelEvents.forEach((eventType) => {
  renderer.on(eventType, ({ edge }: SigmaEdgeLabelEventPayload) => {
    logEvent(eventType, "edge", edge);
  });
});
stageEvents.forEach((eventType) => {
  renderer.on(eventType, ({ event }: SigmaStageEventPayload) => {
    logEvent(eventType, "positions", event);
  });
});
```

--------------------------------

### on() with prependListener - EventEmitter example

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Demonstrates adding listeners with on() and prependListener() to control invocation order. The example shows that prependListener adds the listener to the beginning, so 'b' is printed before 'a'.

```javascript
import { EventEmitter } from 'node:events';
const myEE = new EventEmitter();
myEE.on('foo', () => console.log('a'));
myEE.prependListener('foo', () => console.log('b'));
myEE.emit('foo');
// Prints:
//   b
//   a
```

--------------------------------

### rawListeners() example

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Returns a copy of the array of listeners for the event, including wrappers created by .once(). The example shows how to access and invoke the wrapper, and demonstrates the difference between calling the wrapper's listener property and calling the wrapper itself.

```javascript
import { EventEmitter } from 'node:events';
const emitter = new EventEmitter();
emitter.once('log', () => console.log('log once'));

// Returns a new Array with a function `onceWrapper` which has a property
// `listener` which contains the original listener bound above
const listeners = emitter.rawListeners('log');
const logFnWrapper = listeners[0];

// Logs "log once" to the console and does not unbind the `once` event
logFnWrapper.listener();

// Logs "log once" to the console and removes the listener
logFnWrapper();

emitter.on('log', () => console.log('log persistently'));
// Will return a new Array with a single function bound by `.on()` above
const newListeners = emitter.rawListeners('log');

// Logs "log persistently" twice
newListeners[0]();
emitter.emit('log');
```

--------------------------------

### listeners() example

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Shows how to use EventEmitter.listeners() to get a copy of the listeners for an event. Outputs: [ [Function] ].

```javascript
server.on('connection', (stream) => {
  console.log('someone connected!');
});
console.log(util.inspect(server.listeners('connection')));
// Prints: [ [Function] ]
```

--------------------------------

### Draw on canvas with drawOnCanvas

Source: https://www.sigmajs.org/how-to/technical/export-image/

Use drawOnCanvas to get a raw HTMLCanvasElement for custom processing like adding a watermark or feeding to another library. The example shows getting the 2D context, drawing text, and converting to a blob.

```typescript
import { drawOnCanvas } from "@sigma/export-image";

const canvas = await drawOnCanvas(renderer, {
  backgroundColor: "#ffffff",
  width: 1920,
  height: 1080,
});

// Use the canvas for further processing:
const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.fillText("My Graph", 20, 30);

// Convert to blob manually:
canvas.toBlob((blob) => {
  // Upload, display, etc...
}, "image/png");
```

--------------------------------

### new Program<Uniform, N, E, G>(gl, _pickingBuffer, renderer)

Source: https://www.sigmajs.org/api/sigma/rendering/classes/program/

Creates a new Program instance. The constructor initializes a rendering program with the given WebGL2 rendering context, picking buffer, and renderer.

```APIDOC
## new Program<Uniform, N, E, G>(gl, _pickingBuffer, renderer)

### Description
Creates a new Program instance. The constructor initializes a rendering program with the given WebGL2 rendering context, picking buffer, and renderer.

### Constructor
`new Program<Uniform, N, E, G>(gl, _pickingBuffer, renderer): Program<Uniform, N, E, G>`

### Parameters
- **gl** (`WebGL2RenderingContext`) - Required - The WebGL2 rendering context.
- **_pickingBuffer** (`WebGLFramebuffer | null`) - Required - The picking framebuffer or null.
- **renderer** (`Sigma<N, E, G>`) - Required - The Sigma renderer instance.

### Returns
`Program<Uniform, N, E, G>` - A new Program instance.

### Type Parameters
- **Uniform** extends `string` = `string`
- **N** extends `Attributes` = `Attributes`
- **E** extends `Attributes` = `Attributes`
- **G** extends `Attributes` = `Attributes`

### Source
Defined in: [packages/sigma/src/rendering/program.ts:144](https://github.com/jacomyal/sigma.js/blob/1904b48c103d960962f2d401f44839eaa9ede0ac/packages/sigma/src/rendering/program.ts#L144)
```

--------------------------------

### MapLibre custom style with bindMaplibreLayer

Source: https://www.sigmajs.org/how-to/layers/map-layers/

Customize the MapLibre map layer by passing a custom `style` object through `mapOptions`. The example defines a StyleSpecification with custom sources and layers, then binds the layer with the same graph setup as the Leaflet example.

```TypeScript
import bindMaplibreLayer from "@sigma/layer-maplibre";
import Graph from "graphology";
import { nodeExtent } from "graphology-metrics/graph";
import type { Attributes, SerializedGraph } from "graphology-types";
import type { StyleSpecification } from "maplibre-gl";
import Sigma, { DEFAULT_STYLES } from "sigma";

const mapStyle: StyleSpecification = {
  version: 8,
  name: "Custom styles",
  sources: {
    demotiles: {
      type: "vector",
      url: "https://demotiles.maplibre.org/tiles/tiles.json",
    },
  },
  glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
  layers: [
    {
      id: "background",
      type: "background",
      paint: { "background-color": "#f5f5f5" },
    },
    {
      id: "countries-fill",
      type: "fill",
      source: "demotiles",
      "source-layer": "countries",
      paint: { "fill-color": "#ffffff" },
    },
    {
      id: "countries-boundary",
      type: "line",
      source: "demotiles",
      "source-layer": "countries",
      paint: { "line-color": "#dee2e6", "line-width": 1 },
    },
    {
      id: "geolines",
      type: "line",
      source: "demotiles",
      "source-layer": "geolines",
      paint: { "line-color": "#dee2e6", "line-width": 1.5 },
    },
    {
      id: "country-labels",
      type: "symbol",
      source: "demotiles",
      "source-layer": "centroids",
      layout: {
        "text-field": "{NAME}",
        "text-font": ["Open Sans Semibold"],
        "text-size": 12,
      },
      paint: {
        "text-color": "#adb5bd",
        "text-halo-color": "#ffffff",
        "text-halo-width": 1.5,
      },
    },
  ],
};

const container = document.getElementById("sigma-container") as HTMLElement;

const res = await fetch("/data/airports.json");
const data = await res.json();
const graph = Graph.from(data as SerializedGraph);
graph.updateEachNodeAttributes((node, attributes) => ({
  ...attributes,
  label: attributes.fullName,
  degree: graph.degree(node),
  x: 0,
  y: 0,
}));

const [minDegree, maxDegree] = nodeExtent(graph, "degree");
const renderer = new Sigma(graph, container, {
  settings: {
    labelRenderedSizeThreshold: 20,
    minEdgeThickness: 1,
  },
  styles: {
    edges: [DEFAULT_STYLES.edges, { color: "#ffaeaf", size: 0.0001 }],
    nodes: [
      DEFAULT_STYLES.nodes,
      {
        color: "#e22352",
        size: {
          attribute: "degree",
          min: 0.001,
          max: 0.005,
          minValue: minDegree,
          maxValue: maxDegree,
        },
      },
    ],
  },
});

bindMaplibreLayer(renderer, {
  mapOptions: { style: mapStyle },
  getNodeLatLng: (attrs: Attributes) => ({ lat: attrs.latitude, lng: attrs.longitude }),
});
```

--------------------------------

### Pass settings when creating a Sigma instance

Source: https://www.sigmajs.org/reference/settings/

Shows how to pass settings in the constructor options when creating a Sigma instance. The example enables edge label rendering, edge events, and hides edges on move.

```javascript
const renderer = new Sigma(graph, container, {
  settings: {
    renderEdgeLabels: true,
    enableEdgeEvents: true,
    hideEdgesOnMove: true,
  },
});
```

--------------------------------

### GLSL path position function example

Source: https://www.sigmajs.org/api/sigma/rendering/interfaces/edgepath/

Example GLSL function defining a custom path position. The function must be named path_{name}_position and return a vec2. This example uses a simple ease-in curve.

```glsl
vec2 path_myPath_position(float t, vec2 source, vec2 target) {
  return mix(source, target, t * t); // Ease-in curve
}
```

--------------------------------

### createBackdropProgram<N, E, G>(gl, pickingBuffer, renderer, options)

Source: https://www.sigmajs.org/api/sigma/rendering/functions/createbackdropprogram/

Creates a BackdropProgram instance for rendering node backdrops. It takes a WebGL2 rendering context, a picking framebuffer, the Sigma renderer, and options, and returns a BackdropProgram.

```APIDOC
## createBackdropProgram<N, E, G>(gl, pickingBuffer, renderer, options)

### Description
Creates a BackdropProgram instance for rendering node backdrops in Sigma.js. This function is a factory that initializes a backdrop program with the given WebGL context, picking buffer, renderer, and options.

### Method
Function call

### Signature
`createBackdropProgram<N, E, G>(gl, pickingBuffer, renderer, options): BackdropProgram<N, E, G>`

### Type Parameters
- **N** (extends Attributes = Attributes) - Node attributes type.
- **E** (extends Attributes = Attributes) - Edge attributes type.
- **G** (extends Attributes = Attributes) - Graph attributes type.

### Parameters
- **gl** (`WebGL2RenderingContext`) - The WebGL2 rendering context.
- **pickingBuffer** (`WebGLFramebuffer` | `null`) - The picking framebuffer, or null if not used.
- **renderer** (`Sigma<N, E, G>`) - The Sigma renderer instance.
- **options** (`CreateBackdropProgramOptions`) - Options for creating the backdrop program.

### Returns
- **BackdropProgram<N, E, G>** - The created backdrop program instance.

### Defined in
[packages/sigma/src/rendering/nodes/backdrops/factory.ts:57](https://github.com/jacomyal/sigma.js/blob/1904b48c103d960962f2d401f44839eaa9ede0ac/packages/sigma/src/rendering/nodes/backdrops/factory.ts#L57)
```

--------------------------------

### once() - Add one-time event listener example

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Adds a one-time listener that is removed after being invoked. The example shows listening for the 'connection' event once.

```javascript
server.once('connection', (stream) => {
  console.log('Ah, we have our first user!');
});
```

--------------------------------

### variables example

Source: https://www.sigmajs.org/reference/primitives-schema/

Example of defining custom typed attributes for nodes, such as borderSize and borderColor. These become available as style properties and can be consumed by layers.

```javascript
variables: {
  borderSize: { type: "number", default: 0 },
  borderColor: { type: "color", default: "transparent" },
}
```

--------------------------------

### Create a piechart layer with fixed colors and use with createNodeProgram

Source: https://www.sigmajs.org/api/sigma/node-piechart/functions/layerpiechart/

This example creates a piechart layer with three slices, each with a color and a value attribute. It then shows how to use the layer with createNodeProgram, combining it with an SDF circle shape.

```javascript
// Simple piechart with fixed colors
const piechartLayer = layerPiechart({
  slices: [
    { color: "#ff0000", value: { attribute: "value1" } },
    { color: "#00ff00", value: { attribute: "value2" } },
    { color: "#0000ff", value: { attribute: "value3" } },
  ],
});

// Use with createNodeProgram
const program = createNodeProgram({
  shapes: [sdfCircle()],
  layers: [piechartLayer],
});
```

--------------------------------

### getSettings()

Source: https://www.sigmajs.org/api/sigma/classes/sigma/

Method returning a copy of the settings collection.

```APIDOC
## getSettings()

### Description
Method returning a copy of the settings collection.

### Method
getSettings

### Returns
Settings - A copy of the settings collection.
```

--------------------------------

### Camera control example with Sigma and graphology

Source: https://www.sigmajs.org/how-to/interactivity/camera-viewport/

Loads a GEXF graph, creates a Sigma renderer with camera controls, and registers UI controls for panning, zooming, rotation, and camera boundaries. The settings are bound to the control values.

```typescript
import Graph from "graphology";
import { parse } from "graphology-gexf/browser";
import Sigma from "sigma";

import { registerControls } from "../_controls";

const res = await fetch("/data/arctic.gexf");
const gexf = await res.text();
const graph = parse(Graph, gexf);

const container = document.getElementById("sigma-container") as HTMLElement;

const { enablePanning, enableZooming, enableRotation, boundCamera, minRatio, maxRatio, tolerance } = registerControls(
  {
    enablePanning: { type: "boolean", label: "Enable panning", default: true },
    enableZooming: { type: "boolean", label: "Enable zooming", default: true },
    enableRotation: { type: "boolean", label: "Enable rotation", default: true },
    boundCamera: { type: "boolean", label: "Bound camera", default: true },
    minRatio: { type: "number", label: "Min zoom ratio", default: 0.08, min: 0.001, max: 1, step: 0.001 },
    maxRatio: { type: "number", label: "Max zoom ratio", default: 3, min: 0.1, max: 10, step: 0.1 },
    tolerance: { type: "number", label: "Pan tolerance (px)", default: 500, min: 0, max: 2000, step: 50 },
  },
);

const renderer = new Sigma(graph, container, {
  settings: {
    enableCameraPanning: enablePanning,
    enableCameraZooming: enableZooming,
    enableCameraRotation: enableRotation,
    minCameraRatio: enableZooming ? minRatio : null,
    maxCameraRatio: enableZooming ? maxRatio : null,
    cameraPanBoundaries: boundCamera ? { tolerance } : null,
  },
});
```

--------------------------------

### labelAttachments example

Source: https://www.sigmajs.org/reference/primitives-schema/

Example of defining a label attachment renderer named 'hoverInfo' that returns an SVG content type. The renderer receives a LabelAttachmentContext and returns a LabelAttachmentContent object or null.

```javascript
labelAttachments: {
  hoverInfo: (ctx: LabelAttachmentContext) => ({
    type: "svg",
    html: "<svg>...</svg>",
  }),
}
```

--------------------------------

### new LabelProgram(gl, _pickingBuffer, renderer)

Source: https://www.sigmajs.org/api/sigma/rendering/classes/labelprogram/

Constructor for LabelProgram. Initializes a new label program instance with the given WebGL2 rendering context, picking buffer, and Sigma renderer.

```APIDOC
## Constructor

### new LabelProgram<Uniform, N, E, G, DataType>(gl, _pickingBuffer, renderer)

### Description
Creates a new LabelProgram instance. This constructor is inherited from the Program class.

### Parameters
- **gl** (`WebGL2RenderingContext`) - The WebGL2 rendering context.
- **_pickingBuffer** (`WebGLFramebuffer | null`) - The picking framebuffer, or null if not used.
- **renderer** (`Sigma<N, E, G>`) - The Sigma renderer instance.

### Returns
`LabelProgram<Uniform, N, E, G, DataType>` - A new LabelProgram instance.
```

--------------------------------

### Animate camera to center and zoom

Source: https://www.sigmajs.org/reference/camera-api/

Shows how to animate the camera to a specific state. The first example animates to the center with a ratio of 0.5. The second example animates with custom duration and easing options.

```javascript
await camera.animate({ x: 0.5, y: 0.5, ratio: 0.5 });
```

```javascript
// With options
await camera.animate({ ratio: 0.2 }, { duration: 1000, easing: "cubicInOut" });
```

--------------------------------

### Configure Node Primitives with Shapes, Layers, and Variables

Source: https://www.sigmajs.org/concepts/styles-and-primitives/

Shows how to set up node primitives in the Sigma constructor, including geometric shapes (sdfCircle, sdfSquare, sdfTriangle, sdfDiamond), visual layers (layerFill, layerBorder, layerImage), and custom typed variables (borderSize, borderColor). Layers composite from back to front, and layers without data automatically disable themselves.

```javascript
import { layerFill, sdfCircle, sdfDiamond, sdfSquare, sdfTriangle } from "sigma/rendering";

new Sigma(graph, container, {
  // ...
  primitives: {
    nodes: {
      // Geometric outlines available for nodes
      shapes: [sdfCircle(), sdfSquare(), sdfTriangle(), sdfDiamond()],

      // Visual layers composited from back to front
      layers: [
        layerFill(),
        layerBorder({ borders: [{ size: 0.1, color: "#333" }] }),
        layerImage({ imageAttribute: "image" }),
      ],

      // Custom typed attributes that layers can consume
      variables: {
        borderSize: { type: "number", default: 0 },
        borderColor: { type: "color", default: "transparent" },
      },
    },
  },
  // ...
});
```

--------------------------------

### createNodeProgram<N, E, G>(gl, pickingBuffer, renderer, options, antialias)

Source: https://www.sigmajs.org/api/sigma/rendering/functions/createnodeprogram/

Builds a node program suite from SDF shape(s) and fragment layers. Returns a NodeProgramBundle containing the node program, label program, backdrop program, label-background program, and shape registry metadata.

```APIDOC
## createNodeProgram<N, E, G>(gl, pickingBuffer, renderer, options, antialias)

### Description
Builds a node program suite from SDF shape(s) and fragment layers. The suite is a flat bundle of instances: the node program plus the matching label, backdrop, and label-background programs, alongside the shape registry metadata sigma needs for multi-shape programs.

Supports two modes:
- Single shape: a program that renders one shape type
- Multi-shape: a program that can render different shapes per node

### Method
Function call

### Signature
`createNodeProgram<N, E, G>(gl, pickingBuffer, renderer, options, antialias): NodeProgramBundle<N, E, G>`

### Type Parameters
- **N** (Attributes) - Default: `Attributes` - Node attributes type
- **E** (Attributes) - Default: `Attributes` - Edge attributes type
- **G** (Attributes) - Default: `Attributes` - Graph attributes type

### Parameters
- **gl** (`WebGL2RenderingContext`) - Required - The WebGL2 rendering context
- **pickingBuffer** (`WebGLFramebuffer` | `null`) - Required - The picking framebuffer or null
- **renderer** (`Sigma<N, E, G>`) - Required - The Sigma instance
- **options** (`NodeProgramOptions`) - Required - Options for the node program
- **antialias** (`boolean`) - Required - Whether antialiasing is enabled

### Returns
`NodeProgramBundle<N, E, G>` - An object containing:
- `nodeProgram` - The node program
- `labelProgram` - The label program
- `backdropProgram` - The backdrop program
- `labelBackgroundProgram` - The label-background program
- `shapeSlug` - The shape slug
- `shapeNameToIndex` - Mapping from shape name to index
- `shapeGlobalIds` - Global IDs for shapes
```

--------------------------------

### Rectangular image nodes example

Source: https://www.sigmajs.org/how-to/nodes/shapes/

Full example that draws images with their real proportions using sdfRectangle, layerImage, and custom node attributes. Includes controls for objectFit and uses curved edges with arrows.

```javascript
import { layerImage } from "@sigma/node-image";
import Sigma, { DEFAULT_STYLES } from "sigma";
import { extremityArrow, layerFill, pathCurved, sdfRectangle } from "sigma/rendering";

import { registerControls } from "../_controls";
import { getSmallGraph } from "../_data/small-graph";

const container = document.getElementById("sigma-container") as HTMLElement;

const { objectFit } = registerControls({
  objectFit: {
    type: "select",
    label: "Object fit",
    default: "contain",
    options: [
      { label: "Contain", value: "contain" },
      { label: "Cover", value: "cover" },
    ],
  },
});

const IMAGE_SIZES: Record<string, { id: number; width: number; height: number }> = {
  a: { id: 10, width: 600, height: 400 },
  b: { id: 15, width: 400, height: 600 },
  c: { id: 28, width: 600, height: 600 },
  d: { id: 29, width: 800, height: 300 },
  e: { id: 37, width: 300, height: 800 },
  f: { id: 42, width: 500, height: 350 },
};

const graph = getSmallGraph();

graph.forEachNode((node) => {
  const { id, width, height } = IMAGE_SIZES[node];
  graph.mergeNodeAttributes(node, {
    image: `https://picsum.photos/id/${id}/${width}/${height}`,
    aspectRatio: width / height,
    label: `${width} x ${height}`,
  });
});

new Sigma(graph, container, {
  primitives: {
    nodes: {
      shapes: [sdfRectangle({ cornerRadius: 0.2 })],
      variables: {
        image: { type: "string", default: "" },
      },
      layers: [layerFill({ color: "#eee" }), layerImage({ textureManagerOptions: { objectFit: objectFit as "contain" | "cover" } })],
    },
    edges: {
      paths: [pathCurved({ curvature: 0.5 })],
      extremities: [extremityArrow({ lengthRatio: 4, widthRatio: 4 })],
    },
  },
  styles: {
    nodes: [
      DEFAULT_STYLES.nodes,
      {
        backdropArea: "label",
        labelPosition: "below",
        size: 40,
      },
    ],
    edges: [
      DEFAULT_STYLES.edges,
      {
        path: "curved",
        head: "arrow",
        size: 8,
      },
    ],
  },
  settings: {
    autoRescaleContent: "nodes",
  },
});
```

--------------------------------

### createEdgeLabelBackgroundProgram<N, E, G>(gl, pickingBuffer, renderer, options)

Source: https://www.sigmajs.org/api/sigma/rendering/functions/createedgelabelbackgroundprogram/

Creates an EdgeLabelBackgroundProgram instance for rendering edge label backgrounds. It takes a WebGL2 rendering context, a picking buffer, a Sigma renderer, and options, and returns the program.

```APIDOC
## createEdgeLabelBackgroundProgram<N, E, G>(gl, pickingBuffer, renderer, options)

### Description
Creates an EdgeLabelBackgroundProgram instance for rendering edge label backgrounds. It takes a WebGL2 rendering context, a picking buffer, a Sigma renderer, and options, and returns the program.

### Method
Function

### Signature
createEdgeLabelBackgroundProgram<N, E, G>(gl, pickingBuffer, renderer, options): EdgeLabelBackgroundProgram<N, E, G>

### Type Parameters
- **N** (Attributes) - Default: Attributes - Node attributes type
- **E** (Attributes) - Default: Attributes - Edge attributes type
- **G** (Attributes) - Default: Attributes - Graph attributes type

### Parameters
- **gl** (WebGL2RenderingContext) - Required - The WebGL2 rendering context
- **pickingBuffer** (WebGLFramebuffer | null) - Required - The picking framebuffer or null
- **renderer** (Sigma<N, E, G>) - Required - The Sigma renderer instance
- **options** (CreateEdgeLabelBackgroundProgramOptions) - Required - Options for creating the program

### Returns
- **EdgeLabelBackgroundProgram<N, E, G>** - The created edge label background program
```

--------------------------------

### getTextures()

Source: https://www.sigmajs.org/api/sigma/classes/sdfatlasmanager/

Gets all atlas textures.

```APIDOC
## getTextures()

### Description
Gets all atlas textures.

### Method
`getTextures`

### Returns
`ImageData`[]
```

--------------------------------

### getSetting(key)

Source: https://www.sigmajs.org/reference/sigma-api/

Returns the value of a single setting.

```APIDOC
## getSetting(key)

### Description
Returns the value of a single setting.

### Method
GET

### Endpoint
`getSetting(key)`

### Parameters
- **key** (string) - Required - The key of the setting to retrieve.

### Returns
- **Settings[K]** - The value of the setting.

```

--------------------------------

### new TouchCaptor(container, renderer)

Source: https://www.sigmajs.org/api/sigma/classes/touchcaptor/

Creates a new TouchCaptor instance. The constructor takes an HTML container element and a Sigma renderer instance.

```APIDOC
## new TouchCaptor(container, renderer)

### Description
Creates a new TouchCaptor instance to handle touch interactions for a Sigma renderer.

### Constructor
`new TouchCaptor<N, E, G>(container, renderer): TouchCaptor<N, E, G>`

### Parameters
- **container** (`HTMLElement`) - Required - The HTML element that serves as the container for the captor.
- **renderer** (`Sigma<N, E, G>`) - Required - The Sigma renderer instance.

### Returns
`TouchCaptor<N, E, G>` - A new TouchCaptor instance.

### Type Parameters
- `N` extends `Attributes` = `Attributes`
- `E` extends `Attributes` = `Attributes`
- `G` extends `Attributes` = `Attributes`

### Overrides
`Captor<TouchCaptorEvents, N, E, G>.constructor`
```

--------------------------------

### getTexture()

Source: https://www.sigmajs.org/api/sigma/rendering/classes/nodedatatexture/

Gets the WebGL texture object.

```APIDOC
## getTexture()

### Description
Gets the WebGL texture object.

### Method
`getTexture`

### Returns
`WebGLTexture` | `null`

### Inherited from
[`DataTexture`](https://www.sigmajs.org/api/sigma/rendering/classes/datatexture/).[`getTexture`](https://www.sigmajs.org/api/sigma/rendering/classes/datatexture/#gettexture)
```

--------------------------------

### camera.on("animationStart")

Source: https://www.sigmajs.org/reference/camera-api/

Event emitted when a camera animation starts.

```APIDOC
## camera.on("animationStart")

### Description
Event emitted when a camera animation starts.

### Event Name
`animationStart`

### Callback Parameters
- **from** (CameraState) - The starting state.
- **to** (CameraState) - The target state.

### Example
```js
camera.on("animationStart", ({ from, to }) => {
  // An animation started
});
```
```

--------------------------------

### getCount()

Source: https://www.sigmajs.org/api/sigma/rendering/classes/nodedatatexture/

Gets the number of allocated items.

```APIDOC
## getCount()

### Description
Gets the number of allocated items.

### Method
getCount

### Parameters
None

### Returns
`number` - The number of allocated items.

### Inherited from
[`DataTexture`](https://www.sigmajs.org/api/sigma/rendering/classes/datatexture/).[`getCount`](https://www.sigmajs.org/api/sigma/rendering/classes/datatexture/#getcount)
```

--------------------------------

### getTexture()

Source: https://www.sigmajs.org/api/sigma/rendering/classes/datatexture/

Gets the WebGL texture object.

```APIDOC
## Method: getTexture()

### Description
Gets the WebGL texture object.

### Parameters
None

### Returns
`WebGLTexture` | `null` - The WebGL texture object, or null if not available.
```

--------------------------------

### static from(state)

Source: https://www.sigmajs.org/api/sigma/classes/camera/

Creates a Camera object with a given state.

```APIDOC
## static from(state)

### Description
Static method used to create a Camera object with a given state.

### Method
from (static)

### Signature
`static from(state: CameraState): Camera`

### Parameters
- **state** (CameraState) - Required - The initial camera state.

### Returns
`Camera` - A new Camera instance.
```

--------------------------------

### getCount()

Source: https://www.sigmajs.org/api/sigma/rendering/classes/datatexture/

Gets the number of allocated items.

```APIDOC
## Method: getCount()

### Description
Gets the number of allocated items.

### Parameters
None

### Returns
`number` - The number of allocated items.
```
Tokens:
Raw