').text(node.icon).appendTo(iconRow);
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 4e7dc7312..e3b91d180 100644
--- 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
@@ -129,10 +129,9 @@ RED.palette = (function() {
}
function setIcon(element,sf) {
- var iconElement = element.find(".palette_icon");
- var faIconElement = element.find("i");
var icon_url = RED.utils.getNodeIcon(sf._def,sf);
- RED.utils.changeIconElement(icon_url, iconElement, faIconElement);
+ var iconContainer = element.find(".palette_icon_container");
+ RED.utils.createIconElement(icon_url, iconContainer, true);
}
function escapeNodeType(nt) {
@@ -170,7 +169,7 @@ RED.palette = (function() {
if (def.icon) {
var icon_url = RED.utils.getNodeIcon(def);
var iconContainer = $('
',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
- RED.utils.createDynamicIconElement(icon_url, iconContainer);
+ RED.utils.createIconElement(icon_url, iconContainer, true);
}
d.style.backgroundColor = RED.utils.getNodeColor(nt,def);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
index e5d330813..cce7dddf3 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
@@ -203,8 +203,7 @@ RED.search = (function() {
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('
',{class:"palette_icon_container"}).appendTo(nodeDiv);
- var iconPath = RED.utils.separateIconPath(icon_url);
- RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, true);
+ RED.utils.createIconElement(icon_url, iconContainer, true);
var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div);
if (node.z) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
index 8689685af..0e0ce98b3 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
@@ -133,8 +133,7 @@ RED.typeSearch = (function() {
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('
',{class:"palette_icon_container"}).appendTo(nodeDiv);
- var iconPath = RED.utils.separateIconPath(icon_url);
- RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
+ RED.utils.createIconElement(icon_url, iconContainer, false);
if (def.inputs > 0) {
$('
',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index a39781a40..7c4647045 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -892,42 +892,33 @@ RED.utils = (function() {
return parts;
}
- function createIconElement(moduleName, iconName, iconContainer, isLarge) {
- if (moduleName === "font-awesome") {
+ /**
+ * Create or update an icon element and append it to iconContainer.
+ * @param iconUrl - Url of icon.
+ * @param iconContainer - icon container element with palette_icon_container class.
+ * @param isLarge - whether the icon size is large.
+ */
+ function createIconElement(iconUrl, iconContainer, isLarge) {
+ // Removes the previous icon when icon was changed.
+ var iconElement = iconContainer.find(".palette_icon");
+ if (iconElement.length !== 0) {
+ iconElement.remove();
+ }
+ var faIconElement = iconContainer.find("i");
+ if (faIconElement.length !== 0) {
+ faIconElement.remove();
+ }
+
+ // Show either icon image or font-awesome icon
+ var iconPath = separateIconPath(iconUrl);
+ if (iconPath.module === "font-awesome") {
+ var faIconElement = $('
').appendTo(iconContainer);
var faLarge = isLarge ? "fa-lg " : "";
- $('
').appendTo(iconContainer);
- } else {
- var iconUrl = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+iconName;
- $('
',{class:"palette_icon",style:"background-image: url("+iconUrl+")"}).appendTo(iconContainer);
- }
- }
-
- function createDynamicIconElement(iconUrl, iconContainer) {
- var imageIconElement = $('
',{class:"palette_icon"}).appendTo(iconContainer);
- var faIconElement = $('
').appendTo(iconContainer);
- var iconPath = separateIconPath(iconUrl);
- if (iconPath.module === "font-awesome") {
- faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
+ faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
} else {
+ var imageIconElement = $('
',{class:"palette_icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
}
- var iconElements = {
- "image": imageIconElement,
- "fa": faIconElement
- };
- return iconElements;
- }
-
- function changeIconElement(iconUrl, imageIconElement, faIconElement) {
- var iconPath = separateIconPath(iconUrl);
- faIconElement.removeClass();
- if (iconPath.module === "font-awesome") {
- imageIconElement.hide();
- faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
- } else {
- imageIconElement.css("backgroundImage", "url("+iconUrl+")");
- imageIconElement.show();
- }
}
return {
@@ -943,8 +934,6 @@ RED.utils = (function() {
addSpinnerOverlay: addSpinnerOverlay,
decodeObject: decodeObject,
parseContextKey: parseContextKey,
- createIconElement: createIconElement,
- createDynamicIconElement: createDynamicIconElement,
- changeIconElement: changeIconElement
+ createIconElement: createIconElement
}
})();
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 393dafc7c..365f506b2 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
@@ -1869,23 +1869,36 @@ RED.view = (function() {
resetMouseVars();
}
- function updateIconAttributes(iconUrl, icon, fontAwesomeIcon, d) {
- var isIconImage = true;
+ function createIconAttributes(iconUrl, icon_group, d) {
+ var fontAwesomeUnicode = null;
if (iconUrl.indexOf("font-awesome/") === 0) {
var iconName = iconUrl.substr(13);
var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName);
- if (fontAwesomeUnicode) {
- isIconImage = false;
- fontAwesomeIcon.text(fontAwesomeUnicode);
- } else {
+ if (!fontAwesomeUnicode) {
var iconPath = RED.utils.getDefaultNodeIcon(d._def, d);
- iconUrl = "icons/"+iconPath.module+"/"+iconPath.file;
+ iconUrl = RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
}
}
- if (isIconImage) {
- // Hide font-awesome icon.
- fontAwesomeIcon.attr("xlink:href",null);
- fontAwesomeIcon.text(null);
+ if (fontAwesomeUnicode) {
+ // Since Node-RED workspace uses SVG, i tag cannot be used for font-awesome icon.
+ // On SVG, use text tag as an alternative.
+ icon_group.append("text")
+ .attr("xlink:href",iconUrl)
+ .attr("class","fa-lg")
+ .attr("x",15)
+ .attr("y",21)
+ .attr("stroke","none")
+ .attr("fill","#ffffff")
+ .attr("text-anchor","middle")
+ .attr("font-family", "FontAwesome")
+ .text(fontAwesomeUnicode);
+ } else {
+ var icon = icon_group.append("image")
+ .attr("xlink:href",iconUrl)
+ .attr("class","node_icon")
+ .attr("x",0)
+ .attr("width","30")
+ .attr("height","30");
var img = new Image();
img.src = iconUrl;
@@ -1901,15 +1914,7 @@ RED.view = (function() {
// icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
//}
}
- } else {
- // Hide icon image.
- icon.attr("xlink:href",null);
- icon.style("display","none");
-
- fontAwesomeIcon.attr("xlink:href",iconUrl);
}
-
- return iconUrl;
}
function redraw() {
@@ -2155,22 +2160,7 @@ RED.view = (function() {
.attr("fill-opacity","0.05")
.attr("height",function(d){return Math.min(50,d.h-4);});
- var icon = icon_group.append("image")
- .attr("xlink:href",icon_url)
- .attr("class","node_icon")
- .attr("x",0)
- .attr("width","30")
- .attr("height","30");
-
- var fontAwesomeIcon = icon_group.append("text")
- .attr("xlink:href",icon_url)
- .attr("class","fa-lg")
- .attr("x",15)
- .attr("y",21)
- .attr("stroke","none")
- .attr("fill","#ffffff")
- .attr("text-anchor","middle")
- .attr("font-family", "FontAwesome");
+ createIconAttributes(icon_url, icon_group, d);
var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
@@ -2196,8 +2186,6 @@ RED.view = (function() {
// icon_shade.attr("width",35); //icon.attr("x",5);
//}
- updateIconAttributes(icon_url, icon, fontAwesomeIcon, d);
-
//icon.style("pointer-events","none");
icon_group.style("pointer-events","none");
}
@@ -2334,17 +2322,23 @@ RED.view = (function() {
});
if (d._def.icon) {
- icon = thisNode.select(".node_icon");
+ var icon = thisNode.select(".node_icon");
var faIcon = thisNode.select(".fa-lg");
var current_url;
- if (icon.attr("xlink:href")) {
+ if (!icon.empty()) {
current_url = icon.attr("xlink:href");
} else {
current_url = faIcon.attr("xlink:href");
}
var new_url = RED.utils.getNodeIcon(d._def,d);
if (new_url !== current_url) {
- updateIconAttributes(new_url, icon, faIcon, d);
+ if (!icon.empty()) {
+ icon.remove();
+ } else {
+ faIcon.remove();
+ }
+ var iconGroup = thisNode.select(".node_icon_group");
+ createIconAttributes(new_url, iconGroup, d);
}
}