add support for specifying subflow template color

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -310,6 +310,7 @@
         "addNewType": "Add new __type__...",
         "nodeProperties": "node properties",
         "label": "Label",
+        "color": "Color",
         "portLabels": "Port labels",
         "labelInputs": "Inputs",
         "labelOutputs": "Outputs",

packages/node_modules/@node-red/editor-client/locales/ja/editor.json

@@ -310,6 +310,7 @@
         "addNewType": "新規に __type__ を追加...",
         "nodeProperties": "プロパティ",
         "label": "ラベル",
+        "color": "色",
         "portLabels": "ポートラベル",
         "labelInputs": "入力",
         "labelOutputs": "出力",

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

@@ -366,7 +366,7 @@ RED.nodes = (function() {
             category: sf.category || "subflows",
             inputs: sf.in.length,
             outputs: sf.out.length,
-            color: "#da9",
+            color: sf.color || "#da9",
             label: function() { return this.name||RED.nodes.subflow(sf.id).name },
             labelStyle: function() { return this.name?"red-ui-flow-node-label-italic":""; },
             paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
@@ -551,6 +551,7 @@ RED.nodes = (function() {
         node.in = [];
         node.out = [];
         node.env = n.env;
+        node.color = n.color;
 
         n.in.forEach(function(p) {
             var nIn = {x:p.x,y:p.y,wires:[]};

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

@@ -1001,6 +1001,41 @@ RED.editor = (function() {
             $('<div id="red-ui-editor-node-icon">').text(node.icon).appendTo(iconButton);
         }
 
+        if (node.type === "subflow") {
+            // subflow template can select its color
+            var colorRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
+            var selector = $("<input/>", {
+                id: "red-ui-editor-node-color",
+                type: "color",
+                value: "#E9967A",
+                list: "red-ui-editor-node-colors"
+            }).css({
+                width: "100px"
+            }).appendTo(colorRow);
+            var colors = $("<datalist id='red-ui-editor-node-colors'>").appendTo(colorRow);
+            var recommendedColors = [
+                "#3FADB5", "#87A980", "#A6BBCF",
+                "#AAAA66", "#C0C0C0", "#C0DEED",
+                "#C7E9C0", "#D7D7A0", "#D8BFD8",
+                "#DAC4B4", "#DEB887", "#DEBD5C",
+                "#E2D96E", "#E6E0F8", "#E7E7AE",
+                "#E9967A", "#F3B567", "#FDD0A2",
+                "#FDF0C2", "#FFAAAA", "#FFCC66",
+                "#FFF0F0", "#FFFFFF"
+            ];
+            recommendedColors.forEach(function (col) {
+                var opt = $("<option>").appendTo(colors);
+                opt.val(col);
+            });
+            if (node.color) {
+                selector.val(node.color);
+            }
+            selector.change();
+        }        
+
         $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
 
         var inputCount = node.inputs || node._def.inputs || 0;
@@ -2178,6 +2213,14 @@ RED.editor = (function() {
                             changed = true;
                         }
 
+                        var oldColor = editing_node.color;
+                        var newColor =  $("#red-ui-editor-node-color").val();
+                        if (oldColor !== newColor) {
+                            editing_node.color = newColor;
+                            changes.color = newColor;
+                            changed = true;
+                        }
+
                         var old_env = editing_node.env;
                         var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
                         if (!isSameEnv(old_env, new_env)) {