moved default color to LiteGraph.LINK_COLOR

This commit is contained in:
tamat
2018-10-24 15:32:40 +02:00
parent c69e8ca5d5
commit 33d527541a
3 changed files with 43 additions and 35 deletions

View File

@@ -26,6 +26,8 @@
var LiteGraph = global.LiteGraph = {
CANVAS_GRID_SIZE: 10,
NODE_TITLE_HEIGHT: 20,
NODE_SLOT_HEIGHT: 15,
NODE_WIDGET_HEIGHT: 20,
@@ -33,7 +35,6 @@ var LiteGraph = global.LiteGraph = {
NODE_MIN_WIDTH: 50,
NODE_COLLAPSED_RADIUS: 10,
NODE_COLLAPSED_WIDTH: 80,
CANVAS_GRID_SIZE: 10,
NODE_TITLE_COLOR: "#999",
NODE_TEXT_SIZE: 14,
NODE_TEXT_COLOR: "#AAA",
@@ -42,10 +43,12 @@ var LiteGraph = global.LiteGraph = {
NODE_DEFAULT_BGCOLOR: "#444",
NODE_DEFAULT_BOXCOLOR: "#888",
NODE_DEFAULT_SHAPE: "box",
LINK_COLOR: "#AAD",
EVENT_LINK_COLOR: "#F85",
MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
DEFAULT_POSITION: [100,100],//default node position
node_images_path: "",
VALID_SHAPES: ["default","box","round","card"], //,"circle"
//shapes are used for nodes but also for slots
@@ -73,6 +76,7 @@ var LiteGraph = global.LiteGraph = {
AUTOHIDE_TITLE: 3,
proxy: null, //used to redirect calls
node_images_path: "",
debug: false,
throw_errors: true,
@@ -3240,7 +3244,7 @@ function LGraphCanvas( canvas, graph, options )
this.title_text_font = "bold "+LiteGraph.NODE_TEXT_SIZE+"px Arial";
this.inner_text_font = "normal "+LiteGraph.NODE_SUBTEXT_SIZE+"px Arial";
this.node_title_color = LiteGraph.NODE_TITLE_COLOR;
this.default_link_color = "#AAC";
this.default_link_color = LiteGraph.LINK_COLOR;
this.default_connection_color = {
input_off: "#AAB",
input_on: "#7F7",
@@ -4994,9 +4998,9 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
var link_color = null;
switch( this.connecting_output.type )
{
case LiteGraph.EVENT: link_color = "#F85"; break;
case LiteGraph.EVENT: link_color = LiteGraph.EVENT_LINK_COLOR; break;
default:
link_color = "#AFA";
link_color = this.default_link_color;
}
//the connection being dragged by the mouse
this.renderLink( ctx, this.connecting_pos, [this.canvas_mouse[0],this.canvas_mouse[1]], null, false, null, link_color );
@@ -5716,7 +5720,7 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
//choose color
if( !color && link )
color = LGraphCanvas.link_type_colors[ link.type ];
if(!color)
if( !color )
color = this.default_link_color;
if( link != null && this.highlighted_links[ link.id ] )

View File

@@ -1,14 +1,14 @@
(function(s){function h(a){l.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear();a&&this.configure(a)}function e(a){this._ctor(a)}function n(a){this._ctor(a)}function d(a,b,g){g=g||{};this.background_image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=";
a&&a.constructor===String&&(a=document.querySelector(a));this.max_zoom=10;this.min_zoom=0.1;this.zoom_modify_alpha=!0;this.title_text_font="bold "+l.NODE_TEXT_SIZE+"px Arial";this.inner_text_font="normal "+l.NODE_SUBTEXT_SIZE+"px Arial";this.node_title_color=l.NODE_TITLE_COLOR;this.default_link_color="#AAC";this.default_connection_color={input_off:"#AAB",input_on:"#7F7",output_off:"#AAB",output_on:"#7F7"};this.highquality_render=!0;this.use_gradients=!1;this.editor_alpha=1;this.pause_rendering=!1;
this.render_only_selected=this.clear_background=this.render_shadows=!0;this.live_mode=!1;this.allow_searchbox=this.allow_interaction=this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.drag_mode=!1;this.filter=this.dragging_rectangle=null;this.always_render_background=!1;this.render_canvas_border=!0;this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.canvas_mouse=[0,0];this.onSearchBoxSelection=this.onSearchBox=
a&&a.constructor===String&&(a=document.querySelector(a));this.max_zoom=10;this.min_zoom=0.1;this.zoom_modify_alpha=!0;this.title_text_font="bold "+l.NODE_TEXT_SIZE+"px Arial";this.inner_text_font="normal "+l.NODE_SUBTEXT_SIZE+"px Arial";this.node_title_color=l.NODE_TITLE_COLOR;this.default_link_color=l.LINK_COLOR;this.default_connection_color={input_off:"#AAB",input_on:"#7F7",output_off:"#AAB",output_on:"#7F7"};this.highquality_render=!0;this.use_gradients=!1;this.editor_alpha=1;this.pause_rendering=
!1;this.render_only_selected=this.clear_background=this.render_shadows=!0;this.live_mode=!1;this.allow_searchbox=this.allow_interaction=this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.drag_mode=!1;this.filter=this.dragging_rectangle=null;this.always_render_background=!1;this.render_canvas_border=!0;this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.canvas_mouse=[0,0];this.onSearchBoxSelection=this.onSearchBox=
null;this.connections_width=3;this.round_radius=8;this.node_widget=this.current_node=null;this.last_mouse_position=[0,0];b&&b.attachCanvas(this);this.setCanvas(a);this.clear();g.skip_render||this.startRendering();this.autoresize=g.autoresize}function r(a,b){return Math.sqrt((b[0]-a[0])*(b[0]-a[0])+(b[1]-a[1])*(b[1]-a[1]))}function q(a,b,g,c,f,k){return g<a&&g+f>a&&c<b&&c+k>b?!0:!1}function t(a,b){var g=a[0]+a[2],c=a[1]+a[3],f=b[1]+b[3];return a[0]>b[0]+b[2]||a[1]>f||g<b[0]||c<b[1]?!1:!0}function u(a,
b){function g(a){var b=parseInt(f.style.top);f.style.top=(b+0.1*a.deltaY).toFixed()+"px";a.preventDefault();return!0}this.options=b=b||{};var c=this;b.parentMenu&&(b.parentMenu.constructor!==this.constructor?(console.error("parentMenu must be of class ContextMenu, ignoring it"),b.parentMenu=null):(this.parentMenu=b.parentMenu,this.parentMenu.lock=!0,this.parentMenu.current_submenu=this));b.event&&b.event.constructor!==MouseEvent&&b.event.constructor!==CustomEvent&&(console.error("Event passed to ContextMenu is not of type MouseEvent or CustomEvent. Ignoring it."),
b.event=null);var f=document.createElement("div");f.className="litegraph litecontextmenu litemenubar-panel";f.style.minWidth=100;f.style.minHeight=100;f.style.pointerEvents="none";setTimeout(function(){f.style.pointerEvents="auto"},100);f.addEventListener("mouseup",function(a){a.preventDefault();return!0},!0);f.addEventListener("contextmenu",function(a){if(2!=a.button)return!1;a.preventDefault();return!1},!0);f.addEventListener("mousedown",function(a){if(2==a.button)return c.close(),a.preventDefault(),
!0},!0);f.addEventListener("wheel",g,!0);f.addEventListener("mousewheel",g,!0);this.root=f;if(b.title){var k=document.createElement("div");k.className="litemenu-title";k.innerHTML=b.title;f.appendChild(k)}var k=0,p;for(p in a){var d=a.constructor==Array?a[p]:p;null!=d&&d.constructor!==String&&(d=void 0===d.content?String(d):d.content);this.addItem(d,a[p],b);k++}f.addEventListener("mouseleave",function(a){c.lock||c.close(a)});p=document;b.event&&(p=b.event.target.ownerDocument);p||(p=document);p.body.appendChild(f);
k=b.left||0;p=b.top||0;if(b.event){k=b.event.pageX-10;p=b.event.pageY-10;b.title&&(p-=20);b.parentMenu&&(k=b.parentMenu.root.getBoundingClientRect(),k=k.left+k.width);var d=document.body.getBoundingClientRect(),l=f.getBoundingClientRect();k>d.width-l.width-10&&(k=d.width-l.width-10);p>d.height-l.height-10&&(p=d.height-l.height-10)}f.style.left=k+"px";f.style.top=p+"px"}var l=s.LiteGraph={NODE_TITLE_HEIGHT:20,NODE_SLOT_HEIGHT:15,NODE_WIDGET_HEIGHT:20,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,
NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_TITLE_COLOR:"#999",NODE_TEXT_SIZE:14,NODE_TEXT_COLOR:"#AAA",NODE_SUBTEXT_SIZE:12,NODE_DEFAULT_COLOR:"#333",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#888",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",VALID_SHAPES:["default","box","round","card"],BOX_SHAPE:1,ROUND_SHAPE:2,CIRCLE_SHAPE:3,CARD_SHAPE:4,ARROW_SHAPE:5,INPUT:1,OUTPUT:2,EVENT:-1,ACTION:-1,ALWAYS:0,ON_EVENT:1,NEVER:2,ON_TRIGGER:3,NORMAL_TITLE:0,
NO_TITLE:1,TRANSPARENT_TITLE:2,AUTOHIDE_TITLE:3,proxy:null,debug:!1,throw_errors:!0,allow_scripts:!0,registered_node_types:{},node_types_by_file_extension:{},Nodes:{},registerNodeType:function(a,b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype";b.type=a;l.debug&&console.log("Node registered: "+a);a.split("/");var g=b.name,c=a.lastIndexOf("/");b.category=a.substr(0,c);b.title||(b.title=g);if(b.prototype)for(var f in e.prototype)b.prototype[f]||(b.prototype[f]=
e.prototype[f]);Object.defineProperty(b.prototype,"shape",{set:function(a){switch(a){case "default":delete this._shape;break;case "box":this._shape=l.BOX_SHAPE;break;case "round":this._shape=l.ROUND_SHAPE;break;case "circle":this._shape=l.CIRCLE_SHAPE;break;case "card":this._shape=l.CARD_SHAPE;break;default:this._shape=a}},get:function(a){return this._shape},enumerable:!0});this.registered_node_types[a]=b;b.constructor.name&&(this.Nodes[g]=b);b.prototype.onPropertyChange&&console.warn("LiteGraph node class "+
k=b.left||0;p=b.top||0;if(b.event){k=b.event.pageX-10;p=b.event.pageY-10;b.title&&(p-=20);b.parentMenu&&(k=b.parentMenu.root.getBoundingClientRect(),k=k.left+k.width);var d=document.body.getBoundingClientRect(),l=f.getBoundingClientRect();k>d.width-l.width-10&&(k=d.width-l.width-10);p>d.height-l.height-10&&(p=d.height-l.height-10)}f.style.left=k+"px";f.style.top=p+"px"}var l=s.LiteGraph={CANVAS_GRID_SIZE:10,NODE_TITLE_HEIGHT:20,NODE_SLOT_HEIGHT:15,NODE_WIDGET_HEIGHT:20,NODE_WIDTH:140,NODE_MIN_WIDTH:50,
NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,NODE_TITLE_COLOR:"#999",NODE_TEXT_SIZE:14,NODE_TEXT_COLOR:"#AAA",NODE_SUBTEXT_SIZE:12,NODE_DEFAULT_COLOR:"#333",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#888",NODE_DEFAULT_SHAPE:"box",LINK_COLOR:"#AAD",EVENT_LINK_COLOR:"#F85",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],VALID_SHAPES:["default","box","round","card"],BOX_SHAPE:1,ROUND_SHAPE:2,CIRCLE_SHAPE:3,CARD_SHAPE:4,ARROW_SHAPE:5,INPUT:1,OUTPUT:2,EVENT:-1,ACTION:-1,ALWAYS:0,ON_EVENT:1,
NEVER:2,ON_TRIGGER:3,NORMAL_TITLE:0,NO_TITLE:1,TRANSPARENT_TITLE:2,AUTOHIDE_TITLE:3,proxy:null,node_images_path:"",debug:!1,throw_errors:!0,allow_scripts:!0,registered_node_types:{},node_types_by_file_extension:{},Nodes:{},registerNodeType:function(a,b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype";b.type=a;l.debug&&console.log("Node registered: "+a);a.split("/");var g=b.name,c=a.lastIndexOf("/");b.category=a.substr(0,c);b.title||(b.title=g);if(b.prototype)for(var f in e.prototype)b.prototype[f]||
(b.prototype[f]=e.prototype[f]);Object.defineProperty(b.prototype,"shape",{set:function(a){switch(a){case "default":delete this._shape;break;case "box":this._shape=l.BOX_SHAPE;break;case "round":this._shape=l.ROUND_SHAPE;break;case "circle":this._shape=l.CIRCLE_SHAPE;break;case "card":this._shape=l.CARD_SHAPE;break;default:this._shape=a}},get:function(a){return this._shape},enumerable:!0});this.registered_node_types[a]=b;b.constructor.name&&(this.Nodes[g]=b);b.prototype.onPropertyChange&&console.warn("LiteGraph node class "+
a+" has onPropertyChange method, it must be called onPropertyChanged with d at the end");if(b.supported_extensions)for(f in b.supported_extensions)this.node_types_by_file_extension[b.supported_extensions[f].toLowerCase()]=b},wrapFunctionAsNode:function(a,b,g,c){for(var f=Array(b.length),k="",p=l.getParameterNames(b),d=0;d<p.length;++d)k+="this.addInput('"+p[d]+"',"+(g&&g[d]?"'"+g[d]+"'":"0")+");\n";g=Function(k+("this.addOutput('out',"+(c?"'"+c+"'":0)+");\n"));g.title=a.split("/").pop();g.desc="Generated from "+
b.name;g.prototype.onExecute=function(){for(var a=0;a<f.length;++a)f[a]=this.getInputData(a);a=b.apply(this,f);this.setOutputData(0,a)};this.registerNodeType(a,g)},addNodeMethod:function(a,b){e.prototype[a]=b;for(var g in this.registered_node_types){var c=this.registered_node_types[g];c.prototype[a]&&(c.prototype["_"+a]=c.prototype[a]);c.prototype[a]=b}},createNode:function(a,b,g){var c=this.registered_node_types[a];if(!c)return l.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;
b=b||c.title||a;c=new c(b);c.type=a;!c.title&&b&&(c.title=b);c.properties||(c.properties={});c.properties_info||(c.properties_info=[]);c.flags||(c.flags={});c.size||(c.size=c.computeSize());c.pos||(c.pos=l.DEFAULT_POSITION.concat());c.mode||(c.mode=l.ALWAYS);if(g)for(var f in g)c[f]=g[f];return c},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a,b){var g=[],c;for(c in this.registered_node_types){var f=this.registered_node_types[c];b&&f.filter&&f.filter!=
@@ -118,21 +118,21 @@ this.offset[0])*this.scale;b[1]=(a[1]+this.offset[1])*this.scale;return b};d.pro
var m=new Float32Array(4);d.prototype.computeVisibleNodes=function(a,b){var c=b||[];c.length=0;a=a||this.graph._nodes;for(var d=0,f=a.length;d<f;++d){var k=a[d];(!this.live_mode||k.onDrawBackground||k.onDrawForeground)&&t(this.visible_area,k.getBounding(m))&&c.push(k)}return c};d.prototype.draw=function(a,b){if(this.canvas){var c=l.getTime();this.render_time=0.001*(c-this.last_draw_time);this.last_draw_time=c;if(this.graph){var d=[-this.offset[0],-this.offset[1]],f=[d[0]+this.canvas.width/this.scale,
d[1]+this.canvas.height/this.scale];this.visible_area=new Float32Array([d[0],d[1],f[0]-d[0],f[1]-d[1]])}(this.dirty_bgcanvas||b||this.always_render_background||this.graph&&this.graph._last_trigger_time&&1E3>c-this.graph._last_trigger_time)&&this.drawBackCanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=this.render_time?1/this.render_time:0;this.frame+=1}};d.prototype.drawFrontCanvas=function(){this.dirty_canvas=!1;this.ctx||(this.ctx=this.bgcanvas.getContext("2d"));var a=this.ctx;if(a){a.start2D&&
a.start2D();var b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());this.clear_background&&a.clearRect(0,0,b.width,b.height);this.bgcanvas==this.canvas?this.drawBackCanvas():a.drawImage(this.bgcanvas,0,0);if(this.onRender)this.onRender(b,a);this.show_info&&this.renderInfo(a);if(this.graph){a.save();a.scale(this.scale,this.scale);a.translate(this.offset[0],this.offset[1]);
for(var b=this.computeVisibleNodes(null,this.visible_nodes),c=0;c<b.length;++c){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));if(null!=this.connecting_pos){a.lineWidth=this.connections_width;b=null;switch(this.connecting_output.type){case l.EVENT:b="#F85";break;default:b="#AFA"}this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]],null,!1,null,b);a.beginPath();this.connecting_output.type===
l.EVENT||this.connecting_output.shape===l.BOX_SHAPE?a.rect(this.connecting_pos[0]-6+0.5,this.connecting_pos[1]-5+0.5,14,10):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())}this.dragging_rectangle&&(a.strokeStyle="#FFF",a.strokeRect(this.dragging_rectangle[0],this.dragging_rectangle[1],this.dragging_rectangle[2],this.dragging_rectangle[3]));
a.restore()}this.dirty_area&&a.restore();a.finish2D&&a.finish2D()}};d.prototype.renderInfo=function(a,b,c){b=b||0;c=c||0;a.save();a.translate(b,c);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("V: "+this.graph._version,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13);a.restore()};d.prototype.drawBackCanvas=function(){var a=this.bgcanvas;if(a.width!=
this.canvas.width||a.height!=this.canvas.height)a.width=this.canvas.width,a.height=this.canvas.height;this.bgctx||(this.bgctx=this.bgcanvas.getContext("2d"));var b=this.bgctx;b.start&&b.start();this.clear_background&&b.clearRect(0,0,a.width,a.height);this._graph_stack&&this._graph_stack.length&&(b.strokeStyle=this._graph_stack[this._graph_stack.length-1].bgcolor,b.lineWidth=10,b.strokeRect(1,1,a.width-2,a.height-2),b.lineWidth=1);var c=!1;this.onRenderBackground&&(c=this.onRenderBackground(a,b));
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&&!c){b.globalAlpha=this.zoom_modify_alpha?(1-0.5/this.scale)*this.editor_alpha:this.editor_alpha;b.imageSmoothingEnabled=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 d=this;this._bg_img.onload=function(){d.draw(!0,!0)}}c=null;null==this._pattern&&0<this._bg_img.width?(c=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=c):c=this._pattern;c&&(b.fillStyle=c,b.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2],this.visible_area[3]),b.fillStyle="transparent");b.globalAlpha=1;b.imageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=!0}this.graph._groups.length&&!this.live_mode&&this.drawGroups(a,
b);if(this.onBackgroundRender)this.onBackgroundRender(a,b);this.render_canvas_border&&(b.strokeStyle="#235",b.strokeRect(0,0,a.width,a.height));this.render_connections_shadows?(b.shadowColor="#000",b.shadowOffsetX=0,b.shadowOffsetY=0,b.shadowBlur=6):b.shadowColor="rgba(0,0,0,0)";this.live_mode||this.drawConnections(b);b.shadowColor="rgba(0,0,0,0)";b.restore()}b.finish&&b.finish();this.dirty_bgcanvas=!1;this.dirty_canvas=!0};var c=new Float32Array(2);d.prototype.drawNode=function(a,b){this.current_node=
a;var g=a.color||a.constructor.color||l.NODE_DEFAULT_COLOR,d=a.bgcolor||a.constructor.bgcolor||l.NODE_DEFAULT_BGCOLOR;a.selected||(this.render_shadows?(b.shadowColor="rgba(0,0,0,0.5)",b.shadowOffsetX=2,b.shadowOffsetY=2,b.shadowBlur=3):b.shadowColor="transparent");if(this.live_mode){if(!a.flags.collapsed&&(b.shadowColor="transparent",a.onDrawForeground))a.onDrawForeground(b,this)}else if(!a.flags.collapsed||!a.onDrawCollaped||!0!=a.onDrawCollapsed(b,this)){var f=this.editor_alpha;b.globalAlpha=f;
var k=a._shape||l.BOX_SHAPE;c.set(a.size);if(a.flags.collapsed){b.font=this.inner_text_font;var p=a.getTitle?a.getTitle():a.title;a._collapsed_width=Math.min(a.size[0],b.measureText(p).width+40);c[0]=a._collapsed_width;c[1]=0}a.flags.clip_area&&(b.save(),b.beginPath(),k==l.BOX_SHAPE?b.rect(0,0,c[0],c[1]):k==l.ROUND_SHAPE?b.roundRect(0,0,c[0],c[1],10):k==l.CIRCLE_SHAPE&&b.arc(0.5*c[0],0.5*c[1],0.5*c[0],0,2*Math.PI),b.clip());this.drawNodeShape(a,b,c,g,d,a.selected,a.mouseOver);b.shadowColor="transparent";
b.textAlign="left";b.font=this.inner_text_font;g=0.6<this.scale;d=this.connecting_output;b.lineWidth=1;k=0;if(a.flags.collapsed){if(a.inputs)for(p=0;p<a.inputs.length;p++)if(m=a.inputs[p],null!=m.link){b.fillStyle=m.colorOn||this.default_connection_color.input_on;b.beginPath();m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(0.5,4-l.NODE_TITLE_HEIGHT+0.5,14,l.NODE_TITLE_HEIGHT-8):m.shape===l.ARROW_SHAPE?(b.moveTo(8,-0.5*l.NODE_TITLE_HEIGHT),b.lineTo(-4,-0.8*l.NODE_TITLE_HEIGHT),b.lineTo(-4,-0.2*l.NODE_TITLE_HEIGHT),
b.closePath()):b.arc(0,-0.5*l.NODE_TITLE_HEIGHT,4,0,2*Math.PI);b.fill();break}if(a.outputs)for(p=0;p<a.outputs.length;p++)m=a.outputs[p],m.links&&m.links.length&&(b.fillStyle=m.colorOn||this.default_connection_color.output_on,b.strokeStyle="black",b.beginPath(),m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(a._collapsed_width-4+0.5,4-l.NODE_TITLE_HEIGHT+0.5,14,l.NODE_TITLE_HEIGHT-8):m.shape===l.ARROW_SHAPE?(b.moveTo(a._collapsed_width+6,-0.5*l.NODE_TITLE_HEIGHT),b.lineTo(a._collapsed_width-6,-0.8*
l.NODE_TITLE_HEIGHT),b.lineTo(a._collapsed_width-6,-0.2*l.NODE_TITLE_HEIGHT),b.closePath()):b.arc(a._collapsed_width,-0.5*l.NODE_TITLE_HEIGHT,4,0,2*Math.PI),b.fill(),b.stroke())}else{if(a.inputs)for(p=0;p<a.inputs.length;p++){var m=a.inputs[p];b.globalAlpha=f;this.connecting_node&&l.isValidConnection(m.type&&d.type)&&(b.globalAlpha=0.4*f);b.fillStyle=null!=m.link?m.colorOn||this.default_connection_color.input_on:m.colorOff||this.default_connection_color.input_off;var e=a.getConnectionPos(!0,p);e[0]-=
a.pos[0];e[1]-=a.pos[1];k<e[1]+0.5*l.NODE_SLOT_HEIGHT&&(k=e[1]+0.5*l.NODE_SLOT_HEIGHT);b.beginPath();m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(e[0]-6+0.5,e[1]-5+0.5,14,10):m.shape===l.ARROW_SHAPE?(b.moveTo(e[0]+8,e[1]+0.5),b.lineTo(e[0]-4,e[1]+6+0.5),b.lineTo(e[0]-4,e[1]-6+0.5),b.closePath()):b.arc(e[0],e[1],4,0,2*Math.PI);b.fill();g&&(m=null!=m.label?m.label:m.name)&&(b.fillStyle=l.NODE_TEXT_COLOR,b.fillText(m,e[0]+10,e[1]+5))}this.connecting_node&&(b.globalAlpha=0.4*f);b.textAlign="right";
b.strokeStyle="black";if(a.outputs)for(p=0;p<a.outputs.length;p++)if(m=a.outputs[p],e=a.getConnectionPos(!1,p),e[0]-=a.pos[0],e[1]-=a.pos[1],k<e[1]+0.5*l.NODE_SLOT_HEIGHT&&(k=e[1]+0.5*l.NODE_SLOT_HEIGHT),b.fillStyle=m.links&&m.links.length?m.colorOn||this.default_connection_color.output_on:m.colorOff||this.default_connection_color.output_off,b.beginPath(),m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(e[0]-6+0.5,e[1]-5+0.5,14,10):m.shape===l.ARROW_SHAPE?(b.moveTo(e[0]+8,e[1]+0.5),b.lineTo(e[0]-4,
e[1]+6+0.5),b.lineTo(e[0]-4,e[1]-6+0.5),b.closePath()):b.arc(e[0],e[1],4,0,2*Math.PI),b.fill(),b.stroke(),g&&(m=null!=m.label?m.label:m.name))b.fillStyle=l.NODE_TEXT_COLOR,b.fillText(m,e[0]-10,e[1]+5);b.textAlign="left";b.globalAlpha=1;a.widgets&&this.drawNodeWidgets(a,k,b,this.node_widget&&this.node_widget[0]==a?this.node_widget[1]:null);a.onDrawForeground&&(a.gui_rects&&(a.gui_rects.length=0),a.onDrawForeground(b,this))}a.flags.clip_area&&b.restore();b.globalAlpha=1}};d.prototype.drawNodeShape=
for(var b=this.computeVisibleNodes(null,this.visible_nodes),c=0;c<b.length;++c){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));if(null!=this.connecting_pos){a.lineWidth=this.connections_width;b=null;switch(this.connecting_output.type){case l.EVENT:b=l.EVENT_LINK_COLOR;break;default:b=this.default_link_color}this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]],null,
!1,null,b);a.beginPath();this.connecting_output.type===l.EVENT||this.connecting_output.shape===l.BOX_SHAPE?a.rect(this.connecting_pos[0]-6+0.5,this.connecting_pos[1]-5+0.5,14,10):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())}this.dragging_rectangle&&(a.strokeStyle="#FFF",a.strokeRect(this.dragging_rectangle[0],this.dragging_rectangle[1],
this.dragging_rectangle[2],this.dragging_rectangle[3]));a.restore()}this.dirty_area&&a.restore();a.finish2D&&a.finish2D()}};d.prototype.renderInfo=function(a,b,c){b=b||0;c=c||0;a.save();a.translate(b,c);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("V: "+this.graph._version,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13);a.restore()};d.prototype.drawBackCanvas=
function(){var a=this.bgcanvas;if(a.width!=this.canvas.width||a.height!=this.canvas.height)a.width=this.canvas.width,a.height=this.canvas.height;this.bgctx||(this.bgctx=this.bgcanvas.getContext("2d"));var b=this.bgctx;b.start&&b.start();this.clear_background&&b.clearRect(0,0,a.width,a.height);this._graph_stack&&this._graph_stack.length&&(b.strokeStyle=this._graph_stack[this._graph_stack.length-1].bgcolor,b.lineWidth=10,b.strokeRect(1,1,a.width-2,a.height-2),b.lineWidth=1);var c=!1;this.onRenderBackground&&
(c=this.onRenderBackground(a,b));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&&!c){b.globalAlpha=this.zoom_modify_alpha?(1-0.5/this.scale)*this.editor_alpha:this.editor_alpha;b.imageSmoothingEnabled=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 d=this;this._bg_img.onload=function(){d.draw(!0,!0)}}c=null;null==this._pattern&&0<this._bg_img.width?(c=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=c):c=this._pattern;c&&(b.fillStyle=c,b.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2],this.visible_area[3]),b.fillStyle="transparent");b.globalAlpha=1;b.imageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=!0}this.graph._groups.length&&
!this.live_mode&&this.drawGroups(a,b);if(this.onBackgroundRender)this.onBackgroundRender(a,b);this.render_canvas_border&&(b.strokeStyle="#235",b.strokeRect(0,0,a.width,a.height));this.render_connections_shadows?(b.shadowColor="#000",b.shadowOffsetX=0,b.shadowOffsetY=0,b.shadowBlur=6):b.shadowColor="rgba(0,0,0,0)";this.live_mode||this.drawConnections(b);b.shadowColor="rgba(0,0,0,0)";b.restore()}b.finish&&b.finish();this.dirty_bgcanvas=!1;this.dirty_canvas=!0};var c=new Float32Array(2);d.prototype.drawNode=
function(a,b){this.current_node=a;var g=a.color||a.constructor.color||l.NODE_DEFAULT_COLOR,d=a.bgcolor||a.constructor.bgcolor||l.NODE_DEFAULT_BGCOLOR;a.selected||(this.render_shadows?(b.shadowColor="rgba(0,0,0,0.5)",b.shadowOffsetX=2,b.shadowOffsetY=2,b.shadowBlur=3):b.shadowColor="transparent");if(this.live_mode){if(!a.flags.collapsed&&(b.shadowColor="transparent",a.onDrawForeground))a.onDrawForeground(b,this)}else if(!a.flags.collapsed||!a.onDrawCollaped||!0!=a.onDrawCollapsed(b,this)){var f=this.editor_alpha;
b.globalAlpha=f;var k=a._shape||l.BOX_SHAPE;c.set(a.size);if(a.flags.collapsed){b.font=this.inner_text_font;var p=a.getTitle?a.getTitle():a.title;a._collapsed_width=Math.min(a.size[0],b.measureText(p).width+40);c[0]=a._collapsed_width;c[1]=0}a.flags.clip_area&&(b.save(),b.beginPath(),k==l.BOX_SHAPE?b.rect(0,0,c[0],c[1]):k==l.ROUND_SHAPE?b.roundRect(0,0,c[0],c[1],10):k==l.CIRCLE_SHAPE&&b.arc(0.5*c[0],0.5*c[1],0.5*c[0],0,2*Math.PI),b.clip());this.drawNodeShape(a,b,c,g,d,a.selected,a.mouseOver);b.shadowColor=
"transparent";b.textAlign="left";b.font=this.inner_text_font;g=0.6<this.scale;d=this.connecting_output;b.lineWidth=1;k=0;if(a.flags.collapsed){if(a.inputs)for(p=0;p<a.inputs.length;p++)if(m=a.inputs[p],null!=m.link){b.fillStyle=m.colorOn||this.default_connection_color.input_on;b.beginPath();m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(0.5,4-l.NODE_TITLE_HEIGHT+0.5,14,l.NODE_TITLE_HEIGHT-8):m.shape===l.ARROW_SHAPE?(b.moveTo(8,-0.5*l.NODE_TITLE_HEIGHT),b.lineTo(-4,-0.8*l.NODE_TITLE_HEIGHT),b.lineTo(-4,
-0.2*l.NODE_TITLE_HEIGHT),b.closePath()):b.arc(0,-0.5*l.NODE_TITLE_HEIGHT,4,0,2*Math.PI);b.fill();break}if(a.outputs)for(p=0;p<a.outputs.length;p++)m=a.outputs[p],m.links&&m.links.length&&(b.fillStyle=m.colorOn||this.default_connection_color.output_on,b.strokeStyle="black",b.beginPath(),m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(a._collapsed_width-4+0.5,4-l.NODE_TITLE_HEIGHT+0.5,14,l.NODE_TITLE_HEIGHT-8):m.shape===l.ARROW_SHAPE?(b.moveTo(a._collapsed_width+6,-0.5*l.NODE_TITLE_HEIGHT),b.lineTo(a._collapsed_width-
6,-0.8*l.NODE_TITLE_HEIGHT),b.lineTo(a._collapsed_width-6,-0.2*l.NODE_TITLE_HEIGHT),b.closePath()):b.arc(a._collapsed_width,-0.5*l.NODE_TITLE_HEIGHT,4,0,2*Math.PI),b.fill(),b.stroke())}else{if(a.inputs)for(p=0;p<a.inputs.length;p++){var m=a.inputs[p];b.globalAlpha=f;this.connecting_node&&l.isValidConnection(m.type&&d.type)&&(b.globalAlpha=0.4*f);b.fillStyle=null!=m.link?m.colorOn||this.default_connection_color.input_on:m.colorOff||this.default_connection_color.input_off;var e=a.getConnectionPos(!0,
p);e[0]-=a.pos[0];e[1]-=a.pos[1];k<e[1]+0.5*l.NODE_SLOT_HEIGHT&&(k=e[1]+0.5*l.NODE_SLOT_HEIGHT);b.beginPath();m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(e[0]-6+0.5,e[1]-5+0.5,14,10):m.shape===l.ARROW_SHAPE?(b.moveTo(e[0]+8,e[1]+0.5),b.lineTo(e[0]-4,e[1]+6+0.5),b.lineTo(e[0]-4,e[1]-6+0.5),b.closePath()):b.arc(e[0],e[1],4,0,2*Math.PI);b.fill();g&&(m=null!=m.label?m.label:m.name)&&(b.fillStyle=l.NODE_TEXT_COLOR,b.fillText(m,e[0]+10,e[1]+5))}this.connecting_node&&(b.globalAlpha=0.4*f);b.textAlign=
"right";b.strokeStyle="black";if(a.outputs)for(p=0;p<a.outputs.length;p++)if(m=a.outputs[p],e=a.getConnectionPos(!1,p),e[0]-=a.pos[0],e[1]-=a.pos[1],k<e[1]+0.5*l.NODE_SLOT_HEIGHT&&(k=e[1]+0.5*l.NODE_SLOT_HEIGHT),b.fillStyle=m.links&&m.links.length?m.colorOn||this.default_connection_color.output_on:m.colorOff||this.default_connection_color.output_off,b.beginPath(),m.type===l.EVENT||m.shape===l.BOX_SHAPE?b.rect(e[0]-6+0.5,e[1]-5+0.5,14,10):m.shape===l.ARROW_SHAPE?(b.moveTo(e[0]+8,e[1]+0.5),b.lineTo(e[0]-
4,e[1]+6+0.5),b.lineTo(e[0]-4,e[1]-6+0.5),b.closePath()):b.arc(e[0],e[1],4,0,2*Math.PI),b.fill(),b.stroke(),g&&(m=null!=m.label?m.label:m.name))b.fillStyle=l.NODE_TEXT_COLOR,b.fillText(m,e[0]-10,e[1]+5);b.textAlign="left";b.globalAlpha=1;a.widgets&&this.drawNodeWidgets(a,k,b,this.node_widget&&this.node_widget[0]==a?this.node_widget[1]:null);a.onDrawForeground&&(a.gui_rects&&(a.gui_rects.length=0),a.onDrawForeground(b,this))}a.flags.clip_area&&b.restore();b.globalAlpha=1}};d.prototype.drawNodeShape=
function(a,b,c,m,f,k,p){b.strokeStyle=m;b.fillStyle=f;f=l.NODE_TITLE_HEIGHT;var e=a._shape||a.constructor.shape||l.BOX_SHAPE,h=a.constructor.title_mode,y=!0;h==l.TRANSPARENT_TITLE?y=!1:h==l.AUTOHIDE_TITLE&&p&&(y=!0);p=y?-f:0;var n=c[0]+1,q=y?c[1]+f:c[1];a.flags.collapsed||(e==l.BOX_SHAPE||0.5>this.scale?(b.beginPath(),b.rect(0,p,n,q),b.fill()):e==l.ROUND_SHAPE||e==l.CARD_SHAPE?(b.beginPath(),b.roundRect(0,p,n,q,this.round_radius,e==l.CARD_SHAPE?0:this.round_radius),b.fill()):e==l.CIRCLE_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));a.onDrawBackground&&(a.gui_rects&&(a.gui_rects.length=0),a.onDrawBackground(b,this));if(y||h==l.TRANSPARENT_TITLE){if(h!=l.TRANSPARENT_TITLE){if(this.use_gradients){var r=d.gradients[m];r||(r=d.gradients[m]=b.createLinearGradient(0,0,400,0),r.addColorStop(0,
m),r.addColorStop(1,"#000"));b.fillStyle=r}else b.fillStyle=m;r=b.globalAlpha;b.beginPath();if(e==l.BOX_SHAPE||0.5>this.scale)b.rect(0,-f,c[0]+1,f),b.fill();else if(e==l.ROUND_SHAPE||e==l.CARD_SHAPE)b.roundRect(0,-f,c[0]+1,f,this.round_radius,a.flags.collapsed?this.round_radius:0),b.fill()}b.fillStyle=a.boxcolor||l.NODE_DEFAULT_BOXCOLOR;b.beginPath();e==l.ROUND_SHAPE||e==l.CIRCLE_SHAPE||e==l.CARD_SHAPE?b.arc(0.5*f,-0.5*f,0.5*(f-8),0,2*Math.PI):b.rect(4,-f+4,f-8,f-8);b.fill();b.globalAlpha=r;0.5<this.scale&&

View File

@@ -24,6 +24,8 @@
var LiteGraph = global.LiteGraph = {
CANVAS_GRID_SIZE: 10,
NODE_TITLE_HEIGHT: 20,
NODE_SLOT_HEIGHT: 15,
NODE_WIDGET_HEIGHT: 20,
@@ -31,7 +33,6 @@ var LiteGraph = global.LiteGraph = {
NODE_MIN_WIDTH: 50,
NODE_COLLAPSED_RADIUS: 10,
NODE_COLLAPSED_WIDTH: 80,
CANVAS_GRID_SIZE: 10,
NODE_TITLE_COLOR: "#999",
NODE_TEXT_SIZE: 14,
NODE_TEXT_COLOR: "#AAA",
@@ -40,10 +41,12 @@ var LiteGraph = global.LiteGraph = {
NODE_DEFAULT_BGCOLOR: "#444",
NODE_DEFAULT_BOXCOLOR: "#888",
NODE_DEFAULT_SHAPE: "box",
LINK_COLOR: "#AAD",
EVENT_LINK_COLOR: "#F85",
MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
DEFAULT_POSITION: [100,100],//default node position
node_images_path: "",
VALID_SHAPES: ["default","box","round","card"], //,"circle"
//shapes are used for nodes but also for slots
@@ -71,6 +74,7 @@ var LiteGraph = global.LiteGraph = {
AUTOHIDE_TITLE: 3,
proxy: null, //used to redirect calls
node_images_path: "",
debug: false,
throw_errors: true,
@@ -3238,7 +3242,7 @@ function LGraphCanvas( canvas, graph, options )
this.title_text_font = "bold "+LiteGraph.NODE_TEXT_SIZE+"px Arial";
this.inner_text_font = "normal "+LiteGraph.NODE_SUBTEXT_SIZE+"px Arial";
this.node_title_color = LiteGraph.NODE_TITLE_COLOR;
this.default_link_color = "#AAC";
this.default_link_color = LiteGraph.LINK_COLOR;
this.default_connection_color = {
input_off: "#AAB",
input_on: "#7F7",
@@ -4992,9 +4996,9 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
var link_color = null;
switch( this.connecting_output.type )
{
case LiteGraph.EVENT: link_color = "#F85"; break;
case LiteGraph.EVENT: link_color = LiteGraph.EVENT_LINK_COLOR; break;
default:
link_color = "#AFA";
link_color = this.default_link_color;
}
//the connection being dragged by the mouse
this.renderLink( ctx, this.connecting_pos, [this.canvas_mouse[0],this.canvas_mouse[1]], null, false, null, link_color );
@@ -5714,7 +5718,7 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
//choose color
if( !color && link )
color = LGraphCanvas.link_type_colors[ link.type ];
if(!color)
if( !color )
color = this.default_link_color;
if( link != null && this.highlighted_links[ link.id ] )