Graphsource NPM

Graphsource

Diagram is the tool for displaying node based systems.

This package contains one dependency.

Getting started

Javascript

import { Diagram } from 'graphsource'
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()

TypeScript

import { Diagram, NodeDefinition, AcceptedNodeDefinition } from 'graphsource'
this.diagram = new Diagram(document.getElementById("root"));
this.diagram.setNodes
]);

Light mode

Diagram is in dark mode by defult, but You can easily change the theme to light one. Just add the options while creating Diagram.

import { Diagram, DefaultDiagramThemeLight } from 'graphsource'
this.diagram = new Diagram(document.getElementById("root"),
{
  theme: DefaultDiagramThemeLight
});

Develop & Contribute

$ git clone https://github.com/graphql-editor/diagram
$ npm install
$ npm run start

Add to your project

$ npm install graphsource

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
});

Here is the list of all subscribable events:

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

You can unsubscribe your listener either by using .off(), or by invoking unsubscriber function that is being 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

Docs

To generate docs simply type:

npm run docs

Controls

Pan - press and hold Left Mouse Button and move mouse
Move - press and hold Left Mouse Button on node
CLICK ON NODE TYPE - if node is a children of other node it centers view on parent node
SHIFT + Left Mouse Button Click - select multiple nodes