Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 10:42:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

little fix

Browse Source
This commit is contained in:
tamat
2021-08-25 13:46:36 +02:00
parent fcf37260ad
commit c2f7e389b9
7 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
build/litegraph.min.js vendored
View File

@@ -166,14 +166,14 @@ b)};g.prototype.convertCanvasToOffset=function(a,b){return this.ds.convertCanvas
(this.dirty_bgcanvas||b||this.always_render_background||this.graph&&this.graph._last_trigger_time&&1E3>d-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}};g.prototype.drawFrontCanvas=function(){this.dirty_canvas=!1;this.ctx||(this.ctx=this.bgcanvas.getContext("2d"));var a=this.ctx;if(a){var b=this.canvas;a.start2D&&!this.viewport&&(a.start2D(),a.restore(),a.setTransform(1,0,0,1,0,0));
var d=this.viewport||this.dirty_area;d&&(a.save(),a.beginPath(),a.rect(d[0],d[1],d[2],d[3]),a.clip());this.clear_background&&(d?a.clearRect(d[0],d[1],d[2],d[3]):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,d?d[0]:0,d?d[1]:0);if(this.graph){a.save();this.ds.toCanvasContext(a);b=this.computeVisibleNodes(null,this.visible_nodes);for(var h=0;h<b.length;++h){var f=
b[h];a.save();a.translate(f.pos[0],f.pos[1]);this.drawNode(f,a);a.restore()}this.render_execution_order&&this.drawExecutionOrder(a);this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));if(null!=this.connecting_pos){a.lineWidth=this.connections_width;switch(this.connecting_output.type){case e.EVENT:b=e.EVENT_LINK_COLOR;break;default:b=e.CONNECTING_LINK_COLOR}this.renderLink(a,this.connecting_pos,[this.graph_mouse[0],this.graph_mouse[1]],null,!1,null,b,this.connecting_output.dir||
(this.connecting_node.horizontal?e.DOWN:e.RIGHT),e.CENTER);a.beginPath();this.connecting_output.type===e.EVENT||this.connecting_output.shape===e.BOX_SHAPE?(a.rect(this.connecting_pos[0]-6+.5,this.connecting_pos[1]-5+.5,14,10),a.rect(this.graph_mouse[0]-6+.5,this.graph_mouse[1]-5+.5,14,10)):this.connecting_output.shape===e.ARROW_SHAPE?(a.moveTo(this.connecting_pos[0]+8,this.connecting_pos[1]+.5),a.lineTo(this.connecting_pos[0]-4,this.connecting_pos[1]+6+.5),a.lineTo(this.connecting_pos[0]-4,this.connecting_pos[1]-
6+.5),a.closePath()):(a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.arc(this.graph_mouse[0],this.graph_mouse[1],4,0,2*Math.PI));a.fill();a.fillStyle="#ffcc00";this._highlight_input&&(a.beginPath(),this._highlight_input_slot.shape===e.ARROW_SHAPE?(a.moveTo(this._highlight_input[0]+8,this._highlight_input[1]+.5),a.lineTo(this._highlight_input[0]-4,this._highlight_input[1]+6+.5),a.lineTo(this._highlight_input[0]-4,this._highlight_input[1]-6+.5),a.closePath()):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]));if(this.over_link_center&&this.render_link_tooltip)this.drawLinkTooltip(a,this.over_link_center);else if(this.onDrawLinkTooltip)this.onDrawLinkTooltip(a,null);if(this.onDrawForeground)this.onDrawForeground(a,this.visible_rect);a.restore()}this._graph_stack&&this._graph_stack.length&&
this.drawSubgraphPanel(a);if(this.onDrawOverlay)this.onDrawOverlay(a);d&&a.restore();a.finish2D&&a.finish2D()}};g.prototype.drawSubgraphPanel=function(a){var b=this.graph,d=b._subgraph_node;d?(this.drawSubgraphPanelLeft(b,d,a),this.drawSubgraphPanelRight(b,d,a)):console.warn("subgraph without subnode")};g.prototype.drawSubgraphPanelLeft=function(a,b,d){var h=b.inputs?b.inputs.length:0,f=Math.floor(1.6*e.NODE_SLOT_HEIGHT);d.fillStyle="#111";d.globalAlpha=.8;d.beginPath();d.roundRect(10,10,200,(h+1)*
f+50,[8]);d.fill();d.globalAlpha=1;d.fillStyle="#888";d.font="14px Arial";d.textAlign="left";d.fillText("Graph Inputs",20,34);if(this.drawButton(180,20,20,20,"X","#151515"))this.closeSubgraph();else{h=50;d.font="14px Arial";if(b.inputs)for(var c=0;c<b.inputs.length;++c){var m=b.inputs[c];if(!m.not_subgraph_input){if(this.drawButton(20,h+2,180,f-2)){var q=b.constructor.input_node_type||"graph/input";this.graph.beforeChange();var l=e.createNode(q);l?(a.add(l),this.block_click=!1,this.last_click_position=
null,this.selectNodes([l]),this.node_dragged=l,this.dragging_canvas=!1,l.setProperty("name",m.name),l.setProperty("type",m.type),this.node_dragged.pos[0]=this.graph_mouse[0]-5,this.node_dragged.pos[1]=this.graph_mouse[1]-5,this.graph.afterChange()):console.error("graph input node not found:",q)}d.fillStyle="#9C9";d.beginPath();d.arc(184,h+.5*f,5,0,2*Math.PI);d.fill();d.fillStyle="#AAA";d.fillText(m.name,30,h+.75*f);d.fillStyle="#777";d.fillText(m.type,130,h+.75*f);h+=f}}this.drawButton(20,h+2,180,
f-2,"+","#151515","#222")&&this.showSubgraphPropertiesDialog(b)}};g.prototype.drawSubgraphPanelRight=function(a,b,d){var h=b.outputs?b.outputs.length:0,f=this.bgcanvas.width,c=Math.floor(1.6*e.NODE_SLOT_HEIGHT);d.fillStyle="#111";d.globalAlpha=.8;d.beginPath();d.roundRect(f-200-10,10,200,(h+1)*c+50,[8]);d.fill();d.globalAlpha=1;d.fillStyle="#888";d.font="14px Arial";d.textAlign="left";h=d.measureText("Graph Outputs").width;d.fillText("Graph Outputs",f-h-20,34);if(this.drawButton(f-200,20,20,20,"X",
"#151515"))this.closeSubgraph();else{h=50;d.font="14px Arial";if(b.outputs)for(var m=0;m<b.outputs.length;++m){var q=b.outputs[m];if(!q.not_subgraph_input){if(this.drawButton(f-200,h+2,180,c-2)){var l=b.constructor.output_node_type||"graph/output";this.graph.beforeChange();var v=e.createNode(l);v?(a.add(v),this.block_click=!1,this.last_click_position=null,this.selectNodes([v]),this.node_dragged=v,this.dragging_canvas=!1,v.setProperty("name",q.name),v.setProperty("type",q.type),this.node_dragged.pos[0]=
(this.connecting_node.horizontal?e.DOWN:e.RIGHT),e.CENTER);a.beginPath();this.connecting_output.type===e.EVENT||this.connecting_output.shape===e.BOX_SHAPE?(a.rect(this.connecting_pos[0]-6+.5,this.connecting_pos[1]-5+.5,14,10),a.fill(),a.beginPath(),a.rect(this.graph_mouse[0]-6+.5,this.graph_mouse[1]-5+.5,14,10)):this.connecting_output.shape===e.ARROW_SHAPE?(a.moveTo(this.connecting_pos[0]+8,this.connecting_pos[1]+.5),a.lineTo(this.connecting_pos[0]-4,this.connecting_pos[1]+6+.5),a.lineTo(this.connecting_pos[0]-
4,this.connecting_pos[1]-6+.5),a.closePath()):(a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.beginPath(),a.arc(this.graph_mouse[0],this.graph_mouse[1],4,0,2*Math.PI));a.fill();a.fillStyle="#ffcc00";this._highlight_input&&(a.beginPath(),this._highlight_input_slot.shape===e.ARROW_SHAPE?(a.moveTo(this._highlight_input[0]+8,this._highlight_input[1]+.5),a.lineTo(this._highlight_input[0]-4,this._highlight_input[1]+6+.5),a.lineTo(this._highlight_input[0]-4,this._highlight_input[1]-
6+.5),a.closePath()):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]));if(this.over_link_center&&this.render_link_tooltip)this.drawLinkTooltip(a,this.over_link_center);else if(this.onDrawLinkTooltip)this.onDrawLinkTooltip(a,null);if(this.onDrawForeground)this.onDrawForeground(a,this.visible_rect);a.restore()}this._graph_stack&&
this._graph_stack.length&&this.drawSubgraphPanel(a);if(this.onDrawOverlay)this.onDrawOverlay(a);d&&a.restore();a.finish2D&&a.finish2D()}};g.prototype.drawSubgraphPanel=function(a){var b=this.graph,d=b._subgraph_node;d?(this.drawSubgraphPanelLeft(b,d,a),this.drawSubgraphPanelRight(b,d,a)):console.warn("subgraph without subnode")};g.prototype.drawSubgraphPanelLeft=function(a,b,d){var h=b.inputs?b.inputs.length:0,f=Math.floor(1.6*e.NODE_SLOT_HEIGHT);d.fillStyle="#111";d.globalAlpha=.8;d.beginPath();
d.roundRect(10,10,200,(h+1)*f+50,[8]);d.fill();d.globalAlpha=1;d.fillStyle="#888";d.font="14px Arial";d.textAlign="left";d.fillText("Graph Inputs",20,34);if(this.drawButton(180,20,20,20,"X","#151515"))this.closeSubgraph();else{h=50;d.font="14px Arial";if(b.inputs)for(var c=0;c<b.inputs.length;++c){var m=b.inputs[c];if(!m.not_subgraph_input){if(this.drawButton(20,h+2,180,f-2)){var q=b.constructor.input_node_type||"graph/input";this.graph.beforeChange();var l=e.createNode(q);l?(a.add(l),this.block_click=
!1,this.last_click_position=null,this.selectNodes([l]),this.node_dragged=l,this.dragging_canvas=!1,l.setProperty("name",m.name),l.setProperty("type",m.type),this.node_dragged.pos[0]=this.graph_mouse[0]-5,this.node_dragged.pos[1]=this.graph_mouse[1]-5,this.graph.afterChange()):console.error("graph input node not found:",q)}d.fillStyle="#9C9";d.beginPath();d.arc(184,h+.5*f,5,0,2*Math.PI);d.fill();d.fillStyle="#AAA";d.fillText(m.name,30,h+.75*f);d.fillStyle="#777";d.fillText(m.type,130,h+.75*f);h+=f}}this.drawButton(20,
h+2,180,f-2,"+","#151515","#222")&&this.showSubgraphPropertiesDialog(b)}};g.prototype.drawSubgraphPanelRight=function(a,b,d){var h=b.outputs?b.outputs.length:0,f=this.bgcanvas.width,c=Math.floor(1.6*e.NODE_SLOT_HEIGHT);d.fillStyle="#111";d.globalAlpha=.8;d.beginPath();d.roundRect(f-200-10,10,200,(h+1)*c+50,[8]);d.fill();d.globalAlpha=1;d.fillStyle="#888";d.font="14px Arial";d.textAlign="left";h=d.measureText("Graph Outputs").width;d.fillText("Graph Outputs",f-h-20,34);if(this.drawButton(f-200,20,
20,20,"X","#151515"))this.closeSubgraph();else{h=50;d.font="14px Arial";if(b.outputs)for(var m=0;m<b.outputs.length;++m){var q=b.outputs[m];if(!q.not_subgraph_input){if(this.drawButton(f-200,h+2,180,c-2)){var l=b.constructor.output_node_type||"graph/output";this.graph.beforeChange();var v=e.createNode(l);v?(a.add(v),this.block_click=!1,this.last_click_position=null,this.selectNodes([v]),this.node_dragged=v,this.dragging_canvas=!1,v.setProperty("name",q.name),v.setProperty("type",q.type),this.node_dragged.pos[0]=
this.graph_mouse[0]-5,this.node_dragged.pos[1]=this.graph_mouse[1]-5,this.graph.afterChange()):console.error("graph input node not found:",l)}d.fillStyle="#9C9";d.beginPath();d.arc(f-200+16,h+.5*c,5,0,2*Math.PI);d.fill();d.fillStyle="#AAA";d.fillText(q.name,f-200+30,h+.75*c);d.fillStyle="#777";d.fillText(q.type,f-200+130,h+.75*c);h+=c}}this.drawButton(f-200,h+2,180,c-2,"+","#151515","#222")&&this.showSubgraphPropertiesDialogRight(b)}};g.prototype.drawButton=function(a,b,d,h,f,c,m,q){var u=this.ctx;
c=c||e.NODE_DEFAULT_COLOR;m=m||"#555";q=q||e.NODE_TEXT_COLOR;var l=this.mouse,v=e.isInsideRectangle(l[0],l[1],a,b,d,h);l=(l=this.last_click_position)&&e.isInsideRectangle(l[0],l[1],a,b,d,h);u.fillStyle=v?m:c;l&&(u.fillStyle="#AAA");u.beginPath();u.roundRect(a,b,d,h,[4]);u.fill();null!=f&&f.constructor==String&&(u.fillStyle=q,u.textAlign="center",u.font=(.65*h|0)+"px Arial",u.fillText(f,a+.5*d,b+.75*h),u.textAlign="left");a=l&&!this.block_click;l&&this.blockClick();return a};g.prototype.isAreaClicked=
function(a,b,d,h,f){var c=this.mouse;e.isInsideRectangle(c[0],c[1],a,b,d,h);b=(a=(c=this.last_click_position)&&e.isInsideRectangle(c[0],c[1],a,b,d,h))&&!this.block_click;a&&f&&this.blockClick();return b};g.prototype.renderInfo=function(a,b,d){b=b||10;d=d||this.canvas.height-80;a.save();a.translate(b,d);a.font="10px Arial";a.fillStyle="#888";a.textAlign="left";this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("N: "+this.graph._nodes.length+