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

resolve conflicts

Browse Source
This commit is contained in:
inventivetalent
2018-10-24 18:49:24 +02:00
parent 90764a609e e1c7103539
commit c82ea54eff
16 changed files with 28126 additions and 32409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -4,7 +4,7 @@ A library in Javascript to create graphs in the browser similar to [PureData](ht
It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
![Node Graph](imgs/node_graph_example.PNG "WebGLStudio")
![Node Graph](imgs/node_graph_example.png "WebGLStudio")
## Installation
@@ -154,6 +154,7 @@ You can write any feedback to javi.agenjo@gmail.com
- kriffe
- rappestad
- InventivetalentDev

34993
build/litegraph.js
View File

File diff suppressed because it is too large Load Diff

8504
build/litegraph.min.js vendored
View File

File diff suppressed because it is too large Load Diff

171
demo/js/demos.js
View File

@@ -81,90 +81,107 @@ function benchmark()
//Show value inside the debug console
function TestWidgetsNode()
//Show value inside the debug console
function TestWidgetsNode()
{
this.addOutput("","number");
this.properties = {};
var that = this;
this.slider = this.addWidget("slider","Slider", 0.5, function(v){}, { min: 0, max: 1} );
this.number = this.addWidget("number","Number", 0.5, function(v){}, { min: 0, max: 100} );
this.combo = this.addWidget("combo","Combo", "red", function(v){}, { values:["red","green","blue"]} );
this.button = this.addWidget("button","Button", null, function(v){}, {} );
this.size = this.computeSize();
}
TestWidgetsNode.title = "Test Widgets";
LiteGraph.registerNodeType("widget/test", TestWidgetsNode );
//Show value inside the debug console
function TestSpecialNode()
{
this.addInput("","number");
this.addOutput("","number");
this.properties = {};
var that = this;
this.size = this.computeSize();
this.enabled = false;
this.visible = false;
}
TestSpecialNode.title = "Custom Shapes";
TestSpecialNode.title_mode = LiteGraph.TRANSPARENT_TITLE;
TestSpecialNode.slot_start_y = 20;
TestSpecialNode.prototype.onDrawBackground = function(ctx)
{
if(this.flags.collapsed)
return;
ctx.fillStyle = "#555";
ctx.fillRect(0,0,this.size[0],20);
if(this.enabled)
{
this.addOutput("","number");
this.properties = {};
var that = this;
this.slider = this.addWidget("slider","Slider", 0.5, function(v){}, { min: 0, max: 1} );
this.number = this.addWidget("number","Number", 0.5, function(v){}, { min: 0, max: 100} );
this.combo = this.addWidget("combo","Combo", "red", function(v){}, { values:["red","green","blue"]} );
this.button = this.addWidget("button","Button", null, function(v){}, {} );
this.size = this.computeSize();
}
TestWidgetsNode.title = "Test Widgets";
LiteGraph.registerNodeType("widget/test", TestWidgetsNode );
//Show value inside the debug console
function TestSpecialNode()
{
this.addInput("","number");
this.addOutput("","number");
this.properties = {};
var that = this;
this.size = this.computeSize();
this.enabled = false;
this.visible = false;
}
TestSpecialNode.title = "Test Render";
TestSpecialNode.title_mode = LiteGraph.TRANSPARENT_TITLE;
TestSpecialNode.slot_start_y = 20;
TestSpecialNode.prototype.onDrawBackground = function(ctx)
{
if(this.flags.collapsed)
return;
ctx.fillStyle = "#555";
ctx.fillRect(0,0,this.size[0],20);
if(this.enabled)
{
ctx.fillStyle = "#AFB";
ctx.beginPath();
ctx.moveTo(this.size[0]-20,0);
ctx.lineTo(this.size[0]-25,20);
ctx.lineTo(this.size[0],20);
ctx.lineTo(this.size[0],0);
ctx.fill();
}
if(this.visible)
{
ctx.fillStyle = "#ABF";
ctx.beginPath();
ctx.moveTo(this.size[0]-40,0);
ctx.lineTo(this.size[0]-45,20);
ctx.lineTo(this.size[0]-25,20);
ctx.lineTo(this.size[0]-20,0);
ctx.fill();
}
ctx.strokeStyle = "#333";
ctx.fillStyle = "#AFB";
ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(this.size[0]+1,20);
ctx.moveTo(this.size[0]-20,0);
ctx.lineTo(this.size[0]-25,20);
ctx.lineTo(this.size[0],20);
ctx.lineTo(this.size[0],0);
ctx.fill();
}
if(this.visible)
{
ctx.fillStyle = "#ABF";
ctx.beginPath();
ctx.moveTo(this.size[0]-40,0);
ctx.lineTo(this.size[0]-45,20);
ctx.stroke();
ctx.lineTo(this.size[0]-25,20);
ctx.lineTo(this.size[0]-20,0);
ctx.fill();
}
TestSpecialNode.prototype.onMouseDown = function(e, pos)
{
if(pos[1] > 20)
return;
ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(this.size[0]+1,20);
ctx.moveTo(this.size[0]-20,0);
ctx.lineTo(this.size[0]-25,20);
ctx.moveTo(this.size[0]-40,0);
ctx.lineTo(this.size[0]-45,20);
ctx.stroke();
}
if( pos[0] > this.size[0] - 20)
this.enabled = !this.enabled;
else if( pos[0] > this.size[0] - 40)
this.visible = !this.visible;
}
TestSpecialNode.prototype.onMouseDown = function(e, pos)
{
if(pos[1] > 20)
return;
LiteGraph.registerNodeType("test/shape", TestSpecialNode );
if( pos[0] > this.size[0] - 20)
this.enabled = !this.enabled;
else if( pos[0] > this.size[0] - 40)
this.visible = !this.visible;
}
LiteGraph.registerNodeType("features/shape", TestSpecialNode );
//Show value inside the debug console
function TestSlotsNode()
{
this.addInput("C","number");
this.addOutput("A","number");
this.addOutput("B","number");
this.flags = { horizontal: true };
this.size = [100,40];
}
TestSlotsNode.title = "Flat Slots";
LiteGraph.registerNodeType("features/slots", TestSlotsNode );

4
doc/classes/ContextMenu.html
View File

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

253
doc/classes/LGraph.html
View File

@@ -85,7 +85,7 @@
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l378"><code>..&#x2F;src&#x2F;litegraph.js:378</code></a>
Defined in: <a href="../files/.._src_litegraph.js.html#l405"><code>..&#x2F;src&#x2F;litegraph.js:405</code></a>
</div>
@@ -102,7 +102,13 @@
<div id="method_LGraph" class="method item">
<h3 class="name"><code>LGraph</code></h3>
<span class="paren">()</span>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>o</code>
</li>
</ul><span class="paren">)</span>
</div>
@@ -114,7 +120,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l378"><code>..&#x2F;src&#x2F;litegraph.js:378</code></a>
<a href="../files/.._src_litegraph.js.html#l405"><code>..&#x2F;src&#x2F;litegraph.js:405</code></a>
</p>
@@ -125,6 +131,23 @@
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">o</code>
<span class="type">Object</span>
<div class="param-description">
<p>data from previous serialization [optional]</p>
</div>
</li>
</ul>
</div>
@@ -197,6 +220,10 @@
<li class="index-item method">
<a href="#method_findNodesByType">findNodesByType</a>
</li>
<li class="index-item method">
<a href="#method_getAncestors">getAncestors</a>
</li>
<li class="index-item method">
<a href="#method_getElapsedTime">getElapsedTime</a>
@@ -213,6 +240,10 @@
<li class="index-item method">
<a href="#method_getGlobalOutputData">getGlobalOutputData</a>
</li>
<li class="index-item method">
<a href="#method_getGroupOnPos">getGroupOnPos</a>
</li>
<li class="index-item method">
<a href="#method_getNodeById">getNodeById</a>
@@ -321,7 +352,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l856"><code>..&#x2F;src&#x2F;litegraph.js:856</code></a>
<a href="../files/.._src_litegraph.js.html#l947"><code>..&#x2F;src&#x2F;litegraph.js:947</code></a>
</p>
@@ -381,7 +412,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1065"><code>..&#x2F;src&#x2F;litegraph.js:1065</code></a>
<a href="../files/.._src_litegraph.js.html#l1194"><code>..&#x2F;src&#x2F;litegraph.js:1194</code></a>
</p>
@@ -461,7 +492,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1190"><code>..&#x2F;src&#x2F;litegraph.js:1190</code></a>
<a href="../files/.._src_litegraph.js.html#l1323"><code>..&#x2F;src&#x2F;litegraph.js:1323</code></a>
</p>
@@ -528,7 +559,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l736"><code>..&#x2F;src&#x2F;litegraph.js:736</code></a>
<a href="../files/.._src_litegraph.js.html#l827"><code>..&#x2F;src&#x2F;litegraph.js:827</code></a>
</p>
@@ -565,7 +596,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l453"><code>..&#x2F;src&#x2F;litegraph.js:453</code></a>
<a href="../files/.._src_litegraph.js.html#l489"><code>..&#x2F;src&#x2F;litegraph.js:489</code></a>
</p>
@@ -621,7 +652,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1150"><code>..&#x2F;src&#x2F;litegraph.js:1150</code></a>
<a href="../files/.._src_litegraph.js.html#l1281"><code>..&#x2F;src&#x2F;litegraph.js:1281</code></a>
</p>
@@ -687,7 +718,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1272"><code>..&#x2F;src&#x2F;litegraph.js:1272</code></a>
<a href="../files/.._src_litegraph.js.html#l1407"><code>..&#x2F;src&#x2F;litegraph.js:1407</code></a>
</p>
@@ -744,7 +775,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l404"><code>..&#x2F;src&#x2F;litegraph.js:404</code></a>
<a href="../files/.._src_litegraph.js.html#l435"><code>..&#x2F;src&#x2F;litegraph.js:435</code></a>
</p>
@@ -768,6 +799,9 @@
<li class="arg">
<code>str</code>
</li>
<li class="arg">
<code>returns</code>
</li>
</ul><span class="paren">)</span>
</div>
@@ -781,7 +815,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1403"><code>..&#x2F;src&#x2F;litegraph.js:1403</code></a>
<a href="../files/.._src_litegraph.js.html#l1542"><code>..&#x2F;src&#x2F;litegraph.js:1542</code></a>
</p>
@@ -808,6 +842,17 @@
</div>
</li>
<li class="param">
<code class="param-name">returns</code>
<span class="type">Boolean</span>
<div class="param-description">
<p>if there was any error parsing</p>
</div>
</li>
</ul>
</div>
@@ -835,7 +880,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l472"><code>..&#x2F;src&#x2F;litegraph.js:472</code></a>
<a href="../files/.._src_litegraph.js.html#l508"><code>..&#x2F;src&#x2F;litegraph.js:508</code></a>
</p>
@@ -891,7 +936,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l994"><code>..&#x2F;src&#x2F;litegraph.js:994</code></a>
<a href="../files/.._src_litegraph.js.html#l1105"><code>..&#x2F;src&#x2F;litegraph.js:1105</code></a>
</p>
@@ -957,7 +1002,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1027"><code>..&#x2F;src&#x2F;litegraph.js:1027</code></a>
<a href="../files/.._src_litegraph.js.html#l1138"><code>..&#x2F;src&#x2F;litegraph.js:1138</code></a>
</p>
@@ -1023,7 +1068,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1010"><code>..&#x2F;src&#x2F;litegraph.js:1010</code></a>
<a href="../files/.._src_litegraph.js.html#l1121"><code>..&#x2F;src&#x2F;litegraph.js:1121</code></a>
</p>
@@ -1064,6 +1109,50 @@
</div>
</div>
<div id="method_getAncestors" class="method item">
<h3 class="name"><code>getAncestors</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type">Array</span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l790"><code>..&#x2F;src&#x2F;litegraph.js:790</code></a>
</p>
</div>
<div class="description">
<p>Returns all the nodes that could affect this one (ancestors) by crawling all the inputs recursively.
It doesnt include the node itself</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Array</span>:
<p>an array with all the LGraphNodes that affect this node, in order of execution</p>
</div>
</div>
</div>
<div id="method_getElapsedTime" class="method item">
<h3 class="name"><code>getElapsedTime</code></h3>
@@ -1083,7 +1172,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l801"><code>..&#x2F;src&#x2F;litegraph.js:801</code></a>
<a href="../files/.._src_litegraph.js.html#l892"><code>..&#x2F;src&#x2F;litegraph.js:892</code></a>
</p>
@@ -1127,7 +1216,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l790"><code>..&#x2F;src&#x2F;litegraph.js:790</code></a>
<a href="../files/.._src_litegraph.js.html#l881"><code>..&#x2F;src&#x2F;litegraph.js:881</code></a>
</p>
@@ -1176,7 +1265,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1106"><code>..&#x2F;src&#x2F;litegraph.js:1106</code></a>
<a href="../files/.._src_litegraph.js.html#l1236"><code>..&#x2F;src&#x2F;litegraph.js:1236</code></a>
</p>
@@ -1241,7 +1330,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1222"><code>..&#x2F;src&#x2F;litegraph.js:1222</code></a>
<a href="../files/.._src_litegraph.js.html#l1356"><code>..&#x2F;src&#x2F;litegraph.js:1356</code></a>
</p>
@@ -1281,6 +1370,86 @@ if the nodes are using graphical actions</p>
</div>
</div>
<div id="method_getGroupOnPos" class="method item">
<h3 class="name"><code>getGroupOnPos</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>x</code>
</li>
<li class="arg">
<code>y</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type">LGraphGroup</span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1174"><code>..&#x2F;src&#x2F;litegraph.js:1174</code></a>
</p>
</div>
<div class="description">
<p>Returns the top-most group in that position</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">x</code>
<span class="type">Number</span>
<div class="param-description">
<p>the x coordinate in canvas space</p>
</div>
</li>
<li class="param">
<code class="param-name">y</code>
<span class="type">Number</span>
<div class="param-description">
<p>the y coordinate in canvas space</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">LGraphGroup</span>:
<p>the group or null</p>
</div>
</div>
</div>
<div id="method_getNodeById" class="method item">
<h3 class="name"><code>getNodeById</code></h3>
@@ -1303,7 +1472,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l981"><code>..&#x2F;src&#x2F;litegraph.js:981</code></a>
<a href="../files/.._src_litegraph.js.html#l1092"><code>..&#x2F;src&#x2F;litegraph.js:1092</code></a>
</p>
@@ -1353,7 +1522,7 @@ if the nodes are using graphical actions</p>
</div>
<span class="returns-inline">
<span class="type">Array</span>
<span class="type"><a href="../classes/LGraphNode.html" class="crosslink">LGraphNode</a></span>
</span>
@@ -1365,7 +1534,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1043"><code>..&#x2F;src&#x2F;litegraph.js:1043</code></a>
<a href="../files/.._src_litegraph.js.html#l1154"><code>..&#x2F;src&#x2F;litegraph.js:1154</code></a>
</p>
@@ -1421,8 +1590,8 @@ if the nodes are using graphical actions</p>
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Array</span>:
<p>a list with all the nodes that intersect this coordinate</p>
<span class="type"><a href="../classes/LGraphNode.html" class="crosslink">LGraphNode</a></span>:
<p>the node at this position or null</p>
</div>
</div>
@@ -1453,7 +1622,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1236"><code>..&#x2F;src&#x2F;litegraph.js:1236</code></a>
<a href="../files/.._src_litegraph.js.html#l1370"><code>..&#x2F;src&#x2F;litegraph.js:1370</code></a>
</p>
@@ -1512,7 +1681,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l780"><code>..&#x2F;src&#x2F;litegraph.js:780</code></a>
<a href="../files/.._src_litegraph.js.html#l871"><code>..&#x2F;src&#x2F;litegraph.js:871</code></a>
</p>
@@ -1552,7 +1721,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1333"><code>..&#x2F;src&#x2F;litegraph.js:1333</code></a>
<a href="../files/.._src_litegraph.js.html#l1471"><code>..&#x2F;src&#x2F;litegraph.js:1471</code></a>
</p>
@@ -1589,7 +1758,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l912"><code>..&#x2F;src&#x2F;litegraph.js:912</code></a>
<a href="../files/.._src_litegraph.js.html#l1011"><code>..&#x2F;src&#x2F;litegraph.js:1011</code></a>
</p>
@@ -1646,7 +1815,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1169"><code>..&#x2F;src&#x2F;litegraph.js:1169</code></a>
<a href="../files/.._src_litegraph.js.html#l1301"><code>..&#x2F;src&#x2F;litegraph.js:1301</code></a>
</p>
@@ -1709,7 +1878,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1291"><code>..&#x2F;src&#x2F;litegraph.js:1291</code></a>
<a href="../files/.._src_litegraph.js.html#l1427"><code>..&#x2F;src&#x2F;litegraph.js:1427</code></a>
</p>
@@ -1765,7 +1934,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1120"><code>..&#x2F;src&#x2F;litegraph.js:1120</code></a>
<a href="../files/.._src_litegraph.js.html#l1250"><code>..&#x2F;src&#x2F;litegraph.js:1250</code></a>
</p>
@@ -1831,7 +2000,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1245"><code>..&#x2F;src&#x2F;litegraph.js:1245</code></a>
<a href="../files/.._src_litegraph.js.html#l1379"><code>..&#x2F;src&#x2F;litegraph.js:1379</code></a>
</p>
@@ -1894,7 +2063,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l540"><code>..&#x2F;src&#x2F;litegraph.js:540</code></a>
<a href="../files/.._src_litegraph.js.html#l576"><code>..&#x2F;src&#x2F;litegraph.js:576</code></a>
</p>
@@ -1951,7 +2120,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l813"><code>..&#x2F;src&#x2F;litegraph.js:813</code></a>
<a href="../files/.._src_litegraph.js.html#l904"><code>..&#x2F;src&#x2F;litegraph.js:904</code></a>
</p>
@@ -2013,7 +2182,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1370"><code>..&#x2F;src&#x2F;litegraph.js:1370</code></a>
<a href="../files/.._src_litegraph.js.html#l1506"><code>..&#x2F;src&#x2F;litegraph.js:1506</code></a>
</p>
@@ -2062,7 +2231,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1083"><code>..&#x2F;src&#x2F;litegraph.js:1083</code></a>
<a href="../files/.._src_litegraph.js.html#l1213"><code>..&#x2F;src&#x2F;litegraph.js:1213</code></a>
</p>
@@ -2128,7 +2297,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1208"><code>..&#x2F;src&#x2F;litegraph.js:1208</code></a>
<a href="../files/.._src_litegraph.js.html#l1342"><code>..&#x2F;src&#x2F;litegraph.js:1342</code></a>
</p>
@@ -2194,7 +2363,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1097"><code>..&#x2F;src&#x2F;litegraph.js:1097</code></a>
<a href="../files/.._src_litegraph.js.html#l1227"><code>..&#x2F;src&#x2F;litegraph.js:1227</code></a>
</p>
@@ -2257,7 +2426,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l490"><code>..&#x2F;src&#x2F;litegraph.js:490</code></a>
<a href="../files/.._src_litegraph.js.html#l525"><code>..&#x2F;src&#x2F;litegraph.js:525</code></a>
</p>
@@ -2305,7 +2474,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l518"><code>..&#x2F;src&#x2F;litegraph.js:518</code></a>
<a href="../files/.._src_litegraph.js.html#l554"><code>..&#x2F;src&#x2F;litegraph.js:554</code></a>
</p>
@@ -2336,7 +2505,7 @@ if the nodes are using graphical actions</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l619"><code>..&#x2F;src&#x2F;litegraph.js:619</code></a>
<a href="../files/.._src_litegraph.js.html#l658"><code>..&#x2F;src&#x2F;litegraph.js:658</code></a>
</p>

1283
doc/classes/LGraphCanvas.html
View File

File diff suppressed because it is too large Load Diff

131
doc/classes/LGraphNode.html
View File

@@ -85,7 +85,7 @@
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l1535"><code>..&#x2F;src&#x2F;litegraph.js:1535</code></a>
Defined in: <a href="../files/.._src_litegraph.js.html#l1692"><code>..&#x2F;src&#x2F;litegraph.js:1692</code></a>
</div>
@@ -136,6 +136,10 @@
<li class="index-item method">
<a href="#method_addProperty">addProperty</a>
</li>
<li class="index-item method">
<a href="#method_addWidget">addWidget</a>
</li>
<li class="index-item method">
<a href="#method_collapse">collapse</a>
@@ -230,7 +234,7 @@
</li>
<li class="index-item method">
<a href="#method_isPointInsideNode">isPointInsideNode</a>
<a href="#method_isPointInside">isPointInside</a>
</li>
<li class="index-item method">
@@ -305,7 +309,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2276"><code>..&#x2F;src&#x2F;litegraph.js:2276</code></a>
<a href="../files/.._src_litegraph.js.html#l2434"><code>..&#x2F;src&#x2F;litegraph.js:2434</code></a>
</p>
@@ -397,7 +401,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2213"><code>..&#x2F;src&#x2F;litegraph.js:2213</code></a>
<a href="../files/.._src_litegraph.js.html#l2371"><code>..&#x2F;src&#x2F;litegraph.js:2371</code></a>
</p>
@@ -472,7 +476,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2237"><code>..&#x2F;src&#x2F;litegraph.js:2237</code></a>
<a href="../files/.._src_litegraph.js.html#l2395"><code>..&#x2F;src&#x2F;litegraph.js:2395</code></a>
</p>
@@ -532,7 +536,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2151"><code>..&#x2F;src&#x2F;litegraph.js:2151</code></a>
<a href="../files/.._src_litegraph.js.html#l2309"><code>..&#x2F;src&#x2F;litegraph.js:2309</code></a>
</p>
@@ -607,7 +611,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2174"><code>..&#x2F;src&#x2F;litegraph.js:2174</code></a>
<a href="../files/.._src_litegraph.js.html#l2332"><code>..&#x2F;src&#x2F;litegraph.js:2332</code></a>
</p>
@@ -670,7 +674,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2125"><code>..&#x2F;src&#x2F;litegraph.js:2125</code></a>
<a href="../files/.._src_litegraph.js.html#l2283"><code>..&#x2F;src&#x2F;litegraph.js:2283</code></a>
</p>
@@ -733,6 +737,49 @@
</div>
<div id="method_addWidget" class="method item">
<h3 class="name"><code>addWidget</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type">Float32Array4</span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2510"><code>..&#x2F;src&#x2F;litegraph.js:2510</code></a>
</p>
</div>
<div class="description">
<p>Allows to pass</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Float32Array4</span>:
<p>the total size</p>
</div>
</div>
</div>
<div id="method_collapse" class="method item">
<h3 class="name"><code>collapse</code></h3>
@@ -749,7 +796,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2860"><code>..&#x2F;src&#x2F;litegraph.js:2860</code></a>
<a href="../files/.._src_litegraph.js.html#l3072"><code>..&#x2F;src&#x2F;litegraph.js:3072</code></a>
</p>
@@ -789,7 +836,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2297"><code>..&#x2F;src&#x2F;litegraph.js:2297</code></a>
<a href="../files/.._src_litegraph.js.html#l2455"><code>..&#x2F;src&#x2F;litegraph.js:2455</code></a>
</p>
@@ -845,7 +892,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1590"><code>..&#x2F;src&#x2F;litegraph.js:1590</code></a>
<a href="../files/.._src_litegraph.js.html#l1744"><code>..&#x2F;src&#x2F;litegraph.js:1744</code></a>
</p>
@@ -891,7 +938,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2450"><code>..&#x2F;src&#x2F;litegraph.js:2450</code></a>
<a href="../files/.._src_litegraph.js.html#l2640"><code>..&#x2F;src&#x2F;litegraph.js:2640</code></a>
</p>
@@ -979,7 +1026,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2658"><code>..&#x2F;src&#x2F;litegraph.js:2658</code></a>
<a href="../files/.._src_litegraph.js.html#l2870"><code>..&#x2F;src&#x2F;litegraph.js:2870</code></a>
</p>
@@ -1048,7 +1095,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2568"><code>..&#x2F;src&#x2F;litegraph.js:2568</code></a>
<a href="../files/.._src_litegraph.js.html#l2768"><code>..&#x2F;src&#x2F;litegraph.js:2768</code></a>
</p>
@@ -1125,7 +1172,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2419"><code>..&#x2F;src&#x2F;litegraph.js:2419</code></a>
<a href="../files/.._src_litegraph.js.html#l2609"><code>..&#x2F;src&#x2F;litegraph.js:2609</code></a>
</p>
@@ -1191,7 +1238,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2435"><code>..&#x2F;src&#x2F;litegraph.js:2435</code></a>
<a href="../files/.._src_litegraph.js.html#l2625"><code>..&#x2F;src&#x2F;litegraph.js:2625</code></a>
</p>
@@ -1251,7 +1298,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2348"><code>..&#x2F;src&#x2F;litegraph.js:2348</code></a>
<a href="../files/.._src_litegraph.js.html#l2538"><code>..&#x2F;src&#x2F;litegraph.js:2538</code></a>
</p>
@@ -1304,7 +1351,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2726"><code>..&#x2F;src&#x2F;litegraph.js:2726</code></a>
<a href="../files/.._src_litegraph.js.html#l2939"><code>..&#x2F;src&#x2F;litegraph.js:2939</code></a>
</p>
@@ -1384,7 +1431,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1833"><code>..&#x2F;src&#x2F;litegraph.js:1833</code></a>
<a href="../files/.._src_litegraph.js.html#l1991"><code>..&#x2F;src&#x2F;litegraph.js:1991</code></a>
</p>
@@ -1463,7 +1510,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1869"><code>..&#x2F;src&#x2F;litegraph.js:1869</code></a>
<a href="../files/.._src_litegraph.js.html#l2027"><code>..&#x2F;src&#x2F;litegraph.js:2027</code></a>
</p>
@@ -1539,7 +1586,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1898"><code>..&#x2F;src&#x2F;litegraph.js:1898</code></a>
<a href="../files/.._src_litegraph.js.html#l2056"><code>..&#x2F;src&#x2F;litegraph.js:2056</code></a>
</p>
@@ -1604,7 +1651,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1913"><code>..&#x2F;src&#x2F;litegraph.js:1913</code></a>
<a href="../files/.._src_litegraph.js.html#l2071"><code>..&#x2F;src&#x2F;litegraph.js:2071</code></a>
</p>
@@ -1669,7 +1716,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1935"><code>..&#x2F;src&#x2F;litegraph.js:1935</code></a>
<a href="../files/.._src_litegraph.js.html#l2093"><code>..&#x2F;src&#x2F;litegraph.js:2093</code></a>
</p>
@@ -1734,7 +1781,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1959"><code>..&#x2F;src&#x2F;litegraph.js:1959</code></a>
<a href="../files/.._src_litegraph.js.html#l2117"><code>..&#x2F;src&#x2F;litegraph.js:2117</code></a>
</p>
@@ -1799,7 +1846,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1977"><code>..&#x2F;src&#x2F;litegraph.js:1977</code></a>
<a href="../files/.._src_litegraph.js.html#l2135"><code>..&#x2F;src&#x2F;litegraph.js:2135</code></a>
</p>
@@ -1864,7 +1911,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2022"><code>..&#x2F;src&#x2F;litegraph.js:2022</code></a>
<a href="../files/.._src_litegraph.js.html#l2180"><code>..&#x2F;src&#x2F;litegraph.js:2180</code></a>
</p>
@@ -1930,7 +1977,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2388"><code>..&#x2F;src&#x2F;litegraph.js:2388</code></a>
<a href="../files/.._src_litegraph.js.html#l2578"><code>..&#x2F;src&#x2F;litegraph.js:2578</code></a>
</p>
@@ -1996,7 +2043,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
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#l1942"><code>..&#x2F;src&#x2F;litegraph.js:1942</code></a>
</p>
@@ -2030,7 +2077,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2006"><code>..&#x2F;src&#x2F;litegraph.js:2006</code></a>
<a href="../files/.._src_litegraph.js.html#l2164"><code>..&#x2F;src&#x2F;litegraph.js:2164</code></a>
</p>
@@ -2077,7 +2124,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1885"><code>..&#x2F;src&#x2F;litegraph.js:1885</code></a>
<a href="../files/.._src_litegraph.js.html#l2043"><code>..&#x2F;src&#x2F;litegraph.js:2043</code></a>
</p>
@@ -2140,7 +2187,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1993"><code>..&#x2F;src&#x2F;litegraph.js:1993</code></a>
<a href="../files/.._src_litegraph.js.html#l2151"><code>..&#x2F;src&#x2F;litegraph.js:2151</code></a>
</p>
@@ -2179,8 +2226,8 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
</div>
<div id="method_isPointInsideNode" class="method item">
<h3 class="name"><code>isPointInsideNode</code></h3>
<div id="method_isPointInside" class="method item">
<h3 class="name"><code>isPointInside</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
@@ -2206,7 +2253,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2364"><code>..&#x2F;src&#x2F;litegraph.js:2364</code></a>
<a href="../files/.._src_litegraph.js.html#l2554"><code>..&#x2F;src&#x2F;litegraph.js:2554</code></a>
</p>
@@ -2270,7 +2317,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2873"><code>..&#x2F;src&#x2F;litegraph.js:2873</code></a>
<a href="../files/.._src_litegraph.js.html#l3088"><code>..&#x2F;src&#x2F;litegraph.js:3088</code></a>
</p>
@@ -2307,7 +2354,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2262"><code>..&#x2F;src&#x2F;litegraph.js:2262</code></a>
<a href="../files/.._src_litegraph.js.html#l2420"><code>..&#x2F;src&#x2F;litegraph.js:2420</code></a>
</p>
@@ -2360,7 +2407,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2199"><code>..&#x2F;src&#x2F;litegraph.js:2199</code></a>
<a href="../files/.._src_litegraph.js.html#l2357"><code>..&#x2F;src&#x2F;litegraph.js:2357</code></a>
</p>
@@ -2407,7 +2454,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1690"><code>..&#x2F;src&#x2F;litegraph.js:1690</code></a>
<a href="../files/.._src_litegraph.js.html#l1848"><code>..&#x2F;src&#x2F;litegraph.js:1848</code></a>
</p>
@@ -2447,7 +2494,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
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#l1955"><code>..&#x2F;src&#x2F;litegraph.js:1955</code></a>
</p>
@@ -2504,7 +2551,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l1772"><code>..&#x2F;src&#x2F;litegraph.js:1772</code></a>
<a href="../files/.._src_litegraph.js.html#l1930"><code>..&#x2F;src&#x2F;litegraph.js:1930</code></a>
</p>
@@ -2544,7 +2591,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2055"><code>..&#x2F;src&#x2F;litegraph.js:2055</code></a>
<a href="../files/.._src_litegraph.js.html#l2213"><code>..&#x2F;src&#x2F;litegraph.js:2213</code></a>
</p>
@@ -2611,7 +2658,7 @@ bounding is: [topleft_cornerx, topleft_cornery, width, height]</p>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l2078"><code>..&#x2F;src&#x2F;litegraph.js:2078</code></a>
<a href="../files/.._src_litegraph.js.html#l2236"><code>..&#x2F;src&#x2F;litegraph.js:2236</code></a>
</p>

14
doc/classes/LiteGraph.html
View File

@@ -205,7 +205,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l165"><code>..&#x2F;src&#x2F;litegraph.js:165</code></a>
<a href="../files/.._src_litegraph.js.html#l179"><code>..&#x2F;src&#x2F;litegraph.js:179</code></a>
</p>
@@ -265,7 +265,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l183"><code>..&#x2F;src&#x2F;litegraph.js:183</code></a>
<a href="../files/.._src_litegraph.js.html#l197"><code>..&#x2F;src&#x2F;litegraph.js:197</code></a>
</p>
@@ -344,7 +344,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l226"><code>..&#x2F;src&#x2F;litegraph.js:226</code></a>
<a href="../files/.._src_litegraph.js.html#l240"><code>..&#x2F;src&#x2F;litegraph.js:240</code></a>
</p>
@@ -410,7 +410,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l239"><code>..&#x2F;src&#x2F;litegraph.js:239</code></a>
<a href="../files/.._src_litegraph.js.html#l253"><code>..&#x2F;src&#x2F;litegraph.js:253</code></a>
</p>
@@ -470,7 +470,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l261"><code>..&#x2F;src&#x2F;litegraph.js:261</code></a>
<a href="../files/.._src_litegraph.js.html#l281"><code>..&#x2F;src&#x2F;litegraph.js:281</code></a>
</p>
@@ -519,7 +519,7 @@
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l70"><code>..&#x2F;src&#x2F;litegraph.js:70</code></a>
<a href="../files/.._src_litegraph.js.html#l82"><code>..&#x2F;src&#x2F;litegraph.js:82</code></a>
</p>
@@ -593,7 +593,7 @@
<div class="meta">
<p>
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#l149"><code>..&#x2F;src&#x2F;litegraph.js:149</code></a>
</p>

542
doc/data.json
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

42
guides/README.md
View File

@@ -7,6 +7,41 @@ Here is a list of useful info when working with LiteGraph
LGraphNode is the base class used for all the nodes classes.
To extend the other classes all the methods contained in LGraphNode.prototype are copyed to the classes when registered.
When you create a new node type you do not have to inherit from that class, when the node is registered all the methods are copied to your node prototype.
## Node settings
There are several settings that could be defined per node:
* **size**: ```[width,height]```
* **properties**: object containing the properties that could be configured by the user
* **shape**: the shape of the object (could be LiteGraph.BOX,LiteGraph.ROUND,LiteGraph.CARD)
* **flags**: several flags
⋅⋅* **resizable**: if it can be resized dragging the corner
⋅⋅* **horizontal**: if the slots should be placed horizontally on the top and bottom of the node
⋅⋅* **clip_area**: clips the content when rendering the node
There are several callbacks that could be defined:
* **onAdded**: when added to graph
* **onRemoved**: when removed from graph
* **onStart**: when the graph starts playing
* **onStop**: when the graph stops playing
* **onDrawForeground**: render the inside widgets inside the node
* **onDrawBackground**: render the background area inside the node (only in edit mode)
* **onMouseDown,onMouseMove,onMouseUp,onMouseEnter,onMouseLeave**
* **onDblClick**: double clicked in the editor
* **onExecute**: execute the node
* **onPropertyChanged**: when a property is changed in the panel (return true to skip default behaviour)
* **onGetInputs**: returns an array of possible inputs
* **onGetOutputs**: returns an array of possible outputs
* **onSerialize**: before serializing
* **onSelected**: selected in the editor
* **onDeselected**: deselected from the editor
* **onDropItem**: DOM item dropped over the node
* **onDropFile**: file dropped over the node
* **onConnectInput**: if returns false the incoming connection will be canceled
* **onConnectionsChange**: a connection changed (new one or removed) (LiteGraph.INPUT or LiteGraph.OUTPUT, slot, true if connected, link_info, input_info )
### Node slots
Every node could have several slots, stored in node.inputs and node.outputs.
@@ -23,8 +58,11 @@ Slots have the next information:
* **type**: string specifying the data type traveling through this link
* **link or links**: depending if the slot is input or ouput contains the id of the link or an array of ids
* **label**: optional, string used to rename the name as shown in the canvas.
To retrieve the data traveling through a link you can call node.getInputData or node.getOutputData
* **dir**: optional, could be LiteGraph.UP, LiteGraph.RIGHT, LiteGraph.DOWN, LiteGraph.LEFT
* **color_on**: color to render when it is connected
* **color_off**: color to render when it is not connected
To retrieve the data traveling through a link you can call ```node.getInputData``` or ```node.getOutputData```
### Define your Graph Node

BIN
imgs/node_graph_example.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
imgs/node_graph_example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

13
src/litegraph-editor.js
View File

@@ -182,6 +182,7 @@ Editor.prototype.addMiniWindow = function(w,h)
miniwindow.className = "litegraph miniwindow";
miniwindow.innerHTML = "<canvas class='graphcanvas' width='"+w+"' height='"+h+"' tabindex=10></canvas>";
var canvas = miniwindow.querySelector("canvas");
var that = this;
var graphcanvas = new LGraphCanvas(canvas, this.graph);
graphcanvas.show_info = false;
@@ -189,12 +190,24 @@ Editor.prototype.addMiniWindow = function(w,h)
graphcanvas.scale = 0.25;
graphcanvas.allow_dragnodes = false;
graphcanvas.allow_interaction = false;
graphcanvas.render_shadows = false;
graphcanvas.max_zoom = 0.25;
this.miniwindow_graphcanvas = graphcanvas;
graphcanvas.onClear = function() {
graphcanvas.scale = 0.25;
graphcanvas.allow_dragnodes = false;
graphcanvas.allow_interaction = false;
};
graphcanvas.onRenderBackground = function(canvas, ctx)
{
ctx.strokeStyle = "#567";
var tl = that.graphcanvas.convertOffsetToCanvas([0,0]);
var br = that.graphcanvas.convertOffsetToCanvas([that.graphcanvas.canvas.width,that.graphcanvas.canvas.height]);
tl = this.convertCanvasToOffset( tl );
br = this.convertCanvasToOffset( br );
ctx.lineWidth = 1;
ctx.strokeRect( Math.floor(tl[0]) + 0.5, Math.floor(tl[1]) + 0.5, Math.floor(br[0] - tl[0]), Math.floor(br[1] - tl[1]) );
}
miniwindow.style.position = "absolute";
miniwindow.style.top = "4px";

377
src/litegraph.js
View File

@@ -24,6 +24,8 @@
var LiteGraph = global.LiteGraph = {
CANVAS_GRID_SIZE: 10,
NODE_TITLE_HEIGHT: 20,
NODE_SLOT_HEIGHT: 15,
NODE_WIDGET_HEIGHT: 20,
@@ -31,7 +33,6 @@ var LiteGraph = global.LiteGraph = {
NODE_MIN_WIDTH: 50,
NODE_COLLAPSED_RADIUS: 10,
NODE_COLLAPSED_WIDTH: 80,
CANVAS_GRID_SIZE: 10,
NODE_TITLE_COLOR: "#999",
NODE_TEXT_SIZE: 14,
NODE_TEXT_COLOR: "#AAA",
@@ -40,12 +41,16 @@ var LiteGraph = global.LiteGraph = {
NODE_DEFAULT_BGCOLOR: "#444",
NODE_DEFAULT_BOXCOLOR: "#888",
NODE_DEFAULT_SHAPE: "box",
LINK_COLOR: "#AAD",
EVENT_LINK_COLOR: "#F85",
CONNECTING_LINK_COLOR: "#AFA",
MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
DEFAULT_POSITION: [100,100],//default node position
node_images_path: "",
VALID_SHAPES: ["default","box","round","card"], //,"circle"
//shapes are used for nodes but also for slots
BOX_SHAPE: 1,
ROUND_SHAPE: 2,
CIRCLE_SHAPE: 3,
@@ -64,12 +69,19 @@ var LiteGraph = global.LiteGraph = {
NEVER: 2,
ON_TRIGGER: 3,
UP: 1,
DOWN:2,
LEFT:3,
RIGHT:4,
CENTER:5,
NORMAL_TITLE: 0,
NO_TITLE: 1,
TRANSPARENT_TITLE: 2,
AUTOHIDE_TITLE: 3,
proxy: null, //used to redirect calls
node_images_path: "",
debug: false,
throw_errors: true,
@@ -2716,8 +2728,8 @@ LGraphNode.prototype.connect = function( slot, target_node, target_slot )
target_node.disconnectInput( target_slot );
//why here??
this.setDirtyCanvas(false,true);
this.graph.connectionChange( this );
//this.setDirtyCanvas(false,true);
//this.graph.connectionChange( this );
var output = this.outputs[slot];
@@ -2754,6 +2766,8 @@ LGraphNode.prototype.connect = function( slot, target_node, target_slot )
this.onConnectionsChange( LiteGraph.OUTPUT, slot, true, link_info, output ); //link_info has been created now, so its updated
if(target_node.onConnectionsChange)
target_node.onConnectionsChange( LiteGraph.INPUT, target_slot, true, link_info, input );
if( this.graph && this.graph.onNodeConnectionChange )
this.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot, target_node, target_slot );
}
this.setDirtyCanvas(false,true);
@@ -2793,7 +2807,7 @@ LGraphNode.prototype.disconnectOutput = function( slot, target_node )
if(!output.links || output.links.length == 0)
return false;
//one of the links
//one of the output links in this slot
if(target_node)
{
if(target_node.constructor === Number)
@@ -2819,11 +2833,15 @@ LGraphNode.prototype.disconnectOutput = function( slot, target_node )
target_node.onConnectionsChange( LiteGraph.INPUT, link_info.target_slot, false, link_info, input ); //link_info hasnt been modified so its ok
if(this.onConnectionsChange)
this.onConnectionsChange( LiteGraph.OUTPUT, slot, false, link_info, output );
if( this.graph && this.graph.onNodeConnectionChange )
this.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot );
if( this.graph && this.graph.onNodeConnectionChange )
this.graph.onNodeConnectionChange( LiteGraph.INPUT, target_node, link_info.target_slot );
break;
}
}
}
else //all the links
else //all the links in this output slot
{
for(var i = 0, l = output.links.length; i < l; i++)
{
@@ -2842,10 +2860,14 @@ LGraphNode.prototype.disconnectOutput = function( slot, target_node )
input.link = null; //remove other side link
if(target_node.onConnectionsChange)
target_node.onConnectionsChange( LiteGraph.INPUT, link_info.target_slot, false, link_info, input ); //link_info hasnt been modified so its ok
if( this.graph && this.graph.onNodeConnectionChange )
this.graph.onNodeConnectionChange( LiteGraph.INPUT, target_node, link_info.target_slot );
}
delete this.graph.links[ link_id ]; //remove the link from the links pool
if(this.onConnectionsChange)
this.onConnectionsChange( LiteGraph.OUTPUT, slot, false, link_info, output );
if( this.graph && this.graph.onNodeConnectionChange )
this.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot );
}
output.links = null;
}
@@ -2952,9 +2974,18 @@ LGraphNode.prototype.getConnectionPos = function( is_input, slot_number )
else if(!is_input && this.outputs.length > slot_number && this.outputs[slot_number].pos)
return [this.pos[0] + this.outputs[slot_number].pos[0],this.pos[1] + this.outputs[slot_number].pos[1]];
if(!is_input) //output
return [this.pos[0] + this.size[0] + 1, this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0)];
return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0) ];
//horizontal distributed slots
if(this.flags.horizontal)
{
if(is_input)
return [this.pos[0] + (slot_number + 0.5) * (this.size[0] / (this.inputs.length)), this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT ];
return [this.pos[0] + (slot_number + 0.5) * (this.size[0] / (this.outputs.length)), this.pos[1] + this.size[1] ];
}
//default
if(is_input)
return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0) ];
return [this.pos[0] + this.size[0] + 1, this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0)];
}
/* Force align to grid */
@@ -3200,7 +3231,7 @@ LGraphGroup.prototype.setDirtyCanvas = LGraphNode.prototype.setDirtyCanvas;
//*********************************************************************************
/**
* The Global Scope. It contains all the registered node classes.
* This class is in charge of rendering one graph inside a canvas. And provides all the interaction required.
* Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked
*
* @class LGraphCanvas
@@ -3227,7 +3258,7 @@ function LGraphCanvas( canvas, graph, options )
this.title_text_font = "bold "+LiteGraph.NODE_TEXT_SIZE+"px Arial";
this.inner_text_font = "normal "+LiteGraph.NODE_SUBTEXT_SIZE+"px Arial";
this.node_title_color = LiteGraph.NODE_TITLE_COLOR;
this.default_link_color = "#AAC";
this.default_link_color = LiteGraph.LINK_COLOR;
this.default_connection_color = {
input_off: "#AAB",
input_on: "#7F7",
@@ -3484,6 +3515,10 @@ LGraphCanvas.prototype.setCanvas = function( canvas, skip_events )
LGraphCanvas.prototype._doNothing = function doNothing(e) { e.preventDefault(); return false; };
LGraphCanvas.prototype._doReturnTrue = function doNothing(e) { e.preventDefault(); return true; };
/**
* binds mouse, keyboard, touch and drag events to the canvas
* @method bindEvents
**/
LGraphCanvas.prototype.bindEvents = function()
{
if( this._events_binded )
@@ -3532,6 +3567,10 @@ LGraphCanvas.prototype.bindEvents = function()
this._events_binded = true;
}
/**
* unbinds mouse events from the canvas
* @method unbindEvents
**/
LGraphCanvas.prototype.unbindEvents = function()
{
if( !this._events_binded )
@@ -3576,8 +3615,11 @@ LGraphCanvas.getFileExtension = function (url)
return url.substr(point+1).toLowerCase();
}
//this file allows to render the canvas using WebGL instead of Canvas2D
//this is useful if you plant to render 3D objects inside your nodes
/**
* this function allows to render the canvas using WebGL instead of Canvas2D
* this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL
* @method enableWebGL
**/
LGraphCanvas.prototype.enableWebGL = function()
{
if(typeof(GL) === undefined)
@@ -3599,55 +3641,6 @@ LGraphCanvas.prototype.enableWebGL = function()
}
/*
LGraphCanvas.prototype.UIinit = function()
{
var that = this;
$("#node-console input").change(function(e)
{
if(e.target.value == "")
return;
var node = that.node_in_panel;
if(!node)
return;
node.trace("] " + e.target.value, "#333");
if(node.onConsoleCommand)
{
if(!node.onConsoleCommand(e.target.value))
node.trace("command not found", "#A33");
}
else if (e.target.value == "info")
{
node.trace("Special methods:");
for(var i in node)
{
if(typeof(node[i]) == "function" && LGraphNode.prototype[i] == null && i.substr(0,2) != "on" && i[0] != "_")
node.trace(" + " + i);
}
}
else
{
try
{
eval("var _foo = function() { return ("+e.target.value+"); }");
var result = _foo.call(node);
if(result)
node.trace(result.toString());
delete window._foo;
}
catch(err)
{
node.trace("error: " + err, "#A33");
}
}
this.value = "";
});
}
*/
/**
* marks as dirty the canvas, this way it will be rendered again
*
@@ -3945,6 +3938,10 @@ LGraphCanvas.prototype.processMouseDown = function(e)
return false;
}
/**
* Called when a mouse move event has to be processed
* @method processMouseMove
**/
LGraphCanvas.prototype.processMouseMove = function(e)
{
if(this.autoresize)
@@ -4132,6 +4129,10 @@ LGraphCanvas.prototype.processMouseMove = function(e)
//this.graph.change();
}
/**
* Called when a mouse up event has to be processed
* @method processMouseUp
**/
LGraphCanvas.prototype.processMouseUp = function(e)
{
if(!this.graph)
@@ -4279,7 +4280,10 @@ LGraphCanvas.prototype.processMouseUp = function(e)
return false;
}
/**
* Called when a mouse wheel event has to be processed
* @method processMouseWheel
**/
LGraphCanvas.prototype.processMouseWheel = function(e)
{
if(!this.graph || !this.allow_dragcanvas)
@@ -4309,6 +4313,10 @@ LGraphCanvas.prototype.processMouseWheel = function(e)
return false; // prevent default
}
/**
* retuns true if a position (in graph space) is on top of a node little corner box
* @method isOverNodeBox
**/
LGraphCanvas.prototype.isOverNodeBox = function( node, canvasx, canvasy )
{
var title_height = LiteGraph.NODE_TITLE_HEIGHT;
@@ -4317,6 +4325,10 @@ LGraphCanvas.prototype.isOverNodeBox = function( node, canvasx, canvasy )
return false;
}
/**
* retuns true if a position (in graph space) is on top of a node input slot
* @method isOverNodeInput
**/
LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos )
{
if(node.inputs)
@@ -4337,6 +4349,10 @@ LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_p
return -1;
}
/**
* process a key event
* @method processKey
**/
LGraphCanvas.prototype.processKey = function(e)
{
if(!this.graph)
@@ -4486,6 +4502,10 @@ LGraphCanvas.prototype.pasteFromClipboard = function()
this.selectNodes( nodes );
}
/**
* process a item drop event on top the canvas
* @method processDrop
**/
LGraphCanvas.prototype.processDrop = function(e)
{
e.preventDefault();
@@ -4600,6 +4620,10 @@ LGraphCanvas.prototype.processNodeDeselected = function(node)
this.onNodeDeselected(node);
}
/**
* selects a given node (or adds it to the current selection)
* @method selectNode
**/
LGraphCanvas.prototype.selectNode = function( node, add_to_current_selection )
{
if(node == null)
@@ -4608,6 +4632,10 @@ LGraphCanvas.prototype.selectNode = function( node, add_to_current_selection )
this.selectNodes([node], add_to_current_selection );
}
/**
* selects several nodes (or adds them to the current selection)
* @method selectNodes
**/
LGraphCanvas.prototype.selectNodes = function( nodes, add_to_current_selection )
{
if(!add_to_current_selection)
@@ -4642,6 +4670,10 @@ LGraphCanvas.prototype.selectNodes = function( nodes, add_to_current_selection )
this.setDirty(true);
}
/**
* removes a node from the current selection
* @method deselectNode
**/
LGraphCanvas.prototype.deselectNode = function( node )
{
if(!node.selected)
@@ -4664,6 +4696,10 @@ LGraphCanvas.prototype.deselectNode = function( node )
}
}
/**
* removes all nodes from the current selection
* @method deselectAllNodes
**/
LGraphCanvas.prototype.deselectAllNodes = function()
{
if(!this.graph)
@@ -4683,6 +4719,10 @@ LGraphCanvas.prototype.deselectAllNodes = function()
this.setDirty(true);
}
/**
* deletes all nodes in the current selection from the graph
* @method deleteSelectedNodes
**/
LGraphCanvas.prototype.deleteSelectedNodes = function()
{
for(var i in this.selected_nodes)
@@ -4696,6 +4736,10 @@ LGraphCanvas.prototype.deleteSelectedNodes = function()
this.setDirty(true);
}
/**
* centers the camera on a given node
* @method centerOnNode
**/
LGraphCanvas.prototype.centerOnNode = function(node)
{
this.offset[0] = -node.pos[0] - node.size[0] * 0.5 + (this.canvas.width * 0.5 / this.scale);
@@ -4703,6 +4747,10 @@ LGraphCanvas.prototype.centerOnNode = function(node)
this.setDirty(true,true);
}
/**
* adds some useful properties to a mouse event, like the position in graph coordinates
* @method adjustMouseEvent
**/
LGraphCanvas.prototype.adjustMouseEvent = function(e)
{
if(this.canvas)
@@ -4727,6 +4775,10 @@ LGraphCanvas.prototype.adjustMouseEvent = function(e)
e.canvasY = e.localY / this.scale - this.offset[1];
}
/**
* changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom
* @method setZoom
**/
LGraphCanvas.prototype.setZoom = function(value, zooming_center)
{
if(!zooming_center && this.canvas)
@@ -4751,6 +4803,10 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center)
this.dirty_bgcanvas = true;
}
/**
* converts a coordinate in canvas2D space to graphcanvas space (NAME IS CONFUSION, SHOULD BE THE OTHER WAY AROUND)
* @method convertOffsetToCanvas
**/
LGraphCanvas.prototype.convertOffsetToCanvas = function( pos, out )
{
out = out || [];
@@ -4759,6 +4815,10 @@ LGraphCanvas.prototype.convertOffsetToCanvas = function( pos, out )
return out;
}
/**
* converts a coordinate in graphcanvas space to canvas2D space (NAME IS CONFUSION, SHOULD BE THE OTHER WAY AROUND)
* @method convertCanvasToOffset
**/
LGraphCanvas.prototype.convertCanvasToOffset = function( pos, out )
{
out = out || [];
@@ -4773,22 +4833,30 @@ LGraphCanvas.prototype.convertEventToCanvas = function(e)
return this.convertOffsetToCanvas([e.pageX - rect.left,e.pageY - rect.top]);
}
LGraphCanvas.prototype.bringToFront = function(n)
/**
* brings a node to front (above all other nodes)
* @method bringToFront
**/
LGraphCanvas.prototype.bringToFront = function(node)
{
var i = this.graph._nodes.indexOf(n);
var i = this.graph._nodes.indexOf(node);
if(i == -1) return;
this.graph._nodes.splice(i,1);
this.graph._nodes.push(n);
this.graph._nodes.push(node);
}
LGraphCanvas.prototype.sendToBack = function(n)
/**
* sends a node to the back (below all other nodes)
* @method sendToBack
**/
LGraphCanvas.prototype.sendToBack = function(node)
{
var i = this.graph._nodes.indexOf(n);
var i = this.graph._nodes.indexOf(node);
if(i == -1) return;
this.graph._nodes.splice(i,1);
this.graph._nodes.unshift(n);
this.graph._nodes.unshift(node);
}
/* Interaction */
@@ -4798,6 +4866,10 @@ LGraphCanvas.prototype.sendToBack = function(n)
/* LGraphCanvas render */
var temp = new Float32Array(4);
/**
* checks which nodes are visible (inside the camera area)
* @method computeVisibleNodes
**/
LGraphCanvas.prototype.computeVisibleNodes = function( nodes, out )
{
var visible_nodes = out || [];
@@ -4819,6 +4891,10 @@ LGraphCanvas.prototype.computeVisibleNodes = function( nodes, out )
return visible_nodes;
}
/**
* renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)
* @method draw
**/
LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)
{
if(!this.canvas)
@@ -4846,6 +4922,10 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)
this.frame += 1;
}
/**
* draws the front canvas (the one containing all the nodes)
* @method drawFrontCanvas
**/
LGraphCanvas.prototype.drawFrontCanvas = function()
{
this.dirty_canvas = false;
@@ -4932,12 +5012,12 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
var link_color = null;
switch( this.connecting_output.type )
{
case LiteGraph.EVENT: link_color = "#F85"; break;
case LiteGraph.EVENT: link_color = LiteGraph.EVENT_LINK_COLOR; break;
default:
link_color = "#AFA";
link_color = LiteGraph.CONNECTING_LINK_COLOR;
}
//the connection being dragged by the mouse
this.renderLink( ctx, this.connecting_pos, [this.canvas_mouse[0],this.canvas_mouse[1]], null, false, null, link_color );
this.renderLink( ctx, this.connecting_pos, [this.canvas_mouse[0],this.canvas_mouse[1]], null, false, null, link_color, this.connecting_output.dir || (this.connecting_node.flags.horizontal ? LiteGraph.DOWN : LiteGraph.RIGHT), LiteGraph.CENTER );
ctx.beginPath();
if( this.connecting_output.type === LiteGraph.EVENT || this.connecting_output.shape === LiteGraph.BOX_SHAPE )
@@ -4975,6 +5055,10 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
ctx.finish2D();
}
/**
* draws some useful stats in the corner of the canvas
* @method renderInfo
**/
LGraphCanvas.prototype.renderInfo = function( ctx, x, y )
{
x = x || 0;
@@ -4997,6 +5081,10 @@ LGraphCanvas.prototype.renderInfo = function( ctx, x, y )
ctx.restore();
}
/**
* draws the back canvas (the one containing the background and the connections)
* @method drawBackCanvas
**/
LGraphCanvas.prototype.drawBackCanvas = function()
{
var canvas = this.bgcanvas;
@@ -5027,7 +5115,7 @@ LGraphCanvas.prototype.drawBackCanvas = function()
var bg_already_painted = false;
if(this.onRenderBackground)
bg_already_painted = this.onRenderBackground();
bg_already_painted = this.onRenderBackground( canvas, ctx );
//reset in case of error
ctx.restore();
@@ -5125,7 +5213,10 @@ LGraphCanvas.prototype.drawBackCanvas = function()
var temp_vec2 = new Float32Array(2);
/* Renders the LGraphNode on the canvas */
/**
* draws the given node inside the canvas
* @method drawNode
**/
LGraphCanvas.prototype.drawNode = function(node, ctx )
{
var glow = false;
@@ -5208,7 +5299,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
ctx.shadowColor = "transparent";
//connection slots
ctx.textAlign = "left";
ctx.textAlign = node.flags.horizontal ? "center" : "left";
ctx.font = this.inner_text_font;
var render_text = this.scale > 0.6;
@@ -5232,7 +5323,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if ( this.connecting_node && LiteGraph.isValidConnection( slot.type && out_slot.type ) )
ctx.globalAlpha = 0.4 * editor_alpha;
ctx.fillStyle = slot.link != null ? (slot.colorOn || this.default_connection_color.input_on) : (slot.colorOff || this.default_connection_color.input_off);
ctx.fillStyle = slot.link != null ? (slot.color_on || this.default_connection_color.input_on) : (slot.color_off || this.default_connection_color.input_off);
var pos = node.getConnectionPos( true, i );
pos[0] -= node.pos[0];
@@ -5262,7 +5353,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if(text)
{
ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR;
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
if( node.flags.horizontal || slot.dir == LiteGraph.UP )
ctx.fillText(text,pos[0],pos[1] - 10);
else
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
}
}
}
@@ -5271,7 +5365,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if(this.connecting_node)
ctx.globalAlpha = 0.4 * editor_alpha;
ctx.textAlign = "right";
ctx.textAlign = node.flags.horizontal ? "center" : "right";
ctx.strokeStyle = "black";
if(node.outputs)
for(var i = 0; i < node.outputs.length; i++)
@@ -5284,7 +5378,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if( max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5)
max_y = pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5;
ctx.fillStyle = slot.links && slot.links.length ? (slot.colorOn || this.default_connection_color.output_on) : (slot.colorOff || this.default_connection_color.output_off);
ctx.fillStyle = slot.links && slot.links.length ? (slot.color_on || this.default_connection_color.output_on) : (slot.color_off || this.default_connection_color.output_off);
ctx.beginPath();
//ctx.rect( node.size[0] - 14,i*14,10,10);
@@ -5314,7 +5408,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if(text)
{
ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR;
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
if( node.flags.horizontal || slot.dir == LiteGraph.DOWN )
ctx.fillText(text,pos[0],pos[1] - 8);
else
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
}
}
}
@@ -5343,7 +5440,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var slot = node.inputs[i];
if( slot.link == null )
continue;
ctx.fillStyle = slot.colorOn || this.default_connection_color.input_on;
ctx.fillStyle = slot.color_on || this.default_connection_color.input_on;
ctx.beginPath();
if ( slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) {
ctx.rect(0.5, 4 - LiteGraph.NODE_TITLE_HEIGHT + 0.5,14,LiteGraph.NODE_TITLE_HEIGHT - 8);
@@ -5367,7 +5464,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var slot = node.outputs[i];
if(!slot.links || !slot.links.length)
continue;
ctx.fillStyle = slot.colorOn || this.default_connection_color.output_on;
ctx.fillStyle = slot.color_on || this.default_connection_color.output_on;
ctx.strokeStyle = "black";
ctx.beginPath();
if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) {
@@ -5393,7 +5490,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
ctx.globalAlpha = 1.0;
}
/* Renders the node shape */
/**
* draws the shape of the given node in the canvas
* @method drawNodeShape
**/
LGraphCanvas.prototype.drawNodeShape = function( node, ctx, size, fgcolor, bgcolor, selected, mouse_over )
{
//bg rect
@@ -5547,6 +5647,7 @@ LGraphCanvas.prototype.drawNodeShape = function( node, ctx, size, fgcolor, bgcol
areah += title_height;
}
ctx.lineWidth = 1;
ctx.globalAlpha = 0.8;
ctx.beginPath();
if(shape == LiteGraph.BOX_SHAPE)
ctx.rect(-6 + areax,-6 + areay, 12 + areaw, 12 + areah );
@@ -5556,13 +5657,18 @@ LGraphCanvas.prototype.drawNodeShape = function( node, ctx, size, fgcolor, bgcol
ctx.roundRect(-6 + areax,-6 + areay, 12 + areaw, 12 + areah , this.round_radius * 2, 2);
else if (shape == LiteGraph.CIRCLE_SHAPE)
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5 + 6, 0, Math.PI*2);
ctx.strokeStyle = "#DDD";
ctx.strokeStyle = "#FFF";
ctx.stroke();
ctx.strokeStyle = fgcolor;
ctx.globalAlpha = 1;
}
}
//OPTIMIZE THIS: precatch connections position instead of recomputing them every time
/**
* draws every connection visible in the canvas
* OPTIMIZE THIS: precatch connections position instead of recomputing them every time
* @method drawConnections
**/
LGraphCanvas.prototype.drawConnections = function(ctx)
{
var now = LiteGraph.getTime();
@@ -5598,22 +5704,31 @@ LGraphCanvas.prototype.drawConnections = function(ctx)
start_node_slotpos = [start_node.pos[0] + 10, start_node.pos[1] + 10];
else
start_node_slotpos = start_node.getConnectionPos(false, start_node_slot);
var end_node_slotpos = node.getConnectionPos(true,i);
var start_slot = start_node.outputs[start_node_slot];
var end_slot = node.inputs[i];
var start_dir = start_slot.dir || (start_node.flags.horizontal ? LiteGraph.DOWN : LiteGraph.RIGHT);
var end_dir = end_slot.dir || (node.flags.horizontal ? LiteGraph.UP : LiteGraph.LEFT);
this.renderLink( ctx, start_node_slotpos, node.getConnectionPos(true,i), link );
this.renderLink( ctx, start_node_slotpos, end_node_slotpos, link, false, 0, null, start_dir, end_dir );
//event triggered rendered on top
if(link && link._last_time && (now - link._last_time) < 1000 )
{
var f = 2.0 - (now - link._last_time) * 0.002;
var color = "rgba(255,255,255, " + f.toFixed(2) + ")";
this.renderLink( ctx, start_node_slotpos, node.getConnectionPos(true,i), link, true, f, color );
this.renderLink( ctx, start_node_slotpos, end_node_slotpos, link, true, f, color, start_dir, end_dir );
}
}
}
ctx.globalAlpha = 1;
}
LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow, color )
/**
* draws a link between two points
* @method renderLink
**/
LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow, color, start_dir, end_dir )
{
if(!this.highquality_render)
{
@@ -5624,6 +5739,9 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
return;
}
start_dir = start_dir || LiteGraph.RIGHT;
end_dir = end_dir || LiteGraph.LEFT;
var dist = distance(a,b);
if(this.render_connections_border && this.scale > 0.6)
@@ -5632,7 +5750,7 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
//choose color
if( !color && link )
color = LGraphCanvas.link_type_colors[ link.type ];
if(!color)
if( !color )
color = this.default_link_color;
if( link != null && this.highlighted_links[ link.id ] )
@@ -5644,9 +5762,27 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
if(this.render_curved_connections) //splines
{
ctx.moveTo(a[0],a[1]);
ctx.bezierCurveTo(a[0] + dist*0.25, a[1],
b[0] - dist*0.25 , b[1],
b[0] ,b[1] );
var start_offset_x = 0;
var start_offset_y = 0;
var end_offset_x = 0;
var end_offset_y = 0;
switch(start_dir)
{
case LiteGraph.LEFT: start_offset_x = dist*-0.25; break;
case LiteGraph.RIGHT: start_offset_x = dist*0.25; break;
case LiteGraph.UP: start_offset_y = dist*-0.25; break;
case LiteGraph.DOWN: start_offset_y = dist*0.25; break;
}
switch(end_dir)
{
case LiteGraph.LEFT: end_offset_x = dist*-0.25; break;
case LiteGraph.RIGHT: end_offset_x = dist*0.25; break;
case LiteGraph.UP: end_offset_y = dist*-0.25; break;
case LiteGraph.DOWN: end_offset_y = dist*0.25; break;
}
ctx.bezierCurveTo(a[0] + start_offset_x, a[1] + start_offset_y,
b[0] + end_offset_x , b[1] + end_offset_y,
b[0], b[1] );
}
else //lines
{
@@ -5675,8 +5811,8 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
if(this.render_connection_arrows && this.scale > 0.6)
{
//compute two points in the connection
var pos = this.computeConnectionPoint(a,b,0.5);
var pos2 = this.computeConnectionPoint(a,b,0.51);
var pos = this.computeConnectionPoint(a, b, 0.5, start_dir, end_dir);
var pos2 = this.computeConnectionPoint(a, b, 0.51, start_dir, end_dir);
//compute the angle between them so the arrow points in the right direction
var angle = 0;
@@ -5704,7 +5840,7 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
for(var i = 0; i < 5; ++i)
{
var f = (LiteGraph.getTime() * 0.001 + (i * 0.2)) % 1;
var pos = this.computeConnectionPoint(a,b,f);
var pos = this.computeConnectionPoint(a,b,f, start_dir, end_dir);
ctx.beginPath();
ctx.arc(pos[0],pos[1],5,0,2*Math.PI);
ctx.fill();
@@ -5712,14 +5848,32 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
}
}
LGraphCanvas.prototype.computeConnectionPoint = function(a,b,t)
LGraphCanvas.prototype.computeConnectionPoint = function(a,b,t,start_dir,end_dir)
{
start_dir = start_dir || LiteGraph.RIGHT;
end_dir = end_dir || LiteGraph.LEFT;
var dist = distance(a,b);
var p0 = a;
var p1 = [ a[0] + dist*0.25, a[1] ];
var p2 = [ b[0] - dist*0.25, b[1] ];
var p1 = [ a[0], a[1] ];
var p2 = [ b[0], b[1] ];
var p3 = b;
switch(start_dir)
{
case LiteGraph.LEFT: p1[0] += dist*-0.25; break;
case LiteGraph.RIGHT: p1[0] += dist*0.25; break;
case LiteGraph.UP: p1[1] += dist*-0.25; break;
case LiteGraph.DOWN: p1[1] += dist*0.25; break;
}
switch(end_dir)
{
case LiteGraph.LEFT: p2[0] += dist*-0.25; break;
case LiteGraph.RIGHT: p2[0] += dist*0.25; break;
case LiteGraph.UP: p2[1] += dist*-0.25; break;
case LiteGraph.DOWN: p2[1] += dist*0.25; break;
}
var c1 = (1-t)*(1-t)*(1-t);
var c2 = 3*((1-t)*(1-t))*t;
var c3 = 3*(1-t)*(t*t);
@@ -5730,6 +5884,10 @@ LGraphCanvas.prototype.computeConnectionPoint = function(a,b,t)
return [x,y];
}
/**
* draws the widgets stored inside a node
* @method drawNodeWidgets
**/
LGraphCanvas.prototype.drawNodeWidgets = function( node, posY, ctx, active_widget )
{
if(!node.widgets || !node.widgets.length)
@@ -5822,6 +5980,10 @@ LGraphCanvas.prototype.drawNodeWidgets = function( node, posY, ctx, active_widge
ctx.textAlign = "left";
}
/**
* process an event on widgets
* @method processNodeWidgets
**/
LGraphCanvas.prototype.processNodeWidgets = function( node, pos, event, active_widget )
{
if(!node.widgets || !node.widgets.length)
@@ -5897,7 +6059,10 @@ LGraphCanvas.prototype.processNodeWidgets = function( node, pos, event, active_w
return null;
}
/**
* draws every group area in the background
* @method drawGroups
**/
LGraphCanvas.prototype.drawGroups = function(canvas, ctx)
{
if(!this.graph)
@@ -5939,7 +6104,10 @@ LGraphCanvas.prototype.drawGroups = function(canvas, ctx)
ctx.restore();
}
/**
* resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode
* @method resize
**/
LGraphCanvas.prototype.resize = function(width, height)
{
if(!width && !height)
@@ -5959,7 +6127,11 @@ LGraphCanvas.prototype.resize = function(width, height)
this.setDirty(true,true);
}
/**
* switches to live mode (node shapes are not rendered, only the content)
* this feature was designed when graphs where meant to create user interfaces
* @method switchLiveMode
**/
LGraphCanvas.prototype.switchLiveMode = function(transition)
{
if(!transition)
@@ -6000,7 +6172,6 @@ LGraphCanvas.prototype.switchLiveMode = function(transition)
LGraphCanvas.prototype.onNodeSelectionChange = function(node)
{
return; //disabled
//if(this.node_in_panel) this.showNodePanel(node);
}
LGraphCanvas.prototype.touchHandler = function(event)