frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

[groups] Use requestAnimationFrame for view redraw

Browse Source 
This moves the expensive redraw code out of the event handling phase
and onto the browser's repaint phase. This makes the event handling
more responsive, particularly when dragging a large number of nodes.

It also removes lots of unnecessary anonymous functions in the redraw
code that should also improve performance.
This commit is contained in:
Nick O'Leary 2020-03-23 21:30:52 +00:00
parent 768aa4ac92
commit f0038e9796
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 33 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -3061,6 +3061,10 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
}
function redraw() {
requestAnimationFrame(_redraw);
}
function _redraw() {
eventLayer.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
@ -3240,7 +3244,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
var nodeEnter = node.enter().insert("svg:g")
.attr("class", "red-ui-flow-node red-ui-flow-node-group")
.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; });
.classed("red-ui-flow-subflow", activeSubflow != null);
nodeEnter.each(function(d,i) {
var node = d3.select(this);
@ -3306,10 +3310,10 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
var mainRect = node.append("rect")
.attr("class", "red-ui-flow-node")
.classed("red-ui-flow-node-unknown",function(d) { return d.type == "unknown"; })
.classed("red-ui-flow-node-unknown", d.type == "unknown")
.attr("rx", 5)
.attr("ry", 5)
.attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
.attr("fill", RED.utils.getNodeColor(d.type,d._def))
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
.on("touchstart",function(d) {
@ -3417,17 +3421,17 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
.attr("x",0).attr("y",0)
.attr("class","red-ui-flow-node-icon-shade")
.attr("width","30")
.attr("height",function(d){return Math.min(50,d.h-4);});
.attr("height", Math.min(50,d.h-4));
createIconAttributes(icon_url, icon_group, d);
var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
.attr("d","M 30 1 l 0 "+(d.h-2))
.attr("class","red-ui-flow-node-icon-shade-border");
if ("right" == d._def.align) {
icon_group.attr("class","red-ui-flow-node-icon-group red-ui-flow-node-icon-group-"+d._def.align);
icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
icon_shade_border.attr("d", "M 0 1 l 0 "+(d.h-2))
//icon.attr("class","red-ui-flow-node-icon red-ui-flow-node-icon-"+d._def.align);
//icon.attr("class","red-ui-flow-node-icon-shade red-ui-flow-node-icon-shade-"+d._def.align);
//icon.attr("class","red-ui-flow-node-icon-shade-border red-ui-flow-node-icon-shade-border-"+d._def.align);
@ -3459,7 +3463,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
if (d._def.align) {
text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
if (d._def.align === "right") {
text.attr("text-anchor","end");
text.attr("text-anchor","end");
}
}
}
@ -3523,17 +3527,17 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
}
var thisNode = d3.select(this);
thisNode.classed("red-ui-flow-node-disabled", function(d) { return d.d === true});
thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
thisNode.classed("red-ui-flow-node-disabled", d.d === true);
thisNode.classed("red-ui-flow-subflow", activeSubflow != null)
//thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
thisNode.attr("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")");
if (mouse_mode != RED.state.MOVING_ACTIVE) {
thisNode.classed("red-ui-flow-node-selected",function(d) { return d.selected })
thisNode.classed("red-ui-flow-node-selected", d.selected )
thisNode.selectAll(".red-ui-flow-node")
.attr("width",function(d){return d.w})
.attr("height",function(d){return d.h})
.classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; })
.attr("width", d.w)
.attr("height", d.h)
.classed("red-ui-flow-node-highlighted",d.highlighted )
;
var l = "";
if (d._def.label) {
@ -3576,10 +3580,8 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
for (var ic = 0; ic < sn; ic++) {
var yn = yp + ic * 24;
thisNode.select("#red-ui-flow-node-label-"+labelId+"-"+ic)
.text(function(d,i){
return separateTextByLineBreak[ic];
})
.attr("y", function(d){return yn;})
.text(separateTextByLineBreak[ic])
.attr("y", yn)
.attr("class",function(d){
var s = "";
if (d._def.labelStyle) {
@ -3603,9 +3605,9 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start");
}
var alignX;
thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; });
thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", "translate(0, 0)" );
thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { alignX=38; return 38; });
thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", "translate("+(d.w-30)+",0)");
thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){ alignX=d.w-38; return d.w-38});
//thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
//thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
@ -3702,12 +3704,12 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
}
thisNode.selectAll(".red-ui-flow-node-changed")
.attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
.classed("hide",function(d) { return !(d.changed||d.moved); });
.attr("transform", "translate("+(d.w-10)+", -2)")
.classed("hide", !(d.changed||d.moved));
thisNode.selectAll(".red-ui-flow-node-error")
.attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
.classed("hide",function(d) { return d.valid; });
.attr("transform", "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)")
.classed("hide", d.valid);
thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) {
var port = d3.select(this);
@ -3715,18 +3717,14 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
});
thisNode.selectAll(".red-ui-flow-node-icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height",function(d){return d.h;});
thisNode.selectAll(".red-ui-flow-node-icon-shade-border").attr("d", function (d) {
return "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2);
});
thisNode.selectAll(".fa-lg").attr("y",function(d){return (d.h+13)/2;});
thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height", d.h );
thisNode.selectAll(".red-ui-flow-node-icon-shade-border").attr("d",
"M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2)
);
thisNode.selectAll(".fa-lg").attr("y",(d.h+13)/2);
thisNode.selectAll(".red-ui-flow-node-button").attr("opacity",function(d) {
return (!isButtonEnabled(d))?0.4:1
});
thisNode.selectAll(".red-ui-flow-node-button-button").attr("cursor",function(d) {
return (!isButtonEnabled(d))?"":"pointer";
});
thisNode.selectAll(".red-ui-flow-node-button").attr("opacity", function(d2) { return !isButtonEnabled(d2)?0.4:1 });
thisNode.selectAll(".red-ui-flow-node-button-button").attr("cursor",function(d2) { return isButtonEnabled(d2)?"":"pointer"});
thisNode.selectAll(".red-ui-flow-node-button").attr("transform",function(d){
var x = d._def.align == "right"?d.w-6:-25;
if (d._def.button.toggle && !d[d._def.button.toggle]) {
@ -4082,7 +4080,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
g.selectAll(".red-ui-flow-group-outline")
.attr("width",d.w)
.attr("height",d.h)
// .style("stroke-opacity",d.selected?0.8:0);
g.selectAll(".red-ui-flow-group-outline-select")
.attr("width",d.w+8)
@ -4127,19 +4124,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
.attr("text-anchor",labelAnchor);
}
// g.selectAll(".red-ui-flow-group-handle-0")
// .style("opacity",function(d) { return d.selected?1:0})
// g.selectAll(".red-ui-flow-group-handle-1")
// .attr("transform","translate("+(maxX-minX)+",0)")
// .style("opacity",function(d) { return d.selected?1:0})
// g.selectAll(".red-ui-flow-group-handle-2")
// .attr("transform","translate("+(maxX-minX)+","+(maxY-minY)+")")
// .style("opacity",function(d) { return d.selected?1:0})
// g.selectAll(".red-ui-flow-group-handle-3")
// .attr("transform","translate(0,"+(maxY-minY)+")")
// .style("opacity",function(d) { return d.selected?1:0})
delete dirtyGroups[d.id];
delete d.dirty;
}
@ -4159,7 +4143,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
if (d3.event) {
d3.event.preventDefault();
}
}
function focusView() {