mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-03 12:10:11 +00:00
demo improved, editor included, graph canvas detached
This commit is contained in:
tamat
File diff suppressed because it is too large
Load Diff
175
build/litegraph.min.js
vendored
175
build/litegraph.min.js
vendored
@@ -1,28 +1,29 @@
|
||||
var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,registered_node_types:{},graphs:[],registerNodeType:function(a,b){b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");
|
||||
var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,registered_node_types:{},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]?LiteGraph.cloneObject(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")},cloneObject:function(a){return JSON.parse(JSON.stringify(a))}};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.start=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||1)}};
|
||||
document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},
|
||||
cloneObject:function(a,b){var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]=c[d];return b}};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;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={};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.globals={};this.graph={};this.debug=!0;this.change();this.sendActionToCanvas("clear")};
|
||||
LGraph.prototype.attachCanvas=function(a){if(a.constructor!=LGraphCanvas)throw"attachCanvas expects a LGraphCanvas instance";a.graph&&a.graph!=this&&a.graph.detachCanvas(a);a.graph=this;this.list_of_graphcanvas||(this.list_of_graphcanvas=[]);this.list_of_graphcanvas.push(a)};LGraph.prototype.detachCanvas=function(a){var b=this.list_of_graphcanvas.indexOf(a);-1!=b&&(a.graph=null,this.list_of_graphcanvas.splice(b,1))};
|
||||
LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=window.performance.now();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1)}};
|
||||
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<a;c++)if(this.sendEventToAllNodes("onExecute"),this.fixedtime+=this.fixedtime_lapse,this.onExecuteStep)this.onExecuteStep();if(this.onAfterExecute)this.onAfterExecute();this.errors_in_execution=!1}catch(d){this.errors_in_execution=!0;if(LiteGraph.throw_errors)throw d;LiteGraph.debug&&console.log("Error during execution: "+d);this.stop()}a=(new Date).getTime()-b;0==a&&(a=
|
||||
1);this.elapsed_time=0.001*a;this.globaltime+=0.001*a;this.iteration+=1};LGraph.prototype.updateExecutionOrder=function(){this.nodes_in_order=this.computeExecutionOrder()};
|
||||
LGraph.prototype.computeExecutionOrder=function(){var a=[],b=[],c={},d={},e={},f;for(f in this.nodes){var g=this.nodes[f];c[g.id]=g;var h=0;if(g.inputs)for(var k=0,l=g.inputs.length;k<l;k++)g.inputs[k]&&null!=g.inputs[k].link&&(h+=1);0==h?b.push(g):e[g.id]=h}for(;0!=b.length;)if(g=b.shift(),a.push(g),delete c[g.id],g.outputs)for(f=0;f<g.outputs.length;f++)if(h=g.outputs[f],null!=h&&null!=h.links&&0!=h.links.length)for(k=0;k<h.links.length;k++)if(l=h.links[k],!d[l[0]]){var p=this.getNodeById(l[3]);
|
||||
null==p?d[l[0]]=!0:(d[l[0]]=!0,e[p.id]-=1,0==e[p.id]&&b.push(p))}for(f in c)a.push(c[f]);a.length!=this.nodes.length&&LiteGraph.debug&&console.log("something went wrong, nodes missing");for(f in a)a[f].order=f;return a};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(a,b){var c=this.nodes_in_order?this.nodes_in_order:this.nodes,d;for(d in c)if(c[d][a])c[d][a](b)};
|
||||
LGraph.prototype.add=function(a){if(a&&(-1==a.id||null==this.nodes_by_id[a.id])){if(this.nodes.length>=LiteGraph.MAX_NUMBER_OF_NODES)throw"LiteGraph: max number of nodes in a graph reached";if(null==a.id||-1==a.id)a.id=this.last_node_id++;a.graph=this;this.nodes.push(a);this.nodes_by_id[a.id]=a;if(a.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]&&!a.ignore_remove){if(a.inputs)for(var b=0;b<a.inputs.length;b++){var c=a.inputs[b];null!=c.link&&a.disconnectInput(b)}if(a.outputs)for(b=0;b<a.outputs.length;b++)c=a.outputs[b],null!=c.links&&c.links.length&&a.disconnectOutput(b);a.id=-1;if(a.onDelete)a.onDelete();this.canvas&&(this.canvas.selected_nodes[a.id]&&delete this.canvas.selected_nodes[a.id],this.canvas.node_dragged==a&&(this.canvas.node_dragged=null));b=this.nodes.indexOf(a);
|
||||
-1!=b&&this.nodes.splice(b,1);delete this.nodes_by_id[a.id];this.canvas&&this.canvas.setDirty(!0,!0);this.change();this.updateExecutionOrder()}};LGraph.prototype.getNodeById=function(a){return null==a?null:this.nodes_by_id[a]};LGraph.prototype.findNodesByType=function(a){var b=[],c;for(c in this.nodes)this.nodes[c].type==a&&b.push(this.nodes[c]);return b};LGraph.prototype.findNodesByName=function(a){var b=[],c;for(c in this.nodes)this.nodes[c].name==a&&b.push(this.nodes[c]);return b};
|
||||
LGraph.prototype.getNodeOnPos=function(a,b,c){c=c||this.nodes;for(var d=c.length-1;0<=d;d--){var e=c[d];if(e.isPointInsideNode(a,b))return e}return null};LGraph.prototype.setInputData=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setValue(b)};LGraph.prototype.getOutputData=function(a){return this.findNodesByName(a).length?m[0].getValue():null};LGraph.prototype.triggerInput=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].onTrigger(b)};
|
||||
LGraph.prototype.setCallback=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setTrigger(b)};LGraph.prototype.onConnectionChange=function(){this.updateExecutionOrder()};LGraph.prototype.isLive=function(){return this.canvas?this.canvas.live_mode:!1};LGraph.prototype.change=function(){LiteGraph.debug&&console.log("Graph changed");if(this.on_change)this.on_change(this)};
|
||||
LGraph.prototype.serialize=function(){var a=[],b;for(b in this.nodes)a.push(this.nodes[b].objectivize());return JSON.stringify({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:a})};
|
||||
LGraph.prototype.unserialize=function(a,b){b||this.clear();var c=JSON.parse(a),d=c.nodes,e;for(e in c)this[e]=c[e];c=!1;this.nodes=[];for(e in d){var f=d[e],g=LiteGraph.createNode(f.type,f.name);g?(g.copyFromObject(f),this.add(g)):(LiteGraph.debug&&console.log("Node not found: "+f.type),c=!0)}this.canvas&&this.canvas.draw(!0,!0);return c};LGraph.prototype.onNodeTrace=function(a,b,c){if(this.canvas)this.canvas.onNodeTrace(a,b,c)};
|
||||
function LGraphNode(a){this.name=a||"Unnamed";this.size=[LiteGraph.NODE_WIDTH,60];this.graph=null;this.pos=[10,10];this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.data=null;this.flags={}}
|
||||
LGraphNode.prototype.objectivize=function(){var a={id:this.id,name:this.name,type:this.type,pos:this.pos,size:this.size,data:this.data,properties:LiteGraph.cloneObject(this.properties),flags:LiteGraph.cloneObject(this.flags),inputs:this.inputs,outputs:this.outputs};a.type||(a.type=this.constructor.type);this.color&&(a.color=this.color);this.bgcolor&&(a.bgcolor=this.bgcolor);this.boxcolor&&(a.boxcolor=this.boxcolor);this.shape&&(a.shape=this.shape);return a};
|
||||
LGraphNode.prototype.reducedObjectivize=function(){var a=this.objectivize(),b=LiteGraph.getNodeType(a.type);b.name==a.name&&delete a.name;b.size&&compareObjects(a.size,b.size)&&delete a.size;b.properties&&compareObjects(a.properties,b.properties)&&delete a.properties;return a};LGraphNode.prototype.serialize=function(){if(this.onSerialize)this.onSerialize();return JSON.stringify(this.reducedObjectivize())};
|
||||
LGraphNode.prototype.setOutputData=function(a,b){if(this.outputs&&-1<a&&a<this.outputs.length&&this.outputs[a]&&null!=this.outputs[a].links)for(var c=0;c<this.outputs[a].links.length;c++)this.graph.links[this.outputs[a].links[c][0]]=b};LGraphNode.prototype.getInputData=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link?this.graph.links[this.inputs[a].link[0]]:null:null};
|
||||
LGraph.prototype.runStep=function(a){a=a||1;var b=window.performance.now();this.globaltime=0.001*(b-this.starttime);try{for(var c=0;c<a;c++)if(this.sendEventToAllNodes("onExecute"),this.fixedtime+=this.fixedtime_lapse,this.onExecuteStep)this.onExecuteStep();if(this.onAfterExecute)this.onAfterExecute();this.errors_in_execution=!1}catch(d){this.errors_in_execution=!0;if(LiteGraph.throw_errors)throw d;LiteGraph.debug&&console.log("Error during execution: "+d);this.stop()}a=window.performance.now()-b;
|
||||
0==a&&(a=1);this.elapsed_time=0.001*a;this.globaltime+=0.001*a;this.iteration+=1};LGraph.prototype.updateExecutionOrder=function(){this._nodes_in_order=this.computeExecutionOrder()};
|
||||
LGraph.prototype.computeExecutionOrder=function(){var a=[],b=[],c={},d={},e={},f;for(f in this._nodes){var g=this._nodes[f];c[g.id]=g;var h=0;if(g.inputs)for(var k=0,l=g.inputs.length;k<l;k++)g.inputs[k]&&null!=g.inputs[k].link&&(h+=1);0==h?b.push(g):e[g.id]=h}for(;0!=b.length;)if(g=b.shift(),a.push(g),delete c[g.id],g.outputs)for(f=0;f<g.outputs.length;f++)if(h=g.outputs[f],null!=h&&null!=h.links&&0!=h.links.length)for(k=0;k<h.links.length;k++)if(l=h.links[k],!d[l[0]]){var n=this.getNodeById(l[3]);
|
||||
null==n?d[l[0]]=!0:(d[l[0]]=!0,e[n.id]-=1,0==e[n.id]&&b.push(n))}for(f in c)a.push(c[f]);a.length!=this._nodes.length&&LiteGraph.debug&&console.log("something went wrong, nodes missing");for(f in a)a[f].order=f;return a};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(a,b){var c=this._nodes_in_order?this._nodes_in_order:this._nodes,d;for(d in c)if(c[d][a])c[d][a](b)};LGraph.prototype.sendActionToCanvas=function(a,b){if(this.list_of_graphcanvas)for(var c in this.list_of_graphcanvas){var d=this.list_of_graphcanvas[c];d[a]&&d[a].apply(d,b)}};
|
||||
LGraph.prototype.add=function(a){if(a&&(-1==a.id||null==this._nodes_by_id[a.id])){if(this._nodes.length>=LiteGraph.MAX_NUMBER_OF_NODES)throw"LiteGraph: max number of nodes in a graph reached";if(null==a.id||-1==a.id)a.id=this.last_node_id++;a.graph=this;this._nodes.push(a);this._nodes_by_id[a.id]=a;if(a.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]&&!a.ignore_remove){if(a.inputs)for(var b=0;b<a.inputs.length;b++){var c=a.inputs[b];null!=c.link&&a.disconnectInput(b)}if(a.outputs)for(b=0;b<a.outputs.length;b++)c=a.outputs[b],null!=c.links&&c.links.length&&a.disconnectOutput(b);a.id=-1;if(a.onDelete)a.onDelete();this.canvas&&(this.canvas.selected_nodes[a.id]&&delete this.canvas.selected_nodes[a.id],this.canvas.node_dragged==a&&(this.canvas.node_dragged=null));b=this._nodes.indexOf(a);
|
||||
-1!=b&&this._nodes.splice(b,1);delete this._nodes_by_id[a.id];this.canvas&&this.canvas.setDirty(!0,!0);this.change();this.updateExecutionOrder()}};LGraph.prototype.getNodeById=function(a){return null==a?null:this._nodes_by_id[a]};LGraph.prototype.findNodesByType=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].type==a&&b.push(this._nodes[c]);return b};LGraph.prototype.findNodesByName=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].name==a&&b.push(this._nodes[c]);return b};
|
||||
LGraph.prototype.getNodeOnPos=function(a,b,c){c=c||this._nodes;for(var d=c.length-1;0<=d;d--){var e=c[d];if(e.isPointInsideNode(a,b))return e}return null};LGraph.prototype.setInputData=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setValue(b)};LGraph.prototype.getOutputData=function(a){return this.findNodesByName(a).length?m[0].getValue():null};LGraph.prototype.triggerInput=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].onTrigger(b)};
|
||||
LGraph.prototype.setCallback=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setTrigger(b)};LGraph.prototype.onConnectionChange=function(){this.updateExecutionOrder()};LGraph.prototype.isLive=function(){return this.canvas?this.canvas.live_mode:!1};LGraph.prototype.change=function(){LiteGraph.debug&&console.log("Graph changed");this.sendActionToCanvas("setDirty",[!0,!0]);if(this.on_change)this.on_change(this)};
|
||||
LGraph.prototype.serialize=function(){var a=[],b;for(b in this._nodes)a.push(this._nodes[b].serialize());return{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:a}};
|
||||
LGraph.prototype.configure=function(a,b){b||this.clear();var c=a.nodes,d;for(d in a)this[d]=a[d];var e=!1;this._nodes=[];for(d in c){var f=c[d],g=LiteGraph.createNode(f.type,f.name);g?(g.configure(f),this.add(g)):(LiteGraph.debug&&console.log("Node not found: "+f.type),e=!0)}this.canvas&&this.canvas.draw(!0,!0);return e};LGraph.prototype.onNodeTrace=function(a,b,c){if(this.canvas)this.canvas.onNodeTrace(a,b,c)};
|
||||
function LGraphNode(a){this.name=a||"Unnamed";this.size=[LiteGraph.NODE_WIDTH,60];this.graph=null;this.pos=[10,10];this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.data=null;this.flags={}}LGraphNode.prototype.configure=function(a){for(var b in a)"console"!=b&&null!=a[b]&&(this[b]=a[b].concat?a[b].concat():"object"==typeof a[b]?LiteGraph.cloneObject(a[b],this[b]||{}):a[b])};
|
||||
LGraphNode.prototype.copyFromObject=function(a,b){for(var c in a)(!b||"outputs"!=c&&"inputs"!=c)&&"console"!=c&&null!=a[c]&&(this[c]=a[c].concat?a[c].concat():"object"==typeof a[c]?LiteGraph.cloneObject(a[c]):a[c])};
|
||||
LGraphNode.prototype.serialize=function(){var a={id:this.id,name:this.name,type:this.type,pos:this.pos,size:this.size,data:this.data,properties:LiteGraph.cloneObject(this.properties),flags:LiteGraph.cloneObject(this.flags),inputs:this.inputs,outputs:this.outputs};a.type||(a.type=this.constructor.type);this.color&&(a.color=this.color);this.bgcolor&&(a.bgcolor=this.bgcolor);this.boxcolor&&(a.boxcolor=this.boxcolor);this.shape&&(a.shape=this.shape);if(this.onSerialize)this.onSerialize(a);return a};
|
||||
LGraphNode.prototype.toString=function(){return JSON.stringify(this.serialize())};LGraphNode.prototype.setOutputData=function(a,b){if(this.outputs&&-1<a&&a<this.outputs.length&&this.outputs[a]&&null!=this.outputs[a].links)for(var c=0;c<this.outputs[a].links.length;c++)this.graph.links[this.outputs[a].links[c][0]]=b};LGraphNode.prototype.getInputData=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link?this.graph.links[this.inputs[a].link[0]]:null:null};
|
||||
LGraphNode.prototype.isInputConnected=function(a){return this.inputs?a<this.inputs.length&&null!=this.inputs[a].link:null};LGraphNode.prototype.getInputInfo=function(a){return this.inputs?a<this.inputs.length?this.inputs[a]:null:null};LGraphNode.prototype.getOutputInfo=function(a){return this.outputs?a<this.outputs.length?this.outputs[a]:null:null};LGraphNode.prototype.isOutputConnected=function(a){return this.outputs?a<this.outputs.length&&this.outputs[a].links&&this.outputs[a].links.length:null};
|
||||
LGraphNode.prototype.getOutputNodes=function(a){if(!this.outputs||0==this.outputs.length)return null;if(a<this.outputs.length){a=this.outputs[a];for(var b=[],c=0;c<a.length;c++)b.push(this.graph.getNodeById(a.links[c][3]));return b}return null};LGraphNode.prototype.triggerOutput=function(a,b){var c=this.getOutputNode(a);if(c&&c.onTrigger)c.onTrigger(b)};
|
||||
LGraphNode.prototype.addOutput=function(a,b,c){a={name:a,type:b,links:null};if(c)for(var d in c)a[d]=c[d];this.outputs||(this.outputs=[]);this.outputs.push(a);this.size=this.computeSize()};LGraphNode.prototype.removeOutput=function(a){this.disconnectOutput(a);this.outputs.splice(a,1);this.size=this.computeSize()};LGraphNode.prototype.addInput=function(a,b,c){a={name:a,type:b,link:null};if(c)for(var d in c)a[d]=c[d];this.inputs||(this.inputs=[]);this.inputs.push(a);this.size=this.computeSize()};
|
||||
@@ -38,87 +39,85 @@ LGraphNode.prototype.disconnectInput=function(a){if(a.constructor===String){if(a
|
||||
0,d=a.links.length;c<d;c++)if(b=a.links[c],b[3]==this.id){a.links.splice(c,1);break}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
|
||||
LGraphNode.prototype.getConnectionPos=function(a,b){return this.flags.collapsed?a?[this.pos[0],this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:[this.pos[0]+LiteGraph.NODE_COLLAPSED_WIDTH,this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:a&&-1==b?[this.pos[0]+10,this.pos[1]+10]:a&&this.inputs.length>b&&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.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)};
|
||||
LGraphNode.prototype.copyFromObject=function(a,b){for(var c in a)(!b||"outputs"!=c&&"inputs"!=c)&&"console"!=c&&null!=a[c]&&(this[c]=a[c].concat?a[c].concat():"object"==typeof a[c]?LiteGraph.cloneObject(a[c]):a[c])};
|
||||
LGraphNode.prototype.clone=function(){var a=LiteGraph.createNode(this.type);a.size=this.size.concat();if(this.inputs)for(var b=0,c=this.inputs.length;b<c;++b)-1==a.findInputSlot(this.inputs[b].name)&&a.addInput(this.inputs[b].name,this.inputs[b].type);if(this.outputs)for(b=0,c=this.outputs.length;b<c;++b)-1==a.findOutputSlot(this.outputs[b].name)&&a.addOutput(this.outputs[b].name,this.outputs[b].type);return a};
|
||||
LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.canvas&&(a&&(this.graph.canvas.dirty_canvas=!0),b&&(this.graph.canvas.dirty_bgcanvas=!0))};
|
||||
LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b};
|
||||
LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.sendActionToCanvas("setDirty",[a,b])};LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b};
|
||||
LGraphNode.prototype.executeAction=function(a){if(""==a)return!1;if(-1!=a.indexOf(";")||-1!=a.indexOf("}"))return this.trace("Error: Action contains unsafe characters"),!1;var b=a.split("(")[0];if("function"!=typeof this[b])return this.trace("Error: Action not found on node: "+b),!1;try{b=eval,eval=null,(new Function("with(this) { "+a+"}")).call(this),eval=b}catch(c){return this.trace("Error executing action {"+a+"} :"+c),!1}return!0};
|
||||
LGraphNode.prototype.captureInput=function(a){this.graph&&this.graph.canvas&&(a||this.graph.canvas.node_capturing_input==this)&&(this.graph.canvas.node_capturing_input=a?this:null,this.graph.debug&&console.log(this.name+": Capturing input "+(a?"ON":"OFF")))};LGraphNode.prototype.collapse=function(){this.flags.collapsed=this.flags.collapsed?!1:!0;this.setDirtyCanvas(!0,!0)};LGraphNode.prototype.pin=function(){this.flags.pinned=this.flags.pinned?!1:!0};
|
||||
LGraphNode.prototype.localToScreen=function(a,b){return[(a+this.pos[0])*this.graph.config.canvas_scale+this.graph.config.canvas_offset[0],(b+this.pos[1])*this.graph.config.canvas_scale+this.graph.config.canvas_offset[1]]};
|
||||
function LGraphCanvas(a,b){if(void 0===b)throw"No graph assigned";"undefined"!=typeof window&&(window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}());if(this.graph=b)b.canvas=this;this.setCanvas(a);this.clear();this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};LGraphCanvas.link_width=2;
|
||||
LGraphCanvas.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.selected_nodes={};this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highquality_render=!0;this.pause_rendering=!1;this.dirty_bgcanvas=this.dirty_canvas=this.render_shadows=!0;this.dirty_area=null;this.render_only_selected=!0;this.live_mode=!1;this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.node_in_panel=null;this.last_mouse=[0,0];this.last_mouseclick=
|
||||
0;if(this.onClear)this.onClear()};LGraphCanvas.prototype.setGraph=function(a){if(this.graph!=a){this.clear();this.graph&&(this.graph.canvas=null);if(this.graph=a)this.graph.canvas=this;this.setDirty(!0,!0)}};LGraphCanvas.prototype.resize=function(a,b){if(this.canvas.width!=a||this.canvas.height!=b)this.canvas.width=a,this.canvas.height=b,this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height,this.setDirty(!0,!0)};
|
||||
LGraphNode.prototype.captureInput=function(a){if(this.graph&&this.graph.list_of_graphcanvas){var b=this.graph.list_of_graphcanvas,c;for(c in b){var d=b[c];if(a||d.node_capturing_input==this)d.node_capturing_input=a?this:null,this.graph.debug&&console.log(this.name+": Capturing input "+(a?"ON":"OFF"))}}};LGraphNode.prototype.collapse=function(){this.flags.collapsed=this.flags.collapsed?!1:!0;this.setDirtyCanvas(!0,!0)};
|
||||
LGraphNode.prototype.pin=function(a){this.flags.pinned=void 0===a?!this.flags.pinned:a};LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";b&&b.attachCanvas(this);this.setCanvas(a);this.clear();this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};
|
||||
LGraphCanvas.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.scale=1;this.offset=[0,0];this.selected_nodes={};this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highquality_render=!0;this.editor_alpha=1;this.pause_rendering=!1;this.dirty_bgcanvas=this.dirty_canvas=this.render_shadows=!0;this.dirty_area=null;this.render_only_selected=!0;this.live_mode=!1;this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.node_in_panel=
|
||||
null;this.last_mouse=[0,0];this.last_mouseclick=0;this.title_text_font="bold 14px Arial";this.inner_text_font="normal 12px Arial";this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.connections_width=4;if(this.onClear)this.onClear()};LGraphCanvas.prototype.setGraph=function(a){this.graph!=a&&(this.clear(),!a&&this.graph?this.graph.detachCanvas(this):(a.attachCanvas(this),this.setDirty(!0,!0)))};
|
||||
LGraphCanvas.prototype.setCanvas=function(a){var b=this;"string"==typeof a&&(a=document.getElementById(a));if(null==a)throw"Error creating LiteGraph canvas: Canvas not found";if(a!=this.canvas){this.canvas=a;this.canvas.className+=" lgraphcanvas";this.canvas.data=this;this.bgcanvas=null;this.bgcanvas||(this.bgcanvas=document.createElement("canvas"),this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height);if(null==this.canvas.getContext)throw"This browser doesnt support Canvas";
|
||||
this.ctx=this.canvas.getContext("2d");this.bgctx=this.bgcanvas.getContext("2d");this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);this.canvas.addEventListener("mousedown",this.processMouseDown.bind(this));this.canvas.addEventListener("mousemove",this._mousemove_callback);this.canvas.addEventListener("contextmenu",function(a){a.preventDefault();return!1});this.canvas.addEventListener("mousewheel",this.processMouseWheel.bind(this),!1);this.canvas.addEventListener("DOMMouseScroll",
|
||||
this.processMouseWheel.bind(this),!1);this.canvas.addEventListener("touchstart",this.touchHandler,!0);this.canvas.addEventListener("touchmove",this.touchHandler,!0);this.canvas.addEventListener("touchend",this.touchHandler,!0);this.canvas.addEventListener("touchcancel",this.touchHandler,!0);this.canvas.addEventListener("keydown",function(a){b.processKeyDown(a)});this.canvas.addEventListener("keyup",function(a){b.processKeyUp(a)})}};
|
||||
LGraphCanvas.prototype.setDirty=function(a,b){a&&(this.dirty_canvas=!0);b&&(this.dirty_bgcanvas=!0)};LGraphCanvas.prototype.startRendering=function(){function a(){this.pause_rendering||this.draw();this.is_rendering&&window.requestAnimFrame(a.bind(this))}this.is_rendering||(this.is_rendering=!0,a.call(this))};LGraphCanvas.prototype.stopRendering=function(){this.is_rendering=!1};
|
||||
LGraphCanvas.prototype.processMouseDown=function(a){if(this.graph){this.adjustMouseEvent(a);this.canvas.removeEventListener("mousemove",this._mousemove_callback);document.addEventListener("mousemove",this._mousemove_callback);document.addEventListener("mouseup",this._mouseup_callback);var b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes);if(1==a.which){if(!a.shiftKey){var c=[],d;for(d in this.selected_nodes)this.selected_nodes[d]!=b&&c.push(this.selected_nodes[d]);for(d in c)this.processNodeDeselected(c[d])}c=
|
||||
!1;if(b){this.live_mode||b.flags.pinned||this.bringToFront(b);var e=!1;if(!this.connecting_node&&!b.flags.collapsed&&!this.live_mode){if(b.outputs){d=0;for(var f=b.outputs.length;d<f;++d){var g=b.outputs[d],h=b.getConnectionPos(!1,d);if(isInsideRectangle(a.canvasX,a.canvasY,h[0]-10,h[1]-5,20,10)){this.connecting_node=b;this.connecting_output=g;this.connecting_pos=b.getConnectionPos(!1,d);this.connecting_slot=d;e=!0;break}}}if(b.inputs)for(d=0,f=b.inputs.length;d<f;++d)g=b.inputs[d],h=b.getConnectionPos(!0,
|
||||
d),isInsideRectangle(a.canvasX,a.canvasY,h[0]-10,h[1]-5,20,10)&&g.link&&(b.disconnectInput(d),e=this.dirty_bgcanvas=!0);!e&&isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)&&(this.resizing_node=b,this.canvas.style.cursor="se-resize",e=!0)}if(!e){d=!1;if(300>(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]<c*LiteGraph.NODE_SLOT_HEIGHT+4&&(this.resizing_node.size[1]=c*LiteGraph.NODE_SLOT_HEIGHT+4),this.resizing_node.size[0]<LiteGraph.NODE_MIN_WIDTH&&(this.resizing_node.size[0]=LiteGraph.NODE_MIN_WIDTH),this.canvas.style.cursor="se-resize",this.dirty_bgcanvas=this.dirty_canvas=!0)}a.preventDefault();a.stopPropagation();return!1}};
|
||||
LGraphCanvas.prototype.processMouseUp=function(a){if(this.graph){document.removeEventListener("mousemove",this._mousemove_callback,!0);this.canvas.addEventListener("mousemove",this._mousemove_callback,!0);document.removeEventListener("mouseup",this._mouseup_callback,!0);this.adjustMouseEvent(a);if(1==a.which)if(this.connecting_node){this.dirty_bgcanvas=this.dirty_canvas=!0;var b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes);if(b)if("node"==this.connecting_output.type)this.connecting_node.connect(this.connecting_slot,
|
||||
LGraphCanvas.prototype.setDirty=function(a,b){a&&(this.dirty_canvas=!0);b&&(this.dirty_bgcanvas=!0)};LGraphCanvas.prototype.getCanvasWindow=function(){var a=this.canvas.ownerDocument;return a.defaultView||a.parentWindow};LGraphCanvas.prototype.startRendering=function(){function a(){this.pause_rendering||this.draw();var b=this.getCanvasWindow();this.is_rendering&&b.requestAnimationFrame(a.bind(this))}this.is_rendering||(this.is_rendering=!0,a.call(this))};
|
||||
LGraphCanvas.prototype.stopRendering=function(){this.is_rendering=!1};
|
||||
LGraphCanvas.prototype.processMouseDown=function(a){if(this.graph){this.adjustMouseEvent(a);var b=this.getCanvasWindow();this.canvas.removeEventListener("mousemove",this._mousemove_callback);b.document.addEventListener("mousemove",this._mousemove_callback);b.document.addEventListener("mouseup",this._mouseup_callback);var c=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes);if(1==a.which){if(!a.shiftKey){var d=[],e;for(e in this.selected_nodes)this.selected_nodes[e]!=c&&d.push(this.selected_nodes[e]);
|
||||
for(e in d)this.processNodeDeselected(d[e])}d=!1;if(c){this.live_mode||c.flags.pinned||this.bringToFront(c);var f=!1;if(!this.connecting_node&&!c.flags.collapsed&&!this.live_mode){if(c.outputs){e=0;for(var g=c.outputs.length;e<g;++e){var h=c.outputs[e],k=c.getConnectionPos(!1,e);if(isInsideRectangle(a.canvasX,a.canvasY,k[0]-10,k[1]-5,20,10)){this.connecting_node=c;this.connecting_output=h;this.connecting_pos=c.getConnectionPos(!1,e);this.connecting_slot=e;f=!0;break}}}if(c.inputs)for(e=0,g=c.inputs.length;e<
|
||||
g;++e)h=c.inputs[e],k=c.getConnectionPos(!0,e),isInsideRectangle(a.canvasX,a.canvasY,k[0]-10,k[1]-5,20,10)&&h.link&&(c.disconnectInput(e),f=this.dirty_bgcanvas=!0);!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0]+c.size[0]-5,c.pos[1]+c.size[1]-5,5,5)&&(this.resizing_node=c,this.canvas.style.cursor="se-resize",f=!0)}if(!f){e=!1;if(300>window.performance.now()-this.last_mouseclick&&this.selected_nodes[c.id]){if(c.onDblClick)c.onDblClick(a);this.processNodeDblClicked(c);e=!0}c.onMouseDown&&c.onMouseDown(a)?
|
||||
e=!0:this.live_mode&&(e=d=!0);e||(this.allow_dragnodes&&(this.node_dragged=c),this.selected_nodes[c.id]||this.processNodeSelected(c,a));this.dirty_canvas=!0}}else d=!0;d&&this.allow_dragcanvas&&(this.dragging_canvas=!0)}else 2!=a.which&&3==a.which&&this.processContextualMenu(c,a);this.last_mouse[0]=a.localX;this.last_mouse[1]=a.localY;this.last_mouseclick=window.performance.now();this.canvas_mouse=[a.canvasX,a.canvasY];this.graph.change();(!b.document.activeElement||"input"!=b.document.activeElement.nodeName.toLowerCase()&&
|
||||
"textarea"!=b.document.activeElement.nodeName.toLowerCase())&&a.preventDefault();a.stopPropagation();return!1}};
|
||||
LGraphCanvas.prototype.processMouseMove=function(a){if(this.graph){this.adjustMouseEvent(a);var b=[a.localX,a.localY],c=[b[0]-this.last_mouse[0],b[1]-this.last_mouse[1]];this.last_mouse=b;this.canvas_mouse=[a.canvasX,a.canvasY];if(this.dragging_canvas)this.offset[0]+=c[0]/this.scale,this.offset[1]+=c[1]/this.scale,this.dirty_bgcanvas=this.dirty_canvas=!0;else{this.connecting_node&&(this.dirty_canvas=!0);var b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes),d;for(d in this.graph._nodes)if(this.graph._nodes[d].mouseOver&&
|
||||
b!=this.graph._nodes[d]){this.graph._nodes[d].mouseOver=!1;if(this.node_over&&this.node_over.onMouseLeave)this.node_over.onMouseLeave(a);this.node_over=null;this.dirty_canvas=!0}if(b){if(!b.mouseOver&&(b.mouseOver=!0,this.node_over=b,this.dirty_canvas=!0,b.onMouseEnter))b.onMouseEnter(a);if(b.onMouseMove)b.onMouseMove(a);if(this.connecting_node){var e=this._highlight_input||[0,0],f=this.isOverNodeInput(b,a.canvasX,a.canvasY,e);if(-1!=f&&b.inputs[f]){if(f=b.inputs[f].type,f==this.connecting_output.type||
|
||||
"*"==f||"*"==this.connecting_output.type)this._highlight_input=e}else this._highlight_input=null}isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)?this.canvas.style.cursor="se-resize":this.canvas.style.cursor=null}else this.canvas.style.cursor=null;if(this.node_capturing_input&&this.node_capturing_input!=b&&this.node_capturing_input.onMouseMove)this.node_capturing_input.onMouseMove(a);if(this.node_dragged&&!this.live_mode){for(d in this.selected_nodes)b=this.selected_nodes[d],
|
||||
b.pos[0]+=c[0]/this.scale,b.pos[1]+=c[1]/this.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.scale,this.resizing_node.size[1]+=c[1]/this.scale,c=Math.max(this.resizing_node.inputs?this.resizing_node.inputs.length:0,this.resizing_node.outputs?this.resizing_node.outputs.length:0),this.resizing_node.size[1]<c*LiteGraph.NODE_SLOT_HEIGHT+4&&(this.resizing_node.size[1]=
|
||||
c*LiteGraph.NODE_SLOT_HEIGHT+4),this.resizing_node.size[0]<LiteGraph.NODE_MIN_WIDTH&&(this.resizing_node.size[0]=LiteGraph.NODE_MIN_WIDTH),this.canvas.style.cursor="se-resize",this.dirty_bgcanvas=this.dirty_canvas=!0)}a.preventDefault();a.stopPropagation();return!1}};
|
||||
LGraphCanvas.prototype.processMouseUp=function(a){if(this.graph){var b=this.getCanvasWindow().document;b.removeEventListener("mousemove",this._mousemove_callback,!0);this.canvas.addEventListener("mousemove",this._mousemove_callback,!0);b.removeEventListener("mouseup",this._mouseup_callback,!0);this.adjustMouseEvent(a);if(1==a.which)if(this.connecting_node){this.dirty_bgcanvas=this.dirty_canvas=!0;if(b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes))if("node"==this.connecting_output.type)this.connecting_node.connect(this.connecting_slot,
|
||||
b,-1);else{var c=this.isOverNodeInput(b,a.canvasX,a.canvasY);-1!=c&&this.connecting_node.connect(this.connecting_slot,b,c)}this.connecting_node=this.connecting_pos=this.connecting_output=null;this.connecting_slot=-1}else if(this.resizing_node)this.dirty_bgcanvas=this.dirty_canvas=!0,this.resizing_node=null;else if(this.node_dragged)this.dirty_bgcanvas=this.dirty_canvas=!0,this.graph.config.align_to_grid&&this.node_dragged.alignToGrid(),this.node_dragged=null;else{this.dirty_canvas=!0;this.dragging_canvas=
|
||||
!1;if(this.node_over&&this.node_over.onMouseUp)this.node_over.onMouseUp(a);if(this.node_capturing_input&&this.node_capturing_input.onMouseUp)this.node_capturing_input.onMouseUp(a)}else 2==a.which?(this.dirty_canvas=!0,this.dragging_canvas=!1):3==a.which&&(this.dirty_canvas=!0,this.dragging_canvas=!1);this.graph.change();a.stopPropagation();a.preventDefault();return!1}};
|
||||
LGraphCanvas.prototype.isOverNodeInput=function(a,b,c,d){if(a.inputs)for(var e=0,f=a.inputs.length;e<f;++e){var g=a.getConnectionPos(!0,e);if(isInsideRectangle(b,c,g[0]-10,g[1]-5,20,10))return d&&(d[0]=g[0],d[1]=g[1]),e}return-1};
|
||||
LGraphCanvas.prototype.processKeyDown=function(a){if(this.graph){var b=!1;65==a.keyCode&&a.ctrlKey&&(this.selectAllNodes(),b=!0);46!=a.keyCode&&8!=a.keyCode||this.deleteSelectedNodes();if(this.selected_nodes)for(var c in this.selected_nodes)if(this.selected_nodes[c].onKeyDown)this.selected_nodes[c].onKeyDown(a);this.graph.change();if(b)return a.preventDefault(),!1}};
|
||||
LGraphCanvas.prototype.processKeyUp=function(a){if(this.graph){if(this.selected_nodes)for(var b in this.selected_nodes)if(this.selected_nodes[b].onKeyUp)this.selected_nodes[b].onKeyUp(a);this.graph.change()}};
|
||||
LGraphCanvas.prototype.processMouseWheel=function(a){if(this.graph&&this.allow_dragcanvas){var b=null!=a.wheelDeltaY?a.wheelDeltaY:-60*a.detail;this.adjustMouseEvent(a);var c=this.graph.config.canvas_scale;0<b?c*=1.1:0>b&&(c*=1/1.1);this.setZoom(c,[a.localX,a.localY]);this.graph.change();a.preventDefault();return!1}};
|
||||
LGraphCanvas.prototype.processKeyUp=function(a){if(this.graph){if(this.selected_nodes)for(var b in this.selected_nodes)if(this.selected_nodes[b].onKeyUp)this.selected_nodes[b].onKeyUp(a);this.graph.change()}};LGraphCanvas.prototype.processMouseWheel=function(a){if(this.graph&&this.allow_dragcanvas){var b=null!=a.wheelDeltaY?a.wheelDeltaY:-60*a.detail;this.adjustMouseEvent(a);var c=this.scale;0<b?c*=1.1:0>b&&(c*=1/1.1);this.setZoom(c,[a.localX,a.localY]);this.graph.change();a.preventDefault();return!1}};
|
||||
LGraphCanvas.prototype.processNodeSelected=function(a,b){a.selected=!0;if(a.onSelected)a.onSelected();b&&b.shiftKey||(this.selected_nodes={});this.selected_nodes[a.id]=a;this.dirty_canvas=!0;if(this.onNodeSelected)this.onNodeSelected(a)};LGraphCanvas.prototype.processNodeDeselected=function(a){a.selected=!1;if(a.onDeselected)a.onDeselected();delete this.selected_nodes[a.id];if(this.onNodeDeselected)this.onNodeDeselected();this.dirty_canvas=!0};
|
||||
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;4<this.graph.config.canvas_scale?this.graph.config.canvas_scale=4:0.1>this.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.selectAllNodes=function(){for(var a in this.graph._nodes){var b=this.graph._nodes[a];if(!b.selected&&b.onSelected)b.onSelected();b.selected=!0;this.selected_nodes[this.graph._nodes[a].id]=b}this.setDirty(!0)};LGraphCanvas.prototype.deselectAllNodes=function(){for(var a in this.selected_nodes){var b=this.selected_nodes;if(b.onDeselected)b.onDeselected();b.selected=!1}this.selected_nodes={};this.setDirty(!0)};
|
||||
LGraphCanvas.prototype.deleteSelectedNodes=function(){for(var a in this.selected_nodes)this.graph.remove(this.selected_nodes[a]);this.selected_nodes={};this.setDirty(!0)};LGraphCanvas.prototype.centerOnNode=function(a){this.offset[0]=-a.pos[0]-0.5*a.size[0]+0.5*this.canvas.width/this.scale;this.offset[1]=-a.pos[1]-0.5*a.size[1]+0.5*this.canvas.height/this.scale;this.setDirty(!0,!0)};
|
||||
LGraphCanvas.prototype.adjustMouseEvent=function(a){var b=this.canvas.getBoundingClientRect();a.localX=a.pageX-b.left;a.localY=a.pageY-b.top;a.canvasX=a.localX/this.scale-this.offset[0];a.canvasY=a.localY/this.scale-this.offset[1]};
|
||||
LGraphCanvas.prototype.setZoom=function(a,b){b||(b=[0.5*this.canvas.width,0.5*this.canvas.height]);var c=this.convertOffsetToCanvas(b);this.scale=a;4<this.scale?this.scale=4:0.1>this.scale&&(this.scale=0.1);var d=this.convertOffsetToCanvas(b),c=[d[0]-c[0],d[1]-c[1]];this.offset[0]+=c[0];this.offset[1]+=c[1];this.dirty_bgcanvas=this.dirty_canvas=!0};LGraphCanvas.prototype.convertOffsetToCanvas=function(a){return[a[0]/this.scale-this.offset[0],a[1]/this.scale-this.offset[1]]};
|
||||
LGraphCanvas.prototype.convertCanvasToOffset=function(a){return[(a[0]+this.offset[0])*this.scale,(a[1]+this.offset[1])*this.scale]};LGraphCanvas.prototype.convertEventToCanvas=function(a){var b=this.canvas.getClientRects()[0];return this.convertOffsetToCanvas([a.pageX-b.left,a.pageY-b.top])};LGraphCanvas.prototype.bringToFront=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.push(a))};
|
||||
LGraphCanvas.prototype.sendToBack=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.unshift(a))};LGraphCanvas.prototype.computeVisibleNodes=function(){var a=[],b;for(b in this.graph._nodes){var c=this.graph._nodes[b];(!this.live_mode||c.onDrawBackground||c.onDrawForeground)&&overlapBounding(this.visible_area,c.getBounding())&&a.push(c)}return a};
|
||||
LGraphCanvas.prototype.draw=function(a,b){var c=window.performance.now();this.render_time=0.001*(c-this.last_draw_time);this.last_draw_time=c;if(this.graph){var c=[-this.offset[0],-this.offset[1]],d=[c[0]+this.canvas.width/this.scale,c[1]+this.canvas.height/this.scale];this.visible_area=new Float32Array([c[0],c[1],d[0],d[1]])}(this.dirty_bgcanvas||b)&&this.drawBgcanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=this.render_time?1/this.render_time:0;this.frame+=1};
|
||||
LGraphCanvas.prototype.drawFrontCanvas=function(){var a=this.ctx,b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());a.clearRect(0,0,b.width,b.height);a.drawImage(this.bgcanvas,0,0);this.show_info&&(a.font="10px Arial",a.fillStyle="#888",this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("F: "+
|
||||
this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.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]);this.drawNode(d,a);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<this.graph.config.canvas_scale){b.globalAlpha=1-0.5/this.graph.config.canvas_scale;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=
|
||||
!1;if(!this._bg_img||this._bg_img.name!=this.background_image){this._bg_img=new Image;this._bg_img.name=this.background_image;this._bg_img.src=this.background_image;var c=this;this._bg_img.onload=function(){c.draw(!0,!0)}}var d=null;this._bg_img!=this._pattern_img&&0<this._bg_img.width?(d=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=d):d=this._pattern;d&&(b.fillStyle=d,b.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2]-this.visible_area[0],
|
||||
this.visible_area[3]-this.visible_area[1]),b.fillStyle="transparent");b.globalAlpha=1}b.strokeStyle="#235";b.strokeRect(0,0,a.width,a.height);this.live_mode||this.drawConnections(b);b.restore()}this.dirty_bgcanvas=!1;this.dirty_canvas=!0};
|
||||
LGraphCanvas.prototype.drawNode=function(a,b){var c=a.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(a.flags.skip_title_render||a.graph.isLive())d=!1;a.mouseOver&&(d=!0);a.selected||(this.render_shadows?(b.shadowColor="#111",b.shadowOffsetX=2,b.shadowOffsetY=2,b.shadowBlur=4):b.shadowColor="transparent");if(this.live_mode){if(!a.flags.collapsed){b.shadowColor="transparent";if(a.onDrawBackground)a.onDrawBackground(b);if(a.onDrawForeground)a.onDrawForeground(b)}}else{var e=a.shape||"box",f=new Float32Array(a.size);
|
||||
a.flags.collapsed&&f.set([LiteGraph.NODE_COLLAPSED_WIDTH,0]);a.flags.clip_area&&(b.save(),"box"==e?(b.beginPath(),b.rect(0,0,f[0],f[1])):"round"==e?b.roundRect(0,0,f[0],f[1],10):"circle"==e&&(b.beginPath(),b.arc(0.5*f[0],0.5*f[1],0.5*f[0],0,2*Math.PI)),b.clip());this.drawNodeShape(a,b,f,c,a.bgcolor,!d,a.selected);b.shadowColor="transparent";b.textAlign="left";b.font="12px Arial";d=0.6<a.graph.config.canvas_scale;if(!a.flags.collapsed){if(a.inputs)for(e=0;e<a.inputs.length;e++){var g=a.inputs[e];b.globalAlpha=
|
||||
1;null!=this.connecting_node&&0!=this.connecting_output.type&&0!=a.inputs[e].type&&this.connecting_output.type!=a.inputs[e].type&&(b.globalAlpha=0.4);b.fillStyle=null!=g.link?"#7F7":"#AAA";f=a.getConnectionPos(!0,e);f[0]-=a.pos[0];f[1]-=a.pos[1];b.beginPath();b.arc(f[0],f[1],4,0,2*Math.PI);b.fill();d&&(g=null!=g.label?g.label:g.name)&&(b.fillStyle=c,b.fillText(g,f[0]+10,f[1]+5))}this.connecting_node&&(b.globalAlpha=0.4);b.lineWidth=1;b.textAlign="right";b.strokeStyle="black";if(a.outputs)for(e=0;e<
|
||||
a.outputs.length;e++)if(g=a.outputs[e],f=a.getConnectionPos(!1,e),f[0]-=a.pos[0],f[1]-=a.pos[1],b.fillStyle=g.links&&g.links.length?"#7F7":"#AAA",b.beginPath(),b.arc(f[0],f[1],4,0,2*Math.PI),b.fill(),b.stroke(),d&&(g=null!=g.label?g.label:g.name))b.fillStyle=c,b.fillText(g,f[0]-10,f[1]+5);b.textAlign="left";b.globalAlpha=1;if(a.onDrawForeground)a.onDrawForeground(b)}a.flags.clip_area&&b.restore()}};
|
||||
LGraphCanvas.prototype.drawNodeShape=function(a,b,c,d,e,f,g){b.strokeStyle=d||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=e||LiteGraph.NODE_DEFAULT_BGCOLOR;e=LiteGraph.NODE_TITLE_HEIGHT;var h=a.shape||"box";"box"==h?(g&&(b.strokeStyle="#CCC",b.strokeRect(-0.5,f?-0.5:-e+-0.5,c[0]+2,f?c[1]+2:c[1]+e+2),b.strokeStyle=d),b.beginPath(),b.rect(0,f?0.5:-e+1,c[0]+1,f?c[1]:c[1]+e)):"round"==a.shape?b.roundRect(0,f?0:-e,c[0],f?c[1]:c[1]+e,10):"circle"==a.shape&&(b.beginPath(),b.arc(0.5*c[0],0.5*c[1],0.5*c[0],0,
|
||||
2*Math.PI));b.fill();b.shadowColor="transparent";a.bgImage&&a.bgImage.width&&b.drawImage(a.bgImage,0.5*(c[0]-a.bgImage.width),0.5*(c[1]-a.bgImage.height));a.bgImageUrl&&!a.bgImage&&(a.bgImage=a.loadImage(a.bgImageUrl));if(a.onDrawBackground)a.onDrawBackground(b);f||(b.fillStyle=d||LiteGraph.NODE_DEFAULT_COLOR,"box"==h?(b.beginPath(),b.fillRect(0,-e,c[0]+1,e),b.stroke()):"round"==h&&(b.roundRect(0,-e,c[0],e,10,0),b.fill(),b.stroke()),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),
|
||||
"round"==h?b.arc(0.5*e,-0.5*e,0.5*(e-6),0,2*Math.PI):b.rect(3,-e+3,e-6,e-6),b.fill(),b.font="bold 12px Arial",""!=a.name&&0.8<a.graph.config.canvas_scale&&(b.fillStyle="#222",b.fillText(a.name,16,13-e)))};
|
||||
this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.scale,this.scale);a.translate(this.offset[0],this.offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);this.drawNode(d,a);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=this.connecting_pos&&(a.lineWidth=this.connections_width,this.renderLink(a,this.connecting_pos,
|
||||
[this.canvas_mouse[0],this.canvas_mouse[1]],"node"==this.connecting_output.type?"#F85":"#AFA"),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();this.dirty_canvas=!1};
|
||||
LGraphCanvas.prototype.drawBgcanvas=function(){var a=this.bgcanvas,b=this.bgctx;a.width=a.width;b.restore();b.setTransform(1,0,0,1,0,0);if(this.graph){b.save();b.scale(this.scale,this.scale);b.translate(this.offset[0],this.offset[1]);if(this.background_image&&0.5<this.scale){b.globalAlpha=(1-0.5/this.scale)*this.editor_alpha;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=!1;if(!this._bg_img||this._bg_img.name!=this.background_image){this._bg_img=new Image;this._bg_img.name=
|
||||
this.background_image;this._bg_img.src=this.background_image;var c=this;this._bg_img.onload=function(){c.draw(!0,!0)}}var d=null;this._bg_img!=this._pattern_img&&0<this._bg_img.width?(d=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=d):d=this._pattern;d&&(b.fillStyle=d,b.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2]-this.visible_area[0],this.visible_area[3]-this.visible_area[1]),b.fillStyle="transparent");b.globalAlpha=1}b.strokeStyle=
|
||||
"#235";b.strokeRect(0,0,a.width,a.height);this.render_connections_shadows?(b.shadowColor="#000",b.shadowOffsetX=0,b.shadowOffsetY=0,b.shadowBlur=6):b.shadowColor="rgba(0,0,0,0)";this.live_mode||this.drawConnections(b);b.shadowColor="rgba(0,0,0,0)";b.restore()}this.dirty_bgcanvas=!1;this.dirty_canvas=!0};
|
||||
LGraphCanvas.prototype.drawNode=function(a,b){var c=a.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(a.flags.skip_title_render||a.graph.isLive())d=!1;a.mouseOver&&(d=!0);a.selected||(this.render_shadows?(b.shadowColor="#111",b.shadowOffsetX=2,b.shadowOffsetY=2,b.shadowBlur=4):b.shadowColor="transparent");if(this.live_mode){if(!a.flags.collapsed&&(b.shadowColor="transparent",a.onDrawForeground))a.onDrawForeground(b)}else{var e=this.editor_alpha;b.globalAlpha=e;var f=a.shape||"box",g=new Float32Array(a.size);
|
||||
a.flags.collapsed&&g.set([LiteGraph.NODE_COLLAPSED_WIDTH,0]);a.flags.clip_area&&(b.save(),"box"==f?(b.beginPath(),b.rect(0,0,g[0],g[1])):"round"==f?b.roundRect(0,0,g[0],g[1],10):"circle"==f&&(b.beginPath(),b.arc(0.5*g[0],0.5*g[1],0.5*g[0],0,2*Math.PI)),b.clip());this.drawNodeShape(a,b,g,c,a.bgcolor,!d,a.selected);b.shadowColor="transparent";b.textAlign="left";b.font=this.inner_text_font;d=0.6<this.scale;if(!a.flags.collapsed){if(a.inputs)for(f=0;f<a.inputs.length;f++){var h=a.inputs[f];b.globalAlpha=
|
||||
e;null!=this.connecting_node&&0!=this.connecting_output.type&&0!=a.inputs[f].type&&this.connecting_output.type!=a.inputs[f].type&&(b.globalAlpha=0.4*e);b.fillStyle=null!=h.link?"#7F7":"#AAA";g=a.getConnectionPos(!0,f);g[0]-=a.pos[0];g[1]-=a.pos[1];b.beginPath();b.arc(g[0],g[1],4,0,2*Math.PI);b.fill();d&&(h=null!=h.label?h.label:h.name)&&(b.fillStyle=c,b.fillText(h,g[0]+10,g[1]+5))}this.connecting_node&&(b.globalAlpha=0.4*e);b.lineWidth=1;b.textAlign="right";b.strokeStyle="black";if(a.outputs)for(f=
|
||||
0;f<a.outputs.length;f++)if(h=a.outputs[f],g=a.getConnectionPos(!1,f),g[0]-=a.pos[0],g[1]-=a.pos[1],b.fillStyle=h.links&&h.links.length?"#7F7":"#AAA",b.beginPath(),b.arc(g[0],g[1],4,0,2*Math.PI),b.fill(),b.stroke(),d&&(h=null!=h.label?h.label:h.name))b.fillStyle=c,b.fillText(h,g[0]-10,g[1]+5);b.textAlign="left";b.globalAlpha=1;if(a.onDrawForeground)a.onDrawForeground(b)}a.flags.clip_area&&b.restore();b.globalAlpha=1}};
|
||||
LGraphCanvas.prototype.drawNodeShape=function(a,b,c,d,e,f,g){b.strokeStyle=d||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=e||LiteGraph.NODE_DEFAULT_BGCOLOR;e=LiteGraph.NODE_TITLE_HEIGHT;var h=a.shape||"box";"box"==h?(g&&(b.strokeStyle="#CCC",b.strokeRect(-0.5,f?-0.5:-e+-0.5,c[0]+2,f?c[1]+2:c[1]+e+2),b.strokeStyle=d),b.beginPath(),b.rect(0,f?0.5:-e+0.5,c[0]+1,f?c[1]:c[1]+e)):"round"==a.shape?b.roundRect(0,f?0:-e,c[0],f?c[1]:c[1]+e,10):"circle"==a.shape&&(b.beginPath(),b.arc(0.5*c[0],0.5*c[1],0.5*c[0],
|
||||
0,2*Math.PI));b.fill();b.shadowColor="transparent";a.bgImage&&a.bgImage.width&&b.drawImage(a.bgImage,0.5*(c[0]-a.bgImage.width),0.5*(c[1]-a.bgImage.height));a.bgImageUrl&&!a.bgImage&&(a.bgImage=a.loadImage(a.bgImageUrl));if(a.onDrawBackground)a.onDrawBackground(b);f||(b.fillStyle=d||LiteGraph.NODE_DEFAULT_COLOR,d=b.globalAlpha,b.globalAlpha=0.5*d,"box"==h?(b.beginPath(),b.fillRect(0,-e,c[0]+1,e),b.stroke()):"round"==h&&(b.roundRect(0,-e,c[0],e,10,0),b.fill(),b.stroke()),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,
|
||||
b.beginPath(),"round"==h?b.arc(0.5*e,-0.5*e,0.5*(e-6),0,2*Math.PI):b.rect(3,-e+3,e-6,e-6),b.fill(),b.globalAlpha=d,b.font=this.title_text_font,""!=a.name&&0.8<this.scale&&(b.fillStyle="#222",b.fillText(a.name,16,13-e)))};
|
||||
LGraphCanvas.prototype.drawNodeCollapsed=function(a,b,c,d){b.strokeStyle=c||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=d||LiteGraph.NODE_DEFAULT_BGCOLOR;c=LiteGraph.NODE_COLLAPSED_RADIUS;d=a.shape||"box";"circle"==d?(b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],c,0,2*Math.PI),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],0.5*c,0,2*Math.PI)):"round"==d?(b.beginPath(),b.roundRect(0.5*a.size[0]-
|
||||
c,0.5*a.size[1]-c,2*c,2*c,5),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.roundRect(0.5*a.size[0]-0.5*c,0.5*a.size[1]-0.5*c,c,c,2)):(b.beginPath(),b.rect(0,0,a.size[0],2*c),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.rect(0.5*c,0.5*c,c,c));b.fill()};LGraphCanvas.link_colors=["#AAC","#ACA","#CAA"];
|
||||
LGraphCanvas.prototype.drawConnections=function(a){a.lineWidth=LGraphCanvas.link_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";for(var b in this.graph.nodes){var c=this.graph.nodes[b];if(c.inputs&&c.inputs.length)for(var d in c.inputs){var e=c.inputs[d];if(e&&e.link){var f=e.link,e=this.graph.getNodeById(f[1]);if(null!=e){var g=f[2],f=null,f=-1==g?[e.pos[0]+10,e.pos[1]+10]:e.getConnectionPos(!1,g),e=LGraphCanvas.link_type_colors[c.inputs[d].type];null==e&&(e=LGraphCanvas.link_colors[c.id%LGraphCanvas.link_colors.length]);
|
||||
a.fillStyle=a.strokeStyle=e;this.renderLink(a,f,c.getConnectionPos(!0,d))}}}}};
|
||||
LGraphCanvas.prototype.renderLink=function(a,b,c){if(this.highquality_render){var d=distance(b,c);a.beginPath();a.moveTo(b[0],b[1]);a.bezierCurveTo(b[0]+0.25*d,b[1],c[0]-0.25*d,c[1],c[0],c[1]);a.stroke();0.6<this.graph.config.canvas_scale&&(d=this.computeConnectionPoint(b,c,0.5),b=this.computeConnectionPoint(b,c,0.51),c=0,c=-Math.atan2(b[0]-d[0],b[1]-d[1]),a.save(),a.translate(d[0],d[1]),a.rotate(c),a.beginPath(),a.moveTo(-5,-5),a.lineTo(0,5),a.lineTo(5,-5),a.fill(),a.restore())}else a.beginPath(),
|
||||
a.moveTo(b[0],b[1]),a.lineTo(c[0],c[1]),a.stroke()};LGraphCanvas.prototype.computeConnectionPoint=function(a,b,c){var d=distance(a,b),e=[a[0]+0.25*d,a[1]],d=[b[0]-0.25*d,b[1]],f=(1-c)*(1-c)*(1-c),g=3*(1-c)*(1-c)*c,h=3*(1-c)*c*c;c*=c*c;return[f*a[0]+g*e[0]+h*d[0]+c*b[0],f*a[1]+g*e[1]+h*d[1]+c*b[1]]};LGraphCanvas.prototype.resizeCanvas=function(a,b){this.canvas.width=a;b&&(this.canvas.height=b);this.bgcanvas.width=this.canvas.width;this.bgcanvas.height=this.canvas.height;this.draw(!0,!0)};
|
||||
LGraphCanvas.prototype.switchLiveMode=function(){this.live_mode=!this.live_mode;this.dirty_bgcanvas=this.dirty_canvas=!0};LGraphCanvas.prototype.onNodeSelectionChange=function(a){};
|
||||
LGraphCanvas.prototype.touchHandler=function(a){var b=a.changedTouches[0],c="";switch(a.type){case "touchstart":c="mousedown";break;case "touchmove":c="mousemove";break;case "touchend":c="mouseup";break;default:return}var d=document.createEvent("MouseEvent");d.initMouseEvent(c,!0,!0,window,1,b.screenX,b.screenY,b.clientX,b.clientY,!1,!1,!1,!1,0,null);b.target.dispatchEvent(d);a.preventDefault()};
|
||||
LGraphCanvas.onMenuAdd=function(a,b,c,d,e){function f(a,b){var c=LiteGraph.createNode(a.value);c&&(c.pos=d.convertEventToCanvas(e),d.graph.add(c))}a=LiteGraph.getNodeTypesCategories();var g={},h;for(h in a)a[h]&&(g[h]={value:a[h],content:a[h],is_menu:!0});var k=LiteGraph.createContextualMenu(g,{event:b,callback:function(a,b){var c=LiteGraph.getNodeTypesInCategory(a.value),d=[],e;for(e in c)d.push({content:c[e].title,value:c[e].type});LiteGraph.createContextualMenu(d,{event:b,callback:f,from:k});return!1},
|
||||
from:c});return!1};LGraphCanvas.onMenuCollapseAll=function(){};LGraphCanvas.onMenuNodeEdit=function(){};LGraphCanvas.onMenuNodeInputs=function(a,b,c){function d(b){a&&a.addInput(b.value[0],b.value[1],b.value[2])}if(a){var e=a.optional_inputs;a.onGetInputs&&(e=a.onGetInputs());if(e){var f=[],g;for(g in e){var h=e[g],k=h[0];h[2]&&h[2].label&&(k=h[2].label);f.push({content:k,value:h})}LiteGraph.createContextualMenu(f,{event:b,callback:d,from:c})}return!1}};
|
||||
LGraphCanvas.onMenuNodeOutputs=function(a,b,c){function d(b){a&&a.addOutput(b.value[0],b.value[1])}if(a){var e=a.optional_outputs;a.onGetOutputs&&(e=a.onGetOutputs());if(e){var f=[],g;for(g in e)-1==a.findOutputSlot(e[g][0])&&f.push({content:e[g][0],value:e[g]});f.length&&LiteGraph.createContextualMenu(f,{event:b,callback:d,from:c})}return!1}};LGraphCanvas.onMenuNodeCollapse=function(a){a.flags.collapsed=!a.flags.collapsed;a.graph.canvas.setDirty(!0,!0)};
|
||||
LGraphCanvas.prototype.drawConnections=function(a){a.lineWidth=this.connections_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";a.globalAlpha=this.editor_alpha;for(var b in this.graph._nodes){var c=this.graph._nodes[b];if(c.inputs&&c.inputs.length)for(var d in c.inputs){var e=c.inputs[d];if(e&&e.link){var f=e.link,e=this.graph.getNodeById(f[1]);if(null!=e){var g=f[2],f=null,f=-1==g?[e.pos[0]+10,e.pos[1]+10]:e.getConnectionPos(!1,g),e=LGraphCanvas.link_type_colors[c.inputs[d].type];null==e&&(e=LGraphCanvas.link_colors[c.id%
|
||||
LGraphCanvas.link_colors.length]);this.renderLink(a,f,c.getConnectionPos(!0,d),e)}}}}a.globalAlpha=1};
|
||||
LGraphCanvas.prototype.renderLink=function(a,b,c,d){if(this.highquality_render){var e=distance(b,c);this.render_connections_border&&(a.lineWidth=this.connections_width+4);a.beginPath();this.render_curved_connections?(a.moveTo(b[0],b[1]),a.bezierCurveTo(b[0]+0.25*e,b[1],c[0]-0.25*e,c[1],c[0],c[1])):(a.moveTo(b[0]+10,b[1]),a.lineTo(0.5*(b[0]+10+(c[0]-10)),b[1]),a.lineTo(0.5*(b[0]+10+(c[0]-10)),c[1]),a.lineTo(c[0]-10,c[1]));this.render_connections_border&&(a.strokeStyle="rgba(0,0,0,0.5)",a.stroke());
|
||||
a.lineWidth=this.connections_width;a.fillStyle=a.strokeStyle=d;a.stroke();if(this.render_connection_arrows&&0.6<this.scale){d=this.computeConnectionPoint(b,c,0.5);var e=this.computeConnectionPoint(b,c,0.51),f=0,f=this.render_curved_connections?-Math.atan2(e[0]-d[0],e[1]-d[1]):c[1]>b[1]?0:Math.PI;a.save();a.translate(d[0],d[1]);a.rotate(f);a.beginPath();a.moveTo(-5,-5);a.lineTo(0,5);a.lineTo(5,-5);a.fill();a.restore()}}else a.beginPath(),a.moveTo(b[0],b[1]),a.lineTo(c[0],c[1]),a.stroke()};
|
||||
LGraphCanvas.prototype.computeConnectionPoint=function(a,b,c){var d=distance(a,b),e=[a[0]+0.25*d,a[1]],d=[b[0]-0.25*d,b[1]],f=(1-c)*(1-c)*(1-c),g=3*(1-c)*(1-c)*c,h=3*(1-c)*c*c;c*=c*c;return[f*a[0]+g*e[0]+h*d[0]+c*b[0],f*a[1]+g*e[1]+h*d[1]+c*b[1]]};
|
||||
LGraphCanvas.prototype.resize=function(a,b){if(!a&&!b){var c=this.canvas.parentNode;a=c.offsetWidth;b=c.offsetHeight}if(this.canvas.width!=a||this.canvas.height!=b)this.canvas.width=a,this.canvas.height=b,this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height,this.setDirty(!0,!0)};
|
||||
LGraphCanvas.prototype.switchLiveMode=function(a){if(a){var b=this,c=this.live_mode?1.1:0.9;this.live_mode&&(this.live_mode=!1,this.editor_alpha=0.1);var d=setInterval(function(){b.editor_alpha*=c;b.dirty_canvas=!0;b.dirty_bgcanvas=!0;1>c&&0.01>b.editor_alpha&&(clearInterval(d),1>c&&(b.live_mode=!0));1<c&&0.99<b.editor_alpha&&(clearInterval(d),b.editor_alpha=1)},1)}else this.live_mode=!this.live_mode,this.dirty_bgcanvas=this.dirty_canvas=!0};LGraphCanvas.prototype.onNodeSelectionChange=function(a){};
|
||||
LGraphCanvas.prototype.touchHandler=function(a){var b=a.changedTouches[0],c="";switch(a.type){case "touchstart":c="mousedown";break;case "touchmove":c="mousemove";break;case "touchend":c="mouseup";break;default:return}var d=this.getCanvasWindow(),e=d.document.createEvent("MouseEvent");e.initMouseEvent(c,!0,!0,d,1,b.screenX,b.screenY,b.clientX,b.clientY,!1,!1,!1,!1,0,null);b.target.dispatchEvent(e);a.preventDefault()};
|
||||
LGraphCanvas.onMenuAdd=function(a,b,c,d,e){function f(a,b){var c=LiteGraph.createNode(a.value);c&&(c.pos=d.convertEventToCanvas(e),d.graph.add(c))}var g=d.getCanvasWindow();a=LiteGraph.getNodeTypesCategories();var h={},k;for(k in a)a[k]&&(h[k]={value:a[k],content:a[k],is_menu:!0});var l=LiteGraph.createContextualMenu(h,{event:b,callback:function(a,b){var c=LiteGraph.getNodeTypesInCategory(a.value),d=[],e;for(e in c)d.push({content:c[e].title,value:c[e].type});LiteGraph.createContextualMenu(d,{event:b,
|
||||
callback:f,from:l},g);return!1},from:c},g);return!1};LGraphCanvas.onMenuCollapseAll=function(){};LGraphCanvas.onMenuNodeEdit=function(){};LGraphCanvas.onMenuNodeInputs=function(a,b,c){function d(b){a&&a.addInput(b.value[0],b.value[1],b.value[2])}if(a){var e=a.optional_inputs;a.onGetInputs&&(e=a.onGetInputs());if(e){var f=[],g;for(g in e){var h=e[g],k=h[0];h[2]&&h[2].label&&(k=h[2].label);f.push({content:k,value:h})}LiteGraph.createContextualMenu(f,{event:b,callback:d,from:c})}return!1}};
|
||||
LGraphCanvas.onMenuNodeOutputs=function(a,b,c){function d(e){if(a){var f=e.value[1];if(!f||f.constructor!==Object&&f.constructor!==Array)a.addOutput(e.value[0],e.value[1]);else{e=[];for(var g in f)e.push({content:g,value:f[g]});LiteGraph.createContextualMenu(e,{event:b,callback:d,from:c});return!1}}}if(a){var e=a.optional_outputs;a.onGetOutputs&&(e=a.onGetOutputs());if(e){var f=[],g;for(g in e)-1==a.findOutputSlot(e[g][0])&&f.push({content:e[g][0],value:e[g]});f.length&&LiteGraph.createContextualMenu(f,
|
||||
{event:b,callback:d,from:c})}return!1}};LGraphCanvas.onMenuNodeCollapse=function(a){a.flags.collapsed=!a.flags.collapsed;a.graph.canvas.setDirty(!0,!0)};LGraphCanvas.onMenuNodePin=function(a){a.pin()};
|
||||
LGraphCanvas.onMenuNodeColors=function(a,b,c){var d=[],e;for(e in LGraphCanvas.node_colors){var f=LGraphCanvas.node_colors[e];d.push({value:e,content:"<span style='display: block; color:"+f.color+"; background-color:"+f.bgcolor+"'>"+e+"</span>"})}LiteGraph.createContextualMenu(d,{event:b,callback:function(b){a&&(b=LGraphCanvas.node_colors[b.value])&&(a.color=b.color,a.bgcolor=b.bgcolor,a.graph.canvas.setDirty(!0))},from:c});return!1};
|
||||
LGraphCanvas.onMenuNodeShapes=function(a,b){LiteGraph.createContextualMenu(["box","round"],{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)}})};
|
||||
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:"Pin",callback:LGraphCanvas.onMenuNodePin},{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=this.getCanvasWindow(),e=LiteGraph.createContextualMenu(a?this.getNodeMenuOptions(a):this.getCanvasMenuOptions(),{event:b,callback:function(d,g){if(d&&d.callback)return d.callback(a,g,e,c,b)}},d)};
|
||||
CanvasRenderingContext2D.prototype.roundRect=function(a,b,c,d,e,f){void 0===e&&(e=5);void 0===f&&(f=e);this.beginPath();this.moveTo(a+e,b);this.lineTo(a+c-e,b);this.quadraticCurveTo(a+c,b,a+c,b+e);this.lineTo(a+c,b+d-f);this.quadraticCurveTo(a+c,b+d,a+c-f,b+d);this.lineTo(a+f,b+d);this.quadraticCurveTo(a,b+d,a,b+d-f);this.lineTo(a,b+e);this.quadraticCurveTo(a,b,a+e,b)};function compareObjects(a,b){for(var c in a)if(a[c]!=b[c])return!1;return!0}
|
||||
function distance(a,b){return Math.sqrt((b[0]-a[0])*(b[0]-a[0])+(b[1]-a[1])*(b[1]-a[1]))}function colorToString(a){return"rgba("+Math.round(255*a[0]).toFixed()+","+Math.round(255*a[1]).toFixed()+","+Math.round(255*a[2]).toFixed()+","+(4==a.length?a[3].toFixed(2):"1.0")+")"}function isInsideRectangle(a,b,c,d,e,f){return c<a&&c+e>a&&d<b&&d+f>b?!0:!1}function growBounding(a,b,c){b<a[0]?a[0]=b:b>a[2]&&(a[2]=b);c<a[1]?a[1]=c:c>a[3]&&(a[3]=c)}
|
||||
function isInsideBounding(a,b){return a[0]<b[0][0]||a[1]<b[0][1]||a[0]>b[1][0]||a[1]>b[1][1]?!1:!0}function overlapBounding(a,b){return a[0]>b[2]||a[1]>b[3]||a[2]<b[0]||a[3]<b[1]?!1:!0}function hex2num(a){"#"==a.charAt(0)&&(a=a.slice(1));a=a.toUpperCase();for(var b=Array(3),c=0,d,e,f=0;6>f;f+=2)d="0123456789ABCDEF".indexOf(a.charAt(f)),e="0123456789ABCDEF".indexOf(a.charAt(f+1)),b[c]=16*d+e,c++;return b}
|
||||
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;c<a.length;c++)b.push(a[c]);for(c in b)b[c].parentNode&&b[c].parentNode.removeChild(b[c])}};
|
||||
LiteGraph.extendClass=function(a,b){for(var c in a)b[c]=a[c];if(a.prototype)for(c in a.prototype)b.prototype[c]=a.prototype[c]};
|
||||
LiteGraph.createContextualMenu=function(a,b,c){function d(a){var c=!0;b.callback&&(a=b.callback.call(e,this.data,a),void 0!=a&&(c=a));c&&LiteGraph.closeAllContextualMenus()}this.options=b=b||{};c=c||window;b.from||LiteGraph.closeAllContextualMenus();var e=c.document.createElement("div");e.className="litecontextualmenu litemenubar-panel";this.root=e;var f=e.style;f.minWidth="100px";f.minHeight="20px";f.position="fixed";f.top="100px";f.left="100px";f.color="#AAF";f.padding="2px";f.borderBottom="2px solid #AAF";
|
||||
f.backgroundColor="#444";e.addEventListener("contextmenu",function(a){a.preventDefault();return!1});for(var g in a){var f=a[g],h=c.document.createElement("div");h.className="litemenu-entry";null==f?h.className="litemenu-entry separator":(f.is_menu&&(h.className+=" submenu"),f.disabled&&(h.className+=" disabled"),h.style.cursor="pointer",h.dataset.value="string"==typeof f?f:f.value,h.data=f,h.innerHTML="string"==typeof f?a.constructor==Array?a[g]:g:f.content?f.content:g,h.addEventListener("click",
|
||||
d));e.appendChild(h)}e.addEventListener("mouseover",function(a){this.mouse_inside=!0});e.addEventListener("mouseout",function(a){for(a=a.toElement;a!=this&&a!=c.document;)a=a.parentNode;a!=this&&(this.mouse_inside=!1,this.block_close||this.closeMenu())});c.document.body.appendChild(e);a=e.getClientRects()[0];b.from&&(b.from.block_close=!0);h=b.left||0;g=b.top||0;b.event&&(h=b.event.pageX-10,g=b.event.pageY-10,b.left&&(h=b.left),f=c.document.body.getClientRects()[0],b.from&&(h=b.from.getClientRects()[0],
|
||||
h=h.left+h.width),h>f.width-a.width-10&&(h=f.width-a.width-10),g>f.height-a.height-10&&(g=f.height-a.height-10));e.style.left=h+"px";e.style.top=g+"px";e.closeMenu=function(){b.from&&(b.from.block_close=!1,b.from.mouse_inside||b.from.closeMenu());this.parentNode&&c.document.body.removeChild(this)};return e};LiteGraph.closeAllContextualMenus=function(){var a=document.querySelectorAll(".litecontextualmenu");if(a.length){for(var b=[],c=0;c<a.length;c++)b.push(a[c]);for(c in b)b[c].parentNode&&b[c].parentNode.removeChild(b[c])}};
|
||||
LiteGraph.extendClass=function(a,b){for(var c in a)b[c]=a[c];if(a.prototype)for(c in a.prototype)b.prototype[c]=a.prototype[c]};window.requestAnimationFrame||(window.requestAnimationFrame=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)});
|
||||
LiteGraph.registerNodeType("basic/const",{title:"Const",desc:"Constant",outputs:[["value","number"]],properties:{value:1},editable:{property:"value",type:"number"},setValue:function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a;this.setDirtyCanvas(!0)},onExecute:function(){this.setOutputData(0,parseFloat(this.properties.value))},onDrawBackground:function(a){this.outputs[0].label=this.properties.value.toFixed(3)},onWidget:function(a,b){"value"==b.name&&this.setValue(b.value)}});
|
||||
LiteGraph.registerNodeType("math/rand",{title:"Rand",desc:"Random number",outputs:[["value","number"]],properties:{min:0,max:1},size:[60,20],onExecute:function(){var a=this.properties.min,b=this.properties.max;this._last_v=Math.random()*(b-a)+a;this.setOutputData(0,this._last_v)},onDrawBackground:function(a){this.outputs[0].label=this._last_v?this._last_v.toFixed(3):"?"}});
|
||||
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 a=this.getInputData(0);null!=a&&(a=Math.max(this.properties.min,a),a=Math.min(this.properties.max,a),this.setOutputData(0,a))}});
|
||||
@@ -139,14 +138,14 @@ window.glMatrix&&(LiteGraph.registerNodeType("math3d/vec3-to-xyz",{title:"Vec3->
|
||||
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=
|
||||
this.imgfg.width){var b=0.5*this.imgbg.width,c=this.size[0]/this.imgfg.width;a.save();a.translate(0,20);a.scale(c,c);a.drawImage(this.imgbg,0,0);a.translate(b,b);a.rotate(2*this.value*Math.PI*6/8+10*Math.PI/8);a.translate(-b,-b);a.drawImage(this.imgfg,0,0);a.restore();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();0<this.value&&(a.strokeStyle=this.properties.wcolor,a.lineWidth=0.2*this.properties.size,a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1]+10,0.35*this.properties.size,-0.5*Math.PI+2*Math.PI*this.value,-0.5*Math.PI,!0),a.stroke(),a.lineWidth=1);a.font=0.2*this.properties.size+"px Arial";a.fillStyle="#AAA";a.textAlign="center";
|
||||
var b=this.properties.value;"number"==typeof b&&(b=b.toFixed(2));a.fillText(b,0.5*this.size[0],0.65*this.size[1]);a.textAlign="left"}},onDrawBackground:function(a){this.onDrawImageKnob(a)},onExecute:function(){this.setOutputData(0,this.properties.value);this.boxcolor=colorToString([this.value,this.value,this.value])},onMouseDown:function(a){if(this.imgfg&&this.imgfg.width){this.center=[0.5*this.size[0],0.5*this.size[1]+20];this.radius=0.5*this.size[0];if(20>a.canvasY-this.pos[1]||distance([a.canvasX,
|
||||
var b=this.properties.value;"number"==typeof b&&(b=b.toFixed(2));a.fillText(b,0.5*this.size[0],0.65*this.size[1]);a.textAlign="left"}},onDrawForeground:function(a){this.onDrawImageKnob(a)},onExecute:function(){this.setOutputData(0,this.properties.value);this.boxcolor=colorToString([this.value,this.value,this.value])},onMouseDown:function(a){if(this.imgfg&&this.imgfg.width){this.center=[0.5*this.size[0],0.5*this.size[1]+20];this.radius=0.5*this.size[0];if(20>a.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]);1<b?b=1:0>b&&(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)},
|
||||
(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))},onDrawForeground: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];1<b?b=1:0>b&&(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||
|
||||
@@ -156,16 +155,16 @@ this.properties.y=1:0>this.properties.y&&(this.properties.y=0),this.oldmouse=a,t
|
||||
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=
|
||||
0.5*this.size[0],0.5*this.size[1]+0.4*parseInt(this.properties.fontsize));a.textAlign="left"},onDrawForeground: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]-
|
||||
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)},onDrawForeground: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,
|
||||
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},onDrawForeground: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;b<d&&(b=d)}this.size[0]=b+20;this.size[1]=4+a.length*this.properties.fontsize;this.setDirtyCanvas(!0)}},onWidget:function(a,b){"resize"==b.name?this.resize():"led_text"==b.name?(this.properties.font=
|
||||
"Digital",this.properties.glowSize=4,this.setDirtyCanvas(!0)):"normal_text"==b.name&&(this.properties.font="Arial",this.setDirtyCanvas(!0))},onPropertyChange:function(a,b){this.properties[a]=b;this.str="number"==typeof b?b.toFixed(3):b;return!0}});
|
||||
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(a){""==this.properties.bgcolorTop||""==this.properties.bgcolorBottom?this.lineargradient=0:(this.lineargradient=a.createLinearGradient(0,0,0,this.size[1]),this.lineargradient.addColorStop(0,this.properties.bgcolorTop),
|
||||
this.lineargradient.addColorStop(1,this.properties.bgcolorBottom))},onDrawBackground:function(a){null==this.lineargradient&&this.createGradient(a);this.lineargradient&&(a.lineWidth=1,a.strokeStyle=this.properties.borderColor,a.fillStyle=this.lineargradient,this.properties.shadowSize?(a.shadowColor="#000",a.shadowOffsetX=0,a.shadowOffsetY=0,a.shadowBlur=this.properties.shadowSize):a.shadowColor="transparent",a.roundRect(0,0,this.size[0]-1,this.size[1]-1,this.properties.shadowSize),a.fill(),a.shadowColor=
|
||||
this.lineargradient.addColorStop(1,this.properties.bgcolorBottom))},onDrawForeground:function(a){null==this.lineargradient&&this.createGradient(a);this.lineargradient&&(a.lineWidth=1,a.strokeStyle=this.properties.borderColor,a.fillStyle=this.lineargradient,this.properties.shadowSize?(a.shadowColor="#000",a.shadowOffsetX=0,a.shadowOffsetY=0,a.shadowBlur=this.properties.shadowSize):a.shadowColor="transparent",a.roundRect(0,0,this.size[0]-1,this.size[1]-1,this.properties.shadowSize),a.fill(),a.shadowColor=
|
||||
"transparent",a.stroke())},onWidget:function(a,b){"update"==b.name&&(this.lineargradient=null,this.setDirtyCanvas(!0))}});
|
||||
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);1<b?b=1:0>b&&(b=0);if(0!=a.length){var c=[0,0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,c)}}});
|
||||
|
||||
187
css/litegraph-editor.css
Normal file
187
css/litegraph-editor.css
Normal file
@@ -0,0 +1,187 @@
|
||||
.litegraph-editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background-color: #333;
|
||||
color: #EEE;
|
||||
font: 14px Tahoma;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.litegraph-editor 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;
|
||||
}
|
||||
|
||||
.litegraph-editor h1 span {
|
||||
font-family: "Arial";
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.litegraph-editor h2 {
|
||||
font-family: "Metro Light";
|
||||
padding: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.litegraph-editor * {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.litegraph-editor .content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc( 100% - 80px );
|
||||
background-color: #292929;
|
||||
}
|
||||
|
||||
.litegraph-editor .header, .litegraph-editor .footer {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
background-color: #333;
|
||||
/*border-radius: 10px 10px 0 0;*/
|
||||
}
|
||||
|
||||
.litegraph-editor .tools, .litegraph-editor .tools-left, .litegraph-editor .tools-right {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0px;
|
||||
vertical-align: top;
|
||||
|
||||
margin: 2px 5px 0 0px;
|
||||
}
|
||||
|
||||
.litegraph-editor .tools-left {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.litegraph-editor .footer {
|
||||
height: 40px;
|
||||
position: relative;
|
||||
/*border-radius: 0 0 10px 10px;*/
|
||||
}
|
||||
|
||||
.litegraph-editor .miniwindow {
|
||||
background-color: #333;
|
||||
border: 1px solid #111;
|
||||
}
|
||||
|
||||
.litegraph-editor .miniwindow .corner-button {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-family: "Tahoma";
|
||||
font-size: 14px;
|
||||
color: #AAA;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* BUTTONS **********************/
|
||||
|
||||
.litegraph-editor 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;
|
||||
}
|
||||
|
||||
.litegraph-editor button:hover {
|
||||
background-color: #999;
|
||||
color: #FFF;
|
||||
transition: all 1s;
|
||||
-moz-transition: all 1s;
|
||||
-webkit-transition: all 0.4s;
|
||||
}
|
||||
|
||||
.litegraph-editor button:active {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.litegraph-editor button.fixed {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.litegraph-editor button img {
|
||||
margin: -4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.litegraph-editor .header button {
|
||||
height: 32px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.litegraph-editor .footer button {
|
||||
/*font-size: 16px;*/
|
||||
}
|
||||
|
||||
.litegraph-editor .toolbar-widget {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.litegraph-editor .editor-area {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* METER *********************/
|
||||
|
||||
.litegraph-editor .loadmeter {
|
||||
font-family: "Tahoma";
|
||||
color: #AAA;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
width: 130px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.litegraph-editor .strong {
|
||||
vertical-align: top;
|
||||
padding: 3px;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
line-height: 8px;
|
||||
}
|
||||
|
||||
.litegraph-editor .cpuload .bgload, .litegraph-editor .gpuload .bgload {
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
height: 15px;
|
||||
background-image: url('../demo/imgs/load-progress-empty.png');
|
||||
}
|
||||
|
||||
.litegraph-editor .cpuload .fgload, .litegraph-editor .gpuload .fgload {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
max-width: 90px;
|
||||
background-image: url('../demo/imgs/load-progress-full.png');
|
||||
}
|
||||
|
||||
545
demo/code.js
545
demo/code.js
@@ -1,544 +1,9 @@
|
||||
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("<img src='imgs/icon-stop.png'/> Stop");
|
||||
graph.start(1);
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).html("<img src='imgs/icon-play.png'/> 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 ? "<img src='imgs/icon-record.png'/> Live" : "<img src='imgs/icon-gear.png'/> 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 = "<strong class='title'>"+categories[i]+"</strong>";
|
||||
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 = "<strong>"+node.title+"</strong> " + (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("<strong>"+sessions[i].name+"</strong><span>"+sessions[i].desc+"</span><span class='delete_session'>x</span>");
|
||||
$("#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];
|
||||
}
|
||||
});
|
||||
LiteGraph.node_images_path = "../nodes_data/";
|
||||
var editor = new LiteGraph.Editor("main");
|
||||
window.graph = editor.graph;
|
||||
window.addEventListener("resize", function() { editor.graphcanvas.resize(); } );
|
||||
demo();
|
||||
|
||||
function trace(a)
|
||||
{
|
||||
|
||||
547
demo/code_old.js
Normal file
547
demo/code_old.js
Normal file
@@ -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("<img src='imgs/icon-stop.png'/> Stop");
|
||||
graph.start(1);
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).html("<img src='imgs/icon-play.png'/> 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(true);
|
||||
graphcanvas.draw();
|
||||
var url = graphcanvas.live_mode ? "imgs/gauss_bg_medium.jpg" : "imgs/gauss_bg.jpg";
|
||||
$("#livemode_button").html(!graphcanvas.live_mode ? "<img src='imgs/icon-record.png'/> Live" : "<img src='imgs/icon-gear.png'/> 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 = "<strong class='title'>"+categories[i]+"</strong>";
|
||||
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 = "<strong>"+node.title+"</strong> " + (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("<strong>"+sessions[i].name+"</strong><span>"+sessions[i].desc+"</span><span class='delete_session'>x</span>");
|
||||
$("#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);
|
||||
}
|
||||
@@ -6,9 +6,11 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/litegraph.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/litegraph-editor.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<!--
|
||||
<div id="header">
|
||||
<h1>LiteGraph <span>by tamat</span></h1>
|
||||
|
||||
@@ -53,12 +55,15 @@
|
||||
<button id="help_button">Help</button>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../src/litegraph.js"></script>
|
||||
<script type="text/javascript" src="../src/litegraph-editor.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../src/nodes/basicnodes.js"></script>
|
||||
<script type="text/javascript" src="../src/nodes/uinodes.js"></script>
|
||||
<script type="text/javascript" src="../src/nodes/imagenodes.js"></script>
|
||||
|
||||
146
demo/style.css
146
demo/style.css
@@ -13,76 +13,18 @@ body {
|
||||
|
||||
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%;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
#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;
|
||||
@@ -135,55 +77,6 @@ h2 {
|
||||
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;
|
||||
@@ -348,40 +241,3 @@ textarea {
|
||||
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');
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ YUI.add("yuidoc-meta", function(Y) {
|
||||
Y.YUIDoc = { meta: {
|
||||
"classes": [
|
||||
"LGraph",
|
||||
"LGraphCanvas",
|
||||
"LGraphNode",
|
||||
"LiteGraph"
|
||||
],
|
||||
|
||||
@@ -43,6 +43,8 @@
|
||||
|
||||
<li><a href="../classes/LGraph.html">LGraph</a></li>
|
||||
|
||||
<li><a href="../classes/LGraphCanvas.html">LGraphCanvas</a></li>
|
||||
|
||||
<li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
|
||||
|
||||
<li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
|
||||
@@ -94,7 +96,7 @@
|
||||
|
||||
|
||||
<div class="foundat">
|
||||
Defined in: <a href="../files/.._src_litegraph.js.html#l302"><code>../src/litegraph.js:302</code></a>
|
||||
Defined in: <a href="../files/.._src_litegraph.js.html#l299"><code>../src/litegraph.js:299</code></a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -145,7 +147,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l302"><code>../src/litegraph.js:302</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l299"><code>../src/litegraph.js:299</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -196,6 +198,13 @@
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
<a href="#method_attachCanvas">attachCanvas</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
@@ -203,6 +212,20 @@
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
<a href="#method_configure">configure</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
<a href="#method_detachCanvas">detachCanvas</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
@@ -252,6 +275,13 @@
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
<a href="#method_isLive">isLive</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
@@ -304,14 +334,7 @@
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
<a href="#method_stop">stop</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="index-item method">
|
||||
<a href="#method_unserialize">unserialize</a>
|
||||
<a href="#method_stop execution">stop execution</a>
|
||||
|
||||
|
||||
|
||||
@@ -382,7 +405,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l602"><code>../src/litegraph.js:602</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l645"><code>../src/litegraph.js:645</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -426,6 +449,94 @@
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="method_attachCanvas" class="method item">
|
||||
<h3 class="name"><code>attachCanvas</code></h3>
|
||||
|
||||
|
||||
<div class="args">
|
||||
<span class="paren">(</span><ul class="args-list inline commas">
|
||||
|
||||
<li class="arg">
|
||||
|
||||
<code>graph_canvas</code>
|
||||
|
||||
</li>
|
||||
|
||||
</ul><span class="paren">)</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="meta">
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Defined in
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l361"><code>../src/litegraph.js:361</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>Attach Canvas to this graph</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="params">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<ul class="params-list">
|
||||
|
||||
<li class="param">
|
||||
|
||||
<code class="param-name">graph_canvas</code>
|
||||
<span class="type">GraphCanvas</span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -461,7 +572,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l321"><code>../src/litegraph.js:321</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l317"><code>../src/litegraph.js:317</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -481,6 +592,183 @@
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="method_configure" class="method item">
|
||||
<h3 class="name"><code>configure</code></h3>
|
||||
|
||||
|
||||
<div class="args">
|
||||
<span class="paren">(</span><ul class="args-list inline commas">
|
||||
|
||||
<li class="arg">
|
||||
|
||||
<code>str</code>
|
||||
|
||||
</li>
|
||||
|
||||
</ul><span class="paren">)</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="meta">
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Defined in
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l920"><code>../src/litegraph.js:920</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>Configure a graph from a JSON string</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="params">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<ul class="params-list">
|
||||
|
||||
<li class="param">
|
||||
|
||||
<code class="param-name">str</code>
|
||||
<span class="type">String</span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
<p>configure a graph from a JSON string</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="method_detachCanvas" class="method item">
|
||||
<h3 class="name"><code>detachCanvas</code></h3>
|
||||
|
||||
|
||||
<div class="args">
|
||||
<span class="paren">(</span><ul class="args-list inline commas">
|
||||
|
||||
<li class="arg">
|
||||
|
||||
<code>graph_canvas</code>
|
||||
|
||||
</li>
|
||||
|
||||
</ul><span class="paren">)</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="meta">
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Defined in
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l380"><code>../src/litegraph.js:380</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>Detach Canvas from this graph</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="params">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<ul class="params-list">
|
||||
|
||||
<li class="param">
|
||||
|
||||
<code class="param-name">graph_canvas</code>
|
||||
<span class="type">GraphCanvas</span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -530,7 +818,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l737"><code>../src/litegraph.js:737</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l780"><code>../src/litegraph.js:780</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -637,7 +925,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l721"><code>../src/litegraph.js:721</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l764"><code>../src/litegraph.js:764</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -734,7 +1022,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l575"><code>../src/litegraph.js:575</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l605"><code>../src/litegraph.js:605</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -808,7 +1096,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l564"><code>../src/litegraph.js:564</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l594"><code>../src/litegraph.js:594</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -887,7 +1175,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l708"><code>../src/litegraph.js:708</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l751"><code>../src/litegraph.js:751</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -991,7 +1279,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l753"><code>../src/litegraph.js:753</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l796"><code>../src/litegraph.js:796</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1120,7 +1408,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l553"><code>../src/litegraph.js:553</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l583"><code>../src/litegraph.js:583</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1154,6 +1442,61 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="method_isLive" class="method item">
|
||||
<h3 class="name"><code>isLive</code></h3>
|
||||
|
||||
|
||||
<span class="paren">()</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="meta">
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Defined in
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l869"><code>../src/litegraph.js:869</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>returns if the graph is in live mode</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1199,7 +1542,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l647"><code>../src/litegraph.js:647</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l690"><code>../src/litegraph.js:690</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1288,7 +1631,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l413"><code>../src/litegraph.js:413</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l443"><code>../src/litegraph.js:443</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1383,7 +1726,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l587"><code>../src/litegraph.js:587</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l617"><code>../src/litegraph.js:617</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1455,7 +1798,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
<span class="returns-inline">
|
||||
<span class="type">String</span>
|
||||
<span class="type">Object</span>
|
||||
</span>
|
||||
|
||||
|
||||
@@ -1482,7 +1825,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l843"><code>../src/litegraph.js:843</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l893"><code>../src/litegraph.js:893</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1493,7 +1836,7 @@ if the nodes are using graphical actions</p>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>Creates a JSON String containing all the info about this graph</p>
|
||||
<p>Creates a Object containing all the info about this graph, it can be serialized</p>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1506,7 +1849,7 @@ if the nodes are using graphical actions</p>
|
||||
<div class="returns-description">
|
||||
|
||||
|
||||
<span class="type">String</span>:
|
||||
<span class="type">Object</span>:
|
||||
|
||||
<p>value of the node</p>
|
||||
|
||||
@@ -1567,7 +1910,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l774"><code>../src/litegraph.js:774</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l817"><code>../src/litegraph.js:817</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1677,7 +2020,7 @@ can be easily accesed from the outside of the graph</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l789"><code>../src/litegraph.js:789</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l832"><code>../src/litegraph.js:832</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1780,7 +2123,7 @@ can be easily accesed from the outside of the graph</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l364"><code>../src/litegraph.js:364</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l394"><code>../src/litegraph.js:394</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1827,8 +2170,8 @@ can be easily accesed from the outside of the graph</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="method_stop" class="method item">
|
||||
<h3 class="name"><code>stop</code></h3>
|
||||
<div id="method_stop execution" class="method item">
|
||||
<h3 class="name"><code>stop execution</code></h3>
|
||||
|
||||
|
||||
<span class="paren">()</span>
|
||||
@@ -1859,7 +2202,7 @@ can be easily accesed from the outside of the graph</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l391"><code>../src/litegraph.js:391</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l421"><code>../src/litegraph.js:421</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1879,95 +2222,6 @@ can be easily accesed from the outside of the graph</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="method_unserialize" class="method item">
|
||||
<h3 class="name"><code>unserialize</code></h3>
|
||||
|
||||
|
||||
<div class="args">
|
||||
<span class="paren">(</span><ul class="args-list inline commas">
|
||||
|
||||
<li class="arg">
|
||||
|
||||
<code>str</code>
|
||||
|
||||
</li>
|
||||
|
||||
</ul><span class="paren">)</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="meta">
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Defined in
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l869"><code>../src/litegraph.js:869</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>Configure a graph from a JSON string</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="params">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<ul class="params-list">
|
||||
|
||||
<li class="param">
|
||||
|
||||
<code class="param-name">str</code>
|
||||
<span class="type">String</span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
<p>configure a graph from a JSON string</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2003,7 +2257,7 @@ can be easily accesed from the outside of the graph</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l457"><code>../src/litegraph.js:457</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l487"><code>../src/litegraph.js:487</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
277
doc/classes/LGraphCanvas.html
Normal file
277
doc/classes/LGraphCanvas.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>LGraphCanvas</title>
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
|
||||
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
||||
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
||||
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
|
||||
</head>
|
||||
<body class="yui3-skin-sam">
|
||||
|
||||
<div id="doc">
|
||||
<div id="hd" class="yui3-g header">
|
||||
<div class="yui3-u-3-4">
|
||||
|
||||
<h1><img src="../assets/css/logo.png" title=""></h1>
|
||||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: </em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
||||
<div class="yui3-u-1-4">
|
||||
<div id="docs-sidebar" class="sidebar apidocs">
|
||||
<div id="api-list">
|
||||
<h2 class="off-left">APIs</h2>
|
||||
<div id="api-tabview" class="tabview">
|
||||
<ul class="tabs">
|
||||
<li><a href="#api-classes">Classes</a></li>
|
||||
<li><a href="#api-modules">Modules</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="api-tabview-filter">
|
||||
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
||||
</div>
|
||||
|
||||
<div id="api-tabview-panel">
|
||||
<ul id="api-classes" class="apis classes">
|
||||
|
||||
<li><a href="../classes/LGraph.html">LGraph</a></li>
|
||||
|
||||
<li><a href="../classes/LGraphCanvas.html">LGraphCanvas</a></li>
|
||||
|
||||
<li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
|
||||
|
||||
<li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul id="api-modules" class="apis modules">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="yui3-u-3-4">
|
||||
<div id="api-options">
|
||||
Show:
|
||||
<label for="api-show-inherited">
|
||||
<input type="checkbox" id="api-show-inherited" checked>
|
||||
Inherited
|
||||
</label>
|
||||
|
||||
<label for="api-show-protected">
|
||||
<input type="checkbox" id="api-show-protected">
|
||||
Protected
|
||||
</label>
|
||||
|
||||
<label for="api-show-private">
|
||||
<input type="checkbox" id="api-show-private">
|
||||
Private
|
||||
</label>
|
||||
<label for="api-show-deprecated">
|
||||
<input type="checkbox" id="api-show-deprecated">
|
||||
Deprecated
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="apidocs">
|
||||
<div id="docs-main">
|
||||
<div class="content">
|
||||
<h1>LGraphCanvas Class</h1>
|
||||
<div class="box meta">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="foundat">
|
||||
Defined in: <a href="../files/.._src_litegraph.js.html#l1794"><code>../src/litegraph.js:1794</code></a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="box intro">
|
||||
<p>The Global Scope. It contains all the registered node classes.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="constructor">
|
||||
<h2>Constructor</h2>
|
||||
<div id="method_LGraphCanvas" class="method item">
|
||||
<h3 class="name"><code>LGraphCanvas</code></h3>
|
||||
|
||||
|
||||
<div class="args">
|
||||
<span class="paren">(</span><ul class="args-list inline commas">
|
||||
|
||||
<li class="arg">
|
||||
|
||||
<code>canvas</code>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="arg">
|
||||
|
||||
<code>graph</code>
|
||||
|
||||
</li>
|
||||
|
||||
</ul><span class="paren">)</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="meta">
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Defined in
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1794"><code>../src/litegraph.js:1794</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="params">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<ul class="params-list">
|
||||
|
||||
<li class="param">
|
||||
|
||||
<code class="param-name">canvas</code>
|
||||
<span class="type">HTMLCanvas</span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
<p>the canvas where you want to render (it accepts a selector in string format)</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="param">
|
||||
|
||||
<code class="param-name">graph</code>
|
||||
<span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="classdocs" class="tabview">
|
||||
<ul class="api-class-tabs">
|
||||
<li class="api-class-tab index"><a href="#index">Index</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<div id="index" class="api-class-tabpanel index">
|
||||
<h2 class="off-left">Item Index</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
||||
<script>prettyPrint();</script>
|
||||
<script src="../assets/js/yui-prettify.js"></script>
|
||||
<script src="../assets/../api.js"></script>
|
||||
<script src="../assets/js/api-filter.js"></script>
|
||||
<script src="../assets/js/api-list.js"></script>
|
||||
<script src="../assets/js/api-search.js"></script>
|
||||
<script src="../assets/js/apidocs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -43,6 +43,8 @@
|
||||
|
||||
<li><a href="../classes/LGraph.html">LGraph</a></li>
|
||||
|
||||
<li><a href="../classes/LGraphCanvas.html">LGraphCanvas</a></li>
|
||||
|
||||
<li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
|
||||
|
||||
<li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
|
||||
|
||||
551
doc/data.json
551
doc/data.json
@@ -7,7 +7,8 @@
|
||||
"classes": {
|
||||
"LiteGraph": 1,
|
||||
"LGraph": 1,
|
||||
"LGraphNode": 1
|
||||
"LGraphNode": 1,
|
||||
"LGraphCanvas": 1
|
||||
},
|
||||
"fors": {},
|
||||
"namespaces": {}
|
||||
@@ -37,7 +38,7 @@
|
||||
"plugin_for": [],
|
||||
"extension_for": [],
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 302,
|
||||
"line": 299,
|
||||
"description": "LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.",
|
||||
"is_constructor": 1
|
||||
},
|
||||
@@ -50,7 +51,7 @@
|
||||
"plugin_for": [],
|
||||
"extension_for": [],
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 947,
|
||||
"line": 997,
|
||||
"description": "Base Class for all the node type classes",
|
||||
"params": [
|
||||
{
|
||||
@@ -59,6 +60,31 @@
|
||||
"type": "String"
|
||||
}
|
||||
]
|
||||
},
|
||||
"LGraphCanvas": {
|
||||
"name": "LGraphCanvas",
|
||||
"shortname": "LGraphCanvas",
|
||||
"classitems": [],
|
||||
"plugins": [],
|
||||
"extensions": [],
|
||||
"plugin_for": [],
|
||||
"extension_for": [],
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1794,
|
||||
"description": "The Global Scope. It contains all the registered node classes.",
|
||||
"is_constructor": 1,
|
||||
"params": [
|
||||
{
|
||||
"name": "canvas",
|
||||
"description": "the canvas where you want to render (it accepts a selector in string format)",
|
||||
"type": "HTMLCanvas"
|
||||
},
|
||||
{
|
||||
"name": "graph",
|
||||
"description": "",
|
||||
"type": "LGraph"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"classitems": [
|
||||
@@ -159,7 +185,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 321,
|
||||
"line": 317,
|
||||
"description": "Removes all nodes from this graph",
|
||||
"itemtype": "method",
|
||||
"name": "clear",
|
||||
@@ -167,7 +193,37 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 364,
|
||||
"line": 361,
|
||||
"description": "Attach Canvas to this graph",
|
||||
"itemtype": "method",
|
||||
"name": "attachCanvas",
|
||||
"params": [
|
||||
{
|
||||
"name": "graph_canvas",
|
||||
"description": "",
|
||||
"type": "GraphCanvas"
|
||||
}
|
||||
],
|
||||
"class": "LGraph"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 380,
|
||||
"description": "Detach Canvas from this graph",
|
||||
"itemtype": "method",
|
||||
"name": "detachCanvas",
|
||||
"params": [
|
||||
{
|
||||
"name": "graph_canvas",
|
||||
"description": "",
|
||||
"type": "GraphCanvas"
|
||||
}
|
||||
],
|
||||
"class": "LGraph"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 394,
|
||||
"description": "Starts running this graph every interval milliseconds.",
|
||||
"itemtype": "method",
|
||||
"name": "start",
|
||||
@@ -182,15 +238,15 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 391,
|
||||
"line": 421,
|
||||
"description": "Stops the execution loop of the graph",
|
||||
"itemtype": "method",
|
||||
"name": "stop",
|
||||
"name": "stop execution",
|
||||
"class": "LGraph"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 413,
|
||||
"line": 443,
|
||||
"description": "Run N steps (cycles) of the graph",
|
||||
"itemtype": "method",
|
||||
"name": "runStep",
|
||||
@@ -205,7 +261,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 457,
|
||||
"line": 487,
|
||||
"description": "Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\nnodes with only inputs.",
|
||||
"itemtype": "method",
|
||||
"name": "updateExecutionOrder",
|
||||
@@ -213,7 +269,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 553,
|
||||
"line": 583,
|
||||
"description": "Returns the amount of time the graph has been running in milliseconds",
|
||||
"itemtype": "method",
|
||||
"name": "getTime",
|
||||
@@ -225,7 +281,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 564,
|
||||
"line": 594,
|
||||
"description": "Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant",
|
||||
"itemtype": "method",
|
||||
"name": "getFixedTime",
|
||||
@@ -237,7 +293,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 575,
|
||||
"line": 605,
|
||||
"description": "Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\nif the nodes are using graphical actions",
|
||||
"itemtype": "method",
|
||||
"name": "getElapsedTime",
|
||||
@@ -249,7 +305,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 587,
|
||||
"line": 617,
|
||||
"description": "Sends an event to all the nodes, useful to trigger stuff",
|
||||
"itemtype": "method",
|
||||
"name": "sendEventToAllNodes",
|
||||
@@ -269,7 +325,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 602,
|
||||
"line": 645,
|
||||
"description": "Adds a new node instasnce to this graph",
|
||||
"itemtype": "method",
|
||||
"name": "add",
|
||||
@@ -284,7 +340,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 647,
|
||||
"line": 690,
|
||||
"description": "Removes a node from the graph",
|
||||
"itemtype": "method",
|
||||
"name": "remove",
|
||||
@@ -299,7 +355,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 708,
|
||||
"line": 751,
|
||||
"description": "Returns a node by its id.",
|
||||
"itemtype": "method",
|
||||
"name": "getNodeById",
|
||||
@@ -314,7 +370,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 721,
|
||||
"line": 764,
|
||||
"description": "Returns a list of nodes that matches a type",
|
||||
"itemtype": "method",
|
||||
"name": "findNodesByType",
|
||||
@@ -333,7 +389,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 737,
|
||||
"line": 780,
|
||||
"description": "Returns a list of nodes that matches a name",
|
||||
"itemtype": "method",
|
||||
"name": "findNodesByName",
|
||||
@@ -352,7 +408,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 753,
|
||||
"line": 796,
|
||||
"description": "Returns the top-most node in this position of the canvas",
|
||||
"itemtype": "method",
|
||||
"name": "getNodeOnPos",
|
||||
@@ -381,7 +437,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 774,
|
||||
"line": 817,
|
||||
"description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph",
|
||||
"itemtype": "method",
|
||||
"name": "setInputData",
|
||||
@@ -401,7 +457,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 789,
|
||||
"line": 832,
|
||||
"description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside",
|
||||
"itemtype": "method",
|
||||
"name": "setInputData",
|
||||
@@ -420,22 +476,30 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 843,
|
||||
"description": "Creates a JSON String containing all the info about this graph",
|
||||
"line": 869,
|
||||
"description": "returns if the graph is in live mode",
|
||||
"itemtype": "method",
|
||||
"name": "isLive",
|
||||
"class": "LGraph"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 893,
|
||||
"description": "Creates a Object containing all the info about this graph, it can be serialized",
|
||||
"itemtype": "method",
|
||||
"name": "serialize",
|
||||
"return": {
|
||||
"description": "value of the node",
|
||||
"type": "String"
|
||||
"type": "Object"
|
||||
},
|
||||
"class": "LGraph"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 869,
|
||||
"line": 920,
|
||||
"description": "Configure a graph from a JSON string",
|
||||
"itemtype": "method",
|
||||
"name": "unserialize",
|
||||
"name": "configure",
|
||||
"params": [
|
||||
{
|
||||
"name": "str",
|
||||
@@ -444,6 +508,441 @@
|
||||
}
|
||||
],
|
||||
"class": "LGraph"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1026,
|
||||
"description": "configure a node from an object",
|
||||
"itemtype": "method",
|
||||
"name": "configure",
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1073,
|
||||
"description": "serialize the content",
|
||||
"itemtype": "method",
|
||||
"name": "serialize",
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1132,
|
||||
"description": "serialize and stringify",
|
||||
"itemtype": "method",
|
||||
"name": "toString",
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1145,
|
||||
"description": "sets the output data",
|
||||
"itemtype": "method",
|
||||
"name": "setOutputData",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"description": "",
|
||||
"type": "*"
|
||||
}
|
||||
],
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1161,
|
||||
"description": "retrieves the input data from one slot",
|
||||
"itemtype": "method",
|
||||
"name": "getInputData",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "data",
|
||||
"type": "*"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1175,
|
||||
"description": "tells you if there is a connection in one input slot",
|
||||
"itemtype": "method",
|
||||
"name": "isInputConnected",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "",
|
||||
"type": "Boolean"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1187,
|
||||
"description": "tells you info about an input connection (which node, type, etc)",
|
||||
"itemtype": "method",
|
||||
"name": "getInputInfo",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "",
|
||||
"type": "Object"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1202,
|
||||
"description": "tells you info about an output connection (which node, type, etc)",
|
||||
"itemtype": "method",
|
||||
"name": "getOutputInfo",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "",
|
||||
"type": "Object"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1217,
|
||||
"description": "tells you if there is a connection in one output slot",
|
||||
"itemtype": "method",
|
||||
"name": "isOutputConnected",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "",
|
||||
"type": "Boolean"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1229,
|
||||
"description": "retrieves all the nodes connected to this output slot",
|
||||
"itemtype": "method",
|
||||
"name": "getOutputNodes",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "",
|
||||
"type": "Array"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1258,
|
||||
"description": "add a new output slot to use in this node",
|
||||
"itemtype": "method",
|
||||
"name": "addOutput",
|
||||
"params": [
|
||||
{
|
||||
"name": "name",
|
||||
"description": "",
|
||||
"type": "String"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"description": "string defining the output type (\"vec3\",\"number\",...)",
|
||||
"type": "String"
|
||||
},
|
||||
{
|
||||
"name": "extra_info",
|
||||
"description": "this can be used to have special properties of an output (special color, position, etc)",
|
||||
"type": "Object"
|
||||
}
|
||||
],
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1277,
|
||||
"description": "remove an existing output slot",
|
||||
"itemtype": "method",
|
||||
"name": "removeOutput",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1289,
|
||||
"description": "add a new input slot to use in this node",
|
||||
"itemtype": "method",
|
||||
"name": "addInput",
|
||||
"params": [
|
||||
{
|
||||
"name": "name",
|
||||
"description": "",
|
||||
"type": "String"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"description": "string defining the input type (\"vec3\",\"number\",...)",
|
||||
"type": "String"
|
||||
},
|
||||
{
|
||||
"name": "extra_info",
|
||||
"description": "this can be used to have special properties of an input (special color, position, etc)",
|
||||
"type": "Object"
|
||||
}
|
||||
],
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1308,
|
||||
"description": "remove an existing input slot",
|
||||
"itemtype": "method",
|
||||
"name": "removeInput",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1320,
|
||||
"description": "add an special connection to this node (used for special kinds of graphs)",
|
||||
"itemtype": "method",
|
||||
"name": "addConnection",
|
||||
"params": [
|
||||
{
|
||||
"name": "name",
|
||||
"description": "",
|
||||
"type": "String"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"description": "string defining the input type (\"vec3\",\"number\",...)",
|
||||
"type": "String"
|
||||
},
|
||||
{
|
||||
"name": "pos",
|
||||
"description": "position of the connection inside the node",
|
||||
"type": "[x,y]"
|
||||
},
|
||||
{
|
||||
"name": "direction",
|
||||
"description": "if is input or output",
|
||||
"type": "String"
|
||||
}
|
||||
],
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1333,
|
||||
"description": "computes the size of a node according to its inputs and output slots",
|
||||
"itemtype": "method",
|
||||
"name": "computeSize",
|
||||
"params": [
|
||||
{
|
||||
"name": "minHeight",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "the total size",
|
||||
"type": "Number"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1351,
|
||||
"description": "returns the bounding of the object, used for rendering purposes",
|
||||
"itemtype": "method",
|
||||
"name": "getBounding",
|
||||
"return": {
|
||||
"description": "the total size",
|
||||
"type": "Float32Array[4]"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1361,
|
||||
"description": "checks if a point is inside the shape of a node",
|
||||
"itemtype": "method",
|
||||
"name": "isPointInsideNode",
|
||||
"params": [
|
||||
{
|
||||
"name": "x",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
},
|
||||
{
|
||||
"name": "y",
|
||||
"description": "",
|
||||
"type": "Number"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "",
|
||||
"type": "Boolean"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1401,
|
||||
"description": "connect this node output to the input of another node",
|
||||
"itemtype": "method",
|
||||
"name": "connect",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "(could be the number of the slot or the string with the name of the slot)",
|
||||
"type": "Number_or_string"
|
||||
},
|
||||
{
|
||||
"name": "node",
|
||||
"description": "the target node",
|
||||
"type": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"name": "target_slot",
|
||||
"description": "the input slot of the target node (could be the number of the slot or the string with the name of the slot)",
|
||||
"type": "Number_or_string"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "if it was connected succesfully",
|
||||
"type": "Boolean"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1482,
|
||||
"description": "disconnect one output to an specific node",
|
||||
"itemtype": "method",
|
||||
"name": "disconnectOutput",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "(could be the number of the slot or the string with the name of the slot)",
|
||||
"type": "Number_or_string"
|
||||
},
|
||||
{
|
||||
"name": "target_node",
|
||||
"description": "the target node to which this slot is connected [Optional, if not target_node is specified all nodes will be disconnected]",
|
||||
"type": "LGraphNode"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "if it was disconnected succesfully",
|
||||
"type": "Boolean"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1545,
|
||||
"description": "disconnect one input",
|
||||
"itemtype": "method",
|
||||
"name": "disconnectInput",
|
||||
"params": [
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "(could be the number of the slot or the string with the name of the slot)",
|
||||
"type": "Number_or_string"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "if it was disconnected succesfully",
|
||||
"type": "Boolean"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1599,
|
||||
"description": "returns the center of a connection point in canvas coords",
|
||||
"itemtype": "method",
|
||||
"name": "getConnectionPos",
|
||||
"params": [
|
||||
{
|
||||
"name": "is_input",
|
||||
"description": "true if if a input slot, false if it is an output",
|
||||
"type": "Boolean"
|
||||
},
|
||||
{
|
||||
"name": "slot",
|
||||
"description": "(could be the number of the slot or the string with the name of the slot)",
|
||||
"type": "Number_or_string"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"description": "the position",
|
||||
"type": "[x,y]"
|
||||
},
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1756,
|
||||
"description": "Collapse the node to make it smaller on the canvas",
|
||||
"itemtype": "method",
|
||||
"name": "collapse",
|
||||
"class": "LGraphNode"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1769,
|
||||
"description": "Forces the node to do not move or realign on Z",
|
||||
"itemtype": "method",
|
||||
"name": "pin",
|
||||
"class": "LGraphNode"
|
||||
}
|
||||
],
|
||||
"warnings": []
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -43,6 +43,8 @@
|
||||
|
||||
<li><a href="./classes/LGraph.html">LGraph</a></li>
|
||||
|
||||
<li><a href="./classes/LGraphCanvas.html">LGraphCanvas</a></li>
|
||||
|
||||
<li><a href="./classes/LGraphNode.html">LGraphNode</a></li>
|
||||
|
||||
<li><a href="./classes/LiteGraph.html">LiteGraph</a></li>
|
||||
|
||||
165
src/litegraph-editor.js
Normal file
165
src/litegraph-editor.js
Normal file
@@ -0,0 +1,165 @@
|
||||
//NOT FINISHED
|
||||
|
||||
function Editor(container_id, options)
|
||||
{
|
||||
//fill container
|
||||
var html = "<div class='header'><div class='tools tools-left'></div><div class='tools tools-right'></div></div>";
|
||||
html += "<div class='content'><div class='editor-area'><canvas class='graphcanvas' width='1000' height='500' tabindex=10></canvas></div></div>";
|
||||
html += "<div class='footer'><div class='tools tools-left'></div><div class='tools tools-right'></div></div>";
|
||||
|
||||
var root = document.createElement("div");
|
||||
this.root = root;
|
||||
root.className = "litegraph-editor";
|
||||
root.innerHTML = html;
|
||||
|
||||
var canvas = root.querySelector(".graphcanvas");
|
||||
|
||||
//create graph
|
||||
var graph = this.graph = new LGraph();
|
||||
var graphcanvas = this.graphcanvas = new LGraphCanvas(canvas,graph);
|
||||
graphcanvas.background_image = "imgs/grid.png";
|
||||
graph.onAfterExecute = function() { graphcanvas.draw(true) };
|
||||
|
||||
//add stuff
|
||||
this.addLoadCounter();
|
||||
this.addToolsButton("playnode_button","Play","imgs/icon-play.png", this.onPlayButton.bind(this), ".tools-right" );
|
||||
this.addToolsButton("playstepnode_button","Step","imgs/icon-playstep.png", this.onPlayStepButton.bind(this), ".tools-right" );
|
||||
|
||||
this.addToolsButton("livemode_button","Live","imgs/icon-record.png", this.onLiveButton.bind(this), ".tools-right" );
|
||||
this.addToolsButton("maximize_button","","imgs/icon-maximize.png", this.onFullscreenButton.bind(this), ".tools-right" );
|
||||
|
||||
this.addMiniWindow(300,200);
|
||||
|
||||
//append to DOM
|
||||
var parent = document.getElementById(container_id);
|
||||
if(parent)
|
||||
parent.appendChild(root);
|
||||
|
||||
graphcanvas.resize();
|
||||
//graphcanvas.draw(true,true);
|
||||
}
|
||||
|
||||
Editor.prototype.addLoadCounter = function()
|
||||
{
|
||||
var meter = document.createElement("div");
|
||||
meter.className = 'headerpanel loadmeter toolbar-widget';
|
||||
|
||||
var html = "<div class='cpuload'><strong>CPU</strong> <div class='bgload'><div class='fgload'></div></div></div>";
|
||||
html += "<div class='gpuload'><strong>GFX</strong> <div class='bgload'><div class='fgload'></div></div></div>";
|
||||
|
||||
meter.innerHTML = html;
|
||||
this.root.querySelector(".header .tools-left").appendChild(meter);
|
||||
var self = this;
|
||||
|
||||
setInterval(function() {
|
||||
meter.querySelector(".cpuload .fgload").style.width = ((2*self.graph.elapsed_time) * 90) + "px";
|
||||
if(self.graph.status == LGraph.STATUS_RUNNING)
|
||||
meter.querySelector(".gpuload .fgload").style.width = ((self.graphcanvas.render_time*10) * 90) + "px";
|
||||
else
|
||||
meter.querySelector(".gpuload .fgload").style.width = 4 + "px";
|
||||
},200);
|
||||
}
|
||||
|
||||
Editor.prototype.addToolsButton = function(id,name,icon_url, callback, container)
|
||||
{
|
||||
if(!container) container = ".tools";
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.id = id;
|
||||
button.innerHTML = "<img src='"+icon_url+"'/> "+name+"";
|
||||
button.addEventListener("click", callback);
|
||||
|
||||
this.root.querySelector(container).appendChild(button);
|
||||
|
||||
}
|
||||
|
||||
Editor.prototype.goFullscreen = function()
|
||||
{
|
||||
if(this.root.requestFullscreen)
|
||||
this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else if(this.root.mozRequestFullscreen)
|
||||
this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else if(this.root.webkitRequestFullscreen)
|
||||
this.root.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else
|
||||
throw("Fullscreen not supported");
|
||||
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.graphcanvas.resize();
|
||||
},100);
|
||||
}
|
||||
|
||||
Editor.prototype.onPlayButton = function()
|
||||
{
|
||||
var graph = this.graph;
|
||||
var button = this.root.querySelector("#playnode_button");
|
||||
|
||||
if(graph.status == LGraph.STATUS_STOPPED)
|
||||
{
|
||||
button.innerHTML = "<img src='imgs/icon-stop.png'/> Stop";
|
||||
graph.start(1);
|
||||
}
|
||||
else
|
||||
{
|
||||
button.innerHTML = "<img src='imgs/icon-play.png'/> Play";
|
||||
graph.stop();
|
||||
}
|
||||
}
|
||||
|
||||
Editor.prototype.onPlayStepButton = function()
|
||||
{
|
||||
var graph = this.graph;
|
||||
graph.runStep(1);
|
||||
this.graphcanvas.draw(true,true);
|
||||
}
|
||||
|
||||
Editor.prototype.onLiveButton = function()
|
||||
{
|
||||
var is_live_mode = !this.graphcanvas.live_mode;
|
||||
this.graphcanvas.switchLiveMode(true);
|
||||
this.graphcanvas.draw();
|
||||
var url = this.graphcanvas.live_mode ? "imgs/gauss_bg_medium.jpg" : "imgs/gauss_bg.jpg";
|
||||
var button = this.root.querySelector("#livemode_button");
|
||||
button.innerHTML = !is_live_mode ? "<img src='imgs/icon-record.png'/> Live" : "<img src='imgs/icon-gear.png'/> Edit" ;
|
||||
}
|
||||
|
||||
Editor.prototype.onFullscreenButton = function()
|
||||
{
|
||||
this.goFullscreen();
|
||||
}
|
||||
|
||||
Editor.prototype.onMaximizeButton = function()
|
||||
{
|
||||
this.maximize();
|
||||
}
|
||||
|
||||
Editor.prototype.addMiniWindow = function(w,h)
|
||||
{
|
||||
var miniwindow = document.createElement("div");
|
||||
miniwindow.className = "litegraph miniwindow";
|
||||
miniwindow.innerHTML = "<canvas class='graphcanvas' width='"+w+"' height='"+h+"' tabindex=10></canvas>";
|
||||
var canvas = miniwindow.querySelector("canvas");
|
||||
|
||||
var graphcanvas = new LGraphCanvas(canvas, this.graph);
|
||||
graphcanvas.background_image = "imgs/grid.png";
|
||||
graphcanvas.scale = 0.5;
|
||||
|
||||
miniwindow.style.position = "absolute";
|
||||
miniwindow.style.top = "4px";
|
||||
miniwindow.style.right = "4px";
|
||||
|
||||
var close_button = document.createElement("div");
|
||||
close_button.className = "corner-button";
|
||||
close_button.innerHTML = "X";
|
||||
close_button.addEventListener("click",function(e) {
|
||||
graphcanvas.setGraph(null);
|
||||
miniwindow.parentNode.removeChild(miniwindow);
|
||||
});
|
||||
miniwindow.appendChild(close_button);
|
||||
|
||||
|
||||
this.root.querySelector(".content").appendChild(miniwindow);
|
||||
}
|
||||
|
||||
LiteGraph.Editor = Editor;
|
||||
882
src/litegraph.js
882
src/litegraph.js
File diff suppressed because it is too large
Load Diff
@@ -79,7 +79,7 @@
|
||||
ctx.textAlign = "left";
|
||||
},
|
||||
|
||||
onDrawBackground: function(ctx)
|
||||
onDrawForeground: function(ctx)
|
||||
{
|
||||
this.onDrawImageKnob(ctx);
|
||||
},
|
||||
@@ -227,7 +227,7 @@
|
||||
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)
|
||||
onDrawForeground: function(ctx)
|
||||
{
|
||||
this.onDrawImage(ctx);
|
||||
},
|
||||
@@ -451,7 +451,7 @@
|
||||
ctx.textAlign = "left";
|
||||
},
|
||||
|
||||
onDrawBackground: function(ctx)
|
||||
onDrawForeground: function(ctx)
|
||||
{
|
||||
this.drawBevelShape(ctx);
|
||||
},
|
||||
@@ -515,7 +515,7 @@
|
||||
if( v != undefined )
|
||||
this.properties["value"] = v;
|
||||
},
|
||||
onDrawBackground: function(ctx)
|
||||
onDrawForeground: function(ctx)
|
||||
{
|
||||
//border
|
||||
ctx.lineWidth = 1;
|
||||
@@ -535,7 +535,7 @@
|
||||
inputs: [["",0]],
|
||||
properties:{value:"...",font:"Arial", fontsize:18, color:"#AAA", align:"left", glowSize:0, decimals:1},
|
||||
|
||||
onDrawBackground: function(ctx)
|
||||
onDrawForeground: function(ctx)
|
||||
{
|
||||
//ctx.fillStyle="#000";
|
||||
//ctx.fillRect(0,0,100,60);
|
||||
@@ -645,7 +645,7 @@
|
||||
this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]);
|
||||
},
|
||||
|
||||
onDrawBackground: function(ctx)
|
||||
onDrawForeground: function(ctx)
|
||||
{
|
||||
if(this.lineargradient == null)
|
||||
this.createGradient(ctx);
|
||||
|
||||
Reference in New Issue
Block a user