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

WebGL support

Browse Source 
Subgraph support
FX nodes moved from gltexture to glfx
Improves in gltexture
This commit is contained in:
tamat
2014-10-02 15:38:19 +02:00
parent 2e9b4a3f77
commit 6248dd4e0f
17 changed files with 5784 additions and 836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2836
build/litegraph.js
View File

File diff suppressed because it is too large Load Diff

233
build/litegraph.min.js vendored
View File

@@ -1,9 +1,9 @@
var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,throw_errors:!0,registered_node_types:{},registerNodeType:function(a,b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype";
b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;b=b||d.title||a;d=new d(name);d.type=a;d.title||(d.title=b);d.flags||(d.flags={});d.size||
(d.size=d.computeSize());d.pos||(d.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(var e in c)d[e]=c[e];return d},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&
!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;
LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},cloneObject:function(a,b){if(null==a)return null;var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]=c[d];return b}};LiteGraph.getTime="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear()}
LGraph.supported_types=["number","string","boolean"];LGraph.prototype.getSupportedTypes=function(){return this.supported_types||LGraph.supported_types};LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2;
var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_TITLE_COLOR:"#222",NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",proxy:null,debug:!1,throw_errors:!0,registered_node_types:{},registerNodeType:function(a,b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype";
b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;b=b||d.title||a;d=new d(name);d.type=a;d.title||(d.title=b);d.properties||(d.properties=
{});d.flags||(d.flags={});d.size||(d.size=d.computeSize());d.pos||(d.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(var e in c)d[e]=c[e];return d},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a=
{"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");
f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},cloneObject:function(a,b){if(null==a)return null;var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]=c[d];return b}};LiteGraph.getTime="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()};
function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear()}LGraph.supported_types=["number","string","boolean"];LGraph.prototype.getSupportedTypes=function(){return this.supported_types||LGraph.supported_types};LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2;
LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this._nodes=[];this._nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.global_inputs={};this.global_outputs={};this.debug=!0;this.change();this.sendActionToCanvas("clear")};
LGraph.prototype.attachCanvas=function(a){if(a.constructor!=LGraphCanvas)throw"attachCanvas expects a LGraphCanvas instance";a.graph&&a.graph!=this&&a.graph.detachCanvas(a);a.graph=this;this.list_of_graphcanvas||(this.list_of_graphcanvas=[]);this.list_of_graphcanvas.push(a)};LGraph.prototype.detachCanvas=function(a){var b=this.list_of_graphcanvas.indexOf(a);-1!=b&&(a.graph=null,this.list_of_graphcanvas.splice(b,1))};
LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=LiteGraph.getTime();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1)}};
@@ -18,18 +18,18 @@ LGraph.prototype.remove=function(a){if(null!=this._nodes_by_id[a.id]&&!a.ignore_
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.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.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,c){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.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,c){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.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.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.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.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}};
LGraph.prototype.configure=function(a,b){b||this.clear();var c=a.nodes,d;for(d in a)this[d]=a[d];var e=!1;this._nodes=[];for(d in c){var f=c[d],g=LiteGraph.createNode(f.type,f.title);g?(g.id=f.id,this.add(g,!0),g.configure(f)):(LiteGraph.debug&&console.log("Node not found: "+f.type),e=!0)}this.updateExecutionOrder();this.setDirtyCanvas(!0,!0);return e};LGraph.prototype.onNodeTrace=function(a,b,c){};
function LGraphNode(a){this.title=a||"Unnamed";this.size=[LiteGraph.NODE_WIDTH,60];this.graph=null;this.pos=[10,10];this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.data=null;this.flags={}}
LGraphNode.prototype.configure=function(a){for(var b in a)"console"!=b&&null!=a[b]&&("object"==typeof a[b]?this[b]&&this[b].configure?this[b].configure(a[b]):this[b]=LiteGraph.cloneObject(a[b],this[b]):this[b]=a[b]);for(var c in this.inputs){var d=this.inputs[c];d.link&&d.link.length&&(a=d.link,"object"==typeof a&&(d.link=a[0],this.graph.links[a[0]]={id:a[0],origin_id:a[1],origin_slot:a[2],target_id:a[3],target_slot:a[4]}))}for(c in this.outputs)if(d=this.outputs[c],d.links&&0!=d.links.length)for(b in d.links)a=
d.links[b],"object"==typeof a&&(d.links[b]=a[0])};
LGraph.prototype.configure=function(a,b){b||this.clear();var c=a.nodes,d;for(d in a)this[d]=a[d];var e=!1;this._nodes=[];for(d in c){var f=c[d],g=LiteGraph.createNode(f.type,f.title);g?(g.id=f.id,this.add(g,!0),g.configure(f)):(LiteGraph.debug&&console.log("Node not found: "+f.type),e=!0)}this.updateExecutionOrder();this.setDirtyCanvas(!0,!0);return e};LGraph.prototype.onNodeTrace=function(a,b,c){};function LGraphNode(a){this._ctor()}
LGraphNode.prototype._ctor=function(a){this.title=a||"Unnamed";this.size=[LiteGraph.NODE_WIDTH,60];this.graph=null;this.pos=[10,10];this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.properties={};this.data=null;this.flags={}};
LGraphNode.prototype.configure=function(a){for(var b in a)if("console"!=b)if("properties"==b)for(var c in a.properties)this.properties[c]=a.properties[c];else null!=a[b]&&("object"==typeof a[b]?this[b]&&this[b].configure?this[b].configure(a[b]):this[b]=LiteGraph.cloneObject(a[b],this[b]):this[b]=a[b]);for(var d in this.inputs)c=this.inputs[d],c.link&&c.link.length&&(a=c.link,"object"==typeof a&&(c.link=a[0],this.graph.links[a[0]]={id:a[0],origin_id:a[1],origin_slot:a[2],target_id:a[3],target_slot:a[4]}));
for(d in this.outputs)if(c=this.outputs[d],c.links&&0!=c.links.length)for(b in c.links)a=c.links[b],"object"==typeof a&&(c.links[b]=a[0])};
LGraphNode.prototype.serialize=function(){var a={id:this.id,title:this.title,type:this.type,pos:this.pos,size:this.size,data:this.data,flags:LiteGraph.cloneObject(this.flags),inputs:this.inputs,outputs:this.outputs};this.properties&&(a.properties=LiteGraph.cloneObject(this.properties));a.type||(a.type=this.constructor.type);this.color&&(a.color=this.color);this.bgcolor&&(a.bgcolor=this.bgcolor);this.boxcolor&&(a.boxcolor=this.boxcolor);this.shape&&(a.shape=this.shape);if(this.onSerialize)this.onSerialize(a);
return a};LGraphNode.prototype.clone=function(){var a=LiteGraph.createNode(this.type),b=this.serialize();delete b.id;a.configure(b);return a};LGraphNode.prototype.toString=function(){return JSON.stringify(this.serialize())};LGraphNode.prototype.getTitle=function(){return this.title||this.constructor.title};
LGraphNode.prototype.setOutputData=function(a,b){if(this.outputs&&-1<a&&a<this.outputs.length&&this.outputs[a]&&null!=this.outputs[a].links)for(var c=0;c<this.outputs[a].links.length;c++)this.graph.links[this.outputs[a].links[c]].data=b};LGraphNode.prototype.getInputData=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link?this.graph.links[this.inputs[a].link].data:null:null};
@@ -38,13 +38,12 @@ LGraphNode.prototype.getOutputNodes=function(a){if(!this.outputs||0==this.output
LGraphNode.prototype.addOutput=function(a,b,c){a={name:a,type:b,links:null};if(c)for(var d in c)a[d]=c[d];this.outputs||(this.outputs=[]);this.outputs.push(a);if(this.onOutputAdded)this.onOutputAdded(a);this.size=this.computeSize()};LGraphNode.prototype.addOutputs=function(a){for(var b in a){var c=a[b],d={name:c[0],type:c[1],link:null};if(a[2])for(var e in c[2])d[e]=c[2][e];this.outputs||(this.outputs=[]);this.outputs.push(d);if(this.onOutputAdded)this.onOutputAdded(d)}this.size=this.computeSize()};
LGraphNode.prototype.removeOutput=function(a){this.disconnectOutput(a);this.outputs.splice(a,1);this.size=this.computeSize();if(this.onOutputRemoved)this.onOutputRemoved(a)};LGraphNode.prototype.addInput=function(a,b,c){a={name:a,type:b,link:null};if(c)for(var d in c)a[d]=c[d];this.inputs||(this.inputs=[]);this.inputs.push(a);this.size=this.computeSize();if(this.onInputAdded)this.onInputAdded(a)};
LGraphNode.prototype.addInputs=function(a){for(var b in a){var c=a[b],d={name:c[0],type:c[1],link:null};if(a[2])for(var e in c[2])d[e]=c[2][e];this.inputs||(this.inputs=[]);this.inputs.push(d);if(this.onInputAdded)this.onInputAdded(d)}this.size=this.computeSize()};LGraphNode.prototype.removeInput=function(a){this.disconnectInput(a);this.inputs.splice(a,1);this.size=this.computeSize();if(this.onInputRemoved)this.onInputRemoved(a)};
LGraphNode.prototype.addConnection=function(a,b,c,d){this.connections.push({name:a,type:b,pos:c,direction:d,links:null})};LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=[0,0];b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};
LGraphNode.prototype.addConnection=function(a,b,c,d){this.connections.push({name:a,type:b,pos:c,direction:d,links:null})};LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=new Float32Array([0,0]);b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};
LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};
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];if(-1==c)null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1});else if(0==d.type||0==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!=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};
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||
@@ -54,29 +53,30 @@ 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,this.graph.debug&&console.log(this.title+": Capturing input "+(a?"ON":"OFF"))}}};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){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";b&&b.attachCanvas(this);this.setCanvas(a);this.clear();this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};
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)))};
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;this.canvas.className+=" lgraphcanvas";this.canvas.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==this.canvas.getContext)throw"This browser doesnt support Canvas";
this.ctx=this.canvas.getContext("2d");this.bgctx=this.bgcanvas.getContext("2d");this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);this.canvas.addEventListener("mousedown",this.processMouseDown.bind(this),!0);this.canvas.addEventListener("mousemove",this._mousemove_callback);this.canvas.addEventListener("contextmenu",function(a){a.preventDefault();return!1});this.canvas.addEventListener("mousewheel",this.processMouseWheel.bind(this),!1);
this.canvas.addEventListener("DOMMouseScroll",this.processMouseWheel.bind(this),!1);this.canvas.addEventListener("touchstart",this.touchHandler,!0);this.canvas.addEventListener("touchmove",this.touchHandler,!0);this.canvas.addEventListener("touchend",this.touchHandler,!0);this.canvas.addEventListener("touchcancel",this.touchHandler,!0);this.canvas.addEventListener("keydown",function(a){b.processKeyDown(a)});this.canvas.addEventListener("keyup",function(a){b.processKeyUp(a)})}};
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};
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?a.readAsText(f):"image"==d?a.readAsDataURL(f):a.readAsArrayBuffer(f);return!1}}}};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};
LGraphCanvas.prototype.processMouseDown=function(a){if(this.graph){this.adjustMouseEvent(a);var b=this.getCanvasWindow();this.canvas.removeEventListener("mousemove",this._mousemove_callback);b.document.addEventListener("mousemove",this._mousemove_callback,!0);b.document.addEventListener("mouseup",this._mouseup_callback,!0);var c=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes);if(1==a.which){if(!a.shiftKey){var d=[],e;for(e in this.selected_nodes)this.selected_nodes[e]!=c&&d.push(this.selected_nodes[e]);
for(e in d)this.processNodeDeselected(d[e])}d=!1;if(c){this.live_mode||c.flags.pinned||this.bringToFront(c);var f=!1;if(!this.connecting_node&&!c.flags.collapsed&&!this.live_mode){if(c.outputs){e=0;for(var g=c.outputs.length;e<g;++e){var h=c.outputs[e],l=c.getConnectionPos(!1,e);if(isInsideRectangle(a.canvasX,a.canvasY,l[0]-10,l[1]-5,20,10)){this.connecting_node=c;this.connecting_output=h;this.connecting_pos=c.getConnectionPos(!1,e);this.connecting_slot=e;f=!0;break}}}if(c.inputs)for(e=0,g=c.inputs.length;e<
g;++e)h=c.inputs[e],l=c.getConnectionPos(!0,e),isInsideRectangle(a.canvasX,a.canvasY,l[0]-10,l[1]-5,20,10)&&h.link&&(c.disconnectInput(e),f=this.dirty_bgcanvas=!0);!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0]+c.size[0]-5,c.pos[1]+c.size[1]-5,5,5)&&(this.resizing_node=c,this.canvas.style.cursor="se-resize",f=!0)}if(!f){e=!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}};
g;++e)h=c.inputs[e],l=c.getConnectionPos(!0,e),isInsideRectangle(a.canvasX,a.canvasY,l[0]-10,l[1]-5,20,10)&&h.link&&(c.disconnectInput(e),f=this.dirty_bgcanvas=!0);!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0]+c.size[0]-5,c.pos[1]+c.size[1]-5,5,5)&&(this.resizing_node=c,this.canvas.style.cursor="se-resize",f=!0)}!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0],c.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_TITLE_HEIGHT)&&(c.collapse(),f=!0);if(!f){e=!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);if(-1!=f&&b.inputs[f]){if(f=b.inputs[f].type,f==this.connecting_output.type||
"*"==f||"*"==this.connecting_output.type)this._highlight_input=e}else 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!=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]<
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();a.stopPropagation();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)}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};
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);46!=a.keyCode&&8!=a.keyCode||this.deleteSelectedNodes();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}};
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};
@@ -84,23 +84,26 @@ LGraphCanvas.prototype.processNodeDblClicked=function(a){if(this.onShowNodePanel
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)};
LGraphCanvas.prototype.deleteSelectedNodes=function(){for(var a in this.selected_nodes)this.graph.remove(this.selected_nodes[a]);this.selected_nodes={};this.setDirty(!0)};LGraphCanvas.prototype.centerOnNode=function(a){this.offset[0]=-a.pos[0]-0.5*a.size[0]+0.5*this.canvas.width/this.scale;this.offset[1]=-a.pos[1]-0.5*a.size[1]+0.5*this.canvas.height/this.scale;this.setDirty(!0,!0)};
LGraphCanvas.prototype.adjustMouseEvent=function(a){var b=this.canvas.getBoundingClientRect();a.localX=a.pageX-b.left;a.localY=a.pageY-b.top;a.canvasX=a.localX/this.scale-this.offset[0];a.canvasY=a.localY/this.scale-this.offset[1]};
LGraphCanvas.prototype.setZoom=function(a,b){b||(b=[0.5*this.canvas.width,0.5*this.canvas.height]);var c=this.convertOffsetToCanvas(b);this.scale=a;4<this.scale?this.scale=4:0.1>this.scale&&(this.scale=0.1);var d=this.convertOffsetToCanvas(b),c=[d[0]-c[0],d[1]-c[1]];this.offset[0]+=c[0];this.offset[1]+=c[1];this.dirty_bgcanvas=this.dirty_canvas=!0};LGraphCanvas.prototype.convertOffsetToCanvas=function(a){return[a[0]/this.scale-this.offset[0],a[1]/this.scale-this.offset[1]]};
LGraphCanvas.prototype.convertCanvasToOffset=function(a){return[(a[0]+this.offset[0])*this.scale,(a[1]+this.offset[1])*this.scale]};LGraphCanvas.prototype.convertEventToCanvas=function(a){var b=this.canvas.getClientRects()[0];return this.convertOffsetToCanvas([a.pageX-b.left,a.pageY-b.top])};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.drawBgcanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=this.render_time?1/this.render_time:0;this.frame+=1};
LGraphCanvas.prototype.drawFrontCanvas=function(){var a=this.ctx,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);a.drawImage(this.bgcanvas,0,0);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();this.dirty_canvas=!1};
LGraphCanvas.prototype.drawBgcanvas=function(){var a=this.bgcanvas,b=this.bgctx;a.width=a.width;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.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()}this.dirty_bgcanvas=!1;this.dirty_canvas=!0};
LGraphCanvas.prototype.setZoom=function(a,b){b||(b=[0.5*this.canvas.width,0.5*this.canvas.height]);var c=this.convertOffsetToCanvas(b);this.scale=a;this.scale>this.max_zoom?this.scale=this.max_zoom:this.scale<this.min_zoom&&(this.scale=this.min_zoom);var d=this.convertOffsetToCanvas(b),c=[d[0]-c[0],d[1]-c[1]];this.offset[0]+=c[0];this.offset[1]+=c[1];this.dirty_bgcanvas=this.dirty_canvas=!0};
LGraphCanvas.prototype.convertOffsetToCanvas=function(a){return[a[0]/this.scale-this.offset[0],a[1]/this.scale-this.offset[1]]};LGraphCanvas.prototype.convertCanvasToOffset=function(a){return[(a[0]+this.offset[0])*this.scale,(a[1]+this.offset[1])*this.scale]};LGraphCanvas.prototype.convertEventToCanvas=function(a){var b=this.canvas.getClientRects()[0];return this.convertOffsetToCanvas([a.pageX-b.left,a.pageY-b.top])};
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.start&&a.start();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.finish&&a.finish();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.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.set([LiteGraph.NODE_COLLAPSED_WIDTH,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=
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}};
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?(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),b.strokeStyle=d),b.beginPath(),b.rect(0,f?0.5:-e+0.5,c[0]+1,f?c[1]:c[1]+e)):"round"==a.shape?b.roundRect(0,f?0:-e,c[0],f?c[1]:c[1]+e,10):"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.fillRect(0,-e,c[0]+1,e),b.stroke()):"round"==h&&(b.roundRect(0,-e,c[0],e,10,0),b.fill(),b.stroke()),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.8<this.scale&&(b.fillStyle="#222",b.fillText(a,16,13-e)))};
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)))};
LGraphCanvas.prototype.drawNodeCollapsed=function(a,b,c,d){b.strokeStyle=c||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=d||LiteGraph.NODE_DEFAULT_BGCOLOR;c=LiteGraph.NODE_COLLAPSED_RADIUS;d=a.shape||"box";"circle"==d?(b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],c,0,2*Math.PI),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],0.5*c,0,2*Math.PI)):"round"==d?(b.beginPath(),b.roundRect(0.5*a.size[0]-
c,0.5*a.size[1]-c,2*c,2*c,5),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.roundRect(0.5*a.size[0]-0.5*c,0.5*a.size[1]-0.5*c,c,c,2)):(b.beginPath(),b.rect(0,0,a.size[0],2*c),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.rect(0.5*c,0.5*c,c,c));b.fill()};LGraphCanvas.link_colors=["#AAC","#ACA","#CAA"];
LGraphCanvas.prototype.drawConnections=function(a){a.lineWidth=this.connections_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";a.globalAlpha=this.editor_alpha;for(var b in this.graph._nodes){var c=this.graph._nodes[b];if(c.inputs&&c.inputs.length)for(var d in c.inputs){var e=c.inputs[d];if(e&&null!=e.link){var f=this.graph.links[e.link];if(f&&(e=this.graph.getNodeById(f.origin_id),null!=e)){var g=f.origin_slot,f=null,f=-1==g?[e.pos[0]+10,e.pos[1]+10]:e.getConnectionPos(!1,g),e=LGraphCanvas.link_type_colors[c.inputs[d].type];
@@ -113,14 +116,14 @@ LGraphCanvas.prototype.switchLiveMode=function(a){if(a){var b=this,c=this.live_m
LGraphCanvas.prototype.touchHandler=function(a){var b=a.changedTouches[0],c="";switch(a.type){case "touchstart":c="mousedown";break;case "touchmove":c="mousemove";break;case "touchend":c="mouseup";break;default:return}var d=this.getCanvasWindow(),e=d.document.createEvent("MouseEvent");e.initMouseEvent(c,!0,!0,d,1,b.screenX,b.screenY,b.clientX,b.clientY,!1,!1,!1,!1,0,null);b.target.dispatchEvent(e);a.preventDefault()};
LGraphCanvas.onMenuAdd=function(a,b,c,d,e){function f(a,b){var c=LiteGraph.createNode(a.value);c&&(c.pos=d.convertEventToCanvas(e),d.graph.add(c))}var g=d.getCanvasWindow();a=LiteGraph.getNodeTypesCategories();var h={},l;for(l in a)a[l]&&(h[l]={value:a[l],content:a[l],is_menu:!0});var n=LiteGraph.createContextualMenu(h,{event:b,callback:function(a,b){var c=LiteGraph.getNodeTypesInCategory(a.value),d=[],e;for(e in c)d.push({content:c[e].title,value:c[e].type});LiteGraph.createContextualMenu(d,{event:b,
callback:f,from:n},g);return!1},from:c},g);return!1};LGraphCanvas.onMenuCollapseAll=function(){};LGraphCanvas.onMenuNodeEdit=function(){};LGraphCanvas.onMenuNodeInputs=function(a,b,c){function d(b){a&&a.addInput(b.value[0],b.value[1],b.value[2])}if(a){var e=a.optional_inputs;a.onGetInputs&&(e=a.onGetInputs());if(e){var f=[],g;for(g in e){var h=e[g],l=h[0];h[2]&&h[2].label&&(l=h[2].label);f.push({content:l,value:h})}LiteGraph.createContextualMenu(f,{event:b,callback:d,from:c})}return!1}};
LGraphCanvas.onMenuNodeOutputs=function(a,b,c){function d(f){if(a){var e=f.value[1];if(!e||e.constructor!==Object&&e.constructor!==Array)a.addOutput(f.value[0],f.value[1]);else{f=[];for(var g in e)f.push({content:g,value:e[g]});LiteGraph.createContextualMenu(f,{event:b,callback:d,from:c});return!1}}}if(a){var e=a.optional_outputs;a.onGetOutputs&&(e=a.onGetOutputs());if(e){var f=[],g;for(g in e)-1==a.findOutputSlot(e[g][0])&&f.push({content:e[g][0],value:e[g]});f.length&&LiteGraph.createContextualMenu(f,
LGraphCanvas.onMenuNodeOutputs=function(a,b,c){function d(f){if(a){var g=f.value[1];if(!g||g.constructor!==Object&&g.constructor!==Array)a.addOutput(f.value[0],f.value[1]);else{f=[];for(var e in g)f.push({content:e,value:g[e]});LiteGraph.createContextualMenu(f,{event:b,callback:d,from:c});return!1}}}if(a){var e=a.optional_outputs;a.onGetOutputs&&(e=a.onGetOutputs());if(e){var f=[],g;for(g in e)-1==a.findOutputSlot(e[g][0])&&f.push({content:e[g][0],value:e[g]});f.length&&LiteGraph.createContextualMenu(f,
{event:b,callback:d,from:c})}return!1}};LGraphCanvas.onMenuNodeCollapse=function(a){a.flags.collapsed=!a.flags.collapsed;a.setDirtyCanvas(!0,!0)};LGraphCanvas.onMenuNodePin=function(a){a.pin()};
LGraphCanvas.onMenuNodeColors=function(a,b,c){var d=[],e;for(e in LGraphCanvas.node_colors){var f=LGraphCanvas.node_colors[e];d.push({value:e,content:"<span style='display: block; color:"+f.color+"; background-color:"+f.bgcolor+"'>"+e+"</span>"})}LiteGraph.createContextualMenu(d,{event:b,callback:function(b){a&&(b=LGraphCanvas.node_colors[b.value])&&(a.color=b.color,a.bgcolor=b.bgcolor,a.setDirtyCanvas(!0))},from:c});return!1};
LGraphCanvas.onMenuNodeShapes=function(a,b){LiteGraph.createContextualMenu(["box","round"],{event:b,callback:function(b){a&&(a.shape=b,a.setDirtyCanvas(!0))}});return!1};LGraphCanvas.onMenuNodeRemove=function(a){!1!=a.removable&&(a.graph.remove(a),a.setDirtyCanvas(!0,!0))};LGraphCanvas.onMenuNodeClone=function(a){if(!1!=a.clonable){var b=a.clone();b&&(b.pos=[a.pos[0]+5,a.pos[1]+5],a.graph.add(b),a.setDirtyCanvas(!0,!0))}};
LGraphCanvas.node_colors={red:{color:"#FAA",bgcolor:"#A44"},green:{color:"#AFA",bgcolor:"#4A4"},blue:{color:"#AAF",bgcolor:"#44A"},white:{color:"#FFF",bgcolor:"#AAA"}};
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&&(a=[{content:"Close subgraph",callback:this.closeSubgraph.bind(this)},null].concat(a)));if(this.getExtraMenuOptions){var b=this.getExtraMenuOptions(this);b.push(null);a=b.concat(a)}return a};
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.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};
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)};
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)}
@@ -130,14 +133,18 @@ LiteGraph.createContextualMenu=function(a,b,c){function d(a){var c=!0;b.callback
f.backgroundColor="#444";e.addEventListener("contextmenu",function(a){a.preventDefault();return!1});for(var g in a){var f=a[g],h=c.document.createElement("div");h.className="litemenu-entry";null==f?h.className="litemenu-entry separator":(f.is_menu&&(h.className+=" submenu"),f.disabled&&(h.className+=" disabled"),h.style.cursor="pointer",h.dataset.value="string"==typeof f?f:f.value,h.data=f,h.innerHTML="string"==typeof f?a.constructor==Array?a[g]:g:f.content?f.content:g,h.addEventListener("click",
d));e.appendChild(h)}e.addEventListener("mouseover",function(a){this.mouse_inside=!0});e.addEventListener("mouseout",function(a){for(a=a.toElement;a!=this&&a!=c.document;)a=a.parentNode;a!=this&&(this.mouse_inside=!1,this.block_close||this.closeMenu())});c.document.body.appendChild(e);a=e.getClientRects()[0];b.from&&(b.from.block_close=!0);h=b.left||0;g=b.top||0;b.event&&(h=b.event.pageX-10,g=b.event.pageY-10,b.left&&(h=b.left),f=c.document.body.getClientRects()[0],b.from&&(h=b.from.getClientRects()[0],
h=h.left+h.width),h>f.width-a.width-10&&(h=f.width-a.width-10),g>f.height-a.height-10&&(g=f.height-a.height-10));e.style.left=h+"px";e.style.top=g+"px";e.closeMenu=function(){b.from&&(b.from.block_close=!1,b.from.mouse_inside||b.from.closeMenu());this.parentNode&&c.document.body.removeChild(this)};return e};LiteGraph.closeAllContextualMenus=function(){var a=document.querySelectorAll(".litecontextualmenu");if(a.length){for(var b=[],c=0;c<a.length;c++)b.push(a[c]);for(c in b)b[c].parentNode&&b[c].parentNode.removeChild(b[c])}};
LiteGraph.extendClass=function(a,b){for(var c in a)b[c]=a[c];if(a.prototype)for(c in a.prototype)b.prototype[c]=a.prototype[c]};window.requestAnimationFrame||(window.requestAnimationFrame=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)});
(function(){function a(){this.title="Input";this.properties={name:"input_"+(1E3*Math.random()).toFixed(),type:"number"};this.addOutput("value",0)}function b(){this.title="Output";this.properties={name:"output_"+(1E3*Math.random()).toFixed(),type:"number"};this.addInput("value","number")}function c(){this.subgraph=new LGraph;this.subgraph._subgraph_node=this;this.subgraph._is_subgraph=!0;this.subgraph.onGlobalInputAdded=this.onSubgraphNewGlobalInput.bind(this);this.subgraph.onGlobalOutputAdded=this.onSubgraphNewGlobalOutput.bind(this);
this.bgcolor="#FA3"}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:""}}a.title="Input";a.desc="Input of the graph";a.prototype.onAdded=function(){this.graph.addGlobalInput(this.properties.name,this.properties.type)};a.prototype.onExecute=function(){var a=this.graph.global_inputs[this.properties.name];
a&&this.setOutputData(0,a.value)};LiteGraph.registerNodeType("graph/input",a);b.title="Ouput";b.desc="Output of the graph";b.prototype.onAdded=function(){this.graph.addGlobalOutput(this.properties.name,this.properties.type)};b.prototype.onExecute=function(){this.graph.setGlobalOutputData(this.properties.name,this.getInputData(0))};LiteGraph.registerNodeType("graph/output",b);c.title="Subgraph";c.desc="Graph inside a node";c.prototype.onSubgraphNewGlobalInput=function(a,b){this.addInput(a,b)};c.prototype.onSubgraphNewGlobalOutput=
function(a,b){this.addOutput(a,b)};c.prototype.getExtraMenuOptions=function(a){var b=this;return[{content:"Open",callback:function(){a.openSubgraph(b.subgraph)}}]};c.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),this.setOutputData(a,c)};c.prototype.configure=
function(a){LGraphNode.prototype.configure.call(this,a)};c.prototype.serialize=function(){var a=LGraphNode.prototype.serialize.call(this);a.subgraph=this.subgraph.serialize();return a};LiteGraph.registerNodeType("graph/subgraph",c);d.title="Const";d.desc="Constant value";d.prototype.setValue=function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a;this.setDirtyCanvas(!0)};d.prototype.onExecute=function(){this.setOutputData(0,parseFloat(this.properties.value))};d.prototype.onDrawBackground=
function(a){this.outputs[0].label=this.properties.value.toFixed(3)};d.prototype.onWidget=function(a,b){"value"==b.name&&this.setValue(b.value)};LiteGraph.registerNodeType("basic/const",d);e.title="Watch";e.desc="Show value of input";e.prototype.onExecute=function(){this.properties.value=this.getInputData(0);this.setOutputData(0,this.properties.value)};e.prototype.onDrawBackground=function(a){this.inputs[0]&&null!=this.properties.value&&(this.inputs[0].label=this.properties.value.constructor===Number?
this.properties.value.toFixed(3):this.properties.value)};LiteGraph.registerNodeType("basic/watch",e)})();
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 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:""}}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),this.setOutputData(a,c)};a.prototype.configure=function(a){LGraphNode.prototype.configure.call(this,
a)};a.prototype.serialize=function(){var a=LGraphNode.prototype.serialize.call(this);a.subgraph=this.subgraph.serialize();return a};a.prototype.clone=function(){var a=LiteGraph.createNode(this.type),b=this.serialize();delete b.id;delete b.inputs;delete b.outputs;a.configure(b);return a};LiteGraph.registerNodeType("graph/subgraph",a);b.title="Input";b.desc="Input of the graph";b.prototype.onAdded=function(){this.graph.addGlobalInput(this.properties.name,this.properties.type)};b.prototype.onExecute=
function(){var a=this.graph.global_inputs[this.properties.name];a&&this.setOutputData(0,a.value)};LiteGraph.registerNodeType("graph/input",b);c.title="Ouput";c.desc="Output of the graph";c.prototype.onAdded=function(){this.graph.addGlobalOutput(this.properties.name,this.properties.type)};c.prototype.onExecute=function(){this.graph.setGlobalOutputData(this.properties.name,this.getInputData(0))};LiteGraph.registerNodeType("graph/output",c);d.title="Const";d.desc="Constant value";d.prototype.setValue=
function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a;this.setDirtyCanvas(!0)};d.prototype.onExecute=function(){this.setOutputData(0,parseFloat(this.properties.value))};d.prototype.onDrawBackground=function(a){this.outputs[0].label=this.properties.value.toFixed(3)};d.prototype.onWidget=function(a,b){"value"==b.name&&this.setValue(b.value)};LiteGraph.registerNodeType("basic/const",d);e.title="Watch";e.desc="Show value of input";e.prototype.onExecute=function(){this.properties.value=
this.getInputData(0);this.setOutputData(0,this.properties.value)};e.prototype.onDrawBackground=function(a){this.inputs[0]&&null!=this.properties.value&&(this.inputs[0].label=this.properties.value.constructor===Number?this.properties.value.toFixed(3):this.properties.value)};LiteGraph.registerNodeType("basic/watch",e)})();
(function(){function a(){this.addOutput("","number");this.size=[64,84];this.properties={min:0,max:1,value:0.5,wcolor:"#7AF",size:50}}function b(){this.size=[160,26];this.addOutput("","number");this.properties={wcolor:"#7AF",min:0,max:1,value:0.5}}function c(){this.size=[160,26];this.addInput("","number");this.properties={min:0,max:1,value:0,wcolor:"#AAF"}}function d(){this.addInputs("",0);this.properties={value:"...",font:"Arial",fontsize:18,color:"#AAA",align:"left",glowSize:0,decimals:1}}function e(){this.size=
[200,100];this.properties={borderColor:"#ffffff",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",shadowSize:2,borderRadius:3}}a.title="Knob";a.desc="Circular controller";a.widgets=[{name:"increase",text:"+",type:"minibutton"},{name:"decrease",text:"-",type:"minibutton"}];a.prototype.onAdded=function(){this.value=(this.properties.value-this.properties.min)/(this.properties.max-this.properties.min);this.imgbg=this.loadImage("imgs/knob_bg.png");this.imgfg=this.loadImage("imgs/knob_fg.png")};a.prototype.onDrawImageKnob=
function(a){if(this.imgfg&&this.imgfg.width){var b=0.5*this.imgbg.width,c=this.size[0]/this.imgfg.width;a.save();a.translate(0,20);a.scale(c,c);a.drawImage(this.imgbg,0,0);a.translate(b,b);a.rotate(2*this.value*Math.PI*6/8+10*Math.PI/8);a.translate(-b,-b);a.drawImage(this.imgfg,0,0);a.restore();this.title&&(a.font="bold 16px Criticized,Tahoma",a.fillStyle="rgba(100,100,100,0.8)",a.textAlign="center",a.fillText(this.title.toUpperCase(),0.5*this.size[0],18),a.textAlign="left")}};a.prototype.onDrawVectorKnob=
@@ -173,20 +180,94 @@ k)}window.glMatrix&&(k=function(){this.addInput("vec3","vec3");this.addOutput("x
{angle:90,axis:vec3.fromValues(0,1,0)}},k.title="Rotation",k.desc="quaternion rotation",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.angle);var b=this.getInputData(1);null==b&&(b=this.properties.axis);a=quat.setAxisAngle(quat.create(),b,0.0174532925*a);this.setOutputData(0,a)},LiteGraph.registerNodeType("math3d/rotation",k),k=function(){this.addInputs([["vec3","vec3"],["quat","quat"]]);this.addOutput("result","vec3");this.properties={vec:[0,0,1]}},k.title=
"Rot. Vec3",k.desc="rotate a point",k.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.vec);var b=this.getInputData(1);null==b?this.setOutputData(a):this.setOutputData(0,vec3.transformQuat(vec3.create(),a,b))},LiteGraph.registerNodeType("math3d/rotate_vec3",k),k=function(){this.addInputs([["A","quat"],["B","quat"]]);this.addOutput("A*B","quat")},k.title="Mult. Quat",k.desc="rotate quaternion",k.prototype.onExecute=function(){var a=this.getInputData(0);if(null!=
a){var b=this.getInputData(1);null!=b&&(a=quat.multiply(quat.create(),a,b),this.setOutputData(0,a))}},LiteGraph.registerNodeType("math3d/mult-quat",k))})();
(function(){function a(){this.addInput("f","number");this.addOutput("Color","color");this.properties={colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"}}function b(){this.addInput("","image");this.size=[200,200]}function c(){this.addInputs([["img1","image"],["img2","image"],["fade","number"]]);this.addInput("","image");this.properties={fade:0.5,width:512,height:512}}function d(){this.inputs=[];this.addOutput("frame","image");this.properties={url:""}}function e(){this.addInput("",
"image");this.addOutputs("","image");this.properties={width:256,height:256,x:0,y:0,scale:1};this.size=[50,20]}function f(){this.addInput("t","number");this.addOutputs([["frame","image"],["t","number"],["d","number"]]);this.properties={url:""}}function g(){this.addOutput("Webcam","image");this.properties={}}a.title="Palette";a.desc="Generates a color";a.prototype.onExecute=function(){var a=[];null!=this.properties.colorA&&a.push(hex2num(this.properties.colorA));null!=this.properties.colorB&&a.push(hex2num(this.properties.colorB));
null!=this.properties.colorC&&a.push(hex2num(this.properties.colorC));null!=this.properties.colorD&&a.push(hex2num(this.properties.colorD));var b=this.getInputData(0);null==b&&(b=0.5);1<b?b=1:0>b&&(b=0);if(0!=a.length){var c=[0,0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,
c)}};LiteGraph.registerNodeType("color/palette",a);b.title="Frame";b.desc="Frame viewerew";b.widgets=[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}];b.prototype.onDrawBackground=function(a){this.frame&&a.drawImage(this.frame,0,0,this.size[0],this.size[1])};b.prototype.onExecute=function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)};b.prototype.onWidget=function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height;
c||null==this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()};b.prototype.show=function(){showElement&&this.frame&&showElement(this.frame)};LiteGraph.registerNodeType("graphics/frame",b);c.title="Image fade";c.desc="Fades between images";c.widgets=[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}];c.prototype.onAdded=function(){this.createCanvas();
var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)};c.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};c.prototype.onExecute=function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null==
b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0,this.canvas);this.setDirtyCanvas(!0)};LiteGraph.registerNodeType("graphics/imagefade",c);d.title="Image";d.desc="Image loader";d.widgets=[{name:"load",text:"Load",type:"button"}];d.prototype.onAdded=function(){""!=this.properties.url&&null==this.img&&this.loadImage(this.properties.url)};d.prototype.onExecute=function(){this.img||
(this.boxcolor="#000");this.img&&this.img.width?this.setOutputData(0,this.img):this.setOutputData(0,null);this.img.dirty&&(this.img.dirty=!1)};d.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadImage(b);return!0};d.prototype.loadImage=function(a){if(""==a)this.img=null;else{this.trace("loading image...");this.img=document.createElement("img");this.img.src="miniproxy.php?url="+a;this.boxcolor="#F95";var b=this;this.img.onload=function(){b.trace("Image loaded, size: "+
b.img.width+"x"+b.img.height);this.dirty=!0;b.boxcolor="#9F9";b.setDirtyCanvas(!0)}}};d.prototype.onWidget=function(a,b){"load"==b.name&&this.loadImage(this.properties.url)};LiteGraph.registerNodeType("graphics/image",d);e.title="Crop";e.desc="Crop Image";e.prototype.onAdded=function(){this.createCanvas()};e.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};e.prototype.onExecute=function(){var a=
this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y,a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)):this.setOutputData(0,null))};e.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0};LiteGraph.registerNodeType("graphics/cropImage",
c);f.title="Video";f.desc="Video playback";f.widgets=[{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},{name:"mute",text:"Mute video",type:"button"}];f.prototype.onExecute=function(){if(this.properties.url&&(this.properties.url!=this._video_url&&this.loadVideo(this.properties.url),this._video&&0!=this._video.width)){var a=this.getInputData(0);a&&0<=a&&1>=a&&(this._video.currentTime=a*this._video.duration,this._video.pause());
this._video.dirty=!0;this.setOutputData(0,this._video);this.setOutputData(1,this._video.currentTime);this.setOutputData(2,this._video.duration);this.setDirtyCanvas(!0)}};f.prototype.onStart=function(){this.play()};f.prototype.onStop=function(){this.stop()};f.prototype.loadVideo=function(a){this._video_url=a;this._video=document.createElement("video");this._video.src=a;this._video.type="type=video/mp4";this._video.muted=!0;this._video.autoplay=!0;var b=this;this._video.addEventListener("loadedmetadata",
function(a){b.trace("Duration: "+this.duration+" seconds");b.trace("Size: "+this.videoWidth+","+this.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight});this._video.addEventListener("progress",function(a){});this._video.addEventListener("error",function(a){console.log("Error loading video: "+this.src);b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video.");break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later.");
break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}});this._video.addEventListener("ended",function(a){b.trace("Ended.");this.play()})};f.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadVideo(b);return!0};f.prototype.play=function(){this._video&&this._video.play()};f.prototype.playPause=function(){this._video&&(this._video.paused?this.play():
this.pause())};f.prototype.stop=function(){this._video&&(this._video.pause(),this._video.currentTime=0)};f.prototype.pause=function(){this._video&&(this.trace("Video paused"),this._video.pause())};f.prototype.onWidget=function(a,b){};LiteGraph.registerNodeType("graphics/video",f);g.title="Webcam";g.desc="Webcam image";g.prototype.openStream=function(){function a(c){trace("Webcam rejected",c);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},this.streamReady.bind(this),a);var b=this}};g.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};g.prototype.onExecute=function(){null!=this._webcam_stream||
this._waiting_confirmation||this.openStream();this._video&&this._video.videoWidth&&(this._video.width=this._video.videoWidth,this._video.hieght=this._video.videoHeight,this.setOutputData(0,this._video))};LiteGraph.registerNodeType("graphics/webcam",g)})();
(function(){function a(){this.inputs=[];this.addOutput("frame","image");this.properties={url:""}}function b(){this.addInput("f","number");this.addOutput("Color","color");this.properties={colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"}}function c(){this.addInput("","image");this.size=[200,200]}function d(){this.addInputs([["img1","image"],["img2","image"],["fade","number"]]);this.addInput("","image");this.properties={fade:0.5,width:512,height:512}}function e(){this.addInput("",
"image");this.addOutputs("","image");this.properties={width:256,height:256,x:0,y:0,scale:1};this.size=[50,20]}function f(){this.addInput("t","number");this.addOutputs([["frame","image"],["t","number"],["d","number"]]);this.properties={url:""}}function g(){this.addOutput("Webcam","image");this.properties={}}a.title="Image";a.desc="Image loader";a.widgets=[{name:"load",text:"Load",type:"button"}];a.prototype.onAdded=function(){""!=this.properties.url&&null==this.img&&this.loadImage(this.properties.url)};
a.prototype.onDrawBackground=function(a){this.img&&5<this.size[0]&&5<this.size[1]&&a.drawImage(this.img,0,0,this.size[0],this.size[1])};a.prototype.onExecute=function(){this.img||(this.boxcolor="#000");this.img&&this.img.width?this.setOutputData(0,this.img):this.setOutputData(0,null);this.img&&this.img.dirty&&(this.img.dirty=!1)};a.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadImage(b);return!0};a.prototype.onDropFile=function(a,b){var c=new Image;c.src=a;
this.img=c};a.prototype.loadImage=function(a){if(""==a)this.img=null;else{this.trace("loading image...");this.img=document.createElement("img");a=name;"http://"==a.substr(0,7)&&LiteGraph.proxy&&(a=LiteGraph.proxy+a.substr(7));this.img.src=a;this.boxcolor="#F95";var b=this;this.img.onload=function(){b.trace("Image loaded, size: "+b.img.width+"x"+b.img.height);this.dirty=!0;b.boxcolor="#9F9";b.setDirtyCanvas(!0)}}};a.prototype.onWidget=function(a,b){"load"==b.name&&this.loadImage(this.properties.url)};
LiteGraph.registerNodeType("graphics/image",a);b.title="Palette";b.desc="Generates a color";b.prototype.onExecute=function(){var a=[];null!=this.properties.colorA&&a.push(hex2num(this.properties.colorA));null!=this.properties.colorB&&a.push(hex2num(this.properties.colorB));null!=this.properties.colorC&&a.push(hex2num(this.properties.colorC));null!=this.properties.colorD&&a.push(hex2num(this.properties.colorD));var b=this.getInputData(0);null==b&&(b=0.5);1<b?b=1:0>b&&(b=0);if(0!=a.length){var c=[0,
0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,c)}};LiteGraph.registerNodeType("color/palette",b);c.title="Frame";c.desc="Frame viewerew";c.widgets=[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}];c.prototype.onDrawBackground=
function(a){this.frame&&a.drawImage(this.frame,0,0,this.size[0],this.size[1])};c.prototype.onExecute=function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)};c.prototype.onWidget=function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height;c||null==this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()};c.prototype.show=function(){showElement&&this.frame&&showElement(this.frame)};
LiteGraph.registerNodeType("graphics/frame",c);d.title="Image fade";d.desc="Fades between images";d.widgets=[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}];d.prototype.onAdded=function(){this.createCanvas();var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)};d.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=
this.properties.height};d.prototype.onExecute=function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null==b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0,this.canvas);this.setDirtyCanvas(!0)};LiteGraph.registerNodeType("graphics/imagefade",
d);e.title="Crop";e.desc="Crop Image";e.prototype.onAdded=function(){this.createCanvas()};e.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};e.prototype.onExecute=function(){var a=this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y,a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)):
this.setOutputData(0,null))};e.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0};LiteGraph.registerNodeType("graphics/cropImage",d);f.title="Video";f.desc="Video playback";f.widgets=[{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},
{name:"mute",text:"Mute video",type:"button"}];f.prototype.onExecute=function(){if(this.properties.url&&(this.properties.url!=this._video_url&&this.loadVideo(this.properties.url),this._video&&0!=this._video.width)){var a=this.getInputData(0);a&&0<=a&&1>=a&&(this._video.currentTime=a*this._video.duration,this._video.pause());this._video.dirty=!0;this.setOutputData(0,this._video);this.setOutputData(1,this._video.currentTime);this.setOutputData(2,this._video.duration);this.setDirtyCanvas(!0)}};f.prototype.onStart=
function(){this.play()};f.prototype.onStop=function(){this.stop()};f.prototype.loadVideo=function(a){this._video_url=a;this._video=document.createElement("video");this._video.src=a;this._video.type="type=video/mp4";this._video.muted=!0;this._video.autoplay=!0;var b=this;this._video.addEventListener("loadedmetadata",function(a){b.trace("Duration: "+this.duration+" seconds");b.trace("Size: "+this.videoWidth+","+this.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight});
this._video.addEventListener("progress",function(a){});this._video.addEventListener("error",function(a){console.log("Error loading video: "+this.src);b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video.");break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later.");break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}});
this._video.addEventListener("ended",function(a){b.trace("Ended.");this.play()})};f.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadVideo(b);return!0};f.prototype.play=function(){this._video&&this._video.play()};f.prototype.playPause=function(){this._video&&(this._video.paused?this.play():this.pause())};f.prototype.stop=function(){this._video&&(this._video.pause(),this._video.currentTime=0)};f.prototype.pause=function(){this._video&&(this.trace("Video paused"),
this._video.pause())};f.prototype.onWidget=function(a,b){};LiteGraph.registerNodeType("graphics/video",f);g.title="Webcam";g.desc="Webcam image";g.prototype.openStream=function(){function a(c){trace("Webcam rejected",c);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},
this.streamReady.bind(this),a);var b=this}};g.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};g.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();this._video&&this._video.videoWidth&&(this._video.width=this._video.videoWidth,this._video.hieght=this._video.videoHeight,this.setOutputData(0,
this._video))};LiteGraph.registerNodeType("graphics/webcam",g)})();
if("undefined"!=typeof LiteGraph){var LGraphTexture=function(){this.addOutput("Texture","Texture");this.properties={name:""};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexture.title="Texture";LGraphTexture.desc="Texture";LGraphTexture.widgets_info={name:{widget:"texture"}};LGraphTexture.textures_container={};LGraphTexture.loadTextureCallback=null;LGraphTexture.image_preview_size=256;LGraphTexture.PASS_THROUGH=1;LGraphTexture.COPY=2;LGraphTexture.LOW=3;LGraphTexture.HIGH=
4;LGraphTexture.REUSE=5;LGraphTexture.DEFAULT=2;LGraphTexture.MODE_VALUES={"pass through":LGraphTexture.PASS_THROUGH,copy:LGraphTexture.COPY,low:LGraphTexture.LOW,high:LGraphTexture.HIGH,reuse:LGraphTexture.REUSE,"default":LGraphTexture.DEFAULT};LGraphTexture.getTexture=function(a){var b=LGraphTexture.textures_container||gl.textures;if(!b)throw"Cannot load texture, container of textures not found";var c=b[a];if(!c&&a&&":"!=a[0]){if(LGraphTexture.loadTextureCallback)return(b=LGraphTexture.loadTextureCallback)&&
b(a),null;c=a;"http://"==c.substr(0,7)&&LiteGraph.proxy&&(c=LiteGraph.proxy+c.substr(7));c=b[a]=GL.Texture.fromURL(c,{})}return c};LGraphTexture.getTargetTexture=function(a,b,c){if(!a)throw"LGraphTexture.getTargetTexture expects a reference texture";var d=null;switch(c){case LGraphTexture.LOW:d=gl.UNSIGNED_BYTE;break;case LGraphTexture.HIGH:d=gl.HIGH_PRECISION_FORMAT;break;case LGraphTexture.REUSE:return a;default:d=a?a.type:gl.UNSIGNED_BYTE}b&&b.width==a.width&&b.height==a.height&&b.type==d||(b=
new GL.Texture(a.width,a.height,{type:d,format:gl.RGBA,filter:gl.LINEAR}));return b};LGraphTexture.getNoiseTexture=function(){if(this._noise_texture)return this._noise_texture;for(var a=new Uint8Array(1048576),b=0;1048576>b;++b)a[b]=255*Math.random();return this._noise_texture=a=GL.Texture.fromMemory(512,512,a,{format:gl.RGBA,wrap:gl.REPEAT,filter:gl.NEAREST})};LGraphTexture.prototype.onDropFile=function(a,b,c){if(a){var d=null;"string"==typeof a?d=GL.Texture.fromURL(a):-1!=b.toLowerCase().indexOf(".dds")?
d=GL.Texture.fromDDSInMemory(a):(a=new Blob([c]),a=URL.createObjectURL(a),d=GL.Texture.fromURL(a));this._drop_texture=d;this.properties.name=b}else this._drop_texture=null,this.properties.name=""};LGraphTexture.prototype.getExtraMenuOptions=function(a){var b=this;if(this._drop_texture)return[{content:"Clear",callback:function(){b._drop_texture=null;b.properties.name=""}}]};LGraphTexture.prototype.onExecute=function(){if(this._drop_texture)this.setOutputData(0,this._drop_texture);else if(this.properties.name){var a=
LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=a,this.setOutputData(0,a))}};LGraphTexture.prototype.onDrawBackground=function(a){if(!(this.flags.collapsed||20>=this.size[1]))if(this._drop_texture&&a.webgl)a.drawImage(this._drop_texture,0,0,this.size[0],this.size[1]);else{if(this._last_preview_tex!=this._last_tex)if(a.webgl)this._canvas=this._last_tex;else{var b=LGraphTexture.generateLowResTexturePreview(this._last_tex);if(!b)return;this._last_preview_tex=this._last_tex;this._canvas=
cloneCanvas(b)}this._canvas&&(a.save(),a.webgl||(a.translate(0,this.size[1]),a.scale(1,-1)),a.drawImage(this._canvas,0,0,this.size[0],this.size[1]),a.restore())}};LGraphTexture.generateLowResTexturePreview=function(a){if(!a)return null;var b=LGraphTexture.image_preview_size,c=a;if(a.width>b||a.height>b)c=this._preview_temp_tex,this._preview_temp_tex||(this._preview_temp_tex=c=new GL.Texture(b,b,{minFilter:gl.NEAREST})),a.copyTo(c);a=this._preview_canvas;a||(this._preview_canvas=a=createCanvas(b,b));
c&&c.toCanvas(a);return a};LiteGraph.registerNodeType("texture/texture",LGraphTexture);window.LGraphTexture=LGraphTexture;var LGraphTexturePreview=function(){this.addInput("Texture","Texture");this.properties={flipY:!1};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexturePreview.title="Preview";LGraphTexturePreview.desc="Show a texture in the graph canvas";LGraphTexturePreview.prototype.onDrawBackground=function(a){if(!this.flags.collapsed){var b=this.getInputData(0);
if(b){var c=null,c=!b.handle&&a.webgl?b:LGraphTexture.generateLowResTexturePreview(b);a.save();this.properties.flipY&&(a.translate(0,this.size[1]),a.scale(1,-1));a.drawImage(c,0,0,this.size[0],this.size[1]);a.restore()}}};LiteGraph.registerNodeType("texture/preview",LGraphTexturePreview);window.LGraphTexturePreview=LGraphTexturePreview;var LGraphTextureSave=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties={name:""}};LGraphTextureSave.title="Save";LGraphTextureSave.desc=
"Save a texture in the repository";LGraphTextureSave.prototype.onExecute=function(){var a=this.getInputData(0);a&&(this.properties.name&&(LGraphTexture.textures_container[this.properties.name]=a),this.setOutputData(0,a))};LiteGraph.registerNodeType("texture/save",LGraphTextureSave);window.LGraphTextureSave=LGraphTextureSave;var LGraphTextureOperation=function(){this.addInput("Texture","Texture");this.addInput("TextureB","Texture");this.addInput("value","number");this.addOutput("Texture","Texture");
this.help="<p>pixelcode must be vec3</p>\t\t\t<p>uvcode must be vec2, is optional</p>\t\t\t<p><strong>uv:</strong> tex. coords</p><p><strong>color:</strong> texture</p><p><strong>colorB:</strong> textureB</p><p><strong>time:</strong> scene time</p><p><strong>value:</strong> input value</p>";this.properties={value:1,uvcode:"",pixelcode:"color + colorB * value",precision:LGraphTexture.DEFAULT}};LGraphTextureOperation.widgets_info={uvcode:{widget:"textarea",height:100},pixelcode:{widget:"textarea",height:100},
precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureOperation.title="Operation";LGraphTextureOperation.desc="Texture shader operation";LGraphTextureOperation.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else{var b=this.getInputData(1);if(this.properties.uvcode||this.properties.pixelcode){var c=512,d=512;a?(c=a.width,d=a.height):b&&(c=b.width,d=b.height);this._tex=a||this._tex?LGraphTexture.getTargetTexture(a||
this._tex,this._tex,this.properties.precision):new GL.Texture(c,d,{type:this.precision===LGraphTexture.LOW?gl.UNSIGNED_BYTE:gl.HIGH_PRECISION_FORMAT,format:gl.RGBA,filter:gl.LINEAR});var e="";this.properties.uvcode&&(e="uv = "+this.properties.uvcode,-1!=this.properties.uvcode.indexOf(";")&&(e=this.properties.uvcode));var f="";this.properties.pixelcode&&(f="result = "+this.properties.pixelcode,-1!=this.properties.pixelcode.indexOf(";")&&(f=this.properties.pixelcode));var g=this._shader;if(!g||this._shader_code!=
e+"|"+f){try{this._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureOperation.pixel_shader,{UV_CODE:e,PIXEL_CODE:f}),this.boxcolor="#00FF00"}catch(h){console.log("Error compiling shader: ",h);this.boxcolor="#FF0000";return}this._shader_code=e+"|"+f;g=this._shader}if(g){this.boxcolor="green";var l=this.getInputData(2);null!=l?this.properties.value=l:l=parseFloat(this.properties.value);var n=this.graph.getTime();this._tex.drawTo(function(){gl.disable(gl.DEPTH_TEST);gl.disable(gl.CULL_FACE);
gl.disable(gl.BLEND);a&&a.bind(0);b&&b.bind(1);var e=Mesh.getScreenQuad();g.uniforms({u_texture:0,u_textureB:1,value:l,texSize:[c,d],time:n}).draw(e)});this.setOutputData(0,this._tex)}else this.boxcolor="red"}}};LGraphTextureOperation.pixel_shader="precision highp float;\n\t\t\t\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform vec2 texSize;\n\t\t\tuniform float time;\n\t\t\tuniform float value;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 uv = v_coord;\n\t\t\t\tUV_CODE;\n\t\t\t\tvec3 color = texture2D(u_texture, uv).rgb;\n\t\t\t\tvec3 colorB = texture2D(u_textureB, uv).rgb;\n\t\t\t\tvec3 result = color;\n\t\t\t\tfloat alpha = 1.0;\n\t\t\t\tPIXEL_CODE;\n\t\t\t\tgl_FragColor = vec4(result, alpha);\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/operation",LGraphTextureOperation);window.LGraphTextureOperation=LGraphTextureOperation;var LGraphTextureShader=function(){this.addOutput("Texture","Texture");this.properties={code:"",width:512,height:512};this.properties.code="\nvoid main() {\n vec2 uv = coord;\n vec3 color = vec3(0.0);\n//your code here\n\ngl_FragColor = vec4(color, 1.0);\n}\n"};LGraphTextureShader.title="Shader";LGraphTextureShader.desc="Texture shader";LGraphTextureShader.widgets_info={code:{widget:"code"},
precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureShader.prototype.onExecute=function(){if(this._shader_code!=this.properties.code)if(this._shader_code=this.properties.code,this._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureShader.pixel_shader+this.properties.code))this.boxcolor="green";else{this.boxcolor="red";return}this._tex&&this._tex.width==this.properties.width&&this._tex.height==this.properties.height||(this._tex=new GL.Texture(this.properties.width,
this.properties.height,{format:gl.RGBA,filter:gl.LINEAR}));var a=this._tex,b=this._shader,c=this.graph.getTime();a.drawTo(function(){b.uniforms({texSize:[a.width,a.height],time:c}).draw(Mesh.getScreenQuad())});this.setOutputData(0,this._tex)};LGraphTextureShader.pixel_shader="precision highp float;\n\t\t\t\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform float time;\n\t\t\t";LiteGraph.registerNodeType("texture/shader",LGraphTextureShader);window.LGraphTextureShader=LGraphTextureShader;var LGraphTextureToViewport=
function(){this.addInput("Texture","Texture");this.properties={additive:!1,antialiasing:!1,disable_alpha:!1};this.size[0]=130;LGraphTextureToViewport._shader||(LGraphTextureToViewport._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureToViewport.pixel_shader))};LGraphTextureToViewport.title="to Viewport";LGraphTextureToViewport.desc="Texture to viewport";LGraphTextureToViewport.prototype.onExecute=function(){var a=this.getInputData(0);if(a)if(this.properties.disable_alpha?gl.disable(gl.BLEND):
(gl.enable(gl.BLEND),this.properties.additive?gl.blendFunc(gl.SRC_ALPHA,gl.ONE):gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA)),gl.disable(gl.DEPTH_TEST),this.properties.antialiasing){gl.getViewport();var b=Mesh.getScreenQuad();a.bind(0);LGraphTextureToViewport._shader.uniforms({u_texture:0,uViewportSize:[a.width,a.height],inverseVP:[1/a.width,1/a.height]}).draw(b)}else a.toViewport()};LGraphTextureToViewport.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 uViewportSize;\n\t\t\tuniform vec2 inverseVP;\n\t\t\t#define FXAA_REDUCE_MIN (1.0/ 128.0)\n\t\t\t#define FXAA_REDUCE_MUL (1.0 / 8.0)\n\t\t\t#define FXAA_SPAN_MAX 8.0\n\t\t\t\n\t\t\t/* from mitsuhiko/webgl-meincraft based on the code on geeks3d.com */\n\t\t\tvec4 applyFXAA(sampler2D tex, vec2 fragCoord)\n\t\t\t{\n\t\t\t\tvec4 color = vec4(0.0);\n\t\t\t\t/*vec2 inverseVP = vec2(1.0 / uViewportSize.x, 1.0 / uViewportSize.y);*/\n\t\t\t\tvec3 rgbNW = texture2D(tex, (fragCoord + vec2(-1.0, -1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbNE = texture2D(tex, (fragCoord + vec2(1.0, -1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbSW = texture2D(tex, (fragCoord + vec2(-1.0, 1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbSE = texture2D(tex, (fragCoord + vec2(1.0, 1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbM = texture2D(tex, fragCoord * inverseVP).xyz;\n\t\t\t\tvec3 luma = vec3(0.299, 0.587, 0.114);\n\t\t\t\tfloat lumaNW = dot(rgbNW, luma);\n\t\t\t\tfloat lumaNE = dot(rgbNE, luma);\n\t\t\t\tfloat lumaSW = dot(rgbSW, luma);\n\t\t\t\tfloat lumaSE = dot(rgbSE, luma);\n\t\t\t\tfloat lumaM = dot(rgbM, luma);\n\t\t\t\tfloat lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n\t\t\t\tfloat lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n\t\t\t\t\n\t\t\t\tvec2 dir;\n\t\t\t\tdir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n\t\t\t\tdir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n\t\t\t\t\n\t\t\t\tfloat dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n\t\t\t\t\n\t\t\t\tfloat rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n\t\t\t\tdir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), dir * rcpDirMin)) * inverseVP;\n\t\t\t\t\n\t\t\t\tvec3 rgbA = 0.5 * (texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz + \n\t\t\t\t\ttexture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n\t\t\t\tvec3 rgbB = rgbA * 0.5 + 0.25 * (texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz + \n\t\t\t\t\ttexture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n\t\t\t\t\n\t\t\t\treturn vec4(rgbA,1.0);\n\t\t\t\tfloat lumaB = dot(rgbB, luma);\n\t\t\t\tif ((lumaB < lumaMin) || (lumaB > lumaMax))\n\t\t\t\t\tcolor = vec4(rgbA, 1.0);\n\t\t\t\telse\n\t\t\t\t\tcolor = vec4(rgbB, 1.0);\n\t\t\t\treturn color;\n\t\t\t}\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = applyFXAA( u_texture, v_coord * uViewportSize) ;\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/toviewport",LGraphTextureToViewport);window.LGraphTextureToViewport=LGraphTextureToViewport;var LGraphTextureCopy=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties={size:0,generate_mipmaps:!1,precision:LGraphTexture.DEFAULT}};LGraphTextureCopy.title="Copy";LGraphTextureCopy.desc="Copy Texture";LGraphTextureCopy.widgets_info={size:{widget:"combo",values:[0,32,64,128,256,512,1024,2048]},precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};
LGraphTextureCopy.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=a.width,c=a.height;0!=this.properties.size&&(c=b=this.properties.size);var d=this._temp_texture,e=a.type;this.properties.precision===LGraphTexture.LOW?e=gl.UNSIGNED_BYTE:this.properties.precision===LGraphTexture.HIGH&&(e=gl.HIGH_PRECISION_FORMAT);d&&d.width==b&&d.height==c&&d.type==e||(d=gl.LINEAR,this.properties.generate_mipmaps&&isPowerOfTwo(b)&&isPowerOfTwo(c)&&(d=gl.LINEAR_MIPMAP_LINEAR),this._temp_texture=
new GL.Texture(b,c,{type:e,format:gl.RGBA,minFilter:d,magFilter:gl.LINEAR}));a.copyTo(this._temp_texture);this.properties.generate_mipmaps&&(this._temp_texture.bind(0),gl.generateMipmap(this._temp_texture.texture_type),this._temp_texture.unbind(0));this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/copy",LGraphTextureCopy);window.LGraphTextureCopy=LGraphTextureCopy;var LGraphTextureAverage=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties=
{low_precision:!1}};LGraphTextureAverage.title="Average";LGraphTextureAverage.desc="Compute average of a texture and stores it as a texture";LGraphTextureAverage.prototype.onExecute=function(){var a=this.getInputData(0);if(a){if(!LGraphTextureAverage._shader){LGraphTextureAverage._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureAverage.pixel_shader);for(var b=new Float32Array(32),c=0;32>c;++c)b[c]=Math.random();LGraphTextureAverage._shader.uniforms({u_samples_a:b.subarray(0,16),u_samples_b:b.subarray(16,
32)})}b=this._temp_texture;c=this.properties.low_precision?gl.UNSIGNED_BYTE:a.type;b&&b.type==c||(this._temp_texture=new GL.Texture(1,1,{type:c,format:gl.RGBA,filter:gl.NEAREST}));var d=LGraphTextureAverage._shader;this._temp_texture.drawTo(function(){a.toViewport(d,{u_texture:0})});this.setOutputData(0,this._temp_texture)}};LGraphTextureAverage.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tuniform mat4 u_samples_a;\n\t\t\tuniform mat4 u_samples_b;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tvarying vec2 v_coord;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = vec4(0.0);\n\t\t\t\tfor(int i = 0; i < 4; ++i)\n\t\t\t\t\tfor(int j = 0; j < 4; ++j)\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( 1.0 - u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t}\n\t\t\t gl_FragColor = color * 0.03125;\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/average",LGraphTextureAverage);window.LGraphTextureAverage=LGraphTextureAverage;var LGraphImageToTexture=function(){this.addInput("Image","image");this.addOutput("","Texture");this.properties={}};LGraphImageToTexture.title="Image to Texture";LGraphImageToTexture.desc="Uploads an image to the GPU";LGraphImageToTexture.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=a.videoWidth||a.width,c=a.videoHeight||a.height;if(a.gltexture)this.setOutputData(0,
a.gltexture);else{var d=this._temp_texture;d&&d.width==b&&d.height==c||(this._temp_texture=new GL.Texture(b,c,{format:gl.RGBA,filter:gl.LINEAR}));try{this._temp_texture.uploadImage(a)}catch(e){console.error("image comes from an unsafe location, cannot be uploaded to webgl");return}this.setOutputData(0,this._temp_texture)}}};LiteGraph.registerNodeType("texture/imageToTexture",LGraphImageToTexture);window.LGraphImageToTexture=LGraphImageToTexture;var LGraphTextureLUT=function(){this.addInput("Texture",
"Texture");this.addInput("LUT","Texture");this.addInput("Intensity","number");this.addOutput("","Texture");this.properties={intensity:1,precision:LGraphTexture.DEFAULT};LGraphTextureLUT._shader||(LGraphTextureLUT._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureLUT.pixel_shader))};LGraphTextureLUT.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureLUT.title="LUT";LGraphTextureLUT.desc="Apply LUT to Texture";LGraphTextureLUT.prototype.onExecute=function(){var a=
this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){var b=this.getInputData(1);if(b){b.bind(0);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);gl.bindTexture(gl.TEXTURE_2D,null);var c=this.properties.intensity;this.isInputConnected(2)&&(this.properties.intensity=c=this.getInputData(2));this._tex=
LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var d=Mesh.getScreenQuad();this._tex.drawTo(function(){a.bind(0);b.bind(1);LGraphTextureLUT._shader.uniforms({u_texture:0,u_textureB:1,u_amount:c,uViewportSize:[a.width,a.height]}).draw(d)});this.setOutputData(0,this._tex)}else this.setOutputData(0,a)}};LGraphTextureLUT.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform float u_amount;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\t lowp vec4 textureColor = clamp( texture2D(u_texture, v_coord), vec4(0.0), vec4(1.0) );\n\t\t\t\t mediump float blueColor = textureColor.b * 63.0;\n\t\t\t\t mediump vec2 quad1;\n\t\t\t\t quad1.y = floor(floor(blueColor) / 8.0);\n\t\t\t\t quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\t\t\t\t mediump vec2 quad2;\n\t\t\t\t quad2.y = floor(ceil(blueColor) / 8.0);\n\t\t\t\t quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\t\t\t\t highp vec2 texPos1;\n\t\t\t\t texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos1.y = 1.0 - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t highp vec2 texPos2;\n\t\t\t\t texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos2.y = 1.0 - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t lowp vec4 newColor1 = texture2D(u_textureB, texPos1);\n\t\t\t\t lowp vec4 newColor2 = texture2D(u_textureB, texPos2);\n\t\t\t\t lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n\t\t\t\t gl_FragColor = vec4( mix( textureColor.rgb, newColor.rgb, u_amount), textureColor.w);\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/LUT",LGraphTextureLUT);window.LGraphTextureLUT=LGraphTextureLUT;var LGraphTextureChannels=function(){this.addInput("Texture","Texture");this.addOutput("R","Texture");this.addOutput("G","Texture");this.addOutput("B","Texture");this.addOutput("A","Texture");this.properties={};LGraphTextureChannels._shader||(LGraphTextureChannels._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureChannels.pixel_shader))};LGraphTextureChannels.title="Channels";LGraphTextureChannels.desc=
"Split texture channels";LGraphTextureChannels.prototype.onExecute=function(){var a=this.getInputData(0);if(a){this._channels||(this._channels=Array(4));for(var b=0,c=0;4>c;c++)this.isOutputConnected(c)?(this._channels[c]&&this._channels[c].width==a.width&&this._channels[c].height==a.height&&this._channels[c].type==a.type||(this._channels[c]=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR})),b++):this._channels[c]=null;if(b){gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);
for(var d=Mesh.getScreenQuad(),e=LGraphTextureChannels._shader,f=[[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]],c=0;4>c;c++)this._channels[c]&&(this._channels[c].drawTo(function(){a.bind(0);e.uniforms({u_texture:0,u_mask:f[c]}).draw(d)}),this.setOutputData(c,this._channels[c]))}}};LGraphTextureChannels.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec4 u_mask;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = vec4( vec3( length( texture2D(u_texture, v_coord) * u_mask )), 1.0 );\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/channels",LGraphTextureChannels);window.LGraphTextureChannels=LGraphTextureChannels;var LGraphTextureMix=function(){this.addInput("A","Texture");this.addInput("B","Texture");this.addInput("Mixer","Texture");this.addOutput("Texture","Texture");this.properties={precision:LGraphTexture.DEFAULT};LGraphTextureMix._shader||(LGraphTextureMix._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureMix.pixel_shader))};LGraphTextureMix.title="Mix";LGraphTextureMix.desc=
"Generates a texture mixing two textures";LGraphTextureMix.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureMix.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else{var b=this.getInputData(1),c=this.getInputData(2);if(a&&b&&c){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var d=Mesh.getScreenQuad(),
e=LGraphTextureMix._shader;this._tex.drawTo(function(){a.bind(0);b.bind(1);c.bind(2);e.uniforms({u_textureA:0,u_textureB:1,u_textureMix:2}).draw(d)});this.setOutputData(0,this._tex)}}};LGraphTextureMix.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_textureA;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform sampler2D u_textureMix;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = mix( texture2D(u_textureA, v_coord), texture2D(u_textureB, v_coord), texture2D(u_textureMix, v_coord) );\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/mix",LGraphTextureMix);window.LGraphTextureMix=LGraphTextureMix;var LGraphTextureEdges=function(){this.addInput("Tex.","Texture");this.addOutput("Edges","Texture");this.properties={invert:!0,precision:LGraphTexture.DEFAULT};LGraphTextureEdges._shader||(LGraphTextureEdges._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureEdges.pixel_shader))};LGraphTextureEdges.title="Edges";LGraphTextureEdges.desc="Detects edges";LGraphTextureEdges.widgets_info={precision:{widget:"combo",
values:LGraphTexture.MODE_VALUES}};LGraphTextureEdges.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var b=Mesh.getScreenQuad(),c=LGraphTextureEdges._shader,d=this.properties.invert;this._tex.drawTo(function(){a.bind(0);c.uniforms({u_texture:0,u_isize:[1/a.width,1/a.height],
u_invert:d?1:0}).draw(b)});this.setOutputData(0,this._tex)}};LGraphTextureEdges.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_isize;\n\t\t\tuniform int u_invert;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 center = texture2D(u_texture, v_coord);\n\t\t\t\tvec4 up = texture2D(u_texture, v_coord + u_isize * vec2(0.0,1.0) );\n\t\t\t\tvec4 down = texture2D(u_texture, v_coord + u_isize * vec2(0.0,-1.0) );\n\t\t\t\tvec4 left = texture2D(u_texture, v_coord + u_isize * vec2(1.0,0.0) );\n\t\t\t\tvec4 right = texture2D(u_texture, v_coord + u_isize * vec2(-1.0,0.0) );\n\t\t\t\tvec4 diff = abs(center - up) + abs(center - down) + abs(center - left) + abs(center - right);\n\t\t\t\tif(u_invert == 1)\n\t\t\t\t\tdiff.xyz = vec3(1.0) - diff.xyz;\n\t\t\t gl_FragColor = vec4( diff.xyz, center.a );\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/edges",LGraphTextureEdges);window.LGraphTextureEdges=LGraphTextureEdges;var LGraphTextureDepthRange=function(){this.addInput("Texture","Texture");this.addInput("Distance","number");this.addInput("Range","number");this.addOutput("Texture","Texture");this.properties={distance:100,range:50,high_precision:!1};LGraphTextureDepthRange._shader||(LGraphTextureDepthRange._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureDepthRange.pixel_shader))};LGraphTextureDepthRange.title=
"Depth Range";LGraphTextureDepthRange.desc="Generates a texture with a depth range";LGraphTextureDepthRange.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=gl.UNSIGNED_BYTE;this.properties.high_precision&&(b=gl.half_float_ext?gl.HALF_FLOAT_OES:gl.FLOAT);this._temp_texture&&this._temp_texture.type==b&&this._temp_texture.width==a.width&&this._temp_texture.height==a.height||(this._temp_texture=new GL.Texture(a.width,a.height,{type:b,format:gl.RGBA,filter:gl.LINEAR}));var c=this.properties.distance;
this.isInputConnected(1)&&(c=this.getInputData(1),this.properties.distance=c);var d=this.properties.range;this.isInputConnected(2)&&(d=this.getInputData(2),this.properties.range=d);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var e=Mesh.getScreenQuad(),f=LGraphTextureDepthRange._shader;this._temp_texture.drawTo(function(){a.bind(0);f.uniforms({u_texture:0,u_distance:c,u_range:d,u_camera_planes:[Renderer._current_camera.near,Renderer._current_camera.far]}).draw(e)});this.setOutputData(0,this._temp_texture)}};
LGraphTextureDepthRange.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform float u_distance;\n\t\t\tuniform float u_range;\n\t\t\t\n\t\t\tfloat LinearDepth()\n\t\t\t{\n\t\t\t\tfloat n = u_camera_planes.x;\n\t\t\t\tfloat f = u_camera_planes.y;\n\t\t\t\treturn (2.0 * n) / (f + n - texture2D(u_texture, v_coord).x * (f - n));\n\t\t\t}\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tfloat diff = abs(LinearDepth() * u_camera_planes.y - u_distance);\n\t\t\t\tfloat dof = 1.0;\n\t\t\t\tif(diff <= u_range)\n\t\t\t\t\tdof = diff / u_range;\n\t\t\t gl_FragColor = vec4(dof);\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/depth_range",LGraphTextureDepthRange);window.LGraphTextureDepthRange=LGraphTextureDepthRange;var LGraphTextureBlur=function(){this.addInput("Texture","Texture");this.addInput("Iterations","number");this.addInput("Intensity","number");this.addOutput("Blurred","Texture");this.properties={intensity:1,iterations:1,preserve_aspect:!1,scale:[1,1]};LGraphTextureBlur._shader||(LGraphTextureBlur._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureBlur.pixel_shader))};
LGraphTextureBlur.title="Blur";LGraphTextureBlur.desc="Blur a texture";LGraphTextureBlur.max_iterations=20;LGraphTextureBlur.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=this._temp_texture;b&&b.width==a.width&&b.height==a.height&&b.type==a.type||(this._temp_texture=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR}),this._final_texture=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR}));b=this.properties.iterations;this.isInputConnected(1)&&
(b=this.getInputData(1),this.properties.iterations=b);b=Math.min(Math.floor(b),LGraphTextureBlur.max_iterations);if(0==b)this.setOutputData(0,a);else{var c=this.properties.intensity;this.isInputConnected(2)&&(c=this.getInputData(2),this.properties.intensity=c);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var d=Mesh.getScreenQuad(),e=LGraphTextureBlur._shader,f=this.properties.scale||[1,1],g=LiteGraph.aspect;g||void 0===window.gl||(g=gl.canvas.height/gl.canvas.width);void 0!==window.Renderer&&(g=
window.Renderer._current_camera.aspect);g||(g=1);for(var h=a,g=this.properties.preserve_aspect?g:1,a=0;a<b;++a)this._temp_texture.drawTo(function(){h.bind(0);e.uniforms({u_texture:0,u_intensity:1,u_offset:[0,1/h.height*f[1]]}).draw(d)}),this._temp_texture.bind(0),this._final_texture.drawTo(function(){e.uniforms({u_texture:0,u_intensity:c,u_offset:[g/h.width*f[0],0]}).draw(d)}),h=this._final_texture;this.setOutputData(0,this._final_texture)}}};LGraphTextureBlur.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_offset;\n\t\t\tuniform float u_intensity;\n\t\t\tvoid main() {\n\t\t\t vec4 sum = vec4(0.0);\n\t\t\t vec4 center = texture2D(u_texture, v_coord);\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -4.0) * 0.05/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -3.0) * 0.09/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -2.0) * 0.12/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -1.0) * 0.15/0.98;\n\t\t\t sum += center * 0.16/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 4.0) * 0.05/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 3.0) * 0.09/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 2.0) * 0.12/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 1.0) * 0.15/0.98;\n\t\t\t gl_FragColor = u_intensity * sum;\n\t\t\t /*gl_FragColor.a = center.a*/;\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("texture/blur",LGraphTextureBlur);window.LGraphTextureBlur=LGraphTextureBlur;var LGraphTextureWebcam=function(){this.addOutput("Webcam","Texture");this.properties={}};LGraphTextureWebcam.title="Webcam";LGraphTextureWebcam.desc="Webcam texture";LGraphTextureWebcam.prototype.openStream=function(){function a(a){trace("Webcam rejected",a);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||
navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},this.streamReady.bind(this),a);var b=this}};LGraphTextureWebcam.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};LGraphTextureWebcam.prototype.onDrawBackground=function(a){!this.flags.collapsed||
20>=this.size[1]||!this._video||(a.save(),a.webgl||(a.translate(0,this.size[1]),a.scale(1,-1)),a.drawImage(this._video,0,0,this.size[0],this.size[1]),a.restore())};LGraphTextureWebcam.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();if(this._video&&this._video.videoWidth){var a=this._video.videoWidth,b=this._video.videoHeight,c=this._temp_texture;c&&c.width==a&&c.height==b||(this._temp_texture=new GL.Texture(a,b,{format:gl.RGB,filter:gl.LINEAR}));
this._temp_texture.uploadImage(this._video);this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/webcam",LGraphTextureWebcam);window.LGraphTextureWebcam=LGraphTextureWebcam;var LGraphCubemap=function(){this.addOutput("Cubemap","Cubemap");this.properties={name:""};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphCubemap.prototype.onDropFile=function(a,b,c){a?(this._drop_texture="string"==typeof a?GL.Texture.fromURL(a):GL.Texture.fromDDSInMemory(a),
this.properties.name=b):(this._drop_texture=null,this.properties.name="")};LGraphCubemap.prototype.onExecute=function(){if(this._drop_texture)this.setOutputData(0,this._drop_texture);else if(this.properties.name){var a=LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=a,this.setOutputData(0,a))}};LGraphCubemap.prototype.onDrawBackground=function(a){this.flags.collapsed||20>=this.size[1]||a.webgl&&(gl.meshes.cube||(gl.meshes.cube=GL.Mesh.cube({size:1})))};LiteGraph.registerNodeType("texture/cubemap",
LGraphCubemap);window.LGraphCubemap=LGraphCubemap}
if("undefined"!=typeof LiteGraph){var LGraphFXLens=function(){this.addInput("Texture","Texture");this.addInput("Aberration","number");this.addInput("Distortion","number");this.addInput("Blur","number");this.addOutput("Texture","Texture");this.properties={aberration:1,distortion:1,blur:1,precision:LGraphTexture.DEFAULT};LGraphFXLens._shader||(LGraphFXLens._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphFXLens.pixel_shader))};LGraphFXLens.title="Lens";LGraphFXLens.desc="Camera Lens distortion";
LGraphFXLens.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphFXLens.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var b=this.properties.aberration;this.isInputConnected(1)&&(b=this.getInputData(1),this.properties.aberration=b);var c=this.properties.distortion;this.isInputConnected(2)&&
(c=this.getInputData(2),this.properties.distortion=c);var d=this.properties.blur;this.isInputConnected(3)&&(d=this.getInputData(3),this.properties.blur=d);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var e=Mesh.getScreenQuad(),f=LGraphFXLens._shader;this._tex.drawTo(function(){a.bind(0);f.uniforms({u_texture:0,u_aberration:b,u_distortion:c,u_blur:d}).draw(e)});this.setOutputData(0,this._tex)}};LGraphFXLens.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform float u_aberration;\n\t\t\tuniform float u_distortion;\n\t\t\tuniform float u_blur;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 coord = v_coord;\n\t\t\t\tfloat dist = distance(vec2(0.5), coord);\n\t\t\t\tvec2 dist_coord = coord - vec2(0.5);\n\t\t\t\tfloat percent = 1.0 + ((0.5 - dist) / 0.5) * u_distortion;\n\t\t\t\tdist_coord *= percent;\n\t\t\t\tcoord = dist_coord + vec2(0.5);\n\t\t\t\tvec4 color = texture2D(u_texture,coord, u_blur * dist);\n\t\t\t\tcolor.r = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0+0.01*u_aberration), u_blur * dist ).r;\n\t\t\t\tcolor.b = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0-0.01*u_aberration), u_blur * dist ).b;\n\t\t\t\tgl_FragColor = color;\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("fx/lens",LGraphFXLens);window.LGraphFXLens=LGraphFXLens;var LGraphFXBokeh=function(){this.addInput("Texture","Texture");this.addInput("Blurred","Texture");this.addInput("Mask","Texture");this.addInput("Threshold","number");this.addOutput("Texture","Texture");this.properties={shape:"",size:10,alpha:1,threshold:1,high_precision:!1}};LGraphFXBokeh.title="Bokeh";LGraphFXBokeh.desc="applies an Bokeh effect";LGraphFXBokeh.widgets_info={shape:{widget:"texture"}};LGraphFXBokeh.prototype.onExecute=
function(){var a=this.getInputData(0),b=this.getInputData(1),c=this.getInputData(2);if(a&&c&&this.properties.shape){b||(b=a);var d=LGraphTexture.getTexture(this.properties.shape);if(d){var e=this.properties.threshold;this.isInputConnected(3)&&(e=this.getInputData(3),this.properties.threshold=e);var f=gl.UNSIGNED_BYTE;this.properties.high_precision&&(f=gl.half_float_ext?gl.HALF_FLOAT_OES:gl.FLOAT);this._temp_texture&&this._temp_texture.type==f&&this._temp_texture.width==a.width&&this._temp_texture.height==
a.height||(this._temp_texture=new GL.Texture(a.width,a.height,{type:f,format:gl.RGBA,filter:gl.LINEAR}));var g=LGraphFXBokeh._first_shader;g||(g=LGraphFXBokeh._first_shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphFXBokeh._first_pixel_shader));var h=LGraphFXBokeh._second_shader;h||(h=LGraphFXBokeh._second_shader=new GL.Shader(LGraphFXBokeh._second_vertex_shader,LGraphFXBokeh._second_pixel_shader));var l=this._points_mesh;l&&l._width==a.width&&l._height==a.height&&2==l._spacing||(l=this.createPointsMesh(a.width,
a.height,2));var n=Mesh.getScreenQuad(),k=this.properties.size,p=this.properties.alpha;gl.disable(gl.DEPTH_TEST);gl.disable(gl.BLEND);this._temp_texture.drawTo(function(){a.bind(0);b.bind(1);c.bind(2);g.uniforms({u_texture:0,u_texture_blur:1,u_mask:2,u_texsize:[a.width,a.height]}).draw(n)});this._temp_texture.drawTo(function(){gl.enable(gl.BLEND);gl.blendFunc(gl.ONE,gl.ONE);a.bind(0);d.bind(3);h.uniforms({u_texture:0,u_mask:2,u_shape:3,u_alpha:p,u_threshold:e,u_pointSize:k,u_itexsize:[1/a.width,1/
a.height]}).draw(l,gl.POINTS)});this.setOutputData(0,this._temp_texture)}}else this.setOutputData(0,a)};LGraphFXBokeh.prototype.createPointsMesh=function(a,b,c){for(var d=Math.round(a/c),e=Math.round(b/c),f=new Float32Array(d*e*2),g=-1,h=2/a*c,l=2/b*c,n=0;n<e;++n){for(var k=-1,p=0;p<d;++p){var q=n*d*2+2*p;f[q]=k;f[q+1]=g;k+=h}g+=l}this._points_mesh=GL.Mesh.load({vertices2D:f});this._points_mesh._width=a;this._points_mesh._height=b;this._points_mesh._spacing=c;return this._points_mesh};LGraphFXBokeh._first_pixel_shader=
"precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_texture_blur;\n\t\t\tuniform sampler2D u_mask;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = texture2D(u_texture, v_coord);\n\t\t\t\tvec4 blurred_color = texture2D(u_texture_blur, v_coord);\n\t\t\t\tfloat mask = texture2D(u_mask, v_coord).x;\n\t\t\t gl_FragColor = mix(color, blurred_color, mask);\n\t\t\t}\n\t\t\t";LGraphFXBokeh._second_vertex_shader=
"precision highp float;\n\t\t\tattribute vec2 a_vertex2D;\n\t\t\tvarying vec4 v_color;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_mask;\n\t\t\tuniform vec2 u_itexsize;\n\t\t\tuniform float u_pointSize;\n\t\t\tuniform float u_threshold;\n\t\t\tvoid main() {\n\t\t\t\tvec2 coord = a_vertex2D * 0.5 + 0.5;\n\t\t\t\tv_color = texture2D( u_texture, coord );\n\t\t\t\tv_color += texture2D( u_texture, coord + vec2(u_itexsize.x, 0.0) );\n\t\t\t\tv_color += texture2D( u_texture, coord + vec2(0.0, u_itexsize.y));\n\t\t\t\tv_color += texture2D( u_texture, coord + u_itexsize);\n\t\t\t\tv_color *= 0.25;\n\t\t\t\tfloat mask = texture2D(u_mask, coord).x;\n\t\t\t\tfloat luminance = length(v_color) * mask;\n\t\t\t\t/*luminance /= (u_pointSize*u_pointSize)*0.01 */;\n\t\t\t\tluminance -= u_threshold;\n\t\t\t\tif(luminance < 0.0)\n\t\t\t\t{\n\t\t\t\t\tgl_Position.x = -100.0;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tgl_PointSize = u_pointSize;\n\t\t\t\tgl_Position = vec4(a_vertex2D,0.0,1.0);\n\t\t\t}\n\t\t\t";
LGraphFXBokeh._second_pixel_shader="precision highp float;\n\t\t\tvarying vec4 v_color;\n\t\t\tuniform sampler2D u_shape;\n\t\t\tuniform float u_alpha;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = texture2D( u_shape, gl_PointCoord );\n\t\t\t\tcolor *= v_color * u_alpha;\n\t\t\t\tgl_FragColor = color;\n\t\t\t}\n";LiteGraph.registerNodeType("fx/bokeh",LGraphFXBokeh);window.LGraphFXBokeh=LGraphFXBokeh;var LGraphFXGeneric=function(){this.addInput("Texture","Texture");this.addInput("value1","number");
this.addInput("value2","number");this.addOutput("Texture","Texture");this.properties={fx:"halftone",value1:1,value2:1,precision:LGraphTexture.DEFAULT}};LGraphFXGeneric.title="FX";LGraphFXGeneric.desc="applies an FX from a list";LGraphFXGeneric.widgets_info={fx:{widget:"combo",values:["halftone","pixelate","lowpalette","noise"]},precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphFXGeneric.shaders={};LGraphFXGeneric.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===
LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var b=this.properties.value1;this.isInputConnected(1)&&(b=this.getInputData(1),this.properties.value1=b);var c=this.properties.value2;this.isInputConnected(2)&&(c=this.getInputData(2),this.properties.value2=c);var d=this.properties.fx,e=LGraphFXGeneric.shaders[d];if(!e){var f=LGraphFXGeneric["pixel_shader_"+d];if(!f)return;e=LGraphFXGeneric.shaders[d]=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,
f)}gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var g=Mesh.getScreenQuad(),h=null;"noise"==d&&(h=LGraphTexture.getNoiseTexture());this._tex.drawTo(function(){a.bind(0);"noise"==d&&h.bind(1);e.uniforms({u_texture:0,u_noise:1,u_size:[a.width,a.height],u_rand:[Math.random(),Math.random()],u_value1:b,u_value2:c,u_camera_planes:[Renderer._current_camera.near,Renderer._current_camera.far]}).draw(g)});this.setOutputData(0,this._tex)}};LGraphFXGeneric.pixel_shader_halftone="precision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform vec2 u_size;\n\t\t\tuniform float u_value1;\n\t\t\tuniform float u_value2;\n\t\t\t\n\t\t\tfloat pattern() {\n\t\t\t\tfloat s = sin(u_value1 * 3.1415), c = cos(u_value1 * 3.1415);\n\t\t\t\tvec2 tex = v_coord * u_size.xy;\n\t\t\t\tvec2 point = vec2(\n\t\t\t\t c * tex.x - s * tex.y ,\n\t\t\t\t s * tex.x + c * tex.y \n\t\t\t\t) * u_value2;\n\t\t\t\treturn (sin(point.x) * sin(point.y)) * 4.0;\n\t\t\t}\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = texture2D(u_texture, v_coord);\n\t\t\t\tfloat average = (color.r + color.g + color.b) / 3.0;\n\t\t\t\tgl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);\n\t\t\t}\n";
LGraphFXGeneric.pixel_shader_pixelate="precision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform vec2 u_size;\n\t\t\tuniform float u_value1;\n\t\t\tuniform float u_value2;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 coord = vec2( floor(v_coord.x * u_value1) / u_value1, floor(v_coord.y * u_value2) / u_value2 );\n\t\t\t\tvec4 color = texture2D(u_texture, coord);\n\t\t\t\tgl_FragColor = color;\n\t\t\t}\n";LGraphFXGeneric.pixel_shader_lowpalette=
"precision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform vec2 u_size;\n\t\t\tuniform float u_value1;\n\t\t\tuniform float u_value2;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = texture2D(u_texture, v_coord);\n\t\t\t\tgl_FragColor = floor(color * u_value1) / u_value1;\n\t\t\t}\n";LGraphFXGeneric.pixel_shader_noise="precision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_noise;\n\t\t\tuniform vec2 u_size;\n\t\t\tuniform float u_value1;\n\t\t\tuniform float u_value2;\n\t\t\tuniform vec2 u_rand;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = texture2D(u_texture, v_coord);\n\t\t\t\tvec3 noise = texture2D(u_noise, v_coord * vec2(u_size.x / 512.0, u_size.y / 512.0) + u_rand).xyz - vec3(0.5);\n\t\t\t\tgl_FragColor = vec4( color.xyz + noise * u_value1, color.a );\n\t\t\t}\n";
LiteGraph.registerNodeType("fx/generic",LGraphFXGeneric);window.LGraphFXGeneric=LGraphFXGeneric;var LGraphFXVigneting=function(){this.addInput("Tex.","Texture");this.addInput("intensity","number");this.addOutput("Texture","Texture");this.properties={intensity:1,invert:!1,precision:LGraphTexture.DEFAULT};LGraphFXVigneting._shader||(LGraphFXVigneting._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphFXVigneting.pixel_shader))};LGraphFXVigneting.title="Vigneting";LGraphFXVigneting.desc="Vigneting";
LGraphFXVigneting.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphFXVigneting.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var b=this.properties.intensity;this.isInputConnected(1)&&(b=this.getInputData(1),this.properties.intensity=b);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var c=
Mesh.getScreenQuad(),d=LGraphFXVigneting._shader,e=this.properties.invert;this._tex.drawTo(function(){a.bind(0);d.uniforms({u_texture:0,u_intensity:b,u_isize:[1/a.width,1/a.height],u_invert:e?1:0}).draw(c)});this.setOutputData(0,this._tex)}};LGraphFXVigneting.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform float u_intensity;\n\t\t\tuniform int u_invert;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tfloat luminance = 1.0 - length( v_coord - vec2(0.5) ) * 1.414;\n\t\t\t\tvec4 color = texture2D(u_texture, v_coord);\n\t\t\t\tif(u_invert == 1)\n\t\t\t\t\tluminance = 1.0 - luminance;\n\t\t\t\tluminance = mix(1.0, luminance, u_intensity);\n\t\t\t gl_FragColor = vec4( luminance * color.xyz, color.a);\n\t\t\t}\n\t\t\t";
LiteGraph.registerNodeType("fx/vigneting",LGraphFXVigneting);window.LGraphFXVigneting=LGraphFXVigneting};

3
css/litegraph.css
View File

@@ -13,10 +13,13 @@
}
.litemenu-entry {
box-sizing: border-box;
margin: 2px;
padding-left: 20px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
transition: * linear 0.5s;
}
.litemenu-entry.disabled {

36
demo/demo.js
View File

@@ -1,39 +1,3 @@
/* EXAMPLE ***************************
reModular.registerModuleType("name", {
title: "",
desc: "",
inputs: [["","type"]],
outputs: [["","type"]],
properties: {"varname":""},
widgets: [{name:"name",text:"text to show",type:"button"}],
size: [200,220],
onLoad: function()
{
},
onDrawBackground: function(ctx)
{
if(this.img)
ctx.drawImage(this.img, 0,20,this.size[0],this.size[1]-20);
},
onExecute: function()
{
this.img = this.getInputData(0);
reModular.dirty_canvas = true;
},
onPropertyChange: function(name,value)
{
this.properties[name] = value;
return true; //block default behaviour
},
onWidget: function(e,widget)
{
if(widget.name == "resize")
{
}
},
});
*/
function demo()
{

48
doc/classes/LGraph.html
View File

@@ -96,7 +96,7 @@
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l227"><code>..&#x2F;src&#x2F;litegraph.js:227</code></a>
Defined in: <a href="../files/.._src_litegraph.js.html#l231"><code>..&#x2F;src&#x2F;litegraph.js:231</code></a>
</div>
@@ -147,7 +147,7 @@
<a href="../files/.._src_litegraph.js.html#l227"><code>..&#x2F;src&#x2F;litegraph.js:227</code></a>
<a href="../files/.._src_litegraph.js.html#l231"><code>..&#x2F;src&#x2F;litegraph.js:231</code></a>
</p>
@@ -405,7 +405,7 @@
<a href="../files/.._src_litegraph.js.html#l582"><code>..&#x2F;src&#x2F;litegraph.js:582</code></a>
<a href="../files/.._src_litegraph.js.html#l586"><code>..&#x2F;src&#x2F;litegraph.js:586</code></a>
</p>
@@ -494,7 +494,7 @@
<a href="../files/.._src_litegraph.js.html#l296"><code>..&#x2F;src&#x2F;litegraph.js:296</code></a>
<a href="../files/.._src_litegraph.js.html#l300"><code>..&#x2F;src&#x2F;litegraph.js:300</code></a>
</p>
@@ -572,7 +572,7 @@
<a href="../files/.._src_litegraph.js.html#l251"><code>..&#x2F;src&#x2F;litegraph.js:251</code></a>
<a href="../files/.._src_litegraph.js.html#l255"><code>..&#x2F;src&#x2F;litegraph.js:255</code></a>
</p>
@@ -637,7 +637,7 @@
<a href="../files/.._src_litegraph.js.html#l1018"><code>..&#x2F;src&#x2F;litegraph.js:1018</code></a>
<a href="../files/.._src_litegraph.js.html#l1051"><code>..&#x2F;src&#x2F;litegraph.js:1051</code></a>
</p>
@@ -726,7 +726,7 @@
<a href="../files/.._src_litegraph.js.html#l315"><code>..&#x2F;src&#x2F;litegraph.js:315</code></a>
<a href="../files/.._src_litegraph.js.html#l319"><code>..&#x2F;src&#x2F;litegraph.js:319</code></a>
</p>
@@ -818,7 +818,7 @@
<a href="../files/.._src_litegraph.js.html#l726"><code>..&#x2F;src&#x2F;litegraph.js:726</code></a>
<a href="../files/.._src_litegraph.js.html#l730"><code>..&#x2F;src&#x2F;litegraph.js:730</code></a>
</p>
@@ -925,7 +925,7 @@
<a href="../files/.._src_litegraph.js.html#l710"><code>..&#x2F;src&#x2F;litegraph.js:710</code></a>
<a href="../files/.._src_litegraph.js.html#l714"><code>..&#x2F;src&#x2F;litegraph.js:714</code></a>
</p>
@@ -1022,7 +1022,7 @@
<a href="../files/.._src_litegraph.js.html#l542"><code>..&#x2F;src&#x2F;litegraph.js:542</code></a>
<a href="../files/.._src_litegraph.js.html#l546"><code>..&#x2F;src&#x2F;litegraph.js:546</code></a>
</p>
@@ -1096,7 +1096,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l531"><code>..&#x2F;src&#x2F;litegraph.js:531</code></a>
<a href="../files/.._src_litegraph.js.html#l535"><code>..&#x2F;src&#x2F;litegraph.js:535</code></a>
</p>
@@ -1175,7 +1175,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l697"><code>..&#x2F;src&#x2F;litegraph.js:697</code></a>
<a href="../files/.._src_litegraph.js.html#l701"><code>..&#x2F;src&#x2F;litegraph.js:701</code></a>
</p>
@@ -1279,7 +1279,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l742"><code>..&#x2F;src&#x2F;litegraph.js:742</code></a>
<a href="../files/.._src_litegraph.js.html#l746"><code>..&#x2F;src&#x2F;litegraph.js:746</code></a>
</p>
@@ -1408,7 +1408,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l520"><code>..&#x2F;src&#x2F;litegraph.js:520</code></a>
<a href="../files/.._src_litegraph.js.html#l524"><code>..&#x2F;src&#x2F;litegraph.js:524</code></a>
</p>
@@ -1477,7 +1477,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l952"><code>..&#x2F;src&#x2F;litegraph.js:952</code></a>
<a href="../files/.._src_litegraph.js.html#l985"><code>..&#x2F;src&#x2F;litegraph.js:985</code></a>
</p>
@@ -1542,7 +1542,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l631"><code>..&#x2F;src&#x2F;litegraph.js:631</code></a>
<a href="../files/.._src_litegraph.js.html#l635"><code>..&#x2F;src&#x2F;litegraph.js:635</code></a>
</p>
@@ -1631,7 +1631,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l378"><code>..&#x2F;src&#x2F;litegraph.js:378</code></a>
<a href="../files/.._src_litegraph.js.html#l382"><code>..&#x2F;src&#x2F;litegraph.js:382</code></a>
</p>
@@ -1726,7 +1726,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l554"><code>..&#x2F;src&#x2F;litegraph.js:554</code></a>
<a href="../files/.._src_litegraph.js.html#l558"><code>..&#x2F;src&#x2F;litegraph.js:558</code></a>
</p>
@@ -1825,7 +1825,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l985"><code>..&#x2F;src&#x2F;litegraph.js:985</code></a>
<a href="../files/.._src_litegraph.js.html#l1018"><code>..&#x2F;src&#x2F;litegraph.js:1018</code></a>
</p>
@@ -1910,7 +1910,7 @@ if the nodes are using graphical actions</p>
<a href="../files/.._src_litegraph.js.html#l900"><code>..&#x2F;src&#x2F;litegraph.js:900</code></a>
<a href="../files/.._src_litegraph.js.html#l933"><code>..&#x2F;src&#x2F;litegraph.js:933</code></a>
</p>
@@ -2020,7 +2020,7 @@ can be easily accesed from the outside of the graph</p>
<a href="../files/.._src_litegraph.js.html#l915"><code>..&#x2F;src&#x2F;litegraph.js:915</code></a>
<a href="../files/.._src_litegraph.js.html#l948"><code>..&#x2F;src&#x2F;litegraph.js:948</code></a>
</p>
@@ -2123,7 +2123,7 @@ can be easily accesed from the outside of the graph</p>
<a href="../files/.._src_litegraph.js.html#l329"><code>..&#x2F;src&#x2F;litegraph.js:329</code></a>
<a href="../files/.._src_litegraph.js.html#l333"><code>..&#x2F;src&#x2F;litegraph.js:333</code></a>
</p>
@@ -2202,7 +2202,7 @@ can be easily accesed from the outside of the graph</p>
<a href="../files/.._src_litegraph.js.html#l356"><code>..&#x2F;src&#x2F;litegraph.js:356</code></a>
<a href="../files/.._src_litegraph.js.html#l360"><code>..&#x2F;src&#x2F;litegraph.js:360</code></a>
</p>
@@ -2257,7 +2257,7 @@ can be easily accesed from the outside of the graph</p>
<a href="../files/.._src_litegraph.js.html#l422"><code>..&#x2F;src&#x2F;litegraph.js:422</code></a>
<a href="../files/.._src_litegraph.js.html#l426"><code>..&#x2F;src&#x2F;litegraph.js:426</code></a>
</p>

20
doc/classes/LGraphCanvas.html
View File

@@ -96,7 +96,7 @@
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l2278"><code>..&#x2F;src&#x2F;litegraph.js:2278</code></a>
Defined in: <a href="../files/.._src_litegraph.js.html#l2369"><code>..&#x2F;src&#x2F;litegraph.js:2369</code></a>
</div>
@@ -163,7 +163,7 @@
<a href="../files/.._src_litegraph.js.html#l2278"><code>..&#x2F;src&#x2F;litegraph.js:2278</code></a>
<a href="../files/.._src_litegraph.js.html#l2369"><code>..&#x2F;src&#x2F;litegraph.js:2369</code></a>
</p>
@@ -353,7 +353,7 @@
<a href="../files/.._src_litegraph.js.html#l2032"><code>..&#x2F;src&#x2F;litegraph.js:2032</code></a>
<a href="../files/.._src_litegraph.js.html#l2047"><code>..&#x2F;src&#x2F;litegraph.js:2047</code></a>
</p>
@@ -418,7 +418,7 @@
<a href="../files/.._src_litegraph.js.html#l2141"><code>..&#x2F;src&#x2F;litegraph.js:2141</code></a>
<a href="../files/.._src_litegraph.js.html#l2156"><code>..&#x2F;src&#x2F;litegraph.js:2156</code></a>
</p>
@@ -501,7 +501,7 @@
<a href="../files/.._src_litegraph.js.html#l2294"><code>..&#x2F;src&#x2F;litegraph.js:2294</code></a>
<a href="../files/.._src_litegraph.js.html#l2385"><code>..&#x2F;src&#x2F;litegraph.js:2385</code></a>
</p>
@@ -580,7 +580,7 @@
<a href="../files/.._src_litegraph.js.html#l2114"><code>..&#x2F;src&#x2F;litegraph.js:2114</code></a>
<a href="../files/.._src_litegraph.js.html#l2129"><code>..&#x2F;src&#x2F;litegraph.js:2129</code></a>
</p>
@@ -668,7 +668,7 @@
<a href="../files/.._src_litegraph.js.html#l2156"><code>..&#x2F;src&#x2F;litegraph.js:2156</code></a>
<a href="../files/.._src_litegraph.js.html#l2171"><code>..&#x2F;src&#x2F;litegraph.js:2171</code></a>
</p>
@@ -757,7 +757,7 @@
<a href="../files/.._src_litegraph.js.html#l2086"><code>..&#x2F;src&#x2F;litegraph.js:2086</code></a>
<a href="../files/.._src_litegraph.js.html#l2101"><code>..&#x2F;src&#x2F;litegraph.js:2101</code></a>
</p>
@@ -835,7 +835,7 @@
<a href="../files/.._src_litegraph.js.html#l2306"><code>..&#x2F;src&#x2F;litegraph.js:2306</code></a>
<a href="../files/.._src_litegraph.js.html#l2397"><code>..&#x2F;src&#x2F;litegraph.js:2397</code></a>
</p>
@@ -890,7 +890,7 @@
<a href="../files/.._src_litegraph.js.html#l2337"><code>..&#x2F;src&#x2F;litegraph.js:2337</code></a>
<a href="../files/.._src_litegraph.js.html#l2420"><code>..&#x2F;src&#x2F;litegraph.js:2420</code></a>
</p>

62
doc/classes/LGraphNode.html
View File

@@ -96,7 +96,7 @@
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l1096"><code>..&#x2F;src&#x2F;litegraph.js:1096</code></a>
Defined in: <a href="../files/.._src_litegraph.js.html#l1130"><code>..&#x2F;src&#x2F;litegraph.js:1130</code></a>
</div>
@@ -415,7 +415,7 @@
<a href="../files/.._src_litegraph.js.html#l1528"><code>..&#x2F;src&#x2F;litegraph.js:1528</code></a>
<a href="../files/.._src_litegraph.js.html#l1539"><code>..&#x2F;src&#x2F;litegraph.js:1539</code></a>
</p>
@@ -563,7 +563,7 @@
<a href="../files/.._src_litegraph.js.html#l1468"><code>..&#x2F;src&#x2F;litegraph.js:1468</code></a>
<a href="../files/.._src_litegraph.js.html#l1479"><code>..&#x2F;src&#x2F;litegraph.js:1479</code></a>
</p>
@@ -624,7 +624,7 @@
<div class="param-description">
<p>this can be used to have special properties of an input (special color, position, etc)</p>
<p>this can be used to have special properties of an input (label, color, position, etc)</p>
</div>
@@ -683,7 +683,7 @@
<a href="../files/.._src_litegraph.js.html#l1489"><code>..&#x2F;src&#x2F;litegraph.js:1489</code></a>
<a href="../files/.._src_litegraph.js.html#l1500"><code>..&#x2F;src&#x2F;litegraph.js:1500</code></a>
</p>
@@ -784,7 +784,7 @@
<a href="../files/.._src_litegraph.js.html#l1408"><code>..&#x2F;src&#x2F;litegraph.js:1408</code></a>
<a href="../files/.._src_litegraph.js.html#l1419"><code>..&#x2F;src&#x2F;litegraph.js:1419</code></a>
</p>
@@ -904,7 +904,7 @@
<a href="../files/.._src_litegraph.js.html#l1429"><code>..&#x2F;src&#x2F;litegraph.js:1429</code></a>
<a href="../files/.._src_litegraph.js.html#l1440"><code>..&#x2F;src&#x2F;litegraph.js:1440</code></a>
</p>
@@ -983,7 +983,7 @@
<a href="../files/.._src_litegraph.js.html#l1962"><code>..&#x2F;src&#x2F;litegraph.js:1962</code></a>
<a href="../files/.._src_litegraph.js.html#l1973"><code>..&#x2F;src&#x2F;litegraph.js:1973</code></a>
</p>
@@ -1052,7 +1052,7 @@
<a href="../files/.._src_litegraph.js.html#l1541"><code>..&#x2F;src&#x2F;litegraph.js:1541</code></a>
<a href="../files/.._src_litegraph.js.html#l1552"><code>..&#x2F;src&#x2F;litegraph.js:1552</code></a>
</p>
@@ -1144,7 +1144,7 @@
<a href="../files/.._src_litegraph.js.html#l1125"><code>..&#x2F;src&#x2F;litegraph.js:1125</code></a>
<a href="../files/.._src_litegraph.js.html#l1165"><code>..&#x2F;src&#x2F;litegraph.js:1165</code></a>
</p>
@@ -1225,7 +1225,7 @@
<a href="../files/.._src_litegraph.js.html#l1621"><code>..&#x2F;src&#x2F;litegraph.js:1621</code></a>
<a href="../files/.._src_litegraph.js.html#l1632"><code>..&#x2F;src&#x2F;litegraph.js:1632</code></a>
</p>
@@ -1364,7 +1364,7 @@
<a href="../files/.._src_litegraph.js.html#l1771"><code>..&#x2F;src&#x2F;litegraph.js:1771</code></a>
<a href="../files/.._src_litegraph.js.html#l1782"><code>..&#x2F;src&#x2F;litegraph.js:1782</code></a>
</p>
@@ -1477,7 +1477,7 @@
<a href="../files/.._src_litegraph.js.html#l1704"><code>..&#x2F;src&#x2F;litegraph.js:1704</code></a>
<a href="../files/.._src_litegraph.js.html#l1715"><code>..&#x2F;src&#x2F;litegraph.js:1715</code></a>
</p>
@@ -1600,7 +1600,7 @@
<a href="../files/.._src_litegraph.js.html#l1591"><code>..&#x2F;src&#x2F;litegraph.js:1591</code></a>
<a href="../files/.._src_litegraph.js.html#l1602"><code>..&#x2F;src&#x2F;litegraph.js:1602</code></a>
</p>
@@ -1707,7 +1707,7 @@
<a href="../files/.._src_litegraph.js.html#l1606"><code>..&#x2F;src&#x2F;litegraph.js:1606</code></a>
<a href="../files/.._src_litegraph.js.html#l1617"><code>..&#x2F;src&#x2F;litegraph.js:1617</code></a>
</p>
@@ -1804,7 +1804,7 @@
<a href="../files/.._src_litegraph.js.html#l1559"><code>..&#x2F;src&#x2F;litegraph.js:1559</code></a>
<a href="../files/.._src_litegraph.js.html#l1570"><code>..&#x2F;src&#x2F;litegraph.js:1570</code></a>
</p>
@@ -1893,7 +1893,7 @@
<a href="../files/.._src_litegraph.js.html#l1828"><code>..&#x2F;src&#x2F;litegraph.js:1828</code></a>
<a href="../files/.._src_litegraph.js.html#l1839"><code>..&#x2F;src&#x2F;litegraph.js:1839</code></a>
</p>
@@ -2016,7 +2016,7 @@
<a href="../files/.._src_litegraph.js.html#l1311"><code>..&#x2F;src&#x2F;litegraph.js:1311</code></a>
<a href="../files/.._src_litegraph.js.html#l1322"><code>..&#x2F;src&#x2F;litegraph.js:1322</code></a>
</p>
@@ -2122,7 +2122,7 @@
<a href="../files/.._src_litegraph.js.html#l1337"><code>..&#x2F;src&#x2F;litegraph.js:1337</code></a>
<a href="../files/.._src_litegraph.js.html#l1348"><code>..&#x2F;src&#x2F;litegraph.js:1348</code></a>
</p>
@@ -2226,7 +2226,7 @@
<a href="../files/.._src_litegraph.js.html#l1352"><code>..&#x2F;src&#x2F;litegraph.js:1352</code></a>
<a href="../files/.._src_litegraph.js.html#l1363"><code>..&#x2F;src&#x2F;litegraph.js:1363</code></a>
</p>
@@ -2330,7 +2330,7 @@
<a href="../files/.._src_litegraph.js.html#l1379"><code>..&#x2F;src&#x2F;litegraph.js:1379</code></a>
<a href="../files/.._src_litegraph.js.html#l1390"><code>..&#x2F;src&#x2F;litegraph.js:1390</code></a>
</p>
@@ -2420,7 +2420,7 @@
<a href="../files/.._src_litegraph.js.html#l1279"><code>..&#x2F;src&#x2F;litegraph.js:1279</code></a>
<a href="../files/.._src_litegraph.js.html#l1290"><code>..&#x2F;src&#x2F;litegraph.js:1290</code></a>
</p>
@@ -2489,7 +2489,7 @@
<a href="../files/.._src_litegraph.js.html#l1325"><code>..&#x2F;src&#x2F;litegraph.js:1325</code></a>
<a href="../files/.._src_litegraph.js.html#l1336"><code>..&#x2F;src&#x2F;litegraph.js:1336</code></a>
</p>
@@ -2593,7 +2593,7 @@
<a href="../files/.._src_litegraph.js.html#l1367"><code>..&#x2F;src&#x2F;litegraph.js:1367</code></a>
<a href="../files/.._src_litegraph.js.html#l1378"><code>..&#x2F;src&#x2F;litegraph.js:1378</code></a>
</p>
@@ -2703,7 +2703,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#l1580"><code>..&#x2F;src&#x2F;litegraph.js:1580</code></a>
</p>
@@ -2808,7 +2808,7 @@
<a href="../files/.._src_litegraph.js.html#l1975"><code>..&#x2F;src&#x2F;litegraph.js:1975</code></a>
<a href="../files/.._src_litegraph.js.html#l1986"><code>..&#x2F;src&#x2F;litegraph.js:1986</code></a>
</p>
@@ -2873,7 +2873,7 @@
<a href="../files/.._src_litegraph.js.html#l1514"><code>..&#x2F;src&#x2F;litegraph.js:1514</code></a>
<a href="../files/.._src_litegraph.js.html#l1525"><code>..&#x2F;src&#x2F;litegraph.js:1525</code></a>
</p>
@@ -2961,7 +2961,7 @@
<a href="../files/.._src_litegraph.js.html#l1454"><code>..&#x2F;src&#x2F;litegraph.js:1454</code></a>
<a href="../files/.._src_litegraph.js.html#l1465"><code>..&#x2F;src&#x2F;litegraph.js:1465</code></a>
</p>
@@ -3039,7 +3039,7 @@
<a href="../files/.._src_litegraph.js.html#l1176"><code>..&#x2F;src&#x2F;litegraph.js:1176</code></a>
<a href="../files/.._src_litegraph.js.html#l1224"><code>..&#x2F;src&#x2F;litegraph.js:1224</code></a>
</p>
@@ -3110,7 +3110,7 @@
<a href="../files/.._src_litegraph.js.html#l1292"><code>..&#x2F;src&#x2F;litegraph.js:1292</code></a>
<a href="../files/.._src_litegraph.js.html#l1303"><code>..&#x2F;src&#x2F;litegraph.js:1303</code></a>
</p>
@@ -3203,7 +3203,7 @@
<a href="../files/.._src_litegraph.js.html#l1267"><code>..&#x2F;src&#x2F;litegraph.js:1267</code></a>
<a href="../files/.._src_litegraph.js.html#l1278"><code>..&#x2F;src&#x2F;litegraph.js:1278</code></a>
</p>

10
doc/classes/LiteGraph.html
View File

@@ -298,7 +298,7 @@
<a href="../files/.._src_litegraph.js.html#l65"><code>..&#x2F;src&#x2F;litegraph.js:65</code></a>
<a href="../files/.._src_litegraph.js.html#l68"><code>..&#x2F;src&#x2F;litegraph.js:68</code></a>
</p>
@@ -423,7 +423,7 @@
<a href="../files/.._src_litegraph.js.html#l105"><code>..&#x2F;src&#x2F;litegraph.js:105</code></a>
<a href="../files/.._src_litegraph.js.html#l109"><code>..&#x2F;src&#x2F;litegraph.js:109</code></a>
</p>
@@ -530,7 +530,7 @@
<a href="../files/.._src_litegraph.js.html#l118"><code>..&#x2F;src&#x2F;litegraph.js:118</code></a>
<a href="../files/.._src_litegraph.js.html#l122"><code>..&#x2F;src&#x2F;litegraph.js:122</code></a>
</p>
@@ -627,7 +627,7 @@
<a href="../files/.._src_litegraph.js.html#l140"><code>..&#x2F;src&#x2F;litegraph.js:140</code></a>
<a href="../files/.._src_litegraph.js.html#l144"><code>..&#x2F;src&#x2F;litegraph.js:144</code></a>
</p>
@@ -712,7 +712,7 @@
<a href="../files/.._src_litegraph.js.html#l34"><code>..&#x2F;src&#x2F;litegraph.js:34</code></a>
<a href="../files/.._src_litegraph.js.html#l37"><code>..&#x2F;src&#x2F;litegraph.js:37</code></a>
</p>

136
doc/data.json
View File

@@ -38,7 +38,7 @@
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 227,
"line": 231,
"description": "LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.",
"is_constructor": 1
},
@@ -51,7 +51,7 @@
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 1096,
"line": 1130,
"description": "Base Class for all the node type classes",
"params": [
{
@@ -70,7 +70,7 @@
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 2278,
"line": 2369,
"description": "marks as dirty the canvas, this way it will be rendered again",
"is_constructor": 1,
"params": [
@@ -91,7 +91,7 @@
"classitems": [
{
"file": "../src/litegraph.js",
"line": 34,
"line": 37,
"description": "Register a node class so it can be listed when the user wants to create a new one",
"itemtype": "method",
"name": "registerNodeType",
@@ -111,7 +111,7 @@
},
{
"file": "../src/litegraph.js",
"line": 65,
"line": 68,
"description": "Create a node of a given type with a name. The node is not attached to any graph yet.",
"itemtype": "method",
"name": "createNode",
@@ -136,7 +136,7 @@
},
{
"file": "../src/litegraph.js",
"line": 105,
"line": 109,
"description": "Returns a registered node type with a given name",
"itemtype": "method",
"name": "getNodeType",
@@ -155,7 +155,7 @@
},
{
"file": "../src/litegraph.js",
"line": 118,
"line": 122,
"description": "Returns a list of node types matching one category",
"itemtype": "method",
"name": "getNodeType",
@@ -174,7 +174,7 @@
},
{
"file": "../src/litegraph.js",
"line": 140,
"line": 144,
"description": "Returns a list with all the node type categories",
"itemtype": "method",
"name": "getNodeTypesCategories",
@@ -186,7 +186,7 @@
},
{
"file": "../src/litegraph.js",
"line": 251,
"line": 255,
"description": "Removes all nodes from this graph",
"itemtype": "method",
"name": "clear",
@@ -194,7 +194,7 @@
},
{
"file": "../src/litegraph.js",
"line": 296,
"line": 300,
"description": "Attach Canvas to this graph",
"itemtype": "method",
"name": "attachCanvas",
@@ -209,7 +209,7 @@
},
{
"file": "../src/litegraph.js",
"line": 315,
"line": 319,
"description": "Detach Canvas from this graph",
"itemtype": "method",
"name": "detachCanvas",
@@ -224,7 +224,7 @@
},
{
"file": "../src/litegraph.js",
"line": 329,
"line": 333,
"description": "Starts running this graph every interval milliseconds.",
"itemtype": "method",
"name": "start",
@@ -239,7 +239,7 @@
},
{
"file": "../src/litegraph.js",
"line": 356,
"line": 360,
"description": "Stops the execution loop of the graph",
"itemtype": "method",
"name": "stop execution",
@@ -247,7 +247,7 @@
},
{
"file": "../src/litegraph.js",
"line": 378,
"line": 382,
"description": "Run N steps (cycles) of the graph",
"itemtype": "method",
"name": "runStep",
@@ -262,7 +262,7 @@
},
{
"file": "../src/litegraph.js",
"line": 422,
"line": 426,
"description": "Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\nnodes with only inputs.",
"itemtype": "method",
"name": "updateExecutionOrder",
@@ -270,7 +270,7 @@
},
{
"file": "../src/litegraph.js",
"line": 520,
"line": 524,
"description": "Returns the amount of time the graph has been running in milliseconds",
"itemtype": "method",
"name": "getTime",
@@ -282,7 +282,7 @@
},
{
"file": "../src/litegraph.js",
"line": 531,
"line": 535,
"description": "Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant",
"itemtype": "method",
"name": "getFixedTime",
@@ -294,7 +294,7 @@
},
{
"file": "../src/litegraph.js",
"line": 542,
"line": 546,
"description": "Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\nif the nodes are using graphical actions",
"itemtype": "method",
"name": "getElapsedTime",
@@ -306,7 +306,7 @@
},
{
"file": "../src/litegraph.js",
"line": 554,
"line": 558,
"description": "Sends an event to all the nodes, useful to trigger stuff",
"itemtype": "method",
"name": "sendEventToAllNodes",
@@ -326,7 +326,7 @@
},
{
"file": "../src/litegraph.js",
"line": 582,
"line": 586,
"description": "Adds a new node instasnce to this graph",
"itemtype": "method",
"name": "add",
@@ -341,7 +341,7 @@
},
{
"file": "../src/litegraph.js",
"line": 631,
"line": 635,
"description": "Removes a node from the graph",
"itemtype": "method",
"name": "remove",
@@ -356,7 +356,7 @@
},
{
"file": "../src/litegraph.js",
"line": 697,
"line": 701,
"description": "Returns a node by its id.",
"itemtype": "method",
"name": "getNodeById",
@@ -371,7 +371,7 @@
},
{
"file": "../src/litegraph.js",
"line": 710,
"line": 714,
"description": "Returns a list of nodes that matches a type",
"itemtype": "method",
"name": "findNodesByType",
@@ -390,7 +390,7 @@
},
{
"file": "../src/litegraph.js",
"line": 726,
"line": 730,
"description": "Returns a list of nodes that matches a name",
"itemtype": "method",
"name": "findNodesByName",
@@ -409,7 +409,7 @@
},
{
"file": "../src/litegraph.js",
"line": 742,
"line": 746,
"description": "Returns the top-most node in this position of the canvas",
"itemtype": "method",
"name": "getNodeOnPos",
@@ -438,7 +438,7 @@
},
{
"file": "../src/litegraph.js",
"line": 900,
"line": 933,
"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",
@@ -458,7 +458,7 @@
},
{
"file": "../src/litegraph.js",
"line": 915,
"line": 948,
"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",
@@ -477,7 +477,7 @@
},
{
"file": "../src/litegraph.js",
"line": 952,
"line": 985,
"description": "returns if the graph is in live mode",
"itemtype": "method",
"name": "isLive",
@@ -485,7 +485,7 @@
},
{
"file": "../src/litegraph.js",
"line": 985,
"line": 1018,
"description": "Creates a Object containing all the info about this graph, it can be serialized",
"itemtype": "method",
"name": "serialize",
@@ -497,7 +497,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1018,
"line": 1051,
"description": "Configure a graph from a JSON string",
"itemtype": "method",
"name": "configure",
@@ -512,7 +512,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1125,
"line": 1165,
"description": "configure a node from an object containing the serialized info",
"itemtype": "method",
"name": "configure",
@@ -520,7 +520,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1176,
"line": 1224,
"description": "serialize the content",
"itemtype": "method",
"name": "serialize",
@@ -528,7 +528,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1267,
"line": 1278,
"description": "serialize and stringify",
"itemtype": "method",
"name": "toString",
@@ -536,7 +536,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1279,
"line": 1290,
"description": "get the title string",
"itemtype": "method",
"name": "getTitle",
@@ -544,7 +544,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1292,
"line": 1303,
"description": "sets the output data",
"itemtype": "method",
"name": "setOutputData",
@@ -564,7 +564,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1311,
"line": 1322,
"description": "retrieves the input data from one slot",
"itemtype": "method",
"name": "getInputData",
@@ -583,7 +583,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1325,
"line": 1336,
"description": "tells you if there is a connection in one input slot",
"itemtype": "method",
"name": "isInputConnected",
@@ -602,7 +602,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1337,
"line": 1348,
"description": "tells you info about an input connection (which node, type, etc)",
"itemtype": "method",
"name": "getInputInfo",
@@ -621,7 +621,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1352,
"line": 1363,
"description": "tells you info about an output connection (which node, type, etc)",
"itemtype": "method",
"name": "getOutputInfo",
@@ -640,7 +640,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1367,
"line": 1378,
"description": "tells you if there is a connection in one output slot",
"itemtype": "method",
"name": "isOutputConnected",
@@ -659,7 +659,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1379,
"line": 1390,
"description": "retrieves all the nodes connected to this output slot",
"itemtype": "method",
"name": "getOutputNodes",
@@ -678,7 +678,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1408,
"line": 1419,
"description": "add a new output slot to use in this node",
"itemtype": "method",
"name": "addOutput",
@@ -703,7 +703,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1429,
"line": 1440,
"description": "add a new output slot to use in this node",
"itemtype": "method",
"name": "addOutputs",
@@ -718,7 +718,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1454,
"line": 1465,
"description": "remove an existing output slot",
"itemtype": "method",
"name": "removeOutput",
@@ -733,7 +733,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1468,
"line": 1479,
"description": "add a new input slot to use in this node",
"itemtype": "method",
"name": "addInput",
@@ -750,7 +750,7 @@
},
{
"name": "extra_info",
"description": "this can be used to have special properties of an input (special color, position, etc)",
"description": "this can be used to have special properties of an input (label, color, position, etc)",
"type": "Object"
}
],
@@ -758,7 +758,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1489,
"line": 1500,
"description": "add several new input slots in this node",
"itemtype": "method",
"name": "addInputs",
@@ -773,7 +773,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1514,
"line": 1525,
"description": "remove an existing input slot",
"itemtype": "method",
"name": "removeInput",
@@ -788,7 +788,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1528,
"line": 1539,
"description": "add an special connection to this node (used for special kinds of graphs)",
"itemtype": "method",
"name": "addConnection",
@@ -818,7 +818,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1541,
"line": 1552,
"description": "computes the size of a node according to its inputs and output slots",
"itemtype": "method",
"name": "computeSize",
@@ -837,7 +837,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1559,
"line": 1570,
"description": "returns the bounding of the object, used for rendering purposes",
"itemtype": "method",
"name": "getBounding",
@@ -849,7 +849,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1569,
"line": 1580,
"description": "checks if a point is inside the shape of a node",
"itemtype": "method",
"name": "isPointInsideNode",
@@ -873,7 +873,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1591,
"line": 1602,
"description": "returns the input slot with a given name (used for dynamic slots), -1 if not found",
"itemtype": "method",
"name": "findInputSlot",
@@ -892,7 +892,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1606,
"line": 1617,
"description": "returns the output slot with a given name (used for dynamic slots), -1 if not found",
"itemtype": "method",
"name": "findOutputSlot",
@@ -911,7 +911,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1621,
"line": 1632,
"description": "connect this node output to the input of another node",
"itemtype": "method",
"name": "connect",
@@ -940,7 +940,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1704,
"line": 1715,
"description": "disconnect one output to an specific node",
"itemtype": "method",
"name": "disconnectOutput",
@@ -964,7 +964,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1771,
"line": 1782,
"description": "disconnect one input",
"itemtype": "method",
"name": "disconnectInput",
@@ -983,7 +983,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1828,
"line": 1839,
"description": "returns the center of a connection point in canvas coords",
"itemtype": "method",
"name": "getConnectionPos",
@@ -1007,7 +1007,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1962,
"line": 1973,
"description": "Collapse the node to make it smaller on the canvas",
"itemtype": "method",
"name": "collapse",
@@ -1015,7 +1015,7 @@
},
{
"file": "../src/litegraph.js",
"line": 1975,
"line": 1986,
"description": "Forces the node to do not move or realign on Z",
"itemtype": "method",
"name": "pin",
@@ -1023,7 +1023,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2032,
"line": 2047,
"description": "clears all the data inside",
"itemtype": "method",
"name": "clear",
@@ -1031,7 +1031,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2086,
"line": 2101,
"description": "assigns a graph, you can reasign graphs to the same canvas",
"itemtype": "method",
"name": "setGraph",
@@ -1046,7 +1046,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2114,
"line": 2129,
"description": "opens a graph contained inside a node in the current graph",
"itemtype": "method",
"name": "openSubgraph",
@@ -1061,7 +1061,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2141,
"line": 2156,
"description": "closes a subgraph contained inside a node",
"itemtype": "method",
"name": "closeSubgraph",
@@ -1076,7 +1076,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2156,
"line": 2171,
"description": "assigns a canvas",
"itemtype": "method",
"name": "setCanvas",
@@ -1091,7 +1091,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2294,
"line": 2385,
"description": "Used to attach the canvas in a popup",
"itemtype": "method",
"name": "getCanvasWindow",
@@ -1103,7 +1103,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2306,
"line": 2397,
"description": "starts rendering the content of the canvas when needed",
"itemtype": "method",
"name": "startRendering",
@@ -1111,7 +1111,7 @@
},
{
"file": "../src/litegraph.js",
"line": 2337,
"line": 2420,
"description": "stops rendering the content of the canvas (to save resources)",
"itemtype": "method",
"name": "stopRendering",

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

@@ -113,6 +113,7 @@ var LiteGraph = {
NODE_COLLAPSED_RADIUS: 10,
NODE_COLLAPSED_WIDTH: 80,
CANVAS_GRID_SIZE: 10,
NODE_TITLE_COLOR: &quot;#222&quot;,
NODE_DEFAULT_COLOR: &quot;#999&quot;,
NODE_DEFAULT_BGCOLOR: &quot;#444&quot;,
NODE_DEFAULT_BOXCOLOR: &quot;#AEF&quot;,
@@ -121,6 +122,8 @@ var LiteGraph = {
DEFAULT_POSITION: [100,100],//default node position
node_images_path: &quot;&quot;,
proxy: null, //used to redirect calls
debug: false,
throw_errors: true,
registered_node_types: {},
@@ -182,6 +185,7 @@ var LiteGraph = {
node.type = type;
if(!node.title) node.title = title;
if(!node.properties) node.properties = {};
if(!node.flags) node.flags = {};
if(!node.size) node.size = node.computeSize();
if(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat();
@@ -887,8 +891,11 @@ LGraph.prototype.getGlobalInputData = function(name)
}
//rename the global input
LGraph.prototype.renameGlobalInput = function(old_name, name, data)
LGraph.prototype.renameGlobalInput = function(old_name, name)
{
if(name == old_name)
return;
if(!this.global_inputs[old_name])
return false;
@@ -908,6 +915,19 @@ LGraph.prototype.renameGlobalInput = function(old_name, name, data)
this.onGlobalsChange();
}
LGraph.prototype.changeGlobalInputType = function(name, type)
{
if(!this.global_inputs[name])
return false;
if(this.global_inputs[name].type == type)
return;
this.global_inputs[name].type = type;
if(this.onGlobalInputTypeChanged)
this.onGlobalInputTypeChanged(name, type);
}
LGraph.prototype.removeGlobalInput = function(name)
{
if(!this.global_inputs[name])
@@ -955,7 +975,7 @@ LGraph.prototype.getGlobalOutputData = function(name)
//rename the global output
LGraph.prototype.renameGlobalOutput = function(old_name, name, data)
LGraph.prototype.renameGlobalOutput = function(old_name, name)
{
if(!this.global_outputs[old_name])
return false;
@@ -976,6 +996,19 @@ LGraph.prototype.renameGlobalOutput = function(old_name, name, data)
this.onGlobalsChange();
}
LGraph.prototype.changeGlobalOutputType = function(name, type)
{
if(!this.global_outputs[name])
return false;
if(this.global_outputs[name].type == type)
return;
this.global_outputs[name].type = type;
if(this.onGlobalOutputTypeChanged)
this.onGlobalOutputTypeChanged(name, type);
}
LGraph.prototype.removeGlobalOutput = function(name)
{
if(!this.global_outputs[name])
@@ -1185,6 +1218,7 @@ LGraph.prototype.onNodeTrace = function(node, msg, color)
+ onSerialize
+ onSelected
+ onDeselected
+ onDropFile
*/
/**
@@ -1194,6 +1228,11 @@ LGraph.prototype.onNodeTrace = function(node, msg, color)
*/
function LGraphNode(title)
{
this._ctor();
}
LGraphNode.prototype._ctor = function( title )
{
this.title = title || &quot;Unnamed&quot;;
this.size = [LiteGraph.NODE_WIDTH,60];
@@ -1209,6 +1248,7 @@ function LGraphNode(title)
this.connections = [];
//local data
this.properties = {};
this.data = null; //persistent local data
this.flags = {
//skip_title_render: true,
@@ -1226,6 +1266,14 @@ LGraphNode.prototype.configure = function(info)
{
if(j == &quot;console&quot;) continue;
if(j == &quot;properties&quot;)
{
//i dont want to clone properties, I want to reuse the old container
for(var k in info.properties)
this.properties[k] = info.properties[k];
continue;
}
if(info[j] == null)
continue;
else if (typeof(info[j]) == &#x27;object&#x27;) //object
@@ -1317,46 +1365,9 @@ LGraphNode.prototype.clone = function()
delete data[&quot;id&quot;];
node.configure(data);
/*
node.size = this.size.concat();
if(this.inputs)
for(var i = 0, l = this.inputs.length; i &lt; l; ++i)
{
if(node.findInputSlot( this.inputs[i].name ) == -1)
node.addInput( this.inputs[i].name, this.inputs[i].type );
}
if(this.outputs)
for(var i = 0, l = this.outputs.length; i &lt; l; ++i)
{
if(node.findOutputSlot( this.outputs[i].name ) == -1)
node.addOutput( this.outputs[i].name, this.outputs[i].type );
}
*/
return node;
}
//reduced version of objectivize: NOT FINISHED
/*
LGraphNode.prototype.reducedObjectivize = function()
{
var o = this.objectivize();
var type = LiteGraph.getNodeType(o.type);
if(type.title == o.title)
delete o[&quot;title&quot;];
if(type.size &amp;&amp; compareObjects(o.size,type.size))
delete o[&quot;size&quot;];
if(type.properties &amp;&amp; compareObjects(o.properties, type.properties))
delete o[&quot;properties&quot;];
return o;
}
*/
/**
* serialize and stringify
@@ -1564,7 +1575,7 @@ LGraphNode.prototype.removeOutput = function(slot)
* @method addInput
* @param {string} name
* @param {string} type string defining the input type (&quot;vec3&quot;,&quot;number&quot;,...)
* @param {Object} extra_info this can be used to have special properties of an input (special color, position, etc)
* @param {Object} extra_info this can be used to have special properties of an input (label, color, position, etc)
*/
LGraphNode.prototype.addInput = function(name,type,extra_info)
{
@@ -1590,7 +1601,7 @@ LGraphNode.prototype.addInputs = function(array)
for(var i in array)
{
var info = array[i];
var o = {name:info[0],type:info[1],link:null};
var o = {name:info[0], type:info[1], link:null};
if(array[2])
for(var j in info[2])
o[j] = info[2][j];
@@ -1641,7 +1652,7 @@ LGraphNode.prototype.addConnection = function(name,type,pos,direction)
LGraphNode.prototype.computeSize = function(minHeight)
{
var rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1);
var size = [0,0];
var size = new Float32Array([0,0]);
size[1] = rows * 14 + 6;
if(!this.inputs || this.inputs.length == 0 || !this.outputs || this.outputs.length == 0)
size[0] = LiteGraph.NODE_WIDTH * 0.5;
@@ -1775,8 +1786,8 @@ LGraphNode.prototype.connect = function(slot, node, target_slot)
output.links = [];
output.links.push({id:node.id, slot: -1});
}
else if(output.type == 0 || //generic output
node.inputs[target_slot].type == 0 || //generic input
else if( !output.type || //generic output
!node.inputs[target_slot].type || //generic input
output.type == node.inputs[target_slot].type) //same type
{
//info: link structure =&gt; [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ]
@@ -2099,7 +2110,7 @@ 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)
function LGraphCanvas(canvas, graph, skip_render)
{
//if(graph === undefined)
// throw (&quot;No graph assigned&quot;);
@@ -2110,6 +2121,9 @@ function LGraphCanvas(canvas, graph)
if(!canvas)
throw(&quot;no canvas found&quot;);
this.max_zoom = 10;
this.min_zoom = 0.1;
//link canvas and graph
if(graph)
graph.attachCanvas(this);
@@ -2117,7 +2131,8 @@ function LGraphCanvas(canvas, graph)
this.setCanvas(canvas);
this.clear();
this.startRendering();
if(!skip_render)
this.startRendering();
}
LGraphCanvas.link_type_colors = {&#x27;number&#x27;:&quot;#AAC&quot;,&#x27;node&#x27;:&quot;#DCA&quot;};
@@ -2267,8 +2282,8 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
this.canvas = canvas;
//this.canvas.tabindex = &quot;1000&quot;;
this.canvas.className += &quot; lgraphcanvas&quot;;
this.canvas.data = this;
canvas.className += &quot; lgraphcanvas&quot;;
canvas.data = this;
//bg canvas: used for non changing stuff
this.bgcanvas = null;
@@ -2279,47 +2294,123 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
this.bgcanvas.height = this.canvas.height;
}
if(this.canvas.getContext == null)
if(canvas.getContext == null)
{
throw(&quot;This browser doesnt support Canvas&quot;);
}
this.ctx = this.canvas.getContext(&quot;2d&quot;);
this.bgctx = this.bgcanvas.getContext(&quot;2d&quot;);
var ctx = this.ctx = canvas.getContext(&quot;2d&quot;);
if(ctx == null)
{
console.warn(&quot;This canvas seems to be WebGL, enabling WebGL renderer&quot;);
this.enableWebGL();
}
//input: (move and up could be unbinded)
this._mousemove_callback = this.processMouseMove.bind(this);
this._mouseup_callback = this.processMouseUp.bind(this);
this.canvas.addEventListener(&quot;mousedown&quot;, this.processMouseDown.bind(this), true ); //down do not need to store the binded
this.canvas.addEventListener(&quot;mousemove&quot;, this._mousemove_callback);
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);
this.canvas.addEventListener(&quot;contextmenu&quot;, function(e) { e.preventDefault(); return false; });
canvas.addEventListener(&quot;contextmenu&quot;, function(e) { e.preventDefault(); return false; });
this.canvas.addEventListener(&quot;mousewheel&quot;, this.processMouseWheel.bind(this), false);
this.canvas.addEventListener(&quot;DOMMouseScroll&quot;, this.processMouseWheel.bind(this), false);
canvas.addEventListener(&quot;mousewheel&quot;, this.processMouseWheel.bind(this), false);
canvas.addEventListener(&quot;DOMMouseScroll&quot;, this.processMouseWheel.bind(this), false);
//touch events
//if( &#x27;touchstart&#x27; in document.documentElement )
{
//alert(&quot;doo&quot;);
this.canvas.addEventListener(&quot;touchstart&quot;, this.touchHandler, true);
this.canvas.addEventListener(&quot;touchmove&quot;, this.touchHandler, true);
this.canvas.addEventListener(&quot;touchend&quot;, this.touchHandler, true);
this.canvas.addEventListener(&quot;touchcancel&quot;, this.touchHandler, true);
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; };
this.canvas.addEventListener(&quot;keydown&quot;, function(e) {
canvas.addEventListener(&quot;keydown&quot;, function(e) {
that.processKeyDown(e);
});
this.canvas.addEventListener(&quot;keyup&quot;, function(e) {
canvas.addEventListener(&quot;keyup&quot;, function(e) {
that.processKeyUp(e);
});
//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);
var pos = [e.canvasX,e.canvasY];
var node = that.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;)
reader.readAsText(file);
else if (type == &quot;image&quot;)
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
return false;
};
}
LGraphCanvas.getFileExtension = function (url)
{
var question = url.indexOf(&quot;?&quot;);
if(question != -1)
url = url.substr(0,question);
var point = url.lastIndexOf(&quot;.&quot;);
if(point == -1)
return &quot;&quot;;
return url.substr(point+1).toLowerCase();
}
//this file allows to render the canvas using WebGL instead of Canvas2D
//this is useful if you plant to render 3D objects inside your nodes
LGraphCanvas.prototype.enableWebGL = function()
{
if(typeof(GL) === undefined)
throw(&quot;litegl.js must be included to use a WebGL canvas&quot;);
if(typeof(enableWebGLCanvas) === undefined)
throw(&quot;webglCanvas.js must be included to use this feature&quot;);
this.gl = this.ctx = enableWebGLCanvas(this.canvas);
this.ctx.webgl = true;
this.bgcanvas = this.canvas;
this.bgctx = this.gl;
/*
GL.create({ canvas: this.bgcanvas });
this.bgctx = enableWebGLCanvas( this.bgcanvas );
window.gl = this.gl;
*/
}
/*
LGraphCanvas.prototype.UIinit = function()
{
@@ -2418,14 +2509,6 @@ LGraphCanvas.prototype.startRendering = function()
if(this.is_rendering)
window.requestAnimationFrame( renderFrame.bind(this) );
}
/*
this.rendering_timer_id = setInterval( function() {
//trace(&quot;Frame: &quot; + new Date().getTime() );
that.draw();
}, 1000/50);
*/
}
/**
@@ -2533,6 +2616,13 @@ LGraphCanvas.prototype.processMouseDown = function(e)
}
}
//Search for corner
if( !skip_action &amp;&amp; isInsideRectangle(e.canvasX, e.canvasY, n.pos[0], n.pos[1] - LiteGraph.NODE_TITLE_HEIGHT ,LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT ))
{
n.collapse();
skip_action = true;
}
//it wasnt clicked on the links boxes
if(!skip_action)
{
@@ -2674,7 +2764,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 == &quot;*&quot; || this.connecting_output.type == &quot;*&quot;)
if(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type )
this._highlight_input = pos;
}
else
@@ -2786,6 +2876,13 @@ LGraphCanvas.prototype.processMouseUp = function(e)
{
this.connecting_node.connect(this.connecting_slot, node, slot);
}
else
{ //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)
this.connecting_node.connect(this.connecting_slot, node, 0);
}
}
}
@@ -3068,10 +3165,10 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center)
this.scale = value;
if(this.scale &gt; 4)
this.scale = 4;
else if(this.scale &lt; 0.1)
this.scale = 0.1;
if(this.scale &gt; this.max_zoom)
this.scale = this.max_zoom;
else if(this.scale &lt; this.min_zoom)
this.scale = this.min_zoom;
var new_center = this.convertOffsetToCanvas( zooming_center );
var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]];
@@ -3158,7 +3255,7 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)
}
if(this.dirty_bgcanvas || force_bgcanvas)
this.drawBgcanvas();
this.drawBackCanvas();
if(this.dirty_canvas || force_canvas)
this.drawFrontCanvas();
@@ -3169,7 +3266,15 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)
LGraphCanvas.prototype.drawFrontCanvas = function()
{
if(!this.ctx)
this.ctx = this.bgcanvas.getContext(&quot;2d&quot;);
var ctx = this.ctx;
if(!ctx) //maybe is using webgl...
return;
if(ctx.start)
ctx.start();
var canvas = this.canvas;
//reset in case of error
@@ -3190,7 +3295,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
ctx.clearRect(0,0,canvas.width, canvas.height);
//draw bg canvas
ctx.drawImage(this.bgcanvas,0,0);
if(this.bgcanvas == this.canvas)
this.drawBackCanvas();
else
ctx.drawImage(this.bgcanvas,0,0);
//rendering
if(this.onRender)
this.onRender(canvas, ctx);
//info widget
if(this.show_info)
@@ -3275,17 +3387,23 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//this.dirty_area = null;
}
if(ctx.finish) //this is a function I use in webgl renderer
ctx.finish();
this.dirty_canvas = false;
}
LGraphCanvas.prototype.drawBgcanvas = function()
LGraphCanvas.prototype.drawBackCanvas = function()
{
var canvas = this.bgcanvas;
if(!this.bgctx)
this.bgctx = this.bgcanvas.getContext(&quot;2d&quot;);
var ctx = this.bgctx;
if(ctx.start)
ctx.start();
//clear
canvas.width = canvas.width;
ctx.clearRect(0,0,canvas.width, canvas.height);
//reset in case of error
ctx.restore();
@@ -3302,7 +3420,7 @@ LGraphCanvas.prototype.drawBgcanvas = function()
if(this.background_image &amp;&amp; this.scale &gt; 0.5)
{
ctx.globalAlpha = (1.0 - 0.5 / this.scale) * this.editor_alpha;
ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false
ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false;
if(!this._bg_img || this._bg_img.name != this.background_image)
{
this._bg_img = new Image();
@@ -3331,8 +3449,12 @@ LGraphCanvas.prototype.drawBgcanvas = function()
}
ctx.globalAlpha = 1.0;
ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = true;
}
if(this.onBackgroundRender)
this.onBackgroundRender(canvas, ctx);
//DEBUG: show clipping area
//ctx.fillStyle = &quot;red&quot;;
//ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20);
@@ -3361,6 +3483,9 @@ LGraphCanvas.prototype.drawBgcanvas = function()
ctx.restore();
}
if(ctx.finish)
ctx.finish();
this.dirty_bgcanvas = false;
this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas
}
@@ -3433,7 +3558,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var shape = node.shape || &quot;box&quot;;
var size = new Float32Array(node.size);
if(node.flags.collapsed)
size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]);
{
size[0] = LiteGraph.NODE_COLLAPSED_WIDTH;
size[1] = 0;
}
//Start clipping
if(node.flags.clip_area)
@@ -3586,27 +3714,30 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo
var shape = node.shape || &quot;box&quot;;
if(shape == &quot;box&quot;)
{
ctx.beginPath();
ctx.rect(0,no_title ? 0 : -title_height, size[0]+1, no_title ? size[1] : size[1] + title_height);
ctx.fill();
ctx.shadowColor = &quot;transparent&quot;;
if(selected)
{
ctx.strokeStyle = &quot;#CCC&quot;;
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) );
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) - 1);
ctx.strokeStyle = fgcolor;
}
ctx.beginPath();
ctx.rect(0,no_title ? 0.5 : -title_height + 0.5,size[0]+1, no_title ? size[1] : size[1] + title_height);
}
else if (node.shape == &quot;round&quot;)
{
ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10);
ctx.fill();
}
else if (node.shape == &quot;circle&quot;)
{
ctx.beginPath();
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
ctx.fill();
}
ctx.fill();
ctx.shadowColor = &quot;transparent&quot;;
//ctx.stroke();
@@ -3630,15 +3761,16 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo
if(shape == &quot;box&quot;)
{
ctx.beginPath();
ctx.fillRect(0,-title_height,size[0]+1,title_height);
ctx.stroke();
ctx.rect(0, -title_height, size[0]+1, title_height);
ctx.fill()
//ctx.stroke();
}
else if (shape == &quot;round&quot;)
{
ctx.roundRect(0,-title_height,size[0], title_height,10,0);
//ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12);
ctx.fill();
ctx.stroke();
//ctx.stroke();
}
//box
@@ -3654,9 +3786,9 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo
//title text
ctx.font = this.title_text_font;
var title = node.getTitle();
if(title &amp;&amp; this.scale &gt; 0.8)
if(title &amp;&amp; this.scale &gt; 0.5)
{
ctx.fillStyle = &quot;#222&quot;;
ctx.fillStyle = LiteGraph.NODE_TITLE_COLOR;
ctx.fillText( title, 16, 13 - title_height );
}
}
@@ -4160,15 +4292,18 @@ LGraphCanvas.prototype.getCanvasMenuOptions = function()
//{content:&quot;Collapse All&quot;, callback: LGraphCanvas.onMenuCollapseAll }
];
if(this._graph_stack)
if(this._graph_stack &amp;&amp; this._graph_stack.length &gt; 0)
options = [{content:&quot;Close subgraph&quot;, callback: this.closeSubgraph.bind(this) },null].concat(options);
}
if(this.getExtraMenuOptions)
{
var extra = this.getExtraMenuOptions(this);
extra.push(null);
options = extra.concat( options );
if(extra)
{
extra.push(null);
options = extra.concat( options );
}
}
return options;
@@ -4195,8 +4330,11 @@ LGraphCanvas.prototype.getNodeMenuOptions = function(node)
if(node.getExtraMenuOptions)
{
var extra = node.getExtraMenuOptions(this);
extra.push(null);
options = extra.concat( options );
if(extra)
{
extra.push(null);
options = extra.concat( options );
}
}
if( node.clonable !== false )
@@ -4520,14 +4658,35 @@ LiteGraph.closeAllContextualMenus = function()
result[i].parentNode.removeChild( result[i] );
}
LiteGraph.extendClass = function(origin, target)
LiteGraph.extendClass = function ( target, origin )
{
for(var i in origin) //copy class properties
{
if(target.hasOwnProperty(i))
continue;
target[i] = origin[i];
}
if(origin.prototype) //copy prototype properties
for(var i in origin.prototype)
target.prototype[i] = origin.prototype[i];
}
for(var i in origin.prototype) //only enumerables
{
if(!origin.prototype.hasOwnProperty(i))
continue;
if(target.prototype.hasOwnProperty(i)) //avoid overwritting existing ones
continue;
//copy getters
if(origin.prototype.__lookupGetter__(i))
target.prototype.__defineGetter__(i, origin.prototype.__lookupGetter__(i));
else
target.prototype[i] = origin.prototype[i];
//and setters
if(origin.prototype.__lookupSetter__(i))
target.prototype.__defineSetter__(i, origin.prototype.__lookupSetter__(i));
}
}
/*
LiteGraph.createNodetypeWrapper = function( class_object )

33
index.html
View File

@@ -38,7 +38,38 @@
<h2>Usage</h2>
<h2>Examples</h2>
<p>Include the library</p>
<pre>
&lt;script type="text/javascript" src="../src/litegraph.js"&gt;&lt;/script&gt;</pre>
<p>Create a graph</p>
<pre>
var graph = new LGraph();</pre>
<p>Create a canvas renderer</p>
<pre>
var canvas = new LGraphCanvas("#mycanvas");</pre>
<p>Add some nodes to the graph</p>
<pre>
var node_const = LiteGraph.createNode("basic/const");
node_const.pos = [200,200];
graph.add(node_const);
node_const.setValue(4.5);
var node_watch = LiteGraph.createNode("basic/watch");
node_watch.pos = [700,200];
graph.add(node_watch);</pre>
<p>Connect them</p>
<pre>
node_const.connect(0, node_watch, 0 );</pre>
<p>Run the graph</p>
<pre>
graph.start();</pre>
<h2>Example of editor</h2>
<ul>
<li><a href="demo">Module editor</a></li>
</ul>

363
src/litegraph.js
View File

@@ -19,6 +19,7 @@ var LiteGraph = {
NODE_COLLAPSED_RADIUS: 10,
NODE_COLLAPSED_WIDTH: 80,
CANVAS_GRID_SIZE: 10,
NODE_TITLE_COLOR: "#222",
NODE_DEFAULT_COLOR: "#999",
NODE_DEFAULT_BGCOLOR: "#444",
NODE_DEFAULT_BOXCOLOR: "#AEF",
@@ -27,6 +28,8 @@ var LiteGraph = {
DEFAULT_POSITION: [100,100],//default node position
node_images_path: "",
proxy: null, //used to redirect calls
debug: false,
throw_errors: true,
registered_node_types: {},
@@ -88,6 +91,7 @@ var LiteGraph = {
node.type = type;
if(!node.title) node.title = title;
if(!node.properties) node.properties = {};
if(!node.flags) node.flags = {};
if(!node.size) node.size = node.computeSize();
if(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat();
@@ -793,8 +797,11 @@ LGraph.prototype.getGlobalInputData = function(name)
}
//rename the global input
LGraph.prototype.renameGlobalInput = function(old_name, name, data)
LGraph.prototype.renameGlobalInput = function(old_name, name)
{
if(name == old_name)
return;
if(!this.global_inputs[old_name])
return false;
@@ -814,6 +821,19 @@ LGraph.prototype.renameGlobalInput = function(old_name, name, data)
this.onGlobalsChange();
}
LGraph.prototype.changeGlobalInputType = function(name, type)
{
if(!this.global_inputs[name])
return false;
if(this.global_inputs[name].type == type)
return;
this.global_inputs[name].type = type;
if(this.onGlobalInputTypeChanged)
this.onGlobalInputTypeChanged(name, type);
}
LGraph.prototype.removeGlobalInput = function(name)
{
if(!this.global_inputs[name])
@@ -861,7 +881,7 @@ LGraph.prototype.getGlobalOutputData = function(name)
//rename the global output
LGraph.prototype.renameGlobalOutput = function(old_name, name, data)
LGraph.prototype.renameGlobalOutput = function(old_name, name)
{
if(!this.global_outputs[old_name])
return false;
@@ -882,6 +902,19 @@ LGraph.prototype.renameGlobalOutput = function(old_name, name, data)
this.onGlobalsChange();
}
LGraph.prototype.changeGlobalOutputType = function(name, type)
{
if(!this.global_outputs[name])
return false;
if(this.global_outputs[name].type == type)
return;
this.global_outputs[name].type = type;
if(this.onGlobalOutputTypeChanged)
this.onGlobalOutputTypeChanged(name, type);
}
LGraph.prototype.removeGlobalOutput = function(name)
{
if(!this.global_outputs[name])
@@ -1091,6 +1124,7 @@ LGraph.prototype.onNodeTrace = function(node, msg, color)
+ onSerialize
+ onSelected
+ onDeselected
+ onDropFile
*/
/**
@@ -1100,6 +1134,11 @@ LGraph.prototype.onNodeTrace = function(node, msg, color)
*/
function LGraphNode(title)
{
this._ctor();
}
LGraphNode.prototype._ctor = function( title )
{
this.title = title || "Unnamed";
this.size = [LiteGraph.NODE_WIDTH,60];
@@ -1115,6 +1154,7 @@ function LGraphNode(title)
this.connections = [];
//local data
this.properties = {};
this.data = null; //persistent local data
this.flags = {
//skip_title_render: true,
@@ -1132,6 +1172,14 @@ LGraphNode.prototype.configure = function(info)
{
if(j == "console") continue;
if(j == "properties")
{
//i dont want to clone properties, I want to reuse the old container
for(var k in info.properties)
this.properties[k] = info.properties[k];
continue;
}
if(info[j] == null)
continue;
else if (typeof(info[j]) == 'object') //object
@@ -1223,46 +1271,9 @@ LGraphNode.prototype.clone = function()
delete data["id"];
node.configure(data);
/*
node.size = this.size.concat();
if(this.inputs)
for(var i = 0, l = this.inputs.length; i < l; ++i)
{
if(node.findInputSlot( this.inputs[i].name ) == -1)
node.addInput( this.inputs[i].name, this.inputs[i].type );
}
if(this.outputs)
for(var i = 0, l = this.outputs.length; i < l; ++i)
{
if(node.findOutputSlot( this.outputs[i].name ) == -1)
node.addOutput( this.outputs[i].name, this.outputs[i].type );
}
*/
return node;
}
//reduced version of objectivize: NOT FINISHED
/*
LGraphNode.prototype.reducedObjectivize = function()
{
var o = this.objectivize();
var type = LiteGraph.getNodeType(o.type);
if(type.title == o.title)
delete o["title"];
if(type.size && compareObjects(o.size,type.size))
delete o["size"];
if(type.properties && compareObjects(o.properties, type.properties))
delete o["properties"];
return o;
}
*/
/**
* serialize and stringify
@@ -1470,7 +1481,7 @@ LGraphNode.prototype.removeOutput = function(slot)
* @method addInput
* @param {string} name
* @param {string} type string defining the input type ("vec3","number",...)
* @param {Object} extra_info this can be used to have special properties of an input (special color, position, etc)
* @param {Object} extra_info this can be used to have special properties of an input (label, color, position, etc)
*/
LGraphNode.prototype.addInput = function(name,type,extra_info)
{
@@ -1496,7 +1507,7 @@ LGraphNode.prototype.addInputs = function(array)
for(var i in array)
{
var info = array[i];
var o = {name:info[0],type:info[1],link:null};
var o = {name:info[0], type:info[1], link:null};
if(array[2])
for(var j in info[2])
o[j] = info[2][j];
@@ -1547,7 +1558,7 @@ LGraphNode.prototype.addConnection = function(name,type,pos,direction)
LGraphNode.prototype.computeSize = function(minHeight)
{
var rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1);
var size = [0,0];
var size = new Float32Array([0,0]);
size[1] = rows * 14 + 6;
if(!this.inputs || this.inputs.length == 0 || !this.outputs || this.outputs.length == 0)
size[0] = LiteGraph.NODE_WIDTH * 0.5;
@@ -1681,8 +1692,8 @@ LGraphNode.prototype.connect = function(slot, node, target_slot)
output.links = [];
output.links.push({id:node.id, slot: -1});
}
else if(output.type == 0 || //generic output
node.inputs[target_slot].type == 0 || //generic input
else if( !output.type || //generic output
!node.inputs[target_slot].type || //generic input
output.type == node.inputs[target_slot].type) //same type
{
//info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ]
@@ -2005,7 +2016,7 @@ 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)
function LGraphCanvas(canvas, graph, skip_render)
{
//if(graph === undefined)
// throw ("No graph assigned");
@@ -2016,6 +2027,9 @@ function LGraphCanvas(canvas, graph)
if(!canvas)
throw("no canvas found");
this.max_zoom = 10;
this.min_zoom = 0.1;
//link canvas and graph
if(graph)
graph.attachCanvas(this);
@@ -2023,7 +2037,8 @@ function LGraphCanvas(canvas, graph)
this.setCanvas(canvas);
this.clear();
this.startRendering();
if(!skip_render)
this.startRendering();
}
LGraphCanvas.link_type_colors = {'number':"#AAC",'node':"#DCA"};
@@ -2173,8 +2188,8 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
this.canvas = canvas;
//this.canvas.tabindex = "1000";
this.canvas.className += " lgraphcanvas";
this.canvas.data = this;
canvas.className += " lgraphcanvas";
canvas.data = this;
//bg canvas: used for non changing stuff
this.bgcanvas = null;
@@ -2185,47 +2200,123 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
this.bgcanvas.height = this.canvas.height;
}
if(this.canvas.getContext == null)
if(canvas.getContext == null)
{
throw("This browser doesnt support Canvas");
}
this.ctx = this.canvas.getContext("2d");
this.bgctx = this.bgcanvas.getContext("2d");
var ctx = this.ctx = canvas.getContext("2d");
if(ctx == null)
{
console.warn("This canvas seems to be WebGL, enabling WebGL renderer");
this.enableWebGL();
}
//input: (move and up could be unbinded)
this._mousemove_callback = this.processMouseMove.bind(this);
this._mouseup_callback = this.processMouseUp.bind(this);
this.canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded
this.canvas.addEventListener("mousemove", this._mousemove_callback);
canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded
canvas.addEventListener("mousemove", this._mousemove_callback);
this.canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; });
canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; });
this.canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false);
this.canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false);
canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false);
canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false);
//touch events
//if( 'touchstart' in document.documentElement )
{
//alert("doo");
this.canvas.addEventListener("touchstart", this.touchHandler, true);
this.canvas.addEventListener("touchmove", this.touchHandler, true);
this.canvas.addEventListener("touchend", this.touchHandler, true);
this.canvas.addEventListener("touchcancel", this.touchHandler, true);
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; };
this.canvas.addEventListener("keydown", function(e) {
canvas.addEventListener("keydown", function(e) {
that.processKeyDown(e);
});
this.canvas.addEventListener("keyup", function(e) {
canvas.addEventListener("keyup", function(e) {
that.processKeyUp(e);
});
//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);
var pos = [e.canvasX,e.canvasY];
var node = that.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")
reader.readAsText(file);
else if (type == "image")
reader.readAsDataURL(file);
else
reader.readAsArrayBuffer(file);
return false;
};
}
LGraphCanvas.getFileExtension = function (url)
{
var question = url.indexOf("?");
if(question != -1)
url = url.substr(0,question);
var point = url.lastIndexOf(".");
if(point == -1)
return "";
return url.substr(point+1).toLowerCase();
}
//this file allows to render the canvas using WebGL instead of Canvas2D
//this is useful if you plant to render 3D objects inside your nodes
LGraphCanvas.prototype.enableWebGL = function()
{
if(typeof(GL) === undefined)
throw("litegl.js must be included to use a WebGL canvas");
if(typeof(enableWebGLCanvas) === undefined)
throw("webglCanvas.js must be included to use this feature");
this.gl = this.ctx = enableWebGLCanvas(this.canvas);
this.ctx.webgl = true;
this.bgcanvas = this.canvas;
this.bgctx = this.gl;
/*
GL.create({ canvas: this.bgcanvas });
this.bgctx = enableWebGLCanvas( this.bgcanvas );
window.gl = this.gl;
*/
}
/*
LGraphCanvas.prototype.UIinit = function()
{
@@ -2324,14 +2415,6 @@ LGraphCanvas.prototype.startRendering = function()
if(this.is_rendering)
window.requestAnimationFrame( renderFrame.bind(this) );
}
/*
this.rendering_timer_id = setInterval( function() {
//trace("Frame: " + new Date().getTime() );
that.draw();
}, 1000/50);
*/
}
/**
@@ -2439,6 +2522,13 @@ LGraphCanvas.prototype.processMouseDown = function(e)
}
}
//Search for corner
if( !skip_action && isInsideRectangle(e.canvasX, e.canvasY, n.pos[0], n.pos[1] - LiteGraph.NODE_TITLE_HEIGHT ,LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT ))
{
n.collapse();
skip_action = true;
}
//it wasnt clicked on the links boxes
if(!skip_action)
{
@@ -2580,7 +2670,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(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type )
this._highlight_input = pos;
}
else
@@ -2692,6 +2782,13 @@ LGraphCanvas.prototype.processMouseUp = function(e)
{
this.connecting_node.connect(this.connecting_slot, node, slot);
}
else
{ //not on top of an input
var input = node.getInputInfo(0);
//simple connect
if(input && !input.link && input.type == this.connecting_output.type)
this.connecting_node.connect(this.connecting_slot, node, 0);
}
}
}
@@ -2974,10 +3071,10 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center)
this.scale = value;
if(this.scale > 4)
this.scale = 4;
else if(this.scale < 0.1)
this.scale = 0.1;
if(this.scale > this.max_zoom)
this.scale = this.max_zoom;
else if(this.scale < this.min_zoom)
this.scale = this.min_zoom;
var new_center = this.convertOffsetToCanvas( zooming_center );
var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]];
@@ -3064,7 +3161,7 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)
}
if(this.dirty_bgcanvas || force_bgcanvas)
this.drawBgcanvas();
this.drawBackCanvas();
if(this.dirty_canvas || force_canvas)
this.drawFrontCanvas();
@@ -3075,7 +3172,15 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)
LGraphCanvas.prototype.drawFrontCanvas = function()
{
if(!this.ctx)
this.ctx = this.bgcanvas.getContext("2d");
var ctx = this.ctx;
if(!ctx) //maybe is using webgl...
return;
if(ctx.start)
ctx.start();
var canvas = this.canvas;
//reset in case of error
@@ -3096,7 +3201,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
ctx.clearRect(0,0,canvas.width, canvas.height);
//draw bg canvas
ctx.drawImage(this.bgcanvas,0,0);
if(this.bgcanvas == this.canvas)
this.drawBackCanvas();
else
ctx.drawImage(this.bgcanvas,0,0);
//rendering
if(this.onRender)
this.onRender(canvas, ctx);
//info widget
if(this.show_info)
@@ -3181,17 +3293,23 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//this.dirty_area = null;
}
if(ctx.finish) //this is a function I use in webgl renderer
ctx.finish();
this.dirty_canvas = false;
}
LGraphCanvas.prototype.drawBgcanvas = function()
LGraphCanvas.prototype.drawBackCanvas = function()
{
var canvas = this.bgcanvas;
if(!this.bgctx)
this.bgctx = this.bgcanvas.getContext("2d");
var ctx = this.bgctx;
if(ctx.start)
ctx.start();
//clear
canvas.width = canvas.width;
ctx.clearRect(0,0,canvas.width, canvas.height);
//reset in case of error
ctx.restore();
@@ -3208,7 +3326,7 @@ LGraphCanvas.prototype.drawBgcanvas = function()
if(this.background_image && this.scale > 0.5)
{
ctx.globalAlpha = (1.0 - 0.5 / this.scale) * this.editor_alpha;
ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false
ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false;
if(!this._bg_img || this._bg_img.name != this.background_image)
{
this._bg_img = new Image();
@@ -3237,8 +3355,12 @@ LGraphCanvas.prototype.drawBgcanvas = function()
}
ctx.globalAlpha = 1.0;
ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = true;
}
if(this.onBackgroundRender)
this.onBackgroundRender(canvas, ctx);
//DEBUG: show clipping area
//ctx.fillStyle = "red";
//ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20);
@@ -3267,6 +3389,9 @@ LGraphCanvas.prototype.drawBgcanvas = function()
ctx.restore();
}
if(ctx.finish)
ctx.finish();
this.dirty_bgcanvas = false;
this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas
}
@@ -3339,7 +3464,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var shape = node.shape || "box";
var size = new Float32Array(node.size);
if(node.flags.collapsed)
size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]);
{
size[0] = LiteGraph.NODE_COLLAPSED_WIDTH;
size[1] = 0;
}
//Start clipping
if(node.flags.clip_area)
@@ -3492,27 +3620,30 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo
var shape = node.shape || "box";
if(shape == "box")
{
ctx.beginPath();
ctx.rect(0,no_title ? 0 : -title_height, size[0]+1, no_title ? size[1] : size[1] + title_height);
ctx.fill();
ctx.shadowColor = "transparent";
if(selected)
{
ctx.strokeStyle = "#CCC";
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) );
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) - 1);
ctx.strokeStyle = fgcolor;
}
ctx.beginPath();
ctx.rect(0,no_title ? 0.5 : -title_height + 0.5,size[0]+1, no_title ? size[1] : size[1] + title_height);
}
else if (node.shape == "round")
{
ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10);
ctx.fill();
}
else if (node.shape == "circle")
{
ctx.beginPath();
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
ctx.fill();
}
ctx.fill();
ctx.shadowColor = "transparent";
//ctx.stroke();
@@ -3536,15 +3667,16 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo
if(shape == "box")
{
ctx.beginPath();
ctx.fillRect(0,-title_height,size[0]+1,title_height);
ctx.stroke();
ctx.rect(0, -title_height, size[0]+1, title_height);
ctx.fill()
//ctx.stroke();
}
else if (shape == "round")
{
ctx.roundRect(0,-title_height,size[0], title_height,10,0);
//ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12);
ctx.fill();
ctx.stroke();
//ctx.stroke();
}
//box
@@ -3560,9 +3692,9 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo
//title text
ctx.font = this.title_text_font;
var title = node.getTitle();
if(title && this.scale > 0.8)
if(title && this.scale > 0.5)
{
ctx.fillStyle = "#222";
ctx.fillStyle = LiteGraph.NODE_TITLE_COLOR;
ctx.fillText( title, 16, 13 - title_height );
}
}
@@ -4066,15 +4198,18 @@ LGraphCanvas.prototype.getCanvasMenuOptions = function()
//{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll }
];
if(this._graph_stack)
if(this._graph_stack && this._graph_stack.length > 0)
options = [{content:"Close subgraph", callback: this.closeSubgraph.bind(this) },null].concat(options);
}
if(this.getExtraMenuOptions)
{
var extra = this.getExtraMenuOptions(this);
extra.push(null);
options = extra.concat( options );
if(extra)
{
extra.push(null);
options = extra.concat( options );
}
}
return options;
@@ -4101,8 +4236,11 @@ LGraphCanvas.prototype.getNodeMenuOptions = function(node)
if(node.getExtraMenuOptions)
{
var extra = node.getExtraMenuOptions(this);
extra.push(null);
options = extra.concat( options );
if(extra)
{
extra.push(null);
options = extra.concat( options );
}
}
if( node.clonable !== false )
@@ -4426,14 +4564,35 @@ LiteGraph.closeAllContextualMenus = function()
result[i].parentNode.removeChild( result[i] );
}
LiteGraph.extendClass = function(origin, target)
LiteGraph.extendClass = function ( target, origin )
{
for(var i in origin) //copy class properties
{
if(target.hasOwnProperty(i))
continue;
target[i] = origin[i];
}
if(origin.prototype) //copy prototype properties
for(var i in origin.prototype)
target.prototype[i] = origin.prototype[i];
}
for(var i in origin.prototype) //only enumerables
{
if(!origin.prototype.hasOwnProperty(i))
continue;
if(target.prototype.hasOwnProperty(i)) //avoid overwritting existing ones
continue;
//copy getters
if(origin.prototype.__lookupGetter__(i))
target.prototype.__defineGetter__(i, origin.prototype.__lookupGetter__(i));
else
target.prototype[i] = origin.prototype[i];
//and setters
if(origin.prototype.__lookupSetter__(i))
target.prototype.__defineSetter__(i, origin.prototype.__lookupSetter__(i));
}
}
/*
LiteGraph.createNodetypeWrapper = function( class_object )

255
src/nodes/base.js
View File

@@ -2,78 +2,27 @@
(function(){
//Input for a subgraph
function GlobalInput()
{
this.title = "Input";
//random name to avoid problems with other outputs when added
var genname = "input_" + (Math.random()*1000).toFixed();
this.properties = { name: genname, type: "number" };
this.addOutput("value",0);
}
GlobalInput.title = "Input";
GlobalInput.desc = "Input of the graph";
GlobalInput.prototype.onAdded = function()
{
this.graph.addGlobalInput( this.properties.name, this.properties.type );
}
GlobalInput.prototype.onExecute = function()
{
var name = this.properties.name;
//read from global input
var data = this.graph.global_inputs[name];
if(!data) return;
//put through output
this.setOutputData(0,data.value);
}
LiteGraph.registerNodeType("graph/input", GlobalInput);
//Output for a subgraph
function GlobalOutput()
{
this.title = "Output";
//random name to avoid problems with other outputs when added
var genname = "output_" + (Math.random()*1000).toFixed();
this.properties = { name: genname, type: "number" };
this.addInput("value","number");
}
GlobalOutput.title = "Ouput";
GlobalOutput.desc = "Output of the graph";
GlobalOutput.prototype.onAdded = function()
{
var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type );
}
GlobalOutput.prototype.onExecute = function()
{
this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) );
}
LiteGraph.registerNodeType("graph/output", GlobalOutput);
//Subgraph: a node that contains a graph
function Subgraph()
{
var that = this;
this.size = [120,60];
//create inner graph
this.subgraph = new LGraph();
this.subgraph._subgraph_node = this;
this.subgraph._is_subgraph = true;
this.subgraph.onGlobalInputAdded = this.onSubgraphNewGlobalInput.bind(this);
this.subgraph.onGlobalOutputAdded = this.onSubgraphNewGlobalOutput.bind(this);
this.bgcolor = "#FA3";
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";
}
Subgraph.title = "Subgraph";
@@ -81,14 +30,55 @@ Subgraph.desc = "Graph inside a node";
Subgraph.prototype.onSubgraphNewGlobalInput = function(name, type)
{
//add input to the node
this.addInput(name, type);
}
Subgraph.prototype.onSubgraphRenamedGlobalInput = function(oldname, name)
{
var slot = this.findInputSlot( oldname );
if(slot == -1)
return;
var info = this.getInputInfo(slot);
info.name = name;
}
Subgraph.prototype.onSubgraphTypeChangeGlobalInput = function(name, type)
{
var slot = this.findInputSlot( name );
if(slot == -1)
return;
var info = this.getInputInfo(slot);
info.type = type;
}
Subgraph.prototype.onSubgraphNewGlobalOutput = function(name, type)
{
//add output to the node
this.addOutput(name, type);
}
Subgraph.prototype.onSubgraphRenamedGlobalOutput = function(oldname, name)
{
var slot = this.findOutputSlot( oldname );
if(slot == -1)
return;
var info = this.getOutputInfo(slot);
info.name = name;
}
Subgraph.prototype.onSubgraphTypeChangeGlobalOutput = function(name, type)
{
var slot = this.findOutputSlot( name );
if(slot == -1)
return;
var info = this.getOutputInfo(slot);
info.type = type;
}
Subgraph.prototype.getExtraMenuOptions = function(graphcanvas)
{
var that = this;
@@ -136,10 +126,147 @@ Subgraph.prototype.serialize = function()
return data;
}
Subgraph.prototype.clone = function()
{
var node = LiteGraph.createNode(this.type);
var data = this.serialize();
delete data["id"];
delete data["inputs"];
delete data["outputs"];
node.configure(data);
return node;
}
LiteGraph.registerNodeType("graph/subgraph", Subgraph);
//Input for a subgraph
function GlobalInput()
{
//random name to avoid problems with other outputs when added
var input_name = "input_" + (Math.random()*1000).toFixed();
this.addOutput(input_name, null );
this.properties = {name: input_name, type: null };
var that = this;
Object.defineProperty(this.properties, "name", {
get: function() {
return input_name;
},
set: function(v) {
if(v == "")
return;
var info = that.getOutputInfo(0);
if(info.name == v)
return;
info.name = v;
if(that.graph)
that.graph.renameGlobalInput(input_name, v);
input_name = v;
},
enumerable: true
});
Object.defineProperty(this.properties, "type", {
get: function() { return that.outputs[0].type; },
set: function(v) {
that.outputs[0].type = v;
if(that.graph)
that.graph.changeGlobalInputType(input_name, that.outputs[0].type);
},
enumerable: true
});
}
GlobalInput.title = "Input";
GlobalInput.desc = "Input of the graph";
//When added to graph tell the graph this is a new global input
GlobalInput.prototype.onAdded = function()
{
this.graph.addGlobalInput( this.properties.name, this.properties.type );
}
GlobalInput.prototype.onExecute = function()
{
var name = this.properties.name;
//read from global input
var data = this.graph.global_inputs[name];
if(!data) return;
//put through output
this.setOutputData(0,data.value);
}
LiteGraph.registerNodeType("graph/input", GlobalInput);
//Output for a subgraph
function GlobalOutput()
{
//random name to avoid problems with other outputs when added
var output_name = "output_" + (Math.random()*1000).toFixed();
this.addInput(output_name, null);
this.properties = {name: output_name, type: null };
var that = this;
Object.defineProperty(this.properties, "name", {
get: function() {
return output_name;
},
set: function(v) {
if(v == "")
return;
var info = that.getInputInfo(0);
if(info.name == v)
return;
info.name = v;
if(that.graph)
that.graph.renameGlobalOutput(output_name, v);
output_name = v;
},
enumerable: true
});
Object.defineProperty(this.properties, "type", {
get: function() { return that.inputs[0].type; },
set: function(v) {
that.inputs[0].type = v;
if(that.graph)
that.graph.changeGlobalInputType( output_name, that.inputs[0].type );
},
enumerable: true
});
}
GlobalOutput.title = "Ouput";
GlobalOutput.desc = "Output of the graph";
GlobalOutput.prototype.onAdded = function()
{
var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type );
}
GlobalOutput.prototype.onExecute = function()
{
this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) );
}
LiteGraph.registerNodeType("graph/output", GlobalOutput);
//Constant
function Constant()

538
src/nodes/glfx.js Normal file
View File

@@ -0,0 +1,538 @@
//Works with Litegl.js to create WebGL nodes
if(typeof(LiteGraph) != "undefined")
{
// Texture Lens *****************************************
function LGraphFXLens()
{
this.addInput("Texture","Texture");
this.addInput("Aberration","number");
this.addInput("Distortion","number");
this.addInput("Blur","number");
this.addOutput("Texture","Texture");
this.properties = { aberration:1.0, distortion: 1.0, blur: 1.0, precision: LGraphTexture.DEFAULT };
if(!LGraphFXLens._shader)
LGraphFXLens._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXLens.pixel_shader );
}
LGraphFXLens.title = "Lens";
LGraphFXLens.desc = "Camera Lens distortion";
LGraphFXLens.widgets_info = {
"precision": { widget:"combo", values: LGraphTexture.MODE_VALUES }
};
LGraphFXLens.prototype.onExecute = function()
{
var tex = this.getInputData(0);
if(this.properties.precision === LGraphTexture.PASS_THROUGH )
{
this.setOutputData(0,tex);
return;
}
if(!tex) return;
this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision );
//iterations
var aberration = this.properties.aberration;
if( this.isInputConnected(1) )
{
aberration = this.getInputData(1);
this.properties.aberration = aberration;
}
var distortion = this.properties.distortion;
if( this.isInputConnected(2) )
{
distortion = this.getInputData(2);
this.properties.distortion = distortion;
}
var blur = this.properties.blur;
if( this.isInputConnected(3) )
{
blur = this.getInputData(3);
this.properties.blur = blur;
}
gl.disable( gl.BLEND );
gl.disable( gl.DEPTH_TEST );
var mesh = Mesh.getScreenQuad();
var shader = LGraphFXLens._shader;
var camera = Renderer._current_camera;
this._tex.drawTo( function() {
tex.bind(0);
shader.uniforms({u_texture:0, u_aberration: aberration, u_distortion: distortion, u_blur: blur })
.draw(mesh);
});
this.setOutputData(0, this._tex);
}
LGraphFXLens.pixel_shader = "precision highp float;\n\
precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform vec2 u_camera_planes;\n\
uniform float u_aberration;\n\
uniform float u_distortion;\n\
uniform float u_blur;\n\
\n\
void main() {\n\
vec2 coord = v_coord;\n\
float dist = distance(vec2(0.5), coord);\n\
vec2 dist_coord = coord - vec2(0.5);\n\
float percent = 1.0 + ((0.5 - dist) / 0.5) * u_distortion;\n\
dist_coord *= percent;\n\
coord = dist_coord + vec2(0.5);\n\
vec4 color = texture2D(u_texture,coord, u_blur * dist);\n\
color.r = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0+0.01*u_aberration), u_blur * dist ).r;\n\
color.b = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0-0.01*u_aberration), u_blur * dist ).b;\n\
gl_FragColor = color;\n\
}\n\
";
/*
float normalized_tunable_sigmoid(float xs, float k)\n\
{\n\
xs = xs * 2.0 - 1.0;\n\
float signx = sign(xs);\n\
float absx = abs(xs);\n\
return signx * ((-k - 1.0)*absx)/(2.0*(-2.0*k*absx+k-1.0)) + 0.5;\n\
}\n\
*/
LiteGraph.registerNodeType("fx/lens", LGraphFXLens );
window.LGraphFXLens = LGraphFXLens;
//*******************************************************
function LGraphFXBokeh()
{
this.addInput("Texture","Texture");
this.addInput("Blurred","Texture");
this.addInput("Mask","Texture");
this.addInput("Threshold","number");
this.addOutput("Texture","Texture");
this.properties = { shape: "", size: 10, alpha: 1.0, threshold: 1.0, high_precision: false };
}
LGraphFXBokeh.title = "Bokeh";
LGraphFXBokeh.desc = "applies an Bokeh effect";
LGraphFXBokeh.widgets_info = {"shape": { widget:"texture" }};
LGraphFXBokeh.prototype.onExecute = function()
{
var tex = this.getInputData(0);
var blurred_tex = this.getInputData(1);
var mask_tex = this.getInputData(2);
if(!tex || !mask_tex || !this.properties.shape)
{
this.setOutputData(0, tex);
return;
}
if(!blurred_tex)
blurred_tex = tex;
var shape_tex = LGraphTexture.getTexture( this.properties.shape );
if(!shape_tex)
return;
var threshold = this.properties.threshold;
if( this.isInputConnected(3) )
{
threshold = this.getInputData(3);
this.properties.threshold = threshold;
}
var precision = gl.UNSIGNED_BYTE;
if(this.properties.high_precision)
precision = gl.half_float_ext ? gl.HALF_FLOAT_OES : gl.FLOAT;
if(!this._temp_texture || this._temp_texture.type != precision ||
this._temp_texture.width != tex.width || this._temp_texture.height != tex.height)
this._temp_texture = new GL.Texture( tex.width, tex.height, { type: precision, format: gl.RGBA, filter: gl.LINEAR });
//iterations
var size = this.properties.size;
var first_shader = LGraphFXBokeh._first_shader;
if(!first_shader)
first_shader = LGraphFXBokeh._first_shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXBokeh._first_pixel_shader );
var second_shader = LGraphFXBokeh._second_shader;
if(!second_shader)
second_shader = LGraphFXBokeh._second_shader = new GL.Shader( LGraphFXBokeh._second_vertex_shader, LGraphFXBokeh._second_pixel_shader );
var points_mesh = this._points_mesh;
if(!points_mesh || points_mesh._width != tex.width || points_mesh._height != tex.height || points_mesh._spacing != 2)
points_mesh = this.createPointsMesh( tex.width, tex.height, 2 );
var screen_mesh = Mesh.getScreenQuad();
var point_size = this.properties.size;
var min_light = this.properties.min_light;
var alpha = this.properties.alpha;
gl.disable( gl.DEPTH_TEST );
gl.disable( gl.BLEND );
this._temp_texture.drawTo( function() {
tex.bind(0);
blurred_tex.bind(1);
mask_tex.bind(2);
first_shader.uniforms({u_texture:0, u_texture_blur:1, u_mask: 2, u_texsize: [tex.width, tex.height] })
.draw(screen_mesh);
});
this._temp_texture.drawTo( function() {
//clear because we use blending
//gl.clearColor(0.0,0.0,0.0,1.0);
//gl.clear( gl.COLOR_BUFFER_BIT );
gl.enable( gl.BLEND );
gl.blendFunc( gl.ONE, gl.ONE );
tex.bind(0);
shape_tex.bind(3);
second_shader.uniforms({u_texture:0, u_mask: 2, u_shape:3, u_alpha: alpha, u_threshold: threshold, u_pointSize: point_size, u_itexsize: [1.0/tex.width, 1.0/tex.height] })
.draw(points_mesh, gl.POINTS);
});
this.setOutputData(0, this._temp_texture);
}
LGraphFXBokeh.prototype.createPointsMesh = function(width, height, spacing)
{
var nwidth = Math.round(width / spacing);
var nheight = Math.round(height / spacing);
var vertices = new Float32Array(nwidth * nheight * 2);
var ny = -1;
var dx = 2/width * spacing;
var dy = 2/height * spacing;
for(var y = 0; y < nheight; ++y )
{
var nx = -1;
for(var x = 0; x < nwidth; ++x )
{
var pos = y*nwidth*2 + x*2;
vertices[pos] = nx;
vertices[pos+1] = ny;
nx += dx;
}
ny += dy;
}
this._points_mesh = GL.Mesh.load({vertices2D: vertices});
this._points_mesh._width = width;
this._points_mesh._height = height;
this._points_mesh._spacing = spacing;
return this._points_mesh;
}
/*
LGraphTextureBokeh._pixel_shader = "precision highp float;\n\
varying vec2 a_coord;\n\
uniform sampler2D u_texture;\n\
uniform sampler2D u_shape;\n\
\n\
void main() {\n\
vec4 color = texture2D( u_texture, gl_PointCoord );\n\
color *= v_color * u_alpha;\n\
gl_FragColor = color;\n\
}\n";
*/
LGraphFXBokeh._first_pixel_shader = "precision highp float;\n\
precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform sampler2D u_texture_blur;\n\
uniform sampler2D u_mask;\n\
\n\
void main() {\n\
vec4 color = texture2D(u_texture, v_coord);\n\
vec4 blurred_color = texture2D(u_texture_blur, v_coord);\n\
float mask = texture2D(u_mask, v_coord).x;\n\
gl_FragColor = mix(color, blurred_color, mask);\n\
}\n\
";
LGraphFXBokeh._second_vertex_shader = "precision highp float;\n\
attribute vec2 a_vertex2D;\n\
varying vec4 v_color;\n\
uniform sampler2D u_texture;\n\
uniform sampler2D u_mask;\n\
uniform vec2 u_itexsize;\n\
uniform float u_pointSize;\n\
uniform float u_threshold;\n\
void main() {\n\
vec2 coord = a_vertex2D * 0.5 + 0.5;\n\
v_color = texture2D( u_texture, coord );\n\
v_color += texture2D( u_texture, coord + vec2(u_itexsize.x, 0.0) );\n\
v_color += texture2D( u_texture, coord + vec2(0.0, u_itexsize.y));\n\
v_color += texture2D( u_texture, coord + u_itexsize);\n\
v_color *= 0.25;\n\
float mask = texture2D(u_mask, coord).x;\n\
float luminance = length(v_color) * mask;\n\
/*luminance /= (u_pointSize*u_pointSize)*0.01 */;\n\
luminance -= u_threshold;\n\
if(luminance < 0.0)\n\
{\n\
gl_Position.x = -100.0;\n\
return;\n\
}\n\
gl_PointSize = u_pointSize;\n\
gl_Position = vec4(a_vertex2D,0.0,1.0);\n\
}\n\
";
LGraphFXBokeh._second_pixel_shader = "precision highp float;\n\
varying vec4 v_color;\n\
uniform sampler2D u_shape;\n\
uniform float u_alpha;\n\
\n\
void main() {\n\
vec4 color = texture2D( u_shape, gl_PointCoord );\n\
color *= v_color * u_alpha;\n\
gl_FragColor = color;\n\
}\n";
LiteGraph.registerNodeType("fx/bokeh", LGraphFXBokeh );
window.LGraphFXBokeh = LGraphFXBokeh;
//************************************************
function LGraphFXGeneric()
{
this.addInput("Texture","Texture");
this.addInput("value1","number");
this.addInput("value2","number");
this.addOutput("Texture","Texture");
this.properties = { fx: "halftone", value1: 1, value2: 1, precision: LGraphTexture.DEFAULT };
}
LGraphFXGeneric.title = "FX";
LGraphFXGeneric.desc = "applies an FX from a list";
LGraphFXGeneric.widgets_info = {
"fx": { widget:"combo", values:["halftone","pixelate","lowpalette","noise"] },
"precision": { widget:"combo", values: LGraphTexture.MODE_VALUES }
};
LGraphFXGeneric.shaders = {};
LGraphFXGeneric.prototype.onExecute = function()
{
var tex = this.getInputData(0);
if(this.properties.precision === LGraphTexture.PASS_THROUGH )
{
this.setOutputData(0,tex);
return;
}
if(!tex) return;
this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision );
//iterations
var value1 = this.properties.value1;
if( this.isInputConnected(1) )
{
value1 = this.getInputData(1);
this.properties.value1 = value1;
}
var value2 = this.properties.value2;
if( this.isInputConnected(2) )
{
value2 = this.getInputData(2);
this.properties.value2 = value2;
}
var fx = this.properties.fx;
var shader = LGraphFXGeneric.shaders[ fx ];
if(!shader)
{
var pixel_shader_code = LGraphFXGeneric["pixel_shader_" + fx ];
if(!pixel_shader_code)
return;
shader = LGraphFXGeneric.shaders[ fx ] = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, pixel_shader_code );
}
gl.disable( gl.BLEND );
gl.disable( gl.DEPTH_TEST );
var mesh = Mesh.getScreenQuad();
var camera = Renderer._current_camera;
var noise = null;
if(fx == "noise")
noise = LGraphTexture.getNoiseTexture();
this._tex.drawTo( function() {
tex.bind(0);
if(fx == "noise")
noise.bind(1);
shader.uniforms({u_texture:0, u_noise:1, u_size: [tex.width, tex.height], u_rand:[ Math.random(), Math.random() ], u_value1: value1, u_value2: value2, u_camera_planes: [Renderer._current_camera.near,Renderer._current_camera.far] })
.draw(mesh);
});
this.setOutputData(0, this._tex);
}
LGraphFXGeneric.pixel_shader_halftone = "precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform vec2 u_camera_planes;\n\
uniform vec2 u_size;\n\
uniform float u_value1;\n\
uniform float u_value2;\n\
\n\
float pattern() {\n\
float s = sin(u_value1 * 3.1415), c = cos(u_value1 * 3.1415);\n\
vec2 tex = v_coord * u_size.xy;\n\
vec2 point = vec2(\n\
c * tex.x - s * tex.y ,\n\
s * tex.x + c * tex.y \n\
) * u_value2;\n\
return (sin(point.x) * sin(point.y)) * 4.0;\n\
}\n\
void main() {\n\
vec4 color = texture2D(u_texture, v_coord);\n\
float average = (color.r + color.g + color.b) / 3.0;\n\
gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);\n\
}\n";
LGraphFXGeneric.pixel_shader_pixelate = "precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform vec2 u_camera_planes;\n\
uniform vec2 u_size;\n\
uniform float u_value1;\n\
uniform float u_value2;\n\
\n\
void main() {\n\
vec2 coord = vec2( floor(v_coord.x * u_value1) / u_value1, floor(v_coord.y * u_value2) / u_value2 );\n\
vec4 color = texture2D(u_texture, coord);\n\
gl_FragColor = color;\n\
}\n";
LGraphFXGeneric.pixel_shader_lowpalette = "precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform vec2 u_camera_planes;\n\
uniform vec2 u_size;\n\
uniform float u_value1;\n\
uniform float u_value2;\n\
\n\
void main() {\n\
vec4 color = texture2D(u_texture, v_coord);\n\
gl_FragColor = floor(color * u_value1) / u_value1;\n\
}\n";
LGraphFXGeneric.pixel_shader_noise = "precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform sampler2D u_noise;\n\
uniform vec2 u_size;\n\
uniform float u_value1;\n\
uniform float u_value2;\n\
uniform vec2 u_rand;\n\
\n\
void main() {\n\
vec4 color = texture2D(u_texture, v_coord);\n\
vec3 noise = texture2D(u_noise, v_coord * vec2(u_size.x / 512.0, u_size.y / 512.0) + u_rand).xyz - vec3(0.5);\n\
gl_FragColor = vec4( color.xyz + noise * u_value1, color.a );\n\
}\n";
LiteGraph.registerNodeType("fx/generic", LGraphFXGeneric );
window.LGraphFXGeneric = LGraphFXGeneric;
// Vigneting ************************************
function LGraphFXVigneting()
{
this.addInput("Tex.","Texture");
this.addInput("intensity","number");
this.addOutput("Texture","Texture");
this.properties = { intensity: 1, invert: false, precision: LGraphTexture.DEFAULT };
if(!LGraphFXVigneting._shader)
LGraphFXVigneting._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXVigneting.pixel_shader );
}
LGraphFXVigneting.title = "Vigneting";
LGraphFXVigneting.desc = "Vigneting";
LGraphFXVigneting.widgets_info = {
"precision": { widget:"combo", values: LGraphTexture.MODE_VALUES }
};
LGraphFXVigneting.prototype.onExecute = function()
{
var tex = this.getInputData(0);
if(this.properties.precision === LGraphTexture.PASS_THROUGH )
{
this.setOutputData(0,tex);
return;
}
if(!tex) return;
this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision );
var intensity = this.properties.intensity;
if( this.isInputConnected(1) )
{
intensity = this.getInputData(1);
this.properties.intensity = intensity;
}
gl.disable( gl.BLEND );
gl.disable( gl.DEPTH_TEST );
var mesh = Mesh.getScreenQuad();
var shader = LGraphFXVigneting._shader;
var invert = this.properties.invert;
this._tex.drawTo( function() {
tex.bind(0);
shader.uniforms({u_texture:0, u_intensity: intensity, u_isize:[1/tex.width,1/tex.height], u_invert: invert ? 1 : 0}).draw(mesh);
});
this.setOutputData(0, this._tex);
}
LGraphFXVigneting.pixel_shader = "precision highp float;\n\
precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform float u_intensity;\n\
uniform int u_invert;\n\
\n\
void main() {\n\
float luminance = 1.0 - length( v_coord - vec2(0.5) ) * 1.414;\n\
vec4 color = texture2D(u_texture, v_coord);\n\
if(u_invert == 1)\n\
luminance = 1.0 - luminance;\n\
luminance = mix(1.0, luminance, u_intensity);\n\
gl_FragColor = vec4( luminance * color.xyz, color.a);\n\
}\n\
";
LiteGraph.registerNodeType("fx/vigneting", LGraphFXVigneting );
window.LGraphFXVigneting = LGraphFXVigneting;
}

1506
src/nodes/gltextures.js Normal file
View File

File diff suppressed because it is too large Load Diff

174
src/nodes/image.js
View File

@@ -1,6 +1,105 @@
(function(){
function GraphicsImage()
{
this.inputs = [];
this.addOutput("frame","image");
this.properties = {"url":""};
}
GraphicsImage.title = "Image";
GraphicsImage.desc = "Image loader";
GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}];
GraphicsImage.prototype.onAdded = function()
{
if(this.properties["url"] != "" && this.img == null)
{
this.loadImage(this.properties["url"]);
}
}
GraphicsImage.prototype.onDrawBackground = function(ctx)
{
if(this.img && this.size[0] > 5 && this.size[1] > 5)
ctx.drawImage(this.img, 0,0,this.size[0],this.size[1]);
}
GraphicsImage.prototype.onExecute = function()
{
if(!this.img)
this.boxcolor = "#000";
if(this.img && this.img.width)
this.setOutputData(0,this.img);
else
this.setOutputData(0,null);
if(this.img && this.img.dirty)
this.img.dirty = false;
}
GraphicsImage.prototype.onPropertyChange = function(name,value)
{
this.properties[name] = value;
if (name == "url" && value != "")
this.loadImage(value);
return true;
}
GraphicsImage.prototype.onDropFile = function(file, filename)
{
var img = new Image();
img.src = file;
this.img = img;
}
GraphicsImage.prototype.loadImage = function(url)
{
if(url == "")
{
this.img = null;
return;
}
this.trace("loading image...");
this.img = document.createElement("img");
var url = name;
if(url.substr(0,7) == "http://")
{
if(LiteGraph.proxy) //proxy external files
url = LiteGraph.proxy + url.substr(7);
}
this.img.src = url;
this.boxcolor = "#F95";
var that = this;
this.img.onload = function()
{
that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height );
this.dirty = true;
that.boxcolor = "#9F9";
that.setDirtyCanvas(true);
}
}
GraphicsImage.prototype.onWidget = function(e,widget)
{
if(widget.name == "load")
{
this.loadImage(this.properties["url"]);
}
}
LiteGraph.registerNodeType("graphics/image", GraphicsImage);
function ColorPalette()
{
this.addInput("f","number");
@@ -263,81 +362,6 @@ ImageFade.prototype.onExecute = function()
LiteGraph.registerNodeType("graphics/imagefade", ImageFade);
function GraphicsImage()
{
this.inputs = [];
this.addOutput("frame","image");
this.properties = {"url":""};
}
GraphicsImage.title = "Image";
GraphicsImage.desc = "Image loader";
GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}];
GraphicsImage.prototype.onAdded = function()
{
if(this.properties["url"] != "" && this.img == null)
{
this.loadImage(this.properties["url"]);
}
}
GraphicsImage.prototype.onExecute = function()
{
if(!this.img)
this.boxcolor = "#000";
if(this.img && this.img.width)
this.setOutputData(0,this.img);
else
this.setOutputData(0,null);
if(this.img.dirty)
this.img.dirty = false;
}
GraphicsImage.prototype.onPropertyChange = function(name,value)
{
this.properties[name] = value;
if (name == "url" && value != "")
this.loadImage(value);
return true;
}
GraphicsImage.prototype.loadImage = function(url)
{
if(url == "")
{
this.img = null;
return;
}
this.trace("loading image...");
this.img = document.createElement("img");
this.img.src = "miniproxy.php?url=" + url;
this.boxcolor = "#F95";
var that = this;
this.img.onload = function()
{
that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height );
this.dirty = true;
that.boxcolor = "#9F9";
that.setDirtyCanvas(true);
}
}
GraphicsImage.prototype.onWidget = function(e,widget)
{
if(widget.name == "load")
{
this.loadImage(this.properties["url"]);
}
}
LiteGraph.registerNodeType("graphics/image", GraphicsImage);
function ImageCrop()
{

4
utils/deploy_files.txt
View File

@@ -2,4 +2,6 @@
../src/nodes/base.js
../src/nodes/interface.js
../src/nodes/math.js
../src/nodes/image.js
../src/nodes/image.js
../src/nodes/gltextures.js
../src/nodes/glfx.js