commit a0b689da2ba2f14d80ef2e3d553659ebadb616d5 Author: tamat Date: Thu Sep 26 19:40:42 2013 +0200 first commit diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..1b52aa11c --- /dev/null +++ b/LICENSE @@ -0,0 +1,19 @@ +Copyright (C) 2013 by Javi Agenjo + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 000000000..87253549e --- /dev/null +++ b/README.md @@ -0,0 +1,17 @@ +# litegraph.js + +A library to create graphs similar to PD. Nodes can be programmed easily and it includes an editor to construct the graphs. + +More info comming soon + + +Utils +----- + +It includes several commands in the utils folder to generate doc, check errors and build minifyed version. + + +Feedback +-------- + +You can write any feedback to javi.agenjo@gmail.com diff --git a/build/litegraph.js b/build/litegraph.js new file mode 100644 index 000000000..1c2f763fb --- /dev/null +++ b/build/litegraph.js @@ -0,0 +1,5711 @@ +//packer version + +// ************************************************************* +// LiteGraph CLASS ******* +// ************************************************************* + + +var LiteGraph = { + + NODE_TITLE_HEIGHT: 16, + NODE_SLOT_HEIGHT: 15, + NODE_WIDTH: 140, + NODE_MIN_WIDTH: 50, + NODE_COLLAPSED_RADIUS: 10, + CANVAS_GRID_SIZE: 10, + NODE_DEFAULT_COLOR: "#888", + NODE_DEFAULT_BGCOLOR: "#333", + NODE_DEFAULT_BOXCOLOR: "#AEF", + NODE_DEFAULT_SHAPE: "box", + MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops + DEFAULT_POSITION: [100,100], + node_images_path: "", + + debug: false, + registered_node_types: {}, + graphs: [], + + registerNodeType: function(type, base_class) + { + var title = type; + if(base_class.prototype && base_class.prototype.title) + title = base_class.prototype.title; + else if(base_class.title) + title = base_class.title; + + base_class.type = type; + if(LiteGraph.debug) + console.log("Node registered: " + type); + + var categories = type.split("/"); + + var pos = type.lastIndexOf("/"); + base_class.category = type.substr(0,pos); + //info.name = name.substr(pos+1,name.length - pos); + + //inheritance + if(base_class.prototype) //is a class + for(var i in LGraphNode.prototype) + if(!base_class.prototype[i]) + base_class.prototype[i] = LGraphNode.prototype[i]; + + this.registered_node_types[type] = base_class; + }, + + createNode: function(type,name, options) + { + var base_class = this.registered_node_types[type]; + if (!base_class) + { + if(LiteGraph.debug) + console.log("GraphNode type \"" + type + "\" not registered."); + return null; + } + + var prototype = base_class.prototype || base_class; + + name = name || prototype.title || base_class.title || type; + + var node = null; + if (base_class.prototype) //is a class + { + node = new base_class(name); + } + else + { + node = new LGraphNode(name); + node.inputs = []; + node.outputs = []; + + //add inputs and outputs + for (var i in prototype) + { + if(i == "inputs") + { + for(var j in prototype[i]) + node.addInput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] ); + } + else if(i == "outputs") + { + for(var j in prototype[i]) + node.addOutput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] ); + } + else + { + if( prototype[i].concat ) //array + node[i] = prototype[i].concat(); + else if (typeof(prototype[i]) == 'object') + node[i] = jQuery.extend({}, prototype[i]); + else + node[i] = prototype[i]; + } + } + //set size + if(base_class.size) node.size = base_class.size.concat(); //save size + } + + node.type = type; + if(!node.name) node.name = name; + if(!node.flags) node.flags = {}; + if(!node.size) node.size = node.computeSize(); + if(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat(); + + //extra options + if(options) + { + for(var i in options) + node[i] = options[i]; + } + + return node; + }, + + + getNodeType: function(type) + { + return this.registered_node_types[type]; + }, + + getNodeTypesInCategory: function(category) + { + var r = []; + for(var i in this.registered_node_types) + if(category == "") + { + if (this.registered_node_types[i].category == null) + r.push(this.registered_node_types[i]); + } + else if (this.registered_node_types[i].category == category) + r.push(this.registered_node_types[i]); + + return r; + }, + + getNodeTypesCategories: function() + { + var categories = {"":1}; + 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); + return result; + }, + + //debug purposes: reloads all the js scripts that matches a wilcard + reloadNodes: function (folder_wildcard) + { + 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]); + + + var docHeadObj = document.getElementsByTagName("head")[0]; + folder_wildcard = document.location.href + folder_wildcard; + + for(var i in script_files) + { + var src = script_files[i].src; + if( !src || src.substr(0,folder_wildcard.length ) != folder_wildcard) + continue; + + try + { + 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) + console.log("Error while reloading " + src); + } + } + + for (var i in LiteGraph.graphs) + { + for (var j in LiteGraph.graphs[i].nodes) + { + var m = LiteGraph.graphs[i].nodes[j]; + var t = LiteGraph.getNodeType(n.type); + if(!t) continue; + + for (var k in t) + if( typeof(t[k]) == "function" ) + m[k] = t[k]; + } + } + + if(LiteGraph.debug) + console.log("Nodes reloaded"); + } + + /* + benchmark: function(mode) + { + mode = mode || "all"; + + trace("Benchmarking " + mode + "..."); + trace(" Num. nodes: " + this.nodes.length ); + var links = 0; + for(var i in this.nodes) + for(var j in this.nodes[i].outputs) + if(this.nodes[i].outputs[j].node_id != null) + links++; + trace(" Num. links: " + links ); + + var numTimes = 200; + if(mode == "core") + numTimes = 30000; + + var start = new Date().getTime(); + + for(var i = 0; i < numTimes; i++) + { + if(mode == "render") + this.draw(false); + else if(mode == "core") + this.sendEventToAllNodes("onExecute"); + else + { + this.sendEventToAllNodes("onExecute"); + this.draw(false); + } + } + + var elapsed = (new Date().getTime()) - start; + trace(" Time take for " + numTimes + " iterations: " + (elapsed*0.001).toFixed(3) + " seconds."); + var seconds_per_iteration = (elapsed*0.001)/numTimes; + trace(" Time per iteration: " + seconds_per_iteration.toFixed( seconds_per_iteration < 0.001 ? 6 : 3) + " seconds"); + trace(" Avg FPS: " + (1000/(elapsed/numTimes)).toFixed(3)); + } + */ +}; + + + + + +//********************************************************************************* +// LGraph CLASS +//********************************************************************************* + +function LGraph() +{ + if (LiteGraph.debug) + console.log("Graph created"); + this.canvas = null; + LiteGraph.graphs.push(this); + this.clear(); +} + +LGraph.STATUS_STOPPED = 1; +LGraph.STATUS_RUNNING = 2; + +LGraph.prototype.clear = function() +{ + this.stop(); + this.status = LGraph.STATUS_STOPPED; + this.last_node_id = 0; + + //nodes + this.nodes = []; + this.nodes_by_id = {}; + + //links + this.last_link_id = 0; + this.links = {}; + + //iterations + this.iteration = 0; + + this.config = { + canvas_offset: [0,0], + canvas_scale: 1.0 + }; + + //timing + this.globaltime = 0; + this.runningtime = 0; + this.fixedtime = 0; + this.fixedtime_lapse = 0.01; + this.elapsed_time = 0.01; + this.starttime = 0; + + this.graph = {}; + this.debug = true; + + this.change(); + if(this.canvas) + this.canvas.clear(); +} + +LGraph.prototype.run = function(interval) +{ + if(this.status == LGraph.STATUS_RUNNING) return; + this.status = LGraph.STATUS_RUNNING; + + if(this.onPlayEvent) + this.onPlayEvent(); + + this.sendEventToAllNodes("onStart"); + + //launch + this.starttime = new Date().getTime(); + interval = interval || 1000; + var that = this; + + this.execution_timer_id = setInterval( function() { + //execute + that.runStep(1); + //redraw + /* + if(that.canvas && that.canvas.rendering_timer_id == null && (that.canvas.dirty_canvas || that.canvas.dirty_bgcanvas)) + that.canvas.draw(); + */ + + },interval); +} + +LGraph.prototype.stop = function() +{ + if(this.status == LGraph.STATUS_STOPPED) + return; + + this.status = LGraph.STATUS_STOPPED; + + if(this.onStopEvent) + this.onStopEvent(); + + if(this.execution_timer_id != null) + clearInterval(this.execution_timer_id); + this.execution_timer_id = null; + + this.sendEventToAllNodes("onStop"); +} + +LGraph.prototype.runStep = function(num) +{ + num = num || 1; + + var start = new Date().getTime(); + this.globaltime = 0.001 * (start - this.starttime); + + try + { + for(var i = 0; i < num; i++) + { + this.sendEventToAllNodes("onExecute"); + this.fixedtime += this.fixedtime_lapse; + if( this.onExecuteStep ) + this.onExecuteStep(); + } + + 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) + console.log("Error during execution: " + err); + this.stop(); + } + + var elapsed = (new Date().getTime()) - start; + if (elapsed == 0) elapsed = 1; + this.elapsed_time = 0.001 * elapsed; + this.globaltime += 0.001 * elapsed; + this.iteration += 1; +} + +LGraph.prototype.computeExecutionOrder = function() +{ + var L = []; + var S = []; + var M = {}; + var visited_links = {}; //to avoid repeating links + var remaining_links = {}; //to a + + //search for the nodes without inputs (starting nodes) + for (var i in this.nodes) + { + var n = this.nodes[i]; + M[n.id] = n; //add to pending nodes + + var num = 0; //num of input connections + if(n.inputs) + for(var j = 0, l = n.inputs.length; j < l; j++) + if(n.inputs[j] && n.inputs[j].link != null) + num += 1; + + if(num == 0) //is a starting node + S.push(n); + else //num of input links + remaining_links[n.id] = num; + } + + while(true) + { + if(S.length == 0) + break; + + //get an starting node + var n = S.shift(); + L.push(n); //add to ordered list + delete M[n.id]; //remove from the pending nodes + + //for every output + if(n.outputs) + for(var i = 0; i < n.outputs.length; i++) + { + var output = n.outputs[i]; + //not connected + if(output == null || output.links == null || output.links.length == 0) + continue; + + //for every connection + for(var j = 0; j < output.links.length; j++) + { + var link = output.links[j]; + + //already visited link (ignore it) + if(visited_links[ link[0] ]) + continue; + + var target_node = this.getNodeById( link[3] ); + if(target_node == null) + { + visited_links[ link[0] ] = true; + continue; + } + + visited_links[link[0]] = 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 + } + } + } + + //the remaining ones (loops) + for(var i in M) + L.push(M[i]); + + if(L.length != this.nodes.length && LiteGraph.debug) + console.log("something went wrong, nodes missing"); + + //save order number in the node + for(var i in L) + L[i].order = i; + + return L; +} + +LGraph.prototype.getTime = function() +{ + return this.globaltime; +} + +LGraph.prototype.getFixedTime = function() +{ + return this.fixedtime; +} + +LGraph.prototype.getElapsedTime = function() +{ + return this.elapsed_time; +} + +LGraph.prototype.sendEventToAllNodes = function(eventname, param) +{ + var M = this.nodes_in_order ? this.nodes_in_order : this.nodes; + for(var j in M) + if(M[j][eventname]) + M[j][eventname](param); +} + +LGraph.prototype.add = function(node) +{ + if(!node || (node.id != -1 && this.nodes_by_id[node.id] != null)) + return; //already added + + if(this.nodes.length >= LiteGraph.MAX_NUMBER_OF_NODES) + throw("LiteGraph: max number of nodes attached"); + + //give him an id + if(node.id == null || node.id == -1) + node.id = this.last_node_id++; + + node.graph = this; + + this.nodes.push(node); + this.nodes_by_id[node.id] = node; + + /* + // rendering stuf... + if(node.bgImageUrl) + node.bgImage = node.loadImage(node.bgImageUrl); + */ + + if(node.onInit) + node.onInit(); + + if(this.config.align_to_grid) + node.alignToGrid(); + + this.updateExecutionOrder(); + + if(this.canvas) + this.canvas.dirty_canvas = true; + + this.change(); + + return node; //to chain actions +} + +LGraph.prototype.remove = function(node) +{ + if(this.nodes_by_id[node.id] == null) + return; //not found + + //disconnect 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); + } + + //disconnect 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) + node.disconnectOutput(i); + } + + node.id = -1; + + //callback + if(node.onDelete) + node.onDelete(); + + //remove from environment + if(this.canvas) + { + if(this.canvas.selected_nodes[node.id]) + delete this.canvas.selected_nodes[node.id]; + if(this.canvas.node_dragged == node) + this.canvas.node_dragged = null; + } + + //remove from containers + var pos = this.nodes.indexOf(node); + if(pos != -1) + this.nodes.splice(pos,1); + delete this.nodes_by_id[node.id]; + + if(this.canvas) + this.canvas.setDirty(true,true); + + this.change(); + + this.updateExecutionOrder(); +} + +LGraph.prototype.getNodeById = function(id) +{ + if(id==null) return null; + return this.nodes_by_id[id]; +} + + +LGraph.prototype.findNodesByType = function(type) +{ + var r = []; + for(var i in this.nodes) + if(this.nodes[i].type == type) + r.push(this.nodes[i]); + return r; +} + +LGraph.prototype.findNodesByName = function(name) +{ + var result = []; + for (var i in this.nodes) + if(this.nodes[i].name == name) + result.push(name); + return result; +} + +LGraph.prototype.getNodeOnPos = function(x,y, nodes_list) +{ + nodes_list = nodes_list || this.nodes; + for (var i = nodes_list.length - 1; i >= 0; i--) + { + var n = nodes_list[i]; + if(n.isPointInsideNode(x,y)) + return n; + } + return null; +} + +LGraph.prototype.setInputData = function(name,value) +{ + var m = this.findNodesByName(name); + for(var i in m) + m[i].setValue(value); +} + +LGraph.prototype.getOutputData = function(name) +{ + var n = this.findNodesByName(name); + if(n.length) + return m[0].getValue(); + return null; +} + +LGraph.prototype.triggerInput = function(name,value) +{ + var m = this.findNodesByName(name); + for(var i in m) + m[i].onTrigger(value); +} + +LGraph.prototype.setCallback = function(name,func) +{ + var m = this.findNodesByName(name); + for(var i in m) + m[i].setTrigger(func); +} + +//********** + + +LGraph.prototype.onConnectionChange = function() +{ + this.updateExecutionOrder(); +} + +LGraph.prototype.updateExecutionOrder = function() +{ + this.nodes_in_order = this.computeExecutionOrder(); +} + +LGraph.prototype.isLive = function() +{ + if(!this.canvas) return false; + return this.canvas.live_mode; +} + +LGraph.prototype.change = function() +{ + if(LiteGraph.debug) + console.log("Graph changed"); + if(this.on_change) + this.on_change(this); +} + +//save and recover app state *************************************** +LGraph.prototype.serialize = function() +{ + var nodes_info = []; + for (var i in this.nodes) + nodes_info.push( this.nodes[i].objectivize() ); + + var data = { + graph: this.graph, + + iteration: this.iteration, + frame: this.frame, + last_node_id: this.last_node_id, + last_link_id: this.last_link_id, + + config: this.config, + nodes: nodes_info + }; + + return JSON.stringify(data); +} + +LGraph.prototype.unserialize = function(str, keep_old) +{ + if(!keep_old) + this.clear(); + + var data = JSON.parse(str); + var nodes = data.nodes; + + //copy all stored fields + for (var i in data) + this[i] = data[i]; + + var error = false; + + //create nodes + this.nodes = []; + for (var i in nodes) + { + var n_info = nodes[i]; //stored info + var n = LiteGraph.createNode( n_info.type, n_info.name ); + if(!n) + { + if(LiteGraph.debug) + console.log("Node not found: " + n_info.type); + error = true; + continue; + } + + n.copyFromObject(n_info); + this.add(n); + } + + //TODO: dispatch redraw + if(this.canvas) + this.canvas.draw(true,true); + + return error; +} + +LGraph.prototype.onNodeTrace = function(node, msg, color) +{ + if(this.canvas) + this.canvas.onNodeTrace(node,msg,color); +} + +// ************************************************************* +// Node CLASS ******* +// ************************************************************* + +/* flags: + + skip_title_render + + clip_area + + unsafe_execution: not allowed for safe execution + + supported callbacks: + + onInit: when added to graph + + onStart: when starts playing + + onStop: when stops playing + + onDrawForeground + + onDrawBackground + + onMouseMove + + onMouseOver + + onExecute: execute the node + + onPropertyChange: when a property is changed in the panel (return true to skip default behaviour) + + onGetInputs: returns an array of possible inputs + + onGetOutputs: returns an array of possible outputs + + onClick + + onDblClick + + onSerialize + + onSelected + + onDeselected +*/ + + +function LGraphNode(name) +{ + this.name = name || "Unnamed"; + this.size = [LiteGraph.NODE_WIDTH,60]; + this.graph = null; + + this.pos = [10,10]; + this.id = -1; //not know till not added + this.type = null; + + //inputs available: array of inputs + this.inputs = []; + this.outputs = []; + this.connections = []; + + //local data + this.data = null; //persistent local data + this.flags = { + //skip_title_render: true, + //unsafe_execution: false, + }; +} + +//serialization ************************* + +LGraphNode.prototype.objectivize = function() +{ + var o = { + id: this.id, + name: this.name, + type: this.type, + pos: this.pos, + size: this.size, + data: this.data, + properties: jQuery.extend({}, this.properties), + flags: jQuery.extend({}, this.flags), + inputs: this.inputs, + outputs: this.outputs + }; + + 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; + + return o; +} + +//reduced version of objectivize: NOT FINISHED +LGraphNode.prototype.reducedObjectivize = function() +{ + var o = this.objectivize(); + + var type = LiteGraph.getNodeType(o.type); + + if(type.name == o.name) + delete o["name"]; + + if(type.size && compareObjects(o.size,type.size)) + delete o["size"]; + + if(type.properties && compareObjects(o.properties, type.properties)) + delete o["properties"]; + + return o; +} + + +LGraphNode.prototype.serialize = function() +{ + if(this.onSerialize) + this.onSerialize(); + return JSON.stringify( this.reducedObjectivize() ); +} +//LGraphNode.prototype.unserialize = function(info) {} //this cannot be done from within, must be done in LiteGraph + + +// Execution ************************* + +LGraphNode.prototype.setOutputData = function(slot,data) +{ + if(!this.outputs) return; + if(slot > -1 && slot < this.outputs.length && this.outputs[slot] && this.outputs[slot].links != null) + { + for(var i = 0; i < this.outputs[slot].links.length; i++) + this.graph.links[ this.outputs[slot].links[i][0] ] = data; + } +} + +LGraphNode.prototype.getInputData = function(slot) +{ + if(!this.inputs) return null; + if(slot < this.inputs.length && this.inputs[slot].link != null) + return this.graph.links[ this.inputs[slot].link[0] ]; + return null; +} + +LGraphNode.prototype.getInputInfo = function(slot) +{ + if(!this.inputs) return null; + if(slot < this.inputs.length) + return this.inputs[slot]; + return null; +} + + +LGraphNode.prototype.getOutputInfo = function(slot) +{ + if(!this.outputs) return null; + if(slot < this.outputs.length) + return this.outputs[slot]; + return null; +} + +LGraphNode.prototype.getOutputNodes = function(slot) +{ + if(!this.outputs || this.outputs.length == 0) return null; + if(slot < this.outputs.length) + { + var output = this.outputs[slot]; + var r = []; + for(var i = 0; i < output.length; i++) + r.push( this.graph.getNodeById( output.links[i][3] )); + return r; + } + return null; +} + +LGraphNode.prototype.triggerOutput = function(slot,param) +{ + var n = this.getOutputNode(slot); + if(n && n.onTrigger) + n.onTrigger(param); +} + +//connections + +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(!this.outputs) this.outputs = []; + this.outputs.push(o); + this.size = this.computeSize(); +} + +LGraphNode.prototype.removeOutput = function(slot) +{ + this.disconnectOutput(slot); + this.outputs.splice(slot,1); + this.size = this.computeSize(); +} + +LGraphNode.prototype.addInput = function(name,type,extra_info) +{ + var o = {name:name,type:type,link:null}; + if(extra_info) + for(var i in extra_info) + o[i] = extra_info[i]; + + if(!this.inputs) this.inputs = []; + this.inputs.push(o); + this.size = this.computeSize(); +} + +LGraphNode.prototype.removeInput = function(slot) +{ + this.disconnectInput(slot); + this.inputs.splice(slot,1); + this.size = this.computeSize(); +} + +//trigger connection +LGraphNode.prototype.addConnection = function(name,type,pos,direction) +{ + this.connections.push( {name:name,type:type,pos:pos,direction:direction,links:null}); +} + + +LGraphNode.prototype.computeSize = function(minHeight) +{ + var rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1); + var size = [0,0]; + size[1] = rows * 14 + 6; + if(!this.inputs || this.inputs.length == 0 || !this.outputs || this.outputs.length == 0) + size[0] = LiteGraph.NODE_WIDTH * 0.5; + else + size[0] = LiteGraph.NODE_WIDTH; + return size; +} + +//returns the bounding of the object, used for rendering purposes +LGraphNode.prototype.getBounding = function() +{ + return new Float32Array([this.pos[0] - 4, this.pos[1] - LGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]); +} + +//checks if a point is inside the shape of a node +LGraphNode.prototype.isPointInsideNode = function(x,y) +{ + var margin_top = this.graph.isLive() ? 0 : 20; + if(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) + return true; + } + else if (this.pos[0] - 4 < x && (this.pos[0] + this.size[0] + 4) > x + && (this.pos[1] - margin_top) < y && (this.pos[1] + this.size[1]) > y) + return true; + return false; +} + +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; + return -1; +} + +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; + return -1; +} + +//connect this node output to the input of another node +LGraphNode.prototype.connect = function(slot, node, target_slot) +{ + //seek for the output slot + if( slot.constructor === String ) + { + slot = this.findOutputSlot(slot); + if(slot == -1) + { + 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) + console.log("Connect: Error, slot number not found"); + return false; + } + + //avoid loopback + if(node == this) return false; + //if( node.constructor != LGraphNode ) throw ("LGraphNode.connect: node is not of type LGraphNode"); + + if(target_slot.constructor === String) + { + target_slot = node.findInputSlot(target_slot); + if(target_slot == -1) + { + if(LiteGraph.debug) + console.log("Connect: Error, no slot of name " + target_slot); + return false; + } + } + else if(!node.inputs || target_slot >= node.inputs.length) + { + if(LiteGraph.debug) + console.log("Connect: Error, slot number not found"); + return false; + } + + //if there is something already plugged there, disconnect + if(target_slot != -1 && node.inputs[target_slot].link != null) + node.disconnectInput(target_slot); + + //special case: -1 means node-connection, used for triggers + var output = this.outputs[slot]; + if(target_slot == -1) + { + if( output.links == null ) + output.links = []; + output.links.push({id:node.id, slot: -1}); + } + else if(output.type == 0 || //generic output + node.inputs[target_slot].type == 0 || //generic input + output.type == node.inputs[target_slot].type) //same type + { + //info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ] + var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ]; + + //connect + if( output.links == null ) output.links = []; + output.links.push(link); + node.inputs[target_slot].link = link; + + this.setDirtyCanvas(false,true); + this.graph.onConnectionChange(); + } + return true; +} + +LGraphNode.prototype.disconnectOutput = function(slot, target_node) +{ + if( slot.constructor === String ) + { + slot = this.findOutputSlot(slot); + if(slot == -1) + { + 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) + console.log("Connect: Error, slot number not found"); + return false; + } + + //get output slot + var output = this.outputs[slot]; + if(!output.links || output.links.length == 0) + return false; + + if(target_node) + { + for(var i = 0, l = output.links.length; i < l; i++) + { + var link = output.links[i]; + //is the link we are searching for... + if( link[3] == target_node.id ) + { + output.links.splice(i,1); //remove here + target_node.inputs[ link[4] ].link = null; //remove there + delete this.graph.links[link[0]]; + break; + } + } + } + else + { + for(var i = 0, l = output.links.length; i < l; i++) + { + var link = output.links[i]; + var target_node = this.graph.getNodeById( link[3] ); + if(target_node) + target_node.inputs[ link[4] ].link = null; //remove other side link + } + output.links = null; + } + + this.setDirtyCanvas(false,true); + this.graph.onConnectionChange(); + return true; +} + +LGraphNode.prototype.disconnectInput = function(slot) +{ + //seek for the output slot + if( slot.constructor === String ) + { + slot = this.findInputSlot(slot); + if(slot == -1) + { + 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) + console.log("Connect: Error, slot number not found"); + return false; + } + + var input = this.inputs[slot]; + if(!input) return false; + var link = this.inputs[slot].link; + this.inputs[slot].link = null; + + //remove other side + var node = this.graph.getNodeById( link[1] ); + if(!node) return false; + + var output = node.outputs[ link[2] ]; + if(!output || !output.links || output.links.length == 0) + return false; + + for(var i = 0, l = output.links.length; i < l; i++) + { + var link = output.links[i]; + if( link[3] == this.id ) + { + output.links.splice(i,1); + break; + } + } + + this.setDirtyCanvas(false,true); + this.graph.onConnectionChange(); + return true; +} + +//returns the center of a connection point in canvas coords +LGraphNode.prototype.getConnectionPos = function(is_input,slot_number) +{ + if(this.flags.collapsed) + return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5]; + + if(is_input && slot_number == -1) + { + return [this.pos[0] + 10, this.pos[1] + 10]; + } + + if(is_input && this.inputs.length > slot_number && this.inputs[slot_number].pos) + return [this.pos[0] + this.inputs[slot_number].pos[0],this.pos[1] + this.inputs[slot_number].pos[1]]; + else if(!is_input && this.outputs.length > slot_number && this.outputs[slot_number].pos) + return [this.pos[0] + this.outputs[slot_number].pos[0],this.pos[1] + this.outputs[slot_number].pos[1]]; + + if(!is_input) //output + return [this.pos[0] + this.size[0] + 1, this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT]; + return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT]; +} + +/* Renders the LGraphNode on the canvas */ +LGraphNode.prototype.draw = function(ctx, canvasrender) +{ + var glow = false; + + var color = this.color || LiteGraph.NODE_DEFAULT_COLOR; + //if (this.selected) color = "#88F"; + + var render_title = true; + if(this.flags.skip_title_render || this.graph.isLive()) + render_title = false; + if(this.mouseOver) + render_title = true; + + //shadow and glow + if (this.mouseOver) glow = true; + + if(this.selected) + { + /* + ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = 1; + */ + } + else if(canvasrender.render_shadows) + { + ctx.shadowColor = "#111"; + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 4; + } + else + ctx.shadowColor = "transparent"; + + //only render if it forces it to do it + if(canvasrender.live_mode) + { + if(!this.flags.collapsed) + { + ctx.shadowColor = "transparent"; + if(this.onDrawBackground) + this.onDrawBackground(ctx); + if(this.onDrawForeground) + this.onDrawForeground(ctx); + } + + return; + } + + //draw in collapsed form + if(this.flags.collapsed) + { + if(!this.onDrawCollapsed || this.onDrawCollapsed(ctx) == false) + this.drawNodeCollapsed(ctx,color,this.bgcolor); + return; + } + + //clip if required (mask) + if(this.flags.clip_area) + { + ctx.save(); + if(this.shape == null || this.shape == "box") + { + ctx.beginPath(); + ctx.rect(0,0,this.size[0], this.size[1]); + } + else if (this.shape == "round") + { + ctx.roundRect(0,0,this.size[0], this.size[1],10); + } + else if (this.shape == "circle") + { + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2); + } + ctx.clip(); + } + + //draw shape + this.drawNodeShape(ctx,color, this.bgcolor, !render_title, this.selected ); + ctx.shadowColor = "transparent"; + + //connection slots + ctx.textAlign = "left"; + ctx.font = "12px Arial"; + + var render_text = this.graph.config.canvas_scale > 0.6; + + //input connection slots + if(this.inputs) + for(var i = 0; i < this.inputs.length; i++) + { + var slot = this.inputs[i]; + + ctx.globalAlpha = 1.0; + if (canvasrender.connecting_node != null && canvasrender.connecting_output.type != 0 && this.inputs[i].type != 0 && canvasrender.connecting_output.type != this.inputs[i].type) + ctx.globalAlpha = 0.4; + + ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA"; + + var pos = this.getConnectionPos(true,i); + pos[0] -= this.pos[0]; + pos[1] -= this.pos[1]; + + ctx.beginPath(); + + if (1 || slot.round) + ctx.arc(pos[0],pos[1],4,0,Math.PI*2); + //else + // ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10); + + ctx.fill(); + + //render name + if(render_text) + { + var text = slot.label != null ? slot.label : slot.name; + if(text) + { + ctx.fillStyle = color; + ctx.fillText(text,pos[0] + 10,pos[1] + 5); + } + } + } + + //output connection slots + if(canvasrender.connecting_node) + ctx.globalAlpha = 0.4; + + ctx.lineWidth = 1; + + ctx.textAlign = "right"; + ctx.strokeStyle = "black"; + if(this.outputs) + for(var i = 0; i < this.outputs.length; i++) + { + var slot = this.outputs[i]; + + var pos = this.getConnectionPos(false,i); + pos[0] -= this.pos[0]; + pos[1] -= this.pos[1]; + + ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA"; + ctx.beginPath(); + //ctx.rect( this.size[0] - 14,i*14,10,10); + + if (1 || slot.round) + ctx.arc(pos[0],pos[1],4,0,Math.PI*2); + //else + // ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10); + + //trigger + //if(slot.node_id != null && slot.slot == -1) + // ctx.fillStyle = "#F85"; + + //if(slot.links != null && slot.links.length) + ctx.fill(); + ctx.stroke(); + + //render output name + if(render_text) + { + var text = slot.label != null ? slot.label : slot.name; + if(text) + { + ctx.fillStyle = color; + ctx.fillText(text, pos[0] - 10,pos[1] + 5); + } + } + } + + ctx.textAlign = "left"; + ctx.globalAlpha = 1.0; + + if(this.onDrawForeground) + this.onDrawForeground(ctx); + + if(this.flags.clip_area) + ctx.restore(); +} + +/* Renders the node shape */ +LGraphNode.prototype.drawNodeShape = function(ctx, fgcolor, bgcolor, no_title, selected ) +{ + //bg rect + ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR; + ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR; + + /* gradient test + var grad = ctx.createLinearGradient(0,0,0,this.size[1]); + grad.addColorStop(0, "#AAA"); + grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR); + grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR); + ctx.fillStyle = grad; + */ + + var title_height = LiteGraph.NODE_TITLE_HEIGHT; + + //render depending on shape + if(this.shape == null || this.shape == "box") + { + if(selected) + { + ctx.strokeStyle = "#CCC"; + ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5,this.size[0]+2, no_title ? (this.size[1]+2) : (this.size[1] + title_height+2) ); + ctx.strokeStyle = fgcolor; + } + + ctx.beginPath(); + ctx.rect(0.5,no_title ? 0.5 : -title_height + 0.5,this.size[0], no_title ? this.size[1] : this.size[1] + title_height); + } + else if (this.shape == "round") + { + ctx.roundRect(0,no_title ? 0 : -title_height,this.size[0], no_title ? this.size[1] : this.size[1] + title_height, 10); + } + else if (this.shape == "circle") + { + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2); + } + + ctx.fill(); + ctx.shadowColor = "transparent"; + ctx.stroke(); + + //image + if (this.bgImage && this.bgImage.width) + ctx.drawImage( this.bgImage, (this.size[0] - this.bgImage.width) * 0.5 , (this.size[1] - this.bgImage.height) * 0.5); + + if(this.bgImageUrl && !this.bgImage) + this.bgImage = this.loadImage(this.bgImageUrl); + + if(this.onDrawBackground) + this.onDrawBackground(ctx); + + //title bg + if(!no_title) + { + ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR; + + if(this.shape == null || this.shape == "box") + { + ctx.fillRect(0,-title_height,this.size[0],title_height); + ctx.stroke(); + } + else if (this.shape == "round") + { + ctx.roundRect(0,-title_height,this.size[0], title_height,10,0); + //ctx.fillRect(0,8,this.size[0],NODE_TITLE_HEIGHT - 12); + ctx.fill(); + ctx.stroke(); + } + + //box + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + if (this.shape == "round") + ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2); + else + ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6); + ctx.fill(); + + //title text + ctx.font = "bold 12px Arial"; + if(this.name != "" && this.graph.config.canvas_scale > 0.8) + { + ctx.fillStyle = "#222"; + ctx.fillText(this.name,16,13-title_height ); + } + } +} + +/* Renders the node when collapsed */ +LGraphNode.prototype.drawNodeCollapsed = function(ctx, fgcolor, bgcolor) +{ + //draw default collapsed shape + ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR; + ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR; + + var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS; + + //circle shape + if(this.shape == "circle") + { + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius,0,Math.PI * 2); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2); + ctx.fill(); + } + else if(this.shape == "round") //rounded box + { + ctx.beginPath(); + ctx.roundRect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + ctx.roundRect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2); + ctx.fill(); + } + else //flat box + { + ctx.beginPath(); + ctx.rect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + ctx.rect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius); + ctx.fill(); + } +} + +/* Force align to grid */ +LGraphNode.prototype.alignToGrid = function() +{ + this.pos[0] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[0] / LiteGraph.CANVAS_GRID_SIZE); + this.pos[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[1] / LiteGraph.CANVAS_GRID_SIZE); +} + +/* Copy all the info from one object to this node (used for serialization) */ +LGraphNode.prototype.copyFromObject = function(info, ignore_connections) +{ + var outputs = null; + var inputs = null; + var properties = null; + var local_data = null; + + for (var j in info) + { + if(ignore_connections && (j == "outputs" || j == "inputs")) + continue; + + if(j == "console") continue; + + if(info[j] == null) + continue; + else if( info[j].concat ) //array + this[j] = info[j].concat(); + else if (typeof(info[j]) == 'object') //object + this[j] = jQuery.extend({}, info[j]); + else //value + this[j] = info[j]; + } + + //redo the connections + /* + if(outputs) + this.outputs = outputs.concat(); + if(inputs) + this.inputs = inputs.concat(); + + if(local_data) + this.data = local_data; + if(properties) + { + //copy only the ones defined + for (var j in properties) + if (this.properties[j] != null) + this.properties[j] = properties[j]; + } + */ +} + +/* Creates a clone of this node */ +LGraphNode.prototype.clone = function() +{ + var node = LiteGraph.createNode(this.type); + + node.size = this.size.concat(); + if(this.inputs) + for(var i = 0, l = this.inputs.length; i < l; ++i) + { + if(node.findInputSlot( this.inputs[i].name ) == -1) + node.addInput( this.inputs[i].name, this.inputs[i].type ); + } + + if(this.outputs) + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + if(node.findOutputSlot( this.outputs[i].name ) == -1) + node.addOutput( this.outputs[i].name, this.outputs[i].type ); + } + + + return node; +} + +/* Console output */ +LGraphNode.prototype.trace = function(msg) +{ + if(!this.console) + this.console = []; + this.console.push(msg); + + this.graph.onNodeTrace(this,msg); +} + +/* Forces to redraw or the main canvas (LGraphNode) or the bg canvas (links) */ +LGraphNode.prototype.setDirtyCanvas = function(dirty_foreground, dirty_background) +{ + if(!this.graph || !this.graph.canvas) + return; + + if(dirty_foreground) + this.graph.canvas.dirty_canvas = true; + if(dirty_background) + this.graph.canvas.dirty_bgcanvas = true; +} + +LGraphNode.prototype.loadImage = function(url) +{ + var img = new Image(); + img.src = LiteGraph.node_images_path + url; + img.ready = false; + + var that = this; + img.onload = function() { + this.ready = true; + that.setDirtyCanvas(true); + } + return img; +} + +//safe LGraphNode action execution (not sure if safe) +LGraphNode.prototype.executeAction = function(action) +{ + if(action == "") return false; + + if( action.indexOf(";") != -1 || action.indexOf("}") != -1) + { + this.trace("Error: Action contains unsafe characters"); + return false; + } + + var tokens = action.split("("); + var func_name = tokens[0]; + if( typeof(this[func_name]) != "function") + { + this.trace("Error: Action not found on node: " + func_name); + return false; + } + + var code = action; + + try + { + var _foo = eval; + eval = null; + (new Function("with(this) { " + code + "}")).call(this); + eval = _foo; + } + catch (err) + { + this.trace("Error executing action {" + action + "} :" + err); + return false; + } + + return true; +} + +/* 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.canvas) + return; + + //releasing somebody elses capture?! + if(!v && this.graph.canvas.node_capturing_input != this) + return; + + //change + this.graph.canvas.node_capturing_input = v ? this : null; + if(this.graph.debug) + console.log(this.name + ": Capturing input " + (v?"ON":"OFF")); +} + +/* Collapse the node */ +LGraphNode.prototype.collapse = function() +{ + if(!this.flags.collapsed) + this.flags.collapsed = true; + else + this.flags.collapsed = false; + this.setDirtyCanvas(true,true); +} + +/* Forces the node to do not move or realign on Z */ +LGraphNode.prototype.pin = function() +{ + if(!this.flags.pinned) + this.flags.pinned = true; + else + this.flags.pinned = false; +} + +LGraphNode.prototype.localToScreen = function(x,y) +{ + return [(x + this.pos[0]) * this.graph.config.canvas_scale + this.graph.config.canvas_offset[0], + (y + this.pos[1]) * this.graph.config.canvas_scale + this.graph.config.canvas_offset[1]]; +} + + + +//********************************************************************************* +// LGraphCanvas: LGraph renderer CLASS +//********************************************************************************* + +function LGraphCanvas(canvas, graph) +{ + if(graph === undefined) + throw ("No graph assigned"); + + if( typeof(window) != "undefined" ) + { + window.requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + function( callback ){ + window.setTimeout(callback, 1000 / 60); + }; + })(); + } + + //link canvas and graph + this.graph = graph; + if(graph) + graph.canvas = this; + + this.setCanvas(canvas); + this.clear(); + + this.startRendering(); +} + +LGraphCanvas.link_type_colors = {'number':"#AAC",'node':"#DCA"}; +LGraphCanvas.link_width = 2; + +LGraphCanvas.prototype.clear = function() +{ + this.frame = 0; + this.last_draw_time = 0; + this.render_time = 0; + this.fps = 0; + + this.selected_nodes = {}; + this.node_dragged = null; + this.node_over = null; + this.node_capturing_input = null; + this.connecting_node = null; + + this.highquality_render = true; + this.pause_rendering = false; + this.render_shadows = true; + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + this.dirty_area = null; + + this.render_only_selected = true; + this.live_mode = false; + this.show_info = true; + this.allow_dragcanvas = true; + this.allow_dragnodes = true; + + this.node_in_panel = null; + + this.last_mouse = [0,0]; + this.last_mouseclick = 0; + + if(this.onClear) this.onClear(); + //this.UIinit(); +} + +LGraphCanvas.prototype.setGraph = function(graph) +{ + if(this.graph == graph) return; + + this.clear(); + if(this.graph) + this.graph.canvas = null; //remove old graph link to the canvas + this.graph = graph; + if(this.graph) + this.graph.canvas = this; + this.setDirty(true,true); +} + +LGraphCanvas.prototype.resize = function(width, height) +{ + if(this.canvas.width == width && this.canvas.height == height) + return; + + this.canvas.width = width; + this.canvas.height = height; + this.bgcanvas.width = this.canvas.width; + this.bgcanvas.height = this.canvas.height; + this.setDirty(true,true); +} + + +LGraphCanvas.prototype.setCanvas = function(canvas) +{ + var that = this; + + //Canvas association + if(typeof(canvas) == "string") + canvas = document.getElementById(canvas); + + if(canvas == null) + throw("Error creating LiteGraph canvas: Canvas not found"); + if(canvas == this.canvas) return; + + this.canvas = canvas; + //this.canvas.tabindex = "1000"; + this.canvas.className += " lgraphcanvas"; + this.canvas.data = this; + + //bg canvas: used for non changing stuff + this.bgcanvas = null; + if(!this.bgcanvas) + { + this.bgcanvas = document.createElement("canvas"); + this.bgcanvas.width = this.canvas.width; + this.bgcanvas.height = this.canvas.height; + } + + if(this.canvas.getContext == null) + { + throw("This browser doesnt support Canvas"); + } + + this.ctx = this.canvas.getContext("2d"); + this.bgctx = this.bgcanvas.getContext("2d"); + + //input: (move and up could be unbinded) + this._mousemove_callback = this.processMouseMove.bind(this); + this._mouseup_callback = this.processMouseUp.bind(this); + + this.canvas.addEventListener("mousedown", this.processMouseDown.bind(this) ); //down do not need to store the binded + this.canvas.addEventListener("mousemove", this._mousemove_callback); + + this.canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); + + + this.canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); + this.canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); + + //touch events + //if( 'touchstart' in document.documentElement ) + { + //alert("doo"); + this.canvas.addEventListener("touchstart", this.touchHandler, true); + this.canvas.addEventListener("touchmove", this.touchHandler, true); + this.canvas.addEventListener("touchend", this.touchHandler, true); + this.canvas.addEventListener("touchcancel", this.touchHandler, true); + } + + //this.canvas.onselectstart = function () { return false; }; + this.canvas.addEventListener("keydown", function(e) { + that.processKeyDown(e); + }); + + this.canvas.addEventListener("keyup", function(e) { + that.processKeyUp(e); + }); +} + +/* +LGraphCanvas.prototype.UIinit = function() +{ + var that = this; + $("#node-console input").change(function(e) + { + if(e.target.value == "") + return; + + var node = that.node_in_panel; + if(!node) + return; + + node.trace("] " + e.target.value, "#333"); + if(node.onConsoleCommand) + { + if(!node.onConsoleCommand(e.target.value)) + node.trace("command not found", "#A33"); + } + else if (e.target.value == "info") + { + node.trace("Special methods:"); + for(var i in node) + { + if(typeof(node[i]) == "function" && LGraphNode.prototype[i] == null && i.substr(0,2) != "on" && i[0] != "_") + node.trace(" + " + i); + } + } + else + { + try + { + eval("var _foo = function() { return ("+e.target.value+"); }"); + var result = _foo.call(node); + if(result) + node.trace(result.toString()); + delete window._foo; + } + catch(err) + { + node.trace("error: " + err, "#A33"); + } + } + + this.value = ""; + }); +} +*/ + +LGraphCanvas.prototype.setDirty = function(fgcanvas,bgcanvas) +{ + if(fgcanvas) + this.dirty_canvas = true; + if(bgcanvas) + this.dirty_bgcanvas = true; +} + +LGraphCanvas.prototype.startRendering = function() +{ + if(this.is_rendering) return; //already rendering + + this.is_rendering = true; + renderFrame.call(this); + + function renderFrame() + { + if(!this.pause_rendering) + this.draw(); + + if(this.is_rendering) + window.requestAnimFrame( renderFrame.bind(this) ); + } + + + /* + this.rendering_timer_id = setInterval( function() { + //trace("Frame: " + new Date().getTime() ); + that.draw(); + }, 1000/50); + */ +} + +LGraphCanvas.prototype.stopRendering = function() +{ + this.is_rendering = false; + /* + if(this.rendering_timer_id) + { + clearInterval(this.rendering_timer_id); + this.rendering_timer_id = null; + } + */ +} + +/* LiteGraphCanvas input */ + +LGraphCanvas.prototype.processMouseDown = function(e) +{ + if(!this.graph) return; + + this.adjustMouseEvent(e); + + this.canvas.removeEventListener("mousemove", this._mousemove_callback ); + document.addEventListener("mousemove", this._mousemove_callback ); + document.addEventListener("mouseup", this._mouseup_callback ); + + var n = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes); + var skip_dragging = false; + + if(e.which == 1) //left button mouse + { + //another node selected + if(!e.shiftKey) //REFACTOR: integrate with function + { + var todeselect = []; + for(var i in this.selected_nodes) + if (this.selected_nodes[i] != n) + todeselect.push(this.selected_nodes[i]); + //two passes to avoid problems modifying the container + for(var i in todeselect) + this.processNodeDeselected(todeselect[i]); + } + var clicking_canvas_bg = false; + + //when clicked on top of a node + //and it is not interactive + if(n) + { + if(!this.live_mode && !n.flags.pinned) + this.bringToFront(n); //if it wasnt selected? + var skip_action = false; + + //not dragging mouse to connect two slots + if(!this.connecting_node && !n.flags.collapsed && !this.live_mode) + { + //search for outputs + if(n.outputs) + for(var i = 0, l = n.outputs.length; i < l; ++i) + { + var output = n.outputs[i]; + var link_pos = n.getConnectionPos(false,i); + if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 10, link_pos[1] - 5, 20,10) ) + { + this.connecting_node = n; + this.connecting_output = output; + this.connecting_pos = n.getConnectionPos(false,i); + this.connecting_slot = i; + + skip_action = true; + break; + } + } + + //search for inputs + if(n.inputs) + for(var i = 0, l = n.inputs.length; i < l; ++i) + { + var input = n.inputs[i]; + var link_pos = n.getConnectionPos(true,i); + if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 10, link_pos[1] - 5, 20,10) ) + { + if(input.link) + { + n.disconnectInput(i); + this.dirty_bgcanvas = true; + skip_action = true; + } + } + } + + //Search for corner + if( !skip_action && isInsideRectangle(e.canvasX, e.canvasY, n.pos[0] + n.size[0] - 5, n.pos[1] + n.size[1] - 5 ,5,5 )) + { + this.resizing_node = n; + this.canvas.style.cursor = "se-resize"; + skip_action = true; + } + } + + //it wasnt clicked on the links boxes + if(!skip_action) + { + var block_drag_node = false; + + //double clicking + var now = new Date().getTime(); + if ((now - this.last_mouseclick) < 300 && this.selected_nodes[n.id]) + { + //double click node + if( n.onDblClick) + n.onDblClick(e); + this.processNodeDblClicked(n); + block_drag_node = true; + } + + //if do not capture mouse + + if( n.onMouseDown && n.onMouseDown(e) ) + block_drag_node = true; + else if(this.live_mode) + { + clicking_canvas_bg = true; + block_drag_node = true; + } + + if(!block_drag_node) + { + if(this.allow_dragnodes) + this.node_dragged = n; + + if(!this.selected_nodes[n.id]) + this.processNodeSelected(n,e); + } + + this.dirty_canvas = true; + } + } + else + clicking_canvas_bg = true; + + if(clicking_canvas_bg && this.allow_dragcanvas) + { + this.dragging_canvas = true; + } + } + else if (e.which == 2) //middle button + { + + } + else if (e.which == 3) //right button + { + this.processContextualMenu(n,e); + } + + //TODO + //if(this.node_selected != prev_selected) + // this.onNodeSelectionChange(this.node_selected); + + this.last_mouse[0] = e.localX; + this.last_mouse[1] = e.localY; + this.last_mouseclick = new Date().getTime(); + this.canvas_mouse = [e.canvasX, e.canvasY]; + + /* + if( (this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null) + this.draw(); + */ + + this.graph.change(); + + //this is to ensure to defocus(blur) if a text input element is on focus + if(!document.activeElement || (document.activeElement.nodeName.toLowerCase() != "input" && document.activeElement.nodeName.toLowerCase() != "textarea")) + e.preventDefault(); + e.stopPropagation(); + return false; +} + +LGraphCanvas.prototype.processMouseMove = function(e) +{ + if(!this.graph) return; + + this.adjustMouseEvent(e); + var mouse = [e.localX, e.localY]; + var delta = [mouse[0] - this.last_mouse[0], mouse[1] - this.last_mouse[1]]; + this.last_mouse = mouse; + this.canvas_mouse = [e.canvasX, e.canvasY]; + + if(this.dragging_canvas) + { + this.graph.config.canvas_offset[0] += delta[0] / this.graph.config.canvas_scale; + this.graph.config.canvas_offset[1] += delta[1] / this.graph.config.canvas_scale; + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + } + else + { + if(this.connecting_node) + this.dirty_canvas = true; + + //get node over + var n = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes); + + //remove mouseover flag + for(var i in this.graph.nodes) + { + if(this.graph.nodes[i].mouseOver && n != this.graph.nodes[i]) + { + //mouse leave + this.graph.nodes[i].mouseOver = false; + if(this.node_over && this.node_over.onMouseLeave) + this.node_over.onMouseLeave(e); + this.node_over = null; + this.dirty_canvas = true; + } + } + + //mouse over a node + if(n) + { + //this.canvas.style.cursor = "move"; + if(!n.mouseOver) + { + //mouse enter + n.mouseOver = true; + this.node_over = n; + this.dirty_canvas = true; + + if(n.onMouseEnter) n.onMouseEnter(e); + } + + if(n.onMouseMove) n.onMouseMove(e); + + //ontop of input + if(this.connecting_node) + { + var pos = this._highlight_input || [0,0]; + var slot = this.isOverNodeInput(n, e.canvasX, e.canvasY, pos); + if(slot != -1 && n.inputs[slot]) + { + var slot_type = n.inputs[slot].type; + if(slot_type == this.connecting_output.type || slot_type == "*" || this.connecting_output.type == "*") + this._highlight_input = pos; + } + else + this._highlight_input = null; + } + + //Search for corner + if( isInsideRectangle(e.canvasX, e.canvasY, n.pos[0] + n.size[0] - 5, n.pos[1] + n.size[1] - 5 ,5,5 )) + this.canvas.style.cursor = "se-resize"; + else + this.canvas.style.cursor = null; + } + else + this.canvas.style.cursor = null; + + if(this.node_capturing_input && this.node_capturing_input != n && this.node_capturing_input.onMouseMove) + { + this.node_capturing_input.onMouseMove(e); + } + + + if(this.node_dragged && !this.live_mode) + { + /* + this.node_dragged.pos[0] += delta[0] / this.graph.config.canvas_scale; + this.node_dragged.pos[1] += delta[1] / this.graph.config.canvas_scale; + this.node_dragged.pos[0] = Math.round(this.node_dragged.pos[0]); + this.node_dragged.pos[1] = Math.round(this.node_dragged.pos[1]); + */ + + for(var i in this.selected_nodes) + { + var n = this.selected_nodes[i]; + + n.pos[0] += delta[0] / this.graph.config.canvas_scale; + n.pos[1] += delta[1] / this.graph.config.canvas_scale; + n.pos[0] = Math.round(n.pos[0]); + n.pos[1] = Math.round(n.pos[1]); + } + + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + } + + if(this.resizing_node && !this.live_mode) + { + this.resizing_node.size[0] += delta[0] / this.graph.config.canvas_scale; + this.resizing_node.size[1] += delta[1] / this.graph.config.canvas_scale; + var max_slots = Math.max( this.resizing_node.inputs ? this.resizing_node.inputs.length : 0, this.resizing_node.outputs ? this.resizing_node.outputs.length : 0); + if(this.resizing_node.size[1] < max_slots * LiteGraph.NODE_SLOT_HEIGHT + 4) + this.resizing_node.size[1] = max_slots * LiteGraph.NODE_SLOT_HEIGHT + 4; + 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; + this.dirty_bgcanvas = true; + } + } + + /* + if((this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null) + this.draw(); + */ + + e.preventDefault(); + e.stopPropagation(); + return false; + //this is not really optimal + //this.graph.change(); +} + +LGraphCanvas.prototype.processMouseUp = function(e) +{ + if(!this.graph) return; + + document.removeEventListener("mousemove", this._mousemove_callback, true ); + this.canvas.addEventListener("mousemove", this._mousemove_callback, true); + document.removeEventListener("mouseup", this._mouseup_callback, true ); + + this.adjustMouseEvent(e); + + if (e.which == 1) //left button + { + //dragging a connection + if(this.connecting_node) + { + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + + var node = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes); + + //node below mouse + if(node) + { + + if(this.connecting_output.type == 'node') + { + this.connecting_node.connect(this.connecting_slot, node, -1); + } + else + { + //slot below mouse? connect + var slot = this.isOverNodeInput(node, e.canvasX, e.canvasY); + if(slot != -1) + { + this.connecting_node.connect(this.connecting_slot, node, slot); + } + } + } + + this.connecting_output = null; + this.connecting_pos = null; + this.connecting_node = null; + this.connecting_slot = -1; + + }//not dragging connection + else if(this.resizing_node) + { + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + this.resizing_node = null; + } + else if(this.node_dragged) //node being dragged? + { + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + + if(this.graph.config.align_to_grid) + this.node_dragged.alignToGrid(); + this.node_dragged = null; + } + else //no node being dragged + { + this.dirty_canvas = true; + this.dragging_canvas = false; + + if( this.node_over && this.node_over.onMouseUp ) + this.node_over.onMouseUp(e); + if( this.node_capturing_input && this.node_capturing_input.onMouseUp ) + this.node_capturing_input.onMouseUp(e); + } + } + else if (e.which == 2) //middle button + { + //trace("middle"); + this.dirty_canvas = true; + this.dragging_canvas = false; + } + else if (e.which == 3) //right button + { + //trace("right"); + this.dirty_canvas = true; + this.dragging_canvas = false; + } + + /* + if((this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null) + this.draw(); + */ + + this.graph.change(); + + e.stopPropagation(); + e.preventDefault(); + return false; +} + +LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos) +{ + if(node.inputs) + for(var i = 0, l = node.inputs.length; i < l; ++i) + { + var input = node.inputs[i]; + var link_pos = node.getConnectionPos(true,i); + if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) ) + { + if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] }; + return i; + } + } + return -1; +} + +LGraphCanvas.prototype.processKeyDown = function(e) +{ + if(!this.graph) return; + var block_default = false; + + //select all Control A + if(e.keyCode == 65 && e.ctrlKey) + { + this.selectAllNodes(); + block_default = true; + } + + //delete or backspace + if(e.keyCode == 46 || e.keyCode == 8) + { + this.deleteSelectedNodes(); + } + + //collapse + //... + + //TODO + if(this.selected_nodes) + for (var i in this.selected_nodes) + if(this.selected_nodes[i].onKeyDown) + this.selected_nodes[i].onKeyDown(e); + + this.graph.change(); + + if(block_default) + { + e.preventDefault(); + return false; + } +} + +LGraphCanvas.prototype.processKeyUp = function(e) +{ + if(!this.graph) return; + //TODO + if(this.selected_nodes) + for (var i in this.selected_nodes) + if(this.selected_nodes[i].onKeyUp) + this.selected_nodes[i].onKeyUp(e); + + this.graph.change(); +} + +LGraphCanvas.prototype.processMouseWheel = function(e) +{ + if(!this.graph) return; + if(!this.allow_dragcanvas) return; + + var delta = (e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60); + + this.adjustMouseEvent(e); + + var zoom = this.graph.config.canvas_scale; + + if (delta > 0) + zoom *= 1.1; + else if (delta < 0) + zoom *= 1/(1.1); + + this.setZoom( zoom, [ e.localX, e.localY ] ); + + /* + if(this.rendering_timer_id == null) + this.draw(); + */ + + this.graph.change(); + + e.preventDefault(); + return false; // prevent default +} + +LGraphCanvas.prototype.processNodeSelected = function(n,e) +{ + n.selected = true; + if (n.onSelected) + n.onSelected(); + + if(e && e.shiftKey) //add to selection + this.selected_nodes[n.id] = n; + else + { + this.selected_nodes = {}; + this.selected_nodes[ n.id ] = n; + } + + this.dirty_canvas = true; + + if(this.onNodeSelected) + this.onNodeSelected(n); + + //if(this.node_in_panel) this.showNodePanel(n); +} + +LGraphCanvas.prototype.processNodeDeselected = function(n) +{ + n.selected = false; + if(n.onDeselected) + n.onDeselected(); + + delete this.selected_nodes[n.id]; + + if(this.onNodeDeselected) + this.onNodeDeselected(); + + this.dirty_canvas = true; + + //this.showNodePanel(null); +} + +LGraphCanvas.prototype.processNodeDblClicked = function(n) +{ + if(this.onShowNodePanel) + this.onShowNodePanel(n); + + if(this.onNodeDblClicked) + this.onNodeDblClicked(n); + + this.setDirty(true); +} + +LGraphCanvas.prototype.selectNode = function(node) +{ + this.deselectAllNodes(); + + if(!node) + return; + + if(!node.selected && node.onSelected) + node.onSelected(); + node.selected = true; + this.selected_nodes[ node.id ] = node; + this.setDirty(true); +} + +LGraphCanvas.prototype.selectAllNodes = function() +{ + for(var i in this.graph.nodes) + { + var n = this.graph.nodes[i]; + if(!n.selected && n.onSelected) + n.onSelected(); + n.selected = true; + this.selected_nodes[this.graph.nodes[i].id] = n; + } + + this.setDirty(true); +} + +LGraphCanvas.prototype.deselectAllNodes = function() +{ + for(var i in this.selected_nodes) + { + var n = this.selected_nodes; + if(n.onDeselected) + n.onDeselected(); + n.selected = false; + } + this.selected_nodes = {}; + this.setDirty(true); +} + +LGraphCanvas.prototype.deleteSelectedNodes = function() +{ + for(var i in this.selected_nodes) + { + var m = this.selected_nodes[i]; + //if(m == this.node_in_panel) this.showNodePanel(null); + this.graph.remove(m); + } + this.selected_nodes = {}; + this.setDirty(true); +} + +LGraphCanvas.prototype.centerOnNode = function(node) +{ + this.graph.config.canvas_offset[0] = -node.pos[0] - node.size[0] * 0.5 + (this.canvas.width * 0.5 / this.graph.config.canvas_scale); + this.graph.config.canvas_offset[1] = -node.pos[1] - node.size[1] * 0.5 + (this.canvas.height * 0.5 / this.graph.config.canvas_scale); + this.setDirty(true,true); +} + +LGraphCanvas.prototype.adjustMouseEvent = function(e) +{ + var b = this.canvas.getBoundingClientRect(); + e.localX = e.pageX - b.left; + e.localY = e.pageY - b.top; + + e.canvasX = e.localX / this.graph.config.canvas_scale - this.graph.config.canvas_offset[0]; + e.canvasY = e.localY / this.graph.config.canvas_scale - this.graph.config.canvas_offset[1]; +} + +LGraphCanvas.prototype.setZoom = function(value, zooming_center) +{ + if(!zooming_center) + zooming_center = [this.canvas.width * 0.5,this.canvas.height * 0.5]; + + var center = this.convertOffsetToCanvas( zooming_center ); + + this.graph.config.canvas_scale = value; + + if(this.graph.config.canvas_scale > 4) + this.graph.config.canvas_scale = 4; + else if(this.graph.config.canvas_scale < 0.1) + this.graph.config.canvas_scale = 0.1; + + var new_center = this.convertOffsetToCanvas( zooming_center ); + var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]]; + + this.graph.config.canvas_offset[0] += delta_offset[0]; + this.graph.config.canvas_offset[1] += delta_offset[1]; + + this.dirty_canvas = true; + this.dirty_bgcanvas = true; +} + +LGraphCanvas.prototype.convertOffsetToCanvas = function(pos) +{ + return [pos[0] / this.graph.config.canvas_scale - this.graph.config.canvas_offset[0], pos[1] / this.graph.config.canvas_scale - this.graph.config.canvas_offset[1]]; +} + +LGraphCanvas.prototype.convertCanvasToOffset = function(pos) +{ + return [(pos[0] + this.graph.config.canvas_offset[0]) * this.graph.config.canvas_scale, + (pos[1] + this.graph.config.canvas_offset[1]) * this.graph.config.canvas_scale ]; +} + +LGraphCanvas.prototype.convertEventToCanvas = function(e) +{ + var rect = this.canvas.getClientRects()[0]; + return this.convertOffsetToCanvas([e.pageX - rect.left,e.pageY - rect.top]); +} + +LGraphCanvas.prototype.bringToFront = function(n) +{ + var i = this.graph.nodes.indexOf(n); + if(i == -1) return; + + this.graph.nodes.splice(i,1); + this.graph.nodes.push(n); +} + +LGraphCanvas.prototype.sendToBack = function(n) +{ + var i = this.graph.nodes.indexOf(n); + if(i == -1) return; + + this.graph.nodes.splice(i,1); + this.graph.nodes.unshift(n); +} + +/* Interaction */ + + + +/* LGraphCanvas render */ + +LGraphCanvas.prototype.computeVisibleNodes = function() +{ + var visible_nodes = []; + for (var i in this.graph.nodes) + { + var n = this.graph.nodes[i]; + + //skip rendering nodes in live mode + if(this.live_mode && !n.onDrawBackground && !n.onDrawForeground) + continue; + + if(!overlapBounding(this.visible_area, n.getBounding() )) + continue; //out of the visible area + + visible_nodes.push(n); + } + return visible_nodes; +} + +LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) +{ + //fps counting + var now = new Date().getTime(); + this.render_time = (now - this.last_draw_time)*0.001; + this.last_draw_time = now; + + if(this.graph) + { + var start = [-this.graph.config.canvas_offset[0], -this.graph.config.canvas_offset[1] ]; + var end = [start[0] + this.canvas.width / this.graph.config.canvas_scale, start[1] + this.canvas.height / this.graph.config.canvas_scale]; + this.visible_area = new Float32Array([start[0],start[1],end[0],end[1]]); + } + + if(this.dirty_bgcanvas || force_bgcanvas) + this.drawBgcanvas(); + + if(this.dirty_canvas || force_canvas) + this.drawFrontCanvas(); + + this.fps = this.render_time ? (1.0 / this.render_time) : 0; + this.frame += 1; +} + +LGraphCanvas.prototype.drawFrontCanvas = function() +{ + var ctx = this.ctx; + var canvas = this.canvas; + + //reset in case of error + ctx.restore(); + ctx.setTransform(1, 0, 0, 1, 0, 0); + + //clip dirty area if there is one, otherwise work in full canvas + if(this.dirty_area) + { + ctx.save(); + ctx.beginPath(); + ctx.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]); + ctx.clip(); + } + + //clear + //canvas.width = canvas.width; + ctx.clearRect(0,0,canvas.width, canvas.height); + + //draw bg canvas + ctx.drawImage(this.bgcanvas,0,0); + + //info widget + if(this.show_info) + { + ctx.font = "10px Arial"; + ctx.fillStyle = "#888"; + if(this.graph) + { + ctx.fillText( "T: " + this.graph.globaltime.toFixed(2)+"s",5,13*1 ); + ctx.fillText( "I: " + this.graph.iteration,5,13*2 ); + ctx.fillText( "F: " + this.frame,5,13*3 ); + ctx.fillText( "FPS:" + this.fps.toFixed(2),5,13*4 ); + } + else + ctx.fillText( "No graph selected",5,13*1 ); + } + + if(this.graph) + { + //apply transformations + ctx.save(); + ctx.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale); + ctx.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]); + + //draw nodes + var drawn_nodes = 0; + var visible_nodes = this.computeVisibleNodes(); + this.visible_nodes = visible_nodes; + + for (var i in visible_nodes) + { + var n = visible_nodes[i]; + + //transform coords system + ctx.save(); + ctx.translate( n.pos[0], n.pos[1] ); + + //Draw + n.draw(ctx,this); + drawn_nodes += 1; + + //Restore + ctx.restore(); + } + + //connections ontop? + if(this.graph.config.links_ontop) + if(!this.live_mode) + this.drawConnections(ctx); + + //current connection + if(this.connecting_pos != null) + { + ctx.lineWidth = LGraphCanvas.link_width; + ctx.fillStyle = this.connecting_output.type == 'node' ? "#F85" : "#AFA"; + ctx.strokeStyle = ctx.fillStyle; + this.renderLink(ctx, this.connecting_pos, [this.canvas_mouse[0],this.canvas_mouse[1]] ); + + ctx.beginPath(); + ctx.arc( this.connecting_pos[0], this.connecting_pos[1],4,0,Math.PI*2); + /* + if( this.connecting_output.round) + ctx.arc( this.connecting_pos[0], this.connecting_pos[1],4,0,Math.PI*2); + else + ctx.rect( this.connecting_pos[0], this.connecting_pos[1],12,6); + */ + ctx.fill(); + + ctx.fillStyle = "#ffcc00"; + if(this._highlight_input) + { + ctx.beginPath(); + ctx.arc( this._highlight_input[0], this._highlight_input[1],6,0,Math.PI*2); + ctx.fill(); + } + } + ctx.restore(); + } + + if(this.dirty_area) + { + ctx.restore(); + //this.dirty_area = null; + } + + this.dirty_canvas = false; +} + +LGraphCanvas.prototype.drawBgcanvas = function() +{ + var canvas = this.bgcanvas; + var ctx = this.bgctx; + + + //clear + canvas.width = canvas.width; + + //reset in case of error + ctx.restore(); + ctx.setTransform(1, 0, 0, 1, 0, 0); + + if(this.graph) + { + //apply transformations + ctx.save(); + ctx.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale); + ctx.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]); + + //render BG + if(this.background_image && this.graph.config.canvas_scale > 0.5) + { + ctx.globalAlpha = 1.0 - 0.5 / this.graph.config.canvas_scale; + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false + if(!this._bg_img || this._bg_img.name != this.background_image) + { + this._bg_img = new Image(); + this._bg_img.name = this.background_image; + this._bg_img.src = this.background_image; + var that = this; + this._bg_img.onload = function() { + that.draw(true,true); + } + } + + var pattern = null; + if(this._bg_img != this._pattern_img && this._bg_img.width > 0) + { + pattern = ctx.createPattern( this._bg_img, 'repeat' ); + this._pattern_img = this._bg_img; + this._pattern = pattern; + } + else + pattern = this._pattern; + if(pattern) + { + ctx.fillStyle = pattern; + ctx.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2]-this.visible_area[0],this.visible_area[3]-this.visible_area[1]); + ctx.fillStyle = "transparent"; + } + + ctx.globalAlpha = 1.0; + } + + //DEBUG: show clipping area + //ctx.fillStyle = "red"; + //ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20); + + //bg + ctx.strokeStyle = "#235"; + ctx.strokeRect(0,0,canvas.width,canvas.height); + + /* + if(this.render_shadows) + { + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = 6; + } + else + ctx.shadowColor = "rgba(0,0,0,0)"; + */ + + //draw connections + if(!this.live_mode) + this.drawConnections(ctx); + + //restore state + ctx.restore(); + } + + this.dirty_bgcanvas = false; + this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas +} + +LGraphCanvas.link_colors = ["#AAC","#ACA","#CAA"]; + +LGraphCanvas.prototype.drawConnections = function(ctx) +{ + //draw connections + ctx.lineWidth = LGraphCanvas.link_width; + + ctx.fillStyle = "#AAA"; + ctx.strokeStyle = "#AAA"; + //for every node + for (var n in this.graph.nodes) + { + var node = this.graph.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) + for(var i in node.inputs) + { + var input = node.inputs[i]; + if(!input || !input.link ) continue; + var link = input.link; + + var start_node = this.graph.getNodeById( link[1] ); + if(start_node == null) continue; + var start_node_slot = link[2]; + var start_node_slotpos = null; + + if(start_node_slot == -1) + start_node_slotpos = [start_node.pos[0] + 10, start_node.pos[1] + 10]; + else + start_node_slotpos = start_node.getConnectionPos(false, start_node_slot); + + var color = LGraphCanvas.link_type_colors[node.inputs[i].type]; + if(color == null) + color = LGraphCanvas.link_colors[node.id % LGraphCanvas.link_colors.length]; + ctx.fillStyle = ctx.strokeStyle = color; + this.renderLink(ctx, start_node_slotpos, node.getConnectionPos(true,i) ); + } + } +} + +LGraphCanvas.prototype.renderLink = function(ctx,a,b) +{ + var curved_lines = true; + + if(!this.highquality_render) + { + ctx.beginPath(); + ctx.moveTo(a[0],a[1]); + ctx.lineTo(b[0],b[1]); + ctx.stroke(); + return; + } + + var dist = distance(a,b); + + ctx.beginPath(); + + if(curved_lines) + { + ctx.moveTo(a[0],a[1]); + ctx.bezierCurveTo(a[0] + dist*0.25, a[1], + b[0] - dist*0.25 , b[1], + b[0] ,b[1] ); + } + else + { + ctx.moveTo(a[0]+10,a[1]); + ctx.lineTo(((a[0]+10) + (b[0]-10))*0.5,a[1]); + ctx.lineTo(((a[0]+10) + (b[0]-10))*0.5,b[1]); + ctx.lineTo(b[0]-10,b[1]); + } + ctx.stroke(); + + //render arrow + if(this.graph.config.canvas_scale > 0.6) + { + //get two points in the bezier curve + var pos = this.computeConnectionPoint(a,b,0.5); + var pos2 = this.computeConnectionPoint(a,b,0.51); + var angle = 0; + if(curved_lines) + angle = -Math.atan2( pos2[0] - pos[0], pos2[1] - pos[1]); + else + angle = b[1] > a[1] ? 0 : Math.PI; + + ctx.save(); + ctx.translate(pos[0],pos[1]); + ctx.rotate(angle); + ctx.beginPath(); + ctx.moveTo(-5,-5); + ctx.lineTo(0,+5); + ctx.lineTo(+5,-5); + ctx.fill(); + ctx.restore(); + } +} + +LGraphCanvas.prototype.computeConnectionPoint = function(a,b,t) +{ + var dist = distance(a,b); + var p0 = a; + var p1 = [ a[0] + dist*0.25, a[1] ]; + var p2 = [ b[0] - dist*0.25, b[1] ]; + var p3 = b; + + var c1 = (1-t)*(1-t)*(1-t); + var c2 = 3*((1-t)*(1-t))*t; + var c3 = 3*(1-t)*(t*t); + var c4 = t*t*t; + + var x = c1*p0[0] + c2*p1[0] + c3*p2[0] + c4*p3[0]; + var y = c1*p0[1] + c2*p1[1] + c3*p2[1] + c4*p3[1]; + return [x,y]; +} + +LGraphCanvas.prototype.resizeCanvas = function(width,height) +{ + this.canvas.width = width; + if(height) + this.canvas.height = height; + + this.bgcanvas.width = this.canvas.width; + this.bgcanvas.height = this.canvas.height; + this.draw(true,true); +} + +LGraphCanvas.prototype.switchLiveMode = function() +{ + this.live_mode = !this.live_mode; + this.dirty_canvas = true; + this.dirty_bgcanvas = true; +} + +LGraphCanvas.prototype.onNodeSelectionChange = function(node) +{ + return; //disabled + //if(this.node_in_panel) this.showNodePanel(node); +} + +LGraphCanvas.prototype.touchHandler = function(event) +{ + //alert("foo"); + var touches = event.changedTouches, + first = touches[0], + type = ""; + + switch(event.type) + { + case "touchstart": type = "mousedown"; break; + case "touchmove": type="mousemove"; break; + case "touchend": type="mouseup"; break; + default: return; + } + + //initMouseEvent(type, canBubble, cancelable, view, clickCount, + // screenX, screenY, clientX, clientY, ctrlKey, + // altKey, shiftKey, metaKey, button, relatedTarget); + + var simulatedEvent = document.createEvent("MouseEvent"); + simulatedEvent.initMouseEvent(type, true, true, window, 1, + first.screenX, first.screenY, + first.clientX, first.clientY, false, + false, false, false, 0/*left*/, null); + first.target.dispatchEvent(simulatedEvent); + event.preventDefault(); +} + +/* CONTEXT MENU ********************/ + +LGraphCanvas.onMenuAdd = function(node, e, prev_menu, canvas, first_event ) +{ + var values = LiteGraph.getNodeTypesCategories(); + var entries = {}; + for(var i in values) + if(values[i]) + entries[ i ] = { value: values[i], content: values[i] , is_menu: true }; + + var menu = LiteGraph.createContextualMenu(entries, {event: e, callback: inner_clicked, from: prev_menu}); + + function inner_clicked(v, e) + { + var category = v.value; + var node_types = LiteGraph.getNodeTypesInCategory(category); + var values = []; + for(var i in node_types) + values.push( { content: node_types[i].title, value: node_types[i].type }); + + LiteGraph.createContextualMenu(values, {event: e, callback: inner_create, from: menu}); + return false; + } + + function inner_create(v, e) + { + var node = LiteGraph.createNode( v.value ); + if(node) + { + node.pos = canvas.convertEventToCanvas(first_event); + canvas.graph.add( node ); + } + } + + return false; +} + +LGraphCanvas.onMenuCollapseAll = function() +{ + +} + + +LGraphCanvas.onMenuNodeEdit = function() +{ + +} + +LGraphCanvas.onMenuNodeInputs = function(node, e, prev_menu) +{ + if(!node) return; + + var options = node.optional_inputs; + if(node.onGetInputs) + options = node.onGetInputs(); + if(options) + { + var entries = []; + for (var i in options) + { + var option = options[i]; + var label = option[0]; + if(option[2] && option[2].label) + label = option[2].label; + entries.push({content: label, value: option}); + } + var menu = LiteGraph.createContextualMenu(entries, {event: e, callback: inner_clicked, from: prev_menu}); + } + + function inner_clicked(v) + { + if(!node) return; + node.addInput(v.value[0],v.value[1], v.value[2]); + } + + return false; +} + +LGraphCanvas.onMenuNodeOutputs = function(node, e, prev_menu) +{ + if(!node) return; + + var options = node.optional_outputs; + if(node.onGetOutputs) + options = node.onGetOutputs(); + if(options) + { + var entries = []; + for (var i in options) + { + if(node.findOutputSlot(options[i][0]) != -1) + continue; //skip the ones already on + entries.push({content: options[i][0], value: options[i]}); + } + if(entries.length) + var menu = LiteGraph.createContextualMenu(entries, {event: e, callback: inner_clicked, from: prev_menu}); + } + + function inner_clicked(v) + { + if(!node) return; + node.addOutput(v.value[0],v.value[1]); + } + + return false; +} + +LGraphCanvas.onMenuNodeCollapse = function(node) +{ + node.flags.collapsed = !node.flags.collapsed; + node.graph.canvas.setDirty(true,true); +} + +LGraphCanvas.onMenuNodeColors = function(node, e, prev_menu) +{ + var values = []; + for(var i in LGraphCanvas.node_colors) + { + var color = LGraphCanvas.node_colors[i]; + var value = {value:i, content:""+i+""}; + values.push(value); + } + LiteGraph.createContextualMenu(values, {event: e, callback: inner_clicked, from: prev_menu}); + + function inner_clicked(v) + { + if(!node) return; + var color = LGraphCanvas.node_colors[v.value]; + if(color) + { + node.color = color.color; + node.bgcolor = color.bgcolor; + node.graph.canvas.setDirty(true); + } + } + + return false; +} + +LGraphCanvas.onMenuNodeShapes = function(node,e) +{ + LiteGraph.createContextualMenu(["box","round","circle"], {event: e, callback: inner_clicked}); + + function inner_clicked(v) + { + if(!node) return; + node.shape = v; + node.graph.canvas.setDirty(true); + } + + return false; +} + +LGraphCanvas.onMenuNodeRemove = function(node) +{ + if(node.removable == false) return; + node.graph.remove(node); + node.graph.canvas.setDirty(true,true); +} + +LGraphCanvas.onMenuNodeClone = function(node) +{ + if(node.clonable == false) return; + var newnode = node.clone(); + if(!newnode) return; + newnode.pos = [node.pos[0]+5,node.pos[1]+5]; + node.graph.add(newnode); + node.graph.canvas.setDirty(true,true); +} + +LGraphCanvas.node_colors = { + "red": { color:"#FAA", bgcolor:"#A44" }, + "green": { color:"#AFA", bgcolor:"#4A4" }, + "blue": { color:"#AAF", bgcolor:"#44A" }, + "white": { color:"#FFF", bgcolor:"#AAA" } +}; + +LGraphCanvas.prototype.getCanvasMenuOptions = function() +{ + return [ + {content:"Add Node", is_menu: true, callback: LGraphCanvas.onMenuAdd } + //{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll } + ]; +} + +LGraphCanvas.prototype.getNodeMenuOptions = function(node) +{ + var options = [ + {content:"Inputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs }, + {content:"Outputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs }, + null, + {content:"Collapse", callback: LGraphCanvas.onMenuNodeCollapse }, + {content:"Colors", is_menu: true, callback: LGraphCanvas.onMenuNodeColors }, + {content:"Shapes", is_menu: true, callback: LGraphCanvas.onMenuNodeShapes }, + null, + {content:"Clone", callback: LGraphCanvas.onMenuNodeClone }, + null, + {content:"Remove", callback: LGraphCanvas.onMenuNodeRemove } + ]; + + if( node.clonable == false ) + options[7].disabled = true; + if( node.removable == false ) + options[9].disabled = true; + + if(node.onGetInputs && node.onGetInputs().length ) + options[0].disabled = false; + if(node.onGetOutputs && node.onGetOutputs().length ) + options[1].disabled = false; + + return options; +} + +LGraphCanvas.prototype.processContextualMenu = function(node,event) +{ + var that = this; + var menu = LiteGraph.createContextualMenu(node ? this.getNodeMenuOptions(node) : this.getCanvasMenuOptions(), {event: event, callback: inner_option_clicked}); + + function inner_option_clicked(v,e) + { + if(!v) return; + + if(v.callback) + return v.callback(node, e, menu, that, event ); + } +} + + + + + + +//API ************************************************* +//function roundRect(ctx, x, y, width, height, radius, radius_low) { +CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, radius_low) { + if ( radius === undefined ) { + radius = 5; + } + + if(radius_low === undefined) + radius_low = radius; + + this.beginPath(); + this.moveTo(x + radius, y); + this.lineTo(x + width - radius, y); + this.quadraticCurveTo(x + width, y, x + width, y + radius); + + this.lineTo(x + width, y + height - radius_low); + this.quadraticCurveTo(x + width, y + height, x + width - radius_low, y + height); + this.lineTo(x + radius_low, y + height); + this.quadraticCurveTo(x, y + height, x, y + height - radius_low); + this.lineTo(x, y + radius); + this.quadraticCurveTo(x, y, x + radius, y); +} + +function compareObjects(a,b) +{ + for(var i in a) + if(a[i] != b[i]) + return false; + return true; +} + +function distance(a,b) +{ + return Math.sqrt( (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1]) ); +} + +function colorToString(c) +{ + return "rgba(" + Math.round(c[0] * 255).toFixed() + "," + Math.round(c[1] * 255).toFixed() + "," + Math.round(c[2] * 255).toFixed() + "," + (c.length == 4 ? c[3].toFixed(2) : "1.0") + ")"; +} + +function isInsideRectangle(x,y, left, top, width, height) +{ + if (left < x && (left + width) > x && + top < y && (top + height) > y) + return true; + return false; +} + +//[minx,miny,maxx,maxy] +function growBounding(bounding, x,y) +{ + if(x < bounding[0]) + bounding[0] = x; + else if(x > bounding[2]) + bounding[2] = x; + + if(y < bounding[1]) + bounding[1] = y; + else if(y > bounding[3]) + bounding[3] = y; +} + +//point inside boundin box +function isInsideBounding(p,bb) +{ + if (p[0] < bb[0][0] || + p[1] < bb[0][1] || + p[0] > bb[1][0] || + p[1] > bb[1][1]) + return false; + return true; +} + +//boundings overlap, format: [start,end] +function overlapBounding(a,b) +{ + if ( a[0] > b[2] || + a[1] > b[3] || + a[2] < b[0] || + a[3] < b[1]) + return false; + return true; +} + +//Convert a hex value to its decimal value - the inputted hex must be in the +// format of a hex triplet - the kind we use for HTML colours. The function +// will return an array with three values. +function hex2num(hex) { + if(hex.charAt(0) == "#") hex = hex.slice(1); //Remove the '#' char - if there is one. + hex = hex.toUpperCase(); + var hex_alphabets = "0123456789ABCDEF"; + var value = new Array(3); + var k = 0; + var int1,int2; + for(var i=0;i<6;i+=2) { + int1 = hex_alphabets.indexOf(hex.charAt(i)); + int2 = hex_alphabets.indexOf(hex.charAt(i+1)); + value[k] = (int1 * 16) + int2; + k++; + } + return(value); +} +//Give a array with three values as the argument and the function will return +// the corresponding hex triplet. +function num2hex(triplet) { + var hex_alphabets = "0123456789ABCDEF"; + var hex = "#"; + var int1,int2; + for(var i=0;i<3;i++) { + int1 = triplet[i] / 16; + int2 = triplet[i] % 16; + + hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2); + } + return(hex); +} + +/* LiteGraph GUI elements *************************************/ + +LiteGraph.createContextualMenu = function(values,options) +{ + options = options || {}; + this.options = options; + + if(!options.from) + LiteGraph.closeAllContextualMenus(); + + var root = document.createElement("div"); + root.className = "litecontextualmenu litemenubar-panel"; + this.root = root; + var style = root.style; + + style.minWidth = "100px"; + style.minHeight = "20px"; + + style.position = "fixed"; + style.top = "100px"; + style.left = "100px"; + style.color = "#AAF"; + style.padding = "2px"; + style.borderBottom = "2px solid #AAF"; + style.backgroundColor = "#444"; + + //avoid a context menu in a context menu + root.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); + + for(var i in values) + { + var item = values[i]; + var element = document.createElement("div"); + element.className = "litemenu-entry"; + + if(item == null) + { + element.className = "litemenu-entry separator"; + root.appendChild(element); + continue; + } + + if(item.is_menu) + element.className += " submenu"; + + if(item.disabled) + element.className += " disabled"; + + element.style.cursor = "pointer"; + element.dataset["value"] = typeof(item) == "string" ? item : item.value; + element.data = item; + if(typeof(item) == "string") + element.innerHTML = values.constructor == Array ? values[i] : i; + else + element.innerHTML = item.content ? item.content : i; + + element.addEventListener("click", on_click ); + root.appendChild(element); + } + + root.addEventListener("mouseover", function(e) { + this.mouse_inside = true; + }); + + root.addEventListener("mouseout", function(e) { + //console.log("OUT!"); + var aux = e.toElement; + while(aux != this && aux != document) + aux = aux.parentNode; + + if(aux == this) return; + this.mouse_inside = false; + if(!this.block_close) + this.closeMenu(); + }); + + /* MS specific + root.addEventListener("mouseleave", function(e) { + + this.mouse_inside = false; + if(!this.block_close) + this.closeMenu(); + }); + */ + + //insert before checking position + document.body.appendChild(root); + + var root_rect = root.getClientRects()[0]; + + //link menus + if(options.from) + { + options.from.block_close = true; + } + + var left = options.left || 0; + var top = options.top || 0; + if(options.event) + { + left = (options.event.pageX - 10); + top = (options.event.pageY - 10); + if(options.left) + left = options.left; + + var rect = document.body.getClientRects()[0]; + + if(options.from) + { + var parent_rect = options.from.getClientRects()[0]; + left = parent_rect.left + parent_rect.width; + } + + + if(left > (rect.width - root_rect.width - 10)) + left = (rect.width - root_rect.width - 10); + if(top > (rect.height - root_rect.height - 10)) + top = (rect.height - root_rect.height - 10); + } + + root.style.left = left + "px"; + root.style.top = top + "px"; + + function on_click(e) { + var value = this.dataset["value"]; + var close = true; + if(options.callback) + { + var ret = options.callback.call(root, this.data, e ); + if( ret != undefined ) close = ret; + } + + if(close) + LiteGraph.closeAllContextualMenus(); + //root.closeMenu(); + } + + root.closeMenu = function() + { + if(options.from) + { + options.from.block_close = false; + if(!options.from.mouse_inside) + options.from.closeMenu(); + } + if(this.parentNode) + document.body.removeChild(this); + }; + + return root; +} + +LiteGraph.closeAllContextualMenus = function() +{ + var elements = document.querySelectorAll(".litecontextualmenu"); + if(!elements.length) return; + + var result = []; + for(var i = 0; i < elements.length; i++) + result.push(elements[i]); + + for(var i in result) + if(result[i].parentNode) + result[i].parentNode.removeChild( result[i] ); +} + +LiteGraph.extendClass = function(origin, target) +{ + for(var i in origin) //copy class properties + target[i] = origin[i]; + if(origin.prototype) //copy prototype properties + for(var i in origin.prototype) + target.prototype[i] = origin.prototype[i]; +} +//basic nodes + +LiteGraph.registerNodeType("basic/const",{ + title: "Const", + desc: "Constant", + outputs: [["value","number"]], + properties: {value:1.0}, + editable: { property:"value", type:"number" }, + + setValue: function(v) + { + if( typeof(v) == "string") v = parseFloat(v); + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + this.setOutputData(0, parseFloat( this.properties["value"] ) ); + }, + + onDrawBackground: function(ctx) + { + //show the current value + this.outputs[0].label = this.properties["value"].toFixed(3); + }, + + onWidget: function(e,widget) + { + if(widget.name == "value") + this.setValue(widget.value); + } +}); + +LiteGraph.registerNodeType("math/rand",{ + title: "Rand", + desc: "Random number", + outputs: [["value","number"]], + properties: {min:0,max:1}, + size: [60,20], + + onExecute: function() + { + var min = this.properties.min; + var max = this.properties.max; + this._last_v = Math.random() * (max-min) + min; + this.setOutputData(0, this._last_v ); + }, + + onDrawBackground: function(ctx) + { + //show the current value + if(this._last_v) + this.outputs[0].label = this._last_v.toFixed(3); + else + this.outputs[0].label = "?"; + } +}); + +LiteGraph.registerNodeType("math/clamp",{ + title: "Clamp", + desc: "Clamp number between min and max", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + properties: {min:0,max:1}, + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + v = Math.max(this.properties.min,v); + v = Math.min(this.properties.max,v); + this.setOutputData(0, v ); + } +}); + +LiteGraph.registerNodeType("math/abs",{ + title: "Abs", + desc: "Absolute", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + this.setOutputData(0, Math.abs(v) ); + } +}); + +LiteGraph.registerNodeType("math/floor",{ + title: "Floor", + desc: "Floor number to remove fractional part", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + this.setOutputData(0, v|1 ); + } +}); + + +LiteGraph.registerNodeType("math/frac",{ + title: "Frac", + desc: "Returns fractional part", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + this.setOutputData(0, v%1 ); + } +}); + + +LiteGraph.registerNodeType("basic/watch", { + title: "Watch", + desc: "Show value", + size: [60,20], + inputs: [["value",0,{label:""}]], + outputs: [["value",0,{label:""}]], + properties: {value:""}, + + onExecute: function() + { + this.properties.value = this.getInputData(0); + this.setOutputData(0, this.properties.value); + }, + + onDrawBackground: function(ctx) + { + //show the current value + if(this.inputs[0] && this.properties["value"] != null) + { + if (this.properties["value"].constructor === Number ) + this.inputs[0].label = this.properties["value"].toFixed(3); + else + this.inputs[0].label = this.properties["value"]; + } + } +}); + + +LiteGraph.registerNodeType("math/scale",{ + title: "Scale", + desc: "1 - value", + inputs: [["value","number",{label:""}]], + outputs: [["value","number",{label:""}]], + size:[70,20], + properties: {"factor":1}, + + onExecute: function() + { + var value = this.getInputData(0); + if(value != null) + this.setOutputData(0, value * this.properties.factor ); + } +}); + + +LiteGraph.registerNodeType("math/operation",{ + title: "Operation", + desc: "Easy math operators", + inputs: [["A","number"],["B","number"]], + outputs: [["A+B","number"]], + size: [80,20], + //optional_inputs: [["start","number"]], + + properties: {A:1.0, B:1.0}, + + setValue: function(v) + { + if( typeof(v) == "string") v = parseFloat(v); + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + var A = this.getInputData(0); + var B = this.getInputData(1); + if(A!=null) + this.properties["A"] = A; + else + A = this.properties["A"]; + + if(B!=null) + this.properties["B"] = B; + else + B = this.properties["B"]; + + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + var output = this.outputs[i]; + if(!output.links || !output.links.length) + continue; + switch( output.name ) + { + case "A+B": value = A+B; break; + case "A-B": value = A-B; break; + case "A*B": value = A*B; break; + case "A/B": value = A/B; break; + } + this.setOutputData(i, value ); + } + }, + + onGetOutputs: function() + { + return [["A-B","number"],["A*B","number"],["A/B","number"]]; + } +}); + +LiteGraph.registerNodeType("math/compare",{ + title: "Compare", + desc: "compares between two values", + + inputs: [["A","number"],["B","number"]], + outputs: [["A==B","number"],["A!=B","number"]], + properties:{A:0,B:0}, + onExecute: function() + { + var A = this.getInputData(0); + var B = this.getInputData(1); + if(A!=null) + this.properties["A"] = A; + else + A = this.properties["A"]; + + if(B!=null) + this.properties["B"] = B; + else + B = this.properties["B"]; + + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + var output = this.outputs[i]; + if(!output.links || !output.links.length) + continue; + switch( output.name ) + { + case "A==B": value = A==B; break; + case "A!=B": value = A!=B; break; + case "A>B": value = A>B; break; + case "A=B": value = A>=B; break; + } + this.setOutputData(i, value ); + } + }, + + onGetOutputs: function() + { + return [["A==B","number"],["A!=B","number"],["A>B","number"],["A=B","number"],["A<=B","number"]]; + } +}); + +if(window.math) //math library for safe math operations without eval +LiteGraph.registerNodeType("math/formula",{ + title: "Formula", + desc: "Compute safe formula", + inputs: [["x","number"],["y","number"]], + outputs: [["","number"]], + properties: {x:1.0, y:1.0, formula:"x+y"}, + + onExecute: function() + { + var x = this.getInputData(0); + var y = this.getInputData(1); + if(x != null) + this.properties["x"] = x; + else + x = this.properties["x"]; + + if(y!=null) + this.properties["y"] = y; + else + y = this.properties["y"]; + + var f = this.properties["formula"]; + var value = math.eval(f,{x:x,y:y,T: this.graph.globaltime }); + this.setOutputData(0, value ); + }, + + onDrawBackground: function() + { + var f = this.properties["formula"]; + this.outputs[0].label = f; + }, + + onGetOutputs: function() + { + return [["A-B","number"],["A*B","number"],["A/B","number"]]; + } +}); + + +LiteGraph.registerNodeType("math/trigonometry",{ + title: "Trigonometry", + desc: "Sin Cos Tan", + bgImageUrl: "nodes/imgs/icon-sin.png", + + inputs: [["v","number"]], + outputs: [["sin","number"]], + properties: {amplitude:1.0}, + size:[100,20], + + onExecute: function() + { + var v = this.getInputData(0); + var amp = this.properties["amplitude"]; + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + var output = this.outputs[i]; + switch( output.name ) + { + case "sin": value = Math.sin(v); break; + case "cos": value = Math.cos(v); break; + case "tan": value = Math.tan(v); break; + case "asin": value = Math.asin(v); break; + case "acos": value = Math.acos(v); break; + case "atan": value = Math.atan(v); break; + } + this.setOutputData(i, amp * value ); + } + }, + + onGetOutputs: function() + { + return [["sin","number"],["cos","number"],["tan","number"],["asin","number"],["acos","number"],["atan","number"]]; + } +}); + +//if glMatrix is installed... +if(window.glMatrix) +{ + LiteGraph.registerNodeType("math3d/vec3-to-xyz",{ + title: "Vec3->XYZ", + desc: "vector 3 to components", + inputs: [["vec3","vec3"]], + outputs: [["x","number"],["y","number"],["z","number"]], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + + this.setOutputData( 0, v[0] ); + this.setOutputData( 1, v[1] ); + this.setOutputData( 2, v[2] ); + } + }); + + LiteGraph.registerNodeType("math3d/xyz-to-vec3",{ + title: "XYZ->Vec3", + desc: "components to vector3", + inputs: [["x","number"],["y","number"],["z","number"]], + outputs: [["vec3","vec3"]], + + onExecute: function() + { + var x = this.getInputData(0); + if(x == null) x = 0; + var y = this.getInputData(1); + if(y == null) y = 0; + var z = this.getInputData(2); + if(z == null) z = 0; + + this.setOutputData( 0, vec3.fromValues(x,y,z) ); + } + }); + + LiteGraph.registerNodeType("math3d/rotation",{ + title: "Rotation", + desc: "rotation quaternion", + inputs: [["degrees","number"],["axis","vec3"]], + outputs: [["quat","quat"]], + properties: {angle:90.0, axis:[0,1,0]}, + + onExecute: function() + { + var angle = this.getInputData(0); + if(angle == null) angle = this.properties.angle; + var axis = this.getInputData(1); + if(axis == null) axis = this.properties.axis; + + var R = quat.setAxisAngle(quat.create(), axis, angle * 0.0174532925 ); + this.setOutputData( 0, R ); + } + }); + + LiteGraph.registerNodeType("math3d/rotate_vec3",{ + title: "Rot. Vec3", + desc: "rotate a point", + inputs: [["vec3","vec3"],["quat","quat"]], + outputs: [["result","vec3"]], + properties: {vec:[0,0,1]}, + + onExecute: function() + { + var vec = this.getInputData(0); + if(vec == null) vec = this.properties.vec; + var quat = this.getInputData(1); + if(quat == null) + this.setOutputData(vec); + else + this.setOutputData( 0, vec3.transformQuat( vec3.create(), vec, quat ) ); + } + }); + + + LiteGraph.registerNodeType("math3d/mult-quat",{ + title: "Mult. Quat", + desc: "rotate quaternion", + inputs: [["A","quat"],["B","quat"]], + outputs: [["A*B","quat"]], + + onExecute: function() + { + var A = this.getInputData(0); + if(A == null) return; + var B = this.getInputData(1); + if(B == null) return; + + var R = quat.multiply(quat.create(), A,B); + this.setOutputData( 0, R ); + } + }); + +} //glMatrix + + +/* +LiteGraph.registerNodeType("math/sinusoid",{ + title: "Sin", + desc: "Sinusoidal value generator", + bgImageUrl: "nodes/imgs/icon-sin.png", + + inputs: [["f",'number'],["q",'number'],["a",'number'],["t",'number']], + outputs: [["",'number']], + properties: {amplitude:1.0, freq: 1, phase:0}, + + onExecute: function() + { + var f = this.getInputData(0); + if(f != null) + this.properties["freq"] = f; + + var q = this.getInputData(1); + if(q != null) + this.properties["phase"] = q; + + var a = this.getInputData(2); + if(a != null) + this.properties["amplitude"] = a; + + var t = this.graph.getFixedTime(); + if(this.getInputData(3) != null) + t = this.getInputData(3); + // t = t/(2*Math.PI); t = (t-Math.floor(t))*(2*Math.PI); + + var v = this.properties["amplitude"] * Math.sin((2*Math.PI) * t * this.properties["freq"] + this.properties["phase"]); + this.setOutputData(0, v ); + }, + + onDragBackground: function(ctx) + { + this.boxcolor = colorToString(v > 0 ? [0.5,0.8,1,0.5] : [0,0,0,0.5]); + this.setDirtyCanvas(true); + }, +}); +*/ + +/* +LiteGraph.registerNodeType("basic/number",{ + title: "Number", + desc: "Fixed number output", + outputs: [["","number"]], + color: "#66A", + bgcolor: "#336", + widgets: [{name:"value",text:"Value",type:"input",property:"value"}], + + properties: {value:1.0}, + + setValue: function(v) + { + if( typeof(v) == "string") v = parseFloat(v); + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + this.outputs[0].name = this.properties["value"].toString(); + this.setOutputData(0, this.properties["value"]); + }, + + onWidget: function(e,widget) + { + if(widget.name == "value") + this.setValue(widget.value); + } +}); + + +LiteGraph.registerNodeType("basic/string",{ + title: "String", + desc: "Fixed string output", + outputs: [["","string"]], + color: "#66A", + bgcolor: "#336", + widgets: [{name:"value",text:"Value",type:"input"}], + + properties: {value:"..."}, + + setValue: function(v) + { + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + this.outputs[0].name = this.properties["value"].toString(); + this.setOutputData(0, this.properties["value"]); + }, + + onWidget: function(e,widget) + { + if(widget.name == "value") + this.setValue(widget.value); + } +}); + +LiteGraph.registerNodeType("basic/trigger",{ + title: "Trigger", + desc: "Triggers node action", + inputs: [["!0","number"]], + outputs: [["M","node"]], + + properties: {triggerName:null}, + + onExecute: function() + { + if( this.getInputData(0) ) + { + var m = this.getOutputNode(0); + if(m && m.onTrigger) + m.onTrigger(); + if(m && this.properties.triggerName && typeof(m[this.properties.triggerName]) == "function") + m[this.properties.triggerName].call(m); + } + } +}); + + +LiteGraph.registerNodeType("basic/switch",{ + title: "Switch", + desc: "Switch between two inputs", + inputs: [["i","number"],["A",0],["B",0]], + outputs: [["",0]], + + onExecute: function() + { + var f = this.getInputData(0); + if(f) + { + f = Math.round(f)+1; + if(f < 1) f = 1; + if(f > 2) f = 2; + this.setOutputData(0, this.getInputData(f) ); + } + else + this.setOutputData(0, null); + } +}); + +// System vars ********************************* + +LiteGraph.registerNodeType("session/info",{ + title: "Time", + desc: "Seconds since start", + + outputs: [["secs",'number']], + properties: {scale:1.0}, + onExecute: function() + { + this.setOutputData(0, this.session.getTime() * this.properties.scale); + } +}); + +LiteGraph.registerNodeType("system/fixedtime",{ + title: "F.Time", + desc: "Constant time value", + + outputs: [["secs",'number']], + properties: {scale:1.0}, + onExecute: function() + { + this.setOutputData(0, this.session.getFixedTime() * this.properties.scale); + } +}); + + +LiteGraph.registerNodeType("system/elapsedtime",{ + title: "Elapsed", + desc: "Seconds elapsed since last execution", + + outputs: [["secs",'number']], + properties: {scale:1.0}, + onExecute: function() + { + this.setOutputData(0, this.session.getElapsedTime() * this.properties.scale); + } +}); + +LiteGraph.registerNodeType("system/iterations",{ + title: "Iterations", + desc: "Number of iterations (executions)", + + outputs: [["",'number']], + onExecute: function() + { + this.setOutputData(0, this.session.iterations ); + } +}); + +LiteGraph.registerNodeType("system/trace",{ + desc: "Outputs input to browser's console", + + inputs: [["",0]], + onExecute: function() + { + var data = this.getInputData(0); + if(data) + trace("DATA: "+data); + } +}); + +/* +LiteGraph.registerNodeType("math/not",{ + title: "Not", + desc: "0 -> 1 or 0 -> 1", + inputs: [["A",'number']], + outputs: [["!A",'number']], + size: [60,22], + onExecute: function() + { + var v = this.getInputData(0); + if(v != null) + this.setOutputData(0, v ? 0 : 1); + } +}); + + + +// Nodes for network in and out +LiteGraph.registerNodeType("network/general/network_input",{ + title: "N.Input", + desc: "Network Input", + outputs: [["",0]], + color: "#00ff96", + bgcolor: "#004327", + + setValue: function(v) + { + this.value = v; + }, + + onExecute: function() + { + this.setOutputData(0, this.value); + } +}); + +LiteGraph.registerNodeType("network/general/network_output",{ + title: "N.Output", + desc: "Network output", + inputs: [["",0]], + color: "#a8ff00", + bgcolor: "#293e00", + + properties: {value:null}, + + getValue: function() + { + return this.value; + }, + + onExecute: function() + { + this.value = this.getOutputData(0); + } +}); + +LiteGraph.registerNodeType("network/network_trigger",{ + title: "N.Trigger", + desc: "Network input trigger", + outputs: [["",0]], + color: "#ff9000", + bgcolor: "#522e00", + + onTrigger: function(v) + { + this.triggerOutput(0,v); + }, +}); + +LiteGraph.registerNodeType("network/network_callback",{ + title: "N.Callback", + desc: "Network callback output.", + outputs: [["",0]], + color: "#6A6", + bgcolor: "#363", + + setTrigger: function(func) + { + this.callback = func; + }, + + onTrigger: function(v) + { + if(this.callback) + this.callback(v); + }, +}); + +*/ +//widgets + + LiteGraph.registerNodeType("widget/knob",{ + title: "Knob", + desc: "Circular controller", + size: [64,84], + outputs: [["",'number']], + properties: {min:0,max:1,value:0.5,wcolor:"#7AF",size:50}, + widgets: [{name:"increase",text:"+",type:"minibutton"},{name:"decrease",text:"-",type:"minibutton"}], + + onInit: function() + { + this.value = (this.properties["value"] - this.properties["min"]) / (this.properties["max"] - this.properties["min"]); + + this.imgbg = this.loadImage("imgs/knob_bg.png"); + this.imgfg = this.loadImage("imgs/knob_fg.png"); + }, + + onDrawImageKnob: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + var d = this.imgbg.width*0.5; + var scale = this.size[0] / this.imgfg.width; + + ctx.save(); + ctx.translate(0,20); + ctx.scale(scale,scale); + ctx.drawImage(this.imgbg,0,0); + //ctx.drawImage(this.imgfg,0,20); + + ctx.translate(d,d); + ctx.rotate(this.value * (Math.PI*2) * 6/8 + Math.PI * 10/8); + //ctx.rotate(this.value * (Math.PI*2)); + ctx.translate(-d,-d); + ctx.drawImage(this.imgfg,0,0); + + ctx.restore(); + + ctx.font = "bold 16px Criticized,Tahoma"; + ctx.fillStyle="rgba(100,100,100,0.8)"; + ctx.textAlign = "center"; + + ctx.fillText(this.name.toUpperCase(), this.size[0] * 0.5, 18 ); + ctx.textAlign = "left"; + }, + + onDrawVectorKnob: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + //circle around + ctx.lineWidth = 1; + ctx.strokeStyle= this.mouseOver ? "#FFF" : "#AAA"; + ctx.fillStyle="#000"; + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5,this.size[1] * 0.5 + 10,this.properties.size * 0.5,0,Math.PI*2,true); + ctx.stroke(); + + if(this.value > 0) + { + ctx.strokeStyle=this.properties["wcolor"]; + ctx.lineWidth = (this.properties.size * 0.2); + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5,this.size[1] * 0.5 + 10,this.properties.size * 0.35,Math.PI * -0.5 + Math.PI*2 * this.value,Math.PI * -0.5,true); + ctx.stroke(); + ctx.lineWidth = 1; + } + + ctx.font = (this.properties.size * 0.2) + "px Arial"; + ctx.fillStyle="#AAA"; + ctx.textAlign = "center"; + + var str = this.properties["value"]; + if(typeof(str) == 'number') + str = str.toFixed(2); + + ctx.fillText(str,this.size[0] * 0.5,this.size[1]*0.65); + ctx.textAlign = "left"; + }, + + onDrawBackground: function(ctx) + { + this.onDrawImageKnob(ctx); + }, + + onExecute: function() + { + this.setOutputData(0, this.properties["value"] ); + + this.boxcolor = colorToString([this.value,this.value,this.value]); + }, + + onMouseDown: function(e) + { + if(!this.imgfg || !this.imgfg.width) return; + + //this.center = [this.imgbg.width * 0.5, this.imgbg.height * 0.5 + 20]; + //this.radius = this.imgbg.width * 0.5; + this.center = [this.size[0] * 0.5, this.size[1] * 0.5 + 20]; + this.radius = this.size[0] * 0.5; + + if(e.canvasY - this.pos[1] < 20 || distance([e.canvasX,e.canvasY],[this.pos[0] + this.center[0],this.pos[1] + this.center[1]]) > this.radius) + return false; + + this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + this.captureInput(true); + + /* + var tmp = this.localToScreenSpace(0,0); + this.trace(tmp[0] + "," + tmp[1]); */ + return true; + }, + + onMouseMove: function(e) + { + if(!this.oldmouse) return; + + var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + + var v = this.value; + v -= (m[1] - this.oldmouse[1]) * 0.01; + if(v > 1.0) v = 1.0; + else if(v < 0.0) v = 0.0; + + this.value = v; + this.properties["value"] = this.properties["min"] + (this.properties["max"] - this.properties["min"]) * this.value; + + this.oldmouse = m; + this.setDirtyCanvas(true); + }, + + onMouseUp: function(e) + { + if(this.oldmouse) + { + this.oldmouse = null; + this.captureInput(false); + } + }, + + onMouseLeave: function(e) + { + //this.oldmouse = null; + }, + + onWidget: function(e,widget) + { + if(widget.name=="increase") + this.onPropertyChange("size", this.properties.size + 10); + else if(widget.name=="decrease") + this.onPropertyChange("size", this.properties.size - 10); + }, + + onPropertyChange: function(name,value) + { + if(name=="wcolor") + this.properties[name] = value; + else if(name=="size") + { + value = parseInt(value); + this.properties[name] = value; + this.size = [value+4,value+24]; + this.setDirtyCanvas(true,true); + } + else if(name=="min" || name=="max" || name=="value") + { + this.properties[name] = parseFloat(value); + } + else + return false; + return true; + } + }); + + LiteGraph.registerNodeType("widget/hslider",{ + title: "H.Slider", + desc: "Linear slider controller", + size: [160,26], + outputs: [["",'number']], + properties: {wcolor:"#7AF",min:0,max:1,value:0.5}, + onInit: function() + { + this.value = 0.5; + this.imgfg = this.loadImage("imgs/slider_fg.png"); + }, + + onDrawVectorial: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + //border + ctx.lineWidth = 1; + ctx.strokeStyle= this.mouseOver ? "#FFF" : "#AAA"; + ctx.fillStyle="#000"; + ctx.beginPath(); + ctx.rect(2,0,this.size[0]-4,20); + ctx.stroke(); + + ctx.fillStyle=this.properties["wcolor"]; + ctx.beginPath(); + ctx.rect(2+(this.size[0]-4-20)*this.value,0, 20,20); + ctx.fill(); + }, + + onDrawImage: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + //border + ctx.lineWidth = 1; + ctx.fillStyle="#000"; + ctx.fillRect(2,9,this.size[0]-4,2); + + ctx.strokeStyle= "#333"; + ctx.beginPath(); + ctx.moveTo(2,9); + ctx.lineTo(this.size[0]-4,9); + ctx.stroke(); + + ctx.strokeStyle= "#AAA"; + ctx.beginPath(); + ctx.moveTo(2,11); + ctx.lineTo(this.size[0]-4,11); + ctx.stroke(); + + ctx.drawImage(this.imgfg, 2+(this.size[0]-4)*this.value - this.imgfg.width*0.5,-this.imgfg.height*0.5 + 10); + }, + + onDrawBackground: function(ctx) + { + this.onDrawImage(ctx); + }, + + onExecute: function() + { + this.properties["value"] = this.properties["min"] + (this.properties["max"] - this.properties["min"]) * this.value; + this.setOutputData(0, this.properties["value"] ); + this.boxcolor = colorToString([this.value,this.value,this.value]); + }, + + onMouseDown: function(e) + { + if(e.canvasY - this.pos[1] < 0) + return false; + + this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + this.captureInput(true); + return true; + }, + + onMouseMove: function(e) + { + if(!this.oldmouse) return; + + var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + + var v = this.value; + var delta = (m[0] - this.oldmouse[0]); + v += delta / this.size[0]; + if(v > 1.0) v = 1.0; + else if(v < 0.0) v = 0.0; + + this.value = v; + + this.oldmouse = m; + this.setDirtyCanvas(true); + }, + + onMouseUp: function(e) + { + this.oldmouse = null; + this.captureInput(false); + }, + + onMouseLeave: function(e) + { + //this.oldmouse = null; + }, + + onPropertyChange: function(name,value) + { + if(name=="wcolor") + this.properties[name] = value; + else + return false; + return true; + } + }); + + LiteGraph.registerNodeType("widget/kpad",{ + title: "KPad", + desc: "bidimensional slider", + size: [200,200], + outputs: [["x",'number'],["y",'number']], + properties:{x:0,y:0,borderColor:"#333",bgcolorTop:"#444",bgcolorBottom:"#000",shadowSize:1, borderRadius:2}, + + createGradient: function(ctx) + { + this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]); + this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]); + this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]); + }, + + onDrawBackground: function(ctx) + { + if(!this.lineargradient) + this.createGradient(ctx); + + ctx.lineWidth = 1; + ctx.strokeStyle = this.properties["borderColor"]; + //ctx.fillStyle = "#ebebeb"; + ctx.fillStyle = this.lineargradient; + + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["shadowSize"]; + ctx.roundRect(0,0,this.size[0],this.size[1],this.properties["shadowSize"]); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = "#A00"; + ctx.fillRect(this.size[0] * this.properties["x"] - 5, this.size[1] * this.properties["y"] - 5,10,10); + }, + + onWidget: function(e,widget) + { + if(widget.name == "update") + { + this.lineargradient = null; + this.setDirtyCanvas(true); + } + }, + + onExecute: function() + { + this.setOutputData(0, this.properties["x"] ); + this.setOutputData(1, this.properties["y"] ); + }, + + onMouseDown: function(e) + { + if(e.canvasY - this.pos[1] < 0) + return false; + + this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + this.captureInput(true); + return true; + }, + + onMouseMove: function(e) + { + if(!this.oldmouse) return; + + var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + + this.properties.x = m[0] / this.size[0]; + this.properties.y = m[1] / this.size[1]; + + if(this.properties.x > 1.0) this.properties.x = 1.0; + else if(this.properties.x < 0.0) this.properties.x = 0.0; + + if(this.properties.y > 1.0) this.properties.y = 1.0; + else if(this.properties.y < 0.0) this.properties.y = 0.0; + + this.oldmouse = m; + this.setDirtyCanvas(true); + }, + + onMouseUp: function(e) + { + if(this.oldmouse) + { + this.oldmouse = null; + this.captureInput(false); + } + }, + + onMouseLeave: function(e) + { + //this.oldmouse = null; + } + }); + + + LiteGraph.registerNodeType("widget/button", { + title: "Button", + desc: "A send command button", + + widgets: [{name:"test",text:"Test Button",type:"button"}], + size: [100,40], + properties:{text:"clickme",command:"",color:"#7AF",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",fontsize:"16"}, + outputs:[["M","module"]], + + createGradient: function(ctx) + { + this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]); + this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]); + this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]); + }, + + drawVectorShape: function(ctx) + { + ctx.fillStyle = this.mouseOver ? this.properties["color"] : "#AAA"; + + if(this.clicking) + ctx.fillStyle = "#FFF"; + + ctx.strokeStyle = "#AAA"; + ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4); + ctx.stroke(); + + if(this.mouseOver) + ctx.fill(); + + //ctx.fillRect(5,20,this.size[0] - 10,this.size[1] - 30); + + ctx.fillStyle = this.mouseOver ? "#000" : "#AAA"; + ctx.font = "bold " + this.properties["fontsize"] + "px Criticized,Tahoma"; + ctx.textAlign = "center"; + ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.5*parseInt(this.properties["fontsize"])); + ctx.textAlign = "left"; + }, + + drawBevelShape: function(ctx) + { + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["shadowSize"]; + + if(!this.lineargradient) + this.createGradient(ctx); + + ctx.fillStyle = this.mouseOver ? this.properties["color"] : this.lineargradient; + if(this.clicking) + ctx.fillStyle = "#444"; + + ctx.strokeStyle = "#FFF"; + ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.mouseOver ? "#000" : "#444"; + ctx.font = "bold " + this.properties["fontsize"] + "px Century Gothic"; + ctx.textAlign = "center"; + ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.40*parseInt(this.properties["fontsize"])); + ctx.textAlign = "left"; + }, + + onDrawBackground: function(ctx) + { + this.drawBevelShape(ctx); + }, + + clickButton: function() + { + var module = this.getOutputModule(0); + if(this.properties["command"] && this.properties["command"] != "") + { + if (! module.executeAction(this.properties["command"]) ) + this.trace("Error executing action in other module"); + } + else if(module && module.onTrigger) + { + module.onTrigger(); + } + }, + + onMouseDown: function(e) + { + if(e.canvasY - this.pos[1] < 2) + return false; + this.clickButton(); + this.clicking = true; + return true; + }, + + onMouseUp: function(e) + { + this.clicking = false; + }, + + onExecute: function() + { + }, + + onWidget: function(e,widget) + { + if(widget.name == "test") + { + this.clickButton(); + } + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + return true; + } + }); + + LiteGraph.registerNodeType("widget/progress",{ + title: "Progress", + desc: "Shows data in linear progress", + size: [160,26], + inputs: [["",'number']], + properties: {min:0,max:1,value:0,wcolor:"#AAF"}, + onExecute: function() + { + var v = this.getInputData(0); + if( v != undefined ) + this.properties["value"] = v; + }, + onDrawBackground: function(ctx) + { + //border + ctx.lineWidth = 1; + ctx.fillStyle=this.properties.wcolor; + var v = (this.properties.value - this.properties.min) / (this.properties.max - this.properties.min); + v = Math.min(1,v); + v = Math.max(0,v); + ctx.fillRect(2,2,(this.size[0]-4)*v,this.size[1]-4); + } + }); + + LiteGraph.registerNodeType("widget/text", { + title: "Text", + desc: "Shows the input value", + + widgets: [{name:"resize",text:"Resize box",type:"button"},{name:"led_text",text:"LED",type:"minibutton"},{name:"normal_text",text:"Normal",type:"minibutton"}], + inputs: [["",0]], + properties:{value:"...",font:"Arial", fontsize:18, color:"#AAA", align:"left", glowSize:0, decimals:1}, + + onDrawBackground: function(ctx) + { + //ctx.fillStyle="#000"; + //ctx.fillRect(0,0,100,60); + ctx.fillStyle = this.properties["color"]; + var v = this.properties["value"]; + + if(this.properties["glowSize"]) + { + ctx.shadowColor = this.properties["color"]; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["glowSize"]; + } + else + ctx.shadowColor = "transparent"; + + var fontsize = this.properties["fontsize"]; + + ctx.textAlign = this.properties["align"]; + ctx.font = fontsize.toString() + "px " + this.properties["font"]; + this.str = typeof(v) == 'number' ? v.toFixed(this.properties["decimals"]) : v; + + if( typeof(this.str) == 'string') + { + var lines = this.str.split("\\n"); + for(var i in lines) + ctx.fillText(lines[i],this.properties["align"] == "left" ? 15 : this.size[0] - 15, fontsize * -0.15 + fontsize * (parseInt(i)+1) ); + } + + ctx.shadowColor = "transparent"; + this.last_ctx = ctx; + ctx.textAlign = "left"; + }, + + onExecute: function() + { + var v = this.getInputData(0); + if(v != null) + this.properties["value"] = v; + else + this.properties["value"] = ""; + this.setDirtyCanvas(true); + }, + + resize: function() + { + if(!this.last_ctx) return; + + var lines = this.str.split("\\n"); + this.last_ctx.font = this.properties["fontsize"] + "px " + this.properties["font"]; + var max = 0; + for(var i in lines) + { + var w = this.last_ctx.measureText(lines[i]).width; + if(max < w) max = w; + } + this.size[0] = max + 20; + this.size[1] = 4 + lines.length * this.properties["fontsize"]; + + this.setDirtyCanvas(true); + }, + + onWidget: function(e,widget) + { + if(widget.name == "resize") + this.resize(); + else if (widget.name == "led_text") + { + this.properties["font"] = "Digital"; + this.properties["glowSize"] = 4; + this.setDirtyCanvas(true); + } + else if (widget.name == "normal_text") + { + this.properties["font"] = "Arial"; + this.setDirtyCanvas(true); + } + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + this.str = typeof(value) == 'number' ? value.toFixed(3) : value; + //this.resize(); + return true; + } + }); + + LiteGraph.registerNodeType("widget/panel", { + title: "Panel", + desc: "Non interactive panel", + + widgets: [{name:"update",text:"Update",type:"button"}], + size: [200,100], + properties:{borderColor:"#ffffff",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",shadowSize:2, borderRadius:3}, + + createGradient: function(ctx) + { + if(this.properties["bgcolorTop"] == "" || this.properties["bgcolorBottom"] == "") + { + this.lineargradient = 0; + return; + } + + this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]); + this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]); + this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]); + }, + + onDrawBackground: function(ctx) + { + if(this.lineargradient == null) + this.createGradient(ctx); + + if(!this.lineargradient) + return; + + ctx.lineWidth = 1; + ctx.strokeStyle = this.properties["borderColor"]; + //ctx.fillStyle = "#ebebeb"; + ctx.fillStyle = this.lineargradient; + + if(this.properties["shadowSize"]) + { + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["shadowSize"]; + } + else + ctx.shadowColor = "transparent"; + + ctx.roundRect(0,0,this.size[0]-1,this.size[1]-1,this.properties["shadowSize"]); + ctx.fill(); + ctx.shadowColor = "transparent"; + ctx.stroke(); + }, + + onWidget: function(e,widget) + { + if(widget.name == "update") + { + this.lineargradient = null; + this.setDirtyCanvas(true); + } + } + }); + +LiteGraph.registerNodeType("color/palette",{ + title: "Palette", + desc: "Generates a color", + + inputs: [["f","number"]], + outputs: [["Color","color"]], + properties: {colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"}, + + onExecute: function() + { + var c = []; + + if (this.properties.colorA != null) + c.push( hex2num( this.properties.colorA ) ); + if (this.properties.colorB != null) + c.push( hex2num( this.properties.colorB ) ); + if (this.properties.colorC != null) + c.push( hex2num( this.properties.colorC ) ); + if (this.properties.colorD != null) + c.push( hex2num( this.properties.colorD ) ); + + var f = this.getInputData(0); + if(f == null) f = 0.5; + if (f > 1.0) + f = 1.0; + else if (f < 0.0) + f = 0.0; + + if(c.length == 0) + return; + + var result = [0,0,0]; + if(f == 0) + result = c[0]; + else if(f == 1) + result = c[ c.length - 1]; + else + { + var pos = (c.length - 1)* f; + var c1 = c[ Math.floor(pos) ]; + var c2 = c[ Math.floor(pos)+1 ]; + var t = pos - Math.floor(pos); + result[0] = c1[0] * (1-t) + c2[0] * (t); + result[1] = c1[1] * (1-t) + c2[1] * (t); + result[2] = c1[2] * (1-t) + c2[2] * (t); + } + + /* + c[0] = 1.0 - Math.abs( Math.sin( 0.1 * reModular.getTime() * Math.PI) ); + c[1] = Math.abs( Math.sin( 0.07 * reModular.getTime() * Math.PI) ); + c[2] = Math.abs( Math.sin( 0.01 * reModular.getTime() * Math.PI) ); + */ + + for(var i in result) + result[i] /= 255; + + this.boxcolor = colorToString(result); + this.setOutputData(0, result); + } + }); + +LiteGraph.registerNodeType("graphics/frame", { + title: "Frame", + desc: "Frame viewerew", + + inputs: [["","image"]], + size: [200,200], + widgets: [{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}], + + onDrawBackground: function(ctx) + { + if(this.frame) + ctx.drawImage(this.frame, 0,0,this.size[0],this.size[1]); + }, + + onExecute: function() + { + this.frame = this.getInputData(0); + this.setDirtyCanvas(true); + }, + + onWidget: function(e,widget) + { + if(widget.name == "resize" && this.frame) + { + var width = this.frame.width; + var height = this.frame.height; + + if(!width && this.frame.videoWidth != null ) + { + width = this.frame.videoWidth; + height = this.frame.videoHeight; + } + + if(width && height) + this.size = [width, height]; + this.setDirtyCanvas(true,true); + } + else if(widget.name == "view") + this.show(); + }, + + show: function() + { + //var str = this.canvas.toDataURL("image/png"); + if(showElement && this.frame) + showElement(this.frame); + } + }); + +LiteGraph.registerNodeType("visualization/graph", { + desc: "Shows a graph of the inputs", + + inputs: [["",0],["",0],["",0],["",0]], + size: [200,200], + properties: {min:-1,max:1,bgColor:"#000"}, + onDrawBackground: function(ctx) + { + /* + ctx.save(); + ctx.beginPath(); + ctx.rect(2,2,this.size[0] - 4, this.size[1]-4); + ctx.clip(); + //*/ + + var colors = ["#FFF","#FAA","#AFA","#AAF"]; + + if(this.properties.bgColor != null && this.properties.bgColor != "") + { + ctx.fillStyle="#000"; + ctx.fillRect(2,2,this.size[0] - 4, this.size[1]-4); + } + + if(this.data) + { + var min = this.properties["min"]; + var max = this.properties["max"]; + + for(var i in this.data) + { + var data = this.data[i]; + if(!data) continue; + + if(this.getInputInfo(i) == null) continue; + + ctx.strokeStyle = colors[i]; + ctx.beginPath(); + + var d = data.length / this.size[0]; + for(var j = 0; j < data.length; j += d) + { + var value = data[ Math.floor(j) ]; + value = (value - min) / (max - min); + if (value > 1.0) value = 1.0; + else if(value < 0) value = 0; + + if(j == 0) + ctx.moveTo( j / d, (this.size[1] - 5) - (this.size[1] - 10) * value); + else + ctx.lineTo( j / d, (this.size[1] - 5) - (this.size[1] - 10) * value); + } + + ctx.stroke(); + } + } + //*/ + + //ctx.restore(); + }, + + onExecute: function() + { + if(!this.data) this.data = []; + + for(var i in this.inputs) + { + var value = this.getInputData(i); + + if(typeof(value) == "number") + { + value = value ? value : 0; + if(!this.data[i]) + this.data[i] = []; + this.data[i].push(value); + + if(this.data[i].length > (this.size[1] - 4)) + this.data[i] = this.data[i].slice(1,this.data[i].length); + } + else + this.data[i] = value; + } + + if(this.data.length) + this.setDirtyCanvas(true); + } + }); + +LiteGraph.registerNodeType("graphics/supergraph", { + title: "Supergraph", + desc: "Shows a nice circular graph", + + inputs: [["x","number"],["y","number"],["c","color"]], + outputs: [["","image"]], + widgets: [{name:"clear_alpha",text:"Clear Alpha",type:"minibutton"},{name:"clear_color",text:"Clear color",type:"minibutton"}], + properties: {size:256,bgcolor:"#000",lineWidth:1}, + bgcolor: "#000", + flags: {allow_fastrender:true}, + onLoad: function() + { + this.createCanvas(); + }, + + createCanvas: function() + { + this.canvas = document.createElement("canvas"); + this.canvas.width = this.properties["size"]; + this.canvas.height = this.properties["size"]; + this.oldpos = null; + this.clearCanvas(true); + }, + + onExecute: function() + { + var x = this.getInputData(0); + var y = this.getInputData(1); + var c = this.getInputData(2); + + if(x == null && y == null) return; + + if(!x) x = 0; + if(!y) y = 0; + x*= 0.95; + y*= 0.95; + + var size = this.properties["size"]; + if(size != this.canvas.width || size != this.canvas.height) + this.createCanvas(); + + if (!this.oldpos) + { + this.oldpos = [ (x * 0.5 + 0.5) * size, (y*0.5 + 0.5) * size]; + return; + } + + var ctx = this.canvas.getContext("2d"); + + if(c == null) + c = "rgba(255,255,255,0.5)"; + else if(typeof(c) == "object") //array + c = colorToString(c); + + //stroke line + ctx.strokeStyle = c; + ctx.beginPath(); + ctx.moveTo( this.oldpos[0], this.oldpos[1] ); + this.oldpos = [ (x * 0.5 + 0.5) * size, (y*0.5 + 0.5) * size]; + ctx.lineTo( this.oldpos[0], this.oldpos[1] ); + ctx.stroke(); + + this.canvas.dirty = true; + this.setOutputData(0,this.canvas); + }, + + clearCanvas: function(alpha) + { + var ctx = this.canvas.getContext("2d"); + if(alpha) + { + ctx.clearRect(0,0,this.canvas.width,this.canvas.height); + this.trace("Clearing alpha"); + } + else + { + ctx.fillStyle = this.properties["bgcolor"]; + ctx.fillRect(0,0,this.canvas.width,this.canvas.height); + } + }, + + onWidget: function(e,widget) + { + if(widget.name == "clear_color") + { + this.clearCanvas(false); + } + else if(widget.name == "clear_alpha") + { + this.clearCanvas(true); + } + }, + + onPropertyChange: function(name,value) + { + if(name == "size") + { + this.properties["size"] = parseInt(value); + this.createCanvas(); + } + else if(name == "bgcolor") + { + this.properties["bgcolor"] = value; + this.createCanvas(); + } + else if(name == "lineWidth") + { + this.properties["lineWidth"] = parseInt(value); + this.canvas.getContext("2d").lineWidth = this.properties["lineWidth"]; + } + else + return false; + + return true; + } + }); + + +LiteGraph.registerNodeType("graphics/imagefade", { + title: "Image fade", + desc: "Fades between images", + + inputs: [["img1","image"],["img2","image"],["fade","number"]], + outputs: [["","image"]], + properties: {fade:0.5,width:512,height:512}, + widgets: [{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}], + + onLoad: function() + { + this.createCanvas(); + var ctx = this.canvas.getContext("2d"); + ctx.fillStyle = "#000"; + ctx.fillRect(0,0,this.properties["width"],this.properties["height"]); + }, + + createCanvas: function() + { + this.canvas = document.createElement("canvas"); + this.canvas.width = this.properties["width"]; + this.canvas.height = this.properties["height"]; + }, + + onExecute: function() + { + var ctx = this.canvas.getContext("2d"); + this.canvas.width = this.canvas.width; + + var A = this.getInputData(0); + if (A != null) + { + ctx.drawImage(A,0,0,this.canvas.width, this.canvas.height); + } + + var fade = this.getInputData(2); + if(fade == null) + fade = this.properties["fade"]; + else + this.properties["fade"] = fade; + + ctx.globalAlpha = fade; + var B = this.getInputData(1); + if (B != null) + { + ctx.drawImage(B,0,0,this.canvas.width, this.canvas.height); + } + ctx.globalAlpha = 1.0; + + this.setOutputData(0,this.canvas); + this.setDirtyCanvas(true); + } + }); + +LiteGraph.registerNodeType("graphics/image", { + title: "Image", + desc: "Image loader", + + inputs: [], + outputs: [["frame","image"]], + properties: {"url":""}, + widgets: [{name:"load",text:"Load",type:"button"}], + + onLoad: function() + { + if(this.properties["url"] != "" && this.img == null) + { + this.loadImage(this.properties["url"]); + } + }, + + onStart: function() + { + }, + + onExecute: function() + { + if(!this.img) + this.boxcolor = "#000"; + if(this.img && this.img.width) + this.setOutputData(0,this.img); + else + this.setOutputData(0,null); + if(this.img.dirty) + this.img.dirty = false; + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + if (name == "url" && value != "") + this.loadImage(value); + + return true; + }, + + loadImage: function(url) + { + if(url == "") + { + this.img = null; + return; + } + + this.trace("loading image..."); + this.img = document.createElement("img"); + this.img.src = "miniproxy.php?url=" + url; + this.boxcolor = "#F95"; + var that = this; + this.img.onload = function() + { + that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); + this.dirty = true; + that.boxcolor = "#9F9"; + that.setDirtyCanvas(true); + } + }, + + onWidget: function(e,widget) + { + if(widget.name == "load") + { + this.loadImage(this.properties["url"]); + } + } + }); + +LiteGraph.registerNodeType("graphics/cropImage", { + title: "Crop", + desc: "Crop Image", + + inputs: [["","image"]], + outputs: [["","image"]], + properties: {width:256,height:256,x:0,y:0,scale:1.0 }, + size: [50,20], + + onLoad: function() + { + this.createCanvas(); + }, + + createCanvas: function() + { + this.canvas = document.createElement("canvas"); + this.canvas.width = this.properties["width"]; + this.canvas.height = this.properties["height"]; + }, + + onExecute: function() + { + var input = this.getInputData(0); + if(!input) return; + + if(input.width) + { + var ctx = this.canvas.getContext("2d"); + + ctx.drawImage(input, -this.properties["x"],-this.properties["y"], input.width * this.properties["scale"], input.height * this.properties["scale"]); + this.setOutputData(0,this.canvas); + } + else + this.setOutputData(0,null); + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + + if(name == "scale") + { + this.properties[name] = parseFloat(value); + if(this.properties[name] == 0) + { + this.trace("Error in scale"); + this.properties[name] = 1.0; + } + } + else + this.properties[name] = parseInt(value); + + this.createCanvas(); + + return true; + } + }); + + +LiteGraph.registerNodeType("graphics/video", { + title: "Video", + desc: "Video playback", + + inputs: [["t","number"]], + outputs: [["frame","image"],["t","number"],["d","number"]], + properties: {"url":""}, + widgets: [{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},{name:"mute",text:"Mute video",type:"button"}], + + onClick: function(e) + { + if(!this.video) return; + + //press play + if( distance( [e.canvasX,e.canvasY], [ this.pos[0] + 55, this.pos[1] + 40] ) < 20 ) + { + this.play(); + return true; + } + }, + + onKeyDown: function(e) + { + if(e.keyCode == 32) + this.playPause(); + }, + + onLoad: function() + { + if(this.properties.url != "") + this.loadVideo(this.properties.url); + }, + + play: function() + { + if(this.video) + { + this.trace("Video playing"); + this.video.play(); + } + }, + + playPause: function() + { + if(this.video) + { + if(this.video.paused) + this.play(); + else + this.pause(); + } + }, + + stop: function() + { + if(this.video) + { + this.trace("Video stopped"); + this.video.pause(); + this.video.currentTime = 0; + } + }, + + pause: function() + { + if(this.video) + { + this.trace("Video paused"); + this.video.pause(); + } + }, + + onExecute: function() + { + if(!this.video) + return; + + var t = this.getInputData(0); + if(t && t >= 0 && t <= 1.0) + { + this.video.currentTime = t * this.video.duration; + this.video.pause(); + } + + this.video.dirty = true; + this.setOutputData(0,this.video); + this.setOutputData(1,this.video.currentTime); + this.setOutputData(2,this.video.duration); + this.setDirtyCanvas(true); + }, + + onStart: function() + { + //this.play(); + }, + + onStop: function() + { + this.pause(); + }, + + loadVideo: function(url) + { + this.video = document.createElement("video"); + if(url) + this.video.src = url; + else + { + this.video.src = "modules/data/video.webm"; + this.properties.url = this.video.src; + } + this.video.type = "type=video/mp4"; + //this.video.loop = true; //not work in FF + this.video.muted = true; + this.video.autoplay = false; + + //if(reModular.status == "running") this.play(); + + var that = this; + this.video.addEventListener("loadedmetadata",function(e) { + //onload + that.trace("Duration: " + that.video.duration + " seconds"); + that.trace("Size: " + that.video.videoWidth + "," + that.video.videoHeight); + that.setDirtyCanvas(true); + this.width = this.videoWidth; + this.height = this.videoHeight; + }); + this.video.addEventListener("progress",function(e) { + //onload + //that.trace("loading..."); + }); + this.video.addEventListener("error",function(e) { + that.trace("Error loading video: " + this.src); + if (this.error) { + switch (this.error.code) { + case this.error.MEDIA_ERR_ABORTED: + that.trace("You stopped the video."); + break; + case this.error.MEDIA_ERR_NETWORK: + that.trace("Network error - please try again later."); + break; + case this.error.MEDIA_ERR_DECODE: + that.trace("Video is broken.."); + break; + case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED: + that.trace("Sorry, your browser can't play this video."); + break; + } + } + }); + + this.video.addEventListener("ended",function(e) { + that.trace("Ended."); + this.play(); + }); + + //$("body").append(this.video); + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + if (name == "url" && value != "") + this.loadVideo(value); + + return true; + }, + onWidget: function(e,widget) + { + if(widget.name == "demo") + { + this.loadVideo(); + } + else if(widget.name == "play") + { + if(this.video) + this.playPause(); + } + if(widget.name == "stop") + { + this.stop(); + } + else if(widget.name == "mute") + { + if(this.video) + this.video.muted = !this.video.muted; + } + + } + }); + diff --git a/build/litegraph.min.js b/build/litegraph.min.js new file mode 100644 index 000000000..d5e991d4d --- /dev/null +++ b/build/litegraph.min.js @@ -0,0 +1,191 @@ +var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#888",NODE_DEFAULT_BGCOLOR:"#333",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,registered_node_types:{},graphs:[],registerNodeType:function(a,b){b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0, +c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;var e=d.prototype||d;b=b||e.title||d.title||a;var f=null;if(d.prototype)f=new d(b);else{f=new LGraphNode(b);f.inputs=[];f.outputs=[];for(var g in e)if("inputs"==g)for(var h in e[g])f.addInput(e[g][h][0],e[g][h][1], +e[g][h][2]);else if("outputs"==g)for(h in e[g])f.addOutput(e[g][h][0],e[g][h][1],e[g][h][2]);else f[g]=e[g].concat?e[g].concat():"object"==typeof e[g]?jQuery.extend({},e[g]):e[g];d.size&&(f.size=d.size.concat())}f.type=a;f.name||(f.name=b);f.flags||(f.flags={});f.size||(f.size=f.computeSize());f.pos||(f.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(g in c)f[g]=c[g];return f},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""== +a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c= +[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}for(d in LiteGraph.graphs)for(var h in LiteGraph.graphs[d].nodes)if(a=LiteGraph.graphs[d].nodes[h], +c=LiteGraph.getNodeType(n.type))for(var k in c)"function"==typeof c[k]&&(a[k]=c[k]);LiteGraph.debug&&console.log("Nodes reloaded")}};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.canvas=null;LiteGraph.graphs.push(this);this.clear()}LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2; +LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this.nodes=[];this.nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={canvas_offset:[0,0],canvas_scale:1};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.graph={};this.debug=!0;this.change();this.canvas&&this.canvas.clear()}; +LGraph.prototype.run=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=(new Date).getTime();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1E3)}}; +LGraph.prototype.stop=function(){if(this.status!=LGraph.STATUS_STOPPED){this.status=LGraph.STATUS_STOPPED;if(this.onStopEvent)this.onStopEvent();null!=this.execution_timer_id&&clearInterval(this.execution_timer_id);this.execution_timer_id=null;this.sendEventToAllNodes("onStop")}}; +LGraph.prototype.runStep=function(a){a=a||1;var b=(new Date).getTime();this.globaltime=0.001*(b-this.starttime);try{for(var c=0;c=LiteGraph.MAX_NUMBER_OF_NODES)throw"LiteGraph: max number of nodes attached";if(null==a.id||-1==a.id)a.id=this.last_node_id++;a.graph=this;this.nodes.push(a);this.nodes_by_id[a.id]=a;if(a.onInit)a.onInit();this.config.align_to_grid&&a.alignToGrid();this.updateExecutionOrder();this.canvas&&(this.canvas.dirty_canvas=!0);this.change();return a}}; +LGraph.prototype.remove=function(a){if(null!=this.nodes_by_id[a.id]){if(a.inputs)for(var b=0;ba&&this.pos[1]-cb)return!0;return!1};LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(b==this)return!1;if(c.constructor===String){if(c=b.findInputSlot(c),-1==c)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+c),!1}else if(!b.inputs||c>=b.inputs.length)return LiteGraph.debug&& +console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];if(-1==c)null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1});else if(0==d.type||0==b.inputs[c].type||d.type==b.inputs[c].type)a=[this.graph.last_link_id++,this.id,a,b.id,c],null==d.links&&(d.links=[]),d.links.push(a),b.inputs[c].link=a,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange();return!0}; +LGraphNode.prototype.disconnectOutput=function(a,b){if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;var c=this.outputs[a];if(!c.links||0==c.links.length)return!1;if(b)for(var d=0,e=c.links.length;d=this.inputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(!this.inputs[a])return!1;var b=this.inputs[a].link;this.inputs[a].link=null;a=this.graph.getNodeById(b[1]);if(!a)return!1;a=a.outputs[b[2]];if(!a||!a.links||0==a.links.length)return!1;for(var c= +0,d=a.links.length;cb&&this.inputs[b].pos?[this.pos[0]+this.inputs[b].pos[0],this.pos[1]+this.inputs[b].pos[1]]:!a&&this.outputs.length>b&&this.outputs[b].pos?[this.pos[0]+this.outputs[b].pos[0],this.pos[1]+this.outputs[b].pos[1]]:a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.size[0]+1, +this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]}; +LGraphNode.prototype.draw=function(a,b){var c=this.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(this.flags.skip_title_render||this.graph.isLive())d=!1;this.mouseOver&&(d=!0);this.selected||(b.render_shadows?(a.shadowColor="#111",a.shadowOffsetX=2,a.shadowOffsetY=2,a.shadowBlur=4):a.shadowColor="transparent");if(b.live_mode){if(!this.flags.collapsed){a.shadowColor="transparent";if(this.onDrawBackground)this.onDrawBackground(a);if(this.onDrawForeground)this.onDrawForeground(a)}}else if(this.flags.collapsed)this.onDrawCollapsed&&!1!= +this.onDrawCollapsed(a)||this.drawNodeCollapsed(a,c,this.bgcolor);else{this.flags.clip_area&&(a.save(),null==this.shape||"box"==this.shape?(a.beginPath(),a.rect(0,0,this.size[0],this.size[1])):"round"==this.shape?a.roundRect(0,0,this.size[0],this.size[1],10):"circle"==this.shape&&(a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],0.5*this.size[0],0,2*Math.PI)),a.clip());this.drawNodeShape(a,c,this.bgcolor,!d,this.selected);a.shadowColor="transparent";a.textAlign="left";a.font="12px Arial";d=0.6< +this.graph.config.canvas_scale;if(this.inputs)for(var e=0;e(new Date).getTime()-this.last_mouseclick&&this.selected_nodes[b.id]){if(b.onDblClick)b.onDblClick(a);this.processNodeDblClicked(b);d=!0}b.onMouseDown&&b.onMouseDown(a)?d=!0:this.live_mode&&(d=c=!0);d||(this.allow_dragnodes&& +(this.node_dragged=b),this.selected_nodes[b.id]||this.processNodeSelected(b,a));this.dirty_canvas=!0}}else c=!0;c&&this.allow_dragcanvas&&(this.dragging_canvas=!0)}else 2!=a.which&&3==a.which&&this.processContextualMenu(b,a);this.last_mouse[0]=a.localX;this.last_mouse[1]=a.localY;this.last_mouseclick=(new Date).getTime();this.canvas_mouse=[a.canvasX,a.canvasY];this.graph.change();(!document.activeElement||"input"!=document.activeElement.nodeName.toLowerCase()&&"textarea"!=document.activeElement.nodeName.toLowerCase())&& +a.preventDefault();a.stopPropagation();return!1}}; +LGraphCanvas.prototype.processMouseMove=function(a){if(this.graph){this.adjustMouseEvent(a);var b=[a.localX,a.localY],c=[b[0]-this.last_mouse[0],b[1]-this.last_mouse[1]];this.last_mouse=b;this.canvas_mouse=[a.canvasX,a.canvasY];if(this.dragging_canvas)this.graph.config.canvas_offset[0]+=c[0]/this.graph.config.canvas_scale,this.graph.config.canvas_offset[1]+=c[1]/this.graph.config.canvas_scale,this.dirty_bgcanvas=this.dirty_canvas=!0;else{this.connecting_node&&(this.dirty_canvas=!0);var b=this.graph.getNodeOnPos(a.canvasX, +a.canvasY,this.visible_nodes),d;for(d in this.graph.nodes)if(this.graph.nodes[d].mouseOver&&b!=this.graph.nodes[d]){this.graph.nodes[d].mouseOver=!1;if(this.node_over&&this.node_over.onMouseLeave)this.node_over.onMouseLeave(a);this.node_over=null;this.dirty_canvas=!0}if(b){if(!b.mouseOver&&(b.mouseOver=!0,this.node_over=b,this.dirty_canvas=!0,b.onMouseEnter))b.onMouseEnter(a);if(b.onMouseMove)b.onMouseMove(a);if(this.connecting_node){var e=this._highlight_input||[0,0],f=this.isOverNodeInput(b,a.canvasX, +a.canvasY,e);if(-1!=f&&b.inputs[f]){if(f=b.inputs[f].type,f==this.connecting_output.type||"*"==f||"*"==this.connecting_output.type)this._highlight_input=e}else this._highlight_input=null}isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)?this.canvas.style.cursor="se-resize":this.canvas.style.cursor=null}else this.canvas.style.cursor=null;if(this.node_capturing_input&&this.node_capturing_input!=b&&this.node_capturing_input.onMouseMove)this.node_capturing_input.onMouseMove(a); +if(this.node_dragged&&!this.live_mode){for(d in this.selected_nodes)b=this.selected_nodes[d],b.pos[0]+=c[0]/this.graph.config.canvas_scale,b.pos[1]+=c[1]/this.graph.config.canvas_scale,b.pos[0]=Math.round(b.pos[0]),b.pos[1]=Math.round(b.pos[1]);this.dirty_bgcanvas=this.dirty_canvas=!0}this.resizing_node&&!this.live_mode&&(this.resizing_node.size[0]+=c[0]/this.graph.config.canvas_scale,this.resizing_node.size[1]+=c[1]/this.graph.config.canvas_scale,c=Math.max(this.resizing_node.inputs?this.resizing_node.inputs.length: +0,this.resizing_node.outputs?this.resizing_node.outputs.length:0),this.resizing_node.size[1]b&&(c*=1/1.1);this.setZoom(c,[a.localX,a.localY]);this.graph.change();a.preventDefault();return!1}}; +LGraphCanvas.prototype.processNodeSelected=function(a,b){a.selected=!0;if(a.onSelected)a.onSelected();b&&b.shiftKey||(this.selected_nodes={});this.selected_nodes[a.id]=a;this.dirty_canvas=!0;if(this.onNodeSelected)this.onNodeSelected(a)};LGraphCanvas.prototype.processNodeDeselected=function(a){a.selected=!1;if(a.onDeselected)a.onDeselected();delete this.selected_nodes[a.id];if(this.onNodeDeselected)this.onNodeDeselected();this.dirty_canvas=!0}; +LGraphCanvas.prototype.processNodeDblClicked=function(a){if(this.onShowNodePanel)this.onShowNodePanel(a);if(this.onNodeDblClicked)this.onNodeDblClicked(a);this.setDirty(!0)};LGraphCanvas.prototype.selectNode=function(a){this.deselectAllNodes();if(a){if(!a.selected&&a.onSelected)a.onSelected();a.selected=!0;this.selected_nodes[a.id]=a;this.setDirty(!0)}}; +LGraphCanvas.prototype.selectAllNodes=function(){for(var a in this.graph.nodes){var b=this.graph.nodes[a];if(!b.selected&&b.onSelected)b.onSelected();b.selected=!0;this.selected_nodes[this.graph.nodes[a].id]=b}this.setDirty(!0)};LGraphCanvas.prototype.deselectAllNodes=function(){for(var a in this.selected_nodes){var b=this.selected_nodes;if(b.onDeselected)b.onDeselected();b.selected=!1}this.selected_nodes={};this.setDirty(!0)}; +LGraphCanvas.prototype.deleteSelectedNodes=function(){for(var a in this.selected_nodes)this.graph.remove(this.selected_nodes[a]);this.selected_nodes={};this.setDirty(!0)};LGraphCanvas.prototype.centerOnNode=function(a){this.graph.config.canvas_offset[0]=-a.pos[0]-0.5*a.size[0]+0.5*this.canvas.width/this.graph.config.canvas_scale;this.graph.config.canvas_offset[1]=-a.pos[1]-0.5*a.size[1]+0.5*this.canvas.height/this.graph.config.canvas_scale;this.setDirty(!0,!0)}; +LGraphCanvas.prototype.adjustMouseEvent=function(a){var b=this.canvas.getBoundingClientRect();a.localX=a.pageX-b.left;a.localY=a.pageY-b.top;a.canvasX=a.localX/this.graph.config.canvas_scale-this.graph.config.canvas_offset[0];a.canvasY=a.localY/this.graph.config.canvas_scale-this.graph.config.canvas_offset[1]}; +LGraphCanvas.prototype.setZoom=function(a,b){b||(b=[0.5*this.canvas.width,0.5*this.canvas.height]);var c=this.convertOffsetToCanvas(b);this.graph.config.canvas_scale=a;4this.graph.config.canvas_scale&&(this.graph.config.canvas_scale=0.1);var d=this.convertOffsetToCanvas(b),c=[d[0]-c[0],d[1]-c[1]];this.graph.config.canvas_offset[0]+=c[0];this.graph.config.canvas_offset[1]+=c[1];this.dirty_bgcanvas=this.dirty_canvas=!0}; +LGraphCanvas.prototype.convertOffsetToCanvas=function(a){return[a[0]/this.graph.config.canvas_scale-this.graph.config.canvas_offset[0],a[1]/this.graph.config.canvas_scale-this.graph.config.canvas_offset[1]]};LGraphCanvas.prototype.convertCanvasToOffset=function(a){return[(a[0]+this.graph.config.canvas_offset[0])*this.graph.config.canvas_scale,(a[1]+this.graph.config.canvas_offset[1])*this.graph.config.canvas_scale]}; +LGraphCanvas.prototype.convertEventToCanvas=function(a){var b=this.canvas.getClientRects()[0];return this.convertOffsetToCanvas([a.pageX-b.left,a.pageY-b.top])};LGraphCanvas.prototype.bringToFront=function(a){var b=this.graph.nodes.indexOf(a);-1!=b&&(this.graph.nodes.splice(b,1),this.graph.nodes.push(a))};LGraphCanvas.prototype.sendToBack=function(a){var b=this.graph.nodes.indexOf(a);-1!=b&&(this.graph.nodes.splice(b,1),this.graph.nodes.unshift(a))}; +LGraphCanvas.prototype.computeVisibleNodes=function(){var a=[],b;for(b in this.graph.nodes){var c=this.graph.nodes[b];(!this.live_mode||c.onDrawBackground||c.onDrawForeground)&&overlapBounding(this.visible_area,c.getBounding())&&a.push(c)}return a}; +LGraphCanvas.prototype.draw=function(a,b){var c=(new Date).getTime();this.render_time=0.001*(c-this.last_draw_time);this.last_draw_time=c;if(this.graph){var c=[-this.graph.config.canvas_offset[0],-this.graph.config.canvas_offset[1]],d=[c[0]+this.canvas.width/this.graph.config.canvas_scale,c[1]+this.canvas.height/this.graph.config.canvas_scale];this.visible_area=new Float32Array([c[0],c[1],d[0],d[1]])}(this.dirty_bgcanvas||b)&&this.drawBgcanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps= +this.render_time?1/this.render_time:0;this.frame+=1}; +LGraphCanvas.prototype.drawFrontCanvas=function(){var a=this.ctx,b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());a.clearRect(0,0,b.width,b.height);a.drawImage(this.bgcanvas,0,0);this.show_info&&(a.font="10px Arial",a.fillStyle="#888",this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("F: "+ +this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);a.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);d.draw(a,this);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=this.connecting_pos&& +(a.lineWidth=LGraphCanvas.link_width,a.fillStyle="node"==this.connecting_output.type?"#F85":"#AFA",a.strokeStyle=a.fillStyle,this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]]),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();this.dirty_canvas=!1}; +LGraphCanvas.prototype.drawBgcanvas=function(){var a=this.bgcanvas,b=this.bgctx;a.width=a.width;b.restore();b.setTransform(1,0,0,1,0,0);if(this.graph){b.save();b.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);b.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);if(this.background_image&&0.5"+e+""})}LiteGraph.createContextualMenu(d,{event:b,callback:function(b){a&&(b=LGraphCanvas.node_colors[b.value])&&(a.color=b.color,a.bgcolor=b.bgcolor,a.graph.canvas.setDirty(!0))},from:c});return!1}; +LGraphCanvas.onMenuNodeShapes=function(a,b){LiteGraph.createContextualMenu(["box","round","circle"],{event:b,callback:function(b){a&&(a.shape=b,a.graph.canvas.setDirty(!0))}});return!1};LGraphCanvas.onMenuNodeRemove=function(a){!1!=a.removable&&(a.graph.remove(a),a.graph.canvas.setDirty(!0,!0))};LGraphCanvas.onMenuNodeClone=function(a){if(!1!=a.clonable){var b=a.clone();b&&(b.pos=[a.pos[0]+5,a.pos[1]+5],a.graph.add(b),a.graph.canvas.setDirty(!0,!0))}}; +LGraphCanvas.node_colors={red:{color:"#FAA",bgcolor:"#A44"},green:{color:"#AFA",bgcolor:"#4A4"},blue:{color:"#AAF",bgcolor:"#44A"},white:{color:"#FFF",bgcolor:"#AAA"}};LGraphCanvas.prototype.getCanvasMenuOptions=function(){return[{content:"Add Node",is_menu:!0,callback:LGraphCanvas.onMenuAdd}]}; +LGraphCanvas.prototype.getNodeMenuOptions=function(a){var b=[{content:"Inputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeInputs},{content:"Outputs",is_menu:!0,disabled:!0,callback:LGraphCanvas.onMenuNodeOutputs},null,{content:"Collapse",callback:LGraphCanvas.onMenuNodeCollapse},{content:"Colors",is_menu:!0,callback:LGraphCanvas.onMenuNodeColors},{content:"Shapes",is_menu:!0,callback:LGraphCanvas.onMenuNodeShapes},null,{content:"Clone",callback:LGraphCanvas.onMenuNodeClone},null,{content:"Remove", +callback:LGraphCanvas.onMenuNodeRemove}];!1==a.clonable&&(b[7].disabled=!0);!1==a.removable&&(b[9].disabled=!0);a.onGetInputs&&a.onGetInputs().length&&(b[0].disabled=!1);a.onGetOutputs&&a.onGetOutputs().length&&(b[1].disabled=!1);return b};LGraphCanvas.prototype.processContextualMenu=function(a,b){var c=this,d=LiteGraph.createContextualMenu(a?this.getNodeMenuOptions(a):this.getCanvasMenuOptions(),{event:b,callback:function(e,f){if(e&&e.callback)return e.callback(a,f,d,c,b)}})}; +CanvasRenderingContext2D.prototype.roundRect=function(a,b,c,d,e,f){void 0===e&&(e=5);void 0===f&&(f=e);this.beginPath();this.moveTo(a+e,b);this.lineTo(a+c-e,b);this.quadraticCurveTo(a+c,b,a+c,b+e);this.lineTo(a+c,b+d-f);this.quadraticCurveTo(a+c,b+d,a+c-f,b+d);this.lineTo(a+f,b+d);this.quadraticCurveTo(a,b+d,a,b+d-f);this.lineTo(a,b+e);this.quadraticCurveTo(a,b,a+e,b)};function compareObjects(a,b){for(var c in a)if(a[c]!=b[c])return!1;return!0} +function distance(a,b){return Math.sqrt((b[0]-a[0])*(b[0]-a[0])+(b[1]-a[1])*(b[1]-a[1]))}function colorToString(a){return"rgba("+Math.round(255*a[0]).toFixed()+","+Math.round(255*a[1]).toFixed()+","+Math.round(255*a[2]).toFixed()+","+(4==a.length?a[3].toFixed(2):"1.0")+")"}function isInsideRectangle(a,b,c,d,e,f){return ca&&db?!0:!1}function growBounding(a,b,c){ba[2]&&(a[2]=b);ca[3]&&(a[3]=c)} +function isInsideBounding(a,b){return a[0]b[1][0]||a[1]>b[1][1]?!1:!0}function overlapBounding(a,b){return a[0]>b[2]||a[1]>b[3]||a[2]f;f+=2)d="0123456789ABCDEF".indexOf(a.charAt(f)),e="0123456789ABCDEF".indexOf(a.charAt(f+1)),b[c]=16*d+e,c++;return b} +function num2hex(a){for(var b="#",c,d,e=0;3>e;e++)c=a[e]/16,d=a[e]%16,b+="0123456789ABCDEF".charAt(c)+"0123456789ABCDEF".charAt(d);return b} +LiteGraph.createContextualMenu=function(a,b){function c(a){var c=!0;b.callback&&(a=b.callback.call(d,this.data,a),void 0!=a&&(c=a));c&&LiteGraph.closeAllContextualMenus()}this.options=b=b||{};b.from||LiteGraph.closeAllContextualMenus();var d=document.createElement("div");d.className="litecontextualmenu litemenubar-panel";this.root=d;var e=d.style;e.minWidth="100px";e.minHeight="20px";e.position="fixed";e.top="100px";e.left="100px";e.color="#AAF";e.padding="2px";e.borderBottom="2px solid #AAF";e.backgroundColor= +"#444";d.addEventListener("contextmenu",function(a){a.preventDefault();return!1});for(var f in a){var e=a[f],g=document.createElement("div");g.className="litemenu-entry";null==e?g.className="litemenu-entry separator":(e.is_menu&&(g.className+=" submenu"),e.disabled&&(g.className+=" disabled"),g.style.cursor="pointer",g.dataset.value="string"==typeof e?e:e.value,g.data=e,g.innerHTML="string"==typeof e?a.constructor==Array?a[f]:f:e.content?e.content:f,g.addEventListener("click",c));d.appendChild(g)}d.addEventListener("mouseover", +function(a){this.mouse_inside=!0});d.addEventListener("mouseout",function(a){for(a=a.toElement;a!=this&&a!=document;)a=a.parentNode;a!=this&&(this.mouse_inside=!1,this.block_close||this.closeMenu())});document.body.appendChild(d);f=d.getClientRects()[0];b.from&&(b.from.block_close=!0);var h=b.left||0,e=b.top||0;b.event&&(h=b.event.pageX-10,e=b.event.pageY-10,b.left&&(h=b.left),g=document.body.getClientRects()[0],b.from&&(h=b.from.getClientRects()[0],h=h.left+h.width),h>g.width-f.width-10&&(h=g.width- +f.width-10),e>g.height-f.height-10&&(e=g.height-f.height-10));d.style.left=h+"px";d.style.top=e+"px";d.closeMenu=function(){b.from&&(b.from.block_close=!1,b.from.mouse_inside||b.from.closeMenu());this.parentNode&&document.body.removeChild(this)};return d};LiteGraph.closeAllContextualMenus=function(){var a=document.querySelectorAll(".litecontextualmenu");if(a.length){for(var b=[],c=0;cB":value=a>b;break;case "A=B":value=a>=b}this.setOutputData(c,value)}}},onGetOutputs:function(){return[["A==B","number"],["A!=B","number"],["A>B","number"],["A=B","number"],["A<=B","number"]]}}); +window.math&&LiteGraph.registerNodeType("math/formula",{title:"Formula",desc:"Compute safe formula",inputs:[["x","number"],["y","number"]],outputs:[["","number"]],properties:{x:1,y:1,formula:"x+y"},onExecute:function(){var a=this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.x=a:a=this.properties.x;null!=b?this.properties.y=b:b=this.properties.y;a=math.eval(this.properties.formula,{x:a,y:b,T:this.graph.globaltime});this.setOutputData(0,a)},onDrawBackground:function(){this.outputs[0].label= +this.properties.formula},onGetOutputs:function(){return[["A-B","number"],["A*B","number"],["A/B","number"]]}}); +LiteGraph.registerNodeType("math/trigonometry",{title:"Trigonometry",desc:"Sin Cos Tan",bgImageUrl:"nodes/imgs/icon-sin.png",inputs:[["v","number"]],outputs:[["sin","number"]],properties:{amplitude:1},size:[100,20],onExecute:function(){for(var a=this.getInputData(0),b=this.properties.amplitude,c=0,d=this.outputs.length;cXYZ",desc:"vector 3 to components",inputs:[["vec3","vec3"]],outputs:[["x","number"],["y","number"],["z","number"]],onExecute:function(){var a=this.getInputData(0);null!=a&&(this.setOutputData(0,a[0]),this.setOutputData(1,a[1]),this.setOutputData(2,a[2]))}}),LiteGraph.registerNodeType("math3d/xyz-to-vec3",{title:"XYZ->Vec3",desc:"components to vector3",inputs:[["x","number"],["y","number"],["z","number"]],outputs:[["vec3", +"vec3"]],onExecute:function(){var a=this.getInputData(0);null==a&&(a=0);var b=this.getInputData(1);null==b&&(b=0);var c=this.getInputData(2);null==c&&(c=0);this.setOutputData(0,vec3.fromValues(a,b,c))}}),LiteGraph.registerNodeType("math3d/rotation",{title:"Rotation",desc:"rotation quaternion",inputs:[["degrees","number"],["axis","vec3"]],outputs:[["quat","quat"]],properties:{angle:90,axis:[0,1,0]},onExecute:function(){var a=this.getInputData(0);null==a&&(a=this.properties.angle);var b=this.getInputData(1); +null==b&&(b=this.properties.axis);a=quat.setAxisAngle(quat.create(),b,0.0174532925*a);this.setOutputData(0,a)}}),LiteGraph.registerNodeType("math3d/rotate_vec3",{title:"Rot. Vec3",desc:"rotate a point",inputs:[["vec3","vec3"],["quat","quat"]],outputs:[["result","vec3"]],properties:{vec:[0,0,1]},onExecute:function(){var a=this.getInputData(0);null==a&&(a=this.properties.vec);var b=this.getInputData(1);null==b?this.setOutputData(a):this.setOutputData(0,vec3.transformQuat(vec3.create(),a,b))}}),LiteGraph.registerNodeType("math3d/mult-quat", +{title:"Mult. Quat",desc:"rotate quaternion",inputs:[["A","quat"],["B","quat"]],outputs:[["A*B","quat"]],onExecute:function(){var a=this.getInputData(0);if(null!=a){var b=this.getInputData(1);null!=b&&(a=quat.multiply(quat.create(),a,b),this.setOutputData(0,a))}}})); +LiteGraph.registerNodeType("widget/knob",{title:"Knob",desc:"Circular controller",size:[64,84],outputs:[["","number"]],properties:{min:0,max:1,value:0.5,wcolor:"#7AF",size:50},widgets:[{name:"increase",text:"+",type:"minibutton"},{name:"decrease",text:"-",type:"minibutton"}],onInit:function(){this.value=(this.properties.value-this.properties.min)/(this.properties.max-this.properties.min);this.imgbg=this.loadImage("imgs/knob_bg.png");this.imgfg=this.loadImage("imgs/knob_fg.png")},onDrawImageKnob:function(a){if(this.imgfg&& +this.imgfg.width){var b=0.5*this.imgbg.width,c=this.size[0]/this.imgfg.width;a.save();a.translate(0,20);a.scale(c,c);a.drawImage(this.imgbg,0,0);a.translate(b,b);a.rotate(12*this.value*Math.PI/8+10*Math.PI/8);a.translate(-b,-b);a.drawImage(this.imgfg,0,0);a.restore();a.font="bold 16px Criticized,Tahoma";a.fillStyle="rgba(100,100,100,0.8)";a.textAlign="center";a.fillText(this.name.toUpperCase(),0.5*this.size[0],18);a.textAlign="left"}},onDrawVectorKnob:function(a){if(this.imgfg&&this.imgfg.width){a.lineWidth= +1;a.strokeStyle=this.mouseOver?"#FFF":"#AAA";a.fillStyle="#000";a.beginPath();a.arc(0.5*this.size[0],0.5*this.size[1]+10,0.5*this.properties.size,0,2*Math.PI,!0);a.stroke();0a.canvasY-this.pos[1]||distance([a.canvasX, +a.canvasY],[this.pos[0]+this.center[0],this.pos[1]+this.center[1]])>this.radius)return!1;this.oldmouse=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];this.captureInput(!0);return!0}},onMouseMove:function(a){if(this.oldmouse){a=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];var b=this.value,b=b-0.01*(a[1]-this.oldmouse[1]);1b&&(b=0);this.value=b;this.properties.value=this.properties.min+(this.properties.max-this.properties.min)*this.value;this.oldmouse=a;this.setDirtyCanvas(!0)}},onMouseUp:function(a){this.oldmouse&& +(this.oldmouse=null,this.captureInput(!1))},onMouseLeave:function(a){},onWidget:function(a,b){if("increase"==b.name)this.onPropertyChange("size",this.properties.size+10);else if("decrease"==b.name)this.onPropertyChange("size",this.properties.size-10)},onPropertyChange:function(a,b){if("wcolor"==a)this.properties[a]=b;else if("size"==a)b=parseInt(b),this.properties[a]=b,this.size=[b+4,b+24],this.setDirtyCanvas(!0,!0);else if("min"==a||"max"==a||"value"==a)this.properties[a]=parseFloat(b);else return!1; +return!0}}); +LiteGraph.registerNodeType("widget/hslider",{title:"H.Slider",desc:"Linear slider controller",size:[160,26],outputs:[["","number"]],properties:{wcolor:"#7AF",min:0,max:1,value:0.5},onInit:function(){this.value=0.5;this.imgfg=this.loadImage("imgs/slider_fg.png")},onDrawVectorial:function(a){this.imgfg&&this.imgfg.width&&(a.lineWidth=1,a.strokeStyle=this.mouseOver?"#FFF":"#AAA",a.fillStyle="#000",a.beginPath(),a.rect(2,0,this.size[0]-4,20),a.stroke(),a.fillStyle=this.properties.wcolor,a.beginPath(),a.rect(2+ +(this.size[0]-4-20)*this.value,0,20,20),a.fill())},onDrawImage:function(a){this.imgfg&&this.imgfg.width&&(a.lineWidth=1,a.fillStyle="#000",a.fillRect(2,9,this.size[0]-4,2),a.strokeStyle="#333",a.beginPath(),a.moveTo(2,9),a.lineTo(this.size[0]-4,9),a.stroke(),a.strokeStyle="#AAA",a.beginPath(),a.moveTo(2,11),a.lineTo(this.size[0]-4,11),a.stroke(),a.drawImage(this.imgfg,2+(this.size[0]-4)*this.value-0.5*this.imgfg.width,0.5*-this.imgfg.height+10))},onDrawBackground:function(a){this.onDrawImage(a)}, +onExecute:function(){this.properties.value=this.properties.min+(this.properties.max-this.properties.min)*this.value;this.setOutputData(0,this.properties.value);this.boxcolor=colorToString([this.value,this.value,this.value])},onMouseDown:function(a){if(0>a.canvasY-this.pos[1])return!1;this.oldmouse=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];this.captureInput(!0);return!0},onMouseMove:function(a){if(this.oldmouse){a=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];var b=this.value,b=b+(a[0]-this.oldmouse[0])/ +this.size[0];1b&&(b=0);this.value=b;this.oldmouse=a;this.setDirtyCanvas(!0)}},onMouseUp:function(a){this.oldmouse=null;this.captureInput(!1)},onMouseLeave:function(a){},onPropertyChange:function(a,b){if("wcolor"==a)this.properties[a]=b;else return!1;return!0}}); +LiteGraph.registerNodeType("widget/kpad",{title:"KPad",desc:"bidimensional slider",size:[200,200],outputs:[["x","number"],["y","number"]],properties:{x:0,y:0,borderColor:"#333",bgcolorTop:"#444",bgcolorBottom:"#000",shadowSize:1,borderRadius:2},createGradient:function(a){this.lineargradient=a.createLinearGradient(0,0,0,this.size[1]);this.lineargradient.addColorStop(0,this.properties.bgcolorTop);this.lineargradient.addColorStop(1,this.properties.bgcolorBottom)},onDrawBackground:function(a){this.lineargradient|| +this.createGradient(a);a.lineWidth=1;a.strokeStyle=this.properties.borderColor;a.fillStyle=this.lineargradient;a.shadowColor="#000";a.shadowOffsetX=0;a.shadowOffsetY=0;a.shadowBlur=this.properties.shadowSize;a.roundRect(0,0,this.size[0],this.size[1],this.properties.shadowSize);a.fill();a.shadowColor="rgba(0,0,0,0)";a.stroke();a.fillStyle="#A00";a.fillRect(this.size[0]*this.properties.x-5,this.size[1]*this.properties.y-5,10,10)},onWidget:function(a,b){"update"==b.name&&(this.lineargradient=null,this.setDirtyCanvas(!0))}, +onExecute:function(){this.setOutputData(0,this.properties.x);this.setOutputData(1,this.properties.y)},onMouseDown:function(a){if(0>a.canvasY-this.pos[1])return!1;this.oldmouse=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]];this.captureInput(!0);return!0},onMouseMove:function(a){this.oldmouse&&(a=[a.canvasX-this.pos[0],a.canvasY-this.pos[1]],this.properties.x=a[0]/this.size[0],this.properties.y=a[1]/this.size[1],1this.properties.x&&(this.properties.x=0),1this.properties.y&&(this.properties.y=0),this.oldmouse=a,this.setDirtyCanvas(!0))},onMouseUp:function(a){this.oldmouse&&(this.oldmouse=null,this.captureInput(!1))},onMouseLeave:function(a){}}); +LiteGraph.registerNodeType("widget/button",{title:"Button",desc:"A send command button",widgets:[{name:"test",text:"Test Button",type:"button"}],size:[100,40],properties:{text:"clickme",command:"",color:"#7AF",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",fontsize:"16"},outputs:[["M","module"]],createGradient:function(a){this.lineargradient=a.createLinearGradient(0,0,0,this.size[1]);this.lineargradient.addColorStop(0,this.properties.bgcolorTop);this.lineargradient.addColorStop(1,this.properties.bgcolorBottom)}, +drawVectorShape:function(a){a.fillStyle=this.mouseOver?this.properties.color:"#AAA";this.clicking&&(a.fillStyle="#FFF");a.strokeStyle="#AAA";a.roundRect(5,5,this.size[0]-10,this.size[1]-10,4);a.stroke();this.mouseOver&&a.fill();a.fillStyle=this.mouseOver?"#000":"#AAA";a.font="bold "+this.properties.fontsize+"px Criticized,Tahoma";a.textAlign="center";a.fillText(this.properties.text,0.5*this.size[0],0.5*this.size[1]+0.5*parseInt(this.properties.fontsize));a.textAlign="left"},drawBevelShape:function(a){a.shadowColor= +"#000";a.shadowOffsetX=0;a.shadowOffsetY=0;a.shadowBlur=this.properties.shadowSize;this.lineargradient||this.createGradient(a);a.fillStyle=this.mouseOver?this.properties.color:this.lineargradient;this.clicking&&(a.fillStyle="#444");a.strokeStyle="#FFF";a.roundRect(5,5,this.size[0]-10,this.size[1]-10,4);a.fill();a.shadowColor="rgba(0,0,0,0)";a.stroke();a.fillStyle=this.mouseOver?"#000":"#444";a.font="bold "+this.properties.fontsize+"px Century Gothic";a.textAlign="center";a.fillText(this.properties.text, +0.5*this.size[0],0.5*this.size[1]+0.4*parseInt(this.properties.fontsize));a.textAlign="left"},onDrawBackground:function(a){this.drawBevelShape(a)},clickButton:function(){var a=this.getOutputModule(0);if(this.properties.command&&""!=this.properties.command)a.executeAction(this.properties.command)||this.trace("Error executing action in other module");else if(a&&a.onTrigger)a.onTrigger()},onMouseDown:function(a){if(2>a.canvasY-this.pos[1])return!1;this.clickButton();return this.clicking=!0},onMouseUp:function(a){this.clicking= +!1},onExecute:function(){},onWidget:function(a,b){"test"==b.name&&this.clickButton()},onPropertyChange:function(a,b){this.properties[a]=b;return!0}}); +LiteGraph.registerNodeType("widget/progress",{title:"Progress",desc:"Shows data in linear progress",size:[160,26],inputs:[["","number"]],properties:{min:0,max:1,value:0,wcolor:"#AAF"},onExecute:function(){var a=this.getInputData(0);void 0!=a&&(this.properties.value=a)},onDrawBackground:function(a){a.lineWidth=1;a.fillStyle=this.properties.wcolor;var b=(this.properties.value-this.properties.min)/(this.properties.max-this.properties.min),b=Math.min(1,b),b=Math.max(0,b);a.fillRect(2,2,(this.size[0]- +4)*b,this.size[1]-4)}}); +LiteGraph.registerNodeType("widget/text",{title:"Text",desc:"Shows the input value",widgets:[{name:"resize",text:"Resize box",type:"button"},{name:"led_text",text:"LED",type:"minibutton"},{name:"normal_text",text:"Normal",type:"minibutton"}],inputs:[["",0]],properties:{value:"...",font:"Arial",fontsize:18,color:"#AAA",align:"left",glowSize:0,decimals:1},onDrawBackground:function(a){a.fillStyle=this.properties.color;var b=this.properties.value;this.properties.glowSize?(a.shadowColor=this.properties.color, +a.shadowOffsetX=0,a.shadowOffsetY=0,a.shadowBlur=this.properties.glowSize):a.shadowColor="transparent";var c=this.properties.fontsize;a.textAlign=this.properties.align;a.font=c.toString()+"px "+this.properties.font;this.str="number"==typeof b?b.toFixed(this.properties.decimals):b;if("string"==typeof this.str){var b=this.str.split("\\n"),d;for(d in b)a.fillText(b[d],"left"==this.properties.align?15:this.size[0]-15,-0.15*c+c*(parseInt(d)+1))}a.shadowColor="transparent";this.last_ctx=a;a.textAlign="left"}, +onExecute:function(){var a=this.getInputData(0);this.properties.value=null!=a?a:"";this.setDirtyCanvas(!0)},resize:function(){if(this.last_ctx){var a=this.str.split("\\n");this.last_ctx.font=this.properties.fontsize+"px "+this.properties.font;var b=0,c;for(c in a){var d=this.last_ctx.measureText(a[c]).width;bb&&(b=0);if(0!=a.length){var c=[0,0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,c)}}}); +LiteGraph.registerNodeType("graphics/frame",{title:"Frame",desc:"Frame viewerew",inputs:[["","image"]],size:[200,200],widgets:[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}],onDrawBackground:function(a){this.frame&&a.drawImage(this.frame,0,0,this.size[0],this.size[1])},onExecute:function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)},onWidget:function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height;c||null== +this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()},show:function(){showElement&&this.frame&&showElement(this.frame)}}); +LiteGraph.registerNodeType("visualization/graph",{desc:"Shows a graph of the inputs",inputs:[["",0],["",0],["",0],["",0]],size:[200,200],properties:{min:-1,max:1,bgColor:"#000"},onDrawBackground:function(a){var b=["#FFF","#FAA","#AFA","#AAF"];null!=this.properties.bgColor&&""!=this.properties.bgColor&&(a.fillStyle="#000",a.fillRect(2,2,this.size[0]-4,this.size[1]-4));if(this.data){var c=this.properties.min,d=this.properties.max,e;for(e in this.data){var f=this.data[e];if(f&&null!=this.getInputInfo(e)){a.strokeStyle= +b[e];a.beginPath();for(var g=f.length/this.size[0],h=0;hk&&(k=0);0==h?a.moveTo(h/g,this.size[1]-5-(this.size[1]-10)*k):a.lineTo(h/g,this.size[1]-5-(this.size[1]-10)*k)}a.stroke()}}}},onExecute:function(){this.data||(this.data=[]);for(var a in this.inputs){var b=this.getInputData(a);"number"==typeof b?(b=b?b:0,this.data[a]||(this.data[a]=[]),this.data[a].push(b),this.data[a].length>this.size[1]-4&&(this.data[a]=this.data[a].slice(1,this.data[a].length))): +this.data[a]=b}this.data.length&&this.setDirtyCanvas(!0)}}); +LiteGraph.registerNodeType("graphics/supergraph",{title:"Supergraph",desc:"Shows a nice circular graph",inputs:[["x","number"],["y","number"],["c","color"]],outputs:[["","image"]],widgets:[{name:"clear_alpha",text:"Clear Alpha",type:"minibutton"},{name:"clear_color",text:"Clear color",type:"minibutton"}],properties:{size:256,bgcolor:"#000",lineWidth:1},bgcolor:"#000",flags:{allow_fastrender:!0},onLoad:function(){this.createCanvas()},createCanvas:function(){this.canvas=document.createElement("canvas"); +this.canvas.width=this.properties.size;this.canvas.height=this.properties.size;this.oldpos=null;this.clearCanvas(!0)},onExecute:function(){var a=this.getInputData(0),b=this.getInputData(1),c=this.getInputData(2);if(null!=a||null!=b){a||(a=0);b||(b=0);var a=0.95*a,b=0.95*b,d=this.properties.size;d==this.canvas.width&&d==this.canvas.height||this.createCanvas();if(this.oldpos){var e=this.canvas.getContext("2d");null==c?c="rgba(255,255,255,0.5)":"object"==typeof c&&(c=colorToString(c));e.strokeStyle= +c;e.beginPath();e.moveTo(this.oldpos[0],this.oldpos[1]);this.oldpos=[(0.5*a+0.5)*d,(0.5*b+0.5)*d];e.lineTo(this.oldpos[0],this.oldpos[1]);e.stroke();this.canvas.dirty=!0;this.setOutputData(0,this.canvas)}else this.oldpos=[(0.5*a+0.5)*d,(0.5*b+0.5)*d]}},clearCanvas:function(a){var b=this.canvas.getContext("2d");a?(b.clearRect(0,0,this.canvas.width,this.canvas.height),this.trace("Clearing alpha")):(b.fillStyle=this.properties.bgcolor,b.fillRect(0,0,this.canvas.width,this.canvas.height))},onWidget:function(a, +b){"clear_color"==b.name?this.clearCanvas(!1):"clear_alpha"==b.name&&this.clearCanvas(!0)},onPropertyChange:function(a,b){if("size"==a)this.properties.size=parseInt(b),this.createCanvas();else if("bgcolor"==a)this.properties.bgcolor=b,this.createCanvas();else if("lineWidth"==a)this.properties.lineWidth=parseInt(b),this.canvas.getContext("2d").lineWidth=this.properties.lineWidth;else return!1;return!0}}); +LiteGraph.registerNodeType("graphics/imagefade",{title:"Image fade",desc:"Fades between images",inputs:[["img1","image"],["img2","image"],["fade","number"]],outputs:[["","image"]],properties:{fade:0.5,width:512,height:512},widgets:[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}],onLoad:function(){this.createCanvas();var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)},createCanvas:function(){this.canvas= +document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height},onExecute:function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null==b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0, +this.canvas);this.setDirtyCanvas(!0)}}); +LiteGraph.registerNodeType("graphics/image",{title:"Image",desc:"Image loader",inputs:[],outputs:[["frame","image"]],properties:{url:""},widgets:[{name:"load",text:"Load",type:"button"}],onLoad:function(){""!=this.properties.url&&null==this.img&&this.loadImage(this.properties.url)},onStart:function(){},onExecute:function(){this.img||(this.boxcolor="#000");this.img&&this.img.width?this.setOutputData(0,this.img):this.setOutputData(0,null);this.img.dirty&&(this.img.dirty=!1)},onPropertyChange:function(a, +b){this.properties[a]=b;"url"==a&&""!=b&&this.loadImage(b);return!0},loadImage:function(a){if(""==a)this.img=null;else{this.trace("loading image...");this.img=document.createElement("img");this.img.src="miniproxy.php?url="+a;this.boxcolor="#F95";var b=this;this.img.onload=function(){b.trace("Image loaded, size: "+b.img.width+"x"+b.img.height);this.dirty=!0;b.boxcolor="#9F9";b.setDirtyCanvas(!0)}}},onWidget:function(a,b){"load"==b.name&&this.loadImage(this.properties.url)}}); +LiteGraph.registerNodeType("graphics/cropImage",{title:"Crop",desc:"Crop Image",inputs:[["","image"]],outputs:[["","image"]],properties:{width:256,height:256,x:0,y:0,scale:1},size:[50,20],onLoad:function(){this.createCanvas()},createCanvas:function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height},onExecute:function(){var a=this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y, +a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)):this.setOutputData(0,null))},onPropertyChange:function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0}}); +LiteGraph.registerNodeType("graphics/video",{title:"Video",desc:"Video playback",inputs:[["t","number"]],outputs:[["frame","image"],["t","number"],["d","number"]],properties:{url:""},widgets:[{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},{name:"mute",text:"Mute video",type:"button"}],onClick:function(a){if(this.video&&20>distance([a.canvasX,a.canvasY],[this.pos[0]+55,this.pos[1]+40]))return this.play(),!0},onKeyDown:function(a){32== +a.keyCode&&this.playPause()},onLoad:function(){""!=this.properties.url&&this.loadVideo(this.properties.url)},play:function(){this.video&&(this.trace("Video playing"),this.video.play())},playPause:function(){this.video&&(this.video.paused?this.play():this.pause())},stop:function(){this.video&&(this.trace("Video stopped"),this.video.pause(),this.video.currentTime=0)},pause:function(){this.video&&(this.trace("Video paused"),this.video.pause())},onExecute:function(){if(this.video){var a=this.getInputData(0); +a&&0<=a&&1>=a&&(this.video.currentTime=a*this.video.duration,this.video.pause());this.video.dirty=!0;this.setOutputData(0,this.video);this.setOutputData(1,this.video.currentTime);this.setOutputData(2,this.video.duration);this.setDirtyCanvas(!0)}},onStart:function(){},onStop:function(){this.pause()},loadVideo:function(a){this.video=document.createElement("video");a?this.video.src=a:(this.video.src="modules/data/video.webm",this.properties.url=this.video.src);this.video.type="type=video/mp4";this.video.muted= +!0;this.video.autoplay=!1;var b=this;this.video.addEventListener("loadedmetadata",function(a){b.trace("Duration: "+b.video.duration+" seconds");b.trace("Size: "+b.video.videoWidth+","+b.video.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight});this.video.addEventListener("progress",function(a){});this.video.addEventListener("error",function(a){b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video."); +break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later.");break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}});this.video.addEventListener("ended",function(a){b.trace("Ended.");this.play()})},onPropertyChange:function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadVideo(b);return!0},onWidget:function(a,b){"demo"==b.name?this.loadVideo():"play"== +b.name&&this.video&&this.playPause();"stop"==b.name?this.stop():"mute"==b.name&&this.video&&(this.video.muted=!this.video.muted)}}); diff --git a/css/litegraph.css b/css/litegraph.css new file mode 100644 index 000000000..14042411f --- /dev/null +++ b/css/litegraph.css @@ -0,0 +1,42 @@ +/* this CSS contains only the basic CSS needed to run the app and use it */ + +.lgraphcanvas { + cursor: crosshair; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +.litecontextualmenu { + padding: 4px; + min-width: 100px; +} + +.litemenu-entry { + padding-left: 20px; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +.litemenu-entry.disabled { + opacity: 0.3; +} + +.litemenu-entry.submenu { + border-right: 2px solid #EEE; +} + + +.litemenu-entry:hover { + background-color: #555; +} + +.litemenu-entry.separator { + background-color: #111; + border-bottom: 1px solid #666; + height: 1px; + width: calc( 100% - 20px ); + -moz-width: calc( 100% - 20px ); + -webkit-width: calc( 100% - 20px ); +} \ No newline at end of file diff --git a/demo/code.js b/demo/code.js new file mode 100644 index 000000000..4465196b7 --- /dev/null +++ b/demo/code.js @@ -0,0 +1,547 @@ +var graph = null; +var graphcanvas = null; + +$(window).load(function() { + + var id = null; + if ($.getUrlVar("id") != null) + id = parseInt($.getUrlVar("id")); + else if (self.document.location.hash) + id = parseInt( self.document.location.hash.substr(1) ); + + $("#settings_button").click( function() { $("#settings-panel").toggle(); }); + $("#addnode_button").click( function() { onShowNodes() }); + $("#deletenode_button").click( function() { onDeleteNode() }); + $("#clonenode_button").click( function() { onCloneNode() }); + + $("#playnode_button").click( function() { + if(graph.status == LGraph.STATUS_STOPPED) + { + $(this).html(" Stop"); + graph.run(1); + } + else + { + $(this).html(" Play"); + graph.stop(); + } + }); + + $("#playstepnode_button").click( function() { + graph.runStep(1); + graphcanvas.draw(true,true); + }); + + $("#playfastnode_button").click( function() { + graph.runStep(5000); + graphcanvas.draw(true,true); + }); + + $("#collapsenode_button").click( function() { + /* + for(var i in graphcanvas.nodes_selected) + graphcanvas.nodes_selected[i].collapse(); + */ + if( graphcanvas.node_in_panel ) + graphcanvas.node_in_panel.collapse(); + + graphcanvas.draw(); + }); + + $("#pinnode_button").click( function() { + if( graphcanvas.node_in_panel ) + graphcanvas.node_in_panel.pin(); + }); + + $("#sendtobacknode_button").click( function() { + if( graphcanvas.node_in_panel ) + graphcanvas.sendToBack( graphcanvas.node_in_panel ); + graphcanvas.draw(true); + }); + + + + $("#confirm-createnode_button").click(function() { + var element = $(".node-type.selected")[0]; + var name = element.data; + var n = LiteGraph.createNode(name); + graph.add(n); + n.pos = graphcanvas.convertOffsetToCanvas([30,30]); + graphcanvas.draw(true,true); + $("#modal-blocking-box").hide(); + $("#nodes-browser").hide(); + }); + + $("#cancel-createnode_button").click(function() { + $("#modal-blocking-box").hide(); + $("#nodes-browser").hide(); + }); + + $("#close-area_button").click(function() { + $("#modal-blocking-box").hide(); + $("#data-visor").hide(); + }); + + $("#confirm-loadsession_button").click(function() { + var element = $(".session-item.selected")[0]; + var info = element.data; + + var str = localStorage.getItem("graph_session_" + info.id ); + graph.stop(); + graph.unserialize(str); + + graphcanvas.draw(true,true); + $("#modal-blocking-box").hide(); + $("#sessions-browser").hide(); + }); + + $("#cancel-loadsession_button").click(function() { + $("#modal-blocking-box").hide(); + $("#sessions-browser").hide(); + }); + + $("#livemode_button").click( function() { + graphcanvas.switchLiveMode(); + graphcanvas.draw(); + var url = graphcanvas.live_mode ? "imgs/gauss_bg_medium.jpg" : "imgs/gauss_bg.jpg"; + $("#livemode_button").html(!graphcanvas.live_mode ? " Live" : " Edit" ); + //$("canvas").css("background-image","url('"+url+"')"); + }); + + $("#newsession_button").click( function() { + $("#main-area").hide(); + graph.clear(); + graphcanvas.draw(); + $("#main-area").show(); + }); + + $("#savesession_button").click( function() { + onSaveSession(); + }); + + $("#loadsession_button").click( function() { + onLoadSession(); + }); + + $("#cancelsession-dialog_button").click(function() + { + $("#modal-blocking-box").hide(); + $("#savesession-dialog").hide(); + }); + + $("#savesession-dialog_button").click(function() + { + var name = $("#session-name-input").val(); + var desc = $("#session-description-input").val(); + + saveSession(name,desc); + + $("#modal-blocking-box").hide(); + $("#savesession-dialog").hide(); + + }); + + $("#closepanel_button").click(function() + { + graphcanvas.showNodePanel(null); + }); + + $("#maximize_button").click(function() + { + if($("#main").width() != window.innerWidth) + { + $("#main").width( (window.innerWidth).toString() + "px"); + $("#main").height( (window.innerHeight - 40).toString() + "px"); + graphcanvas.resizeCanvas(window.innerWidth,window.innerHeight - 100); + } + else + { + $("#main").width("800px"); + $("#main").height("660px"); + graphcanvas.resizeCanvas(800,600); + } + }); + + $("#resetscale_button").click(function() + { + graph.config.canvas_scale = 1.0; + graphcanvas.draw(true,true); + }); + + $("#resetpos_button").click(function() + { + graph.config.canvas_offset = [0,0]; + graphcanvas.draw(true,true); + }); + + $(".nodecolorbutton").click(function() + { + if( graphcanvas.node_in_panel ) + { + graphcanvas.node_in_panel.color = this.getAttribute("data-color"); + graphcanvas.node_in_panel.bgcolor = this.getAttribute("data-bgcolor"); + } + graphcanvas.draw(true,true); + }); + + + if ("onhashchange" in window) // does the browser support the hashchange event? + { + window.onhashchange = function () { + var h = window.location.hash.substr(1); + //action + return false; + } + } + + LiteGraph.node_images_path = "../nodes_data/"; + graph = new LGraph(); + graphcanvas = new LGraphCanvas("graphcanvas",graph); + graphcanvas.background_image = "imgs/grid.png"; + + graph.onAfterExecute = function() { graphcanvas.draw(true) }; + demo(); + + graph.onPlayEvent = function() + { + $("#playnode_button").addClass("playing"); + $("#playnode_button").removeClass("stopped"); + } + + graph.onStopEvent = function() + { + $("#playnode_button").addClass("stopped"); + $("#playnode_button").removeClass("playing"); + } + + graphcanvas.draw(); + + //update load counter + setInterval(function() { + $("#cpuload .fgload").width( (2*graph.elapsed_time) * 90); + if(graph.status == LGraph.STATUS_RUNNING) + $("#gpuload .fgload").width( (graphcanvas.render_time*10) * 90); + else + $("#gpuload .fgload").width( 4 ); + },200); + + //LiteGraph.run(100); +}); + + +function onShowNodes() +{ + $("#nodes-list").empty(); + + for (var i in LiteGraph.registered_node_types) + { + var node = LiteGraph.registered_node_types[i]; + var categories = node.category.split("/"); + + //create categories and find the propper one + var root = $("#nodes-list")[0]; + for(var i in categories) + { + var result = $(root).find("#node-category_" + categories[i] + " .container"); + if (result.length == 0) + { + var element = document.createElement("div"); + element.id = "node-category_" + categories[i]; + element.className = "node-category"; + element.data = categories[i]; + element.innerHTML = ""+categories[i]+""; + root.appendChild(element); + + $(element).find(".title").click(function(e){ + var element = $("#node-category_" + this.parentNode.data + " .container"); + $(element[0]).toggle(); + }); + + + var container = document.createElement("div"); + container.className = "container"; + element.appendChild(container); + + root = container; + } + else + root = result[0]; + } + + //create entry + var type = node.type; + var element = document.createElement("div"); + element.innerHTML = ""+node.title+" " + (node.desc? node.desc : ""); + element.className = "node-type"; + element.id = "node-type-" + node.name; + element.data = type; + root.appendChild(element); + } + + $(".node-type").click( function() { + $(".node-type.selected").removeClass("selected"); + $(this).addClass("selected"); + $("#confirm-createnode_button").attr("disabled",false); + }); + + $(".node-type").dblclick( function() { + $("#confirm-createnode_button").click(); + }); + + $("#confirm-createnode_button").attr("disabled",true); + + $("#modal-blocking-box").show(); + $("#nodes-browser").show(); +} + +function onDeleteNode() +{ + if(!graphcanvas.node_in_panel) return; + + graph.remove( graphcanvas.node_in_panel ); + graphcanvas.draw(); + $("#node-panel").hide(); + graphcanvas.node_in_panel = null; +} + +function onCloneNode() +{ + if(!graphcanvas.node_in_panel) return; + + var n = graphcanvas.node_in_panel.clone(); + n.pos[0] += 10; + n.pos[1] += 10; + + graph.add(n); + graphcanvas.draw(); +} + +function onSaveSession() +{ + if(graph.session["name"]) + $("#session-name-input").val(graph.session["name"]); + + if(graph.session["description"]) + $("#session-desc-input").val(graph.session["description"]); + + $("#modal-blocking-box").show(); + $("#savesession-dialog").show(); + //var str = LiteGraph.serialize(); + //localStorage.setItem("graph_session",str); +} + +function saveSession(name,desc) +{ + desc = desc || ""; + + graph.session["name"] = name; + graph.session["description"] = desc; + if(!graph.session["id"]) + graph.session["id"] = new Date().getTime(); + + var str = graph.serializeSession(); + localStorage.setItem("graph_session_" + graph.session["id"],str); + + var sessions_str = localStorage.getItem("node_sessions"); + var sessions = []; + + if(sessions_str) + sessions = JSON.parse(sessions_str); + + var pos = -1; + for(var i = 0; i < sessions.length; i++) + if( sessions[i].id == graph.session["id"] && sessions[i].name == name) + { + pos = i; + break; + } + + if(pos != -1) + { + //already on the list + } + else + { + var current_session = {name:name, desc:desc, id:graph.session["id"]}; + sessions.unshift(current_session); + localStorage.setItem("graph_sessions", JSON.stringify(sessions)); + } +} + +function onLoadSession() +{ + $("#sessions-browser-list").empty(); + + $("#modal-blocking-box").show(); + $("#sessions-browser").show(); + + var sessions_str = localStorage.getItem("graph_sessions"); + var sessions = []; + + if(sessions_str) + sessions = JSON.parse(sessions_str); + + for(var i in sessions) + { + var element = document.createElement("div"); + element.className = "session-item"; + element.data = sessions[i]; + $(element).html(""+sessions[i].name+""+sessions[i].desc+"x"); + $("#sessions-browser-list").append(element); + } + + $(".session-item").click( function() { + $(".session-item.selected").removeClass("selected"); + $(this).addClass("selected"); + $("#confirm-loadsession_button").attr("disabled",false); + }); + + $(".session-item").dblclick( function() { + $("#confirm-loadsession_button").click(); + }); + + $(".delete_session").click(function(e) { + var root = $(this).parent(); + var info = root[0].data; + + var sessions_str = localStorage.getItem("graph_sessions"); + var sessions = []; + if(sessions_str) + sessions = JSON.parse(sessions_str); + var pos = -1; + for(var i = 0; i < sessions.length; i++) + if( sessions[i].id == info.id ) + { + pos = i; + break; + } + + if(pos != -1) + { + sessions.splice(pos,1); + localStorage.setItem("graph_sessions", JSON.stringify(sessions)); + } + + root.remove(); + }); + + $("#confirm-loadsession_button").attr("disabled",true); + + /* + LiteGraph.stop(); + var str = localStorage.getItem("graph_session"); + LiteGraph.unserialize(str); + LiteGraph.draw(); + */ +} + +function onShagraph() +{ + +} + +function showImage(data) +{ + var img = new Image(); + img.src = data; + $("#data-visor .content").empty(); + $("#data-visor .content").append(img); + $("#modal-blocking-box").show(); + $("#data-visor").show(); +} + +function showElement(data) +{ + setTimeout(function(){ + $("#data-visor .content").empty(); + $("#data-visor .content").append(data); + $("#modal-blocking-box").show(); + $("#data-visor").show(); + },100); +} + + +// ********* SEEDED RANDOM ****************************** +function RandomNumberGenerator(seed) +{ + if (typeof(seed) == 'undefined') + { + var d = new Date(); + this.seed = 2345678901 + (d.getSeconds() * 0xFFFFFF) + (d.getMinutes() * 0xFFFF); + } + else + this.seed = seed; + + this.A = 48271; + this.M = 2147483647; + this.Q = this.M / this.A; + this.R = this.M % this.A; + this.oneOverM = 1.0 / this.M; + this.next = nextRandomNumber; + return this; +} + +function nextRandomNumber(){ + var hi = this.seed / this.Q; + var lo = this.seed % this.Q; + var test = this.A * lo - this.R * hi; + if(test > 0){ + this.seed = test; + } else { + this.seed = test + this.M; + } + return (this.seed * this.oneOverM); +} + +var RAND_GEN = RandomNumberGenerator(0); + +function RandomSeed(s) { RAND_GEN = RandomNumberGenerator(s); }; + +function myrand(Min, Max){ + return Math.round((Max-Min) * RAND_GEN.next() + Min); +} + +function myrandom() { return myrand(0,100000) / 100000; } + +// @format (hex|rgb|null) : Format to return, default is integer +function random_color(format) +{ + var rint = Math.round(0xffffff * myrandom()); + switch(format) + { + case 'hex': + return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1'); + break; + + case 'rgb': + return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; + break; + + default: + return rint; + break; + } +} + +$.extend({ + getUrlVars: function(){ + var vars = [], hash; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + for(var i = 0; i < hashes.length; i++) + { + hash = hashes[i].split('='); + vars.push(hash[0]); + vars[hash[0]] = hash[1]; + } + return vars; + }, + getUrlVar: function(name){ + return $.getUrlVars()[name]; + } +}); + +function trace(a) +{ + if(typeof(console) == "object") + console.log(a); +} \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js new file mode 100644 index 000000000..13c5c314c --- /dev/null +++ b/demo/demo.js @@ -0,0 +1,114 @@ +/* EXAMPLE *************************** +reModular.registerModuleType("name", { + title: "", + desc: "", + inputs: [["","type"]], + outputs: [["","type"]], + properties: {"varname":""}, + widgets: [{name:"name",text:"text to show",type:"button"}], + size: [200,220], + onLoad: function() + { + }, + onDrawBackground: function(ctx) + { + if(this.img) + ctx.drawImage(this.img, 0,20,this.size[0],this.size[1]-20); + }, + + onExecute: function() + { + this.img = this.getInputData(0); + reModular.dirty_canvas = true; + }, + onPropertyChange: function(name,value) + { + this.properties[name] = value; + return true; //block default behaviour + }, + onWidget: function(e,widget) + { + if(widget.name == "resize") + { + } + }, +}); +*/ + +function demo() +{ + multiConnection(); +} + +function multiConnection() +{ + var node_const_A = LiteGraph.createNode("basic/const"); + node_const_A.pos = [200,200]; + graph.add(node_const_A); + node_const_A.setValue(4); + + var node_const_B = LiteGraph.createNode("basic/const"); + node_const_B.pos = [200,300]; + graph.add(node_const_B); + node_const_B.setValue(10); + + var node_math = LiteGraph.createNode("math/operation"); + node_math.pos = [400,200]; + node_math.addOutput("A*B"); + graph.add(node_math); + + var node_watch = LiteGraph.createNode("basic/watch"); + node_watch.pos = [700,200]; + graph.add(node_watch); + + var node_watch2 = LiteGraph.createNode("basic/watch"); + node_watch2.pos = [700,300]; + graph.add(node_watch2); + + node_const_A.connect(0,node_math,0 ); + node_const_B.connect(0,node_math,1 ); + node_math.connect(0,node_watch,0 ); + node_math.connect(0,node_watch2,0 ); +} + +function sortTest() +{ + var rand = LiteGraph.createNode("math/rand",null, {pos: [10,100] }); + graph.add(rand); + + var nodes = []; + for(var i = 4; i >= 1; i--) + { + var n = LiteGraph.createNode("basic/watch",null, {pos: [i * 120,100] }); + graph.add(n); + nodes[i-1] = n; + } + + rand.connect(0, nodes[0], 0); + + for(var i = 0; i < nodes.length - 1; i++) + nodes[i].connect(0,nodes[i+1], 0); +} + +function benchmark() +{ + var num_nodes = 500; + var consts = []; + for(var i = 0; i < num_nodes; i++) + { + var n = LiteGraph.createNode("math/rand",null, {pos: [(2000 * Math.random())|0, (2000 * Math.random())|0] }); + graph.add(n); + consts.push(n); + } + + var watches = []; + for(var i = 0; i < num_nodes; i++) + { + var n = LiteGraph.createNode("basic/watch",null, {pos: [(2000 * Math.random())|0, (2000 * Math.random())|0] }); + graph.add(n); + watches.push(n); + } + + for(var i = 0; i < num_nodes; i++) + consts[ (Math.random() * consts.length)|0 ].connect(0, watches[ (Math.random() * watches.length)|0 ], 0 ); +} \ No newline at end of file diff --git a/demo/imgs/grid.png b/demo/imgs/grid.png new file mode 100644 index 000000000..2feb956e6 Binary files /dev/null and b/demo/imgs/grid.png differ diff --git a/demo/imgs/icon-edit.png b/demo/imgs/icon-edit.png new file mode 100644 index 000000000..17f31e5c1 Binary files /dev/null and b/demo/imgs/icon-edit.png differ diff --git a/demo/imgs/icon-gear.png b/demo/imgs/icon-gear.png new file mode 100644 index 000000000..34e192d77 Binary files /dev/null and b/demo/imgs/icon-gear.png differ diff --git a/demo/imgs/icon-maximize.png b/demo/imgs/icon-maximize.png new file mode 100644 index 000000000..c4d98455b Binary files /dev/null and b/demo/imgs/icon-maximize.png differ diff --git a/demo/imgs/icon-play.png b/demo/imgs/icon-play.png new file mode 100644 index 000000000..5f9a57b8f Binary files /dev/null and b/demo/imgs/icon-play.png differ diff --git a/demo/imgs/icon-playstep.png b/demo/imgs/icon-playstep.png new file mode 100644 index 000000000..fac10905d Binary files /dev/null and b/demo/imgs/icon-playstep.png differ diff --git a/demo/imgs/icon-record.png b/demo/imgs/icon-record.png new file mode 100644 index 000000000..7cd35ada0 Binary files /dev/null and b/demo/imgs/icon-record.png differ diff --git a/demo/imgs/icon-stop.png b/demo/imgs/icon-stop.png new file mode 100644 index 000000000..a22993f48 Binary files /dev/null and b/demo/imgs/icon-stop.png differ diff --git a/demo/imgs/load-progress-empty.png b/demo/imgs/load-progress-empty.png new file mode 100644 index 000000000..eb781a7bc Binary files /dev/null and b/demo/imgs/load-progress-empty.png differ diff --git a/demo/imgs/load-progress-full.png b/demo/imgs/load-progress-full.png new file mode 100644 index 000000000..e58e06f70 Binary files /dev/null and b/demo/imgs/load-progress-full.png differ diff --git a/demo/imgs/load-progress-grey.png b/demo/imgs/load-progress-grey.png new file mode 100644 index 000000000..7a8e68cb9 Binary files /dev/null and b/demo/imgs/load-progress-grey.png differ diff --git a/demo/imgs/play-icons-light-alpha.png b/demo/imgs/play-icons-light-alpha.png new file mode 100644 index 000000000..0c9ac5662 Binary files /dev/null and b/demo/imgs/play-icons-light-alpha.png differ diff --git a/demo/imgs/play-icons-light.png b/demo/imgs/play-icons-light.png new file mode 100644 index 000000000..74a9168e5 Binary files /dev/null and b/demo/imgs/play-icons-light.png differ diff --git a/demo/imgs/play-icons.png b/demo/imgs/play-icons.png new file mode 100644 index 000000000..4c6fadd36 Binary files /dev/null and b/demo/imgs/play-icons.png differ diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 000000000..746bfc2f7 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,70 @@ + + + + LiteGraph + + + + + + +
+ + +
+
+ +
+ +
+ + + +
+ + + + + + + + + + + + + diff --git a/demo/style.css b/demo/style.css new file mode 100644 index 000000000..76fdbb897 --- /dev/null +++ b/demo/style.css @@ -0,0 +1,387 @@ +html,body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +body { + background-color: #333; + color: #EEE; + font: 14px Tahoma; +} + +h1 { + font-family: "Metro Light",Tahoma; + color: #DDD; + font-size: 28px; + padding-left: 10px; + /*text-shadow: 0 1px 1px #333, 0 -1px 1px #777;*/ + margin: 0; + font-weight: normal; +} + +h1 span { + font-family: "Arial"; + font-size: 14px; + font-weight: normal; + color: #AAA; +} + +h2 { + font-family: "Metro Light"; + padding: 5px; + margin-left: 10px; +} + +#main { + width: 1000px; + min-height: 540px; + margin: auto; + background-color: #222; + /*border-radius: 10px;*/ +} + +#main.fullscreen { + width: 100%; + height: 100%; +} + +#header, #footer { + position: relative; + height: 40px; + background-color: #333; + /*border-radius: 10px 10px 0 0;*/ +} + +.tools, #tools-left, #tools-right { + position: absolute; + top: 2px; + right: 0px; + vertical-align: top; + + margin: 2px 5px 0 0px; +} + +#header button { + height: 32px; + vertical-align: top; +} + +#footer button { + /*font-size: 16px;*/ +} + +#tools-left { + right: auto; + left: 4px; +} + + +#footer { + height: 40px; + position: relative; + /*border-radius: 0 0 10px 10px;*/ +} + +#status { + position: absolute; + top: 10px; + right: 10px; + color: #FAA; + font-size: 18px; + padding: 5px; + /*border-radius: 5px;*/ + width: -moz-calc( 50% - 30px); + min-height: 30px; + overflow: hidden; + background-color: #644; +} + +#help-message { + padding: 2px; + font-size: 0.8em; + background-color: #464; + /*border-radius: 2px;*/ +} + +#content { + position: relative; + min-height: 500px; + overflow: hidden; +} + +.fullscreen #content { + min-height: -moz-calc(100% - 80px); + min-height: -webkit-calc(100% - 80px); + min-height: calc(100% - 80px); +} + +.info-section p { + padding-left: 20px; + margin: 2px; +} + +.info-section strong { + color: #FEA; +} + +#visual { + position: absolute; + top: 0; + left: 0; + background-color: black; + width: 100%; + height: 100%; +} + +button { + /*font-family: "Metro Light";*/ + color: #CCC; + font-size: 20px; + min-width: 30px; + /*border-radius: 0.3em;*/ + border: 0 solid #666; + background-color: #3F3F3F; + /*box-shadow: 0 0 3px black;*/ + padding: 4px 10px; + line-height: 20px; + cursor: pointer; + transition: all 1s; + -moz-transition: all 1s; + -webkit-transition: all 0.4s; +} + +button:hover { + background-color: #999; + color: #FFF; + transition: all 1s; + -moz-transition: all 1s; + -webkit-transition: all 0.4s; +} + +button:active { + background-color: white; +} + +button.fixed { + position: absolute; + top: 5px; + right: 5px; + font-size: 1.2em; +} + +button img { + margin: -4px; + vertical-align: top; +} + +#play_button { + background-color: #446; + margin-right: 30px; +} + +#play_button:hover { + background-color: #AAF; +} + +.item-list .item { + margin: 5px; + padding: 5px; + font-size: 1.2em; + + background-color: transparent; + color: #999; + padding-left: 5px; + transition: background-color 300ms, color 300ms, padding-left 300ms; + -moz-transition: background-color 300ms, color 300ms, padding-left 300ms; + -webkit-transition: background-color 300ms, color 300ms, padding-left 300ms; +} + +.item-list .item:hover { + background-color: #33A; + /*border-radius: 4px;*/ + color: white; + padding-left: 15px; + transition: background-color 300ms, color 300ms, padding-left 300ms; + -moz-transition: background-color 300ms, color 300ms, padding-left 300ms; + -webkit-transition: background-color 300ms, color 300ms, padding-left 300ms; + cursor: pointer; +} + +#gallery .item-list .item:hover { + background-color: #A83; +} + +.item-list .item strong { + display: inline-block; + width: 200px; +} + +.form label { + font-size: 1.2em; + width: 200px; + display: inline-block; + text-align: right; +} + +label { + font-weight: bold; + color: #AAF; +} + +input,textarea { + color: #EEE; + background-color: #555; + font-size: 1.2em; + border: 1px solid black; + /*border-radius: 4px;*/ + padding: 2px; + /*box-shadow: inset 0 0 3px #333; */ + font-family: Verdana; + width: 250px; +} + +textarea { + vertical-align: top; +} + +#block-app { + width:100%; + height:100%; + position: absolute; + top: 0; + left: 0; + background-color: rgba(0,0,0,0.5); + text-align: center; + z-index: 6; +} + +#block-app span { + display: block; + font-size: 30px; + margin: auto; + margin-top: 300px; +} + +#block-app span a { + display: inline-block; + /*border-radius: 4px;*/ + text-decoration: none; + color: black; + background-color: red; + padding: 0 4px 0 4px; +} + +::-webkit-scrollbar { + height: 12px; + width: 6px; + background: #222; +} +::-webkit-scrollbar-thumb { + background: rgba(200,200,200,0.4); +} +::-webkit-scrollbar-corner { + background: #766; +} + +#editor { + position: relative; + width: 50%; + height: 100%; + display: inline-block; + margin: 0; + padding: 0; +} + +#editor .toolsbar { + width: 100%; + height: 30px; + background-color: #262626; + margin: 0; + padding: 0; +} + +#editor .toolsbar button { + padding: 2px; + padding-left: 10px; + padding-right: 10px; + margin: 3px 0 0 3px; +} + +#editor .toolsbar button.enabled { + background-color: #66A; +} + +#world { + position: absolute; + top: 0; + right: 0; + width: 50%; + height: 100%; +} + +#worldcanvas { + background-color: #343; +} + +.popup { + position: absolute; + top: 0; + background-color: rgba(50,50,90,0.8); + width: 100%; + height: 100%; +} + +.popup .header, .nodepanel .header { + width: 100%; + height: 30px; + font-size: 20px; + padding: 2px; +} + +#help { + color: #eee; +} + +#help p { + margin: 10px; +} + +#loadmeter { + font-family: "Tahoma"; + display: inline-block; + position: absolute; + top: 0; + left: 300px; + color: #AAA; + font-size: 12px; + border-radius: 2px; + width: 130px; + margin: 3px; + padding: 2px; + vertical-align: top; +} + +#loadmeter strong { + vertical-align: top; + padding: 3px; + width: 30px; + display: inline-block; + line-height: 8px; +} + +#cpuload .bgload, #gpuload .bgload { + display: inline-block; + width: 90px; + height: 15px; + background-image: url('imgs/load-progress-empty.png'); +} + +#cpuload .fgload, #gpuload .fgload { + display: inline-block; + width: 4px; + height: 15px; + max-width: 90px; + background-image: url('imgs/load-progress-full.png'); +} diff --git a/external/Basica.otf b/external/Basica.otf new file mode 100644 index 000000000..661d179eb Binary files /dev/null and b/external/Basica.otf differ diff --git a/external/Criticized.otf b/external/Criticized.otf new file mode 100644 index 000000000..b010281d2 Binary files /dev/null and b/external/Criticized.otf differ diff --git a/external/DS-Digital.otf b/external/DS-Digital.otf new file mode 100644 index 000000000..80ab49010 Binary files /dev/null and b/external/DS-Digital.otf differ diff --git a/external/beat.otf b/external/beat.otf new file mode 100644 index 000000000..7b6d8b051 Binary files /dev/null and b/external/beat.otf differ diff --git a/external/jquery-1.6.2.min.js b/external/jquery-1.6.2.min.js new file mode 100644 index 000000000..48590ecb9 --- /dev/null +++ b/external/jquery-1.6.2.min.js @@ -0,0 +1,18 @@ +/*! + * jQuery JavaScript Library v1.6.2 + * http://jquery.com/ + * + * Copyright 2011, John Resig + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * Includes Sizzle.js + * http://sizzlejs.com/ + * Copyright 2011, The Dojo Foundation + * Released under the MIT, BSD, and GPL Licenses. + * + * Date: Thu Jun 30 14:16:56 2011 -0400 + */ +(function(a,b){function cv(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cs(a){if(!cg[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ch||(ch=c.createElement("iframe"),ch.frameBorder=ch.width=ch.height=0),b.appendChild(ch);if(!ci||!ch.createElement)ci=(ch.contentWindow||ch.contentDocument).document,ci.write((c.compatMode==="CSS1Compat"?"":"")+""),ci.close();d=ci.createElement(a),ci.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ch)}cg[a]=e}return cg[a]}function cr(a,b){var c={};f.each(cm.concat.apply([],cm.slice(0,b)),function(){c[this]=a});return c}function cq(){cn=b}function cp(){setTimeout(cq,0);return cn=f.now()}function cf(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ce(){try{return new a.XMLHttpRequest}catch(b){}}function b$(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){c!=="border"&&f.each(e,function(){c||(d-=parseFloat(f.css(a,"padding"+this))||0),c==="margin"?d+=parseFloat(f.css(a,c+this))||0:d-=parseFloat(f.css(a,"border"+this+"Width"))||0});return d+"px"}d=bx(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0,c&&f.each(e,function(){d+=parseFloat(f.css(a,"padding"+this))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+this+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+this))||0)});return d+"px"}function bm(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(be,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bl(a){f.nodeName(a,"input")?bk(a):"getElementsByTagName"in a&&f.grep(a.getElementsByTagName("input"),bk)}function bk(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bj(a){return"getElementsByTagName"in a?a.getElementsByTagName("*"):"querySelectorAll"in a?a.querySelectorAll("*"):[]}function bi(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bh(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c=f.expando,d=f.data(a),e=f.data(b,d);if(d=d[c]){var g=d.events;e=e[c]=f.extend({},d);if(g){delete e.handle,e.events={};for(var h in g)for(var i=0,j=g[h].length;i=0===c})}function V(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function N(a,b){return(a&&a!=="*"?a+".":"")+b.replace(z,"`").replace(A,"&")}function M(a){var b,c,d,e,g,h,i,j,k,l,m,n,o,p=[],q=[],r=f._data(this,"events");if(!(a.liveFired===this||!r||!r.live||a.target.disabled||a.button&&a.type==="click")){a.namespace&&(n=new RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)")),a.liveFired=this;var s=r.live.slice(0);for(i=0;ic)break;a.currentTarget=e.elem,a.data=e.handleObj.data,a.handleObj=e.handleObj,o=e.handleObj.origHandler.apply(e.elem,arguments);if(o===!1||a.isPropagationStopped()){c=e.level,o===!1&&(b=!1);if(a.isImmediatePropagationStopped())break}}return b}}function K(a,c,d){var e=f.extend({},d[0]);e.type=a,e.originalEvent={},e.liveFired=b,f.event.handle.call(c,e),e.isDefaultPrevented()&&d[0].preventDefault()}function E(){return!0}function D(){return!1}function m(a,c,d){var e=c+"defer",g=c+"queue",h=c+"mark",i=f.data(a,e,b,!0);i&&(d==="queue"||!f.data(a,g,b,!0))&&(d==="mark"||!f.data(a,h,b,!0))&&setTimeout(function(){!f.data(a,g,b,!0)&&!f.data(a,h,b,!0)&&(f.removeData(a,e,!0),i.resolve())},0)}function l(a){for(var b in a)if(b!=="toJSON")return!1;return!0}function k(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(j,"$1-$2").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNaN(d)?i.test(d)?f.parseJSON(d):d:parseFloat(d)}catch(g){}f.data(a,c,d)}else d=b}return d}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/\d/,n=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,o=/^[\],:{}\s]*$/,p=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,q=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,r=/(?:^|:|,)(?:\s*\[)+/g,s=/(webkit)[ \/]([\w.]+)/,t=/(opera)(?:.*version)?[ \/]([\w.]+)/,u=/(msie) ([\w.]+)/,v=/(mozilla)(?:.*? rv:([\w.]+))?/,w=/-([a-z])/ig,x=function(a,b){return b.toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=n.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.6.2",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.done(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j0)return;A.resolveWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").unbind("ready")}},bindReady:function(){if(!A){A=e._Deferred();if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNaN:function(a){return a==null||!m.test(a)||isNaN(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1;var c;for(c in a);return c===b||D.call(a,c)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw a},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(o.test(b.replace(p,"@").replace(q,"]").replace(r,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(b,c,d){a.DOMParser?(d=new DOMParser,c=d.parseFromString(b,"text/xml")):(c=new ActiveXObject("Microsoft.XMLDOM"),c.async="false",c.loadXML(b)),d=c.documentElement,(!d||!d.nodeName||d.nodeName==="parsererror")&&e.error("Invalid XML: "+b);return c},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i1?h.call(arguments,0):c,--e||g.resolveWith(g,h.call(b,0))}}var b=arguments,c=0,d=b.length,e=d,g=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred();if(d>1){for(;c
a",d=a.getElementsByTagName("*"),e=a.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=a.getElementsByTagName("input")[0],k={leadingWhitespace:a.firstChild.nodeType===3,tbody:!a.getElementsByTagName("tbody").length,htmlSerialize:!!a.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55$/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:a.className!=="t",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,k.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,k.optDisabled=!h.disabled;try{delete a.test}catch(v){k.deleteExpando=!1}!a.addEventListener&&a.attachEvent&&a.fireEvent&&(a.attachEvent("onclick",function(){k.noCloneEvent=!1}),a.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),k.radioValue=i.value==="t",i.setAttribute("checked","checked"),a.appendChild(i),l=c.createDocumentFragment(),l.appendChild(a.firstChild),k.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,a.innerHTML="",a.style.width=a.style.paddingLeft="1px",m=c.getElementsByTagName("body")[0],o=c.createElement(m?"div":"body"),p={visibility:"hidden",width:0,height:0,border:0,margin:0},m&&f.extend(p,{position:"absolute",left:-1e3,top:-1e3});for(t in p)o.style[t]=p[t];o.appendChild(a),n=m||b,n.insertBefore(o,n.firstChild),k.appendChecked=i.checked,k.boxModel=a.offsetWidth===2,"zoom"in a.style&&(a.style.display="inline",a.style.zoom=1,k.inlineBlockNeedsLayout=a.offsetWidth===2,a.style.display="",a.innerHTML="
",k.shrinkWrapBlocks=a.offsetWidth!==2),a.innerHTML="
t
",q=a.getElementsByTagName("td"),u=q[0].offsetHeight===0,q[0].style.display="",q[1].style.display="none",k.reliableHiddenOffsets=u&&q[0].offsetHeight===0,a.innerHTML="",c.defaultView&&c.defaultView.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",a.appendChild(j),k.reliableMarginRight=(parseInt((c.defaultView.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0),o.innerHTML="",n.removeChild(o);if(a.attachEvent)for(t in{submit:1,change:1,focusin:1})s="on"+t,u=s in a,u||(a.setAttribute(s,"return;"),u=typeof a[s]=="function"),k[t+"Bubbles"]=u;o=l=g=h=m=j=a=i=null;return k}(),f.boxModel=f.support.boxModel;var i=/^(?:\{.*\}|\[.*\])$/,j=/([a-z])([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!l(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g=f.expando,h=typeof c=="string",i,j=a.nodeType,k=j?f.cache:a,l=j?a[f.expando]:a[f.expando]&&f.expando;if((!l||e&&l&&!k[l][g])&&h&&d===b)return;l||(j?a[f.expando]=l=++f.uuid:l=f.expando),k[l]||(k[l]={},j||(k[l].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?k[l][g]=f.extend(k[l][g],c):k[l]=f.extend(k[l],c);i=k[l],e&&(i[g]||(i[g]={}),i=i[g]),d!==b&&(i[f.camelCase(c)]=d);if(c==="events"&&!i[c])return i[g]&&i[g].events;return h?i[f.camelCase(c)]||i[c]:i}},removeData:function(b,c,d){if(!!f.acceptData(b)){var e=f.expando,g=b.nodeType,h=g?f.cache:b,i=g?b[f.expando]:f.expando;if(!h[i])return;if(c){var j=d?h[i][e]:h[i];if(j){delete j[c];if(!l(j))return}}if(d){delete h[i][e];if(!l(h[i]))return}var k=h[i][e];f.support.deleteExpando||h!=a?delete h[i]:h[i]=null,k?(h[i]={},g||(h[i].toJSON=f.noop),h[i][e]=k):g&&(f.support.deleteExpando?delete b[f.expando]:b.removeAttribute?b.removeAttribute(f.expando):b[f.expando]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d=null;if(typeof a=="undefined"){if(this.length){d=f.data(this[0]);if(this[0].nodeType===1){var e=this[0].attributes,g;for(var h=0,i=e.length;h-1)return!0;return!1},val:function(a){var c,d,e=this[0];if(!arguments.length){if(e){c=f.valHooks[e.nodeName.toLowerCase()]||f.valHooks[e.type];if(c&&"get"in c&&(d=c.get(e,"value"))!==b)return d;d=e.value;return typeof d=="string"?d.replace(p,""):d==null?"":d}return b}var g=f.isFunction(a);return this.each(function(d){var e=f(this),h;if(this.nodeType===1){g?h=a.call(this,d,e.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c=a.selectedIndex,d=[],e=a.options,g=a.type==="select-one";if(c<0)return null;for(var h=g?c:0,i=g?c+1:e.length;h=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attrFix:{tabindex:"tabIndex"},attr:function(a,c,d,e){var g=a.nodeType;if(!a||g===3||g===8||g===2)return b;if(e&&c in f.attrFn)return f(a)[c](d);if(!("getAttribute"in a))return f.prop(a,c,d);var h,i,j=g!==1||!f.isXMLDoc(a);j&&(c=f.attrFix[c]||c,i=f.attrHooks[c],i||(t.test(c)?i=w:v&&c!=="className"&&(f.nodeName(a,"form")||u.test(c))&&(i=v)));if(d!==b){if(d===null){f.removeAttr(a,c);return b}if(i&&"set"in i&&j&&(h=i.set(a,d,c))!==b)return h;a.setAttribute(c,""+d);return d}if(i&&"get"in i&&j&&(h=i.get(a,c))!==null)return h;h=a.getAttribute(c);return h===null?b:h},removeAttr:function(a,b){var c;a.nodeType===1&&(b=f.attrFix[b]||b,f.support.getSetAttribute?a.removeAttribute(b):(f.attr(a,b,""),a.removeAttributeNode(a.getAttributeNode(b))),t.test(b)&&(c=f.propFix[b]||b)in a&&(a[c]=!1))},attrHooks:{type:{set:function(a,b){if(q.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},tabIndex:{get:function(a){var c=a.getAttributeNode("tabIndex");return c&&c.specified?parseInt(c.value,10):r.test(a.nodeName)||s.test(a.nodeName)&&a.href?0:b}},value:{get:function(a,b){if(v&&f.nodeName(a,"button"))return v.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(v&&f.nodeName(a,"button"))return v.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e=a.nodeType;if(!a||e===3||e===8||e===2)return b;var g,h,i=e!==1||!f.isXMLDoc(a);i&&(c=f.propFix[c]||c,h=f.propHooks[c]);return d!==b?h&&"set"in h&&(g=h.set(a,d,c))!==b?g:a[c]=d:h&&"get"in h&&(g=h.get(a,c))!==b?g:a[c]},propHooks:{}}),w={get:function(a,c){return f.prop(a,c)?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},f.support.getSetAttribute||(f.attrFix=f.propFix,v=f.attrHooks.name=f.attrHooks.title=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&d.nodeValue!==""?d.nodeValue:b},set:function(a,b,c){var d=a.getAttributeNode(c);if(d){d.nodeValue=b;return b}}},f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})})),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}})),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var x=/\.(.*)$/,y=/^(?:textarea|input|select)$/i,z=/\./g,A=/ /g,B=/[^\w\s.|`]/g,C=function(a){return a.replace(B,"\\$&")};f.event={add:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){if(d===!1)d=D;else if(!d)return;var g,h;d.handler&&(g=d,d=g.handler),d.guid||(d.guid=f.guid++);var i=f._data(a);if(!i)return;var j=i.events,k=i.handle;j||(i.events=j={}),k||(i.handle=k=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.handle.apply(k.elem,arguments):b}),k.elem=a,c=c.split(" ");var l,m=0,n;while(l=c[m++]){h=g?f.extend({},g):{handler:d,data:e},l.indexOf(".")>-1?(n=l.split("."),l=n.shift(),h.namespace=n.slice(0).sort().join(".")):(n=[],h.namespace=""),h.type=l,h.guid||(h.guid=d.guid);var o=j[l],p=f.event.special[l]||{};if(!o){o=j[l]=[];if(!p.setup||p.setup.call(a,e,n,k)===!1)a.addEventListener?a.addEventListener(l,k,!1):a.attachEvent&&a.attachEvent("on"+l,k)}p.add&&(p.add.call(a,h),h.handler.guid||(h.handler.guid=d.guid)),o.push(h),f.event.global[l]=!0}a=null}},global:{},remove:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){d===!1&&(d=D);var g,h,i,j,k=0,l,m,n,o,p,q,r,s=f.hasData(a)&&f._data(a),t=s&&s.events;if(!s||!t)return;c&&c.type&&(d=c.handler,c=c.type);if(!c||typeof c=="string"&&c.charAt(0)==="."){c=c||"";for(h in t)f.event.remove(a,h+c);return}c=c.split(" ");while(h=c[k++]){r=h,q=null,l=h.indexOf(".")<0,m=[],l||(m=h.split("."),h=m.shift(),n=new RegExp("(^|\\.)"+f.map(m.slice(0).sort(),C).join("\\.(?:.*\\.)?")+"(\\.|$)")),p=t[h];if(!p)continue;if(!d){for(j=0;j=0&&(h=h.slice(0,-1),j=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i. +shift(),i.sort());if(!!e&&!f.event.customEvent[h]||!!f.event.global[h]){c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.exclusive=j,c.namespace=i.join("."),c.namespace_re=new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)");if(g||!e)c.preventDefault(),c.stopPropagation();if(!e){f.each(f.cache,function(){var a=f.expando,b=this[a];b&&b.events&&b.events[h]&&f.event.trigger(c,d,b.handle.elem)});return}if(e.nodeType===3||e.nodeType===8)return;c.result=b,c.target=e,d=d!=null?f.makeArray(d):[],d.unshift(c);var k=e,l=h.indexOf(":")<0?"on"+h:"";do{var m=f._data(k,"handle");c.currentTarget=k,m&&m.apply(k,d),l&&f.acceptData(k)&&k[l]&&k[l].apply(k,d)===!1&&(c.result=!1,c.preventDefault()),k=k.parentNode||k.ownerDocument||k===c.target.ownerDocument&&a}while(k&&!c.isPropagationStopped());if(!c.isDefaultPrevented()){var n,o=f.event.special[h]||{};if((!o._default||o._default.call(e.ownerDocument,c)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)){try{l&&e[h]&&(n=e[l],n&&(e[l]=null),f.event.triggered=h,e[h]())}catch(p){}n&&(e[l]=n),f.event.triggered=b}}return c.result}},handle:function(c){c=f.event.fix(c||a.event);var d=((f._data(this,"events")||{})[c.type]||[]).slice(0),e=!c.exclusive&&!c.namespace,g=Array.prototype.slice.call(arguments,0);g[0]=c,c.currentTarget=this;for(var h=0,i=d.length;h-1?f.map(a.options,function(a){return a.selected}).join("-"):"":f.nodeName(a,"select")&&(c=a.selectedIndex);return c},J=function(c){var d=c.target,e,g;if(!!y.test(d.nodeName)&&!d.readOnly){e=f._data(d,"_change_data"),g=I(d),(c.type!=="focusout"||d.type!=="radio")&&f._data(d,"_change_data",g);if(e===b||g===e)return;if(e!=null||g)c.type="change",c.liveFired=b,f.event.trigger(c,arguments[1],d)}};f.event.special.change={filters:{focusout:J,beforedeactivate:J,click:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(c==="radio"||c==="checkbox"||f.nodeName(b,"select"))&&J.call(this,a)},keydown:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(a.keyCode===13&&!f.nodeName(b,"textarea")||a.keyCode===32&&(c==="checkbox"||c==="radio")||c==="select-multiple")&&J.call(this,a)},beforeactivate:function(a){var b=a.target;f._data(b,"_change_data",I(b))}},setup:function(a,b){if(this.type==="file")return!1;for(var c in H)f.event.add(this,c+".specialChange",H[c]);return y.test(this.nodeName)},teardown:function(a){f.event.remove(this,".specialChange");return y.test(this.nodeName)}},H=f.event.special.change.filters,H.focus=H.beforeactivate}f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){function e(a){var c=f.event.fix(a);c.type=b,c.originalEvent={},f.event.trigger(c,null,c.target),c.isDefaultPrevented()&&a.preventDefault()}var d=0;f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.each(["bind","one"],function(a,c){f.fn[c]=function(a,d,e){var g;if(typeof a=="object"){for(var h in a)this[c](h,d,a[h],e);return this}if(arguments.length===2||d===!1)e=d,d=b;c==="one"?(g=function(a){f(this).unbind(a,g);return e.apply(this,arguments)},g.guid=e.guid||f.guid++):g=e;if(a==="unload"&&c!=="one")this.one(a,d,e);else for(var i=0,j=this.length;i0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0)}),function(){function u(a,b,c,d,e,f){for(var g=0,h=d.length;g0){j=i;break}}i=i[a]}d[g]=j}}}function t(a,b,c,d,e,f){for(var g=0,h=d.length;g+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d=0,e=Object.prototype.toString,g=!1,h=!0,i=/\\/g,j=/\W/;[0,0].sort(function(){h=!1;return 0});var k=function(b,d,f,g){f=f||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return f;var i,j,n,o,q,r,s,t,u=!0,w=k.isXML(d),x=[],y=b;do{a.exec(""),i=a.exec(y);if(i){y=i[3],x.push(i[1]);if(i[2]){o=i[3];break}}}while(i);if(x.length>1&&m.exec(b))if(x.length===2&&l.relative[x[0]])j=v(x[0]+x[1],d);else{j=l.relative[x[0]]?[d]:k(x.shift(),d);while(x.length)b=x.shift(),l.relative[b]&&(b+=x.shift()),j=v(b,j)}else{!g&&x.length>1&&d.nodeType===9&&!w&&l.match.ID.test(x[0])&&!l.match.ID.test(x[x.length-1])&&(q=k.find(x.shift(),d,w),d=q.expr?k.filter(q.expr,q.set)[0]:q.set[0]);if(d){q=g?{expr:x.pop(),set:p(g)}:k.find(x.pop(),x.length===1&&(x[0]==="~"||x[0]==="+")&&d.parentNode?d.parentNode:d,w),j=q.expr?k.filter(q.expr,q.set):q.set,x.length>0?n=p(j):u=!1;while(x.length)r=x.pop(),s=r,l.relative[r]?s=x.pop():r="",s==null&&(s=d),l.relative[r](n,s,w)}else n=x=[]}n||(n=j),n||k.error(r||b);if(e.call(n)==="[object Array]")if(!u)f.push.apply(f,n);else if(d&&d.nodeType===1)for(t=0;n[t]!=null;t++)n[t]&&(n[t]===!0||n[t].nodeType===1&&k.contains(d,n[t]))&&f.push(j[t]);else for(t=0;n[t]!=null;t++)n[t]&&n[t].nodeType===1&&f.push(j[t]);else p(n,f);o&&(k(o,h,f,g),k.uniqueSort(f));return f};k.uniqueSort=function(a){if(r){g=h,a.sort(r);if(g)for(var b=1;b0},k.find=function(a,b,c){var d;if(!a)return[];for(var e=0,f=l.order.length;e":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!j.test(b)){b=b.toLowerCase();for(;e=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(i,"")},TAG:function(a,b){return a[1].replace(i,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||k.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&k.error(a[0]);a[0]=d++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(i,"");!f&&l.attrMap[g]&&(a[1]=l.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(i,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=k(b[3],null,null,c);else{var g=k.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(l.match.POS.test(b[0])||l.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!k(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return bc[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=l.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||k.getText([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=l.attrHandle[c]?l.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=l.setFilters[e];if(f)return f(a,c,b,d)}}},m=l.match.POS,n=function(a,b){return"\\"+(b-0+1)};for(var o in l.match)l.match[o]=new RegExp(l.match[o].source+/(?![^\[]*\])(?![^\(]*\))/.source),l.leftMatch[o]=new RegExp(/(^(?:.|\r|\n)*?)/.source+l.match[o].source.replace(/\\(\d+)/g,n));var p=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(q){p=function(a,b){var c=0,d=b||[];if(e.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var f=a.length;c",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(l.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},l.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(l.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(l.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=k,b=c.createElement("div"),d="__sizzle__";b.innerHTML="

";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){k=function(b,e,f,g){e=e||c;if(!g&&!k.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return p(e.getElementsByTagName(b),f);if(h[2]&&l.find.CLASS&&e.getElementsByClassName)return p(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return p([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return p([],f);if(i.id===h[3])return p([i],f)}try{return p(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var m=e,n=e.getAttribute("id"),o=n||d,q=e.parentNode,r=/^\s*[+~]/.test(b);n?o=o.replace(/'/g,"\\$&"):e.setAttribute("id",o),r&&q&&(e=e.parentNode);try{if(!r||q)return p(e.querySelectorAll("[id='"+o+"'] "+b),f)}catch(s){}finally{n||m.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)k[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}k.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!k.isXML(a))try{if(e||!l.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return k(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="
";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;l.order.splice(1,0,"CLASS"),l.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?k.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?k.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:k.contains=function(){return!1},k.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var v=function(a,b){var c,d=[],e="",f=b.nodeType?[b]:b;while(c=l.match.PSEUDO.exec(a))e+=c[0],a=a.replace(l.match.PSEUDO,"");a=l.relative[a]?a+"*":a;for(var g=0,h=f.length;g0)for(h=g;h0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h,i,j={},k=1;if(g&&a.length){for(d=0,e=a.length;d-1:f(g).is(h))&&c.push({selector:i,elem:g,level:k});g=g.parentNode,k++}}return c}var l=T.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a||typeof a=="string")return f.inArray(this[0],a?f(a):this.parent().children());return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(V(c[0])||V(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=S.call(arguments);O.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!U[a]?f.unique(e):e,(this.length>1||Q.test(d))&&P.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var X=/ jQuery\d+="(?:\d+|null)"/g,Y=/^\s+/,Z=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,$=/<([\w:]+)/,_=/",""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_default:[0,"",""]};bf.optgroup=bf.option,bf.tbody=bf.tfoot=bf.colgroup=bf.caption=bf.thead,bf.th=bf.td,f.support.htmlSerialize||(bf._default=[1,"div
","
"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(X,""):null;if(typeof a=="string"&&!bb.test(a)&&(f.support.leadingWhitespace||!Y.test(a))&&!bf[($.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Z,"<$1>");try{for(var c=0,d=this.length;c1&&l0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j +)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bi(a,d),e=bj(a),g=bj(d);for(h=0;e[h];++h)bi(e[h],g[h])}if(b){bh(a,d);if(c){e=bj(a),g=bj(d);for(h=0;e[h];++h)bh(e[h],g[h])}}e=g=null;return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!ba.test(k))k=b.createTextNode(k);else{k=k.replace(Z,"<$1>");var l=($.exec(k)||["",""])[1].toLowerCase(),m=bf[l]||bf._default,n=m[0],o=b.createElement("div");o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=_.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]===""&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&Y.test(k)&&o.insertBefore(b.createTextNode(Y.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bo.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle;c.zoom=1;var e=f.isNaN(b)?"":"alpha(opacity="+b*100+")",g=d&&d.filter||c.filter||"";c.filter=bn.test(g)?g.replace(bn,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bx(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(by=function(a,c){var d,e,g;c=c.replace(bp,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bz=function(a,b){var c,d=a.currentStyle&&a.currentStyle[b],e=a.runtimeStyle&&a.runtimeStyle[b],f=a.style;!bq.test(d)&&br.test(d)&&(c=f.left,e&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":d||0,d=f.pixelLeft+"px",f.left=c,e&&(a.runtimeStyle.left=e));return d===""?"auto":d}),bx=by||bz,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bB=/%20/g,bC=/\[\]$/,bD=/\r?\n/g,bE=/#.*$/,bF=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bG=/^(?:color|date|datetime|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bH=/^(?:about|app|app\-storage|.+\-extension|file|widget):$/,bI=/^(?:GET|HEAD)$/,bJ=/^\/\//,bK=/\?/,bL=/)<[^<]*)*<\/script>/gi,bM=/^(?:select|textarea)/i,bN=/\s+/,bO=/([?&])_=[^&]*/,bP=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bQ=f.fn.load,bR={},bS={},bT,bU;try{bT=e.href}catch(bV){bT=c.createElement("a"),bT.href="",bT=bT.href}bU=bP.exec(bT.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bQ)return bQ.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("
").append(c.replace(bL,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bM.test(this.nodeName)||bG.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bD,"\r\n")}}):{name:b.name,value:c.replace(bD,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?f.extend(!0,a,f.ajaxSettings,b):(b=a,a=f.extend(!0,f.ajaxSettings,b));for(var c in{context:1,url:1})c in b?a[c]=b[c]:c in f.ajaxSettings&&(a[c]=f.ajaxSettings[c]);return a},ajaxSettings:{url:bT,isLocal:bH.test(bU[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":"*/*"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML}},ajaxPrefilter:bW(bR),ajaxTransport:bW(bS),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a?4:0;var o,r,u,w=l?bZ(d,v,l):b,x,y;if(a>=200&&a<300||a===304){if(d.ifModified){if(x=v.getResponseHeader("Last-Modified"))f.lastModified[k]=x;if(y=v.getResponseHeader("Etag"))f.etag[k]=y}if(a===304)c="notmodified",o=!0;else try{r=b$(d,w),c="success",o=!0}catch(z){c="parsererror",u=z}}else{u=c;if(!c||a)c="error",a<0&&(a=0)}v.status=a,v.statusText=c,o?h.resolveWith(e,[r,c,v]):h.rejectWith(e,[v,c,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.resolveWith(e,[v,c]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f._Deferred(),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bF.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.done,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bE,"").replace(bJ,bU[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bN),d.crossDomain==null&&(r=bP.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bU[1]&&r[2]==bU[2]&&(r[3]||(r[1]==="http:"?80:443))==(bU[3]||(bU[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bX(bR,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bI.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bK.test(d.url)?"&":"?")+d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bO,"$1_="+x);d.url=y+(y===d.url?(bK.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", */*; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bX(bS,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){status<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)bY(g,a[g],c,e);return d.join("&").replace(bB,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var b_=f.now(),ca=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+b_++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ca.test(b.url)||e&&ca.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ca,l),b.url===j&&(e&&(k=k.replace(ca,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cb=a.ActiveXObject?function(){for(var a in cd)cd[a](0,1)}:!1,cc=0,cd;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ce()||cf()}:ce,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cb&&delete cd[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cc,cb&&(cd||(cd={},f(a).unload(cb)),cd[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cg={},ch,ci,cj=/^(?:toggle|show|hide)$/,ck=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cl,cm=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cn,co=a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cr("show",3),a,b,c);for(var g=0,h=this.length;g=e.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),e.animatedProperties[this.prop]=!0;for(g in e.animatedProperties)e.animatedProperties[g]!==!0&&(c=!1);if(c){e.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){d.style["overflow"+b]=e.overflow[a]}),e.hide&&f(d).hide();if(e.hide||e.show)for(var i in e.animatedProperties)f.style(d,i,e.orig[i]);e.complete.call(d)}return!1}e.duration==Infinity?this.now=b:(h=b-this.startTime,this.state=h/e.duration,this.pos=f.easing[e.animatedProperties[this.prop]](this.state,h,0,1,e.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){for(var a=f.timers,b=0;b
";f.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"}),b.innerHTML=j,a.insertBefore(b,a.firstChild),d=b.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,this.doesNotAddBorder=e.offsetTop!==5,this.doesAddBorderForTableAndCells=h.offsetTop===5,e.style.position="fixed",e.style.top="20px",this.supportsFixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",this.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i,a.removeChild(b),f.offset.initialize=f.noop},bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.offset.initialize(),f.offset.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cu.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cu.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cv(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cv(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a&&a.style?parseFloat(f.css(a,d,"padding")):null},f.fn["outer"+c]=function(a){var b=this[0];return b&&b.style?parseFloat(f.css(b,d,a?"margin":"border")):null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c];return e.document.compatMode==="CSS1Compat"&&g||e.document.body["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var h=f.css(e,d),i=parseFloat(h);return f.isNaN(i)?h:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..6e8b2adef --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + +litegraph.js + + + + + + + + +
+
+
+

litegraph.js

+

Litegraph.js is a library that allows to create modular graphs on the web, similar to PureData.

+

Graphs can be used to create workflows, image processing, audio, or any kind of network of modules interacting with each other.

+

Some of the main features:

+
    +
  • Automatic sorting of modules according to basic rules.
    • +
  • Dynamic number of input/outputs per module.
    • +
  • Persistence, graphs can be serialized in a JSON.
    • +
  • Optimized render in a HTML5 Canvas (supports hundres of modules on the screen).
    • +
  • Allows to run the graphs without the need of the canvas (standalone mode).
    • +
  • Simple API. It is very easy to create new modules.
    • +
  • Edit and Live mode, (in live mode only modules with widgets are rendered.
    • +
  • Contextual menu in the editor.
    • +
+ +

Usage

+ +

Examples

+ + +

Documentation

+ +
+
+
+ + + + diff --git a/nodes_data/imgs/icon-sin.png b/nodes_data/imgs/icon-sin.png new file mode 100644 index 000000000..06751eafc Binary files /dev/null and b/nodes_data/imgs/icon-sin.png differ diff --git a/nodes_data/imgs/knob2_bg.png b/nodes_data/imgs/knob2_bg.png new file mode 100644 index 000000000..bc190eacc Binary files /dev/null and b/nodes_data/imgs/knob2_bg.png differ diff --git a/nodes_data/imgs/knob2_fg.png b/nodes_data/imgs/knob2_fg.png new file mode 100644 index 000000000..8b84162c8 Binary files /dev/null and b/nodes_data/imgs/knob2_fg.png differ diff --git a/nodes_data/imgs/knob_bg.png b/nodes_data/imgs/knob_bg.png new file mode 100644 index 000000000..fe0169252 Binary files /dev/null and b/nodes_data/imgs/knob_bg.png differ diff --git a/nodes_data/imgs/knob_fg.png b/nodes_data/imgs/knob_fg.png new file mode 100644 index 000000000..4a8d6d6f9 Binary files /dev/null and b/nodes_data/imgs/knob_fg.png differ diff --git a/nodes_data/imgs/slider_fg.png b/nodes_data/imgs/slider_fg.png new file mode 100644 index 000000000..5d9f3cec1 Binary files /dev/null and b/nodes_data/imgs/slider_fg.png differ diff --git a/src/litegraph.js b/src/litegraph.js new file mode 100644 index 000000000..728a5d75f --- /dev/null +++ b/src/litegraph.js @@ -0,0 +1,3593 @@ + +// ************************************************************* +// LiteGraph CLASS ******* +// ************************************************************* + + +var LiteGraph = { + + NODE_TITLE_HEIGHT: 16, + NODE_SLOT_HEIGHT: 15, + NODE_WIDTH: 140, + NODE_MIN_WIDTH: 50, + NODE_COLLAPSED_RADIUS: 10, + CANVAS_GRID_SIZE: 10, + NODE_DEFAULT_COLOR: "#888", + NODE_DEFAULT_BGCOLOR: "#333", + NODE_DEFAULT_BOXCOLOR: "#AEF", + NODE_DEFAULT_SHAPE: "box", + MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops + DEFAULT_POSITION: [100,100], + node_images_path: "", + + debug: false, + registered_node_types: {}, + graphs: [], + + registerNodeType: function(type, base_class) + { + var title = type; + if(base_class.prototype && base_class.prototype.title) + title = base_class.prototype.title; + else if(base_class.title) + title = base_class.title; + + base_class.type = type; + if(LiteGraph.debug) + console.log("Node registered: " + type); + + var categories = type.split("/"); + + var pos = type.lastIndexOf("/"); + base_class.category = type.substr(0,pos); + //info.name = name.substr(pos+1,name.length - pos); + + //inheritance + if(base_class.prototype) //is a class + for(var i in LGraphNode.prototype) + if(!base_class.prototype[i]) + base_class.prototype[i] = LGraphNode.prototype[i]; + + this.registered_node_types[type] = base_class; + }, + + createNode: function(type,name, options) + { + var base_class = this.registered_node_types[type]; + if (!base_class) + { + if(LiteGraph.debug) + console.log("GraphNode type \"" + type + "\" not registered."); + return null; + } + + var prototype = base_class.prototype || base_class; + + name = name || prototype.title || base_class.title || type; + + var node = null; + if (base_class.prototype) //is a class + { + node = new base_class(name); + } + else + { + node = new LGraphNode(name); + node.inputs = []; + node.outputs = []; + + //add inputs and outputs + for (var i in prototype) + { + if(i == "inputs") + { + for(var j in prototype[i]) + node.addInput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] ); + } + else if(i == "outputs") + { + for(var j in prototype[i]) + node.addOutput( prototype[i][j][0],prototype[i][j][1], prototype[i][j][2] ); + } + else + { + if( prototype[i].concat ) //array + node[i] = prototype[i].concat(); + else if (typeof(prototype[i]) == 'object') + node[i] = jQuery.extend({}, prototype[i]); + else + node[i] = prototype[i]; + } + } + //set size + if(base_class.size) node.size = base_class.size.concat(); //save size + } + + node.type = type; + if(!node.name) node.name = name; + if(!node.flags) node.flags = {}; + if(!node.size) node.size = node.computeSize(); + if(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat(); + + //extra options + if(options) + { + for(var i in options) + node[i] = options[i]; + } + + return node; + }, + + + getNodeType: function(type) + { + return this.registered_node_types[type]; + }, + + getNodeTypesInCategory: function(category) + { + var r = []; + for(var i in this.registered_node_types) + if(category == "") + { + if (this.registered_node_types[i].category == null) + r.push(this.registered_node_types[i]); + } + else if (this.registered_node_types[i].category == category) + r.push(this.registered_node_types[i]); + + return r; + }, + + getNodeTypesCategories: function() + { + var categories = {"":1}; + 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); + return result; + }, + + //debug purposes: reloads all the js scripts that matches a wilcard + reloadNodes: function (folder_wildcard) + { + 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]); + + + var docHeadObj = document.getElementsByTagName("head")[0]; + folder_wildcard = document.location.href + folder_wildcard; + + for(var i in script_files) + { + var src = script_files[i].src; + if( !src || src.substr(0,folder_wildcard.length ) != folder_wildcard) + continue; + + try + { + 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) + console.log("Error while reloading " + src); + } + } + + for (var i in LiteGraph.graphs) + { + for (var j in LiteGraph.graphs[i].nodes) + { + var m = LiteGraph.graphs[i].nodes[j]; + var t = LiteGraph.getNodeType(n.type); + if(!t) continue; + + for (var k in t) + if( typeof(t[k]) == "function" ) + m[k] = t[k]; + } + } + + if(LiteGraph.debug) + console.log("Nodes reloaded"); + } + + /* + benchmark: function(mode) + { + mode = mode || "all"; + + trace("Benchmarking " + mode + "..."); + trace(" Num. nodes: " + this.nodes.length ); + var links = 0; + for(var i in this.nodes) + for(var j in this.nodes[i].outputs) + if(this.nodes[i].outputs[j].node_id != null) + links++; + trace(" Num. links: " + links ); + + var numTimes = 200; + if(mode == "core") + numTimes = 30000; + + var start = new Date().getTime(); + + for(var i = 0; i < numTimes; i++) + { + if(mode == "render") + this.draw(false); + else if(mode == "core") + this.sendEventToAllNodes("onExecute"); + else + { + this.sendEventToAllNodes("onExecute"); + this.draw(false); + } + } + + var elapsed = (new Date().getTime()) - start; + trace(" Time take for " + numTimes + " iterations: " + (elapsed*0.001).toFixed(3) + " seconds."); + var seconds_per_iteration = (elapsed*0.001)/numTimes; + trace(" Time per iteration: " + seconds_per_iteration.toFixed( seconds_per_iteration < 0.001 ? 6 : 3) + " seconds"); + trace(" Avg FPS: " + (1000/(elapsed/numTimes)).toFixed(3)); + } + */ +}; + + + + + +//********************************************************************************* +// LGraph CLASS +//********************************************************************************* + +function LGraph() +{ + if (LiteGraph.debug) + console.log("Graph created"); + this.canvas = null; + LiteGraph.graphs.push(this); + this.clear(); +} + +LGraph.STATUS_STOPPED = 1; +LGraph.STATUS_RUNNING = 2; + +LGraph.prototype.clear = function() +{ + this.stop(); + this.status = LGraph.STATUS_STOPPED; + this.last_node_id = 0; + + //nodes + this.nodes = []; + this.nodes_by_id = {}; + + //links + this.last_link_id = 0; + this.links = {}; + + //iterations + this.iteration = 0; + + this.config = { + canvas_offset: [0,0], + canvas_scale: 1.0 + }; + + //timing + this.globaltime = 0; + this.runningtime = 0; + this.fixedtime = 0; + this.fixedtime_lapse = 0.01; + this.elapsed_time = 0.01; + this.starttime = 0; + + this.graph = {}; + this.debug = true; + + this.change(); + if(this.canvas) + this.canvas.clear(); +} + +LGraph.prototype.run = function(interval) +{ + if(this.status == LGraph.STATUS_RUNNING) return; + this.status = LGraph.STATUS_RUNNING; + + if(this.onPlayEvent) + this.onPlayEvent(); + + this.sendEventToAllNodes("onStart"); + + //launch + this.starttime = new Date().getTime(); + interval = interval || 1000; + var that = this; + + this.execution_timer_id = setInterval( function() { + //execute + that.runStep(1); + //redraw + /* + if(that.canvas && that.canvas.rendering_timer_id == null && (that.canvas.dirty_canvas || that.canvas.dirty_bgcanvas)) + that.canvas.draw(); + */ + + },interval); +} + +LGraph.prototype.stop = function() +{ + if(this.status == LGraph.STATUS_STOPPED) + return; + + this.status = LGraph.STATUS_STOPPED; + + if(this.onStopEvent) + this.onStopEvent(); + + if(this.execution_timer_id != null) + clearInterval(this.execution_timer_id); + this.execution_timer_id = null; + + this.sendEventToAllNodes("onStop"); +} + +LGraph.prototype.runStep = function(num) +{ + num = num || 1; + + var start = new Date().getTime(); + this.globaltime = 0.001 * (start - this.starttime); + + try + { + for(var i = 0; i < num; i++) + { + this.sendEventToAllNodes("onExecute"); + this.fixedtime += this.fixedtime_lapse; + if( this.onExecuteStep ) + this.onExecuteStep(); + } + + 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) + console.log("Error during execution: " + err); + this.stop(); + } + + var elapsed = (new Date().getTime()) - start; + if (elapsed == 0) elapsed = 1; + this.elapsed_time = 0.001 * elapsed; + this.globaltime += 0.001 * elapsed; + this.iteration += 1; +} + +LGraph.prototype.computeExecutionOrder = function() +{ + var L = []; + var S = []; + var M = {}; + var visited_links = {}; //to avoid repeating links + var remaining_links = {}; //to a + + //search for the nodes without inputs (starting nodes) + for (var i in this.nodes) + { + var n = this.nodes[i]; + M[n.id] = n; //add to pending nodes + + var num = 0; //num of input connections + if(n.inputs) + for(var j = 0, l = n.inputs.length; j < l; j++) + if(n.inputs[j] && n.inputs[j].link != null) + num += 1; + + if(num == 0) //is a starting node + S.push(n); + else //num of input links + remaining_links[n.id] = num; + } + + while(true) + { + if(S.length == 0) + break; + + //get an starting node + var n = S.shift(); + L.push(n); //add to ordered list + delete M[n.id]; //remove from the pending nodes + + //for every output + if(n.outputs) + for(var i = 0; i < n.outputs.length; i++) + { + var output = n.outputs[i]; + //not connected + if(output == null || output.links == null || output.links.length == 0) + continue; + + //for every connection + for(var j = 0; j < output.links.length; j++) + { + var link = output.links[j]; + + //already visited link (ignore it) + if(visited_links[ link[0] ]) + continue; + + var target_node = this.getNodeById( link[3] ); + if(target_node == null) + { + visited_links[ link[0] ] = true; + continue; + } + + visited_links[link[0]] = 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 + } + } + } + + //the remaining ones (loops) + for(var i in M) + L.push(M[i]); + + if(L.length != this.nodes.length && LiteGraph.debug) + console.log("something went wrong, nodes missing"); + + //save order number in the node + for(var i in L) + L[i].order = i; + + return L; +} + +LGraph.prototype.getTime = function() +{ + return this.globaltime; +} + +LGraph.prototype.getFixedTime = function() +{ + return this.fixedtime; +} + +LGraph.prototype.getElapsedTime = function() +{ + return this.elapsed_time; +} + +LGraph.prototype.sendEventToAllNodes = function(eventname, param) +{ + var M = this.nodes_in_order ? this.nodes_in_order : this.nodes; + for(var j in M) + if(M[j][eventname]) + M[j][eventname](param); +} + +LGraph.prototype.add = function(node) +{ + if(!node || (node.id != -1 && this.nodes_by_id[node.id] != null)) + return; //already added + + if(this.nodes.length >= LiteGraph.MAX_NUMBER_OF_NODES) + throw("LiteGraph: max number of nodes attached"); + + //give him an id + if(node.id == null || node.id == -1) + node.id = this.last_node_id++; + + node.graph = this; + + this.nodes.push(node); + this.nodes_by_id[node.id] = node; + + /* + // rendering stuf... + if(node.bgImageUrl) + node.bgImage = node.loadImage(node.bgImageUrl); + */ + + if(node.onInit) + node.onInit(); + + if(this.config.align_to_grid) + node.alignToGrid(); + + this.updateExecutionOrder(); + + if(this.canvas) + this.canvas.dirty_canvas = true; + + this.change(); + + return node; //to chain actions +} + +LGraph.prototype.remove = function(node) +{ + if(this.nodes_by_id[node.id] == null) + return; //not found + + //disconnect 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); + } + + //disconnect 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) + node.disconnectOutput(i); + } + + node.id = -1; + + //callback + if(node.onDelete) + node.onDelete(); + + //remove from environment + if(this.canvas) + { + if(this.canvas.selected_nodes[node.id]) + delete this.canvas.selected_nodes[node.id]; + if(this.canvas.node_dragged == node) + this.canvas.node_dragged = null; + } + + //remove from containers + var pos = this.nodes.indexOf(node); + if(pos != -1) + this.nodes.splice(pos,1); + delete this.nodes_by_id[node.id]; + + if(this.canvas) + this.canvas.setDirty(true,true); + + this.change(); + + this.updateExecutionOrder(); +} + +LGraph.prototype.getNodeById = function(id) +{ + if(id==null) return null; + return this.nodes_by_id[id]; +} + + +LGraph.prototype.findNodesByType = function(type) +{ + var r = []; + for(var i in this.nodes) + if(this.nodes[i].type == type) + r.push(this.nodes[i]); + return r; +} + +LGraph.prototype.findNodesByName = function(name) +{ + var result = []; + for (var i in this.nodes) + if(this.nodes[i].name == name) + result.push(name); + return result; +} + +LGraph.prototype.getNodeOnPos = function(x,y, nodes_list) +{ + nodes_list = nodes_list || this.nodes; + for (var i = nodes_list.length - 1; i >= 0; i--) + { + var n = nodes_list[i]; + if(n.isPointInsideNode(x,y)) + return n; + } + return null; +} + +LGraph.prototype.setInputData = function(name,value) +{ + var m = this.findNodesByName(name); + for(var i in m) + m[i].setValue(value); +} + +LGraph.prototype.getOutputData = function(name) +{ + var n = this.findNodesByName(name); + if(n.length) + return m[0].getValue(); + return null; +} + +LGraph.prototype.triggerInput = function(name,value) +{ + var m = this.findNodesByName(name); + for(var i in m) + m[i].onTrigger(value); +} + +LGraph.prototype.setCallback = function(name,func) +{ + var m = this.findNodesByName(name); + for(var i in m) + m[i].setTrigger(func); +} + +//********** + + +LGraph.prototype.onConnectionChange = function() +{ + this.updateExecutionOrder(); +} + +LGraph.prototype.updateExecutionOrder = function() +{ + this.nodes_in_order = this.computeExecutionOrder(); +} + +LGraph.prototype.isLive = function() +{ + if(!this.canvas) return false; + return this.canvas.live_mode; +} + +LGraph.prototype.change = function() +{ + if(LiteGraph.debug) + console.log("Graph changed"); + if(this.on_change) + this.on_change(this); +} + +//save and recover app state *************************************** +LGraph.prototype.serialize = function() +{ + var nodes_info = []; + for (var i in this.nodes) + nodes_info.push( this.nodes[i].objectivize() ); + + var data = { + graph: this.graph, + + iteration: this.iteration, + frame: this.frame, + last_node_id: this.last_node_id, + last_link_id: this.last_link_id, + + config: this.config, + nodes: nodes_info + }; + + return JSON.stringify(data); +} + +LGraph.prototype.unserialize = function(str, keep_old) +{ + if(!keep_old) + this.clear(); + + var data = JSON.parse(str); + var nodes = data.nodes; + + //copy all stored fields + for (var i in data) + this[i] = data[i]; + + var error = false; + + //create nodes + this.nodes = []; + for (var i in nodes) + { + var n_info = nodes[i]; //stored info + var n = LiteGraph.createNode( n_info.type, n_info.name ); + if(!n) + { + if(LiteGraph.debug) + console.log("Node not found: " + n_info.type); + error = true; + continue; + } + + n.copyFromObject(n_info); + this.add(n); + } + + //TODO: dispatch redraw + if(this.canvas) + this.canvas.draw(true,true); + + return error; +} + +LGraph.prototype.onNodeTrace = function(node, msg, color) +{ + if(this.canvas) + this.canvas.onNodeTrace(node,msg,color); +} + +// ************************************************************* +// Node CLASS ******* +// ************************************************************* + +/* flags: + + skip_title_render + + clip_area + + unsafe_execution: not allowed for safe execution + + supported callbacks: + + onInit: when added to graph + + onStart: when starts playing + + onStop: when stops playing + + onDrawForeground + + onDrawBackground + + onMouseMove + + onMouseOver + + onExecute: execute the node + + onPropertyChange: when a property is changed in the panel (return true to skip default behaviour) + + onGetInputs: returns an array of possible inputs + + onGetOutputs: returns an array of possible outputs + + onClick + + onDblClick + + onSerialize + + onSelected + + onDeselected +*/ + + +function LGraphNode(name) +{ + this.name = name || "Unnamed"; + this.size = [LiteGraph.NODE_WIDTH,60]; + this.graph = null; + + this.pos = [10,10]; + this.id = -1; //not know till not added + this.type = null; + + //inputs available: array of inputs + this.inputs = []; + this.outputs = []; + this.connections = []; + + //local data + this.data = null; //persistent local data + this.flags = { + //skip_title_render: true, + //unsafe_execution: false, + }; +} + +//serialization ************************* + +LGraphNode.prototype.objectivize = function() +{ + var o = { + id: this.id, + name: this.name, + type: this.type, + pos: this.pos, + size: this.size, + data: this.data, + properties: jQuery.extend({}, this.properties), + flags: jQuery.extend({}, this.flags), + inputs: this.inputs, + outputs: this.outputs + }; + + 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; + + return o; +} + +//reduced version of objectivize: NOT FINISHED +LGraphNode.prototype.reducedObjectivize = function() +{ + var o = this.objectivize(); + + var type = LiteGraph.getNodeType(o.type); + + if(type.name == o.name) + delete o["name"]; + + if(type.size && compareObjects(o.size,type.size)) + delete o["size"]; + + if(type.properties && compareObjects(o.properties, type.properties)) + delete o["properties"]; + + return o; +} + + +LGraphNode.prototype.serialize = function() +{ + if(this.onSerialize) + this.onSerialize(); + return JSON.stringify( this.reducedObjectivize() ); +} +//LGraphNode.prototype.unserialize = function(info) {} //this cannot be done from within, must be done in LiteGraph + + +// Execution ************************* + +LGraphNode.prototype.setOutputData = function(slot,data) +{ + if(!this.outputs) return; + if(slot > -1 && slot < this.outputs.length && this.outputs[slot] && this.outputs[slot].links != null) + { + for(var i = 0; i < this.outputs[slot].links.length; i++) + this.graph.links[ this.outputs[slot].links[i][0] ] = data; + } +} + +LGraphNode.prototype.getInputData = function(slot) +{ + if(!this.inputs) return null; + if(slot < this.inputs.length && this.inputs[slot].link != null) + return this.graph.links[ this.inputs[slot].link[0] ]; + return null; +} + +LGraphNode.prototype.getInputInfo = function(slot) +{ + if(!this.inputs) return null; + if(slot < this.inputs.length) + return this.inputs[slot]; + return null; +} + + +LGraphNode.prototype.getOutputInfo = function(slot) +{ + if(!this.outputs) return null; + if(slot < this.outputs.length) + return this.outputs[slot]; + return null; +} + +LGraphNode.prototype.getOutputNodes = function(slot) +{ + if(!this.outputs || this.outputs.length == 0) return null; + if(slot < this.outputs.length) + { + var output = this.outputs[slot]; + var r = []; + for(var i = 0; i < output.length; i++) + r.push( this.graph.getNodeById( output.links[i][3] )); + return r; + } + return null; +} + +LGraphNode.prototype.triggerOutput = function(slot,param) +{ + var n = this.getOutputNode(slot); + if(n && n.onTrigger) + n.onTrigger(param); +} + +//connections + +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(!this.outputs) this.outputs = []; + this.outputs.push(o); + this.size = this.computeSize(); +} + +LGraphNode.prototype.removeOutput = function(slot) +{ + this.disconnectOutput(slot); + this.outputs.splice(slot,1); + this.size = this.computeSize(); +} + +LGraphNode.prototype.addInput = function(name,type,extra_info) +{ + var o = {name:name,type:type,link:null}; + if(extra_info) + for(var i in extra_info) + o[i] = extra_info[i]; + + if(!this.inputs) this.inputs = []; + this.inputs.push(o); + this.size = this.computeSize(); +} + +LGraphNode.prototype.removeInput = function(slot) +{ + this.disconnectInput(slot); + this.inputs.splice(slot,1); + this.size = this.computeSize(); +} + +//trigger connection +LGraphNode.prototype.addConnection = function(name,type,pos,direction) +{ + this.connections.push( {name:name,type:type,pos:pos,direction:direction,links:null}); +} + + +LGraphNode.prototype.computeSize = function(minHeight) +{ + var rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1); + var size = [0,0]; + size[1] = rows * 14 + 6; + if(!this.inputs || this.inputs.length == 0 || !this.outputs || this.outputs.length == 0) + size[0] = LiteGraph.NODE_WIDTH * 0.5; + else + size[0] = LiteGraph.NODE_WIDTH; + return size; +} + +//returns the bounding of the object, used for rendering purposes +LGraphNode.prototype.getBounding = function() +{ + return new Float32Array([this.pos[0] - 4, this.pos[1] - LGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]); +} + +//checks if a point is inside the shape of a node +LGraphNode.prototype.isPointInsideNode = function(x,y) +{ + var margin_top = this.graph.isLive() ? 0 : 20; + if(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) + return true; + } + else if (this.pos[0] - 4 < x && (this.pos[0] + this.size[0] + 4) > x + && (this.pos[1] - margin_top) < y && (this.pos[1] + this.size[1]) > y) + return true; + return false; +} + +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; + return -1; +} + +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; + return -1; +} + +//connect this node output to the input of another node +LGraphNode.prototype.connect = function(slot, node, target_slot) +{ + //seek for the output slot + if( slot.constructor === String ) + { + slot = this.findOutputSlot(slot); + if(slot == -1) + { + 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) + console.log("Connect: Error, slot number not found"); + return false; + } + + //avoid loopback + if(node == this) return false; + //if( node.constructor != LGraphNode ) throw ("LGraphNode.connect: node is not of type LGraphNode"); + + if(target_slot.constructor === String) + { + target_slot = node.findInputSlot(target_slot); + if(target_slot == -1) + { + if(LiteGraph.debug) + console.log("Connect: Error, no slot of name " + target_slot); + return false; + } + } + else if(!node.inputs || target_slot >= node.inputs.length) + { + if(LiteGraph.debug) + console.log("Connect: Error, slot number not found"); + return false; + } + + //if there is something already plugged there, disconnect + if(target_slot != -1 && node.inputs[target_slot].link != null) + node.disconnectInput(target_slot); + + //special case: -1 means node-connection, used for triggers + var output = this.outputs[slot]; + if(target_slot == -1) + { + if( output.links == null ) + output.links = []; + output.links.push({id:node.id, slot: -1}); + } + else if(output.type == 0 || //generic output + node.inputs[target_slot].type == 0 || //generic input + output.type == node.inputs[target_slot].type) //same type + { + //info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ] + var link = [ this.graph.last_link_id++, this.id, slot, node.id, target_slot ]; + + //connect + if( output.links == null ) output.links = []; + output.links.push(link); + node.inputs[target_slot].link = link; + + this.setDirtyCanvas(false,true); + this.graph.onConnectionChange(); + } + return true; +} + +LGraphNode.prototype.disconnectOutput = function(slot, target_node) +{ + if( slot.constructor === String ) + { + slot = this.findOutputSlot(slot); + if(slot == -1) + { + 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) + console.log("Connect: Error, slot number not found"); + return false; + } + + //get output slot + var output = this.outputs[slot]; + if(!output.links || output.links.length == 0) + return false; + + if(target_node) + { + for(var i = 0, l = output.links.length; i < l; i++) + { + var link = output.links[i]; + //is the link we are searching for... + if( link[3] == target_node.id ) + { + output.links.splice(i,1); //remove here + target_node.inputs[ link[4] ].link = null; //remove there + delete this.graph.links[link[0]]; + break; + } + } + } + else + { + for(var i = 0, l = output.links.length; i < l; i++) + { + var link = output.links[i]; + var target_node = this.graph.getNodeById( link[3] ); + if(target_node) + target_node.inputs[ link[4] ].link = null; //remove other side link + } + output.links = null; + } + + this.setDirtyCanvas(false,true); + this.graph.onConnectionChange(); + return true; +} + +LGraphNode.prototype.disconnectInput = function(slot) +{ + //seek for the output slot + if( slot.constructor === String ) + { + slot = this.findInputSlot(slot); + if(slot == -1) + { + 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) + console.log("Connect: Error, slot number not found"); + return false; + } + + var input = this.inputs[slot]; + if(!input) return false; + var link = this.inputs[slot].link; + this.inputs[slot].link = null; + + //remove other side + var node = this.graph.getNodeById( link[1] ); + if(!node) return false; + + var output = node.outputs[ link[2] ]; + if(!output || !output.links || output.links.length == 0) + return false; + + for(var i = 0, l = output.links.length; i < l; i++) + { + var link = output.links[i]; + if( link[3] == this.id ) + { + output.links.splice(i,1); + break; + } + } + + this.setDirtyCanvas(false,true); + this.graph.onConnectionChange(); + return true; +} + +//returns the center of a connection point in canvas coords +LGraphNode.prototype.getConnectionPos = function(is_input,slot_number) +{ + if(this.flags.collapsed) + return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5]; + + if(is_input && slot_number == -1) + { + return [this.pos[0] + 10, this.pos[1] + 10]; + } + + if(is_input && this.inputs.length > slot_number && this.inputs[slot_number].pos) + return [this.pos[0] + this.inputs[slot_number].pos[0],this.pos[1] + this.inputs[slot_number].pos[1]]; + else if(!is_input && this.outputs.length > slot_number && this.outputs[slot_number].pos) + return [this.pos[0] + this.outputs[slot_number].pos[0],this.pos[1] + this.outputs[slot_number].pos[1]]; + + if(!is_input) //output + return [this.pos[0] + this.size[0] + 1, this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT]; + return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT]; +} + +/* Renders the LGraphNode on the canvas */ +LGraphNode.prototype.draw = function(ctx, canvasrender) +{ + var glow = false; + + var color = this.color || LiteGraph.NODE_DEFAULT_COLOR; + //if (this.selected) color = "#88F"; + + var render_title = true; + if(this.flags.skip_title_render || this.graph.isLive()) + render_title = false; + if(this.mouseOver) + render_title = true; + + //shadow and glow + if (this.mouseOver) glow = true; + + if(this.selected) + { + /* + ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = 1; + */ + } + else if(canvasrender.render_shadows) + { + ctx.shadowColor = "#111"; + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 4; + } + else + ctx.shadowColor = "transparent"; + + //only render if it forces it to do it + if(canvasrender.live_mode) + { + if(!this.flags.collapsed) + { + ctx.shadowColor = "transparent"; + if(this.onDrawBackground) + this.onDrawBackground(ctx); + if(this.onDrawForeground) + this.onDrawForeground(ctx); + } + + return; + } + + //draw in collapsed form + if(this.flags.collapsed) + { + if(!this.onDrawCollapsed || this.onDrawCollapsed(ctx) == false) + this.drawNodeCollapsed(ctx,color,this.bgcolor); + return; + } + + //clip if required (mask) + if(this.flags.clip_area) + { + ctx.save(); + if(this.shape == null || this.shape == "box") + { + ctx.beginPath(); + ctx.rect(0,0,this.size[0], this.size[1]); + } + else if (this.shape == "round") + { + ctx.roundRect(0,0,this.size[0], this.size[1],10); + } + else if (this.shape == "circle") + { + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2); + } + ctx.clip(); + } + + //draw shape + this.drawNodeShape(ctx,color, this.bgcolor, !render_title, this.selected ); + ctx.shadowColor = "transparent"; + + //connection slots + ctx.textAlign = "left"; + ctx.font = "12px Arial"; + + var render_text = this.graph.config.canvas_scale > 0.6; + + //input connection slots + if(this.inputs) + for(var i = 0; i < this.inputs.length; i++) + { + var slot = this.inputs[i]; + + ctx.globalAlpha = 1.0; + if (canvasrender.connecting_node != null && canvasrender.connecting_output.type != 0 && this.inputs[i].type != 0 && canvasrender.connecting_output.type != this.inputs[i].type) + ctx.globalAlpha = 0.4; + + ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA"; + + var pos = this.getConnectionPos(true,i); + pos[0] -= this.pos[0]; + pos[1] -= this.pos[1]; + + ctx.beginPath(); + + if (1 || slot.round) + ctx.arc(pos[0],pos[1],4,0,Math.PI*2); + //else + // ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10); + + ctx.fill(); + + //render name + if(render_text) + { + var text = slot.label != null ? slot.label : slot.name; + if(text) + { + ctx.fillStyle = color; + ctx.fillText(text,pos[0] + 10,pos[1] + 5); + } + } + } + + //output connection slots + if(canvasrender.connecting_node) + ctx.globalAlpha = 0.4; + + ctx.lineWidth = 1; + + ctx.textAlign = "right"; + ctx.strokeStyle = "black"; + if(this.outputs) + for(var i = 0; i < this.outputs.length; i++) + { + var slot = this.outputs[i]; + + var pos = this.getConnectionPos(false,i); + pos[0] -= this.pos[0]; + pos[1] -= this.pos[1]; + + ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA"; + ctx.beginPath(); + //ctx.rect( this.size[0] - 14,i*14,10,10); + + if (1 || slot.round) + ctx.arc(pos[0],pos[1],4,0,Math.PI*2); + //else + // ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10); + + //trigger + //if(slot.node_id != null && slot.slot == -1) + // ctx.fillStyle = "#F85"; + + //if(slot.links != null && slot.links.length) + ctx.fill(); + ctx.stroke(); + + //render output name + if(render_text) + { + var text = slot.label != null ? slot.label : slot.name; + if(text) + { + ctx.fillStyle = color; + ctx.fillText(text, pos[0] - 10,pos[1] + 5); + } + } + } + + ctx.textAlign = "left"; + ctx.globalAlpha = 1.0; + + if(this.onDrawForeground) + this.onDrawForeground(ctx); + + if(this.flags.clip_area) + ctx.restore(); +} + +/* Renders the node shape */ +LGraphNode.prototype.drawNodeShape = function(ctx, fgcolor, bgcolor, no_title, selected ) +{ + //bg rect + ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR; + ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR; + + /* gradient test + var grad = ctx.createLinearGradient(0,0,0,this.size[1]); + grad.addColorStop(0, "#AAA"); + grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR); + grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR); + ctx.fillStyle = grad; + */ + + var title_height = LiteGraph.NODE_TITLE_HEIGHT; + + //render depending on shape + if(this.shape == null || this.shape == "box") + { + if(selected) + { + ctx.strokeStyle = "#CCC"; + ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5,this.size[0]+2, no_title ? (this.size[1]+2) : (this.size[1] + title_height+2) ); + ctx.strokeStyle = fgcolor; + } + + ctx.beginPath(); + ctx.rect(0.5,no_title ? 0.5 : -title_height + 0.5,this.size[0], no_title ? this.size[1] : this.size[1] + title_height); + } + else if (this.shape == "round") + { + ctx.roundRect(0,no_title ? 0 : -title_height,this.size[0], no_title ? this.size[1] : this.size[1] + title_height, 10); + } + else if (this.shape == "circle") + { + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2); + } + + ctx.fill(); + ctx.shadowColor = "transparent"; + ctx.stroke(); + + //image + if (this.bgImage && this.bgImage.width) + ctx.drawImage( this.bgImage, (this.size[0] - this.bgImage.width) * 0.5 , (this.size[1] - this.bgImage.height) * 0.5); + + if(this.bgImageUrl && !this.bgImage) + this.bgImage = this.loadImage(this.bgImageUrl); + + if(this.onDrawBackground) + this.onDrawBackground(ctx); + + //title bg + if(!no_title) + { + ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR; + + if(this.shape == null || this.shape == "box") + { + ctx.fillRect(0,-title_height,this.size[0],title_height); + ctx.stroke(); + } + else if (this.shape == "round") + { + ctx.roundRect(0,-title_height,this.size[0], title_height,10,0); + //ctx.fillRect(0,8,this.size[0],NODE_TITLE_HEIGHT - 12); + ctx.fill(); + ctx.stroke(); + } + + //box + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + if (this.shape == "round") + ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2); + else + ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6); + ctx.fill(); + + //title text + ctx.font = "bold 12px Arial"; + if(this.name != "" && this.graph.config.canvas_scale > 0.8) + { + ctx.fillStyle = "#222"; + ctx.fillText(this.name,16,13-title_height ); + } + } +} + +/* Renders the node when collapsed */ +LGraphNode.prototype.drawNodeCollapsed = function(ctx, fgcolor, bgcolor) +{ + //draw default collapsed shape + ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR; + ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR; + + var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS; + + //circle shape + if(this.shape == "circle") + { + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius,0,Math.PI * 2); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2); + ctx.fill(); + } + else if(this.shape == "round") //rounded box + { + ctx.beginPath(); + ctx.roundRect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + ctx.roundRect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2); + ctx.fill(); + } + else //flat box + { + ctx.beginPath(); + ctx.rect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR; + ctx.beginPath(); + ctx.rect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius); + ctx.fill(); + } +} + +/* Force align to grid */ +LGraphNode.prototype.alignToGrid = function() +{ + this.pos[0] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[0] / LiteGraph.CANVAS_GRID_SIZE); + this.pos[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(this.pos[1] / LiteGraph.CANVAS_GRID_SIZE); +} + +/* Copy all the info from one object to this node (used for serialization) */ +LGraphNode.prototype.copyFromObject = function(info, ignore_connections) +{ + var outputs = null; + var inputs = null; + var properties = null; + var local_data = null; + + for (var j in info) + { + if(ignore_connections && (j == "outputs" || j == "inputs")) + continue; + + if(j == "console") continue; + + if(info[j] == null) + continue; + else if( info[j].concat ) //array + this[j] = info[j].concat(); + else if (typeof(info[j]) == 'object') //object + this[j] = jQuery.extend({}, info[j]); + else //value + this[j] = info[j]; + } + + //redo the connections + /* + if(outputs) + this.outputs = outputs.concat(); + if(inputs) + this.inputs = inputs.concat(); + + if(local_data) + this.data = local_data; + if(properties) + { + //copy only the ones defined + for (var j in properties) + if (this.properties[j] != null) + this.properties[j] = properties[j]; + } + */ +} + +/* Creates a clone of this node */ +LGraphNode.prototype.clone = function() +{ + var node = LiteGraph.createNode(this.type); + + node.size = this.size.concat(); + if(this.inputs) + for(var i = 0, l = this.inputs.length; i < l; ++i) + { + if(node.findInputSlot( this.inputs[i].name ) == -1) + node.addInput( this.inputs[i].name, this.inputs[i].type ); + } + + if(this.outputs) + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + if(node.findOutputSlot( this.outputs[i].name ) == -1) + node.addOutput( this.outputs[i].name, this.outputs[i].type ); + } + + + return node; +} + +/* Console output */ +LGraphNode.prototype.trace = function(msg) +{ + if(!this.console) + this.console = []; + this.console.push(msg); + + this.graph.onNodeTrace(this,msg); +} + +/* Forces to redraw or the main canvas (LGraphNode) or the bg canvas (links) */ +LGraphNode.prototype.setDirtyCanvas = function(dirty_foreground, dirty_background) +{ + if(!this.graph || !this.graph.canvas) + return; + + if(dirty_foreground) + this.graph.canvas.dirty_canvas = true; + if(dirty_background) + this.graph.canvas.dirty_bgcanvas = true; +} + +LGraphNode.prototype.loadImage = function(url) +{ + var img = new Image(); + img.src = LiteGraph.node_images_path + url; + img.ready = false; + + var that = this; + img.onload = function() { + this.ready = true; + that.setDirtyCanvas(true); + } + return img; +} + +//safe LGraphNode action execution (not sure if safe) +LGraphNode.prototype.executeAction = function(action) +{ + if(action == "") return false; + + if( action.indexOf(";") != -1 || action.indexOf("}") != -1) + { + this.trace("Error: Action contains unsafe characters"); + return false; + } + + var tokens = action.split("("); + var func_name = tokens[0]; + if( typeof(this[func_name]) != "function") + { + this.trace("Error: Action not found on node: " + func_name); + return false; + } + + var code = action; + + try + { + var _foo = eval; + eval = null; + (new Function("with(this) { " + code + "}")).call(this); + eval = _foo; + } + catch (err) + { + this.trace("Error executing action {" + action + "} :" + err); + return false; + } + + return true; +} + +/* 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.canvas) + return; + + //releasing somebody elses capture?! + if(!v && this.graph.canvas.node_capturing_input != this) + return; + + //change + this.graph.canvas.node_capturing_input = v ? this : null; + if(this.graph.debug) + console.log(this.name + ": Capturing input " + (v?"ON":"OFF")); +} + +/* Collapse the node */ +LGraphNode.prototype.collapse = function() +{ + if(!this.flags.collapsed) + this.flags.collapsed = true; + else + this.flags.collapsed = false; + this.setDirtyCanvas(true,true); +} + +/* Forces the node to do not move or realign on Z */ +LGraphNode.prototype.pin = function() +{ + if(!this.flags.pinned) + this.flags.pinned = true; + else + this.flags.pinned = false; +} + +LGraphNode.prototype.localToScreen = function(x,y) +{ + return [(x + this.pos[0]) * this.graph.config.canvas_scale + this.graph.config.canvas_offset[0], + (y + this.pos[1]) * this.graph.config.canvas_scale + this.graph.config.canvas_offset[1]]; +} + + + +//********************************************************************************* +// LGraphCanvas: LGraph renderer CLASS +//********************************************************************************* + +function LGraphCanvas(canvas, graph) +{ + if(graph === undefined) + throw ("No graph assigned"); + + if( typeof(window) != "undefined" ) + { + window.requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + function( callback ){ + window.setTimeout(callback, 1000 / 60); + }; + })(); + } + + //link canvas and graph + this.graph = graph; + if(graph) + graph.canvas = this; + + this.setCanvas(canvas); + this.clear(); + + this.startRendering(); +} + +LGraphCanvas.link_type_colors = {'number':"#AAC",'node':"#DCA"}; +LGraphCanvas.link_width = 2; + +LGraphCanvas.prototype.clear = function() +{ + this.frame = 0; + this.last_draw_time = 0; + this.render_time = 0; + this.fps = 0; + + this.selected_nodes = {}; + this.node_dragged = null; + this.node_over = null; + this.node_capturing_input = null; + this.connecting_node = null; + + this.highquality_render = true; + this.pause_rendering = false; + this.render_shadows = true; + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + this.dirty_area = null; + + this.render_only_selected = true; + this.live_mode = false; + this.show_info = true; + this.allow_dragcanvas = true; + this.allow_dragnodes = true; + + this.node_in_panel = null; + + this.last_mouse = [0,0]; + this.last_mouseclick = 0; + + if(this.onClear) this.onClear(); + //this.UIinit(); +} + +LGraphCanvas.prototype.setGraph = function(graph) +{ + if(this.graph == graph) return; + + this.clear(); + if(this.graph) + this.graph.canvas = null; //remove old graph link to the canvas + this.graph = graph; + if(this.graph) + this.graph.canvas = this; + this.setDirty(true,true); +} + +LGraphCanvas.prototype.resize = function(width, height) +{ + if(this.canvas.width == width && this.canvas.height == height) + return; + + this.canvas.width = width; + this.canvas.height = height; + this.bgcanvas.width = this.canvas.width; + this.bgcanvas.height = this.canvas.height; + this.setDirty(true,true); +} + + +LGraphCanvas.prototype.setCanvas = function(canvas) +{ + var that = this; + + //Canvas association + if(typeof(canvas) == "string") + canvas = document.getElementById(canvas); + + if(canvas == null) + throw("Error creating LiteGraph canvas: Canvas not found"); + if(canvas == this.canvas) return; + + this.canvas = canvas; + //this.canvas.tabindex = "1000"; + this.canvas.className += " lgraphcanvas"; + this.canvas.data = this; + + //bg canvas: used for non changing stuff + this.bgcanvas = null; + if(!this.bgcanvas) + { + this.bgcanvas = document.createElement("canvas"); + this.bgcanvas.width = this.canvas.width; + this.bgcanvas.height = this.canvas.height; + } + + if(this.canvas.getContext == null) + { + throw("This browser doesnt support Canvas"); + } + + this.ctx = this.canvas.getContext("2d"); + this.bgctx = this.bgcanvas.getContext("2d"); + + //input: (move and up could be unbinded) + this._mousemove_callback = this.processMouseMove.bind(this); + this._mouseup_callback = this.processMouseUp.bind(this); + + this.canvas.addEventListener("mousedown", this.processMouseDown.bind(this) ); //down do not need to store the binded + this.canvas.addEventListener("mousemove", this._mousemove_callback); + + this.canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); + + + this.canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); + this.canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); + + //touch events + //if( 'touchstart' in document.documentElement ) + { + //alert("doo"); + this.canvas.addEventListener("touchstart", this.touchHandler, true); + this.canvas.addEventListener("touchmove", this.touchHandler, true); + this.canvas.addEventListener("touchend", this.touchHandler, true); + this.canvas.addEventListener("touchcancel", this.touchHandler, true); + } + + //this.canvas.onselectstart = function () { return false; }; + this.canvas.addEventListener("keydown", function(e) { + that.processKeyDown(e); + }); + + this.canvas.addEventListener("keyup", function(e) { + that.processKeyUp(e); + }); +} + +/* +LGraphCanvas.prototype.UIinit = function() +{ + var that = this; + $("#node-console input").change(function(e) + { + if(e.target.value == "") + return; + + var node = that.node_in_panel; + if(!node) + return; + + node.trace("] " + e.target.value, "#333"); + if(node.onConsoleCommand) + { + if(!node.onConsoleCommand(e.target.value)) + node.trace("command not found", "#A33"); + } + else if (e.target.value == "info") + { + node.trace("Special methods:"); + for(var i in node) + { + if(typeof(node[i]) == "function" && LGraphNode.prototype[i] == null && i.substr(0,2) != "on" && i[0] != "_") + node.trace(" + " + i); + } + } + else + { + try + { + eval("var _foo = function() { return ("+e.target.value+"); }"); + var result = _foo.call(node); + if(result) + node.trace(result.toString()); + delete window._foo; + } + catch(err) + { + node.trace("error: " + err, "#A33"); + } + } + + this.value = ""; + }); +} +*/ + +LGraphCanvas.prototype.setDirty = function(fgcanvas,bgcanvas) +{ + if(fgcanvas) + this.dirty_canvas = true; + if(bgcanvas) + this.dirty_bgcanvas = true; +} + +LGraphCanvas.prototype.startRendering = function() +{ + if(this.is_rendering) return; //already rendering + + this.is_rendering = true; + renderFrame.call(this); + + function renderFrame() + { + if(!this.pause_rendering) + this.draw(); + + if(this.is_rendering) + window.requestAnimFrame( renderFrame.bind(this) ); + } + + + /* + this.rendering_timer_id = setInterval( function() { + //trace("Frame: " + new Date().getTime() ); + that.draw(); + }, 1000/50); + */ +} + +LGraphCanvas.prototype.stopRendering = function() +{ + this.is_rendering = false; + /* + if(this.rendering_timer_id) + { + clearInterval(this.rendering_timer_id); + this.rendering_timer_id = null; + } + */ +} + +/* LiteGraphCanvas input */ + +LGraphCanvas.prototype.processMouseDown = function(e) +{ + if(!this.graph) return; + + this.adjustMouseEvent(e); + + this.canvas.removeEventListener("mousemove", this._mousemove_callback ); + document.addEventListener("mousemove", this._mousemove_callback ); + document.addEventListener("mouseup", this._mouseup_callback ); + + var n = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes); + var skip_dragging = false; + + if(e.which == 1) //left button mouse + { + //another node selected + if(!e.shiftKey) //REFACTOR: integrate with function + { + var todeselect = []; + for(var i in this.selected_nodes) + if (this.selected_nodes[i] != n) + todeselect.push(this.selected_nodes[i]); + //two passes to avoid problems modifying the container + for(var i in todeselect) + this.processNodeDeselected(todeselect[i]); + } + var clicking_canvas_bg = false; + + //when clicked on top of a node + //and it is not interactive + if(n) + { + if(!this.live_mode && !n.flags.pinned) + this.bringToFront(n); //if it wasnt selected? + var skip_action = false; + + //not dragging mouse to connect two slots + if(!this.connecting_node && !n.flags.collapsed && !this.live_mode) + { + //search for outputs + if(n.outputs) + for(var i = 0, l = n.outputs.length; i < l; ++i) + { + var output = n.outputs[i]; + var link_pos = n.getConnectionPos(false,i); + if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 10, link_pos[1] - 5, 20,10) ) + { + this.connecting_node = n; + this.connecting_output = output; + this.connecting_pos = n.getConnectionPos(false,i); + this.connecting_slot = i; + + skip_action = true; + break; + } + } + + //search for inputs + if(n.inputs) + for(var i = 0, l = n.inputs.length; i < l; ++i) + { + var input = n.inputs[i]; + var link_pos = n.getConnectionPos(true,i); + if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 10, link_pos[1] - 5, 20,10) ) + { + if(input.link) + { + n.disconnectInput(i); + this.dirty_bgcanvas = true; + skip_action = true; + } + } + } + + //Search for corner + if( !skip_action && isInsideRectangle(e.canvasX, e.canvasY, n.pos[0] + n.size[0] - 5, n.pos[1] + n.size[1] - 5 ,5,5 )) + { + this.resizing_node = n; + this.canvas.style.cursor = "se-resize"; + skip_action = true; + } + } + + //it wasnt clicked on the links boxes + if(!skip_action) + { + var block_drag_node = false; + + //double clicking + var now = new Date().getTime(); + if ((now - this.last_mouseclick) < 300 && this.selected_nodes[n.id]) + { + //double click node + if( n.onDblClick) + n.onDblClick(e); + this.processNodeDblClicked(n); + block_drag_node = true; + } + + //if do not capture mouse + + if( n.onMouseDown && n.onMouseDown(e) ) + block_drag_node = true; + else if(this.live_mode) + { + clicking_canvas_bg = true; + block_drag_node = true; + } + + if(!block_drag_node) + { + if(this.allow_dragnodes) + this.node_dragged = n; + + if(!this.selected_nodes[n.id]) + this.processNodeSelected(n,e); + } + + this.dirty_canvas = true; + } + } + else + clicking_canvas_bg = true; + + if(clicking_canvas_bg && this.allow_dragcanvas) + { + this.dragging_canvas = true; + } + } + else if (e.which == 2) //middle button + { + + } + else if (e.which == 3) //right button + { + this.processContextualMenu(n,e); + } + + //TODO + //if(this.node_selected != prev_selected) + // this.onNodeSelectionChange(this.node_selected); + + this.last_mouse[0] = e.localX; + this.last_mouse[1] = e.localY; + this.last_mouseclick = new Date().getTime(); + this.canvas_mouse = [e.canvasX, e.canvasY]; + + /* + if( (this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null) + this.draw(); + */ + + this.graph.change(); + + //this is to ensure to defocus(blur) if a text input element is on focus + if(!document.activeElement || (document.activeElement.nodeName.toLowerCase() != "input" && document.activeElement.nodeName.toLowerCase() != "textarea")) + e.preventDefault(); + e.stopPropagation(); + return false; +} + +LGraphCanvas.prototype.processMouseMove = function(e) +{ + if(!this.graph) return; + + this.adjustMouseEvent(e); + var mouse = [e.localX, e.localY]; + var delta = [mouse[0] - this.last_mouse[0], mouse[1] - this.last_mouse[1]]; + this.last_mouse = mouse; + this.canvas_mouse = [e.canvasX, e.canvasY]; + + if(this.dragging_canvas) + { + this.graph.config.canvas_offset[0] += delta[0] / this.graph.config.canvas_scale; + this.graph.config.canvas_offset[1] += delta[1] / this.graph.config.canvas_scale; + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + } + else + { + if(this.connecting_node) + this.dirty_canvas = true; + + //get node over + var n = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes); + + //remove mouseover flag + for(var i in this.graph.nodes) + { + if(this.graph.nodes[i].mouseOver && n != this.graph.nodes[i]) + { + //mouse leave + this.graph.nodes[i].mouseOver = false; + if(this.node_over && this.node_over.onMouseLeave) + this.node_over.onMouseLeave(e); + this.node_over = null; + this.dirty_canvas = true; + } + } + + //mouse over a node + if(n) + { + //this.canvas.style.cursor = "move"; + if(!n.mouseOver) + { + //mouse enter + n.mouseOver = true; + this.node_over = n; + this.dirty_canvas = true; + + if(n.onMouseEnter) n.onMouseEnter(e); + } + + if(n.onMouseMove) n.onMouseMove(e); + + //ontop of input + if(this.connecting_node) + { + var pos = this._highlight_input || [0,0]; + var slot = this.isOverNodeInput(n, e.canvasX, e.canvasY, pos); + if(slot != -1 && n.inputs[slot]) + { + var slot_type = n.inputs[slot].type; + if(slot_type == this.connecting_output.type || slot_type == "*" || this.connecting_output.type == "*") + this._highlight_input = pos; + } + else + this._highlight_input = null; + } + + //Search for corner + if( isInsideRectangle(e.canvasX, e.canvasY, n.pos[0] + n.size[0] - 5, n.pos[1] + n.size[1] - 5 ,5,5 )) + this.canvas.style.cursor = "se-resize"; + else + this.canvas.style.cursor = null; + } + else + this.canvas.style.cursor = null; + + if(this.node_capturing_input && this.node_capturing_input != n && this.node_capturing_input.onMouseMove) + { + this.node_capturing_input.onMouseMove(e); + } + + + if(this.node_dragged && !this.live_mode) + { + /* + this.node_dragged.pos[0] += delta[0] / this.graph.config.canvas_scale; + this.node_dragged.pos[1] += delta[1] / this.graph.config.canvas_scale; + this.node_dragged.pos[0] = Math.round(this.node_dragged.pos[0]); + this.node_dragged.pos[1] = Math.round(this.node_dragged.pos[1]); + */ + + for(var i in this.selected_nodes) + { + var n = this.selected_nodes[i]; + + n.pos[0] += delta[0] / this.graph.config.canvas_scale; + n.pos[1] += delta[1] / this.graph.config.canvas_scale; + n.pos[0] = Math.round(n.pos[0]); + n.pos[1] = Math.round(n.pos[1]); + } + + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + } + + if(this.resizing_node && !this.live_mode) + { + this.resizing_node.size[0] += delta[0] / this.graph.config.canvas_scale; + this.resizing_node.size[1] += delta[1] / this.graph.config.canvas_scale; + var max_slots = Math.max( this.resizing_node.inputs ? this.resizing_node.inputs.length : 0, this.resizing_node.outputs ? this.resizing_node.outputs.length : 0); + if(this.resizing_node.size[1] < max_slots * LiteGraph.NODE_SLOT_HEIGHT + 4) + this.resizing_node.size[1] = max_slots * LiteGraph.NODE_SLOT_HEIGHT + 4; + 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; + this.dirty_bgcanvas = true; + } + } + + /* + if((this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null) + this.draw(); + */ + + e.preventDefault(); + e.stopPropagation(); + return false; + //this is not really optimal + //this.graph.change(); +} + +LGraphCanvas.prototype.processMouseUp = function(e) +{ + if(!this.graph) return; + + document.removeEventListener("mousemove", this._mousemove_callback, true ); + this.canvas.addEventListener("mousemove", this._mousemove_callback, true); + document.removeEventListener("mouseup", this._mouseup_callback, true ); + + this.adjustMouseEvent(e); + + if (e.which == 1) //left button + { + //dragging a connection + if(this.connecting_node) + { + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + + var node = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes); + + //node below mouse + if(node) + { + + if(this.connecting_output.type == 'node') + { + this.connecting_node.connect(this.connecting_slot, node, -1); + } + else + { + //slot below mouse? connect + var slot = this.isOverNodeInput(node, e.canvasX, e.canvasY); + if(slot != -1) + { + this.connecting_node.connect(this.connecting_slot, node, slot); + } + } + } + + this.connecting_output = null; + this.connecting_pos = null; + this.connecting_node = null; + this.connecting_slot = -1; + + }//not dragging connection + else if(this.resizing_node) + { + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + this.resizing_node = null; + } + else if(this.node_dragged) //node being dragged? + { + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + + if(this.graph.config.align_to_grid) + this.node_dragged.alignToGrid(); + this.node_dragged = null; + } + else //no node being dragged + { + this.dirty_canvas = true; + this.dragging_canvas = false; + + if( this.node_over && this.node_over.onMouseUp ) + this.node_over.onMouseUp(e); + if( this.node_capturing_input && this.node_capturing_input.onMouseUp ) + this.node_capturing_input.onMouseUp(e); + } + } + else if (e.which == 2) //middle button + { + //trace("middle"); + this.dirty_canvas = true; + this.dragging_canvas = false; + } + else if (e.which == 3) //right button + { + //trace("right"); + this.dirty_canvas = true; + this.dragging_canvas = false; + } + + /* + if((this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null) + this.draw(); + */ + + this.graph.change(); + + e.stopPropagation(); + e.preventDefault(); + return false; +} + +LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_pos) +{ + if(node.inputs) + for(var i = 0, l = node.inputs.length; i < l; ++i) + { + var input = node.inputs[i]; + var link_pos = node.getConnectionPos(true,i); + if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) ) + { + if(slot_pos) { slot_pos[0] = link_pos[0]; slot_pos[1] = link_pos[1] }; + return i; + } + } + return -1; +} + +LGraphCanvas.prototype.processKeyDown = function(e) +{ + if(!this.graph) return; + var block_default = false; + + //select all Control A + if(e.keyCode == 65 && e.ctrlKey) + { + this.selectAllNodes(); + block_default = true; + } + + //delete or backspace + if(e.keyCode == 46 || e.keyCode == 8) + { + this.deleteSelectedNodes(); + } + + //collapse + //... + + //TODO + if(this.selected_nodes) + for (var i in this.selected_nodes) + if(this.selected_nodes[i].onKeyDown) + this.selected_nodes[i].onKeyDown(e); + + this.graph.change(); + + if(block_default) + { + e.preventDefault(); + return false; + } +} + +LGraphCanvas.prototype.processKeyUp = function(e) +{ + if(!this.graph) return; + //TODO + if(this.selected_nodes) + for (var i in this.selected_nodes) + if(this.selected_nodes[i].onKeyUp) + this.selected_nodes[i].onKeyUp(e); + + this.graph.change(); +} + +LGraphCanvas.prototype.processMouseWheel = function(e) +{ + if(!this.graph) return; + if(!this.allow_dragcanvas) return; + + var delta = (e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60); + + this.adjustMouseEvent(e); + + var zoom = this.graph.config.canvas_scale; + + if (delta > 0) + zoom *= 1.1; + else if (delta < 0) + zoom *= 1/(1.1); + + this.setZoom( zoom, [ e.localX, e.localY ] ); + + /* + if(this.rendering_timer_id == null) + this.draw(); + */ + + this.graph.change(); + + e.preventDefault(); + return false; // prevent default +} + +LGraphCanvas.prototype.processNodeSelected = function(n,e) +{ + n.selected = true; + if (n.onSelected) + n.onSelected(); + + if(e && e.shiftKey) //add to selection + this.selected_nodes[n.id] = n; + else + { + this.selected_nodes = {}; + this.selected_nodes[ n.id ] = n; + } + + this.dirty_canvas = true; + + if(this.onNodeSelected) + this.onNodeSelected(n); + + //if(this.node_in_panel) this.showNodePanel(n); +} + +LGraphCanvas.prototype.processNodeDeselected = function(n) +{ + n.selected = false; + if(n.onDeselected) + n.onDeselected(); + + delete this.selected_nodes[n.id]; + + if(this.onNodeDeselected) + this.onNodeDeselected(); + + this.dirty_canvas = true; + + //this.showNodePanel(null); +} + +LGraphCanvas.prototype.processNodeDblClicked = function(n) +{ + if(this.onShowNodePanel) + this.onShowNodePanel(n); + + if(this.onNodeDblClicked) + this.onNodeDblClicked(n); + + this.setDirty(true); +} + +LGraphCanvas.prototype.selectNode = function(node) +{ + this.deselectAllNodes(); + + if(!node) + return; + + if(!node.selected && node.onSelected) + node.onSelected(); + node.selected = true; + this.selected_nodes[ node.id ] = node; + this.setDirty(true); +} + +LGraphCanvas.prototype.selectAllNodes = function() +{ + for(var i in this.graph.nodes) + { + var n = this.graph.nodes[i]; + if(!n.selected && n.onSelected) + n.onSelected(); + n.selected = true; + this.selected_nodes[this.graph.nodes[i].id] = n; + } + + this.setDirty(true); +} + +LGraphCanvas.prototype.deselectAllNodes = function() +{ + for(var i in this.selected_nodes) + { + var n = this.selected_nodes; + if(n.onDeselected) + n.onDeselected(); + n.selected = false; + } + this.selected_nodes = {}; + this.setDirty(true); +} + +LGraphCanvas.prototype.deleteSelectedNodes = function() +{ + for(var i in this.selected_nodes) + { + var m = this.selected_nodes[i]; + //if(m == this.node_in_panel) this.showNodePanel(null); + this.graph.remove(m); + } + this.selected_nodes = {}; + this.setDirty(true); +} + +LGraphCanvas.prototype.centerOnNode = function(node) +{ + this.graph.config.canvas_offset[0] = -node.pos[0] - node.size[0] * 0.5 + (this.canvas.width * 0.5 / this.graph.config.canvas_scale); + this.graph.config.canvas_offset[1] = -node.pos[1] - node.size[1] * 0.5 + (this.canvas.height * 0.5 / this.graph.config.canvas_scale); + this.setDirty(true,true); +} + +LGraphCanvas.prototype.adjustMouseEvent = function(e) +{ + var b = this.canvas.getBoundingClientRect(); + e.localX = e.pageX - b.left; + e.localY = e.pageY - b.top; + + e.canvasX = e.localX / this.graph.config.canvas_scale - this.graph.config.canvas_offset[0]; + e.canvasY = e.localY / this.graph.config.canvas_scale - this.graph.config.canvas_offset[1]; +} + +LGraphCanvas.prototype.setZoom = function(value, zooming_center) +{ + if(!zooming_center) + zooming_center = [this.canvas.width * 0.5,this.canvas.height * 0.5]; + + var center = this.convertOffsetToCanvas( zooming_center ); + + this.graph.config.canvas_scale = value; + + if(this.graph.config.canvas_scale > 4) + this.graph.config.canvas_scale = 4; + else if(this.graph.config.canvas_scale < 0.1) + this.graph.config.canvas_scale = 0.1; + + var new_center = this.convertOffsetToCanvas( zooming_center ); + var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]]; + + this.graph.config.canvas_offset[0] += delta_offset[0]; + this.graph.config.canvas_offset[1] += delta_offset[1]; + + this.dirty_canvas = true; + this.dirty_bgcanvas = true; +} + +LGraphCanvas.prototype.convertOffsetToCanvas = function(pos) +{ + return [pos[0] / this.graph.config.canvas_scale - this.graph.config.canvas_offset[0], pos[1] / this.graph.config.canvas_scale - this.graph.config.canvas_offset[1]]; +} + +LGraphCanvas.prototype.convertCanvasToOffset = function(pos) +{ + return [(pos[0] + this.graph.config.canvas_offset[0]) * this.graph.config.canvas_scale, + (pos[1] + this.graph.config.canvas_offset[1]) * this.graph.config.canvas_scale ]; +} + +LGraphCanvas.prototype.convertEventToCanvas = function(e) +{ + var rect = this.canvas.getClientRects()[0]; + return this.convertOffsetToCanvas([e.pageX - rect.left,e.pageY - rect.top]); +} + +LGraphCanvas.prototype.bringToFront = function(n) +{ + var i = this.graph.nodes.indexOf(n); + if(i == -1) return; + + this.graph.nodes.splice(i,1); + this.graph.nodes.push(n); +} + +LGraphCanvas.prototype.sendToBack = function(n) +{ + var i = this.graph.nodes.indexOf(n); + if(i == -1) return; + + this.graph.nodes.splice(i,1); + this.graph.nodes.unshift(n); +} + +/* Interaction */ + + + +/* LGraphCanvas render */ + +LGraphCanvas.prototype.computeVisibleNodes = function() +{ + var visible_nodes = []; + for (var i in this.graph.nodes) + { + var n = this.graph.nodes[i]; + + //skip rendering nodes in live mode + if(this.live_mode && !n.onDrawBackground && !n.onDrawForeground) + continue; + + if(!overlapBounding(this.visible_area, n.getBounding() )) + continue; //out of the visible area + + visible_nodes.push(n); + } + return visible_nodes; +} + +LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) +{ + //fps counting + var now = new Date().getTime(); + this.render_time = (now - this.last_draw_time)*0.001; + this.last_draw_time = now; + + if(this.graph) + { + var start = [-this.graph.config.canvas_offset[0], -this.graph.config.canvas_offset[1] ]; + var end = [start[0] + this.canvas.width / this.graph.config.canvas_scale, start[1] + this.canvas.height / this.graph.config.canvas_scale]; + this.visible_area = new Float32Array([start[0],start[1],end[0],end[1]]); + } + + if(this.dirty_bgcanvas || force_bgcanvas) + this.drawBgcanvas(); + + if(this.dirty_canvas || force_canvas) + this.drawFrontCanvas(); + + this.fps = this.render_time ? (1.0 / this.render_time) : 0; + this.frame += 1; +} + +LGraphCanvas.prototype.drawFrontCanvas = function() +{ + var ctx = this.ctx; + var canvas = this.canvas; + + //reset in case of error + ctx.restore(); + ctx.setTransform(1, 0, 0, 1, 0, 0); + + //clip dirty area if there is one, otherwise work in full canvas + if(this.dirty_area) + { + ctx.save(); + ctx.beginPath(); + ctx.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]); + ctx.clip(); + } + + //clear + //canvas.width = canvas.width; + ctx.clearRect(0,0,canvas.width, canvas.height); + + //draw bg canvas + ctx.drawImage(this.bgcanvas,0,0); + + //info widget + if(this.show_info) + { + ctx.font = "10px Arial"; + ctx.fillStyle = "#888"; + if(this.graph) + { + ctx.fillText( "T: " + this.graph.globaltime.toFixed(2)+"s",5,13*1 ); + ctx.fillText( "I: " + this.graph.iteration,5,13*2 ); + ctx.fillText( "F: " + this.frame,5,13*3 ); + ctx.fillText( "FPS:" + this.fps.toFixed(2),5,13*4 ); + } + else + ctx.fillText( "No graph selected",5,13*1 ); + } + + if(this.graph) + { + //apply transformations + ctx.save(); + ctx.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale); + ctx.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]); + + //draw nodes + var drawn_nodes = 0; + var visible_nodes = this.computeVisibleNodes(); + this.visible_nodes = visible_nodes; + + for (var i in visible_nodes) + { + var n = visible_nodes[i]; + + //transform coords system + ctx.save(); + ctx.translate( n.pos[0], n.pos[1] ); + + //Draw + n.draw(ctx,this); + drawn_nodes += 1; + + //Restore + ctx.restore(); + } + + //connections ontop? + if(this.graph.config.links_ontop) + if(!this.live_mode) + this.drawConnections(ctx); + + //current connection + if(this.connecting_pos != null) + { + ctx.lineWidth = LGraphCanvas.link_width; + ctx.fillStyle = this.connecting_output.type == 'node' ? "#F85" : "#AFA"; + ctx.strokeStyle = ctx.fillStyle; + this.renderLink(ctx, this.connecting_pos, [this.canvas_mouse[0],this.canvas_mouse[1]] ); + + ctx.beginPath(); + ctx.arc( this.connecting_pos[0], this.connecting_pos[1],4,0,Math.PI*2); + /* + if( this.connecting_output.round) + ctx.arc( this.connecting_pos[0], this.connecting_pos[1],4,0,Math.PI*2); + else + ctx.rect( this.connecting_pos[0], this.connecting_pos[1],12,6); + */ + ctx.fill(); + + ctx.fillStyle = "#ffcc00"; + if(this._highlight_input) + { + ctx.beginPath(); + ctx.arc( this._highlight_input[0], this._highlight_input[1],6,0,Math.PI*2); + ctx.fill(); + } + } + ctx.restore(); + } + + if(this.dirty_area) + { + ctx.restore(); + //this.dirty_area = null; + } + + this.dirty_canvas = false; +} + +LGraphCanvas.prototype.drawBgcanvas = function() +{ + var canvas = this.bgcanvas; + var ctx = this.bgctx; + + + //clear + canvas.width = canvas.width; + + //reset in case of error + ctx.restore(); + ctx.setTransform(1, 0, 0, 1, 0, 0); + + if(this.graph) + { + //apply transformations + ctx.save(); + ctx.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale); + ctx.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]); + + //render BG + if(this.background_image && this.graph.config.canvas_scale > 0.5) + { + ctx.globalAlpha = 1.0 - 0.5 / this.graph.config.canvas_scale; + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false + if(!this._bg_img || this._bg_img.name != this.background_image) + { + this._bg_img = new Image(); + this._bg_img.name = this.background_image; + this._bg_img.src = this.background_image; + var that = this; + this._bg_img.onload = function() { + that.draw(true,true); + } + } + + var pattern = null; + if(this._bg_img != this._pattern_img && this._bg_img.width > 0) + { + pattern = ctx.createPattern( this._bg_img, 'repeat' ); + this._pattern_img = this._bg_img; + this._pattern = pattern; + } + else + pattern = this._pattern; + if(pattern) + { + ctx.fillStyle = pattern; + ctx.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2]-this.visible_area[0],this.visible_area[3]-this.visible_area[1]); + ctx.fillStyle = "transparent"; + } + + ctx.globalAlpha = 1.0; + } + + //DEBUG: show clipping area + //ctx.fillStyle = "red"; + //ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20); + + //bg + ctx.strokeStyle = "#235"; + ctx.strokeRect(0,0,canvas.width,canvas.height); + + /* + if(this.render_shadows) + { + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = 6; + } + else + ctx.shadowColor = "rgba(0,0,0,0)"; + */ + + //draw connections + if(!this.live_mode) + this.drawConnections(ctx); + + //restore state + ctx.restore(); + } + + this.dirty_bgcanvas = false; + this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas +} + +LGraphCanvas.link_colors = ["#AAC","#ACA","#CAA"]; + +LGraphCanvas.prototype.drawConnections = function(ctx) +{ + //draw connections + ctx.lineWidth = LGraphCanvas.link_width; + + ctx.fillStyle = "#AAA"; + ctx.strokeStyle = "#AAA"; + //for every node + for (var n in this.graph.nodes) + { + var node = this.graph.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) + for(var i in node.inputs) + { + var input = node.inputs[i]; + if(!input || !input.link ) continue; + var link = input.link; + + var start_node = this.graph.getNodeById( link[1] ); + if(start_node == null) continue; + var start_node_slot = link[2]; + var start_node_slotpos = null; + + if(start_node_slot == -1) + start_node_slotpos = [start_node.pos[0] + 10, start_node.pos[1] + 10]; + else + start_node_slotpos = start_node.getConnectionPos(false, start_node_slot); + + var color = LGraphCanvas.link_type_colors[node.inputs[i].type]; + if(color == null) + color = LGraphCanvas.link_colors[node.id % LGraphCanvas.link_colors.length]; + ctx.fillStyle = ctx.strokeStyle = color; + this.renderLink(ctx, start_node_slotpos, node.getConnectionPos(true,i) ); + } + } +} + +LGraphCanvas.prototype.renderLink = function(ctx,a,b) +{ + var curved_lines = true; + + if(!this.highquality_render) + { + ctx.beginPath(); + ctx.moveTo(a[0],a[1]); + ctx.lineTo(b[0],b[1]); + ctx.stroke(); + return; + } + + var dist = distance(a,b); + + ctx.beginPath(); + + if(curved_lines) + { + ctx.moveTo(a[0],a[1]); + ctx.bezierCurveTo(a[0] + dist*0.25, a[1], + b[0] - dist*0.25 , b[1], + b[0] ,b[1] ); + } + else + { + ctx.moveTo(a[0]+10,a[1]); + ctx.lineTo(((a[0]+10) + (b[0]-10))*0.5,a[1]); + ctx.lineTo(((a[0]+10) + (b[0]-10))*0.5,b[1]); + ctx.lineTo(b[0]-10,b[1]); + } + ctx.stroke(); + + //render arrow + if(this.graph.config.canvas_scale > 0.6) + { + //get two points in the bezier curve + var pos = this.computeConnectionPoint(a,b,0.5); + var pos2 = this.computeConnectionPoint(a,b,0.51); + var angle = 0; + if(curved_lines) + angle = -Math.atan2( pos2[0] - pos[0], pos2[1] - pos[1]); + else + angle = b[1] > a[1] ? 0 : Math.PI; + + ctx.save(); + ctx.translate(pos[0],pos[1]); + ctx.rotate(angle); + ctx.beginPath(); + ctx.moveTo(-5,-5); + ctx.lineTo(0,+5); + ctx.lineTo(+5,-5); + ctx.fill(); + ctx.restore(); + } +} + +LGraphCanvas.prototype.computeConnectionPoint = function(a,b,t) +{ + var dist = distance(a,b); + var p0 = a; + var p1 = [ a[0] + dist*0.25, a[1] ]; + var p2 = [ b[0] - dist*0.25, b[1] ]; + var p3 = b; + + var c1 = (1-t)*(1-t)*(1-t); + var c2 = 3*((1-t)*(1-t))*t; + var c3 = 3*(1-t)*(t*t); + var c4 = t*t*t; + + var x = c1*p0[0] + c2*p1[0] + c3*p2[0] + c4*p3[0]; + var y = c1*p0[1] + c2*p1[1] + c3*p2[1] + c4*p3[1]; + return [x,y]; +} + +LGraphCanvas.prototype.resizeCanvas = function(width,height) +{ + this.canvas.width = width; + if(height) + this.canvas.height = height; + + this.bgcanvas.width = this.canvas.width; + this.bgcanvas.height = this.canvas.height; + this.draw(true,true); +} + +LGraphCanvas.prototype.switchLiveMode = function() +{ + this.live_mode = !this.live_mode; + this.dirty_canvas = true; + this.dirty_bgcanvas = true; +} + +LGraphCanvas.prototype.onNodeSelectionChange = function(node) +{ + return; //disabled + //if(this.node_in_panel) this.showNodePanel(node); +} + +LGraphCanvas.prototype.touchHandler = function(event) +{ + //alert("foo"); + var touches = event.changedTouches, + first = touches[0], + type = ""; + + switch(event.type) + { + case "touchstart": type = "mousedown"; break; + case "touchmove": type="mousemove"; break; + case "touchend": type="mouseup"; break; + default: return; + } + + //initMouseEvent(type, canBubble, cancelable, view, clickCount, + // screenX, screenY, clientX, clientY, ctrlKey, + // altKey, shiftKey, metaKey, button, relatedTarget); + + var simulatedEvent = document.createEvent("MouseEvent"); + simulatedEvent.initMouseEvent(type, true, true, window, 1, + first.screenX, first.screenY, + first.clientX, first.clientY, false, + false, false, false, 0/*left*/, null); + first.target.dispatchEvent(simulatedEvent); + event.preventDefault(); +} + +/* CONTEXT MENU ********************/ + +LGraphCanvas.onMenuAdd = function(node, e, prev_menu, canvas, first_event ) +{ + var values = LiteGraph.getNodeTypesCategories(); + var entries = {}; + for(var i in values) + if(values[i]) + entries[ i ] = { value: values[i], content: values[i] , is_menu: true }; + + var menu = LiteGraph.createContextualMenu(entries, {event: e, callback: inner_clicked, from: prev_menu}); + + function inner_clicked(v, e) + { + var category = v.value; + var node_types = LiteGraph.getNodeTypesInCategory(category); + var values = []; + for(var i in node_types) + values.push( { content: node_types[i].title, value: node_types[i].type }); + + LiteGraph.createContextualMenu(values, {event: e, callback: inner_create, from: menu}); + return false; + } + + function inner_create(v, e) + { + var node = LiteGraph.createNode( v.value ); + if(node) + { + node.pos = canvas.convertEventToCanvas(first_event); + canvas.graph.add( node ); + } + } + + return false; +} + +LGraphCanvas.onMenuCollapseAll = function() +{ + +} + + +LGraphCanvas.onMenuNodeEdit = function() +{ + +} + +LGraphCanvas.onMenuNodeInputs = function(node, e, prev_menu) +{ + if(!node) return; + + var options = node.optional_inputs; + if(node.onGetInputs) + options = node.onGetInputs(); + if(options) + { + var entries = []; + for (var i in options) + { + var option = options[i]; + var label = option[0]; + if(option[2] && option[2].label) + label = option[2].label; + entries.push({content: label, value: option}); + } + var menu = LiteGraph.createContextualMenu(entries, {event: e, callback: inner_clicked, from: prev_menu}); + } + + function inner_clicked(v) + { + if(!node) return; + node.addInput(v.value[0],v.value[1], v.value[2]); + } + + return false; +} + +LGraphCanvas.onMenuNodeOutputs = function(node, e, prev_menu) +{ + if(!node) return; + + var options = node.optional_outputs; + if(node.onGetOutputs) + options = node.onGetOutputs(); + if(options) + { + var entries = []; + for (var i in options) + { + if(node.findOutputSlot(options[i][0]) != -1) + continue; //skip the ones already on + entries.push({content: options[i][0], value: options[i]}); + } + if(entries.length) + var menu = LiteGraph.createContextualMenu(entries, {event: e, callback: inner_clicked, from: prev_menu}); + } + + function inner_clicked(v) + { + if(!node) return; + node.addOutput(v.value[0],v.value[1]); + } + + return false; +} + +LGraphCanvas.onMenuNodeCollapse = function(node) +{ + node.flags.collapsed = !node.flags.collapsed; + node.graph.canvas.setDirty(true,true); +} + +LGraphCanvas.onMenuNodeColors = function(node, e, prev_menu) +{ + var values = []; + for(var i in LGraphCanvas.node_colors) + { + var color = LGraphCanvas.node_colors[i]; + var value = {value:i, content:""+i+""}; + values.push(value); + } + LiteGraph.createContextualMenu(values, {event: e, callback: inner_clicked, from: prev_menu}); + + function inner_clicked(v) + { + if(!node) return; + var color = LGraphCanvas.node_colors[v.value]; + if(color) + { + node.color = color.color; + node.bgcolor = color.bgcolor; + node.graph.canvas.setDirty(true); + } + } + + return false; +} + +LGraphCanvas.onMenuNodeShapes = function(node,e) +{ + LiteGraph.createContextualMenu(["box","round","circle"], {event: e, callback: inner_clicked}); + + function inner_clicked(v) + { + if(!node) return; + node.shape = v; + node.graph.canvas.setDirty(true); + } + + return false; +} + +LGraphCanvas.onMenuNodeRemove = function(node) +{ + if(node.removable == false) return; + node.graph.remove(node); + node.graph.canvas.setDirty(true,true); +} + +LGraphCanvas.onMenuNodeClone = function(node) +{ + if(node.clonable == false) return; + var newnode = node.clone(); + if(!newnode) return; + newnode.pos = [node.pos[0]+5,node.pos[1]+5]; + node.graph.add(newnode); + node.graph.canvas.setDirty(true,true); +} + +LGraphCanvas.node_colors = { + "red": { color:"#FAA", bgcolor:"#A44" }, + "green": { color:"#AFA", bgcolor:"#4A4" }, + "blue": { color:"#AAF", bgcolor:"#44A" }, + "white": { color:"#FFF", bgcolor:"#AAA" } +}; + +LGraphCanvas.prototype.getCanvasMenuOptions = function() +{ + return [ + {content:"Add Node", is_menu: true, callback: LGraphCanvas.onMenuAdd } + //{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll } + ]; +} + +LGraphCanvas.prototype.getNodeMenuOptions = function(node) +{ + var options = [ + {content:"Inputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeInputs }, + {content:"Outputs", is_menu: true, disabled:true, callback: LGraphCanvas.onMenuNodeOutputs }, + null, + {content:"Collapse", callback: LGraphCanvas.onMenuNodeCollapse }, + {content:"Colors", is_menu: true, callback: LGraphCanvas.onMenuNodeColors }, + {content:"Shapes", is_menu: true, callback: LGraphCanvas.onMenuNodeShapes }, + null, + {content:"Clone", callback: LGraphCanvas.onMenuNodeClone }, + null, + {content:"Remove", callback: LGraphCanvas.onMenuNodeRemove } + ]; + + if( node.clonable == false ) + options[7].disabled = true; + if( node.removable == false ) + options[9].disabled = true; + + if(node.onGetInputs && node.onGetInputs().length ) + options[0].disabled = false; + if(node.onGetOutputs && node.onGetOutputs().length ) + options[1].disabled = false; + + return options; +} + +LGraphCanvas.prototype.processContextualMenu = function(node,event) +{ + var that = this; + var menu = LiteGraph.createContextualMenu(node ? this.getNodeMenuOptions(node) : this.getCanvasMenuOptions(), {event: event, callback: inner_option_clicked}); + + function inner_option_clicked(v,e) + { + if(!v) return; + + if(v.callback) + return v.callback(node, e, menu, that, event ); + } +} + + + + + + +//API ************************************************* +//function roundRect(ctx, x, y, width, height, radius, radius_low) { +CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, radius_low) { + if ( radius === undefined ) { + radius = 5; + } + + if(radius_low === undefined) + radius_low = radius; + + this.beginPath(); + this.moveTo(x + radius, y); + this.lineTo(x + width - radius, y); + this.quadraticCurveTo(x + width, y, x + width, y + radius); + + this.lineTo(x + width, y + height - radius_low); + this.quadraticCurveTo(x + width, y + height, x + width - radius_low, y + height); + this.lineTo(x + radius_low, y + height); + this.quadraticCurveTo(x, y + height, x, y + height - radius_low); + this.lineTo(x, y + radius); + this.quadraticCurveTo(x, y, x + radius, y); +} + +function compareObjects(a,b) +{ + for(var i in a) + if(a[i] != b[i]) + return false; + return true; +} + +function distance(a,b) +{ + return Math.sqrt( (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1]) ); +} + +function colorToString(c) +{ + return "rgba(" + Math.round(c[0] * 255).toFixed() + "," + Math.round(c[1] * 255).toFixed() + "," + Math.round(c[2] * 255).toFixed() + "," + (c.length == 4 ? c[3].toFixed(2) : "1.0") + ")"; +} + +function isInsideRectangle(x,y, left, top, width, height) +{ + if (left < x && (left + width) > x && + top < y && (top + height) > y) + return true; + return false; +} + +//[minx,miny,maxx,maxy] +function growBounding(bounding, x,y) +{ + if(x < bounding[0]) + bounding[0] = x; + else if(x > bounding[2]) + bounding[2] = x; + + if(y < bounding[1]) + bounding[1] = y; + else if(y > bounding[3]) + bounding[3] = y; +} + +//point inside boundin box +function isInsideBounding(p,bb) +{ + if (p[0] < bb[0][0] || + p[1] < bb[0][1] || + p[0] > bb[1][0] || + p[1] > bb[1][1]) + return false; + return true; +} + +//boundings overlap, format: [start,end] +function overlapBounding(a,b) +{ + if ( a[0] > b[2] || + a[1] > b[3] || + a[2] < b[0] || + a[3] < b[1]) + return false; + return true; +} + +//Convert a hex value to its decimal value - the inputted hex must be in the +// format of a hex triplet - the kind we use for HTML colours. The function +// will return an array with three values. +function hex2num(hex) { + if(hex.charAt(0) == "#") hex = hex.slice(1); //Remove the '#' char - if there is one. + hex = hex.toUpperCase(); + var hex_alphabets = "0123456789ABCDEF"; + var value = new Array(3); + var k = 0; + var int1,int2; + for(var i=0;i<6;i+=2) { + int1 = hex_alphabets.indexOf(hex.charAt(i)); + int2 = hex_alphabets.indexOf(hex.charAt(i+1)); + value[k] = (int1 * 16) + int2; + k++; + } + return(value); +} +//Give a array with three values as the argument and the function will return +// the corresponding hex triplet. +function num2hex(triplet) { + var hex_alphabets = "0123456789ABCDEF"; + var hex = "#"; + var int1,int2; + for(var i=0;i<3;i++) { + int1 = triplet[i] / 16; + int2 = triplet[i] % 16; + + hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2); + } + return(hex); +} + +/* LiteGraph GUI elements *************************************/ + +LiteGraph.createContextualMenu = function(values,options) +{ + options = options || {}; + this.options = options; + + if(!options.from) + LiteGraph.closeAllContextualMenus(); + + var root = document.createElement("div"); + root.className = "litecontextualmenu litemenubar-panel"; + this.root = root; + var style = root.style; + + style.minWidth = "100px"; + style.minHeight = "20px"; + + style.position = "fixed"; + style.top = "100px"; + style.left = "100px"; + style.color = "#AAF"; + style.padding = "2px"; + style.borderBottom = "2px solid #AAF"; + style.backgroundColor = "#444"; + + //avoid a context menu in a context menu + root.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); + + for(var i in values) + { + var item = values[i]; + var element = document.createElement("div"); + element.className = "litemenu-entry"; + + if(item == null) + { + element.className = "litemenu-entry separator"; + root.appendChild(element); + continue; + } + + if(item.is_menu) + element.className += " submenu"; + + if(item.disabled) + element.className += " disabled"; + + element.style.cursor = "pointer"; + element.dataset["value"] = typeof(item) == "string" ? item : item.value; + element.data = item; + if(typeof(item) == "string") + element.innerHTML = values.constructor == Array ? values[i] : i; + else + element.innerHTML = item.content ? item.content : i; + + element.addEventListener("click", on_click ); + root.appendChild(element); + } + + root.addEventListener("mouseover", function(e) { + this.mouse_inside = true; + }); + + root.addEventListener("mouseout", function(e) { + //console.log("OUT!"); + var aux = e.toElement; + while(aux != this && aux != document) + aux = aux.parentNode; + + if(aux == this) return; + this.mouse_inside = false; + if(!this.block_close) + this.closeMenu(); + }); + + /* MS specific + root.addEventListener("mouseleave", function(e) { + + this.mouse_inside = false; + if(!this.block_close) + this.closeMenu(); + }); + */ + + //insert before checking position + document.body.appendChild(root); + + var root_rect = root.getClientRects()[0]; + + //link menus + if(options.from) + { + options.from.block_close = true; + } + + var left = options.left || 0; + var top = options.top || 0; + if(options.event) + { + left = (options.event.pageX - 10); + top = (options.event.pageY - 10); + if(options.left) + left = options.left; + + var rect = document.body.getClientRects()[0]; + + if(options.from) + { + var parent_rect = options.from.getClientRects()[0]; + left = parent_rect.left + parent_rect.width; + } + + + if(left > (rect.width - root_rect.width - 10)) + left = (rect.width - root_rect.width - 10); + if(top > (rect.height - root_rect.height - 10)) + top = (rect.height - root_rect.height - 10); + } + + root.style.left = left + "px"; + root.style.top = top + "px"; + + function on_click(e) { + var value = this.dataset["value"]; + var close = true; + if(options.callback) + { + var ret = options.callback.call(root, this.data, e ); + if( ret != undefined ) close = ret; + } + + if(close) + LiteGraph.closeAllContextualMenus(); + //root.closeMenu(); + } + + root.closeMenu = function() + { + if(options.from) + { + options.from.block_close = false; + if(!options.from.mouse_inside) + options.from.closeMenu(); + } + if(this.parentNode) + document.body.removeChild(this); + }; + + return root; +} + +LiteGraph.closeAllContextualMenus = function() +{ + var elements = document.querySelectorAll(".litecontextualmenu"); + if(!elements.length) return; + + var result = []; + for(var i = 0; i < elements.length; i++) + result.push(elements[i]); + + for(var i in result) + if(result[i].parentNode) + result[i].parentNode.removeChild( result[i] ); +} + +LiteGraph.extendClass = function(origin, target) +{ + for(var i in origin) //copy class properties + target[i] = origin[i]; + if(origin.prototype) //copy prototype properties + for(var i in origin.prototype) + target.prototype[i] = origin.prototype[i]; +} \ No newline at end of file diff --git a/src/nodes/basicnodes.js b/src/nodes/basicnodes.js new file mode 100644 index 000000000..42a71d506 --- /dev/null +++ b/src/nodes/basicnodes.js @@ -0,0 +1,738 @@ +//basic nodes + +LiteGraph.registerNodeType("basic/const",{ + title: "Const", + desc: "Constant", + outputs: [["value","number"]], + properties: {value:1.0}, + editable: { property:"value", type:"number" }, + + setValue: function(v) + { + if( typeof(v) == "string") v = parseFloat(v); + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + this.setOutputData(0, parseFloat( this.properties["value"] ) ); + }, + + onDrawBackground: function(ctx) + { + //show the current value + this.outputs[0].label = this.properties["value"].toFixed(3); + }, + + onWidget: function(e,widget) + { + if(widget.name == "value") + this.setValue(widget.value); + } +}); + +LiteGraph.registerNodeType("math/rand",{ + title: "Rand", + desc: "Random number", + outputs: [["value","number"]], + properties: {min:0,max:1}, + size: [60,20], + + onExecute: function() + { + var min = this.properties.min; + var max = this.properties.max; + this._last_v = Math.random() * (max-min) + min; + this.setOutputData(0, this._last_v ); + }, + + onDrawBackground: function(ctx) + { + //show the current value + if(this._last_v) + this.outputs[0].label = this._last_v.toFixed(3); + else + this.outputs[0].label = "?"; + } +}); + +LiteGraph.registerNodeType("math/clamp",{ + title: "Clamp", + desc: "Clamp number between min and max", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + properties: {min:0,max:1}, + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + v = Math.max(this.properties.min,v); + v = Math.min(this.properties.max,v); + this.setOutputData(0, v ); + } +}); + +LiteGraph.registerNodeType("math/abs",{ + title: "Abs", + desc: "Absolute", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + this.setOutputData(0, Math.abs(v) ); + } +}); + +LiteGraph.registerNodeType("math/floor",{ + title: "Floor", + desc: "Floor number to remove fractional part", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + this.setOutputData(0, v|1 ); + } +}); + + +LiteGraph.registerNodeType("math/frac",{ + title: "Frac", + desc: "Returns fractional part", + inputs: [["in","number"]], + outputs: [["out","number"]], + size: [60,20], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + this.setOutputData(0, v%1 ); + } +}); + + +LiteGraph.registerNodeType("basic/watch", { + title: "Watch", + desc: "Show value", + size: [60,20], + inputs: [["value",0,{label:""}]], + outputs: [["value",0,{label:""}]], + properties: {value:""}, + + onExecute: function() + { + this.properties.value = this.getInputData(0); + this.setOutputData(0, this.properties.value); + }, + + onDrawBackground: function(ctx) + { + //show the current value + if(this.inputs[0] && this.properties["value"] != null) + { + if (this.properties["value"].constructor === Number ) + this.inputs[0].label = this.properties["value"].toFixed(3); + else + this.inputs[0].label = this.properties["value"]; + } + } +}); + + +LiteGraph.registerNodeType("math/scale",{ + title: "Scale", + desc: "1 - value", + inputs: [["value","number",{label:""}]], + outputs: [["value","number",{label:""}]], + size:[70,20], + properties: {"factor":1}, + + onExecute: function() + { + var value = this.getInputData(0); + if(value != null) + this.setOutputData(0, value * this.properties.factor ); + } +}); + + +LiteGraph.registerNodeType("math/operation",{ + title: "Operation", + desc: "Easy math operators", + inputs: [["A","number"],["B","number"]], + outputs: [["A+B","number"]], + size: [80,20], + //optional_inputs: [["start","number"]], + + properties: {A:1.0, B:1.0}, + + setValue: function(v) + { + if( typeof(v) == "string") v = parseFloat(v); + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + var A = this.getInputData(0); + var B = this.getInputData(1); + if(A!=null) + this.properties["A"] = A; + else + A = this.properties["A"]; + + if(B!=null) + this.properties["B"] = B; + else + B = this.properties["B"]; + + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + var output = this.outputs[i]; + if(!output.links || !output.links.length) + continue; + switch( output.name ) + { + case "A+B": value = A+B; break; + case "A-B": value = A-B; break; + case "A*B": value = A*B; break; + case "A/B": value = A/B; break; + } + this.setOutputData(i, value ); + } + }, + + onGetOutputs: function() + { + return [["A-B","number"],["A*B","number"],["A/B","number"]]; + } +}); + +LiteGraph.registerNodeType("math/compare",{ + title: "Compare", + desc: "compares between two values", + + inputs: [["A","number"],["B","number"]], + outputs: [["A==B","number"],["A!=B","number"]], + properties:{A:0,B:0}, + onExecute: function() + { + var A = this.getInputData(0); + var B = this.getInputData(1); + if(A!=null) + this.properties["A"] = A; + else + A = this.properties["A"]; + + if(B!=null) + this.properties["B"] = B; + else + B = this.properties["B"]; + + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + var output = this.outputs[i]; + if(!output.links || !output.links.length) + continue; + switch( output.name ) + { + case "A==B": value = A==B; break; + case "A!=B": value = A!=B; break; + case "A>B": value = A>B; break; + case "A=B": value = A>=B; break; + } + this.setOutputData(i, value ); + } + }, + + onGetOutputs: function() + { + return [["A==B","number"],["A!=B","number"],["A>B","number"],["A=B","number"],["A<=B","number"]]; + } +}); + +if(window.math) //math library for safe math operations without eval +LiteGraph.registerNodeType("math/formula",{ + title: "Formula", + desc: "Compute safe formula", + inputs: [["x","number"],["y","number"]], + outputs: [["","number"]], + properties: {x:1.0, y:1.0, formula:"x+y"}, + + onExecute: function() + { + var x = this.getInputData(0); + var y = this.getInputData(1); + if(x != null) + this.properties["x"] = x; + else + x = this.properties["x"]; + + if(y!=null) + this.properties["y"] = y; + else + y = this.properties["y"]; + + var f = this.properties["formula"]; + var value = math.eval(f,{x:x,y:y,T: this.graph.globaltime }); + this.setOutputData(0, value ); + }, + + onDrawBackground: function() + { + var f = this.properties["formula"]; + this.outputs[0].label = f; + }, + + onGetOutputs: function() + { + return [["A-B","number"],["A*B","number"],["A/B","number"]]; + } +}); + + +LiteGraph.registerNodeType("math/trigonometry",{ + title: "Trigonometry", + desc: "Sin Cos Tan", + bgImageUrl: "nodes/imgs/icon-sin.png", + + inputs: [["v","number"]], + outputs: [["sin","number"]], + properties: {amplitude:1.0}, + size:[100,20], + + onExecute: function() + { + var v = this.getInputData(0); + var amp = this.properties["amplitude"]; + for(var i = 0, l = this.outputs.length; i < l; ++i) + { + var output = this.outputs[i]; + switch( output.name ) + { + case "sin": value = Math.sin(v); break; + case "cos": value = Math.cos(v); break; + case "tan": value = Math.tan(v); break; + case "asin": value = Math.asin(v); break; + case "acos": value = Math.acos(v); break; + case "atan": value = Math.atan(v); break; + } + this.setOutputData(i, amp * value ); + } + }, + + onGetOutputs: function() + { + return [["sin","number"],["cos","number"],["tan","number"],["asin","number"],["acos","number"],["atan","number"]]; + } +}); + +//if glMatrix is installed... +if(window.glMatrix) +{ + LiteGraph.registerNodeType("math3d/vec3-to-xyz",{ + title: "Vec3->XYZ", + desc: "vector 3 to components", + inputs: [["vec3","vec3"]], + outputs: [["x","number"],["y","number"],["z","number"]], + + onExecute: function() + { + var v = this.getInputData(0); + if(v == null) return; + + this.setOutputData( 0, v[0] ); + this.setOutputData( 1, v[1] ); + this.setOutputData( 2, v[2] ); + } + }); + + LiteGraph.registerNodeType("math3d/xyz-to-vec3",{ + title: "XYZ->Vec3", + desc: "components to vector3", + inputs: [["x","number"],["y","number"],["z","number"]], + outputs: [["vec3","vec3"]], + + onExecute: function() + { + var x = this.getInputData(0); + if(x == null) x = 0; + var y = this.getInputData(1); + if(y == null) y = 0; + var z = this.getInputData(2); + if(z == null) z = 0; + + this.setOutputData( 0, vec3.fromValues(x,y,z) ); + } + }); + + LiteGraph.registerNodeType("math3d/rotation",{ + title: "Rotation", + desc: "rotation quaternion", + inputs: [["degrees","number"],["axis","vec3"]], + outputs: [["quat","quat"]], + properties: {angle:90.0, axis:[0,1,0]}, + + onExecute: function() + { + var angle = this.getInputData(0); + if(angle == null) angle = this.properties.angle; + var axis = this.getInputData(1); + if(axis == null) axis = this.properties.axis; + + var R = quat.setAxisAngle(quat.create(), axis, angle * 0.0174532925 ); + this.setOutputData( 0, R ); + } + }); + + LiteGraph.registerNodeType("math3d/rotate_vec3",{ + title: "Rot. Vec3", + desc: "rotate a point", + inputs: [["vec3","vec3"],["quat","quat"]], + outputs: [["result","vec3"]], + properties: {vec:[0,0,1]}, + + onExecute: function() + { + var vec = this.getInputData(0); + if(vec == null) vec = this.properties.vec; + var quat = this.getInputData(1); + if(quat == null) + this.setOutputData(vec); + else + this.setOutputData( 0, vec3.transformQuat( vec3.create(), vec, quat ) ); + } + }); + + + LiteGraph.registerNodeType("math3d/mult-quat",{ + title: "Mult. Quat", + desc: "rotate quaternion", + inputs: [["A","quat"],["B","quat"]], + outputs: [["A*B","quat"]], + + onExecute: function() + { + var A = this.getInputData(0); + if(A == null) return; + var B = this.getInputData(1); + if(B == null) return; + + var R = quat.multiply(quat.create(), A,B); + this.setOutputData( 0, R ); + } + }); + +} //glMatrix + + +/* +LiteGraph.registerNodeType("math/sinusoid",{ + title: "Sin", + desc: "Sinusoidal value generator", + bgImageUrl: "nodes/imgs/icon-sin.png", + + inputs: [["f",'number'],["q",'number'],["a",'number'],["t",'number']], + outputs: [["",'number']], + properties: {amplitude:1.0, freq: 1, phase:0}, + + onExecute: function() + { + var f = this.getInputData(0); + if(f != null) + this.properties["freq"] = f; + + var q = this.getInputData(1); + if(q != null) + this.properties["phase"] = q; + + var a = this.getInputData(2); + if(a != null) + this.properties["amplitude"] = a; + + var t = this.graph.getFixedTime(); + if(this.getInputData(3) != null) + t = this.getInputData(3); + // t = t/(2*Math.PI); t = (t-Math.floor(t))*(2*Math.PI); + + var v = this.properties["amplitude"] * Math.sin((2*Math.PI) * t * this.properties["freq"] + this.properties["phase"]); + this.setOutputData(0, v ); + }, + + onDragBackground: function(ctx) + { + this.boxcolor = colorToString(v > 0 ? [0.5,0.8,1,0.5] : [0,0,0,0.5]); + this.setDirtyCanvas(true); + }, +}); +*/ + +/* +LiteGraph.registerNodeType("basic/number",{ + title: "Number", + desc: "Fixed number output", + outputs: [["","number"]], + color: "#66A", + bgcolor: "#336", + widgets: [{name:"value",text:"Value",type:"input",property:"value"}], + + properties: {value:1.0}, + + setValue: function(v) + { + if( typeof(v) == "string") v = parseFloat(v); + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + this.outputs[0].name = this.properties["value"].toString(); + this.setOutputData(0, this.properties["value"]); + }, + + onWidget: function(e,widget) + { + if(widget.name == "value") + this.setValue(widget.value); + } +}); + + +LiteGraph.registerNodeType("basic/string",{ + title: "String", + desc: "Fixed string output", + outputs: [["","string"]], + color: "#66A", + bgcolor: "#336", + widgets: [{name:"value",text:"Value",type:"input"}], + + properties: {value:"..."}, + + setValue: function(v) + { + this.properties["value"] = v; + this.setDirtyCanvas(true); + }, + + onExecute: function() + { + this.outputs[0].name = this.properties["value"].toString(); + this.setOutputData(0, this.properties["value"]); + }, + + onWidget: function(e,widget) + { + if(widget.name == "value") + this.setValue(widget.value); + } +}); + +LiteGraph.registerNodeType("basic/trigger",{ + title: "Trigger", + desc: "Triggers node action", + inputs: [["!0","number"]], + outputs: [["M","node"]], + + properties: {triggerName:null}, + + onExecute: function() + { + if( this.getInputData(0) ) + { + var m = this.getOutputNode(0); + if(m && m.onTrigger) + m.onTrigger(); + if(m && this.properties.triggerName && typeof(m[this.properties.triggerName]) == "function") + m[this.properties.triggerName].call(m); + } + } +}); + + +LiteGraph.registerNodeType("basic/switch",{ + title: "Switch", + desc: "Switch between two inputs", + inputs: [["i","number"],["A",0],["B",0]], + outputs: [["",0]], + + onExecute: function() + { + var f = this.getInputData(0); + if(f) + { + f = Math.round(f)+1; + if(f < 1) f = 1; + if(f > 2) f = 2; + this.setOutputData(0, this.getInputData(f) ); + } + else + this.setOutputData(0, null); + } +}); + +// System vars ********************************* + +LiteGraph.registerNodeType("session/info",{ + title: "Time", + desc: "Seconds since start", + + outputs: [["secs",'number']], + properties: {scale:1.0}, + onExecute: function() + { + this.setOutputData(0, this.session.getTime() * this.properties.scale); + } +}); + +LiteGraph.registerNodeType("system/fixedtime",{ + title: "F.Time", + desc: "Constant time value", + + outputs: [["secs",'number']], + properties: {scale:1.0}, + onExecute: function() + { + this.setOutputData(0, this.session.getFixedTime() * this.properties.scale); + } +}); + + +LiteGraph.registerNodeType("system/elapsedtime",{ + title: "Elapsed", + desc: "Seconds elapsed since last execution", + + outputs: [["secs",'number']], + properties: {scale:1.0}, + onExecute: function() + { + this.setOutputData(0, this.session.getElapsedTime() * this.properties.scale); + } +}); + +LiteGraph.registerNodeType("system/iterations",{ + title: "Iterations", + desc: "Number of iterations (executions)", + + outputs: [["",'number']], + onExecute: function() + { + this.setOutputData(0, this.session.iterations ); + } +}); + +LiteGraph.registerNodeType("system/trace",{ + desc: "Outputs input to browser's console", + + inputs: [["",0]], + onExecute: function() + { + var data = this.getInputData(0); + if(data) + trace("DATA: "+data); + } +}); + +/* +LiteGraph.registerNodeType("math/not",{ + title: "Not", + desc: "0 -> 1 or 0 -> 1", + inputs: [["A",'number']], + outputs: [["!A",'number']], + size: [60,22], + onExecute: function() + { + var v = this.getInputData(0); + if(v != null) + this.setOutputData(0, v ? 0 : 1); + } +}); + + + +// Nodes for network in and out +LiteGraph.registerNodeType("network/general/network_input",{ + title: "N.Input", + desc: "Network Input", + outputs: [["",0]], + color: "#00ff96", + bgcolor: "#004327", + + setValue: function(v) + { + this.value = v; + }, + + onExecute: function() + { + this.setOutputData(0, this.value); + } +}); + +LiteGraph.registerNodeType("network/general/network_output",{ + title: "N.Output", + desc: "Network output", + inputs: [["",0]], + color: "#a8ff00", + bgcolor: "#293e00", + + properties: {value:null}, + + getValue: function() + { + return this.value; + }, + + onExecute: function() + { + this.value = this.getOutputData(0); + } +}); + +LiteGraph.registerNodeType("network/network_trigger",{ + title: "N.Trigger", + desc: "Network input trigger", + outputs: [["",0]], + color: "#ff9000", + bgcolor: "#522e00", + + onTrigger: function(v) + { + this.triggerOutput(0,v); + }, +}); + +LiteGraph.registerNodeType("network/network_callback",{ + title: "N.Callback", + desc: "Network callback output.", + outputs: [["",0]], + color: "#6A6", + bgcolor: "#363", + + setTrigger: function(func) + { + this.callback = func; + }, + + onTrigger: function(v) + { + if(this.callback) + this.callback(v); + }, +}); + +*/ \ No newline at end of file diff --git a/src/nodes/imagenodes.js b/src/nodes/imagenodes.js new file mode 100644 index 000000000..ccf69870a --- /dev/null +++ b/src/nodes/imagenodes.js @@ -0,0 +1,692 @@ +LiteGraph.registerNodeType("color/palette",{ + title: "Palette", + desc: "Generates a color", + + inputs: [["f","number"]], + outputs: [["Color","color"]], + properties: {colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"}, + + onExecute: function() + { + var c = []; + + if (this.properties.colorA != null) + c.push( hex2num( this.properties.colorA ) ); + if (this.properties.colorB != null) + c.push( hex2num( this.properties.colorB ) ); + if (this.properties.colorC != null) + c.push( hex2num( this.properties.colorC ) ); + if (this.properties.colorD != null) + c.push( hex2num( this.properties.colorD ) ); + + var f = this.getInputData(0); + if(f == null) f = 0.5; + if (f > 1.0) + f = 1.0; + else if (f < 0.0) + f = 0.0; + + if(c.length == 0) + return; + + var result = [0,0,0]; + if(f == 0) + result = c[0]; + else if(f == 1) + result = c[ c.length - 1]; + else + { + var pos = (c.length - 1)* f; + var c1 = c[ Math.floor(pos) ]; + var c2 = c[ Math.floor(pos)+1 ]; + var t = pos - Math.floor(pos); + result[0] = c1[0] * (1-t) + c2[0] * (t); + result[1] = c1[1] * (1-t) + c2[1] * (t); + result[2] = c1[2] * (1-t) + c2[2] * (t); + } + + /* + c[0] = 1.0 - Math.abs( Math.sin( 0.1 * reModular.getTime() * Math.PI) ); + c[1] = Math.abs( Math.sin( 0.07 * reModular.getTime() * Math.PI) ); + c[2] = Math.abs( Math.sin( 0.01 * reModular.getTime() * Math.PI) ); + */ + + for(var i in result) + result[i] /= 255; + + this.boxcolor = colorToString(result); + this.setOutputData(0, result); + } + }); + +LiteGraph.registerNodeType("graphics/frame", { + title: "Frame", + desc: "Frame viewerew", + + inputs: [["","image"]], + size: [200,200], + widgets: [{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}], + + onDrawBackground: function(ctx) + { + if(this.frame) + ctx.drawImage(this.frame, 0,0,this.size[0],this.size[1]); + }, + + onExecute: function() + { + this.frame = this.getInputData(0); + this.setDirtyCanvas(true); + }, + + onWidget: function(e,widget) + { + if(widget.name == "resize" && this.frame) + { + var width = this.frame.width; + var height = this.frame.height; + + if(!width && this.frame.videoWidth != null ) + { + width = this.frame.videoWidth; + height = this.frame.videoHeight; + } + + if(width && height) + this.size = [width, height]; + this.setDirtyCanvas(true,true); + } + else if(widget.name == "view") + this.show(); + }, + + show: function() + { + //var str = this.canvas.toDataURL("image/png"); + if(showElement && this.frame) + showElement(this.frame); + } + }); + +LiteGraph.registerNodeType("visualization/graph", { + desc: "Shows a graph of the inputs", + + inputs: [["",0],["",0],["",0],["",0]], + size: [200,200], + properties: {min:-1,max:1,bgColor:"#000"}, + onDrawBackground: function(ctx) + { + /* + ctx.save(); + ctx.beginPath(); + ctx.rect(2,2,this.size[0] - 4, this.size[1]-4); + ctx.clip(); + //*/ + + var colors = ["#FFF","#FAA","#AFA","#AAF"]; + + if(this.properties.bgColor != null && this.properties.bgColor != "") + { + ctx.fillStyle="#000"; + ctx.fillRect(2,2,this.size[0] - 4, this.size[1]-4); + } + + if(this.data) + { + var min = this.properties["min"]; + var max = this.properties["max"]; + + for(var i in this.data) + { + var data = this.data[i]; + if(!data) continue; + + if(this.getInputInfo(i) == null) continue; + + ctx.strokeStyle = colors[i]; + ctx.beginPath(); + + var d = data.length / this.size[0]; + for(var j = 0; j < data.length; j += d) + { + var value = data[ Math.floor(j) ]; + value = (value - min) / (max - min); + if (value > 1.0) value = 1.0; + else if(value < 0) value = 0; + + if(j == 0) + ctx.moveTo( j / d, (this.size[1] - 5) - (this.size[1] - 10) * value); + else + ctx.lineTo( j / d, (this.size[1] - 5) - (this.size[1] - 10) * value); + } + + ctx.stroke(); + } + } + //*/ + + //ctx.restore(); + }, + + onExecute: function() + { + if(!this.data) this.data = []; + + for(var i in this.inputs) + { + var value = this.getInputData(i); + + if(typeof(value) == "number") + { + value = value ? value : 0; + if(!this.data[i]) + this.data[i] = []; + this.data[i].push(value); + + if(this.data[i].length > (this.size[1] - 4)) + this.data[i] = this.data[i].slice(1,this.data[i].length); + } + else + this.data[i] = value; + } + + if(this.data.length) + this.setDirtyCanvas(true); + } + }); + +LiteGraph.registerNodeType("graphics/supergraph", { + title: "Supergraph", + desc: "Shows a nice circular graph", + + inputs: [["x","number"],["y","number"],["c","color"]], + outputs: [["","image"]], + widgets: [{name:"clear_alpha",text:"Clear Alpha",type:"minibutton"},{name:"clear_color",text:"Clear color",type:"minibutton"}], + properties: {size:256,bgcolor:"#000",lineWidth:1}, + bgcolor: "#000", + flags: {allow_fastrender:true}, + onLoad: function() + { + this.createCanvas(); + }, + + createCanvas: function() + { + this.canvas = document.createElement("canvas"); + this.canvas.width = this.properties["size"]; + this.canvas.height = this.properties["size"]; + this.oldpos = null; + this.clearCanvas(true); + }, + + onExecute: function() + { + var x = this.getInputData(0); + var y = this.getInputData(1); + var c = this.getInputData(2); + + if(x == null && y == null) return; + + if(!x) x = 0; + if(!y) y = 0; + x*= 0.95; + y*= 0.95; + + var size = this.properties["size"]; + if(size != this.canvas.width || size != this.canvas.height) + this.createCanvas(); + + if (!this.oldpos) + { + this.oldpos = [ (x * 0.5 + 0.5) * size, (y*0.5 + 0.5) * size]; + return; + } + + var ctx = this.canvas.getContext("2d"); + + if(c == null) + c = "rgba(255,255,255,0.5)"; + else if(typeof(c) == "object") //array + c = colorToString(c); + + //stroke line + ctx.strokeStyle = c; + ctx.beginPath(); + ctx.moveTo( this.oldpos[0], this.oldpos[1] ); + this.oldpos = [ (x * 0.5 + 0.5) * size, (y*0.5 + 0.5) * size]; + ctx.lineTo( this.oldpos[0], this.oldpos[1] ); + ctx.stroke(); + + this.canvas.dirty = true; + this.setOutputData(0,this.canvas); + }, + + clearCanvas: function(alpha) + { + var ctx = this.canvas.getContext("2d"); + if(alpha) + { + ctx.clearRect(0,0,this.canvas.width,this.canvas.height); + this.trace("Clearing alpha"); + } + else + { + ctx.fillStyle = this.properties["bgcolor"]; + ctx.fillRect(0,0,this.canvas.width,this.canvas.height); + } + }, + + onWidget: function(e,widget) + { + if(widget.name == "clear_color") + { + this.clearCanvas(false); + } + else if(widget.name == "clear_alpha") + { + this.clearCanvas(true); + } + }, + + onPropertyChange: function(name,value) + { + if(name == "size") + { + this.properties["size"] = parseInt(value); + this.createCanvas(); + } + else if(name == "bgcolor") + { + this.properties["bgcolor"] = value; + this.createCanvas(); + } + else if(name == "lineWidth") + { + this.properties["lineWidth"] = parseInt(value); + this.canvas.getContext("2d").lineWidth = this.properties["lineWidth"]; + } + else + return false; + + return true; + } + }); + + +LiteGraph.registerNodeType("graphics/imagefade", { + title: "Image fade", + desc: "Fades between images", + + inputs: [["img1","image"],["img2","image"],["fade","number"]], + outputs: [["","image"]], + properties: {fade:0.5,width:512,height:512}, + widgets: [{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}], + + onLoad: function() + { + this.createCanvas(); + var ctx = this.canvas.getContext("2d"); + ctx.fillStyle = "#000"; + ctx.fillRect(0,0,this.properties["width"],this.properties["height"]); + }, + + createCanvas: function() + { + this.canvas = document.createElement("canvas"); + this.canvas.width = this.properties["width"]; + this.canvas.height = this.properties["height"]; + }, + + onExecute: function() + { + var ctx = this.canvas.getContext("2d"); + this.canvas.width = this.canvas.width; + + var A = this.getInputData(0); + if (A != null) + { + ctx.drawImage(A,0,0,this.canvas.width, this.canvas.height); + } + + var fade = this.getInputData(2); + if(fade == null) + fade = this.properties["fade"]; + else + this.properties["fade"] = fade; + + ctx.globalAlpha = fade; + var B = this.getInputData(1); + if (B != null) + { + ctx.drawImage(B,0,0,this.canvas.width, this.canvas.height); + } + ctx.globalAlpha = 1.0; + + this.setOutputData(0,this.canvas); + this.setDirtyCanvas(true); + } + }); + +LiteGraph.registerNodeType("graphics/image", { + title: "Image", + desc: "Image loader", + + inputs: [], + outputs: [["frame","image"]], + properties: {"url":""}, + widgets: [{name:"load",text:"Load",type:"button"}], + + onLoad: function() + { + if(this.properties["url"] != "" && this.img == null) + { + this.loadImage(this.properties["url"]); + } + }, + + onStart: function() + { + }, + + onExecute: function() + { + if(!this.img) + this.boxcolor = "#000"; + if(this.img && this.img.width) + this.setOutputData(0,this.img); + else + this.setOutputData(0,null); + if(this.img.dirty) + this.img.dirty = false; + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + if (name == "url" && value != "") + this.loadImage(value); + + return true; + }, + + loadImage: function(url) + { + if(url == "") + { + this.img = null; + return; + } + + this.trace("loading image..."); + this.img = document.createElement("img"); + this.img.src = "miniproxy.php?url=" + url; + this.boxcolor = "#F95"; + var that = this; + this.img.onload = function() + { + that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); + this.dirty = true; + that.boxcolor = "#9F9"; + that.setDirtyCanvas(true); + } + }, + + onWidget: function(e,widget) + { + if(widget.name == "load") + { + this.loadImage(this.properties["url"]); + } + } + }); + +LiteGraph.registerNodeType("graphics/cropImage", { + title: "Crop", + desc: "Crop Image", + + inputs: [["","image"]], + outputs: [["","image"]], + properties: {width:256,height:256,x:0,y:0,scale:1.0 }, + size: [50,20], + + onLoad: function() + { + this.createCanvas(); + }, + + createCanvas: function() + { + this.canvas = document.createElement("canvas"); + this.canvas.width = this.properties["width"]; + this.canvas.height = this.properties["height"]; + }, + + onExecute: function() + { + var input = this.getInputData(0); + if(!input) return; + + if(input.width) + { + var ctx = this.canvas.getContext("2d"); + + ctx.drawImage(input, -this.properties["x"],-this.properties["y"], input.width * this.properties["scale"], input.height * this.properties["scale"]); + this.setOutputData(0,this.canvas); + } + else + this.setOutputData(0,null); + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + + if(name == "scale") + { + this.properties[name] = parseFloat(value); + if(this.properties[name] == 0) + { + this.trace("Error in scale"); + this.properties[name] = 1.0; + } + } + else + this.properties[name] = parseInt(value); + + this.createCanvas(); + + return true; + } + }); + + +LiteGraph.registerNodeType("graphics/video", { + title: "Video", + desc: "Video playback", + + inputs: [["t","number"]], + outputs: [["frame","image"],["t","number"],["d","number"]], + properties: {"url":""}, + widgets: [{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},{name:"mute",text:"Mute video",type:"button"}], + + onClick: function(e) + { + if(!this.video) return; + + //press play + if( distance( [e.canvasX,e.canvasY], [ this.pos[0] + 55, this.pos[1] + 40] ) < 20 ) + { + this.play(); + return true; + } + }, + + onKeyDown: function(e) + { + if(e.keyCode == 32) + this.playPause(); + }, + + onLoad: function() + { + if(this.properties.url != "") + this.loadVideo(this.properties.url); + }, + + play: function() + { + if(this.video) + { + this.trace("Video playing"); + this.video.play(); + } + }, + + playPause: function() + { + if(this.video) + { + if(this.video.paused) + this.play(); + else + this.pause(); + } + }, + + stop: function() + { + if(this.video) + { + this.trace("Video stopped"); + this.video.pause(); + this.video.currentTime = 0; + } + }, + + pause: function() + { + if(this.video) + { + this.trace("Video paused"); + this.video.pause(); + } + }, + + onExecute: function() + { + if(!this.video) + return; + + var t = this.getInputData(0); + if(t && t >= 0 && t <= 1.0) + { + this.video.currentTime = t * this.video.duration; + this.video.pause(); + } + + this.video.dirty = true; + this.setOutputData(0,this.video); + this.setOutputData(1,this.video.currentTime); + this.setOutputData(2,this.video.duration); + this.setDirtyCanvas(true); + }, + + onStart: function() + { + //this.play(); + }, + + onStop: function() + { + this.pause(); + }, + + loadVideo: function(url) + { + this.video = document.createElement("video"); + if(url) + this.video.src = url; + else + { + this.video.src = "modules/data/video.webm"; + this.properties.url = this.video.src; + } + this.video.type = "type=video/mp4"; + //this.video.loop = true; //not work in FF + this.video.muted = true; + this.video.autoplay = false; + + //if(reModular.status == "running") this.play(); + + var that = this; + this.video.addEventListener("loadedmetadata",function(e) { + //onload + that.trace("Duration: " + that.video.duration + " seconds"); + that.trace("Size: " + that.video.videoWidth + "," + that.video.videoHeight); + that.setDirtyCanvas(true); + this.width = this.videoWidth; + this.height = this.videoHeight; + }); + this.video.addEventListener("progress",function(e) { + //onload + //that.trace("loading..."); + }); + this.video.addEventListener("error",function(e) { + that.trace("Error loading video: " + this.src); + if (this.error) { + switch (this.error.code) { + case this.error.MEDIA_ERR_ABORTED: + that.trace("You stopped the video."); + break; + case this.error.MEDIA_ERR_NETWORK: + that.trace("Network error - please try again later."); + break; + case this.error.MEDIA_ERR_DECODE: + that.trace("Video is broken.."); + break; + case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED: + that.trace("Sorry, your browser can't play this video."); + break; + } + } + }); + + this.video.addEventListener("ended",function(e) { + that.trace("Ended."); + this.play(); + }); + + //$("body").append(this.video); + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + if (name == "url" && value != "") + this.loadVideo(value); + + return true; + }, + onWidget: function(e,widget) + { + if(widget.name == "demo") + { + this.loadVideo(); + } + else if(widget.name == "play") + { + if(this.video) + this.playPause(); + } + if(widget.name == "stop") + { + this.stop(); + } + else if(widget.name == "mute") + { + if(this.video) + this.video.muted = !this.video.muted; + } + + } + }); diff --git a/src/nodes/uinodes.js b/src/nodes/uinodes.js new file mode 100644 index 000000000..cede31931 --- /dev/null +++ b/src/nodes/uinodes.js @@ -0,0 +1,685 @@ +//widgets + + LiteGraph.registerNodeType("widget/knob",{ + title: "Knob", + desc: "Circular controller", + size: [64,84], + outputs: [["",'number']], + properties: {min:0,max:1,value:0.5,wcolor:"#7AF",size:50}, + widgets: [{name:"increase",text:"+",type:"minibutton"},{name:"decrease",text:"-",type:"minibutton"}], + + onInit: function() + { + this.value = (this.properties["value"] - this.properties["min"]) / (this.properties["max"] - this.properties["min"]); + + this.imgbg = this.loadImage("imgs/knob_bg.png"); + this.imgfg = this.loadImage("imgs/knob_fg.png"); + }, + + onDrawImageKnob: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + var d = this.imgbg.width*0.5; + var scale = this.size[0] / this.imgfg.width; + + ctx.save(); + ctx.translate(0,20); + ctx.scale(scale,scale); + ctx.drawImage(this.imgbg,0,0); + //ctx.drawImage(this.imgfg,0,20); + + ctx.translate(d,d); + ctx.rotate(this.value * (Math.PI*2) * 6/8 + Math.PI * 10/8); + //ctx.rotate(this.value * (Math.PI*2)); + ctx.translate(-d,-d); + ctx.drawImage(this.imgfg,0,0); + + ctx.restore(); + + ctx.font = "bold 16px Criticized,Tahoma"; + ctx.fillStyle="rgba(100,100,100,0.8)"; + ctx.textAlign = "center"; + + ctx.fillText(this.name.toUpperCase(), this.size[0] * 0.5, 18 ); + ctx.textAlign = "left"; + }, + + onDrawVectorKnob: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + //circle around + ctx.lineWidth = 1; + ctx.strokeStyle= this.mouseOver ? "#FFF" : "#AAA"; + ctx.fillStyle="#000"; + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5,this.size[1] * 0.5 + 10,this.properties.size * 0.5,0,Math.PI*2,true); + ctx.stroke(); + + if(this.value > 0) + { + ctx.strokeStyle=this.properties["wcolor"]; + ctx.lineWidth = (this.properties.size * 0.2); + ctx.beginPath(); + ctx.arc(this.size[0] * 0.5,this.size[1] * 0.5 + 10,this.properties.size * 0.35,Math.PI * -0.5 + Math.PI*2 * this.value,Math.PI * -0.5,true); + ctx.stroke(); + ctx.lineWidth = 1; + } + + ctx.font = (this.properties.size * 0.2) + "px Arial"; + ctx.fillStyle="#AAA"; + ctx.textAlign = "center"; + + var str = this.properties["value"]; + if(typeof(str) == 'number') + str = str.toFixed(2); + + ctx.fillText(str,this.size[0] * 0.5,this.size[1]*0.65); + ctx.textAlign = "left"; + }, + + onDrawBackground: function(ctx) + { + this.onDrawImageKnob(ctx); + }, + + onExecute: function() + { + this.setOutputData(0, this.properties["value"] ); + + this.boxcolor = colorToString([this.value,this.value,this.value]); + }, + + onMouseDown: function(e) + { + if(!this.imgfg || !this.imgfg.width) return; + + //this.center = [this.imgbg.width * 0.5, this.imgbg.height * 0.5 + 20]; + //this.radius = this.imgbg.width * 0.5; + this.center = [this.size[0] * 0.5, this.size[1] * 0.5 + 20]; + this.radius = this.size[0] * 0.5; + + if(e.canvasY - this.pos[1] < 20 || distance([e.canvasX,e.canvasY],[this.pos[0] + this.center[0],this.pos[1] + this.center[1]]) > this.radius) + return false; + + this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + this.captureInput(true); + + /* + var tmp = this.localToScreenSpace(0,0); + this.trace(tmp[0] + "," + tmp[1]); */ + return true; + }, + + onMouseMove: function(e) + { + if(!this.oldmouse) return; + + var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + + var v = this.value; + v -= (m[1] - this.oldmouse[1]) * 0.01; + if(v > 1.0) v = 1.0; + else if(v < 0.0) v = 0.0; + + this.value = v; + this.properties["value"] = this.properties["min"] + (this.properties["max"] - this.properties["min"]) * this.value; + + this.oldmouse = m; + this.setDirtyCanvas(true); + }, + + onMouseUp: function(e) + { + if(this.oldmouse) + { + this.oldmouse = null; + this.captureInput(false); + } + }, + + onMouseLeave: function(e) + { + //this.oldmouse = null; + }, + + onWidget: function(e,widget) + { + if(widget.name=="increase") + this.onPropertyChange("size", this.properties.size + 10); + else if(widget.name=="decrease") + this.onPropertyChange("size", this.properties.size - 10); + }, + + onPropertyChange: function(name,value) + { + if(name=="wcolor") + this.properties[name] = value; + else if(name=="size") + { + value = parseInt(value); + this.properties[name] = value; + this.size = [value+4,value+24]; + this.setDirtyCanvas(true,true); + } + else if(name=="min" || name=="max" || name=="value") + { + this.properties[name] = parseFloat(value); + } + else + return false; + return true; + } + }); + + LiteGraph.registerNodeType("widget/hslider",{ + title: "H.Slider", + desc: "Linear slider controller", + size: [160,26], + outputs: [["",'number']], + properties: {wcolor:"#7AF",min:0,max:1,value:0.5}, + onInit: function() + { + this.value = 0.5; + this.imgfg = this.loadImage("imgs/slider_fg.png"); + }, + + onDrawVectorial: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + //border + ctx.lineWidth = 1; + ctx.strokeStyle= this.mouseOver ? "#FFF" : "#AAA"; + ctx.fillStyle="#000"; + ctx.beginPath(); + ctx.rect(2,0,this.size[0]-4,20); + ctx.stroke(); + + ctx.fillStyle=this.properties["wcolor"]; + ctx.beginPath(); + ctx.rect(2+(this.size[0]-4-20)*this.value,0, 20,20); + ctx.fill(); + }, + + onDrawImage: function(ctx) + { + if(!this.imgfg || !this.imgfg.width) return; + + //border + ctx.lineWidth = 1; + ctx.fillStyle="#000"; + ctx.fillRect(2,9,this.size[0]-4,2); + + ctx.strokeStyle= "#333"; + ctx.beginPath(); + ctx.moveTo(2,9); + ctx.lineTo(this.size[0]-4,9); + ctx.stroke(); + + ctx.strokeStyle= "#AAA"; + ctx.beginPath(); + ctx.moveTo(2,11); + ctx.lineTo(this.size[0]-4,11); + ctx.stroke(); + + ctx.drawImage(this.imgfg, 2+(this.size[0]-4)*this.value - this.imgfg.width*0.5,-this.imgfg.height*0.5 + 10); + }, + + onDrawBackground: function(ctx) + { + this.onDrawImage(ctx); + }, + + onExecute: function() + { + this.properties["value"] = this.properties["min"] + (this.properties["max"] - this.properties["min"]) * this.value; + this.setOutputData(0, this.properties["value"] ); + this.boxcolor = colorToString([this.value,this.value,this.value]); + }, + + onMouseDown: function(e) + { + if(e.canvasY - this.pos[1] < 0) + return false; + + this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + this.captureInput(true); + return true; + }, + + onMouseMove: function(e) + { + if(!this.oldmouse) return; + + var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + + var v = this.value; + var delta = (m[0] - this.oldmouse[0]); + v += delta / this.size[0]; + if(v > 1.0) v = 1.0; + else if(v < 0.0) v = 0.0; + + this.value = v; + + this.oldmouse = m; + this.setDirtyCanvas(true); + }, + + onMouseUp: function(e) + { + this.oldmouse = null; + this.captureInput(false); + }, + + onMouseLeave: function(e) + { + //this.oldmouse = null; + }, + + onPropertyChange: function(name,value) + { + if(name=="wcolor") + this.properties[name] = value; + else + return false; + return true; + } + }); + + LiteGraph.registerNodeType("widget/kpad",{ + title: "KPad", + desc: "bidimensional slider", + size: [200,200], + outputs: [["x",'number'],["y",'number']], + properties:{x:0,y:0,borderColor:"#333",bgcolorTop:"#444",bgcolorBottom:"#000",shadowSize:1, borderRadius:2}, + + createGradient: function(ctx) + { + this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]); + this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]); + this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]); + }, + + onDrawBackground: function(ctx) + { + if(!this.lineargradient) + this.createGradient(ctx); + + ctx.lineWidth = 1; + ctx.strokeStyle = this.properties["borderColor"]; + //ctx.fillStyle = "#ebebeb"; + ctx.fillStyle = this.lineargradient; + + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["shadowSize"]; + ctx.roundRect(0,0,this.size[0],this.size[1],this.properties["shadowSize"]); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = "#A00"; + ctx.fillRect(this.size[0] * this.properties["x"] - 5, this.size[1] * this.properties["y"] - 5,10,10); + }, + + onWidget: function(e,widget) + { + if(widget.name == "update") + { + this.lineargradient = null; + this.setDirtyCanvas(true); + } + }, + + onExecute: function() + { + this.setOutputData(0, this.properties["x"] ); + this.setOutputData(1, this.properties["y"] ); + }, + + onMouseDown: function(e) + { + if(e.canvasY - this.pos[1] < 0) + return false; + + this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + this.captureInput(true); + return true; + }, + + onMouseMove: function(e) + { + if(!this.oldmouse) return; + + var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ]; + + this.properties.x = m[0] / this.size[0]; + this.properties.y = m[1] / this.size[1]; + + if(this.properties.x > 1.0) this.properties.x = 1.0; + else if(this.properties.x < 0.0) this.properties.x = 0.0; + + if(this.properties.y > 1.0) this.properties.y = 1.0; + else if(this.properties.y < 0.0) this.properties.y = 0.0; + + this.oldmouse = m; + this.setDirtyCanvas(true); + }, + + onMouseUp: function(e) + { + if(this.oldmouse) + { + this.oldmouse = null; + this.captureInput(false); + } + }, + + onMouseLeave: function(e) + { + //this.oldmouse = null; + } + }); + + + LiteGraph.registerNodeType("widget/button", { + title: "Button", + desc: "A send command button", + + widgets: [{name:"test",text:"Test Button",type:"button"}], + size: [100,40], + properties:{text:"clickme",command:"",color:"#7AF",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",fontsize:"16"}, + outputs:[["M","module"]], + + createGradient: function(ctx) + { + this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]); + this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]); + this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]); + }, + + drawVectorShape: function(ctx) + { + ctx.fillStyle = this.mouseOver ? this.properties["color"] : "#AAA"; + + if(this.clicking) + ctx.fillStyle = "#FFF"; + + ctx.strokeStyle = "#AAA"; + ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4); + ctx.stroke(); + + if(this.mouseOver) + ctx.fill(); + + //ctx.fillRect(5,20,this.size[0] - 10,this.size[1] - 30); + + ctx.fillStyle = this.mouseOver ? "#000" : "#AAA"; + ctx.font = "bold " + this.properties["fontsize"] + "px Criticized,Tahoma"; + ctx.textAlign = "center"; + ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.5*parseInt(this.properties["fontsize"])); + ctx.textAlign = "left"; + }, + + drawBevelShape: function(ctx) + { + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["shadowSize"]; + + if(!this.lineargradient) + this.createGradient(ctx); + + ctx.fillStyle = this.mouseOver ? this.properties["color"] : this.lineargradient; + if(this.clicking) + ctx.fillStyle = "#444"; + + ctx.strokeStyle = "#FFF"; + ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4); + ctx.fill(); + ctx.shadowColor = "rgba(0,0,0,0)"; + ctx.stroke(); + + ctx.fillStyle = this.mouseOver ? "#000" : "#444"; + ctx.font = "bold " + this.properties["fontsize"] + "px Century Gothic"; + ctx.textAlign = "center"; + ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.40*parseInt(this.properties["fontsize"])); + ctx.textAlign = "left"; + }, + + onDrawBackground: function(ctx) + { + this.drawBevelShape(ctx); + }, + + clickButton: function() + { + var module = this.getOutputModule(0); + if(this.properties["command"] && this.properties["command"] != "") + { + if (! module.executeAction(this.properties["command"]) ) + this.trace("Error executing action in other module"); + } + else if(module && module.onTrigger) + { + module.onTrigger(); + } + }, + + onMouseDown: function(e) + { + if(e.canvasY - this.pos[1] < 2) + return false; + this.clickButton(); + this.clicking = true; + return true; + }, + + onMouseUp: function(e) + { + this.clicking = false; + }, + + onExecute: function() + { + }, + + onWidget: function(e,widget) + { + if(widget.name == "test") + { + this.clickButton(); + } + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + return true; + } + }); + + LiteGraph.registerNodeType("widget/progress",{ + title: "Progress", + desc: "Shows data in linear progress", + size: [160,26], + inputs: [["",'number']], + properties: {min:0,max:1,value:0,wcolor:"#AAF"}, + onExecute: function() + { + var v = this.getInputData(0); + if( v != undefined ) + this.properties["value"] = v; + }, + onDrawBackground: function(ctx) + { + //border + ctx.lineWidth = 1; + ctx.fillStyle=this.properties.wcolor; + var v = (this.properties.value - this.properties.min) / (this.properties.max - this.properties.min); + v = Math.min(1,v); + v = Math.max(0,v); + ctx.fillRect(2,2,(this.size[0]-4)*v,this.size[1]-4); + } + }); + + LiteGraph.registerNodeType("widget/text", { + title: "Text", + desc: "Shows the input value", + + widgets: [{name:"resize",text:"Resize box",type:"button"},{name:"led_text",text:"LED",type:"minibutton"},{name:"normal_text",text:"Normal",type:"minibutton"}], + inputs: [["",0]], + properties:{value:"...",font:"Arial", fontsize:18, color:"#AAA", align:"left", glowSize:0, decimals:1}, + + onDrawBackground: function(ctx) + { + //ctx.fillStyle="#000"; + //ctx.fillRect(0,0,100,60); + ctx.fillStyle = this.properties["color"]; + var v = this.properties["value"]; + + if(this.properties["glowSize"]) + { + ctx.shadowColor = this.properties["color"]; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["glowSize"]; + } + else + ctx.shadowColor = "transparent"; + + var fontsize = this.properties["fontsize"]; + + ctx.textAlign = this.properties["align"]; + ctx.font = fontsize.toString() + "px " + this.properties["font"]; + this.str = typeof(v) == 'number' ? v.toFixed(this.properties["decimals"]) : v; + + if( typeof(this.str) == 'string') + { + var lines = this.str.split("\\n"); + for(var i in lines) + ctx.fillText(lines[i],this.properties["align"] == "left" ? 15 : this.size[0] - 15, fontsize * -0.15 + fontsize * (parseInt(i)+1) ); + } + + ctx.shadowColor = "transparent"; + this.last_ctx = ctx; + ctx.textAlign = "left"; + }, + + onExecute: function() + { + var v = this.getInputData(0); + if(v != null) + this.properties["value"] = v; + else + this.properties["value"] = ""; + this.setDirtyCanvas(true); + }, + + resize: function() + { + if(!this.last_ctx) return; + + var lines = this.str.split("\\n"); + this.last_ctx.font = this.properties["fontsize"] + "px " + this.properties["font"]; + var max = 0; + for(var i in lines) + { + var w = this.last_ctx.measureText(lines[i]).width; + if(max < w) max = w; + } + this.size[0] = max + 20; + this.size[1] = 4 + lines.length * this.properties["fontsize"]; + + this.setDirtyCanvas(true); + }, + + onWidget: function(e,widget) + { + if(widget.name == "resize") + this.resize(); + else if (widget.name == "led_text") + { + this.properties["font"] = "Digital"; + this.properties["glowSize"] = 4; + this.setDirtyCanvas(true); + } + else if (widget.name == "normal_text") + { + this.properties["font"] = "Arial"; + this.setDirtyCanvas(true); + } + }, + + onPropertyChange: function(name,value) + { + this.properties[name] = value; + this.str = typeof(value) == 'number' ? value.toFixed(3) : value; + //this.resize(); + return true; + } + }); + + LiteGraph.registerNodeType("widget/panel", { + title: "Panel", + desc: "Non interactive panel", + + widgets: [{name:"update",text:"Update",type:"button"}], + size: [200,100], + properties:{borderColor:"#ffffff",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",shadowSize:2, borderRadius:3}, + + createGradient: function(ctx) + { + if(this.properties["bgcolorTop"] == "" || this.properties["bgcolorBottom"] == "") + { + this.lineargradient = 0; + return; + } + + this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]); + this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]); + this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]); + }, + + onDrawBackground: function(ctx) + { + if(this.lineargradient == null) + this.createGradient(ctx); + + if(!this.lineargradient) + return; + + ctx.lineWidth = 1; + ctx.strokeStyle = this.properties["borderColor"]; + //ctx.fillStyle = "#ebebeb"; + ctx.fillStyle = this.lineargradient; + + if(this.properties["shadowSize"]) + { + ctx.shadowColor = "#000"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = this.properties["shadowSize"]; + } + else + ctx.shadowColor = "transparent"; + + ctx.roundRect(0,0,this.size[0]-1,this.size[1]-1,this.properties["shadowSize"]); + ctx.fill(); + ctx.shadowColor = "transparent"; + ctx.stroke(); + }, + + onWidget: function(e,widget) + { + if(widget.name == "update") + { + this.lineargradient = null; + this.setDirtyCanvas(true); + } + } + }); diff --git a/style.css b/style.css new file mode 100644 index 000000000..e11d9efd9 --- /dev/null +++ b/style.css @@ -0,0 +1,13 @@ +body { background-color: #DDD; } +h1 { + margin: 0; +} + +#wrap { + margin: auto; + width: 800px; + min-height: 400px; + padding: 1em; + background-color: white; + box-shadow: 0 0 2px #333; +} \ No newline at end of file diff --git a/utils/build.sh b/utils/build.sh new file mode 100755 index 000000000..47adfa463 --- /dev/null +++ b/utils/build.sh @@ -0,0 +1,2 @@ +python builder.py deploy_files.txt -o ../build/litegraph.min.js -o2 ../build/litegraph.js +chmod a+rw ../build/* diff --git a/utils/builder.py b/utils/builder.py new file mode 100644 index 000000000..abc7402ef --- /dev/null +++ b/utils/builder.py @@ -0,0 +1,91 @@ +#!/usr/bin/python + +import re, os, sys, time, tempfile, shutil +import argparse +from datetime import date + +compiler_path = "/usr/local/bin/compiler.jar" +root_path = "./" + +#arguments +parser = argparse.ArgumentParser(description='Deploy a JS app creating a minifyed version checking for errors.') +parser.add_argument('input_file', + help='the path to the file with a list of all the JS files') + +parser.add_argument('-o', dest='output_file', action='store', + default=None, + help='Specify an output for the minifyed version') + +parser.add_argument('-o2', dest='fullcode_output_file', action='store', + default=None, + help='Specify an output for the full code version') + +#parser.add_argument('output_file', +# help='the filename where to save the min version') + +parser.add_argument('--all', dest='all_files', action='store_const', + const=True, default=False, + help='Compile all JS files individually first.') +parser.add_argument('--nomin', dest='no_minify', action='store_const', + const=True, default=False, + help='Do not minify the JS file') + +args = parser.parse_args() + +check_files_individually = args.all_files +output_file = args.output_file +fullcode_output_file = args.fullcode_output_file +no_minify = args.no_minify + +root_path = "./" + os.path.dirname(args.input_file) + "/" +sys.stderr.write(" + Root folder: " + root_path + "\n") + +def packJSCode(files): + f1, fullcode_path = tempfile.mkstemp() #create temporary file + data = "//packer version\n" + + for filename in files: + filename = filename.strip() + if len(filename) == 0 or filename[0] == "#": + continue + sys.stderr.write(" + Processing... " + filename + " " ) + src_file = root_path + filename + if os.path.exists(src_file) == False: + sys.stderr.write('\033[91m'+"JS File not found"+'\033[0m\n') + continue + data += open(src_file).read() + "\n" + if check_files_individually: + os.system("java -jar %s --js %s --js_output_file %s" % (compiler_path, src_file, "temp.js") ) + sys.stderr.write('\033[92m' + "OK\n" + '\033[0m') + + os.write(f1,data) + os.close(f1) + + #print " + Compiling all..." + #os.system("java -jar %s --js %s --js_output_file %s" % (compiler_path, fullcode_path, output_file) ) + #print " * Done" + return fullcode_path + +def compileAndMinify(input_path, output_path): + print " + Compiling and minifying..." + if output_path != None: + os.system("java -jar %s --js %s --js_output_file %s" % (compiler_path, input_path, output_path) ) + sys.stderr.write(" * Stored in " + output_path + "\n"); + else: + os.system("java -jar %s --js %s" % (compiler_path, input_path) ) + +#load project info +if os.path.exists(args.input_file) == False: + sys.stderr.write("\033[91m Error, input file not found: " + args.input_file + "\033[0m\n") + exit(0) + +js_files = open(args.input_file).read().splitlines() + +fullcode_path = packJSCode(js_files) + +if fullcode_output_file != None: + shutil.copy2(fullcode_path, fullcode_output_file) + sys.stderr.write(" * Fullcode Stored in " + fullcode_output_file + "\n"); + +if not no_minify: + compileAndMinify( fullcode_path, output_file ) diff --git a/utils/deploy_files.txt b/utils/deploy_files.txt new file mode 100644 index 000000000..dc1bf6c43 --- /dev/null +++ b/utils/deploy_files.txt @@ -0,0 +1,4 @@ +../src/litegraph.js +../src/nodes/basicnodes.js +../src/nodes/uinodes.js +../src/nodes/imagenodes.js \ No newline at end of file diff --git a/utils/generate_doc.sh b/utils/generate_doc.sh new file mode 100755 index 000000000..0a7347e87 --- /dev/null +++ b/utils/generate_doc.sh @@ -0,0 +1 @@ +yuidoc ../src -o ../doc diff --git a/utils/pack.sh b/utils/pack.sh new file mode 100755 index 000000000..2542803c9 --- /dev/null +++ b/utils/pack.sh @@ -0,0 +1,2 @@ +python builder.py deploy_files.txt -o ../build/litescene.min.js -o2 ../build/litescene.js --nomin +chmod a+rw ../build/* diff --git a/utils/temp.js b/utils/temp.js new file mode 100644 index 000000000..833ccaada --- /dev/null +++ b/utils/temp.js @@ -0,0 +1,24 @@ +LiteGraph.registerNodeType("color/palette",{title:"Palette",desc:"Generates a color",inputs:[["f","number"]],outputs:[["Color","color"]],properties:{colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"},onExecute:function(){var a=[];null!=this.properties.colorA&&a.push(hex2num(this.properties.colorA));null!=this.properties.colorB&&a.push(hex2num(this.properties.colorB));null!=this.properties.colorC&&a.push(hex2num(this.properties.colorC));null!=this.properties.colorD&&a.push(hex2num(this.properties.colorD)); +var b=this.getInputData(0);null==b&&(b=0.5);1b&&(b=0);if(0!=a.length){var c=[0,0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,c)}}}); +LiteGraph.registerNodeType("graphics/frame",{title:"Frame",desc:"Frame viewerew",inputs:[["","image"]],size:[200,200],widgets:[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}],onDrawBackground:function(a){this.frame&&a.drawImage(this.frame,0,0,this.size[0],this.size[1])},onExecute:function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)},onWidget:function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height;c||null== +this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()},show:function(){showElement&&this.frame&&showElement(this.frame)}}); +LiteGraph.registerNodeType("visualization/graph",{desc:"Shows a graph of the inputs",inputs:[["",0],["",0],["",0],["",0]],size:[200,200],properties:{min:-1,max:1,bgColor:"#000"},onDrawBackground:function(a){var b=["#FFF","#FAA","#AFA","#AAF"];null!=this.properties.bgColor&&""!=this.properties.bgColor&&(a.fillStyle="#000",a.fillRect(2,2,this.size[0]-4,this.size[1]-4));if(this.data){var c=this.properties.min,d=this.properties.max,e;for(e in this.data){var h=this.data[e];if(h&&null!=this.getInputInfo(e)){a.strokeStyle= +b[e];a.beginPath();for(var k=h.length/this.size[0],g=0;gf&&(f=0);0==g?a.moveTo(g/k,this.size[1]-5-(this.size[1]-10)*f):a.lineTo(g/k,this.size[1]-5-(this.size[1]-10)*f)}a.stroke()}}}},onExecute:function(){this.data||(this.data=[]);for(var a in this.inputs){var b=this.getInputData(a);"number"==typeof b?(b=b?b:0,this.data[a]||(this.data[a]=[]),this.data[a].push(b),this.data[a].length>this.size[1]-4&&(this.data[a]=this.data[a].slice(1,this.data[a].length))): +this.data[a]=b}this.data.length&&this.setDirtyCanvas(!0)}}); +LiteGraph.registerNodeType("graphics/supergraph",{title:"Supergraph",desc:"Shows a nice circular graph",inputs:[["x","number"],["y","number"],["c","color"]],outputs:[["","image"]],widgets:[{name:"clear_alpha",text:"Clear Alpha",type:"minibutton"},{name:"clear_color",text:"Clear color",type:"minibutton"}],properties:{size:256,bgcolor:"#000",lineWidth:1},bgcolor:"#000",flags:{allow_fastrender:!0},onLoad:function(){this.createCanvas()},createCanvas:function(){this.canvas=document.createElement("canvas"); +this.canvas.width=this.properties.size;this.canvas.height=this.properties.size;this.oldpos=null;this.clearCanvas(!0)},onExecute:function(){var a=this.getInputData(0),b=this.getInputData(1),c=this.getInputData(2);if(null!=a||null!=b){a||(a=0);b||(b=0);var a=0.95*a,b=0.95*b,d=this.properties.size;d==this.canvas.width&&d==this.canvas.height||this.createCanvas();if(this.oldpos){var e=this.canvas.getContext("2d");null==c?c="rgba(255,255,255,0.5)":"object"==typeof c&&(c=colorToString(c));e.strokeStyle= +c;e.beginPath();e.moveTo(this.oldpos[0],this.oldpos[1]);this.oldpos=[(0.5*a+0.5)*d,(0.5*b+0.5)*d];e.lineTo(this.oldpos[0],this.oldpos[1]);e.stroke();this.canvas.dirty=!0;this.setOutputData(0,this.canvas)}else this.oldpos=[(0.5*a+0.5)*d,(0.5*b+0.5)*d]}},clearCanvas:function(a){var b=this.canvas.getContext("2d");a?(b.clearRect(0,0,this.canvas.width,this.canvas.height),this.trace("Clearing alpha")):(b.fillStyle=this.properties.bgcolor,b.fillRect(0,0,this.canvas.width,this.canvas.height))},onWidget:function(a, +b){"clear_color"==b.name?this.clearCanvas(!1):"clear_alpha"==b.name&&this.clearCanvas(!0)},onPropertyChange:function(a,b){if("size"==a)this.properties.size=parseInt(b),this.createCanvas();else if("bgcolor"==a)this.properties.bgcolor=b,this.createCanvas();else if("lineWidth"==a)this.properties.lineWidth=parseInt(b),this.canvas.getContext("2d").lineWidth=this.properties.lineWidth;else return!1;return!0}}); +LiteGraph.registerNodeType("graphics/imagefade",{title:"Image fade",desc:"Fades between images",inputs:[["img1","image"],["img2","image"],["fade","number"]],outputs:[["","image"]],properties:{fade:0.5,width:512,height:512},widgets:[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}],onLoad:function(){this.createCanvas();var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)},createCanvas:function(){this.canvas= +document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height},onExecute:function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null==b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0, +this.canvas);this.setDirtyCanvas(!0)}}); +LiteGraph.registerNodeType("graphics/image",{title:"Image",desc:"Image loader",inputs:[],outputs:[["frame","image"]],properties:{url:""},widgets:[{name:"load",text:"Load",type:"button"}],onLoad:function(){""!=this.properties.url&&null==this.img&&this.loadImage(this.properties.url)},onStart:function(){},onExecute:function(){this.img||(this.boxcolor="#000");this.img&&this.img.width?this.setOutputData(0,this.img):this.setOutputData(0,null);this.img.dirty&&(this.img.dirty=!1)},onPropertyChange:function(a, +b){this.properties[a]=b;"url"==a&&""!=b&&this.loadImage(b);return!0},loadImage:function(a){if(""==a)this.img=null;else{this.trace("loading image...");this.img=document.createElement("img");this.img.src="miniproxy.php?url="+a;this.boxcolor="#F95";var b=this;this.img.onload=function(){b.trace("Image loaded, size: "+b.img.width+"x"+b.img.height);this.dirty=!0;b.boxcolor="#9F9";b.setDirtyCanvas(!0)}}},onWidget:function(a,b){"load"==b.name&&this.loadImage(this.properties.url)}}); +LiteGraph.registerNodeType("graphics/cropImage",{title:"Crop",desc:"Crop Image",inputs:[["","image"]],outputs:[["","image"]],properties:{width:256,height:256,x:0,y:0,scale:1},size:[50,20],onLoad:function(){this.createCanvas()},createCanvas:function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height},onExecute:function(){var a=this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y, +a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)):this.setOutputData(0,null))},onPropertyChange:function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0}}); +LiteGraph.registerNodeType("graphics/video",{title:"Video",desc:"Video playback",inputs:[["t","number"]],outputs:[["frame","image"],["t","number"],["d","number"]],properties:{url:""},widgets:[{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},{name:"mute",text:"Mute video",type:"button"}],onClick:function(a){if(this.video&&20>distance([a.canvasX,a.canvasY],[this.pos[0]+55,this.pos[1]+40]))return this.play(),!0},onKeyDown:function(a){32== +a.keyCode&&this.playPause()},onLoad:function(){""!=this.properties.url&&this.loadVideo(this.properties.url)},play:function(){this.video&&(this.trace("Video playing"),this.video.play())},playPause:function(){this.video&&(this.video.paused?this.play():this.pause())},stop:function(){this.video&&(this.trace("Video stopped"),this.video.pause(),this.video.currentTime=0)},pause:function(){this.video&&(this.trace("Video paused"),this.video.pause())},onExecute:function(){if(this.video){var a=this.getInputData(0); +a&&0<=a&&1>=a&&(this.video.currentTime=a*this.video.duration,this.video.pause());this.video.dirty=!0;this.setOutputData(0,this.video);this.setOutputData(1,this.video.currentTime);this.setOutputData(2,this.video.duration);this.setDirtyCanvas(!0)}},onStart:function(){},onStop:function(){this.pause()},loadVideo:function(a){this.video=document.createElement("video");a?this.video.src=a:(this.video.src="modules/data/video.webm",this.properties.url=this.video.src);this.video.type="type=video/mp4";this.video.muted= +!0;this.video.autoplay=!1;var b=this;this.video.addEventListener("loadedmetadata",function(a){b.trace("Duration: "+b.video.duration+" seconds");b.trace("Size: "+b.video.videoWidth+","+b.video.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight});this.video.addEventListener("progress",function(a){});this.video.addEventListener("error",function(a){b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video."); +break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later.");break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}});this.video.addEventListener("ended",function(a){b.trace("Ended.");this.play()})},onPropertyChange:function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadVideo(b);return!0},onWidget:function(a,b){"demo"==b.name?this.loadVideo():"play"== +b.name&&this.video&&this.playPause();"stop"==b.name?this.stop():"mute"==b.name&&this.video&&(this.video.muted=!this.video.muted)}});