Skip to content

Commit faf52a5

Browse files
Deploy to GitHub pages
0 parents  commit faf52a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+18678
-0
lines changed

README.md

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# Node Flow
2+
3+
Another Flow-based Node graph Library.
4+
5+
Check it out [here](https://elicdavis.github.io/node-flow/).
6+
7+
## About
8+
9+
Node Flow is a javascript library that enables developers to build node based tools similar to Unreal Blueprints or Blender Nodes.
10+
11+
## Features
12+
13+
* Nodes
14+
* Markdown Notes
15+
* More Nodes
16+
17+
## Install
18+
19+
Download the latest build [here](https://raw.githubusercontent.com/EliCDavis/node-flow/gh-pages/dist/web/NodeFlow.js).
20+
21+
## API
22+
23+
### Graph API
24+
25+
#### Creation
26+
27+
The only requirement for creating a graph is providing it an instance of a [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas).
28+
29+
```javascript
30+
// Create a canvas to render our graph to
31+
var canvas = document.createElement("canvas");
32+
33+
// Create our Node Flow Graph
34+
var graph = new NodeFlowGraph(canvas)
35+
```
36+
37+
There are a bunch of optional parameters you can provide the graph:
38+
39+
```javascript
40+
var graph = new NodeFlowGraph(canvas, {
41+
// Background color of the graph.
42+
backgroundColor: "#FF5500",
43+
44+
// You can add extra items to the context
45+
// menu that pops up when you right click.
46+
contextMenu: {
47+
subMenus: [
48+
{
49+
// Text that shows up in the context
50+
// menu
51+
name: "Example Context Menu Item",
52+
53+
// This is recursive. We can nest as
54+
// many submenus within eachother as
55+
// we want. This field is optional.
56+
subMenus: [],
57+
58+
items: [
59+
{
60+
name: "Sub menu Item!!!"
61+
}
62+
]
63+
}
64+
],
65+
66+
// Items that show up at the base of the
67+
// context menu
68+
items: [
69+
{
70+
// Text that shows up in the context
71+
// menu
72+
name: "Example Context Menu Item",
73+
74+
// Function that get's executed when
75+
// Item is clicked.
76+
callback: () => {
77+
alert("Example Context Menu Item");
78+
}
79+
}
80+
]
81+
},
82+
83+
// Notes we want rendered on the graph.
84+
board: {
85+
notes: [
86+
{
87+
// Where to render the note
88+
position: { x: 20, y: 20 },
89+
90+
// Whether or not the note can be
91+
// interacted with on the graph
92+
locked: true,
93+
94+
// Markdown enabled text
95+
text: `
96+
# My First note!!!
97+
98+
Not sure what to write here
99+
`
100+
},
101+
]
102+
},
103+
});
104+
```
105+
106+
### Node API
107+
108+
#### Creation
109+
110+
```javascript
111+
// All nodes require a title. That's about it.
112+
var node = new FlowNode({
113+
title: "My First Node!",
114+
});
115+
116+
// Be sure to add it to the graph so it can be rendered.
117+
graph.addNode(node);
118+
```
119+
120+
#### Inputs and Outputs
121+
122+
Create a Add node that takes two numbers and outputs a single number
123+
124+
```javascript
125+
var node = new FlowNode({
126+
title: "Add",
127+
inputs: [
128+
{ name: "a", type: "float32" },
129+
{ name: "b", type: "float32" }
130+
],
131+
outputs: [
132+
{ name: "sum", type: "float32" }
133+
],
134+
});
135+
```
136+
137+
You can also add additional inputs and outputs to the node after it's been created
138+
139+
```javascript
140+
node.addInput({ name: "c", type: "float32" })
141+
node.addOutput({ name: "sum", type: "float32" })
142+
```
143+
144+
## Library Development
145+
146+
Just run
147+
148+
```bash
149+
npm run watch-dev
150+
```

0 commit comments

Comments
 (0)