Allow subflows to be put in any palette category

editor/js/nodes.js

@@ -133,7 +133,7 @@ RED.nodes = (function() {
             registerNodeType: function(nt,def) {
                 nodeDefinitions[nt] = def;
                 def.type = nt;
-                if (def.category != "subflows") {
+                if (nt.substring(0,8) != "subflow:") {
                     def.set = nodeSets[typeToId[nt]];
                     nodeSets[typeToId[nt]].added = true;
                     nodeSets[typeToId[nt]].enabled = true;
@@ -356,7 +356,7 @@ RED.nodes = (function() {
             defaults:{name:{value:""}},
             info: sf.info,
             icon: function() { return sf.icon||"subflow.png" },
-            category: "subflows",
+            category: sf.category || "subflows",
             inputs: sf.in.length,
             outputs: sf.out.length,
             color: "#da9",
@@ -519,6 +519,7 @@ RED.nodes = (function() {
         node.type = n.type;
         node.name = n.name;
         node.info = n.info;
+        node.category = n.category;
         node.in = [];
         node.out = [];
 

editor/js/ui/editor.js

@@ -1701,6 +1701,21 @@ RED.editor = (function() {
                             editing_node.icon = icon;
                             changed = true;
                         }
+                        var newCategory = $("#subflow-input-category").val().trim();
+                        if (newCategory === "_custom_") {
+                            newCategory = $("#subflow-input-custom-category").val().trim();
+                            if (newCategory === "") {
+                                newCategory = editing_node.category;
+                            }
+                        }
+                        if (newCategory === 'subflows') {
+                            newCategory = '';
+                        }
+                        if (newCategory != editing_node.category) {
+                            changes['category'] = editing_node.category;
+                            editing_node.category = newCategory;
+                            changed = true;
+                        }
 
                         RED.palette.refresh();
 
@@ -1773,8 +1788,6 @@ RED.editor = (function() {
                 });
                 portLabels.content.addClass("editor-tray-content");
 
-
-
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
@@ -1787,6 +1800,33 @@ RED.editor = (function() {
 
                 $("#subflow-input-name").val(subflow.name);
                 RED.text.bidi.prepareInput($("#subflow-input-name"));
+
+                $("#subflow-input-category").empty();
+                var categories = RED.palette.getCategories();
+                categories.sort(function(A,B) {
+                    return A.label.localeCompare(B.label);
+                })
+                categories.forEach(function(cat) {
+                    $("#subflow-input-category").append($("<option></option>").val(cat.id).text(cat.label));
+                })
+                $("#subflow-input-category").append($("<option></option>").attr('disabled',true).text("---"));
+                $("#subflow-input-category").append($("<option></option>").val("_custom_").text(RED._("palette.addCategory")));
+
+
+                $("#subflow-input-category").change(function() {
+                    var val = $(this).val();
+                    if (val === "_custom_") {
+                        $("#subflow-input-category").width(120);
+                        $("#subflow-input-custom-category").show();
+                    } else {
+                        $("#subflow-input-category").width(250);
+                        $("#subflow-input-custom-category").hide();
+                    }
+                })
+
+
+                $("#subflow-input-category").val(subflow.category||"subflows");
+
                 subflowEditor.getSession().setValue(subflow.info||"",-1);
                 var userCount = 0;
                 var subflowType = "subflow:"+editing_node.id;

editor/js/ui/palette.js

@@ -21,7 +21,18 @@ RED.palette = (function() {
 
     var categoryContainers = {};
 
-    function createCategoryContainer(category, label) {
+
+    function createCategory(originalCategory,rootCategory,category,ns) {
+        if ($("#palette-base-category-"+rootCategory).length === 0) {
+            createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory);
+        }
+        $("#palette-container-"+rootCategory).show();
+        if ($("#palette-"+category).length === 0) {
+            $("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
+        }
+    }
+    function createCategoryContainer(originalCategory,category, labelId) {
+        var label = RED._(labelId, {defaultValue:category});
         label = (label || category).replace(/_/g, " ");
         var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close hide">'+
             '<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
@@ -31,7 +42,8 @@ RED.palette = (function() {
             '<div id="palette-'+category+'-function"></div>'+
             '</div>'+
             '</div>').appendTo("#palette-container");
-
+        catDiv.data('category',originalCategory);
+        catDiv.data('label',label);
         categoryContainers[category] = {
             container: catDiv,
             close: function() {
@@ -133,6 +145,7 @@ RED.palette = (function() {
         }
         if (exclusion.indexOf(def.category)===-1) {
 
+            var originalCategory = def.category;
             var category = def.category.replace(/ /g,"_");
             var rootCategory = category.split("-")[0];
 
@@ -153,7 +166,6 @@ RED.palette = (function() {
 
             d.className="palette_node";
 
-
             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);
@@ -174,21 +186,12 @@ RED.palette = (function() {
                 d.appendChild(portIn);
             }
 
-            if ($("#palette-base-category-"+rootCategory).length === 0) {
+            createCategory(def.category,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id);
-                if(coreCategories.indexOf(rootCategory) !== -1){
-                    createCategoryContainer(rootCategory, RED._("node-red:palette.label."+rootCategory, {defaultValue:rootCategory}));
-                } else {
-                    var ns = def.set.id;
-                    createCategoryContainer(rootCategory, RED._(ns+":palette.label."+rootCategory, {defaultValue:rootCategory}));
-                }
-            }
-            $("#palette-container-"+rootCategory).show();
-
-            if ($("#palette-"+category).length === 0) {
-                $("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
-            }
 
             $("#palette-"+category).append(d);
+
+            $(d).data('category',rootCategory);
+
             d.onmousedown = function(e) { e.preventDefault(); };
 
             var popover = RED.popover.create({
@@ -308,7 +311,7 @@ RED.palette = (function() {
             });
 
             var nodeInfo = null;
-            if (def.category == "subflows") {
+            if (nt.indexOf("subflow:") === 0) {
                 $(d).dblclick(function(e) {
                     RED.workspaces.show(nt.substring(8));
                     e.preventDefault();
@@ -382,6 +385,31 @@ RED.palette = (function() {
             }
             setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info||""));
             setIcon(paletteNode,sf);
+
+            var currentCategory = paletteNode.data('category');
+            var newCategory = (sf.category||"subflows");
+            if (currentCategory !== newCategory) {
+                var category = newCategory.replace(/ /g,"_");
+                createCategory(newCategory,category,category,"node-red");
+
+                var currentCategoryNode = paletteNode.closest(".palette-category");
+                var newCategoryNode = $("#palette-"+category);
+                newCategoryNode.append(paletteNode);
+                if (newCategoryNode.find(".palette_node").length === 1) {
+                    categoryContainers[category].open();
+                }
+
+                paletteNode.data('category',newCategory);
+                if (currentCategoryNode.find(".palette_node").length === 0) {
+                    if (currentCategoryNode.find("i").hasClass("expanded")) {
+                        currentCategoryNode.find(".palette-content").slideToggle();
+                        currentCategoryNode.find("i").toggleClass("expanded");
+                    }
+                }
+
+
+
+            }
         });
     }
 
@@ -471,7 +499,7 @@ RED.palette = (function() {
             categoryList = coreCategories
         }
         categoryList.forEach(function(category){
-            createCategoryContainer(category, RED._("palette.label."+category,{defaultValue:category}));
+            createCategoryContainer(category, category, "palette.label."+category);
         });
 
         $("#palette-collapse-all").on("click", function(e) {
@@ -491,13 +519,20 @@ RED.palette = (function() {
             }
         });
     }
-
+    function getCategories() {
+        var categories = [];
+        $("#palette-container .palette-category").each(function(i,d) {
+            categories.push({id:$(d).data('category'),label:$(d).data('label')});
+        })
+        return categories;
+    }
     return {
         init: init,
         add:addNodeType,
         remove:removeNodeType,
         hide:hideNodeType,
         show:showNodeType,
-        refresh:refreshNodeTypes
+        refresh:refreshNodeTypes,
+        getCategories: getCategories
     };
 })();

editor/js/ui/tab-info.js

@@ -170,6 +170,10 @@ RED.sidebar.info = (function() {
                 if (node.type === "tab") {
                     propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
                     $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
+                } else if (node.type === "subflow") {
+                    propRow = $('<tr class="node-info-node-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
+                    var category = node.category||"subflows";
+                    $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
                 }
             } else {
                 propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);
@@ -235,6 +239,9 @@ RED.sidebar.info = (function() {
                 }
             }
             if (m) {
+                propRow = $('<tr class="node-info-node-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
+                var category = subflowNode.category||"subflows";
+                $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
                 $('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody);
             }
 

editor/templates/index.mst

@@ -132,6 +132,10 @@
         <i class="fa fa-tag"></i>
         <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name">
     </div>
+    <div class="form-row">
+        <i class="fa fa-folder-o"></i>
+        <label for="subflow-input-category" data-i18n="editor:subflow.category"></label><select style="width: 250px;" id="subflow-input-category"></select><input style="display:none; margin-left: 10px; width:calc(100% - 250px)" type="text" id="subflow-input-custom-category">
+    </div>
     <div class="form-row" style="margin-bottom: 0px;">
         <label for="subflow-input-info" data-i18n="editor:subflow.info"></label>
         <a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>

red/api/editor/locales/en-US/editor.json

@@ -240,6 +240,7 @@
         "output": "outputs:",
         "deleteSubflow": "delete subflow",
         "info": "Description",
+        "category": "Category",
         "format":"markdown format",
         "errors": {
             "noNodesSelected": "<strong>Cannot create subflow</strong>: no nodes selected",
@@ -318,6 +319,7 @@
         "noInfo": "no information available",
         "filter": "filter nodes",
         "search": "search modules",
+        "addCategory": "Add new...",
         "label": {
             "subflows": "subflows",
             "input": "input",