Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aexol-studio/tree
☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
https://github.com/aexol-studio/tree
canvas diagram editor graph node visual
Last synced: 4 days ago
JSON representation
☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
- Host: GitHub
- URL: https://github.com/aexol-studio/tree
- Owner: aexol-studio
- License: mit
- Created: 2018-05-26T09:38:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T12:22:59.000Z (2 months ago)
- Last Synced: 2024-08-28T16:25:52.241Z (2 months ago)
- Topics: canvas, diagram, editor, graph, node, visual
- Language: TypeScript
- Homepage:
- Size: 2.66 MB
- Stars: 544
- Watchers: 18
- Forks: 49
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - graphql-editor/diagram - ☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈 (node)
README
###   
[](https://www.npmjs.com/package/@aexol/tree) [](https://www.npmjs.com/package/@aexol/tree)
Tree is a tool for displaying node based systems.
This package contains one dependency.
## Table of Contents
[Tree Graph Visualiser](#TREE-GRAPH-VISUALISER)
- [Table of Contents](#table-of-contents)
- [Getting Started](#Getting-Started)
- [JavaScript](#Javascript)
- [Light Mode](#Light-Mode)
- [Listening to Diagram Events](#Listening-to-Diagram-Events)
- [Developing and Growth](#Developing-and-Growth)
- [Adding to Your Own Project](#Adding-to-Your-Own-Project)
- [Serialisation of Data](#Serialisation-of-Data)
- [Docs](#Docs)
- [Controls](#Controls)
- [Contribute](#Contribute)
## Getting Started
This section will help you get started with the graph visualizer.
### Javascript
```js
import { Diagram } from '@aexol/tree'
class App {
constructor() {
const root = document.getElementById("root");
if (!root) {
throw new Error("No root html element");
}
this.diagram = new Diagram(root, {});
this.diagram.setNodes([
{
"name": "Query",
"type": "type",
"id": "1",
"description": "",
"inputs": [
"2"
],
"outputs": [],
"options": [
"query"
]
},
{
"name": "pizzas",
"type": "Pizza",
"id": "2",
"inputs": [],
"outputs": [
"2"
],
"description":"get all pizzas a a a from the database",
"options": [
"array",
"required"
]
},
{
"name": "Pizza",
"type": "type",
"id": "3",
"description": "Main type of the schema",
"inputs": [
"4",
],
"outputs": [],
"options": []
},
{
"name": "name",
"type": "String",
"id": "4",
"inputs": [],
"outputs": [
"3"
],
"options": [
"required"
]
}
])
}
}
new App()
```
### Light Mode
Diagram is in dark mode by defult, but you can easily switch to light theme. Just add the options for that while creating the Diagram.
```ts
import { Diagram, DefaultDiagramThemeLight } from '@aexol/tree'
this.diagram = new Diagram(document.getElementById("root"),
{
theme: DefaultDiagramThemeLight
});
```
## Listening to Diagram Events
It's possible to attach to certain events that occur inside the diagram.
You can do it by using familiar `.on()` syntax, e.g.:
```
this.diagram = new Diagram(/* ... */);
/* ... */
this.diagram.on(EVENT_NAME, () => {
// callback
});
```
The list of all subscribable events:
|Event|Description|
|:---|:---|
| *ViewModelChanged* | Fires when a view model (pan, zoom) was changed |
| *NodeMoving* | Fires when node is being moved |
| *NodeMoved* | Fires when node stops being moved |
| *NodeSelected* | Fires when node(s) was selected |
| *UndoRequested* | Fires when undo was requested |
| *RedoRequested* | Fires when redo was requested |
> [!NOTE]
> You can unsubscribe your listener by either using `.off()` or by invoking the unsubscriber function that is returned from `.on()`:
```js
this.diagram = new Diagram(/* ... */);
const callback = (nodeList) => {
console.log('Nodes are moving!', nodeList);
};
this.diagram.on('NodeMoving', callback); // callback will be fired
// ...
this.diagram.off('NodeMoving', callback); // callback will not be fired anymore
```
```js
this.diagram = new Diagram(/* ... */);
const callback = () => {
console.log('node moving!');
};
const unsubscriber = this.diagram.on('NodeMoving', callback); // callback will be fired
// ...
unsubscriber(); // callback will not be fired anymore
```
## Serialisation of Data
```js
const diagram = new Diagram(/* ... */);
const callback = ({nodes, links}) => {
// Here you receive nodes and links after Serialisation
};
this.diagram.on('DataModelChanged', callback); // callback will be fired
```
## Developing and Growth
```sh
$ git clone https://github.com/aexol-studio/tree
$ npm install
$ npm run start
```
## Adding to Your Own Project
```sh
$ npm install @aexol/tree
```
## Docs
To generate docs simply type:
```
npm run docs
```
## Controls
Here is a list of the available controls:
|Action| Result|
|:---|:---|
| Press and hold Left Mouse Button and move mouse | Pans the view |
| Press and hold Left Mouse Button on node | Moves the node |
| CLICK ON NODE TYPE | Centers view on parent node (if node is a children of other node) |
| SHIFT + Left Mouse Button Click | Selects multiple nodes |
## 💚 Contribute
Feel free to contribute! Don't hesitate to:
- Fork this repo
- Create your own feature branch using: git checkout -b feature-name
- Commit your changes with: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request