Diagram

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