Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zuramai/graphism
A tool to create graph visualization and run algorithms on top of it
https://github.com/zuramai/graphism
algorithm canvas graph graph-visualization visualization
Last synced: 3 months ago
JSON representation
A tool to create graph visualization and run algorithms on top of it
- Host: GitHub
- URL: https://github.com/zuramai/graphism
- Owner: zuramai
- Created: 2022-02-13T03:45:00.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-21T10:00:25.000Z (about 2 years ago)
- Last Synced: 2024-10-12T07:11:00.891Z (4 months ago)
- Topics: algorithm, canvas, graph, graph-visualization, visualization
- Language: TypeScript
- Homepage: https://zuramai.github.io/graphism
- Size: 428 KB
- Stars: 16
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A tool to create graph visualization
## Features
- Vanilla JavaScript - integrate into any framework you like
- Run algorithms on the graph (like Kruskal's algorithm, Dijkstra's algorithm, etc)
- Design your own graph
- Save graph in .png
## Install
```bash
npm i graphism
```
```html
```
```js
import { createGraphism } from 'graphism'
const graphism = createGraphism({
el: '#canvas',
canvasBackground: '#eee'
})
// Generate an random graph
graphism.generateGraph()
```
## API
```ts
// Create new node and return the Node instance
createNode: (name: string, coordinate: Coordinate, config?: NodeConfig) => NodeInterface
// Clear selected
clearSelectedNode: () => void
clearSelectedLine: () => void
// Select a node
selectNode: (node: NodeInterface, mode: CanvasMode = "normal") => NodeInterface
// Connect two node
addNodeNeighbor: (from: NodeInterface, to: NodeInterface, distance: number) => void
// Generate random graph
generateGraph: () => void
// Event listener
on: (event: string, callback: any, once: boolean = false) => void
```
## Events
### Event Usage
Example of event usage
```js
graphism.on("node:select", (node1: NodeInterface) => {
console.log(`The node clicked contains value = ${node1.value}`)
})
// If you want the event only trigger once, add `true` to the third param
graphism.on("grab", () => {
console.log("You are grabbing the canvas, this will only run once")
}, true)
```
### Event list
| Name | Param | Description |
| ---- | ----- | ----------- |
| mounted | | Graphism is successfully mounted |
| grab | | User grabbing on the canvas |
| error | (message: string) | Triggered when error occured |
| canvas:click | (coordinate: Coordinate) | Canvas clicked by user |
| node:created | | New node created |
| node:move | (node: NodeInterface) | Node moved |
| node:mouseover | | The cursor is on the node |
| node:mouseleave | | The cursor is going out from the node |
| node:select | | Node is selected |
| node:deselect | | Node is deselected |
| node:clearSelect | | All nodes is deselected |
| node:connect | | Two nodes are connected |
| line:select | | Line is selected |
| line:deselect | | Line is deselected |
| line:clearSelect | | All lines is deselected |
| line:mouseover | | The cursor is on the line |
## License
MIT License