npm package: @metagl/node-graph
Description: A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.
Author: asun01
Latest version: 0.0.1

# metagl-graph

A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.

Clone form https://github.com/jagenjo/litegraph.js and the author is jagenjo.

I did some changes to make it work with the new litegraph.js version and added some examples.

License is the same as litegraph.js.

More examples you can visit [jagenjo demo site](http://tamats.com/projects/litegraph/editor) or install it on your local computer, to do so you need `git`, `node` and `npm`. 

## Installation

You can install it using npm 
```
npm install @metagl/node-graph
```

Or downloading the ```@metagl/node-graph/litegraph.js``` and ```@metagl/node-graph/assets/css/litegraph.css``` version from this repository.

Use library and css in your html file (you can download ```@metagl/node-graph/assets``` under you project):
```html
<html>
  <link rel="stylesheet" type="text/css" href="litegraph.css">
  <link rel="stylesheet" type="text/css" href="litegraph-editor.css">
  <link rel="stylesheet" type="text/css" href="lgstyle.css">
  <script type="text/javascript" src="litegraph.js"></script>
  <script type="text/javascript" src="litegraph-editor.js"></script>
  <script type="text/javascript" src="defaults_mobile.js"></script>
  <script type="text/javascript" src="defaults.js"></script>
</html>
```

Or import css in your project using the following code:
```javascript
//引入litegraph
import './css/lgstyle.css';
import './css/litegraph.css';
import './css/litegraph-editor.css';
```

## First project ##

```html
<html>
<head>
	<link rel="stylesheet" type="text/css" href="litegraph.css">
	<script type="text/javascript" src="litegraph.js"></script>
</head>
<body style='width:100%; height:100%'>
<canvas id='mycanvas' width='1024' height='720' style='border: 1px solid'></canvas>
<script>
var graph = new LGraph();

var canvas = new LGraphCanvas("#mycanvas", graph);

var node_const = LiteGraph.createNode("basic/const");
node_const.pos = [200,200];
graph.add(node_const);
node_const.setValue(4.5);

var node_watch = LiteGraph.createNode("basic/watch");
node_watch.pos = [700,200];
graph.add(node_watch);

node_const.connect(0, node_watch, 0 );

graph.start()
</script>
</body>
</html>
```

## How to code a new Node type

Here is an example of how to build a node that sums two inputs:

```javascript
//node constructor class
function MyAddNode()
{
  this.addInput("A","number");
  this.addInput("B","number");
  this.addOutput("A+B","number");
  this.properties = { precision: 1 };
}

//name to show
MyAddNode.title = "Sum";

//function to call when the node is executed
MyAddNode.prototype.onExecute = function()
{
  var A = this.getInputData(0);
  if( A === undefined )
    A = 0;
  var B = this.getInputData(1);
  if( B === undefined )
    B = 0;
  this.setOutputData( 0, A + B );
}

//register in the system
LiteGraph.registerNodeType("basic/sum", MyAddNode );

```

or you can wrap an existing function:

```js
function sum(a,b)
{
   return a+b;
}

LiteGraph.wrapFunctionAsNode("math/sum",sum, ["Number","Number"],"Number");
```

## Server side

It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).

```js
var LiteGraph = require("./litegraph.js").LiteGraph;

var graph = new LiteGraph.LGraph();

var node_time = LiteGraph.createNode("basic/time");
graph.add(node_time);

var node_console = LiteGraph.createNode("basic/console");
node_console.mode = LiteGraph.ALWAYS;
graph.add(node_console);

node_time.connect( 0, node_console, 1 );

graph.start()
```

### Mynodes

![MyNodes](imgs/mynodes.png "MyNodes")

## Utils
-----

It includes several commands in the utils folder to generate doc, check errors and build minifyed version.

## Demo
-----
Run the following commands to try it out:
```sh
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80!
```
Open your browser and point it to http://localhost:8000/. You can select a demo from the dropdown at the top of the page.