Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-11 00:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'heads/upstream/master'

Browse Source
This commit is contained in:
Kristofer
2018-04-19 08:32:29 +02:00
parent 270941b4cf 9cd97cb095
commit 4e2c03ad8a
13 changed files with 1279 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@@ -8,12 +8,13 @@ It can be integrated easily in any existing web applications and graphs can be r
## Installation ## Installation
I recommend to download the build/litegraph.js file which is more updated than the npm package. You can install it using npm
``` ```
npm install litegraph.js npm install litegraph.js
``` ```
Or downloading the ```build/litegraph.js``` version from this repository.
## First project ## ## First project ##
```html ```html
@@ -78,6 +79,17 @@ 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 ## Server side
It also works server-side using Node although some nodes do not work in server (audio, graphics, input, etc). It also works server-side using Node although some nodes do not work in server (audio, graphics, input, etc).

18
demo/demo.js
View File

@@ -66,23 +66,15 @@ function sortTest()
function benchmark() function benchmark()
{ {
var num_nodes = 500; var num_nodes = 200;
var consts = []; var nodes = [];
for(var i = 0; i < num_nodes; i++)
{
var n = LiteGraph.createNode("math/rand",null, {pos: [(2000 * Math.random())|0, (2000 * Math.random())|0] });
graph.add(n);
consts.push(n);
}
var watches = [];
for(var i = 0; i < num_nodes; i++) for(var i = 0; i < num_nodes; i++)
{ {
var n = LiteGraph.createNode("basic/watch",null, {pos: [(2000 * Math.random())|0, (2000 * Math.random())|0] }); var n = LiteGraph.createNode("basic/watch",null, {pos: [(2000 * Math.random())|0, (2000 * Math.random())|0] });
graph.add(n); graph.add(n);
watches.push(n); nodes.push(n);
} }
for(var i = 0; i < num_nodes; i++) for(var i = 0; i < nodes.length; i++)
consts[ (Math.random() * consts.length)|0 ].connect(0, watches[ (Math.random() * watches.length)|0 ], 0 ); nodes[ (Math.random() * nodes.length)|0 ].connect(0, nodes[ (Math.random() * nodes.length)|0 ], 0 );
} }

4
doc/classes/ContextMenu.html
View File

@@ -85,7 +85,7 @@
<div class="foundat"> <div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l5814"><code>..&#x2F;src&#x2F;litegraph.js:5814</code></a> Defined in: <a href="../files/.._src_litegraph.js.html#l6083"><code>..&#x2F;src&#x2F;litegraph.js:6083</code></a>
</div> </div>
@@ -123,7 +123,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l5814"><code>..&#x2F;src&#x2F;litegraph.js:5814</code></a> <a href="../files/.._src_litegraph.js.html#l6083"><code>..&#x2F;src&#x2F;litegraph.js:6083</code></a>
</p> </p>

85
doc/classes/LGraph.html
View File

@@ -85,7 +85,7 @@
<div class="foundat"> <div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l328"><code>..&#x2F;src&#x2F;litegraph.js:328</code></a> Defined in: <a href="../files/.._src_litegraph.js.html#l378"><code>..&#x2F;src&#x2F;litegraph.js:378</code></a>
</div> </div>
@@ -114,7 +114,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l328"><code>..&#x2F;src&#x2F;litegraph.js:328</code></a> <a href="../files/.._src_litegraph.js.html#l378"><code>..&#x2F;src&#x2F;litegraph.js:378</code></a>
</p> </p>
@@ -149,6 +149,10 @@
<li class="index-item method"> <li class="index-item method">
<a href="#method_add">add</a> <a href="#method_add">add</a>
</li>
<li class="index-item method">
<a href="#method_arrange">arrange</a>
</li> </li>
<li class="index-item method"> <li class="index-item method">
<a href="#method_attachCanvas">attachCanvas</a> <a href="#method_attachCanvas">attachCanvas</a>
@@ -269,7 +273,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l748"><code>..&#x2F;src&#x2F;litegraph.js:748</code></a> <a href="../files/.._src_litegraph.js.html#l856"><code>..&#x2F;src&#x2F;litegraph.js:856</code></a>
</p> </p>
@@ -301,6 +305,37 @@
</div>
<div id="method_arrange" class="method item">
<h3 class="name"><code>arrange</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l736"><code>..&#x2F;src&#x2F;litegraph.js:736</code></a>
</p>
</div>
<div class="description">
<p>Positions every node in a more readable manner</p>
</div>
</div> </div>
<div id="method_attachCanvas" class="method item"> <div id="method_attachCanvas" class="method item">
<h3 class="name"><code>attachCanvas</code></h3> <h3 class="name"><code>attachCanvas</code></h3>
@@ -323,7 +358,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l401"><code>..&#x2F;src&#x2F;litegraph.js:401</code></a> <a href="../files/.._src_litegraph.js.html#l453"><code>..&#x2F;src&#x2F;litegraph.js:453</code></a>
</p> </p>
@@ -370,7 +405,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l352"><code>..&#x2F;src&#x2F;litegraph.js:352</code></a> <a href="../files/.._src_litegraph.js.html#l404"><code>..&#x2F;src&#x2F;litegraph.js:404</code></a>
</p> </p>
@@ -407,7 +442,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1247"><code>..&#x2F;src&#x2F;litegraph.js:1247</code></a> <a href="../files/.._src_litegraph.js.html#l1355"><code>..&#x2F;src&#x2F;litegraph.js:1355</code></a>
</p> </p>
@@ -461,7 +496,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l420"><code>..&#x2F;src&#x2F;litegraph.js:420</code></a> <a href="../files/.._src_litegraph.js.html#l472"><code>..&#x2F;src&#x2F;litegraph.js:472</code></a>
</p> </p>
@@ -517,7 +552,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l886"><code>..&#x2F;src&#x2F;litegraph.js:886</code></a> <a href="../files/.._src_litegraph.js.html#l994"><code>..&#x2F;src&#x2F;litegraph.js:994</code></a>
</p> </p>
@@ -583,7 +618,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l919"><code>..&#x2F;src&#x2F;litegraph.js:919</code></a> <a href="../files/.._src_litegraph.js.html#l1027"><code>..&#x2F;src&#x2F;litegraph.js:1027</code></a>
</p> </p>
@@ -649,7 +684,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l902"><code>..&#x2F;src&#x2F;litegraph.js:902</code></a> <a href="../files/.._src_litegraph.js.html#l1010"><code>..&#x2F;src&#x2F;litegraph.js:1010</code></a>
</p> </p>
@@ -709,7 +744,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l693"><code>..&#x2F;src&#x2F;litegraph.js:693</code></a> <a href="../files/.._src_litegraph.js.html#l801"><code>..&#x2F;src&#x2F;litegraph.js:801</code></a>
</p> </p>
@@ -753,7 +788,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l682"><code>..&#x2F;src&#x2F;litegraph.js:682</code></a> <a href="../files/.._src_litegraph.js.html#l790"><code>..&#x2F;src&#x2F;litegraph.js:790</code></a>
</p> </p>
@@ -799,7 +834,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l873"><code>..&#x2F;src&#x2F;litegraph.js:873</code></a> <a href="../files/.._src_litegraph.js.html#l981"><code>..&#x2F;src&#x2F;litegraph.js:981</code></a>
</p> </p>
@@ -861,7 +896,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l935"><code>..&#x2F;src&#x2F;litegraph.js:935</code></a> <a href="../files/.._src_litegraph.js.html#l1043"><code>..&#x2F;src&#x2F;litegraph.js:1043</code></a>
</p> </p>
@@ -943,7 +978,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l671"><code>..&#x2F;src&#x2F;litegraph.js:671</code></a> <a href="../files/.._src_litegraph.js.html#l780"><code>..&#x2F;src&#x2F;litegraph.js:780</code></a>
</p> </p>
@@ -983,7 +1018,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1177"><code>..&#x2F;src&#x2F;litegraph.js:1177</code></a> <a href="../files/.._src_litegraph.js.html#l1285"><code>..&#x2F;src&#x2F;litegraph.js:1285</code></a>
</p> </p>
@@ -1020,7 +1055,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l804"><code>..&#x2F;src&#x2F;litegraph.js:804</code></a> <a href="../files/.._src_litegraph.js.html#l912"><code>..&#x2F;src&#x2F;litegraph.js:912</code></a>
</p> </p>
@@ -1074,7 +1109,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l488"><code>..&#x2F;src&#x2F;litegraph.js:488</code></a> <a href="../files/.._src_litegraph.js.html#l540"><code>..&#x2F;src&#x2F;litegraph.js:540</code></a>
</p> </p>
@@ -1131,7 +1166,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l705"><code>..&#x2F;src&#x2F;litegraph.js:705</code></a> <a href="../files/.._src_litegraph.js.html#l813"><code>..&#x2F;src&#x2F;litegraph.js:813</code></a>
</p> </p>
@@ -1193,7 +1228,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1214"><code>..&#x2F;src&#x2F;litegraph.js:1214</code></a> <a href="../files/.._src_litegraph.js.html#l1322"><code>..&#x2F;src&#x2F;litegraph.js:1322</code></a>
</p> </p>
@@ -1242,7 +1277,7 @@ if the nodes are using graphical actions</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1122"><code>..&#x2F;src&#x2F;litegraph.js:1122</code></a> <a href="../files/.._src_litegraph.js.html#l1230"><code>..&#x2F;src&#x2F;litegraph.js:1230</code></a>
</p> </p>
@@ -1311,7 +1346,7 @@ can be easily accesed from the outside of the graph</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1137"><code>..&#x2F;src&#x2F;litegraph.js:1137</code></a> <a href="../files/.._src_litegraph.js.html#l1245"><code>..&#x2F;src&#x2F;litegraph.js:1245</code></a>
</p> </p>
@@ -1374,7 +1409,7 @@ can be easily accesed from the outside of the graph</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l438"><code>..&#x2F;src&#x2F;litegraph.js:438</code></a> <a href="../files/.._src_litegraph.js.html#l490"><code>..&#x2F;src&#x2F;litegraph.js:490</code></a>
</p> </p>
@@ -1422,7 +1457,7 @@ can be easily accesed from the outside of the graph</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l466"><code>..&#x2F;src&#x2F;litegraph.js:466</code></a> <a href="../files/.._src_litegraph.js.html#l518"><code>..&#x2F;src&#x2F;litegraph.js:518</code></a>
</p> </p>
@@ -1453,7 +1488,7 @@ can be easily accesed from the outside of the graph</p>
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l567"><code>..&#x2F;src&#x2F;litegraph.js:567</code></a> <a href="../files/.._src_litegraph.js.html#l619"><code>..&#x2F;src&#x2F;litegraph.js:619</code></a>
</p> </p>

20
doc/classes/LGraphCanvas.html
View File

@@ -85,7 +85,7 @@
<div class="foundat"> <div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l3074"><code>..&#x2F;src&#x2F;litegraph.js:3074</code></a> Defined in: <a href="../files/.._src_litegraph.js.html#l3203"><code>..&#x2F;src&#x2F;litegraph.js:3203</code></a>
</div> </div>
@@ -126,7 +126,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l3074"><code>..&#x2F;src&#x2F;litegraph.js:3074</code></a> <a href="../files/.._src_litegraph.js.html#l3203"><code>..&#x2F;src&#x2F;litegraph.js:3203</code></a>
</p> </p>
@@ -254,7 +254,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2733"><code>..&#x2F;src&#x2F;litegraph.js:2733</code></a> <a href="../files/.._src_litegraph.js.html#l2852"><code>..&#x2F;src&#x2F;litegraph.js:2852</code></a>
</p> </p>
@@ -291,7 +291,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2826"><code>..&#x2F;src&#x2F;litegraph.js:2826</code></a> <a href="../files/.._src_litegraph.js.html#l2949"><code>..&#x2F;src&#x2F;litegraph.js:2949</code></a>
</p> </p>
@@ -342,7 +342,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l3090"><code>..&#x2F;src&#x2F;litegraph.js:3090</code></a> <a href="../files/.._src_litegraph.js.html#l3219"><code>..&#x2F;src&#x2F;litegraph.js:3219</code></a>
</p> </p>
@@ -388,7 +388,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2799"><code>..&#x2F;src&#x2F;litegraph.js:2799</code></a> <a href="../files/.._src_litegraph.js.html#l2922"><code>..&#x2F;src&#x2F;litegraph.js:2922</code></a>
</p> </p>
@@ -441,7 +441,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2842"><code>..&#x2F;src&#x2F;litegraph.js:2842</code></a> <a href="../files/.._src_litegraph.js.html#l2966"><code>..&#x2F;src&#x2F;litegraph.js:2966</code></a>
</p> </p>
@@ -495,7 +495,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2768"><code>..&#x2F;src&#x2F;litegraph.js:2768</code></a> <a href="../files/.._src_litegraph.js.html#l2891"><code>..&#x2F;src&#x2F;litegraph.js:2891</code></a>
</p> </p>
@@ -542,7 +542,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l3104"><code>..&#x2F;src&#x2F;litegraph.js:3104</code></a> <a href="../files/.._src_litegraph.js.html#l3233"><code>..&#x2F;src&#x2F;litegraph.js:3233</code></a>
</p> </p>
@@ -573,7 +573,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l3128"><code>..&#x2F;src&#x2F;litegraph.js:3128</code></a> <a href="../files/.._src_litegraph.js.html#l3257"><code>..&#x2F;src&#x2F;litegraph.js:3257</code></a>
</p> </p>

75
doc/classes/LGraphNode.html
View File

@@ -85,7 +85,7 @@
<div class="foundat"> <div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l1379"><code>..&#x2F;src&#x2F;litegraph.js:1379</code></a> Defined in: <a href="../files/.._src_litegraph.js.html#l1487"><code>..&#x2F;src&#x2F;litegraph.js:1487</code></a>
</div> </div>
@@ -293,7 +293,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2051"><code>..&#x2F;src&#x2F;litegraph.js:2051</code></a> <a href="../files/.._src_litegraph.js.html#l2161"><code>..&#x2F;src&#x2F;litegraph.js:2161</code></a>
</p> </p>
@@ -385,7 +385,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1988"><code>..&#x2F;src&#x2F;litegraph.js:1988</code></a> <a href="../files/.._src_litegraph.js.html#l2098"><code>..&#x2F;src&#x2F;litegraph.js:2098</code></a>
</p> </p>
@@ -460,7 +460,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2012"><code>..&#x2F;src&#x2F;litegraph.js:2012</code></a> <a href="../files/.._src_litegraph.js.html#l2122"><code>..&#x2F;src&#x2F;litegraph.js:2122</code></a>
</p> </p>
@@ -520,7 +520,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1926"><code>..&#x2F;src&#x2F;litegraph.js:1926</code></a> <a href="../files/.._src_litegraph.js.html#l2036"><code>..&#x2F;src&#x2F;litegraph.js:2036</code></a>
</p> </p>
@@ -595,7 +595,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1949"><code>..&#x2F;src&#x2F;litegraph.js:1949</code></a> <a href="../files/.._src_litegraph.js.html#l2059"><code>..&#x2F;src&#x2F;litegraph.js:2059</code></a>
</p> </p>
@@ -658,7 +658,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1900"><code>..&#x2F;src&#x2F;litegraph.js:1900</code></a> <a href="../files/.._src_litegraph.js.html#l2010"><code>..&#x2F;src&#x2F;litegraph.js:2010</code></a>
</p> </p>
@@ -737,7 +737,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2630"><code>..&#x2F;src&#x2F;litegraph.js:2630</code></a> <a href="../files/.._src_litegraph.js.html#l2745"><code>..&#x2F;src&#x2F;litegraph.js:2745</code></a>
</p> </p>
@@ -777,7 +777,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2072"><code>..&#x2F;src&#x2F;litegraph.js:2072</code></a> <a href="../files/.._src_litegraph.js.html#l2182"><code>..&#x2F;src&#x2F;litegraph.js:2182</code></a>
</p> </p>
@@ -833,7 +833,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1432"><code>..&#x2F;src&#x2F;litegraph.js:1432</code></a> <a href="../files/.._src_litegraph.js.html#l1542"><code>..&#x2F;src&#x2F;litegraph.js:1542</code></a>
</p> </p>
@@ -879,7 +879,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2219"><code>..&#x2F;src&#x2F;litegraph.js:2219</code></a> <a href="../files/.._src_litegraph.js.html#l2335"><code>..&#x2F;src&#x2F;litegraph.js:2335</code></a>
</p> </p>
@@ -967,7 +967,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2427"><code>..&#x2F;src&#x2F;litegraph.js:2427</code></a> <a href="../files/.._src_litegraph.js.html#l2543"><code>..&#x2F;src&#x2F;litegraph.js:2543</code></a>
</p> </p>
@@ -1036,7 +1036,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2337"><code>..&#x2F;src&#x2F;litegraph.js:2337</code></a> <a href="../files/.._src_litegraph.js.html#l2453"><code>..&#x2F;src&#x2F;litegraph.js:2453</code></a>
</p> </p>
@@ -1113,7 +1113,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2188"><code>..&#x2F;src&#x2F;litegraph.js:2188</code></a> <a href="../files/.._src_litegraph.js.html#l2304"><code>..&#x2F;src&#x2F;litegraph.js:2304</code></a>
</p> </p>
@@ -1179,7 +1179,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2204"><code>..&#x2F;src&#x2F;litegraph.js:2204</code></a> <a href="../files/.._src_litegraph.js.html#l2320"><code>..&#x2F;src&#x2F;litegraph.js:2320</code></a>
</p> </p>
@@ -1239,7 +1239,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2123"><code>..&#x2F;src&#x2F;litegraph.js:2123</code></a> <a href="../files/.._src_litegraph.js.html#l2233"><code>..&#x2F;src&#x2F;litegraph.js:2233</code></a>
</p> </p>
@@ -1247,7 +1247,8 @@
</div> </div>
<div class="description"> <div class="description">
<p>returns the bounding of the object, used for rendering purposes</p> <p>returns the bounding of the object, used for rendering purposes
bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
</div> </div>
@@ -1291,7 +1292,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2496"><code>..&#x2F;src&#x2F;litegraph.js:2496</code></a> <a href="../files/.._src_litegraph.js.html#l2611"><code>..&#x2F;src&#x2F;litegraph.js:2611</code></a>
</p> </p>
@@ -1371,7 +1372,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1665"><code>..&#x2F;src&#x2F;litegraph.js:1665</code></a> <a href="../files/.._src_litegraph.js.html#l1775"><code>..&#x2F;src&#x2F;litegraph.js:1775</code></a>
</p> </p>
@@ -1447,7 +1448,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1714"><code>..&#x2F;src&#x2F;litegraph.js:1714</code></a> <a href="../files/.._src_litegraph.js.html#l1824"><code>..&#x2F;src&#x2F;litegraph.js:1824</code></a>
</p> </p>
@@ -1512,7 +1513,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1729"><code>..&#x2F;src&#x2F;litegraph.js:1729</code></a> <a href="../files/.._src_litegraph.js.html#l1839"><code>..&#x2F;src&#x2F;litegraph.js:1839</code></a>
</p> </p>
@@ -1577,7 +1578,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1750"><code>..&#x2F;src&#x2F;litegraph.js:1750</code></a> <a href="../files/.._src_litegraph.js.html#l1860"><code>..&#x2F;src&#x2F;litegraph.js:1860</code></a>
</p> </p>
@@ -1642,7 +1643,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1768"><code>..&#x2F;src&#x2F;litegraph.js:1768</code></a> <a href="../files/.._src_litegraph.js.html#l1878"><code>..&#x2F;src&#x2F;litegraph.js:1878</code></a>
</p> </p>
@@ -1707,7 +1708,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1797"><code>..&#x2F;src&#x2F;litegraph.js:1797</code></a> <a href="../files/.._src_litegraph.js.html#l1907"><code>..&#x2F;src&#x2F;litegraph.js:1907</code></a>
</p> </p>
@@ -1773,7 +1774,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2157"><code>..&#x2F;src&#x2F;litegraph.js:2157</code></a> <a href="../files/.._src_litegraph.js.html#l2273"><code>..&#x2F;src&#x2F;litegraph.js:2273</code></a>
</p> </p>
@@ -1839,7 +1840,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1616"><code>..&#x2F;src&#x2F;litegraph.js:1616</code></a> <a href="../files/.._src_litegraph.js.html#l1726"><code>..&#x2F;src&#x2F;litegraph.js:1726</code></a>
</p> </p>
@@ -1879,7 +1880,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1701"><code>..&#x2F;src&#x2F;litegraph.js:1701</code></a> <a href="../files/.._src_litegraph.js.html#l1811"><code>..&#x2F;src&#x2F;litegraph.js:1811</code></a>
</p> </p>
@@ -1942,7 +1943,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1784"><code>..&#x2F;src&#x2F;litegraph.js:1784</code></a> <a href="../files/.._src_litegraph.js.html#l1894"><code>..&#x2F;src&#x2F;litegraph.js:1894</code></a>
</p> </p>
@@ -2008,7 +2009,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2133"><code>..&#x2F;src&#x2F;litegraph.js:2133</code></a> <a href="../files/.._src_litegraph.js.html#l2249"><code>..&#x2F;src&#x2F;litegraph.js:2249</code></a>
</p> </p>
@@ -2072,7 +2073,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2643"><code>..&#x2F;src&#x2F;litegraph.js:2643</code></a> <a href="../files/.._src_litegraph.js.html#l2758"><code>..&#x2F;src&#x2F;litegraph.js:2758</code></a>
</p> </p>
@@ -2109,7 +2110,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l2037"><code>..&#x2F;src&#x2F;litegraph.js:2037</code></a> <a href="../files/.._src_litegraph.js.html#l2147"><code>..&#x2F;src&#x2F;litegraph.js:2147</code></a>
</p> </p>
@@ -2162,7 +2163,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1974"><code>..&#x2F;src&#x2F;litegraph.js:1974</code></a> <a href="../files/.._src_litegraph.js.html#l2084"><code>..&#x2F;src&#x2F;litegraph.js:2084</code></a>
</p> </p>
@@ -2209,7 +2210,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1528"><code>..&#x2F;src&#x2F;litegraph.js:1528</code></a> <a href="../files/.._src_litegraph.js.html#l1638"><code>..&#x2F;src&#x2F;litegraph.js:1638</code></a>
</p> </p>
@@ -2249,7 +2250,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1629"><code>..&#x2F;src&#x2F;litegraph.js:1629</code></a> <a href="../files/.._src_litegraph.js.html#l1739"><code>..&#x2F;src&#x2F;litegraph.js:1739</code></a>
</p> </p>
@@ -2306,7 +2307,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1604"><code>..&#x2F;src&#x2F;litegraph.js:1604</code></a> <a href="../files/.._src_litegraph.js.html#l1714"><code>..&#x2F;src&#x2F;litegraph.js:1714</code></a>
</p> </p>
@@ -2346,7 +2347,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1830"><code>..&#x2F;src&#x2F;litegraph.js:1830</code></a> <a href="../files/.._src_litegraph.js.html#l1940"><code>..&#x2F;src&#x2F;litegraph.js:1940</code></a>
</p> </p>
@@ -2413,7 +2414,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l1853"><code>..&#x2F;src&#x2F;litegraph.js:1853</code></a> <a href="../files/.._src_litegraph.js.html#l1963"><code>..&#x2F;src&#x2F;litegraph.js:1963</code></a>
</p> </p>

110
doc/classes/LiteGraph.html
View File

@@ -170,6 +170,10 @@
<a href="#method_registerNodeType">registerNodeType</a> <a href="#method_registerNodeType">registerNodeType</a>
</li> </li>
<li class="index-item method">
<a href="#method_wrapFunctionAsNode">wrapFunctionAsNode</a>
</li>
</ul> </ul>
</div> </div>
@@ -201,7 +205,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l135"><code>..&#x2F;src&#x2F;litegraph.js:135</code></a> <a href="../files/.._src_litegraph.js.html#l165"><code>..&#x2F;src&#x2F;litegraph.js:165</code></a>
</p> </p>
@@ -261,7 +265,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l153"><code>..&#x2F;src&#x2F;litegraph.js:153</code></a> <a href="../files/.._src_litegraph.js.html#l183"><code>..&#x2F;src&#x2F;litegraph.js:183</code></a>
</p> </p>
@@ -340,7 +344,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l196"><code>..&#x2F;src&#x2F;litegraph.js:196</code></a> <a href="../files/.._src_litegraph.js.html#l226"><code>..&#x2F;src&#x2F;litegraph.js:226</code></a>
</p> </p>
@@ -406,7 +410,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l209"><code>..&#x2F;src&#x2F;litegraph.js:209</code></a> <a href="../files/.._src_litegraph.js.html#l239"><code>..&#x2F;src&#x2F;litegraph.js:239</code></a>
</p> </p>
@@ -466,7 +470,7 @@
<div class="meta"> <div class="meta">
<p> <p>
Defined in Defined in
<a href="../files/.._src_litegraph.js.html#l231"><code>..&#x2F;src&#x2F;litegraph.js:231</code></a> <a href="../files/.._src_litegraph.js.html#l261"><code>..&#x2F;src&#x2F;litegraph.js:261</code></a>
</p> </p>
@@ -558,6 +562,102 @@
</div>
<div id="method_wrapFunctionAsNode" class="method item">
<h3 class="name"><code>wrapFunctionAsNode</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>func</code>
</li>
<li class="arg">
<code>param_types</code>
</li>
<li class="arg">
<code>return_type</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l135"><code>..&#x2F;src&#x2F;litegraph.js:135</code></a>
</p>
</div>
<div class="description">
<p>Create a new node type by passing a function, it wraps it with a propper class and generates inputs according to the parameters of the function.
Useful to wrap simple methods that do not require properties, and that only process some input to generate an output.</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">name</code>
<span class="type">String</span>
<div class="param-description">
<p>node name with namespace (p.e.: 'math/sum')</p>
</div>
</li>
<li class="param">
<code class="param-name">func</code>
<span class="type">Function</span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">param_types</code>
<span class="type">Array</span>
<div class="param-description">
<p>[optional] an array containing the type of every parameter, otherwise parameters will accept any type</p>
</div>
</li>
<li class="param">
<code class="param-name">return_type</code>
<span class="type">String</span>
<div class="param-description">
<p>[optional] string with the return type, otherwise it will be generic</p>
</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>

188
doc/data.json
View File

@@ -39,7 +39,7 @@
"plugin_for": [], "plugin_for": [],
"extension_for": [], "extension_for": [],
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 328, "line": 378,
"description": "LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.", "description": "LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.",
"is_constructor": 1 "is_constructor": 1
}, },
@@ -52,7 +52,7 @@
"plugin_for": [], "plugin_for": [],
"extension_for": [], "extension_for": [],
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1379, "line": 1487,
"description": "Base Class for all the node type classes", "description": "Base Class for all the node type classes",
"params": [ "params": [
{ {
@@ -71,7 +71,7 @@
"plugin_for": [], "plugin_for": [],
"extension_for": [], "extension_for": [],
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 3074, "line": 3203,
"description": "marks as dirty the canvas, this way it will be rendered again", "description": "marks as dirty the canvas, this way it will be rendered again",
"is_constructor": 1, "is_constructor": 1,
"params": [ "params": [
@@ -102,7 +102,7 @@
"plugin_for": [], "plugin_for": [],
"extension_for": [], "extension_for": [],
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 5814, "line": 6083,
"description": "ContextMenu from LiteGUI", "description": "ContextMenu from LiteGUI",
"is_constructor": 1, "is_constructor": 1,
"params": [ "params": [
@@ -144,6 +144,36 @@
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 135, "line": 135,
"description": "Create a new node type by passing a function, it wraps it with a propper class and generates inputs according to the parameters of the function.\nUseful to wrap simple methods that do not require properties, and that only process some input to generate an output.",
"itemtype": "method",
"name": "wrapFunctionAsNode",
"params": [
{
"name": "name",
"description": "node name with namespace (p.e.: 'math/sum')",
"type": "String"
},
{
"name": "func",
"description": "",
"type": "Function"
},
{
"name": "param_types",
"description": "[optional] an array containing the type of every parameter, otherwise parameters will accept any type",
"type": "Array"
},
{
"name": "return_type",
"description": "[optional] string with the return type, otherwise it will be generic",
"type": "String"
}
],
"class": "LiteGraph"
},
{
"file": "../src/litegraph.js",
"line": 165,
"description": "Adds this method to all nodetypes, existing and to be created\n(You can add it to LGraphNode.prototype but then existing node types wont have it)", "description": "Adds this method to all nodetypes, existing and to be created\n(You can add it to LGraphNode.prototype but then existing node types wont have it)",
"itemtype": "method", "itemtype": "method",
"name": "addNodeMethod", "name": "addNodeMethod",
@@ -158,7 +188,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 153, "line": 183,
"description": "Create a node of a given type with a name. The node is not attached to any graph yet.", "description": "Create a node of a given type with a name. The node is not attached to any graph yet.",
"itemtype": "method", "itemtype": "method",
"name": "createNode", "name": "createNode",
@@ -183,7 +213,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 196, "line": 226,
"description": "Returns a registered node type with a given name", "description": "Returns a registered node type with a given name",
"itemtype": "method", "itemtype": "method",
"name": "getNodeType", "name": "getNodeType",
@@ -202,7 +232,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 209, "line": 239,
"description": "Returns a list of node types matching one category", "description": "Returns a list of node types matching one category",
"itemtype": "method", "itemtype": "method",
"name": "getNodeType", "name": "getNodeType",
@@ -221,7 +251,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 231, "line": 261,
"description": "Returns a list with all the node type categories", "description": "Returns a list with all the node type categories",
"itemtype": "method", "itemtype": "method",
"name": "getNodeTypesCategories", "name": "getNodeTypesCategories",
@@ -233,7 +263,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 352, "line": 404,
"description": "Removes all nodes from this graph", "description": "Removes all nodes from this graph",
"itemtype": "method", "itemtype": "method",
"name": "clear", "name": "clear",
@@ -241,7 +271,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 401, "line": 453,
"description": "Attach Canvas to this graph", "description": "Attach Canvas to this graph",
"itemtype": "method", "itemtype": "method",
"name": "attachCanvas", "name": "attachCanvas",
@@ -256,7 +286,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 420, "line": 472,
"description": "Detach Canvas from this graph", "description": "Detach Canvas from this graph",
"itemtype": "method", "itemtype": "method",
"name": "detachCanvas", "name": "detachCanvas",
@@ -271,7 +301,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 438, "line": 490,
"description": "Starts running this graph every interval milliseconds.", "description": "Starts running this graph every interval milliseconds.",
"itemtype": "method", "itemtype": "method",
"name": "start", "name": "start",
@@ -286,7 +316,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 466, "line": 518,
"description": "Stops the execution loop of the graph", "description": "Stops the execution loop of the graph",
"itemtype": "method", "itemtype": "method",
"name": "stop execution", "name": "stop execution",
@@ -294,7 +324,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 488, "line": 540,
"description": "Run N steps (cycles) of the graph", "description": "Run N steps (cycles) of the graph",
"itemtype": "method", "itemtype": "method",
"name": "runStep", "name": "runStep",
@@ -309,7 +339,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 567, "line": 619,
"description": "Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\nnodes with only inputs.", "description": "Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\nnodes with only inputs.",
"itemtype": "method", "itemtype": "method",
"name": "updateExecutionOrder", "name": "updateExecutionOrder",
@@ -317,7 +347,15 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 671, "line": 736,
"description": "Positions every node in a more readable manner",
"itemtype": "method",
"name": "arrange",
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 780,
"description": "Returns the amount of time the graph has been running in milliseconds", "description": "Returns the amount of time the graph has been running in milliseconds",
"itemtype": "method", "itemtype": "method",
"name": "getTime", "name": "getTime",
@@ -329,7 +367,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 682, "line": 790,
"description": "Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant", "description": "Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant",
"itemtype": "method", "itemtype": "method",
"name": "getFixedTime", "name": "getFixedTime",
@@ -341,7 +379,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 693, "line": 801,
"description": "Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\nif the nodes are using graphical actions", "description": "Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\nif the nodes are using graphical actions",
"itemtype": "method", "itemtype": "method",
"name": "getElapsedTime", "name": "getElapsedTime",
@@ -353,7 +391,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 705, "line": 813,
"description": "Sends an event to all the nodes, useful to trigger stuff", "description": "Sends an event to all the nodes, useful to trigger stuff",
"itemtype": "method", "itemtype": "method",
"name": "sendEventToAllNodes", "name": "sendEventToAllNodes",
@@ -373,7 +411,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 748, "line": 856,
"description": "Adds a new node instasnce to this graph", "description": "Adds a new node instasnce to this graph",
"itemtype": "method", "itemtype": "method",
"name": "add", "name": "add",
@@ -388,7 +426,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 804, "line": 912,
"description": "Removes a node from the graph", "description": "Removes a node from the graph",
"itemtype": "method", "itemtype": "method",
"name": "remove", "name": "remove",
@@ -403,7 +441,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 873, "line": 981,
"description": "Returns a node by its id.", "description": "Returns a node by its id.",
"itemtype": "method", "itemtype": "method",
"name": "getNodeById", "name": "getNodeById",
@@ -418,7 +456,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 886, "line": 994,
"description": "Returns a list of nodes that matches a class", "description": "Returns a list of nodes that matches a class",
"itemtype": "method", "itemtype": "method",
"name": "findNodesByClass", "name": "findNodesByClass",
@@ -437,7 +475,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 902, "line": 1010,
"description": "Returns a list of nodes that matches a type", "description": "Returns a list of nodes that matches a type",
"itemtype": "method", "itemtype": "method",
"name": "findNodesByType", "name": "findNodesByType",
@@ -456,7 +494,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 919, "line": 1027,
"description": "Returns a list of nodes that matches a name", "description": "Returns a list of nodes that matches a name",
"itemtype": "method", "itemtype": "method",
"name": "findNodesByName", "name": "findNodesByName",
@@ -475,7 +513,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 935, "line": 1043,
"description": "Returns the top-most node in this position of the canvas", "description": "Returns the top-most node in this position of the canvas",
"itemtype": "method", "itemtype": "method",
"name": "getNodeOnPos", "name": "getNodeOnPos",
@@ -504,7 +542,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1122, "line": 1230,
"description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph", "description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph",
"itemtype": "method", "itemtype": "method",
"name": "setInputData", "name": "setInputData",
@@ -524,7 +562,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1137, "line": 1245,
"description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside", "description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside",
"itemtype": "method", "itemtype": "method",
"name": "setInputData", "name": "setInputData",
@@ -543,7 +581,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1177, "line": 1285,
"description": "returns if the graph is in live mode", "description": "returns if the graph is in live mode",
"itemtype": "method", "itemtype": "method",
"name": "isLive", "name": "isLive",
@@ -551,7 +589,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1214, "line": 1322,
"description": "Creates a Object containing all the info about this graph, it can be serialized", "description": "Creates a Object containing all the info about this graph, it can be serialized",
"itemtype": "method", "itemtype": "method",
"name": "serialize", "name": "serialize",
@@ -563,7 +601,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1247, "line": 1355,
"description": "Configure a graph from a JSON string", "description": "Configure a graph from a JSON string",
"itemtype": "method", "itemtype": "method",
"name": "configure", "name": "configure",
@@ -578,7 +616,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1432, "line": 1542,
"description": "configure a node from an object containing the serialized info", "description": "configure a node from an object containing the serialized info",
"itemtype": "method", "itemtype": "method",
"name": "configure", "name": "configure",
@@ -586,7 +624,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1528, "line": 1638,
"description": "serialize the content", "description": "serialize the content",
"itemtype": "method", "itemtype": "method",
"name": "serialize", "name": "serialize",
@@ -594,7 +632,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1604, "line": 1714,
"description": "serialize and stringify", "description": "serialize and stringify",
"itemtype": "method", "itemtype": "method",
"name": "toString", "name": "toString",
@@ -602,7 +640,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1616, "line": 1726,
"description": "get the title string", "description": "get the title string",
"itemtype": "method", "itemtype": "method",
"name": "getTitle", "name": "getTitle",
@@ -610,7 +648,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1629, "line": 1739,
"description": "sets the output data", "description": "sets the output data",
"itemtype": "method", "itemtype": "method",
"name": "setOutputData", "name": "setOutputData",
@@ -630,7 +668,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1665, "line": 1775,
"description": "retrieves the input data (data traveling through the connection) from one slot", "description": "retrieves the input data (data traveling through the connection) from one slot",
"itemtype": "method", "itemtype": "method",
"name": "getInputData", "name": "getInputData",
@@ -654,7 +692,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1701, "line": 1811,
"description": "tells you if there is a connection in one input slot", "description": "tells you if there is a connection in one input slot",
"itemtype": "method", "itemtype": "method",
"name": "isInputConnected", "name": "isInputConnected",
@@ -673,7 +711,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1714, "line": 1824,
"description": "tells you info about an input connection (which node, type, etc)", "description": "tells you info about an input connection (which node, type, etc)",
"itemtype": "method", "itemtype": "method",
"name": "getInputInfo", "name": "getInputInfo",
@@ -692,7 +730,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1729, "line": 1839,
"description": "returns the node connected in the input slot", "description": "returns the node connected in the input slot",
"itemtype": "method", "itemtype": "method",
"name": "getInputNode", "name": "getInputNode",
@@ -711,7 +749,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1750, "line": 1860,
"description": "tells you the last output data that went in that slot", "description": "tells you the last output data that went in that slot",
"itemtype": "method", "itemtype": "method",
"name": "getOutputData", "name": "getOutputData",
@@ -730,7 +768,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1768, "line": 1878,
"description": "tells you info about an output connection (which node, type, etc)", "description": "tells you info about an output connection (which node, type, etc)",
"itemtype": "method", "itemtype": "method",
"name": "getOutputInfo", "name": "getOutputInfo",
@@ -749,7 +787,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1784, "line": 1894,
"description": "tells you if there is a connection in one output slot", "description": "tells you if there is a connection in one output slot",
"itemtype": "method", "itemtype": "method",
"name": "isOutputConnected", "name": "isOutputConnected",
@@ -768,7 +806,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1797, "line": 1907,
"description": "retrieves all the nodes connected to this output slot", "description": "retrieves all the nodes connected to this output slot",
"itemtype": "method", "itemtype": "method",
"name": "getOutputNodes", "name": "getOutputNodes",
@@ -787,7 +825,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1830, "line": 1940,
"description": "Triggers an event in this node, this will trigger any output with the same name", "description": "Triggers an event in this node, this will trigger any output with the same name",
"itemtype": "method", "itemtype": "method",
"name": "trigger", "name": "trigger",
@@ -807,7 +845,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1853, "line": 1963,
"description": "Triggers an slot event in this node", "description": "Triggers an slot event in this node",
"itemtype": "method", "itemtype": "method",
"name": "triggerSlot", "name": "triggerSlot",
@@ -827,7 +865,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1900, "line": 2010,
"description": "add a new property to this node", "description": "add a new property to this node",
"itemtype": "method", "itemtype": "method",
"name": "addProperty", "name": "addProperty",
@@ -857,7 +895,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1926, "line": 2036,
"description": "add a new output slot to use in this node", "description": "add a new output slot to use in this node",
"itemtype": "method", "itemtype": "method",
"name": "addOutput", "name": "addOutput",
@@ -882,7 +920,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1949, "line": 2059,
"description": "add a new output slot to use in this node", "description": "add a new output slot to use in this node",
"itemtype": "method", "itemtype": "method",
"name": "addOutputs", "name": "addOutputs",
@@ -897,7 +935,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1974, "line": 2084,
"description": "remove an existing output slot", "description": "remove an existing output slot",
"itemtype": "method", "itemtype": "method",
"name": "removeOutput", "name": "removeOutput",
@@ -912,7 +950,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 1988, "line": 2098,
"description": "add a new input slot to use in this node", "description": "add a new input slot to use in this node",
"itemtype": "method", "itemtype": "method",
"name": "addInput", "name": "addInput",
@@ -937,7 +975,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2012, "line": 2122,
"description": "add several new input slots in this node", "description": "add several new input slots in this node",
"itemtype": "method", "itemtype": "method",
"name": "addInputs", "name": "addInputs",
@@ -952,7 +990,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2037, "line": 2147,
"description": "remove an existing input slot", "description": "remove an existing input slot",
"itemtype": "method", "itemtype": "method",
"name": "removeInput", "name": "removeInput",
@@ -967,7 +1005,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2051, "line": 2161,
"description": "add an special connection to this node (used for special kinds of graphs)", "description": "add an special connection to this node (used for special kinds of graphs)",
"itemtype": "method", "itemtype": "method",
"name": "addConnection", "name": "addConnection",
@@ -997,7 +1035,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2072, "line": 2182,
"description": "computes the size of a node according to its inputs and output slots", "description": "computes the size of a node according to its inputs and output slots",
"itemtype": "method", "itemtype": "method",
"name": "computeSize", "name": "computeSize",
@@ -1016,8 +1054,8 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2123, "line": 2233,
"description": "returns the bounding of the object, used for rendering purposes", "description": "returns the bounding of the object, used for rendering purposes\nbounding is: [topleft_cornerx, topleft_cornery, width, height]",
"itemtype": "method", "itemtype": "method",
"name": "getBounding", "name": "getBounding",
"return": { "return": {
@@ -1028,7 +1066,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2133, "line": 2249,
"description": "checks if a point is inside the shape of a node", "description": "checks if a point is inside the shape of a node",
"itemtype": "method", "itemtype": "method",
"name": "isPointInsideNode", "name": "isPointInsideNode",
@@ -1052,7 +1090,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2157, "line": 2273,
"description": "checks if a point is inside a node slot, and returns info about which slot", "description": "checks if a point is inside a node slot, and returns info about which slot",
"itemtype": "method", "itemtype": "method",
"name": "getSlotInPosition", "name": "getSlotInPosition",
@@ -1076,7 +1114,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2188, "line": 2304,
"description": "returns the input slot with a given name (used for dynamic slots), -1 if not found", "description": "returns the input slot with a given name (used for dynamic slots), -1 if not found",
"itemtype": "method", "itemtype": "method",
"name": "findInputSlot", "name": "findInputSlot",
@@ -1095,7 +1133,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2204, "line": 2320,
"description": "returns the output slot with a given name (used for dynamic slots), -1 if not found", "description": "returns the output slot with a given name (used for dynamic slots), -1 if not found",
"itemtype": "method", "itemtype": "method",
"name": "findOutputSlot", "name": "findOutputSlot",
@@ -1114,7 +1152,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2219, "line": 2335,
"description": "connect this node output to the input of another node", "description": "connect this node output to the input of another node",
"itemtype": "method", "itemtype": "method",
"name": "connect", "name": "connect",
@@ -1143,7 +1181,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2337, "line": 2453,
"description": "disconnect one output to an specific node", "description": "disconnect one output to an specific node",
"itemtype": "method", "itemtype": "method",
"name": "disconnectOutput", "name": "disconnectOutput",
@@ -1167,7 +1205,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2427, "line": 2543,
"description": "disconnect one input", "description": "disconnect one input",
"itemtype": "method", "itemtype": "method",
"name": "disconnectInput", "name": "disconnectInput",
@@ -1186,7 +1224,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2496, "line": 2611,
"description": "returns the center of a connection point in canvas coords", "description": "returns the center of a connection point in canvas coords",
"itemtype": "method", "itemtype": "method",
"name": "getConnectionPos", "name": "getConnectionPos",
@@ -1210,7 +1248,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2630, "line": 2745,
"description": "Collapse the node to make it smaller on the canvas", "description": "Collapse the node to make it smaller on the canvas",
"itemtype": "method", "itemtype": "method",
"name": "collapse", "name": "collapse",
@@ -1218,7 +1256,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2643, "line": 2758,
"description": "Forces the node to do not move or realign on Z", "description": "Forces the node to do not move or realign on Z",
"itemtype": "method", "itemtype": "method",
"name": "pin", "name": "pin",
@@ -1226,7 +1264,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2733, "line": 2852,
"description": "clears all the data inside", "description": "clears all the data inside",
"itemtype": "method", "itemtype": "method",
"name": "clear", "name": "clear",
@@ -1234,7 +1272,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2768, "line": 2891,
"description": "assigns a graph, you can reasign graphs to the same canvas", "description": "assigns a graph, you can reasign graphs to the same canvas",
"itemtype": "method", "itemtype": "method",
"name": "setGraph", "name": "setGraph",
@@ -1249,7 +1287,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2799, "line": 2922,
"description": "opens a graph contained inside a node in the current graph", "description": "opens a graph contained inside a node in the current graph",
"itemtype": "method", "itemtype": "method",
"name": "openSubgraph", "name": "openSubgraph",
@@ -1264,7 +1302,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2826, "line": 2949,
"description": "closes a subgraph contained inside a node", "description": "closes a subgraph contained inside a node",
"itemtype": "method", "itemtype": "method",
"name": "closeSubgraph", "name": "closeSubgraph",
@@ -1279,7 +1317,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 2842, "line": 2966,
"description": "assigns a canvas", "description": "assigns a canvas",
"itemtype": "method", "itemtype": "method",
"name": "setCanvas", "name": "setCanvas",
@@ -1294,7 +1332,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 3090, "line": 3219,
"description": "Used to attach the canvas in a popup", "description": "Used to attach the canvas in a popup",
"itemtype": "method", "itemtype": "method",
"name": "getCanvasWindow", "name": "getCanvasWindow",
@@ -1306,7 +1344,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 3104, "line": 3233,
"description": "starts rendering the content of the canvas when needed", "description": "starts rendering the content of the canvas when needed",
"itemtype": "method", "itemtype": "method",
"name": "startRendering", "name": "startRendering",
@@ -1314,7 +1352,7 @@
}, },
{ {
"file": "../src/litegraph.js", "file": "../src/litegraph.js",
"line": 3128, "line": 3257,
"description": "stops rendering the content of the canvas (to save resources)", "description": "stops rendering the content of the canvas (to save resources)",
"itemtype": "method", "itemtype": "method",
"name": "stopRendering", "name": "stopRendering",

654
doc/files/.._src_litegraph.js.html
View File

File diff suppressed because it is too large Load Diff

1
src/litegraph-editor.js
View File

@@ -184,6 +184,7 @@ Editor.prototype.addMiniWindow = function(w,h)
var canvas = miniwindow.querySelector("canvas"); var canvas = miniwindow.querySelector("canvas");
var graphcanvas = new LGraphCanvas(canvas, this.graph); var graphcanvas = new LGraphCanvas(canvas, this.graph);
graphcanvas.show_info = false;
graphcanvas.background_image = "imgs/grid.png"; graphcanvas.background_image = "imgs/grid.png";
graphcanvas.scale = 0.25; graphcanvas.scale = 0.25;
graphcanvas.allow_dragnodes = false; graphcanvas.allow_dragnodes = false;

615
src/litegraph.js
View File

@@ -132,6 +132,36 @@ var LiteGraph = global.LiteGraph = {
} }
}, },
/**
* Create a new node type by passing a function, it wraps it with a propper class and generates inputs according to the parameters of the function.
* Useful to wrap simple methods that do not require properties, and that only process some input to generate an output.
* @method wrapFunctionAsNode
* @param {String} name node name with namespace (p.e.: 'math/sum')
* @param {Function} func
* @param {Array} param_types [optional] an array containing the type of every parameter, otherwise parameters will accept any type
* @param {String} return_type [optional] string with the return type, otherwise it will be generic
*/
wrapFunctionAsNode: function( name, func, param_types, return_type )
{
var params = Array(func.length);
var code = "";
var names = LiteGraph.getParameterNames( func );
for(var i = 0; i < names.length; ++i)
code += "this.addInput('"+names[i]+"',"+(param_types && param_types[i] ? "'" + param_types[i] + "'" : "0") + ");\n";
code += "this.addOutput('out',"+( return_type ? "'" + return_type + "'" : 0 )+");\n";
var classobj = Function(code);
classobj.title = name.split("/").pop();
classobj.desc = "Generated from " + func.name;
classobj.prototype.onExecute = function onExecute()
{
for(var i = 0; i < params.length; ++i)
params[i] = this.getInputData(i);
var r = func.apply( this, params );
this.setOutputData(0,r);
}
this.registerNodeType( name, classobj );
},
/** /**
* Adds this method to all nodetypes, existing and to be created * Adds this method to all nodetypes, existing and to be created
* (You can add it to LGraphNode.prototype but then existing node types wont have it) * (You can add it to LGraphNode.prototype but then existing node types wont have it)
@@ -305,8 +335,20 @@ var LiteGraph = global.LiteGraph = {
if( !type_a || //generic output if( !type_a || //generic output
!type_b || //generic input !type_b || //generic input
type_a == type_b || //same type (is valid for triggers) type_a == type_b || //same type (is valid for triggers)
(type_a !== LiteGraph.EVENT && type_b !== LiteGraph.EVENT && type_a.toLowerCase() == type_b.toLowerCase()) ) //same type type_a == LiteGraph.EVENT && type_b == LiteGraph.ACTION )
return true; return true;
type_a = type_a.toLowerCase();
type_b = type_b.toLowerCase();
if( type_a.indexOf(",") == -1 && type_b.indexOf(",") == -1 )
return type_a == type_b;
var supported_types_a = type_a.split(",");
var supported_types_b = type_b.split(",");
for(var i = 0; i < supported_types_a.length; ++i)
for(var j = 0; j < supported_types_b.length; ++j)
if( supported_types_a[i] == supported_types_b[j] )
return true;
return false; return false;
} }
}; };
@@ -589,7 +631,7 @@ LGraph.prototype.updateExecutionOrder = function()
} }
//This is more internal, it computes the order and returns it //This is more internal, it computes the order and returns it
LGraph.prototype.computeExecutionOrder = function( only_onExecute ) LGraph.prototype.computeExecutionOrder = function( only_onExecute, set_level )
{ {
var L = []; var L = [];
var S = []; var S = [];
@@ -600,22 +642,30 @@ LGraph.prototype.computeExecutionOrder = function( only_onExecute )
//search for the nodes without inputs (starting nodes) //search for the nodes without inputs (starting nodes)
for (var i = 0, l = this._nodes.length; i < l; ++i) for (var i = 0, l = this._nodes.length; i < l; ++i)
{ {
var n = this._nodes[i]; var node = this._nodes[i];
if( only_onExecute && !n.onExecute ) if( only_onExecute && !node.onExecute )
continue; continue;
M[n.id] = n; //add to pending nodes M[node.id] = node; //add to pending nodes
var num = 0; //num of input connections var num = 0; //num of input connections
if(n.inputs) if(node.inputs)
for(var j = 0, l2 = n.inputs.length; j < l2; j++) for(var j = 0, l2 = node.inputs.length; j < l2; j++)
if(n.inputs[j] && n.inputs[j].link != null) if(node.inputs[j] && node.inputs[j].link != null)
num += 1; num += 1;
if(num == 0) //is a starting node if(num == 0) //is a starting node
S.push(n); {
S.push(node);
if(set_level)
node._level = 1;
}
else //num of input links else //num of input links
remaining_links[n.id] = num; {
if(set_level)
node._level = 0;
remaining_links[node.id] = num;
}
} }
while(true) while(true)
@@ -624,43 +674,49 @@ LGraph.prototype.computeExecutionOrder = function( only_onExecute )
break; break;
//get an starting node //get an starting node
var n = S.shift(); var node = S.shift();
L.push(n); //add to ordered list L.push(node); //add to ordered list
delete M[n.id]; //remove from the pending nodes delete M[node.id]; //remove from the pending nodes
if(!node.outputs)
continue;
//for every output //for every output
if(n.outputs) for(var i = 0; i < node.outputs.length; i++)
for(var i = 0; i < n.outputs.length; i++) {
var output = node.outputs[i];
//not connected
if(output == null || output.links == null || output.links.length == 0)
continue;
//for every connection
for(var j = 0; j < output.links.length; j++)
{ {
var output = n.outputs[i]; var link_id = output.links[j];
//not connected var link = this.links[link_id];
if(output == null || output.links == null || output.links.length == 0) if(!link)
continue; continue;
//for every connection //already visited link (ignore it)
for(var j = 0; j < output.links.length; j++) if(visited_links[ link.id ])
continue;
var target_node = this.getNodeById( link.target_id );
if(target_node == null)
{ {
var link_id = output.links[j]; visited_links[ link.id ] = true;
var link = this.links[link_id]; continue;
if(!link) continue;
//already visited link (ignore it)
if(visited_links[ link.id ])
continue;
var target_node = this.getNodeById( link.target_id );
if(target_node == null)
{
visited_links[ link.id ] = true;
continue;
}
visited_links[link.id] = true; //mark as visited
remaining_links[target_node.id] -= 1; //reduce the number of links remaining
if (remaining_links[target_node.id] == 0)
S.push(target_node); //if no more links, then add to Starters array
} }
if(set_level && (!target_node._level || target_node._level <= node._level))
target_node._level = node._level + 1;
visited_links[link.id] = true; //mark as visited
remaining_links[target_node.id] -= 1; //reduce the number of links remaining
if (remaining_links[ target_node.id ] == 0)
S.push(target_node); //if no more links, then add to starters array
} }
}
} }
//the remaining ones (loops) //the remaining ones (loops)
@@ -677,13 +733,55 @@ LGraph.prototype.computeExecutionOrder = function( only_onExecute )
return L; return L;
} }
/**
* Positions every node in a more readable manner
* @method arrange
*/
LGraph.prototype.arrange = function( margin )
{
margin = margin || 40;
var nodes = this.computeExecutionOrder( false, true );
var columns = [];
for(var i = 0; i < nodes.length; ++i)
{
var node = nodes[i];
var col = node._level || 1;
if(!columns[col])
columns[col] = [];
columns[col].push( node );
}
var x = margin;
for(var i = 0; i < columns.length; ++i)
{
var column = columns[i];
if(!column)
continue;
var max_size = 100;
var y = margin;
for(var j = 0; j < column.length; ++j)
{
var node = column[j];
node.pos[0] = x;
node.pos[1] = y;
if(node.size[0] > max_size)
max_size = node.size[0];
y += node.size[1] + margin;
}
x += max_size + margin;
}
this.setDirtyCanvas(true,true);
}
/** /**
* Returns the amount of time the graph has been running in milliseconds * Returns the amount of time the graph has been running in milliseconds
* @method getTime * @method getTime
* @return {number} number of milliseconds the graph has been running * @return {number} number of milliseconds the graph has been running
*/ */
LGraph.prototype.getTime = function() LGraph.prototype.getTime = function()
{ {
return this.globaltime; return this.globaltime;
@@ -2134,6 +2232,7 @@ LGraphNode.prototype.computeSize = function( minHeight, out )
/** /**
* returns the bounding of the object, used for rendering purposes * returns the bounding of the object, used for rendering purposes
* bounding is: [topleft_cornerx, topleft_cornery, width, height]
* @method getBounding * @method getBounding
* @return {Float32Array[4]} the total size * @return {Float32Array[4]} the total size
*/ */
@@ -2142,8 +2241,8 @@ LGraphNode.prototype.getBounding = function( out )
out = out || new Float32Array(4); out = out || new Float32Array(4);
out[0] = this.pos[0] - 4; out[0] = this.pos[0] - 4;
out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT; out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;
out[2] = this.pos[0] + this.size[0] + 4; out[2] = this.size[0] + 4;
out[3] = this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT; out[3] = this.size[1] + LiteGraph.NODE_TITLE_HEIGHT;
return out; return out;
} }
@@ -2489,8 +2588,7 @@ LGraphNode.prototype.disconnectInput = function( slot )
//search in the inputs list for this link //search in the inputs list for this link
for(var i = 0, l = output.links.length; i < l; i++) for(var i = 0, l = output.links.length; i < l; i++)
{ {
var link_id = output.links[i]; if( output.links[i] == link_id )
if( link_info.target_id == this.id )
{ {
output.links.splice(i,1); output.links.splice(i,1);
break; break;
@@ -2698,7 +2796,7 @@ function LGraphCanvas( canvas, graph, options )
//if(graph === undefined) //if(graph === undefined)
// throw ("No graph assigned"); // throw ("No graph assigned");
this.background_image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=' this.background_image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII='
if(canvas && canvas.constructor === String ) if(canvas && canvas.constructor === String )
canvas = document.querySelector( canvas ); canvas = document.querySelector( canvas );
@@ -2722,6 +2820,8 @@ function LGraphCanvas( canvas, graph, options )
this.allow_dragcanvas = true; this.allow_dragcanvas = true;
this.allow_dragnodes = true; this.allow_dragnodes = true;
this.allow_interaction = true; //allow to control widgets, buttons, collapse, etc this.allow_interaction = true; //allow to control widgets, buttons, collapse, etc
this.drag_mode = false;
this.dragging_rectangle = null;
this.always_render_background = false; this.always_render_background = false;
this.render_connections_shadows = false; //too much cpu this.render_connections_shadows = false; //too much cpu
@@ -2764,11 +2864,15 @@ LGraphCanvas.prototype.clear = function()
this.scale = 1; this.scale = 1;
this.offset = [0,0]; this.offset = [0,0];
this.dragging_rectangle = null;
this.selected_nodes = {}; this.selected_nodes = {};
this.visible_nodes = [];
this.node_dragged = null; this.node_dragged = null;
this.node_over = null; this.node_over = null;
this.node_capturing_input = null; this.node_capturing_input = null;
this.connecting_node = null; this.connecting_node = null;
this.highlighted_links = {};
this.dirty_canvas = true; this.dirty_canvas = true;
this.dirty_bgcanvas = true; this.dirty_bgcanvas = true;
@@ -2854,6 +2958,7 @@ LGraphCanvas.prototype.closeSubgraph = function()
return; return;
var graph = this._graph_stack.pop(); var graph = this._graph_stack.pop();
this.selected_nodes = {}; this.selected_nodes = {};
this.highlighted_links = {};
graph.attachCanvas(this); graph.attachCanvas(this);
this.setDirty(true,true); this.setDirty(true,true);
} }
@@ -2941,6 +3046,8 @@ LGraphCanvas.prototype.bindEvents = function()
} }
var canvas = this.canvas; var canvas = this.canvas;
var ref_window = this.getCanvasWindow();
var document = ref_window.document; //hack used when moving canvas between windows
this._mousedown_callback = this.processMouseDown.bind(this); this._mousedown_callback = this.processMouseDown.bind(this);
this._mousewheel_callback = this.processMouseWheel.bind(this); this._mousewheel_callback = this.processMouseWheel.bind(this);
@@ -2964,8 +3071,8 @@ LGraphCanvas.prototype.bindEvents = function()
//Keyboard ****************** //Keyboard ******************
this._key_callback = this.processKey.bind(this); this._key_callback = this.processKey.bind(this);
canvas.addEventListener("keydown", this._key_callback ); canvas.addEventListener("keydown", this._key_callback, true );
canvas.addEventListener("keyup", this._key_callback ); document.addEventListener("keyup", this._key_callback, true ); //in document, otherwise it doesnt fire keyup
//Droping Stuff over nodes ************************************ //Droping Stuff over nodes ************************************
this._ondrop_callback = this.processDrop.bind(this); this._ondrop_callback = this.processDrop.bind(this);
@@ -2986,11 +3093,14 @@ LGraphCanvas.prototype.unbindEvents = function()
return; return;
} }
var ref_window = this.getCanvasWindow();
var document = ref_window.document;
this.canvas.removeEventListener( "mousedown", this._mousedown_callback ); this.canvas.removeEventListener( "mousedown", this._mousedown_callback );
this.canvas.removeEventListener( "mousewheel", this._mousewheel_callback ); this.canvas.removeEventListener( "mousewheel", this._mousewheel_callback );
this.canvas.removeEventListener( "DOMMouseScroll", this._mousewheel_callback ); this.canvas.removeEventListener( "DOMMouseScroll", this._mousewheel_callback );
this.canvas.removeEventListener( "keydown", this._key_callback ); this.canvas.removeEventListener( "keydown", this._key_callback );
this.canvas.removeEventListener( "keyup", this._key_callback ); document.removeEventListener( "keyup", this._key_callback );
this.canvas.removeEventListener( "contextmenu", this._doNothing ); this.canvas.removeEventListener( "contextmenu", this._doNothing );
this.canvas.removeEventListener( "drop", this._ondrop_callback ); this.canvas.removeEventListener( "drop", this._ondrop_callback );
this.canvas.removeEventListener( "dragenter", this._doReturnTrue ); this.canvas.removeEventListener( "dragenter", this._doReturnTrue );
@@ -3181,34 +3291,30 @@ LGraphCanvas.prototype.processMouseDown = function(e)
var n = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes ); var n = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );
var skip_dragging = false; var skip_dragging = false;
var skip_action = false;
LiteGraph.closeAllContextMenus( ref_window ); LiteGraph.closeAllContextMenus( ref_window );
if(e.which == 1) //left button mouse if(e.which == 1) //left button mouse
{ {
if(!e.shiftKey) //REFACTOR: integrate with function if( e.ctrlKey )
{ {
//no node or another node selected this.dragging_rectangle = new Float32Array(4);
if (!n || !this.selected_nodes[n.id]) { this.dragging_rectangle[0] = e.canvasX;
this.dragging_rectangle[1] = e.canvasY;
var todeselect = []; this.dragging_rectangle[2] = 1;
for (var i in this.selected_nodes) this.dragging_rectangle[3] = 1;
if (this.selected_nodes[i] != n) skip_action = true;
todeselect.push(this.selected_nodes[i]);
//two passes to avoid problems modifying the container
for (var i in todeselect)
this.processNodeDeselected(todeselect[i]);
}
} }
var clicking_canvas_bg = false; var clicking_canvas_bg = false;
//when clicked on top of a node //when clicked on top of a node
//and it is not interactive //and it is not interactive
if(n && this.allow_interaction ) if( n && this.allow_interaction && !skip_action )
{ {
if(!this.live_mode && !n.flags.pinned) if(!this.live_mode && !n.flags.pinned)
this.bringToFront(n); //if it wasnt selected? this.bringToFront(n); //if it wasnt selected?
var skip_action = false;
//not dragging mouse to connect two slots //not dragging mouse to connect two slots
if(!this.connecting_node && !n.flags.collapsed && !this.live_mode) if(!this.connecting_node && !n.flags.collapsed && !this.live_mode)
@@ -3305,7 +3411,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
else else
clicking_canvas_bg = true; clicking_canvas_bg = true;
if(clicking_canvas_bg && this.allow_dragcanvas) if(!skip_action && clicking_canvas_bg && this.allow_dragcanvas)
{ {
this.dragging_canvas = true; this.dragging_canvas = true;
} }
@@ -3361,7 +3467,13 @@ LGraphCanvas.prototype.processMouseMove = function(e)
this.last_mouse = mouse; this.last_mouse = mouse;
this.canvas_mouse = [e.canvasX, e.canvasY]; this.canvas_mouse = [e.canvasX, e.canvasY];
if(this.dragging_canvas) if( this.dragging_rectangle )
{
this.dragging_rectangle[2] = e.canvasX - this.dragging_rectangle[0];
this.dragging_rectangle[3] = e.canvasY - this.dragging_rectangle[1];
this.dirty_canvas = true;
}
else if(this.dragging_canvas)
{ {
this.offset[0] += delta[0] / this.scale; this.offset[0] += delta[0] / this.scale;
this.offset[1] += delta[1] / this.scale; this.offset[1] += delta[1] / this.scale;
@@ -3374,7 +3486,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
this.dirty_canvas = true; this.dirty_canvas = true;
//get node over //get node over
var n = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes); var n = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );
//remove mouseover flag //remove mouseover flag
for(var i = 0, l = this.graph._nodes.length; i < l; ++i) for(var i = 0, l = this.graph._nodes.length; i < l; ++i)
@@ -3513,8 +3625,32 @@ LGraphCanvas.prototype.processMouseUp = function(e)
if (e.which == 1) //left button if (e.which == 1) //left button
{ {
//dragging a connection if( this.dragging_rectangle )
if(this.connecting_node) {
if(this.graph)
{
var nodes = this.graph._nodes;
var node_bounding = new Float32Array(4);
this.deselectAllNodes();
if( this.dragging_rectangle[2] < 0 ) //flip if negative width
this.dragging_rectangle[0] += this.dragging_rectangle[2];
if( this.dragging_rectangle[3] < 0 ) //flip if negative height
this.dragging_rectangle[1] += this.dragging_rectangle[3];
this.dragging_rectangle[2] = Math.abs( this.dragging_rectangle[2] * this.scale ); //abs to convert negative width
this.dragging_rectangle[3] = Math.abs( this.dragging_rectangle[3] * this.scale ); //abs to convert negative height
for(var i = 0; i < nodes.length; ++i)
{
var node = nodes[i];
node.getBounding( node_bounding );
if(!overlapBounding( this.dragging_rectangle, node_bounding ))
continue; //out of the visible area
this.selectNode( node, true );
}
}
this.dragging_rectangle = null;
}
else if(this.connecting_node) //dragging a connection
{ {
this.dirty_canvas = true; this.dirty_canvas = true;
this.dirty_bgcanvas = true; this.dirty_bgcanvas = true;
@@ -3543,8 +3679,8 @@ LGraphCanvas.prototype.processMouseUp = function(e)
if(this.connecting_output.type == LiteGraph.EVENT) if(this.connecting_output.type == LiteGraph.EVENT)
this.connecting_node.connect( this.connecting_slot, node, LiteGraph.EVENT ); this.connecting_node.connect( this.connecting_slot, node, LiteGraph.EVENT );
else else
if(input && !input.link && input.type == this.connecting_output.type) //toLowerCase missing if(input && !input.link && LiteGraph.isValidConnection( input.type && this.connecting_output.type ) )
this.connecting_node.connect(this.connecting_slot, node, 0); this.connecting_node.connect( this.connecting_slot, node, 0 );
} }
} }
} }
@@ -3573,6 +3709,13 @@ LGraphCanvas.prototype.processMouseUp = function(e)
} }
else //no node being dragged else //no node being dragged
{ {
//get node over
var node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );
var now = LiteGraph.getTime();
if ( !node && (now - this.last_mouseclick) < 300 )
this.deselectAllNodes();
this.dirty_canvas = true; this.dirty_canvas = true;
this.dragging_canvas = false; this.dragging_canvas = false;
@@ -3671,17 +3814,23 @@ LGraphCanvas.prototype.processKey = function(e)
return; return;
var block_default = false; var block_default = false;
//console.log(e); //debug
if(e.target.localName == "input") if(e.target.localName == "input")
return; return;
if(e.type == "keydown") if(e.type == "keydown")
{ {
console.log(e); if(e.keyCode == 32)
{
this.dragging_canvas = true;
block_default = true;
}
//select all Control A //select all Control A
if(e.keyCode == 65 && e.ctrlKey) if(e.keyCode == 65 && e.ctrlKey)
{ {
this.selectAllNodes(); this.selectNodes();
block_default = true; block_default = true;
} }
@@ -3689,36 +3838,16 @@ LGraphCanvas.prototype.processKey = function(e)
{ {
if(this.selected_nodes) if(this.selected_nodes)
{ {
var nodes_data = []; this.copyToClipboard();
for(var i in this.selected_nodes)
nodes_data.push( this.selected_nodes[i].serialize() );
localStorage.setItem( "litegrapheditor_clipboard", JSON.stringify(nodes_data) );
block_default = true; block_default = true;
} }
} }
if(e.code == "KeyV" && (e.metaKey || e.ctrlKey) && !e.shiftKey ) //paste if(e.code == "KeyV" && (e.metaKey || e.ctrlKey) && !e.shiftKey ) //paste
{ {
var data = localStorage.getItem( "litegrapheditor_clipboard" ); this.pasteFromClipboard();
if(data)
{
var nodes_data = JSON.parse(data);
for(var i = 0; i < nodes_data.length; ++i)
{
var node_data = nodes_data[i];
var node = LiteGraph.createNode( node_data.type );
if(node)
{
node.configure(node_data);
node.pos[0] += 5;
node.pos[1] += 5;
this.graph.add( node );
}
}
}
} }
//delete or backspace //delete or backspace
if(e.keyCode == 46 || e.keyCode == 8) if(e.keyCode == 46 || e.keyCode == 8)
{ {
@@ -3737,6 +3866,9 @@ LGraphCanvas.prototype.processKey = function(e)
} }
else if( e.type == "keyup" ) else if( e.type == "keyup" )
{ {
if(e.keyCode == 32)
this.dragging_canvas = false;
if(this.selected_nodes) if(this.selected_nodes)
for (var i in this.selected_nodes) for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyUp) if(this.selected_nodes[i].onKeyUp)
@@ -3752,6 +3884,79 @@ LGraphCanvas.prototype.processKey = function(e)
} }
} }
LGraphCanvas.prototype.copyToClipboard = function()
{
var clipboard_info = {
nodes: [],
links: []
};
var index = 0;
var selected_nodes_array = [];
for(var i in this.selected_nodes)
{
var node = this.selected_nodes[i];
node._relative_id = index;
selected_nodes_array.push( node );
index += 1;
}
for(var i = 0; i < selected_nodes_array.length; ++i)
{
var node = selected_nodes_array[i];
clipboard_info.nodes.push( node.clone().serialize() );
if(node.inputs && node.inputs.length)
for(var j = 0; j < node.inputs.length; ++j)
{
var input = node.inputs[j];
if(!input || input.link == null)
continue;
var link_info = this.graph.links[ input.link ];
if(!link_info)
continue;
var target_node = this.graph.getNodeById( link_info.origin_id );
if(!target_node || !this.selected_nodes[ target_node.id ] ) //improve this by allowing connections to non-selected nodes
continue; //not selected
clipboard_info.links.push([ target_node._relative_id, j, node._relative_id, link_info.target_slot ]);
}
}
localStorage.setItem( "litegrapheditor_clipboard", JSON.stringify( clipboard_info ) );
}
LGraphCanvas.prototype.pasteFromClipboard = function()
{
var data = localStorage.getItem( "litegrapheditor_clipboard" );
if(!data)
return;
//create nodes
var clipboard_info = JSON.parse(data);
var nodes = [];
for(var i = 0; i < clipboard_info.nodes.length; ++i)
{
var node_data = clipboard_info.nodes[i];
var node = LiteGraph.createNode( node_data.type );
if(node)
{
node.configure(node_data);
node.pos[0] += 5;
node.pos[1] += 5;
this.graph.add( node );
nodes.push( node );
}
}
//create links
for(var i = 0; i < clipboard_info.links.length; ++i)
{
var link_info = clipboard_info.links[i];
var origin_node = nodes[ link_info[0] ];
var target_node = nodes[ link_info[2] ];
origin_node.connect( link_info[1], target_node, link_info[3] );
}
this.selectNodes( nodes );
}
LGraphCanvas.prototype.processDrop = function(e) LGraphCanvas.prototype.processDrop = function(e)
{ {
e.preventDefault(); e.preventDefault();
@@ -3841,42 +4046,6 @@ LGraphCanvas.prototype.checkDropItem = function(e)
} }
LGraphCanvas.prototype.processNodeSelected = function(n,e)
{
n.selected = true;
if (n.onSelected)
n.onSelected();
if(e && e.shiftKey) //add to selection
this.selected_nodes[n.id] = n;
else
{
this.selected_nodes = {};
this.selected_nodes[ n.id ] = n;
}
this.dirty_canvas = true;
if(this.onNodeSelected)
this.onNodeSelected(n);
//if(this.node_in_panel) this.showNodePanel(n);
}
LGraphCanvas.prototype.processNodeDeselected = function(n)
{
n.selected = false;
if(n.onDeselected)
n.onDeselected();
delete this.selected_nodes[n.id];
if(this.onNodeDeselected)
this.onNodeDeselected(n);
this.dirty_canvas = true;
}
LGraphCanvas.prototype.processNodeDblClicked = function(n) LGraphCanvas.prototype.processNodeDblClicked = function(n)
{ {
if(this.onShowNodePanel) if(this.onShowNodePanel)
@@ -3888,44 +4057,100 @@ LGraphCanvas.prototype.processNodeDblClicked = function(n)
this.setDirty(true); this.setDirty(true);
} }
LGraphCanvas.prototype.selectNode = function(node) LGraphCanvas.prototype.processNodeSelected = function(node,e)
{ {
this.deselectAllNodes(); this.selectNode( node, e && e.shiftKey );
if(this.onNodeSelected)
if(!node) this.onNodeSelected(node);
return;
if(!node.selected && node.onSelected)
node.onSelected();
node.selected = true;
this.selected_nodes[ node.id ] = node;
this.setDirty(true);
} }
LGraphCanvas.prototype.selectAllNodes = function() LGraphCanvas.prototype.processNodeDeselected = function(node)
{ {
for(var i = 0; i < this.graph._nodes.length; ++i) this.deselectNode(node);
if(this.onNodeDeselected)
this.onNodeDeselected(node);
}
LGraphCanvas.prototype.selectNode = function( node, add_to_current_selection )
{
if(node == null)
this.deselectAllNodes();
else
this.selectNodes([node], add_to_current_selection );
}
LGraphCanvas.prototype.selectNodes = function( nodes, add_to_current_selection )
{
if(!add_to_current_selection)
this.deselectAllNodes();
nodes = nodes || this.graph._nodes;
for(var i = 0; i < nodes.length; ++i)
{ {
var n = this.graph._nodes[i]; var node = nodes[i];
if(!n.selected && n.onSelected) if(node.selected)
n.onSelected(); continue;
n.selected = true;
this.selected_nodes[this.graph._nodes[i].id] = n; if( !node.selected && node.onSelected )
node.onSelected();
node.selected = true;
this.selected_nodes[ node.id ] = node;
if(node.inputs)
for(var i = 0; i < node.inputs.length; ++i)
this.highlighted_links[ node.inputs[i].link ] = true;
if(node.outputs)
for(var i = 0; i < node.outputs.length; ++i)
{
var out = node.outputs[i];
if( out.links )
for(var j = 0; j < out.links.length; ++j)
this.highlighted_links[ out.links[j] ] = true;
}
} }
this.setDirty(true); this.setDirty(true);
} }
LGraphCanvas.prototype.deselectNode = function( node )
{
if(!node.selected)
return;
if(node.onDeselected)
node.onDeselected();
node.selected = false;
//remove highlighted
if(node.inputs)
for(var i = 0; i < node.inputs.length; ++i)
delete this.highlighted_links[ node.inputs[i].link ];
if(node.outputs)
for(var i = 0; i < node.outputs.length; ++i)
{
var out = node.outputs[i];
if( out.links )
for(var j = 0; j < out.links.length; ++j)
delete this.highlighted_links[ out.links[j] ];
}
}
LGraphCanvas.prototype.deselectAllNodes = function() LGraphCanvas.prototype.deselectAllNodes = function()
{ {
for(var i in this.selected_nodes) if(!this.graph)
return;
var nodes = this.graph._nodes;
for(var i = 0, l = nodes.length; i < l; ++i)
{ {
var n = this.selected_nodes; var node = nodes[i];
if(n.onDeselected) if(!node.selected)
n.onDeselected(); continue;
n.selected = false; if(node.onDeselected)
node.onDeselected();
node.selected = false;
} }
this.selected_nodes = {}; this.selected_nodes = {};
this.highlighted_links = {};
this.setDirty(true); this.setDirty(true);
} }
@@ -3938,6 +4163,7 @@ LGraphCanvas.prototype.deleteSelectedNodes = function()
this.graph.remove(m); this.graph.remove(m);
} }
this.selected_nodes = {}; this.selected_nodes = {};
this.highlighted_links = {};
this.setDirty(true); this.setDirty(true);
} }
@@ -3982,20 +4208,25 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center)
this.dirty_bgcanvas = true; this.dirty_bgcanvas = true;
} }
LGraphCanvas.prototype.convertOffsetToCanvas = function(pos) LGraphCanvas.prototype.convertOffsetToCanvas = function( pos, out )
{ {
return [pos[0] / this.scale - this.offset[0], pos[1] / this.scale - this.offset[1]]; out = out || [];
out[0] = pos[0] / this.scale - this.offset[0];
out[1] = pos[1] / this.scale - this.offset[1];
return out;
} }
LGraphCanvas.prototype.convertCanvasToOffset = function(pos) LGraphCanvas.prototype.convertCanvasToOffset = function( pos, out )
{ {
return [(pos[0] + this.offset[0]) * this.scale, out = out || [];
(pos[1] + this.offset[1]) * this.scale ]; out[0] = (pos[0] + this.offset[0]) * this.scale;
out[1] = (pos[1] + this.offset[1]) * this.scale;
return out;
} }
LGraphCanvas.prototype.convertEventToCanvas = function(e) LGraphCanvas.prototype.convertEventToCanvas = function(e)
{ {
var rect = this.canvas.getClientRects()[0]; var rect = this.canvas.getBoundingClientRect();
return this.convertOffsetToCanvas([e.pageX - rect.left,e.pageY - rect.top]); return this.convertOffsetToCanvas([e.pageX - rect.left,e.pageY - rect.top]);
} }
@@ -4022,14 +4253,16 @@ LGraphCanvas.prototype.sendToBack = function(n)
/* LGraphCanvas render */ /* LGraphCanvas render */
var temp = new Float32Array(4);
LGraphCanvas.prototype.computeVisibleNodes = function() LGraphCanvas.prototype.computeVisibleNodes = function( nodes, out )
{ {
var temp = new Float32Array(4); var visible_nodes = out || [];
var visible_nodes = []; visible_nodes.length = 0;
for(var i = 0, l = this.graph._nodes.length; i < l; ++i) nodes = nodes || this.graph._nodes;
for(var i = 0, l = nodes.length; i < l; ++i)
{ {
var n = this.graph._nodes[i]; var n = nodes[i];
//skip rendering nodes in live mode //skip rendering nodes in live mode
if(this.live_mode && !n.onDrawBackground && !n.onDrawForeground) if(this.live_mode && !n.onDrawBackground && !n.onDrawForeground)
@@ -4057,7 +4290,7 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)
{ {
var start = [-this.offset[0], -this.offset[1] ]; var start = [-this.offset[0], -this.offset[1] ];
var end = [start[0] + this.canvas.width / this.scale, start[1] + this.canvas.height / this.scale]; var end = [start[0] + this.canvas.width / this.scale, start[1] + this.canvas.height / this.scale];
this.visible_area = new Float32Array([start[0],start[1],end[0],end[1]]); this.visible_area = new Float32Array([ start[0], start[1], end[0] - start[0], end[1] - start[1] ]);
} }
if(this.dirty_bgcanvas || force_bgcanvas || this.always_render_background || (this.graph && this.graph._last_trigger_time && (now - this.graph._last_trigger_time) < 1000) ) if(this.dirty_bgcanvas || force_bgcanvas || this.always_render_background || (this.graph && this.graph._last_trigger_time && (now - this.graph._last_trigger_time) < 1000) )
@@ -4124,8 +4357,7 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//draw nodes //draw nodes
var drawn_nodes = 0; var drawn_nodes = 0;
var visible_nodes = this.computeVisibleNodes(); var visible_nodes = this.computeVisibleNodes( null, this.visible_nodes );
this.visible_nodes = visible_nodes;
for (var i = 0; i < visible_nodes.length; ++i) for (var i = 0; i < visible_nodes.length; ++i)
{ {
@@ -4177,6 +4409,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
ctx.fill(); ctx.fill();
} }
} }
if( this.dragging_rectangle )
{
ctx.strokeStyle = "#FFF";
ctx.strokeRect( this.dragging_rectangle[0], this.dragging_rectangle[1], this.dragging_rectangle[2], this.dragging_rectangle[3] );
}
ctx.restore(); ctx.restore();
} }
@@ -4281,7 +4521,7 @@ LGraphCanvas.prototype.drawBackCanvas = function()
if(pattern) if(pattern)
{ {
ctx.fillStyle = pattern; ctx.fillStyle = pattern;
ctx.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2]-this.visible_area[0],this.visible_area[3]-this.visible_area[1]); ctx.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2],this.visible_area[3]);
ctx.fillStyle = "transparent"; ctx.fillStyle = "transparent";
} }
@@ -4294,7 +4534,7 @@ LGraphCanvas.prototype.drawBackCanvas = function()
//DEBUG: show clipping area //DEBUG: show clipping area
//ctx.fillStyle = "red"; //ctx.fillStyle = "red";
//ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20); //ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - 20, this.visible_area[3] - 20);
//bg //bg
ctx.strokeStyle = "#235"; ctx.strokeStyle = "#235";
@@ -4772,6 +5012,9 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
if(!color) if(!color)
color = this.default_link_color; color = this.default_link_color;
if( link != null && this.highlighted_links[ link.id ] )
color = "#FFF";
//begin line shape //begin line shape
ctx.beginPath(); ctx.beginPath();
@@ -5381,7 +5624,7 @@ LGraphCanvas.prototype.createDialog = function( html, options )
dialog.className = "graphdialog"; dialog.className = "graphdialog";
dialog.innerHTML = html; dialog.innerHTML = html;
var rect = this.canvas.getClientRects()[0]; var rect = this.canvas.getBoundingClientRect();
var offsetx = -20; var offsetx = -20;
var offsety = -20; var offsety = -20;
if(rect) if(rect)
@@ -5517,7 +5760,8 @@ LGraphCanvas.onMenuNodeClone = function( value, options, e, menu, node )
{ {
if(node.clonable == false) return; if(node.clonable == false) return;
var newnode = node.clone(); var newnode = node.clone();
if(!newnode) return; if(!newnode)
return;
newnode.pos = [node.pos[0]+5,node.pos[1]+5]; newnode.pos = [node.pos[0]+5,node.pos[1]+5];
node.graph.add(newnode); node.graph.add(newnode);
node.setDirtyCanvas(true,true); node.setDirtyCanvas(true,true);
@@ -5779,13 +6023,18 @@ function isInsideBounding(p,bb)
} }
LiteGraph.isInsideBounding = isInsideBounding; LiteGraph.isInsideBounding = isInsideBounding;
//boundings overlap, format: [start,end] //boundings overlap, format: [ startx, starty, width, height ]
function overlapBounding(a,b) function overlapBounding(a,b)
{ {
if ( a[0] > b[2] || var A_end_x = a[0] + a[2];
a[1] > b[3] || var A_end_y = a[1] + a[3];
a[2] < b[0] || var B_end_x = b[0] + b[2];
a[3] < b[1]) var B_end_y = b[1] + b[3];
if ( a[0] > B_end_x ||
a[1] > B_end_y ||
A_end_x < b[0] ||
A_end_y < b[1])
return false; return false;
return true; return true;
} }
@@ -6190,13 +6439,15 @@ LiteGraph.extendClass = function ( target, origin )
} }
} }
/* LiteGraph.getParameterNames = function(func) {
LiteGraph.createNodetypeWrapper = function( class_object ) return (func + '')
{ .replace(/[/][/].*$/mg,'') // strip single-line comments
//create Nodetype object .replace(/\s+/g, '') // strip white space
.replace(/[/][*][^/*]*[*][/]/g, '') // strip multi-line comments /**/
.split('){', 1)[0].replace(/^[^(]*[(]/, '') // extract the parameters
.replace(/=[^,]+/g, '') // strip any ES6 defaults
.split(',').filter(Boolean); // split & filter [""]
} }
//LiteGraph.registerNodeType("scene/global", LGraphGlobal );
*/
if( typeof(window) != "undefined" && !window["requestAnimationFrame"] ) if( typeof(window) != "undefined" && !window["requestAnimationFrame"] )
{ {

18
src/nodes/base.js
View File

@@ -363,6 +363,24 @@ Watch.prototype.onDrawBackground = function(ctx)
LiteGraph.registerNodeType("basic/watch", Watch); LiteGraph.registerNodeType("basic/watch", Watch);
//Watch a value in the editor
function Pass()
{
this.addInput("in",0);
this.addOutput("out",0);
this.size = [40,20];
}
Pass.title = "Pass";
Pass.desc = "Allows to connect different types";
Pass.prototype.onExecute = function()
{
this.setOutputData( 0, this.getInputData(0) );
}
LiteGraph.registerNodeType("basic/pass", Pass);
//Show value inside the debug console //Show value inside the debug console
function Console() function Console()

2
src/nodes/interface.js
View File

@@ -252,7 +252,7 @@ var LiteGraph = global.LiteGraph;
WidgetHSlider.title = "H.Slider"; WidgetHSlider.title = "H.Slider";
WidgetHSlider.desc = "Linear slider controller"; WidgetHSlider.desc = "Linear slider controller";
WidgetHSlider.prototype.onInit = function() WidgetHSlider.prototype.onAdded = function()
{ {
this.value = 0.5; this.value = 0.5;
this.imgfg = this.loadImage("imgs/slider_fg.png"); this.imgfg = this.loadImage("imgs/slider_fg.png");