frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

[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
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() { 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);
@ -3459,7 +3463,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
if (d._def.align) { if (d._def.align) {
text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align); text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
if (d._def.align === "right") { 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); 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() {