1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

[groups] Use requestAnimationFrame for view redraw

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

View File

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