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

Various vertical flow layout tweaks

Browse Source 
- ports are set off the node a bit more, with a bigger
   gap between them
 - status has moved to the top edge next to the input
 - change/error icons moved to top-left corner
This commit is contained in:
Nick O'Leary 2019-11-22 17:12:51 +00:00
parent 8e8cac60b0
commit 4a6941a0d2
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -622,7 +622,7 @@ RED.view = (function() {
var scaleX = 0; var scaleX = 0;
if (dy*sc <= 0) { if (dy*sc <= 0) {
var r = 1-Math.max(0,((2*node_height) - Math.abs(dy*sc))/(2*node_height)); var r = 1-Math.max(0,((2*node_height) - Math.abs(dy*sc))/(2*node_height));
scale = fullScale+(2*fullScale*r); scale = fullScale+(fullScale*r);
} else if (delta < (1.5*node_width)) { } else if (delta < (1.5*node_width)) {
scale = fullScale-fullScale*(((1.5*node_width)-delta)/(1.5*node_width)); scale = fullScale-fullScale*(((1.5*node_width)-delta)/(1.5*node_width));
@ -836,7 +836,7 @@ RED.view = (function() {
var sourcePort = quickAddLink.port; var sourcePort = quickAddLink.port;
if (vertical) { if (vertical) {
var portX = -((numOutputs-1)/2)*13 +13*sourcePort; var portX = -((numOutputs-1)/2)*15 +15*sourcePort;
}else{ }else{
var portY = -((numOutputs-1)/2)*13 +13*sourcePort; var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
} }
@ -1200,7 +1200,7 @@ RED.view = (function() {
var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1; var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1;
var sourcePort = drag_line.port; var sourcePort = drag_line.port;
if (vertical) { if (vertical) {
var portX = -((numOutputs-1)/2)*13 +13*sourcePort; var portX = -((numOutputs-1)/2)*15 +15*sourcePort;
}else{ }else{
var portY = -((numOutputs-1)/2)*13 +13*sourcePort; var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
} }
@ -3099,7 +3099,7 @@ RED.view = (function() {
.attr("r",5) .attr("r",5)
.attr("class","red-ui-flow-port red-ui-flow-link-port") .attr("class","red-ui-flow-port red-ui-flow-link-port")
} else { } else {
inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10).attr("y",vertical?-3:0)
} }
inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
.on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
@ -3120,7 +3120,7 @@ RED.view = (function() {
} }
} }
if (vertical) { if (vertical) {
var x = (d.w/2)-((numOutputs-1)/2)*13; var x = (d.w/2)-((numOutputs-1)/2)*15;
}else{ }else{
var y = (d.h/2)-((numOutputs-1)/2)*13; var y = (d.h/2)-((numOutputs-1)/2)*13;
} }
@ -3131,7 +3131,7 @@ RED.view = (function() {
if (d.type === "link out") { if (d.type === "link out") {
output_group_ports = output_group.append("circle") output_group_ports = output_group.append("circle")
.attr("cx",vertical ? 6 : 11).attr("cy", vertical ? 11 : 6) .attr("cx",vertical ? 6 : 11).attr("cy", vertical ? 8 : 6)
.attr("r",5) .attr("r",5)
.attr("class","red-ui-flow-port red-ui-flow-link-port") .attr("class","red-ui-flow-port red-ui-flow-link-port")
} else { } else {
@ -3153,8 +3153,8 @@ RED.view = (function() {
if (d._ports) { if (d._ports) {
numOutputs = d.outputs || 1; numOutputs = d.outputs || 1;
if (vertical) { if (vertical) {
x = (d.w/2)-((numOutputs-1)/2)*13; x = (d.w/2)-((numOutputs-1)/2)*15;
var y = d.h - 5; var y = d.h-2;
}else{ }else{
y = (d.h/2)-((numOutputs-1)/2)*13; y = (d.h/2)-((numOutputs-1)/2)*13;
var x = d.w - 5; var x = d.w - 5;
@ -3163,7 +3163,7 @@ RED.view = (function() {
var port = d3.select(this); var port = d3.select(this);
//port.attr("y",(y+13*i)-5).attr("x",x); //port.attr("y",(y+13*i)-5).attr("x",x);
if (vertical) { if (vertical) {
port.attr("transform", function(d) { return "translate("+((x+13*i)-5)+","+ y +")";}); port.attr("transform", function(d) { return "translate("+((x+15*i)-5)+","+ y +")";});
}else{ }else{
port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
} }
@ -3221,11 +3221,11 @@ RED.view = (function() {
if (vertical) { if (vertical) {
thisNode.selectAll(".red-ui-flow-node-changed") thisNode.selectAll(".red-ui-flow-node-changed")
.attr("transform",function(d){return "translate("+(d.w-2)+", -2)"}) .attr("transform",function(d){return "translate("+(0)+", -2)"})
.classed("hide",function(d) { return !(d.changed||d.moved); }); .classed("hide",function(d) { return !(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-2-((d.changed||d.moved)?14:0))+", -2)"}) .attr("transform",function(d){ return "translate("+((d.changed||d.moved)?12:0)+", -2)"})
.classed("hide",function(d) { return d.valid; }); .classed("hide",function(d) { return d.valid; });
} else { } else {
thisNode.selectAll(".red-ui-flow-node-changed") thisNode.selectAll(".red-ui-flow-node-changed")
@ -3310,13 +3310,13 @@ RED.view = (function() {
if (d.status.shape == null && fill == null) { if (d.status.shape == null && fill == null) {
thisNode.selectAll(".red-ui-flow-node-status").style("display","none"); thisNode.selectAll(".red-ui-flow-node-status").style("display","none");
if (vertical) { if (vertical) {
thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(" + (-14+d.w/2) + ","+(d.h+3)+")"); thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(" + (-12+d.w/2) + ","+(-13)+")");
} else { } else {
thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(-14,"+(d.h+3)+")"); thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(-14,"+(d.h+3)+")");
} }
} else { } else {
if (vertical) { if (vertical) {
thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(" + (3 + d.w/2) + ","+(d.h+3)+")"); thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(" + (5 + d.w/2) + ","+(-13)+")");
} else { } else {
thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(3,"+(d.h+3)+")"); thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(3,"+(d.h+3)+")");
} }
@ -3406,7 +3406,7 @@ RED.view = (function() {
var sourcePort = d.sourcePort || 0; var sourcePort = d.sourcePort || 0;
var path; var path;
if (vertical) { if (vertical) {
var x = -((numOutputs-1)/2)*13 +13*sourcePort; var x = -((numOutputs-1)/2)*15 +15*sourcePort;
d.x1 = d.source.x+x; d.x1 = d.source.x+x;
d.y1 = d.source.y+d.source.h/2; d.y1 = d.source.y+d.source.h/2;
d.x2 = d.target.x; d.x2 = d.target.x;