From 81387396c06cfc6511671297716c90af5858e472 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 4 Dec 2019 16:06:53 +0000 Subject: [PATCH] Move vertical ports off the node to prevent crowding --- .../editor-client/src/js/ui/palette.js | 27 ++++++++++--------- .../@node-red/editor-client/src/js/ui/view.js | 27 +++++++++++++------ 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index f80ac98d0..617076645 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -140,9 +140,9 @@ RED.palette = (function() { labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); if (RED.view.vertical()) { - 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-input").css({top: "-5px"}); + // 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-input").css({top: "-5px"}); }else{ 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"}); @@ -235,16 +235,19 @@ RED.palette = (function() { d.css("backgroundColor", RED.utils.getNodeColor(nt,def)); - if (def.outputs > 0) { - var portOut = document.createElement("div"); - portOut.className = "red-ui-palette-port red-ui-palette-port-output"; - d.append(portOut); - } + if (!RED.view.vertical()) { - if (def.inputs > 0) { - var portIn = document.createElement("div"); - portIn.className = "red-ui-palette-port red-ui-palette-port-input"; - d.append(portIn); + if (def.outputs > 0) { + var portOut = document.createElement("div"); + portOut.className = "red-ui-palette-port red-ui-palette-port-output"; + 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); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index d3c8d6cf1..d82316654 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2868,7 +2868,7 @@ RED.view = (function() { d.w = node_height; } else { 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{ 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) { d.w = node_height } 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; }else{ @@ -3180,7 +3180,14 @@ RED.view = (function() { .attr("r",5) .attr("class","red-ui-flow-port red-ui-flow-link-port") } 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);}) .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) @@ -3216,11 +3223,15 @@ RED.view = (function() { .attr("r",5) .attr("class","red-ui-flow-port red-ui-flow-link-port") } else { - output_group_ports = output_group.append("rect") - .attr("class","red-ui-flow-port") - .attr("rx",3).attr("ry",3) - .attr("width",10) - .attr("height",10) + if (vertical) { + 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"); + } else { + output_group_ports = output_group.append("rect") + .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);}})() )