\n
\n(function(global){\n// *************************************************************\n// LiteGraph CLASS *******\n// *************************************************************\n\n/**\n* The Global Scope. It contains all the registered node classes.\n*\n* @class LiteGraph\n* @constructor\n*/\n\nvar LiteGraph = global.LiteGraph = {\n\n\tVERSION: 0.4,\n\n\tCANVAS_GRID_SIZE: 10,\n\t\n\tNODE_TITLE_HEIGHT: 30,\n\tNODE_TITLE_TEXT_Y: 20,\n\tNODE_SLOT_HEIGHT: 20,\n\tNODE_WIDGET_HEIGHT: 20,\n\tNODE_WIDTH: 140,\n\tNODE_MIN_WIDTH: 50,\n\tNODE_COLLAPSED_RADIUS: 10,\n\tNODE_COLLAPSED_WIDTH: 80,\n\tNODE_TITLE_COLOR: "#999",\n\tNODE_TEXT_SIZE: 14,\n\tNODE_TEXT_COLOR: "#AAA",\n\tNODE_SUBTEXT_SIZE: 12,\n\tNODE_DEFAULT_COLOR: "#333",\n\tNODE_DEFAULT_BGCOLOR: "#353535",\n\tNODE_DEFAULT_BOXCOLOR: "#666",\n\tNODE_DEFAULT_SHAPE: "box",\n\tDEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)",\n\tDEFAULT_GROUP_FONT: 24,\n\n\tLINK_COLOR: "#9A9",\n\tEVENT_LINK_COLOR: "#A86",\n\tCONNECTING_LINK_COLOR: "#AFA",\n\n\tMAX_NUMBER_OF_NODES: 1000, //avoid infinite loops\n\tDEFAULT_POSITION: [100,100],//default node position\n\tVALID_SHAPES: ["default","box","round","card"], //,"circle"\n\n\t//shapes are used for nodes but also for slots\n\tBOX_SHAPE: 1,\n\tROUND_SHAPE: 2,\n\tCIRCLE_SHAPE: 3,\n\tCARD_SHAPE: 4,\n\tARROW_SHAPE: 5,\n\n\t//enums\n\tINPUT: 1,\n\tOUTPUT: 2,\n\n\tEVENT: -1, //for outputs\n\tACTION: -1, //for inputs\n\n\tALWAYS: 0,\n\tON_EVENT: 1,\n\tNEVER: 2,\n\tON_TRIGGER: 3,\n\n\tUP: 1,\n\tDOWN:2,\n\tLEFT:3,\n\tRIGHT:4,\n\tCENTER:5,\n\n\tSTRAIGHT_LINK: 0,\n\tLINEAR_LINK: 1,\n\tSPLINE_LINK: 2,\n\n\tNORMAL_TITLE: 0,\n\tNO_TITLE: 1,\n\tTRANSPARENT_TITLE: 2,\n\tAUTOHIDE_TITLE: 3,\n\n\tproxy: null, //used to redirect calls\n\tnode_images_path: "",\n\n\tdebug: false,\n\tcatch_exceptions: true,\n\tthrow_errors: true,\n\tallow_scripts: false, //if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration), which could lead to exploits\n\tregistered_node_types: {}, //nodetypes by string\n\tnode_types_by_file_extension: {}, //used for droping files in the canvas\n\tNodes: {}, //node types by classname\n\n\tsearchbox_extras: {}, //used to add extra features to the search box\n\n\t/**\n\t* Register a node class so it can be listed when the user wants to create a new one\n\t* @method registerNodeType\n\t* @param {String} type name of the node and path\n\t* @param {Class} base_class class containing the structure of a node\n\t*/\n\n\tregisterNodeType: function(type, base_class)\n\t{\n\t\tif(!base_class.prototype)\n\t\t\tthrow("Cannot register a simple object, it must be a class with a prototype");\n\t\tbase_class.type = type;\n\n\t\tif(LiteGraph.debug)\n\t\t\tconsole.log("Node registered: " + type);\n\n\t\tvar categories = type.split("/");\n\t\tvar classname = base_class.name;\n\n\t\tvar pos = type.lastIndexOf("/");\n\t\tbase_class.category = type.substr(0,pos);\n\n\t\tif(!base_class.title)\n\t\t\tbase_class.title = classname;\n\t\t//info.name = name.substr(pos+1,name.length - pos);\n\n\t\t//extend class\n\t\tif(base_class.prototype) //is a class\n\t\t\tfor(var i in LGraphNode.prototype)\n\t\t\t\tif(!base_class.prototype[i])\n\t\t\t\t\tbase_class.prototype[i] = LGraphNode.prototype[i];\n\n\t\tObject.defineProperty( base_class.prototype, "shape",{\n\t\t\tset: function(v) {\n\t\t\t\tswitch(v)\n\t\t\t\t{\n\t\t\t\t\tcase "default": delete this._shape; break;\n\t\t\t\t\tcase "box": this._shape = LiteGraph.BOX_SHAPE; break;\n\t\t\t\t\tcase "round": this._shape = LiteGraph.ROUND_SHAPE; break;\n\t\t\t\t\tcase "circle": this._shape = LiteGraph.CIRCLE_SHAPE; break;\n\t\t\t\t\tcase "card": this._shape = LiteGraph.CARD_SHAPE; break;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tthis._shape = v;\n\t\t\t\t}\n\t\t\t},\n\t\t\tget: function(v)\n\t\t\t{\n\t\t\t\treturn this._shape;\n\t\t\t},\n\t\t\tenumerable: true\n\t\t});\n\n\t\tthis.registered_node_types[ type ] = base_class;\n\t\tif(base_class.constructor.name)\n\t\t\tthis.Nodes[ classname ] = base_class;\n\n\t\t//warnings\n\t\tif(base_class.prototype.onPropertyChange)\n\t\t\tconsole.warn("LiteGraph node class " + type + " has onPropertyChange method, it must be called onPropertyChanged with d at the end");\n\n\t\tif( base_class.supported_extensions )\n\t\t{\n\t\t\tfor(var i in base_class.supported_extensions )\n\t\t\t\tthis.node_types_by_file_extension[ base_class.supported_extensions[i].toLowerCase() ] = base_class;\n\t\t}\n\t},\n\n\t/**\n\t* Create a new node type by passing a function, it wraps it with a propper class and generates inputs according to the parameters of the function.\n\t* Useful to wrap simple methods that do not require properties, and that only process some input to generate an output.\n\t* @method wrapFunctionAsNode\n\t* @param {String} name node name with namespace (p.e.: 'math/sum')\n\t* @param {Function} func\n\t* @param {Array} param_types [optional] an array containing the type of every parameter, otherwise parameters will accept any type\n\t* @param {String} return_type [optional] string with the return type, otherwise it will be generic\n\t* @param {Object} properties [optional] properties to be configurable\n\t*/\n\twrapFunctionAsNode: function( name, func, param_types, return_type, properties )\n\t{\n\t\tvar params = Array(func.length);\n\t\tvar code = "";\n\t\tvar names = LiteGraph.getParameterNames( func );\n\t\tfor(var i = 0; i < names.length; ++i)\n\t\t\tcode += "this.addInput('"+names[i]+"',"+(param_types && param_types[i] ? "'" + param_types[i] + "'" : "0") + ");\\n";\n\t\tcode += "this.addOutput('out',"+( return_type ? "'" + return_type + "'" : 0 )+");\\n";\n\t\tif(properties)\n\t\t\tcode += "this.properties = " + JSON.stringify(properties) + ";\\n";\n\t\tvar classobj = Function(code);\n\t\tclassobj.title = name.split("/").pop();\n\t\tclassobj.desc = "Generated from " + func.name;\n\t\tclassobj.prototype.onExecute = function onExecute()\n\t\t{\n\t\t\tfor(var i = 0; i < params.length; ++i)\n\t\t\t\tparams[i] = this.getInputData(i);\n\t\t\tvar r = func.apply( this, params );\n\t\t\tthis.setOutputData(0,r);\n\t\t}\n\t\tthis.registerNodeType( name, classobj );\n\t},\n\n\t/**\n\t* Adds this method to all nodetypes, existing and to be created\n\t* (You can add it to LGraphNode.prototype but then existing node types wont have it)\n\t* @method addNodeMethod\n\t* @param {Function} func\n\t*/\n\taddNodeMethod: function( name, func )\n\t{\n\t\tLGraphNode.prototype[name] = func;\n\t\tfor(var i in this.registered_node_types)\n\t\t{\n\t\t\tvar type = this.registered_node_types[i];\n\t\t\tif(type.prototype[name])\n\t\t\t\ttype.prototype["_" + name] = type.prototype[name]; //keep old in case of replacing\n\t\t\ttype.prototype[name] = func;\n\t\t}\n\t},\n\n\t/**\n\t* Create a node of a given type with a name. The node is not attached to any graph yet.\n\t* @method createNode\n\t* @param {String} type full name of the node class. p.e. "math/sin"\n\t* @param {String} name a name to distinguish from other nodes\n\t* @param {Object} options to set options\n\t*/\n\n\tcreateNode: function( type, title, options )\n\t{\n\t\tvar base_class = this.registered_node_types[type];\n\t\tif (!base_class)\n\t\t{\n\t\t\tif(LiteGraph.debug)\n\t\t\t\tconsole.log("GraphNode type \\"" + type + "\\" not registered.");\n\t\t\treturn null;\n\t\t}\n\n\t\tvar prototype = base_class.prototype || base_class;\n\n\t\ttitle = title || base_class.title || type;\n\n\t\tvar node = null;\n\n\t\tif( LiteGraph.catch_exceptions )\n\t\t{\n\t\t\ttry\n\t\t\t{\n\t\t\t\tnode = new base_class( title );\n\t\t\t}\n\t\t\tcatch (err)\n\t\t\t{\n\t\t\t\tconsole.error(err);\n\t\t\t\treturn null;\n\t\t\t}\n\t\t}\n\t\telse\n\t\t\tnode = new base_class( title );\n\n\t\tnode.type = type;\n\n\t\tif(!node.title && title) node.title = title;\n\t\tif(!node.properties) node.properties = {};\n\t\tif(!node.properties_info) node.properties_info = [];\n\t\tif(!node.flags) node.flags = {};\n\t\tif(!node.size) node.size = node.computeSize();\n\t\tif(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat();\n\t\tif(!node.mode) node.mode = LiteGraph.ALWAYS;\n\n\t\t//extra options\n\t\tif(options)\n\t\t{\n\t\t\tfor(var i in options)\n\t\t\t\tnode[i] = options[i];\n\t\t}\n\n\t\treturn node;\n\t},\n\n\t/**\n\t* Returns a registered node type with a given name\n\t* @method getNodeType\n\t* @param {String} type full name of the node class. p.e. "math/sin"\n\t* @return {Class} the node class\n\t*/\n\tgetNodeType: function(type)\n\t{\n\t\treturn this.registered_node_types[type];\n\t},\n\n\t/**\n\t* Returns a list of node types matching one category\n\t* @method getNodeType\n\t* @param {String} category category name\n\t* @return {Array} array with all the node classes\n\t*/\n\n\tgetNodeTypesInCategory: function( category, filter )\n\t{\n\t\tvar r = [];\n\t\tfor(var i in this.registered_node_types)\n\t\t{\n\t\t\tvar type = this.registered_node_types[i];\n\t\t\tif(filter && type.filter && type.filter != filter)\n\t\t\t\tcontinue;\n\n\t\t\tif(category == "" )\n\t\t\t{\n\t\t\t\tif (type.category == null)\n\t\t\t\t\tr.push(type);\n\t\t\t}\n\t\t\telse if (type.category == category)\n\t\t\t\tr.push(type);\n\t\t}\n\n\t\treturn r;\n\t},\n\n\t/**\n\t* Returns a list with all the node type categories\n\t* @method getNodeTypesCategories\n\t* @return {Array} array with all the names of the categories\n\t*/\n\n\tgetNodeTypesCategories: function()\n\t{\n\t\tvar categories = {"":1};\n\t\tfor(var i in this.registered_node_types)\n\t\t\tif(this.registered_node_types[i].category && !this.registered_node_types[i].skip_list)\n\t\t\t\tcategories[ this.registered_node_types[i].category ] = 1;\n\t\tvar result = [];\n\t\tfor(var i in categories)\n\t\t\tresult.push(i);\n\t\treturn result;\n\t},\n\n\t//debug purposes: reloads all the js scripts that matches a wilcard\n\treloadNodes: function (folder_wildcard)\n\t{\n\t\tvar tmp = document.getElementsByTagName("script");\n\t\t//weird, this array changes by its own, so we use a copy\n\t\tvar script_files = [];\n\t\tfor(var i in tmp)\n\t\t\tscript_files.push(tmp[i]);\n\n\n\t\tvar docHeadObj = document.getElementsByTagName("head")[0];\n\t\tfolder_wildcard = document.location.href + folder_wildcard;\n\n\t\tfor(var i in script_files)\n\t\t{\n\t\t\tvar src = script_files[i].src;\n\t\t\tif( !src || src.substr(0,folder_wildcard.length ) != folder_wildcard)\n\t\t\t\tcontinue;\n\n\t\t\ttry\n\t\t\t{\n\t\t\t\tif(LiteGraph.debug)\n\t\t\t\t\tconsole.log("Reloading: " + src);\n\t\t\t\tvar dynamicScript = document.createElement("script");\n\t\t\t\tdynamicScript.type = "text/javascript";\n\t\t\t\tdynamicScript.src = src;\n\t\t\t\tdocHeadObj.appendChild(dynamicScript);\n\t\t\t\tdocHeadObj.removeChild(script_files[i]);\n\t\t\t}\n\t\t\tcatch (err)\n\t\t\t{\n\t\t\t\tif(LiteGraph.throw_errors)\n\t\t\t\t\tthrow err;\n\t\t\t\tif(LiteGraph.debug)\n\t\t\t\t\tconsole.log("Error while reloading " + src);\n\t\t\t}\n\t\t}\n\n\t\tif(LiteGraph.debug)\n\t\t\tconsole.log("Nodes reloaded");\n\t},\n\n\t//separated just to improve if it doesnt work\n\tcloneObject: function(obj, target)\n\t{\n\t\tif(obj == null) return null;\n\t\tvar r = JSON.parse( JSON.stringify( obj ) );\n\t\tif(!target) return r;\n\n\t\tfor(var i in r)\n\t\t\ttarget[i] = r[i];\n\t\treturn target;\n\t},\n\n\tisValidConnection: function( type_a, type_b )\n\t{\n\t\tif( !type_a || //generic output\n\t\t\t!type_b || //generic input\n\t\t\ttype_a == type_b || //same type (is valid for triggers)\n\t\t\ttype_a == LiteGraph.EVENT && type_b == LiteGraph.ACTION )\n return true;\n\n\t\t// Enforce string type to handle toLowerCase call (-1 number not ok)\n\t\ttype_a = String(type_a); \n\t\ttype_b = String(type_b);\n\t\ttype_a = type_a.toLowerCase();\n\t\ttype_b = type_b.toLowerCase();\n\n\t\t// For nodes supporting multiple connection types\n\t\tif( type_a.indexOf(",") == -1 && type_b.indexOf(",") == -1 )\n\t\t\treturn type_a == type_b;\n\n\t\t// Check all permutations to see if one is valid\n\t\tvar supported_types_a = type_a.split(",");\n\t\tvar supported_types_b = type_b.split(",");\n\t\tfor(var i = 0; i < supported_types_a.length; ++i)\n\t\t\tfor(var j = 0; j < supported_types_b.length; ++j)\n\t\t\t\tif( supported_types_a[i] == supported_types_b[j] )\n\t\t\t\t\treturn true;\n\n\t\treturn false;\n\t},\n\n\tregisterSearchboxExtra: function( node_type, description, data )\n\t{\n\t\tthis.searchbox_extras[ description ] = { type: node_type, desc: description, data: data };\n\t}\n};\n\n//timer that works everywhere\nif(typeof(performance) != "undefined")\n\tLiteGraph.getTime = performance.now.bind(performance);\nelse if(typeof(Date) != "undefined" && Date.now)\n\tLiteGraph.getTime = Date.now.bind(Date);\nelse if(typeof(process) != "undefined")\n\tLiteGraph.getTime = function(){\n\t\tvar t = process.hrtime();\n\t\treturn t[0]*0.001 + t[1]*(1e-6);\n\t}\nelse\n LiteGraph.getTime = function getTime() { return (new Date).getTime(); }\n\n\n\n\n\n\n//*********************************************************************************\n// LGraph CLASS\n//*********************************************************************************\n\n/**\n* 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.\n*\n* @class LGraph\n* @constructor\n* @param {Object} o data from previous serialization [optional]\n*/\n\nfunction LGraph( o )\n{\n\tif (LiteGraph.debug)\n\t\tconsole.log("Graph created");\n\tthis.list_of_graphcanvas = null;\n\tthis.clear();\n\n\tif(o)\n\t\tthis.configure(o);\n}\n\nglobal.LGraph = LiteGraph.LGraph = LGraph;\n\n//default supported types\nLGraph.supported_types = ["number","string","boolean"];\n\n//used to know which types of connections support this graph (some graphs do not allow certain types)\nLGraph.prototype.getSupportedTypes = function() { return this.supported_types || LGraph.supported_types; }\n\nLGraph.STATUS_STOPPED = 1;\nLGraph.STATUS_RUNNING = 2;\n\n/**\n* Removes all nodes from this graph\n* @method clear\n*/\n\nLGraph.prototype.clear = function()\n{\n\tthis.stop();\n\tthis.status = LGraph.STATUS_STOPPED;\n\n\tthis.last_node_id = 1;\n\tthis.last_link_id = 1;\n\n\tthis._version = -1; //used to detect changes\n\n\t//safe clear\n\tif(this._nodes)\n\tfor(var i = 0; i < this._nodes.length; ++i)\n\t{\n\t\tvar node = this._nodes[i];\n\t\tif(node.onRemoved)\n\t\t\tnode.onRemoved();\n\t}\n\n\t//nodes\n\tthis._nodes = [];\n\tthis._nodes_by_id = {};\n\tthis._nodes_in_order = []; //nodes that are executable sorted in execution order\n\tthis._nodes_executable = null; //nodes that contain onExecute\n\n\t//other scene stuff\n\tthis._groups = [];\n\n\t//links\n\tthis.links = {}; //container with all the links\n\n\t//iterations\n\tthis.iteration = 0;\n\n\t//custom data\n\tthis.config = {};\n\n\t//timing\n\tthis.globaltime = 0;\n\tthis.runningtime = 0;\n\tthis.fixedtime = 0;\n\tthis.fixedtime_lapse = 0.01;\n\tthis.elapsed_time = 0.01;\n\tthis.last_update_time = 0;\n\tthis.starttime = 0;\n\n\tthis.catch_errors = true;\n\n\t//subgraph_data\n\tthis.inputs = {};\n\tthis.outputs = {};\n\n\t//notify canvas to redraw\n\tthis.change();\n\n\tthis.sendActionToCanvas("clear");\n}\n\n/**\n* Attach Canvas to this graph\n* @method attachCanvas\n* @param {GraphCanvas} graph_canvas\n*/\n\nLGraph.prototype.attachCanvas = function(graphcanvas)\n{\n\tif(graphcanvas.constructor != LGraphCanvas)\n\t\tthrow("attachCanvas expects a LGraphCanvas instance");\n\tif(graphcanvas.graph && graphcanvas.graph != this)\n\t\tgraphcanvas.graph.detachCanvas( graphcanvas );\n\n\tgraphcanvas.graph = this;\n\tif(!this.list_of_graphcanvas)\n\t\tthis.list_of_graphcanvas = [];\n\tthis.list_of_graphcanvas.push(graphcanvas);\n}\n\n/**\n* Detach Canvas from this graph\n* @method detachCanvas\n* @param {GraphCanvas} graph_canvas\n*/\nLGraph.prototype.detachCanvas = function(graphcanvas)\n{\n\tif(!this.list_of_graphcanvas)\n\t\treturn;\n\n\tvar pos = this.list_of_graphcanvas.indexOf( graphcanvas );\n\tif(pos == -1)\n\t\treturn;\n\tgraphcanvas.graph = null;\n\tthis.list_of_graphcanvas.splice(pos,1);\n}\n\n/**\n* Starts running this graph every interval milliseconds.\n* @method start\n* @param {number} interval amount of milliseconds between executions, if 0 then it renders to the monitor refresh rate\n*/\n\nLGraph.prototype.start = function( interval )\n{\n\tif( this.status == LGraph.STATUS_RUNNING )\n\t\treturn;\n\tthis.status = LGraph.STATUS_RUNNING;\n\n\tif(this.onPlayEvent)\n\t\tthis.onPlayEvent();\n\n\tthis.sendEventToAllNodes("onStart");\n\n\t//launch\n\tthis.starttime = LiteGraph.getTime();\n\tthis.last_update_time = this.starttime;\n\tinterval = interval || 0;\n\tvar that = this;\n\n\tif(interval == 0 && typeof(window) != "undefined" && window.requestAnimationFrame )\n\t{\n\t\tfunction on_frame()\n\t\t{\n\t\t\tif(that.execution_timer_id != -1)\n\t\t\t\treturn;\n\t\t\twindow.requestAnimationFrame(on_frame);\n\t\t\tthat.runStep(1, !this.catch_errors );\n\t\t}\n\t\tthis.execution_timer_id = -1;\n\t\ton_frame();\n\t}\n\telse\n\t\tthis.execution_timer_id = setInterval( function() {\n\t\t\t//execute\n\t\t\tthat.runStep(1, !this.catch_errors );\n\t\t},interval);\n}\n\n/**\n* Stops the execution loop of the graph\n* @method stop execution\n*/\n\nLGraph.prototype.stop = function()\n{\n\tif( this.status == LGraph.STATUS_STOPPED )\n\t\treturn;\n\n\tthis.status = LGraph.STATUS_STOPPED;\n\n\tif(this.onStopEvent)\n\t\tthis.onStopEvent();\n\n\tif(this.execution_timer_id != null)\n\t{\n\t\tif( this.execution_timer_id != -1 )\n\t\t\tclearInterval(this.execution_timer_id);\n\t\tthis.execution_timer_id = null;\n\t}\n\n\tthis.sendEventToAllNodes("onStop");\n}\n\n/**\n* Run N steps (cycles) of the graph\n* @method runStep\n* @param {number} num number of steps to run, default is 1\n*/\n\nLGraph.prototype.runStep = function( num, do_not_catch_errors )\n{\n\tnum = num || 1;\n\n\tvar start = LiteGraph.getTime();\n\tthis.globaltime = 0.001 * (start - this.starttime);\n\n\tvar nodes = this._nodes_executable ? this._nodes_executable : this._nodes;\n\tif(!nodes)\n\t\treturn;\n\n\tif( do_not_catch_errors )\n\t{\n\t\t//iterations\n\t\tfor(var i = 0; i < num; i++)\n\t\t{\n\t\t\tfor( var j = 0, l = nodes.length; j < l; ++j )\n\t\t\t{\n\t\t\t\tvar node = nodes[j];\n\t\t\t\tif( node.mode == LiteGraph.ALWAYS && node.onExecute )\n\t\t\t\t\tnode.onExecute();\n\t\t\t}\n\n\t\t\tthis.fixedtime += this.fixedtime_lapse;\n\t\t\tif( this.onExecuteStep )\n\t\t\t\tthis.onExecuteStep();\n\t\t}\n\n\t\tif( this.onAfterExecute )\n\t\t\tthis.onAfterExecute();\n\t}\n\telse\n\t{\n\t\ttry\n\t\t{\n\t\t\t//iterations\n\t\t\tfor(var i = 0; i < num; i++)\n\t\t\t{\n\t\t\t\tfor( var j = 0, l = nodes.length; j < l; ++j )\n\t\t\t\t{\n\t\t\t\t\tvar node = nodes[j];\n\t\t\t\t\tif( node.mode == LiteGraph.ALWAYS && node.onExecute )\n\t\t\t\t\t\tnode.onExecute();\n\t\t\t\t}\n\n\t\t\t\tthis.fixedtime += this.fixedtime_lapse;\n\t\t\t\tif( this.onExecuteStep )\n\t\t\t\t\tthis.onExecuteStep();\n\t\t\t}\n\n\t\t\tif( this.onAfterExecute )\n\t\t\t\tthis.onAfterExecute();\n\t\t\tthis.errors_in_execution = false;\n\t\t}\n\t\tcatch (err)\n\t\t{\n\t\t\tthis.errors_in_execution = true;\n\t\t\tif(LiteGraph.throw_errors)\n\t\t\t\tthrow err;\n\t\t\tif(LiteGraph.debug)\n\t\t\t\tconsole.log("Error during execution: " + err);\n\t\t\tthis.stop();\n\t\t}\n\t}\n\n\tvar now = LiteGraph.getTime();\n\tvar elapsed = now - start;\n\tif (elapsed == 0)\n\t\telapsed = 1;\n\tthis.execution_time = 0.001 * elapsed;\n\tthis.globaltime += 0.001 * elapsed;\n\tthis.iteration += 1;\n\tthis.elapsed_time = (now - this.last_update_time) * 0.001;\n\tthis.last_update_time = now;\n}\n\n/**\n* Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\n* nodes with only inputs.\n* @method updateExecutionOrder\n*/\nLGraph.prototype.updateExecutionOrder = function()\n{\n\tthis._nodes_in_order = this.computeExecutionOrder( false );\n\tthis._nodes_executable = [];\n\tfor(var i = 0; i < this._nodes_in_order.length; ++i)\n\t\tif( this._nodes_in_order[i].onExecute )\n\t\t\tthis._nodes_executable.push( this._nodes_in_order[i] );\n}\n\n//This is more internal, it computes the order and returns it\nLGraph.prototype.computeExecutionOrder = function( only_onExecute, set_level )\n{\n\tvar L = [];\n\tvar S = [];\n\tvar M = {};\n\tvar visited_links = {}; //to avoid repeating links\n\tvar remaining_links = {}; //to a\n\n\t//search for the nodes without inputs (starting nodes)\n\tfor (var i = 0, l = this._nodes.length; i < l; ++i)\n\t{\n\t\tvar node = this._nodes[i];\n\t\tif( only_onExecute && !node.onExecute )\n\t\t\tcontinue;\n\n\t\tM[node.id] = node; //add to pending nodes\n\n\t\tvar num = 0; //num of input connections\n\t\tif(node.inputs)\n\t\t\tfor(var j = 0, l2 = node.inputs.length; j < l2; j++)\n\t\t\t\tif(node.inputs[j] && node.inputs[j].link != null)\n\t\t\t\t\tnum += 1;\n\n\t\tif(num == 0) //is a starting node\n\t\t{\n\t\t\tS.push(node);\n\t\t\tif(set_level)\n\t\t\t\tnode._level = 1;\n\t\t}\n\t\telse //num of input links\n\t\t{\n\t\t\tif(set_level)\n\t\t\t\tnode._level = 0;\n\t\t\tremaining_links[node.id] = num;\n\t\t}\n\t}\n\n\twhile(true)\n\t{\n\t\tif(S.length == 0)\n\t\t\tbreak;\n\n\t\t//get an starting node\n\t\tvar node = S.shift();\n\t\tL.push(node); //add to ordered list\n\t\tdelete M[node.id]; //remove from the pending nodes\n\n\t\tif(!node.outputs)\n\t\t\tcontinue;\n\n\t\t//for every output\n\t\tfor(var i = 0; i < node.outputs.length; i++)\n\t\t{\n\t\t\tvar output = node.outputs[i];\n\t\t\t//not connected\n\t\t\tif(output == null || output.links == null || output.links.length == 0)\n\t\t\t\tcontinue;\n\n\t\t\t//for every connection\n\t\t\tfor(var j = 0; j < output.links.length; j++)\n\t\t\t{\n\t\t\t\tvar link_id = output.links[j];\n\t\t\t\tvar link = this.links[link_id];\n\t\t\t\tif(!link)\n\t\t\t\t\tcontinue;\n\n\t\t\t\t//already visited link (ignore it)\n\t\t\t\tif(visited_links[ link.id ])\n\t\t\t\t\tcontinue;\n\n\t\t\t\tvar target_node = this.getNodeById( link.target_id );\n\t\t\t\tif(target_node == null)\n\t\t\t\t{\n\t\t\t\t\tvisited_links[ link.id ] = true;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif(set_level && (!target_node._level || target_node._level <= node._level))\n\t\t\t\t\ttarget_node._level = node._level + 1;\n\n\t\t\t\tvisited_links[link.id] = true; //mark as visited\n\t\t\t\tremaining_links[target_node.id] -= 1; //reduce the number of links remaining\n\t\t\t\tif (remaining_links[ target_node.id ] == 0)\n\t\t\t\t\tS.push(target_node); //if no more links, then add to starters array\n\t\t\t}\n\t\t}\n\t}\n\n\t//the remaining ones (loops)\n\tfor(var i in M)\n\t\tL.push( M[i] );\n\n\tif( L.length != this._nodes.length && LiteGraph.debug )\n\t\tconsole.warn("something went wrong, nodes missing");\n\n\tvar l = L.length;\n\n\t//save order number in the node\n\tfor(var i = 0; i < l; ++i)\n\t\tL[i].order = i;\n\n\t//sort now by priority\n\tL = L.sort(function(A,B){ \n\t\tvar Ap = A.constructor.priority || A.priority || 0;\n\t\tvar Bp = B.constructor.priority || B.priority || 0;\n\t\tif(Ap == Bp)\n\t\t\treturn A.order - B.order;\n\t\treturn Ap - Bp;\n\t});\n\n\t//save order number in the node, again...\n\tfor(var i = 0; i < l; ++i)\n\t\tL[i].order = i;\n\n\treturn L;\n}\n\n/**\n* Returns all the nodes that could affect this one (ancestors) by crawling all the inputs recursively.\n* It doesnt include the node itself\n* @method getAncestors\n* @return {Array} an array with all the LGraphNodes that affect this node, in order of execution\n*/\nLGraph.prototype.getAncestors = function( node )\n{\n\tvar ancestors = [];\n\tvar pending = [node];\n\tvar visited = {};\n\n\twhile (pending.length)\n\t{\n\t\tvar current = pending.shift();\n\t\tif(!current.inputs)\n\t\t\tcontinue;\n\t\tif( !visited[ current.id ] && current != node )\n\t\t{\n\t\t\tvisited[ current.id ] = true;\n\t\t\tancestors.push( current );\n\t\t}\n\n\t\tfor(var i = 0; i < current.inputs.length;++i)\n\t\t{\n\t\t\tvar input = current.getInputNode(i);\n\t\t\tif( input && ancestors.indexOf( input ) == -1)\n\t\t\t{\n\t\t\t\tpending.push( input );\n\t\t\t}\n\t\t}\n\t}\n\n\tancestors.sort(function(a,b){ return a.order - b.order;});\n\treturn ancestors;\n}\n\n/**\n* Positions every node in a more readable manner\n* @method arrange\n*/\nLGraph.prototype.arrange = function( margin )\n{\n\tmargin = margin || 40;\n\n\tvar nodes = this.computeExecutionOrder( false, true );\n\tvar columns = [];\n\tfor(var i = 0; i < nodes.length; ++i)\n\t{\n\t\tvar node = nodes[i];\n\t\tvar col = node._level || 1;\n\t\tif(!columns[col])\n\t\t\tcolumns[col] = [];\n\t\tcolumns[col].push( node );\n\t}\n\n\tvar x = margin;\n\n\tfor(var i = 0; i < columns.length; ++i)\n\t{\n\t\tvar column = columns[i];\n\t\tif(!column)\n\t\t\tcontinue;\n\t\tvar max_size = 100;\n\t\tvar y = margin;\n\t\tfor(var j = 0; j < column.length; ++j)\n\t\t{\n\t\t\tvar node = column[j];\n\t\t\tnode.pos[0] = x;\n\t\t\tnode.pos[1] = y;\n\t\t\tif(node.size[0] > max_size)\n\t\t\t\tmax_size = node.size[0];\n\t\t\ty += node.size[1] + margin;\n\t\t}\n\t\tx += max_size + margin;\n\t}\n\n\tthis.setDirtyCanvas(true,true);\n}\n\n\n/**\n* Returns the amount of time the graph has been running in milliseconds\n* @method getTime\n* @return {number} number of milliseconds the graph has been running\n*/\nLGraph.prototype.getTime = function()\n{\n\treturn this.globaltime;\n}\n\n/**\n* Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant\n* @method getFixedTime\n* @return {number} number of milliseconds the graph has been running\n*/\n\nLGraph.prototype.getFixedTime = function()\n{\n\treturn this.fixedtime;\n}\n\n/**\n* Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\n* if the nodes are using graphical actions\n* @method getElapsedTime\n* @return {number} number of milliseconds it took the last cycle\n*/\n\nLGraph.prototype.getElapsedTime = function()\n{\n\treturn this.elapsed_time;\n}\n\n/**\n* Sends an event to all the nodes, useful to trigger stuff\n* @method sendEventToAllNodes\n* @param {String} eventname the name of the event (function to be called)\n* @param {Array} params parameters in array format\n*/\n\nLGraph.prototype.sendEventToAllNodes = function( eventname, params, mode )\n{\n\tmode = mode || LiteGraph.ALWAYS;\n\n\tvar nodes = this._nodes_in_order ? this._nodes_in_order : this._nodes;\n\tif(!nodes)\n\t\treturn;\n\n\tfor( var j = 0, l = nodes.length; j < l; ++j )\n\t{\n\t\tvar node = nodes[j];\n\t\tif( !node[eventname] || node.mode != mode )\n\t\t\tcontinue;\n\t\tif(params === undefined)\n\t\t\tnode[eventname]();\n\t\telse if(params && params.constructor === Array)\n\t\t\tnode[eventname].apply( node, params );\n\t\telse\n\t\t\tnode[eventname](params);\n\t}\n}\n\nLGraph.prototype.sendActionToCanvas = function(action, params)\n{\n\tif(!this.list_of_graphcanvas)\n\t\treturn;\n\n\tfor(var i = 0; i < this.list_of_graphcanvas.length; ++i)\n\t{\n\t\tvar c = this.list_of_graphcanvas[i];\n\t\tif( c[action] )\n\t\t\tc[action].apply(c, params);\n\t}\n}\n\n/**\n* Adds a new node instasnce to this graph\n* @method add\n* @param {LGraphNode} node the instance of the node\n*/\n\nLGraph.prototype.add = function( node, skip_compute_order)\n{\n\tif(!node)\n\t\treturn;\n\n\t//groups\n\tif( node.constructor === LGraphGroup )\n\t{\n\t\tthis._groups.push( node );\n\t\tthis.setDirtyCanvas(true);\n\t\tthis.change();\n\t\tnode.graph = this;\n\t\tthis._version++;\n\t\treturn;\n\t}\n\n\t//nodes\n\tif(node.id != -1 && this._nodes_by_id[node.id] != null)\n\t{\n\t\tconsole.warn("LiteGraph: there is already a node with this ID, changing it");\n\t\tnode.id = ++this.last_node_id;\n\t}\n\n\tif(this._nodes.length >= LiteGraph.MAX_NUMBER_OF_NODES)\n\t\tthrow("LiteGraph: max number of nodes in a graph reached");\n\n\t//give him an id\n\tif(node.id == null || node.id == -1)\n\t\tnode.id = ++this.last_node_id;\n\telse if (this.last_node_id < node.id)\n\t\tthis.last_node_id = node.id;\n\n\n\tnode.graph = this;\n\tthis._version++;\n\n\tthis._nodes.push(node);\n\tthis._nodes_by_id[node.id] = node;\n\n\tif(node.onAdded)\n\t\tnode.onAdded( this );\n\n\tif(this.config.align_to_grid)\n\t\tnode.alignToGrid();\n\n\tif(!skip_compute_order)\n\t\tthis.updateExecutionOrder();\n\n\tif(this.onNodeAdded)\n\t\tthis.onNodeAdded(node);\n\n\n\tthis.setDirtyCanvas(true);\n\tthis.change();\n\n\treturn node; //to chain actions\n}\n\n/**\n* Removes a node from the graph\n* @method remove\n* @param {LGraphNode} node the instance of the node\n*/\n\nLGraph.prototype.remove = function(node)\n{\n\tif(node.constructor === LiteGraph.LGraphGroup)\n\t{\n\t\tvar index = this._groups.indexOf(node);\n\t\tif(index != -1)\n\t\t\tthis._groups.splice(index,1);\n\t\tnode.graph = null;\n\t\tthis._version++;\n\t\tthis.setDirtyCanvas(true,true);\n\t\tthis.change();\n\t\treturn;\n\t}\n\n\tif(this._nodes_by_id[node.id] == null)\n\t\treturn; //not found\n\n\tif(node.ignore_remove)\n\t\treturn; //cannot be removed\n\n\t//disconnect inputs\n\tif(node.inputs)\n\t\tfor(var i = 0; i < node.inputs.length; i++)\n\t\t{\n\t\t\tvar slot = node.inputs[i];\n\t\t\tif(slot.link != null)\n\t\t\t\tnode.disconnectInput(i);\n\t\t}\n\n\t//disconnect outputs\n\tif(node.outputs)\n\t\tfor(var i = 0; i < node.outputs.length; i++)\n\t\t{\n\t\t\tvar slot = node.outputs[i];\n\t\t\tif(slot.links != null && slot.links.length)\n\t\t\t\tnode.disconnectOutput(i);\n\t\t}\n\n\t//node.id = -1; //why?\n\n\t//callback\n\tif(node.onRemoved)\n\t\tnode.onRemoved();\n\n\tnode.graph = null;\n\tthis._version++;\n\n\t//remove from canvas render\n\tif(this.list_of_graphcanvas)\n\t{\n\t\tfor(var i = 0; i < this.list_of_graphcanvas.length; ++i)\n\t\t{\n\t\t\tvar canvas = this.list_of_graphcanvas[i];\n\t\t\tif(canvas.selected_nodes[node.id])\n\t\t\t\tdelete canvas.selected_nodes[node.id];\n\t\t\tif(canvas.node_dragged == node)\n\t\t\t\tcanvas.node_dragged = null;\n\t\t}\n\t}\n\n\t//remove from containers\n\tvar pos = this._nodes.indexOf(node);\n\tif(pos != -1)\n\t\tthis._nodes.splice(pos,1);\n\tdelete this._nodes_by_id[node.id];\n\n\tif(this.onNodeRemoved)\n\t\tthis.onNodeRemoved(node);\n\n\tthis.setDirtyCanvas(true,true);\n\tthis.change();\n\n\tthis.updateExecutionOrder();\n}\n\n/**\n* Returns a node by its id.\n* @method getNodeById\n* @param {Number} id\n*/\n\nLGraph.prototype.getNodeById = function( id )\n{\n\tif( id == null )\n\t\treturn null;\n\treturn this._nodes_by_id[ id ];\n}\n\n/**\n* Returns a list of nodes that matches a class\n* @method findNodesByClass\n* @param {Class} classObject the class itself (not an string)\n* @return {Array} a list with all the nodes of this type\n*/\n\nLGraph.prototype.findNodesByClass = function(classObject)\n{\n\tvar r = [];\n\tfor(var i = 0, l = this._nodes.length; i < l; ++i)\n\t\tif(this._nodes[i].constructor === classObject)\n\t\t\tr.push(this._nodes[i]);\n\treturn r;\n}\n\n/**\n* Returns a list of nodes that matches a type\n* @method findNodesByType\n* @param {String} type the name of the node type\n* @return {Array} a list with all the nodes of this type\n*/\n\nLGraph.prototype.findNodesByType = function(type)\n{\n\tvar type = type.toLowerCase();\n\tvar r = [];\n\tfor(var i = 0, l = this._nodes.length; i < l; ++i)\n\t\tif(this._nodes[i].type.toLowerCase() == type )\n\t\t\tr.push(this._nodes[i]);\n\treturn r;\n}\n\n/**\n* Returns a list of nodes that matches a name\n* @method findNodesByTitle\n* @param {String} name the name of the node to search\n* @return {Array} a list with all the nodes with this name\n*/\n\nLGraph.prototype.findNodesByTitle = function(title)\n{\n\tvar result = [];\n\tfor(var i = 0, l = this._nodes.length; i < l; ++i)\n\t\tif(this._nodes[i].title == title)\n\t\t\tresult.push(this._nodes[i]);\n\treturn result;\n}\n\n/**\n* Returns the top-most node in this position of the canvas\n* @method getNodeOnPos\n* @param {number} x the x coordinate in canvas space\n* @param {number} y the y coordinate in canvas space\n* @param {Array} nodes_list a list with all the nodes to search from, by default is all the nodes in the graph\n* @return {LGraphNode} the node at this position or null\n*/\nLGraph.prototype.getNodeOnPos = function( x, y, nodes_list, margin )\n{\n\tnodes_list = nodes_list || this._nodes;\n\tfor (var i = nodes_list.length - 1; i >= 0; i--)\n\t{\n\t\tvar n = nodes_list[i];\n\t\tif(n.isPointInside( x, y, margin ))\n\t\t\treturn n;\n\t}\n\treturn null;\n}\n\n/**\n* Returns the top-most group in that position\n* @method getGroupOnPos\n* @param {number} x the x coordinate in canvas space\n* @param {number} y the y coordinate in canvas space\n* @return {LGraphGroup} the group or null\n*/\nLGraph.prototype.getGroupOnPos = function(x,y)\n{\n\tfor (var i = this._groups.length - 1; i >= 0; i--)\n\t{\n\t\tvar g = this._groups[i];\n\t\tif(g.isPointInside( x, y, 2, true ))\n\t\t\treturn g;\n\t}\n\treturn null;\n}\n\n// ********** GLOBALS *****************\n\n/**\n* Tell this graph it has a global graph input of this type\n* @method addGlobalInput\n* @param {String} name\n* @param {String} type\n* @param {*} value [optional]\n*/\nLGraph.prototype.addInput = function(name, type, value)\n{\n\tvar input = this.inputs[ name ];\n\tif( input ) //already exist\n\t\treturn;\n\n\tthis.inputs[ name ] = { name: name, type: type, value: value };\n\tthis._version++;\n\n\tif(this.onInputAdded)\n\t\tthis.onInputAdded(name, type);\n\n\tif(this.onInputsOutputsChange)\n\t\tthis.onInputsOutputsChange();\n}\n\n/**\n* Assign a data to the global graph input\n* @method setGlobalInputData\n* @param {String} name\n* @param {*} data\n*/\nLGraph.prototype.setInputData = function(name, data)\n{\n\tvar input = this.inputs[name];\n\tif (!input)\n\t\treturn;\n\tinput.value = data;\n}\n\n/**\n* Returns the current value of a global graph input\n* @method getInputData\n* @param {String} name\n* @return {*} the data\n*/\nLGraph.prototype.getInputData = function(name)\n{\n\tvar input = this.inputs[name];\n\tif (!input)\n\t\treturn null;\n\treturn input.value;\n}\n\n/**\n* Changes the name of a global graph input\n* @method renameInput\n* @param {String} old_name\n* @param {String} new_name\n*/\nLGraph.prototype.renameInput = function(old_name, name)\n{\n\tif(name == old_name)\n\t\treturn;\n\n\tif(!this.inputs[old_name])\n\t\treturn false;\n\n\tif(this.inputs[name])\n\t{\n\t\tconsole.error("there is already one input with that name");\n\t\treturn false;\n\t}\n\n\tthis.inputs[name] = this.inputs[old_name];\n\tdelete this.inputs[old_name];\n\tthis._version++;\n\n\tif(this.onInputRenamed)\n\t\tthis.onInputRenamed(old_name, name);\n\n\tif(this.onInputsOutputsChange)\n\t\tthis.onInputsOutputsChange();\n}\n\n/**\n* Changes the type of a global graph input\n* @method changeInputType\n* @param {String} name\n* @param {String} type\n*/\nLGraph.prototype.changeInputType = function(name, type)\n{\n\tif(!this.inputs[name])\n\t\treturn false;\n\n\tif(this.inputs[name].type && this.inputs[name].type.toLowerCase() == type.toLowerCase() )\n\t\treturn;\n\n\tthis.inputs[name].type = type;\n\tthis._version++;\n\tif(this.onInputTypeChanged)\n\t\tthis.onInputTypeChanged(name, type);\n}\n\n/**\n* Removes a global graph input\n* @method removeInput\n* @param {String} name\n* @param {String} type\n*/\nLGraph.prototype.removeInput = function(name)\n{\n\tif(!this.inputs[name])\n\t\treturn false;\n\n\tdelete this.inputs[name];\n\tthis._version++;\n\n\tif(this.onInputRemoved)\n\t\tthis.onInputRemoved(name);\n\n\tif(this.onInputsOutputsChange)\n\t\tthis.onInputsOutputsChange();\n\treturn true;\n}\n\n/**\n* Creates a global graph output\n* @method addOutput\n* @param {String} name\n* @param {String} type\n* @param {*} value\n*/\nLGraph.prototype.addOutput = function(name, type, value)\n{\n\tthis.outputs[name] = { name: name, type: type, value: value };\n\tthis._version++;\n\n\tif(this.onOutputAdded)\n\t\tthis.onOutputAdded(name, type);\n\n\tif(this.onInputsOutputsChange)\n\t\tthis.onInputsOutputsChange();\n}\n\n/**\n* Assign a data to the global output\n* @method setOutputData\n* @param {String} name\n* @param {String} value\n*/\nLGraph.prototype.setOutputData = function(name, value)\n{\n\tvar output = this.outputs[ name ];\n\tif (!output)\n\t\treturn;\n\toutput.value = value;\n}\n\n/**\n* Returns the current value of a global graph output\n* @method getOutputData\n* @param {String} name\n* @return {*} the data\n*/\nLGraph.prototype.getOutputData = function(name)\n{\n\tvar output = this.outputs[name];\n\tif (!output)\n\t\treturn null;\n\treturn output.value;\n}\n\n/**\n* Renames a global graph output\n* @method renameOutput\n* @param {String} old_name\n* @param {String} new_name\n*/\nLGraph.prototype.renameOutput = function(old_name, name)\n{\n\tif(!this.outputs[old_name])\n\t\treturn false;\n\n\tif(this.outputs[name])\n\t{\n\t\tconsole.error("there is already one output with that name");\n\t\treturn false;\n\t}\n\n\tthis.outputs[name] = this.outputs[old_name];\n\tdelete this.outputs[old_name];\n\tthis._version++;\n\n\tif(this.onOutputRenamed)\n\t\tthis.onOutputRenamed(old_name, name);\n\n\tif(this.onInputsOutputsChange)\n\t\tthis.onInputsOutputsChange();\n}\n\n/**\n* Changes the type of a global graph output\n* @method changeOutputType\n* @param {String} name\n* @param {String} type\n*/\nLGraph.prototype.changeOutputType = function(name, type)\n{\n\tif(!this.outputs[name])\n\t\treturn false;\n\n\tif(this.outputs[name].type && this.outputs[name].type.toLowerCase() == type.toLowerCase() )\n\t\treturn;\n\n\tthis.outputs[name].type = type;\n\tthis._version++;\n\tif(this.onOutputTypeChanged)\n\t\tthis.onOutputTypeChanged(name, type);\n}\n\n/**\n* Removes a global graph output\n* @method removeOutput\n* @param {String} name\n*/\nLGraph.prototype.removeOutput = function(name)\n{\n\tif(!this.outputs[name])\n\t\treturn false;\n\tdelete this.outputs[name];\n\tthis._version++;\n\n\tif(this.onOutputRemoved)\n\t\tthis.onOutputRemoved(name);\n\n\tif(this.onInputsOutputsChange)\n\t\tthis.onInputsOutputsChange();\n\treturn true;\n}\n\nLGraph.prototype.triggerInput = function(name,value)\n{\n\tvar nodes = this.findNodesByTitle(name);\n\tfor(var i = 0; i < nodes.length; ++i)\n\t\tnodes[i].onTrigger(value);\n}\n\nLGraph.prototype.setCallback = function(name,func)\n{\n\tvar nodes = this.findNodesByTitle(name);\n\tfor(var i = 0; i < nodes.length; ++i)\n\t\tnodes[i].setTrigger(func);\n}\n\n\nLGraph.prototype.connectionChange = function( node, link_info )\n{\n\tthis.updateExecutionOrder();\n\tif( this.onConnectionChange )\n\t\tthis.onConnectionChange( node );\n\tthis._version++;\n\tthis.sendActionToCanvas("onConnectionChange");\n}\n\n/**\n* returns if the graph is in live mode\n* @method isLive\n*/\n\nLGraph.prototype.isLive = function()\n{\n\tif(!this.list_of_graphcanvas)\n\t\treturn false;\n\n\tfor(var i = 0; i < this.list_of_graphcanvas.length; ++i)\n\t{\n\t\tvar c = this.list_of_graphcanvas[i];\n\t\tif(c.live_mode)\n\t\t\treturn true;\n\t}\n\treturn false;\n}\n\n/**\n* clears the triggered slot animation in all links (stop visual animation)\n* @method clearTriggeredSlots\n*/\nLGraph.prototype.clearTriggeredSlots = function()\n{\n\tfor(var i in this.links)\n\t{\n\t\tvar link_info = this.links[i];\n\t\tif( !link_info )\n\t\t\tcontinue;\n\t\tif( link_info._last_time )\n\t\t\tlink_info._last_time = 0;\n\t}\n}\n\n\n/* Called when something visually changed (not the graph!) */\nLGraph.prototype.change = function()\n{\n\tif(LiteGraph.debug)\n\t\tconsole.log("Graph changed");\n\tthis.sendActionToCanvas("setDirty",[true,true]);\n\tif(this.on_change)\n\t\tthis.on_change(this);\n}\n\nLGraph.prototype.setDirtyCanvas = function(fg,bg)\n{\n\tthis.sendActionToCanvas("setDirty",[fg,bg]);\n}\n\n/**\n* Destroys a link\n* @method removeLink\n* @param {Number} link_id\n*/\nLGraph.prototype.removeLink = function(link_id)\n{\n\tvar link = this.links[ link_id ];\n\tif(!link)\n\t\treturn;\n\tvar node = this.getNodeById( link.target_id );\n\tif(node)\n\t\tnode.disconnectInput( link.target_slot );\n}\n\n\n//save and recover app state ***************************************\n/**\n* Creates a Object containing all the info about this graph, it can be serialized\n* @method serialize\n* @return {Object} value of the node\n*/\nLGraph.prototype.serialize = function()\n{\n\tvar nodes_info = [];\n\tfor(var i = 0, l = this._nodes.length; i < l; ++i)\n\t\tnodes_info.push( this._nodes[i].serialize() );\n\n\t//pack link info into a non-verbose format\n\tvar links = [];\n\tfor(var i in this.links) //links is an OBJECT\n\t{\n\t\tvar link = this.links[i];\n\t\tlinks.push([ link.id, link.origin_id, link.origin_slot, link.target_id, link.target_slot, link.type ]);\n\t}\n\n\tvar groups_info = [];\n\tfor(var i = 0; i < this._groups.length; ++i)\n\t\tgroups_info.push( this._groups[i].serialize() );\n\n\tvar data = {\n\t\tlast_node_id: this.last_node_id,\n\t\tlast_link_id: this.last_link_id,\n\t\tnodes: nodes_info,\n\t\tlinks: links, \n\t\tgroups: groups_info,\n\t\tconfig: this.config,\n\t\tversion: LiteGraph.VERSION\n\t};\n\n\treturn data;\n}\n\n\n/**\n* Configure a graph from a JSON string\n* @method configure\n* @param {String} str configure a graph from a JSON string\n* @param {Boolean} returns if there was any error parsing\n*/\nLGraph.prototype.configure = function( data, keep_old )\n{\n\tif(!data)\n\t\treturn;\n\n\tif(!keep_old)\n\t\tthis.clear();\n\n\tvar nodes = data.nodes;\n\n\t//decode links info (they are very verbose)\n\tif(data.links && data.links.constructor === Array)\n\t{\n\t\tvar links = [];\n\t\tfor(var i = 0; i < data.links.length; ++i)\n\t\t{\n\t\t\tvar link_data = data.links[i];\n\t\t\tvar link = new LLink();\n\t\t\tlink.configure( link_data );\n\t\t\tlinks[ link.id ] = link;\n\t\t}\n\t\tdata.links = links;\n\t}\n\n\t//copy all stored fields\n\tfor (var i in data)\n\t\tthis[i] = data[i];\n\n\tvar error = false;\n\n\t//create nodes\n\tthis._nodes = [];\n\tif(nodes)\n\t{\n\t\tfor(var i = 0, l = nodes.length; i < l; ++i)\n\t\t{\n\t\t\tvar n_info = nodes[i]; //stored info\n\t\t\tvar node = LiteGraph.createNode( n_info.type, n_info.title );\n\t\t\tif(!node)\n\t\t\t{\n\t\t\t\tif(LiteGraph.debug)\n\t\t\t\t\tconsole.log("Node not found or has errors: " + n_info.type);\n\n\t\t\t\t//in case of error we create a replacement node to avoid losing info\n\t\t\t\tnode = new LGraphNode();\n\t\t\t\tnode.last_serialization = n_info;\n\t\t\t\tnode.has_errors = true;\n\t\t\t\terror = true;\n\t\t\t\t//continue;\n\t\t\t}\n\n\t\t\tnode.id = n_info.id; //id it or it will create a new id\n\t\t\tthis.add(node, true); //add before configure, otherwise configure cannot create links\n\t\t}\n\n\t\t//configure nodes afterwards so they can reach each other\n\t\tfor(var i = 0, l = nodes.length; i < l; ++i)\n\t\t{\n\t\t\tvar n_info = nodes[i];\n\t\t\tvar node = this.getNodeById( n_info.id );\n\t\t\tif(node)\n\t\t\t\tnode.configure( n_info );\n\t\t}\n\t}\n\n\t//groups\n\tthis._groups.length = 0;\n\tif( data.groups )\n\tfor(var i = 0; i < data.groups.length; ++i )\n\t{\n\t\tvar group = new LiteGraph.LGraphGroup();\n\t\tgroup.configure( data.groups[i] );\n\t\tthis.add( group );\n\t}\n\n\tthis.updateExecutionOrder();\n\tthis._version++;\n\tthis.setDirtyCanvas(true,true);\n\treturn error;\n}\n\nLGraph.prototype.load = function(url)\n{\n\tvar that = this;\n\tvar req = new XMLHttpRequest();\n\treq.open('GET', url, true);\n\treq.send(null);\n\treq.onload = function (oEvent) {\n\t\tif(req.status !== 200)\n\t\t{\n\t\t\tconsole.error("Error loading graph:",req.status,req.response);\n\t\t\treturn;\n\t\t}\n\t\tvar data = JSON.parse( req.response );\n\t\tthat.configure(data);\n\t}\n\treq.onerror = function(err)\n\t{\n\t\tconsole.error("Error loading graph:",err);\n\t}\n}\n\nLGraph.prototype.onNodeTrace = function(node, msg, color)\n{\n\t//TODO\n}\n\n//this is the class in charge of storing link information\nfunction LLink( id, type, origin_id, origin_slot, target_id, target_slot )\n{\n\tthis.id = id;\n\tthis.type = type;\n\tthis.origin_id = origin_id;\n\tthis.origin_slot = origin_slot;\n\tthis.target_id = target_id;\n\tthis.target_slot = target_slot;\n\n\tthis._data = null;\n\tthis._pos = new Float32Array(2); //center\n}\n\nLLink.prototype.configure = function(o)\n{\n\tif(o.constructor === Array)\n\t{\n\t\tthis.id = o[0];\n\t\tthis.origin_id = o[1];\n\t\tthis.origin_slot = o[2];\n\t\tthis.target_id = o[3];\n\t\tthis.target_slot = o[4];\n\t\tthis.type = o[5];\n\t}\n\telse\n\t{\n\t\tthis.id = o.id;\n\t\tthis.type = o.type;\n\t\tthis.origin_id = o.origin_id;\n\t\tthis.origin_slot = o.origin_slot;\n\t\tthis.target_id = o.target_id;\n\t\tthis.target_slot = o.target_slot;\n\t}\n}\n\nLLink.prototype.serialize = function()\n{\n\treturn [ this.id, this.type, this.origin_id, this.origin_slot, this.target_id, this.target_slot ];\n}\n\nLiteGraph.LLink = LLink;\n\n// *************************************************************\n// Node CLASS *******\n// *************************************************************\n\n/*\n\ttitle: string\n\tpos: [x,y]\n\tsize: [x,y]\n\n\tinput|output: every connection\n\t\t+ { name:string, type:string, pos: [x,y]=Optional, direction: "input"|"output", links: Array });\n\n\tgeneral properties:\n\t\t+ clip_area: if you render outside the node, it will be cliped\n\t\t+ unsafe_execution: not allowed for safe execution\n\t\t+ skip_repeated_outputs: when adding new outputs, it wont show if there is one already connected\n\t\t+ resizable: if set to false it wont be resizable with the mouse\n\t\t+ horizontal: slots are distributed horizontally\n\t\t+ widgets_up: widgets start from the top of the node\n\t\n\tflags object:\n\t\t+ collapsed: if it is collapsed\n\n\tsupported callbacks:\n\t\t+ onAdded: when added to graph (warning: this is called BEFORE the node is configured when loading)\n\t\t+ onRemoved: when removed from graph\n\t\t+ onStart:\twhen the graph starts playing\n\t\t+ onStop:\twhen the graph stops playing\n\t\t+ onDrawForeground: render the inside widgets inside the node\n\t\t+ onDrawBackground: render the background area inside the node (only in edit mode)\n\t\t+ onMouseDown\n\t\t+ onMouseMove\n\t\t+ onMouseUp\n\t\t+ onMouseEnter\n\t\t+ onMouseLeave\n\t\t+ onExecute: execute the node\n\t\t+ onPropertyChanged: when a property is changed in the panel (return true to skip default behaviour)\n\t\t+ onGetInputs: returns an array of possible inputs\n\t\t+ onGetOutputs: returns an array of possible outputs\n\t\t+ onBounding: in case this node has a bigger bounding than the node itself (the callback receives the bounding as [x,y,w,h])\n\t\t+ onDblClick: double clicked in the node\n\t\t+ onInputDblClick: input slot double clicked (can be used to automatically create a node connected)\n\t\t+ onOutputDblClick: output slot double clicked (can be used to automatically create a node connected)\n\t\t+ onConfigure: called after the node has been configured\n\t\t+ onSerialize: to add extra info when serializing (the callback receives the object that should be filled with the data)\n\t\t+ onSelected\n\t\t+ onDeselected\n\t\t+ onDropItem : DOM item dropped over the node\n\t\t+ onDropFile : file dropped over the node\n\t\t+ onConnectInput : if returns false the incoming connection will be canceled\n\t\t+ onConnectionsChange : a connection changed (new one or removed) (LiteGraph.INPUT or LiteGraph.OUTPUT, slot, true if connected, link_info, input_info )\n\t\t+ onAction: action slot triggered\n\t\t+ getExtraMenuOptions: to add option to context menu\n*/\n\n/**\n* Base Class for all the node type classes\n* @class LGraphNode\n* @param {String} name a name for the node\n*/\n\nfunction LGraphNode(title)\n{\n\tthis._ctor(title);\n}\n\nglobal.LGraphNode = LiteGraph.LGraphNode = LGraphNode;\n\nLGraphNode.prototype._ctor = function( title )\n{\n\tthis.title = title || "Unnamed";\n\tthis.size = [LiteGraph.NODE_WIDTH,60];\n\tthis.graph = null;\n\n\tthis._pos = new Float32Array(10,10);\n\n\tObject.defineProperty( this, "pos", {\n\t\tset: function(v)\n\t\t{\n\t\t\tif(!v || v.length < 2)\n\t\t\t\treturn;\n\t\t\tthis._pos[0] = v[0];\n\t\t\tthis._pos[1] = v[1];\n\t\t},\n\t\tget: function()\n\t\t{\n\t\t\treturn this._pos;\n\t\t},\n\t\tenumerable: true\n\t});\n\n\tthis.id = -1; //not know till not added\n\tthis.type = null;\n\n\t//inputs available: array of inputs\n\tthis.inputs = [];\n\tthis.outputs = [];\n\tthis.connections = [];\n\n\t//local data\n\tthis.properties = {}; //for the values\n\tthis.properties_info = []; //for the info\n\n\tthis.flags = {};\n}\n\n/**\n* configure a node from an object containing the serialized info\n* @method configure\n*/\nLGraphNode.prototype.configure = function(info)\n{\n\tif(this.graph)\n\t\tthis.graph._version++;\n\n\tfor (var j in info)\n\t{\n\t\tif(j == "properties")\n\t\t{\n\t\t\t//i dont want to clone properties, I want to reuse the old container\n\t\t\tfor(var k in info.properties)\n\t\t\t{\n\t\t\t\tthis.properties[k] = info.properties[k];\n\t\t\t\tif(this.onPropertyChanged)\n\t\t\t\t\tthis.onPropertyChanged(k,info.properties[k]);\n\t\t\t}\n\t\t\tcontinue;\n\t\t}\n\n\t\tif(info[j] == null)\n\t\t\tcontinue;\n\n\t\telse if (typeof(info[j]) == 'object') //object\n\t\t{\n\t\t\tif(this[j] && this[j].configure)\n\t\t\t\tthis[j].configure( info[j] );\n\t\t\telse\n\t\t\t\tthis[j] = LiteGraph.cloneObject(info[j], this[j]);\n\t\t}\n\t\telse //value\n\t\t\tthis[j] = info[j];\n\t}\n\n\tif(!info.title)\n\t\tthis.title = this.constructor.title;\n\n\tif(this.onConnectionsChange)\n\t{\n\t\tif(this.inputs)\n\t\tfor(var i = 0; i < this.inputs.length; ++i)\n\t\t{\n\t\t\tvar input = this.inputs[i];\n\t\t\tvar link_info = this.graph ? this.graph.links[ input.link ] : null;\n\t\t\tthis.onConnectionsChange( LiteGraph.INPUT, i, true, link_info, input ); //link_info has been created now, so its updated\n\t\t}\n\n\t\tif(this.outputs)\n\t\tfor(var i = 0; i < this.outputs.length; ++i)\n\t\t{\n\t\t\tvar output = this.outputs[i];\n\t\t\tif(!output.links)\n\t\t\t\tcontinue;\n\t\t\tfor(var j = 0; j < output.links.length; ++j)\n\t\t\t{\n\t\t\t\tvar link_info = this.graph ? this.graph.links[ output.links[j] ] : null;\n\t\t\t\tthis.onConnectionsChange( LiteGraph.OUTPUT, i, true, link_info, output ); //link_info has been created now, so its updated\n\t\t\t}\n\t\t}\n\t}\n\n\tif( this.onConfigure )\n\t\tthis.onConfigure( info );\n}\n\n/**\n* serialize the content\n* @method serialize\n*/\n\nLGraphNode.prototype.serialize = function()\n{\n\t//create serialization object\n\tvar o = {\n\t\tid: this.id,\n\t\ttype: this.type,\n\t\tpos: this.pos,\n\t\tsize: this.size,\n\t\tflags: LiteGraph.cloneObject(this.flags),\n\t\tmode: this.mode\n\t};\n\n\t//special case for when there were errors\n\tif( this.constructor === LGraphNode && this.last_serialization )\n\t\treturn this.last_serialization;\n\n\tif( this.inputs )\n\t\to.inputs = this.inputs;\n\n\tif( this.outputs )\n\t{\n\t\t//clear outputs last data (because data in connections is never serialized but stored inside the outputs info)\n\t\tfor(var i = 0; i < this.outputs.length; i++)\n\t\t\tdelete this.outputs[i]._data;\n\t\to.outputs = this.outputs;\n\t}\n\n\tif( this.title && this.title != this.constructor.title )\n\t\to.title = this.title;\n\n\tif( this.properties )\n\t\to.properties = LiteGraph.cloneObject( this.properties );\n\n\tif( !o.type )\n\t\to.type = this.constructor.type;\n\n\tif( this.color )\n\t\to.color = this.color;\n\tif( this.bgcolor )\n\t\to.bgcolor = this.bgcolor;\n\tif( this.boxcolor )\n\t\to.boxcolor = this.boxcolor;\n\tif( this.shape )\n\t\to.shape = this.shape;\n\n\tif(this.onSerialize)\n\t{\n\t\tif( this.onSerialize(o) )\n\t\t\tconsole.warn("node onSerialize shouldnt return anything, data should be stored in the object pass in the first parameter");\n\t}\n\n\treturn o;\n}\n\n\n/* Creates a clone of this node */\nLGraphNode.prototype.clone = function()\n{\n\tvar node = LiteGraph.createNode(this.type);\n\tif(!node)\n\t\treturn null;\n\n\t//we clone it because serialize returns shared containers\n\tvar data = LiteGraph.cloneObject( this.serialize() );\n\n\t//remove links\n\tif(data.inputs)\n\t\tfor(var i = 0; i < data.inputs.length; ++i)\n\t\t\tdata.inputs[i].link = null;\n\n\tif(data.outputs)\n\t\tfor(var i = 0; i < data.outputs.length; ++i)\n\t\t{\n\t\t\tif(data.outputs[i].links)\n\t\t\t\tdata.outputs[i].links.length = 0;\n\t\t}\n\n\tdelete data["id"];\n\t//remove links\n\tnode.configure(data);\n\n\treturn node;\n}\n\n\n/**\n* serialize and stringify\n* @method toString\n*/\n\nLGraphNode.prototype.toString = function()\n{\n\treturn JSON.stringify( this.serialize() );\n}\n//LGraphNode.prototype.unserialize = function(info) {} //this cannot be done from within, must be done in LiteGraph\n\n\n/**\n* get the title string\n* @method getTitle\n*/\n\nLGraphNode.prototype.getTitle = function()\n{\n\treturn this.title || this.constructor.title;\n}\n\n\n\n// Execution *************************\n/**\n* sets the output data\n* @method setOutputData\n* @param {number} slot\n* @param {*} data\n*/\nLGraphNode.prototype.setOutputData = function(slot, data)\n{\n\tif(!this.outputs)\n\t\treturn;\n\n\t//this maybe slow and a niche case\n\t//if(slot && slot.constructor === String)\n\t//\tslot = this.findOutputSlot(slot);\n\n\tif(slot == -1 || slot >= this.outputs.length)\n\t\treturn;\n\n\tvar output_info = this.outputs[slot];\n\tif(!output_info)\n\t\treturn;\n\n\t//store data in the output itself in case we want to debug\n\toutput_info._data = data;\n\n\t//if there are connections, pass the data to the connections\n\tif( this.outputs[slot].links )\n\t{\n\t\tfor(var i = 0; i < this.outputs[slot].links.length; i++)\n\t\t{\n\t\t\tvar link_id = this.outputs[slot].links[i];\n\t\t\tthis.graph.links[ link_id ].data = data;\n\t\t}\n\t}\n}\n\n/**\n* sets the output data type, useful when you want to be able to overwrite the data type\n* @method setOutputDataType\n* @param {number} slot\n* @param {String} datatype\n*/\nLGraphNode.prototype.setOutputDataType = function(slot, type)\n{\n\tif(!this.outputs)\n\t\treturn;\n\tif(slot == -1 || slot >= this.outputs.length)\n\t\treturn;\n\tvar output_info = this.outputs[slot];\n\tif(!output_info)\n\t\treturn;\n\t//store data in the output itself in case we want to debug\n\toutput_info.type = type;\n\n\t//if there are connections, pass the data to the connections\n\tif( this.outputs[slot].links )\n\t{\n\t\tfor(var i = 0; i < this.outputs[slot].links.length; i++)\n\t\t{\n\t\t\tvar link_id = this.outputs[slot].links[i];\n\t\t\tthis.graph.links[ link_id ].type = type;\n\t\t}\n\t}\n}\n\n/**\n* Retrieves the input data (data traveling through the connection) from one slot\n* @method getInputData\n* @param {number} slot\n* @param {boolean} force_update if set to true it will force the connected node of this slot to output data into this link\n* @return {*} data or if it is not connected returns undefined\n*/\nLGraphNode.prototype.getInputData = function( slot, force_update )\n{\n\tif(!this.inputs)\n\t\treturn; //undefined;\n\n\tif(slot >= this.inputs.length || this.inputs[slot].link == null)\n\t\treturn;\n\n\tvar link_id = this.inputs[slot].link;\n\tvar link = this.graph.links[ link_id ];\n\tif(!link) //bug: weird case but it happens sometimes\n\t\treturn null;\n\n\tif(!force_update)\n\t\treturn link.data;\n\n\t//special case: used to extract data from the incomming connection before the graph has been executed\n\tvar node = this.graph.getNodeById( link.origin_id );\n\tif(!node)\n\t\treturn link.data;\n\n\tif(node.updateOutputData)\n\t\tnode.updateOutputData( link.origin_slot );\n\telse if(node.onExecute)\n\t\tnode.onExecute();\n\n\treturn link.data;\n}\n\n/**\n* Retrieves the input data type (in case this supports multiple input types)\n* @method getInputDataType\n* @param {number} slot\n* @return {String} datatype in string format\n*/\nLGraphNode.prototype.getInputDataType = function( slot )\n{\n\tif(!this.inputs)\n\t\treturn null; //undefined;\n\n\tif(slot >= this.inputs.length || this.inputs[slot].link == null)\n\t\treturn null;\n\tvar link_id = this.inputs[slot].link;\n\tvar link = this.graph.links[ link_id ];\n\tif(!link) //bug: weird case but it happens sometimes\n\t\treturn null;\n\tvar node = this.graph.getNodeById( link.origin_id );\n\tif(!node)\n\t\treturn link.type;\n\tvar output_info = node.outputs[ link.origin_slot ];\n\tif(output_info)\n\t\treturn output_info.type;\n\treturn null;\n}\n\n/**\n* Retrieves the input data from one slot using its name instead of slot number\n* @method getInputDataByName\n* @param {String} slot_name\n* @param {boolean} force_update if set to true it will force the connected node of this slot to output data into this link\n* @return {*} data or if it is not connected returns null\n*/\nLGraphNode.prototype.getInputDataByName = function( slot_name, force_update )\n{\n\tvar slot = this.findInputSlot( slot_name );\n\tif( slot == -1 )\n\t\treturn null;\n\treturn this.getInputData( slot, force_update );\n}\n\n\n/**\n* tells you if there is a connection in one input slot\n* @method isInputConnected\n* @param {number} slot\n* @return {boolean}\n*/\nLGraphNode.prototype.isInputConnected = function(slot)\n{\n\tif(!this.inputs)\n\t\treturn false;\n\treturn (slot < this.inputs.length && this.inputs[slot].link != null);\n}\n\n/**\n* tells you info about an input connection (which node, type, etc)\n* @method getInputInfo\n* @param {number} slot\n* @return {Object} object or null { link: id, name: string, type: string or 0 }\n*/\nLGraphNode.prototype.getInputInfo = function(slot)\n{\n\tif(!this.inputs)\n\t\treturn null;\n\tif(slot < this.inputs.length)\n\t\treturn this.inputs[slot];\n\treturn null;\n}\n\n/**\n* returns the node connected in the input slot\n* @method getInputNode\n* @param {number} slot\n* @return {LGraphNode} node or null\n*/\nLGraphNode.prototype.getInputNode = function( slot )\n{\n\tif(!this.inputs)\n\t\treturn null;\n\tif(slot >= this.inputs.length)\n\t\treturn null;\n\tvar input = this.inputs[slot];\n\tif(!input || input.link === null)\n\t\treturn null;\n\tvar link_info = this.graph.links[ input.link ];\n\tif(!link_info)\n\t\treturn null;\n\treturn this.graph.getNodeById( link_info.origin_id );\n}\n\n\n/**\n* returns the value of an input with this name, otherwise checks if there is a property with that name\n* @method getInputOrProperty\n* @param {string} name\n* @return {*} value\n*/\nLGraphNode.prototype.getInputOrProperty = function( name )\n{\n\tif(!this.inputs || !this.inputs.length)\n\t\treturn this.properties ? this.properties[name] : null;\n\n\tfor(var i = 0, l = this.inputs.length; i < l; ++i)\n\t{\n\t\tvar input_info = this.inputs[i];\n\t\tif(name == input_info.name && input_info.link != null)\n\t\t{\n\t\t\tvar link = this.graph.links[ input_info.link ];\n\t\t\tif(link)\n\t\t\t\treturn link.data;\n\t\t}\n\t}\n\treturn this.properties[ name ];\n}\n\n\n\n\n/**\n* tells you the last output data that went in that slot\n* @method getOutputData\n* @param {number} slot\n* @return {Object} object or null\n*/\nLGraphNode.prototype.getOutputData = function(slot)\n{\n\tif(!this.outputs)\n\t\treturn null;\n\tif(slot >= this.outputs.length)\n\t\treturn null;\n\n\tvar info = this.outputs[slot];\n\treturn info._data;\n}\n\n\n/**\n* tells you info about an output connection (which node, type, etc)\n* @method getOutputInfo\n* @param {number} slot\n* @return {Object} object or null { name: string, type: string, links: [ ids of links in number ] }\n*/\nLGraphNode.prototype.getOutputInfo = function(slot)\n{\n\tif(!this.outputs)\n\t\treturn null;\n\tif(slot < this.outputs.length)\n\t\treturn this.outputs[slot];\n\treturn null;\n}\n\n\n/**\n* tells you if there is a connection in one output slot\n* @method isOutputConnected\n* @param {number} slot\n* @return {boolean}\n*/\nLGraphNode.prototype.isOutputConnected = function(slot)\n{\n\tif(!this.outputs)\n\t\treturn false;\n\treturn (slot < this.outputs.length && this.outputs[slot].links && this.outputs[slot].links.length);\n}\n\n/**\n* tells you if there is any connection in the output slots\n* @method isAnyOutputConnected\n* @return {boolean}\n*/\nLGraphNode.prototype.isAnyOutputConnected = function()\n{\n\tif(!this.outputs)\n\t\treturn false;\n\tfor(var i = 0; i < this.outputs.length; ++i)\n\t\tif( this.outputs[i].links && this.outputs[i].links.length )\n\t\t\treturn true;\n\treturn false;\n}\n\n\n/**\n* retrieves all the nodes connected to this output slot\n* @method getOutputNodes\n* @param {number} slot\n* @return {array}\n*/\nLGraphNode.prototype.getOutputNodes = function(slot)\n{\n\tif(!this.outputs || this.outputs.length == 0)\n\t\treturn null;\n\n\tif(slot >= this.outputs.length)\n\t\treturn null;\n\n\tvar output = this.outputs[slot];\n\tif(!output.links || output.links.length == 0)\n\t\treturn null;\n\n\tvar r = [];\n\tfor(var i = 0; i < output.links.length; i++)\n\t{\n\t\tvar link_id = output.links[i];\n\t\tvar link = this.graph.links[ link_id ];\n\t\tif(link)\n\t\t{\n\t\t\tvar target_node = this.graph.getNodeById( link.target_id );\n\t\t\tif( target_node )\n\t\t\t\tr.push( target_node );\n\t\t}\n\t}\n\treturn r;\n}\n\n/**\n* Triggers an event in this node, this will trigger any output with the same name\n* @method trigger\n* @param {String} event name ( "on_play", ... ) if action is equivalent to false then the event is send to all\n* @param {*} param\n*/\nLGraphNode.prototype.trigger = function( action, param )\n{\n\tif( !this.outputs || !this.outputs.length )\n\t\treturn;\n\n\tif(this.graph)\n\t\tthis.graph._last_trigger_time = LiteGraph.getTime();\n\n\tfor(var i = 0; i < this.outputs.length; ++i)\n\t{\n\t\tvar output = this.outputs[ i ];\n\t\tif(!output || output.type !== LiteGraph.EVENT || (action && output.name != action) )\n\t\t\tcontinue;\n\t\tthis.triggerSlot( i, param );\n\t}\n}\n\n/**\n* Triggers an slot event in this node\n* @method triggerSlot\n* @param {Number} slot the index of the output slot\n* @param {*} param\n* @param {Number} link_id [optional] in case you want to trigger and specific output link in a slot\n*/\nLGraphNode.prototype.triggerSlot = function( slot, param, link_id )\n{\n\tif( !this.outputs )\n\t\treturn;\n\n\tvar output = this.outputs[ slot ];\n\tif( !output )\n\t\treturn;\n\n\tvar links = output.links;\n\tif(!links || !links.length)\n\t\treturn;\n\n\tif(this.graph)\n\t\tthis.graph._last_trigger_time = LiteGraph.getTime();\n\n\t//for every link attached here\n\tfor(var k = 0; k < links.length; ++k)\n\t{\n\t\tvar id = links[k];\n\t\tif( link_id != null && link_id != id ) //to skip links\n\t\t\tcontinue;\n\t\tvar link_info = this.graph.links[ links[k] ];\n\t\tif(!link_info) //not connected\n\t\t\tcontinue;\n\t\tlink_info._last_time = LiteGraph.getTime();\n\t\tvar node = this.graph.getNodeById( link_info.target_id );\n\t\tif(!node) //node not found?\n\t\t\tcontinue;\n\n\t\t//used to mark events in graph\n\t\tvar target_connection = node.inputs[ link_info.target_slot ];\n\n\t\tif(node.onAction)\n\t\t\tnode.onAction( target_connection.name, param );\n\t\telse if(node.mode === LiteGraph.ON_TRIGGER)\n\t\t{\n\t\t\tif(node.onExecute)\n\t\t\t\tnode.onExecute(param);\n\t\t}\n\t}\n}\n\n/**\n* clears the trigger slot animation\n* @method clearTriggeredSlot\n* @param {Number} slot the index of the output slot\n* @param {Number} link_id [optional] in case you want to trigger and specific output link in a slot\n*/\nLGraphNode.prototype.clearTriggeredSlot = function( slot, link_id )\n{\n\tif( !this.outputs )\n\t\treturn;\n\n\tvar output = this.outputs[ slot ];\n\tif( !output )\n\t\treturn;\n\n\tvar links = output.links;\n\tif(!links || !links.length)\n\t\treturn;\n\n\t//for every link attached here\n\tfor(var k = 0; k < links.length; ++k)\n\t{\n\t\tvar id = links[k];\n\t\tif( link_id != null && link_id != id ) //to skip links\n\t\t\tcontinue;\n\t\tvar link_info = this.graph.links[ links[k] ];\n\t\tif(!link_info) //not connected\n\t\t\tcontinue;\n\t\tlink_info._last_time = 0;\n\t}\n}\n\n/**\n* add a new property to this node\n* @method addProperty\n* @param {string} name\n* @param {*} default_value\n* @param {string} type string defining the output type ("vec3","number",...)\n* @param {Object} extra_info this can be used to have special properties of the property (like values, etc)\n*/\nLGraphNode.prototype.addProperty = function( name, default_value, type, extra_info )\n{\n\tvar o = { name: name, type: type, default_value: default_value };\n\tif(extra_info)\n\t\tfor(var i in extra_info)\n\t\t\to[i] = extra_info[i];\n\tif(!this.properties_info)\n\t\tthis.properties_info = [];\n\tthis.properties_info.push(o);\n\tif(!this.properties)\n\t\tthis.properties = {};\n\tthis.properties[ name ] = default_value;\n\treturn o;\n}\n\n\n//connections\n\n/**\n* add a new output slot to use in this node\n* @method addOutput\n* @param {string} name\n* @param {string} type string defining the output type ("vec3","number",...)\n* @param {Object} extra_info this can be used to have special properties of an output (label, special color, position, etc)\n*/\nLGraphNode.prototype.addOutput = function(name,type,extra_info)\n{\n\tvar o = { name: name, type: type, links: null };\n\tif(extra_info)\n\t\tfor(var i in extra_info)\n\t\t\to[i] = extra_info[i];\n\n\tif(!this.outputs)\n\t\tthis.outputs = [];\n\tthis.outputs.push(o);\n\tif(this.onOutputAdded)\n\t\tthis.onOutputAdded(o);\n\tthis.size = this.computeSize();\n\tthis.setDirtyCanvas(true,true);\n\treturn o;\n}\n\n/**\n* add a new output slot to use in this node\n* @method addOutputs\n* @param {Array} array of triplets like [[name,type,extra_info],[...]]\n*/\nLGraphNode.prototype.addOutputs = function(array)\n{\n\tfor(var i = 0; i < array.length; ++i)\n\t{\n\t\tvar info = array[i];\n\t\tvar o = {name:info[0],type:info[1],link:null};\n\t\tif(array[2])\n\t\t\tfor(var j in info[2])\n\t\t\t\to[j] = info[2][j];\n\n\t\tif(!this.outputs)\n\t\t\tthis.outputs = [];\n\t\tthis.outputs.push(o);\n\t\tif(this.onOutputAdded)\n\t\t\tthis.onOutputAdded(o);\n\t}\n\n\tthis.size = this.computeSize();\n\tthis.setDirtyCanvas(true,true);\n}\n\n/**\n* remove an existing output slot\n* @method removeOutput\n* @param {number} slot\n*/\nLGraphNode.prototype.removeOutput = function(slot)\n{\n\tthis.disconnectOutput(slot);\n\tthis.outputs.splice(slot,1);\n\tfor(var i = slot; i < this.outputs.length; ++i)\n\t{\n\t\tif( !this.outputs[i] || !this.outputs[i].links )\n\t\t\tcontinue;\n\t\tvar links = this.outputs[i].links;\n\t\tfor(var j = 0; j < links.length; ++j)\n\t\t{\n\t\t\tvar link = this.graph.links[ links[j] ];\n\t\t\tif(!link)\n\t\t\t\tcontinue;\n\t\t\tlink.origin_slot -= 1;\n\t\t}\n\t}\n\n\tthis.size = this.computeSize();\n\tif(this.onOutputRemoved)\n\t\tthis.onOutputRemoved(slot);\n\tthis.setDirtyCanvas(true,true);\n}\n\n/**\n* add a new input slot to use in this node\n* @method addInput\n* @param {string} name\n* @param {string} type string defining the input type ("vec3","number",...), it its a generic one use 0\n* @param {Object} extra_info this can be used to have special properties of an input (label, color, position, etc)\n*/\nLGraphNode.prototype.addInput = function(name,type,extra_info)\n{\n\ttype = type || 0;\n\tvar o = {name:name,type:type,link:null};\n\tif(extra_info)\n\t\tfor(var i in extra_info)\n\t\t\to[i] = extra_info[i];\n\n\tif(!this.inputs)\n\t\tthis.inputs = [];\n\tthis.inputs.push(o);\n\tthis.size = this.computeSize();\n\tif(this.onInputAdded)\n\t\tthis.onInputAdded(o);\n\tthis.setDirtyCanvas(true,true);\n\treturn o;\n}\n\n/**\n* add several new input slots in this node\n* @method addInputs\n* @param {Array} array of triplets like [[name,type,extra_info],[...]]\n*/\nLGraphNode.prototype.addInputs = function(array)\n{\n\tfor(var i = 0; i < array.length; ++i)\n\t{\n\t\tvar info = array[i];\n\t\tvar o = {name:info[0], type:info[1], link:null};\n\t\tif(array[2])\n\t\t\tfor(var j in info[2])\n\t\t\t\to[j] = info[2][j];\n\n\t\tif(!this.inputs)\n\t\t\tthis.inputs = [];\n\t\tthis.inputs.push(o);\n\t\tif(this.onInputAdded)\n\t\t\tthis.onInputAdded(o);\n\t}\n\n\tthis.size = this.computeSize();\n\tthis.setDirtyCanvas(true,true);\n}\n\n/**\n* remove an existing input slot\n* @method removeInput\n* @param {number} slot\n*/\nLGraphNode.prototype.removeInput = function(slot)\n{\n\tthis.disconnectInput(slot);\n\tthis.inputs.splice(slot,1);\n\tfor(var i = slot; i < this.inputs.length; ++i)\n\t{\n\t\tif(!this.inputs[i])\n\t\t\tcontinue;\n\t\tvar link = this.graph.links[ this.inputs[i].link ];\n\t\tif(!link)\n\t\t\tcontinue;\n\t\tlink.target_slot -= 1;\n\t}\n\tthis.size = this.computeSize();\n\tif(this.onInputRemoved)\n\t\tthis.onInputRemoved(slot);\n\tthis.setDirtyCanvas(true,true);\n}\n\n/**\n* add an special connection to this node (used for special kinds of graphs)\n* @method addConnection\n* @param {string} name\n* @param {string} type string defining the input type ("vec3","number",...)\n* @param {[x,y]} pos position of the connection inside the node\n* @param {string} direction if is input or output\n*/\nLGraphNode.prototype.addConnection = function(name,type,pos,direction)\n{\n\tvar o = {\n\t\tname: name,\n\t\ttype: type,\n\t\tpos: pos,\n\t\tdirection: direction,\n\t\tlinks: null\n\t};\n\tthis.connections.push( o );\n\treturn o;\n}\n\n/**\n* computes the size of a node according to its inputs and output slots\n* @method computeSize\n* @param {number} minHeight\n* @return {number} the total size\n*/\nLGraphNode.prototype.computeSize = function( minHeight, out )\n{\n\tif( this.constructor.size )\n\t\treturn this.constructor.size.concat();\n\n\tvar rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1);\n\tvar size = out || new Float32Array([0,0]);\n\trows = Math.max(rows, 1);\n\tvar font_size = LiteGraph.NODE_TEXT_SIZE; //although it should be graphcanvas.inner_text_font size\n\tsize[1] = (this.constructor.slot_start_y || 0) + rows * LiteGraph.NODE_SLOT_HEIGHT;\n\tif( this.widgets && this.widgets.length )\n\t\tsize[1] += this.widgets.length * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 8;\n\n\tvar font_size = font_size;\n\tvar title_width = compute_text_size( this.title );\n\tvar input_width = 0;\n\tvar output_width = 0;\n\n\tif(this.inputs)\n\t\tfor(var i = 0, l = this.inputs.length; i < l; ++i)\n\t\t{\n\t\t\tvar input = this.inputs[i];\n\t\t\tvar text = input.label || input.name || "";\n\t\t\tvar text_width = compute_text_size( text );\n\t\t\tif(input_width < text_width)\n\t\t\t\tinput_width = text_width;\n\t\t}\n\n\tif(this.outputs)\n\t\tfor(var i = 0, l = this.outputs.length; i < l; ++i)\n\t\t{\n\t\t\tvar output = this.outputs[i];\n\t\t\tvar text = output.label || output.name || "";\n\t\t\tvar text_width = compute_text_size( text );\n\t\t\tif(output_width < text_width)\n\t\t\t\toutput_width = text_width;\n\t\t}\n\n\tsize[0] = Math.max( input_width + output_width + 10, title_width );\n\tsize[0] = Math.max( size[0], LiteGraph.NODE_WIDTH );\n\tif(this.widgets && this.widgets.length)\n\t\tsize[0] = Math.max( size[0], LiteGraph.NODE_WIDTH * 1.5 );\n\n\tif(this.onResize)\n\t\tthis.onResize(size);\n\n\tfunction compute_text_size( text )\n\t{\n\t\tif(!text)\n\t\t\treturn 0;\n\t\treturn font_size * text.length * 0.6;\n\t}\n\n\tif(this.constructor.min_height && size[1] < this.constructor.min_height)\n\t\tsize[1] = this.constructor.min_height;\n\n\tsize[1] += 6; //margin\n\n\treturn size;\n}\n\n/**\n* Allows to pass \n* \n* @method addWidget\n* @return {Object} the created widget\n*/\nLGraphNode.prototype.addWidget = function( type, name, value, callback, options )\n{\n\tif(!this.widgets)\n\t\tthis.widgets = [];\n\tvar w = {\n\t\ttype: type.toLowerCase(),\n\t\tname: name,\n\t\tvalue: value,\n\t\tcallback: callback,\n\t\toptions: options || {}\n\t};\n\n\tif(w.options.y !== undefined )\n\t\tw.y = w.options.y;\n\n\tif( !callback )\n\t\tconsole.warn("LiteGraph addWidget('button',...) without a callback");\n\tif( type == "combo" && !w.options.values )\n\t\tthrow("LiteGraph addWidget('combo',...) requires to pass values in options: { values:['red','blue'] }");\n\tthis.widgets.push(w);\n\treturn w;\n}\n\nLGraphNode.prototype.addCustomWidget = function( custom_widget )\n{\n\tif(!this.widgets)\n\t\tthis.widgets = [];\n\tthis.widgets.push(custom_widget);\n\treturn custom_widget;\n}\n\n\n/**\n* returns the bounding of the object, used for rendering purposes\n* bounding is: [topleft_cornerx, topleft_cornery, width, height]\n* @method getBounding\n* @return {Float32Array[4]} the total size\n*/\nLGraphNode.prototype.getBounding = function( out )\n{\n\tout = out || new Float32Array(4);\n\tout[0] = this.pos[0] - 4;\n\tout[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;\n\tout[2] = this.size[0] + 4;\n\tout[3] = this.size[1] + LiteGraph.NODE_TITLE_HEIGHT;\n\n\tif( this.onBounding )\n\t\tthis.onBounding( out );\n\treturn out;\n}\n\n/**\n* checks if a point is inside the shape of a node\n* @method isPointInside\n* @param {number} x\n* @param {number} y\n* @return {boolean}\n*/\nLGraphNode.prototype.isPointInside = function( x, y, margin, skip_title )\n{\n\tmargin = margin || 0;\n\n\tvar margin_top = this.graph && this.graph.isLive() ? 0 : 20;\n\tif(skip_title)\n\t\tmargin_top = 0;\n\tif(this.flags && this.flags.collapsed)\n\t{\n\t\t//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)\n\t\tif( isInsideRectangle( x, y, this.pos[0] - margin, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT - margin, (this._collapsed_width||LiteGraph.NODE_COLLAPSED_WIDTH) + 2 * margin, LiteGraph.NODE_TITLE_HEIGHT + 2 * margin ) )\n\t\t\treturn true;\n\t}\n\telse if ( (this.pos[0] - 4 - margin) < x && (this.pos[0] + this.size[0] + 4 + margin) > x\n\t\t&& (this.pos[1] - margin_top - margin) < y && (this.pos[1] + this.size[1] + margin) > y)\n\t\treturn true;\n\treturn false;\n}\n\n/**\n* checks if a point is inside a node slot, and returns info about which slot\n* @method getSlotInPosition\n* @param {number} x\n* @param {number} y\n* @return {Object} if found the object contains { input|output: slot object, slot: number, link_pos: [x,y] }\n*/\nLGraphNode.prototype.getSlotInPosition = function( x, y )\n{\n\t//search for inputs\n\tvar link_pos = new Float32Array(2);\n\tif(this.inputs)\n\t\tfor(var i = 0, l = this.inputs.length; i < l; ++i)\n\t\t{\n\t\t\tvar input = this.inputs[i];\n\t\t\tthis.getConnectionPos( true,i, link_pos );\n\t\t\tif( isInsideRectangle(x, y, link_pos[0] - 10, link_pos[1] - 5, 20,10) )\n\t\t\t\treturn { input: input, slot: i, link_pos: link_pos, locked: input.locked };\n\t\t}\n\n\tif(this.outputs)\n\t\tfor(var i = 0, l = this.outputs.length; i < l; ++i)\n\t\t{\n\t\t\tvar output = this.outputs[i];\n\t\t\tthis.getConnectionPos(false,i,link_pos);\n\t\t\tif( isInsideRectangle(x, y, link_pos[0] - 10, link_pos[1] - 5, 20,10) )\n\t\t\t\treturn { output: output, slot: i, link_pos: link_pos, locked: output.locked };\n\t\t}\n\n\treturn null;\n}\n\n/**\n* returns the input slot with a given name (used for dynamic slots), -1 if not found\n* @method findInputSlot\n* @param {string} name the name of the slot\n* @return {number} the slot (-1 if not found)\n*/\nLGraphNode.prototype.findInputSlot = function(name)\n{\n\tif(!this.inputs)\n\t\treturn -1;\n\tfor(var i = 0, l = this.inputs.length; i < l; ++i)\n\t\tif(name == this.inputs[i].name)\n\t\t\treturn i;\n\treturn -1;\n}\n\n/**\n* returns the output slot with a given name (used for dynamic slots), -1 if not found\n* @method findOutputSlot\n* @param {string} name the name of the slot\n* @return {number} the slot (-1 if not found)\n*/\nLGraphNode.prototype.findOutputSlot = function(name)\n{\n\tif(!this.outputs) return -1;\n\tfor(var i = 0, l = this.outputs.length; i < l; ++i)\n\t\tif(name == this.outputs[i].name)\n\t\t\treturn i;\n\treturn -1;\n}\n\n/**\n* connect this node output to the input of another node\n* @method connect\n* @param {number_or_string} slot (could be the number of the slot or the string with the name of the slot)\n* @param {LGraphNode} node the target node\n* @param {number_or_string} target_slot the input slot of the target node (could be the number of the slot or the string with the name of the slot, or -1 to connect a trigger)\n* @return {Object} the link_info is created, otherwise null\n*/\nLGraphNode.prototype.connect = function( slot, target_node, target_slot )\n{\n\ttarget_slot = target_slot || 0;\n\n\tif(!this.graph) //could be connected before adding it to a graph\n\t{\n\t\tconsole.log("Connect: Error, node doesnt belong to any graph. Nodes must be added first to a graph before connecting them."); //due to link ids being associated with graphs\n\t\treturn null;\n\t}\n\n\n\t//seek for the output slot\n\tif( slot.constructor === String )\n\t{\n\t\tslot = this.findOutputSlot(slot);\n\t\tif(slot == -1)\n\t\t{\n\t\t\tif(LiteGraph.debug)\n\t\t\t\tconsole.log("Connect: Error, no slot of name " + slot);\n\t\t\treturn null;\n\t\t}\n\t}\n\telse if(!this.outputs || slot >= this.outputs.length)\n\t{\n\t\tif(LiteGraph.debug)\n\t\t\tconsole.log("Connect: Error, slot number not found");\n\t\treturn null;\n\t}\n\n\tif(target_node && target_node.constructor === Number)\n\t\ttarget_node = this.graph.getNodeById( target_node );\n\tif(!target_node)\n\t\tthrow("target node is null");\n\n\t//avoid loopback\n\tif(target_node == this)\n\t\treturn null;\n\n\t//you can specify the slot by name\n\tif(target_slot.constructor === String)\n\t{\n\t\ttarget_slot = target_node.findInputSlot( target_slot );\n\t\tif(target_slot == -1)\n\t\t{\n\t\t\tif(LiteGraph.debug)\n\t\t\t\tconsole.log("Connect: Error, no slot of name " + target_slot);\n\t\t\treturn null;\n\t\t}\n\t}\n\telse if( target_slot === LiteGraph.EVENT )\n\t{\n\t\t//search for first slot with event?\n\t\t/*\n\t\t//create input for trigger\n\t\tvar input = target_node.addInput("onTrigger", LiteGraph.EVENT );\n\t\ttarget_slot = target_node.inputs.length - 1; //last one is the one created\n\t\ttarget_node.mode = LiteGraph.ON_TRIGGER;\n\t\t*/\n\t\treturn null;\n\t}\n\telse if( !target_node.inputs || target_slot >= target_node.inputs.length )\n\t{\n\t\tif(LiteGraph.debug)\n\t\t\tconsole.log("Connect: Error, slot number not found");\n\t\treturn null;\n\t}\n\n\t//if there is something already plugged there, disconnect\n\tif(target_node.inputs[ target_slot ].link != null )\n\t\ttarget_node.disconnectInput( target_slot );\n\n\t//why here??\n\t//this.setDirtyCanvas(false,true);\n\t//this.graph.connectionChange( this );\n\n\tvar output = this.outputs[slot];\n\n\t//allows nodes to block connection\n\tif(target_node.onConnectInput)\n\t\tif( target_node.onConnectInput( target_slot, output.type, output ) === false)\n\t\t\treturn null;\n\n\tvar input = target_node.inputs[target_slot];\n\tvar link_info = null;\n\n\tif( LiteGraph.isValidConnection( output.type, input.type ) )\n\t{\n\t\tlink_info = new LLink( this.graph.last_link_id++, input.type, this.id, slot, target_node.id, target_slot );\n\n\t\t//add to graph links list\n\t\tthis.graph.links[ link_info.id ] = link_info;\n\n\t\t//connect in output\n\t\tif( output.links == null )\n\t\t\toutput.links = [];\n\t\toutput.links.push( link_info.id );\n\t\t//connect in input\n\t\ttarget_node.inputs[target_slot].link = link_info.id;\n\t\tif(this.graph)\n\t\t\tthis.graph._version++;\n\t\tif(this.onConnectionsChange)\n\t\t\tthis.onConnectionsChange( LiteGraph.OUTPUT, slot, true, link_info, output ); //link_info has been created now, so its updated\n\t\tif(target_node.onConnectionsChange)\n\t\t\ttarget_node.onConnectionsChange( LiteGraph.INPUT, target_slot, true, link_info, input );\n\t\tif( this.graph && this.graph.onNodeConnectionChange )\n\t\t{\n\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.INPUT, target_node, target_slot, this, slot );\n\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot, target_node, target_slot );\n\t\t}\n\t}\n\n\tthis.setDirtyCanvas(false,true);\n\tthis.graph.connectionChange( this, link_info );\n\n\treturn link_info;\n}\n\n/**\n* disconnect one output to an specific node\n* @method disconnectOutput\n* @param {number_or_string} slot (could be the number of the slot or the string with the name of the slot)\n* @param {LGraphNode} target_node the target node to which this slot is connected [Optional, if not target_node is specified all nodes will be disconnected]\n* @return {boolean} if it was disconnected succesfully\n*/\nLGraphNode.prototype.disconnectOutput = function( slot, target_node )\n{\n\tif( slot.constructor === String )\n\t{\n\t\tslot = this.findOutputSlot(slot);\n\t\tif(slot == -1)\n\t\t{\n\t\t\tif(LiteGraph.debug)\n\t\t\t\tconsole.log("Connect: Error, no slot of name " + slot);\n\t\t\treturn false;\n\t\t}\n\t}\n\telse if(!this.outputs || slot >= this.outputs.length)\n\t{\n\t\tif(LiteGraph.debug)\n\t\t\tconsole.log("Connect: Error, slot number not found");\n\t\treturn false;\n\t}\n\n\t//get output slot\n\tvar output = this.outputs[slot];\n\tif(!output || !output.links || output.links.length == 0)\n\t\treturn false;\n\n\t//one of the output links in this slot\n\tif(target_node)\n\t{\n\t\tif(target_node.constructor === Number)\n\t\t\ttarget_node = this.graph.getNodeById( target_node );\n\t\tif(!target_node)\n\t\t\tthrow("Target Node not found");\n\n\t\tfor(var i = 0, l = output.links.length; i < l; i++)\n\t\t{\n\t\t\tvar link_id = output.links[i];\n\t\t\tvar link_info = this.graph.links[ link_id ];\n\n\t\t\t//is the link we are searching for...\n\t\t\tif( link_info.target_id == target_node.id )\n\t\t\t{\n\t\t\t\toutput.links.splice(i,1); //remove here\n\t\t\t\tvar input = target_node.inputs[ link_info.target_slot ];\n\t\t\t\tinput.link = null; //remove there\n\t\t\t\tdelete this.graph.links[ link_id ]; //remove the link from the links pool\n\t\t\t\tif(this.graph)\n\t\t\t\t\tthis.graph._version++;\n\t\t\t\tif(target_node.onConnectionsChange)\n\t\t\t\t\ttarget_node.onConnectionsChange( LiteGraph.INPUT, link_info.target_slot, false, link_info, input ); //link_info hasnt been modified so its ok\n\t\t\t\tif(this.onConnectionsChange)\n\t\t\t\t\tthis.onConnectionsChange( LiteGraph.OUTPUT, slot, false, link_info, output );\n\t\t\t\tif( this.graph && this.graph.onNodeConnectionChange )\n\t\t\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot );\n\t\t\t\tif( this.graph && this.graph.onNodeConnectionChange )\n\t\t\t\t{\n\t\t\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot );\n\t\t\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.INPUT, target_node, link_info.target_slot );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\telse //all the links in this output slot\n\t{\n\t\tfor(var i = 0, l = output.links.length; i < l; i++)\n\t\t{\n\t\t\tvar link_id = output.links[i];\n\t\t\tvar link_info = this.graph.links[ link_id ];\n\t\t\tif(!link_info) //bug: it happens sometimes\n\t\t\t\tcontinue;\n\n\t\t\tvar target_node = this.graph.getNodeById( link_info.target_id );\n\t\t\tvar input = null;\n\t\t\tif(this.graph)\n\t\t\t\tthis.graph._version++;\n\t\t\tif(target_node)\n\t\t\t{\n\t\t\t\tinput = target_node.inputs[ link_info.target_slot ];\n\t\t\t\tinput.link = null; //remove other side link\n\t\t\t\tif(target_node.onConnectionsChange)\n\t\t\t\t\ttarget_node.onConnectionsChange( LiteGraph.INPUT, link_info.target_slot, false, link_info, input ); //link_info hasnt been modified so its ok\n\t\t\t\tif( this.graph && this.graph.onNodeConnectionChange )\n\t\t\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.INPUT, target_node, link_info.target_slot );\n\t\t\t}\n\t\t\tdelete this.graph.links[ link_id ]; //remove the link from the links pool\n\t\t\tif(this.onConnectionsChange)\n\t\t\t\tthis.onConnectionsChange( LiteGraph.OUTPUT, slot, false, link_info, output );\n\t\t\tif( this.graph && this.graph.onNodeConnectionChange )\n\t\t\t{\n\t\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot );\n\t\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.INPUT, target_node, link_info.target_slot );\n\t\t\t}\n\t\t}\n\t\toutput.links = null;\n\t}\n\n\n\tthis.setDirtyCanvas(false,true);\n\tthis.graph.connectionChange( this );\n\treturn true;\n}\n\n/**\n* disconnect one input\n* @method disconnectInput\n* @param {number_or_string} slot (could be the number of the slot or the string with the name of the slot)\n* @return {boolean} if it was disconnected succesfully\n*/\nLGraphNode.prototype.disconnectInput = function( slot )\n{\n\t//seek for the output slot\n\tif( slot.constructor === String )\n\t{\n\t\tslot = this.findInputSlot(slot);\n\t\tif(slot == -1)\n\t\t{\n\t\t\tif(LiteGraph.debug)\n\t\t\t\tconsole.log("Connect: Error, no slot of name " + slot);\n\t\t\treturn false;\n\t\t}\n\t}\n\telse if(!this.inputs || slot >= this.inputs.length)\n\t{\n\t\tif(LiteGraph.debug)\n\t\t\tconsole.log("Connect: Error, slot number not found");\n\t\treturn false;\n\t}\n\n\tvar input = this.inputs[slot];\n\tif(!input)\n\t\treturn false;\n\n\tvar link_id = this.inputs[slot].link;\n\tthis.inputs[slot].link = null;\n\n\t//remove other side\n\tvar link_info = this.graph.links[ link_id ];\n\tif( link_info )\n\t{\n\t\tvar target_node = this.graph.getNodeById( link_info.origin_id );\n\t\tif(!target_node)\n\t\t\treturn false;\n\n\t\tvar output = target_node.outputs[ link_info.origin_slot ];\n\t\tif(!output || !output.links || output.links.length == 0)\n\t\t\treturn false;\n\n\t\t//search in the inputs list for this link\n\t\tfor(var i = 0, l = output.links.length; i < l; i++)\n\t\t{\n\t\t\tif( output.links[i] == link_id )\n\t\t\t{\n\t\t\t\toutput.links.splice(i,1);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tdelete this.graph.links[ link_id ]; //remove from the pool\n\t\tif(this.graph)\n\t\t\tthis.graph._version++;\n\t\tif( this.onConnectionsChange )\n\t\t\tthis.onConnectionsChange( LiteGraph.INPUT, slot, false, link_info, input );\n\t\tif( target_node.onConnectionsChange )\n\t\t\ttarget_node.onConnectionsChange( LiteGraph.OUTPUT, i, false, link_info, output );\n\t\tif( this.graph && this.graph.onNodeConnectionChange )\n\t\t{\n\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.OUTPUT, target_node, i );\n\t\t\tthis.graph.onNodeConnectionChange( LiteGraph.INPUT, this, slot );\n\t\t}\n\t}\n\n\tthis.setDirtyCanvas(false,true);\n\tthis.graph.connectionChange( this );\n\treturn true;\n}\n\n/**\n* returns the center of a connection point in canvas coords\n* @method getConnectionPos\n* @param {boolean} is_input true if if a input slot, false if it is an output\n* @param {number_or_string} slot (could be the number of the slot or the string with the name of the slot)\n* @param {vec2} out [optional] a place to store the output, to free garbage\n* @return {[x,y]} the position\n**/\nLGraphNode.prototype.getConnectionPos = function( is_input, slot_number, out )\n{\n\tout = out || new Float32Array(2);\n\tvar num_slots = 0;\n\tif( is_input && this.inputs )\n\t\tnum_slots = this.inputs.length;\n\tif( !is_input && this.outputs )\n\t\tnum_slots = this.outputs.length;\n\n\tvar offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5;\n\n\tif(this.flags.collapsed)\n\t{\n\t\tvar w = (this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH);\n\t\tif( this.horizontal )\n\t\t{\n\t\t\tout[0] = this.pos[0] + w * 0.5; \n\t\t\tif(is_input)\n\t\t\t\tout[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;\n\t\t\telse\n\t\t\t\tout[1] = this.pos[1];\n\t\t}\n\t\telse\n\t\t{\n\t\t\tif(is_input)\n\t\t\t\tout[0] = this.pos[0];\n\t\t\telse\n\t\t\t\tout[0] = this.pos[0] + w;\n\t\t\tout[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5;\n\t\t}\n\t\treturn out;\n\t}\n\n\t//weird feature that never got finished\n\tif(is_input && slot_number == -1)\n\t{\n\t\tout[0] = this.pos[0] + LiteGraph.NODE_TITLE_HEIGHT * 0.5;\n\t\tout[1] = this.pos[1] + LiteGraph.NODE_TITLE_HEIGHT * 0.5;\n\t\treturn out;\n\t}\n\n\t//hardcoded pos\n\tif(is_input && num_slots > slot_number && this.inputs[ slot_number ].pos)\n\t{\n\t\tout[0] = this.pos[0] + this.inputs[slot_number].pos[0];\n\t\tout[1] = this.pos[1] + this.inputs[slot_number].pos[1];\n\t\treturn out;\n\t}\n\telse if(!is_input && num_slots > slot_number && this.outputs[ slot_number ].pos)\n\t{\n\t\tout[0] = this.pos[0] + this.outputs[slot_number].pos[0];\n\t\tout[1] = this.pos[1] + this.outputs[slot_number].pos[1];\n\t\treturn out;\n\t}\n\n\t//horizontal distributed slots\n\tif(this.horizontal)\n\t{\n\t\tout[0] = this.pos[0] + (slot_number + 0.5) * (this.size[0] / num_slots);\n\t\tif(is_input)\n\t\t\tout[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;\n\t\telse\n\t\t\tout[1] = this.pos[1] + this.size[1];\n\t\treturn out;\n\t}\n\t\n\t//default vertical slots\n\tif(is_input)\n\t\tout[0] = this.pos[0] + offset;\n\telse\n\t\tout[0] = this.pos[0] + this.size[0] + 1 - offset;\n\tout[1] = this.pos[1] + (slot_number + 0.7 ) * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0);\n\treturn out;\n}\n\n/* Force align to grid */\nLGraphNode.prototype.alignToGrid = function()\n{\n\tthis.pos[0] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[0] / LiteGraph.CANVAS_GRID_SIZE);\n\tthis.pos[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[1] / LiteGraph.CANVAS_GRID_SIZE);\n}\n\n\n/* Console output */\nLGraphNode.prototype.trace = function(msg)\n{\n\tif(!this.console)\n\t\tthis.console = [];\n\tthis.console.push(msg);\n\tif(this.console.length > LGraphNode.MAX_CONSOLE)\n\t\tthis.console.shift();\n\n\tthis.graph.onNodeTrace(this,msg);\n}\n\n/* Forces to redraw or the main canvas (LGraphNode) or the bg canvas (links) */\nLGraphNode.prototype.setDirtyCanvas = function(dirty_foreground, dirty_background)\n{\n\tif(!this.graph)\n\t\treturn;\n\tthis.graph.sendActionToCanvas("setDirty",[dirty_foreground, dirty_background]);\n}\n\nLGraphNode.prototype.loadImage = function(url)\n{\n\tvar img = new Image();\n\timg.src = LiteGraph.node_images_path + url;\n\timg.ready = false;\n\n\tvar that = this;\n\timg.onload = function() {\n\t\tthis.ready = true;\n\t\tthat.setDirtyCanvas(true);\n\t}\n\treturn img;\n}\n\n//safe LGraphNode action execution (not sure if safe)\n/*\nLGraphNode.prototype.executeAction = function(action)\n{\n\tif(action == "") return false;\n\n\tif( action.indexOf(";") != -1 || action.indexOf("}") != -1)\n\t{\n\t\tthis.trace("Error: Action contains unsafe characters");\n\t\treturn false;\n\t}\n\n\tvar tokens = action.split("(");\n\tvar func_name = tokens[0];\n\tif( typeof(this[func_name]) != "function")\n\t{\n\t\tthis.trace("Error: Action not found on node: " + func_name);\n\t\treturn false;\n\t}\n\n\tvar code = action;\n\n\ttry\n\t{\n\t\tvar _foo = eval;\n\t\teval = null;\n\t\t(new Function("with(this) { " + code + "}")).call(this);\n\t\teval = _foo;\n\t}\n\tcatch (err)\n\t{\n\t\tthis.trace("Error executing action {" + action + "} :" + err);\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n*/\n\n/* Allows to get onMouseMove and onMouseUp events even if the mouse is out of focus */\nLGraphNode.prototype.captureInput = function(v)\n{\n\tif(!this.graph || !this.graph.list_of_graphcanvas)\n\t\treturn;\n\n\tvar list = this.graph.list_of_graphcanvas;\n\n\tfor(var i = 0; i < list.length; ++i)\n\t{\n\t\tvar c = list[i];\n\t\t//releasing somebody elses capture?!\n\t\tif(!v && c.node_capturing_input != this)\n\t\t\tcontinue;\n\n\t\t//change\n\t\tc.node_capturing_input = v ? this : null;\n\t}\n}\n\n/**\n* Collapse the node to make it smaller on the canvas\n* @method collapse\n**/\nLGraphNode.prototype.collapse = function( force )\n{\n\tthis.graph._version++;\n\tif(this.constructor.collapsable === false && !force)\n\t\treturn;\n\tif(!this.flags.collapsed)\n\t\tthis.flags.collapsed = true;\n\telse\n\t\tthis.flags.collapsed = false;\n\tthis.setDirtyCanvas(true,true);\n}\n\n/**\n* Forces the node to do not move or realign on Z\n* @method pin\n**/\n\nLGraphNode.prototype.pin = function(v)\n{\n\tthis.graph._version++;\n\tif(v === undefined)\n\t\tthis.flags.pinned = !this.flags.pinned;\n\telse\n\t\tthis.flags.pinned = v;\n}\n\nLGraphNode.prototype.localToScreen = function(x,y, graphcanvas)\n{\n\treturn [(x + this.pos[0]) * graphcanvas.scale + graphcanvas.offset[0],\n\t\t(y + this.pos[1]) * graphcanvas.scale + graphcanvas.offset[1]];\n}\n\n\n\n\nfunction LGraphGroup( title )\n{\n\tthis._ctor( title );\n}\n\nglobal.LGraphGroup = LiteGraph.LGraphGroup = LGraphGroup;\n\nLGraphGroup.prototype._ctor = function( title )\n{\n\tthis.title = title || "Group";\n\tthis.font_size = 24;\n\tthis.color = LGraphCanvas.node_colors.pale_blue ? LGraphCanvas.node_colors.pale_blue.groupcolor : "#AAA";\n\tthis._bounding = new Float32Array([10,10,140,80]);\n\tthis._pos = this._bounding.subarray(0,2);\n\tthis._size = this._bounding.subarray(2,4);\n\tthis._nodes = [];\n\tthis.graph = null;\n\n\tObject.defineProperty( this, "pos", {\n\t\tset: function(v)\n\t\t{\n\t\t\tif(!v || v.length < 2)\n\t\t\t\treturn;\n\t\t\tthis._pos[0] = v[0];\n\t\t\tthis._pos[1] = v[1];\n\t\t},\n\t\tget: function()\n\t\t{\n\t\t\treturn this._pos;\n\t\t},\n\t\tenumerable: true\n\t});\n\n\tObject.defineProperty( this, "size", {\n\t\tset: function(v)\n\t\t{\n\t\t\tif(!v || v.length < 2)\n\t\t\t\treturn;\n\t\t\tthis._size[0] = Math.max(140,v[0]);\n\t\t\tthis._size[1] = Math.max(80,v[1]);\n\t\t},\n\t\tget: function()\n\t\t{\n\t\t\treturn this._size;\n\t\t},\n\t\tenumerable: true\n\t});\n}\n\nLGraphGroup.prototype.configure = function(o)\n{\n\tthis.title = o.title;\n\tthis._bounding.set( o.bounding );\n\tthis.color = o.color;\n\tthis.font = o.font;\n}\n\nLGraphGroup.prototype.serialize = function()\n{\n\tvar b = this._bounding;\n\treturn {\n\t\ttitle: this.title,\n\t\tbounding: [ Math.round(b[0]), Math.round(b[1]), Math.round(b[2]), Math.round(b[3]) ],\n\t\tcolor: this.color,\n\t\tfont: this.font\n\t};\n}\n\nLGraphGroup.prototype.move = function(deltax, deltay, ignore_nodes)\n{\n\tthis._pos[0] += deltax;\n\tthis._pos[1] += deltay;\n\tif(ignore_nodes)\n\t\treturn;\n\tfor(var i = 0; i < this._nodes.length; ++i)\n\t{\n\t\tvar node = this._nodes[i];\n\t\tnode.pos[0] += deltax;\n\t\tnode.pos[1] += deltay;\n\t}\n}\n\nLGraphGroup.prototype.recomputeInsideNodes = function()\n{\n\tthis._nodes.length = 0;\n\tvar nodes = this.graph._nodes;\n\tvar node_bounding = new Float32Array(4);\n\n\tfor(var i = 0; i < nodes.length; ++i)\n\t{\n\t\tvar node = nodes[i];\n\t\tnode.getBounding( node_bounding );\n\t\tif(!overlapBounding( this._bounding, node_bounding ))\n\t\t\tcontinue; //out of the visible area\n\t\tthis._nodes.push( node );\n\t}\n}\n\nLGraphGroup.prototype.isPointInside = LGraphNode.prototype.isPointInside;\nLGraphGroup.prototype.setDirtyCanvas = LGraphNode.prototype.setDirtyCanvas;\n\n\n\n//****************************************\n\n//Scale and Offset\nfunction DragAndScale( element, skip_events )\n{\n\tthis.offset = new Float32Array([0,0]);\n\tthis.scale = 1;\n\tthis.max_scale = 10;\n\tthis.min_scale = 0.1;\n\tthis.onredraw = null;\n\tthis.enabled = true;\n\tthis.last_mouse = [0,0];\n\tthis.element = null;\n\tthis.visible_area = new Float32Array(4);\n\n\tif(element)\n\t{\n\t\tthis.element = element;\n\t\tif(!skip_events)\n\t\t\tthis.bindEvents( element );\n\t}\n}\n\nLiteGraph.DragAndScale = DragAndScale;\n\nDragAndScale.prototype.bindEvents = function( element )\n{\n\tthis.last_mouse = new Float32Array(2);\n\n\tthis._binded_mouse_callback = this.onMouse.bind(this);\n\n\telement.addEventListener("mousedown", this._binded_mouse_callback );\n\telement.addEventListener("mousemove", this._binded_mouse_callback );\n\n\telement.addEventListener("mousewheel", this._binded_mouse_callback, false);\n\telement.addEventListener("wheel", this._binded_mouse_callback, false);\n}\n\nDragAndScale.prototype.computeVisibleArea = function()\n{\n\tif(!this.element)\n\t{\n\t\tthis.visible_area[0] = this.visible_area[1] = this.visible_area[2] = this.visible_area[3] = 0;\n\t\treturn;\n\t}\n\tvar width = this.element.width;\n\tvar height = this.element.height;\n\tvar startx = -this.offset[0];\n\tvar starty = -this.offset[1];\n\tvar endx = startx + width / this.scale;\n\tvar endy = starty + height / this.scale;\n\tthis.visible_area[0] = startx;\n\tthis.visible_area[1] = starty;\n\tthis.visible_area[2] = endx - startx;\n\tthis.visible_area[3] = endy - starty;\n}\n\nDragAndScale.prototype.onMouse = function(e)\n{\n\tif(!this.enabled)\n\t\treturn;\n\n\tvar canvas = this.element;\n\tvar rect = canvas.getBoundingClientRect();\n\tvar x = e.clientX - rect.left;\n\tvar y = e.clientY - rect.top;\n\te.canvasx = x;\n\te.canvasy = y;\n\te.dragging = this.dragging;\n\n\tvar ignore = false;\n\tif(this.onmouse)\n\t\tignore = this.onmouse(e);\n\n\tif(e.type == "mousedown")\n\t{\n\t\tthis.dragging = true;\n\t\tcanvas.removeEventListener("mousemove", this._binded_mouse_callback );\n\t\tdocument.body.addEventListener("mousemove", this._binded_mouse_callback );\n\t\tdocument.body.addEventListener("mouseup", this._binded_mouse_callback );\n\t}\n\telse if(e.type == "mousemove")\n\t{\n\t\tif(!ignore)\n\t\t{\n\t\t\tvar deltax = x - this.last_mouse[0];\n\t\t\tvar deltay = y - this.last_mouse[1];\n\t\t\tif( this.dragging )\n\t\t\t\tthis.mouseDrag( deltax, deltay );\n\t\t}\n\t}\n\telse if(e.type == "mouseup")\n\t{\n\t\tthis.dragging = false;\n\t\tdocument.body.removeEventListener("mousemove", this._binded_mouse_callback );\n\t\tdocument.body.removeEventListener("mouseup", this._binded_mouse_callback );\n\t\tcanvas.addEventListener("mousemove", this._binded_mouse_callback );\n\t}\n\telse if(e.type == "mousewheel" || e.type == "wheel" || e.type == "DOMMouseScroll")\n\t{ \n\t\te.eventType = "mousewheel";\n\t\tif(e.type == "wheel")\n\t\t\te.wheel = -e.deltaY;\n\t\telse\n\t\t\te.wheel = (e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60);\n\n\t\t//from stack overflow\n\t\te.delta = e.wheelDelta ? e.wheelDelta/40 : e.deltaY ? -e.deltaY/3 : 0;\n\t\tthis.changeDeltaScale(1.0 + e.delta * 0.05);\n\t}\n\n\tthis.last_mouse[0] = x;\n\tthis.last_mouse[1] = y;\n\n\te.preventDefault();\n\te.stopPropagation();\n\treturn false;\n}\n\nDragAndScale.prototype.toCanvasContext = function( ctx )\n{\n\tctx.scale( this.scale, this.scale );\n\tctx.translate( this.offset[0], this.offset[1] );\n}\n\nDragAndScale.prototype.convertOffsetToCanvas = function(pos)\n{\n\t//return [pos[0] / this.scale - this.offset[0], pos[1] / this.scale - this.offset[1]];\n\treturn [ (pos[0] + this.offset[0]) * this.scale, (pos[1] + this.offset[1]) * this.scale ];\n}\n\nDragAndScale.prototype.convertCanvasToOffset = function(pos, out)\n{\n\tout = out || [0,0];\n\tout[0] = pos[0] / this.scale - this.offset[0];\n\tout[1] = pos[1] / this.scale - this.offset[1];\n\treturn out;\n}\n\nDragAndScale.prototype.mouseDrag = function(x,y)\n{\n\tthis.offset[0] += x / this.scale;\n\tthis.offset[1] += y / this.scale;\n\n\tif(\tthis.onredraw )\n\t\tthis.onredraw( this );\n}\n\nDragAndScale.prototype.changeScale = function( value, zooming_center )\n{\n\tif(value < this.min_scale)\n\t\tvalue = this.min_scale;\n\telse if(value > this.max_scale)\n\t\tvalue = this.max_scale;\n\n\tif(value == this.scale)\n\t\treturn;\n\n\tif(!this.element)\n\t\treturn;\n\n\tvar rect = this.element.getBoundingClientRect();\n\tif(!rect)\n\t\treturn;\n\n\tzooming_center = zooming_center || [rect.width * 0.5,rect.height * 0.5];\n\tvar center = this.convertCanvasToOffset( zooming_center );\n\tthis.scale = value;\n\tif( Math.abs( this.scale - 1 ) < 0.01 )\n\t\tthis.scale = 1;\n\n\tvar new_center = this.convertCanvasToOffset( zooming_center );\n\tvar delta_offset = [new_center[0] - center[0], new_center[1] - center[1]];\n\n\tthis.offset[0] += delta_offset[0];\n\tthis.offset[1] += delta_offset[1];\n\n\tif(\tthis.onredraw )\n\t\tthis.onredraw( this );\n}\n\nDragAndScale.prototype.changeDeltaScale = function( value, zooming_center )\n{\n\tthis.changeScale( this.scale * value, zooming_center );\n}\n\nDragAndScale.prototype.reset = function()\n{\n\tthis.scale = 1;\n\tthis.offset[0] = 0;\n\tthis.offset[1] = 0;\n}\n\n\n//*********************************************************************************\n// LGraphCanvas: LGraph renderer CLASS\n//*********************************************************************************\n\n/**\n* This class is in charge of rendering one graph inside a canvas. And provides all the interaction required.\n* Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked\n*\n* @class LGraphCanvas\n* @constructor\n* @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas element itself)\n* @param {LGraph} graph [optional]\n* @param {Object} options [optional] { skip_rendering, autoresize }\n*/\nfunction LGraphCanvas( canvas, graph, options )\n{\n\toptions = options || {};\n\n\t//if(graph === undefined)\n //\tthrow ("No graph assigned");\n\tthis.background_image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII='\n\n\tif(canvas && canvas.constructor === String )\n\t\tcanvas = document.querySelector( canvas );\n\n\tthis.ds = new DragAndScale();\n\tthis.zoom_modify_alpha = true; //otherwise it generates ugly patterns when scaling down too much\n\n\tthis.title_text_font = ""+LiteGraph.NODE_TEXT_SIZE+"px Arial";\n\tthis.inner_text_font = "normal "+LiteGraph.NODE_SUBTEXT_SIZE+"px Arial";\n\tthis.node_title_color = LiteGraph.NODE_TITLE_COLOR;\n\tthis.default_link_color = LiteGraph.LINK_COLOR;\n\tthis.default_connection_color = {\n\t\tinput_off: "#778",\n\t\tinput_on: "#7F7",\n\t\toutput_off: "#778",\n\t\toutput_on: "#7F7"\n\t};\n\n\tthis.highquality_render = true;\n\tthis.use_gradients = false; //set to true to render titlebar with gradients\n\tthis.editor_alpha = 1; //used for transition\n\tthis.pause_rendering = false;\n\tthis.clear_background = true;\n\n\tthis.render_only_selected = true;\n\tthis.live_mode = false;\n\tthis.show_info = true;\n\tthis.allow_dragcanvas = true;\n\tthis.allow_dragnodes = true;\n\tthis.allow_interaction = true; //allow to control widgets, buttons, collapse, etc\n\tthis.allow_searchbox = true;\n\tthis.allow_reconnect_links = false; //allows to change a connection with having to redo it again\n\n\tthis.drag_mode = false;\n\tthis.dragging_rectangle = null;\n\n\tthis.filter = null; //allows to filter to only accept some type of nodes in a graph\n\n\tthis.always_render_background = false;\n\tthis.render_shadows = true;\n\tthis.render_canvas_border = true;\n\tthis.render_connections_shadows = false; //too much cpu\n\tthis.render_connections_border = true;\n\tthis.render_curved_connections = false;\n\tthis.render_connection_arrows = false;\n\tthis.render_collapsed_slots = true;\n\tthis.render_execution_order = false;\n\tthis.render_title_colored = true;\n\n\tthis.links_render_mode = LiteGraph.SPLINE_LINK;\n\n\tthis.canvas_mouse = [0,0]; //mouse in canvas graph coordinates, where 0,0 is the top-left corner of the blue rectangle\n\n\t//to personalize the search box\n\tthis.onSearchBox = null;\n\tthis.onSearchBoxSelection = null;\n\n\t//callbacks\n\tthis.onMouse = null;\n\tthis.onDrawBackground = null; //to render background objects (behind nodes and connections) in the canvas affected by transform\n\tthis.onDrawForeground = null; //to render foreground objects (above nodes and connections) in the canvas affected by transform\n\tthis.onDrawOverlay = null; //to render foreground objects not affected by transform (for GUIs)\n\n\tthis.connections_width = 3;\n\tthis.round_radius = 8;\n\n\tthis.current_node = null;\n\tthis.node_widget = null; //used for widgets\n\tthis.last_mouse_position = [0,0];\n\tthis.visible_area = this.ds.visible_area;\n\tthis.visible_links = [];\n\n\t//link canvas and graph\n\tif(graph)\n\t\tgraph.attachCanvas(this);\n\n\tthis.setCanvas( canvas );\n\tthis.clear();\n\n\tif(!options.skip_render)\n\t\tthis.startRendering();\n\n\tthis.autoresize = options.autoresize;\n}\n\nglobal.LGraphCanvas = LiteGraph.LGraphCanvas = LGraphCanvas;\n\nLGraphCanvas.link_type_colors = {"-1": LiteGraph.EVENT_LINK_COLOR,'number':"#AAA","node":"#DCA"};\nLGraphCanvas.gradients = {}; //cache of gradients\n\n/**\n* clears all the data inside\n*\n* @method clear\n*/\nLGraphCanvas.prototype.clear = function()\n{\n\tthis.frame = 0;\n\tthis.last_draw_time = 0;\n\tthis.render_time = 0;\n\tthis.fps = 0;\n\n\t//this.scale = 1;\n\t//this.offset = [0,0];\n\n\tthis.dragging_rectangle = null;\n\n\tthis.selected_nodes = {};\n\tthis.selected_group = null;\n\n\tthis.visible_nodes = [];\n\tthis.node_dragged = null;\n\tthis.node_over = null;\n\tthis.node_capturing_input = null;\n\tthis.connecting_node = null;\n\tthis.highlighted_links = {};\n\n\tthis.dirty_canvas = true;\n\tthis.dirty_bgcanvas = true;\n\tthis.dirty_area = null;\n\n\tthis.node_in_panel = null;\n\tthis.node_widget = null;\n\n\tthis.last_mouse = [0,0];\n\tthis.last_mouseclick = 0;\n\tthis.visible_area.set([0,0,0,0]);\n\n\tif(this.onClear)\n\t\tthis.onClear();\n\t//this.UIinit();\n}\n\n/**\n* assigns a graph, you can reasign graphs to the same canvas\n*\n* @method setGraph\n* @param {LGraph} graph\n*/\nLGraphCanvas.prototype.setGraph = function( graph, skip_clear )\n{\n\tif(this.graph == graph)\n\t\treturn;\n\n\tif(!skip_clear)\n\t\tthis.clear();\n\n\tif(!graph && this.graph)\n\t{\n\t\tthis.graph.detachCanvas(this);\n\t\treturn;\n\t}\n\n\t/*\n\tif(this.graph)\n\t\tthis.graph.canvas = null; //remove old graph link to the canvas\n\tthis.graph = graph;\n\tif(this.graph)\n\t\tthis.graph.canvas = this;\n\t*/\n\tgraph.attachCanvas(this);\n\tthis.setDirty(true,true);\n}\n\n/**\n* opens a graph contained inside a node in the current graph\n*\n* @method openSubgraph\n* @param {LGraph} graph\n*/\nLGraphCanvas.prototype.openSubgraph = function(graph)\n{\n\tif(!graph)\n\t\tthrow("graph cannot be null");\n\n\tif(this.graph == graph)\n\t\tthrow("graph cannot be the same");\n\n\tthis.clear();\n\n\tif(this.graph)\n\t{\n\t\tif(!this._graph_stack)\n\t\t\tthis._graph_stack = [];\n\t\tthis._graph_stack.push(this.graph);\n\t}\n\n\tgraph.attachCanvas(this);\n\tthis.setDirty(true,true);\n}\n\n/**\n* closes a subgraph contained inside a node\n*\n* @method closeSubgraph\n* @param {LGraph} assigns a graph\n*/\nLGraphCanvas.prototype.closeSubgraph = function()\n{\n\tif(!this._graph_stack || this._graph_stack.length == 0)\n\t\treturn;\n\tvar subraph_node = this.graph._subgraph_node;\n\tvar graph = this._graph_stack.pop();\n\tthis.selected_nodes = {};\n\tthis.highlighted_links = {};\n\tgraph.attachCanvas(this);\n\tthis.setDirty(true,true);\n\tif( subraph_node )\n\t{\n\t\tthis.centerOnNode( subraph_node );\n\t\tthis.selectNodes( [subraph_node] );\n\t}\n}\n\n/**\n* assigns a canvas\n*\n* @method setCanvas\n* @param {Canvas} assigns a canvas (also accepts the ID of the element (not a selector)\n*/\nLGraphCanvas.prototype.setCanvas = function( canvas, skip_events )\n{\n\tvar that = this;\n\n\tif(canvas)\n\t{\n\t\tif( canvas.constructor === String )\n\t\t{\n\t\t\tcanvas = document.getElementById(canvas);\n\t\t\tif(!canvas)\n\t\t\t\tthrow("Error creating LiteGraph canvas: Canvas not found");\n\t\t}\n\t}\n\n\tif(canvas === this.canvas)\n\t\treturn;\n\n\tif(!canvas && this.canvas)\n\t{\n\t\t//maybe detach events from old_canvas\n\t\tif(!skip_events)\n\t\t\tthis.unbindEvents();\n\t}\n\n\tthis.canvas = canvas;\n\tthis.ds.element = canvas;\n\n\tif(!canvas)\n\t\treturn;\n\n\t//this.canvas.tabindex = "1000";\n\tcanvas.className += " lgraphcanvas";\n\tcanvas.data = this;\n\tcanvas.tabindex = '1'; //to allow key events\n\n\t//bg canvas: used for non changing stuff\n\tthis.bgcanvas = null;\n\tif(!this.bgcanvas)\n\t{\n\t\tthis.bgcanvas = document.createElement("canvas");\n\t\tthis.bgcanvas.width = this.canvas.width;\n\t\tthis.bgcanvas.height = this.canvas.height;\n\t}\n\n\tif(canvas.getContext == null)\n\t{\n\t\tif( canvas.localName != "canvas" )\n\t\t\tthrow("Element supplied for LGraphCanvas must be a <canvas> element, you passed a " + canvas.localName );\n\t\tthrow("This browser doesnt support Canvas");\n\t}\n\n\tvar ctx = this.ctx = canvas.getContext("2d");\n\tif(ctx == null)\n\t{\n\t\tif(!canvas.webgl_enabled)\n\t\t\tconsole.warn("This canvas seems to be WebGL, enabling WebGL renderer");\n\t\tthis.enableWebGL();\n\t}\n\n\t//input: (move and up could be unbinded)\n\tthis._mousemove_callback = this.processMouseMove.bind(this);\n\tthis._mouseup_callback = this.processMouseUp.bind(this);\n\n\tif(!skip_events)\n\t\tthis.bindEvents();\n}\n\n//used in some events to capture them\nLGraphCanvas.prototype._doNothing = function doNothing(e) { e.preventDefault(); return false; };\nLGraphCanvas.prototype._doReturnTrue = function doNothing(e) { e.preventDefault(); return true; };\n\n/**\n* binds mouse, keyboard, touch and drag events to the canvas\n* @method bindEvents\n**/\nLGraphCanvas.prototype.bindEvents = function()\n{\n\tif(\tthis._events_binded )\n\t{\n\t\tconsole.warn("LGraphCanvas: events already binded");\n\t\treturn;\n\t}\n\n\tvar canvas = this.canvas;\n\tvar ref_window = this.getCanvasWindow();\n\tvar document = ref_window.document; //hack used when moving canvas between windows\n\n\tthis._mousedown_callback = this.processMouseDown.bind(this);\n\tthis._mousewheel_callback = this.processMouseWheel.bind(this);\n\n\tcanvas.addEventListener("mousedown", this._mousedown_callback, true ); //down do not need to store the binded\n\tcanvas.addEventListener("mousemove", this._mousemove_callback );\n\tcanvas.addEventListener("mousewheel", this._mousewheel_callback, false);\n\n\tcanvas.addEventListener("contextmenu", this._doNothing );\n\tcanvas.addEventListener("DOMMouseScroll", this._mousewheel_callback, false);\n\n\t//touch events\n\t//if( 'touchstart' in document.documentElement )\n\t{\n\t\tcanvas.addEventListener("touchstart", this.touchHandler, true);\n\t\tcanvas.addEventListener("touchmove", this.touchHandler, true);\n\t\tcanvas.addEventListener("touchend", this.touchHandler, true);\n\t\tcanvas.addEventListener("touchcancel", this.touchHandler, true);\n\t}\n\n\t//Keyboard ******************\n\tthis._key_callback = this.processKey.bind(this);\n\n\tcanvas.addEventListener("keydown", this._key_callback, true );\n\tdocument.addEventListener("keyup", this._key_callback, true ); //in document, otherwise it doesnt fire keyup\n\n\t//Droping Stuff over nodes ************************************\n\tthis._ondrop_callback = this.processDrop.bind(this);\n\n\tcanvas.addEventListener("dragover", this._doNothing, false );\n\tcanvas.addEventListener("dragend", this._doNothing, false );\n\tcanvas.addEventListener("drop", this._ondrop_callback, false );\n\tcanvas.addEventListener("dragenter", this._doReturnTrue, false );\n\n\tthis._events_binded = true;\n}\n\n/**\n* unbinds mouse events from the canvas\n* @method unbindEvents\n**/\nLGraphCanvas.prototype.unbindEvents = function()\n{\n\tif(\t!this._events_binded )\n\t{\n\t\tconsole.warn("LGraphCanvas: no events binded");\n\t\treturn;\n\t}\n\n\tvar ref_window = this.getCanvasWindow();\n\tvar document = ref_window.document;\n\n\tthis.canvas.removeEventListener( "mousedown", this._mousedown_callback );\n\tthis.canvas.removeEventListener( "mousewheel", this._mousewheel_callback );\n\tthis.canvas.removeEventListener( "DOMMouseScroll", this._mousewheel_callback );\n\tthis.canvas.removeEventListener( "keydown", this._key_callback );\n\tdocument.removeEventListener( "keyup", this._key_callback );\n\tthis.canvas.removeEventListener( "contextmenu", this._doNothing );\n\tthis.canvas.removeEventListener( "drop", this._ondrop_callback );\n\tthis.canvas.removeEventListener( "dragenter", this._doReturnTrue );\n\n\tthis.canvas.removeEventListener("touchstart", this.touchHandler );\n\tthis.canvas.removeEventListener("touchmove", this.touchHandler );\n\tthis.canvas.removeEventListener("touchend", this.touchHandler );\n\tthis.canvas.removeEventListener("touchcancel", this.touchHandler );\n\n\tthis._mousedown_callback = null;\n\tthis._mousewheel_callback = null;\n\tthis._key_callback = null;\n\tthis._ondrop_callback = null;\n\n\tthis._events_binded = false;\n}\n\nLGraphCanvas.getFileExtension = function (url)\n{\n\tvar question = url.indexOf("?");\n\tif(question != -1)\n\t\turl = url.substr(0,question);\n\tvar point = url.lastIndexOf(".");\n\tif(point == -1)\n\t\treturn "";\n\treturn url.substr(point+1).toLowerCase();\n}\n\n/**\n* this function allows to render the canvas using WebGL instead of Canvas2D\n* this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL\n* @method enableWebGL\n**/\nLGraphCanvas.prototype.enableWebGL = function()\n{\n\tif(typeof(GL) === undefined)\n\t\tthrow("litegl.js must be included to use a WebGL canvas");\n\tif(typeof(enableWebGLCanvas) === undefined)\n\t\tthrow("webglCanvas.js must be included to use this feature");\n\n\tthis.gl = this.ctx = enableWebGLCanvas(this.canvas);\n\tthis.ctx.webgl = true;\n\tthis.bgcanvas = this.canvas;\n\tthis.bgctx = this.gl;\n\tthis.canvas.webgl_enabled = true;\n\n\t/*\n\tGL.create({ canvas: this.bgcanvas });\n\tthis.bgctx = enableWebGLCanvas( this.bgcanvas );\n\twindow.gl = this.gl;\n\t*/\n}\n\n\n/**\n* marks as dirty the canvas, this way it will be rendered again\n*\n* @class LGraphCanvas\n* @method setDirty\n* @param {bool} fgcanvas if the foreground canvas is dirty (the one containing the nodes)\n* @param {bool} bgcanvas if the background canvas is dirty (the one containing the wires)\n*/\nLGraphCanvas.prototype.setDirty = function( fgcanvas, bgcanvas )\n{\n\tif(fgcanvas)\n\t\tthis.dirty_canvas = true;\n\tif(bgcanvas)\n\t\tthis.dirty_bgcanvas = true;\n}\n\n/**\n* Used to attach the canvas in a popup\n*\n* @method getCanvasWindow\n* @return {window} returns the window where the canvas is attached (the DOM root node)\n*/\nLGraphCanvas.prototype.getCanvasWindow = function()\n{\n\tif(!this.canvas)\n\t\treturn window;\n\tvar doc = this.canvas.ownerDocument;\n\treturn doc.defaultView || doc.parentWindow;\n}\n\n/**\n* starts rendering the content of the canvas when needed\n*\n* @method startRendering\n*/\nLGraphCanvas.prototype.startRendering = function()\n{\n\tif(this.is_rendering)\n\t\treturn; //already rendering\n\n\tthis.is_rendering = true;\n\trenderFrame.call(this);\n\n\tfunction renderFrame()\n\t{\n\t\tif(!this.pause_rendering)\n\t\t\tthis.draw();\n\n\t\tvar window = this.getCanvasWindow();\n\t\tif(this.is_rendering)\n\t\t\twindow.requestAnimationFrame( renderFrame.bind(this) );\n\t}\n}\n\n/**\n* stops rendering the content of the canvas (to save resources)\n*\n* @method stopRendering\n*/\nLGraphCanvas.prototype.stopRendering = function()\n{\n\tthis.is_rendering = false;\n\t/*\n\tif(this.rendering_timer_id)\n\t{\n\t\tclearInterval(this.rendering_timer_id);\n\t\tthis.rendering_timer_id = null;\n\t}\n\t*/\n}\n\n/* LiteGraphCanvas input */\n\nLGraphCanvas.prototype.processMouseDown = function(e)\n{\n\tif(!this.graph)\n\t\treturn;\n\n\tthis.adjustMouseEvent(e);\n\n\tvar ref_window = this.getCanvasWindow();\n\tvar document = ref_window.document;\n\tLGraphCanvas.active_canvas = this;\n\tvar that = this;\n\n\t//move mouse move event to the window in case it drags outside of the canvas\n\tthis.canvas.removeEventListener("mousemove", this._mousemove_callback );\n\tref_window.document.addEventListener("mousemove", this._mousemove_callback, true ); //catch for the entire window\n\tref_window.document.addEventListener("mouseup", this._mouseup_callback, true );\n\n\tvar node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes, 5 );\n\tvar skip_dragging = false;\n\tvar skip_action = false;\n\tvar now = LiteGraph.getTime();\n\tvar is_double_click = (now - this.last_mouseclick) < 300;\n\n\tthis.canvas_mouse[0] = e.canvasX;\n\tthis.canvas_mouse[1] = e.canvasY;\n\tthis.canvas.focus();\n\n LiteGraph.closeAllContextMenus( ref_window );\n\n\tif(this.onMouse)\n\t{\n\t\tif( this.onMouse(e) == true )\n\t\t\treturn;\n\t}\n\n\tif(e.which == 1) //left button mouse\n\t{\n\t\tif( e.ctrlKey )\n\t\t{\n\t\t\tthis.dragging_rectangle = new Float32Array(4);\n\t\t\tthis.dragging_rectangle[0] = e.canvasX;\n\t\t\tthis.dragging_rectangle[1] = e.canvasY;\n\t\t\tthis.dragging_rectangle[2] = 1;\n\t\t\tthis.dragging_rectangle[3] = 1;\n\t\t\tskip_action = true;\n\t\t}\n\n\t\tvar clicking_canvas_bg = false;\n\n\t\t//when clicked on top of a node\n\t\t//and it is not interactive\n\t\tif( node && this.allow_interaction && !skip_action )\n\t\t{\n\t\t\tif( !this.live_mode && !node.flags.pinned )\n\t\t\t\tthis.bringToFront( node ); //if it wasnt selected?\n\n\t\t\t//not dragging mouse to connect two slots\n\t\t\tif(!this.connecting_node && !node.flags.collapsed && !this.live_mode)\n\t\t\t{\n\t\t\t\t//Search for corner for resize\n\t\t\t\tif( !skip_action && node.resizable !== false && isInsideRectangle( e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,10,10 ))\n\t\t\t\t{\n\t\t\t\t\tthis.resizing_node = node;\n\t\t\t\t\tthis.canvas.style.cursor = "se-resize";\n\t\t\t\t\tskip_action = true;\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\t//search for outputs\n\t\t\t\t\tif(node.outputs)\n\t\t\t\t\t\tfor(var i = 0, l = node.outputs.length; i < l; ++i)\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvar output = node.outputs[i];\n\t\t\t\t\t\t\tvar link_pos = node.getConnectionPos(false,i);\n\t\t\t\t\t\t\tif( isInsideRectangle( e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tthis.connecting_node = node;\n\t\t\t\t\t\t\t\tthis.connecting_output = output;\n\t\t\t\t\t\t\t\tthis.connecting_pos = node.getConnectionPos(false,i);\n\t\t\t\t\t\t\t\tthis.connecting_slot = i;\n\n\t\t\t\t\t\t\t\tif( e.shiftKey )\n\t\t\t\t\t\t\t\t\tnode.disconnectOutput(i);\n\n\t\t\t\t\t\t\t\tif (is_double_click) {\n\t\t\t\t\t\t\t\t\tif (node.onOutputDblClick)\n\t\t\t\t\t\t\t\t\t\tnode.onOutputDblClick(i, e);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tif (node.onOutputClick)\n\t\t\t\t\t\t\t\t\t\tnode.onOutputClick(i, e);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tskip_action = true;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t//search for inputs\n\t\t\t\t\tif(node.inputs)\n\t\t\t\t\t\tfor(var i = 0, l = node.inputs.length; i < l; ++i)\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvar input = node.inputs[i];\n\t\t\t\t\t\t\tvar link_pos = node.getConnectionPos( true, i );\n\t\t\t\t\t\t\tif( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tif (is_double_click) {\n\t\t\t\t\t\t\t\t\tif (node.onInputDblClick)\n\t\t\t\t\t\t\t\t\t\tnode.onInputDblClick(i, e);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tif (node.onInputClick)\n\t\t\t\t\t\t\t\t\t\tnode.onInputClick(i, e);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tif(input.link !== null)\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tvar link_info = this.graph.links[ input.link ]; //before disconnecting\n\t\t\t\t\t\t\t\t\tnode.disconnectInput(i);\n\n\t\t\t\t\t\t\t\t\tif( this.allow_reconnect_links || e.shiftKey )\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tthis.connecting_node = this.graph._nodes_by_id[ link_info.origin_id ];\n\t\t\t\t\t\t\t\t\t\tthis.connecting_slot = link_info.origin_slot;\n\t\t\t\t\t\t\t\t\t\tthis.connecting_output = this.connecting_node.outputs[ this.connecting_slot ];\n\t\t\t\t\t\t\t\t\t\tthis.connecting_pos = this.connecting_node.getConnectionPos( false, this.connecting_slot );\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tthis.dirty_bgcanvas = true;\n\t\t\t\t\t\t\t\t\tskip_action = true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t} //not resizing\n\t\t\t}\n\n\t\t\t//Search for corner for collapsing\n\t\t\t/*\n\t\t\tif( !skip_action && isInsideRectangle( e.canvasX, e.canvasY, node.pos[0], node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT ))\n\t\t\t{\n\t\t\t\tnode.collapse();\n\t\t\t\tskip_action = true;\n\t\t\t}\n\t\t\t*/\n\n\t\t\t//it wasnt clicked on the links boxes\n\t\t\tif(!skip_action)\n\t\t\t{\n\t\t\t\tvar block_drag_node = false;\n\n\t\t\t\t//widgets\n\t\t\t\tvar widget = this.processNodeWidgets( node, this.canvas_mouse, e );\n\t\t\t\tif(widget)\n\t\t\t\t{\n\t\t\t\t\tblock_drag_node = true;\n\t\t\t\t\tthis.node_widget = [node, widget];\n\t\t\t\t}\n\n\t\t\t\t//double clicking\n\t\t\t\tif (is_double_click && this.selected_nodes[ node.id ])\n\t\t\t\t{\n\t\t\t\t\t//double click node\n\t\t\t\t\tif( node.onDblClick)\n\t\t\t\t\t\tnode.onDblClick(e,[e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this);\n\t\t\t\t\tthis.processNodeDblClicked( node );\n\t\t\t\t\tblock_drag_node = true;\n\t\t\t\t}\n\n\t\t\t\t//if do not capture mouse\n\t\t\t\tif( node.onMouseDown && node.onMouseDown( e, [e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this ) )\n\t\t\t\t{\n\t\t\t\t\tblock_drag_node = true;\n\t\t\t\t}\n\t\t\t\telse if(this.live_mode)\n\t\t\t\t{\n\t\t\t\t\tclicking_canvas_bg = true;\n\t\t\t\t\tblock_drag_node = true;\n\t\t\t\t}\n\n\t\t\t\tif(!block_drag_node)\n\t\t\t\t{\n\t\t\t\t\tif(this.allow_dragnodes)\n\t\t\t\t\t\tthis.node_dragged = node;\n\t\t\t\t\tif(!this.selected_nodes[ node.id ])\n\t\t\t\t\t\tthis.processNodeSelected( node, e );\n\t\t\t\t}\n\n\t\t\t\tthis.dirty_canvas = true;\n\t\t\t}\n\t\t}\n\t\telse //clicked outside of nodes\n\t\t{\n\n\t\t\t//search for link connector\n\t\t\tfor(var i = 0; i < this.visible_links.length; ++i)\n\t\t\t{\n\t\t\t\tvar link = this.visible_links[i];\n\t\t\t\tvar center = link._pos;\n\t\t\t\tif( !center || e.canvasX < center[0] - 4 || e.canvasX > center[0] + 4 || e.canvasY < center[1] - 4 || e.canvasY > center[1] + 4 )\n\t\t\t\t\tcontinue;\n\t\t\t\t//link clicked\n\t\t\t\tthis.showLinkMenu( link, e );\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tthis.selected_group = this.graph.getGroupOnPos( e.canvasX, e.canvasY );\n\t\t\tthis.selected_group_resizing = false;\n\t\t\tif( this.selected_group )\n\t\t\t{\n\t\t\t\tif( e.ctrlKey )\n\t\t\t\t\tthis.dragging_rectangle = null;\n\n\t\t\t\tvar dist = distance( [e.canvasX, e.canvasY], [ this.selected_group.pos[0] + this.selected_group.size[0], this.selected_group.pos[1] + this.selected_group.size[1] ] );\n\t\t\t\tif( (dist * this.ds.scale) < 10 )\n\t\t\t\t\tthis.selected_group_resizing = true;\n\t\t\t\telse\n\t\t\t\t\tthis.selected_group.recomputeInsideNodes();\n\t\t\t}\n\n\t\t\tif( is_double_click )\n\t\t\t\tthis.showSearchBox( e );\n\t\t\t\n\t\t\tclicking_canvas_bg = true;\n\t\t}\n\n\t\tif( !skip_action && clicking_canvas_bg && this.allow_dragcanvas )\n\t\t{\n\t\t\tthis.dragging_canvas = true;\n\t\t}\n\t}\n\telse if (e.which == 2) //middle button\n\t{\n\n\t}\n\telse if (e.which == 3) //right button\n\t{\n\t\tthis.processContextMenu( node, e );\n\t}\n\n\t//TODO\n\t//if(this.node_selected != prev_selected)\n\t//\tthis.onNodeSelectionChange(this.node_selected);\n\n\tthis.last_mouse[0] = e.localX;\n\tthis.last_mouse[1] = e.localY;\n\tthis.last_mouseclick = LiteGraph.getTime();\n\tthis.last_mouse_dragging = true;\n\n\t/*\n\tif( (this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)\n\t\tthis.draw();\n\t*/\n\n\tthis.graph.change();\n\n\t//this is to ensure to defocus(blur) if a text input element is on focus\n\tif(!ref_window.document.activeElement || (ref_window.document.activeElement.nodeName.toLowerCase() != "input" && ref_window.document.activeElement.nodeName.toLowerCase() != "textarea"))\n\t\te.preventDefault();\n\te.stopPropagation();\n\n\tif(this.onMouseDown)\n\t\tthis.onMouseDown(e);\n\n\treturn false;\n}\n\n/**\n* Called when a mouse move event has to be processed\n* @method processMouseMove\n**/\nLGraphCanvas.prototype.processMouseMove = function(e)\n{\n\tif(this.autoresize)\n\t\tthis.resize();\n\n\tif(!this.graph)\n\t\treturn;\n\n\tLGraphCanvas.active_canvas = this;\n\tthis.adjustMouseEvent(e);\n\tvar mouse = [e.localX, e.localY];\n\tvar delta = [mouse[0] - this.last_mouse[0], mouse[1] - this.last_mouse[1]];\n\tthis.last_mouse = mouse;\n\tthis.canvas_mouse[0] = e.canvasX;\n\tthis.canvas_mouse[1] = e.canvasY;\n\te.dragging = this.last_mouse_dragging;\n\n\tif( this.node_widget )\n\t{\n\t\tthis.processNodeWidgets( this.node_widget[0], this.canvas_mouse, e, this.node_widget[1] );\n\t\tthis.dirty_canvas = true;\n\t}\n\n\tif( this.dragging_rectangle )\n\t{\n\t\tthis.dragging_rectangle[2] = e.canvasX - this.dragging_rectangle[0];\n\t\tthis.dragging_rectangle[3] = e.canvasY - this.dragging_rectangle[1];\n\t\tthis.dirty_canvas = true;\n\t}\n\telse if (this.selected_group) //moving/resizing a group\n\t{\n\t\tif( this.selected_group_resizing )\n\t\t\tthis.selected_group.size = [ e.canvasX - this.selected_group.pos[0], e.canvasY - this.selected_group.pos[1] ];\n\t\telse\n\t\t{\n\t\t\tvar deltax = delta[0] / this.ds.scale;\n\t\t\tvar deltay = delta[1] / this.ds.scale;\n\t\t\tthis.selected_group.move( deltax, deltay, e.ctrlKey );\n\t\t\tif( this.selected_group._nodes.length)\n\t\t\t\tthis.dirty_canvas = true;\n\t\t}\n\t\tthis.dirty_bgcanvas = true;\n\t}\n\telse if(this.dragging_canvas)\n\t{\n\t\tthis.ds.offset[0] += delta[0] / this.ds.scale;\n\t\tthis.ds.offset[1] += delta[1] / this.ds.scale;\n\t\tthis.dirty_canvas = true;\n\t\tthis.dirty_bgcanvas = true;\n\t}\n\telse if(this.allow_interaction)\n\t{\n\t\tif(this.connecting_node)\n\t\t\tthis.dirty_canvas = true;\n\n\t\t//get node over\n\t\tvar node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );\n\n\t\t//remove mouseover flag\n\t\tfor(var i = 0, l = this.graph._nodes.length; i < l; ++i)\n\t\t{\n\t\t\tif(this.graph._nodes[i].mouseOver && node != this.graph._nodes[i])\n\t\t\t{\n\t\t\t\t//mouse leave\n\t\t\t\tthis.graph._nodes[i].mouseOver = false;\n\t\t\t\tif(this.node_over && this.node_over.onMouseLeave)\n\t\t\t\t\tthis.node_over.onMouseLeave(e);\n\t\t\t\tthis.node_over = null;\n\t\t\t\tthis.dirty_canvas = true;\n\t\t\t}\n\t\t}\n\n\t\t//mouse over a node\n\t\tif(node)\n\t\t{\n\t\t\t//this.canvas.style.cursor = "move";\n\t\t\tif(!node.mouseOver)\n\t\t\t{\n\t\t\t\t//mouse enter\n\t\t\t\tnode.mouseOver = true;\n\t\t\t\tthis.node_over = node;\n\t\t\t\tthis.dirty_canvas = true;\n\n\t\t\t\tif(node.onMouseEnter) node.onMouseEnter(e);\n\t\t\t}\n\n\t\t\t//in case the node wants to do something\n\t\t\tif(node.onMouseMove)\n\t\t\t\tnode.onMouseMove(e, [e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this);\n\n\t\t\t//if dragging a link \n\t\t\tif(this.connecting_node)\n\t\t\t{\n\t\t\t\tvar pos = this._highlight_input || [0,0]; //to store the output of isOverNodeInput\n\n\t\t\t\t//on top of input\n\t\t\t\tif( this.isOverNodeBox( node, e.canvasX, e.canvasY ) )\n\t\t\t\t{\n\t\t\t\t\t//mouse on top of the corner box, dont know what to do\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\t//check if I have a slot below de mouse\n\t\t\t\t\tvar slot = this.isOverNodeInput( node, e.canvasX, e.canvasY, pos );\n\t\t\t\t\tif(slot != -1 && node.inputs[slot] )\n\t\t\t\t\t{\n\t\t\t\t\t\tvar slot_type = node.inputs[slot].type;\n\t\t\t\t\t\tif( LiteGraph.isValidConnection( this.connecting_output.type, slot_type ) )\n\t\t\t\t\t\t\tthis._highlight_input = pos;\n\t\t\t\t\t}\n\t\t\t\t\telse\n\t\t\t\t\t\tthis._highlight_input = null;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t//Search for corner\n\t\t\tif(this.canvas)\n\t\t\t{\n\t\t\t\tif( isInsideRectangle(e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,5,5 ))\n\t\t\t\t\tthis.canvas.style.cursor = "se-resize";\n\t\t\t\telse\n\t\t\t\t\tthis.canvas.style.cursor = "crosshair";\n\t\t\t}\n\t\t}\n\t\telse if(this.canvas)\n\t\t\tthis.canvas.style.cursor = "";\n\n\t\tif(this.node_capturing_input && this.node_capturing_input != node && this.node_capturing_input.onMouseMove)\n\t\t{\n\t\t\tthis.node_capturing_input.onMouseMove(e);\n\t\t}\n\n\n\t\tif(this.node_dragged && !this.live_mode)\n\t\t{\n\t\t\tfor(var i in this.selected_nodes)\n\t\t\t{\n\t\t\t\tvar n = this.selected_nodes[i];\n\t\t\t\tn.pos[0] += delta[0] / this.ds.scale;\n\t\t\t\tn.pos[1] += delta[1] / this.ds.scale;\n\t\t\t}\n\n\t\t\tthis.dirty_canvas = true;\n\t\t\tthis.dirty_bgcanvas = true;\n\t\t}\n\n\t\tif(this.resizing_node && !this.live_mode)\n\t\t{\n\t\t\t//convert mouse to node space\n\t\t\tthis.resizing_node.size[0] = e.canvasX - this.resizing_node.pos[0];\n\t\t\tthis.resizing_node.size[1] = e.canvasY - this.resizing_node.pos[1];\n\n\t\t\t//constraint size\n\t\t\tvar max_slots = Math.max( this.resizing_node.inputs ? this.resizing_node.inputs.length : 0, this.resizing_node.outputs ? this.resizing_node.outputs.length : 0);\n\t\t\tvar min_height = max_slots * LiteGraph.NODE_SLOT_HEIGHT + ( this.resizing_node.widgets ? this.resizing_node.widgets.length : 0 ) * (LiteGraph.NODE_WIDGET_HEIGHT + 4 ) + 4;\n\t\t\tif(this.resizing_node.size[1] < min_height )\n\t\t\t\tthis.resizing_node.size[1] = min_height;\n\t\t\tif(this.resizing_node.size[0] < LiteGraph.NODE_MIN_WIDTH)\n\t\t\t\tthis.resizing_node.size[0] = LiteGraph.NODE_MIN_WIDTH;\n\n\t\t\tthis.canvas.style.cursor = "se-resize";\n\t\t\tthis.dirty_canvas = true;\n\t\t\tthis.dirty_bgcanvas = true;\n\t\t}\n\t}\n\n\te.preventDefault();\n\treturn false;\n}\n\n/**\n* Called when a mouse up event has to be processed\n* @method processMouseUp\n**/\nLGraphCanvas.prototype.processMouseUp = function(e)\n{\n\tif(!this.graph)\n\t\treturn;\n\n\tvar window = this.getCanvasWindow();\n\tvar document = window.document;\n\tLGraphCanvas.active_canvas = this;\n\n\t//restore the mousemove event back to the canvas\n\tdocument.removeEventListener("mousemove", this._mousemove_callback, true );\n\tthis.canvas.addEventListener("mousemove", this._mousemove_callback, true);\n\tdocument.removeEventListener("mouseup", this._mouseup_callback, true );\n\n\tthis.adjustMouseEvent(e);\n\tvar now = LiteGraph.getTime();\n\te.click_time = (now - this.last_mouseclick);\n\tthis.last_mouse_dragging = false;\n\n\tif (e.which == 1) //left button\n\t{\n\t\tthis.node_widget = null;\n\n\t\tif( this.selected_group )\n\t\t{\n\t\t\tvar diffx = this.selected_group.pos[0] - Math.round( this.selected_group.pos[0] );\n\t\t\tvar diffy = this.selected_group.pos[1] - Math.round( this.selected_group.pos[1] );\n\t\t\tthis.selected_group.move( diffx, diffy, e.ctrlKey );\n\t\t\tthis.selected_group.pos[0] = Math.round( this.selected_group.pos[0] );\n\t\t\tthis.selected_group.pos[1] = Math.round( this.selected_group.pos[1] );\n\t\t\tif( this.selected_group._nodes.length )\n\t\t\t\tthis.dirty_canvas = true;\n\t\t\tthis.selected_group = null;\n\t\t}\n\t\tthis.selected_group_resizing = false;\n\n\t\tif( this.dragging_rectangle )\n\t\t{\n\t\t\tif(this.graph)\n\t\t\t{\n\t\t\t\tvar nodes = this.graph._nodes;\n\t\t\t\tvar node_bounding = new Float32Array(4);\n\t\t\t\tthis.deselectAllNodes();\n\t\t\t\t//compute bounding and flip if left to right\n\t\t\t\tvar w = Math.abs( this.dragging_rectangle[2] );\n\t\t\t\tvar h = Math.abs( this.dragging_rectangle[3] );\n\t\t\t\tvar startx = this.dragging_rectangle[2] < 0 ? this.dragging_rectangle[0] - w : this.dragging_rectangle[0];\n\t\t\t\tvar starty = this.dragging_rectangle[3] < 0 ? this.dragging_rectangle[1] - h : this.dragging_rectangle[1];\n\t\t\t\tthis.dragging_rectangle[0] = startx; this.dragging_rectangle[1] = starty; this.dragging_rectangle[2] = w; this.dragging_rectangle[3] = h;\n\n\t\t\t\t//test against all nodes (not visible becasue the rectangle maybe start outside\n\t\t\t\tvar to_select = [];\n\t\t\t\tfor(var i = 0; i < nodes.length; ++i)\n\t\t\t\t{\n\t\t\t\t\tvar node = nodes[i];\n\t\t\t\t\tnode.getBounding( node_bounding );\n\t\t\t\t\tif(!overlapBounding( this.dragging_rectangle, node_bounding ))\n\t\t\t\t\t\tcontinue; //out of the visible area\n\t\t\t\t\tto_select.push(node);\n\t\t\t\t}\n\t\t\t\tif(to_select.length)\n\t\t\t\t\tthis.selectNodes(to_select);\n\t\t\t}\n\t\t\tthis.dragging_rectangle = null;\n\t\t}\n\t\telse if(this.connecting_node) //dragging a connection\n\t\t{\n\t\t\tthis.dirty_canvas = true;\n\t\t\tthis.dirty_bgcanvas = true;\n\n\t\t\tvar node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );\n\n\t\t\t//node below mouse\n\t\t\tif(node)\n\t\t\t{\n\t\t\t\tif( this.connecting_output.type == LiteGraph.EVENT && this.isOverNodeBox( node, e.canvasX, e.canvasY ) )\n\t\t\t\t{\n\t\t\t\t\tthis.connecting_node.connect( this.connecting_slot, node, LiteGraph.EVENT );\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\t//slot below mouse? connect\n\t\t\t\t\tvar slot = this.isOverNodeInput(node, e.canvasX, e.canvasY);\n\t\t\t\t\tif(slot != -1)\n\t\t\t\t\t{\n\t\t\t\t\t\tthis.connecting_node.connect(this.connecting_slot, node, slot);\n\t\t\t\t\t}\n\t\t\t\t\telse\n\t\t\t\t\t{ //not on top of an input\n\t\t\t\t\t\tvar input = node.getInputInfo(0);\n\t\t\t\t\t\t//auto connect\n\t\t\t\t\t\tif(this.connecting_output.type == LiteGraph.EVENT)\n\t\t\t\t\t\t\tthis.connecting_node.connect( this.connecting_slot, node, LiteGraph.EVENT );\n\t\t\t\t\t\telse\n\t\t\t\t\t\t\tif(input && !input.link && LiteGraph.isValidConnection( input.type && this.connecting_output.type ) )\n\t\t\t\t\t\t\t\tthis.connecting_node.connect( this.connecting_slot, node, 0 );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.connecting_output = null;\n\t\t\tthis.connecting_pos = null;\n\t\t\tthis.connecting_node = null;\n\t\t\tthis.connecting_slot = -1;\n\n\t\t}//not dragging connection\n\t\telse if(this.resizing_node)\n\t\t{\n\t\t\tthis.dirty_canvas = true;\n\t\t\tthis.dirty_bgcanvas = true;\n\t\t\tthis.resizing_node = null;\n\t\t}\n\t\telse if(this.node_dragged) //node being dragged?\n\t\t{\n\t\t\tvar node = this.node_dragged;\n\t\t\tif( node && e.click_time < 300 && isInsideRectangle( e.canvasX, e.canvasY, node.pos[0], node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT ))\n\t\t\t\tnode.collapse();\n\n\t\t\tthis.dirty_canvas = true;\n\t\t\tthis.dirty_bgcanvas = true;\n\t\t\tthis.node_dragged.pos[0] = Math.round(this.node_dragged.pos[0]);\n\t\t\tthis.node_dragged.pos[1] = Math.round(this.node_dragged.pos[1]);\n\t\t\tif(this.graph.config.align_to_grid)\n\t\t\t\tthis.node_dragged.alignToGrid();\n\t\t\tthis.node_dragged = null;\n\t\t}\n\t\telse //no node being dragged\n\t\t{\n\t\t\t//get node over\n\t\t\tvar node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );\n\n\t\t\tif ( !node && e.click_time < 300 )\n\t\t\t\tthis.deselectAllNodes();\n\n\t\t\tthis.dirty_canvas = true;\n\t\t\tthis.dragging_canvas = false;\n\n\t\t\tif( this.node_over && this.node_over.onMouseUp )\n\t\t\t\tthis.node_over.onMouseUp(e, [e.canvasX - this.node_over.pos[0], e.canvasY - this.node_over.pos[1]], this );\n\t\t\tif( this.node_capturing_input && this.node_capturing_input.onMouseUp )\n\t\t\t\tthis.node_capturing_input.onMouseUp(e, [e.canvasX - this.node_capturing_input.pos[0], e.canvasY - this.node_capturing_input.pos[1]] );\n\t\t}\n\t}\n\telse if (e.which == 2) //middle button\n\t{\n\t\t//trace("middle");\n\t\tthis.dirty_canvas = true;\n\t\tthis.dragging_canvas = false;\n\t}\n\telse if (e.which == 3) //right button\n\t{\n\t\t//trace("right");\n\t\tthis.dirty_canvas = true;\n\t\tthis.dragging_canvas = false;\n\t}\n\n\t/*\n\tif((this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)\n\t\tthis.draw();\n\t*/\n\n\tthis.graph.change();\n\n\te.stopPropagation();\n\te.preventDefault();\n\treturn false;\n}\n\n/**\n* Called when a mouse wheel event has to be processed\n* @method processMouseWheel\n**/\nLGraphCanvas.prototype.processMouseWheel = function(e)\n{\n\tif(!this.graph || !this.allow_dragcanvas)\n\t\treturn;\n\n\tvar delta = (e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60);\n\n\tthis.adjustMouseEvent(e);\n\n\tvar scale = this.ds.scale;\n\n\tif (delta > 0)\n\t\tscale *= 1.1;\n\telse if (delta < 0)\n\t\tscale *= 1/(1.1);\n\n\t//this.setZoom( scale, [ e.localX, e.localY ] );\n\tthis.ds.changeScale( scale, [ e.localX, e.localY ] );\n\n\tthis.graph.change();\n\n\te.preventDefault();\n\treturn false; // prevent default\n}\n\n/**\n* retuns true if a position (in graph space) is on top of a node little corner box\n* @method isOverNodeBox\n**/\nLGraphCanvas.prototype.isOverNodeBox = function( node, canvasx, canvasy )\n{\n\tvar title_height = LiteGraph.NODE_TITLE_HEIGHT;\n\tif( isInsideRectangle( canvasx, canvasy, node.pos[0] + 2, node.pos[1] + 2 - title_height, title_height - 4, title_height - 4) )\n\t\treturn true;\n\treturn false;\n}\n\n/**\n* retuns true if a position (in graph space) is on top of a node input slot\n* @method isOverNodeInput\n**/\nLGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos )\n{\n\tif(node.inputs)\n\t\tfor(var i = 0, l = node.inputs.length; i < l; ++i)\n\t\t{\n\t\t\tvar input = node.inputs[i];\n\t\t\tvar link_pos = node.getConnectionPos( true, i );\n\t\t\tvar is_inside = false;\n\t\t\tif( node.horizontal )\n\t\t\t\tis_inside = isInsideRectangle(canvasx, canvasy, link_pos[0] - 5, link_pos[1] - 10, 10,20)\n\t\t\telse\n\t\t\t\tis_inside = isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 40,10)\n\t\t\tif(is_inside)\n\t\t\t{\n\t\t\t\tif(slot_pos)\n\t\t\t\t{\n\t\t\t\t\tslot_pos[0] = link_pos[0];\n\t\t\t\t\tslot_pos[1] = link_pos[1];\n\t\t\t\t}\n\t\t\t\treturn i;\n\t\t\t}\n\t\t}\n\treturn -1;\n}\n\n/**\n* process a key event\n* @method processKey\n**/\nLGraphCanvas.prototype.processKey = function(e)\n{\n\tif(!this.graph)\n\t\treturn;\n\n\tvar block_default = false;\n\t//console.log(e); //debug\n\n\tif(e.target.localName == "input")\n\t\treturn;\n\n\tif(e.type == "keydown")\n\t{\n\t\tif(e.keyCode == 32) //esc\n\t\t{\n\t\t\tthis.dragging_canvas = true;\n\t\t\tblock_default = true;\n\t\t}\n\n\t\t//select all Control A\n\t\tif(e.keyCode == 65 && e.ctrlKey)\n\t\t{\n\t\t\tthis.selectNodes();\n\t\t\tblock_default = true;\n\t\t}\n\n\t\tif(e.code == "KeyC" && (e.metaKey || e.ctrlKey) && !e.shiftKey ) //copy\n\t\t{\n\t\t\tif(this.selected_nodes)\n\t\t\t{\n\t\t\t\tthis.copyToClipboard();\n\t\t\t\tblock_default = true;\n\t\t\t}\n\t\t}\n\n\t\tif(e.code == "KeyV" && (e.metaKey || e.ctrlKey) && !e.shiftKey ) //paste\n\t\t{\n\t\t\tthis.pasteFromClipboard();\n\t\t}\n\n\t\t//delete or backspace\n\t\tif(e.keyCode == 46 || e.keyCode == 8)\n\t\t{\n\t\t\tif(e.target.localName != "input" && e.target.localName != "textarea")\n\t\t\t{\n\t\t\t\tthis.deleteSelectedNodes();\n\t\t\t\tblock_default = true;\n\t\t\t}\n\t\t}\n\n\t\t//collapse\n\t\t//...\n\n\t\t//TODO\n\t\tif(this.selected_nodes)\n\t\t\tfor (var i in this.selected_nodes)\n\t\t\t\tif(this.selected_nodes[i].onKeyDown)\n\t\t\t\t\tthis.selected_nodes[i].onKeyDown(e);\n\t}\n\telse if( e.type == "keyup" )\n\t{\n\t\tif(e.keyCode == 32)\n\t\t\tthis.dragging_canvas = false;\n\n\t\tif(this.selected_nodes)\n\t\t\tfor (var i in this.selected_nodes)\n\t\t\t\tif(this.selected_nodes[i].onKeyUp)\n\t\t\t\t\tthis.selected_nodes[i].onKeyUp(e);\n\t}\n\n\tthis.graph.change();\n\n\tif(block_default)\n\t{\n\t\te.preventDefault();\n\t\te.stopImmediatePropagation();\n\t\treturn false;\n\t}\n}\n\nLGraphCanvas.prototype.copyToClipboard = function()\n{\n\tvar clipboard_info = {\n\t\tnodes: [],\n\t\tlinks: []\n\t};\n\tvar index = 0;\n\tvar selected_nodes_array = [];\n\tfor(var i in this.selected_nodes)\n\t{\n\t\tvar node = this.selected_nodes[i];\n\t\tnode._relative_id = index;\n\t\tselected_nodes_array.push( node );\n\t\tindex += 1;\n\t}\n\n\tfor(var i = 0; i < selected_nodes_array.length; ++i)\n\t{\n\t\tvar node = selected_nodes_array[i];\n\t\tclipboard_info.nodes.push( node.clone().serialize() );\n\t\tif(node.inputs && node.inputs.length)\n\t\t\tfor(var j = 0; j < node.inputs.length; ++j)\n\t\t\t{\n\t\t\t\tvar input = node.inputs[j];\n\t\t\t\tif(!input || input.link == null)\n\t\t\t\t\tcontinue;\n\t\t\t\tvar link_info = this.graph.links[ input.link ];\n\t\t\t\tif(!link_info)\n\t\t\t\t\tcontinue;\n\t\t\t\tvar target_node = this.graph.getNodeById( link_info.origin_id );\n\t\t\t\tif(!target_node || !this.selected_nodes[ target_node.id ] ) //improve this by allowing connections to non-selected nodes\n\t\t\t\t\tcontinue; //not selected\n\t\t\t\tclipboard_info.links.push([ target_node._relative_id, j, node._relative_id, link_info.target_slot ]);\n\t\t\t}\n\t}\n\tlocalStorage.setItem( "litegrapheditor_clipboard", JSON.stringify( clipboard_info ) );\n}\n\nLGraphCanvas.prototype.pasteFromClipboard = function()\n{\n\tvar data = localStorage.getItem( "litegrapheditor_clipboard" );\n\tif(!data)\n\t\treturn;\n\n\t//create nodes\n\tvar clipboard_info = JSON.parse(data);\n\tvar nodes = [];\n\tfor(var i = 0; i < clipboard_info.nodes.length; ++i)\n\t{\n\t\tvar node_data = clipboard_info.nodes[i];\n\t\tvar node = LiteGraph.createNode( node_data.type );\n\t\tif(node)\n\t\t{\n\t\t\tnode.configure(node_data);\n\t\t\tnode.pos[0] += 5;\n\t\t\tnode.pos[1] += 5;\n\t\t\tthis.graph.add( node );\n\t\t\tnodes.push( node );\n\t\t}\n\t}\n\n\t//create links\n\tfor(var i = 0; i < clipboard_info.links.length; ++i)\n\t{\n\t\tvar link_info = clipboard_info.links[i];\n\t\tvar origin_node = nodes[ link_info[0] ];\n\t\tvar target_node = nodes[ link_info[2] ];\n\t\torigin_node.connect( link_info[1], target_node, link_info[3] );\n\t}\n\n\tthis.selectNodes( nodes );\n}\n\n/**\n* process a item drop event on top the canvas\n* @method processDrop\n**/\nLGraphCanvas.prototype.processDrop = function(e)\n{\n\te.preventDefault();\n\tthis.adjustMouseEvent(e);\n\n\n\tvar pos = [e.canvasX,e.canvasY];\n\tvar node = this.graph.getNodeOnPos(pos[0],pos[1]);\n\n\tif(!node)\n\t{\n\t\tvar r = null;\n\t\tif(this.onDropItem)\n\t\t\tr = this.onDropItem( event );\n\t\tif(!r)\n\t\t\tthis.checkDropItem(e);\n\t\treturn;\n\t}\n\n\tif( node.onDropFile || node.onDropData )\n\t{\n\t\tvar files = e.dataTransfer.files;\n\t\tif(files && files.length)\n\t\t{\n\t\t\tfor(var i=0; i < files.length; i++)\n\t\t\t{\n\t\t\t\tvar file = e.dataTransfer.files[0];\n\t\t\t\tvar filename = file.name;\n\t\t\t\tvar ext = LGraphCanvas.getFileExtension( filename );\n\t\t\t\t//console.log(file);\n\n\t\t\t\tif(node.onDropFile)\n\t\t\t\t\tnode.onDropFile(file);\n\n\t\t\t\tif(node.onDropData)\n\t\t\t\t{\n\t\t\t\t\t//prepare reader\n\t\t\t\t\tvar reader = new FileReader();\n\t\t\t\t\treader.onload = function (event) {\n\t\t\t\t\t\t//console.log(event.target);\n\t\t\t\t\t\tvar data = event.target.result;\n\t\t\t\t\t\tnode.onDropData( data, filename, file );\n\t\t\t\t\t};\n\n\t\t\t\t\t//read data\n\t\t\t\t\tvar type = file.type.split("/")[0];\n\t\t\t\t\tif(type == "text" || type == "")\n\t\t\t\t\t\treader.readAsText(file);\n\t\t\t\t\telse if (type == "image")\n\t\t\t\t\t\treader.readAsDataURL(file);\n\t\t\t\t\telse\n\t\t\t\t\t\treader.readAsArrayBuffer(file);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tif(node.onDropItem)\n\t{\n\t\tif( node.onDropItem( event ) )\n\t\t\treturn true;\n\t}\n\n\tif(this.onDropItem)\n\t\treturn this.onDropItem( event );\n\n\treturn false;\n}\n\n//called if the graph doesnt have a default drop item behaviour\nLGraphCanvas.prototype.checkDropItem = function(e)\n{\n\tif(e.dataTransfer.files.length)\n\t{\n\t\tvar file = e.dataTransfer.files[0];\n\t\tvar ext = LGraphCanvas.getFileExtension( file.name ).toLowerCase();\n\t\tvar nodetype = LiteGraph.node_types_by_file_extension[ext];\n\t\tif(nodetype)\n\t\t{\n\t\t\tvar node = LiteGraph.createNode( nodetype.type );\n\t\t\tnode.pos = [e.canvasX, e.canvasY];\n\t\t\tthis.graph.add( node );\n\t\t\tif( node.onDropFile )\n\t\t\t\tnode.onDropFile( file );\n\t\t}\n\t}\n}\n\n\nLGraphCanvas.prototype.processNodeDblClicked = function(n)\n{\n\tif(this.onShowNodePanel)\n\t\tthis.onShowNodePanel(n);\n\n\tif(this.onNodeDblClicked)\n\t\tthis.onNodeDblClicked(n);\n\n\tthis.setDirty(true);\n}\n\nLGraphCanvas.prototype.processNodeSelected = function(node,e)\n{\n\tthis.selectNode( node, e && e.shiftKey );\n\tif(this.onNodeSelected)\n\t\tthis.onNodeSelected(node);\n}\n\nLGraphCanvas.prototype.processNodeDeselected = function(node)\n{\n\tthis.deselectNode(node);\n\tif(this.onNodeDeselected)\n\t\tthis.onNodeDeselected(node);\n}\n\n/**\n* selects a given node (or adds it to the current selection)\n* @method selectNode\n**/\nLGraphCanvas.prototype.selectNode = function( node, add_to_current_selection )\n{\n\tif(node == null)\n\t\tthis.deselectAllNodes();\n\telse\n\t\tthis.selectNodes([node], add_to_current_selection );\n}\n\n/**\n* selects several nodes (or adds them to the current selection)\n* @method selectNodes\n**/\nLGraphCanvas.prototype.selectNodes = function( nodes, add_to_current_selection )\n{\n\tif(!add_to_current_selection)\n\t\tthis.deselectAllNodes();\n\n\tnodes = nodes || this.graph._nodes;\n\tfor(var i = 0; i < nodes.length; ++i)\n\t{\n\t\tvar node = nodes[i];\n\t\tif(node.is_selected)\n\t\t\tcontinue;\n\n\t\tif( !node.is_selected && node.onSelected )\n\t\t\tnode.onSelected();\n\t\tnode.is_selected = true;\n\t\tthis.selected_nodes[ node.id ] = node;\n\n\t\tif(node.inputs)\n\t\t\tfor(var j = 0; j < node.inputs.length; ++j)\n\t\t\t\tthis.highlighted_links[ node.inputs[j].link ] = true;\n\t\tif(node.outputs)\n\t\t\tfor(var j = 0; j < node.outputs.length; ++j)\n\t\t\t{\n\t\t\t\tvar out = node.outputs[j];\n\t\t\t\tif( out.links )\n\t\t\t\t\tfor(var k = 0; k < out.links.length; ++k)\n\t\t\t\t\t\tthis.highlighted_links[ out.links[k] ] = true;\n\t\t\t}\n\n\t}\n\n\tthis.setDirty(true);\n}\n\n/**\n* removes a node from the current selection\n* @method deselectNode\n**/\nLGraphCanvas.prototype.deselectNode = function( node )\n{\n\tif(!node.is_selected)\n\t\treturn;\n\tif(node.onDeselected)\n\t\tnode.onDeselected();\n\tnode.is_selected = false;\n\n\t//remove highlighted\n\tif(node.inputs)\n\t\tfor(var i = 0; i < node.inputs.length; ++i)\n\t\t\tdelete this.highlighted_links[ node.inputs[i].link ];\n\tif(node.outputs)\n\t\tfor(var i = 0; i < node.outputs.length; ++i)\n\t\t{\n\t\t\tvar out = node.outputs[i];\n\t\t\tif( out.links )\n\t\t\t\tfor(var j = 0; j < out.links.length; ++j)\n\t\t\t\t\tdelete this.highlighted_links[ out.links[j] ];\n\t\t}\n}\n\n/**\n* removes all nodes from the current selection\n* @method deselectAllNodes\n**/\nLGraphCanvas.prototype.deselectAllNodes = function()\n{\n\tif(!this.graph)\n\t\treturn;\n\tvar nodes = this.graph._nodes;\n\tfor(var i = 0, l = nodes.length; i < l; ++i)\n\t{\n\t\tvar node = nodes[i];\n\t\tif(!node.is_selected)\n\t\t\tcontinue;\n\t\tif(node.onDeselected)\n\t\t\tnode.onDeselected();\n\t\tnode.is_selected = false;\n\t}\n\tthis.selected_nodes = {};\n\tthis.highlighted_links = {};\n\tthis.setDirty(true);\n}\n\n/**\n* deletes all nodes in the current selection from the graph\n* @method deleteSelectedNodes\n**/\nLGraphCanvas.prototype.deleteSelectedNodes = function()\n{\n\tfor(var i in this.selected_nodes)\n\t{\n\t\tvar m = this.selected_nodes[i];\n\t\t//if(m == this.node_in_panel) this.showNodePanel(null);\n\t\tthis.graph.remove(m);\n\t}\n\tthis.selected_nodes = {};\n\tthis.highlighted_links = {};\n\tthis.setDirty(true);\n}\n\n/**\n* centers the camera on a given node\n* @method centerOnNode\n**/\nLGraphCanvas.prototype.centerOnNode = function(node)\n{\n\tthis.ds.offset[0] = -node.pos[0] - node.size[0] * 0.5 + (this.canvas.width * 0.5 / this.ds.scale);\n\tthis.ds.offset[1] = -node.pos[1] - node.size[1] * 0.5 + (this.canvas.height * 0.5 / this.ds.scale);\n\tthis.setDirty(true,true);\n}\n\n/**\n* adds some useful properties to a mouse event, like the position in graph coordinates\n* @method adjustMouseEvent\n**/\nLGraphCanvas.prototype.adjustMouseEvent = function(e)\n{\n\tif(this.canvas)\n\t{\n\t\tvar b = this.canvas.getBoundingClientRect();\n\t\te.localX = e.clientX - b.left;\n\t\te.localY = e.clientY - b.top;\n\t}\n\telse\n\t{\n\t\te.localX = e.clientX;\n\t\te.localY = e.clientY;\n\t}\n\n\te.deltaX = e.localX - this.last_mouse_position[0];\n\te.deltaY = e.localY - this.last_mouse_position[1];\n\n\tthis.last_mouse_position[0] = e.localX;\n\tthis.last_mouse_position[1] = e.localY;\n\n\te.canvasX = e.localX / this.ds.scale - this.ds.offset[0];\n\te.canvasY = e.localY / this.ds.scale - this.ds.offset[1];\n}\n\n/**\n* changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom\n* @method setZoom\n**/\nLGraphCanvas.prototype.setZoom = function(value, zooming_center)\n{\n\tthis.ds.changeScale( value, zooming_center);\n\t/*\n\tif(!zooming_center && this.canvas)\n\t\tzooming_center = [this.canvas.width * 0.5,this.canvas.height * 0.5];\n\n\tvar center = this.convertOffsetToCanvas( zooming_center );\n\n\tthis.ds.scale = value;\n\n\tif(this.scale > this.max_zoom)\n\t\tthis.scale = this.max_zoom;\n\telse if(this.scale < this.min_zoom)\n\t\tthis.scale = this.min_zoom;\n\n\tvar new_center = this.convertOffsetToCanvas( zooming_center );\n\tvar delta_offset = [new_center[0] - center[0], new_center[1] - center[1]];\n\n\tthis.offset[0] += delta_offset[0];\n\tthis.offset[1] += delta_offset[1];\n\t*/\n\n\tthis.dirty_canvas = true;\n\tthis.dirty_bgcanvas = true;\n}\n\n/**\n* converts a coordinate from graph coordinates to canvas2D coordinates\n* @method convertOffsetToCanvas\n**/\nLGraphCanvas.prototype.convertOffsetToCanvas = function( pos, out )\n{\n\treturn this.ds.convertOffsetToCanvas( pos, out );\n}\n\n/**\n* converts a coordinate from Canvas2D coordinates to graph space\n* @method convertCanvasToOffset\n**/\nLGraphCanvas.prototype.convertCanvasToOffset = function( pos, out )\n{\n\treturn this.ds.convertCanvasToOffset( pos, out );\n}\n\n//converts event coordinates from canvas2D to graph coordinates\nLGraphCanvas.prototype.convertEventToCanvasOffset = function(e)\n{\n\tvar rect = this.canvas.getBoundingClientRect();\n\treturn this.convertCanvasToOffset([e.clientX - rect.left,e.clientY - rect.top]);\n}\n\n/**\n* brings a node to front (above all other nodes)\n* @method bringToFront\n**/\nLGraphCanvas.prototype.bringToFront = function(node)\n{\n\tvar i = this.graph._nodes.indexOf(node);\n\tif(i == -1) return;\n\n\tthis.graph._nodes.splice(i,1);\n\tthis.graph._nodes.push(node);\n}\n\n/**\n* sends a node to the back (below all other nodes)\n* @method sendToBack\n**/\nLGraphCanvas.prototype.sendToBack = function(node)\n{\n\tvar i = this.graph._nodes.indexOf(node);\n\tif(i == -1) return;\n\n\tthis.graph._nodes.splice(i,1);\n\tthis.graph._nodes.unshift(node);\n}\n\n/* Interaction */\n\n\n\n/* LGraphCanvas render */\nvar temp = new Float32Array(4);\n\n/**\n* checks which nodes are visible (inside the camera area)\n* @method computeVisibleNodes\n**/\nLGraphCanvas.prototype.computeVisibleNodes = function( nodes, out )\n{\n\tvar visible_nodes = out || [];\n\tvisible_nodes.length = 0;\n\tnodes = nodes || this.graph._nodes;\n\tfor(var i = 0, l = nodes.length; i < l; ++i)\n\t{\n\t\tvar n = nodes[i];\n\n\t\t//skip rendering nodes in live mode\n\t\tif( this.live_mode && !n.onDrawBackground && !n.onDrawForeground )\n\t\t\tcontinue;\n\n\t\tif(!overlapBounding( this.visible_area, n.getBounding( temp ) ))\n\t\t\tcontinue; //out of the visible area\n\n\t\tvisible_nodes.push(n);\n\t}\n\treturn visible_nodes;\n}\n\n/**\n* renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)\n* @method draw\n**/\nLGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas)\n{\n\tif(!this.canvas)\n\t\treturn;\n\n\t//fps counting\n\tvar now = LiteGraph.getTime();\n\tthis.render_time = (now - this.last_draw_time)*0.001;\n\tthis.last_draw_time = now;\n\n\tif(this.graph)\n\t\tthis.ds.computeVisibleArea();\n\n\tif(this.dirty_bgcanvas || force_bgcanvas || this.always_render_background || (this.graph && this.graph._last_trigger_time && (now - this.graph._last_trigger_time) < 1000) )\n\t\tthis.drawBackCanvas();\n\n\tif(this.dirty_canvas || force_canvas)\n\t\tthis.drawFrontCanvas();\n\n\tthis.fps = this.render_time ? (1.0 / this.render_time) : 0;\n\tthis.frame += 1;\n}\n\n/**\n* draws the front canvas (the one containing all the nodes)\n* @method drawFrontCanvas\n**/\nLGraphCanvas.prototype.drawFrontCanvas = function()\n{\n\tthis.dirty_canvas = false;\n\n\tif(!this.ctx)\n\t\tthis.ctx = this.bgcanvas.getContext("2d");\n\tvar ctx = this.ctx;\n\tif(!ctx) //maybe is using webgl...\n\t\treturn;\n\n\tif(ctx.start2D)\n\t\tctx.start2D();\n\n\tvar canvas = this.canvas;\n\n\t//reset in case of error\n\tctx.restore();\n\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\n\t//clip dirty area if there is one, otherwise work in full canvas\n\tif(this.dirty_area)\n\t{\n\t\tctx.save();\n\t\tctx.beginPath();\n\t\tctx.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]);\n\t\tctx.clip();\n\t}\n\n\t//clear\n\t//canvas.width = canvas.width;\n\tif(this.clear_background)\n\t\tctx.clearRect(0,0,canvas.width, canvas.height);\n\n\t//draw bg canvas\n\tif(this.bgcanvas == this.canvas)\n\t\tthis.drawBackCanvas();\n\telse\n\t\tctx.drawImage(this.bgcanvas,0,0);\n\n\t//rendering\n\tif(this.onRender)\n\t\tthis.onRender(canvas, ctx);\n\n\t//info widget\n\tif(this.show_info)\n\t\tthis.renderInfo(ctx);\n\n\tif(this.graph)\n\t{\n\t\t//apply transformations\n\t\tctx.save();\n\t\tthis.ds.toCanvasContext( ctx );\n\n\t\t//draw nodes\n\t\tvar drawn_nodes = 0;\n\t\tvar visible_nodes = this.computeVisibleNodes( null, this.visible_nodes );\n\n\t\tfor (var i = 0; i < visible_nodes.length; ++i)\n\t\t{\n\t\t\tvar node = visible_nodes[i];\n\n\t\t\t//transform coords system\n\t\t\tctx.save();\n\t\t\tctx.translate( node.pos[0], node.pos[1] );\n\n\t\t\t//Draw\n\t\t\tthis.drawNode( node, ctx );\n\t\t\tdrawn_nodes += 1;\n\n\t\t\t//Restore\n\t\t\tctx.restore();\n\t\t}\n\n\t\t//on top (debug)\n\t\tif( this.render_execution_order)\n\t\t\tthis.drawExecutionOrder(ctx);\n\n\n\t\t//connections ontop?\n\t\tif(this.graph.config.links_ontop)\n\t\t\tif(!this.live_mode)\n\t\t\t\tthis.drawConnections(ctx);\n\n\t\t//current connection (the one being dragged by the mouse)\n\t\tif(this.connecting_pos != null)\n\t\t{\n\t\t\tctx.lineWidth = this.connections_width;\n\t\t\tvar link_color = null;\n\n\t\t\tswitch( this.connecting_output.type )\n\t\t\t{\n\t\t\t\tcase LiteGraph.EVENT: link_color = LiteGraph.EVENT_LINK_COLOR; break;\n\t\t\t\tdefault:\n\t\t\t\t\tlink_color = LiteGraph.CONNECTING_LINK_COLOR;\n\t\t\t}\n\t\t\t\n\t\t\t//the connection being dragged by the mouse\n\t\t\tthis.renderLink( ctx, this.connecting_pos, [ this.canvas_mouse[0], this.canvas_mouse[1] ], null, false, null, link_color, this.connecting_output.dir || (this.connecting_node.horizontal ? LiteGraph.DOWN : LiteGraph.RIGHT), LiteGraph.CENTER );\n\n\t\t\tctx.beginPath();\n\t\t\t\tif( this.connecting_output.type === LiteGraph.EVENT || this.connecting_output.shape === LiteGraph.BOX_SHAPE )\n\t\t\t\t\tctx.rect( (this.connecting_pos[0] - 6) + 0.5, (this.connecting_pos[1] - 5) + 0.5,14,10);\n\t\t\t\telse\n\t\t\t\t\tctx.arc( this.connecting_pos[0], this.connecting_pos[1],4,0,Math.PI*2);\n\t\t\tctx.fill();\n\n\t\t\tctx.fillStyle = "#ffcc00";\n\t\t\tif(this._highlight_input)\n\t\t\t{\n\t\t\t\tctx.beginPath();\n\t\t\t\t\tctx.arc( this._highlight_input[0], this._highlight_input[1],6,0,Math.PI*2);\n\t\t\t\tctx.fill();\n\t\t\t}\n\t\t}\n\n\t\tif( this.dragging_rectangle )\n\t\t{\n\t\t\tctx.strokeStyle = "#FFF";\n\t\t\tctx.strokeRect( this.dragging_rectangle[0], this.dragging_rectangle[1], this.dragging_rectangle[2], this.dragging_rectangle[3] );\n\t\t}\n\n\t\tif( this.onDrawForeground )\n\t\t\tthis.onDrawForeground( ctx, this.visible_rect );\n\n\t\tctx.restore();\n\t}\n\n\tif( this.onDrawOverlay )\n\t\tthis.onDrawOverlay( ctx );\n\n\tif(this.dirty_area)\n\t{\n\t\tctx.restore();\n\t\t//this.dirty_area = null;\n\t}\n\n\tif(ctx.finish2D) //this is a function I use in webgl renderer\n\t\tctx.finish2D();\n}\n\n/**\n* draws some useful stats in the corner of the canvas\n* @method renderInfo\n**/\nLGraphCanvas.prototype.renderInfo = function( ctx, x, y )\n{\n\tx = x || 0;\n\ty = y || 0;\n\n\tctx.save();\n\tctx.translate( x, y );\n\n\tctx.font = "10px Arial";\n\tctx.fillStyle = "#888";\n\tif(this.graph)\n\t{\n\t\tctx.fillText( "T: " + this.graph.globaltime.toFixed(2)+"s",5,13*1 );\n\t\tctx.fillText( "I: " + this.graph.iteration,5,13*2 );\n\t\tctx.fillText( "N: " + this.graph._nodes.length + " [" + this.visible_nodes.length + "]",5,13*3 );\n\t\tctx.fillText( "V: " + this.graph._version,5,13*4 );\n\t\tctx.fillText( "FPS:" + this.fps.toFixed(2),5,13*5 );\n\t}\n\telse\n\t\tctx.fillText( "No graph selected",5,13*1 );\n\tctx.restore();\n}\n\n/**\n* draws the back canvas (the one containing the background and the connections)\n* @method drawBackCanvas\n**/\nLGraphCanvas.prototype.drawBackCanvas = function()\n{\n\tvar canvas = this.bgcanvas;\n\tif(canvas.width != this.canvas.width ||\n\t\tcanvas.height != this.canvas.height)\n\t{\n\t\tcanvas.width = this.canvas.width;\n\t\tcanvas.height = this.canvas.height;\n\t}\n\n\tif(!this.bgctx)\n\t\tthis.bgctx = this.bgcanvas.getContext("2d");\n\tvar ctx = this.bgctx;\n\tif(ctx.start)\n\t\tctx.start();\n\n\t//clear\n\tif(this.clear_background)\n\t\tctx.clearRect(0,0,canvas.width, canvas.height);\n\n\tif(this._graph_stack && this._graph_stack.length)\n\t{\n\t\tctx.save();\n\t\tvar parent_graph = this._graph_stack[ this._graph_stack.length - 1];\n\t\tvar subgraph_node = this.graph._subgraph_node;\n\t\tctx.strokeStyle = subgraph_node.bgcolor;\n\t\tctx.lineWidth = 10;\n\t\tctx.strokeRect(1,1,canvas.width-2,canvas.height-2);\n\t\tctx.lineWidth = 1;\n\t\tctx.font = "40px Arial"\n\t\tctx.textAlign = "center";\n\t\tctx.fillStyle = subgraph_node.bgcolor;\n\t\tvar title = "";\n\t\tfor(var i = 1; i < this._graph_stack.length; ++i)\n\t\t\ttitle += this._graph_stack[i]._subgraph_node.getTitle() + " >> ";\n\t\tctx.fillText( title + subgraph_node.getTitle(), canvas.width * 0.5, 40 );\n\t\tctx.restore();\n\t}\n\n\tvar bg_already_painted = false;\n\tif(this.onRenderBackground)\n\t\tbg_already_painted = this.onRenderBackground( canvas, ctx );\n\n\t//reset in case of error\n\tctx.restore();\n\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\tthis.visible_links.length = 0;\n\n\tif(this.graph)\n\t{\n\t\t//apply transformations\n\t\tctx.save();\n\t\tthis.ds.toCanvasContext(ctx);\n\n\t\t//render BG\n\t\tif(this.background_image && this.ds.scale > 0.5 && !bg_already_painted)\n\t\t{\n\t\t\tif (this.zoom_modify_alpha)\n\t\t\t\tctx.globalAlpha = (1.0 - 0.5 / this.ds.scale) * this.editor_alpha;\n\t\t\telse\n\t\t\t\tctx.globalAlpha = this.editor_alpha;\n\t\t\tctx.imageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false;\n\t\t\tif(!this._bg_img || this._bg_img.name != this.background_image)\n\t\t\t{\n\t\t\t\tthis._bg_img = new Image();\n\t\t\t\tthis._bg_img.name = this.background_image;\n\t\t\t\tthis._bg_img.src = this.background_image;\n\t\t\t\tvar that = this;\n\t\t\t\tthis._bg_img.onload = function() {\n\t\t\t\t\tthat.draw(true,true);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tvar pattern = null;\n\t\t\tif(this._pattern == null && this._bg_img.width > 0)\n\t\t\t{\n\t\t\t\tpattern = ctx.createPattern( this._bg_img, 'repeat' );\n\t\t\t\tthis._pattern_img = this._bg_img;\n\t\t\t\tthis._pattern = pattern;\n\t\t\t}\n\t\t\telse\n\t\t\t\tpattern = this._pattern;\n\t\t\tif(pattern)\n\t\t\t{\n\t\t\t\tctx.fillStyle = pattern;\n\t\t\t\tctx.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2],this.visible_area[3]);\n\t\t\t\tctx.fillStyle = "transparent";\n\t\t\t}\n\n\t\t\tctx.globalAlpha = 1.0;\n\t\t\tctx.imageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = true;\n\t\t}\n\n\t\t//groups\n\t\tif(this.graph._groups.length && !this.live_mode)\n\t\t\tthis.drawGroups(canvas, ctx);\n\n\t\tif( this.onDrawBackground )\n\t\t\tthis.onDrawBackground( ctx, this.visible_area );\n\t\tif( this.onBackgroundRender ) //LEGACY\n\t\t{\n\t\t\tconsole.error("WARNING! onBackgroundRender deprecated, now is named onDrawBackground ");\n\t\t\tthis.onBackgroundRender = null;\n\t\t}\n\n\t\t//DEBUG: show clipping area\n\t\t//ctx.fillStyle = "red";\n\t\t//ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - 20, this.visible_area[3] - 20);\n\n\t\t//bg\n\t\tif (this.render_canvas_border) {\n\t\t\tctx.strokeStyle = "#235";\n\t\t\tctx.strokeRect(0,0,canvas.width,canvas.height);\n\t\t}\n\n\t\tif(this.render_connections_shadows)\n\t\t{\n\t\t\tctx.shadowColor = "#000";\n\t\t\tctx.shadowOffsetX = 0;\n\t\t\tctx.shadowOffsetY = 0;\n\t\t\tctx.shadowBlur = 6;\n\t\t}\n\t\telse\n\t\t\tctx.shadowColor = "rgba(0,0,0,0)";\n\n\t\t//draw connections\n\t\tif(!this.live_mode)\n\t\t\tthis.drawConnections(ctx);\n\n\t\tctx.shadowColor = "rgba(0,0,0,0)";\n\n\t\t//restore state\n\t\tctx.restore();\n\t}\n\n\tif(ctx.finish)\n\t\tctx.finish();\n\n\tthis.dirty_bgcanvas = false;\n\tthis.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas\n}\n\nvar temp_vec2 = new Float32Array(2);\n\n/**\n* draws the given node inside the canvas\n* @method drawNode\n**/\nLGraphCanvas.prototype.drawNode = function(node, ctx )\n{\n\tvar glow = false;\n\tthis.current_node = node;\n\n\tvar color = node.color || node.constructor.color || LiteGraph.NODE_DEFAULT_COLOR;\n\tvar bgcolor = node.bgcolor || node.constructor.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;\n\n\t//shadow and glow\n\tif (node.mouseOver)\n\t\tglow = true;\n\n\t//only render if it forces it to do it\n\tif(this.live_mode)\n\t{\n\t\tif(!node.flags.collapsed)\n\t\t{\n\t\t\tctx.shadowColor = "transparent";\n\t\t\tif(node.onDrawForeground)\n\t\t\t\tnode.onDrawForeground(ctx, this, this.canvas );\n\t\t}\n\t\treturn;\n\t}\n\n\tvar editor_alpha = this.editor_alpha;\n\tctx.globalAlpha = editor_alpha;\n\n\tif(this.render_shadows)\n\t{\n\t\tctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR;\n\t\tctx.shadowOffsetX = 2 * this.ds.scale;\n\t\tctx.shadowOffsetY = 2 * this.ds.scale;\n\t\tctx.shadowBlur = 3 * this.ds.scale;\n\t}\n\telse\n\t\tctx.shadowColor = "transparent";\n\n\t//custom draw collapsed method (draw after shadows because they are affected)\n\tif(node.flags.collapsed && node.onDrawCollaped && node.onDrawCollapsed(ctx, this) == true)\n\t\treturn;\n\n\t//clip if required (mask)\n\tvar shape = node._shape || LiteGraph.BOX_SHAPE;\n\tvar size = temp_vec2;\n\ttemp_vec2.set( node.size );\n\tvar horizontal = node.horizontal;// || node.flags.horizontal;\n\n\tif( node.flags.collapsed )\n\t{\n\t\tctx.font = this.inner_text_font;\n\t\tvar title = node.getTitle ? node.getTitle() : node.title;\n\t\tif(title != null)\n\t\t{\n\t\t\tnode._collapsed_width = Math.min( node.size[0], ctx.measureText(title).width + LiteGraph.NODE_TITLE_HEIGHT * 2 );//LiteGraph.NODE_COLLAPSED_WIDTH;\n\t\t\tsize[0] = node._collapsed_width;\n\t\t\tsize[1] = 0;\n\t\t}\n\t}\n\t\n\tif( node.clip_area ) //Start clipping\n\t{\n\t\tctx.save();\n\t\tctx.beginPath();\n\t\tif(shape == LiteGraph.BOX_SHAPE)\n\t\t\tctx.rect(0,0,size[0], size[1]);\n\t\telse if (shape == LiteGraph.ROUND_SHAPE)\n\t\t\tctx.roundRect(0,0,size[0], size[1],10);\n\t\telse if (shape == LiteGraph.CIRCLE_SHAPE)\n\t\t\tctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);\n\t\tctx.clip();\n\t}\n\n\t//draw shape\n\tif( node.has_errors )\n\t\tbgcolor = "red";\n\tthis.drawNodeShape( node, ctx, size, color, bgcolor, node.is_selected, node.mouseOver );\n\tctx.shadowColor = "transparent";\n\n\t//draw foreground\n\tif(node.onDrawForeground)\n\t\tnode.onDrawForeground( ctx, this, this.canvas );\n\n\t//connection slots\n\tctx.textAlign = horizontal ? "center" : "left";\n\tctx.font = this.inner_text_font;\n\n\tvar render_text = this.ds.scale > 0.6;\n\n\tvar out_slot = this.connecting_output;\n\tctx.lineWidth = 1;\n\n\tvar max_y = 0;\n\tvar slot_pos = new Float32Array(2); //to reuse\n\n\t//render inputs and outputs\n\tif(!node.flags.collapsed)\n\t{\n\t\t//input connection slots\n\t\tif(node.inputs)\n\t\t\tfor(var i = 0; i < node.inputs.length; i++)\n\t\t\t{\n\t\t\t\tvar slot = node.inputs[i];\n\n\t\t\t\tctx.globalAlpha = editor_alpha;\n\t\t\t\t//change opacity of incompatible slots when dragging a connection\n\t\t\t\tif ( this.connecting_node && LiteGraph.isValidConnection( slot.type && out_slot.type ) )\n\t\t\t\t\tctx.globalAlpha = 0.4 * editor_alpha;\n\n\t\t\t\tctx.fillStyle = slot.link != null ? (slot.color_on || this.default_connection_color.input_on) : (slot.color_off || this.default_connection_color.input_off);\n\n\t\t\t\tvar pos = node.getConnectionPos( true, i, slot_pos );\n\t\t\t\tpos[0] -= node.pos[0];\n\t\t\t\tpos[1] -= node.pos[1];\n\t\t\t\tif( max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5 )\n\t\t\t\t\tmax_y = pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5;\n\n\t\t\t\tctx.beginPath();\n\n\t\t\t\tif (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE)\n\t\t\t\t{\n\t\t\t\t\tif (horizontal)\n\t ctx.rect((pos[0] - 5) + 0.5, (pos[1] - 8) + 0.5, 10, 14);\n\t\t\t\t\telse\n\t ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5, 14, 10);\n } else if (slot.shape === LiteGraph.ARROW_SHAPE) {\n ctx.moveTo(pos[0] + 8, pos[1] + 0.5);\n ctx.lineTo(pos[0] - 4, (pos[1] + 6) + 0.5);\n ctx.lineTo(pos[0] - 4, (pos[1] - 6) + 0.5);\n ctx.closePath();\n } else {\n ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2);\n }\n\n\t\t\t\tctx.fill();\n\n\t\t\t\t//render name\n\t\t\t\tif(render_text)\n\t\t\t\t{\n\t\t\t\t\tvar text = slot.label != null ? slot.label : slot.name;\n\t\t\t\t\tif(text)\n\t\t\t\t\t{\n\t\t\t\t\t\tctx.fillStyle = LiteGraph.NODE_TEXT_COLOR;\n\t\t\t\t\t\tif( horizontal || slot.dir == LiteGraph.UP )\n\t\t\t\t\t\t\tctx.fillText(text,pos[0],pos[1] - 10);\n\t\t\t\t\t\telse\n\t\t\t\t\t\t\tctx.fillText(text,pos[0] + 10,pos[1] + 5);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t//output connection slots\n\t\tif(this.connecting_node)\n\t\t\tctx.globalAlpha = 0.4 * editor_alpha;\n\n\t\tctx.textAlign = horizontal ? "center" : "right";\n\t\tctx.strokeStyle = "black";\n\t\tif(node.outputs)\n\t\t\tfor(var i = 0; i < node.outputs.length; i++)\n\t\t\t{\n\t\t\t\tvar slot = node.outputs[i];\n\n\t\t\t\tvar pos = node.getConnectionPos(false,i, slot_pos );\n\t\t\t\tpos[0] -= node.pos[0];\n\t\t\t\tpos[1] -= node.pos[1];\n\t\t\t\tif( max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5)\n\t\t\t\t\tmax_y = pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5;\n\n\t\t\t\tctx.fillStyle = slot.links && slot.links.length ? (slot.color_on || this.default_connection_color.output_on) : (slot.color_off || this.default_connection_color.output_off);\n\t\t\t\tctx.beginPath();\n\t\t\t\t//ctx.rect( node.size[0] - 14,i*14,10,10);\n\n\t\t\t\tif (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE)\n\t\t\t\t{\n\t\t\t\t\tif( horizontal )\n\t\t\t\t\t\tctx.rect((pos[0] - 5) + 0.5,(pos[1] - 8) + 0.5,10,14);\n\t\t\t\t\telse\n\t\t\t\t\t\tctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);\n } else if (slot.shape === LiteGraph.ARROW_SHAPE) {\n ctx.moveTo(pos[0] + 8, pos[1] + 0.5);\n ctx.lineTo(pos[0] - 4, (pos[1] + 6) + 0.5);\n ctx.lineTo(pos[0] - 4, (pos[1] - 6) + 0.5);\n ctx.closePath();\n } else {\n ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2);\n }\n\n\t\t\t\t//trigger\n\t\t\t\t//if(slot.node_id != null && slot.slot == -1)\n\t\t\t\t//\tctx.fillStyle = "#F85";\n\n\t\t\t\t//if(slot.links != null && slot.links.length)\n\t\t\t\tctx.fill();\n\t\t\t\tctx.stroke();\n\n\t\t\t\t//render output name\n\t\t\t\tif(render_text)\n\t\t\t\t{\n\t\t\t\t\tvar text = slot.label != null ? slot.label : slot.name;\n\t\t\t\t\tif(text)\n\t\t\t\t\t{\n\t\t\t\t\t\tctx.fillStyle = LiteGraph.NODE_TEXT_COLOR;\n\t\t\t\t\t\tif( horizontal || slot.dir == LiteGraph.DOWN )\n\t\t\t\t\t\t\tctx.fillText(text,pos[0],pos[1] - 8);\n\t\t\t\t\t\telse\n\t\t\t\t\t\t\tctx.fillText(text, pos[0] - 10,pos[1] + 5);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\tctx.textAlign = "left";\n\t\tctx.globalAlpha = 1;\n\n\t\tif(node.widgets)\n\t\t{\n\t\t\tif( horizontal || node.widgets_up )\n\t\t\t\tmax_y = 2;\n\t\t\tthis.drawNodeWidgets( node, max_y, ctx, (this.node_widget && this.node_widget[0] == node) ? this.node_widget[1] : null );\n\t\t}\n\t}\n\telse if(this.render_collapsed_slots)//if collapsed\n\t{\n\t\tvar input_slot = null;\n\t\tvar output_slot = null;\n\n\t\t//get first connected slot to render\n\t\tif(node.inputs)\n\t\t{\n\t\t\tfor(var i = 0; i < node.inputs.length; i++)\n\t\t\t{\n\t\t\t\tvar slot = node.inputs[i];\n\t\t\t\tif( slot.link == null )\n\t\t\t\t\tcontinue;\n\t\t\t\tinput_slot = slot;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\tif(node.outputs)\n\t\t{\n\t\t\tfor(var i = 0; i < node.outputs.length; i++)\n\t\t\t{\n\t\t\t\tvar slot = node.outputs[i];\n\t\t\t\tif(!slot.links || !slot.links.length)\n\t\t\t\t\tcontinue;\n\t\t\t\toutput_slot = slot;\n\t\t\t}\n\t\t}\n\n\t\tif(input_slot)\n\t\t{\n\t\t\tvar x = 0;\n\t\t\tvar y = LiteGraph.NODE_TITLE_HEIGHT * -0.5; //center\n\t\t\tif( horizontal )\n\t\t\t{\n\t\t\t\tx = node._collapsed_width * 0.5;\n\t\t\t\ty = -LiteGraph.NODE_TITLE_HEIGHT;\t\t\n\t\t\t}\n\t\t\tctx.fillStyle = "#686";\n\t\t\tctx.beginPath();\n\t\t\tif ( slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) {\n\t\t\t\tctx.rect(x - 7 + 0.5, y-4,14,8);\n\t\t\t} else if (slot.shape === LiteGraph.ARROW_SHAPE) {\n\t\t\t\tctx.moveTo(x + 8, y);\n\t\t\t\tctx.lineTo(x + -4, y - 4);\n\t\t\t\tctx.lineTo(x + -4, y + 4);\n\t\t\t\tctx.closePath();\n\t\t\t} else {\n\t\t\t\tctx.arc(x, y, 4, 0, Math.PI * 2);\n\t\t\t}\n\t\t\tctx.fill();\n\t\t}\n\n\t\tif(output_slot)\n\t\t{\n\t\t\tvar x = node._collapsed_width;\n\t\t\tvar y = LiteGraph.NODE_TITLE_HEIGHT * -0.5; //center\n\t\t\tif( horizontal )\n\t\t\t{\n\t\t\t\tx = node._collapsed_width * 0.5;\n\t\t\t\ty = 0;\n\t\t\t}\n\t\t\tctx.fillStyle = "#686";\n\t\t\tctx.strokeStyle = "black";\n\t\t\tctx.beginPath();\n\t\t\tif (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) {\n\t\t\t\tctx.rect( x - 7 + 0.5, y - 4,14,8);\n\t\t\t} else if (slot.shape === LiteGraph.ARROW_SHAPE) {\n\t\t\t\tctx.moveTo(x + 6, y);\n\t\t\t\tctx.lineTo(x - 6, y - 4);\n\t\t\t\tctx.lineTo(x - 6, y + 4);\n\t\t\t\tctx.closePath();\n\t\t\t} else {\n\t\t\t\tctx.arc(x, y, 4, 0, Math.PI * 2);\n\t\t\t}\n\t\t\tctx.fill();\n\t\t\t//ctx.stroke();\n\t\t}\n\t}\n\n\tif(node.clip_area)\n\t\tctx.restore();\n\n\tctx.globalAlpha = 1.0;\n}\n\n/**\n* draws the shape of the given node in the canvas\n* @method drawNodeShape\n**/\nvar tmp_area = new Float32Array(4);\n\nLGraphCanvas.prototype.drawNodeShape = function( node, ctx, size, fgcolor, bgcolor, selected, mouse_over )\n{\n\t//bg rect\n\tctx.strokeStyle = fgcolor;\n\tctx.fillStyle = bgcolor;\n\n\tvar title_height = LiteGraph.NODE_TITLE_HEIGHT;\n\tvar low_quality = this.ds.scale < 0.5;\n\n\t//render node area depending on shape\n\tvar shape = node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE;\n\n\tvar title_mode = node.constructor.title_mode;\n\n\tvar render_title = true;\n\tif( title_mode == LiteGraph.TRANSPARENT_TITLE )\n\t\trender_title = false;\n\telse if( title_mode == LiteGraph.AUTOHIDE_TITLE && mouse_over)\n\t\trender_title = true;\n\n\tvar area = tmp_area;\n\tarea[0] = 0; //x\n\tarea[1] = render_title ? -title_height : 0; //y\n\tarea[2] = size[0]+1; //w\n\tarea[3] = render_title ? size[1] + title_height : size[1]; //h\n\n\tvar old_alpha = ctx.globalAlpha;\n\n\t//full node shape\n\t//if(node.flags.collapsed)\n\t{\n\t\tctx.beginPath();\n\t\tif(shape == LiteGraph.BOX_SHAPE || low_quality )\n\t\t\tctx.fillRect( area[0], area[1], area[2], area[3] );\n\t\telse if (shape == LiteGraph.ROUND_SHAPE || shape == LiteGraph.CARD_SHAPE)\n\t\t\tctx.roundRect( area[0], area[1], area[2], area[3], this.round_radius, shape == LiteGraph.CARD_SHAPE ? 0 : this.round_radius);\n\t\telse if (shape == LiteGraph.CIRCLE_SHAPE)\n\t\t\tctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);\n\t\tctx.fill();\n\n\t\tctx.shadowColor = "transparent";\n\t\tctx.fillStyle = "rgba(0,0,0,0.2)";\n\t\tctx.fillRect(0,-1, area[2],2);\n\t}\n\tctx.shadowColor = "transparent";\n\n\tif( node.onDrawBackground )\n\t\tnode.onDrawBackground( ctx, this, this.canvas );\n\n\t//title bg (remember, it is rendered ABOVE the node)\n\tif( render_title || title_mode == LiteGraph.TRANSPARENT_TITLE )\n\t{\n\t\t//title bar\n\t\tif(node.onDrawTitleBar)\n\t\t{\n\t\t\tnode.onDrawTitleBar(ctx, title_height, size, this.ds.scale, fgcolor);\n\t\t}\n\t\telse if(title_mode != LiteGraph.TRANSPARENT_TITLE && (node.constructor.title_color || this.render_title_colored ))\n\t\t{\n\t\t\tvar title_color = node.constructor.title_color || fgcolor;\n\n\t\t\tif(node.flags.collapsed)\n\t\t\t\tctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR;\n\t\n\t\t\t//* gradient test\n\t\t\tif(this.use_gradients)\n\t\t\t{\n\t\t\t\tvar grad = LGraphCanvas.gradients[ title_color ];\n\t\t\t\tif(!grad)\n\t\t\t\t{\n\t\t\t\t\tgrad = LGraphCanvas.gradients[ title_color ] = ctx.createLinearGradient(0,0,400,0);\n\t\t\t\t\tgrad.addColorStop(0, title_color);\n\t\t\t\t\tgrad.addColorStop(1, "#000");\n\t\t\t\t}\n\t\t\t\tctx.fillStyle = grad;\n\t\t\t}\n\t\t\telse\n\t\t\t\tctx.fillStyle = title_color;\n\n\t\t\t//ctx.globalAlpha = 0.5 * old_alpha;\n\t\t\tctx.beginPath();\n\t\t\tif( shape == LiteGraph.BOX_SHAPE || low_quality )\n\t\t\t\tctx.rect(0, -title_height, size[0]+1, title_height);\n\t\t\telse if ( shape == LiteGraph.ROUND_SHAPE || shape == LiteGraph.CARD_SHAPE )\n\t\t\t\tctx.roundRect(0,-title_height,size[0]+1, title_height, this.round_radius, node.flags.collapsed ? this.round_radius : 0);\n\t\t\tctx.fill();\n\t\t\tctx.shadowColor = "transparent";\n\t\t}\n\n\t\t//title box\n\t\tvar box_size = 10;\n\t\tif(node.onDrawTitleBox)\n\t\t{\n\t\t\tnode.onDrawTitleBox( ctx, title_height, size, this.ds.scale );\n\t\t}\n\t\telse if ( shape == LiteGraph.ROUND_SHAPE || shape == LiteGraph.CIRCLE_SHAPE || shape == LiteGraph.CARD_SHAPE )\n\t\t{\n\t\t\tif( low_quality )\n\t\t\t{\n\t\t\t\tctx.fillStyle = "black";\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.arc(title_height * 0.5, title_height * -0.5, box_size*0.5+1,0,Math.PI*2);\n\t\t\t\tctx.fill();\n\t\t\t}\n\n\t\t\tctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;\n\t\t\tctx.beginPath();\n\t\t\tctx.arc(title_height * 0.5, title_height * -0.5, box_size*0.5,0,Math.PI*2);\n\t\t\tctx.fill();\n\t\t}\n\t\telse\n\t\t{\n\t\t\tif( low_quality )\n\t\t\t{\n\t\t\t\tctx.fillStyle = "black";\n\t\t\t\tctx.fillRect( (title_height - box_size) * 0.5 - 1, (title_height + box_size ) * -0.5 - 1, box_size + 2, box_size + 2);\n\t\t\t}\n\t\t\tctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;\n\t\t\tctx.fillRect( (title_height - box_size) * 0.5, (title_height + box_size ) * -0.5, box_size, box_size );\n\t\t}\n\t\tctx.globalAlpha = old_alpha;\n\n\t\t//title text\n\t\tif(node.onDrawTitleText)\n\t\t{\n\t\t\tnode.onDrawTitleText( ctx, title_height, size, this.ds.scale, this.title_text_font, selected);\n\t\t}\n\t\tif( !low_quality )\n\t\t{\n\t\t\tctx.font = this.title_text_font;\n\t\t\tvar title = node.getTitle();\n\t\t\tif(title)\n\t\t\t{\n\t\t\t\tif(selected)\n\t\t\t\t\tctx.fillStyle = "white";\n\t\t\t\telse\n\t\t\t\t\tctx.fillStyle = node.constructor.title_text_color || this.node_title_color;\n\t\t\t\tif( node.flags.collapsed )\n\t\t\t\t{\n\t\t\t\t\tctx.textAlign = "center";\n\t\t\t\t\tvar measure = ctx.measureText(title);\n\t\t\t\t\tctx.fillText( title, title_height + measure.width * 0.5, LiteGraph.NODE_TITLE_TEXT_Y - title_height );\n\t\t\t\t\tctx.textAlign = "left";\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\tctx.textAlign = "left";\n\t\t\t\t\tctx.fillText( title, title_height, LiteGraph.NODE_TITLE_TEXT_Y - title_height );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif(node.onDrawTitle)\n\t\t\tnode.onDrawTitle(ctx);\n\t}\n\n\t//render selection marker\n\tif(selected)\n\t{\n\t\tif( node.onBounding )\n\t\t\tnode.onBounding( area );\n\n\t\tif( title_mode == LiteGraph.TRANSPARENT_TITLE )\n\t\t{\n\t\t\tarea[1] -= title_height;\n\t\t\tarea[3] += title_height;\n\t\t}\n\t\tctx.lineWidth = 1;\n\t\tctx.globalAlpha = 0.8;\n\t\tctx.beginPath();\n\t\tif( shape == LiteGraph.BOX_SHAPE )\n\t\t\tctx.rect(-6 + area[0],-6 + area[1], 12 + area[2], 12 + area[3] );\n\t\telse if (shape == LiteGraph.ROUND_SHAPE || (shape == LiteGraph.CARD_SHAPE && node.flags.collapsed) )\n\t\t\tctx.roundRect(-6 + area[0],-6 + area[1], 12 + area[2], 12 + area[3] , this.round_radius * 2);\n\t\telse if (shape == LiteGraph.CARD_SHAPE)\n\t\t\tctx.roundRect(-6 + area[0],-6 + area[1], 12 + area[2], 12 + area[3] , this.round_radius * 2, 2);\n\t\telse if (shape == LiteGraph.CIRCLE_SHAPE)\n\t\t\tctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5 + 6, 0, Math.PI*2);\n\t\tctx.strokeStyle = "#FFF";\n\t\tctx.stroke();\n\t\tctx.strokeStyle = fgcolor;\n\t\tctx.globalAlpha = 1;\n\t}\n}\n\nvar margin_area = new Float32Array(4);\nvar link_bounding = new Float32Array(4);\nvar tempA = new Float32Array(2);\nvar tempB = new Float32Array(2);\n\n/**\n* draws every connection visible in the canvas\n* OPTIMIZE THIS: precatch connections position instead of recomputing them every time\n* @method drawConnections\n**/\nLGraphCanvas.prototype.drawConnections = function(ctx)\n{\n\tvar now = LiteGraph.getTime();\n\tvar visible_area = this.visible_area;\n\tmargin_area[0] = visible_area[0] - 20; margin_area[1] = visible_area[1] - 20; margin_area[2] = visible_area[2] + 40; margin_area[3] = visible_area[3] + 40;\n\n\t//draw connections\n\tctx.lineWidth = this.connections_width;\n\n\tctx.fillStyle = "#AAA";\n\tctx.strokeStyle = "#AAA";\n\tctx.globalAlpha = this.editor_alpha;\n\t//for every node\n\tvar nodes = this.graph._nodes;\n\tfor (var n = 0, l = nodes.length; n < l; ++n)\n\t{\n\t\tvar node = nodes[n];\n\t\t//for every input (we render just inputs because it is easier as every slot can only have one input)\n\t\tif(!node.inputs || !node.inputs.length)\n\t\t\tcontinue;\n\t\n\t\tfor(var i = 0; i < node.inputs.length; ++i)\n\t\t{\n\t\t\tvar input = node.inputs[i];\n\t\t\tif(!input || input.link == null)\n\t\t\t\tcontinue;\n\t\t\tvar link_id = input.link;\n\t\t\tvar link = this.graph.links[ link_id ];\n\t\t\tif(!link)\n\t\t\t\tcontinue;\n\n\t\t\t//find link info\n\t\t\tvar start_node = this.graph.getNodeById( link.origin_id );\n\t\t\tif(start_node == null) continue;\n\t\t\tvar start_node_slot = link.origin_slot;\n\t\t\tvar start_node_slotpos = null;\n\t\t\tif(start_node_slot == -1)\n\t\t\t\tstart_node_slotpos = [start_node.pos[0] + 10, start_node.pos[1] + 10];\n\t\t\telse\n\t\t\t\tstart_node_slotpos = start_node.getConnectionPos( false, start_node_slot, tempA );\n\t\t\tvar end_node_slotpos = node.getConnectionPos( true, i, tempB );\n\n\t\t\t//compute link bounding\n\t\t\tlink_bounding[0] = start_node_slotpos[0];\n\t\t\tlink_bounding[1] = start_node_slotpos[1];\n\t\t\tlink_bounding[2] = end_node_slotpos[0] - start_node_slotpos[0];\n\t\t\tlink_bounding[3] = end_node_slotpos[1] - start_node_slotpos[1];\n\t\t\tif( link_bounding[2] < 0 ){\n\t\t\t\tlink_bounding[0] += link_bounding[2];\n\t\t\t\tlink_bounding[2] = Math.abs( link_bounding[2] );\n\t\t\t}\n\t\t\tif( link_bounding[3] < 0 ){\n\t\t\t\tlink_bounding[1] += link_bounding[3];\n\t\t\t\tlink_bounding[3] = Math.abs( link_bounding[3] );\n\t\t\t}\n\n\t\t\t//skip links outside of the visible area of the canvas\n\t\t\tif( !overlapBounding( link_bounding, margin_area ) )\n\t\t\t\tcontinue;\n\n\t\t\tvar start_slot = start_node.outputs[ start_node_slot ];\n\t\t\tvar end_slot = node.inputs[i];\n\t\t\tif(!start_slot || !end_slot) continue;\n\t\t\tvar start_dir = start_slot.dir || (start_node.horizontal ? LiteGraph.DOWN : LiteGraph.RIGHT);\n\t\t\tvar end_dir = end_slot.dir || (node.horizontal ? LiteGraph.UP : LiteGraph.LEFT);\n\n\t\t\tthis.renderLink( ctx, start_node_slotpos, end_node_slotpos, link, false, 0, null, start_dir, end_dir );\n\n\t\t\t//event triggered rendered on top\n\t\t\tif(link && link._last_time && (now - link._last_time) < 1000 )\n\t\t\t{\n\t\t\t\tvar f = 2.0 - (now - link._last_time) * 0.002;\n\t\t\t\tvar tmp = ctx.globalAlpha;\n\t\t\t\tctx.globalAlpha = tmp * f;\n\t\t\t\tthis.renderLink( ctx, start_node_slotpos, end_node_slotpos, link, true, f, "white", start_dir, end_dir );\n\t\t\t\tctx.globalAlpha = tmp;\n\t\t\t}\n\t\t}\n\t}\n\tctx.globalAlpha = 1;\n}\n\n/**\n* draws a link between two points\n* @method renderLink\n* @param {vec2} a start pos\n* @param {vec2} b end pos\n* @param {Object} link the link object with all the link info\n* @param {boolean} skip_border ignore the shadow of the link\n* @param {boolean} flow show flow animation (for events)\n* @param {string} color the color for the link\n* @param {number} start_dir the direction enum \n* @param {number} end_dir the direction enum \n* @param {number} num_sublines number of sublines (useful to represent vec3 or rgb)\n**/\nLGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow, color, start_dir, end_dir, num_sublines )\n{\n\tif(link)\n\t\tthis.visible_links.push( link );\n\n\t//choose color\n\tif( !color && link )\n\t\tcolor = link.color || LGraphCanvas.link_type_colors[ link.type ];\n\tif( !color )\n\t\tcolor = this.default_link_color;\n\tif( link != null && this.highlighted_links[ link.id ] )\n\t\tcolor = "#FFF";\n\n\tstart_dir = start_dir || LiteGraph.RIGHT;\n\tend_dir = end_dir || LiteGraph.LEFT;\n\n\tvar dist = distance(a,b);\n\n\tif(this.render_connections_border && this.ds.scale > 0.6)\n\t\tctx.lineWidth = this.connections_width + 4;\n\tctx.lineJoin = "round";\n\tnum_sublines = num_sublines || 1;\n\tif(num_sublines > 1)\n\t\tctx.lineWidth = 0.5;\n\n\t//begin line shape\n\tctx.beginPath();\n\tfor(var i = 0; i < num_sublines; i += 1)\n\t{\n\t\tvar offsety = (i - (num_sublines-1)*0.5)*5;\n\n\t\tif(this.links_render_mode == LiteGraph.SPLINE_LINK)\n\t\t{\n\t\t\tctx.moveTo(a[0],a[1] + offsety);\n\t\t\tvar start_offset_x = 0;\n\t\t\tvar start_offset_y = 0;\n\t\t\tvar end_offset_x = 0;\n\t\t\tvar end_offset_y = 0;\n\t\t\tswitch(start_dir)\n\t\t\t{\n\t\t\t\tcase LiteGraph.LEFT: start_offset_x = dist*-0.25; break;\n\t\t\t\tcase LiteGraph.RIGHT: start_offset_x = dist*0.25; break;\n\t\t\t\tcase LiteGraph.UP: start_offset_y = dist*-0.25; break;\n\t\t\t\tcase LiteGraph.DOWN: start_offset_y = dist*0.25; break;\n\t\t\t}\n\t\t\tswitch(end_dir)\n\t\t\t{\n\t\t\t\tcase LiteGraph.LEFT: end_offset_x = dist*-0.25; break;\n\t\t\t\tcase LiteGraph.RIGHT: end_offset_x = dist*0.25; break;\n\t\t\t\tcase LiteGraph.UP: end_offset_y = dist*-0.25; break;\n\t\t\t\tcase LiteGraph.DOWN: end_offset_y = dist*0.25; break;\n\t\t\t}\n\t\t\tctx.bezierCurveTo(a[0] + start_offset_x, a[1] + start_offset_y + offsety,\n\t\t\t\t\t\t\t\tb[0] + end_offset_x , b[1] + end_offset_y + offsety,\n\t\t\t\t\t\t\t\tb[0], b[1] + offsety);\n\t\t}\n\t\telse if(this.links_render_mode == LiteGraph.LINEAR_LINK)\n\t\t{\n\t\t\tctx.moveTo(a[0],a[1] + offsety);\n\t\t\tvar start_offset_x = 0;\n\t\t\tvar start_offset_y = 0;\n\t\t\tvar end_offset_x = 0;\n\t\t\tvar end_offset_y = 0;\n\t\t\tswitch(start_dir)\n\t\t\t{\n\t\t\t\tcase LiteGraph.LEFT: start_offset_x = -1; break;\n\t\t\t\tcase LiteGraph.RIGHT: start_offset_x = 1; break;\n\t\t\t\tcase LiteGraph.UP: start_offset_y = -1; break;\n\t\t\t\tcase LiteGraph.DOWN: start_offset_y = 1; break;\n\t\t\t}\n\t\t\tswitch(end_dir)\n\t\t\t{\n\t\t\t\tcase LiteGraph.LEFT: end_offset_x = -1; break;\n\t\t\t\tcase LiteGraph.RIGHT: end_offset_x = 1; break;\n\t\t\t\tcase LiteGraph.UP: end_offset_y = -1; break;\n\t\t\t\tcase LiteGraph.DOWN: end_offset_y = 1; break;\n\t\t\t}\n\t\t\tvar l = 15;\n\t\t\tctx.lineTo(a[0] + start_offset_x * l, a[1] + start_offset_y * l + offsety);\n\t\t\tctx.lineTo(b[0] + end_offset_x * l, b[1] + end_offset_y * l + offsety);\n\t\t\tctx.lineTo(b[0],b[1] + offsety);\n\t\t}\n\t\telse if(this.links_render_mode == LiteGraph.STRAIGHT_LINK)\n\t\t{\n\t\t\tctx.moveTo(a[0], a[1]);\n\t\t\tvar start_x = a[0];\n\t\t\tvar start_y = a[1];\n\t\t\tvar end_x = b[0];\n\t\t\tvar end_y = b[1];\n\t\t\tif( start_dir == LiteGraph.RIGHT )\n\t\t\t\tstart_x += 10;\n\t\t\telse\n\t\t\t\tstart_y += 10;\n\t\t\tif( end_dir == LiteGraph.LEFT )\n\t\t\t\tend_x -= 10;\n\t\t\telse\n\t\t\t\tend_y -= 10;\n\t\t\tctx.lineTo(start_x, start_y);\n\t\t\tctx.lineTo((start_x + end_x)*0.5,start_y);\n\t\t\tctx.lineTo((start_x + end_x)*0.5,end_y);\n\t\t\tctx.lineTo(end_x, end_y);\n\t\t\tctx.lineTo(b[0],b[1]);\n\t\t}\n\t\telse\n\t\t\treturn; //unknown\n\t}\n\n\t//rendering the outline of the connection can be a little bit slow\n\tif(this.render_connections_border && this.ds.scale > 0.6 && !skip_border)\n\t{\n\t\tctx.strokeStyle = "rgba(0,0,0,0.5)";\n\t\tctx.stroke();\n\t}\n\n\tctx.lineWidth = this.connections_width;\n\tctx.fillStyle = ctx.strokeStyle = color;\n\tctx.stroke();\n\t//end line shape\n\n\tvar pos = this.computeConnectionPoint( a, b, 0.5, start_dir, end_dir );\n\tif(link && link._pos)\n\t{\n\t\tlink._pos[0] = pos[0];\n\t\tlink._pos[1] = pos[1];\n\t}\n\n\t//render arrow in the middle\n\tif( this.ds.scale >= 0.6 && this.highquality_render && end_dir != LiteGraph.CENTER )\n\t{\n\t\t//render arrow\n\t\tif( this.render_connection_arrows )\n\t\t{\n\t\t\t//compute two points in the connection\n\t\t\tvar posA = this.computeConnectionPoint( a, b, 0.25, start_dir, end_dir );\n\t\t\tvar posB = this.computeConnectionPoint( a, b, 0.26, start_dir, end_dir );\n\t\t\tvar posC = this.computeConnectionPoint( a, b, 0.75, start_dir, end_dir );\n\t\t\tvar posD = this.computeConnectionPoint( a, b, 0.76, start_dir, end_dir );\n\n\t\t\t//compute the angle between them so the arrow points in the right direction\n\t\t\tvar angleA = 0;\n\t\t\tvar angleB = 0;\n\t\t\tif(this.render_curved_connections)\n\t\t\t{\n\t\t\t\tangleA = -Math.atan2( posB[0] - posA[0], posB[1] - posA[1]);\n\t\t\t\tangleB = -Math.atan2( posD[0] - posC[0], posD[1] - posC[1]);\n\t\t\t}\n\t\t\telse\n\t\t\t\tangleB = angleA = b[1] > a[1] ? 0 : Math.PI;\n\n\t\t\t//render arrow\n\t\t\tctx.save();\n\t\t\tctx.translate(posA[0],posA[1]);\n\t\t\tctx.rotate(angleA);\n\t\t\tctx.beginPath();\n\t\t\tctx.moveTo(-5,-3);\n\t\t\tctx.lineTo(0,+7);\n\t\t\tctx.lineTo(+5,-3);\n\t\t\tctx.fill();\n\t\t\tctx.restore();\n\t\t\tctx.save();\n\t\t\tctx.translate(posC[0],posC[1]);\n\t\t\tctx.rotate(angleB);\n\t\t\tctx.beginPath();\n\t\t\tctx.moveTo(-5,-3);\n\t\t\tctx.lineTo(0,+7);\n\t\t\tctx.lineTo(+5,-3);\n\t\t\tctx.fill();\n\t\t\tctx.restore();\n\t\t}\n\n\t\t//circle\n\t\tctx.beginPath();\n\t\tctx.arc(pos[0],pos[1],5,0,Math.PI*2);\n\t\tctx.fill();\n\t}\n\n\t//render flowing points\n\tif(flow)\n\t{\n\t\tctx.fillStyle = color;\n\t\tfor(var i = 0; i < 5; ++i)\n\t\t{\n\t\t\tvar f = (LiteGraph.getTime() * 0.001 + (i * 0.2)) % 1;\n\t\t\tvar pos = this.computeConnectionPoint(a,b,f, start_dir, end_dir);\n\t\t\tctx.beginPath();\n\t\t\tctx.arc(pos[0],pos[1],5,0,2*Math.PI);\n\t\t\tctx.fill();\n\t\t}\n\t}\n}\n\n//returns the link center point based on curvature\nLGraphCanvas.prototype.computeConnectionPoint = function(a,b,t,start_dir,end_dir)\n{\n\tstart_dir = start_dir || LiteGraph.RIGHT;\n\tend_dir = end_dir || LiteGraph.LEFT;\n\n\tvar dist = distance(a,b);\n\tvar p0 = a;\n\tvar p1 = [ a[0], a[1] ];\n\tvar p2 = [ b[0], b[1] ];\n\tvar p3 = b;\n\n\tswitch(start_dir)\n\t{\n\t\tcase LiteGraph.LEFT: p1[0] += dist*-0.25; break;\n\t\tcase LiteGraph.RIGHT: p1[0] += dist*0.25; break;\n\t\tcase LiteGraph.UP: p1[1] += dist*-0.25; break;\n\t\tcase LiteGraph.DOWN: p1[1] += dist*0.25; break;\n\t}\n\tswitch(end_dir)\n\t{\n\t\tcase LiteGraph.LEFT: p2[0] += dist*-0.25; break;\n\t\tcase LiteGraph.RIGHT: p2[0] += dist*0.25; break;\n\t\tcase LiteGraph.UP: p2[1] += dist*-0.25; break;\n\t\tcase LiteGraph.DOWN: p2[1] += dist*0.25; break;\n\t}\n\n\tvar c1 = (1-t)*(1-t)*(1-t);\n\tvar c2 = 3*((1-t)*(1-t))*t;\n\tvar c3 = 3*(1-t)*(t*t);\n\tvar c4 = t*t*t;\n\n\tvar x = c1*p0[0] + c2*p1[0] + c3*p2[0] + c4*p3[0];\n\tvar y = c1*p0[1] + c2*p1[1] + c3*p2[1] + c4*p3[1];\n\treturn [x,y];\n}\n\nLGraphCanvas.prototype.drawExecutionOrder = function(ctx)\n{\n\tctx.shadowColor = "transparent";\n\tctx.globalAlpha = 0.25;\n\n\tctx.textAlign = "center";\n\tctx.strokeStyle = "white";\n\tctx.globalAlpha = 0.75;\n\n\tvar visible_nodes = this.visible_nodes;\n\tfor (var i = 0; i < visible_nodes.length; ++i)\n\t{\n\t\tvar node = visible_nodes[i];\n\t\tctx.fillStyle = "black";\n\t\tctx.fillRect( node.pos[0] - LiteGraph.NODE_TITLE_HEIGHT, node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT );\n\t\tif(node.order == 0)\n\t\t\tctx.strokeRect( node.pos[0] - LiteGraph.NODE_TITLE_HEIGHT + 0.5, node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT + 0.5, LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT );\n\t\tctx.fillStyle = "#FFF";\n\t\tctx.fillText( node.order, node.pos[0] + LiteGraph.NODE_TITLE_HEIGHT * -0.5, node.pos[1] - 6 );\n\t}\n\tctx.globalAlpha = 1;\n}\n\n\n/**\n* draws the widgets stored inside a node\n* @method drawNodeWidgets\n**/\nLGraphCanvas.prototype.drawNodeWidgets = function( node, posY, ctx, active_widget )\n{\n\tif(!node.widgets || !node.widgets.length)\n\t\treturn 0;\n\tvar width = node.size[0];\n\tvar widgets = node.widgets;\n\tposY += 2;\n\tvar H = LiteGraph.NODE_WIDGET_HEIGHT;\n\tvar show_text = this.ds.scale > 0.5;\n\tctx.save();\n\tctx.globalAlpha = this.editor_alpha;\n\tvar outline_color = "#666";\n\tvar background_color = "#222";\n\tvar margin = 15;\n\n\tfor(var i = 0; i < widgets.length; ++i)\n\t{\n\t\tvar w = widgets[i];\n\t\tvar y = posY;\n\t\tif(w.y)\n\t\t\ty = w.y;\n\t\tw.last_y = y;\n\t\tctx.strokeStyle = outline_color;\n\t\tctx.fillStyle = "#222";\n\t\tctx.textAlign = "left";\n\n\t\tswitch( w.type )\n\t\t{\n\t\t\tcase "button": \n\t\t\t\tif(w.clicked)\n\t\t\t\t{\n\t\t\t\t\tctx.fillStyle = "#AAA";\n\t\t\t\t\tw.clicked = false;\n\t\t\t\t\tthis.dirty_canvas = true;\n\t\t\t\t}\n\t\t\t\tctx.fillRect(margin,y,width-margin*2,H);\n\t\t\t\tctx.strokeRect(margin,y,width-margin*2,H);\n\t\t\t\tif(show_text)\n\t\t\t\t{\n\t\t\t\t\tctx.textAlign = "center";\n\t\t\t\t\tctx.fillStyle = "#AAA";\n\t\t\t\t\tctx.fillText( w.name, width*0.5, y + H*0.7 );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase "toggle":\n\t\t\t\tctx.textAlign = "left";\n\t\t\t\tctx.strokeStyle = outline_color;\n\t\t\t\tctx.fillStyle = background_color;\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.roundRect( margin, posY, width - margin*2, H,H*0.5 );\n\t\t\t\tctx.fill();\n\t\t\t\tctx.stroke();\n\t\t\t\tctx.fillStyle = w.value ? "#89A" : "#333";\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.arc( width - margin*2, y + H*0.5, H * 0.36, 0, Math.PI * 2 );\n\t\t\t\tctx.fill();\n\t\t\t\tif(show_text)\n\t\t\t\t{\n\t\t\t\t\tctx.fillStyle = "#999";\n\t\t\t\t\tif(w.name != null)\n\t\t\t\t\t\tctx.fillText( w.name, margin*2, y + H*0.7 );\n\t\t\t\t\tctx.fillStyle = w.value ? "#DDD" : "#888";\n\t\t\t\t\tctx.textAlign = "right";\n\t\t\t\t\tctx.fillText( w.value ? (w.options.on || "true") : (w.options.off || "false"), width - 40, y + H*0.7 );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase "slider": \n\t\t\t\tctx.fillStyle = background_color;\n\t\t\t\tctx.fillRect(margin,y,width-margin*2,H);\n\t\t\t\tvar range = w.options.max - w.options.min;\n\t\t\t\tvar nvalue = (w.value - w.options.min) / range;\n\t\t\t\tctx.fillStyle = active_widget == w ? "#89A" : "#678";\n\t\t\t\tctx.fillRect(margin,y,nvalue*(width-margin*2),H);\n\t\t\t\tctx.strokeRect(margin,y,width-margin*2,H);\n\t\t\t\tif( w.marker )\n\t\t\t\t{\n\t\t\t\t\tvar marker_nvalue = (w.marker - w.options.min) / range;\n\t\t\t\t\tctx.fillStyle = "#AA9";\n\t\t\t\t\tctx.fillRect(margin + marker_nvalue*(width-margin*2),y,2,H);\n\t\t\t\t}\n\t\t\t\tif(show_text)\n\t\t\t\t{\n\t\t\t\t\tctx.textAlign = "center";\n\t\t\t\t\tctx.fillStyle = "#DDD";\n\t\t\t\t\tctx.fillText( w.name + " " + Number(w.value).toFixed(3), width*0.5, y + H*0.7 );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase "number":\n\t\t\tcase "combo":\n\t\t\t\tctx.textAlign = "left";\n\t\t\t\tctx.strokeStyle = outline_color;\n\t\t\t\tctx.fillStyle = background_color;\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.roundRect( margin, posY, width - margin*2, H,H*0.5 );\n\t\t\t\tctx.fill();\n\t\t\t\tctx.stroke();\n\t\t\t\tif(show_text)\n\t\t\t\t{\n\t\t\t\t\tctx.fillStyle = "#AAA";\n\t\t\t\t\tctx.beginPath();\n\t\t\t\t\tctx.moveTo( margin + 16, posY + 5 );\n\t\t\t\t\tctx.lineTo( margin + 6, posY + H*0.5 );\n\t\t\t\t\tctx.lineTo( margin + 16, posY + H - 5 );\n\t\t\t\t\tctx.moveTo( width - margin - 16, posY + 5 );\n\t\t\t\t\tctx.lineTo( width - margin - 6, posY + H*0.5 );\n\t\t\t\t\tctx.lineTo( width - margin - 16, posY + H - 5 );\n\t\t\t\t\tctx.fill();\n\t\t\t\t\tctx.fillStyle = "#999";\n\t\t\t\t\tctx.fillText( w.name, margin*2 + 5, y + H*0.7 );\n\t\t\t\t\tctx.fillStyle = "#DDD";\n\t\t\t\t\tctx.textAlign = "right";\n\t\t\t\t\tif(w.type == "number")\n\t\t\t\t\t\tctx.fillText( Number(w.value).toFixed( w.options.precision !== undefined ? w.options.precision : 3), width - margin*2 - 20, y + H*0.7 );\n\t\t\t\t\telse\n\t\t\t\t\t\tctx.fillText( w.value, width - margin*2 - 20, y + H*0.7 );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase "string":\n\t\t\tcase "text":\n\t\t\t\tctx.textAlign = "left";\n\t\t\t\tctx.strokeStyle = outline_color;\n\t\t\t\tctx.fillStyle = background_color;\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.roundRect( margin, posY, width - margin*2, H,H*0.5 );\n\t\t\t\tctx.fill();\n\t\t\t\tctx.stroke();\n\t\t\t\tif(show_text)\n\t\t\t\t{\n\t\t\t\t\tctx.fillStyle = "#999";\n\t\t\t\t\tif(w.name != null)\n\t\t\t\t\t\tctx.fillText( w.name, margin*2, y + H*0.7 );\n\t\t\t\t\tctx.fillStyle = "#DDD";\n\t\t\t\t\tctx.textAlign = "right";\n\t\t\t\t\tctx.fillText( w.value, width - margin*2, y + H*0.7 );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tif(w.draw)\n\t\t\t\t\tw.draw(ctx,node,w,y,H);\n\t\t\t\tbreak;\n\t\t}\n\t\tposY += H + 4;\n\t}\n\tctx.restore();\n}\n\n/**\n* process an event on widgets \n* @method processNodeWidgets\n**/\nLGraphCanvas.prototype.processNodeWidgets = function( node, pos, event, active_widget )\n{\n\tif(!node.widgets || !node.widgets.length)\n\t\treturn null;\n\n\tvar x = pos[0] - node.pos[0];\n\tvar y = pos[1] - node.pos[1];\n\tvar width = node.size[0];\n\tvar that = this;\n\tvar ref_window = this.getCanvasWindow();\n\n\tfor(var i = 0; i < node.widgets.length; ++i)\n\t{\n\t\tvar w = node.widgets[i];\n\t\tif( w == active_widget || (x > 6 && x < (width - 12) && y > w.last_y && y < (w.last_y + LiteGraph.NODE_WIDGET_HEIGHT)) )\n\t\t{\n\t\t\t//inside widget\n\t\t\tswitch( w.type )\n\t\t\t{\n\t\t\t\tcase "button": \n\t\t\t\t\tif(w.callback)\n\t\t\t\t\t\tsetTimeout( function(){\tw.callback( w, that, node, pos ); }, 20 );\n\t\t\t\t\tw.clicked = true;\n\t\t\t\t\tthis.dirty_canvas = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase "slider": \n\t\t\t\t\tvar range = w.options.max - w.options.min;\n\t\t\t\t\tvar nvalue = Math.clamp( (x - 10) / (width - 20), 0, 1);\n\t\t\t\t\tw.value = w.options.min + (w.options.max - w.options.min) * nvalue;\n\t\t\t\t\tif(w.callback)\n\t\t\t\t\t\tsetTimeout( function(){\tw.callback( w.value, that, node, pos ); }, 20 );\n\t\t\t\t\tthis.dirty_canvas = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase "number": \n\t\t\t\tcase "combo": \n\t\t\t\t\tif(event.type == "mousemove" && w.type == "number")\n\t\t\t\t\t{\n\t\t\t\t\t\tw.value += (event.deltaX * 0.1) * (w.options.step || 1);\n\t\t\t\t\t\tif(w.options.min != null && w.value < w.options.min)\n\t\t\t\t\t\t\tw.value = w.options.min;\n\t\t\t\t\t\tif(w.options.max != null && w.value > w.options.max)\n\t\t\t\t\t\t\tw.value = w.options.max;\n\t\t\t\t\t}\n\t\t\t\t\telse if( event.type == "mousedown" )\n\t\t\t\t\t{\n\t\t\t\t\t\tvar values = w.options.values;\n\t\t\t\t\t\tif(values && values.constructor === Function)\n\t\t\t\t\t\t\tvalues = w.options.values( w, node );\n\n\t\t\t\t\t\tvar delta = ( x < 40 ? -1 : ( x > width - 40 ? 1 : 0) );\n\t\t\t\t\t\tif (w.type == "number")\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tw.value += delta * 0.1 * (w.options.step || 1);\n\t\t\t\t\t\t\tif(w.options.min != null && w.value < w.options.min)\n\t\t\t\t\t\t\t\tw.value = w.options.min;\n\t\t\t\t\t\t\tif(w.options.max != null && w.value > w.options.max)\n\t\t\t\t\t\t\t\tw.value = w.options.max;\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse if(delta)\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvar index = values.indexOf( w.value ) + delta;\n\t\t\t\t\t\t\tif( index >= values.length )\n\t\t\t\t\t\t\t\tindex = 0;\n\t\t\t\t\t\t\tif( index < 0 )\n\t\t\t\t\t\t\t\tindex = values.length - 1;\n\t\t\t\t\t\t\tw.value = values[ index ];\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvar menu = new LiteGraph.ContextMenu( values, { scale: Math.max(1,this.ds.scale), event: event, className: "dark", callback: inner_clicked.bind(w) }, ref_window );\n\t\t\t\t\t\t\tfunction inner_clicked( v, option, event )\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tthis.value = v;\n\t\t\t\t\t\t\t\tthat.dirty_canvas = true;\n\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif(w.callback)\n\t\t\t\t\t\tsetTimeout( (function(){ this.callback( this.value, that, node, pos ); }).bind(w), 20 );\n\t\t\t\t\tthis.dirty_canvas = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase "toggle":\n\t\t\t\t\tif( event.type == "mousedown" )\n\t\t\t\t\t{\n\t\t\t\t\t\tw.value = !w.value;\n\t\t\t\t\t\tif(w.callback)\n\t\t\t\t\t\t\tsetTimeout( function(){\tw.callback( w.value, that, node, pos ); }, 20 );\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase "string":\n\t\t\t\tcase "text":\n\t\t\t\t\tif( event.type == "mousedown" )\n\t\t\t\t\t\tthis.prompt( "Value", w.value, (function(v){ this.value = v; if(w.callback) w.callback(v, that, node ); }).bind(w), event );\n\t\t\t\t\tbreak;\n\t\t\t\tdefault: \n\t\t\t\t\tif( w.mouse )\n\t\t\t\t\t\tw.mouse( ctx, event, [x,y], node );\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\treturn w;\n\t\t}\n\t}\n\treturn null;\n}\n\n/**\n* draws every group area in the background\n* @method drawGroups\n**/\nLGraphCanvas.prototype.drawGroups = function(canvas, ctx)\n{\n\tif(!this.graph)\n\t\treturn;\n\n\tvar groups = this.graph._groups;\n\n\tctx.save();\n\tctx.globalAlpha = 0.5 * this.editor_alpha;\n\n\tfor(var i = 0; i < groups.length; ++i)\n\t{\n\t\tvar group = groups[i];\n\n\t\tif(!overlapBounding( this.visible_area, group._bounding ))\n\t\t\tcontinue; //out of the visible area\n\n\t\tctx.fillStyle = group.color || "#335";\n\t\tctx.strokeStyle = group.color || "#335";\n\t\tvar pos = group._pos;\n\t\tvar size = group._size;\n\t\tctx.globalAlpha = 0.25 * this.editor_alpha;\n\t\tctx.beginPath();\n\t\tctx.rect( pos[0] + 0.5, pos[1] + 0.5, size[0], size[1] );\n\t\tctx.fill();\n\t\tctx.globalAlpha = this.editor_alpha;;\n\t\tctx.stroke();\n\n\t\tctx.beginPath();\n\t\tctx.moveTo( pos[0] + size[0], pos[1] + size[1] );\n\t\tctx.lineTo( pos[0] + size[0] - 10, pos[1] + size[1] );\n\t\tctx.lineTo( pos[0] + size[0], pos[1] + size[1] - 10 );\n\t\tctx.fill();\n\n\t\tvar font_size = (group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE);\n\t\tctx.font = font_size + "px Arial";\n\t\tctx.fillText( group.title, pos[0] + 4, pos[1] + font_size );\n\t}\n\n\tctx.restore();\n}\n\nLGraphCanvas.prototype.adjustNodesSize = function()\n{\n\tvar nodes = this.graph._nodes;\n\tfor(var i = 0; i < nodes.length; ++i)\n\t\tnodes[i].size = nodes[i].computeSize();\n\tthis.setDirty(true,true);\n}\n\n\n/**\n* resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode\n* @method resize\n**/\nLGraphCanvas.prototype.resize = function(width, height)\n{\n\tif(!width && !height)\n\t{\n\t\tvar parent = this.canvas.parentNode;\n\t\twidth = parent.offsetWidth;\n\t\theight = parent.offsetHeight;\n\t}\n\n\tif(this.canvas.width == width && this.canvas.height == height)\n\t\treturn;\n\n\tthis.canvas.width = width;\n\tthis.canvas.height = height;\n\tthis.bgcanvas.width = this.canvas.width;\n\tthis.bgcanvas.height = this.canvas.height;\n\tthis.setDirty(true,true);\n}\n\n/**\n* switches to live mode (node shapes are not rendered, only the content)\n* this feature was designed when graphs where meant to create user interfaces\n* @method switchLiveMode\n**/\nLGraphCanvas.prototype.switchLiveMode = function(transition)\n{\n\tif(!transition)\n\t{\n\t\tthis.live_mode = !this.live_mode;\n\t\tthis.dirty_canvas = true;\n\t\tthis.dirty_bgcanvas = true;\n\t\treturn;\n\t}\n\n\tvar self = this;\n\tvar delta = this.live_mode ? 1.1 : 0.9;\n\tif(this.live_mode)\n\t{\n\t\tthis.live_mode = false;\n\t\tthis.editor_alpha = 0.1;\n\t}\n\n\tvar t = setInterval(function() {\n\t\tself.editor_alpha *= delta;\n\t\tself.dirty_canvas = true;\n\t\tself.dirty_bgcanvas = true;\n\n\t\tif(delta < 1 && self.editor_alpha < 0.01)\n\t\t{\n\t\t\tclearInterval(t);\n\t\t\tif(delta < 1)\n\t\t\t\tself.live_mode = true;\n\t\t}\n\t\tif(delta > 1 && self.editor_alpha > 0.99)\n\t\t{\n\t\t\tclearInterval(t);\n\t\t\tself.editor_alpha = 1;\n\t\t}\n\t},1);\n}\n\nLGraphCanvas.prototype.onNodeSelectionChange = function(node)\n{\n\treturn; //disabled\n}\n\nLGraphCanvas.prototype.touchHandler = function(event)\n{\n\t//alert("foo");\n var touches = event.changedTouches,\n first = touches[0],\n type = "";\n\n switch(event.type)\n {\n case "touchstart": type = "mousedown"; break;\n case "touchmove": type = "mousemove"; break;\n case "touchend": type = "mouseup"; break;\n default: return;\n }\n\n //initMouseEvent(type, canBubble, cancelable, view, clickCount,\n // screenX, screenY, clientX, clientY, ctrlKey,\n // altKey, shiftKey, metaKey, button, relatedTarget);\n\n\tvar window = this.getCanvasWindow();\n\tvar document = window.document;\n\n var simulatedEvent = document.createEvent("MouseEvent");\n simulatedEvent.initMouseEvent(type, true, true, window, 1,\n first.screenX, first.screenY,\n first.clientX, first.clientY, false,\n false, false, false, 0/*left*/, null);\n\tfirst.target.dispatchEvent(simulatedEvent);\n event.preventDefault();\n}\n\n/* CONTEXT MENU ********************/\n\nLGraphCanvas.onGroupAdd = function(info,entry,mouse_event)\n{\n\tvar canvas = LGraphCanvas.active_canvas;\n\tvar ref_window = canvas.getCanvasWindow();\n\t\t\n\tvar group = new LiteGraph.LGraphGroup();\n\tgroup.pos = canvas.convertEventToCanvasOffset( mouse_event );\n\tcanvas.graph.add( group );\n}\n\nLGraphCanvas.onMenuAdd = function( node, options, e, prev_menu )\n{\n\tvar canvas = LGraphCanvas.active_canvas;\n\tvar ref_window = canvas.getCanvasWindow();\n\n\tvar values = LiteGraph.getNodeTypesCategories();\n\tvar entries = [];\n\tfor(var i in values)\n\t\tif(values[i])\n\t\t\tentries.push({ value: values[i], content: values[i], has_submenu: true });\n\n\t//show categories\n\tvar menu = new LiteGraph.ContextMenu( entries, { event: e, callback: inner_clicked, parentMenu: prev_menu }, ref_window);\n\n\tfunction inner_clicked( v, option, e )\n\t{\n\t\tvar category = v.value;\n\t\tvar node_types = LiteGraph.getNodeTypesInCategory( category, canvas.filter );\n\t\tvar values = [];\n\t\tfor(var i in node_types)\n\t\t\tif (!node_types[i].skip_list)\n\t\t\t\tvalues.push( { content: node_types[i].title, value: node_types[i].type });\n\n\t\tnew LiteGraph.ContextMenu( values, {event: e, callback: inner_create, parentMenu: menu }, ref_window);\n\t\treturn false;\n\t}\n\n\tfunction inner_create( v, e )\n\t{\n\t\tvar first_event = prev_menu.getFirstEvent();\n\t\tvar node = LiteGraph.createNode( v.value );\n\t\tif(node)\n\t\t{\n\t\t\tnode.pos = canvas.convertEventToCanvasOffset( first_event );\n\t\t\tcanvas.graph.add( node );\n\t\t}\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.onMenuCollapseAll = function()\n{\n\n}\n\n\nLGraphCanvas.onMenuNodeEdit = function()\n{\n\n}\n\nLGraphCanvas.showMenuNodeOptionalInputs = function( v, options, e, prev_menu, node )\n{\n\tif(!node)\n\t\treturn;\n\n\tvar that = this;\n\tvar canvas = LGraphCanvas.active_canvas;\n\tvar ref_window = canvas.getCanvasWindow();\n\n\tvar options = node.optional_inputs;\n\tif(node.onGetInputs)\n\t\toptions = node.onGetInputs();\n\n\tvar entries = [];\n\tif(options)\n\t\tfor (var i in options)\n\t\t{\n\t\t\tvar entry = options[i];\n\t\t\tif(!entry)\n\t\t\t{\n\t\t\t\tentries.push(null);\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tvar label = entry[0];\n\t\t\tif(entry[2] && entry[2].label)\n\t\t\t\tlabel = entry[2].label;\n\t\t\tvar data = {content: label, value: entry};\n\t\t\tif(entry[1] == LiteGraph.ACTION)\n\t\t\t\tdata.className = "event";\n\t\t\tentries.push(data);\n\t\t}\n\n\tif(this.onMenuNodeInputs)\n\t\tentries = this.onMenuNodeInputs( entries );\n\n\tif(!entries.length)\n\t\treturn;\n\n\tvar menu = new LiteGraph.ContextMenu(entries, { event: e, callback: inner_clicked, parentMenu: prev_menu, node: node }, ref_window);\n\n\tfunction inner_clicked(v, e, prev)\n\t{\n\t\tif(!node)\n\t\t\treturn;\n\n\t\tif(v.callback)\n\t\t\tv.callback.call( that, node, v, e, prev );\n\n\t\tif(v.value)\n\t\t{\n\t\t\tnode.addInput(v.value[0],v.value[1], v.value[2]);\n\t\t\tnode.setDirtyCanvas(true,true);\n\t\t}\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.showMenuNodeOptionalOutputs = function( v, options, e, prev_menu, node )\n{\n\tif(!node)\n\t\treturn;\n\n\tvar that = this;\n\tvar canvas = LGraphCanvas.active_canvas;\n\tvar ref_window = canvas.getCanvasWindow();\n\n\tvar options = node.optional_outputs;\n\tif(node.onGetOutputs)\n\t\toptions = node.onGetOutputs();\n\n\tvar entries = [];\n\tif(options)\n\t\tfor (var i in options)\n\t\t{\n\t\t\tvar entry = options[i];\n\t\t\tif(!entry) //separator?\n\t\t\t{\n\t\t\t\tentries.push(null);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif(node.flags && node.flags.skip_repeated_outputs && node.findOutputSlot(entry[0]) != -1)\n\t\t\t\tcontinue; //skip the ones already on\n\t\t\tvar label = entry[0];\n\t\t\tif(entry[2] && entry[2].label)\n\t\t\t\tlabel = entry[2].label;\n\t\t\tvar data = {content: label, value: entry};\n\t\t\tif(entry[1] == LiteGraph.EVENT)\n\t\t\t\tdata.className = "event";\n\t\t\tentries.push(data);\n\t\t}\n\n\tif(this.onMenuNodeOutputs)\n\t\tentries = this.onMenuNodeOutputs( entries );\n\n\tif(!entries.length)\n\t\treturn;\n\n\tvar menu = new LiteGraph.ContextMenu(entries, {event: e, callback: inner_clicked, parentMenu: prev_menu, node: node }, ref_window);\n\n\tfunction inner_clicked( v, e, prev )\n\t{\n\t\tif(!node)\n\t\t\treturn;\n\n\t\tif(v.callback)\n\t\t\tv.callback.call( that, node, v, e, prev );\n\n\t\tif(!v.value)\n\t\t\treturn;\n\n\t\tvar value = v.value[1];\n\n\t\tif(value && (value.constructor === Object || value.constructor === Array)) //submenu why?\n\t\t{\n\t\t\tvar entries = [];\n\t\t\tfor(var i in value)\n\t\t\t\tentries.push({ content: i, value: value[i]});\n\t\t\tnew LiteGraph.ContextMenu( entries, { event: e, callback: inner_clicked, parentMenu: prev_menu, node: node });\n\t\t\treturn false;\n\t\t}\n\t\telse\n\t\t{\n\t\t\tnode.addOutput( v.value[0], v.value[1], v.value[2]);\n\t\t\tnode.setDirtyCanvas(true,true);\n\t\t}\n\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.onShowMenuNodeProperties = function( value, options, e, prev_menu, node )\n{\n\tif(!node || !node.properties)\n\t\treturn;\n\n\tvar that = this;\n\tvar canvas = LGraphCanvas.active_canvas;\n\tvar ref_window = canvas.getCanvasWindow();\n\n\tvar entries = [];\n\t\tfor (var i in node.properties)\n\t\t{\n\t\t\tvar value = node.properties[i] !== undefined ? node.properties[i] : " ";\n\t\t\t//value could contain invalid html characters, clean that\n\t\t\tvalue = LGraphCanvas.decodeHTML(value);\n\t\t\tentries.push({content: "<span class='property_name'>" + i + "</span>" + "<span class='property_value'>" + value + "</span>", value: i});\n\t\t}\n\tif(!entries.length)\n\t\treturn;\n\n\tvar menu = new LiteGraph.ContextMenu(entries, {event: e, callback: inner_clicked, parentMenu: prev_menu, allow_html: true, node: node },ref_window);\n\n\tfunction inner_clicked( v, options, e, prev )\n\t{\n\t\tif(!node)\n\t\t\treturn;\n\t\tvar rect = this.getBoundingClientRect();\n\t\tcanvas.showEditPropertyValue( node, v.value, { position: [rect.left, rect.top] });\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.decodeHTML = function( str )\n{\n\tvar e = document.createElement("div");\n\te.innerText = str;\n\treturn e.innerHTML;\n}\n\nLGraphCanvas.onResizeNode = function( value, options, e, menu, node )\n{\n\tif(!node)\n\t\treturn;\n\tnode.size = node.computeSize();\n\tnode.setDirtyCanvas(true,true);\n}\n\nLGraphCanvas.prototype.showLinkMenu = function( link, e )\n{\n\tvar that = this;\n\n\tnew LiteGraph.ContextMenu(["Delete"], { event: e, callback: inner_clicked });\n\n\tfunction inner_clicked(v)\n\t{\n\t\tswitch(v)\n\t\t{\n\t\t\tcase "Delete": that.graph.removeLink( link.id ); break;\n\t\t\tdefault:\n\t\t}\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.onShowPropertyEditor = function( item, options, e, menu, node )\n{\n\tvar input_html = "";\n\tvar property = item.property || "title";\n\tvar value = node[ property ];\n\n\tvar dialog = document.createElement("div");\n\tdialog.className = "graphdialog";\n\tdialog.innerHTML = "<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";\n\tvar title = dialog.querySelector(".name");\n\ttitle.innerText = property;\n\tvar input = dialog.querySelector("input");\n\tif(input)\n\t{\n\t\tinput.value = value;\n input.addEventListener("blur", function(e){\n this.focus();\n });\n\t\tinput.addEventListener("keydown", function(e){\n\t\t\tif(e.keyCode != 13)\n\t\t\t\treturn;\n\t\t\tinner();\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t});\n\t}\n\n\tvar graphcanvas = LGraphCanvas.active_canvas;\n\tvar canvas = graphcanvas.canvas;\n\n\tvar rect = canvas.getBoundingClientRect();\n\tvar offsetx = -20;\n\tvar offsety = -20;\n\tif(rect)\n\t{\n\t\toffsetx -= rect.left;\n\t\toffsety -= rect.top;\n\t}\n\n\tif( event )\n\t{\n\t\tdialog.style.left = (event.clientX + offsetx) + "px";\n\t\tdialog.style.top = (event.clientY + offsety)+ "px";\n\t}\n\telse\n\t{\n\t\tdialog.style.left = (canvas.width * 0.5 + offsetx) + "px";\n\t\tdialog.style.top = (canvas.height * 0.5 + offsety) + "px";\n\t}\n\n\tvar button = dialog.querySelector("button");\n\tbutton.addEventListener("click", inner );\n\tcanvas.parentNode.appendChild( dialog );\n\n\tfunction inner()\n\t{\n\t\tsetValue( input.value );\n\t}\n\n\tfunction setValue(value)\n\t{\n\t\tif( item.type == "Number" )\n\t\t\tvalue = Number(value);\n\t\telse if( item.type == "Boolean" )\n\t\t\tvalue = Boolean(value);\n\t\tnode[ property ] = value;\n\t\tif(dialog.parentNode)\n\t\t\tdialog.parentNode.removeChild( dialog );\n\t\tnode.setDirtyCanvas(true,true);\n\t}\n}\n\nLGraphCanvas.prototype.prompt = function( title, value, callback, event )\n{\n\tvar that = this;\n\tvar input_html = "";\n\ttitle = title || "";\n\n\tvar modified = false;\n\n\tvar dialog = document.createElement("div");\n\tdialog.className = "graphdialog rounded";\n\tdialog.innerHTML = "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";\n\tdialog.close = function()\n\t{\n\t\tthat.prompt_box = null;\n\t\tif(dialog.parentNode)\n\t\t\tdialog.parentNode.removeChild( dialog );\n\t}\n\n\tif(this.ds.scale > 1)\n\t\tdialog.style.transform = "scale("+this.ds.scale+")";\n\n\tdialog.addEventListener("mouseleave",function(e){\n\t\tif(!modified)\n\t\t\t dialog.close();\n\t});\n\n\tif(that.prompt_box)\n\t\tthat.prompt_box.close();\n\tthat.prompt_box = dialog;\n\n\tvar first = null;\n\tvar timeout = null;\n\tvar selected = null;\n\n\tvar name_element = dialog.querySelector(".name");\n\tname_element.innerText = title;\n\tvar value_element = dialog.querySelector(".value");\n\tvalue_element.value = value;\n\n\tvar input = dialog.querySelector("input");\n\tinput.addEventListener("keydown", function(e){\n\t\tmodified = true;\n\t\tif(e.keyCode == 27) //ESC\n\t\t\tdialog.close();\n\t\telse if(e.keyCode == 13)\n\t\t{\n\t\t\tif( callback )\n\t\t\t\tcallback( this.value );\n\t\t\tdialog.close();\n\t\t}\n\t\telse\n\t\t\treturn;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t});\n\n\tvar button = dialog.querySelector("button");\n\tbutton.addEventListener("click", function(e){\n\t\tif( callback )\n\t\t\tcallback( input.value );\n\t\tthat.setDirty(true);\n\t\tdialog.close();\t\t\n\t});\n\n\tvar graphcanvas = LGraphCanvas.active_canvas;\n\tvar canvas = graphcanvas.canvas;\n\n\tvar rect = canvas.getBoundingClientRect();\n\tvar offsetx = -20;\n\tvar offsety = -20;\n\tif(rect)\n\t{\n\t\toffsetx -= rect.left;\n\t\toffsety -= rect.top;\n\t}\n\n\tif( event )\n\t{\n\t\tdialog.style.left = (event.clientX + offsetx) + "px";\n\t\tdialog.style.top = (event.clientY + offsety)+ "px";\n\t}\n\telse\n\t{\n\t\tdialog.style.left = (canvas.width * 0.5 + offsetx) + "px";\n\t\tdialog.style.top = (canvas.height * 0.5 + offsety) + "px";\n\t}\n\n\tcanvas.parentNode.appendChild( dialog );\n\tsetTimeout( function(){\tinput.focus(); },10 );\n\n\treturn dialog;\n}\n\n\nLGraphCanvas.search_limit = -1;\nLGraphCanvas.prototype.showSearchBox = function(event)\n{\n\tvar that = this;\n\tvar input_html = "";\n\n\tvar dialog = document.createElement("div");\n\tdialog.className = "litegraph litesearchbox graphdialog rounded";\n\tdialog.innerHTML = "<span class='name'>Search</span> <input autofocus type='text' class='value rounded'/><div class='helper'></div>";\n\tdialog.close = function()\n\t{\n\t\tthat.search_box = null;\n\t\tdocument.body.focus();\n\t\tsetTimeout( function(){ that.canvas.focus(); },20 ); //important, if canvas loses focus keys wont be captured\n\t\tif(dialog.parentNode)\n\t\t\tdialog.parentNode.removeChild( dialog );\n\t}\n\n\tvar timeout_close = null;\n\n\tif(this.ds.scale > 1)\n\t\tdialog.style.transform = "scale("+this.ds.scale+")";\n\n\tdialog.addEventListener("mouseenter",function(e){\n\t\tif(timeout_close)\n\t\t{\n\t\t\tclearTimeout(timeout_close);\n\t\t\ttimeout_close = null;\n\t\t}\n\t});\n\n\tdialog.addEventListener("mouseleave",function(e){\n\t\t //dialog.close();\n\t\ttimeout_close = setTimeout(function(){\n\t\t\tdialog.close();\n\t\t},500);\n\t});\n\n\tif(that.search_box)\n\t\tthat.search_box.close();\n\tthat.search_box = dialog;\n\n\tvar helper = dialog.querySelector(".helper");\n\n\tvar first = null;\n\tvar timeout = null;\n\tvar selected = null;\n\n\tvar input = dialog.querySelector("input");\n\tif(input)\n\t{\n input.addEventListener("blur", function(e){\n this.focus();\n });\n\t\tinput.addEventListener("keydown", function(e){\n\n\t\t\tif(e.keyCode == 38) //UP\n\t\t\t\tchangeSelection(false);\n\t\t\telse if(e.keyCode == 40) //DOWN\n\t\t\t\tchangeSelection(true);\n\t\t\telse if(e.keyCode == 27) //ESC\n\t\t\t\tdialog.close();\n\t\t\telse if(e.keyCode == 13)\n\t\t\t{\n\t\t\t\tif(selected)\n\t\t\t\t\tselect( selected.innerHTML )\n\t\t\t\telse if(first)\n\t\t\t\t\tselect( first );\n\t\t\t\telse\n\t\t\t\t\tdialog.close();\n\t\t\t}\n\t\t\telse\n\t\t\t{\n\t\t\t\tif(timeout)\n\t\t\t\t\tclearInterval(timeout);\n\t\t\t\ttimeout = setTimeout( refreshHelper, 10 );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t});\n\t}\n\n\tvar graphcanvas = LGraphCanvas.active_canvas;\n\tvar canvas = graphcanvas.canvas;\n\n\tvar rect = canvas.getBoundingClientRect();\n\tvar offsetx = -20;\n\tvar offsety = -20;\n\tif(rect)\n\t{\n\t\toffsetx -= rect.left;\n\t\toffsety -= rect.top;\n\t}\n\n\tif( event )\n\t{\n\t\tdialog.style.left = (event.clientX + offsetx) + "px";\n\t\tdialog.style.top = (event.clientY + offsety)+ "px";\n\t}\n\telse\n\t{\n\t\tdialog.style.left = (canvas.width * 0.5 + offsetx) + "px";\n\t\tdialog.style.top = (canvas.height * 0.5 + offsety) + "px";\n\t}\n\n\tcanvas.parentNode.appendChild( dialog );\n\tinput.focus();\n\n\tfunction select( name )\n\t{\n\t\tif(name)\n\t\t{\n\t\t\tif( that.onSearchBoxSelection )\n\t\t\t\tthat.onSearchBoxSelection( name, event, graphcanvas );\n\t\t\telse\n\t\t\t{\n\t\t\t\tvar extra = LiteGraph.searchbox_extras[ name ];\n\t\t\t\tif( extra )\n\t\t\t\t\tname = extra.type;\n\n\t\t\t\tvar node = LiteGraph.createNode( name );\n\t\t\t\tif(node)\n\t\t\t\t{\n\t\t\t\t\tnode.pos = graphcanvas.convertEventToCanvasOffset( event );\n\t\t\t\t\tgraphcanvas.graph.add( node );\n\t\t\t\t}\n\n\t\t\t\tif( extra && extra.data )\n\t\t\t\t{\n\t\t\t\t\tif(extra.data.properties)\n\t\t\t\t\t\tfor(var i in extra.data.properties)\n\t\t\t\t\t\t\tnode.addProperty( extra.data.properties[i][0], extra.data.properties[i][0] );\n\t\t\t\t\tif(extra.data.inputs)\n\t\t\t\t\t{\n\t\t\t\t\t\tnode.inputs = [];\n\t\t\t\t\t\tfor(var i in extra.data.inputs)\n\t\t\t\t\t\t\tnode.addOutput( extra.data.inputs[i][0],extra.data.inputs[i][1] );\n\t\t\t\t\t}\n\t\t\t\t\tif(extra.data.outputs)\n\t\t\t\t\t{\n\t\t\t\t\t\tnode.outputs = [];\n\t\t\t\t\t\tfor(var i in extra.data.outputs)\n\t\t\t\t\t\t\tnode.addOutput( extra.data.outputs[i][0],extra.data.outputs[i][1] );\n\t\t\t\t\t}\n\t\t\t\t\tif(extra.data.title)\n\t\t\t\t\t\tnode.title = extra.data.title;\n\t\t\t\t\tif(extra.data.json)\n\t\t\t\t\t\tnode.configure( extra.data.json );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tdialog.close();\n\t}\n\n\tfunction changeSelection( forward )\n\t{\n\t\tvar prev = selected;\n\t\tif(selected)\n\t\t\tselected.classList.remove("selected");\n\t\tif(!selected)\n\t\t\tselected = forward ? helper.childNodes[0] : helper.childNodes[ helper.childNodes.length ];\n\t\telse\n\t\t{\n\t\t\tselected = forward ? selected.nextSibling : selected.previousSibling;\n\t\t\tif(!selected)\n\t\t\t\tselected = prev;\n\t\t}\n\t\tif(!selected)\n\t\t\treturn;\n\t\tselected.classList.add("selected");\n\t\tselected.scrollIntoView();\n\t}\n\n\tfunction refreshHelper() {\n timeout = null;\n var str = input.value;\n first = null;\n helper.innerHTML = "";\n if (!str)\n return;\n\n if (that.onSearchBox) {\n var list = that.onSearchBox( help, str, graphcanvas );\n\t\t\tif(list)\n\t\t\t\tfor( var i = 0; i < list.length; ++i )\n\t\t\t\t\taddResult( list[i] );\n \t} else {\n var c = 0;\n \t\tstr = str.toLowerCase();\n\t\t\t//extras\n\t\t\tfor(var i in LiteGraph.searchbox_extras)\n\t\t\t{\n\t\t\t\tvar extra = LiteGraph.searchbox_extras[i];\n\t\t\t\tif( extra.desc.toLowerCase().indexOf(str) === -1 )\n\t\t\t\t\tcontinue;\n\t\t\t\taddResult( extra.desc, "searchbox_extra" );\n\t\t\t\tif(LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit )\n\t\t\t\t\tbreak;\n\t\t\t}\n\n \tif(Array.prototype.filter)//filter supported\n\t\t\t{\n\t\t\t\t//types\n \t\tvar keys = Object.keys( LiteGraph.registered_node_types );\n \t\tvar filtered = keys.filter(function (item) {\n\t\t\t\t\treturn item.toLowerCase().indexOf(str) !== -1;\n });\n \t\tfor(var i = 0; i < filtered.length; i++)\n\t\t\t\t{\n addResult(filtered[i]);\n if(LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else {\n for (var i in LiteGraph.registered_node_types)\n\t\t\t\t{\n if (i.indexOf(str) != -1) {\n addResult(i);\n if(LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)\n\t\t\t\t\t\t\tbreak;\n }\n }\n }\n }\n\n\t\tfunction addResult( type, className )\n\t\t{\n\t\t\tvar help = document.createElement("div");\n\t\t\tif (!first)\n\t\t\t\tfirst = type;\n\t\t\thelp.innerText = type;\n\t\t\thelp.dataset["type"] = escape(type);\n\t\t\thelp.className = "litegraph lite-search-item";\n\t\t\tif( className )\n\t\t\t\thelp.className += " " + className;\n\t\t\thelp.addEventListener("click", function (e) {\n\t\t\t\tselect( unescape( this.dataset["type"] ) );\n\t\t\t});\n\t\t\thelper.appendChild(help);\n\t\t}\n\t}\n\n\treturn dialog;\n}\n\nLGraphCanvas.prototype.showEditPropertyValue = function( node, property, options )\n{\n\tif(!node || node.properties[ property ] === undefined )\n\t\treturn;\n\n\toptions = options || {};\n\tvar that = this;\n\n\tvar type = "string";\n\n\tif(node.properties[ property ] !== null)\n\t\ttype = typeof(node.properties[ property ]);\n\n\t//for arrays\n\tif(type == "object")\n\t{\n\t\tif( node.properties[ property ].length )\n\t\t\ttype = "array";\n\t}\n\n\tvar info = null;\n\tif(node.getPropertyInfo)\n\t\tinfo = node.getPropertyInfo(property);\n\tif(node.properties_info)\n\t{\n\t\tfor(var i = 0; i < node.properties_info.length; ++i)\n\t\t{\n\t\t\tif( node.properties_info[i].name == property )\n\t\t\t{\n\t\t\t\tinfo = node.properties_info[i];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tif(info !== undefined && info !== null && info.type )\n\t\ttype = info.type;\n\n\tvar input_html = "";\n\n\tif(type == "string" || type == "number" || type == "array")\n\t\tinput_html = "<input autofocus type='text' class='value'/>";\n\telse if(type == "enum" && info.values)\n\t{\n\t\tinput_html = "<select autofocus type='text' class='value'>";\n\t\tfor(var i in info.values)\n\t\t{\n\t\t\tvar v = info.values.constructor === Array ? info.values[i] : i;\n\t\t\tinput_html += "<option value='"+v+"' "+(v == node.properties[property] ? "selected" : "")+">"+info.values[i]+"</option>";\n\t\t}\n\t\tinput_html += "</select>";\n\t}\n\telse if(type == "boolean")\n\t{\n\t\tinput_html = "<input autofocus type='checkbox' class='value' "+(node.properties[property] ? "checked" : "")+"/>";\n\t}\n\telse\n\t{\n\t\tconsole.warn("unknown type: " + type );\n\t\treturn;\n\t}\n\n\tvar dialog = this.createDialog( "<span class='name'>" + property + "</span>"+input_html+"<button>OK</button>" , options );\n\n\tif(type == "enum" && info.values)\n\t{\n\t\tvar input = dialog.querySelector("select");\n\t\tinput.addEventListener("change", function(e){\n\t\t\tsetValue( e.target.value );\n\t\t\t//var index = e.target.value;\n\t\t\t//setValue( e.options[e.selectedIndex].value );\n\t\t});\n\t}\n\telse if(type == "boolean")\n\t{\n\t\tvar input = dialog.querySelector("input");\n\t\tif(input)\n\t\t{\n\t\t\tinput.addEventListener("click", function(e){\n\t\t\t\tsetValue( !!input.checked );\n\t\t\t});\n\t\t}\n\t}\n\telse\n\t{\n\t\tvar input = dialog.querySelector("input");\n\t\tif(input)\n\t\t{\n input.addEventListener("blur", function(e){\n this.focus();\n });\n\t\t\tinput.value = node.properties[ property ] !== undefined ? node.properties[ property ] : "";\n\t\t\tinput.addEventListener("keydown", function(e){\n\t\t\t\tif(e.keyCode != 13)\n\t\t\t\t\treturn;\n\t\t\t\tinner();\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t});\n\t\t}\n\t}\n\n\tvar button = dialog.querySelector("button");\n\tbutton.addEventListener("click", inner );\n\n\tfunction inner()\n\t{\n\t\tsetValue( input.value );\n\t}\n\n\tfunction setValue(value)\n\t{\n\t\tif(typeof( node.properties[ property ] ) == "number")\n\t\t\tvalue = Number(value);\n\t\tif(type == "array")\n\t\t\tvalue = value.split(",").map(Number);\n\t\tnode.properties[ property ] = value;\n\t\tif(node._graph)\n\t\t\tnode._graph._version++;\n\t\tif(node.onPropertyChanged)\n\t\t\tnode.onPropertyChanged( property, value );\n\t\tdialog.close();\n\t\tnode.setDirtyCanvas(true,true);\n\t}\n}\n\nLGraphCanvas.prototype.createDialog = function( html, options )\n{\n\toptions = options || {};\n\n\tvar dialog = document.createElement("div");\n\tdialog.className = "graphdialog";\n\tdialog.innerHTML = html;\n\n\tvar rect = this.canvas.getBoundingClientRect();\n\tvar offsetx = -20;\n\tvar offsety = -20;\n\tif(rect)\n\t{\n\t\toffsetx -= rect.left;\n\t\toffsety -= rect.top;\n\t}\n\n\tif( options.position )\n\t{\n\t\toffsetx += options.position[0];\n\t\toffsety += options.position[1];\n\t}\n\telse if( options.event )\n\t{\n\t\toffsetx += options.event.clientX;\n\t\toffsety += options.event.clientY;\n\t}\n\telse //centered\n\t{\n\t\toffsetx += this.canvas.width * 0.5;\n\t\toffsety += this.canvas.height * 0.5;\n\t}\n\n\tdialog.style.left = offsetx + "px";\n\tdialog.style.top = offsety + "px";\n\n\tthis.canvas.parentNode.appendChild( dialog );\n\n\tdialog.close = function()\n\t{\n\t\tif(this.parentNode)\n\t\t\tthis.parentNode.removeChild( this );\n\t}\n\n\treturn dialog;\n}\n\nLGraphCanvas.onMenuNodeCollapse = function( value, options, e, menu, node )\n{\n\tnode.collapse();\n}\n\nLGraphCanvas.onMenuNodePin = function( value, options, e, menu, node )\n{\n\tnode.pin();\n}\n\nLGraphCanvas.onMenuNodeMode = function( value, options, e, menu, node )\n{\n\tnew LiteGraph.ContextMenu(["Always","On Event","On Trigger","Never"], {event: e, callback: inner_clicked, parentMenu: menu, node: node });\n\n\tfunction inner_clicked(v)\n\t{\n\t\tif(!node)\n\t\t\treturn;\n\t\tswitch(v)\n\t\t{\n\t\t\tcase "On Event": node.mode = LiteGraph.ON_EVENT; break;\n\t\t\tcase "On Trigger": node.mode = LiteGraph.ON_TRIGGER; break;\n\t\t\tcase "Never": node.mode = LiteGraph.NEVER; break;\n\t\t\tcase "Always":\n\t\t\tdefault:\n\t\t\t\tnode.mode = LiteGraph.ALWAYS; break;\n\t\t}\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.onMenuNodeColors = function( value, options, e, menu, node )\n{\n\tif(!node)\n\t\tthrow("no node for color");\n\n\tvar values = [];\n\tvalues.push({ value:null, content:"<span style='display: block; padding-left: 4px;'>No color</span>" });\n\n\tfor(var i in LGraphCanvas.node_colors)\n\t{\n\t\tvar color = LGraphCanvas.node_colors[i];\n\t\tvar value = { value:i, content:"<span style='display: block; color: #999; padding-left: 4px; border-left: 8px solid "+color.color+"; background-color:"+color.bgcolor+"'>"+i+"</span>" };\n\t\tvalues.push(value);\n\t}\n\tnew LiteGraph.ContextMenu( values, { event: e, callback: inner_clicked, parentMenu: menu, node: node });\n\n\tfunction inner_clicked(v)\n\t{\n\t\tif(!node)\n\t\t\treturn;\n\n\t\tvar color = v.value ? LGraphCanvas.node_colors[ v.value ] : null;\n\t\tif(color)\n\t\t{\n\t\t\tif(node.constructor === LiteGraph.LGraphGroup)\n\t\t\t\tnode.color = color.groupcolor;\n\t\t\telse\n\t\t\t{\n\t\t\t\tnode.color = color.color;\n\t\t\t\tnode.bgcolor = color.bgcolor;\n\t\t\t}\n\t\t}\n\t\telse\n\t\t{\n\t\t\tdelete node.color;\n\t\t\tdelete node.bgcolor;\n\t\t}\n\t\tnode.setDirtyCanvas(true,true);\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.onMenuNodeShapes = function( value, options, e, menu, node )\n{\n\tif(!node)\n\t\tthrow("no node passed");\n\n\tnew LiteGraph.ContextMenu( LiteGraph.VALID_SHAPES, { event: e, callback: inner_clicked, parentMenu: menu, node: node });\n\n\tfunction inner_clicked(v)\n\t{\n\t\tif(!node)\n\t\t\treturn;\n\t\tnode.shape = v;\n\t\tnode.setDirtyCanvas(true);\n\t}\n\n\treturn false;\n}\n\nLGraphCanvas.onMenuNodeRemove = function( value, options, e, menu, node )\n{\n\tif(!node)\n\t\tthrow("no node passed");\n\n\tif(node.removable === false)\n\t\treturn;\n\n\tnode.graph.remove(node);\n\tnode.setDirtyCanvas(true,true);\n}\n\nLGraphCanvas.onMenuNodeClone = function( value, options, e, menu, node )\n{\n\tif(node.clonable == false) return;\n\tvar newnode = node.clone();\n\tif(!newnode)\n\t\treturn;\n\tnewnode.pos = [node.pos[0]+5,node.pos[1]+5];\n\tnode.graph.add(newnode);\n\tnode.setDirtyCanvas(true,true);\n}\n\nLGraphCanvas.node_colors = {\n\t"red": { color:"#322", bgcolor:"#533", groupcolor: "#A88" },\n\t"brown": { color:"#332922", bgcolor:"#593930", groupcolor: "#b06634" },\n\t"green": { color:"#232", bgcolor:"#353", groupcolor: "#8A8" },\n\t"blue": { color:"#223", bgcolor:"#335", groupcolor: "#88A" },\n\t"pale_blue": { color:"#2a363b", bgcolor:"#3f5159", groupcolor: "#3f789e" },\n\t"cyan": { color:"#233", bgcolor:"#355", groupcolor: "#8AA" },\n\t"purple": { color:"#323", bgcolor:"#535", groupcolor: "#a1309b" },\n\t"yellow": { color:"#432", bgcolor:"#653", groupcolor: "#b58b2a" },\n\t"black": { color:"#222", bgcolor:"#000", groupcolor: "#444" }\n};\n\nLGraphCanvas.prototype.getCanvasMenuOptions = function()\n{\n\tvar options = null;\n\tif(this.getMenuOptions)\n\t\toptions = this.getMenuOptions();\n\telse\n\t{\n\t\toptions = [\n\t\t\t{ content:"Add Node", has_submenu: true, callback: LGraphCanvas.onMenuAdd },\n\t\t\t{ content:"Add Group", callback: LGraphCanvas.onGroupAdd }\n\t\t\t//{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll }\n\t\t];\n\n\t\tif(this._graph_stack && this._graph_stack.length > 0)\n\t\t\toptions.push(null,{content:"Close subgraph", callback: this.closeSubgraph.bind(this) });\n\t}\n\n\tif(this.getExtraMenuOptions)\n\t{\n\t\tvar extra = this.getExtraMenuOptions(this,options);\n\t\tif(extra)\n\t\t\toptions = options.concat( extra );\n\t}\n\n\treturn options;\n}\n\n//called by processContextMenu to extract the menu list\nLGraphCanvas.prototype.getNodeMenuOptions = function( node )\n{\n\tvar options = null;\n\n\tif(node.getMenuOptions)\n\t\toptions = node.getMenuOptions(this);\n\telse\n\t\toptions = [\n\t\t\t{content:"Inputs", has_submenu: true, disabled:true, callback: LGraphCanvas.showMenuNodeOptionalInputs },\n\t\t\t{content:"Outputs", has_submenu: true, disabled:true, callback: LGraphCanvas.showMenuNodeOptionalOutputs },\n\t\t\tnull,\n\t\t\t{content:"Properties", has_submenu: true, callback: LGraphCanvas.onShowMenuNodeProperties },\n\t\t\tnull,\n\t\t\t{content:"Title", callback: LGraphCanvas.onShowPropertyEditor },\n\t\t\t{content:"Mode", has_submenu: true, callback: LGraphCanvas.onMenuNodeMode },\n\t\t\t{content:"Resize", callback: LGraphCanvas.onResizeNode },\n\t\t\t{content:"Collapse", callback: LGraphCanvas.onMenuNodeCollapse },\n\t\t\t{content:"Pin", callback: LGraphCanvas.onMenuNodePin },\n\t\t\t{content:"Colors", has_submenu: true, callback: LGraphCanvas.onMenuNodeColors },\n\t\t\t{content:"Shapes", has_submenu: true, callback: LGraphCanvas.onMenuNodeShapes },\n\t\t\tnull\n\t\t];\n\n\tif(node.onGetInputs)\n\t{\n\t\tvar inputs = node.onGetInputs();\n\t\tif(inputs && inputs.length)\n\t\t\toptions[0].disabled = false;\n\t}\n\n\tif(node.onGetOutputs)\n\t{\n\t\tvar outputs = node.onGetOutputs();\n\t\tif(outputs && outputs.length )\n\t\t\toptions[1].disabled = false;\n\t}\n\n\tif(node.getExtraMenuOptions)\n\t{\n\t\tvar extra = node.getExtraMenuOptions(this);\n\t\tif(extra)\n\t\t{\n\t\t\textra.push(null);\n\t\t\toptions = extra.concat( options );\n\t\t}\n\t}\n\n\tif( node.clonable !== false )\n\t\t\toptions.push({content:"Clone", callback: LGraphCanvas.onMenuNodeClone });\n\tif( node.removable !== false )\n\t\t\toptions.push(null,{content:"Remove", callback: LGraphCanvas.onMenuNodeRemove });\n\n\tif(node.graph && node.graph.onGetNodeMenuOptions )\n\t\tnode.graph.onGetNodeMenuOptions( options, node );\n\n\treturn options;\n}\n\nLGraphCanvas.prototype.getGroupMenuOptions = function( node )\n{\n\tvar o = [\n\t\t{content:"Title", callback: LGraphCanvas.onShowPropertyEditor },\n\t\t{content:"Color", has_submenu: true, callback: LGraphCanvas.onMenuNodeColors },\n\t\t{content:"Font size", property: "font_size", type:"Number", callback: LGraphCanvas.onShowPropertyEditor },\n\t\tnull,\n\t\t{content:"Remove", callback: LGraphCanvas.onMenuNodeRemove }\n\t];\n\n\treturn o;\n}\n\nLGraphCanvas.prototype.processContextMenu = function( node, event )\n{\n\tvar that = this;\n\tvar canvas = LGraphCanvas.active_canvas;\n\tvar ref_window = canvas.getCanvasWindow();\n\n\tvar menu_info = null;\n\tvar options = { event: event, callback: inner_option_clicked, extra: node };\n\n\t//check if mouse is in input\n\tvar slot = null;\n\tif(node)\n\t{\n\t\tslot = node.getSlotInPosition( event.canvasX, event.canvasY );\n\t\tLGraphCanvas.active_node = node;\n\t}\n\n\tif(slot) //on slot\n\t{\n\t\tmenu_info = [];\n\t\tif(slot && slot.output && slot.output.links && slot.output.links.length)\n\t\t\tmenu_info.push( { content: "Disconnect Links", slot: slot } );\n\t\tmenu_info.push( slot.locked ? "Cannot remove" : { content: "Remove Slot", slot: slot } );\n\t\tmenu_info.push( slot.nameLocked ? "Cannot rename" : { content: "Rename Slot", slot: slot } );\n\t\toptions.title = (slot.input ? slot.input.type : slot.output.type) || "*";\n\t\tif(slot.input && slot.input.type == LiteGraph.ACTION)\n\t\t\toptions.title = "Action";\n\t\tif(slot.output && slot.output.type == LiteGraph.EVENT)\n\t\t\toptions.title = "Event";\n\t}\n\telse\n\t{\n\t\tif( node ) //on node\n\t\t\tmenu_info = this.getNodeMenuOptions(node);\n\t\telse \n\t\t{\n\t\t\tmenu_info = this.getCanvasMenuOptions();\n\t\t\tvar group = this.graph.getGroupOnPos( event.canvasX, event.canvasY );\n\t\t\tif( group ) //on group\n\t\t\t\tmenu_info.push(null,{content:"Edit Group", has_submenu: true, submenu: { title:"Group", extra: group, options: this.getGroupMenuOptions( group ) }});\n\t\t}\n\t}\n\n\t//show menu\n\tif(!menu_info)\n\t\treturn;\n\n\tvar menu = new LiteGraph.ContextMenu( menu_info, options, ref_window );\n\n\tfunction inner_option_clicked( v, options, e )\n\t{\n\t\tif(!v)\n\t\t\treturn;\n\n\t\tif(v.content == "Remove Slot")\n\t\t{\n\t\t\tvar info = v.slot;\n\t\t\tif(info.input)\n\t\t\t\tnode.removeInput( info.slot );\n\t\t\telse if(info.output)\n\t\t\t\tnode.removeOutput( info.slot );\n\t\t\treturn;\n\t\t}\n\t\telse if(v.content == "Disconnect Links")\n\t\t{\n\t\t\tvar info = v.slot;\n\t\t\tif(info.output)\n\t\t\t\tnode.disconnectOutput( info.slot );\n\t\t\telse if(info.input)\n\t\t\t\tnode.disconnectInput( info.slot );\n\t\t\treturn;\n\t\t}\n\t\telse if( v.content == "Rename Slot")\n\t\t{\n\t\t\tvar info = v.slot;\n var slot_info = info.input ? node.getInputInfo( info.slot ) : node.getOutputInfo( info.slot );\n\t\t\tvar dialog = that.createDialog( "<span class='name'>Name</span><input autofocus type='text'/><button>OK</button>" , options );\n\t\t\tvar input = dialog.querySelector("input");\n\t\t\tif(input && slot_info){\n\t\t\t\tinput.value = slot_info.label || "";\n\t\t\t}\n\t\t\tdialog.querySelector("button").addEventListener("click",function(e){\n\t\t\t\tif(input.value)\n\t\t\t\t{\n\t\t\t\t\tif( slot_info )\n\t\t\t\t\t\tslot_info.label = input.value;\n\t\t\t\t\tthat.setDirty(true);\n\t\t\t\t}\n\t\t\t\tdialog.close();\n\t\t\t});\n\t\t}\n\n\t\t//if(v.callback)\n\t\t//\treturn v.callback.call(that, node, options, e, menu, that, event );\n\t}\n}\n\n\n\n\n\n\n//API *************************************************\n//like rect but rounded corners\nif(this.CanvasRenderingContext2D)\nCanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, radius_low) {\n if ( radius === undefined ) {\n radius = 5;\n }\n\n if(radius_low === undefined)\n\t radius_low = radius;\n\n this.moveTo(x + radius, y);\n this.lineTo(x + width - radius, y);\n this.quadraticCurveTo(x + width, y, x + width, y + radius);\n\n this.lineTo(x + width, y + height - radius_low);\n this.quadraticCurveTo(x + width, y + height, x + width - radius_low, y + height);\n this.lineTo(x + radius_low, y + height);\n this.quadraticCurveTo(x, y + height, x, y + height - radius_low);\n this.lineTo(x, y + radius);\n this.quadraticCurveTo(x, y, x + radius, y);\n}\n\nfunction compareObjects(a,b)\n{\n\tfor(var i in a)\n\t\tif(a[i] != b[i])\n\t\t\treturn false;\n\treturn true;\n}\nLiteGraph.compareObjects = compareObjects;\n\nfunction distance(a,b)\n{\n\treturn Math.sqrt( (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1]) );\n}\nLiteGraph.distance = distance;\n\nfunction colorToString(c)\n{\n\treturn "rgba(" + Math.round(c[0] * 255).toFixed() + "," + Math.round(c[1] * 255).toFixed() + "," + Math.round(c[2] * 255).toFixed() + "," + (c.length == 4 ? c[3].toFixed(2) : "1.0") + ")";\n}\nLiteGraph.colorToString = colorToString;\n\nfunction isInsideRectangle( x,y, left, top, width, height)\n{\n\tif (left < x && (left + width) > x &&\n\t\ttop < y && (top + height) > y)\n\t\treturn true;\n\treturn false;\n}\nLiteGraph.isInsideRectangle = isInsideRectangle;\n\n//[minx,miny,maxx,maxy]\nfunction growBounding( bounding, x,y)\n{\n\tif(x < bounding[0])\n\t\tbounding[0] = x;\n\telse if(x > bounding[2])\n\t\tbounding[2] = x;\n\n\tif(y < bounding[1])\n\t\tbounding[1] = y;\n\telse if(y > bounding[3])\n\t\tbounding[3] = y;\n}\nLiteGraph.growBounding = growBounding;\n\n//point inside boundin box\nfunction isInsideBounding(p,bb)\n{\n\tif (p[0] < bb[0][0] ||\n\t\tp[1] < bb[0][1] ||\n\t\tp[0] > bb[1][0] ||\n\t\tp[1] > bb[1][1])\n\t\treturn false;\n\treturn true;\n}\nLiteGraph.isInsideBounding = isInsideBounding;\n\n//boundings overlap, format: [ startx, starty, width, height ]\nfunction overlapBounding(a,b)\n{\n\tvar A_end_x = a[0] + a[2];\n\tvar A_end_y = a[1] + a[3];\n\tvar B_end_x = b[0] + b[2];\n\tvar B_end_y = b[1] + b[3];\n\n\tif ( a[0] > B_end_x ||\n\t\ta[1] > B_end_y ||\n\t\tA_end_x < b[0] ||\n\t\tA_end_y < b[1])\n\t\treturn false;\n\treturn true;\n}\nLiteGraph.overlapBounding = overlapBounding;\n\n//Convert a hex value to its decimal value - the inputted hex must be in the\n//\tformat of a hex triplet - the kind we use for HTML colours. The function\n//\twill return an array with three values.\nfunction hex2num(hex) {\n\tif(hex.charAt(0) == "#") hex = hex.slice(1); //Remove the '#' char - if there is one.\n\thex = hex.toUpperCase();\n\tvar hex_alphabets = "0123456789ABCDEF";\n\tvar value = new Array(3);\n\tvar k = 0;\n\tvar int1,int2;\n\tfor(var i=0;i<6;i+=2) {\n\t\tint1 = hex_alphabets.indexOf(hex.charAt(i));\n\t\tint2 = hex_alphabets.indexOf(hex.charAt(i+1));\n\t\tvalue[k] = (int1 * 16) + int2;\n\t\tk++;\n\t}\n\treturn(value);\n}\n\nLiteGraph.hex2num = hex2num;\n\n//Give a array with three values as the argument and the function will return\n//\tthe corresponding hex triplet.\nfunction num2hex(triplet) {\n\tvar hex_alphabets = "0123456789ABCDEF";\n\tvar hex = "#";\n\tvar int1,int2;\n\tfor(var i=0;i<3;i++) {\n\t\tint1 = triplet[i] / 16;\n\t\tint2 = triplet[i] % 16;\n\n\t\thex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2);\n\t}\n\treturn(hex);\n}\n\nLiteGraph.num2hex = num2hex;\n\n/* LiteGraph GUI elements used for canvas editing *************************************/\n\n/**\n* ContextMenu from LiteGUI\n*\n* @class ContextMenu\n* @constructor\n* @param {Array} values (allows object { title: "Nice text", callback: function ... })\n* @param {Object} options [optional] Some options:\\\n* - title: title to show on top of the menu\n* - callback: function to call when an option is clicked, it receives the item information\n* - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback\n* - event: you can pass a MouseEvent, this way the ContextMenu appears in that position\n*/\nfunction ContextMenu( values, options )\n{\n\toptions = options || {};\n\tthis.options = options;\n\tvar that = this;\n\n\t//to link a menu with its parent\n\tif(options.parentMenu)\n\t{\n\t\tif( options.parentMenu.constructor !== this.constructor )\n\t\t{\n\t\t\tconsole.error("parentMenu must be of class ContextMenu, ignoring it");\n\t\t\toptions.parentMenu = null;\n\t\t}\n\t\telse\n\t\t{\n\t\t\tthis.parentMenu = options.parentMenu;\n\t\t\tthis.parentMenu.lock = true;\n\t\t\tthis.parentMenu.current_submenu = this;\n\t\t}\n\t}\n\n\tif(options.event && options.event.constructor !== MouseEvent && options.event.constructor !== CustomEvent)\n\t{\n\t\tconsole.error("Event passed to ContextMenu is not of type MouseEvent or CustomEvent. Ignoring it.");\n\t\toptions.event = null;\n\t}\n\n\tvar root = document.createElement("div");\n\troot.className = "litegraph litecontextmenu litemenubar-panel";\n\tif( options.className) \n\t\troot.className += " " + options.className;\n\troot.style.minWidth = 100;\n\troot.style.minHeight = 100;\n\troot.style.pointerEvents = "none";\n\tsetTimeout( function() { root.style.pointerEvents = "auto"; },100); //delay so the mouse up event is not caugh by this element\n\n\t//this prevents the default context browser menu to open in case this menu was created when pressing right button\n\troot.addEventListener("mouseup", function(e){\n\t\te.preventDefault(); return true;\n\t}, true);\n\troot.addEventListener("contextmenu", function(e) {\n\t\tif(e.button != 2) //right button\n\t\t\treturn false;\n\t\te.preventDefault();\n\t\treturn false;\n\t},true);\n\n\troot.addEventListener("mousedown", function(e){\n\t\tif(e.button == 2)\n\t\t{\n\t\t\tthat.close();\n\t\t\te.preventDefault(); return true;\n\t\t}\n\t}, true);\n\n\tfunction on_mouse_wheel(e)\n\t{\n\t\tvar pos = parseInt( root.style.top );\n\t\troot.style.top = (pos + e.deltaY * options.scroll_speed).toFixed() + "px";\n\t\te.preventDefault();\n\t\treturn true;\n\t}\n\n\tif(!options.scroll_speed)\n\t\toptions.scroll_speed = 0.1;\n\n\troot.addEventListener("wheel", on_mouse_wheel, true);\n\troot.addEventListener("mousewheel", on_mouse_wheel, true);\n\n\n\tthis.root = root;\n\n\t//title\n\tif(options.title)\n\t{\n\t\tvar element = document.createElement("div");\n\t\telement.className = "litemenu-title";\n\t\telement.innerHTML = options.title;\n\t\troot.appendChild(element);\n\t}\n\n\t//entries\n\tvar num = 0;\n\tfor(var i in values)\n\t{\n\t\tvar name = values.constructor == Array ? values[i] : i;\n\t\tif( name != null && name.constructor !== String )\n\t\t\tname = name.content === undefined ? String(name) : name.content;\n\t\tvar value = values[i];\n\t\tthis.addItem( name, value, options );\n\t\tnum++;\n\t}\n\n\t//close on leave\n\troot.addEventListener("mouseleave", function(e) {\n\t\tif(that.lock)\n\t\t\treturn;\n\t\tif(root.closing_timer)\n\t\t\tclearTimeout( root.closing_timer );\n\t\troot.closing_timer = setTimeout( that.close.bind(that, e), 500 );\n\t\t//that.close(e);\n\t});\n\n\troot.addEventListener("mouseenter", function(e) {\n\t\tif(root.closing_timer)\n\t\t\tclearTimeout( root.closing_timer );\n\t});\n\n\t//insert before checking position\n\tvar root_document = document;\n\tif(options.event)\n\t\troot_document = options.event.target.ownerDocument;\n\n\tif(!root_document)\n\t\troot_document = document;\n\troot_document.body.appendChild(root);\n\n\t//compute best position\n\tvar left = options.left || 0;\n\tvar top = options.top || 0;\n\tif(options.event)\n\t{\n\t\tleft = (options.event.clientX - 10);\n\t\ttop = (options.event.clientY - 10);\n\t\tif(options.title)\n\t\t\ttop -= 20;\n\n\t\tif(options.parentMenu)\n\t\t{\n\t\t\tvar rect = options.parentMenu.root.getBoundingClientRect();\n\t\t\tleft = rect.left + rect.width;\n\t\t}\n\n\t\tvar body_rect = document.body.getBoundingClientRect();\n\t\tvar root_rect = root.getBoundingClientRect();\n\n\t\tif(left > (body_rect.width - root_rect.width - 10))\n\t\t\tleft = (body_rect.width - root_rect.width - 10);\n\t\tif(top > (body_rect.height - root_rect.height - 10))\n\t\t\ttop = (body_rect.height - root_rect.height - 10);\n\t}\n\n\troot.style.left = left + "px";\n\troot.style.top = top + "px";\n\n\tif(options.scale)\n\t\troot.style.transform = "scale("+options.scale+")";\n}\n\nContextMenu.prototype.addItem = function( name, value, options )\n{\n\tvar that = this;\n\toptions = options || {};\n\n\tvar element = document.createElement("div");\n\telement.className = "litemenu-entry submenu";\n\n\tvar disabled = false;\n\n\tif(value === null)\n\t{\n\t\telement.classList.add("separator");\n\t\t//element.innerHTML = "<hr/>"\n\t\t//continue;\n\t}\n\telse\n\t{\n\t\telement.innerHTML = value && value.title ? value.title : name;\n\t\telement.value = value;\n\n\t\tif(value)\n\t\t{\n\t\t\tif(value.disabled)\n\t\t\t{\n\t\t\t\tdisabled = true;\n\t\t\t\telement.classList.add("disabled");\n\t\t\t}\n\t\t\tif(value.submenu || value.has_submenu)\n\t\t\t\telement.classList.add("has_submenu");\n\t\t}\n\n\t\tif(typeof(value) == "function")\n\t\t{\n\t\t\telement.dataset["value"] = name;\n\t\t\telement.onclick_callback = value;\n\t\t}\n\t\telse\n\t\t\telement.dataset["value"] = value;\n\n\t\tif(value.className)\n\t\t\telement.className += " " + value.className;\n\t}\n\n\tthis.root.appendChild(element);\n\tif(!disabled)\n\t\telement.addEventListener("click", inner_onclick);\n\tif(options.autoopen)\n\t\telement.addEventListener("mouseenter", inner_over);\n\n\tfunction inner_over(e)\n\t{\n\t\tvar value = this.value;\n\t\tif(!value || !value.has_submenu)\n\t\t\treturn;\n\t\t//if it is a submenu, autoopen like the item was clicked\n\t\tinner_onclick.call(this,e);\n\t}\n\n\t//menu option clicked\n\tfunction inner_onclick(e) {\n\t\tvar value = this.value;\n\t\tvar close_parent = true;\n\n\t\tif(that.current_submenu)\n\t\t\tthat.current_submenu.close(e);\n\n\t\t//global callback\n\t\tif(options.callback)\n\t\t{\n\t\t\tvar r = options.callback.call( this, value, options, e, that, options.node );\n\t\t\tif(r === true)\n\t\t\t\tclose_parent = false;\n\t\t}\n\n\t\t//special cases\n\t\tif(value)\n\t\t{\n\t\t\tif (value.callback && !options.ignore_item_callbacks && value.disabled !== true ) //item callback\n\t\t\t{\n\t\t\t\tvar r = value.callback.call( this, value, options, e, that, options.extra );\n\t\t\t\tif(r === true)\n\t\t\t\t\tclose_parent = false;\n\t\t\t}\n\t\t\tif(value.submenu)\n\t\t\t{\n\t\t\t\tif(!value.submenu.options)\n\t\t\t\t\tthrow("ContextMenu submenu needs options");\n\t\t\t\tvar submenu = new that.constructor( value.submenu.options, {\n\t\t\t\t\tcallback: value.submenu.callback,\n\t\t\t\t\tevent: e,\n\t\t\t\t\tparentMenu: that,\n\t\t\t\t\tignore_item_callbacks: value.submenu.ignore_item_callbacks,\n\t\t\t\t\ttitle: value.submenu.title,\n\t\t\t\t\textra: value.submenu.extra,\n\t\t\t\t\tautoopen: options.autoopen\n\t\t\t\t});\n\t\t\t\tclose_parent = false;\n\t\t\t}\n\t\t}\n\n\t\tif(close_parent && !that.lock)\n\t\t\tthat.close();\n\t}\n\n\treturn element;\n}\n\nContextMenu.prototype.close = function(e, ignore_parent_menu)\n{\n\tif(this.root.parentNode)\n\t\tthis.root.parentNode.removeChild( this.root );\n\tif(this.parentMenu && !ignore_parent_menu)\n\t{\n\t\tthis.parentMenu.lock = false;\n\t\tthis.parentMenu.current_submenu = null;\n\t\tif( e === undefined )\n\t\t\tthis.parentMenu.close();\n\t\telse if( e && !ContextMenu.isCursorOverElement( e, this.parentMenu.root) )\n\t\t{\n\t\t\tContextMenu.trigger( this.parentMenu.root, "mouseleave", e );\n\t\t}\n\t}\n\tif(this.current_submenu)\n\t\tthis.current_submenu.close(e, true);\n\n\tif(this.root.closing_timer)\n\t\tclearTimeout( this.root.closing_timer );\n}\n\n//this code is used to trigger events easily (used in the context menu mouseleave\nContextMenu.trigger = function( element, event_name, params, origin )\n{\n\tvar evt = document.createEvent( 'CustomEvent' );\n\tevt.initCustomEvent( event_name, true,true, params ); //canBubble, cancelable, detail\n\tevt.srcElement = origin;\n\tif( element.dispatchEvent )\n\t\telement.dispatchEvent( evt );\n\telse if( element.__events )\n\t\telement.__events.dispatchEvent( evt );\n\t//else nothing seems binded here so nothing to do\n\treturn evt;\n}\n\n//returns the top most menu\nContextMenu.prototype.getTopMenu = function()\n{\n\tif( this.options.parentMenu )\n\t\treturn this.options.parentMenu.getTopMenu();\n\treturn this;\n}\n\nContextMenu.prototype.getFirstEvent = function()\n{\n\tif( this.options.parentMenu )\n\t\treturn this.options.parentMenu.getFirstEvent();\n\treturn this.options.event;\n}\n\n\n\nContextMenu.isCursorOverElement = function( event, element )\n{\n\tvar left = event.clientX;\n\tvar top = event.clientY;\n\tvar rect = element.getBoundingClientRect();\n\tif(!rect)\n\t\treturn false;\n\tif(top > rect.top && top < (rect.top + rect.height) &&\n\t\tleft > rect.left && left < (rect.left + rect.width) )\n\t\treturn true;\n\treturn false;\n}\n\n\n\nLiteGraph.ContextMenu = ContextMenu;\n\nLiteGraph.closeAllContextMenus = function( ref_window )\n{\n\tref_window = ref_window || window;\n\n\tvar elements = ref_window.document.querySelectorAll(".litecontextmenu");\n\tif(!elements.length)\n\t\treturn;\n\n\tvar result = [];\n\tfor(var i = 0; i < elements.length; i++)\n\t\tresult.push(elements[i]);\n\n\tfor(var i in result)\n\t{\n\t\tif(result[i].close)\n\t\t\tresult[i].close();\n\t\telse if(result[i].parentNode)\n\t\t\tresult[i].parentNode.removeChild( result[i] );\n\t}\n}\n\nLiteGraph.extendClass = function ( target, origin )\n{\n\tfor(var i in origin) //copy class properties\n\t{\n\t\tif(target.hasOwnProperty(i))\n\t\t\tcontinue;\n\t\ttarget[i] = origin[i];\n\t}\n\n\tif(origin.prototype) //copy prototype properties\n\t\tfor(var i in origin.prototype) //only enumerables\n\t\t{\n\t\t\tif(!origin.prototype.hasOwnProperty(i))\n\t\t\t\tcontinue;\n\n\t\t\tif(target.prototype.hasOwnProperty(i)) //avoid overwritting existing ones\n\t\t\t\tcontinue;\n\n\t\t\t//copy getters\n\t\t\tif(origin.prototype.__lookupGetter__(i))\n\t\t\t\ttarget.prototype.__defineGetter__(i, origin.prototype.__lookupGetter__(i));\n\t\t\telse\n\t\t\t\ttarget.prototype[i] = origin.prototype[i];\n\n\t\t\t//and setters\n\t\t\tif(origin.prototype.__lookupSetter__(i))\n\t\t\t\ttarget.prototype.__defineSetter__(i, origin.prototype.__lookupSetter__(i));\n\t\t}\n}\n\n//used to create nodes from wrapping functions\nLiteGraph.getParameterNames = function(func) {\n return (func + '')\n .replace(/[/][/].*$/mg,'') // strip single-line comments\n .replace(/\\s+/g, '') // strip white space\n .replace(/[/][*][^/*]*[*][/]/g, '') // strip multi-line comments /**/\n .split('){', 1)[0].replace(/^[^(]*[(]/, '') // extract the parameters\n .replace(/=[^,]+/g, '') // strip any ES6 defaults\n .split(',').filter(Boolean); // split & filter [""]\n}\n\nMath.clamp = function(v,a,b) { return (a > v ? a : (b < v ? b : v)); }\n\nif( typeof(window) != "undefined" && !window["requestAnimationFrame"] )\n{\n\twindow.requestAnimationFrame = window.webkitRequestAnimationFrame ||\n\t\t window.mozRequestAnimationFrame ||\n\t\t (function( callback ){\n\t\t\twindow.setTimeout(callback, 1000 / 60);\n\t\t });\n}\n\n})(this);\n\nif(typeof(exports) != "undefined")\n\texports.LiteGraph = this.LiteGraph;\n\n \n