Include module name in requests for node icons

editor/js/nodes.js

@@ -115,6 +115,7 @@ RED.nodes = (function() {
             },
             registerNodeType: function(nt,def) {
                 nodeDefinitions[nt] = def;
+                def.type = nt;
                 if (def.category != "subflows") {
                     def.set = nodeSets[typeToId[nt]];
                     nodeSets[typeToId[nt]].added = true;

editor/js/ui/diff.js

@@ -342,21 +342,14 @@ RED.diff = (function() {
     function createNodeIcon(node,def) {
         var nodeDiv = $("<div>",{class:"node-diff-node-entry-node"});
         var colour = def.color;
-        var icon_url = "arrow-in.png";
+        var icon_url = RED.utils.getNodeIcon(def,node);
         if (node.type === 'tab') {
             colour = "#C0DEED";
-            icon_url = "subflow.png";
-        } else if (def.category === 'config') {
-            icon_url = "cog.png";
-        } else if (node.type === 'unknown') {
-            icon_url = "alert.png";
-        } else {
-            icon_url = def.icon;
         }
         nodeDiv.css('backgroundColor',colour);
 
         var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-        $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+        $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
 
         return nodeDiv;
     }

editor/js/ui/palette.js

@@ -149,14 +149,9 @@ RED.palette = (function() {
 
 
             if (def.icon) {
-                var icon_url = "arrow-in.png";
+                var icon_url = RED.utils.getNodeIcon(def);
-                try {
-                    icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
-                } catch(err) {
-                    console.log("Definition error: "+nt+".icon",err);
-                }
                 var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
-                $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+                $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
             }
 
             d.style.backgroundColor = def.color;

editor/js/ui/search.js

@@ -189,25 +189,14 @@ RED.search = (function() {
 
                     var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
                     var colour = def.color;
-                    var icon_url = "arrow-in.png";
+                    var icon_url = RED.utils.getNodeIcon(def,node);
                     if (node.type === 'tab') {
                         colour = "#C0DEED";
-                        icon_url = "subflow.png";
-                    } else if (def.category === 'config') {
-                        icon_url = "cog.png";
-                    } else if (node.type === 'unknown') {
-                        icon_url = "alert.png";
-                    } else {
-                        try {
-                            icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
-                        } catch(err) {
-                            console.log("Definition error: "+nt+".icon",err);
-                        }
                     }
                     nodeDiv.css('backgroundColor',colour);
 
                     var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                    $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+                    $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
 
                     var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
                     if (node.z) {

editor/js/ui/typeSearch.js

@@ -110,20 +110,11 @@ RED.typeSearch = (function() {
 
                 var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
                 var colour = def.color;
-                var icon_url = "arrow-in.png";
+                var icon_url = RED.utils.getNodeIcon(def);
-                if (def.category === 'config') {
-                    icon_url = "cog.png";
-                } else {
-                    try {
-                        icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
-                    } catch(err) {
-                        console.log("Definition error: "+object.type+".icon",err);
-                    }
-                }
                 nodeDiv.css('backgroundColor',colour);
 
                 var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+                $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
 
                 if (def.inputs > 0) {
                     $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

editor/js/ui/utils.js

@@ -367,8 +367,31 @@ RED.utils = (function() {
         return true;
     }
 
+    function getNodeIcon(def,node) {
+        if (def.category === 'config') {
+            return "icons/node-red/cog.png"
+        } else if (node && node.type === 'tab') {
+            return "icons/node-red/subflow.png"
+        } else if (node && node.type === 'unknown') {
+            return "icons/node-red/alert.png"
+        }
+        var icon_url;
+        if (typeof def.icon === "function") {
+            try {
+                icon_url = def.icon.call(node);
+            } catch(err) {
+                console.log("Definition error: "+def.type+".icon",err);
+                icon_url = "arrow-in.png";
+            }
+        } else {
+            icon_url = def.icon;
+        }
+        return "icons/"+def.set.module+"/"+icon_url;
+    }
+
     return {
         createObjectElement: buildMessageElement,
-        validatePropertyExpression: validatePropertyExpression
+        validatePropertyExpression: validatePropertyExpression,
+        getNodeIcon: getNodeIcon
     }
 })();

editor/js/ui/view.js

@@ -1832,7 +1832,7 @@ RED.view = (function() {
                    //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none");
 
                     if (d._def.icon) {
-
+                        var icon_url = RED.utils.getNodeIcon(d._def,d);
                         var icon_group = node.append("g")
                             .attr("class","node_icon_group")
                             .attr("x",0).attr("y",0);
@@ -1847,7 +1847,7 @@ RED.view = (function() {
                             .attr("height",function(d){return Math.min(50,d.h-4);});
 
                         var icon = icon_group.append("image")
-                            .attr("xlink:href","icons/"+d._def.icon)
+                            .attr("xlink:href",icon_url)
                             .attr("class","node_icon")
                             .attr("x",0)
                             .attr("width","30")
@@ -1878,7 +1878,7 @@ RED.view = (function() {
                         //}
 
                         var img = new Image();
-                        img.src = "icons/"+d._def.icon;
+                        img.src = icon_url;
                         img.onload = function() {
                             icon.attr("width",Math.min(img.width,30));
                             icon.attr("height",Math.min(img.height,30));
@@ -1915,8 +1915,10 @@ RED.view = (function() {
                     //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
 
                     //node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
-                    node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
+
-                    node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
+                    //TODO: these ought to be SVG
+                    node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-red/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
+                    node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-red/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
             });
 
             node.each(function(d,i) {
@@ -2032,21 +2034,11 @@ RED.view = (function() {
                             if (d._def.icon) {
                                 icon = thisNode.select(".node_icon");
                                 var current_url = icon.attr("xlink:href");
-                                var icon_url;
+                                var new_url = RED.utils.getNodeIcon(d._def,d);
-                                if (typeof d._def.icon == "function") {
+                                if (new_url !== current_url) {
-                                    try {
+                                    icon.attr("xlink:href",new_url);
-                                        icon_url = d._def.icon.call(d);
-                                    } catch(err) {
-                                        console.log("icon",err);
-                                        icon_url = "arrow-in.png";
-                                    }
-                                } else {
-                                    icon_url = d._def.icon;
-                                }
-                                if ("icons/"+icon_url != current_url) {
-                                    icon.attr("xlink:href","icons/"+icon_url);
                                     var img = new Image();
-                                    img.src = "icons/"+d._def.icon;
+                                    img.src = new_url;
                                     img.onload = function() {
                                         icon.attr("width",Math.min(img.width,30));
                                         icon.attr("height",Math.min(img.height,30));

red/api/index.js

@@ -94,7 +94,7 @@ function init(_server,_runtime) {
                 });
             }
             editorApp.get("/",ensureRuntimeStarted,ui.ensureSlash,ui.editor);
-            editorApp.get("/icons/:icon",ui.icon);
+            editorApp.get("/icons/:module/:icon",ui.icon);
             theme.init(runtime);
             if (settings.editorTheme) {
                 editorApp.use("/theme",theme.app());

red/api/ui.js

@@ -21,7 +21,9 @@ var theme = require("./theme");
 
 var Mustache = require("mustache");
 
-var icon_paths = [path.resolve(__dirname + '/../../public/icons')];
+var icon_paths = {
+    "node-red":[path.resolve(__dirname + '/../../public/icons')]
+};
 var iconCache = {};
 //TODO: create a default icon
 var defaultIcon = path.resolve(__dirname + '/../../public/icons/arrow-in.png');
@@ -29,7 +31,8 @@ var templateDir = path.resolve(__dirname+"/../../editor/templates");
 var editorTemplate;
 
 function nodeIconDir(dir) {
-    icon_paths.push(path.resolve(dir));
+    icon_paths[dir.name] = icon_paths[dir.name] || [];
+    icon_paths[dir.name].push(path.resolve(dir.path));
 }
 
 module.exports = {
@@ -54,20 +57,26 @@ module.exports = {
         }
     },
     icon: function(req,res) {
-        if (iconCache[req.params.icon]) {
+        var icon = req.params.icon;
-            res.sendFile(iconCache[req.params.icon]); // if not found, express prints this to the console and serves 404
+        var module = req.params.module;
+        var iconName = module+"/"+icon;
+        if (iconCache[iconName]) {
+            res.sendFile(iconCache[iconName]); // if not found, express prints this to the console and serves 404
         } else {
-            for (var p=0;p<icon_paths.length;p++) {
+            var paths = icon_paths[module];
-                var iconPath = path.join(icon_paths[p],req.params.icon);
+            if (paths) {
+                for (var p=0;p<paths.length;p++) {
+                    var iconPath = path.join(paths[p],icon);
                     try {
                         fs.statSync(iconPath);
                         res.sendFile(iconPath);
-                    iconCache[req.params.icon] = iconPath;
+                        iconCache[iconName] = iconPath;
                         return;
                     } catch(err) {
                         // iconPath doesn't exist
                     }
                 }
+            }
             res.sendFile(defaultIcon);
         }
     },

red/runtime/nodes/registry/localfilesystem.js

@@ -89,7 +89,7 @@ function getLocalNodeFiles(dir) {
             if (!/^(\..*|lib|icons|node_modules|test|locales)$/.test(fn)) {
                 result = result.concat(getLocalNodeFiles(path.join(dir,fn)));
             } else if (fn === "icons") {
-                events.emit("node-icon-dir",path.join(dir,fn));
+                events.emit("node-icon-dir",{name:'node-red',path:path.join(dir,fn)});
             }
         }
     });
@@ -182,7 +182,7 @@ function getModuleNodeFiles(module) {
             if (iconDirs.indexOf(iconDir) == -1) {
                 try {
                     fs.statSync(iconDir);
-                    events.emit("node-icon-dir",iconDir);
+                    events.emit("node-icon-dir",{name:pkg.name,path:iconDir});
                     iconDirs.push(iconDir);
                 } catch(err) {
                 }