@elicdavis/node-flow 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -5
- package/dist/index.d.mts +762 -0
- package/dist/index.d.ts +762 -0
- package/dist/index.js +6509 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +6471 -0
- package/dist/index.mjs.map +1 -0
- package/esbuild.ts +1 -1
- package/index.html +16 -12
- package/package.json +1 -1
- package/src/elements/base.ts +1 -0
- package/src/elements/text.ts +32 -4
- package/src/port.ts +53 -17
package/README.md
CHANGED
|
@@ -10,16 +10,22 @@ Check it out [here](https://elicdavis.github.io/node-flow/).
|
|
|
10
10
|
|
|
11
11
|
Node Flow is a javascript library that enables developers to build node based tools similar to Unreal Blueprints or Blender Nodes.
|
|
12
12
|
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
Grab the [latest from npm](https://www.npmjs.com/package/@elicdavis/node-flow):
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm i @elicdavis/node-flow
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Or download the latest build [here](https://raw.githubusercontent.com/EliCDavis/node-flow/gh-pages/dist/web/NodeFlow.js).
|
|
22
|
+
|
|
13
23
|
## Features
|
|
14
24
|
|
|
15
25
|
* Nodes
|
|
16
26
|
* Markdown Notes
|
|
17
27
|
* More Nodes
|
|
18
28
|
|
|
19
|
-
## Install
|
|
20
|
-
|
|
21
|
-
Download the latest build [here](https://raw.githubusercontent.com/EliCDavis/node-flow/gh-pages/dist/web/NodeFlow.js).
|
|
22
|
-
|
|
23
29
|
## Building
|
|
24
30
|
|
|
25
31
|
If you want to build the library yourself, you can run
|
|
@@ -37,6 +43,8 @@ npm run package
|
|
|
37
43
|
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).
|
|
38
44
|
|
|
39
45
|
```javascript
|
|
46
|
+
import { NodeFlowGraph } from "@elicdavis/node-flow";
|
|
47
|
+
|
|
40
48
|
// Create a canvas to render our graph to
|
|
41
49
|
var canvas = document.createElement("canvas");
|
|
42
50
|
|
|
@@ -47,6 +55,7 @@ var graph = new NodeFlowGraph(canvas)
|
|
|
47
55
|
There are a bunch of optional parameters you can provide the graph:
|
|
48
56
|
|
|
49
57
|
```javascript
|
|
58
|
+
import { NodeFlowGraph } from "@elicdavis/node-flow";
|
|
50
59
|
var graph = new NodeFlowGraph(canvas, {
|
|
51
60
|
// Background color of the graph.
|
|
52
61
|
backgroundColor: "#FF5500",
|
|
@@ -118,6 +127,8 @@ var graph = new NodeFlowGraph(canvas, {
|
|
|
118
127
|
#### Creation
|
|
119
128
|
|
|
120
129
|
```javascript
|
|
130
|
+
import { FlowNode } from "@elicdavis/node-flow";
|
|
131
|
+
|
|
121
132
|
// All nodes require a title. That's about it.
|
|
122
133
|
var node = new FlowNode({
|
|
123
134
|
title: "My First Node!",
|
|
@@ -132,6 +143,8 @@ graph.addNode(node);
|
|
|
132
143
|
Create a Add node that takes two numbers and outputs a single number
|
|
133
144
|
|
|
134
145
|
```javascript
|
|
146
|
+
import { FlowNode } from "@elicdavis/node-flow";
|
|
147
|
+
|
|
135
148
|
var node = new FlowNode({
|
|
136
149
|
title: "Add",
|
|
137
150
|
inputs: [
|
|
@@ -156,4 +169,5 @@ node.addOutput({ name: "sum", type: "float32" })
|
|
|
156
169
|
Just run
|
|
157
170
|
|
|
158
171
|
```bash
|
|
159
|
-
|
|
172
|
+
npm run watch
|
|
173
|
+
```
|