Merge pull request #1940 from node-red-hitachi/import-invalid-fa

Show default icon when invalid font-awesome icon was specified

packages/node_modules/@node-red/editor-client/src/js/ui/diff.js

@@ -498,7 +498,7 @@ RED.diff = (function() {
         nodeDiv.css('backgroundColor',colour);
 
         var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-        RED.utils.createIconElement(icon_url, iconContainer, false);
+        RED.utils.createIconElement(icon_url, iconContainer, false, def, node);
 
         return nodeDiv;
     }

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -808,6 +808,7 @@ RED.editor = (function() {
             buildLabelRow().appendTo(outputsDiv);
         }
 
+        // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
         if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
             $('<hr>').appendTo(dialogForm);
             var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
@@ -820,7 +821,7 @@ RED.editor = (function() {
             var icon_url = RED.utils.getNodeIcon(node._def,node);
             nodeDiv.css('backgroundColor',colour);
             var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-            RED.utils.createIconElement(icon_url, iconContainer, true);
+            RED.utils.createIconElement(icon_url, iconContainer, true, node._def, node);
 
             iconButton.click(function(e) {
                 e.preventDefault();
@@ -834,9 +835,9 @@ RED.editor = (function() {
                 showIconPicker(iconRow,node,iconPath,function(newIcon) {
                     $("#node-settings-icon").text(newIcon||"");
                     var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
-                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                    RED.utils.createIconElement(icon_url, iconContainer, true, node._def, node);
                 });
-            })
+            });
             $('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);
         }
     }

packages/node_modules/@node-red/editor-client/src/js/ui/palette.js

@@ -142,9 +142,9 @@ RED.palette = (function() {
     }
 
     function setIcon(element,sf) {
-        var icon_url = RED.utils.getNodeIcon(sf._def,sf);
+        var icon_url = RED.utils.getNodeIcon(sf._def);
         var iconContainer = element.find(".palette_icon_container");
-        RED.utils.createIconElement(icon_url, iconContainer, true);
+        RED.utils.createIconElement(icon_url, iconContainer, true, sf._def);
     }
 
     function escapeNodeType(nt) {
@@ -182,7 +182,7 @@ RED.palette = (function() {
             if (def.icon) {
                 var icon_url = RED.utils.getNodeIcon(def);
                 var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
-                RED.utils.createIconElement(icon_url, iconContainer, true);
+                RED.utils.createIconElement(icon_url, iconContainer, true, def);
             }
 
             d.style.backgroundColor = RED.utils.getNodeColor(nt,def);

packages/node_modules/@node-red/editor-client/src/js/ui/search.js

@@ -203,7 +203,7 @@ RED.search = (function() {
                     nodeDiv.css('backgroundColor',colour);
 
                     var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                    RED.utils.createIconElement(icon_url, iconContainer, true, node._def, node);
 
                     var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
                     if (node.z) {

packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js

@@ -133,7 +133,7 @@ RED.typeSearch = (function() {
                 nodeDiv.css('backgroundColor',colour);
 
                 var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                RED.utils.createIconElement(icon_url, iconContainer, false);
+                RED.utils.createIconElement(icon_url, iconContainer, false, def);
 
                 if (def.inputs > 0) {
                     $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -767,10 +767,12 @@ RED.utils = (function() {
             return RED.settings.apiRootUrl+"icons/node-red/alert.png"
         } else if (node && node.icon) {
             var iconPath = separateIconPath(node.icon);
-            if (iconPath.module === "font-awesome") {
+            if (isIconExists(iconPath)) {
-                return node.icon;
+                if (iconPath.module === "font-awesome") {
-            } else if (isIconExists(iconPath)) {
+                    return node.icon;
-                return RED.settings.apiRootUrl+"icons/" + node.icon;
+                } else {
+                    return RED.settings.apiRootUrl+"icons/" + node.icon;
+                }
             }
         }
 
@@ -895,10 +897,12 @@ RED.utils = (function() {
      /**
       * 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 iconContainer - Icon container element with palette_icon_container class.
-      * @param isLarge - whether the icon size is large.
+      * @param isLarge - Whether the icon size is large.
+      * @param def - Default definition of a node.
+      * @param node - If the icon is a specific node instance, this parameter must be specified. If it is icon template such as an icon on the palette, this must be omitted.
       */
-    function createIconElement(iconUrl, iconContainer, isLarge) {
+    function createIconElement(iconUrl, iconContainer, isLarge, def, node) {
         // Removes the previous icon when icon was changed.
         var iconElement = iconContainer.find(".palette_icon");
         if (iconElement.length !== 0) {
@@ -912,13 +916,23 @@ RED.utils = (function() {
         // Show either icon image or font-awesome icon
         var iconPath = separateIconPath(iconUrl);
         if (iconPath.module === "font-awesome") {
-            var faIconElement = $('<i/>').appendTo(iconContainer);
+            var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconPath.file);
-            var faLarge = isLarge ? "fa-lg " : "";
+            if (fontAwesomeUnicode) {
-            faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
+                var faIconElement = $('<i/>').appendTo(iconContainer);
-        } else {
+                var faLarge = isLarge ? "fa-lg " : "";
-            var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
+                faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
-            imageIconElement.css("backgroundImage", "url("+iconUrl+")");
+                return;
+            }
+            // If the specified name is not defined in font-awesome, show the default icon.
+            if (def) {
+                var iconPath = RED.utils.getDefaultNodeIcon(def, node);
+                iconUrl = RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
+            } else {
+                iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png"
+            }
         }
+        var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
+        imageIconElement.css("backgroundImage", "url("+iconUrl+")");
     }
 
     return {