From c86e4f52a0e827b543b8056811025425bbd9289f Mon Sep 17 00:00:00 2001 From: Kazuhito Yokoi Date: Tue, 12 Jul 2022 00:10:51 +0900 Subject: [PATCH 1/2] Fix shade for node icon to be rounded rectangle --- .../node_modules/@node-red/editor-client/src/sass/palette.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index 0d123918a..fdfe77f09 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -171,6 +171,7 @@ left:0; width: 30px; border-right: 1px solid var(--red-ui-node-icon-background-color); + border-radius: 4px 0px 0px 4px; background-color: var(--red-ui-node-icon-background-color); } .red-ui-palette-icon-container-right { @@ -178,6 +179,7 @@ right: 0; border-right: none; border-left: 1px solid var(--red-ui-node-icon-background-color); + border-radius: 0px 4px 4px 0px; } .red-ui-palette-icon { display: inline-block; From 6ff2232df3b0cfff1bc7e44cd97ac7f76054d055 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 12 Jul 2022 09:27:45 +0100 Subject: [PATCH 2/2] Ensure node icon shade has properly rounded corners --- .../@node-red/editor-client/src/js/ui/view.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) 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 5a9df8ed7..8c7ea22a3 100755 --- 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 @@ -4580,12 +4580,10 @@ RED.view = (function() { icon_groupEl.setAttribute("y",0); icon_groupEl.style["pointer-events"] = "none"; node[0][0].__iconGroup__ = icon_groupEl; - var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","rect"); + var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","path"); icon_shade.setAttribute("x",0); icon_shade.setAttribute("y",0); icon_shade.setAttribute("class","red-ui-flow-node-icon-shade") - icon_shade.setAttribute("width",30); - icon_shade.setAttribute("height",Math.min(50,d.h-4)); icon_groupEl.appendChild(icon_shade); node[0][0].__iconShade__ = icon_shade; @@ -4878,9 +4876,20 @@ RED.view = (function() { } icon.attr("y",function(){return (d.h-d3.select(this).attr("height"))/2;}); - this.__iconShade__.setAttribute("height", d.h ); + + + const iconShadeHeight = d.h + const iconShadeWidth = 30 + this.__iconShade__.setAttribute("d", hideLabel ? + `M5 0 h${iconShadeWidth-10} a 5 5 0 0 1 5 5 v${iconShadeHeight-10} a 5 5 0 0 1 -5 5 h-${iconShadeWidth-10} a 5 5 0 0 1 -5 -5 v-${iconShadeHeight-10} a 5 5 0 0 1 5 -5` : ( + "right" === d._def.align ? + `M 0 0 h${iconShadeWidth-5} a 5 5 0 0 1 5 5 v${iconShadeHeight-10} a 5 5 0 0 1 -5 5 h-${iconShadeWidth-5} v-${iconShadeHeight}` : + `M5 0 h${iconShadeWidth-5} v${iconShadeHeight} h-${iconShadeWidth-5} a 5 5 0 0 1 -5 -5 v-${iconShadeHeight-10} a 5 5 0 0 1 5 -5` + ) + ) + this.__iconShadeBorder__.style.display = hideLabel?'none':'' this.__iconShadeBorder__.setAttribute("d", - "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.5 : 29.5) + " "+(d.selected?1:0.5)+" l 0 " + (d.h - (d.selected?2:1)) ); faIcon.attr("y",(d.h+13)/2); }