Merge pull request #1670 from node-red-hitachi/subflow-icon-change

Enable user defined icon for subflow

editor/js/history.js

@@ -229,10 +229,12 @@ RED.history = (function() {
                             }
                         });
                     }
+                    RED.editor.validateNode(ev.node);
                     RED.nodes.filterNodes({type:"subflow:"+ev.node.id}).forEach(function(n) {
                         n.inputs = ev.node.in.length;
                         n.outputs = ev.node.out.length;
                         RED.editor.updateNodeProperties(n);
+                        RED.editor.validateNode(n);
                     });
                 } else {
                     var outputMap;

editor/js/nodes.js

@@ -355,7 +355,7 @@ RED.nodes = (function() {
         RED.nodes.registerType("subflow:"+sf.id, {
             defaults:{name:{value:""}},
             info: sf.info,
-            icon:"subflow.png",
+            icon: function() { return sf.icon||"subflow.png" },
             category: "subflows",
             inputs: sf.in.length,
             outputs: sf.out.length,
@@ -550,7 +550,11 @@ RED.nodes = (function() {
         if (node.out.length > 0 && n.outputLabels && !/^\s*$/.test(n.outputLabels.join(""))) {
             node.outputLabels = n.outputLabels.slice();
         }
-
+        if (n.icon) {
+            if (n.icon !== "node-red/subflow.png") {
+                node.icon = n.icon;
+            }
+        }
 
         return node;
     }

editor/js/ui/editor.js

@@ -48,7 +48,7 @@ RED.editor = (function() {
                 isValid = validateNode(subflow);
                 hasChanged = subflow.changed;
             }
-            node.valid = isValid;
+            node.valid = isValid && validateNodeProperties(node, node._def.defaults, node);
             node.changed = node.changed || hasChanged;
         } else if (node._def) {
             node.valid = validateNodeProperties(node, node._def.defaults, node);
@@ -170,6 +170,10 @@ RED.editor = (function() {
                 }
             }
         }
+        validateIcon(node);
+    }
+
+    function validateIcon(node) {
         if (node._def.hasOwnProperty("defaults") && !node._def.defaults.hasOwnProperty("icon") && node.icon) {
             var iconPath = RED.utils.separateIconPath(node.icon);
             var iconSets = RED.nodes.getIconSets();
@@ -188,6 +192,7 @@ RED.editor = (function() {
             }
         }
     }
+
     function validateNodeEditorProperty(node,defaults,property,prefix) {
         var input = $("#"+prefix+"-"+property);
         if (input.length > 0) {
@@ -742,7 +747,7 @@ RED.editor = (function() {
             buildLabelRow().appendTo(outputsDiv);
         }
 
-        if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) && node.type !== "subflow") {
+        if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
             $('<div class="form-row"><div id="node-settings-icon"></div></div>').appendTo(dialogForm);
             var iconDiv = $("#node-settings-icon");
             $('<label data-i18n="editor.settingIcon">').appendTo(iconDiv);
@@ -816,6 +821,7 @@ RED.editor = (function() {
             });
         }
         selectIconFile.prop("disabled", !iconFileList);
+        selectIconFile.removeClass("input-error");
         selectIconModule.removeClass("input-error");
     }
 
@@ -1686,10 +1692,22 @@ RED.editor = (function() {
                         if (updateLabels(editing_node, changes, null)) {
                             changed = true;
                         }
+                        var iconModule = $("#node-settings-icon-module-hidden").val();
+                        var iconFile = $("#node-settings-icon-file-hidden").val();
+                        var icon = (iconModule && iconFile) ? iconModule+"/"+iconFile : "";
+                        if ((editing_node.icon === undefined && icon !== "node-red/subflow.png") ||
+                            (editing_node.icon !== undefined && editing_node.icon !== icon)) {
+                            changes.icon = editing_node.icon;
+                            editing_node.icon = icon;
+                            changed = true;
+                        }
 
                         RED.palette.refresh();
 
                         if (changed) {
+                            var wasChanged = editing_node.changed;
+                            editing_node.changed = true;
+                            validateNode(editing_node);
                             var subflowInstances = [];
                             RED.nodes.eachNode(function(n) {
                                 if (n.type == "subflow:"+editing_node.id) {
@@ -1700,10 +1718,9 @@ RED.editor = (function() {
                                     n.changed = true;
                                     n.dirty = true;
                                     updateNodeProperties(n);
+                                    validateNode(n);
                                 }
                             });
-                            var wasChanged = editing_node.changed;
-                            editing_node.changed = true;
                             RED.nodes.dirty(true);
                             var historyEvent = {
                                 t:'edit',
@@ -1782,6 +1799,7 @@ RED.editor = (function() {
                 $("#subflow-dialog-user-count").html(RED._("subflow.subflowInstances", {count:userCount})).show();
 
                 buildLabelForm(portLabels.content,subflow);
+                validateIcon(subflow);
                 trayBody.i18n();
             },
             close: function() {

editor/js/ui/palette.js

@@ -116,6 +116,12 @@ RED.palette = (function() {
         el.data('popover').setContent(popOverContent);
     }
 
+    function setIcon(element,sf) {
+        var iconElement = element.find(".palette_icon");
+        var icon_url = RED.utils.getNodeIcon(sf._def,sf);
+        iconElement.attr("style", "background-image: url("+icon_url+")");
+    }
+
     function escapeNodeType(nt) {
         return nt.replace(" ","_").replace(".","_").replace(":","_");
     }
@@ -375,6 +381,7 @@ RED.palette = (function() {
                 portOutput.remove();
             }
             setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info||""));
+            setIcon(paletteNode,sf);
         });
     }
 

editor/js/ui/utils.js

@@ -708,7 +708,9 @@ RED.utils = (function() {
 
     function getDefaultNodeIcon(def,node) {
         var icon_url;
-        if (typeof def.icon === "function") {
+        if (node && node.type === "subflow") {
+            icon_url = "node-red/subflow.png";
+        } else if (typeof def.icon === "function") {
             try {
                 icon_url = def.icon.call(node);
             } catch(err) {
@@ -731,6 +733,16 @@ RED.utils = (function() {
         return iconPath;
     }
 
+    function isIconExists(iconPath) {
+        var iconSets = RED.nodes.getIconSets();
+        var iconFileList = iconSets[iconPath.module];
+        if (iconFileList && iconFileList.indexOf(iconPath.file) !== -1) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     function getNodeIcon(def,node) {
         if (def.category === 'config') {
             return "icons/node-red/cog.png"
@@ -738,18 +750,19 @@ RED.utils = (function() {
             return "icons/node-red/subflow.png"
         } else if (node && node.type === 'unknown') {
             return "icons/node-red/alert.png"
-        } else if (node && node.type === 'subflow') {
-            return "icons/node-red/subflow.png"
         } else if (node && node.icon) {
             var iconPath = separateIconPath(node.icon);
-            var iconSets = RED.nodes.getIconSets();
+            if (isIconExists(iconPath)) {
-            var iconFileList = iconSets[iconPath.module];
-            if (iconFileList && iconFileList.indexOf(iconPath.file) !== -1) {
                 return "icons/" + node.icon;
             }
         }
 
         var iconPath = getDefaultNodeIcon(def, node);
+        if (def.category === 'subflows') {
+            if (!isIconExists(iconPath)) {
+                return "icons/node-red/subflow.png";
+            }
+        }
         return "icons/"+iconPath.module+"/"+iconPath.file;
     }