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_mini.min.js vendored
View File

@@ -166,14 +166,14 @@ b)};k.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>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}};k.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 c=this.viewport||this.dirty_area;c&&(a.save(),a.beginPath(),a.rect(c[0],c[1],c[2],c[3]),a.clip());this.clear_background&&(c?a.clearRect(c[0],c[1],c[2],c[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,c?c[0]:0,c?c[1]:0);if(this.graph){a.save();this.ds.toCanvasContext(a);b=this.computeVisibleNodes(null,this.visible_nodes);for(var d=0;d<b.length;++d){var e=
b[d];a.save();a.translate(e.pos[0],e.pos[1]);this.drawNode(e,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 h.EVENT:b=h.EVENT_LINK_COLOR;break;default:b=h.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?h.DOWN:h.RIGHT),h.CENTER);a.beginPath();this.connecting_output.type===h.EVENT||this.connecting_output.shape===h.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===h.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===h.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);c&&a.restore();a.finish2D&&a.finish2D()}};k.prototype.drawSubgraphPanel=function(a){var b=this.graph,c=b._subgraph_node;c?(this.drawSubgraphPanelLeft(b,c,a),this.drawSubgraphPanelRight(b,c,a)):console.warn("subgraph without subnode")};k.prototype.drawSubgraphPanelLeft=function(a,b,c){var d=b.inputs?b.inputs.length:0,e=Math.floor(1.6*h.NODE_SLOT_HEIGHT);c.fillStyle="#111";c.globalAlpha=.8;c.beginPath();c.roundRect(10,10,200,(d+1)*
e+50,[8]);c.fill();c.globalAlpha=1;c.fillStyle="#888";c.font="14px Arial";c.textAlign="left";c.fillText("Graph Inputs",20,34);if(this.drawButton(180,20,20,20,"X","#151515"))this.closeSubgraph();else{d=50;c.font="14px Arial";if(b.inputs)for(var f=0;f<b.inputs.length;++f){var g=b.inputs[f];if(!g.not_subgraph_input){if(this.drawButton(20,d+2,180,e-2)){var n=b.constructor.input_node_type||"graph/input";this.graph.beforeChange();var r=h.createNode(n);r?(a.add(r),this.block_click=!1,this.last_click_position=
null,this.selectNodes([r]),this.node_dragged=r,this.dragging_canvas=!1,r.setProperty("name",g.name),r.setProperty("type",g.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:",n)}c.fillStyle="#9C9";c.beginPath();c.arc(184,d+.5*e,5,0,2*Math.PI);c.fill();c.fillStyle="#AAA";c.fillText(g.name,30,d+.75*e);c.fillStyle="#777";c.fillText(g.type,130,d+.75*e);d+=e}}this.drawButton(20,d+2,180,
e-2,"+","#151515","#222")&&this.showSubgraphPropertiesDialog(b)}};k.prototype.drawSubgraphPanelRight=function(a,b,c){var d=b.outputs?b.outputs.length:0,e=this.bgcanvas.width,f=Math.floor(1.6*h.NODE_SLOT_HEIGHT);c.fillStyle="#111";c.globalAlpha=.8;c.beginPath();c.roundRect(e-200-10,10,200,(d+1)*f+50,[8]);c.fill();c.globalAlpha=1;c.fillStyle="#888";c.font="14px Arial";c.textAlign="left";d=c.measureText("Graph Outputs").width;c.fillText("Graph Outputs",e-d-20,34);if(this.drawButton(e-200,20,20,20,"X",
"#151515"))this.closeSubgraph();else{d=50;c.font="14px Arial";if(b.outputs)for(var g=0;g<b.outputs.length;++g){var n=b.outputs[g];if(!n.not_subgraph_input){if(this.drawButton(e-200,d+2,180,f-2)){var r=b.constructor.output_node_type||"graph/output";this.graph.beforeChange();var k=h.createNode(r);k?(a.add(k),this.block_click=!1,this.last_click_position=null,this.selectNodes([k]),this.node_dragged=k,this.dragging_canvas=!1,k.setProperty("name",n.name),k.setProperty("type",n.type),this.node_dragged.pos[0]=
(this.connecting_node.horizontal?h.DOWN:h.RIGHT),h.CENTER);a.beginPath();this.connecting_output.type===h.EVENT||this.connecting_output.shape===h.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===h.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===h.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);c&&a.restore();a.finish2D&&a.finish2D()}};k.prototype.drawSubgraphPanel=function(a){var b=this.graph,c=b._subgraph_node;c?(this.drawSubgraphPanelLeft(b,c,a),this.drawSubgraphPanelRight(b,c,a)):console.warn("subgraph without subnode")};k.prototype.drawSubgraphPanelLeft=function(a,b,c){var d=b.inputs?b.inputs.length:0,e=Math.floor(1.6*h.NODE_SLOT_HEIGHT);c.fillStyle="#111";c.globalAlpha=.8;c.beginPath();
c.roundRect(10,10,200,(d+1)*e+50,[8]);c.fill();c.globalAlpha=1;c.fillStyle="#888";c.font="14px Arial";c.textAlign="left";c.fillText("Graph Inputs",20,34);if(this.drawButton(180,20,20,20,"X","#151515"))this.closeSubgraph();else{d=50;c.font="14px Arial";if(b.inputs)for(var f=0;f<b.inputs.length;++f){var g=b.inputs[f];if(!g.not_subgraph_input){if(this.drawButton(20,d+2,180,e-2)){var n=b.constructor.input_node_type||"graph/input";this.graph.beforeChange();var r=h.createNode(n);r?(a.add(r),this.block_click=
!1,this.last_click_position=null,this.selectNodes([r]),this.node_dragged=r,this.dragging_canvas=!1,r.setProperty("name",g.name),r.setProperty("type",g.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:",n)}c.fillStyle="#9C9";c.beginPath();c.arc(184,d+.5*e,5,0,2*Math.PI);c.fill();c.fillStyle="#AAA";c.fillText(g.name,30,d+.75*e);c.fillStyle="#777";c.fillText(g.type,130,d+.75*e);d+=e}}this.drawButton(20,
d+2,180,e-2,"+","#151515","#222")&&this.showSubgraphPropertiesDialog(b)}};k.prototype.drawSubgraphPanelRight=function(a,b,c){var d=b.outputs?b.outputs.length:0,e=this.bgcanvas.width,f=Math.floor(1.6*h.NODE_SLOT_HEIGHT);c.fillStyle="#111";c.globalAlpha=.8;c.beginPath();c.roundRect(e-200-10,10,200,(d+1)*f+50,[8]);c.fill();c.globalAlpha=1;c.fillStyle="#888";c.font="14px Arial";c.textAlign="left";d=c.measureText("Graph Outputs").width;c.fillText("Graph Outputs",e-d-20,34);if(this.drawButton(e-200,20,
20,20,"X","#151515"))this.closeSubgraph();else{d=50;c.font="14px Arial";if(b.outputs)for(var g=0;g<b.outputs.length;++g){var n=b.outputs[g];if(!n.not_subgraph_input){if(this.drawButton(e-200,d+2,180,f-2)){var r=b.constructor.output_node_type||"graph/output";this.graph.beforeChange();var k=h.createNode(r);k?(a.add(k),this.block_click=!1,this.last_click_position=null,this.selectNodes([k]),this.node_dragged=k,this.dragging_canvas=!1,k.setProperty("name",n.name),k.setProperty("type",n.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:",r)}c.fillStyle="#9C9";c.beginPath();c.arc(e-200+16,d+.5*f,5,0,2*Math.PI);c.fill();c.fillStyle="#AAA";c.fillText(n.name,e-200+30,d+.75*f);c.fillStyle="#777";c.fillText(n.type,e-200+130,d+.75*f);d+=f}}this.drawButton(e-200,d+2,180,f-2,"+","#151515","#222")&&this.showSubgraphPropertiesDialogRight(b)}};k.prototype.drawButton=function(a,b,c,d,e,f,g,n){var r=this.ctx;
f=f||h.NODE_DEFAULT_COLOR;g=g||"#555";n=n||h.NODE_TEXT_COLOR;var k=this.mouse,u=h.isInsideRectangle(k[0],k[1],a,b,c,d);k=(k=this.last_click_position)&&h.isInsideRectangle(k[0],k[1],a,b,c,d);r.fillStyle=u?g:f;k&&(r.fillStyle="#AAA");r.beginPath();r.roundRect(a,b,c,d,[4]);r.fill();null!=e&&e.constructor==String&&(r.fillStyle=n,r.textAlign="center",r.font=(.65*d|0)+"px Arial",r.fillText(e,a+.5*c,b+.75*d),r.textAlign="left");a=k&&!this.block_click;k&&this.blockClick();return a};k.prototype.isAreaClicked=
function(a,b,c,d,e){var f=this.mouse;h.isInsideRectangle(f[0],f[1],a,b,c,d);b=(a=(f=this.last_click_position)&&h.isInsideRectangle(f[0],f[1],a,b,c,d))&&!this.block_click;a&&e&&this.blockClick();return b};k.prototype.renderInfo=function(a,b,c){b=b||10;c=c||this.canvas.height-80;a.save();a.translate(b,c);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+