Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-07 14:09:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

performance fix

Browse Source
This commit is contained in:
tamat
2018-03-08 10:03:51 +01:00
parent 5a5bffa160
commit 1df90b5348
3 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
build/litegraph.js
View File

@@ -2126,9 +2126,14 @@ LGraphNode.prototype.computeSize = function( minHeight, out )
* @method getBounding
* @return {Float32Array[4]} the total size
*/
LGraphNode.prototype.getBounding = function()
LGraphNode.prototype.getBounding = function( out )
{
return new Float32Array([this.pos[0] - 4, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
out = out || new Float32Array(4);
out[0] = this.pos[0] - 4;
out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;
out[2] = this.pos[0] + this.size[0] + 4;
out[3] = this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT;
return out;
}
/**
@@ -4007,6 +4012,7 @@ LGraphCanvas.prototype.sendToBack = function(n)
LGraphCanvas.prototype.computeVisibleNodes = function()
{
var temp = new Float32Array(4);
var visible_nodes = [];
for(var i = 0, l = this.graph._nodes.length; i < l; ++i)
{
@@ -4016,7 +4022,7 @@ LGraphCanvas.prototype.computeVisibleNodes = function()
if(this.live_mode && !n.onDrawBackground && !n.onDrawForeground)
continue;
if(!overlapBounding(this.visible_area, n.getBounding() ))
if(!overlapBounding( this.visible_area, n.getBounding( temp ) ))
continue; //out of the visible area
visible_nodes.push(n);

10
build/litegraph.min.js vendored
View File

@@ -45,7 +45,7 @@ LGraphNode.prototype.addProperty=function(a,b,e,k){e={name:a,type:e,default_valu
LGraphNode.prototype.addOutputs=function(a){for(var b=0;b<a.length;++b){var e=a[b],k={name:e[0],type:e[1],link:null};if(a[2])for(var c in e[2])k[c]=e[2][c];this.outputs||(this.outputs=[]);this.outputs.push(k);if(this.onOutputAdded)this.onOutputAdded(k)}this.size=this.computeSize()};LGraphNode.prototype.removeOutput=function(a){this.disconnectOutput(a);this.outputs.splice(a,1);this.size=this.computeSize();if(this.onOutputRemoved)this.onOutputRemoved(a)};LGraphNode.prototype.addInput=function(a,b,e){a=
{name:a,type:b||0,link:null};if(e)for(var k in e)a[k]=e[k];this.inputs||(this.inputs=[]);this.inputs.push(a);this.size=this.computeSize();if(this.onInputAdded)this.onInputAdded(a);return a};LGraphNode.prototype.addInputs=function(a){for(var b=0;b<a.length;++b){var e=a[b],k={name:e[0],type:e[1],link:null};if(a[2])for(var c in e[2])k[c]=e[2][c];this.inputs||(this.inputs=[]);this.inputs.push(k);if(this.onInputAdded)this.onInputAdded(k)}this.size=this.computeSize()};LGraphNode.prototype.removeInput=function(a){this.disconnectInput(a);
this.inputs.splice(a,1);this.size=this.computeSize();if(this.onInputRemoved)this.onInputRemoved(a)};LGraphNode.prototype.addConnection=function(a,b,e,k){a={name:a,type:b,pos:e,direction:k,links:null};this.connections.push(a);return a};LGraphNode.prototype.computeSize=function(a,b){function e(a){return a?d*a.length*0.6:0}var k=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1),c=b||new Float32Array([0,0]),k=Math.max(k,1);c[1]=14*k+6;var d=14,k=e(this.title),f=0,g=0;if(this.inputs)for(var n=
0,q=this.inputs.length;n<q;++n){var l=this.inputs[n],l=l.label||l.name||"",l=e(l);f<l&&(f=l)}if(this.outputs)for(n=0,q=this.outputs.length;n<q;++n)l=this.outputs[n],l=l.label||l.name||"",l=e(l),g<l&&(g=l);c[0]=Math.max(f+g+10,k);c[0]=Math.max(c[0],h.NODE_WIDTH);return c};LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-h.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};LGraphNode.prototype.isPointInsideNode=
0,q=this.inputs.length;n<q;++n){var l=this.inputs[n],l=l.label||l.name||"",l=e(l);f<l&&(f=l)}if(this.outputs)for(n=0,q=this.outputs.length;n<q;++n)l=this.outputs[n],l=l.label||l.name||"",l=e(l),g<l&&(g=l);c[0]=Math.max(f+g+10,k);c[0]=Math.max(c[0],h.NODE_WIDTH);return c};LGraphNode.prototype.getBounding=function(a){a=a||new Float32Array(4);a[0]=this.pos[0]-4;a[1]=this.pos[1]-h.NODE_TITLE_HEIGHT;a[2]=this.pos[0]+this.size[0]+4;a[3]=this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT;return a};LGraphNode.prototype.isPointInsideNode=
function(a,b,e){e=e||0;var k=this.graph&&this.graph.isLive()?0:20;if(this.flags.collapsed){if(f(a,b,this.pos[0]-e,this.pos[1]-h.NODE_TITLE_HEIGHT-e,h.NODE_COLLAPSED_WIDTH+2*e,h.NODE_TITLE_HEIGHT+2*e))return!0}else if(this.pos[0]-4-e<a&&this.pos[0]+this.size[0]+4+e>a&&this.pos[1]-k-e<b&&this.pos[1]+this.size[1]+e>b)return!0;return!1};LGraphNode.prototype.getSlotInPosition=function(a,b){if(this.inputs)for(var e=0,k=this.inputs.length;e<k;++e){var c=this.inputs[e],d=this.getConnectionPos(!0,e);if(f(a,
b,d[0]-10,d[1]-5,20,10))return{input:c,slot:e,link_pos:d,locked:c.locked}}if(this.outputs)for(e=0,k=this.outputs.length;e<k;++e)if(c=this.outputs[e],d=this.getConnectionPos(!1,e),f(a,b,d[0]-10,d[1]-5,20,10))return{output:c,slot:e,link_pos:d,locked:c.locked};return null};LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,e=this.inputs.length;b<e;++b)if(a==this.inputs[b].name)return b;return-1};LGraphNode.prototype.findOutputSlot=function(a){if(!this.outputs)return-1;
for(var b=0,e=this.outputs.length;b<e;++b)if(a==this.outputs[b].name)return b;return-1};LGraphNode.prototype.connect=function(a,b,e){e=e||0;if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return h.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return h.debug&&console.log("Connect: Error, slot number not found"),!1;b&&b.constructor===Number&&(b=this.graph.getNodeById(b));if(!b)throw"Node not found";if(b==this)return!1;if(e.constructor===
@@ -95,10 +95,10 @@ b.onSelected)b.onSelected();b.selected=!0;this.selected_nodes[this.graph._nodes[
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 e=this.convertOffsetToCanvas(b);this.scale=a;this.scale>this.max_zoom?this.scale=this.max_zoom:this.scale<this.min_zoom&&(this.scale=this.min_zoom);var c=this.convertOffsetToCanvas(b),e=[c[0]-e[0],c[1]-e[1]];this.offset[0]+=e[0];this.offset[1]+=e[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(){for(var a=[],b=0,e=this.graph._nodes.length;b<e;++b){var c=this.graph._nodes[b];(!this.live_mode||c.onDrawBackground||c.onDrawForeground)&&g(this.visible_area,c.getBounding())&&a.push(c)}return a};LGraphCanvas.prototype.draw=function(a,b){if(this.canvas){var e=h.getTime();this.render_time=0.001*(e-this.last_draw_time);this.last_draw_time=e;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.always_render_background||this.graph&&this.graph._last_trigger_time&&1E3>e-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}};LGraphCanvas.prototype.drawFrontCanvas=function(){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]);this.visible_nodes=b=
this.computeVisibleNodes();for(var e=0;e<b.length;++e){var c=b[e];a.save();a.translate(c.pos[0],c.pos[1]);this.drawNode(c,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 h.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===
LGraphCanvas.prototype.computeVisibleNodes=function(){for(var a=new Float32Array(4),b=[],e=0,c=this.graph._nodes.length;e<c;++e){var d=this.graph._nodes[e];(!this.live_mode||d.onDrawBackground||d.onDrawForeground)&&g(this.visible_area,d.getBounding(a))&&b.push(d)}return b};LGraphCanvas.prototype.draw=function(a,b){if(this.canvas){var e=h.getTime();this.render_time=0.001*(e-this.last_draw_time);this.last_draw_time=e;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.always_render_background||this.graph&&this.graph._last_trigger_time&&1E3>e-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}};LGraphCanvas.prototype.drawFrontCanvas=function(){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]);this.visible_nodes=
b=this.computeVisibleNodes();for(var e=0;e<b.length;++e){var c=b[e];a.save();a.translate(c.pos[0],c.pos[1]);this.drawNode(c,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 h.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===
h.EVENT?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())}a.restore()}this.dirty_area&&a.restore();a.finish2D&&a.finish2D();this.dirty_canvas=!1}};LGraphCanvas.prototype.renderInfo=function(a,b,e){b=b||0;e=e||0;a.save();a.translate(b,e);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);a.restore()};LGraphCanvas.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);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.imageSmoothingEnabled=

12
src/litegraph.js
View File

@@ -2125,9 +2125,14 @@ LGraphNode.prototype.computeSize = function( minHeight, out )
* @method getBounding
* @return {Float32Array[4]} the total size
*/
LGraphNode.prototype.getBounding = function()
LGraphNode.prototype.getBounding = function( out )
{
return new Float32Array([this.pos[0] - 4, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
out = out || new Float32Array(4);
out[0] = this.pos[0] - 4;
out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;
out[2] = this.pos[0] + this.size[0] + 4;
out[3] = this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT;
return out;
}
/**
@@ -4006,6 +4011,7 @@ LGraphCanvas.prototype.sendToBack = function(n)
LGraphCanvas.prototype.computeVisibleNodes = function()
{
var temp = new Float32Array(4);
var visible_nodes = [];
for(var i = 0, l = this.graph._nodes.length; i < l; ++i)
{
@@ -4015,7 +4021,7 @@ LGraphCanvas.prototype.computeVisibleNodes = function()
if(this.live_mode && !n.onDrawBackground && !n.onDrawForeground)
continue;
if(!overlapBounding(this.visible_area, n.getBounding() ))
if(!overlapBounding( this.visible_area, n.getBounding( temp ) ))
continue; //out of the visible area
visible_nodes.push(n);