Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved support for webgl

Browse Source
This commit is contained in:
tamat
2015-10-02 19:39:17 +02:00
parent 4a2fdc0cff
commit 0129ea7470
12 changed files with 1132 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

535
build/litegraph.js
View File

@@ -746,9 +746,10 @@ LGraph.prototype.findNodesByClass = function(classObject)
LGraph.prototype.findNodesByType = function(type)
{
var type = type.toLowerCase();
var r = [];
for(var i in this._nodes)
if(this._nodes[i].type == type)
if(this._nodes[i].type.toLowerCase() == type )
r.push(this._nodes[i]);
return r;
}
@@ -852,7 +853,7 @@ LGraph.prototype.changeGlobalInputType = function(name, type)
if(!this.global_inputs[name])
return false;
if(this.global_inputs[name].type == type)
if(this.global_inputs[name].type.toLowerCase() == type.toLowerCase() )
return;
this.global_inputs[name].type = type;
@@ -933,7 +934,7 @@ LGraph.prototype.changeGlobalOutputType = function(name, type)
if(!this.global_outputs[name])
return false;
if(this.global_outputs[name].type == type)
if(this.global_outputs[name].type.toLowerCase() == type.toLowerCase() )
return;
this.global_outputs[name].type = type;
@@ -1725,7 +1726,7 @@ LGraphNode.prototype.connect = function(slot, node, target_slot)
}
else if( !output.type || //generic output
!node.inputs[target_slot].type || //generic input
output.type == node.inputs[target_slot].type) //same type
output.type.toLowerCase() == node.inputs[target_slot].type.toLowerCase() ) //same type
{
//info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ]
//var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ];
@@ -2045,16 +2046,13 @@ LGraphNode.prototype.localToScreen = function(x,y, graphcanvas)
* @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas itself)
* @param {LGraph} graph [optional]
*/
function LGraphCanvas(canvas, graph, skip_render)
function LGraphCanvas( canvas, graph, skip_render )
{
//if(graph === undefined)
// throw ("No graph assigned");
if(typeof(canvas) == "string")
canvas = document.querySelector(canvas);
if(!canvas)
throw("no canvas found");
if(canvas && canvas.constructor === String )
canvas = document.querySelector( canvas );
this.max_zoom = 10;
this.min_zoom = 0.1;
@@ -2063,7 +2061,7 @@ function LGraphCanvas(canvas, graph, skip_render)
if(graph)
graph.attachCanvas(this);
this.setCanvas(canvas);
this.setCanvas( canvas );
this.clear();
if(!skip_render)
@@ -2098,9 +2096,7 @@ LGraphCanvas.prototype.clear = function()
this.editor_alpha = 1; //used for transition
this.pause_rendering = false;
this.render_shadows = true;
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
this.dirty_area = null;
this.clear_background = true;
this.render_only_selected = true;
this.live_mode = false;
@@ -2108,6 +2104,10 @@ LGraphCanvas.prototype.clear = function()
this.allow_dragcanvas = true;
this.allow_dragnodes = true;
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
this.dirty_area = null;
this.node_in_panel = null;
this.last_mouse = [0,0];
@@ -2133,10 +2133,13 @@ LGraphCanvas.prototype.clear = function()
* @method setGraph
* @param {LGraph} graph
*/
LGraphCanvas.prototype.setGraph = function(graph)
LGraphCanvas.prototype.setGraph = function( graph, skip_clear )
{
if(this.graph == graph) return;
this.clear();
if(this.graph == graph)
return;
if(!skip_clear)
this.clear();
if(!graph && this.graph)
{
@@ -2203,19 +2206,35 @@ LGraphCanvas.prototype.closeSubgraph = function()
* @method setCanvas
* @param {Canvas} assigns a canvas
*/
LGraphCanvas.prototype.setCanvas = function(canvas)
LGraphCanvas.prototype.setCanvas = function( canvas, skip_events )
{
var that = this;
//Canvas association
if(typeof(canvas) == "string")
canvas = document.getElementById(canvas);
if(canvas)
{
if( canvas.constructor === String )
{
canvas = document.getElementById(canvas);
if(!canvas)
throw("Error creating LiteGraph canvas: Canvas not found");
}
}
if(canvas == null)
throw("Error creating LiteGraph canvas: Canvas not found");
if(canvas == this.canvas) return;
if(canvas === this.canvas)
return;
if(!canvas && this.canvas)
{
//maybe detach events from old_canvas
if(!skip_events)
this.unbindEvents();
}
this.canvas = canvas;
if(!canvas)
return;
//this.canvas.tabindex = "1000";
canvas.className += " lgraphcanvas";
canvas.data = this;
@@ -2245,72 +2264,85 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
this._mousemove_callback = this.processMouseMove.bind(this);
this._mouseup_callback = this.processMouseUp.bind(this);
canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded
canvas.addEventListener("mousemove", this._mousemove_callback);
if(!skip_events)
this.bindEvents();
}
canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; });
canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false);
canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false);
//used in some events to capture them
LGraphCanvas.prototype._doNothing = function doNothing() { return false; };
LGraphCanvas.prototype.bindEvents = function()
{
if( this._events_binded )
{
console.warn("LGraphCanvas: events already binded");
return;
}
var canvas = this.canvas;
this._mousedown_callback = this.processMouseDown.bind(this);
this._mousewheel_callback = this.processMouseWheel.bind(this);
canvas.addEventListener("mousedown", this._mousedown_callback, true ); //down do not need to store the binded
canvas.addEventListener("mousemove", this._mousemove_callback );
canvas.addEventListener("mousewheel", this._mousewheel_callback, false);
canvas.addEventListener("contextmenu", this._doNothing );
canvas.addEventListener("DOMMouseScroll", this._mousewheel_callback, false);
//touch events
//if( 'touchstart' in document.documentElement )
{
//alert("doo");
canvas.addEventListener("touchstart", this.touchHandler, true);
canvas.addEventListener("touchmove", this.touchHandler, true);
canvas.addEventListener("touchend", this.touchHandler, true);
canvas.addEventListener("touchcancel", this.touchHandler, true);
}
//this.canvas.onselectstart = function () { return false; };
canvas.addEventListener("keydown", function(e) {
that.processKeyDown(e);
});
//Keyboard ******************
this._key_callback = this.processKey.bind(this);
canvas.addEventListener("keyup", function(e) {
that.processKeyUp(e);
});
canvas.addEventListener("keydown", this._key_callback );
canvas.addEventListener("keyup", this._key_callback );
//droping files
canvas.ondragover = function () { console.log('hover'); return false; };
canvas.ondragend = function () { console.log('out'); return false; };
canvas.ondrop = function (e) {
e.preventDefault();
that.adjustMouseEvent(e);
//Droping Stuff over nodes ************************************
this._ondrop_callback = this.processDrop.bind(this);
var pos = [e.canvasX,e.canvasY];
var node = that.graph.getNodeOnPos(pos[0],pos[1]);
if(!node)
return;
canvas.addEventListener("dragover", this._doNothing, false );
canvas.addEventListener("dragend", this._doNothing, false );
canvas.addEventListener("drop", this._ondrop_callback, false );
if(!node.onDropFile)
return;
this._events_binded = true;
}
var file = e.dataTransfer.files[0];
var filename = file.name;
var ext = LGraphCanvas.getFileExtension( filename );
//console.log(file);
LGraphCanvas.prototype.unbindEvents = function()
{
if( !this._events_binded )
{
console.warn("LGraphCanvas: no events binded");
return;
}
//prepare reader
var reader = new FileReader();
reader.onload = function (event) {
//console.log(event.target);
var data = event.target.result;
node.onDropFile( data, filename, file );
};
this.canvas.removeEventListener( "mousedown", this._mousedown_callback );
this.canvas.removeEventListener( "mousewheel", this._mousewheel_callback );
this.canvas.removeEventListener( "DOMMouseScroll", this._mousewheel_callback );
this.canvas.removeEventListener( "keydown", this._key_callback );
this.canvas.removeEventListener( "keyup", this._key_callback );
this.canvas.removeEventListener( "contextmenu", this._doNothing );
this.canvas.removeEventListener( "drop", this._ondrop_callback );
//read data
var type = file.type.split("/")[0];
if(type == "text" || type == "")
reader.readAsText(file);
else if (type == "image")
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
this.canvas.removeEventListener("touchstart", this.touchHandler );
this.canvas.removeEventListener("touchmove", this.touchHandler );
this.canvas.removeEventListener("touchend", this.touchHandler );
this.canvas.removeEventListener("touchcancel", this.touchHandler );
return false;
};
this._mousedown_callback = null;
this._mousewheel_callback = null;
this._key_callback = null;
this._ondrop_callback = null;
this._events_binded = false;
}
LGraphCanvas.getFileExtension = function (url)
@@ -2467,13 +2499,15 @@ LGraphCanvas.prototype.stopRendering = function()
LGraphCanvas.prototype.processMouseDown = function(e)
{
if(!this.graph) return;
if(!this.graph)
return;
this.adjustMouseEvent(e);
var ref_window = this.getCanvasWindow();
var document = ref_window.document;
//move mouse move event to the window in case it drags outside of the canvas
this.canvas.removeEventListener("mousemove", this._mousemove_callback );
ref_window.document.addEventListener("mousemove", this._mousemove_callback, true ); //catch for the entire window
ref_window.document.addEventListener("mouseup", this._mouseup_callback, true );
@@ -2699,7 +2733,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
if(slot != -1 && n.inputs[slot])
{
var slot_type = n.inputs[slot].type;
if(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type )
if( !this.connecting_output.type || !slot_type || slot_type.toLowerCase() == this.connecting_output.type.toLowerCase() )
this._highlight_input = pos;
}
else
@@ -2774,11 +2808,13 @@ LGraphCanvas.prototype.processMouseMove = function(e)
LGraphCanvas.prototype.processMouseUp = function(e)
{
if(!this.graph) return;
if(!this.graph)
return;
var window = this.getCanvasWindow();
var document = window.document;
//restore the mousemove event back to the canvas
document.removeEventListener("mousemove", this._mousemove_callback, true );
this.canvas.addEventListener("mousemove", this._mousemove_callback, true);
document.removeEventListener("mouseup", this._mouseup_callback, true );
@@ -2815,7 +2851,7 @@ LGraphCanvas.prototype.processMouseUp = function(e)
{ //not on top of an input
var input = node.getInputInfo(0);
//simple connect
if(input && !input.link && input.type == this.connecting_output.type)
if(input && !input.link && input.type == this.connecting_output.type) //toLowerCase missing
this.connecting_node.connect(this.connecting_slot, node, 0);
}
}
@@ -2879,75 +2915,11 @@ LGraphCanvas.prototype.processMouseUp = function(e)
return false;
}
LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos)
{
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos(true,i);
if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) )
{
if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] };
return i;
}
}
return -1;
}
LGraphCanvas.prototype.processKeyDown = function(e)
{
if(!this.graph) return;
var block_default = false;
//select all Control A
if(e.keyCode == 65 && e.ctrlKey)
{
this.selectAllNodes();
block_default = true;
}
//delete or backspace
if(e.keyCode == 46 || e.keyCode == 8)
{
this.deleteSelectedNodes();
block_default = true;
}
//collapse
//...
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyDown)
this.selected_nodes[i].onKeyDown(e);
this.graph.change();
if(block_default)
{
e.preventDefault();
return false;
}
}
LGraphCanvas.prototype.processKeyUp = function(e)
{
if(!this.graph) return;
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyUp)
this.selected_nodes[i].onKeyUp(e);
this.graph.change();
}
LGraphCanvas.prototype.processMouseWheel = function(e)
{
if(!this.graph) return;
if(!this.allow_dragcanvas) return;
if(!this.graph || !this.allow_dragcanvas)
return;
var delta = (e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60);
@@ -2973,6 +2945,109 @@ LGraphCanvas.prototype.processMouseWheel = function(e)
return false; // prevent default
}
LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos)
{
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos(true,i);
if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) )
{
if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] };
return i;
}
}
return -1;
}
LGraphCanvas.prototype.processKey = function(e)
{
if(!this.graph)
return;
var block_default = false;
if(e.type == "keydown")
{
//select all Control A
if(e.keyCode == 65 && e.ctrlKey)
{
this.selectAllNodes();
block_default = true;
}
//delete or backspace
if(e.keyCode == 46 || e.keyCode == 8)
{
this.deleteSelectedNodes();
block_default = true;
}
//collapse
//...
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyDown)
this.selected_nodes[i].onKeyDown(e);
}
else if( e.type == "keyup" )
{
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyUp)
this.selected_nodes[i].onKeyUp(e);
}
this.graph.change();
if(block_default)
{
e.preventDefault();
return false;
}
}
LGraphCanvas.prototype.processDrop = function(e)
{
e.preventDefault();
this.adjustMouseEvent(e);
var pos = [e.canvasX,e.canvasY];
var node = this.graph.getNodeOnPos(pos[0],pos[1]);
if(!node)
return;
if(!node.onDropFile)
return;
var file = e.dataTransfer.files[0];
var filename = file.name;
var ext = LGraphCanvas.getFileExtension( filename );
//console.log(file);
//prepare reader
var reader = new FileReader();
reader.onload = function (event) {
//console.log(event.target);
var data = event.target.result;
node.onDropFile( data, filename, file );
};
//read data
var type = file.type.split("/")[0];
if(type == "text" || type == "")
reader.readAsText(file);
else if (type == "image")
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
return false;
}
LGraphCanvas.prototype.processNodeSelected = function(n,e)
{
n.selected = true;
@@ -3228,7 +3303,8 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//clear
//canvas.width = canvas.width;
ctx.clearRect(0,0,canvas.width, canvas.height);
if(this.clear_background)
ctx.clearRect(0,0,canvas.width, canvas.height);
//draw bg canvas
if(this.bgcanvas == this.canvas)
@@ -3242,19 +3318,7 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//info widget
if(this.show_info)
{
ctx.font = "10px Arial";
ctx.fillStyle = "#888";
if(this.graph)
{
ctx.fillText( "T: " + this.graph.globaltime.toFixed(2)+"s",5,13*1 );
ctx.fillText( "I: " + this.graph.iteration,5,13*2 );
ctx.fillText( "F: " + this.frame,5,13*3 );
ctx.fillText( "FPS:" + this.fps.toFixed(2),5,13*4 );
}
else
ctx.fillText( "No graph selected",5,13*1 );
}
this.renderInfo(ctx);
if(this.graph)
{
@@ -3329,6 +3393,28 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
this.dirty_canvas = false;
}
LGraphCanvas.prototype.renderInfo = function( ctx, x, y )
{
x = x || 0;
y = y || 0;
ctx.save();
ctx.translate( x, y );
ctx.font = "10px Arial";
ctx.fillStyle = "#888";
if(this.graph)
{
ctx.fillText( "T: " + this.graph.globaltime.toFixed(2)+"s",5,13*1 );
ctx.fillText( "I: " + this.graph.iteration,5,13*2 );
ctx.fillText( "F: " + this.frame,5,13*3 );
ctx.fillText( "FPS:" + this.fps.toFixed(2),5,13*4 );
}
else
ctx.fillText( "No graph selected",5,13*1 );
ctx.restore();
}
LGraphCanvas.prototype.drawBackCanvas = function()
{
var canvas = this.bgcanvas;
@@ -3339,7 +3425,8 @@ LGraphCanvas.prototype.drawBackCanvas = function()
ctx.start();
//clear
ctx.clearRect(0,0,canvas.width, canvas.height);
if(this.clear_background)
ctx.clearRect(0,0,canvas.width, canvas.height);
//reset in case of error
ctx.restore();
@@ -3540,7 +3627,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var slot = node.inputs[i];
ctx.globalAlpha = editor_alpha;
if (this.connecting_node != null && this.connecting_output.type != 0 && node.inputs[i].type != 0 && this.connecting_output.type != node.inputs[i].type)
if (this.connecting_node != null && this.connecting_output.type && node.inputs[i].type && this.connecting_output.type.toLowerCase() != node.inputs[i].type.toLowerCase() )
ctx.globalAlpha = 0.4 * editor_alpha;
ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
@@ -4788,7 +4875,7 @@ Subgraph.prototype.clone = function()
}
LiteGraph.registerNodeType("graph/subgraph", Subgraph);
LiteGraph.registerNodeType("graph/subgraph", Subgraph );
//Input for a subgraph
@@ -5738,6 +5825,138 @@ LiteGraph.registerNodeType("basic/console", Console );
})();
(function(){
function GamepadInput()
{
this.addOutput("left_x_axis","number");
this.addOutput("left_y_axis","number");
this.properties = {};
}
GamepadInput.title = "Gamepad";
GamepadInput.desc = "gets the input of the gamepad";
GamepadInput.prototype.onExecute = function()
{
//get gamepad
var gamepad = this.getGamepad();
if(!gamepad)
return;
if(this.outputs)
{
for(var i = 0; i < this.outputs.length; i++)
{
var output = this.outputs[i];
var v = null;
switch( output.name )
{
case "left_x_axis": v = gamepad.xbox.axes["lx"]; break;
case "left_y_axis": v = gamepad.xbox.axes["ly"]; break;
case "right_x_axis": v = gamepad.xbox.axes["rx"]; break;
case "right_y_axis": v = gamepad.xbox.axes["ry"]; break;
case "a_button": v = gamepad.xbox.buttons["a"] ? 1 : 0; break;
case "b_button": v = gamepad.xbox.buttons["b"] ? 1 : 0; break;
case "x_button": v = gamepad.xbox.buttons["x"] ? 1 : 0; break;
case "y_button": v = gamepad.xbox.buttons["y"] ? 1 : 0; break;
case "lb_button": v = gamepad.xbox.buttons["lb"] ? 1 : 0; break;
case "rb_button": v = gamepad.xbox.buttons["rb"] ? 1 : 0; break;
case "ls_button": v = gamepad.xbox.buttons["ls"] ? 1 : 0; break;
case "rs_button": v = gamepad.xbox.buttons["rs"] ? 1 : 0; break;
case "start_button": v = gamepad.xbox.buttons["start"] ? 1 : 0; break;
case "back_button": v = gamepad.xbox.buttons["back"] ? 1 : 0; break;
default: break;
}
this.setOutputData(i,v);
}
}
}
GamepadInput.prototype.getGamepad = function()
{
var getGamepads = navigator.getGamepads || navigator.webkitGetGamepads || navigator.mozGetGamepads;
if(!getGamepads)
return null;
var gamepads = getGamepads.call(navigator);
var gamepad = null;
for(var i = 0; i < 4; i++)
{
if (gamepads[i])
{
gamepad = gamepads[i];
//xbox controller mapping
var xbox = this.xbox_mapping;
if(!xbox)
xbox = this.xbox_mapping = { axes:[], buttons:{}, hat: ""};
xbox.axes["lx"] = gamepad.axes[0];
xbox.axes["ly"] = gamepad.axes[1];
xbox.axes["rx"] = gamepad.axes[2];
xbox.axes["ry"] = gamepad.axes[3];
xbox.axes["triggers"] = gamepad.axes[4];
for(var i = 0; i < gamepad.buttons.length; i++)
{
//mapping of XBOX
switch(i) //I use a switch to ensure that a player with another gamepad could play
{
case 0: xbox.buttons["a"] = gamepad.buttons[i].pressed; break;
case 1: xbox.buttons["b"] = gamepad.buttons[i].pressed; break;
case 2: xbox.buttons["x"] = gamepad.buttons[i].pressed; break;
case 3: xbox.buttons["y"] = gamepad.buttons[i].pressed; break;
case 4: xbox.buttons["lb"] = gamepad.buttons[i].pressed; break;
case 5: xbox.buttons["rb"] = gamepad.buttons[i].pressed; break;
case 6: xbox.buttons["lt"] = gamepad.buttons[i].pressed; break;
case 7: xbox.buttons["rt"] = gamepad.buttons[i].pressed; break;
case 8: xbox.buttons["back"] = gamepad.buttons[i].pressed; break;
case 9: xbox.buttons["start"] = gamepad.buttons[i].pressed; break;
case 10: xbox.buttons["ls"] = gamepad.buttons[i].pressed; break;
case 11: xbox.buttons["rs"] = gamepad.buttons[i].pressed; break;
case 12: if( gamepad.buttons[i].pressed) xbox.hat += "up"; break;
case 13: if( gamepad.buttons[i].pressed) xbox.hat += "down"; break;
case 14: if( gamepad.buttons[i].pressed) xbox.hat += "left"; break;
case 15: if( gamepad.buttons[i].pressed) xbox.hat += "right"; break;
case 16: xbox.buttons["home"] = gamepad.buttons[i].pressed; break;
default:
}
}
gamepad.xbox = xbox;
return gamepad;
}
}
}
GamepadInput.prototype.onDrawBackground = function(ctx)
{
//render
}
GamepadInput.prototype.onGetOutputs = function() {
return [
["left_x_axis","number"],
["left_y_axis","number"],
["right_x_axis","number"],
["right_y_axis","number"],
["trigger","number"],
["a_button","number"],
["b_button","number"],
["x_button","number"],
["y_button","number"],
["lb_button","number"],
["rb_button","number"],
["ls_button","number"],
["rs_button","number"],
["start","number"],
["back","number"]
];
}
LiteGraph.registerNodeType("input/gamepad", GamepadInput );
})();
(function(){
function MathRand()
{

71
build/litegraph.min.js vendored
View File

@@ -16,13 +16,13 @@ LGraph.prototype.sendEventToAllNodes=function(a,b){var c=this._nodes_in_order?th
LGraph.prototype.add=function(a,b){if(a&&(-1==a.id||null==this._nodes_by_id[a.id])){if(this._nodes.length>=LiteGraph.MAX_NUMBER_OF_NODES)throw"LiteGraph: max number of nodes in a graph reached";if(null==a.id||-1==a.id)a.id=this.last_node_id++;a.graph=this;this._nodes.push(a);this._nodes_by_id[a.id]=a;if(a.onAdded)a.onAdded();this.config.align_to_grid&&a.alignToGrid();b||this.updateExecutionOrder();if(this.onNodeAdded)this.onNodeAdded(a);this.setDirtyCanvas(!0);this.change();return a}};
LGraph.prototype.remove=function(a){if(null!=this._nodes_by_id[a.id]&&!a.ignore_remove){if(a.inputs)for(var b=0;b<a.inputs.length;b++){var c=a.inputs[b];null!=c.link&&a.disconnectInput(b)}if(a.outputs)for(b=0;b<a.outputs.length;b++)c=a.outputs[b],null!=c.links&&c.links.length&&a.disconnectOutput(b);a.id=-1;if(a.onRemoved)a.onRemoved();a.graph=null;for(b in this.list_of_graphcanvas)c=this.list_of_graphcanvas[b],c.selected_nodes[a.id]&&delete c.selected_nodes[a.id],c.node_dragged==a&&(c.node_dragged=
null);b=this._nodes.indexOf(a);-1!=b&&this._nodes.splice(b,1);delete this._nodes_by_id[a.id];if(this.onNodeRemoved)this.onNodeRemoved(a);this.setDirtyCanvas(!0,!0);this.change();this.updateExecutionOrder()}};LGraph.prototype.getNodeById=function(a){return null==a?null:this._nodes_by_id[a]};LGraph.prototype.findNodesByClass=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].constructor===a&&b.push(this._nodes[c]);return b};
LGraph.prototype.findNodesByType=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].type==a&&b.push(this._nodes[c]);return b};LGraph.prototype.findNodesByTitle=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].title==a&&b.push(this._nodes[c]);return b};LGraph.prototype.getNodeOnPos=function(a,b,c){c=c||this._nodes;for(var d=c.length-1;0<=d;d--){var e=c[d];if(e.isPointInsideNode(a,b))return e}return null};
LGraph.prototype.findNodesByType=function(a){a=a.toLowerCase();var b=[],c;for(c in this._nodes)this._nodes[c].type.toLowerCase()==a&&b.push(this._nodes[c]);return b};LGraph.prototype.findNodesByTitle=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].title==a&&b.push(this._nodes[c]);return b};LGraph.prototype.getNodeOnPos=function(a,b,c){c=c||this._nodes;for(var d=c.length-1;0<=d;d--){var e=c[d];if(e.isPointInsideNode(a,b))return e}return null};
LGraph.prototype.addGlobalInput=function(a,b,c){this.global_inputs[a]={name:a,type:b,value:c};if(this.onGlobalInputAdded)this.onGlobalInputAdded(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};LGraph.prototype.setGlobalInputData=function(a,b){var c=this.global_inputs[a];c&&(c.value=b)};LGraph.prototype.getGlobalInputData=function(a){return(a=this.global_inputs[a])?a.value:null};
LGraph.prototype.renameGlobalInput=function(a,b){if(b!=a){if(!this.global_inputs[a])return!1;if(this.global_inputs[b])return console.error("there is already one input with that name"),!1;this.global_inputs[b]=this.global_inputs[a];delete this.global_inputs[a];if(this.onGlobalInputRenamed)this.onGlobalInputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()}};
LGraph.prototype.changeGlobalInputType=function(a,b){if(!this.global_inputs[a])return!1;if(this.global_inputs[a].type!=b&&(this.global_inputs[a].type=b,this.onGlobalInputTypeChanged))this.onGlobalInputTypeChanged(a,b)};LGraph.prototype.removeGlobalInput=function(a){if(!this.global_inputs[a])return!1;delete this.global_inputs[a];if(this.onGlobalInputRemoved)this.onGlobalInputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};
LGraph.prototype.changeGlobalInputType=function(a,b){if(!this.global_inputs[a])return!1;if(this.global_inputs[a].type.toLowerCase()!=b.toLowerCase()&&(this.global_inputs[a].type=b,this.onGlobalInputTypeChanged))this.onGlobalInputTypeChanged(a,b)};LGraph.prototype.removeGlobalInput=function(a){if(!this.global_inputs[a])return!1;delete this.global_inputs[a];if(this.onGlobalInputRemoved)this.onGlobalInputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};
LGraph.prototype.addGlobalOutput=function(a,b,c){this.global_outputs[a]={name:a,type:b,value:c};if(this.onGlobalOutputAdded)this.onGlobalOutputAdded(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};LGraph.prototype.setGlobalOutputData=function(a,b){var c=this.global_outputs[a];c&&(c.value=b)};LGraph.prototype.getGlobalOutputData=function(a){return(a=this.global_outputs[a])?a.value:null};
LGraph.prototype.renameGlobalOutput=function(a,b){if(!this.global_outputs[a])return!1;if(this.global_outputs[b])return console.error("there is already one output with that name"),!1;this.global_outputs[b]=this.global_outputs[a];delete this.global_outputs[a];if(this.onGlobalOutputRenamed)this.onGlobalOutputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};
LGraph.prototype.changeGlobalOutputType=function(a,b){if(!this.global_outputs[a])return!1;if(this.global_outputs[a].type!=b&&(this.global_outputs[a].type=b,this.onGlobalOutputTypeChanged))this.onGlobalOutputTypeChanged(a,b)};LGraph.prototype.removeGlobalOutput=function(a){if(!this.global_outputs[a])return!1;delete this.global_outputs[a];if(this.onGlobalOutputRemoved)this.onGlobalOutputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};
LGraph.prototype.changeGlobalOutputType=function(a,b){if(!this.global_outputs[a])return!1;if(this.global_outputs[a].type.toLowerCase()!=b.toLowerCase()&&(this.global_outputs[a].type=b,this.onGlobalOutputTypeChanged))this.onGlobalOutputTypeChanged(a,b)};LGraph.prototype.removeGlobalOutput=function(a){if(!this.global_outputs[a])return!1;delete this.global_outputs[a];if(this.onGlobalOutputRemoved)this.onGlobalOutputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};
LGraph.prototype.setInputData=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setValue(b)};LGraph.prototype.getOutputData=function(a){return this.findNodesByName(a).length?m[0].getValue():null};LGraph.prototype.triggerInput=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].onTrigger(b)};LGraph.prototype.setCallback=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setTrigger(b)};LGraph.prototype.onConnectionChange=function(){this.updateExecutionOrder()};
LGraph.prototype.isLive=function(){for(var a in this.list_of_graphcanvas)if(this.list_of_graphcanvas[a].live_mode)return!0;return!1};LGraph.prototype.change=function(){LiteGraph.debug&&console.log("Graph changed");this.sendActionToCanvas("setDirty",[!0,!0]);if(this.on_change)this.on_change(this)};LGraph.prototype.setDirtyCanvas=function(a,b){this.sendActionToCanvas("setDirty",[a,b])};
LGraph.prototype.serialize=function(){var a=[],b;for(b in this._nodes)a.push(this._nodes[b].serialize());for(b in this.links)this.links[b].data=null;return{iteration:this.iteration,frame:this.frame,last_node_id:this.last_node_id,last_link_id:this.last_link_id,links:LiteGraph.cloneObject(this.links),config:this.config,nodes:a}};
@@ -43,7 +43,8 @@ LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]
LGraphNode.prototype.isPointInsideNode=function(a,b){var c=this.graph&&this.graph.isLive()?0:20;if(this.flags.collapsed){if(isInsideRectangle(a,b,this.pos[0],this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_COLLAPSED_WIDTH,LiteGraph.NODE_TITLE_HEIGHT))return!0}else if(this.pos[0]-4<a&&this.pos[0]+this.size[0]+4>a&&this.pos[1]-c<b&&this.pos[1]+this.size[1]>b)return!0;return!1};
LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b<c;++b)if(a==this.inputs[b].name)return b;return-1};LGraphNode.prototype.findOutputSlot=function(a){if(!this.outputs)return-1;for(var b=0,c=this.outputs.length;b<c;++b)if(a==this.outputs[b].name)return b;return-1};
LGraphNode.prototype.connect=function(a,b,c){c=c||0;if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(b==this)return!1;if(c.constructor===String){if(c=b.findInputSlot(c),-1==c)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+c),!1}else if(!b.inputs||c>=b.inputs.length)return LiteGraph.debug&&
console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];-1==c?(null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1})):d.type&&b.inputs[c].type&&d.type!=b.inputs[c].type||(a={id:this.graph.last_link_id++,origin_id:this.id,origin_slot:a,target_id:b.id,target_slot:c},this.graph.links[a.id]=a,null==d.links&&(d.links=[]),d.links.push(a.id),b.inputs[c].link=a.id,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange());return!0};
console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];-1==c?(null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1})):d.type&&b.inputs[c].type&&d.type.toLowerCase()!=b.inputs[c].type.toLowerCase()||(a={id:this.graph.last_link_id++,origin_id:this.id,origin_slot:a,target_id:b.id,target_slot:c},this.graph.links[a.id]=a,null==d.links&&(d.links=[]),d.links.push(a.id),b.inputs[c].link=a.id,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange());
return!0};
LGraphNode.prototype.disconnectOutput=function(a,b){if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;var c=this.outputs[a];if(!c.links||0==c.links.length)return!1;if(b)for(var d=0,e=c.links.length;d<e;d++){var f=c.links[d],g=this.graph.links[f];if(g.target_id==b.id){c.links.splice(d,1);
b.inputs[g.target_slot].link=null;delete this.graph.links[f];break}}else{d=0;for(e=c.links.length;d<e;d++)if(f=c.links[d],g=this.graph.links[f],b=this.graph.getNodeById(g.target_id))b.inputs[g.target_slot].link=null;c.links=null}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
LGraphNode.prototype.disconnectInput=function(a){if(a.constructor===String){if(a=this.findInputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.inputs||a>=this.inputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(!this.inputs[a])return!1;var b=this.inputs[a].link;this.inputs[a].link=null;b=this.graph.links[b];a=this.graph.getNodeById(b.origin_id);if(!a)return!1;a=a.outputs[b.origin_slot];if(!a||!a.links||
@@ -53,14 +54,17 @@ a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.si
LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.sendActionToCanvas("setDirty",[a,b])};LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b};
LGraphNode.prototype.executeAction=function(a){if(""==a)return!1;if(-1!=a.indexOf(";")||-1!=a.indexOf("}"))return this.trace("Error: Action contains unsafe characters"),!1;var b=a.split("(")[0];if("function"!=typeof this[b])return this.trace("Error: Action not found on node: "+b),!1;try{b=eval,eval=null,(new Function("with(this) { "+a+"}")).call(this),eval=b}catch(c){return this.trace("Error executing action {"+a+"} :"+c),!1}return!0};
LGraphNode.prototype.captureInput=function(a){if(this.graph&&this.graph.list_of_graphcanvas){var b=this.graph.list_of_graphcanvas,c;for(c in b){var d=b[c];if(a||d.node_capturing_input==this)d.node_capturing_input=a?this:null}}};LGraphNode.prototype.collapse=function(){this.flags.collapsed=this.flags.collapsed?!1:!0;this.setDirtyCanvas(!0,!0)};LGraphNode.prototype.pin=function(a){this.flags.pinned=void 0===a?!this.flags.pinned:a};
LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b,c){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";this.max_zoom=10;this.min_zoom=0.1;b&&b.attachCanvas(this);this.setCanvas(a);this.clear();c||this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};
LGraphCanvas.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.scale=1;this.offset=[0,0];this.selected_nodes={};this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highquality_render=!0;this.editor_alpha=1;this.pause_rendering=!1;this.dirty_bgcanvas=this.dirty_canvas=this.render_shadows=!0;this.dirty_area=null;this.render_only_selected=!0;this.live_mode=!1;this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.node_in_panel=
null;this.last_mouse=[0,0];this.last_mouseclick=0;this.title_text_font="bold 14px Arial";this.inner_text_font="normal 12px Arial";this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.connections_width=4;if(this.onClear)this.onClear()};LGraphCanvas.prototype.setGraph=function(a){this.graph!=a&&(this.clear(),!a&&this.graph?this.graph.detachCanvas(this):(a.attachCanvas(this),this.setDirty(!0,!0)))};
LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b,c){a&&a.constructor===String&&(a=document.querySelector(a));this.max_zoom=10;this.min_zoom=0.1;b&&b.attachCanvas(this);this.setCanvas(a);this.clear();c||this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};
LGraphCanvas.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.scale=1;this.offset=[0,0];this.selected_nodes={};this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highquality_render=!0;this.editor_alpha=1;this.pause_rendering=!1;this.render_only_selected=this.clear_background=this.render_shadows=!0;this.live_mode=!1;this.dirty_bgcanvas=this.dirty_canvas=this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.node_in_panel=
this.dirty_area=null;this.last_mouse=[0,0];this.last_mouseclick=0;this.title_text_font="bold 14px Arial";this.inner_text_font="normal 12px Arial";this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.connections_width=4;if(this.onClear)this.onClear()};LGraphCanvas.prototype.setGraph=function(a,b){this.graph!=a&&(b||this.clear(),!a&&this.graph?this.graph.detachCanvas(this):(a.attachCanvas(this),this.setDirty(!0,!0)))};
LGraphCanvas.prototype.openSubgraph=function(a){if(!a)throw"graph cannot be null";if(this.graph==a)throw"graph cannot be the same";this.clear();this.graph&&(this._graph_stack||(this._graph_stack=[]),this._graph_stack.push(this.graph));a.attachCanvas(this);this.setDirty(!0,!0)};LGraphCanvas.prototype.closeSubgraph=function(){this._graph_stack&&0!=this._graph_stack.length&&(this._graph_stack.pop().attachCanvas(this),this.setDirty(!0,!0))};
LGraphCanvas.prototype.setCanvas=function(a){var b=this;"string"==typeof a&&(a=document.getElementById(a));if(null==a)throw"Error creating LiteGraph canvas: Canvas not found";if(a!=this.canvas){this.canvas=a;a.className+=" lgraphcanvas";a.data=this;this.bgcanvas=null;this.bgcanvas||(this.bgcanvas=document.createElement("canvas"),this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height);if(null==a.getContext)throw"This browser doesnt support Canvas";null==(this.ctx=a.getContext("2d"))&&
(console.warn("This canvas seems to be WebGL, enabling WebGL renderer"),this.enableWebGL());this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);a.addEventListener("mousedown",this.processMouseDown.bind(this),!0);a.addEventListener("mousemove",this._mousemove_callback);a.addEventListener("contextmenu",function(a){a.preventDefault();return!1});a.addEventListener("mousewheel",this.processMouseWheel.bind(this),!1);a.addEventListener("DOMMouseScroll",
this.processMouseWheel.bind(this),!1);a.addEventListener("touchstart",this.touchHandler,!0);a.addEventListener("touchmove",this.touchHandler,!0);a.addEventListener("touchend",this.touchHandler,!0);a.addEventListener("touchcancel",this.touchHandler,!0);a.addEventListener("keydown",function(a){b.processKeyDown(a)});a.addEventListener("keyup",function(a){b.processKeyUp(a)});a.ondragover=function(){console.log("hover");return!1};a.ondragend=function(){console.log("out");return!1};a.ondrop=function(a){a.preventDefault();
b.adjustMouseEvent(a);var d=[a.canvasX,a.canvasY],e=b.graph.getNodeOnPos(d[0],d[1]);if(e&&e.onDropFile){var f=a.dataTransfer.files[0],g=f.name;LGraphCanvas.getFileExtension(g);a=new FileReader;a.onload=function(a){e.onDropFile(a.target.result,g,f)};d=f.type.split("/")[0];"text"==d||""==d?a.readAsText(f):"image"==d?a.readAsDataURL(f):a.readAsArrayBuffer(f);return!1}}}};
LGraphCanvas.prototype.setCanvas=function(a,b){if(a&&a.constructor===String&&(a=document.getElementById(a),!a))throw"Error creating LiteGraph canvas: Canvas not found";if(a!==this.canvas&&(!a&&this.canvas&&(b||this.unbindEvents()),this.canvas=a)){a.className+=" lgraphcanvas";a.data=this;this.bgcanvas=null;this.bgcanvas||(this.bgcanvas=document.createElement("canvas"),this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height);if(null==a.getContext)throw"This browser doesnt support Canvas";
null==(this.ctx=a.getContext("2d"))&&(console.warn("This canvas seems to be WebGL, enabling WebGL renderer"),this.enableWebGL());this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);b||this.bindEvents()}};LGraphCanvas.prototype._doNothing=function(){return!1};
LGraphCanvas.prototype.bindEvents=function(){if(this._events_binded)console.warn("LGraphCanvas: events already binded");else{var a=this.canvas;this._mousedown_callback=this.processMouseDown.bind(this);this._mousewheel_callback=this.processMouseWheel.bind(this);a.addEventListener("mousedown",this._mousedown_callback,!0);a.addEventListener("mousemove",this._mousemove_callback);a.addEventListener("mousewheel",this._mousewheel_callback,!1);a.addEventListener("contextmenu",this._doNothing);a.addEventListener("DOMMouseScroll",
this._mousewheel_callback,!1);a.addEventListener("touchstart",this.touchHandler,!0);a.addEventListener("touchmove",this.touchHandler,!0);a.addEventListener("touchend",this.touchHandler,!0);a.addEventListener("touchcancel",this.touchHandler,!0);this._key_callback=this.processKey.bind(this);a.addEventListener("keydown",this._key_callback);a.addEventListener("keyup",this._key_callback);this._ondrop_callback=this.processDrop.bind(this);a.addEventListener("dragover",this._doNothing,!1);a.addEventListener("dragend",
this._doNothing,!1);a.addEventListener("drop",this._ondrop_callback,!1);this._events_binded=!0}};
LGraphCanvas.prototype.unbindEvents=function(){this._events_binded?(this.canvas.removeEventListener("mousedown",this._mousedown_callback),this.canvas.removeEventListener("mousewheel",this._mousewheel_callback),this.canvas.removeEventListener("DOMMouseScroll",this._mousewheel_callback),this.canvas.removeEventListener("keydown",this._key_callback),this.canvas.removeEventListener("keyup",this._key_callback),this.canvas.removeEventListener("contextmenu",this._doNothing),this.canvas.removeEventListener("drop",
this._ondrop_callback),this.canvas.removeEventListener("touchstart",this.touchHandler),this.canvas.removeEventListener("touchmove",this.touchHandler),this.canvas.removeEventListener("touchend",this.touchHandler),this.canvas.removeEventListener("touchcancel",this.touchHandler),this._ondrop_callback=this._key_callback=this._mousewheel_callback=this._mousedown_callback=null,this._events_binded=!1):console.warn("LGraphCanvas: no events binded")};
LGraphCanvas.getFileExtension=function(a){var b=a.indexOf("?");-1!=b&&(a=a.substr(0,b));b=a.lastIndexOf(".");return-1==b?"":a.substr(b+1).toLowerCase()};LGraphCanvas.prototype.enableWebGL=function(){if(void 0===typeof GL)throw"litegl.js must be included to use a WebGL canvas";if(void 0===typeof enableWebGLCanvas)throw"webglCanvas.js must be included to use this feature";this.gl=this.ctx=enableWebGLCanvas(this.canvas);this.ctx.webgl=!0;this.bgcanvas=this.canvas;this.bgctx=this.gl};
LGraphCanvas.prototype.setDirty=function(a,b){a&&(this.dirty_canvas=!0);b&&(this.dirty_bgcanvas=!0)};LGraphCanvas.prototype.getCanvasWindow=function(){var a=this.canvas.ownerDocument;return a.defaultView||a.parentWindow};LGraphCanvas.prototype.startRendering=function(){function a(){this.pause_rendering||this.draw();var b=this.getCanvasWindow();this.is_rendering&&b.requestAnimationFrame(a.bind(this))}this.is_rendering||(this.is_rendering=!0,a.call(this))};
LGraphCanvas.prototype.stopRendering=function(){this.is_rendering=!1};
@@ -70,16 +74,17 @@ g;++e)h=c.inputs[e],k=c.getConnectionPos(!0,e),isInsideRectangle(a.canvasX,a.can
!1;if(300>LiteGraph.getTime()-this.last_mouseclick&&this.selected_nodes[c.id]){if(c.onDblClick)c.onDblClick(a);this.processNodeDblClicked(c);e=!0}c.onMouseDown&&c.onMouseDown(a)?e=!0:this.live_mode&&(e=d=!0);e||(this.allow_dragnodes&&(this.node_dragged=c),this.selected_nodes[c.id]||this.processNodeSelected(c,a));this.dirty_canvas=!0}}else d=!0;d&&this.allow_dragcanvas&&(this.dragging_canvas=!0)}else 2!=a.which&&3==a.which&&this.processContextualMenu(c,a);this.last_mouse[0]=a.localX;this.last_mouse[1]=
a.localY;this.last_mouseclick=LiteGraph.getTime();this.canvas_mouse=[a.canvasX,a.canvasY];this.graph.change();(!b.document.activeElement||"input"!=b.document.activeElement.nodeName.toLowerCase()&&"textarea"!=b.document.activeElement.nodeName.toLowerCase())&&a.preventDefault();a.stopPropagation();return!1}};
LGraphCanvas.prototype.processMouseMove=function(a){if(this.graph){this.adjustMouseEvent(a);var b=[a.localX,a.localY],c=[b[0]-this.last_mouse[0],b[1]-this.last_mouse[1]];this.last_mouse=b;this.canvas_mouse=[a.canvasX,a.canvasY];if(this.dragging_canvas)this.offset[0]+=c[0]/this.scale,this.offset[1]+=c[1]/this.scale,this.dirty_bgcanvas=this.dirty_canvas=!0;else{this.connecting_node&&(this.dirty_canvas=!0);var b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes),d;for(d in this.graph._nodes)if(this.graph._nodes[d].mouseOver&&
b!=this.graph._nodes[d]){this.graph._nodes[d].mouseOver=!1;if(this.node_over&&this.node_over.onMouseLeave)this.node_over.onMouseLeave(a);this.node_over=null;this.dirty_canvas=!0}if(b){if(!b.mouseOver&&(b.mouseOver=!0,this.node_over=b,this.dirty_canvas=!0,b.onMouseEnter))b.onMouseEnter(a);if(b.onMouseMove)b.onMouseMove(a);if(this.connecting_node){var e=this._highlight_input||[0,0],f=this.isOverNodeInput(b,a.canvasX,a.canvasY,e);-1!=f&&b.inputs[f]?(f=b.inputs[f].type,f!=this.connecting_output.type&&
f&&this.connecting_output.type||(this._highlight_input=e)):this._highlight_input=null}isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)?this.canvas.style.cursor="se-resize":this.canvas.style.cursor=null}else this.canvas.style.cursor=null;if(this.node_capturing_input&&this.node_capturing_input!=b&&this.node_capturing_input.onMouseMove)this.node_capturing_input.onMouseMove(a);if(this.node_dragged&&!this.live_mode){for(d in this.selected_nodes)b=this.selected_nodes[d],
b.pos[0]+=c[0]/this.scale,b.pos[1]+=c[1]/this.scale;this.dirty_bgcanvas=this.dirty_canvas=!0}this.resizing_node&&!this.live_mode&&(this.resizing_node.size[0]+=c[0]/this.scale,this.resizing_node.size[1]+=c[1]/this.scale,c=Math.max(this.resizing_node.inputs?this.resizing_node.inputs.length:0,this.resizing_node.outputs?this.resizing_node.outputs.length:0),this.resizing_node.size[1]<c*LiteGraph.NODE_SLOT_HEIGHT+4&&(this.resizing_node.size[1]=c*LiteGraph.NODE_SLOT_HEIGHT+4),this.resizing_node.size[0]<
b!=this.graph._nodes[d]){this.graph._nodes[d].mouseOver=!1;if(this.node_over&&this.node_over.onMouseLeave)this.node_over.onMouseLeave(a);this.node_over=null;this.dirty_canvas=!0}if(b){if(!b.mouseOver&&(b.mouseOver=!0,this.node_over=b,this.dirty_canvas=!0,b.onMouseEnter))b.onMouseEnter(a);if(b.onMouseMove)b.onMouseMove(a);if(this.connecting_node){var e=this._highlight_input||[0,0],f=this.isOverNodeInput(b,a.canvasX,a.canvasY,e);-1!=f&&b.inputs[f]?(f=b.inputs[f].type,this.connecting_output.type&&f&&
f.toLowerCase()!=this.connecting_output.type.toLowerCase()||(this._highlight_input=e)):this._highlight_input=null}isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)?this.canvas.style.cursor="se-resize":this.canvas.style.cursor=null}else this.canvas.style.cursor=null;if(this.node_capturing_input&&this.node_capturing_input!=b&&this.node_capturing_input.onMouseMove)this.node_capturing_input.onMouseMove(a);if(this.node_dragged&&!this.live_mode){for(d in this.selected_nodes)b=
this.selected_nodes[d],b.pos[0]+=c[0]/this.scale,b.pos[1]+=c[1]/this.scale;this.dirty_bgcanvas=this.dirty_canvas=!0}this.resizing_node&&!this.live_mode&&(this.resizing_node.size[0]+=c[0]/this.scale,this.resizing_node.size[1]+=c[1]/this.scale,c=Math.max(this.resizing_node.inputs?this.resizing_node.inputs.length:0,this.resizing_node.outputs?this.resizing_node.outputs.length:0),this.resizing_node.size[1]<c*LiteGraph.NODE_SLOT_HEIGHT+4&&(this.resizing_node.size[1]=c*LiteGraph.NODE_SLOT_HEIGHT+4),this.resizing_node.size[0]<
LiteGraph.NODE_MIN_WIDTH&&(this.resizing_node.size[0]=LiteGraph.NODE_MIN_WIDTH),this.canvas.style.cursor="se-resize",this.dirty_bgcanvas=this.dirty_canvas=!0)}a.preventDefault();return!1}};
LGraphCanvas.prototype.processMouseUp=function(a){if(this.graph){var b=this.getCanvasWindow().document;b.removeEventListener("mousemove",this._mousemove_callback,!0);this.canvas.addEventListener("mousemove",this._mousemove_callback,!0);b.removeEventListener("mouseup",this._mouseup_callback,!0);this.adjustMouseEvent(a);if(1==a.which)if(this.connecting_node){this.dirty_bgcanvas=this.dirty_canvas=!0;if(b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes))if("node"==this.connecting_output.type)this.connecting_node.connect(this.connecting_slot,
b,-1);else{var c=this.isOverNodeInput(b,a.canvasX,a.canvasY);-1!=c?this.connecting_node.connect(this.connecting_slot,b,c):(c=b.getInputInfo(0))&&!c.link&&c.type==this.connecting_output.type&&this.connecting_node.connect(this.connecting_slot,b,0)}this.connecting_node=this.connecting_pos=this.connecting_output=null;this.connecting_slot=-1}else if(this.resizing_node)this.dirty_bgcanvas=this.dirty_canvas=!0,this.resizing_node=null;else if(this.node_dragged)this.dirty_bgcanvas=this.dirty_canvas=!0,this.node_dragged.pos[0]=
Math.round(this.node_dragged.pos[0]),this.node_dragged.pos[1]=Math.round(this.node_dragged.pos[1]),this.graph.config.align_to_grid&&this.node_dragged.alignToGrid(),this.node_dragged=null;else{this.dirty_canvas=!0;this.dragging_canvas=!1;if(this.node_over&&this.node_over.onMouseUp)this.node_over.onMouseUp(a);if(this.node_capturing_input&&this.node_capturing_input.onMouseUp)this.node_capturing_input.onMouseUp(a)}else 2==a.which?(this.dirty_canvas=!0,this.dragging_canvas=!1):3==a.which&&(this.dirty_canvas=
!0,this.dragging_canvas=!1);this.graph.change();a.stopPropagation();a.preventDefault();return!1}};LGraphCanvas.prototype.isOverNodeInput=function(a,b,c,d){if(a.inputs)for(var e=0,f=a.inputs.length;e<f;++e){var g=a.getConnectionPos(!0,e);if(isInsideRectangle(b,c,g[0]-10,g[1]-5,20,10))return d&&(d[0]=g[0],d[1]=g[1]),e}return-1};
LGraphCanvas.prototype.processKeyDown=function(a){if(this.graph){var b=!1;65==a.keyCode&&a.ctrlKey&&(this.selectAllNodes(),b=!0);if(46==a.keyCode||8==a.keyCode)this.deleteSelectedNodes(),b=!0;if(this.selected_nodes)for(var c in this.selected_nodes)if(this.selected_nodes[c].onKeyDown)this.selected_nodes[c].onKeyDown(a);this.graph.change();if(b)return a.preventDefault(),!1}};
LGraphCanvas.prototype.processKeyUp=function(a){if(this.graph){if(this.selected_nodes)for(var b in this.selected_nodes)if(this.selected_nodes[b].onKeyUp)this.selected_nodes[b].onKeyUp(a);this.graph.change()}};LGraphCanvas.prototype.processMouseWheel=function(a){if(this.graph&&this.allow_dragcanvas){var b=null!=a.wheelDeltaY?a.wheelDeltaY:-60*a.detail;this.adjustMouseEvent(a);var c=this.scale;0<b?c*=1.1:0>b&&(c*=1/1.1);this.setZoom(c,[a.localX,a.localY]);this.graph.change();a.preventDefault();return!1}};
!0,this.dragging_canvas=!1);this.graph.change();a.stopPropagation();a.preventDefault();return!1}};LGraphCanvas.prototype.processMouseWheel=function(a){if(this.graph&&this.allow_dragcanvas){var b=null!=a.wheelDeltaY?a.wheelDeltaY:-60*a.detail;this.adjustMouseEvent(a);var c=this.scale;0<b?c*=1.1:0>b&&(c*=1/1.1);this.setZoom(c,[a.localX,a.localY]);this.graph.change();a.preventDefault();return!1}};
LGraphCanvas.prototype.isOverNodeInput=function(a,b,c,d){if(a.inputs)for(var e=0,f=a.inputs.length;e<f;++e){var g=a.getConnectionPos(!0,e);if(isInsideRectangle(b,c,g[0]-10,g[1]-5,20,10))return d&&(d[0]=g[0],d[1]=g[1]),e}return-1};
LGraphCanvas.prototype.processKey=function(a){if(this.graph){var b=!1;if("keydown"==a.type){65==a.keyCode&&a.ctrlKey&&(this.selectAllNodes(),b=!0);if(46==a.keyCode||8==a.keyCode)this.deleteSelectedNodes(),b=!0;if(this.selected_nodes)for(var c in this.selected_nodes)if(this.selected_nodes[c].onKeyDown)this.selected_nodes[c].onKeyDown(a)}else if("keyup"==a.type&&this.selected_nodes)for(c in this.selected_nodes)if(this.selected_nodes[c].onKeyUp)this.selected_nodes[c].onKeyUp(a);this.graph.change();if(b)return a.preventDefault(),
!1}};LGraphCanvas.prototype.processDrop=function(a){a.preventDefault();this.adjustMouseEvent(a);var b=[a.canvasX,a.canvasY],c=this.graph.getNodeOnPos(b[0],b[1]);if(c&&c.onDropFile){var d=a.dataTransfer.files[0],e=d.name;LGraphCanvas.getFileExtension(e);a=new FileReader;a.onload=function(a){c.onDropFile(a.target.result,e,d)};b=d.type.split("/")[0];"text"==b||""==b?a.readAsText(d):"image"==b?a.readAsDataURL(d):a.readAsArrayBuffer(d);return!1}};
LGraphCanvas.prototype.processNodeSelected=function(a,b){a.selected=!0;if(a.onSelected)a.onSelected();b&&b.shiftKey||(this.selected_nodes={});this.selected_nodes[a.id]=a;this.dirty_canvas=!0;if(this.onNodeSelected)this.onNodeSelected(a)};LGraphCanvas.prototype.processNodeDeselected=function(a){a.selected=!1;if(a.onDeselected)a.onDeselected();delete this.selected_nodes[a.id];if(this.onNodeDeselected)this.onNodeDeselected();this.dirty_canvas=!0};
LGraphCanvas.prototype.processNodeDblClicked=function(a){if(this.onShowNodePanel)this.onShowNodePanel(a);if(this.onNodeDblClicked)this.onNodeDblClicked(a);this.setDirty(!0)};LGraphCanvas.prototype.selectNode=function(a){this.deselectAllNodes();if(a){if(!a.selected&&a.onSelected)a.onSelected();a.selected=!0;this.selected_nodes[a.id]=a;this.setDirty(!0)}};
LGraphCanvas.prototype.selectAllNodes=function(){for(var a in this.graph._nodes){var b=this.graph._nodes[a];if(!b.selected&&b.onSelected)b.onSelected();b.selected=!0;this.selected_nodes[this.graph._nodes[a].id]=b}this.setDirty(!0)};LGraphCanvas.prototype.deselectAllNodes=function(){for(var a in this.selected_nodes){var b=this.selected_nodes;if(b.onDeselected)b.onDeselected();b.selected=!1}this.selected_nodes={};this.setDirty(!0)};
@@ -90,18 +95,18 @@ LGraphCanvas.prototype.convertOffsetToCanvas=function(a){return[a[0]/this.scale-
LGraphCanvas.prototype.bringToFront=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.push(a))};LGraphCanvas.prototype.sendToBack=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.unshift(a))};
LGraphCanvas.prototype.computeVisibleNodes=function(){var a=[],b;for(b in this.graph._nodes){var c=this.graph._nodes[b];(!this.live_mode||c.onDrawBackground||c.onDrawForeground)&&overlapBounding(this.visible_area,c.getBounding())&&a.push(c)}return a};
LGraphCanvas.prototype.draw=function(a,b){var c=LiteGraph.getTime();this.render_time=0.001*(c-this.last_draw_time);this.last_draw_time=c;if(this.graph){var c=[-this.offset[0],-this.offset[1]],d=[c[0]+this.canvas.width/this.scale,c[1]+this.canvas.height/this.scale];this.visible_area=new Float32Array([c[0],c[1],d[0],d[1]])}(this.dirty_bgcanvas||b)&&this.drawBackCanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=this.render_time?1/this.render_time:0;this.frame+=1};
LGraphCanvas.prototype.drawFrontCanvas=function(){this.ctx||(this.ctx=this.bgcanvas.getContext("2d"));var a=this.ctx;if(a){a.start2D&&a.start2D();var b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());a.clearRect(0,0,b.width,b.height);this.bgcanvas==this.canvas?this.drawBackCanvas():a.drawImage(this.bgcanvas,0,0);if(this.onRender)this.onRender(b,a);this.show_info&&
(a.font="10px Arial",a.fillStyle="#888",this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("F: "+this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.scale,this.scale);a.translate(this.offset[0],this.offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);this.drawNode(d,
a);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=this.connecting_pos&&(a.lineWidth=this.connections_width,this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]],"node"==this.connecting_output.type?"#F85":"#AFA"),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),
a.fill()));a.restore()}this.dirty_area&&a.restore();a.finish2D&&a.finish2D();this.dirty_canvas=!1}};
LGraphCanvas.prototype.drawBackCanvas=function(){var a=this.bgcanvas;this.bgctx||(this.bgctx=this.bgcanvas.getContext("2d"));var b=this.bgctx;b.start&&b.start();b.clearRect(0,0,a.width,a.height);b.restore();b.setTransform(1,0,0,1,0,0);if(this.graph){b.save();b.scale(this.scale,this.scale);b.translate(this.offset[0],this.offset[1]);if(this.background_image&&0.5<this.scale){b.globalAlpha=(1-0.5/this.scale)*this.editor_alpha;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=
!1;if(!this._bg_img||this._bg_img.name!=this.background_image){this._bg_img=new Image;this._bg_img.name=this.background_image;this._bg_img.src=this.background_image;var c=this;this._bg_img.onload=function(){c.draw(!0,!0)}}var d=null;this._bg_img!=this._pattern_img&&0<this._bg_img.width?(d=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=d):d=this._pattern;d&&(b.fillStyle=d,b.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]),b.fillStyle="transparent");b.globalAlpha=1;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=!0}if(this.onBackgroundRender)this.onBackgroundRender(a,b);b.strokeStyle="#235";b.strokeRect(0,0,a.width,a.height);this.render_connections_shadows?(b.shadowColor="#000",b.shadowOffsetX=0,b.shadowOffsetY=0,b.shadowBlur=6):b.shadowColor="rgba(0,0,0,0)";this.live_mode||this.drawConnections(b);b.shadowColor="rgba(0,0,0,0)";b.restore()}b.finish&&
b.finish();this.dirty_bgcanvas=!1;this.dirty_canvas=!0};
LGraphCanvas.prototype.drawFrontCanvas=function(){this.ctx||(this.ctx=this.bgcanvas.getContext("2d"));var a=this.ctx;if(a){a.start2D&&a.start2D();var b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());this.clear_background&&a.clearRect(0,0,b.width,b.height);this.bgcanvas==this.canvas?this.drawBackCanvas():a.drawImage(this.bgcanvas,0,0);if(this.onRender)this.onRender(b,
a);this.show_info&&this.renderInfo(a);if(this.graph){a.save();a.scale(this.scale,this.scale);a.translate(this.offset[0],this.offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);this.drawNode(d,a);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=this.connecting_pos&&(a.lineWidth=this.connections_width,this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]],"node"==
this.connecting_output.type?"#F85":"#AFA"),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();a.finish2D&&a.finish2D();this.dirty_canvas=!1}};
LGraphCanvas.prototype.renderInfo=function(a,b,c){b=b||0;c=c||0;a.save();a.translate(b,c);a.font="10px Arial";a.fillStyle="#888";this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("F: "+this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13);a.restore()};
LGraphCanvas.prototype.drawBackCanvas=function(){var a=this.bgcanvas;this.bgctx||(this.bgctx=this.bgcanvas.getContext("2d"));var b=this.bgctx;b.start&&b.start();this.clear_background&&b.clearRect(0,0,a.width,a.height);b.restore();b.setTransform(1,0,0,1,0,0);if(this.graph){b.save();b.scale(this.scale,this.scale);b.translate(this.offset[0],this.offset[1]);if(this.background_image&&0.5<this.scale){b.globalAlpha=(1-0.5/this.scale)*this.editor_alpha;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=
b.imageSmoothingEnabled=!1;if(!this._bg_img||this._bg_img.name!=this.background_image){this._bg_img=new Image;this._bg_img.name=this.background_image;this._bg_img.src=this.background_image;var c=this;this._bg_img.onload=function(){c.draw(!0,!0)}}var d=null;this._bg_img!=this._pattern_img&&0<this._bg_img.width?(d=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=d):d=this._pattern;d&&(b.fillStyle=d,b.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]),b.fillStyle="transparent");b.globalAlpha=1;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=!0}if(this.onBackgroundRender)this.onBackgroundRender(a,b);b.strokeStyle="#235";b.strokeRect(0,0,a.width,a.height);this.render_connections_shadows?(b.shadowColor="#000",b.shadowOffsetX=0,b.shadowOffsetY=0,b.shadowBlur=6):b.shadowColor="rgba(0,0,0,0)";this.live_mode||this.drawConnections(b);b.shadowColor="rgba(0,0,0,0)";
b.restore()}b.finish&&b.finish();this.dirty_bgcanvas=!1;this.dirty_canvas=!0};
LGraphCanvas.prototype.drawNode=function(a,b){var c=a.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(a.flags.skip_title_render||a.graph.isLive())d=!1;a.mouseOver&&(d=!0);a.selected||(this.render_shadows?(b.shadowColor="rgba(0,0,0,0.5)",b.shadowOffsetX=2,b.shadowOffsetY=2,b.shadowBlur=3):b.shadowColor="transparent");if(this.live_mode){if(!a.flags.collapsed&&(b.shadowColor="transparent",a.onDrawForeground))a.onDrawForeground(b)}else{var e=this.editor_alpha;b.globalAlpha=e;var f=a.shape||"box",g=new Float32Array(a.size);
a.flags.collapsed&&(g[0]=LiteGraph.NODE_COLLAPSED_WIDTH,g[1]=0);a.flags.clip_area&&(b.save(),"box"==f?(b.beginPath(),b.rect(0,0,g[0],g[1])):"round"==f?b.roundRect(0,0,g[0],g[1],10):"circle"==f&&(b.beginPath(),b.arc(0.5*g[0],0.5*g[1],0.5*g[0],0,2*Math.PI)),b.clip());this.drawNodeShape(a,b,g,c,a.bgcolor,!d,a.selected);b.shadowColor="transparent";b.textAlign="left";b.font=this.inner_text_font;d=0.6<this.scale;if(!a.flags.collapsed){if(a.inputs)for(f=0;f<a.inputs.length;f++){var h=a.inputs[f];b.globalAlpha=
e;null!=this.connecting_node&&0!=this.connecting_output.type&&0!=a.inputs[f].type&&this.connecting_output.type!=a.inputs[f].type&&(b.globalAlpha=0.4*e);b.fillStyle=null!=h.link?"#7F7":"#AAA";g=a.getConnectionPos(!0,f);g[0]-=a.pos[0];g[1]-=a.pos[1];b.beginPath();b.arc(g[0],g[1],4,0,2*Math.PI);b.fill();d&&(h=null!=h.label?h.label:h.name)&&(b.fillStyle=c,b.fillText(h,g[0]+10,g[1]+5))}this.connecting_node&&(b.globalAlpha=0.4*e);b.lineWidth=1;b.textAlign="right";b.strokeStyle="black";if(a.outputs)for(f=
0;f<a.outputs.length;f++)if(h=a.outputs[f],g=a.getConnectionPos(!1,f),g[0]-=a.pos[0],g[1]-=a.pos[1],b.fillStyle=h.links&&h.links.length?"#7F7":"#AAA",b.beginPath(),b.arc(g[0],g[1],4,0,2*Math.PI),b.fill(),b.stroke(),d&&(h=null!=h.label?h.label:h.name))b.fillStyle=c,b.fillText(h,g[0]-10,g[1]+5);b.textAlign="left";b.globalAlpha=1;if(a.onDrawForeground)a.onDrawForeground(b)}a.flags.clip_area&&b.restore();b.globalAlpha=1}};
e;null!=this.connecting_node&&this.connecting_output.type&&a.inputs[f].type&&this.connecting_output.type.toLowerCase()!=a.inputs[f].type.toLowerCase()&&(b.globalAlpha=0.4*e);b.fillStyle=null!=h.link?"#7F7":"#AAA";g=a.getConnectionPos(!0,f);g[0]-=a.pos[0];g[1]-=a.pos[1];b.beginPath();b.arc(g[0],g[1],4,0,2*Math.PI);b.fill();d&&(h=null!=h.label?h.label:h.name)&&(b.fillStyle=c,b.fillText(h,g[0]+10,g[1]+5))}this.connecting_node&&(b.globalAlpha=0.4*e);b.lineWidth=1;b.textAlign="right";b.strokeStyle="black";
if(a.outputs)for(f=0;f<a.outputs.length;f++)if(h=a.outputs[f],g=a.getConnectionPos(!1,f),g[0]-=a.pos[0],g[1]-=a.pos[1],b.fillStyle=h.links&&h.links.length?"#7F7":"#AAA",b.beginPath(),b.arc(g[0],g[1],4,0,2*Math.PI),b.fill(),b.stroke(),d&&(h=null!=h.label?h.label:h.name))b.fillStyle=c,b.fillText(h,g[0]-10,g[1]+5);b.textAlign="left";b.globalAlpha=1;if(a.onDrawForeground)a.onDrawForeground(b)}a.flags.clip_area&&b.restore();b.globalAlpha=1}};
LGraphCanvas.prototype.drawNodeShape=function(a,b,c,d,e,f,g){b.strokeStyle=d||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=e||LiteGraph.NODE_DEFAULT_BGCOLOR;e=LiteGraph.NODE_TITLE_HEIGHT;var h=a.shape||"box";"box"==h?(b.beginPath(),b.rect(0,f?0:-e,c[0]+1,f?c[1]:c[1]+e),b.fill(),b.shadowColor="transparent",g&&(b.strokeStyle="#CCC",b.strokeRect(-0.5,f?-0.5:-e+-0.5,c[0]+2,f?c[1]+2:c[1]+e+2-1),b.strokeStyle=d)):"round"==a.shape?(b.roundRect(0,f?0:-e,c[0],f?c[1]:c[1]+e,10),b.fill()):"circle"==a.shape&&(b.beginPath(),
b.arc(0.5*c[0],0.5*c[1],0.5*c[0],0,2*Math.PI),b.fill());b.shadowColor="transparent";a.bgImage&&a.bgImage.width&&b.drawImage(a.bgImage,0.5*(c[0]-a.bgImage.width),0.5*(c[1]-a.bgImage.height));a.bgImageUrl&&!a.bgImage&&(a.bgImage=a.loadImage(a.bgImageUrl));if(a.onDrawBackground)a.onDrawBackground(b);f||(b.fillStyle=d||LiteGraph.NODE_DEFAULT_COLOR,d=b.globalAlpha,b.globalAlpha=0.5*d,"box"==h?(b.beginPath(),b.rect(0,-e,c[0]+1,e),b.fill()):"round"==h&&(b.roundRect(0,-e,c[0],e,10,0),b.fill()),b.fillStyle=
a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),"round"==h?b.arc(0.5*e,-0.5*e,0.5*(e-6),0,2*Math.PI):b.rect(3,-e+3,e-6,e-6),b.fill(),b.globalAlpha=d,b.font=this.title_text_font,(a=a.getTitle())&&0.5<this.scale&&(b.fillStyle=LiteGraph.NODE_TITLE_COLOR,b.fillText(a,16,13-e)))};
@@ -125,7 +130,7 @@ LGraphCanvas.node_colors={red:{color:"#FAA",bgcolor:"#A44"},green:{color:"#AFA",
LGraphCanvas.prototype.getCanvasMenuOptions=function(){var a=null;this.getMenuOptions?a=this.getMenuOptions():(a=[{content:"Add Node",is_menu:!0,callback:LGraphCanvas.onMenuAdd}],this._graph_stack&&0<this._graph_stack.length&&(a=[{content:"Close subgraph",callback:this.closeSubgraph.bind(this)},null].concat(a)));if(this.getExtraMenuOptions){var b=this.getExtraMenuOptions(this);b&&(b.push(null),a=b.concat(a))}return a};
LGraphCanvas.prototype.getNodeMenuOptions=function(a){var b=null,b=a.getMenuOptions?a.getMenuOptions(this):[{content:"Inputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeInputs},{content:"Outputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeOutputs},null,{content:"Collapse",callback:LGraphCanvas.onMenuNodeCollapse},{content:"Pin",callback:LGraphCanvas.onMenuNodePin},{content:"Colors",is_menu:!0,callback:LGraphCanvas.onMenuNodeColors},{content:"Shapes",is_menu:!0,callback:LGraphCanvas.onMenuNodeShapes},
null];if(a.getExtraMenuOptions){var c=a.getExtraMenuOptions(this);c&&(c.push(null),b=c.concat(b))}!1!==a.clonable&&b.push({content:"Clone",callback:LGraphCanvas.onMenuNodeClone});!1!==a.removable&&b.push(null,{content:"Remove",callback:LGraphCanvas.onMenuNodeRemove});a.onGetInputs&&(c=a.onGetInputs())&&c.length&&(b[0].disabled=!1);a.onGetOutputs&&(a=a.onGetOutputs())&&a.length&&(b[1].disabled=!1);return b};
LGraphCanvas.prototype.processContextualMenu=function(a,b){var c=this,d=this.getCanvasWindow(),e=LiteGraph.createContextualMenu(a?this.getNodeMenuOptions(a):this.getCanvasMenuOptions(),{event:b,callback:function(f,d){if(f&&f.callback)return f.callback(a,d,e,c,b)}},d)};
LGraphCanvas.prototype.processContextualMenu=function(a,b){var c=this,d=this.getCanvasWindow(),e=LiteGraph.createContextualMenu(a?this.getNodeMenuOptions(a):this.getCanvasMenuOptions(),{event:b,callback:function(d,g){if(d&&d.callback)return d.callback(a,g,e,c,b)}},d)};
CanvasRenderingContext2D.prototype.roundRect=function(a,b,c,d,e,f){void 0===e&&(e=5);void 0===f&&(f=e);this.beginPath();this.moveTo(a+e,b);this.lineTo(a+c-e,b);this.quadraticCurveTo(a+c,b,a+c,b+e);this.lineTo(a+c,b+d-f);this.quadraticCurveTo(a+c,b+d,a+c-f,b+d);this.lineTo(a+f,b+d);this.quadraticCurveTo(a,b+d,a,b+d-f);this.lineTo(a,b+e);this.quadraticCurveTo(a,b,a+e,b)};function compareObjects(a,b){for(var c in a)if(a[c]!=b[c])return!1;return!0}
function distance(a,b){return Math.sqrt((b[0]-a[0])*(b[0]-a[0])+(b[1]-a[1])*(b[1]-a[1]))}function colorToString(a){return"rgba("+Math.round(255*a[0]).toFixed()+","+Math.round(255*a[1]).toFixed()+","+Math.round(255*a[2]).toFixed()+","+(4==a.length?a[3].toFixed(2):"1.0")+")"}function isInsideRectangle(a,b,c,d,e,f){return c<a&&c+e>a&&d<b&&d+f>b?!0:!1}function growBounding(a,b,c){b<a[0]?a[0]=b:b>a[2]&&(a[2]=b);c<a[1]?a[1]=c:c>a[3]&&(a[3]=c)}
function isInsideBounding(a,b){return a[0]<b[0][0]||a[1]<b[0][1]||a[0]>b[1][0]||a[1]>b[1][1]?!1:!0}function overlapBounding(a,b){return a[0]>b[2]||a[1]>b[3]||a[2]<b[0]||a[3]<b[1]?!1:!0}function hex2num(a){"#"==a.charAt(0)&&(a=a.slice(1));a=a.toUpperCase();for(var b=Array(3),c=0,d,e,f=0;6>f;f+=2)d="0123456789ABCDEF".indexOf(a.charAt(f)),e="0123456789ABCDEF".indexOf(a.charAt(f+1)),b[c]=16*d+e,c++;return b}
@@ -137,8 +142,8 @@ h=h.left+h.width),h>f.width-a.width-10&&(h=f.width-a.width-10),g>f.height-a.heig
LiteGraph.extendClass=function(a,b){for(var c in b)a.hasOwnProperty(c)||(a[c]=b[c]);if(b.prototype)for(c in b.prototype)b.prototype.hasOwnProperty(c)&&!a.prototype.hasOwnProperty(c)&&(b.prototype.__lookupGetter__(c)?a.prototype.__defineGetter__(c,b.prototype.__lookupGetter__(c)):a.prototype[c]=b.prototype[c],b.prototype.__lookupSetter__(c)&&a.prototype.__defineSetter__(c,b.prototype.__lookupSetter__(c)))};
window.requestAnimationFrame||(window.requestAnimationFrame=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)});
(function(){function a(){this.size=[120,60];this.subgraph=new LGraph;this.subgraph._subgraph_node=this;this.subgraph._is_subgraph=!0;this.subgraph.onGlobalInputAdded=this.onSubgraphNewGlobalInput.bind(this);this.subgraph.onGlobalInputRenamed=this.onSubgraphRenamedGlobalInput.bind(this);this.subgraph.onGlobalInputTypeChanged=this.onSubgraphTypeChangeGlobalInput.bind(this);this.subgraph.onGlobalOutputAdded=this.onSubgraphNewGlobalOutput.bind(this);this.subgraph.onGlobalOutputRenamed=this.onSubgraphRenamedGlobalOutput.bind(this);
this.subgraph.onGlobalOutputTypeChanged=this.onSubgraphTypeChangeGlobalOutput.bind(this);this.bgcolor="#940"}function b(){var a="input_"+(1E3*Math.random()).toFixed();this.addOutput(a,null);this.properties={name:a,type:null};var b=this;Object.defineProperty(this.properties,"name",{get:function(){return a},set:function(c){if(""!=c){var f=b.getOutputInfo(0);f.name!=c&&(f.name=c,b.graph&&b.graph.renameGlobalInput(a,c),a=c)}},enumerable:!0});Object.defineProperty(this.properties,"type",{get:function(){return b.outputs[0].type},
set:function(c){b.outputs[0].type=c;b.graph&&b.graph.changeGlobalInputType(a,b.outputs[0].type)},enumerable:!0})}function c(){var a="output_"+(1E3*Math.random()).toFixed();this.addInput(a,null);this.properties={name:a,type:null};var b=this;Object.defineProperty(this.properties,"name",{get:function(){return a},set:function(c){if(""!=c){var f=b.getInputInfo(0);f.name!=c&&(f.name=c,b.graph&&b.graph.renameGlobalOutput(a,c),a=c)}},enumerable:!0});Object.defineProperty(this.properties,"type",{get:function(){return b.inputs[0].type},
this.subgraph.onGlobalOutputTypeChanged=this.onSubgraphTypeChangeGlobalOutput.bind(this);this.bgcolor="#940"}function b(){var a="input_"+(1E3*Math.random()).toFixed();this.addOutput(a,null);this.properties={name:a,type:null};var b=this;Object.defineProperty(this.properties,"name",{get:function(){return a},set:function(c){if(""!=c){var d=b.getOutputInfo(0);d.name!=c&&(d.name=c,b.graph&&b.graph.renameGlobalInput(a,c),a=c)}},enumerable:!0});Object.defineProperty(this.properties,"type",{get:function(){return b.outputs[0].type},
set:function(c){b.outputs[0].type=c;b.graph&&b.graph.changeGlobalInputType(a,b.outputs[0].type)},enumerable:!0})}function c(){var a="output_"+(1E3*Math.random()).toFixed();this.addInput(a,null);this.properties={name:a,type:null};var b=this;Object.defineProperty(this.properties,"name",{get:function(){return a},set:function(c){if(""!=c){var d=b.getInputInfo(0);d.name!=c&&(d.name=c,b.graph&&b.graph.renameGlobalOutput(a,c),a=c)}},enumerable:!0});Object.defineProperty(this.properties,"type",{get:function(){return b.inputs[0].type},
set:function(c){b.inputs[0].type=c;b.graph&&b.graph.changeGlobalInputType(a,b.inputs[0].type)},enumerable:!0})}function d(){this.addOutput("value","number");this.properties={value:1};this.editable={property:"value",type:"number"}}function e(){this.size=[60,20];this.addInput("value",0,{label:""});this.addOutput("value",0,{label:""});this.properties={value:""}}function f(){this.size=[60,20];this.addInput("data",0)}a.title="Subgraph";a.desc="Graph inside a node";a.prototype.onSubgraphNewGlobalInput=
function(a,b){this.addInput(a,b)};a.prototype.onSubgraphRenamedGlobalInput=function(a,b){var c=this.findInputSlot(a);-1!=c&&(this.getInputInfo(c).name=b)};a.prototype.onSubgraphTypeChangeGlobalInput=function(a,b){var c=this.findInputSlot(a);-1!=c&&(this.getInputInfo(c).type=b)};a.prototype.onSubgraphNewGlobalOutput=function(a,b){this.addOutput(a,b)};a.prototype.onSubgraphRenamedGlobalOutput=function(a,b){var c=this.findOutputSlot(a);-1!=c&&(this.getOutputInfo(c).name=b)};a.prototype.onSubgraphTypeChangeGlobalOutput=
function(a,b){var c=this.findOutputSlot(a);-1!=c&&(this.getOutputInfo(c).type=b)};a.prototype.getExtraMenuOptions=function(a){var b=this;return[{content:"Open",callback:function(){a.openSubgraph(b.subgraph)}}]};a.prototype.onExecute=function(){if(this.inputs)for(var a=0;a<this.inputs.length;a++){var b=this.inputs[a],c=this.getInputData(a);this.subgraph.setGlobalInputData(b.name,c)}this.subgraph.runStep();if(this.outputs)for(a=0;a<this.outputs.length;a++)c=this.subgraph.getGlobalOutputData(this.outputs[a].name),
@@ -165,6 +170,12 @@ this.last_ctx.font=this.properties.fontsize+"px "+this.properties.font;var b=0,c
function(a,b){this.properties[a]=b;this.str="number"==typeof b?b.toFixed(3):b;return!0};LiteGraph.registerNodeType("widget/text",d);e.title="Panel";e.desc="Non interactive panel";e.widgets=[{name:"update",text:"Update",type:"button"}];e.prototype.createGradient=function(a){""==this.properties.bgcolorTop||""==this.properties.bgcolorBottom?this.lineargradient=0:(this.lineargradient=a.createLinearGradient(0,0,0,this.size[1]),this.lineargradient.addColorStop(0,this.properties.bgcolorTop),this.lineargradient.addColorStop(1,
this.properties.bgcolorBottom))};e.prototype.onDrawForeground=function(a){null==this.lineargradient&&this.createGradient(a);this.lineargradient&&(a.lineWidth=1,a.strokeStyle=this.properties.borderColor,a.fillStyle=this.lineargradient,this.properties.shadowSize?(a.shadowColor="#000",a.shadowOffsetX=0,a.shadowOffsetY=0,a.shadowBlur=this.properties.shadowSize):a.shadowColor="transparent",a.roundRect(0,0,this.size[0]-1,this.size[1]-1,this.properties.shadowSize),a.fill(),a.shadowColor="transparent",a.stroke())};
e.prototype.onWidget=function(a,b){"update"==b.name&&(this.lineargradient=null,this.setDirtyCanvas(!0))};LiteGraph.registerNodeType("widget/panel",e)})();
(function(){function a(){this.addOutput("left_x_axis","number");this.addOutput("left_y_axis","number");this.properties={}}a.title="Gamepad";a.desc="gets the input of the gamepad";a.prototype.onExecute=function(){var a=this.getGamepad();if(a&&this.outputs)for(var c=0;c<this.outputs.length;c++){var d=null;switch(this.outputs[c].name){case "left_x_axis":d=a.xbox.axes.lx;break;case "left_y_axis":d=a.xbox.axes.ly;break;case "right_x_axis":d=a.xbox.axes.rx;break;case "right_y_axis":d=a.xbox.axes.ry;break;
case "a_button":d=a.xbox.buttons.a?1:0;break;case "b_button":d=a.xbox.buttons.b?1:0;break;case "x_button":d=a.xbox.buttons.x?1:0;break;case "y_button":d=a.xbox.buttons.y?1:0;break;case "lb_button":d=a.xbox.buttons.lb?1:0;break;case "rb_button":d=a.xbox.buttons.rb?1:0;break;case "ls_button":d=a.xbox.buttons.ls?1:0;break;case "rs_button":d=a.xbox.buttons.rs?1:0;break;case "start_button":d=a.xbox.buttons.start?1:0;break;case "back_button":d=a.xbox.buttons.back?1:0}this.setOutputData(c,d)}};a.prototype.getGamepad=
function(){var a=navigator.getGamepads||navigator.webkitGetGamepads||navigator.mozGetGamepads;if(!a)return null;for(var c=a.call(navigator),a=null,d=0;4>d;d++)if(c[d]){a=c[d];c=this.xbox_mapping;c||(c=this.xbox_mapping={axes:[],buttons:{},hat:""});c.axes.lx=a.axes[0];c.axes.ly=a.axes[1];c.axes.rx=a.axes[2];c.axes.ry=a.axes[3];c.axes.triggers=a.axes[4];for(d=0;d<a.buttons.length;d++)switch(d){case 0:c.buttons.a=a.buttons[d].pressed;break;case 1:c.buttons.b=a.buttons[d].pressed;break;case 2:c.buttons.x=
a.buttons[d].pressed;break;case 3:c.buttons.y=a.buttons[d].pressed;break;case 4:c.buttons.lb=a.buttons[d].pressed;break;case 5:c.buttons.rb=a.buttons[d].pressed;break;case 6:c.buttons.lt=a.buttons[d].pressed;break;case 7:c.buttons.rt=a.buttons[d].pressed;break;case 8:c.buttons.back=a.buttons[d].pressed;break;case 9:c.buttons.start=a.buttons[d].pressed;break;case 10:c.buttons.ls=a.buttons[d].pressed;break;case 11:c.buttons.rs=a.buttons[d].pressed;break;case 12:a.buttons[d].pressed&&(c.hat+="up");break;
case 13:a.buttons[d].pressed&&(c.hat+="down");break;case 14:a.buttons[d].pressed&&(c.hat+="left");break;case 15:a.buttons[d].pressed&&(c.hat+="right");break;case 16:c.buttons.home=a.buttons[d].pressed}a.xbox=c;return a}};a.prototype.onDrawBackground=function(a){};a.prototype.onGetOutputs=function(){return[["left_x_axis","number"],["left_y_axis","number"],["right_x_axis","number"],["right_y_axis","number"],["trigger","number"],["a_button","number"],["b_button","number"],["x_button","number"],["y_button",
"number"],["lb_button","number"],["rb_button","number"],["ls_button","number"],["rs_button","number"],["start","number"],["back","number"]]};LiteGraph.registerNodeType("input/gamepad",a)})();
(function(){function a(){this.addOutput("value","number");this.properties={min:0,max:1};this.size=[60,20]}function b(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20];this.properties={min:0,max:1}}function c(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function d(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function e(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function f(){this.addInput("in",
"number",{label:""});this.addOutput("out","number",{label:""});this.size=[60,20];this.properties={factor:1}}function g(){this.addInput("A","number");this.addInput("B","number");this.addOutput("=","number");this.properties={A:1,B:1,OP:"+"}}function h(){this.addInput("A","number");this.addInput("B","number");this.addOutput("A==B","boolean");this.addOutput("A!=B","boolean");this.properties={A:0,B:0}}function k(){this.addInput("A","number");this.addInput("B","number");this.addOutput("out","boolean");
this.properties={A:0,B:1,OP:">"};this.size=[60,40]}function n(){this.addInput("inc","number");this.addOutput("total","number");this.properties={increment:0,value:0}}function p(){this.addInput("v","number");this.addOutput("sin","number");this.properties={amplitude:1,offset:0};this.bgImageUrl="nodes/imgs/icon-sin.png"}a.title="Rand";a.desc="Random number";a.prototype.onExecute=function(){if(this.inputs)for(var a=0;a<this.inputs.length;a++){var b=this.inputs[a],c=this.getInputData(a);void 0!==c&&(this.properties[b.name]=

1
demo/index.html
View File

@@ -21,6 +21,7 @@
<script type="text/javascript" src="../src/nodes/math.js"></script>
<script type="text/javascript" src="../src/nodes/interface.js"></script>
<script type="text/javascript" src="../src/nodes/image.js"></script>
<script type="text/javascript" src="../src/nodes/input.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="code.js"></script>

14
doc/classes/LGraph.html
View File

@@ -644,7 +644,7 @@
<a href="../files/.._src_litegraph.js.html#l1076"><code>..&#x2F;src&#x2F;litegraph.js:1076</code></a>
<a href="../files/.._src_litegraph.js.html#l1077"><code>..&#x2F;src&#x2F;litegraph.js:1077</code></a>
</p>
@@ -932,7 +932,7 @@
<a href="../files/.._src_litegraph.js.html#l755"><code>..&#x2F;src&#x2F;litegraph.js:755</code></a>
<a href="../files/.._src_litegraph.js.html#l756"><code>..&#x2F;src&#x2F;litegraph.js:756</code></a>
</p>
@@ -1393,7 +1393,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l771"><code>..&#x2F;src&#x2F;litegraph.js:771</code></a>
<a href="../files/.._src_litegraph.js.html#l772"><code>..&#x2F;src&#x2F;litegraph.js:772</code></a>
</p>
@@ -1591,7 +1591,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l1010"><code>..&#x2F;src&#x2F;litegraph.js:1010</code></a>
<a href="../files/.._src_litegraph.js.html#l1011"><code>..&#x2F;src&#x2F;litegraph.js:1011</code></a>
</p>
@@ -1939,7 +1939,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l1043"><code>..&#x2F;src&#x2F;litegraph.js:1043</code></a>
<a href="../files/.._src_litegraph.js.html#l1044"><code>..&#x2F;src&#x2F;litegraph.js:1044</code></a>
</p>
@@ -2024,7 +2024,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l958"><code>..&#x2F;src&#x2F;litegraph.js:958</code></a>
<a href="../files/.._src_litegraph.js.html#l959"><code>..&#x2F;src&#x2F;litegraph.js:959</code></a>
</p>
@@ -2134,7 +2134,7 @@ can be easily accesed from the outside of the graph</p>
<a href="../files/.._src_litegraph.js.html#l973"><code>..&#x2F;src&#x2F;litegraph.js:973</code></a>
<a href="../files/.._src_litegraph.js.html#l974"><code>..&#x2F;src&#x2F;litegraph.js:974</code></a>
</p>

18
doc/classes/LGraphCanvas.html
View File

@@ -96,7 +96,7 @@
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l2397"><code>..&#x2F;src&#x2F;litegraph.js:2397</code></a>
Defined in: <a href="../files/.._src_litegraph.js.html#l2429"><code>..&#x2F;src&#x2F;litegraph.js:2429</code></a>
</div>
@@ -163,7 +163,7 @@
<a href="../files/.._src_litegraph.js.html#l2397"><code>..&#x2F;src&#x2F;litegraph.js:2397</code></a>
<a href="../files/.._src_litegraph.js.html#l2429"><code>..&#x2F;src&#x2F;litegraph.js:2429</code></a>
</p>
@@ -353,7 +353,7 @@
<a href="../files/.._src_litegraph.js.html#l2075"><code>..&#x2F;src&#x2F;litegraph.js:2075</code></a>
<a href="../files/.._src_litegraph.js.html#l2073"><code>..&#x2F;src&#x2F;litegraph.js:2073</code></a>
</p>
@@ -418,7 +418,7 @@
<a href="../files/.._src_litegraph.js.html#l2184"><code>..&#x2F;src&#x2F;litegraph.js:2184</code></a>
<a href="../files/.._src_litegraph.js.html#l2187"><code>..&#x2F;src&#x2F;litegraph.js:2187</code></a>
</p>
@@ -501,7 +501,7 @@
<a href="../files/.._src_litegraph.js.html#l2413"><code>..&#x2F;src&#x2F;litegraph.js:2413</code></a>
<a href="../files/.._src_litegraph.js.html#l2445"><code>..&#x2F;src&#x2F;litegraph.js:2445</code></a>
</p>
@@ -580,7 +580,7 @@
<a href="../files/.._src_litegraph.js.html#l2157"><code>..&#x2F;src&#x2F;litegraph.js:2157</code></a>
<a href="../files/.._src_litegraph.js.html#l2160"><code>..&#x2F;src&#x2F;litegraph.js:2160</code></a>
</p>
@@ -668,7 +668,7 @@
<a href="../files/.._src_litegraph.js.html#l2199"><code>..&#x2F;src&#x2F;litegraph.js:2199</code></a>
<a href="../files/.._src_litegraph.js.html#l2202"><code>..&#x2F;src&#x2F;litegraph.js:2202</code></a>
</p>
@@ -835,7 +835,7 @@
<a href="../files/.._src_litegraph.js.html#l2425"><code>..&#x2F;src&#x2F;litegraph.js:2425</code></a>
<a href="../files/.._src_litegraph.js.html#l2457"><code>..&#x2F;src&#x2F;litegraph.js:2457</code></a>
</p>
@@ -890,7 +890,7 @@
<a href="../files/.._src_litegraph.js.html#l2448"><code>..&#x2F;src&#x2F;litegraph.js:2448</code></a>
<a href="../files/.._src_litegraph.js.html#l2480"><code>..&#x2F;src&#x2F;litegraph.js:2480</code></a>
</p>

60
doc/classes/LGraphNode.html
View File

@@ -96,7 +96,7 @@
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l1155"><code>..&#x2F;src&#x2F;litegraph.js:1155</code></a>
Defined in: <a href="../files/.._src_litegraph.js.html#l1156"><code>..&#x2F;src&#x2F;litegraph.js:1156</code></a>
</div>
@@ -415,7 +415,7 @@
<a href="../files/.._src_litegraph.js.html#l1569"><code>..&#x2F;src&#x2F;litegraph.js:1569</code></a>
<a href="../files/.._src_litegraph.js.html#l1570"><code>..&#x2F;src&#x2F;litegraph.js:1570</code></a>
</p>
@@ -563,7 +563,7 @@
<a href="../files/.._src_litegraph.js.html#l1508"><code>..&#x2F;src&#x2F;litegraph.js:1508</code></a>
<a href="../files/.._src_litegraph.js.html#l1509"><code>..&#x2F;src&#x2F;litegraph.js:1509</code></a>
</p>
@@ -683,7 +683,7 @@
<a href="../files/.._src_litegraph.js.html#l1530"><code>..&#x2F;src&#x2F;litegraph.js:1530</code></a>
<a href="../files/.._src_litegraph.js.html#l1531"><code>..&#x2F;src&#x2F;litegraph.js:1531</code></a>
</p>
@@ -784,7 +784,7 @@
<a href="../files/.._src_litegraph.js.html#l1448"><code>..&#x2F;src&#x2F;litegraph.js:1448</code></a>
<a href="../files/.._src_litegraph.js.html#l1449"><code>..&#x2F;src&#x2F;litegraph.js:1449</code></a>
</p>
@@ -904,7 +904,7 @@
<a href="../files/.._src_litegraph.js.html#l1469"><code>..&#x2F;src&#x2F;litegraph.js:1469</code></a>
<a href="../files/.._src_litegraph.js.html#l1470"><code>..&#x2F;src&#x2F;litegraph.js:1470</code></a>
</p>
@@ -983,7 +983,7 @@
<a href="../files/.._src_litegraph.js.html#l2001"><code>..&#x2F;src&#x2F;litegraph.js:2001</code></a>
<a href="../files/.._src_litegraph.js.html#l2002"><code>..&#x2F;src&#x2F;litegraph.js:2002</code></a>
</p>
@@ -1052,7 +1052,7 @@
<a href="../files/.._src_litegraph.js.html#l1582"><code>..&#x2F;src&#x2F;litegraph.js:1582</code></a>
<a href="../files/.._src_litegraph.js.html#l1583"><code>..&#x2F;src&#x2F;litegraph.js:1583</code></a>
</p>
@@ -1144,7 +1144,7 @@
<a href="../files/.._src_litegraph.js.html#l1190"><code>..&#x2F;src&#x2F;litegraph.js:1190</code></a>
<a href="../files/.._src_litegraph.js.html#l1191"><code>..&#x2F;src&#x2F;litegraph.js:1191</code></a>
</p>
@@ -1225,7 +1225,7 @@
<a href="../files/.._src_litegraph.js.html#l1662"><code>..&#x2F;src&#x2F;litegraph.js:1662</code></a>
<a href="../files/.._src_litegraph.js.html#l1663"><code>..&#x2F;src&#x2F;litegraph.js:1663</code></a>
</p>
@@ -1364,7 +1364,7 @@
<a href="../files/.._src_litegraph.js.html#l1812"><code>..&#x2F;src&#x2F;litegraph.js:1812</code></a>
<a href="../files/.._src_litegraph.js.html#l1813"><code>..&#x2F;src&#x2F;litegraph.js:1813</code></a>
</p>
@@ -1477,7 +1477,7 @@
<a href="../files/.._src_litegraph.js.html#l1745"><code>..&#x2F;src&#x2F;litegraph.js:1745</code></a>
<a href="../files/.._src_litegraph.js.html#l1746"><code>..&#x2F;src&#x2F;litegraph.js:1746</code></a>
</p>
@@ -1600,7 +1600,7 @@
<a href="../files/.._src_litegraph.js.html#l1632"><code>..&#x2F;src&#x2F;litegraph.js:1632</code></a>
<a href="../files/.._src_litegraph.js.html#l1633"><code>..&#x2F;src&#x2F;litegraph.js:1633</code></a>
</p>
@@ -1707,7 +1707,7 @@
<a href="../files/.._src_litegraph.js.html#l1647"><code>..&#x2F;src&#x2F;litegraph.js:1647</code></a>
<a href="../files/.._src_litegraph.js.html#l1648"><code>..&#x2F;src&#x2F;litegraph.js:1648</code></a>
</p>
@@ -1804,7 +1804,7 @@
<a href="../files/.._src_litegraph.js.html#l1600"><code>..&#x2F;src&#x2F;litegraph.js:1600</code></a>
<a href="../files/.._src_litegraph.js.html#l1601"><code>..&#x2F;src&#x2F;litegraph.js:1601</code></a>
</p>
@@ -1893,7 +1893,7 @@
<a href="../files/.._src_litegraph.js.html#l1869"><code>..&#x2F;src&#x2F;litegraph.js:1869</code></a>
<a href="../files/.._src_litegraph.js.html#l1870"><code>..&#x2F;src&#x2F;litegraph.js:1870</code></a>
</p>
@@ -2016,7 +2016,7 @@
<a href="../files/.._src_litegraph.js.html#l1349"><code>..&#x2F;src&#x2F;litegraph.js:1349</code></a>
<a href="../files/.._src_litegraph.js.html#l1350"><code>..&#x2F;src&#x2F;litegraph.js:1350</code></a>
</p>
@@ -2122,7 +2122,7 @@
<a href="../files/.._src_litegraph.js.html#l1377"><code>..&#x2F;src&#x2F;litegraph.js:1377</code></a>
<a href="../files/.._src_litegraph.js.html#l1378"><code>..&#x2F;src&#x2F;litegraph.js:1378</code></a>
</p>
@@ -2226,7 +2226,7 @@
<a href="../files/.._src_litegraph.js.html#l1392"><code>..&#x2F;src&#x2F;litegraph.js:1392</code></a>
<a href="../files/.._src_litegraph.js.html#l1393"><code>..&#x2F;src&#x2F;litegraph.js:1393</code></a>
</p>
@@ -2330,7 +2330,7 @@
<a href="../files/.._src_litegraph.js.html#l1419"><code>..&#x2F;src&#x2F;litegraph.js:1419</code></a>
<a href="../files/.._src_litegraph.js.html#l1420"><code>..&#x2F;src&#x2F;litegraph.js:1420</code></a>
</p>
@@ -2420,7 +2420,7 @@
<a href="../files/.._src_litegraph.js.html#l1315"><code>..&#x2F;src&#x2F;litegraph.js:1315</code></a>
<a href="../files/.._src_litegraph.js.html#l1316"><code>..&#x2F;src&#x2F;litegraph.js:1316</code></a>
</p>
@@ -2489,7 +2489,7 @@
<a href="../files/.._src_litegraph.js.html#l1364"><code>..&#x2F;src&#x2F;litegraph.js:1364</code></a>
<a href="../files/.._src_litegraph.js.html#l1365"><code>..&#x2F;src&#x2F;litegraph.js:1365</code></a>
</p>
@@ -2593,7 +2593,7 @@
<a href="../files/.._src_litegraph.js.html#l1407"><code>..&#x2F;src&#x2F;litegraph.js:1407</code></a>
<a href="../files/.._src_litegraph.js.html#l1408"><code>..&#x2F;src&#x2F;litegraph.js:1408</code></a>
</p>
@@ -2703,7 +2703,7 @@
<a href="../files/.._src_litegraph.js.html#l1610"><code>..&#x2F;src&#x2F;litegraph.js:1610</code></a>
<a href="../files/.._src_litegraph.js.html#l1611"><code>..&#x2F;src&#x2F;litegraph.js:1611</code></a>
</p>
@@ -2808,7 +2808,7 @@
<a href="../files/.._src_litegraph.js.html#l2014"><code>..&#x2F;src&#x2F;litegraph.js:2014</code></a>
<a href="../files/.._src_litegraph.js.html#l2015"><code>..&#x2F;src&#x2F;litegraph.js:2015</code></a>
</p>
@@ -2873,7 +2873,7 @@
<a href="../files/.._src_litegraph.js.html#l1555"><code>..&#x2F;src&#x2F;litegraph.js:1555</code></a>
<a href="../files/.._src_litegraph.js.html#l1556"><code>..&#x2F;src&#x2F;litegraph.js:1556</code></a>
</p>
@@ -2961,7 +2961,7 @@
<a href="../files/.._src_litegraph.js.html#l1494"><code>..&#x2F;src&#x2F;litegraph.js:1494</code></a>
<a href="../files/.._src_litegraph.js.html#l1495"><code>..&#x2F;src&#x2F;litegraph.js:1495</code></a>
</p>
@@ -3039,7 +3039,7 @@
<a href="../files/.._src_litegraph.js.html#l1249"><code>..&#x2F;src&#x2F;litegraph.js:1249</code></a>
<a href="../files/.._src_litegraph.js.html#l1250"><code>..&#x2F;src&#x2F;litegraph.js:1250</code></a>
</p>
@@ -3110,7 +3110,7 @@
<a href="../files/.._src_litegraph.js.html#l1328"><code>..&#x2F;src&#x2F;litegraph.js:1328</code></a>
<a href="../files/.._src_litegraph.js.html#l1329"><code>..&#x2F;src&#x2F;litegraph.js:1329</code></a>
</p>
@@ -3203,7 +3203,7 @@
<a href="../files/.._src_litegraph.js.html#l1303"><code>..&#x2F;src&#x2F;litegraph.js:1303</code></a>
<a href="../files/.._src_litegraph.js.html#l1304"><code>..&#x2F;src&#x2F;litegraph.js:1304</code></a>
</p>

90
doc/data.json
View File

@@ -51,7 +51,7 @@
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 1155,
"line": 1156,
"description": "Base Class for all the node type classes",
"params": [
{
@@ -70,7 +70,7 @@
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 2397,
"line": 2429,
"description": "marks as dirty the canvas, this way it will be rendered again",
"is_constructor": 1,
"params": [
@@ -409,7 +409,7 @@
},
{
"file": "../src/litegraph.js",
"line": 755,
"line": 756,
"description": "Returns a list of nodes that matches a name",
"itemtype": "method",
"name": "findNodesByName",
@@ -428,7 +428,7 @@
},
{
"file": "../src/litegraph.js",
"line": 771,
"line": 772,
"description": "Returns the top-most node in this position of the canvas",
"itemtype": "method",
"name": "getNodeOnPos",
@@ -457,7 +457,7 @@
},
{
"file": "../src/litegraph.js",
"line": 958,
"line": 959,
"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",
"name": "setInputData",
@@ -477,7 +477,7 @@
},
{
"file": "../src/litegraph.js",
"line": 973,
"line": 974,
"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",
"name": "setInputData",
@@ -496,7 +496,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1010,
"line": 1011,
"description": "returns if the graph is in live mode",
"itemtype": "method",
"name": "isLive",
@@ -504,7 +504,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1043,
"line": 1044,
"description": "Creates a Object containing all the info about this graph, it can be serialized",
"itemtype": "method",
"name": "serialize",
@@ -516,7 +516,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1076,
"line": 1077,
"description": "Configure a graph from a JSON string",
"itemtype": "method",
"name": "configure",
@@ -531,7 +531,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1190,
"line": 1191,
"description": "configure a node from an object containing the serialized info",
"itemtype": "method",
"name": "configure",
@@ -539,7 +539,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1249,
"line": 1250,
"description": "serialize the content",
"itemtype": "method",
"name": "serialize",
@@ -547,7 +547,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1303,
"line": 1304,
"description": "serialize and stringify",
"itemtype": "method",
"name": "toString",
@@ -555,7 +555,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1315,
"line": 1316,
"description": "get the title string",
"itemtype": "method",
"name": "getTitle",
@@ -563,7 +563,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1328,
"line": 1329,
"description": "sets the output data",
"itemtype": "method",
"name": "setOutputData",
@@ -583,7 +583,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1349,
"line": 1350,
"description": "retrieves the input data (data traveling through the connection) from one slot",
"itemtype": "method",
"name": "getInputData",
@@ -602,7 +602,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1364,
"line": 1365,
"description": "tells you if there is a connection in one input slot",
"itemtype": "method",
"name": "isInputConnected",
@@ -621,7 +621,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1377,
"line": 1378,
"description": "tells you info about an input connection (which node, type, etc)",
"itemtype": "method",
"name": "getInputInfo",
@@ -640,7 +640,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1392,
"line": 1393,
"description": "tells you info about an output connection (which node, type, etc)",
"itemtype": "method",
"name": "getOutputInfo",
@@ -659,7 +659,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1407,
"line": 1408,
"description": "tells you if there is a connection in one output slot",
"itemtype": "method",
"name": "isOutputConnected",
@@ -678,7 +678,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1419,
"line": 1420,
"description": "retrieves all the nodes connected to this output slot",
"itemtype": "method",
"name": "getOutputNodes",
@@ -697,7 +697,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1448,
"line": 1449,
"description": "add a new output slot to use in this node",
"itemtype": "method",
"name": "addOutput",
@@ -722,7 +722,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1469,
"line": 1470,
"description": "add a new output slot to use in this node",
"itemtype": "method",
"name": "addOutputs",
@@ -737,7 +737,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1494,
"line": 1495,
"description": "remove an existing output slot",
"itemtype": "method",
"name": "removeOutput",
@@ -752,7 +752,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1508,
"line": 1509,
"description": "add a new input slot to use in this node",
"itemtype": "method",
"name": "addInput",
@@ -777,7 +777,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1530,
"line": 1531,
"description": "add several new input slots in this node",
"itemtype": "method",
"name": "addInputs",
@@ -792,7 +792,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1555,
"line": 1556,
"description": "remove an existing input slot",
"itemtype": "method",
"name": "removeInput",
@@ -807,7 +807,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1569,
"line": 1570,
"description": "add an special connection to this node (used for special kinds of graphs)",
"itemtype": "method",
"name": "addConnection",
@@ -837,7 +837,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1582,
"line": 1583,
"description": "computes the size of a node according to its inputs and output slots",
"itemtype": "method",
"name": "computeSize",
@@ -856,7 +856,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1600,
"line": 1601,
"description": "returns the bounding of the object, used for rendering purposes",
"itemtype": "method",
"name": "getBounding",
@@ -868,7 +868,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1610,
"line": 1611,
"description": "checks if a point is inside the shape of a node",
"itemtype": "method",
"name": "isPointInsideNode",
@@ -892,7 +892,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1632,
"line": 1633,
"description": "returns the input slot with a given name (used for dynamic slots), -1 if not found",
"itemtype": "method",
"name": "findInputSlot",
@@ -911,7 +911,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1647,
"line": 1648,
"description": "returns the output slot with a given name (used for dynamic slots), -1 if not found",
"itemtype": "method",
"name": "findOutputSlot",
@@ -930,7 +930,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1662,
"line": 1663,
"description": "connect this node output to the input of another node",
"itemtype": "method",
"name": "connect",
@@ -959,7 +959,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1745,
"line": 1746,
"description": "disconnect one output to an specific node",
"itemtype": "method",
"name": "disconnectOutput",
@@ -983,7 +983,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1812,
"line": 1813,
"description": "disconnect one input",
"itemtype": "method",
"name": "disconnectInput",
@@ -1002,7 +1002,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1869,
"line": 1870,
"description": "returns the center of a connection point in canvas coords",
"itemtype": "method",
"name": "getConnectionPos",
@@ -1026,7 +1026,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2001,
"line": 2002,
"description": "Collapse the node to make it smaller on the canvas",
"itemtype": "method",
"name": "collapse",
@@ -1034,7 +1034,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2014,
"line": 2015,
"description": "Forces the node to do not move or realign on Z",
"itemtype": "method",
"name": "pin",
@@ -1042,7 +1042,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2075,
"line": 2073,
"description": "clears all the data inside",
"itemtype": "method",
"name": "clear",
@@ -1065,7 +1065,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2157,
"line": 2160,
"description": "opens a graph contained inside a node in the current graph",
"itemtype": "method",
"name": "openSubgraph",
@@ -1080,7 +1080,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2184,
"line": 2187,
"description": "closes a subgraph contained inside a node",
"itemtype": "method",
"name": "closeSubgraph",
@@ -1095,7 +1095,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2199,
"line": 2202,
"description": "assigns a canvas",
"itemtype": "method",
"name": "setCanvas",
@@ -1110,7 +1110,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2413,
"line": 2445,
"description": "Used to attach the canvas in a popup",
"itemtype": "method",
"name": "getCanvasWindow",
@@ -1122,7 +1122,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2425,
"line": 2457,
"description": "starts rendering the content of the canvas when needed",
"itemtype": "method",
"name": "startRendering",
@@ -1130,7 +1130,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2448,
"line": 2480,
"description": "stops rendering the content of the canvas (to save resources)",
"itemtype": "method",
"name": "stopRendering",

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

@@ -839,9 +839,10 @@ LGraph.prototype.findNodesByClass = function(classObject)
LGraph.prototype.findNodesByType = function(type)
{
var type = type.toLowerCase();
var r = [];
for(var i in this._nodes)
if(this._nodes[i].type == type)
if(this._nodes[i].type.toLowerCase() == type )
r.push(this._nodes[i]);
return r;
}
@@ -945,7 +946,7 @@ LGraph.prototype.changeGlobalInputType = function(name, type)
if(!this.global_inputs[name])
return false;
if(this.global_inputs[name].type == type)
if(this.global_inputs[name].type.toLowerCase() == type.toLowerCase() )
return;
this.global_inputs[name].type = type;
@@ -1026,7 +1027,7 @@ LGraph.prototype.changeGlobalOutputType = function(name, type)
if(!this.global_outputs[name])
return false;
if(this.global_outputs[name].type == type)
if(this.global_outputs[name].type.toLowerCase() == type.toLowerCase() )
return;
this.global_outputs[name].type = type;
@@ -1818,7 +1819,7 @@ LGraphNode.prototype.connect = function(slot, node, target_slot)
}
else if( !output.type || //generic output
!node.inputs[target_slot].type || //generic input
output.type == node.inputs[target_slot].type) //same type
output.type.toLowerCase() == node.inputs[target_slot].type.toLowerCase() ) //same type
{
//info: link structure =&gt; [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ]
//var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ];
@@ -2138,16 +2139,13 @@ LGraphNode.prototype.localToScreen = function(x,y, graphcanvas)
* @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas itself)
* @param {LGraph} graph [optional]
*/
function LGraphCanvas(canvas, graph, skip_render)
function LGraphCanvas( canvas, graph, skip_render )
{
//if(graph === undefined)
// throw (&quot;No graph assigned&quot;);
if(typeof(canvas) == &quot;string&quot;)
canvas = document.querySelector(canvas);
if(!canvas)
throw(&quot;no canvas found&quot;);
if(canvas &amp;&amp; canvas.constructor === String )
canvas = document.querySelector( canvas );
this.max_zoom = 10;
this.min_zoom = 0.1;
@@ -2156,7 +2154,7 @@ function LGraphCanvas(canvas, graph, skip_render)
if(graph)
graph.attachCanvas(this);
this.setCanvas(canvas);
this.setCanvas( canvas );
this.clear();
if(!skip_render)
@@ -2191,9 +2189,7 @@ LGraphCanvas.prototype.clear = function()
this.editor_alpha = 1; //used for transition
this.pause_rendering = false;
this.render_shadows = true;
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
this.dirty_area = null;
this.clear_background = true;
this.render_only_selected = true;
this.live_mode = false;
@@ -2201,6 +2197,10 @@ LGraphCanvas.prototype.clear = function()
this.allow_dragcanvas = true;
this.allow_dragnodes = true;
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
this.dirty_area = null;
this.node_in_panel = null;
this.last_mouse = [0,0];
@@ -2226,10 +2226,13 @@ LGraphCanvas.prototype.clear = function()
* @method setGraph
* @param {LGraph} graph
*/
LGraphCanvas.prototype.setGraph = function(graph)
LGraphCanvas.prototype.setGraph = function( graph, skip_clear )
{
if(this.graph == graph) return;
this.clear();
if(this.graph == graph)
return;
if(!skip_clear)
this.clear();
if(!graph &amp;&amp; this.graph)
{
@@ -2296,19 +2299,35 @@ LGraphCanvas.prototype.closeSubgraph = function()
* @method setCanvas
* @param {Canvas} assigns a canvas
*/
LGraphCanvas.prototype.setCanvas = function(canvas)
LGraphCanvas.prototype.setCanvas = function( canvas, skip_events )
{
var that = this;
//Canvas association
if(typeof(canvas) == &quot;string&quot;)
canvas = document.getElementById(canvas);
if(canvas)
{
if( canvas.constructor === String )
{
canvas = document.getElementById(canvas);
if(!canvas)
throw(&quot;Error creating LiteGraph canvas: Canvas not found&quot;);
}
}
if(canvas == null)
throw(&quot;Error creating LiteGraph canvas: Canvas not found&quot;);
if(canvas == this.canvas) return;
if(canvas === this.canvas)
return;
if(!canvas &amp;&amp; this.canvas)
{
//maybe detach events from old_canvas
if(!skip_events)
this.unbindEvents();
}
this.canvas = canvas;
if(!canvas)
return;
//this.canvas.tabindex = &quot;1000&quot;;
canvas.className += &quot; lgraphcanvas&quot;;
canvas.data = this;
@@ -2338,72 +2357,85 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
this._mousemove_callback = this.processMouseMove.bind(this);
this._mouseup_callback = this.processMouseUp.bind(this);
canvas.addEventListener(&quot;mousedown&quot;, this.processMouseDown.bind(this), true ); //down do not need to store the binded
canvas.addEventListener(&quot;mousemove&quot;, this._mousemove_callback);
if(!skip_events)
this.bindEvents();
}
canvas.addEventListener(&quot;contextmenu&quot;, function(e) { e.preventDefault(); return false; });
canvas.addEventListener(&quot;mousewheel&quot;, this.processMouseWheel.bind(this), false);
canvas.addEventListener(&quot;DOMMouseScroll&quot;, this.processMouseWheel.bind(this), false);
//used in some events to capture them
LGraphCanvas.prototype._doNothing = function doNothing() { return false; };
LGraphCanvas.prototype.bindEvents = function()
{
if( this._events_binded )
{
console.warn(&quot;LGraphCanvas: events already binded&quot;);
return;
}
var canvas = this.canvas;
this._mousedown_callback = this.processMouseDown.bind(this);
this._mousewheel_callback = this.processMouseWheel.bind(this);
canvas.addEventListener(&quot;mousedown&quot;, this._mousedown_callback, true ); //down do not need to store the binded
canvas.addEventListener(&quot;mousemove&quot;, this._mousemove_callback );
canvas.addEventListener(&quot;mousewheel&quot;, this._mousewheel_callback, false);
canvas.addEventListener(&quot;contextmenu&quot;, this._doNothing );
canvas.addEventListener(&quot;DOMMouseScroll&quot;, this._mousewheel_callback, false);
//touch events
//if( &#x27;touchstart&#x27; in document.documentElement )
{
//alert(&quot;doo&quot;);
canvas.addEventListener(&quot;touchstart&quot;, this.touchHandler, true);
canvas.addEventListener(&quot;touchmove&quot;, this.touchHandler, true);
canvas.addEventListener(&quot;touchend&quot;, this.touchHandler, true);
canvas.addEventListener(&quot;touchcancel&quot;, this.touchHandler, true);
}
//this.canvas.onselectstart = function () { return false; };
canvas.addEventListener(&quot;keydown&quot;, function(e) {
that.processKeyDown(e);
});
//Keyboard ******************
this._key_callback = this.processKey.bind(this);
canvas.addEventListener(&quot;keyup&quot;, function(e) {
that.processKeyUp(e);
});
canvas.addEventListener(&quot;keydown&quot;, this._key_callback );
canvas.addEventListener(&quot;keyup&quot;, this._key_callback );
//droping files
canvas.ondragover = function () { console.log(&#x27;hover&#x27;); return false; };
canvas.ondragend = function () { console.log(&#x27;out&#x27;); return false; };
canvas.ondrop = function (e) {
e.preventDefault();
that.adjustMouseEvent(e);
//Droping Stuff over nodes ************************************
this._ondrop_callback = this.processDrop.bind(this);
var pos = [e.canvasX,e.canvasY];
var node = that.graph.getNodeOnPos(pos[0],pos[1]);
if(!node)
return;
canvas.addEventListener(&quot;dragover&quot;, this._doNothing, false );
canvas.addEventListener(&quot;dragend&quot;, this._doNothing, false );
canvas.addEventListener(&quot;drop&quot;, this._ondrop_callback, false );
if(!node.onDropFile)
return;
this._events_binded = true;
}
var file = e.dataTransfer.files[0];
var filename = file.name;
var ext = LGraphCanvas.getFileExtension( filename );
//console.log(file);
LGraphCanvas.prototype.unbindEvents = function()
{
if( !this._events_binded )
{
console.warn(&quot;LGraphCanvas: no events binded&quot;);
return;
}
//prepare reader
var reader = new FileReader();
reader.onload = function (event) {
//console.log(event.target);
var data = event.target.result;
node.onDropFile( data, filename, file );
};
this.canvas.removeEventListener( &quot;mousedown&quot;, this._mousedown_callback );
this.canvas.removeEventListener( &quot;mousewheel&quot;, this._mousewheel_callback );
this.canvas.removeEventListener( &quot;DOMMouseScroll&quot;, this._mousewheel_callback );
this.canvas.removeEventListener( &quot;keydown&quot;, this._key_callback );
this.canvas.removeEventListener( &quot;keyup&quot;, this._key_callback );
this.canvas.removeEventListener( &quot;contextmenu&quot;, this._doNothing );
this.canvas.removeEventListener( &quot;drop&quot;, this._ondrop_callback );
//read data
var type = file.type.split(&quot;/&quot;)[0];
if(type == &quot;text&quot; || type == &quot;&quot;)
reader.readAsText(file);
else if (type == &quot;image&quot;)
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
this.canvas.removeEventListener(&quot;touchstart&quot;, this.touchHandler );
this.canvas.removeEventListener(&quot;touchmove&quot;, this.touchHandler );
this.canvas.removeEventListener(&quot;touchend&quot;, this.touchHandler );
this.canvas.removeEventListener(&quot;touchcancel&quot;, this.touchHandler );
return false;
};
this._mousedown_callback = null;
this._mousewheel_callback = null;
this._key_callback = null;
this._ondrop_callback = null;
this._events_binded = false;
}
LGraphCanvas.getFileExtension = function (url)
@@ -2560,13 +2592,15 @@ LGraphCanvas.prototype.stopRendering = function()
LGraphCanvas.prototype.processMouseDown = function(e)
{
if(!this.graph) return;
if(!this.graph)
return;
this.adjustMouseEvent(e);
var ref_window = this.getCanvasWindow();
var document = ref_window.document;
//move mouse move event to the window in case it drags outside of the canvas
this.canvas.removeEventListener(&quot;mousemove&quot;, this._mousemove_callback );
ref_window.document.addEventListener(&quot;mousemove&quot;, this._mousemove_callback, true ); //catch for the entire window
ref_window.document.addEventListener(&quot;mouseup&quot;, this._mouseup_callback, true );
@@ -2792,7 +2826,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
if(slot != -1 &amp;&amp; n.inputs[slot])
{
var slot_type = n.inputs[slot].type;
if(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type )
if( !this.connecting_output.type || !slot_type || slot_type.toLowerCase() == this.connecting_output.type.toLowerCase() )
this._highlight_input = pos;
}
else
@@ -2867,11 +2901,13 @@ LGraphCanvas.prototype.processMouseMove = function(e)
LGraphCanvas.prototype.processMouseUp = function(e)
{
if(!this.graph) return;
if(!this.graph)
return;
var window = this.getCanvasWindow();
var document = window.document;
//restore the mousemove event back to the canvas
document.removeEventListener(&quot;mousemove&quot;, this._mousemove_callback, true );
this.canvas.addEventListener(&quot;mousemove&quot;, this._mousemove_callback, true);
document.removeEventListener(&quot;mouseup&quot;, this._mouseup_callback, true );
@@ -2908,7 +2944,7 @@ LGraphCanvas.prototype.processMouseUp = function(e)
{ //not on top of an input
var input = node.getInputInfo(0);
//simple connect
if(input &amp;&amp; !input.link &amp;&amp; input.type == this.connecting_output.type)
if(input &amp;&amp; !input.link &amp;&amp; input.type == this.connecting_output.type) //toLowerCase missing
this.connecting_node.connect(this.connecting_slot, node, 0);
}
}
@@ -2972,75 +3008,11 @@ LGraphCanvas.prototype.processMouseUp = function(e)
return false;
}
LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos)
{
if(node.inputs)
for(var i = 0, l = node.inputs.length; i &lt; l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos(true,i);
if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) )
{
if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] };
return i;
}
}
return -1;
}
LGraphCanvas.prototype.processKeyDown = function(e)
{
if(!this.graph) return;
var block_default = false;
//select all Control A
if(e.keyCode == 65 &amp;&amp; e.ctrlKey)
{
this.selectAllNodes();
block_default = true;
}
//delete or backspace
if(e.keyCode == 46 || e.keyCode == 8)
{
this.deleteSelectedNodes();
block_default = true;
}
//collapse
//...
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyDown)
this.selected_nodes[i].onKeyDown(e);
this.graph.change();
if(block_default)
{
e.preventDefault();
return false;
}
}
LGraphCanvas.prototype.processKeyUp = function(e)
{
if(!this.graph) return;
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyUp)
this.selected_nodes[i].onKeyUp(e);
this.graph.change();
}
LGraphCanvas.prototype.processMouseWheel = function(e)
{
if(!this.graph) return;
if(!this.allow_dragcanvas) return;
if(!this.graph || !this.allow_dragcanvas)
return;
var delta = (e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60);
@@ -3066,6 +3038,109 @@ LGraphCanvas.prototype.processMouseWheel = function(e)
return false; // prevent default
}
LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos)
{
if(node.inputs)
for(var i = 0, l = node.inputs.length; i &lt; l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos(true,i);
if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) )
{
if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] };
return i;
}
}
return -1;
}
LGraphCanvas.prototype.processKey = function(e)
{
if(!this.graph)
return;
var block_default = false;
if(e.type == &quot;keydown&quot;)
{
//select all Control A
if(e.keyCode == 65 &amp;&amp; e.ctrlKey)
{
this.selectAllNodes();
block_default = true;
}
//delete or backspace
if(e.keyCode == 46 || e.keyCode == 8)
{
this.deleteSelectedNodes();
block_default = true;
}
//collapse
//...
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyDown)
this.selected_nodes[i].onKeyDown(e);
}
else if( e.type == &quot;keyup&quot; )
{
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyUp)
this.selected_nodes[i].onKeyUp(e);
}
this.graph.change();
if(block_default)
{
e.preventDefault();
return false;
}
}
LGraphCanvas.prototype.processDrop = function(e)
{
e.preventDefault();
this.adjustMouseEvent(e);
var pos = [e.canvasX,e.canvasY];
var node = this.graph.getNodeOnPos(pos[0],pos[1]);
if(!node)
return;
if(!node.onDropFile)
return;
var file = e.dataTransfer.files[0];
var filename = file.name;
var ext = LGraphCanvas.getFileExtension( filename );
//console.log(file);
//prepare reader
var reader = new FileReader();
reader.onload = function (event) {
//console.log(event.target);
var data = event.target.result;
node.onDropFile( data, filename, file );
};
//read data
var type = file.type.split(&quot;/&quot;)[0];
if(type == &quot;text&quot; || type == &quot;&quot;)
reader.readAsText(file);
else if (type == &quot;image&quot;)
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
return false;
}
LGraphCanvas.prototype.processNodeSelected = function(n,e)
{
n.selected = true;
@@ -3321,7 +3396,8 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//clear
//canvas.width = canvas.width;
ctx.clearRect(0,0,canvas.width, canvas.height);
if(this.clear_background)
ctx.clearRect(0,0,canvas.width, canvas.height);
//draw bg canvas
if(this.bgcanvas == this.canvas)
@@ -3335,19 +3411,7 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//info widget
if(this.show_info)
{
ctx.font = &quot;10px Arial&quot;;
ctx.fillStyle = &quot;#888&quot;;
if(this.graph)
{
ctx.fillText( &quot;T: &quot; + this.graph.globaltime.toFixed(2)+&quot;s&quot;,5,13*1 );
ctx.fillText( &quot;I: &quot; + this.graph.iteration,5,13*2 );
ctx.fillText( &quot;F: &quot; + this.frame,5,13*3 );
ctx.fillText( &quot;FPS:&quot; + this.fps.toFixed(2),5,13*4 );
}
else
ctx.fillText( &quot;No graph selected&quot;,5,13*1 );
}
this.renderInfo(ctx);
if(this.graph)
{
@@ -3422,6 +3486,28 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
this.dirty_canvas = false;
}
LGraphCanvas.prototype.renderInfo = function( ctx, x, y )
{
x = x || 0;
y = y || 0;
ctx.save();
ctx.translate( x, y );
ctx.font = &quot;10px Arial&quot;;
ctx.fillStyle = &quot;#888&quot;;
if(this.graph)
{
ctx.fillText( &quot;T: &quot; + this.graph.globaltime.toFixed(2)+&quot;s&quot;,5,13*1 );
ctx.fillText( &quot;I: &quot; + this.graph.iteration,5,13*2 );
ctx.fillText( &quot;F: &quot; + this.frame,5,13*3 );
ctx.fillText( &quot;FPS:&quot; + this.fps.toFixed(2),5,13*4 );
}
else
ctx.fillText( &quot;No graph selected&quot;,5,13*1 );
ctx.restore();
}
LGraphCanvas.prototype.drawBackCanvas = function()
{
var canvas = this.bgcanvas;
@@ -3432,7 +3518,8 @@ LGraphCanvas.prototype.drawBackCanvas = function()
ctx.start();
//clear
ctx.clearRect(0,0,canvas.width, canvas.height);
if(this.clear_background)
ctx.clearRect(0,0,canvas.width, canvas.height);
//reset in case of error
ctx.restore();
@@ -3633,7 +3720,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var slot = node.inputs[i];
ctx.globalAlpha = editor_alpha;
if (this.connecting_node != null &amp;&amp; this.connecting_output.type != 0 &amp;&amp; node.inputs[i].type != 0 &amp;&amp; this.connecting_output.type != node.inputs[i].type)
if (this.connecting_node != null &amp;&amp; this.connecting_output.type &amp;&amp; node.inputs[i].type &amp;&amp; this.connecting_output.type.toLowerCase() != node.inputs[i].type.toLowerCase() )
ctx.globalAlpha = 0.4 * editor_alpha;
ctx.fillStyle = slot.link != null ? &quot;#7F7&quot; : &quot;#AAA&quot;;

401
src/litegraph.js
View File

@@ -745,9 +745,10 @@ LGraph.prototype.findNodesByClass = function(classObject)
LGraph.prototype.findNodesByType = function(type)
{
var type = type.toLowerCase();
var r = [];
for(var i in this._nodes)
if(this._nodes[i].type == type)
if(this._nodes[i].type.toLowerCase() == type )
r.push(this._nodes[i]);
return r;
}
@@ -851,7 +852,7 @@ LGraph.prototype.changeGlobalInputType = function(name, type)
if(!this.global_inputs[name])
return false;
if(this.global_inputs[name].type == type)
if(this.global_inputs[name].type.toLowerCase() == type.toLowerCase() )
return;
this.global_inputs[name].type = type;
@@ -932,7 +933,7 @@ LGraph.prototype.changeGlobalOutputType = function(name, type)
if(!this.global_outputs[name])
return false;
if(this.global_outputs[name].type == type)
if(this.global_outputs[name].type.toLowerCase() == type.toLowerCase() )
return;
this.global_outputs[name].type = type;
@@ -1724,7 +1725,7 @@ LGraphNode.prototype.connect = function(slot, node, target_slot)
}
else if( !output.type || //generic output
!node.inputs[target_slot].type || //generic input
output.type == node.inputs[target_slot].type) //same type
output.type.toLowerCase() == node.inputs[target_slot].type.toLowerCase() ) //same type
{
//info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ]
//var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ];
@@ -2044,16 +2045,13 @@ LGraphNode.prototype.localToScreen = function(x,y, graphcanvas)
* @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas itself)
* @param {LGraph} graph [optional]
*/
function LGraphCanvas(canvas, graph, skip_render)
function LGraphCanvas( canvas, graph, skip_render )
{
//if(graph === undefined)
// throw ("No graph assigned");
if(typeof(canvas) == "string")
canvas = document.querySelector(canvas);
if(!canvas)
throw("no canvas found");
if(canvas && canvas.constructor === String )
canvas = document.querySelector( canvas );
this.max_zoom = 10;
this.min_zoom = 0.1;
@@ -2062,7 +2060,7 @@ function LGraphCanvas(canvas, graph, skip_render)
if(graph)
graph.attachCanvas(this);
this.setCanvas(canvas);
this.setCanvas( canvas );
this.clear();
if(!skip_render)
@@ -2097,9 +2095,7 @@ LGraphCanvas.prototype.clear = function()
this.editor_alpha = 1; //used for transition
this.pause_rendering = false;
this.render_shadows = true;
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
this.dirty_area = null;
this.clear_background = true;
this.render_only_selected = true;
this.live_mode = false;
@@ -2107,6 +2103,10 @@ LGraphCanvas.prototype.clear = function()
this.allow_dragcanvas = true;
this.allow_dragnodes = true;
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
this.dirty_area = null;
this.node_in_panel = null;
this.last_mouse = [0,0];
@@ -2132,10 +2132,13 @@ LGraphCanvas.prototype.clear = function()
* @method setGraph
* @param {LGraph} graph
*/
LGraphCanvas.prototype.setGraph = function(graph)
LGraphCanvas.prototype.setGraph = function( graph, skip_clear )
{
if(this.graph == graph) return;
this.clear();
if(this.graph == graph)
return;
if(!skip_clear)
this.clear();
if(!graph && this.graph)
{
@@ -2202,19 +2205,35 @@ LGraphCanvas.prototype.closeSubgraph = function()
* @method setCanvas
* @param {Canvas} assigns a canvas
*/
LGraphCanvas.prototype.setCanvas = function(canvas)
LGraphCanvas.prototype.setCanvas = function( canvas, skip_events )
{
var that = this;
//Canvas association
if(typeof(canvas) == "string")
canvas = document.getElementById(canvas);
if(canvas)
{
if( canvas.constructor === String )
{
canvas = document.getElementById(canvas);
if(!canvas)
throw("Error creating LiteGraph canvas: Canvas not found");
}
}
if(canvas == null)
throw("Error creating LiteGraph canvas: Canvas not found");
if(canvas == this.canvas) return;
if(canvas === this.canvas)
return;
if(!canvas && this.canvas)
{
//maybe detach events from old_canvas
if(!skip_events)
this.unbindEvents();
}
this.canvas = canvas;
if(!canvas)
return;
//this.canvas.tabindex = "1000";
canvas.className += " lgraphcanvas";
canvas.data = this;
@@ -2244,72 +2263,85 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
this._mousemove_callback = this.processMouseMove.bind(this);
this._mouseup_callback = this.processMouseUp.bind(this);
canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded
canvas.addEventListener("mousemove", this._mousemove_callback);
if(!skip_events)
this.bindEvents();
}
canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; });
canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false);
canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false);
//used in some events to capture them
LGraphCanvas.prototype._doNothing = function doNothing() { return false; };
LGraphCanvas.prototype.bindEvents = function()
{
if( this._events_binded )
{
console.warn("LGraphCanvas: events already binded");
return;
}
var canvas = this.canvas;
this._mousedown_callback = this.processMouseDown.bind(this);
this._mousewheel_callback = this.processMouseWheel.bind(this);
canvas.addEventListener("mousedown", this._mousedown_callback, true ); //down do not need to store the binded
canvas.addEventListener("mousemove", this._mousemove_callback );
canvas.addEventListener("mousewheel", this._mousewheel_callback, false);
canvas.addEventListener("contextmenu", this._doNothing );
canvas.addEventListener("DOMMouseScroll", this._mousewheel_callback, false);
//touch events
//if( 'touchstart' in document.documentElement )
{
//alert("doo");
canvas.addEventListener("touchstart", this.touchHandler, true);
canvas.addEventListener("touchmove", this.touchHandler, true);
canvas.addEventListener("touchend", this.touchHandler, true);
canvas.addEventListener("touchcancel", this.touchHandler, true);
}
//this.canvas.onselectstart = function () { return false; };
canvas.addEventListener("keydown", function(e) {
that.processKeyDown(e);
});
//Keyboard ******************
this._key_callback = this.processKey.bind(this);
canvas.addEventListener("keyup", function(e) {
that.processKeyUp(e);
});
canvas.addEventListener("keydown", this._key_callback );
canvas.addEventListener("keyup", this._key_callback );
//droping files
canvas.ondragover = function () { console.log('hover'); return false; };
canvas.ondragend = function () { console.log('out'); return false; };
canvas.ondrop = function (e) {
e.preventDefault();
that.adjustMouseEvent(e);
//Droping Stuff over nodes ************************************
this._ondrop_callback = this.processDrop.bind(this);
var pos = [e.canvasX,e.canvasY];
var node = that.graph.getNodeOnPos(pos[0],pos[1]);
if(!node)
return;
canvas.addEventListener("dragover", this._doNothing, false );
canvas.addEventListener("dragend", this._doNothing, false );
canvas.addEventListener("drop", this._ondrop_callback, false );
if(!node.onDropFile)
return;
this._events_binded = true;
}
var file = e.dataTransfer.files[0];
var filename = file.name;
var ext = LGraphCanvas.getFileExtension( filename );
//console.log(file);
LGraphCanvas.prototype.unbindEvents = function()
{
if( !this._events_binded )
{
console.warn("LGraphCanvas: no events binded");
return;
}
//prepare reader
var reader = new FileReader();
reader.onload = function (event) {
//console.log(event.target);
var data = event.target.result;
node.onDropFile( data, filename, file );
};
this.canvas.removeEventListener( "mousedown", this._mousedown_callback );
this.canvas.removeEventListener( "mousewheel", this._mousewheel_callback );
this.canvas.removeEventListener( "DOMMouseScroll", this._mousewheel_callback );
this.canvas.removeEventListener( "keydown", this._key_callback );
this.canvas.removeEventListener( "keyup", this._key_callback );
this.canvas.removeEventListener( "contextmenu", this._doNothing );
this.canvas.removeEventListener( "drop", this._ondrop_callback );
//read data
var type = file.type.split("/")[0];
if(type == "text" || type == "")
reader.readAsText(file);
else if (type == "image")
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
this.canvas.removeEventListener("touchstart", this.touchHandler );
this.canvas.removeEventListener("touchmove", this.touchHandler );
this.canvas.removeEventListener("touchend", this.touchHandler );
this.canvas.removeEventListener("touchcancel", this.touchHandler );
return false;
};
this._mousedown_callback = null;
this._mousewheel_callback = null;
this._key_callback = null;
this._ondrop_callback = null;
this._events_binded = false;
}
LGraphCanvas.getFileExtension = function (url)
@@ -2466,13 +2498,15 @@ LGraphCanvas.prototype.stopRendering = function()
LGraphCanvas.prototype.processMouseDown = function(e)
{
if(!this.graph) return;
if(!this.graph)
return;
this.adjustMouseEvent(e);
var ref_window = this.getCanvasWindow();
var document = ref_window.document;
//move mouse move event to the window in case it drags outside of the canvas
this.canvas.removeEventListener("mousemove", this._mousemove_callback );
ref_window.document.addEventListener("mousemove", this._mousemove_callback, true ); //catch for the entire window
ref_window.document.addEventListener("mouseup", this._mouseup_callback, true );
@@ -2698,7 +2732,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
if(slot != -1 && n.inputs[slot])
{
var slot_type = n.inputs[slot].type;
if(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type )
if( !this.connecting_output.type || !slot_type || slot_type.toLowerCase() == this.connecting_output.type.toLowerCase() )
this._highlight_input = pos;
}
else
@@ -2773,11 +2807,13 @@ LGraphCanvas.prototype.processMouseMove = function(e)
LGraphCanvas.prototype.processMouseUp = function(e)
{
if(!this.graph) return;
if(!this.graph)
return;
var window = this.getCanvasWindow();
var document = window.document;
//restore the mousemove event back to the canvas
document.removeEventListener("mousemove", this._mousemove_callback, true );
this.canvas.addEventListener("mousemove", this._mousemove_callback, true);
document.removeEventListener("mouseup", this._mouseup_callback, true );
@@ -2814,7 +2850,7 @@ LGraphCanvas.prototype.processMouseUp = function(e)
{ //not on top of an input
var input = node.getInputInfo(0);
//simple connect
if(input && !input.link && input.type == this.connecting_output.type)
if(input && !input.link && input.type == this.connecting_output.type) //toLowerCase missing
this.connecting_node.connect(this.connecting_slot, node, 0);
}
}
@@ -2878,75 +2914,11 @@ LGraphCanvas.prototype.processMouseUp = function(e)
return false;
}
LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos)
{
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos(true,i);
if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) )
{
if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] };
return i;
}
}
return -1;
}
LGraphCanvas.prototype.processKeyDown = function(e)
{
if(!this.graph) return;
var block_default = false;
//select all Control A
if(e.keyCode == 65 && e.ctrlKey)
{
this.selectAllNodes();
block_default = true;
}
//delete or backspace
if(e.keyCode == 46 || e.keyCode == 8)
{
this.deleteSelectedNodes();
block_default = true;
}
//collapse
//...
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyDown)
this.selected_nodes[i].onKeyDown(e);
this.graph.change();
if(block_default)
{
e.preventDefault();
return false;
}
}
LGraphCanvas.prototype.processKeyUp = function(e)
{
if(!this.graph) return;
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyUp)
this.selected_nodes[i].onKeyUp(e);
this.graph.change();
}
LGraphCanvas.prototype.processMouseWheel = function(e)
{
if(!this.graph) return;
if(!this.allow_dragcanvas) return;
if(!this.graph || !this.allow_dragcanvas)
return;
var delta = (e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60);
@@ -2972,6 +2944,109 @@ LGraphCanvas.prototype.processMouseWheel = function(e)
return false; // prevent default
}
LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos)
{
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos(true,i);
if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) )
{
if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] };
return i;
}
}
return -1;
}
LGraphCanvas.prototype.processKey = function(e)
{
if(!this.graph)
return;
var block_default = false;
if(e.type == "keydown")
{
//select all Control A
if(e.keyCode == 65 && e.ctrlKey)
{
this.selectAllNodes();
block_default = true;
}
//delete or backspace
if(e.keyCode == 46 || e.keyCode == 8)
{
this.deleteSelectedNodes();
block_default = true;
}
//collapse
//...
//TODO
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyDown)
this.selected_nodes[i].onKeyDown(e);
}
else if( e.type == "keyup" )
{
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyUp)
this.selected_nodes[i].onKeyUp(e);
}
this.graph.change();
if(block_default)
{
e.preventDefault();
return false;
}
}
LGraphCanvas.prototype.processDrop = function(e)
{
e.preventDefault();
this.adjustMouseEvent(e);
var pos = [e.canvasX,e.canvasY];
var node = this.graph.getNodeOnPos(pos[0],pos[1]);
if(!node)
return;
if(!node.onDropFile)
return;
var file = e.dataTransfer.files[0];
var filename = file.name;
var ext = LGraphCanvas.getFileExtension( filename );
//console.log(file);
//prepare reader
var reader = new FileReader();
reader.onload = function (event) {
//console.log(event.target);
var data = event.target.result;
node.onDropFile( data, filename, file );
};
//read data
var type = file.type.split("/")[0];
if(type == "text" || type == "")
reader.readAsText(file);
else if (type == "image")
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
return false;
}
LGraphCanvas.prototype.processNodeSelected = function(n,e)
{
n.selected = true;
@@ -3227,7 +3302,8 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//clear
//canvas.width = canvas.width;
ctx.clearRect(0,0,canvas.width, canvas.height);
if(this.clear_background)
ctx.clearRect(0,0,canvas.width, canvas.height);
//draw bg canvas
if(this.bgcanvas == this.canvas)
@@ -3241,19 +3317,7 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//info widget
if(this.show_info)
{
ctx.font = "10px Arial";
ctx.fillStyle = "#888";
if(this.graph)
{
ctx.fillText( "T: " + this.graph.globaltime.toFixed(2)+"s",5,13*1 );
ctx.fillText( "I: " + this.graph.iteration,5,13*2 );
ctx.fillText( "F: " + this.frame,5,13*3 );
ctx.fillText( "FPS:" + this.fps.toFixed(2),5,13*4 );
}
else
ctx.fillText( "No graph selected",5,13*1 );
}
this.renderInfo(ctx);
if(this.graph)
{
@@ -3328,6 +3392,28 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
this.dirty_canvas = false;
}
LGraphCanvas.prototype.renderInfo = function( ctx, x, y )
{
x = x || 0;
y = y || 0;
ctx.save();
ctx.translate( x, y );
ctx.font = "10px Arial";
ctx.fillStyle = "#888";
if(this.graph)
{
ctx.fillText( "T: " + this.graph.globaltime.toFixed(2)+"s",5,13*1 );
ctx.fillText( "I: " + this.graph.iteration,5,13*2 );
ctx.fillText( "F: " + this.frame,5,13*3 );
ctx.fillText( "FPS:" + this.fps.toFixed(2),5,13*4 );
}
else
ctx.fillText( "No graph selected",5,13*1 );
ctx.restore();
}
LGraphCanvas.prototype.drawBackCanvas = function()
{
var canvas = this.bgcanvas;
@@ -3338,7 +3424,8 @@ LGraphCanvas.prototype.drawBackCanvas = function()
ctx.start();
//clear
ctx.clearRect(0,0,canvas.width, canvas.height);
if(this.clear_background)
ctx.clearRect(0,0,canvas.width, canvas.height);
//reset in case of error
ctx.restore();
@@ -3539,7 +3626,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var slot = node.inputs[i];
ctx.globalAlpha = editor_alpha;
if (this.connecting_node != null && this.connecting_output.type != 0 && node.inputs[i].type != 0 && this.connecting_output.type != node.inputs[i].type)
if (this.connecting_node != null && this.connecting_output.type && node.inputs[i].type && this.connecting_output.type.toLowerCase() != node.inputs[i].type.toLowerCase() )
ctx.globalAlpha = 0.4 * editor_alpha;
ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";

2
src/nodes/base.js
View File

@@ -138,7 +138,7 @@ Subgraph.prototype.clone = function()
}
LiteGraph.registerNodeType("graph/subgraph", Subgraph);
LiteGraph.registerNodeType("graph/subgraph", Subgraph );
//Input for a subgraph

132
src/nodes/input.js Normal file
View File

@@ -0,0 +1,132 @@
(function(){
function GamepadInput()
{
this.addOutput("left_x_axis","number");
this.addOutput("left_y_axis","number");
this.properties = {};
}
GamepadInput.title = "Gamepad";
GamepadInput.desc = "gets the input of the gamepad";
GamepadInput.prototype.onExecute = function()
{
//get gamepad
var gamepad = this.getGamepad();
if(!gamepad)
return;
if(this.outputs)
{
for(var i = 0; i < this.outputs.length; i++)
{
var output = this.outputs[i];
var v = null;
switch( output.name )
{
case "left_x_axis": v = gamepad.xbox.axes["lx"]; break;
case "left_y_axis": v = gamepad.xbox.axes["ly"]; break;
case "right_x_axis": v = gamepad.xbox.axes["rx"]; break;
case "right_y_axis": v = gamepad.xbox.axes["ry"]; break;
case "a_button": v = gamepad.xbox.buttons["a"] ? 1 : 0; break;
case "b_button": v = gamepad.xbox.buttons["b"] ? 1 : 0; break;
case "x_button": v = gamepad.xbox.buttons["x"] ? 1 : 0; break;
case "y_button": v = gamepad.xbox.buttons["y"] ? 1 : 0; break;
case "lb_button": v = gamepad.xbox.buttons["lb"] ? 1 : 0; break;
case "rb_button": v = gamepad.xbox.buttons["rb"] ? 1 : 0; break;
case "ls_button": v = gamepad.xbox.buttons["ls"] ? 1 : 0; break;
case "rs_button": v = gamepad.xbox.buttons["rs"] ? 1 : 0; break;
case "start_button": v = gamepad.xbox.buttons["start"] ? 1 : 0; break;
case "back_button": v = gamepad.xbox.buttons["back"] ? 1 : 0; break;
default: break;
}
this.setOutputData(i,v);
}
}
}
GamepadInput.prototype.getGamepad = function()
{
var getGamepads = navigator.getGamepads || navigator.webkitGetGamepads || navigator.mozGetGamepads;
if(!getGamepads)
return null;
var gamepads = getGamepads.call(navigator);
var gamepad = null;
for(var i = 0; i < 4; i++)
{
if (gamepads[i])
{
gamepad = gamepads[i];
//xbox controller mapping
var xbox = this.xbox_mapping;
if(!xbox)
xbox = this.xbox_mapping = { axes:[], buttons:{}, hat: ""};
xbox.axes["lx"] = gamepad.axes[0];
xbox.axes["ly"] = gamepad.axes[1];
xbox.axes["rx"] = gamepad.axes[2];
xbox.axes["ry"] = gamepad.axes[3];
xbox.axes["triggers"] = gamepad.axes[4];
for(var i = 0; i < gamepad.buttons.length; i++)
{
//mapping of XBOX
switch(i) //I use a switch to ensure that a player with another gamepad could play
{
case 0: xbox.buttons["a"] = gamepad.buttons[i].pressed; break;
case 1: xbox.buttons["b"] = gamepad.buttons[i].pressed; break;
case 2: xbox.buttons["x"] = gamepad.buttons[i].pressed; break;
case 3: xbox.buttons["y"] = gamepad.buttons[i].pressed; break;
case 4: xbox.buttons["lb"] = gamepad.buttons[i].pressed; break;
case 5: xbox.buttons["rb"] = gamepad.buttons[i].pressed; break;
case 6: xbox.buttons["lt"] = gamepad.buttons[i].pressed; break;
case 7: xbox.buttons["rt"] = gamepad.buttons[i].pressed; break;
case 8: xbox.buttons["back"] = gamepad.buttons[i].pressed; break;
case 9: xbox.buttons["start"] = gamepad.buttons[i].pressed; break;
case 10: xbox.buttons["ls"] = gamepad.buttons[i].pressed; break;
case 11: xbox.buttons["rs"] = gamepad.buttons[i].pressed; break;
case 12: if( gamepad.buttons[i].pressed) xbox.hat += "up"; break;
case 13: if( gamepad.buttons[i].pressed) xbox.hat += "down"; break;
case 14: if( gamepad.buttons[i].pressed) xbox.hat += "left"; break;
case 15: if( gamepad.buttons[i].pressed) xbox.hat += "right"; break;
case 16: xbox.buttons["home"] = gamepad.buttons[i].pressed; break;
default:
}
}
gamepad.xbox = xbox;
return gamepad;
}
}
}
GamepadInput.prototype.onDrawBackground = function(ctx)
{
//render
}
GamepadInput.prototype.onGetOutputs = function() {
return [
["left_x_axis","number"],
["left_y_axis","number"],
["right_x_axis","number"],
["right_y_axis","number"],
["trigger","number"],
["a_button","number"],
["b_button","number"],
["x_button","number"],
["y_button","number"],
["lb_button","number"],
["rb_button","number"],
["ls_button","number"],
["rs_button","number"],
["start","number"],
["back","number"]
];
}
LiteGraph.registerNodeType("input/gamepad", GamepadInput );
})();

1
utils/deploy_files.txt
View File

@@ -1,6 +1,7 @@
../src/litegraph.js
../src/nodes/base.js
../src/nodes/interface.js
../src/nodes/input.js
../src/nodes/math.js
../src/nodes/logic.js
../src/nodes/image.js