" class="reference-link">

@aexol/tree""> @aexol/tree"">

Tree is a tool for displaying node based systems.
This package contains one dependency.

Table of Contents

Tree Graph Visualiser

• Table of Contents
• Getting Started
  • JavaScript
  • Light Mode
• Listening to Diagram Events
• Developing and Growth
• Adding to Your Own Project
• Serialisation of Data
• Docs
• Controls
• Contribute

Getting Started

This section will help you get started with the graph visualizer.

Javascript

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.

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():

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

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

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

$ git clone https://github.com/aexol-studio/tree
$ npm install
$ npm run start

Adding to Your Own Project

$ 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