Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-26 09:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

support for horizontal slots. Changed colorOn by color_on, colorOff by color_off to be more coherent

Browse Source
This commit is contained in:
tamat
2018-10-24 17:29:33 +02:00
parent 33d527541a
commit 88aa42bd8a
4 changed files with 726 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/litegraph.js
View File

@@ -44,6 +44,7 @@ var LiteGraph = global.LiteGraph = {
LINK_COLOR: "#AAD",
EVENT_LINK_COLOR: "#F85",
CONNECTING_LINK_COLOR: "#AFA",
MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
DEFAULT_POSITION: [100,100],//default node position
@@ -68,6 +69,12 @@ var LiteGraph = global.LiteGraph = {
NEVER: 2,
ON_TRIGGER: 3,
UP: 1,
DOWN:2,
LEFT:3,
RIGHT:4,
CENTER:5,
NORMAL_TITLE: 0,
NO_TITLE: 1,
TRANSPARENT_TITLE: 2,
@@ -2967,9 +2974,18 @@ LGraphNode.prototype.getConnectionPos = function( is_input, slot_number )
else if(!is_input && this.outputs.length > slot_number && this.outputs[slot_number].pos)
return [this.pos[0] + this.outputs[slot_number].pos[0],this.pos[1] + this.outputs[slot_number].pos[1]];
if(!is_input) //output
return [this.pos[0] + this.size[0] + 1, this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0)];
return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0) ];
//horizontal distributed slots
if(this.flags.horizontal)
{
if(is_input)
return [this.pos[0] + (slot_number + 0.5) * (this.size[0] / (this.inputs.length)), this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT ];
return [this.pos[0] + (slot_number + 0.5) * (this.size[0] / (this.outputs.length)), this.pos[1] + this.size[1] ];
}
//default
if(is_input)
return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0) ];
return [this.pos[0] + this.size[0] + 1, this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT + (this.constructor.slot_start_y || 0)];
}
/* Force align to grid */
@@ -4998,10 +5014,10 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
{
case LiteGraph.EVENT: link_color = LiteGraph.EVENT_LINK_COLOR; break;
default:
link_color = this.default_link_color;
link_color = LiteGraph.CONNECTING_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 );
this.renderLink( ctx, this.connecting_pos, [this.canvas_mouse[0],this.canvas_mouse[1]], null, false, null, link_color, this.connecting_output.dir || (this.connecting_node.flags.horizontal ? LiteGraph.DOWN : LiteGraph.RIGHT), LiteGraph.CENTER );
ctx.beginPath();
if( this.connecting_output.type === LiteGraph.EVENT || this.connecting_output.shape === LiteGraph.BOX_SHAPE )
@@ -5283,7 +5299,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
ctx.shadowColor = "transparent";
//connection slots
ctx.textAlign = "left";
ctx.textAlign = node.flags.horizontal ? "center" : "left";
ctx.font = this.inner_text_font;
var render_text = this.scale > 0.6;
@@ -5307,7 +5323,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if ( this.connecting_node && LiteGraph.isValidConnection( slot.type && out_slot.type ) )
ctx.globalAlpha = 0.4 * editor_alpha;
ctx.fillStyle = slot.link != null ? (slot.colorOn || this.default_connection_color.input_on) : (slot.colorOff || this.default_connection_color.input_off);
ctx.fillStyle = slot.link != null ? (slot.color_on || this.default_connection_color.input_on) : (slot.color_off || this.default_connection_color.input_off);
var pos = node.getConnectionPos( true, i );
pos[0] -= node.pos[0];
@@ -5337,7 +5353,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if(text)
{
ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR;
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
if( node.flags.horizontal || slot.dir == LiteGraph.UP )
ctx.fillText(text,pos[0],pos[1] - 10);
else
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
}
}
}
@@ -5346,7 +5365,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if(this.connecting_node)
ctx.globalAlpha = 0.4 * editor_alpha;
ctx.textAlign = "right";
ctx.textAlign = node.flags.horizontal ? "center" : "right";
ctx.strokeStyle = "black";
if(node.outputs)
for(var i = 0; i < node.outputs.length; i++)
@@ -5359,7 +5378,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if( max_y < pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5)
max_y = pos[1] + LiteGraph.NODE_SLOT_HEIGHT*0.5;
ctx.fillStyle = slot.links && slot.links.length ? (slot.colorOn || this.default_connection_color.output_on) : (slot.colorOff || this.default_connection_color.output_off);
ctx.fillStyle = slot.links && slot.links.length ? (slot.color_on || this.default_connection_color.output_on) : (slot.color_off || this.default_connection_color.output_off);
ctx.beginPath();
//ctx.rect( node.size[0] - 14,i*14,10,10);
@@ -5389,7 +5408,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
if(text)
{
ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR;
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
if( node.flags.horizontal || slot.dir == LiteGraph.DOWN )
ctx.fillText(text,pos[0],pos[1] - 8);
else
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
}
}
}
@@ -5418,7 +5440,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var slot = node.inputs[i];
if( slot.link == null )
continue;
ctx.fillStyle = slot.colorOn || this.default_connection_color.input_on;
ctx.fillStyle = slot.color_on || this.default_connection_color.input_on;
ctx.beginPath();
if ( slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) {
ctx.rect(0.5, 4 - LiteGraph.NODE_TITLE_HEIGHT + 0.5,14,LiteGraph.NODE_TITLE_HEIGHT - 8);
@@ -5442,7 +5464,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var slot = node.outputs[i];
if(!slot.links || !slot.links.length)
continue;
ctx.fillStyle = slot.colorOn || this.default_connection_color.output_on;
ctx.fillStyle = slot.color_on || this.default_connection_color.output_on;
ctx.strokeStyle = "black";
ctx.beginPath();
if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) {
@@ -5625,6 +5647,7 @@ LGraphCanvas.prototype.drawNodeShape = function( node, ctx, size, fgcolor, bgcol
areah += title_height;
}
ctx.lineWidth = 1;
ctx.globalAlpha = 0.8;
ctx.beginPath();
if(shape == LiteGraph.BOX_SHAPE)
ctx.rect(-6 + areax,-6 + areay, 12 + areaw, 12 + areah );
@@ -5634,9 +5657,10 @@ LGraphCanvas.prototype.drawNodeShape = function( node, ctx, size, fgcolor, bgcol
ctx.roundRect(-6 + areax,-6 + areay, 12 + areaw, 12 + areah , this.round_radius * 2, 2);
else if (shape == LiteGraph.CIRCLE_SHAPE)
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5 + 6, 0, Math.PI*2);
ctx.strokeStyle = "#DDD";
ctx.strokeStyle = "#FFF";
ctx.stroke();
ctx.strokeStyle = fgcolor;
ctx.globalAlpha = 1;
}
}
@@ -5680,15 +5704,20 @@ LGraphCanvas.prototype.drawConnections = function(ctx)
start_node_slotpos = [start_node.pos[0] + 10, start_node.pos[1] + 10];
else
start_node_slotpos = start_node.getConnectionPos(false, start_node_slot);
var end_node_slotpos = node.getConnectionPos(true,i);
var start_slot = start_node.outputs[start_node_slot];
var end_slot = node.inputs[i];
var start_dir = start_slot.dir || (start_node.flags.horizontal ? LiteGraph.DOWN : LiteGraph.RIGHT);
var end_dir = end_slot.dir || (node.flags.horizontal ? LiteGraph.UP : LiteGraph.LEFT);
this.renderLink( ctx, start_node_slotpos, node.getConnectionPos(true,i), link );
this.renderLink( ctx, start_node_slotpos, end_node_slotpos, link, false, 0, null, start_dir, end_dir );
//event triggered rendered on top
if(link && link._last_time && (now - link._last_time) < 1000 )
{
var f = 2.0 - (now - link._last_time) * 0.002;
var color = "rgba(255,255,255, " + f.toFixed(2) + ")";
this.renderLink( ctx, start_node_slotpos, node.getConnectionPos(true,i), link, true, f, color );
this.renderLink( ctx, start_node_slotpos, end_node_slotpos, link, true, f, color, start_dir, end_dir );
}
}
}
@@ -5699,7 +5728,7 @@ LGraphCanvas.prototype.drawConnections = function(ctx)
* draws a link between two points
* @method renderLink
**/
LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow, color )
LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow, color, start_dir, end_dir )
{
if(!this.highquality_render)
{
@@ -5710,6 +5739,9 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
return;
}
start_dir = start_dir || LiteGraph.RIGHT;
end_dir = end_dir || LiteGraph.LEFT;
var dist = distance(a,b);
if(this.render_connections_border && this.scale > 0.6)
@@ -5730,9 +5762,27 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
if(this.render_curved_connections) //splines
{
ctx.moveTo(a[0],a[1]);
ctx.bezierCurveTo(a[0] + dist*0.25, a[1],
b[0] - dist*0.25 , b[1],
b[0] ,b[1] );
var start_offset_x = 0;
var start_offset_y = 0;
var end_offset_x = 0;
var end_offset_y = 0;
switch(start_dir)
{
case LiteGraph.LEFT: start_offset_x = dist*-0.25; break;
case LiteGraph.RIGHT: start_offset_x = dist*0.25; break;
case LiteGraph.UP: start_offset_y = dist*-0.25; break;
case LiteGraph.DOWN: start_offset_y = dist*0.25; break;
}
switch(end_dir)
{
case LiteGraph.LEFT: end_offset_x = dist*-0.25; break;
case LiteGraph.RIGHT: end_offset_x = dist*0.25; break;
case LiteGraph.UP: end_offset_y = dist*-0.25; break;
case LiteGraph.DOWN: end_offset_y = dist*0.25; break;
}
ctx.bezierCurveTo(a[0] + start_offset_x, a[1] + start_offset_y,
b[0] + end_offset_x , b[1] + end_offset_y,
b[0], b[1] );
}
else //lines
{
@@ -5761,8 +5811,8 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
if(this.render_connection_arrows && this.scale > 0.6)
{
//compute two points in the connection
var pos = this.computeConnectionPoint(a,b,0.5);
var pos2 = this.computeConnectionPoint(a,b,0.51);
var pos = this.computeConnectionPoint(a, b, 0.5, start_dir, end_dir);
var pos2 = this.computeConnectionPoint(a, b, 0.51, start_dir, end_dir);
//compute the angle between them so the arrow points in the right direction
var angle = 0;
@@ -5790,7 +5840,7 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
for(var i = 0; i < 5; ++i)
{
var f = (LiteGraph.getTime() * 0.001 + (i * 0.2)) % 1;
var pos = this.computeConnectionPoint(a,b,f);
var pos = this.computeConnectionPoint(a,b,f, start_dir, end_dir);
ctx.beginPath();
ctx.arc(pos[0],pos[1],5,0,2*Math.PI);
ctx.fill();
@@ -5798,14 +5848,32 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
}
}
LGraphCanvas.prototype.computeConnectionPoint = function(a,b,t)
LGraphCanvas.prototype.computeConnectionPoint = function(a,b,t,start_dir,end_dir)
{
start_dir = start_dir || LiteGraph.RIGHT;
end_dir = end_dir || LiteGraph.LEFT;
var dist = distance(a,b);
var p0 = a;
var p1 = [ a[0] + dist*0.25, a[1] ];
var p2 = [ b[0] - dist*0.25, b[1] ];
var p1 = [ a[0], a[1] ];
var p2 = [ b[0], b[1] ];
var p3 = b;
switch(start_dir)
{
case LiteGraph.LEFT: p1[0] += dist*-0.25; break;
case LiteGraph.RIGHT: p1[0] += dist*0.25; break;
case LiteGraph.UP: p1[1] += dist*-0.25; break;
case LiteGraph.DOWN: p1[1] += dist*0.25; break;
}
switch(end_dir)
{
case LiteGraph.LEFT: p2[0] += dist*-0.25; break;
case LiteGraph.RIGHT: p2[0] += dist*0.25; break;
case LiteGraph.UP: p2[1] += dist*-0.25; break;
case LiteGraph.DOWN: p2[1] += dist*0.25; break;
}
var c1 = (1-t)*(1-t)*(1-t);
var c2 = 3*((1-t)*(1-t))*t;
var c3 = 3*(1-t)*(t*t);