diff --git a/src/litegraph-editor.js b/src/litegraph-editor.js index fe824d35a..62dd7e77a 100755 --- a/src/litegraph-editor.js +++ b/src/litegraph-editor.js @@ -47,7 +47,7 @@ function Editor(container_id, options) { ".tools-right" ); - if (!options.skip_livemode) + if (!options.skip_livemode) { this.addToolsButton( "livemode_button", "Live", @@ -55,7 +55,8 @@ function Editor(container_id, options) { this.onLiveButton.bind(this), ".tools-right" ); - if (!options.skip_maximize) + } + if (!options.skip_maximize) { this.addToolsButton( "maximize_button", "", @@ -63,11 +64,16 @@ function Editor(container_id, options) { this.onFullscreenButton.bind(this), ".tools-right" ); - if (options.miniwindow) this.addMiniWindow(300, 200); + } + if (options.miniwindow) { + this.addMiniWindow(300, 200); + } //append to DOM var parent = document.getElementById(container_id); - if (parent) parent.appendChild(root); + if (parent) { + parent.appendChild(root); + } graphcanvas.resize(); //graphcanvas.draw(true,true); @@ -89,10 +95,12 @@ Editor.prototype.addLoadCounter = function() { setInterval(function() { meter.querySelector(".cpuload .fgload").style.width = 2 * self.graph.execution_time * 90 + "px"; - if (self.graph.status == LGraph.STATUS_RUNNING) + if (self.graph.status == LGraph.STATUS_RUNNING) { meter.querySelector(".gpuload .fgload").style.width = self.graphcanvas.render_time * 10 * 90 + "px"; - else meter.querySelector(".gpuload .fgload").style.width = 4 + "px"; + } else { + meter.querySelector(".gpuload .fgload").style.width = 4 + "px"; + } }, 200); }; @@ -103,7 +111,9 @@ Editor.prototype.addToolsButton = function( callback, container ) { - if (!container) container = ".tools"; + if (!container) { + container = ".tools"; + } var button = this.createButton(name, icon_url); button.id = id; @@ -128,7 +138,9 @@ Editor.prototype.createPanel = function(title, options) { Editor.prototype.createButton = function(name, icon_url) { var button = document.createElement("button"); - if (icon_url) button.innerHTML = " "; + if (icon_url) { + button.innerHTML = " "; + } button.innerHTML += name; return button; }; @@ -181,13 +193,15 @@ Editor.prototype.onLiveButton = function() { }; Editor.prototype.goFullscreen = function() { - if (this.root.requestFullscreen) + if (this.root.requestFullscreen) { this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT); - else if (this.root.mozRequestFullscreen) + } else if (this.root.mozRequestFullscreen) { this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT); - else if (this.root.webkitRequestFullscreen) + } else if (this.root.webkitRequestFullscreen) { this.root.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); - else throw "Fullscreen not supported"; + } else { + throw "Fullscreen not supported"; + } var self = this; setTimeout(function() { diff --git a/src/litegraph.js b/src/litegraph.js index 8c2a10b18..cb16b54a3 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -97,11 +97,14 @@ */ registerNodeType: function(type, base_class) { - if (!base_class.prototype) + if (!base_class.prototype) { throw "Cannot register a simple object, it must be a class with a prototype"; + } base_class.type = type; - if (LiteGraph.debug) console.log("Node registered: " + type); + if (LiteGraph.debug) { + console.log("Node registered: " + type); + } var categories = type.split("/"); var classname = base_class.name; @@ -109,15 +112,20 @@ var pos = type.lastIndexOf("/"); base_class.category = type.substr(0, pos); - if (!base_class.title) base_class.title = classname; + if (!base_class.title) { + base_class.title = classname; + } //info.name = name.substr(pos+1,name.length - pos); //extend class - if (base_class.prototype) + if (base_class.prototype) { //is a class - for (var i in LGraphNode.prototype) - if (!base_class.prototype[i]) + for (var i in LGraphNode.prototype) { + if (!base_class.prototype[i]) { base_class.prototype[i] = LGraphNode.prototype[i]; + } + } + } Object.defineProperty(base_class.prototype, "shape", { set: function(v) { @@ -147,27 +155,33 @@ enumerable: true }); - var prev = this.registered_node_types[type]; + var prev = this.registered_node_types[type]; this.registered_node_types[type] = base_class; - if (base_class.constructor.name) this.Nodes[classname] = base_class; - if(LiteGraph.onNodeTypeRegistered) - LiteGraph.onNodeTypeRegistered(type,base_class); - if( prev && LiteGraph.onNodeTypeReplaced) - LiteGraph.onNodeTypeReplaced(type,base_class,prev); + if (base_class.constructor.name) { + this.Nodes[classname] = base_class; + } + if (LiteGraph.onNodeTypeRegistered) { + LiteGraph.onNodeTypeRegistered(type, base_class); + } + if (prev && LiteGraph.onNodeTypeReplaced) { + LiteGraph.onNodeTypeReplaced(type, base_class, prev); + } //warnings - if (base_class.prototype.onPropertyChange) + if (base_class.prototype.onPropertyChange) { console.warn( "LiteGraph node class " + type + " has onPropertyChange method, it must be called onPropertyChanged with d at the end" ); + } if (base_class.supported_extensions) { - for (var i in base_class.supported_extensions) + for (var i in base_class.supported_extensions) { this.node_types_by_file_extension[ base_class.supported_extensions[i].toLowerCase() ] = base_class; + } } }, @@ -191,7 +205,7 @@ var params = Array(func.length); var code = ""; var names = LiteGraph.getParameterNames(func); - for (var i = 0; i < names.length; ++i) + for (var i = 0; i < names.length; ++i) { code += "this.addInput('" + names[i] + @@ -200,19 +214,22 @@ ? "'" + param_types[i] + "'" : "0") + ");\n"; + } code += "this.addOutput('out'," + (return_type ? "'" + return_type + "'" : 0) + ");\n"; - if (properties) + if (properties) { code += "this.properties = " + JSON.stringify(properties) + ";\n"; + } var classobj = Function(code); classobj.title = name.split("/").pop(); classobj.desc = "Generated from " + func.name; classobj.prototype.onExecute = function onExecute() { - for (var i = 0; i < params.length; ++i) + for (var i = 0; i < params.length; ++i) { params[i] = this.getInputData(i); + } var r = func.apply(this, params); this.setOutputData(0, r); }; @@ -229,8 +246,9 @@ LGraphNode.prototype[name] = func; for (var i in this.registered_node_types) { var type = this.registered_node_types[i]; - if (type.prototype[name]) - type.prototype["_" + name] = type.prototype[name]; //keep old in case of replacing + if (type.prototype[name]) { + type.prototype["_" + name] = type.prototype[name]; + } //keep old in case of replacing type.prototype[name] = func; } }, @@ -246,10 +264,11 @@ createNode: function(type, title, options) { var base_class = this.registered_node_types[type]; if (!base_class) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log( 'GraphNode type "' + type + '" not registered.' ); + } return null; } @@ -266,21 +285,39 @@ console.error(err); return null; } - } else node = new base_class(title); + } else { + node = new base_class(title); + } node.type = type; - if (!node.title && title) node.title = title; - if (!node.properties) node.properties = {}; - if (!node.properties_info) node.properties_info = []; - if (!node.flags) node.flags = {}; - if (!node.size) node.size = node.computeSize(); - if (!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat(); - if (!node.mode) node.mode = LiteGraph.ALWAYS; + if (!node.title && title) { + node.title = title; + } + if (!node.properties) { + node.properties = {}; + } + if (!node.properties_info) { + node.properties_info = []; + } + if (!node.flags) { + node.flags = {}; + } + if (!node.size) { + node.size = node.computeSize(); + } + if (!node.pos) { + node.pos = LiteGraph.DEFAULT_POSITION.concat(); + } + if (!node.mode) { + node.mode = LiteGraph.ALWAYS; + } //extra options if (options) { - for (var i in options) node[i] = options[i]; + for (var i in options) { + node[i] = options[i]; + } } return node; @@ -307,11 +344,17 @@ var r = []; for (var i in this.registered_node_types) { var type = this.registered_node_types[i]; - if (filter && type.filter && type.filter != filter) continue; + if (filter && type.filter && type.filter != filter) { + continue; + } if (category == "") { - if (type.category == null) r.push(type); - } else if (type.category == category) r.push(type); + if (type.category == null) { + r.push(type); + } + } else if (type.category == category) { + r.push(type); + } } return r; @@ -325,14 +368,18 @@ getNodeTypesCategories: function() { var categories = { "": 1 }; - for (var i in this.registered_node_types) + for (var i in this.registered_node_types) { if ( this.registered_node_types[i].category && !this.registered_node_types[i].skip_list - ) + ) { categories[this.registered_node_types[i].category] = 1; + } + } var result = []; - for (var i in categories) result.push(i); + for (var i in categories) { + result.push(i); + } return result; }, @@ -341,7 +388,9 @@ var tmp = document.getElementsByTagName("script"); //weird, this array changes by its own, so we use a copy var script_files = []; - for (var i in tmp) script_files.push(tmp[i]); + for (var i in tmp) { + script_files.push(tmp[i]); + } var docHeadObj = document.getElementsByTagName("head")[0]; folder_wildcard = document.location.href + folder_wildcard; @@ -351,33 +400,47 @@ if ( !src || src.substr(0, folder_wildcard.length) != folder_wildcard - ) + ) { continue; + } try { - if (LiteGraph.debug) console.log("Reloading: " + src); + if (LiteGraph.debug) { + console.log("Reloading: " + src); + } var dynamicScript = document.createElement("script"); dynamicScript.type = "text/javascript"; dynamicScript.src = src; docHeadObj.appendChild(dynamicScript); docHeadObj.removeChild(script_files[i]); } catch (err) { - if (LiteGraph.throw_errors) throw err; - if (LiteGraph.debug) + if (LiteGraph.throw_errors) { + throw err; + } + if (LiteGraph.debug) { console.log("Error while reloading " + src); + } } } - if (LiteGraph.debug) console.log("Nodes reloaded"); + if (LiteGraph.debug) { + console.log("Nodes reloaded"); + } }, //separated just to improve if it doesn't work cloneObject: function(obj, target) { - if (obj == null) return null; + if (obj == null) { + return null; + } var r = JSON.parse(JSON.stringify(obj)); - if (!target) return r; + if (!target) { + return r; + } - for (var i in r) target[i] = r[i]; + for (var i in r) { + target[i] = r[i]; + } return target; }, @@ -387,8 +450,9 @@ !type_b || //generic input type_a == type_b || //same type (is valid for triggers) (type_a == LiteGraph.EVENT && type_b == LiteGraph.ACTION) - ) + ) { return true; + } // Enforce string type to handle toLowerCase call (-1 number not ok) type_a = String(type_a); @@ -397,16 +461,20 @@ type_b = type_b.toLowerCase(); // For nodes supporting multiple connection types - if (type_a.indexOf(",") == -1 && type_b.indexOf(",") == -1) + if (type_a.indexOf(",") == -1 && type_b.indexOf(",") == -1) { return type_a == type_b; + } // Check all permutations to see if one is valid var supported_types_a = type_a.split(","); var supported_types_b = type_b.split(","); - for (var i = 0; i < supported_types_a.length; ++i) - for (var j = 0; j < supported_types_b.length; ++j) - if (supported_types_a[i] == supported_types_b[j]) + for (var i = 0; i < supported_types_a.length; ++i) { + for (var j = 0; j < supported_types_b.length; ++j) { + if (supported_types_a[i] == supported_types_b[j]) { return true; + } + } + } return false; }, @@ -421,19 +489,20 @@ }); //timer that works everywhere - if (typeof performance != "undefined") + if (typeof performance != "undefined") { LiteGraph.getTime = performance.now.bind(performance); - else if (typeof Date != "undefined" && Date.now) + } else if (typeof Date != "undefined" && Date.now) { LiteGraph.getTime = Date.now.bind(Date); - else if (typeof process != "undefined") + } else if (typeof process != "undefined") { LiteGraph.getTime = function() { var t = process.hrtime(); return t[0] * 0.001 + t[1] * 1e-6; }; - else + } else { LiteGraph.getTime = function getTime() { return new Date().getTime(); }; + } //********************************************************************************* // LGraph CLASS @@ -448,11 +517,15 @@ */ function LGraph(o) { - if (LiteGraph.debug) console.log("Graph created"); + if (LiteGraph.debug) { + console.log("Graph created"); + } this.list_of_graphcanvas = null; this.clear(); - if (o) this.configure(o); + if (o) { + this.configure(o); + } } global.LGraph = LiteGraph.LGraph = LGraph; @@ -483,11 +556,14 @@ this._version = -1; //used to detect changes //safe clear - if (this._nodes) + if (this._nodes) { for (var i = 0; i < this._nodes.length; ++i) { var node = this._nodes[i]; - if (node.onRemoved) node.onRemoved(); + if (node.onRemoved) { + node.onRemoved(); + } } + } //nodes this._nodes = []; @@ -535,13 +611,17 @@ */ LGraph.prototype.attachCanvas = function(graphcanvas) { - if (graphcanvas.constructor != LGraphCanvas) + if (graphcanvas.constructor != LGraphCanvas) { throw "attachCanvas expects a LGraphCanvas instance"; - if (graphcanvas.graph && graphcanvas.graph != this) + } + if (graphcanvas.graph && graphcanvas.graph != this) { graphcanvas.graph.detachCanvas(graphcanvas); + } graphcanvas.graph = this; - if (!this.list_of_graphcanvas) this.list_of_graphcanvas = []; + if (!this.list_of_graphcanvas) { + this.list_of_graphcanvas = []; + } this.list_of_graphcanvas.push(graphcanvas); }; @@ -551,10 +631,14 @@ * @param {GraphCanvas} graph_canvas */ LGraph.prototype.detachCanvas = function(graphcanvas) { - if (!this.list_of_graphcanvas) return; + if (!this.list_of_graphcanvas) { + return; + } var pos = this.list_of_graphcanvas.indexOf(graphcanvas); - if (pos == -1) return; + if (pos == -1) { + return; + } graphcanvas.graph = null; this.list_of_graphcanvas.splice(pos, 1); }; @@ -566,10 +650,14 @@ */ LGraph.prototype.start = function(interval) { - if (this.status == LGraph.STATUS_RUNNING) return; + if (this.status == LGraph.STATUS_RUNNING) { + return; + } this.status = LGraph.STATUS_RUNNING; - if (this.onPlayEvent) this.onPlayEvent(); + if (this.onPlayEvent) { + this.onPlayEvent(); + } this.sendEventToAllNodes("onStart"); @@ -585,17 +673,20 @@ window.requestAnimationFrame ) { function on_frame() { - if (that.execution_timer_id != -1) return; + if (that.execution_timer_id != -1) { + return; + } window.requestAnimationFrame(on_frame); that.runStep(1, !this.catch_errors); } this.execution_timer_id = -1; on_frame(); - } else + } else { this.execution_timer_id = setInterval(function() { //execute that.runStep(1, !this.catch_errors); }, interval); + } }; /** @@ -604,15 +695,20 @@ */ LGraph.prototype.stop = function() { - if (this.status == LGraph.STATUS_STOPPED) return; + if (this.status == LGraph.STATUS_STOPPED) { + return; + } this.status = LGraph.STATUS_STOPPED; - if (this.onStopEvent) this.onStopEvent(); + if (this.onStopEvent) { + this.onStopEvent(); + } if (this.execution_timer_id != null) { - if (this.execution_timer_id != -1) + if (this.execution_timer_id != -1) { clearInterval(this.execution_timer_id); + } this.execution_timer_id = null; } @@ -634,50 +730,67 @@ var nodes = this._nodes_executable ? this._nodes_executable : this._nodes; - if (!nodes) return; + if (!nodes) { + return; + } if (do_not_catch_errors) { //iterations for (var i = 0; i < num; i++) { for (var j = 0, l = nodes.length; j < l; ++j) { var node = nodes[j]; - if (node.mode == LiteGraph.ALWAYS && node.onExecute) + if (node.mode == LiteGraph.ALWAYS && node.onExecute) { node.onExecute(); + } } this.fixedtime += this.fixedtime_lapse; - if (this.onExecuteStep) this.onExecuteStep(); + if (this.onExecuteStep) { + this.onExecuteStep(); + } } - if (this.onAfterExecute) this.onAfterExecute(); + if (this.onAfterExecute) { + this.onAfterExecute(); + } } else { try { //iterations for (var i = 0; i < num; i++) { for (var j = 0, l = nodes.length; j < l; ++j) { var node = nodes[j]; - if (node.mode == LiteGraph.ALWAYS && node.onExecute) + if (node.mode == LiteGraph.ALWAYS && node.onExecute) { node.onExecute(); + } } this.fixedtime += this.fixedtime_lapse; - if (this.onExecuteStep) this.onExecuteStep(); + if (this.onExecuteStep) { + this.onExecuteStep(); + } } - if (this.onAfterExecute) this.onAfterExecute(); + if (this.onAfterExecute) { + this.onAfterExecute(); + } this.errors_in_execution = false; } catch (err) { this.errors_in_execution = true; - if (LiteGraph.throw_errors) throw err; - if (LiteGraph.debug) + if (LiteGraph.throw_errors) { + throw err; + } + if (LiteGraph.debug) { console.log("Error during execution: " + err); + } this.stop(); } } var now = LiteGraph.getTime(); var elapsed = now - start; - if (elapsed == 0) elapsed = 1; + if (elapsed == 0) { + elapsed = 1; + } this.execution_time = 0.001 * elapsed; this.globaltime += 0.001 * elapsed; this.iteration += 1; @@ -693,9 +806,11 @@ LGraph.prototype.updateExecutionOrder = function() { this._nodes_in_order = this.computeExecutionOrder(false); this._nodes_executable = []; - for (var i = 0; i < this._nodes_in_order.length; ++i) - if (this._nodes_in_order[i].onExecute) + for (var i = 0; i < this._nodes_in_order.length; ++i) { + if (this._nodes_in_order[i].onExecute) { this._nodes_executable.push(this._nodes_in_order[i]); + } + } }; //This is more internal, it computes the executable nodes in order and returns it @@ -712,35 +827,49 @@ //search for the nodes without inputs (starting nodes) for (var i = 0, l = this._nodes.length; i < l; ++i) { var node = this._nodes[i]; - if (only_onExecute && !node.onExecute) continue; + if (only_onExecute && !node.onExecute) { + continue; + } M[node.id] = node; //add to pending nodes var num = 0; //num of input connections - if (node.inputs) - for (var j = 0, l2 = node.inputs.length; j < l2; j++) - if (node.inputs[j] && node.inputs[j].link != null) num += 1; + if (node.inputs) { + for (var j = 0, l2 = node.inputs.length; j < l2; j++) { + if (node.inputs[j] && node.inputs[j].link != null) { + num += 1; + } + } + } if (num == 0) { //is a starting node S.push(node); - if (set_level) node._level = 1; + if (set_level) { + node._level = 1; + } } //num of input links else { - if (set_level) node._level = 0; + if (set_level) { + node._level = 0; + } remaining_links[node.id] = num; } } while (true) { - if (S.length == 0) break; + if (S.length == 0) { + break; + } //get an starting node var node = S.shift(); L.push(node); //add to ordered list delete M[node.id]; //remove from the pending nodes - if (!node.outputs) continue; + if (!node.outputs) { + continue; + } //for every output for (var i = 0; i < node.outputs.length; i++) { @@ -750,17 +879,22 @@ output == null || output.links == null || output.links.length == 0 - ) + ) { continue; + } //for every connection for (var j = 0; j < output.links.length; j++) { var link_id = output.links[j]; var link = this.links[link_id]; - if (!link) continue; + if (!link) { + continue; + } //already visited link (ignore it) - if (visited_links[link.id]) continue; + if (visited_links[link.id]) { + continue; + } var target_node = this.getNodeById(link.target_id); if (target_node == null) { @@ -772,40 +906,50 @@ set_level && (!target_node._level || target_node._level <= node._level) - ) + ) { target_node._level = node._level + 1; + } visited_links[link.id] = true; //mark as visited remaining_links[target_node.id] -= 1; //reduce the number of links remaining - if (remaining_links[target_node.id] == 0) - S.push(target_node); //if no more links, then add to starters array + if (remaining_links[target_node.id] == 0) { + S.push(target_node); + } //if no more links, then add to starters array } } } //the remaining ones (loops) - for (var i in M) L.push(M[i]); + for (var i in M) { + L.push(M[i]); + } - if (L.length != this._nodes.length && LiteGraph.debug) + if (L.length != this._nodes.length && LiteGraph.debug) { console.warn("something went wrong, nodes missing"); + } var l = L.length; //save order number in the node - for (var i = 0; i < l; ++i) L[i].order = i; + for (var i = 0; i < l; ++i) { + L[i].order = i; + } //sort now by priority L = L.sort(function(A, B) { var Ap = A.constructor.priority || A.priority || 0; var Bp = B.constructor.priority || B.priority || 0; - if (Ap == Bp) + if (Ap == Bp) { //if same priority, sort by order return A.order - B.order; + } return Ap - Bp; //sort by priority }); //save order number in the node, again... - for (var i = 0; i < l; ++i) L[i].order = i; + for (var i = 0; i < l; ++i) { + L[i].order = i; + } return L; }; @@ -823,7 +967,9 @@ while (pending.length) { var current = pending.shift(); - if (!current.inputs) continue; + if (!current.inputs) { + continue; + } if (!visited[current.id] && current != node) { visited[current.id] = true; ancestors.push(current); @@ -855,7 +1001,9 @@ for (var i = 0; i < nodes.length; ++i) { var node = nodes[i]; var col = node._level || 1; - if (!columns[col]) columns[col] = []; + if (!columns[col]) { + columns[col] = []; + } columns[col].push(node); } @@ -863,14 +1011,18 @@ for (var i = 0; i < columns.length; ++i) { var column = columns[i]; - if (!column) continue; + if (!column) { + continue; + } var max_size = 100; var y = margin; for (var j = 0; j < column.length; ++j) { var node = column[j]; node.pos[0] = x; node.pos[1] = y; - if (node.size[0] > max_size) max_size = node.size[0]; + if (node.size[0] > max_size) { + max_size = node.size[0]; + } y += node.size[1] + margin; } x += max_size + margin; @@ -919,7 +1071,9 @@ mode = mode || LiteGraph.ALWAYS; var nodes = this._nodes_in_order ? this._nodes_in_order : this._nodes; - if (!nodes) return; + if (!nodes) { + return; + } for (var j = 0, l = nodes.length; j < l; ++j) { var node = nodes[j]; @@ -928,25 +1082,35 @@ node.constructor === LiteGraph.Subgraph && eventname != "onExecute" ) { - if (node.mode == mode) + if (node.mode == mode) { node.sendEventToAllNodes(eventname, params, mode); + } continue; } - if (!node[eventname] || node.mode != mode) continue; - if (params === undefined) node[eventname](); - else if (params && params.constructor === Array) + if (!node[eventname] || node.mode != mode) { + continue; + } + if (params === undefined) { + node[eventname](); + } else if (params && params.constructor === Array) { node[eventname].apply(node, params); - else node[eventname](params); + } else { + node[eventname](params); + } } }; LGraph.prototype.sendActionToCanvas = function(action, params) { - if (!this.list_of_graphcanvas) return; + if (!this.list_of_graphcanvas) { + return; + } for (var i = 0; i < this.list_of_graphcanvas.length; ++i) { var c = this.list_of_graphcanvas[i]; - if (c[action]) c[action].apply(c, params); + if (c[action]) { + c[action].apply(c, params); + } } }; @@ -957,7 +1121,9 @@ */ LGraph.prototype.add = function(node, skip_compute_order) { - if (!node) return; + if (!node) { + return; + } //groups if (node.constructor === LGraphGroup) { @@ -977,12 +1143,16 @@ node.id = ++this.last_node_id; } - if (this._nodes.length >= LiteGraph.MAX_NUMBER_OF_NODES) + if (this._nodes.length >= LiteGraph.MAX_NUMBER_OF_NODES) { throw "LiteGraph: max number of nodes in a graph reached"; + } //give him an id - if (node.id == null || node.id == -1) node.id = ++this.last_node_id; - else if (this.last_node_id < node.id) this.last_node_id = node.id; + if (node.id == null || node.id == -1) { + node.id = ++this.last_node_id; + } else if (this.last_node_id < node.id) { + this.last_node_id = node.id; + } node.graph = this; this._version++; @@ -990,13 +1160,21 @@ this._nodes.push(node); this._nodes_by_id[node.id] = node; - if (node.onAdded) node.onAdded(this); + if (node.onAdded) { + node.onAdded(this); + } - if (this.config.align_to_grid) node.alignToGrid(); + if (this.config.align_to_grid) { + node.alignToGrid(); + } - if (!skip_compute_order) this.updateExecutionOrder(); + if (!skip_compute_order) { + this.updateExecutionOrder(); + } - if (this.onNodeAdded) this.onNodeAdded(node); + if (this.onNodeAdded) { + this.onNodeAdded(node); + } this.setDirtyCanvas(true); this.change(); @@ -1013,7 +1191,9 @@ LGraph.prototype.remove = function(node) { if (node.constructor === LiteGraph.LGraphGroup) { var index = this._groups.indexOf(node); - if (index != -1) this._groups.splice(index, 1); + if (index != -1) { + this._groups.splice(index, 1); + } node.graph = null; this._version++; this.setDirtyCanvas(true, true); @@ -1021,29 +1201,40 @@ return; } - if (this._nodes_by_id[node.id] == null) return; //not found + if (this._nodes_by_id[node.id] == null) { + return; + } //not found - if (node.ignore_remove) return; //cannot be removed + if (node.ignore_remove) { + return; + } //cannot be removed //disconnect inputs - if (node.inputs) + if (node.inputs) { for (var i = 0; i < node.inputs.length; i++) { var slot = node.inputs[i]; - if (slot.link != null) node.disconnectInput(i); + if (slot.link != null) { + node.disconnectInput(i); + } } + } //disconnect outputs - if (node.outputs) + if (node.outputs) { for (var i = 0; i < node.outputs.length; i++) { var slot = node.outputs[i]; - if (slot.links != null && slot.links.length) + if (slot.links != null && slot.links.length) { node.disconnectOutput(i); + } } + } //node.id = -1; //why? //callback - if (node.onRemoved) node.onRemoved(); + if (node.onRemoved) { + node.onRemoved(); + } node.graph = null; this._version++; @@ -1052,18 +1243,25 @@ if (this.list_of_graphcanvas) { for (var i = 0; i < this.list_of_graphcanvas.length; ++i) { var canvas = this.list_of_graphcanvas[i]; - if (canvas.selected_nodes[node.id]) + if (canvas.selected_nodes[node.id]) { delete canvas.selected_nodes[node.id]; - if (canvas.node_dragged == node) canvas.node_dragged = null; + } + if (canvas.node_dragged == node) { + canvas.node_dragged = null; + } } } //remove from containers var pos = this._nodes.indexOf(node); - if (pos != -1) this._nodes.splice(pos, 1); + if (pos != -1) { + this._nodes.splice(pos, 1); + } delete this._nodes_by_id[node.id]; - if (this.onNodeRemoved) this.onNodeRemoved(node); + if (this.onNodeRemoved) { + this.onNodeRemoved(node); + } this.setDirtyCanvas(true, true); this.change(); @@ -1078,7 +1276,9 @@ */ LGraph.prototype.getNodeById = function(id) { - if (id == null) return null; + if (id == null) { + return null; + } return this._nodes_by_id[id]; }; @@ -1091,9 +1291,11 @@ LGraph.prototype.findNodesByClass = function(classObject, result) { result = result || []; result.length = 0; - for (var i = 0, l = this._nodes.length; i < l; ++i) - if (this._nodes[i].constructor === classObject) + for (var i = 0, l = this._nodes.length; i < l; ++i) { + if (this._nodes[i].constructor === classObject) { result.push(this._nodes[i]); + } + } return result; }; @@ -1107,9 +1309,11 @@ var type = type.toLowerCase(); result = result || []; result.length = 0; - for (var i = 0, l = this._nodes.length; i < l; ++i) - if (this._nodes[i].type.toLowerCase() == type) + for (var i = 0, l = this._nodes.length; i < l; ++i) { + if (this._nodes[i].type.toLowerCase() == type) { result.push(this._nodes[i]); + } + } return result; }; @@ -1120,8 +1324,11 @@ * @return {Node} the node or null */ LGraph.prototype.findNodeByTitle = function(title) { - for (var i = 0, l = this._nodes.length; i < l; ++i) - if (this._nodes[i].title == title) return this._nodes[i]; + for (var i = 0, l = this._nodes.length; i < l; ++i) { + if (this._nodes[i].title == title) { + return this._nodes[i]; + } + } return null; }; @@ -1133,8 +1340,11 @@ */ LGraph.prototype.findNodesByTitle = function(title) { var result = []; - for (var i = 0, l = this._nodes.length; i < l; ++i) - if (this._nodes[i].title == title) result.push(this._nodes[i]); + for (var i = 0, l = this._nodes.length; i < l; ++i) { + if (this._nodes[i].title == title) { + result.push(this._nodes[i]); + } + } return result; }; @@ -1150,7 +1360,9 @@ nodes_list = nodes_list || this._nodes; for (var i = nodes_list.length - 1; i >= 0; i--) { var n = nodes_list[i]; - if (n.isPointInside(x, y, margin)) return n; + if (n.isPointInside(x, y, margin)) { + return n; + } } return null; }; @@ -1165,39 +1377,43 @@ LGraph.prototype.getGroupOnPos = function(x, y) { for (var i = this._groups.length - 1; i >= 0; i--) { var g = this._groups[i]; - if (g.isPointInside(x, y, 2, true)) return g; + if (g.isPointInside(x, y, 2, true)) { + return g; + } } return null; }; /** * Checks that the node type matches the node type registered, used when replacing a nodetype by a newer version during execution - * this replaces the ones using the old version with the new version + * this replaces the ones using the old version with the new version * @method checkNodeTypes */ LGraph.prototype.checkNodeTypes = function() { - var changes = false; + var changes = false; for (var i = 0; i < this._nodes.length; i++) { var node = this._nodes[i]; - var ctor = LiteGraph.registered_node_types[ node.type ]; - if(node.constructor == ctor) - continue; - console.log("node being replaced by newer version: " + node.type ); - var newnode = LiteGraph.createNode( node.type ); - changes = true; - this._nodes[i] = newnode; - newnode.configure( node.serialize() ); - newnode.graph = this; - this._nodes_by_id[newnode.id] = newnode; - if(node.inputs) - newnode.inputs = node.inputs.concat(); - if(node.outputs) - newnode.outputs = node.outputs.concat(); + var ctor = LiteGraph.registered_node_types[node.type]; + if (node.constructor == ctor) { + continue; + } + console.log("node being replaced by newer version: " + node.type); + var newnode = LiteGraph.createNode(node.type); + changes = true; + this._nodes[i] = newnode; + newnode.configure(node.serialize()); + newnode.graph = this; + this._nodes_by_id[newnode.id] = newnode; + if (node.inputs) { + newnode.inputs = node.inputs.concat(); + } + if (node.outputs) { + newnode.outputs = node.outputs.concat(); + } } - this.updateExecutionOrder(); + this.updateExecutionOrder(); }; - // ********** GLOBALS ***************** LGraph.prototype.onAction = function(action, param) { @@ -1207,14 +1423,18 @@ ); for (var i = 0; i < this._input_nodes.length; ++i) { var node = this._input_nodes[i]; - if (node.properties.name != action) continue; + if (node.properties.name != action) { + continue; + } node.onAction(action, param); break; } }; LGraph.prototype.trigger = function(action, param) { - if (this.onTrigger) this.onTrigger(action, param); + if (this.onTrigger) { + this.onTrigger(action, param); + } }; /** @@ -1226,16 +1446,21 @@ */ LGraph.prototype.addInput = function(name, type, value) { var input = this.inputs[name]; - if (input) + if (input) { //already exist return; + } this.inputs[name] = { name: name, type: type, value: value }; this._version++; - if (this.onInputAdded) this.onInputAdded(name, type); + if (this.onInputAdded) { + this.onInputAdded(name, type); + } - if (this.onInputsOutputsChange) this.onInputsOutputsChange(); + if (this.onInputsOutputsChange) { + this.onInputsOutputsChange(); + } }; /** @@ -1246,7 +1471,9 @@ */ LGraph.prototype.setInputData = function(name, data) { var input = this.inputs[name]; - if (!input) return; + if (!input) { + return; + } input.value = data; }; @@ -1258,7 +1485,9 @@ */ LGraph.prototype.getInputData = function(name) { var input = this.inputs[name]; - if (!input) return null; + if (!input) { + return null; + } return input.value; }; @@ -1269,9 +1498,13 @@ * @param {String} new_name */ LGraph.prototype.renameInput = function(old_name, name) { - if (name == old_name) return; + if (name == old_name) { + return; + } - if (!this.inputs[old_name]) return false; + if (!this.inputs[old_name]) { + return false; + } if (this.inputs[name]) { console.error("there is already one input with that name"); @@ -1282,9 +1515,13 @@ delete this.inputs[old_name]; this._version++; - if (this.onInputRenamed) this.onInputRenamed(old_name, name); + if (this.onInputRenamed) { + this.onInputRenamed(old_name, name); + } - if (this.onInputsOutputsChange) this.onInputsOutputsChange(); + if (this.onInputsOutputsChange) { + this.onInputsOutputsChange(); + } }; /** @@ -1294,18 +1531,23 @@ * @param {String} type */ LGraph.prototype.changeInputType = function(name, type) { - if (!this.inputs[name]) return false; + if (!this.inputs[name]) { + return false; + } if ( this.inputs[name].type && String(this.inputs[name].type).toLowerCase() == String(type).toLowerCase() - ) + ) { return; + } this.inputs[name].type = type; this._version++; - if (this.onInputTypeChanged) this.onInputTypeChanged(name, type); + if (this.onInputTypeChanged) { + this.onInputTypeChanged(name, type); + } }; /** @@ -1315,14 +1557,20 @@ * @param {String} type */ LGraph.prototype.removeInput = function(name) { - if (!this.inputs[name]) return false; + if (!this.inputs[name]) { + return false; + } delete this.inputs[name]; this._version++; - if (this.onInputRemoved) this.onInputRemoved(name); + if (this.onInputRemoved) { + this.onInputRemoved(name); + } - if (this.onInputsOutputsChange) this.onInputsOutputsChange(); + if (this.onInputsOutputsChange) { + this.onInputsOutputsChange(); + } return true; }; @@ -1337,9 +1585,13 @@ this.outputs[name] = { name: name, type: type, value: value }; this._version++; - if (this.onOutputAdded) this.onOutputAdded(name, type); + if (this.onOutputAdded) { + this.onOutputAdded(name, type); + } - if (this.onInputsOutputsChange) this.onInputsOutputsChange(); + if (this.onInputsOutputsChange) { + this.onInputsOutputsChange(); + } }; /** @@ -1350,7 +1602,9 @@ */ LGraph.prototype.setOutputData = function(name, value) { var output = this.outputs[name]; - if (!output) return; + if (!output) { + return; + } output.value = value; }; @@ -1362,7 +1616,9 @@ */ LGraph.prototype.getOutputData = function(name) { var output = this.outputs[name]; - if (!output) return null; + if (!output) { + return null; + } return output.value; }; @@ -1373,7 +1629,9 @@ * @param {String} new_name */ LGraph.prototype.renameOutput = function(old_name, name) { - if (!this.outputs[old_name]) return false; + if (!this.outputs[old_name]) { + return false; + } if (this.outputs[name]) { console.error("there is already one output with that name"); @@ -1384,9 +1642,13 @@ delete this.outputs[old_name]; this._version++; - if (this.onOutputRenamed) this.onOutputRenamed(old_name, name); + if (this.onOutputRenamed) { + this.onOutputRenamed(old_name, name); + } - if (this.onInputsOutputsChange) this.onInputsOutputsChange(); + if (this.onInputsOutputsChange) { + this.onInputsOutputsChange(); + } }; /** @@ -1396,18 +1658,23 @@ * @param {String} type */ LGraph.prototype.changeOutputType = function(name, type) { - if (!this.outputs[name]) return false; + if (!this.outputs[name]) { + return false; + } if ( this.outputs[name].type && String(this.outputs[name].type).toLowerCase() == String(type).toLowerCase() - ) + ) { return; + } this.outputs[name].type = type; this._version++; - if (this.onOutputTypeChanged) this.onOutputTypeChanged(name, type); + if (this.onOutputTypeChanged) { + this.onOutputTypeChanged(name, type); + } }; /** @@ -1416,29 +1683,41 @@ * @param {String} name */ LGraph.prototype.removeOutput = function(name) { - if (!this.outputs[name]) return false; + if (!this.outputs[name]) { + return false; + } delete this.outputs[name]; this._version++; - if (this.onOutputRemoved) this.onOutputRemoved(name); + if (this.onOutputRemoved) { + this.onOutputRemoved(name); + } - if (this.onInputsOutputsChange) this.onInputsOutputsChange(); + if (this.onInputsOutputsChange) { + this.onInputsOutputsChange(); + } return true; }; LGraph.prototype.triggerInput = function(name, value) { var nodes = this.findNodesByTitle(name); - for (var i = 0; i < nodes.length; ++i) nodes[i].onTrigger(value); + for (var i = 0; i < nodes.length; ++i) { + nodes[i].onTrigger(value); + } }; LGraph.prototype.setCallback = function(name, func) { var nodes = this.findNodesByTitle(name); - for (var i = 0; i < nodes.length; ++i) nodes[i].setTrigger(func); + for (var i = 0; i < nodes.length; ++i) { + nodes[i].setTrigger(func); + } }; LGraph.prototype.connectionChange = function(node, link_info) { this.updateExecutionOrder(); - if (this.onConnectionChange) this.onConnectionChange(node); + if (this.onConnectionChange) { + this.onConnectionChange(node); + } this._version++; this.sendActionToCanvas("onConnectionChange"); }; @@ -1449,11 +1728,15 @@ */ LGraph.prototype.isLive = function() { - if (!this.list_of_graphcanvas) return false; + if (!this.list_of_graphcanvas) { + return false; + } for (var i = 0; i < this.list_of_graphcanvas.length; ++i) { var c = this.list_of_graphcanvas[i]; - if (c.live_mode) return true; + if (c.live_mode) { + return true; + } } return false; }; @@ -1465,16 +1748,24 @@ LGraph.prototype.clearTriggeredSlots = function() { for (var i in this.links) { var link_info = this.links[i]; - if (!link_info) continue; - if (link_info._last_time) link_info._last_time = 0; + if (!link_info) { + continue; + } + if (link_info._last_time) { + link_info._last_time = 0; + } } }; /* Called when something visually changed (not the graph!) */ LGraph.prototype.change = function() { - if (LiteGraph.debug) console.log("Graph changed"); + if (LiteGraph.debug) { + console.log("Graph changed"); + } this.sendActionToCanvas("setDirty", [true, true]); - if (this.on_change) this.on_change(this); + if (this.on_change) { + this.on_change(this); + } }; LGraph.prototype.setDirtyCanvas = function(fg, bg) { @@ -1488,9 +1779,13 @@ */ LGraph.prototype.removeLink = function(link_id) { var link = this.links[link_id]; - if (!link) return; + if (!link) { + return; + } var node = this.getNodeById(link.target_id); - if (node) node.disconnectInput(link.target_slot); + if (node) { + node.disconnectInput(link.target_slot); + } }; //save and recover app state *************************************** @@ -1501,30 +1796,35 @@ */ LGraph.prototype.serialize = function() { var nodes_info = []; - for (var i = 0, l = this._nodes.length; i < l; ++i) + for (var i = 0, l = this._nodes.length; i < l; ++i) { nodes_info.push(this._nodes[i].serialize()); + } //pack link info into a non-verbose format var links = []; for (var i in this.links) { //links is an OBJECT var link = this.links[i]; - if(!link.serialize) //weird bug I havent solved yet - { - console.warn("weird LLink bug, link info is not a LLink but a regular object"); - var link2 = new LLink(); - for(var i in link) - link2[i] = link[i]; - this.links[i] = link2; - link = link2; - } + if (!link.serialize) { + //weird bug I havent solved yet + console.warn( + "weird LLink bug, link info is not a LLink but a regular object" + ); + var link2 = new LLink(); + for (var i in link) { + link2[i] = link[i]; + } + this.links[i] = link2; + link = link2; + } links.push(link.serialize()); } var groups_info = []; - for (var i = 0; i < this._groups.length; ++i) + for (var i = 0; i < this._groups.length; ++i) { groups_info.push(this._groups[i].serialize()); + } var data = { last_node_id: this.last_node_id, @@ -1546,9 +1846,13 @@ * @param {Boolean} returns if there was any error parsing */ LGraph.prototype.configure = function(data, keep_old) { - if (!data) return; + if (!data) { + return; + } - if (!keep_old) this.clear(); + if (!keep_old) { + this.clear(); + } var nodes = data.nodes; @@ -1565,7 +1869,9 @@ } //copy all stored fields - for (var i in data) this[i] = data[i]; + for (var i in data) { + this[i] = data[i]; + } var error = false; @@ -1576,10 +1882,11 @@ var n_info = nodes[i]; //stored info var node = LiteGraph.createNode(n_info.type, n_info.title); if (!node) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log( "Node not found or has errors: " + n_info.type ); + } //in case of error we create a replacement node to avoid losing info node = new LGraphNode(); @@ -1597,18 +1904,21 @@ for (var i = 0, l = nodes.length; i < l; ++i) { var n_info = nodes[i]; var node = this.getNodeById(n_info.id); - if (node) node.configure(n_info); + if (node) { + node.configure(n_info); + } } } //groups this._groups.length = 0; - if (data.groups) + if (data.groups) { for (var i = 0; i < data.groups.length; ++i) { var group = new LiteGraph.LGraphGroup(); group.configure(data.groups[i]); this.add(group); } + } this.updateExecutionOrder(); this._version++; @@ -1758,7 +2068,9 @@ Object.defineProperty(this, "pos", { set: function(v) { - if (!v || v.length < 2) return; + if (!v || v.length < 2) { + return; + } this._pos[0] = v[0]; this._pos[1] = v[1]; }, @@ -1788,32 +2100,43 @@ * @method configure */ LGraphNode.prototype.configure = function(info) { - if (this.graph) this.graph._version++; + if (this.graph) { + this.graph._version++; + } for (var j in info) { if (j == "properties") { //i don't want to clone properties, I want to reuse the old container for (var k in info.properties) { this.properties[k] = info.properties[k]; - if (this.onPropertyChanged) + if (this.onPropertyChanged) { this.onPropertyChanged(k, info.properties[k]); + } } continue; } - if (info[j] == null) continue; - else if (typeof info[j] == "object") { + if (info[j] == null) { + continue; + } else if (typeof info[j] == "object") { //object - if (this[j] && this[j].configure) this[j].configure(info[j]); - else this[j] = LiteGraph.cloneObject(info[j], this[j]); + if (this[j] && this[j].configure) { + this[j].configure(info[j]); + } else { + this[j] = LiteGraph.cloneObject(info[j], this[j]); + } } //value - else this[j] = info[j]; + else { + this[j] = info[j]; + } } - if (!info.title) this.title = this.constructor.title; + if (!info.title) { + this.title = this.constructor.title; + } if (this.onConnectionsChange) { - if (this.inputs) + if (this.inputs) { for (var i = 0; i < this.inputs.length; ++i) { var input = this.inputs[i]; var link_info = this.graph @@ -1827,11 +2150,14 @@ input ); //link_info has been created now, so its updated } + } - if (this.outputs) + if (this.outputs) { for (var i = 0; i < this.outputs.length; ++i) { var output = this.outputs[i]; - if (!output.links) continue; + if (!output.links) { + continue; + } for (var j = 0; j < output.links.length; ++j) { var link_info = this.graph ? this.graph.links[output.links[j]] @@ -1845,15 +2171,20 @@ ); //link_info has been created now, so its updated } } + } } if (info.widgets_values && this.widgets) { - for (var i = 0; i < info.widgets_values.length; ++i) - if (this.widgets[i]) + for (var i = 0; i < info.widgets_values.length; ++i) { + if (this.widgets[i]) { this.widgets[i].value = info.widgets_values[i]; + } + } } - if (this.onConfigure) this.onConfigure(info); + if (this.onConfigure) { + this.onConfigure(info); + } }; /** @@ -1873,42 +2204,60 @@ }; //special case for when there were errors - if (this.constructor === LGraphNode && this.last_serialization) + if (this.constructor === LGraphNode && this.last_serialization) { return this.last_serialization; + } - if (this.inputs) o.inputs = this.inputs; + if (this.inputs) { + o.inputs = this.inputs; + } if (this.outputs) { //clear outputs last data (because data in connections is never serialized but stored inside the outputs info) - for (var i = 0; i < this.outputs.length; i++) + for (var i = 0; i < this.outputs.length; i++) { delete this.outputs[i]._data; + } o.outputs = this.outputs; } - if (this.title && this.title != this.constructor.title) + if (this.title && this.title != this.constructor.title) { o.title = this.title; + } - if (this.properties) + if (this.properties) { o.properties = LiteGraph.cloneObject(this.properties); + } if (this.widgets && this.serialize_widgets) { o.widgets_values = []; - for (var i = 0; i < this.widgets.length; ++i) + for (var i = 0; i < this.widgets.length; ++i) { o.widgets_values[i] = this.widgets[i].value; + } } - if (!o.type) o.type = this.constructor.type; + if (!o.type) { + o.type = this.constructor.type; + } - if (this.color) o.color = this.color; - if (this.bgcolor) o.bgcolor = this.bgcolor; - if (this.boxcolor) o.boxcolor = this.boxcolor; - if (this.shape) o.shape = this.shape; + if (this.color) { + o.color = this.color; + } + if (this.bgcolor) { + o.bgcolor = this.bgcolor; + } + if (this.boxcolor) { + o.boxcolor = this.boxcolor; + } + if (this.shape) { + o.shape = this.shape; + } if (this.onSerialize) { - if (this.onSerialize(o)) + if (this.onSerialize(o)) { console.warn( "node onSerialize shouldnt return anything, data should be stored in the object pass in the first parameter" ); + } } return o; @@ -1917,20 +2266,27 @@ /* Creates a clone of this node */ LGraphNode.prototype.clone = function() { var node = LiteGraph.createNode(this.type); - if (!node) return null; + if (!node) { + return null; + } //we clone it because serialize returns shared containers var data = LiteGraph.cloneObject(this.serialize()); //remove links - if (data.inputs) - for (var i = 0; i < data.inputs.length; ++i) + if (data.inputs) { + for (var i = 0; i < data.inputs.length; ++i) { data.inputs[i].link = null; - - if (data.outputs) - for (var i = 0; i < data.outputs.length; ++i) { - if (data.outputs[i].links) data.outputs[i].links.length = 0; } + } + + if (data.outputs) { + for (var i = 0; i < data.outputs.length; ++i) { + if (data.outputs[i].links) { + data.outputs[i].links.length = 0; + } + } + } delete data["id"]; //remove links @@ -1965,12 +2321,14 @@ * @param {*} value */ LGraphNode.prototype.setProperty = function(name, value) { - if(!this.properties) - this.properties = {}; - this.properties[name] = value; - if (this.onPropertyChanged) - this.onPropertyChanged(name, value); - }; + if (!this.properties) { + this.properties = {}; + } + this.properties[name] = value; + if (this.onPropertyChanged) { + this.onPropertyChanged(name, value); + } + }; // Execution ************************* /** @@ -1980,16 +2338,22 @@ * @param {*} data */ LGraphNode.prototype.setOutputData = function(slot, data) { - if (!this.outputs) return; + if (!this.outputs) { + return; + } //this maybe slow and a niche case //if(slot && slot.constructor === String) // slot = this.findOutputSlot(slot); - if (slot == -1 || slot >= this.outputs.length) return; + if (slot == -1 || slot >= this.outputs.length) { + return; + } var output_info = this.outputs[slot]; - if (!output_info) return; + if (!output_info) { + return; + } //store data in the output itself in case we want to debug output_info._data = data; @@ -2010,10 +2374,16 @@ * @param {String} datatype */ LGraphNode.prototype.setOutputDataType = function(slot, type) { - if (!this.outputs) return; - if (slot == -1 || slot >= this.outputs.length) return; + if (!this.outputs) { + return; + } + if (slot == -1 || slot >= this.outputs.length) { + return; + } var output_info = this.outputs[slot]; - if (!output_info) return; + if (!output_info) { + return; + } //store data in the output itself in case we want to debug output_info.type = type; @@ -2034,25 +2404,36 @@ * @return {*} data or if it is not connected returns undefined */ LGraphNode.prototype.getInputData = function(slot, force_update) { - if (!this.inputs) return; //undefined; - - if (slot >= this.inputs.length || this.inputs[slot].link == null) + if (!this.inputs) { return; + } //undefined; + + if (slot >= this.inputs.length || this.inputs[slot].link == null) { + return; + } var link_id = this.inputs[slot].link; var link = this.graph.links[link_id]; - if (!link) + if (!link) { //bug: weird case but it happens sometimes return null; + } - if (!force_update) return link.data; + if (!force_update) { + return link.data; + } //special case: used to extract data from the incoming connection before the graph has been executed var node = this.graph.getNodeById(link.origin_id); - if (!node) return link.data; + if (!node) { + return link.data; + } - if (node.updateOutputData) node.updateOutputData(link.origin_slot); - else if (node.onExecute) node.onExecute(); + if (node.updateOutputData) { + node.updateOutputData(link.origin_slot); + } else if (node.onExecute) { + node.onExecute(); + } return link.data; }; @@ -2064,19 +2445,27 @@ * @return {String} datatype in string format */ LGraphNode.prototype.getInputDataType = function(slot) { - if (!this.inputs) return null; //undefined; - - if (slot >= this.inputs.length || this.inputs[slot].link == null) + if (!this.inputs) { return null; + } //undefined; + + if (slot >= this.inputs.length || this.inputs[slot].link == null) { + return null; + } var link_id = this.inputs[slot].link; var link = this.graph.links[link_id]; - if (!link) + if (!link) { //bug: weird case but it happens sometimes return null; + } var node = this.graph.getNodeById(link.origin_id); - if (!node) return link.type; + if (!node) { + return link.type; + } var output_info = node.outputs[link.origin_slot]; - if (output_info) return output_info.type; + if (output_info) { + return output_info.type; + } return null; }; @@ -2092,7 +2481,9 @@ force_update ) { var slot = this.findInputSlot(slot_name); - if (slot == -1) return null; + if (slot == -1) { + return null; + } return this.getInputData(slot, force_update); }; @@ -2103,7 +2494,9 @@ * @return {boolean} */ LGraphNode.prototype.isInputConnected = function(slot) { - if (!this.inputs) return false; + if (!this.inputs) { + return false; + } return slot < this.inputs.length && this.inputs[slot].link != null; }; @@ -2114,8 +2507,12 @@ * @return {Object} object or null { link: id, name: string, type: string or 0 } */ LGraphNode.prototype.getInputInfo = function(slot) { - if (!this.inputs) return null; - if (slot < this.inputs.length) return this.inputs[slot]; + if (!this.inputs) { + return null; + } + if (slot < this.inputs.length) { + return this.inputs[slot]; + } return null; }; @@ -2126,12 +2523,20 @@ * @return {LGraphNode} node or null */ LGraphNode.prototype.getInputNode = function(slot) { - if (!this.inputs) return null; - if (slot >= this.inputs.length) return null; + if (!this.inputs) { + return null; + } + if (slot >= this.inputs.length) { + return null; + } var input = this.inputs[slot]; - if (!input || input.link === null) return null; + if (!input || input.link === null) { + return null; + } var link_info = this.graph.links[input.link]; - if (!link_info) return null; + if (!link_info) { + return null; + } return this.graph.getNodeById(link_info.origin_id); }; @@ -2142,14 +2547,17 @@ * @return {*} value */ LGraphNode.prototype.getInputOrProperty = function(name) { - if (!this.inputs || !this.inputs.length) + if (!this.inputs || !this.inputs.length) { return this.properties ? this.properties[name] : null; + } for (var i = 0, l = this.inputs.length; i < l; ++i) { var input_info = this.inputs[i]; if (name == input_info.name && input_info.link != null) { var link = this.graph.links[input_info.link]; - if (link) return link.data; + if (link) { + return link.data; + } } } return this.properties[name]; @@ -2162,8 +2570,12 @@ * @return {Object} object or null */ LGraphNode.prototype.getOutputData = function(slot) { - if (!this.outputs) return null; - if (slot >= this.outputs.length) return null; + if (!this.outputs) { + return null; + } + if (slot >= this.outputs.length) { + return null; + } var info = this.outputs[slot]; return info._data; @@ -2176,8 +2588,12 @@ * @return {Object} object or null { name: string, type: string, links: [ ids of links in number ] } */ LGraphNode.prototype.getOutputInfo = function(slot) { - if (!this.outputs) return null; - if (slot < this.outputs.length) return this.outputs[slot]; + if (!this.outputs) { + return null; + } + if (slot < this.outputs.length) { + return this.outputs[slot]; + } return null; }; @@ -2188,7 +2604,9 @@ * @return {boolean} */ LGraphNode.prototype.isOutputConnected = function(slot) { - if (!this.outputs) return false; + if (!this.outputs) { + return false; + } return ( slot < this.outputs.length && this.outputs[slot].links && @@ -2202,10 +2620,14 @@ * @return {boolean} */ LGraphNode.prototype.isAnyOutputConnected = function() { - if (!this.outputs) return false; - for (var i = 0; i < this.outputs.length; ++i) - if (this.outputs[i].links && this.outputs[i].links.length) + if (!this.outputs) { + return false; + } + for (var i = 0; i < this.outputs.length; ++i) { + if (this.outputs[i].links && this.outputs[i].links.length) { return true; + } + } return false; }; @@ -2216,12 +2638,18 @@ * @return {array} */ LGraphNode.prototype.getOutputNodes = function(slot) { - if (!this.outputs || this.outputs.length == 0) return null; + if (!this.outputs || this.outputs.length == 0) { + return null; + } - if (slot >= this.outputs.length) return null; + if (slot >= this.outputs.length) { + return null; + } var output = this.outputs[slot]; - if (!output.links || output.links.length == 0) return null; + if (!output.links || output.links.length == 0) { + return null; + } var r = []; for (var i = 0; i < output.links.length; i++) { @@ -2229,7 +2657,9 @@ var link = this.graph.links[link_id]; if (link) { var target_node = this.graph.getNodeById(link.target_id); - if (target_node) r.push(target_node); + if (target_node) { + r.push(target_node); + } } } return r; @@ -2242,9 +2672,13 @@ * @param {*} param */ LGraphNode.prototype.trigger = function(action, param) { - if (!this.outputs || !this.outputs.length) return; + if (!this.outputs || !this.outputs.length) { + return; + } - if (this.graph) this.graph._last_trigger_time = LiteGraph.getTime(); + if (this.graph) { + this.graph._last_trigger_time = LiteGraph.getTime(); + } for (var i = 0; i < this.outputs.length; ++i) { var output = this.outputs[i]; @@ -2252,8 +2686,9 @@ !output || output.type !== LiteGraph.EVENT || (action && output.name != action) - ) + ) { continue; + } this.triggerSlot(i, param); } }; @@ -2266,38 +2701,52 @@ * @param {Number} link_id [optional] in case you want to trigger and specific output link in a slot */ LGraphNode.prototype.triggerSlot = function(slot, param, link_id) { - if (!this.outputs) return; + if (!this.outputs) { + return; + } var output = this.outputs[slot]; - if (!output) return; + if (!output) { + return; + } var links = output.links; - if (!links || !links.length) return; + if (!links || !links.length) { + return; + } - if (this.graph) this.graph._last_trigger_time = LiteGraph.getTime(); + if (this.graph) { + this.graph._last_trigger_time = LiteGraph.getTime(); + } //for every link attached here for (var k = 0; k < links.length; ++k) { var id = links[k]; - if (link_id != null && link_id != id) + if (link_id != null && link_id != id) { //to skip links continue; + } var link_info = this.graph.links[links[k]]; - if (!link_info) + if (!link_info) { //not connected continue; + } link_info._last_time = LiteGraph.getTime(); var node = this.graph.getNodeById(link_info.target_id); - if (!node) + if (!node) { //node not found? continue; + } //used to mark events in graph var target_connection = node.inputs[link_info.target_slot]; - if (node.onAction) node.onAction(target_connection.name, param); - else if (node.mode === LiteGraph.ON_TRIGGER) { - if (node.onExecute) node.onExecute(param); + if (node.onAction) { + node.onAction(target_connection.name, param); + } else if (node.mode === LiteGraph.ON_TRIGGER) { + if (node.onExecute) { + node.onExecute(param); + } } } }; @@ -2309,24 +2758,32 @@ * @param {Number} link_id [optional] in case you want to trigger and specific output link in a slot */ LGraphNode.prototype.clearTriggeredSlot = function(slot, link_id) { - if (!this.outputs) return; + if (!this.outputs) { + return; + } var output = this.outputs[slot]; - if (!output) return; + if (!output) { + return; + } var links = output.links; - if (!links || !links.length) return; + if (!links || !links.length) { + return; + } //for every link attached here for (var k = 0; k < links.length; ++k) { var id = links[k]; - if (link_id != null && link_id != id) + if (link_id != null && link_id != id) { //to skip links continue; + } var link_info = this.graph.links[links[k]]; - if (!link_info) + if (!link_info) { //not connected continue; + } link_info._last_time = 0; } }; @@ -2346,10 +2803,18 @@ extra_info ) { var o = { name: name, type: type, default_value: default_value }; - if (extra_info) for (var i in extra_info) o[i] = extra_info[i]; - if (!this.properties_info) this.properties_info = []; + if (extra_info) { + for (var i in extra_info) { + o[i] = extra_info[i]; + } + } + if (!this.properties_info) { + this.properties_info = []; + } this.properties_info.push(o); - if (!this.properties) this.properties = {}; + if (!this.properties) { + this.properties = {}; + } this.properties[name] = default_value; return o; }; @@ -2365,11 +2830,19 @@ */ LGraphNode.prototype.addOutput = function(name, type, extra_info) { var o = { name: name, type: type, links: null }; - if (extra_info) for (var i in extra_info) o[i] = extra_info[i]; + if (extra_info) { + for (var i in extra_info) { + o[i] = extra_info[i]; + } + } - if (!this.outputs) this.outputs = []; + if (!this.outputs) { + this.outputs = []; + } this.outputs.push(o); - if (this.onOutputAdded) this.onOutputAdded(o); + if (this.onOutputAdded) { + this.onOutputAdded(o); + } this.size = this.computeSize(); this.setDirtyCanvas(true, true); return o; @@ -2384,11 +2857,19 @@ for (var i = 0; i < array.length; ++i) { var info = array[i]; var o = { name: info[0], type: info[1], link: null }; - if (array[2]) for (var j in info[2]) o[j] = info[2][j]; + if (array[2]) { + for (var j in info[2]) { + o[j] = info[2][j]; + } + } - if (!this.outputs) this.outputs = []; + if (!this.outputs) { + this.outputs = []; + } this.outputs.push(o); - if (this.onOutputAdded) this.onOutputAdded(o); + if (this.onOutputAdded) { + this.onOutputAdded(o); + } } this.size = this.computeSize(); @@ -2404,17 +2885,23 @@ this.disconnectOutput(slot); this.outputs.splice(slot, 1); for (var i = slot; i < this.outputs.length; ++i) { - if (!this.outputs[i] || !this.outputs[i].links) continue; + if (!this.outputs[i] || !this.outputs[i].links) { + continue; + } var links = this.outputs[i].links; for (var j = 0; j < links.length; ++j) { var link = this.graph.links[links[j]]; - if (!link) continue; + if (!link) { + continue; + } link.origin_slot -= 1; } } this.size = this.computeSize(); - if (this.onOutputRemoved) this.onOutputRemoved(slot); + if (this.onOutputRemoved) { + this.onOutputRemoved(slot); + } this.setDirtyCanvas(true, true); }; @@ -2428,12 +2915,20 @@ LGraphNode.prototype.addInput = function(name, type, extra_info) { type = type || 0; var o = { name: name, type: type, link: null }; - if (extra_info) for (var i in extra_info) o[i] = extra_info[i]; + if (extra_info) { + for (var i in extra_info) { + o[i] = extra_info[i]; + } + } - if (!this.inputs) this.inputs = []; + if (!this.inputs) { + this.inputs = []; + } this.inputs.push(o); this.size = this.computeSize(); - if (this.onInputAdded) this.onInputAdded(o); + if (this.onInputAdded) { + this.onInputAdded(o); + } this.setDirtyCanvas(true, true); return o; }; @@ -2447,11 +2942,19 @@ for (var i = 0; i < array.length; ++i) { var info = array[i]; var o = { name: info[0], type: info[1], link: null }; - if (array[2]) for (var j in info[2]) o[j] = info[2][j]; + if (array[2]) { + for (var j in info[2]) { + o[j] = info[2][j]; + } + } - if (!this.inputs) this.inputs = []; + if (!this.inputs) { + this.inputs = []; + } this.inputs.push(o); - if (this.onInputAdded) this.onInputAdded(o); + if (this.onInputAdded) { + this.onInputAdded(o); + } } this.size = this.computeSize(); @@ -2467,13 +2970,19 @@ this.disconnectInput(slot); this.inputs.splice(slot, 1); for (var i = slot; i < this.inputs.length; ++i) { - if (!this.inputs[i]) continue; + if (!this.inputs[i]) { + continue; + } var link = this.graph.links[this.inputs[i].link]; - if (!link) continue; + if (!link) { + continue; + } link.target_slot -= 1; } this.size = this.computeSize(); - if (this.onInputRemoved) this.onInputRemoved(slot); + if (this.onInputRemoved) { + this.onInputRemoved(slot); + } this.setDirtyCanvas(true, true); }; @@ -2504,7 +3013,9 @@ * @return {number} the total size */ LGraphNode.prototype.computeSize = function(minHeight, out) { - if (this.constructor.size) return this.constructor.size.concat(); + if (this.constructor.size) { + return this.constructor.size.concat(); + } var rows = Math.max( this.inputs ? this.inputs.length : 1, @@ -2517,50 +3028,66 @@ (this.constructor.slot_start_y || 0) + rows * LiteGraph.NODE_SLOT_HEIGHT; var widgets_height = 0; - if (this.widgets && this.widgets.length) + if (this.widgets && this.widgets.length) { widgets_height = this.widgets.length * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 8; - if (this.widgets_up) size[1] = Math.max(size[1], widgets_height); - else size[1] += widgets_height; + } + if (this.widgets_up) { + size[1] = Math.max(size[1], widgets_height); + } else { + size[1] += widgets_height; + } var font_size = font_size; var title_width = compute_text_size(this.title); var input_width = 0; var output_width = 0; - if (this.inputs) + if (this.inputs) { for (var i = 0, l = this.inputs.length; i < l; ++i) { var input = this.inputs[i]; var text = input.label || input.name || ""; var text_width = compute_text_size(text); - if (input_width < text_width) input_width = text_width; + if (input_width < text_width) { + input_width = text_width; + } } + } - if (this.outputs) + if (this.outputs) { for (var i = 0, l = this.outputs.length; i < l; ++i) { var output = this.outputs[i]; var text = output.label || output.name || ""; var text_width = compute_text_size(text); - if (output_width < text_width) output_width = text_width; + if (output_width < text_width) { + output_width = text_width; + } } + } size[0] = Math.max(input_width + output_width + 10, title_width); size[0] = Math.max(size[0], LiteGraph.NODE_WIDTH); - if (this.widgets && this.widgets.length) + if (this.widgets && this.widgets.length) { size[0] = Math.max(size[0], LiteGraph.NODE_WIDTH * 1.5); + } - if (this.onResize) this.onResize(size); + if (this.onResize) { + this.onResize(size); + } function compute_text_size(text) { - if (!text) return 0; + if (!text) { + return 0; + } return font_size * text.length * 0.6; } if ( this.constructor.min_height && size[1] < this.constructor.min_height - ) + ) { size[1] = this.constructor.min_height; + } size[1] += 6; //margin @@ -2580,7 +3107,9 @@ callback, options ) { - if (!this.widgets) this.widgets = []; + if (!this.widgets) { + this.widgets = []; + } var w = { type: type.toLowerCase(), name: name, @@ -2589,18 +3118,24 @@ options: options || {} }; - if (w.options.y !== undefined) w.y = w.options.y; + if (w.options.y !== undefined) { + w.y = w.options.y; + } - if (!callback) + if (!callback) { console.warn("LiteGraph addWidget(...) without a callback"); - if (type == "combo" && !w.options.values) + } + if (type == "combo" && !w.options.values) { throw "LiteGraph addWidget('combo',...) requires to pass values in options: { values:['red','blue'] }"; + } this.widgets.push(w); return w; }; LGraphNode.prototype.addCustomWidget = function(custom_widget) { - if (!this.widgets) this.widgets = []; + if (!this.widgets) { + this.widgets = []; + } this.widgets.push(custom_widget); return custom_widget; }; @@ -2618,7 +3153,9 @@ out[2] = this.size[0] + 4; out[3] = this.size[1] + LiteGraph.NODE_TITLE_HEIGHT; - if (this.onBounding) this.onBounding(out); + if (this.onBounding) { + this.onBounding(out); + } return out; }; @@ -2633,7 +3170,9 @@ margin = margin || 0; var margin_top = this.graph && this.graph.isLive() ? 0 : 20; - if (skip_title) margin_top = 0; + if (skip_title) { + margin_top = 0; + } if (this.flags && this.flags.collapsed) { //if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS) if ( @@ -2646,15 +3185,17 @@ 2 * margin, LiteGraph.NODE_TITLE_HEIGHT + 2 * margin ) - ) + ) { return true; + } } else if ( this.pos[0] - 4 - margin < x && this.pos[0] + this.size[0] + 4 + margin > x && this.pos[1] - margin_top - margin < y && this.pos[1] + this.size[1] + margin > y - ) + ) { return true; + } return false; }; @@ -2668,7 +3209,7 @@ LGraphNode.prototype.getSlotInPosition = function(x, y) { //search for inputs var link_pos = new Float32Array(2); - if (this.inputs) + if (this.inputs) { for (var i = 0, l = this.inputs.length; i < l; ++i) { var input = this.inputs[i]; this.getConnectionPos(true, i, link_pos); @@ -2681,11 +3222,13 @@ 20, 10 ) - ) + ) { return { input: input, slot: i, link_pos: link_pos }; + } } + } - if (this.outputs) + if (this.outputs) { for (var i = 0, l = this.outputs.length; i < l; ++i) { var output = this.outputs[i]; this.getConnectionPos(false, i, link_pos); @@ -2698,9 +3241,11 @@ 20, 10 ) - ) + ) { return { output: output, slot: i, link_pos: link_pos }; + } } + } return null; }; @@ -2712,9 +3257,14 @@ * @return {number} the slot (-1 if not found) */ LGraphNode.prototype.findInputSlot = function(name) { - if (!this.inputs) return -1; - for (var i = 0, l = this.inputs.length; i < l; ++i) - if (name == this.inputs[i].name) return i; + if (!this.inputs) { + return -1; + } + for (var i = 0, l = this.inputs.length; i < l; ++i) { + if (name == this.inputs[i].name) { + return i; + } + } return -1; }; @@ -2725,9 +3275,14 @@ * @return {number} the slot (-1 if not found) */ LGraphNode.prototype.findOutputSlot = function(name) { - if (!this.outputs) return -1; - for (var i = 0, l = this.outputs.length; i < l; ++i) - if (name == this.outputs[i].name) return i; + if (!this.outputs) { + return -1; + } + for (var i = 0, l = this.outputs.length; i < l; ++i) { + if (name == this.outputs[i].name) { + return i; + } + } return -1; }; @@ -2754,31 +3309,39 @@ if (slot.constructor === String) { slot = this.findOutputSlot(slot); if (slot == -1) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log("Connect: Error, no slot of name " + slot); + } return null; } } else if (!this.outputs || slot >= this.outputs.length) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log("Connect: Error, slot number not found"); + } return null; } - if (target_node && target_node.constructor === Number) + if (target_node && target_node.constructor === Number) { target_node = this.graph.getNodeById(target_node); - if (!target_node) throw "target node is null"; + } + if (!target_node) { + throw "target node is null"; + } //avoid loopback - if (target_node == this) return null; + if (target_node == this) { + return null; + } //you can specify the slot by name if (target_slot.constructor === String) { target_slot = target_node.findInputSlot(target_slot); if (target_slot == -1) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log( "Connect: Error, no slot of name " + target_slot ); + } return null; } } else if (target_slot === LiteGraph.EVENT) { @@ -2794,14 +3357,16 @@ !target_node.inputs || target_slot >= target_node.inputs.length ) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log("Connect: Error, slot number not found"); + } return null; } //if there is something already plugged there, disconnect - if (target_node.inputs[target_slot].link != null) + if (target_node.inputs[target_slot].link != null) { target_node.disconnectInput(target_slot); + } //why here?? //this.setDirtyCanvas(false,true); @@ -2810,12 +3375,14 @@ var output = this.outputs[slot]; //allows nodes to block connection - if (target_node.onConnectInput) + if (target_node.onConnectInput) { if ( target_node.onConnectInput(target_slot, output.type, output) === false - ) + ) { return null; + } + } var input = target_node.inputs[target_slot]; var link_info = null; @@ -2834,20 +3401,25 @@ this.graph.links[link_info.id] = link_info; //connect in output - if (output.links == null) output.links = []; + if (output.links == null) { + output.links = []; + } output.links.push(link_info.id); //connect in input target_node.inputs[target_slot].link = link_info.id; - if (this.graph) this.graph._version++; - if (this.onConnectionsChange) + if (this.graph) { + this.graph._version++; + } + if (this.onConnectionsChange) { this.onConnectionsChange( LiteGraph.OUTPUT, slot, true, link_info, output - ); //link_info has been created now, so its updated - if (target_node.onConnectionsChange) + ); + } //link_info has been created now, so its updated + if (target_node.onConnectionsChange) { target_node.onConnectionsChange( LiteGraph.INPUT, target_slot, @@ -2855,6 +3427,7 @@ link_info, input ); + } if (this.graph && this.graph.onNodeConnectionChange) { this.graph.onNodeConnectionChange( LiteGraph.INPUT, @@ -2890,25 +3463,32 @@ if (slot.constructor === String) { slot = this.findOutputSlot(slot); if (slot == -1) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log("Connect: Error, no slot of name " + slot); + } return false; } } else if (!this.outputs || slot >= this.outputs.length) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log("Connect: Error, slot number not found"); + } return false; } //get output slot var output = this.outputs[slot]; - if (!output || !output.links || output.links.length == 0) return false; + if (!output || !output.links || output.links.length == 0) { + return false; + } //one of the output links in this slot if (target_node) { - if (target_node.constructor === Number) + if (target_node.constructor === Number) { target_node = this.graph.getNodeById(target_node); - if (!target_node) throw "Target Node not found"; + } + if (!target_node) { + throw "Target Node not found"; + } for (var i = 0, l = output.links.length; i < l; i++) { var link_id = output.links[i]; @@ -2920,16 +3500,19 @@ var input = target_node.inputs[link_info.target_slot]; input.link = null; //remove there delete this.graph.links[link_id]; //remove the link from the links pool - if (this.graph) this.graph._version++; - if (target_node.onConnectionsChange) + if (this.graph) { + this.graph._version++; + } + if (target_node.onConnectionsChange) { target_node.onConnectionsChange( LiteGraph.INPUT, link_info.target_slot, false, link_info, input - ); //link_info hasn't been modified so its ok - if (this.onConnectionsChange) + ); + } //link_info hasn't been modified so its ok + if (this.onConnectionsChange) { this.onConnectionsChange( LiteGraph.OUTPUT, slot, @@ -2937,12 +3520,14 @@ link_info, output ); - if (this.graph && this.graph.onNodeConnectionChange) + } + if (this.graph && this.graph.onNodeConnectionChange) { this.graph.onNodeConnectionChange( LiteGraph.OUTPUT, this, slot ); + } if (this.graph && this.graph.onNodeConnectionChange) { this.graph.onNodeConnectionChange( LiteGraph.OUTPUT, @@ -2963,33 +3548,38 @@ for (var i = 0, l = output.links.length; i < l; i++) { var link_id = output.links[i]; var link_info = this.graph.links[link_id]; - if (!link_info) + if (!link_info) { //bug: it happens sometimes continue; + } var target_node = this.graph.getNodeById(link_info.target_id); var input = null; - if (this.graph) this.graph._version++; + if (this.graph) { + this.graph._version++; + } if (target_node) { input = target_node.inputs[link_info.target_slot]; input.link = null; //remove other side link - if (target_node.onConnectionsChange) + if (target_node.onConnectionsChange) { target_node.onConnectionsChange( LiteGraph.INPUT, link_info.target_slot, false, link_info, input - ); //link_info hasn't been modified so its ok - if (this.graph && this.graph.onNodeConnectionChange) + ); + } //link_info hasn't been modified so its ok + if (this.graph && this.graph.onNodeConnectionChange) { this.graph.onNodeConnectionChange( LiteGraph.INPUT, target_node, link_info.target_slot ); + } } delete this.graph.links[link_id]; //remove the link from the links pool - if (this.onConnectionsChange) + if (this.onConnectionsChange) { this.onConnectionsChange( LiteGraph.OUTPUT, slot, @@ -2997,6 +3587,7 @@ link_info, output ); + } if (this.graph && this.graph.onNodeConnectionChange) { this.graph.onNodeConnectionChange( LiteGraph.OUTPUT, @@ -3029,18 +3620,22 @@ if (slot.constructor === String) { slot = this.findInputSlot(slot); if (slot == -1) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log("Connect: Error, no slot of name " + slot); + } return false; } } else if (!this.inputs || slot >= this.inputs.length) { - if (LiteGraph.debug) + if (LiteGraph.debug) { console.log("Connect: Error, slot number not found"); + } return false; } var input = this.inputs[slot]; - if (!input) return false; + if (!input) { + return false; + } var link_id = this.inputs[slot].link; this.inputs[slot].link = null; @@ -3049,11 +3644,14 @@ var link_info = this.graph.links[link_id]; if (link_info) { var target_node = this.graph.getNodeById(link_info.origin_id); - if (!target_node) return false; + if (!target_node) { + return false; + } var output = target_node.outputs[link_info.origin_slot]; - if (!output || !output.links || output.links.length == 0) + if (!output || !output.links || output.links.length == 0) { return false; + } //search in the inputs list for this link for (var i = 0, l = output.links.length; i < l; i++) { @@ -3064,8 +3662,10 @@ } delete this.graph.links[link_id]; //remove from the pool - if (this.graph) this.graph._version++; - if (this.onConnectionsChange) + if (this.graph) { + this.graph._version++; + } + if (this.onConnectionsChange) { this.onConnectionsChange( LiteGraph.INPUT, slot, @@ -3073,7 +3673,8 @@ link_info, input ); - if (target_node.onConnectionsChange) + } + if (target_node.onConnectionsChange) { target_node.onConnectionsChange( LiteGraph.OUTPUT, i, @@ -3081,6 +3682,7 @@ link_info, output ); + } if (this.graph && this.graph.onNodeConnectionChange) { this.graph.onNodeConnectionChange( LiteGraph.OUTPUT, @@ -3111,8 +3713,12 @@ ) { out = out || new Float32Array(2); var num_slots = 0; - if (is_input && this.inputs) num_slots = this.inputs.length; - if (!is_input && this.outputs) num_slots = this.outputs.length; + if (is_input && this.inputs) { + num_slots = this.inputs.length; + } + if (!is_input && this.outputs) { + num_slots = this.outputs.length; + } var offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5; @@ -3120,12 +3726,17 @@ var w = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH; if (this.horizontal) { out[0] = this.pos[0] + w * 0.5; - if (is_input) + if (is_input) { out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT; - else out[1] = this.pos[1]; + } else { + out[1] = this.pos[1]; + } } else { - if (is_input) out[0] = this.pos[0]; - else out[0] = this.pos[0] + w; + if (is_input) { + out[0] = this.pos[0]; + } else { + out[0] = this.pos[0] + w; + } out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5; } return out; @@ -3161,14 +3772,20 @@ if (this.horizontal) { out[0] = this.pos[0] + (slot_number + 0.5) * (this.size[0] / num_slots); - if (is_input) out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT; - else out[1] = this.pos[1] + this.size[1]; + if (is_input) { + out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT; + } else { + out[1] = this.pos[1] + this.size[1]; + } return out; } //default vertical slots - if (is_input) out[0] = this.pos[0] + offset; - else out[0] = this.pos[0] + this.size[0] + 1 - offset; + if (is_input) { + out[0] = this.pos[0] + offset; + } else { + out[0] = this.pos[0] + this.size[0] + 1 - offset; + } out[1] = this.pos[1] + (slot_number + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + @@ -3188,9 +3805,13 @@ /* Console output */ LGraphNode.prototype.trace = function(msg) { - if (!this.console) this.console = []; + if (!this.console) { + this.console = []; + } this.console.push(msg); - if (this.console.length > LGraphNode.MAX_CONSOLE) this.console.shift(); + if (this.console.length > LGraphNode.MAX_CONSOLE) { + this.console.shift(); + } this.graph.onNodeTrace(this, msg); }; @@ -3200,7 +3821,9 @@ dirty_foreground, dirty_background ) { - if (!this.graph) return; + if (!this.graph) { + return; + } this.graph.sendActionToCanvas("setDirty", [ dirty_foreground, dirty_background @@ -3261,14 +3884,18 @@ LGraphNode.prototype.executeAction = function(action) /* Allows to get onMouseMove and onMouseUp events even if the mouse is out of focus */ LGraphNode.prototype.captureInput = function(v) { - if (!this.graph || !this.graph.list_of_graphcanvas) return; + if (!this.graph || !this.graph.list_of_graphcanvas) { + return; + } var list = this.graph.list_of_graphcanvas; for (var i = 0; i < list.length; ++i) { var c = list[i]; //releasing somebody elses capture?! - if (!v && c.node_capturing_input != this) continue; + if (!v && c.node_capturing_input != this) { + continue; + } //change c.node_capturing_input = v ? this : null; @@ -3281,9 +3908,14 @@ LGraphNode.prototype.executeAction = function(action) **/ LGraphNode.prototype.collapse = function(force) { this.graph._version++; - if (this.constructor.collapsable === false && !force) return; - if (!this.flags.collapsed) this.flags.collapsed = true; - else this.flags.collapsed = false; + if (this.constructor.collapsable === false && !force) { + return; + } + if (!this.flags.collapsed) { + this.flags.collapsed = true; + } else { + this.flags.collapsed = false; + } this.setDirtyCanvas(true, true); }; @@ -3294,8 +3926,11 @@ LGraphNode.prototype.executeAction = function(action) LGraphNode.prototype.pin = function(v) { this.graph._version++; - if (v === undefined) this.flags.pinned = !this.flags.pinned; - else this.flags.pinned = v; + if (v === undefined) { + this.flags.pinned = !this.flags.pinned; + } else { + this.flags.pinned = v; + } }; LGraphNode.prototype.localToScreen = function(x, y, graphcanvas) { @@ -3325,7 +3960,9 @@ LGraphNode.prototype.executeAction = function(action) Object.defineProperty(this, "pos", { set: function(v) { - if (!v || v.length < 2) return; + if (!v || v.length < 2) { + return; + } this._pos[0] = v[0]; this._pos[1] = v[1]; }, @@ -3337,7 +3974,9 @@ LGraphNode.prototype.executeAction = function(action) Object.defineProperty(this, "size", { set: function(v) { - if (!v || v.length < 2) return; + if (!v || v.length < 2) { + return; + } this._size[0] = Math.max(140, v[0]); this._size[1] = Math.max(80, v[1]); }, @@ -3373,7 +4012,9 @@ LGraphNode.prototype.executeAction = function(action) LGraphGroup.prototype.move = function(deltax, deltay, ignore_nodes) { this._pos[0] += deltax; this._pos[1] += deltay; - if (ignore_nodes) return; + if (ignore_nodes) { + return; + } for (var i = 0; i < this._nodes.length; ++i) { var node = this._nodes[i]; node.pos[0] += deltax; @@ -3389,7 +4030,9 @@ LGraphNode.prototype.executeAction = function(action) for (var i = 0; i < nodes.length; ++i) { var node = nodes[i]; node.getBounding(node_bounding); - if (!overlapBounding(this._bounding, node_bounding)) continue; //out of the visible area + if (!overlapBounding(this._bounding, node_bounding)) { + continue; + } //out of the visible area this._nodes.push(node); } }; @@ -3413,7 +4056,9 @@ LGraphNode.prototype.executeAction = function(action) if (element) { this.element = element; - if (!skip_events) this.bindEvents(element); + if (!skip_events) { + this.bindEvents(element); + } } } @@ -3453,7 +4098,9 @@ LGraphNode.prototype.executeAction = function(action) }; DragAndScale.prototype.onMouse = function(e) { - if (!this.enabled) return; + if (!this.enabled) { + return; + } var canvas = this.element; var rect = canvas.getBoundingClientRect(); @@ -3464,7 +4111,9 @@ LGraphNode.prototype.executeAction = function(action) e.dragging = this.dragging; var ignore = false; - if (this.onmouse) ignore = this.onmouse(e); + if (this.onmouse) { + ignore = this.onmouse(e); + } if (e.type == "mousedown") { this.dragging = true; @@ -3484,7 +4133,9 @@ LGraphNode.prototype.executeAction = function(action) if (!ignore) { var deltax = x - this.last_mouse[0]; var deltay = y - this.last_mouse[1]; - if (this.dragging) this.mouseDrag(deltax, deltay); + if (this.dragging) { + this.mouseDrag(deltax, deltay); + } } } else if (e.type == "mouseup") { this.dragging = false; @@ -3503,10 +4154,12 @@ LGraphNode.prototype.executeAction = function(action) e.type == "DOMMouseScroll" ) { e.eventType = "mousewheel"; - if (e.type == "wheel") e.wheel = -e.deltaY; - else + if (e.type == "wheel") { + e.wheel = -e.deltaY; + } else { e.wheel = e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60; + } //from stack overflow e.delta = e.wheelDelta @@ -3549,19 +4202,30 @@ LGraphNode.prototype.executeAction = function(action) this.offset[0] += x / this.scale; this.offset[1] += y / this.scale; - if (this.onredraw) this.onredraw(this); + if (this.onredraw) { + this.onredraw(this); + } }; DragAndScale.prototype.changeScale = function(value, zooming_center) { - if (value < this.min_scale) value = this.min_scale; - else if (value > this.max_scale) value = this.max_scale; + if (value < this.min_scale) { + value = this.min_scale; + } else if (value > this.max_scale) { + value = this.max_scale; + } - if (value == this.scale) return; + if (value == this.scale) { + return; + } - if (!this.element) return; + if (!this.element) { + return; + } var rect = this.element.getBoundingClientRect(); - if (!rect) return; + if (!rect) { + return; + } zooming_center = zooming_center || [ rect.width * 0.5, @@ -3569,7 +4233,9 @@ LGraphNode.prototype.executeAction = function(action) ]; var center = this.convertCanvasToOffset(zooming_center); this.scale = value; - if (Math.abs(this.scale - 1) < 0.01) this.scale = 1; + if (Math.abs(this.scale - 1) < 0.01) { + this.scale = 1; + } var new_center = this.convertCanvasToOffset(zooming_center); var delta_offset = [ @@ -3580,7 +4246,9 @@ LGraphNode.prototype.executeAction = function(action) this.offset[0] += delta_offset[0]; this.offset[1] += delta_offset[1]; - if (this.onredraw) this.onredraw(this); + if (this.onredraw) { + this.onredraw(this); + } }; DragAndScale.prototype.changeDeltaScale = function(value, zooming_center) { @@ -3615,8 +4283,9 @@ LGraphNode.prototype.executeAction = function(action) this.background_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII="; - if (canvas && canvas.constructor === String) + if (canvas && canvas.constructor === String) { canvas = document.querySelector(canvas); + } this.ds = new DragAndScale(); this.zoom_modify_alpha = true; //otherwise it generates ugly patterns when scaling down too much @@ -3688,12 +4357,16 @@ LGraphNode.prototype.executeAction = function(action) this.visible_links = []; //link canvas and graph - if (graph) graph.attachCanvas(this); + if (graph) { + graph.attachCanvas(this); + } this.setCanvas(canvas); this.clear(); - if (!options.skip_render) this.startRendering(); + if (!options.skip_render) { + this.startRendering(); + } this.autoresize = options.autoresize; } @@ -3744,7 +4417,9 @@ LGraphNode.prototype.executeAction = function(action) this.last_mouseclick = 0; this.visible_area.set([0, 0, 0, 0]); - if (this.onClear) this.onClear(); + if (this.onClear) { + this.onClear(); + } }; /** @@ -3754,9 +4429,13 @@ LGraphNode.prototype.executeAction = function(action) * @param {LGraph} graph */ LGraphCanvas.prototype.setGraph = function(graph, skip_clear) { - if (this.graph == graph) return; + if (this.graph == graph) { + return; + } - if (!skip_clear) this.clear(); + if (!skip_clear) { + this.clear(); + } if (!graph && this.graph) { this.graph.detachCanvas(this); @@ -3781,14 +4460,20 @@ LGraphNode.prototype.executeAction = function(action) * @param {LGraph} graph */ LGraphCanvas.prototype.openSubgraph = function(graph) { - if (!graph) throw "graph cannot be null"; + if (!graph) { + throw "graph cannot be null"; + } - if (this.graph == graph) throw "graph cannot be the same"; + if (this.graph == graph) { + throw "graph cannot be the same"; + } this.clear(); if (this.graph) { - if (!this._graph_stack) this._graph_stack = []; + if (!this._graph_stack) { + this._graph_stack = []; + } this._graph_stack.push(this.graph); } @@ -3803,7 +4488,9 @@ LGraphNode.prototype.executeAction = function(action) * @param {LGraph} assigns a graph */ LGraphCanvas.prototype.closeSubgraph = function() { - if (!this._graph_stack || this._graph_stack.length == 0) return; + if (!this._graph_stack || this._graph_stack.length == 0) { + return; + } var subgraph_node = this.graph._subgraph_node; var graph = this._graph_stack.pop(); this.selected_nodes = {}; @@ -3822,8 +4509,8 @@ LGraphNode.prototype.executeAction = function(action) * @return {LGraph} the active graph */ LGraphCanvas.prototype.getCurrentGraph = function() { - return this.graph; - } + return this.graph; + }; /** * assigns a canvas @@ -3837,22 +4524,29 @@ LGraphNode.prototype.executeAction = function(action) if (canvas) { if (canvas.constructor === String) { canvas = document.getElementById(canvas); - if (!canvas) + if (!canvas) { throw "Error creating LiteGraph canvas: Canvas not found"; + } } } - if (canvas === this.canvas) return; + if (canvas === this.canvas) { + return; + } if (!canvas && this.canvas) { //maybe detach events from old_canvas - if (!skip_events) this.unbindEvents(); + if (!skip_events) { + this.unbindEvents(); + } } this.canvas = canvas; this.ds.element = canvas; - if (!canvas) return; + if (!canvas) { + return; + } //this.canvas.tabindex = "1000"; canvas.className += " lgraphcanvas"; @@ -3868,18 +4562,20 @@ LGraphNode.prototype.executeAction = function(action) } if (canvas.getContext == null) { - if (canvas.localName != "canvas") + if (canvas.localName != "canvas") { throw "Element supplied for LGraphCanvas must be a element, you passed a " + canvas.localName; + } throw "This browser doesn't support Canvas"; } var ctx = (this.ctx = canvas.getContext("2d")); if (ctx == null) { - if (!canvas.webgl_enabled) + if (!canvas.webgl_enabled) { console.warn( "This canvas seems to be WebGL, enabling WebGL renderer" ); + } this.enableWebGL(); } @@ -3887,7 +4583,9 @@ LGraphNode.prototype.executeAction = function(action) this._mousemove_callback = this.processMouseMove.bind(this); this._mouseup_callback = this.processMouseUp.bind(this); - if (!skip_events) this.bindEvents(); + if (!skip_events) { + this.bindEvents(); + } }; //used in some events to capture them @@ -3997,9 +4695,13 @@ LGraphNode.prototype.executeAction = function(action) LGraphCanvas.getFileExtension = function(url) { var question = url.indexOf("?"); - if (question != -1) url = url.substr(0, question); + if (question != -1) { + url = url.substr(0, question); + } var point = url.lastIndexOf("."); - if (point == -1) return ""; + if (point == -1) { + return ""; + } return url.substr(point + 1).toLowerCase(); }; @@ -4009,10 +4711,12 @@ LGraphNode.prototype.executeAction = function(action) * @method enableWebGL **/ LGraphCanvas.prototype.enableWebGL = function() { - if (typeof GL === undefined) + if (typeof GL === undefined) { throw "litegl.js must be included to use a WebGL canvas"; - if (typeof enableWebGLCanvas === undefined) + } + if (typeof enableWebGLCanvas === undefined) { throw "webglCanvas.js must be included to use this feature"; + } this.gl = this.ctx = enableWebGLCanvas(this.canvas); this.ctx.webgl = true; @@ -4036,8 +4740,12 @@ LGraphNode.prototype.executeAction = function(action) * @param {bool} bgcanvas if the background canvas is dirty (the one containing the wires) */ LGraphCanvas.prototype.setDirty = function(fgcanvas, bgcanvas) { - if (fgcanvas) this.dirty_canvas = true; - if (bgcanvas) this.dirty_bgcanvas = true; + if (fgcanvas) { + this.dirty_canvas = true; + } + if (bgcanvas) { + this.dirty_bgcanvas = true; + } }; /** @@ -4047,7 +4755,9 @@ LGraphNode.prototype.executeAction = function(action) * @return {window} returns the window where the canvas is attached (the DOM root node) */ LGraphCanvas.prototype.getCanvasWindow = function() { - if (!this.canvas) return window; + if (!this.canvas) { + return window; + } var doc = this.canvas.ownerDocument; return doc.defaultView || doc.parentWindow; }; @@ -4058,17 +4768,22 @@ LGraphNode.prototype.executeAction = function(action) * @method startRendering */ LGraphCanvas.prototype.startRendering = function() { - if (this.is_rendering) return; //already rendering + if (this.is_rendering) { + return; + } //already rendering this.is_rendering = true; renderFrame.call(this); function renderFrame() { - if (!this.pause_rendering) this.draw(); + if (!this.pause_rendering) { + this.draw(); + } var window = this.getCanvasWindow(); - if (this.is_rendering) + if (this.is_rendering) { window.requestAnimationFrame(renderFrame.bind(this)); + } } }; @@ -4091,7 +4806,9 @@ LGraphNode.prototype.executeAction = function(action) /* LiteGraphCanvas input */ LGraphCanvas.prototype.processMouseDown = function(e) { - if (!this.graph) return; + if (!this.graph) { + return; + } this.adjustMouseEvent(e); @@ -4131,7 +4848,9 @@ LGraphNode.prototype.executeAction = function(action) LiteGraph.closeAllContextMenus(ref_window); if (this.onMouse) { - if (this.onMouse(e) == true) return; + if (this.onMouse(e) == true) { + return; + } } if (e.which == 1) { @@ -4150,8 +4869,9 @@ LGraphNode.prototype.executeAction = function(action) //when clicked on top of a node //and it is not interactive if (node && this.allow_interaction && !skip_action) { - if (!this.live_mode && !node.flags.pinned) - this.bringToFront(node); //if it wasn't selected? + if (!this.live_mode && !node.flags.pinned) { + this.bringToFront(node); + } //if it wasn't selected? //not dragging mouse to connect two slots if ( @@ -4177,7 +4897,7 @@ LGraphNode.prototype.executeAction = function(action) skip_action = true; } else { //search for outputs - if (node.outputs) + if (node.outputs) { for ( var i = 0, l = node.outputs.length; i < l; @@ -4203,23 +4923,28 @@ LGraphNode.prototype.executeAction = function(action) ); this.connecting_slot = i; - if (e.shiftKey) node.disconnectOutput(i); + if (e.shiftKey) { + node.disconnectOutput(i); + } if (is_double_click) { - if (node.onOutputDblClick) + if (node.onOutputDblClick) { node.onOutputDblClick(i, e); + } } else { - if (node.onOutputClick) + if (node.onOutputClick) { node.onOutputClick(i, e); + } } skip_action = true; break; } } + } //search for inputs - if (node.inputs) + if (node.inputs) { for ( var i = 0, l = node.inputs.length; i < l; @@ -4238,11 +4963,13 @@ LGraphNode.prototype.executeAction = function(action) ) ) { if (is_double_click) { - if (node.onInputDblClick) + if (node.onInputDblClick) { node.onInputDblClick(i, e); + } } else { - if (node.onInputClick) + if (node.onInputClick) { node.onInputClick(i, e); + } } if (input.link !== null) { @@ -4274,6 +5001,7 @@ LGraphNode.prototype.executeAction = function(action) } } } + } } //not resizing } @@ -4304,7 +5032,7 @@ LGraphNode.prototype.executeAction = function(action) //double clicking if (is_double_click && this.selected_nodes[node.id]) { //double click node - if (node.onDblClick) + if (node.onDblClick) { node.onDblClick( e, [ @@ -4313,6 +5041,7 @@ LGraphNode.prototype.executeAction = function(action) ], this ); + } this.processNodeDblClicked(node); block_drag_node = true; } @@ -4333,9 +5062,12 @@ LGraphNode.prototype.executeAction = function(action) } if (!block_drag_node) { - if (this.allow_dragnodes) this.node_dragged = node; - if (!this.selected_nodes[node.id]) + if (this.allow_dragnodes) { + this.node_dragged = node; + } + if (!this.selected_nodes[node.id]) { this.processNodeSelected(node, e); + } } this.dirty_canvas = true; @@ -4352,8 +5084,9 @@ LGraphNode.prototype.executeAction = function(action) e.canvasX > center[0] + 4 || e.canvasY < center[1] - 4 || e.canvasY > center[1] + 4 - ) + ) { continue; + } //link clicked this.showLinkMenu(link, e); break; @@ -4365,7 +5098,9 @@ LGraphNode.prototype.executeAction = function(action) ); this.selected_group_resizing = false; if (this.selected_group) { - if (e.ctrlKey) this.dragging_rectangle = null; + if (e.ctrlKey) { + this.dragging_rectangle = null; + } var dist = distance( [e.canvasX, e.canvasY], @@ -4376,12 +5111,16 @@ LGraphNode.prototype.executeAction = function(action) this.selected_group.size[1] ] ); - if (dist * this.ds.scale < 10) + if (dist * this.ds.scale < 10) { this.selected_group_resizing = true; - else this.selected_group.recomputeInsideNodes(); + } else { + this.selected_group.recomputeInsideNodes(); + } } - if (is_double_click) this.showSearchBox(e); + if (is_double_click) { + this.showSearchBox(e); + } clicking_canvas_bg = true; } @@ -4419,11 +5158,14 @@ LGraphNode.prototype.executeAction = function(action) "input" && ref_window.document.activeElement.nodeName.toLowerCase() != "textarea") - ) + ) { e.preventDefault(); + } e.stopPropagation(); - if (this.onMouseDown) this.onMouseDown(e); + if (this.onMouseDown) { + this.onMouseDown(e); + } return false; }; @@ -4433,9 +5175,13 @@ LGraphNode.prototype.executeAction = function(action) * @method processMouseMove **/ LGraphCanvas.prototype.processMouseMove = function(e) { - if (this.autoresize) this.resize(); + if (this.autoresize) { + this.resize(); + } - if (!this.graph) return; + if (!this.graph) { + return; + } LGraphCanvas.active_canvas = this; this.adjustMouseEvent(e); @@ -4465,16 +5211,18 @@ LGraphNode.prototype.executeAction = function(action) this.dirty_canvas = true; } else if (this.selected_group) { //moving/resizing a group - if (this.selected_group_resizing) + if (this.selected_group_resizing) { this.selected_group.size = [ e.canvasX - this.selected_group.pos[0], e.canvasY - this.selected_group.pos[1] ]; - else { + } else { var deltax = delta[0] / this.ds.scale; var deltay = delta[1] / this.ds.scale; this.selected_group.move(deltax, deltay, e.ctrlKey); - if (this.selected_group._nodes.length) this.dirty_canvas = true; + if (this.selected_group._nodes.length) { + this.dirty_canvas = true; + } } this.dirty_bgcanvas = true; } else if (this.dragging_canvas) { @@ -4483,7 +5231,9 @@ LGraphNode.prototype.executeAction = function(action) this.dirty_canvas = true; this.dirty_bgcanvas = true; } else if (this.allow_interaction) { - if (this.connecting_node) this.dirty_canvas = true; + if (this.connecting_node) { + this.dirty_canvas = true; + } //get node over var node = this.graph.getNodeOnPos( @@ -4500,8 +5250,9 @@ LGraphNode.prototype.executeAction = function(action) ) { //mouse leave this.graph._nodes[i].mouseOver = false; - if (this.node_over && this.node_over.onMouseLeave) + if (this.node_over && this.node_over.onMouseLeave) { this.node_over.onMouseLeave(e); + } this.node_over = null; this.dirty_canvas = true; } @@ -4516,16 +5267,19 @@ LGraphNode.prototype.executeAction = function(action) this.node_over = node; this.dirty_canvas = true; - if (node.onMouseEnter) node.onMouseEnter(e); + if (node.onMouseEnter) { + node.onMouseEnter(e); + } } //in case the node wants to do something - if (node.onMouseMove) + if (node.onMouseMove) { node.onMouseMove( e, [e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this ); + } //if dragging a link if (this.connecting_node) { @@ -4549,9 +5303,12 @@ LGraphNode.prototype.executeAction = function(action) this.connecting_output.type, slot_type ) - ) + ) { this._highlight_input = pos; - } else this._highlight_input = null; + } + } else { + this._highlight_input = null; + } } } @@ -4566,11 +5323,15 @@ LGraphNode.prototype.executeAction = function(action) 5, 5 ) - ) + ) { this.canvas.style.cursor = "se-resize"; - else this.canvas.style.cursor = "crosshair"; + } else { + this.canvas.style.cursor = "crosshair"; + } } - } else if (this.canvas) this.canvas.style.cursor = ""; + } else if (this.canvas) { + this.canvas.style.cursor = ""; + } if ( this.node_capturing_input && @@ -4614,10 +5375,12 @@ LGraphNode.prototype.executeAction = function(action) : 0) * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 4; - if (this.resizing_node.size[1] < min_height) + if (this.resizing_node.size[1] < min_height) { this.resizing_node.size[1] = min_height; - if (this.resizing_node.size[0] < LiteGraph.NODE_MIN_WIDTH) + } + if (this.resizing_node.size[0] < LiteGraph.NODE_MIN_WIDTH) { this.resizing_node.size[0] = LiteGraph.NODE_MIN_WIDTH; + } this.canvas.style.cursor = "se-resize"; this.dirty_canvas = true; @@ -4634,7 +5397,9 @@ LGraphNode.prototype.executeAction = function(action) * @method processMouseUp **/ LGraphCanvas.prototype.processMouseUp = function(e) { - if (!this.graph) return; + if (!this.graph) { + return; + } var window = this.getCanvasWindow(); var document = window.document; @@ -4676,7 +5441,9 @@ LGraphNode.prototype.executeAction = function(action) this.selected_group.pos[1] = Math.round( this.selected_group.pos[1] ); - if (this.selected_group._nodes.length) this.dirty_canvas = true; + if (this.selected_group._nodes.length) { + this.dirty_canvas = true; + } this.selected_group = null; } this.selected_group_resizing = false; @@ -4712,11 +5479,14 @@ LGraphNode.prototype.executeAction = function(action) this.dragging_rectangle, node_bounding ) - ) - continue; //out of the visible area + ) { + continue; + } //out of the visible area to_select.push(node); } - if (to_select.length) this.selectNodes(to_select); + if (to_select.length) { + this.selectNodes(to_select); + } } this.dragging_rectangle = null; } else if (this.connecting_node) { @@ -4758,24 +5528,27 @@ LGraphNode.prototype.executeAction = function(action) //not on top of an input var input = node.getInputInfo(0); //auto connect - if (this.connecting_output.type == LiteGraph.EVENT) + if ( + this.connecting_output.type == LiteGraph.EVENT + ) { this.connecting_node.connect( this.connecting_slot, node, LiteGraph.EVENT ); - else if ( + } else if ( input && !input.link && LiteGraph.isValidConnection( input.type && this.connecting_output.type ) - ) + ) { this.connecting_node.connect( this.connecting_slot, node, 0 ); + } } } } @@ -4803,15 +5576,17 @@ LGraphNode.prototype.executeAction = function(action) LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT ) - ) + ) { node.collapse(); + } this.dirty_canvas = true; this.dirty_bgcanvas = true; this.node_dragged.pos[0] = Math.round(this.node_dragged.pos[0]); this.node_dragged.pos[1] = Math.round(this.node_dragged.pos[1]); - if (this.graph.config.align_to_grid) + if (this.graph.config.align_to_grid) { this.node_dragged.alignToGrid(); + } this.node_dragged = null; } //no node being dragged else { @@ -4822,12 +5597,14 @@ LGraphNode.prototype.executeAction = function(action) this.visible_nodes ); - if (!node && e.click_time < 300) this.deselectAllNodes(); + if (!node && e.click_time < 300) { + this.deselectAllNodes(); + } this.dirty_canvas = true; this.dragging_canvas = false; - if (this.node_over && this.node_over.onMouseUp) + if (this.node_over && this.node_over.onMouseUp) { this.node_over.onMouseUp( e, [ @@ -4836,14 +5613,16 @@ LGraphNode.prototype.executeAction = function(action) ], this ); + } if ( this.node_capturing_input && this.node_capturing_input.onMouseUp - ) + ) { this.node_capturing_input.onMouseUp(e, [ e.canvasX - this.node_capturing_input.pos[0], e.canvasY - this.node_capturing_input.pos[1] ]); + } } } else if (e.which == 2) { //middle button @@ -4874,7 +5653,9 @@ LGraphNode.prototype.executeAction = function(action) * @method processMouseWheel **/ LGraphCanvas.prototype.processMouseWheel = function(e) { - if (!this.graph || !this.allow_dragcanvas) return; + if (!this.graph || !this.allow_dragcanvas) { + return; + } var delta = e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60; @@ -4882,8 +5663,11 @@ LGraphNode.prototype.executeAction = function(action) var scale = this.ds.scale; - if (delta > 0) scale *= 1.1; - else if (delta < 0) scale *= 1 / 1.1; + if (delta > 0) { + scale *= 1.1; + } else if (delta < 0) { + scale *= 1 / 1.1; + } //this.setZoom( scale, [ e.localX, e.localY ] ); this.ds.changeScale(scale, [e.localX, e.localY]); @@ -4909,8 +5693,9 @@ LGraphNode.prototype.executeAction = function(action) title_height - 4, title_height - 4 ) - ) + ) { return true; + } return false; }; @@ -4924,12 +5709,12 @@ LGraphNode.prototype.executeAction = function(action) canvasy, slot_pos ) { - if (node.inputs) + if (node.inputs) { for (var i = 0, l = node.inputs.length; i < l; ++i) { var input = node.inputs[i]; var link_pos = node.getConnectionPos(true, i); var is_inside = false; - if (node.horizontal) + if (node.horizontal) { is_inside = isInsideRectangle( canvasx, canvasy, @@ -4938,7 +5723,7 @@ LGraphNode.prototype.executeAction = function(action) 10, 20 ); - else + } else { is_inside = isInsideRectangle( canvasx, canvasy, @@ -4947,6 +5732,7 @@ LGraphNode.prototype.executeAction = function(action) 40, 10 ); + } if (is_inside) { if (slot_pos) { slot_pos[0] = link_pos[0]; @@ -4955,6 +5741,7 @@ LGraphNode.prototype.executeAction = function(action) return i; } } + } return -1; }; @@ -4963,12 +5750,16 @@ LGraphNode.prototype.executeAction = function(action) * @method processKey **/ LGraphCanvas.prototype.processKey = function(e) { - if (!this.graph) return; + if (!this.graph) { + return; + } var block_default = false; //console.log(e); //debug - if (e.target.localName == "input") return; + if (e.target.localName == "input") { + return; + } if (e.type == "keydown") { if (e.keyCode == 32) { @@ -5011,17 +5802,25 @@ LGraphNode.prototype.executeAction = function(action) //... //TODO - if (this.selected_nodes) - for (var i in this.selected_nodes) - if (this.selected_nodes[i].onKeyDown) + if (this.selected_nodes) { + for (var i in this.selected_nodes) { + if (this.selected_nodes[i].onKeyDown) { this.selected_nodes[i].onKeyDown(e); + } + } + } } else if (e.type == "keyup") { - if (e.keyCode == 32) this.dragging_canvas = false; + if (e.keyCode == 32) { + this.dragging_canvas = false; + } - if (this.selected_nodes) - for (var i in this.selected_nodes) - if (this.selected_nodes[i].onKeyUp) + if (this.selected_nodes) { + for (var i in this.selected_nodes) { + if (this.selected_nodes[i].onKeyUp) { this.selected_nodes[i].onKeyUp(e); + } + } + } } this.graph.change(); @@ -5050,18 +5849,23 @@ LGraphNode.prototype.executeAction = function(action) for (var i = 0; i < selected_nodes_array.length; ++i) { var node = selected_nodes_array[i]; clipboard_info.nodes.push(node.clone().serialize()); - if (node.inputs && node.inputs.length) + if (node.inputs && node.inputs.length) { for (var j = 0; j < node.inputs.length; ++j) { var input = node.inputs[j]; - if (!input || input.link == null) continue; + if (!input || input.link == null) { + continue; + } var link_info = this.graph.links[input.link]; - if (!link_info) continue; + if (!link_info) { + continue; + } var target_node = this.graph.getNodeById( link_info.origin_id ); - if (!target_node || !this.selected_nodes[target_node.id]) + if (!target_node || !this.selected_nodes[target_node.id]) { //improve this by allowing connections to non-selected nodes - continue; //not selected + continue; + } //not selected clipboard_info.links.push([ target_node._relative_id, j, @@ -5069,6 +5873,7 @@ LGraphNode.prototype.executeAction = function(action) link_info.target_slot ]); } + } } localStorage.setItem( "litegrapheditor_clipboard", @@ -5078,7 +5883,9 @@ LGraphNode.prototype.executeAction = function(action) LGraphCanvas.prototype.pasteFromClipboard = function() { var data = localStorage.getItem("litegrapheditor_clipboard"); - if (!data) return; + if (!data) { + return; + } //create nodes var clipboard_info = JSON.parse(data); @@ -5119,8 +5926,12 @@ LGraphNode.prototype.executeAction = function(action) if (!node) { var r = null; - if (this.onDropItem) r = this.onDropItem(event); - if (!r) this.checkDropItem(e); + if (this.onDropItem) { + r = this.onDropItem(event); + } + if (!r) { + this.checkDropItem(e); + } return; } @@ -5133,7 +5944,9 @@ LGraphNode.prototype.executeAction = function(action) var ext = LGraphCanvas.getFileExtension(filename); //console.log(file); - if (node.onDropFile) node.onDropFile(file); + if (node.onDropFile) { + node.onDropFile(file); + } if (node.onDropData) { //prepare reader @@ -5146,20 +5959,27 @@ LGraphNode.prototype.executeAction = function(action) //read data var type = file.type.split("/")[0]; - if (type == "text" || type == "") + if (type == "text" || type == "") { reader.readAsText(file); - else if (type == "image") reader.readAsDataURL(file); - else reader.readAsArrayBuffer(file); + } else if (type == "image") { + reader.readAsDataURL(file); + } else { + reader.readAsArrayBuffer(file); + } } } } } if (node.onDropItem) { - if (node.onDropItem(event)) return true; + if (node.onDropItem(event)) { + return true; + } } - if (this.onDropItem) return this.onDropItem(event); + if (this.onDropItem) { + return this.onDropItem(event); + } return false; }; @@ -5174,27 +5994,37 @@ LGraphNode.prototype.executeAction = function(action) var node = LiteGraph.createNode(nodetype.type); node.pos = [e.canvasX, e.canvasY]; this.graph.add(node); - if (node.onDropFile) node.onDropFile(file); + if (node.onDropFile) { + node.onDropFile(file); + } } } }; LGraphCanvas.prototype.processNodeDblClicked = function(n) { - if (this.onShowNodePanel) this.onShowNodePanel(n); + if (this.onShowNodePanel) { + this.onShowNodePanel(n); + } - if (this.onNodeDblClicked) this.onNodeDblClicked(n); + if (this.onNodeDblClicked) { + this.onNodeDblClicked(n); + } this.setDirty(true); }; LGraphCanvas.prototype.processNodeSelected = function(node, e) { this.selectNode(node, e && e.shiftKey); - if (this.onNodeSelected) this.onNodeSelected(node); + if (this.onNodeSelected) { + this.onNodeSelected(node); + } }; LGraphCanvas.prototype.processNodeDeselected = function(node) { this.deselectNode(node); - if (this.onNodeDeselected) this.onNodeDeselected(node); + if (this.onNodeDeselected) { + this.onNodeDeselected(node); + } }; /** @@ -5205,8 +6035,11 @@ LGraphNode.prototype.executeAction = function(action) node, add_to_current_selection ) { - if (node == null) this.deselectAllNodes(); - else this.selectNodes([node], add_to_current_selection); + if (node == null) { + this.deselectAllNodes(); + } else { + this.selectNodes([node], add_to_current_selection); + } }; /** @@ -5217,27 +6050,38 @@ LGraphNode.prototype.executeAction = function(action) nodes, add_to_current_selection ) { - if (!add_to_current_selection) this.deselectAllNodes(); + if (!add_to_current_selection) { + this.deselectAllNodes(); + } nodes = nodes || this.graph._nodes; for (var i = 0; i < nodes.length; ++i) { var node = nodes[i]; - if (node.is_selected) continue; + if (node.is_selected) { + continue; + } - if (!node.is_selected && node.onSelected) node.onSelected(); + if (!node.is_selected && node.onSelected) { + node.onSelected(); + } node.is_selected = true; this.selected_nodes[node.id] = node; - if (node.inputs) - for (var j = 0; j < node.inputs.length; ++j) + if (node.inputs) { + for (var j = 0; j < node.inputs.length; ++j) { this.highlighted_links[node.inputs[j].link] = true; - if (node.outputs) + } + } + if (node.outputs) { for (var j = 0; j < node.outputs.length; ++j) { var out = node.outputs[j]; - if (out.links) - for (var k = 0; k < out.links.length; ++k) + if (out.links) { + for (var k = 0; k < out.links.length; ++k) { this.highlighted_links[out.links[k]] = true; + } + } } + } } this.setDirty(true); @@ -5248,21 +6092,30 @@ LGraphNode.prototype.executeAction = function(action) * @method deselectNode **/ LGraphCanvas.prototype.deselectNode = function(node) { - if (!node.is_selected) return; - if (node.onDeselected) node.onDeselected(); + if (!node.is_selected) { + return; + } + if (node.onDeselected) { + node.onDeselected(); + } node.is_selected = false; //remove highlighted - if (node.inputs) - for (var i = 0; i < node.inputs.length; ++i) + if (node.inputs) { + for (var i = 0; i < node.inputs.length; ++i) { delete this.highlighted_links[node.inputs[i].link]; - if (node.outputs) + } + } + if (node.outputs) { for (var i = 0; i < node.outputs.length; ++i) { var out = node.outputs[i]; - if (out.links) - for (var j = 0; j < out.links.length; ++j) + if (out.links) { + for (var j = 0; j < out.links.length; ++j) { delete this.highlighted_links[out.links[j]]; + } + } } + } }; /** @@ -5270,12 +6123,18 @@ LGraphNode.prototype.executeAction = function(action) * @method deselectAllNodes **/ LGraphCanvas.prototype.deselectAllNodes = function() { - if (!this.graph) return; + if (!this.graph) { + return; + } var nodes = this.graph._nodes; for (var i = 0, l = nodes.length; i < l; ++i) { var node = nodes[i]; - if (!node.is_selected) continue; - if (node.onDeselected) node.onDeselected(); + if (!node.is_selected) { + continue; + } + if (node.onDeselected) { + node.onDeselected(); + } node.is_selected = false; } this.selected_nodes = {}; @@ -5401,7 +6260,9 @@ LGraphNode.prototype.executeAction = function(action) **/ LGraphCanvas.prototype.bringToFront = function(node) { var i = this.graph._nodes.indexOf(node); - if (i == -1) return; + if (i == -1) { + return; + } this.graph._nodes.splice(i, 1); this.graph._nodes.push(node); @@ -5413,7 +6274,9 @@ LGraphNode.prototype.executeAction = function(action) **/ LGraphCanvas.prototype.sendToBack = function(node) { var i = this.graph._nodes.indexOf(node); - if (i == -1) return; + if (i == -1) { + return; + } this.graph._nodes.splice(i, 1); this.graph._nodes.unshift(node); @@ -5436,11 +6299,13 @@ LGraphNode.prototype.executeAction = function(action) var n = nodes[i]; //skip rendering nodes in live mode - if (this.live_mode && !n.onDrawBackground && !n.onDrawForeground) + if (this.live_mode && !n.onDrawBackground && !n.onDrawForeground) { continue; + } - if (!overlapBounding(this.visible_area, n.getBounding(temp))) - continue; //out of the visible area + if (!overlapBounding(this.visible_area, n.getBounding(temp))) { + continue; + } //out of the visible area visible_nodes.push(n); } @@ -5452,14 +6317,18 @@ LGraphNode.prototype.executeAction = function(action) * @method draw **/ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) { - if (!this.canvas) return; + if (!this.canvas) { + return; + } //fps counting var now = LiteGraph.getTime(); this.render_time = (now - this.last_draw_time) * 0.001; this.last_draw_time = now; - if (this.graph) this.ds.computeVisibleArea(); + if (this.graph) { + this.ds.computeVisibleArea(); + } if ( this.dirty_bgcanvas || @@ -5468,10 +6337,13 @@ LGraphNode.prototype.executeAction = function(action) (this.graph && this.graph._last_trigger_time && now - this.graph._last_trigger_time < 1000) - ) + ) { this.drawBackCanvas(); + } - if (this.dirty_canvas || force_canvas) this.drawFrontCanvas(); + if (this.dirty_canvas || force_canvas) { + this.drawFrontCanvas(); + } this.fps = this.render_time ? 1.0 / this.render_time : 0; this.frame += 1; @@ -5484,13 +6356,18 @@ LGraphNode.prototype.executeAction = function(action) LGraphCanvas.prototype.drawFrontCanvas = function() { this.dirty_canvas = false; - if (!this.ctx) this.ctx = this.bgcanvas.getContext("2d"); + if (!this.ctx) { + this.ctx = this.bgcanvas.getContext("2d"); + } var ctx = this.ctx; - if (!ctx) + if (!ctx) { //maybe is using webgl... return; + } - if (ctx.start2D) ctx.start2D(); + if (ctx.start2D) { + ctx.start2D(); + } var canvas = this.canvas; @@ -5513,18 +6390,26 @@ LGraphNode.prototype.executeAction = function(action) //clear //canvas.width = canvas.width; - if (this.clear_background) + if (this.clear_background) { ctx.clearRect(0, 0, canvas.width, canvas.height); + } //draw bg canvas - if (this.bgcanvas == this.canvas) this.drawBackCanvas(); - else ctx.drawImage(this.bgcanvas, 0, 0); + if (this.bgcanvas == this.canvas) { + this.drawBackCanvas(); + } else { + ctx.drawImage(this.bgcanvas, 0, 0); + } //rendering - if (this.onRender) this.onRender(canvas, ctx); + if (this.onRender) { + this.onRender(canvas, ctx); + } //info widget - if (this.show_info) this.renderInfo(ctx); + if (this.show_info) { + this.renderInfo(ctx); + } if (this.graph) { //apply transformations @@ -5554,11 +6439,16 @@ LGraphNode.prototype.executeAction = function(action) } //on top (debug) - if (this.render_execution_order) this.drawExecutionOrder(ctx); + if (this.render_execution_order) { + this.drawExecutionOrder(ctx); + } //connections ontop? - if (this.graph.config.links_ontop) - if (!this.live_mode) this.drawConnections(ctx); + if (this.graph.config.links_ontop) { + if (!this.live_mode) { + this.drawConnections(ctx); + } + } //current connection (the one being dragged by the mouse) if (this.connecting_pos != null) { @@ -5593,14 +6483,14 @@ LGraphNode.prototype.executeAction = function(action) if ( this.connecting_output.type === LiteGraph.EVENT || this.connecting_output.shape === LiteGraph.BOX_SHAPE - ) + ) { ctx.rect( this.connecting_pos[0] - 6 + 0.5, this.connecting_pos[1] - 5 + 0.5, 14, 10 ); - else + } else { ctx.arc( this.connecting_pos[0], this.connecting_pos[1], @@ -5608,6 +6498,7 @@ LGraphNode.prototype.executeAction = function(action) 0, Math.PI * 2 ); + } ctx.fill(); ctx.fillStyle = "#ffcc00"; @@ -5634,22 +6525,26 @@ LGraphNode.prototype.executeAction = function(action) ); } - if (this.onDrawForeground) + if (this.onDrawForeground) { this.onDrawForeground(ctx, this.visible_rect); + } ctx.restore(); } - if (this.onDrawOverlay) this.onDrawOverlay(ctx); + if (this.onDrawOverlay) { + this.onDrawOverlay(ctx); + } if (this.dirty_area) { ctx.restore(); //this.dirty_area = null; } - if (ctx.finish2D) + if (ctx.finish2D) { //this is a function I use in webgl renderer ctx.finish2D(); + } }; /** @@ -5683,7 +6578,9 @@ LGraphNode.prototype.executeAction = function(action) ); ctx.fillText("V: " + this.graph._version, 5, 13 * 4); ctx.fillText("FPS:" + this.fps.toFixed(2), 5, 13 * 5); - } else ctx.fillText("No graph selected", 5, 13 * 1); + } else { + ctx.fillText("No graph selected", 5, 13 * 1); + } ctx.restore(); }; @@ -5701,13 +6598,18 @@ LGraphNode.prototype.executeAction = function(action) canvas.height = this.canvas.height; } - if (!this.bgctx) this.bgctx = this.bgcanvas.getContext("2d"); + if (!this.bgctx) { + this.bgctx = this.bgcanvas.getContext("2d"); + } var ctx = this.bgctx; - if (ctx.start) ctx.start(); + if (ctx.start) { + ctx.start(); + } //clear - if (this.clear_background) + if (this.clear_background) { ctx.clearRect(0, 0, canvas.width, canvas.height); + } if (this._graph_stack && this._graph_stack.length) { ctx.save(); @@ -5721,9 +6623,10 @@ LGraphNode.prototype.executeAction = function(action) ctx.textAlign = "center"; ctx.fillStyle = subgraph_node.bgcolor || "#AAA"; var title = ""; - for (var i = 1; i < this._graph_stack.length; ++i) + for (var i = 1; i < this._graph_stack.length; ++i) { title += this._graph_stack[i]._subgraph_node.getTitle() + " >> "; + } ctx.fillText( title + subgraph_node.getTitle(), canvas.width * 0.5, @@ -5733,8 +6636,9 @@ LGraphNode.prototype.executeAction = function(action) } var bg_already_painted = false; - if (this.onRenderBackground) + if (this.onRenderBackground) { bg_already_painted = this.onRenderBackground(canvas, ctx); + } //reset in case of error ctx.restore(); @@ -5752,10 +6656,12 @@ LGraphNode.prototype.executeAction = function(action) this.ds.scale > 0.5 && !bg_already_painted ) { - if (this.zoom_modify_alpha) + if (this.zoom_modify_alpha) { ctx.globalAlpha = (1.0 - 0.5 / this.ds.scale) * this.editor_alpha; - else ctx.globalAlpha = this.editor_alpha; + } else { + ctx.globalAlpha = this.editor_alpha; + } ctx.imageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false; if ( !this._bg_img || @@ -5775,7 +6681,9 @@ LGraphNode.prototype.executeAction = function(action) pattern = ctx.createPattern(this._bg_img, "repeat"); this._pattern_img = this._bg_img; this._pattern = pattern; - } else pattern = this._pattern; + } else { + pattern = this._pattern; + } if (pattern) { ctx.fillStyle = pattern; ctx.fillRect( @@ -5792,11 +6700,13 @@ LGraphNode.prototype.executeAction = function(action) } //groups - if (this.graph._groups.length && !this.live_mode) + if (this.graph._groups.length && !this.live_mode) { this.drawGroups(canvas, ctx); + } - if (this.onDrawBackground) + if (this.onDrawBackground) { this.onDrawBackground(ctx, this.visible_area); + } if (this.onBackgroundRender) { //LEGACY console.error( @@ -5820,10 +6730,14 @@ LGraphNode.prototype.executeAction = function(action) ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 6; - } else ctx.shadowColor = "rgba(0,0,0,0)"; + } else { + ctx.shadowColor = "rgba(0,0,0,0)"; + } //draw connections - if (!this.live_mode) this.drawConnections(ctx); + if (!this.live_mode) { + this.drawConnections(ctx); + } ctx.shadowColor = "rgba(0,0,0,0)"; @@ -5831,7 +6745,9 @@ LGraphNode.prototype.executeAction = function(action) ctx.restore(); } - if (ctx.finish) ctx.finish(); + if (ctx.finish) { + ctx.finish(); + } this.dirty_bgcanvas = false; this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas @@ -5857,14 +6773,17 @@ LGraphNode.prototype.executeAction = function(action) LiteGraph.NODE_DEFAULT_BGCOLOR; //shadow and glow - if (node.mouseOver) glow = true; + if (node.mouseOver) { + glow = true; + } //only render if it forces it to do it if (this.live_mode) { if (!node.flags.collapsed) { ctx.shadowColor = "transparent"; - if (node.onDrawForeground) + if (node.onDrawForeground) { node.onDrawForeground(ctx, this, this.canvas); + } } return; } @@ -5877,15 +6796,18 @@ LGraphNode.prototype.executeAction = function(action) ctx.shadowOffsetX = 2 * this.ds.scale; ctx.shadowOffsetY = 2 * this.ds.scale; ctx.shadowBlur = 3 * this.ds.scale; - } else ctx.shadowColor = "transparent"; + } else { + ctx.shadowColor = "transparent"; + } //custom draw collapsed method (draw after shadows because they are affected) if ( node.flags.collapsed && node.onDrawCollapsed && node.onDrawCollapsed(ctx, this) == true - ) + ) { return; + } //clip if required (mask) var shape = node._shape || LiteGraph.BOX_SHAPE; @@ -5911,10 +6833,11 @@ LGraphNode.prototype.executeAction = function(action) //Start clipping ctx.save(); ctx.beginPath(); - if (shape == LiteGraph.BOX_SHAPE) ctx.rect(0, 0, size[0], size[1]); - else if (shape == LiteGraph.ROUND_SHAPE) + if (shape == LiteGraph.BOX_SHAPE) { + ctx.rect(0, 0, size[0], size[1]); + } else if (shape == LiteGraph.ROUND_SHAPE) { ctx.roundRect(0, 0, size[0], size[1], 10); - else if (shape == LiteGraph.CIRCLE_SHAPE) + } else if (shape == LiteGraph.CIRCLE_SHAPE) { ctx.arc( size[0] * 0.5, size[1] * 0.5, @@ -5922,11 +6845,14 @@ LGraphNode.prototype.executeAction = function(action) 0, Math.PI * 2 ); + } ctx.clip(); } //draw shape - if (node.has_errors) bgcolor = "red"; + if (node.has_errors) { + bgcolor = "red"; + } this.drawNodeShape( node, ctx, @@ -5939,8 +6865,9 @@ LGraphNode.prototype.executeAction = function(action) ctx.shadowColor = "transparent"; //draw foreground - if (node.onDrawForeground) + if (node.onDrawForeground) { node.onDrawForeground(ctx, this, this.canvas); + } //connection slots ctx.textAlign = horizontal ? "center" : "left"; @@ -5957,7 +6884,7 @@ LGraphNode.prototype.executeAction = function(action) //render inputs and outputs if (!node.flags.collapsed) { //input connection slots - if (node.inputs) + if (node.inputs) { for (var i = 0; i < node.inputs.length; i++) { var slot = node.inputs[i]; @@ -5966,8 +6893,9 @@ LGraphNode.prototype.executeAction = function(action) if ( this.connecting_node && LiteGraph.isValidConnection(slot.type && out_slot.type) - ) + ) { ctx.globalAlpha = 0.4 * editor_alpha; + } ctx.fillStyle = slot.link != null @@ -5979,8 +6907,9 @@ LGraphNode.prototype.executeAction = function(action) var pos = node.getConnectionPos(true, i, slot_pos); pos[0] -= node.pos[0]; pos[1] -= node.pos[1]; - if (max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT * 0.5) + if (max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT * 0.5) { max_y = pos[1] + LiteGraph.NODE_SLOT_HEIGHT * 0.5; + } ctx.beginPath(); @@ -5988,20 +6917,21 @@ LGraphNode.prototype.executeAction = function(action) slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE ) { - if (horizontal) + if (horizontal) { ctx.rect( pos[0] - 5 + 0.5, pos[1] - 8 + 0.5, 10, 14 ); - else + } else { ctx.rect( pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10 ); + } } else if (slot.shape === LiteGraph.ARROW_SHAPE) { ctx.moveTo(pos[0] + 8, pos[1] + 0.5); ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5); @@ -6018,27 +6948,33 @@ LGraphNode.prototype.executeAction = function(action) var text = slot.label != null ? slot.label : slot.name; if (text) { ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR; - if (horizontal || slot.dir == LiteGraph.UP) + if (horizontal || slot.dir == LiteGraph.UP) { ctx.fillText(text, pos[0], pos[1] - 10); - else ctx.fillText(text, pos[0] + 10, pos[1] + 5); + } else { + ctx.fillText(text, pos[0] + 10, pos[1] + 5); + } } } } + } //output connection slots - if (this.connecting_node) ctx.globalAlpha = 0.4 * editor_alpha; + if (this.connecting_node) { + ctx.globalAlpha = 0.4 * editor_alpha; + } ctx.textAlign = horizontal ? "center" : "right"; ctx.strokeStyle = "black"; - if (node.outputs) + if (node.outputs) { for (var i = 0; i < node.outputs.length; i++) { var slot = node.outputs[i]; var pos = node.getConnectionPos(false, i, slot_pos); pos[0] -= node.pos[0]; pos[1] -= node.pos[1]; - if (max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT * 0.5) + if (max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT * 0.5) { max_y = pos[1] + LiteGraph.NODE_SLOT_HEIGHT * 0.5; + } ctx.fillStyle = slot.links && slot.links.length @@ -6053,20 +6989,21 @@ LGraphNode.prototype.executeAction = function(action) slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE ) { - if (horizontal) + if (horizontal) { ctx.rect( pos[0] - 5 + 0.5, pos[1] - 8 + 0.5, 10, 14 ); - else + } else { ctx.rect( pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10 ); + } } else if (slot.shape === LiteGraph.ARROW_SHAPE) { ctx.moveTo(pos[0] + 8, pos[1] + 0.5); ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5); @@ -6089,18 +7026,23 @@ LGraphNode.prototype.executeAction = function(action) var text = slot.label != null ? slot.label : slot.name; if (text) { ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR; - if (horizontal || slot.dir == LiteGraph.DOWN) + if (horizontal || slot.dir == LiteGraph.DOWN) { ctx.fillText(text, pos[0], pos[1] - 8); - else ctx.fillText(text, pos[0] - 10, pos[1] + 5); + } else { + ctx.fillText(text, pos[0] - 10, pos[1] + 5); + } } } } + } ctx.textAlign = "left"; ctx.globalAlpha = 1; if (node.widgets) { - if (horizontal || node.widgets_up) max_y = 2; + if (horizontal || node.widgets_up) { + max_y = 2; + } this.drawNodeWidgets( node, max_y, @@ -6119,7 +7061,9 @@ LGraphNode.prototype.executeAction = function(action) if (node.inputs) { for (var i = 0; i < node.inputs.length; i++) { var slot = node.inputs[i]; - if (slot.link == null) continue; + if (slot.link == null) { + continue; + } input_slot = slot; break; } @@ -6127,7 +7071,9 @@ LGraphNode.prototype.executeAction = function(action) if (node.outputs) { for (var i = 0; i < node.outputs.length; i++) { var slot = node.outputs[i]; - if (!slot.links || !slot.links.length) continue; + if (!slot.links || !slot.links.length) { + continue; + } output_slot = slot; } } @@ -6185,7 +7131,9 @@ LGraphNode.prototype.executeAction = function(action) } } - if (node.clip_area) ctx.restore(); + if (node.clip_area) { + ctx.restore(); + } ctx.globalAlpha = 1.0; }; @@ -6219,9 +7167,11 @@ LGraphNode.prototype.executeAction = function(action) var title_mode = node.constructor.title_mode; var render_title = true; - if (title_mode == LiteGraph.TRANSPARENT_TITLE) render_title = false; - else if (title_mode == LiteGraph.AUTOHIDE_TITLE && mouse_over) + if (title_mode == LiteGraph.TRANSPARENT_TITLE) { + render_title = false; + } else if (title_mode == LiteGraph.AUTOHIDE_TITLE && mouse_over) { render_title = true; + } var area = tmp_area; area[0] = 0; //x @@ -6235,12 +7185,12 @@ LGraphNode.prototype.executeAction = function(action) //if(node.flags.collapsed) { ctx.beginPath(); - if (shape == LiteGraph.BOX_SHAPE || low_quality) + if (shape == LiteGraph.BOX_SHAPE || low_quality) { ctx.fillRect(area[0], area[1], area[2], area[3]); - else if ( + } else if ( shape == LiteGraph.ROUND_SHAPE || shape == LiteGraph.CARD_SHAPE - ) + ) { ctx.roundRect( area[0], area[1], @@ -6249,7 +7199,7 @@ LGraphNode.prototype.executeAction = function(action) this.round_radius, shape == LiteGraph.CARD_SHAPE ? 0 : this.round_radius ); - else if (shape == LiteGraph.CIRCLE_SHAPE) + } else if (shape == LiteGraph.CIRCLE_SHAPE) { ctx.arc( size[0] * 0.5, size[1] * 0.5, @@ -6257,6 +7207,7 @@ LGraphNode.prototype.executeAction = function(action) 0, Math.PI * 2 ); + } ctx.fill(); ctx.shadowColor = "transparent"; @@ -6265,8 +7216,9 @@ LGraphNode.prototype.executeAction = function(action) } ctx.shadowColor = "transparent"; - if (node.onDrawBackground) + if (node.onDrawBackground) { node.onDrawBackground(ctx, this, this.canvas); + } //title bg (remember, it is rendered ABOVE the node) if (render_title || title_mode == LiteGraph.TRANSPARENT_TITLE) { @@ -6285,8 +7237,9 @@ LGraphNode.prototype.executeAction = function(action) ) { var title_color = node.constructor.title_color || fgcolor; - if (node.flags.collapsed) + if (node.flags.collapsed) { ctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR; + } //* gradient test if (this.use_gradients) { @@ -6299,16 +7252,18 @@ LGraphNode.prototype.executeAction = function(action) grad.addColorStop(1, "#000"); } ctx.fillStyle = grad; - } else ctx.fillStyle = title_color; + } else { + ctx.fillStyle = title_color; + } //ctx.globalAlpha = 0.5 * old_alpha; ctx.beginPath(); - if (shape == LiteGraph.BOX_SHAPE || low_quality) + if (shape == LiteGraph.BOX_SHAPE || low_quality) { ctx.rect(0, -title_height, size[0] + 1, title_height); - else if ( + } else if ( shape == LiteGraph.ROUND_SHAPE || shape == LiteGraph.CARD_SHAPE - ) + ) { ctx.roundRect( 0, -title_height, @@ -6317,6 +7272,7 @@ LGraphNode.prototype.executeAction = function(action) this.round_radius, node.flags.collapsed ? this.round_radius : 0 ); + } ctx.fill(); ctx.shadowColor = "transparent"; } @@ -6390,11 +7346,13 @@ LGraphNode.prototype.executeAction = function(action) ctx.font = this.title_text_font; var title = node.getTitle(); if (title) { - if (selected) ctx.fillStyle = "white"; - else + if (selected) { + ctx.fillStyle = "white"; + } else { ctx.fillStyle = node.constructor.title_text_color || this.node_title_color; + } if (node.flags.collapsed) { ctx.textAlign = "center"; var measure = ctx.measureText(title); @@ -6415,12 +7373,16 @@ LGraphNode.prototype.executeAction = function(action) } } - if (node.onDrawTitle) node.onDrawTitle(ctx); + if (node.onDrawTitle) { + node.onDrawTitle(ctx); + } } //render selection marker if (selected) { - if (node.onBounding) node.onBounding(area); + if (node.onBounding) { + node.onBounding(area); + } if (title_mode == LiteGraph.TRANSPARENT_TITLE) { area[1] -= title_height; @@ -6429,17 +7391,17 @@ LGraphNode.prototype.executeAction = function(action) ctx.lineWidth = 1; ctx.globalAlpha = 0.8; ctx.beginPath(); - if (shape == LiteGraph.BOX_SHAPE) + if (shape == LiteGraph.BOX_SHAPE) { ctx.rect( -6 + area[0], -6 + area[1], 12 + area[2], 12 + area[3] ); - else if ( + } else if ( shape == LiteGraph.ROUND_SHAPE || (shape == LiteGraph.CARD_SHAPE && node.flags.collapsed) - ) + ) { ctx.roundRect( -6 + area[0], -6 + area[1], @@ -6447,7 +7409,7 @@ LGraphNode.prototype.executeAction = function(action) 12 + area[3], this.round_radius * 2 ); - else if (shape == LiteGraph.CARD_SHAPE) + } else if (shape == LiteGraph.CARD_SHAPE) { ctx.roundRect( -6 + area[0], -6 + area[1], @@ -6456,7 +7418,7 @@ LGraphNode.prototype.executeAction = function(action) this.round_radius * 2, 2 ); - else if (shape == LiteGraph.CIRCLE_SHAPE) + } else if (shape == LiteGraph.CIRCLE_SHAPE) { ctx.arc( size[0] * 0.5, size[1] * 0.5, @@ -6464,6 +7426,7 @@ LGraphNode.prototype.executeAction = function(action) 0, Math.PI * 2 ); + } ctx.strokeStyle = "#FFF"; ctx.stroke(); ctx.strokeStyle = fgcolor; @@ -6500,31 +7463,40 @@ LGraphNode.prototype.executeAction = function(action) for (var n = 0, l = nodes.length; n < l; ++n) { var node = nodes[n]; //for every input (we render just inputs because it is easier as every slot can only have one input) - if (!node.inputs || !node.inputs.length) continue; + if (!node.inputs || !node.inputs.length) { + continue; + } for (var i = 0; i < node.inputs.length; ++i) { var input = node.inputs[i]; - if (!input || input.link == null) continue; + if (!input || input.link == null) { + continue; + } var link_id = input.link; var link = this.graph.links[link_id]; - if (!link) continue; + if (!link) { + continue; + } //find link info var start_node = this.graph.getNodeById(link.origin_id); - if (start_node == null) continue; + if (start_node == null) { + continue; + } var start_node_slot = link.origin_slot; var start_node_slotpos = null; - if (start_node_slot == -1) + if (start_node_slot == -1) { start_node_slotpos = [ start_node.pos[0] + 10, start_node.pos[1] + 10 ]; - else + } else { start_node_slotpos = start_node.getConnectionPos( false, start_node_slot, tempA ); + } var end_node_slotpos = node.getConnectionPos(true, i, tempB); //compute link bounding @@ -6542,11 +7514,15 @@ LGraphNode.prototype.executeAction = function(action) } //skip links outside of the visible area of the canvas - if (!overlapBounding(link_bounding, margin_area)) continue; + if (!overlapBounding(link_bounding, margin_area)) { + continue; + } var start_slot = start_node.outputs[start_node_slot]; var end_slot = node.inputs[i]; - if (!start_slot || !end_slot) continue; + if (!start_slot || !end_slot) { + continue; + } var start_dir = start_slot.dir || (start_node.horizontal ? LiteGraph.DOWN : LiteGraph.RIGHT); @@ -6614,24 +7590,34 @@ LGraphNode.prototype.executeAction = function(action) end_dir, num_sublines ) { - if (link) this.visible_links.push(link); + if (link) { + this.visible_links.push(link); + } //choose color - if (!color && link) + if (!color && link) { color = link.color || LGraphCanvas.link_type_colors[link.type]; - if (!color) color = this.default_link_color; - if (link != null && this.highlighted_links[link.id]) color = "#FFF"; + } + if (!color) { + color = this.default_link_color; + } + if (link != null && this.highlighted_links[link.id]) { + color = "#FFF"; + } start_dir = start_dir || LiteGraph.RIGHT; end_dir = end_dir || LiteGraph.LEFT; var dist = distance(a, b); - if (this.render_connections_border && this.ds.scale > 0.6) + if (this.render_connections_border && this.ds.scale > 0.6) { ctx.lineWidth = this.connections_width + 4; + } ctx.lineJoin = "round"; num_sublines = num_sublines || 1; - if (num_sublines > 1) ctx.lineWidth = 0.5; + if (num_sublines > 1) { + ctx.lineWidth = 0.5; + } //begin line shape ctx.beginPath(); @@ -6730,16 +7716,24 @@ LGraphNode.prototype.executeAction = function(action) var start_y = a[1]; var end_x = b[0]; var end_y = b[1]; - if (start_dir == LiteGraph.RIGHT) start_x += 10; - else start_y += 10; - if (end_dir == LiteGraph.LEFT) end_x -= 10; - else end_y -= 10; + if (start_dir == LiteGraph.RIGHT) { + start_x += 10; + } else { + start_y += 10; + } + if (end_dir == LiteGraph.LEFT) { + end_x -= 10; + } else { + end_y -= 10; + } ctx.lineTo(start_x, start_y); ctx.lineTo((start_x + end_x) * 0.5, start_y); ctx.lineTo((start_x + end_x) * 0.5, end_y); ctx.lineTo(end_x, end_y); ctx.lineTo(b[0], b[1]); - } else return; //unknown + } else { + return; + } //unknown } //rendering the outline of the connection can be a little bit slow @@ -6807,7 +7801,9 @@ LGraphNode.prototype.executeAction = function(action) if (this.render_curved_connections) { angleA = -Math.atan2(posB[0] - posA[0], posB[1] - posA[1]); angleB = -Math.atan2(posD[0] - posC[0], posD[1] - posC[1]); - } else angleB = angleA = b[1] > a[1] ? 0 : Math.PI; + } else { + angleB = angleA = b[1] > a[1] ? 0 : Math.PI; + } //render arrow ctx.save(); @@ -6929,13 +7925,14 @@ LGraphNode.prototype.executeAction = function(action) LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT ); - if (node.order == 0) + if (node.order == 0) { ctx.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 ); + } ctx.fillStyle = "#FFF"; ctx.fillText( node.order, @@ -6956,7 +7953,9 @@ LGraphNode.prototype.executeAction = function(action) ctx, active_widget ) { - if (!node.widgets || !node.widgets.length) return 0; + if (!node.widgets || !node.widgets.length) { + return 0; + } var width = node.size[0]; var widgets = node.widgets; posY += 2; @@ -6971,7 +7970,9 @@ LGraphNode.prototype.executeAction = function(action) for (var i = 0; i < widgets.length; ++i) { var w = widgets[i]; var y = posY; - if (w.y) y = w.y; + if (w.y) { + y = w.y; + } w.last_y = y; ctx.strokeStyle = outline_color; ctx.fillStyle = "#222"; @@ -7012,8 +8013,9 @@ LGraphNode.prototype.executeAction = function(action) ctx.fill(); if (show_text) { ctx.fillStyle = "#999"; - if (w.name != null) + if (w.name != null) { ctx.fillText(w.name, margin * 2, y + H * 0.7); + } ctx.fillStyle = w.value ? "#DDD" : "#888"; ctx.textAlign = "right"; ctx.fillText( @@ -7076,7 +8078,7 @@ LGraphNode.prototype.executeAction = function(action) ctx.fillText(w.name, margin * 2 + 5, y + H * 0.7); ctx.fillStyle = "#DDD"; ctx.textAlign = "right"; - if (w.type == "number") + if (w.type == "number") { ctx.fillText( Number(w.value).toFixed( w.options.precision !== undefined @@ -7086,12 +8088,13 @@ LGraphNode.prototype.executeAction = function(action) width - margin * 2 - 20, y + H * 0.7 ); - else + } else { ctx.fillText( w.value, width - margin * 2 - 20, y + H * 0.7 ); + } } break; case "string": @@ -7105,15 +8108,18 @@ LGraphNode.prototype.executeAction = function(action) ctx.stroke(); if (show_text) { ctx.fillStyle = "#999"; - if (w.name != null) + if (w.name != null) { ctx.fillText(w.name, margin * 2, y + H * 0.7); + } ctx.fillStyle = "#DDD"; ctx.textAlign = "right"; ctx.fillText(w.value, width - margin * 2, y + H * 0.7); } break; default: - if (w.draw) w.draw(ctx, node, w, y, H); + if (w.draw) { + w.draw(ctx, node, w, y, H); + } break; } posY += H + 4; @@ -7131,7 +8137,9 @@ LGraphNode.prototype.executeAction = function(action) event, active_widget ) { - if (!node.widgets || !node.widgets.length) return null; + if (!node.widgets || !node.widgets.length) { + return null; + } var x = pos[0] - node.pos[0]; var y = pos[1] - node.pos[1]; @@ -7154,10 +8162,11 @@ LGraphNode.prototype.executeAction = function(action) if (event.type === "mousemove") { break; } - if (w.callback) + if (w.callback) { setTimeout(function() { w.callback(w, that, node, pos); }, 20); + } w.clicked = true; this.dirty_canvas = true; break; @@ -7167,10 +8176,11 @@ LGraphNode.prototype.executeAction = function(action) w.value = w.options.min + (w.options.max - w.options.min) * nvalue; - if (w.callback) + if (w.callback) { setTimeout(function() { inner_value_change(w, w.value); }, 20); + } this.dirty_canvas = true; break; case "number": @@ -7181,17 +8191,20 @@ LGraphNode.prototype.executeAction = function(action) if ( w.options.min != null && w.value < w.options.min - ) + ) { w.value = w.options.min; + } if ( w.options.max != null && w.value > w.options.max - ) + ) { w.value = w.options.max; + } } else if (event.type == "mousedown") { var values = w.options.values; - if (values && values.constructor === Function) + if (values && values.constructor === Function) { values = w.options.values(w, node); + } var delta = x < 40 ? -1 : x > width - 40 ? 1 : 0; if (w.type == "number") { @@ -7199,17 +8212,23 @@ LGraphNode.prototype.executeAction = function(action) if ( w.options.min != null && w.value < w.options.min - ) + ) { w.value = w.options.min; + } if ( w.options.max != null && w.value > w.options.max - ) + ) { w.value = w.options.max; + } } else if (delta) { var index = values.indexOf(w.value) + delta; - if (index >= values.length) index = 0; - if (index < 0) index = values.length - 1; + if (index >= values.length) { + index = 0; + } + if (index < 0) { + index = values.length - 1; + } w.value = values[index]; } else { var menu = new LiteGraph.ContextMenu( @@ -7241,15 +8260,16 @@ LGraphNode.prototype.executeAction = function(action) case "toggle": if (event.type == "mousedown") { w.value = !w.value; - if (w.callback) + if (w.callback) { setTimeout(function() { inner_value_change(w, w.value); }, 20); + } } break; case "string": case "text": - if (event.type == "mousedown") + if (event.type == "mousedown") { this.prompt( "Value", w.value, @@ -7259,9 +8279,12 @@ LGraphNode.prototype.executeAction = function(action) }.bind(w), event ); + } break; default: - if (w.mouse) w.mouse(ctx, event, [x, y], node); + if (w.mouse) { + w.mouse(ctx, event, [x, y], node); + } break; } @@ -7274,10 +8297,12 @@ LGraphNode.prototype.executeAction = function(action) if ( widget.property && node.properties[widget.property] !== undefined - ) + ) { node.properties[widget.property] = value; - if (widget.callback) + } + if (widget.callback) { widget.callback(widget.value, that, node, pos, event); + } } return null; @@ -7288,7 +8313,9 @@ LGraphNode.prototype.executeAction = function(action) * @method drawGroups **/ LGraphCanvas.prototype.drawGroups = function(canvas, ctx) { - if (!this.graph) return; + if (!this.graph) { + return; + } var groups = this.graph._groups; @@ -7298,7 +8325,9 @@ LGraphNode.prototype.executeAction = function(action) for (var i = 0; i < groups.length; ++i) { var group = groups[i]; - if (!overlapBounding(this.visible_area, group._bounding)) continue; //out of the visible area + if (!overlapBounding(this.visible_area, group._bounding)) { + continue; + } //out of the visible area ctx.fillStyle = group.color || "#335"; ctx.strokeStyle = group.color || "#335"; @@ -7328,8 +8357,9 @@ LGraphNode.prototype.executeAction = function(action) LGraphCanvas.prototype.adjustNodesSize = function() { var nodes = this.graph._nodes; - for (var i = 0; i < nodes.length; ++i) + for (var i = 0; i < nodes.length; ++i) { nodes[i].size = nodes[i].computeSize(); + } this.setDirty(true, true); }; @@ -7344,7 +8374,9 @@ LGraphNode.prototype.executeAction = function(action) height = parent.offsetHeight; } - if (this.canvas.width == width && this.canvas.height == height) return; + if (this.canvas.width == width && this.canvas.height == height) { + return; + } this.canvas.width = width; this.canvas.height = height; @@ -7380,7 +8412,9 @@ LGraphNode.prototype.executeAction = function(action) if (delta < 1 && self.editor_alpha < 0.01) { clearInterval(t); - if (delta < 1) self.live_mode = true; + if (delta < 1) { + self.live_mode = true; + } } if (delta > 1 && self.editor_alpha > 0.99) { clearInterval(t); @@ -7459,13 +8493,15 @@ LGraphNode.prototype.executeAction = function(action) var values = LiteGraph.getNodeTypesCategories(); var entries = []; - for (var i in values) - if (values[i]) + for (var i in values) { + if (values[i]) { entries.push({ value: values[i], content: values[i], has_submenu: true }); + } + } //show categories var menu = new LiteGraph.ContextMenu( @@ -7481,12 +8517,14 @@ LGraphNode.prototype.executeAction = function(action) canvas.filter ); var values = []; - for (var i in node_types) - if (!node_types[i].skip_list) + for (var i in node_types) { + if (!node_types[i].skip_list) { values.push({ content: node_types[i].title, value: node_types[i].type }); + } + } new LiteGraph.ContextMenu( values, @@ -7519,17 +8557,21 @@ LGraphNode.prototype.executeAction = function(action) prev_menu, node ) { - if (!node) return; + if (!node) { + return; + } var that = this; var canvas = LGraphCanvas.active_canvas; var ref_window = canvas.getCanvasWindow(); var options = node.optional_inputs; - if (node.onGetInputs) options = node.onGetInputs(); + if (node.onGetInputs) { + options = node.onGetInputs(); + } var entries = []; - if (options) + if (options) { for (var i in options) { var entry = options[i]; if (!entry) { @@ -7537,15 +8579,24 @@ LGraphNode.prototype.executeAction = function(action) continue; } var label = entry[0]; - if (entry[2] && entry[2].label) label = entry[2].label; + if (entry[2] && entry[2].label) { + label = entry[2].label; + } var data = { content: label, value: entry }; - if (entry[1] == LiteGraph.ACTION) data.className = "event"; + if (entry[1] == LiteGraph.ACTION) { + data.className = "event"; + } entries.push(data); } + } - if (this.onMenuNodeInputs) entries = this.onMenuNodeInputs(entries); + if (this.onMenuNodeInputs) { + entries = this.onMenuNodeInputs(entries); + } - if (!entries.length) return; + if (!entries.length) { + return; + } var menu = new LiteGraph.ContextMenu( entries, @@ -7559,9 +8610,13 @@ LGraphNode.prototype.executeAction = function(action) ); function inner_clicked(v, e, prev) { - if (!node) return; + if (!node) { + return; + } - if (v.callback) v.callback.call(that, node, v, e, prev); + if (v.callback) { + v.callback.call(that, node, v, e, prev); + } if (v.value) { node.addInput(v.value[0], v.value[1], v.value[2]); @@ -7579,17 +8634,21 @@ LGraphNode.prototype.executeAction = function(action) prev_menu, node ) { - if (!node) return; + if (!node) { + return; + } var that = this; var canvas = LGraphCanvas.active_canvas; var ref_window = canvas.getCanvasWindow(); var options = node.optional_outputs; - if (node.onGetOutputs) options = node.onGetOutputs(); + if (node.onGetOutputs) { + options = node.onGetOutputs(); + } var entries = []; - if (options) + if (options) { for (var i in options) { var entry = options[i]; if (!entry) { @@ -7602,18 +8661,28 @@ LGraphNode.prototype.executeAction = function(action) node.flags && node.flags.skip_repeated_outputs && node.findOutputSlot(entry[0]) != -1 - ) - continue; //skip the ones already on + ) { + continue; + } //skip the ones already on var label = entry[0]; - if (entry[2] && entry[2].label) label = entry[2].label; + if (entry[2] && entry[2].label) { + label = entry[2].label; + } var data = { content: label, value: entry }; - if (entry[1] == LiteGraph.EVENT) data.className = "event"; + if (entry[1] == LiteGraph.EVENT) { + data.className = "event"; + } entries.push(data); } + } - if (this.onMenuNodeOutputs) entries = this.onMenuNodeOutputs(entries); + if (this.onMenuNodeOutputs) { + entries = this.onMenuNodeOutputs(entries); + } - if (!entries.length) return; + if (!entries.length) { + return; + } var menu = new LiteGraph.ContextMenu( entries, @@ -7627,11 +8696,17 @@ LGraphNode.prototype.executeAction = function(action) ); function inner_clicked(v, e, prev) { - if (!node) return; + if (!node) { + return; + } - if (v.callback) v.callback.call(that, node, v, e, prev); + if (v.callback) { + v.callback.call(that, node, v, e, prev); + } - if (!v.value) return; + if (!v.value) { + return; + } var value = v.value[1]; @@ -7641,8 +8716,9 @@ LGraphNode.prototype.executeAction = function(action) ) { //submenu why? var entries = []; - for (var i in value) + for (var i in value) { entries.push({ content: i, value: value[i] }); + } new LiteGraph.ContextMenu(entries, { event: e, callback: inner_clicked, @@ -7666,7 +8742,9 @@ LGraphNode.prototype.executeAction = function(action) prev_menu, node ) { - if (!node || !node.properties) return; + if (!node || !node.properties) { + return; + } var that = this; var canvas = LGraphCanvas.active_canvas; @@ -7689,7 +8767,9 @@ LGraphNode.prototype.executeAction = function(action) value: i }); } - if (!entries.length) return; + if (!entries.length) { + return; + } var menu = new LiteGraph.ContextMenu( entries, @@ -7704,7 +8784,9 @@ LGraphNode.prototype.executeAction = function(action) ); function inner_clicked(v, options, e, prev) { - if (!node) return; + if (!node) { + return; + } var rect = this.getBoundingClientRect(); canvas.showEditPropertyValue(node, v.value, { position: [rect.left, rect.top] @@ -7721,7 +8803,9 @@ LGraphNode.prototype.executeAction = function(action) }; LGraphCanvas.onResizeNode = function(value, options, e, menu, node) { - if (!node) return; + if (!node) { + return; + } node.size = node.computeSize(); node.setDirtyCanvas(true, true); }; @@ -7764,7 +8848,9 @@ LGraphNode.prototype.executeAction = function(action) this.focus(); }); input.addEventListener("keydown", function(e) { - if (e.keyCode != 13) return; + if (e.keyCode != 13) { + return; + } inner(); e.preventDefault(); e.stopPropagation(); @@ -7799,10 +8885,15 @@ LGraphNode.prototype.executeAction = function(action) } function setValue(value) { - if (item.type == "Number") value = Number(value); - else if (item.type == "Boolean") value = Boolean(value); + if (item.type == "Number") { + value = Number(value); + } else if (item.type == "Boolean") { + value = Boolean(value); + } node[property] = value; - if (dialog.parentNode) dialog.parentNode.removeChild(dialog); + if (dialog.parentNode) { + dialog.parentNode.removeChild(dialog); + } node.setDirtyCanvas(true, true); } }; @@ -7820,17 +8911,24 @@ LGraphNode.prototype.executeAction = function(action) " "; dialog.close = function() { that.prompt_box = null; - if (dialog.parentNode) dialog.parentNode.removeChild(dialog); + if (dialog.parentNode) { + dialog.parentNode.removeChild(dialog); + } }; - if (this.ds.scale > 1) + if (this.ds.scale > 1) { dialog.style.transform = "scale(" + this.ds.scale + ")"; + } dialog.addEventListener("mouseleave", function(e) { - if (!modified) dialog.close(); + if (!modified) { + dialog.close(); + } }); - if (that.prompt_box) that.prompt_box.close(); + if (that.prompt_box) { + that.prompt_box.close(); + } that.prompt_box = dialog; var first = null; @@ -7845,20 +8943,26 @@ LGraphNode.prototype.executeAction = function(action) var input = dialog.querySelector("input"); input.addEventListener("keydown", function(e) { modified = true; - if (e.keyCode == 27) + if (e.keyCode == 27) { //ESC dialog.close(); - else if (e.keyCode == 13) { - if (callback) callback(this.value); + } else if (e.keyCode == 13) { + if (callback) { + callback(this.value); + } dialog.close(); - } else return; + } else { + return; + } e.preventDefault(); e.stopPropagation(); }); var button = dialog.querySelector("button"); button.addEventListener("click", function(e) { - if (callback) callback(input.value); + if (callback) { + callback(input.value); + } that.setDirty(true); dialog.close(); }); @@ -7905,13 +9009,16 @@ LGraphNode.prototype.executeAction = function(action) setTimeout(function() { that.canvas.focus(); }, 20); //important, if canvas loses focus keys wont be captured - if (dialog.parentNode) dialog.parentNode.removeChild(dialog); + if (dialog.parentNode) { + dialog.parentNode.removeChild(dialog); + } }; var timeout_close = null; - if (this.ds.scale > 1) + if (this.ds.scale > 1) { dialog.style.transform = "scale(" + this.ds.scale + ")"; + } dialog.addEventListener("mouseenter", function(e) { if (timeout_close) { @@ -7927,7 +9034,9 @@ LGraphNode.prototype.executeAction = function(action) }, 500); }); - if (that.search_box) that.search_box.close(); + if (that.search_box) { + that.search_box.close(); + } that.search_box = dialog; var helper = dialog.querySelector(".helper"); @@ -7942,21 +9051,27 @@ LGraphNode.prototype.executeAction = function(action) this.focus(); }); input.addEventListener("keydown", function(e) { - if (e.keyCode == 38) + if (e.keyCode == 38) { //UP changeSelection(false); - else if (e.keyCode == 40) + } else if (e.keyCode == 40) { //DOWN changeSelection(true); - else if (e.keyCode == 27) + } else if (e.keyCode == 27) { //ESC dialog.close(); - else if (e.keyCode == 13) { - if (selected) select(selected.innerHTML); - else if (first) select(first); - else dialog.close(); + } else if (e.keyCode == 13) { + if (selected) { + select(selected.innerHTML); + } else if (first) { + select(first); + } else { + dialog.close(); + } } else { - if (timeout) clearInterval(timeout); + if (timeout) { + clearInterval(timeout); + } timeout = setTimeout(refreshHelper, 10); return; } @@ -7989,11 +9104,13 @@ LGraphNode.prototype.executeAction = function(action) function select(name) { if (name) { - if (that.onSearchBoxSelection) + if (that.onSearchBoxSelection) { that.onSearchBoxSelection(name, event, graphcanvas); - else { + } else { var extra = LiteGraph.searchbox_extras[name]; - if (extra) name = extra.type; + if (extra) { + name = extra.type; + } var node = LiteGraph.createNode(name); if (node) { @@ -8004,30 +9121,38 @@ LGraphNode.prototype.executeAction = function(action) } if (extra && extra.data) { - if (extra.data.properties) - for (var i in extra.data.properties) + if (extra.data.properties) { + for (var i in extra.data.properties) { node.addProperty( extra.data.properties[i][0], extra.data.properties[i][0] ); + } + } if (extra.data.inputs) { node.inputs = []; - for (var i in extra.data.inputs) + for (var i in extra.data.inputs) { node.addOutput( extra.data.inputs[i][0], extra.data.inputs[i][1] ); + } } if (extra.data.outputs) { node.outputs = []; - for (var i in extra.data.outputs) + for (var i in extra.data.outputs) { node.addOutput( extra.data.outputs[i][0], extra.data.outputs[i][1] ); + } + } + if (extra.data.title) { + node.title = extra.data.title; + } + if (extra.data.json) { + node.configure(extra.data.json); } - if (extra.data.title) node.title = extra.data.title; - if (extra.data.json) node.configure(extra.data.json); } } } @@ -8037,18 +9162,24 @@ LGraphNode.prototype.executeAction = function(action) function changeSelection(forward) { var prev = selected; - if (selected) selected.classList.remove("selected"); - if (!selected) + if (selected) { + selected.classList.remove("selected"); + } + if (!selected) { selected = forward ? helper.childNodes[0] : helper.childNodes[helper.childNodes.length]; - else { + } else { selected = forward ? selected.nextSibling : selected.previousSibling; - if (!selected) selected = prev; + if (!selected) { + selected = prev; + } + } + if (!selected) { + return; } - if (!selected) return; selected.classList.add("selected"); selected.scrollIntoView(); } @@ -8058,25 +9189,33 @@ LGraphNode.prototype.executeAction = function(action) var str = input.value; first = null; helper.innerHTML = ""; - if (!str) return; + if (!str) { + return; + } if (that.onSearchBox) { var list = that.onSearchBox(helper, str, graphcanvas); - if (list) - for (var i = 0; i < list.length; ++i) addResult(list[i]); + if (list) { + for (var i = 0; i < list.length; ++i) { + addResult(list[i]); + } + } } else { var c = 0; str = str.toLowerCase(); //extras for (var i in LiteGraph.searchbox_extras) { var extra = LiteGraph.searchbox_extras[i]; - if (extra.desc.toLowerCase().indexOf(str) === -1) continue; + if (extra.desc.toLowerCase().indexOf(str) === -1) { + continue; + } addResult(extra.desc, "searchbox_extra"); if ( LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit - ) + ) { break; + } } if (Array.prototype.filter) { @@ -8091,8 +9230,9 @@ LGraphNode.prototype.executeAction = function(action) if ( LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit - ) + ) { break; + } } } else { for (var i in LiteGraph.registered_node_types) { @@ -8101,8 +9241,9 @@ LGraphNode.prototype.executeAction = function(action) if ( LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit - ) + ) { break; + } } } } @@ -8110,11 +9251,15 @@ LGraphNode.prototype.executeAction = function(action) function addResult(type, className) { var help = document.createElement("div"); - if (!first) first = type; + if (!first) { + first = type; + } help.innerText = type; help.dataset["type"] = escape(type); help.className = "litegraph lite-search-item"; - if (className) help.className += " " + className; + if (className) { + help.className += " " + className; + } help.addEventListener("click", function(e) { select(unescape(this.dataset["type"])); }); @@ -8130,23 +9275,30 @@ LGraphNode.prototype.executeAction = function(action) property, options ) { - if (!node || node.properties[property] === undefined) return; + if (!node || node.properties[property] === undefined) { + return; + } options = options || {}; var that = this; var type = "string"; - if (node.properties[property] !== null) + if (node.properties[property] !== null) { type = typeof node.properties[property]; + } //for arrays if (type == "object") { - if (node.properties[property].length) type = "array"; + if (node.properties[property].length) { + type = "array"; + } } var info = null; - if (node.getPropertyInfo) info = node.getPropertyInfo(property); + if (node.getPropertyInfo) { + info = node.getPropertyInfo(property); + } if (node.properties_info) { for (var i = 0; i < node.properties_info.length; ++i) { if (node.properties_info[i].name == property) { @@ -8156,13 +9308,15 @@ LGraphNode.prototype.executeAction = function(action) } } - if (info !== undefined && info !== null && info.type) type = info.type; + if (info !== undefined && info !== null && info.type) { + type = info.type; + } var input_html = ""; - if (type == "string" || type == "number" || type == "array") + if (type == "string" || type == "number" || type == "array") { input_html = ""; - else if (type == "enum" && info.values) { + } else if (type == "enum" && info.values) { input_html = "