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

Move vertical ports off the node to prevent crowding

Browse Source
This commit is contained in:
Nick O'Leary 2019-12-04 16:06:53 +00:00
parent e2b7377ab7
commit 81387396c0
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -140,9 +140,9 @@ RED.palette = (function() {
labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines));
if (RED.view.vertical()) { if (RED.view.vertical()) {
el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px", left: "55px"}); // el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px", left: "55px"});
el.find(".red-ui-palette-port-output").css({top:(multiLineNodeHeight-5)+"px", right: "55px"}); // el.find(".red-ui-palette-port-output").css({top:(multiLineNodeHeight-5)+"px", right: "55px"});
el.find(".red-ui-palette-port-input").css({top: "-5px"}); // el.find(".red-ui-palette-port-input").css({top: "-5px"});
}else{ }else{
el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px"}); el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px"});
// el.find(".palette_port_output").css({top:(multiLineNodeHeight/2-5)+"px", right: "-6px", left: "auto"}); // el.find(".palette_port_output").css({top:(multiLineNodeHeight/2-5)+"px", right: "-6px", left: "auto"});
@ -235,16 +235,19 @@ RED.palette = (function() {
d.css("backgroundColor", RED.utils.getNodeColor(nt,def)); d.css("backgroundColor", RED.utils.getNodeColor(nt,def));
if (def.outputs > 0) { if (!RED.view.vertical()) {
var portOut = document.createElement("div");
portOut.className = "red-ui-palette-port red-ui-palette-port-output";
d.append(portOut);
}
if (def.inputs > 0) { if (def.outputs > 0) {
var portIn = document.createElement("div"); var portOut = document.createElement("div");
portIn.className = "red-ui-palette-port red-ui-palette-port-input"; portOut.className = "red-ui-palette-port red-ui-palette-port-output";
d.append(portIn); d.append(portOut);
}
if (def.inputs > 0) {
var portIn = document.createElement("div");
portIn.className = "red-ui-palette-port red-ui-palette-port-input";
d.append(portIn);
}
} }
createCategory(nodeCategory,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id); createCategory(nodeCategory,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id);

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

@ -2868,7 +2868,7 @@ RED.view = (function() {
d.w = node_height; d.w = node_height;
} else { } else {
if (vertical) { if (vertical) {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 ); d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 16 );
}else{ }else{
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) ); d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
} }
@ -3125,7 +3125,7 @@ RED.view = (function() {
if (hideLabel) { if (hideLabel) {
d.w = node_height d.w = node_height
} else { } else {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 ); d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 16 );
} }
d.h = node_height; d.h = node_height;
}else{ }else{
@ -3180,7 +3180,14 @@ 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).attr("y",vertical?-3:0) if (vertical) {
inputGroupPorts = inputGroup.append("path").attr("class","red-ui-flow-port").attr("d","M 0 4.5 v -6 q 0 -3 3 -3 h 4 q 3 0 3 3 v6");
} else {
inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10);
}
//.attr("rx",3).attr("ry",3).attr("width",10).attr("height",10).attr("y",vertical?-4: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);})
@ -3216,11 +3223,15 @@ 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 {
output_group_ports = output_group.append("rect") if (vertical) {
.attr("class","red-ui-flow-port") output_group_ports = output_group.append("path").attr("class","red-ui-flow-port").attr("d","M0 2.5 v 6 q 0 3 3 3 h 4 q 3 0 3 -3 v-6");
.attr("rx",3).attr("ry",3) } else {
.attr("width",10) output_group_ports = output_group.append("rect")
.attr("height",10) .attr("class","red-ui-flow-port")
.attr("rx",3).attr("ry",3)
.attr("width",10)
.attr("height",10)
}
} }
output_group_ports.on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() ) output_group_ports.on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )