frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects 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
1 changed files with 33 additions and 50 deletions
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() {