# @graspologic/graph

Latest version **0.7.0** (published 2021-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @graspologic/graph
pnpm add @graspologic/graph
yarn add @graspologic/graph
bun add @graspologic/graph
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2021-12-08 |
| First published | 2020-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 942.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Chris Trevino (chtrevin@microsoft.com) |
| Maintainers | darthtrevino, stopyoukid, essexbot, natoverse |

## Links

- npm: https://www.npmjs.com/package/@graspologic/graph
- Repository: https://github.com/microsoft/graspologic-js
- npm.io page: https://npm.io/package/@graspologic/graph

## Dependencies (3)

- [typedoc](https://npm.io/package/typedoc.md) 0.22.10
- [@graspologic/common](https://npm.io/package/@graspologic/common.md) 0.7.0
- [@graspologic/memstore](https://npm.io/package/@graspologic/memstore.md) 0.7.0

## Recent versions

- 0.7.0 (latest) — 2021-12-08
- 0.7.0-13 (prerelease) — 2021-03-23
- 0.4.1-beta.14.0 (beta.14) — 2020-09-11
- 0.4.0 (local.1) — 2020-09-10
- 0.7.0-12 — 2021-03-04
- 0.7.0-11 — 2021-03-04
- 0.7.0-10 — 2021-03-01
- 0.7.0-9 — 2021-02-23
- 0.7.0-8 — 2021-02-22
- 0.7.0-7 — 2021-01-11
- 0.7.0-6 — 2021-01-11
- 0.7.0-5 — 2020-12-23
- 0.7.0-4 — 2020-12-23
- 0.7.0-3 — 2020-12-23
- 0.0.7-3 — 2020-12-23
- … 9 more at https://npm.io/package/@graspologic/graph/versions

## README

# @graspologic/graph

Provides a set of graph data structures, used with the layout engine and the renderer.

## Usage

Below are several common usage patterns for this library.

### Dynamically adding nodes to your graph

#### Standalone

```js
import { NodeImpl } from '@graspologic/graph'
import { WebGLGraphRenderer } from '@graspologic/renderer'
const renderer = WebGLGraphRenderer.createInstance(/*...*/)

// Create the node
const node = new NodeImpl()

// Position it
node.position = [10, 10, 0]

// Size it
node.radius = 10

// Finally, add it to the scene
renderer.scene.add(node)
```

#### React

```jsx
import React, { useEffect, useRef } from 'react'
import { NodeImpl } from '@graspologic/graph'
import { GraphView } from '@graspologic/react'
import { GraphRenderer } from '@graspologic/renderer'
export const MyRenderer: React.FC = () => {
	const graphRef = useRef<GraphRenderer>(null)
	useEffect(() => {
		if (graphRef.current) {
			// Create the node
			const node = new NodeImpl()

			// Position it
			node.position = [10, 10, 0]

			// Size it
			node.radius = 10

			// Finally, add it to the scene
			graphRef.current!.scene.add(node)
		}
	}, [graphRef])
	return (
		<GraphView ref={graphRef} data={{ nodes: [], edges: [] }}/>
	)
}
```

### Dynamically adding edges to your graph

#### Standalone

```js
import { EdgeImpl } from '@graspologic/graph'
import { WebGLGraphRenderer } from '@graspologic/renderer'
const renderer = WebGLGraphRenderer.createInstance(/*...*/)

// Create the edge
const edge = new EdgeImpl()

// Position the edge
edge.sourcePosition = [0, 0, 0]
edge.targetPosition = [10, 10, 0]

// Add it to the scene
renderer.scene.add(edge)
```

#### React

```jsx
import React, { useEffect, useRef } from 'react'
import { EdgeImpl } from '@graspologic/graph'
import { GraphView } from '@graspologic/react'
import { GraphRenderer } from '@graspologic/renderer'
export const MyRenderer: React.FC = () => {
	const graphRef = useRef<GraphRenderer>(null)
	useEffect(() => {
		if (graphRef.current) {
			// Create the edge
			const edge = new EdgeImpl()

			// Position the edge
			edge.sourcePosition = [0, 0, 0]
			edge.targetPosition = [10, 10, 0]

			// Add it to the scene
			graphRef.current!.scene.add(edge)
		}
	}, [graphRef])
	return (
		<GraphView ref={graphRef} data={{ nodes: [], edges: [] }}/>
	)
}
```

### Dynamically animating the edges of your graph

#### Standalone

```js
import { EdgeImpl } from '@graspologic/graph'
import { WebGLGraphRenderer } from '@graspologic/renderer'
const renderer = WebGLGraphRenderer.createInstance(/*...*/)

// Add an edge to the scene
// and assign some start positions
const edge = new EdgeImpl()
edge.sourcePosition = [0, 0, 0]
edge.targetPosition = [10, 10, 0]
renderer.scene.add(edge)

// Animate from the original position to this one over 1000ms
edge.animateSourcePosition([100, 100, 0], 1000)
```

#### React

```jsx
import React, { useEffect, useRef } from 'react'
import { EdgeImpl } from '@graspologic/graph'
import { GraphView } from '@graspologic/react'
import { GraphRenderer } from '@graspologic/renderer'
export const MyRenderer: React.FC = () => {
	const graphRef = useRef<GraphRenderer>(null)
	useEffect(() => {
		if (graphRef.current) {

			// Add an edge to the scene
			// and assign some start positions
			const edge = new EdgeImpl()
			edge.sourcePosition = [0, 0, 0]
			edge.targetPosition = [10, 10, 0]
			graphRef.current!.scene.add(edge)

			// Animate from the original position to this one over 1000ms
			edge.animateSourcePosition([100, 100, 0], 1000)
		}
	}, [graphRef])
	return (
		<GraphView ref={graphRef} data={{ nodes: [], edges: [] }}/>
	)
}
```

### Dynamically animating the nodes of your graph

#### Standalone

```js
import { NodeImpl } from '@graspologic/graph'
import { WebGLGraphRenderer } from '@graspologic/renderer'

const renderer = WebGLGraphRenderer.createInstance(/*...*/)

// Add an node to the scene
// and assign some start positions
const node = new NodeImpl()
node.position = [10, 10, 0]
node.radius = 10
renderer.scene.add(node)

// Animate from the original position to this one over 1000ms
node.animatePosition([100, 100, 0], 1000)
```

#### React

```jsx
import React, { useEffect, useRef } from 'react'
import { NodeImpl } from '@graspologic/graph'
import { GraphView } from '@graspologic/react'
import { GraphRenderer } from '@graspologic/renderer'

export const MyRenderer: React.FC = () => {
	const graphRef = useRef < GraphRenderer > null
	useEffect(() => {
		if (graphRef.current) {
			// Add an node to the scene
			// and assign some start positions
			const node = new NodeImpl()
			node.position = [10, 10, 0]
			node.radius = 10
			renderer.scene.add(node)

			// Animate from the original position to this one over 1000ms
			node.animatePosition([100, 100, 0], 1000)
		}
	}, [graphRef])
	return <GraphView ref={graphRef} data={{ nodes: [], edges: [] }} />
}
```

See the [API documentation](./dist/docs/globals.md) or [examples](../../../examples) for additional examples.

---
_Source: https://npm.io/package/@graspologic/graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._