### Start Local Development Server
Source: https://github.com/jacomyal/sigma.js/wiki/Home
Start a local HTTP server using npm to view Sigma.js examples. Access the examples at http://localhost:8000/examples.
```bash
$ cd sigma.js
$ npm start
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/README.md
Installs the necessary packages for the project.
```bash
$ npm install
```
--------------------------------
### Run Storybook Locally
Source: https://github.com/jacomyal/sigma.js/blob/main/README.md
Clone the sigma.js repository, install dependencies, and start the Storybook environment for local development. This allows for live reloading when making changes.
```bash
git clone git@github.com:jacomyal/sigma.js.git
cd sigma.js
npm install
npm run start
```
--------------------------------
### Start Local Development Server
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/README.md
Starts a local development server for live previewing changes. The homepage may not be available in this mode.
```bash
$ npm start
```
--------------------------------
### Install Dependencies
Source: https://github.com/jacomyal/sigma.js/blob/main/CONTRIBUTING.md
Install the project's dependencies using npm.
```bash
npm install
```
--------------------------------
### Clone Repository and Install Dependencies
Source: https://github.com/jacomyal/sigma.js/wiki/Home
Clone the Sigma.js repository and install necessary development dependencies using npm. Ensure Node.js is installed.
```bash
$ git clone https://github.com/jacomyal/sigma.js.git
$ cd sigma.js
$ npm install
```
--------------------------------
### Install Sigma.js with npm
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/static/homepage.html
Install Sigma.js in your existing project using npm. This is the recommended way to add Sigma.js to your project.
```bash
npm install graphology sigma
```
--------------------------------
### Basic Sigma.js Initialization and Graph Data
Source: https://github.com/jacomyal/sigma.js/wiki/Home
A basic HTML example demonstrating how to initialize Sigma.js, add nodes and edges to the graph, and refresh the visualization.
```html
Basic sigma.js example
```
--------------------------------
### Basic Sigma.js Graph Rendering Example
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/quickstart.md
A complete HTML example demonstrating how to create a simple graph with two nodes and an edge using graphology and render it with sigma.js. This example uses CDNs for the libraries.
```html
Quick Sigma.js Example
```
--------------------------------
### Install Sigma.js and Graphology
Source: https://github.com/jacomyal/sigma.js/blob/main/README.md
Add sigma and graphology to your project using npm. This is the first step to integrate sigma into your project.
```bash
npm install sigma graphology
```
--------------------------------
### Basic Node Square Rendering
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/node-square/README.md
Demonstrates how to import and use the NodeSquareProgram to render square nodes in sigma.js. Ensure you have sigma.js and the node-square package installed.
```typescript
import { NodeSquareProgram } from "@sigma/node-square";
const graph = new Graph();
graph.addNode("some-node", {
x: 0,
y: 0,
size: 10,
type: "square",
label: "Some node",
color: "blue",
});
const sigma = new Sigma(graph, container, {
nodeProgramClasses: {
square: NodeSquareProgram,
},
});
```
--------------------------------
### Install Sigma.js and Graphology via yarn
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/quickstart.md
Use yarn to add sigma.js and graphology to your project dependencies.
```bash
yarn add sigma graphology
```
--------------------------------
### Create Sigma.js Instance with Graph Data
Source: https://github.com/jacomyal/sigma.js/blob/main/README.md
Create a new Sigma instance by providing a graph object and a target HTML element. This example demonstrates adding nodes and edges to the graph.
```javascript
const graph = new Graph();
graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
graph.addEdge("1", "2", { size: 5, color: "purple" });
const sigmaInstance = new Sigma(graph, document.getElementById("container"));
```
--------------------------------
### Install Sigma.js and Graphology via CDN
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/quickstart.md
Include these script tags in your HTML's head section to quickly integrate sigma.js and graphology using Content Delivery Networks. Replace [VERSION] with the specific version you need.
```html
```
--------------------------------
### Camera Methods
Source: https://github.com/jacomyal/sigma.js/wiki/Camera-API
Details the available methods for camera objects, including updating position, applying views, transforming coordinates, and getting rendering matrices or screen rectangles.
```APIDOC
## Camera Methods
Camera objects expose the following methods:
- **goTo( coordinates )**
- Update the camera's position immediately. The coordinates argument expects an object with the following properties:
- `x`: The center x position of the camera in graph space
- `y`: The center y position of the camera in graph space
- `ratio`: The zoom ratio of the graph and its items
- `angle`: The rotation angle of the camera
- Returns the camera instance
- **applyView( read, write )**
- Applies a view to the attached graph by reading all of the coordinates prefixed with the string given by `read` and transforming them to the coordinates given by `write`.
- It returns the camera instance
- **graphPosition( x, y )**
- Takes coordinates in camera space and returns them in graph space as an object `{x, y}`
- **cameraPosition( x, y )**
- Takes coordinates in graph space and returns them in camera space as an object `{x, y}`
- **getMatrix()**
- Gets the WebGL-compatible matrix for the graph, useful for applying rendering transformations
- **getRectangle( width, height )**
- Takes the screen width and height and returns a rectangle (in the form of an object `{x1, x2, y1, y2, height}`) that represents the camera on screen.
```
--------------------------------
### Add Custom Graph Index
Source: https://github.com/jacomyal/sigma.js/wiki/Graph-API
Creates a custom index for graph data, allowing for efficient retrieval and manipulation. This example demonstrates tracking the node count.
```javascript
sigma.classes.graph.addIndex('nodesCount', {
constructor: function() {
this.nodesCount = 0;
},
addNode: function() {
this.nodesCount++;
},
dropNode: function() {
this.nodesCount--;
}
});
sigma.classes.graph.addMethod('getNodesCount', function() {
return this.nodesCount;
});
var myGraph = new sigma.classes.graph();
console.log(myGraph.getNodesCount()); // outputs 0
myGraph.addNode({ id: '1' }).addNode({ id: '2' });
console.log(myGraph.getNodesCount()); // outputs 2
```
--------------------------------
### Bind Maplibre Layer to Sigma.js Graph
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/layer-maplibre/README.md
Import and bind the Maplibre layer to your Sigma.js instance. Ensure Maplibre is installed and its CSS is loaded.
```typescript
import bindMaplibreLayer from "@sigma/layer-maplibre";
const graph = new Graph();
graph.addNode("nantes", { x: 0, y: 0, lat: 47.2308, lng: 1.5566, size: 10, label: "Nantes" });
graph.addNode("paris", { x: 0, y: 0, lat: 48.8567, lng: 2.351, size: 10, label: "Paris" });
graph.addEdge("nantes", "paris");
const sigma = new Sigma(graph, container);
bindMaplibreLayer(sigma);
```
--------------------------------
### Custom Node Rendering with Borders
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/customization.md
Implement custom rendering for nodes to include features like borders, going beyond standard Sigma.js node styles. This is demonstrated in the custom-rendering example.
```typescript
import { Sigma } from "@sigma/core";
import { drawNodeBorders } from "@sigma/demo/src/canvas-utils"; // Assuming this utility exists
const container = document.getElementById("graph-container") as HTMLElement;
const sigma = new Sigma(container);
// Registering a custom node program with a drawNode method
sigma.addNodeProgram("customNode", {
// ... other program configurations ...
drawNode: drawNodeBorders // Use the custom drawing function
});
sigma.refresh();
```
--------------------------------
### Basic Leaflet Layer Integration
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/layer-leaflet/README.md
Import and bind the Leaflet layer to your Sigma instance. Ensure Leaflet is installed and its CSS is loaded. Nodes should include 'lat' and 'lng' properties for map positioning.
```typescript
import bindLeafletLayer from "@sigma/layer-leaflet";
const graph = new Graph();
graph.addNode("nantes", { x: 0, y: 0, lat: 47.2308, lng: 1.5566, size: 10, label: "Nantes" });
graph.addNode("paris", { x: 0, y: 0, lat: 48.8567, lng: 2.351, size: 10, label: "Paris" });
graph.addEdge("nantes", "paris");
const sigma = new Sigma(graph, container);
bindLeafletLayer(sigma);
```
--------------------------------
### Instantiate Configurable Settings
Source: https://github.com/jacomyal/sigma.js/wiki/Settings:-How-Settings-Work-in-Sigma
Create a new configurable settings object with initial parameters.
```javascript
var settings = new sigma.classes.configurable({
param1: 'abc',
param2: 42
});
```
--------------------------------
### Adding a Camera
Source: https://github.com/jacomyal/sigma.js/wiki/Camera-API
Demonstrates how to add a camera to a Sigma instance with a specified ID and how to assign a renderer to use that camera.
```APIDOC
## Adding a Camera
To add a camera to the graph, call Sigma's `addCamera` method, providing a unique ID for the camera (or omitting it and allowing Sigma to generate one for you):
```javascript
sigInst.addCamera('cam1');
```
Then, to assign a specific renderer to it, add the ID to the configuration object for the renderer:
```javascript
s.addRenderer({
container: document.getElementById("graphContainer"),
camera: 'cam1',
/* rest of settings */
});
```
```
--------------------------------
### Instantiate Configurable with Multiple Objects
Source: https://github.com/jacomyal/sigma.js/wiki/Settings:-How-Settings-Work-in-Sigma
Initialize a configurable settings object with multiple configuration objects, allowing for layered settings.
```javascript
var multiSettings = new sigma.classes.configurable(
{
param1: 'abc',
param2: 42
},
{
param2: 123,
param3: 456,
}
);
console.log(multiSettings('param1')); // outputs 'abc'
console.log(multiSettings('param2')); // outputs 123
console.log(multiSettings('param3')); // outputs 456
console.log(multiSettings('param4')); // outputs undefined
```
--------------------------------
### Get WebGL Matrix for Transformations
Source: https://github.com/jacomyal/sigma.js/wiki/Camera-API
Retrieves the WebGL-compatible transformation matrix for the graph. This matrix is essential for applying rendering transformations in WebGL contexts.
```javascript
camera.getMatrix();
```
--------------------------------
### Create and Use Node Piechart Program
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/node-piechart/README.md
Demonstrates how to import and use the `createNodePiechartProgram` factory to render nodes as pie charts in a sigma.js application. This includes adding a node with pie chart attributes and configuring the sigma instance to use the custom node program.
```typescript
import { createNodePiechartProgram } from "@sigma/node-piechart";
const graph = new Graph();
graph.addNode("some-node", {
x: 0,
y: 0,
size: 10,
type: "piechart",
label: "Some node",
positive: 10,
neutral: 17,
negative: 14,
});
const NodePiechartProgram = createNodePiechartProgram({
defaultColor: "#BCB7C4",
slices: [
{ color: { value: "#F05454" }, value: { attribute: "negative" } },
{ color: { value: "#7798FA" }, value: { attribute: "neutral" } },
{ color: { value: "#6DDB55" }, value: { attribute: "positive" } },
],
});
const sigma = new Sigma(graph, container, {
nodeProgramClasses: {
piechart: NodePiechartProgram,
},
});
```
--------------------------------
### Basic Node Image Rendering with Sigma.js
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/node-image/README.md
Demonstrates how to integrate the NodeImageProgram into a Sigma.js instance to render nodes with images. Ensure the NodeImageProgram is registered in nodeProgramClasses.
```typescript
import { NodeImageProgram } from "@sigma/node-image";
const graph = new Graph();
graph.addNode("cat", {
x: 0,
y: 0,
size: 10,
type: "image",
label: "Cat",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sheba1.JPG/800px-Sheba1.JPG",
});
const sigma = new Sigma(graph, container, {
nodeProgramClasses: {
image: NodeImageProgram,
},
});
```
--------------------------------
### Initialize Sigma with Default Renderer
Source: https://github.com/jacomyal/sigma.js/wiki/Public-API
Demonstrates four equivalent ways to initialize Sigma with its default renderer, specifying the DOM container. These methods simplify common use cases where only the container is needed.
```javascript
var s1 = new sigma('my-container-id');
```
```javascript
var s2 = new sigma(document.getElementById('my-container-id'));
```
```javascript
var s3 = new sigma({
container: document.getElementById('my-container-id')
});
```
```javascript
var s4 = new sigma({
renderers: [{
container: document.getElementById('my-container-id')
}]
});
```
--------------------------------
### Run Test Suite
Source: https://github.com/jacomyal/sigma.js/blob/main/CONTRIBUTING.md
Execute the project's test suite locally to ensure your changes do not break existing functionality.
```bash
npm run test
```
--------------------------------
### Get Camera Rectangle on Screen
Source: https://github.com/jacomyal/sigma.js/wiki/Camera-API
Calculates the screen-space rectangle occupied by the camera, including a small margin to keep labels within bounds. Takes the screen width and height as input.
```javascript
camera.getRectangle(screenWidth, screenHeight);
```
--------------------------------
### addCamera
Source: https://github.com/jacomyal/sigma.js/wiki/Public-API
Instantiates and references a new camera. It binds render methods to the camera's events and initializes the camera's quadtree.
```APIDOC
## addCamera
### Description
Instantiates and references a new camera. It binds render methods to the camera's events and initializes the camera's quadtree.
### Method
`sigma.addCamera(?string id)`
### Parameters
- **id** (string) - Optional - The ID for the new camera. An automatic ID will be generated if not specified.
### Returns
- *camera* - The newly created camera instance.
```
--------------------------------
### Create New WebGL Layer with Sigma API
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/layers.md
Demonstrates creating a new WebGL layer using Sigma's API. This approach ensures proper lifecycle management, including destruction when the `kill` method is invoked. It shows the creation of the WebGL context.
```JavaScript
const webglContext = sigma.createWebGLContext("my-custom-webgl", {
afterLayer: sigma.layers.get("sigma-edges")
});
```
--------------------------------
### Build Static Website Content
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/README.md
Generates the static content for the website, typically placed in the 'build' directory for deployment.
```bash
$ npm build
```
--------------------------------
### Sigma Constructor
Source: https://github.com/jacomyal/sigma.js/wiki/Public-API
Initializes a new Sigma instance. It can be called with a configuration object, a DOM element ID, or a DOM element. It supports various configuration options for renderers, graph, and settings.
```APIDOC
## Sigma Constructor
### Description
Initializes a new Sigma instance. It can be called with a configuration object, a DOM element ID, or a DOM element. It supports various configuration options for renderers, graph, and settings.
### Method
`new sigma(config)`
### Parameters
#### Configuration Object Parameters
- **id** (string) - Optional - The ID of the instance. Generated automatically if not specified.
- **renderers** (array) - Optional - An array of objects describing renderers.
- **graph** (object) - Optional - An object containing nodes and edges to initialize the graph.
- **settings** (object) - Optional - An object with settings to override default ones.
#### Simplified Calls
- `new sigma(containerId)`: Initializes with a container ID.
- `new sigma(domElement)`: Initializes with a DOM element.
- `new sigma({ container: domElement })`: Initializes with a configuration object specifying the container.
- `new sigma({ renderers: [{ container: domElement }] })`: Initializes with a configuration object specifying renderers.
```
--------------------------------
### Initialize Sigma without Renderer
Source: https://github.com/jacomyal/sigma.js/wiki/Public-API
Instantiate Sigma without any renderer. Other modules, like renderers, must be added later using public methods such as `addRenderer`.
```javascript
var s = new sigma();
s.addRenderer({
type: 'canvas',
container: 'my-container-id'
});
```
--------------------------------
### Using the Canvas Renderer
Source: https://github.com/jacomyal/sigma.js/wiki/Renderers
Instantiate Sigma.js and specifically use the Canvas renderer. This is useful when you want to ensure Canvas rendering, even if WebGL is supported.
```javascript
var s = new sigma({
renderers: [
{
container: document.getElementById('myContainer'),
type: 'canvas' // sigma.renderers.canvas works as well
}
]
});
```
--------------------------------
### downloadAsImage
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/export-image/README.md
Downloads a snapshot of the Sigma.js instance as an image file. The format and other options can be specified.
```APIDOC
## downloadAsImage
### Description
Downloads a snapshot of the sigma instance as an image file.
### Parameters
This function accepts the same options as `drawOnCanvas`.
### Response
This function does not return a value, but initiates a file download.
```
--------------------------------
### Publish New Versions to NPM
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/publish.md
After versioning packages, use this command to publish the new versions to NPM. It will prompt for validation before publishing.
```bash
lerna publish from-package
```
--------------------------------
### downloadAsPNG
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/export-image/README.md
A convenience function to download a snapshot of the Sigma.js instance as a PNG image file.
```APIDOC
## downloadAsPNG
### Description
Downloads a snapshot of the sigma instance as a PNG image file. This is a sugar function around `downloadAsImage` without needing to specify the format.
### Parameters
This function accepts the same options as `drawOnCanvas`, with the format implicitly set to "png".
### Response
This function does not return a value, but initiates a file download.
```
--------------------------------
### Clone Sigma.js Repository
Source: https://github.com/jacomyal/sigma.js/blob/main/CONTRIBUTING.md
Clone the Sigma.js project to your local computer after forking it on GitHub.
```bash
git clone git@github.com:your-username/sigma.js.git
```
--------------------------------
### Basic Node Border Integration
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/node-border/README.md
Demonstrates how to integrate the `NodeBorderProgram` into a sigma.js application to render nodes with borders. Ensure the `NodeBorderProgram` is added to `nodeProgramClasses` in the Sigma configuration.
```typescript
import { NodeBorderProgram } from "@sigma/node-border";
const graph = new Graph();
graph.addNode("some-node", {
x: 0,
y: 0,
size: 10,
type: "border",
label: "Some node",
color: "blue",
borderColor: "red",
});
const sigma = new Sigma(graph, container, {
nodeProgramClasses: {
border: NodeBorderProgram,
},
});
```
--------------------------------
### Update Camera Position Immediately
Source: https://github.com/jacomyal/sigma.js/wiki/Camera-API
Updates the camera's position, zoom ratio, and angle instantly. The `goTo` method ensures that other components are notified of the camera's movement.
```javascript
camera.goTo({
x: 100,
y: 200,
ratio: 1.5,
angle: 45
});
```
--------------------------------
### Sigma Instance and Camera Events
Source: https://github.com/jacomyal/sigma.js/wiki/Events-API
The Sigma instance itself and its camera object dispatch specific events to signal important state changes.
```APIDOC
## Sigma Instance and Camera Events
### Description
These events are dispatched by the main Sigma instance and its camera to indicate significant lifecycle changes or state updates.
### Sigma Instance Events
| Event Name | Description |
|------------|-----------------------------------|
| `kill` | Fires when the Sigma instance is killed. |
### Sigma Camera Events
| Event Name | Description |
|----------------------|-----------------------------------------------------------------------------|
| `coordinatesUpdated` | Fires when the camera's position is updated, typically via the `goTo()` method. |
### Usage Example
```javascript
sigInst.bind("kill", function () {
console.log("Sigma instance has been killed.");
});
sigInst.camera.bind("coordinatesUpdated", function () {
console.log("Camera coordinates updated. New position:", sigInst.camera.getState());
});
```
**Note:** The `coordinatesUpdated` event does not provide data; you must read the camera's properties directly to get the new values.
```
--------------------------------
### Retrieve Setting Value with Overrides
Source: https://github.com/jacomyal/sigma.js/wiki/Settings:-How-Settings-Work-in-Sigma
Retrieve a setting value, checking provided objects before the main settings. The first found value is returned.
```javascript
console.log(settings({ param2: 'def' }, 'param1')); // outputs 'abc'
console.log(settings({ param2: 'def' }, 'param2')); // outputs 'def'
console.log(settings({ param2: 'def' }, 'param3')); // outputs undefined
```
--------------------------------
### Create Feature Branch
Source: https://github.com/jacomyal/sigma.js/blob/main/CONTRIBUTING.md
Create a new branch for your feature or bugfix, using a descriptive name.
```bash
git checkout -b bugfix-for-issue-1480
```
--------------------------------
### Import Sigma.js and Graphology
Source: https://github.com/jacomyal/sigma.js/blob/main/README.md
Import the necessary modules from sigma and graphology into your JavaScript or TypeScript file. This sets up the foundation for using the library.
```javascript
import Graph from "graphology";
import Sigma from "sigma";
```
--------------------------------
### addRenderer
Source: https://github.com/jacomyal/sigma.js/wiki/Public-API
Instantiates and references a new renderer. The argument can be the constructor or its name (e.g., 'canvas', 'webgl'). Defaults to sigma.renderers.def if no type is specified.
```APIDOC
## addRenderer
### Description
Instantiates and references a new renderer. The argument can be the constructor or its name (e.g., 'canvas', 'webgl'). Defaults to sigma.renderers.def if no type is specified.
### Method
`sigma.addRenderer(?object config)`
### Parameters
- **config** (object) - Optional - Configuration object for the renderer, can include `type` and `container`.
- **type** (string) - Optional - The type of renderer (e.g., 'canvas', 'webgl'). Defaults to `sigma.renderers.def`.
- **container** (string|DOMElement) - Required if not specified in the constructor - The DOM element or its ID where the renderer will be attached.
### Returns
- *renderer* - The newly created renderer instance.
```
--------------------------------
### Create New Canvas Layer with Sigma API
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/layers.md
Illustrates creating a new Canvas HTML element using Sigma's `createCanvas` API. This method ensures the layer is properly managed and removed when the `kill` method is called. It also shows how to retrieve the Canvas context.
```JavaScript
const canvasContext = sigma.createCanvasContext("my-custom-canvas", {
beforeLayer: sigma.layers.get("sigma-nodes")
});
```
--------------------------------
### Basic Edge Curve Rendering in Sigma.js
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/edge-curve/README.md
Demonstrates how to integrate and use the EdgeCurveProgram for rendering curved edges in a sigma.js graph. Ensure the 'curved' edge type is defined in the sigma instance's configuration.
```typescript
import EdgeCurveProgram from "@sigma/edge-curve";
const graph = new Graph();
graph.addNode("a", { x: 0, y: 0, size: 10, label: "Alex" });
graph.addNode("b", { x: 10, y: 10, size: 10, label: "Bill" });
graph.addEdge("a", "b", { type: "curved" });
const sigma = new Sigma(graph, container, {
edgeProgramClasses: {
curved: EdgeCurveProgram,
},
});
```
--------------------------------
### Listening and Emitting Custom Events in JavaScript
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/events.md
Use sigma.on() to listen for custom events and sigma.emit() to trigger them. The payload can be any data object.
```javascript
sigma.on("myCustomEvent", ({ data }) => console.log("data", data));
sigma.emit("myCustomEvent", { data: "something something" });
```
--------------------------------
### Add Upstream Remote
Source: https://github.com/jacomyal/sigma.js/blob/main/CONTRIBUTING.md
Add the official Sigma.js repository as an upstream remote to your local clone.
```bash
git remote add upstream git@github.com:jacomyal/sigma.js.git
```
--------------------------------
### Binding a Custom WebGL Layer
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/layer-webgl/README.md
Demonstrates how to import and bind a custom WebGL layer, specifically `createContoursProgram`, to a sigma.js renderer. Ensure you have a sigma instance and a container element set up.
```typescript
import { createContoursProgram, bindWebGLLayer } from "@sigma/layer-webgl";
const graph = new Graph();
graph.addNode("john", {
x: 0,
y: 0,
size: 4,
label: "John",
});
graph.addNode("jack", {
x: 10,
y: 20,
size: 8,
label: "Jack",
});
graph.addEdge("jack", "john");
const renderer = new Sigma(graph, container);
// Bind a custom layer to the renderer:
bindWebGLLayer("metaballs", renderer, createContoursProgram(graph.nodes()));
```
--------------------------------
### drawOnCanvas
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/export-image/README.md
Creates a temporary sigma instance, renders it with specified options, and draws its layers onto a new HTML canvas. Returns a Promise resolving to the HTMLCanvasElement.
```APIDOC
## drawOnCanvas
### Description
Creates a new temporary sigma instance, renders it with the given options, and draws its layers (or the selected layers) on a new HTML canvas element. It then returns it as a `Promise`.
### Parameters
#### Options
- **layers** (`null | string[]`, default: `null`): Specify the graph layers to render. If `null`, all layers are rendered.
- **width** (`null | number`, default: `null`): Set the width of the output image. If `null`, the canvas will use the sigma container's width.
- **height** (`null | number`, default: `null`): Set the height of the output image. If `null`, the canvas will use the sigma container's height.
- **fileName** (`string`, default: `"graph"`): The name of the file to download.
- **format** (`"png" | "jpeg"`, default: `"png"`): The image format, either PNG or JPEG.
- **sigmaSettings** (`Partial`, default: `{}`): Custom settings for the sigma instance used during rendering.
- **cameraState** (`null | CameraState`, default: `null`): The camera state to use for the rendering. If `null`, the current camera state is used.
- **backgroundColor** (`string`, default: `"transparent"`): The background color of the image.
- **withTempRenderer** (`null | ((tmpRenderer: Sigma) => void) | ((tmpRenderer: Sigma) => Promise)`, default: `null`): A callback function for custom operations using the temporary sigma renderer before rendering the image.
### Response
- **Promise**
```
--------------------------------
### Sigma.js CSS Styling
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/storybook/stories/1-core-features/4-use-reducers/index.html
Basic CSS for Sigma.js to ensure full viewport coverage and positioning of UI elements.
```css
html, body, #storybook-root, #sigma-container {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
#search {
position: absolute;
right: 1em;
top: 1em;
}
```
--------------------------------
### Push Changes to Fork
Source: https://github.com/jacomyal/sigma.js/blob/main/CONTRIBUTING.md
Push your local branch with the new changes to your personal fork on GitHub.
```bash
git push origin bugfix-for-issue-1480
```
--------------------------------
### Publish with Custom Git Remote
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/publish.md
If your Git remote is not named 'origin', use the --git-remote option to specify the correct remote name for both versioning and publishing commands.
```bash
lerna publish from-package --git-remote=
```
--------------------------------
### downloadAsJPEG
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/export-image/README.md
A convenience function to download a snapshot of the Sigma.js instance as a JPEG image file.
```APIDOC
## downloadAsJPEG
### Description
Downloads a snapshot of the sigma instance as a JPEG image file. This is a sugar function around `downloadAsImage` without needing to specify the format.
### Parameters
This function accepts the same options as `drawOnCanvas`, with the format implicitly set to "jpeg".
### Response
This function does not return a value, but initiates a file download.
```
--------------------------------
### Check Packages for New Versions
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/publish.md
Run this command to identify packages that have been edited and require a new version. Lerna will prompt you to specify the new version number for each.
```bash
lerna version
```
--------------------------------
### Retrieve Setting Value
Source: https://github.com/jacomyal/sigma.js/wiki/Settings:-How-Settings-Work-in-Sigma
Access a setting value by its key. Returns undefined if the key is not found.
```javascript
console.log(settings('param1')); // outputs 'abc'
console.log(settings('param2')); // outputs 42
console.log(settings('param3')); // outputs undefined
```
--------------------------------
### Camera Properties
Source: https://github.com/jacomyal/sigma.js/wiki/Camera-API
Lists the accessible properties of camera objects, including their graph, ID, coordinate prefixes, position, zoom ratio, angle, animation status, and settings.
```APIDOC
## Camera Properties
Cameras expose the following properties:
- **graph** (Read only): Returns the graph this camera is bound to
- **id** (Read only): Returns the unique string ID of this camera
- **readPrefix** (Read only): Returns the preferred input prefix for node coordinate transformations
- **prefix** (Read only): Returns the preferred output prefix for node coordinate transformations
- **x**: The center x position of the camera on the graph
- **y**: The center y position of the camera on the graph
- **ratio**: The scaling ratio of the camera
- **angle**: The rotation angle of the camera
- **isAnimated**: Indicates whether or not a camera's position is being animated
- **settings**: The settings object for this camera
The properties `x`, `y`, `ratio`, and `angle` should be set via the `goTo()` method.
```
--------------------------------
### render
Source: https://github.com/jacomyal/sigma.js/wiki/Public-API
Calls the render method of all renderers. This method is primarily for internal use within Sigma.js and should not typically be called directly by users.
```APIDOC
## render
### Description
This method calls the `render` method of each renderer. It has been initially designed to render every renderers from inside sigma, but it actually should not be used from outside most of the time.
### Method
render
### Returns
- *sigma* - The sigma instance.
```
--------------------------------
### Add Custom Method to Graph Instances
Source: https://github.com/jacomyal/sigma.js/wiki/Graph-API
Use this to add new methods to all future graph instances. Methods must be added before instances are created.
```javascript
sigma.classes.graph.addMethod('getNodesCount', function() {
return this.nodesArray.length;
});
var myGraph = new sigma.classes.graph();
console.log(myGraph.getNodesCount()); // outputs 0
```
--------------------------------
### Dynamic Node Attribute Transformation with nodeReducer
Source: https://github.com/jacomyal/sigma.js/blob/main/packages/website/docs/advanced/data.md
This snippet demonstrates how to use a nodeReducer to dynamically change a node's size and color before rendering. It's useful for highlighting specific nodes in the graph.
```typescript
sigma.setSetting("nodeReducer", (node) => {
if (node.id === "specialNode") {
return {
...node,
size: 10,
color: "#ff0000",
};
}
return node;
});
```
--------------------------------
### Add a Camera to Sigma
Source: https://github.com/jacomyal/sigma.js/wiki/Camera-API
Adds a new camera to the Sigma instance with a specified ID. If no ID is provided, Sigma generates one automatically.
```javascript
sigInst.addCamera('cam1');
```
--------------------------------
### kill
Source: https://github.com/jacomyal/sigma.js/wiki/Public-API
Calls the `kill` method of each module associated with the sigma instance and destroys all references from the instance.
```APIDOC
## kill
### Description
Calls the `kill` method of each module associated with the sigma instance and destroys all references from the instance.
### Method
`sigma.kill()`
### Returns
- *void*
```