From d9350b23629449ada5a71c3042d45c4dcb41884f Mon Sep 17 00:00:00 2001
From: Kazuki-Nakanishi <kazuki.nakanishi.vr@hitachi-solutions.com>
Date: Wed, 14 Mar 2018 13:51:50 +0900
Subject: [PATCH] Enable user defined icon for subflow

---
 editor/js/history.js    |  2 ++
 editor/js/nodes.js      |  8 ++++++--
 editor/js/ui/editor.js  | 33 ++++++++++++++++++++++++++++-----
 editor/js/ui/palette.js |  7 +++++++
 editor/js/ui/utils.js   | 23 ++++++++++++++++++-----
 5 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/editor/js/history.js b/editor/js/history.js
index 12650c9a2..20e1cb52f 100644
--- a/editor/js/history.js
+++ b/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;
diff --git a/editor/js/nodes.js b/editor/js/nodes.js
index b3c39fff1..8c8210c54 100644
--- a/editor/js/nodes.js
+++ b/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;
     }
diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js
index c3f0d4ea5..c90d3729b 100644
--- a/editor/js/ui/editor.js
+++ b/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);
@@ -782,7 +787,12 @@ RED.editor = (function() {
             var clear = $('<button class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(iconForm);
             clear.click(function(evt) {
                 evt.preventDefault();
-                var iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
+                var iconPath;
+                if (node.type === "subflow") {
+                    iconPath = { module:"node-red", file:"subflow.png" };
+                } else {
+                    iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
+                }
                 selectIconModule.val(iconPath.module);
                 moduleChange(selectIconModule, selectIconFile, iconModuleHidden, iconFileHidden, iconSets, true);
                 selectIconFile.removeClass("input-error");
@@ -816,6 +826,7 @@ RED.editor = (function() {
             });
         }
         selectIconFile.prop("disabled", !iconFileList);
+        selectIconFile.removeClass("input-error");
         selectIconModule.removeClass("input-error");
     }
 
@@ -1690,10 +1701,22 @@ RED.editor = (function() {
                             editing_node.outputLabels = newValue;
                             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) {
@@ -1704,10 +1727,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',
@@ -1786,6 +1808,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() {
diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js
index 79c7b9813..38ebc1091 100644
--- a/editor/js/ui/palette.js
+++ b/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);
         });
     }
 
diff --git a/editor/js/ui/utils.js b/editor/js/ui/utils.js
index cbf1c1fe8..989365655 100644
--- a/editor/js/ui/utils.js
+++ b/editor/js/ui/utils.js
@@ -731,6 +731,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 +748,21 @@ 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();
-            var iconFileList = iconSets[iconPath.module];
-            if (iconFileList && iconFileList.indexOf(iconPath.file) !== -1) {
+            if (isIconExists(iconPath)) {
                 return "icons/" + node.icon;
             }
+        } else if (node && node.type === 'subflow') {
+            return "icons/node-red/subflow.png"
         }
 
         var iconPath = getDefaultNodeIcon(def, node);
+        if (def.category === 'subflows') {
+            if (!isIconExists(iconPath)) {
+                return "icons/node-red/subflow.png";
+            }
+        }
         return "icons/"+iconPath.module+"/"+iconPath.file;
     }