From 2a122ed28358cc34130b8f9ab4338b364e007ac0 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 12 Jun 2018 12:54:32 +0100 Subject: [PATCH] Allow subflows to be put in any palette category --- editor/js/nodes.js | 5 +- editor/js/ui/editor.js | 44 +++++++++++++- editor/js/ui/palette.js | 75 +++++++++++++++++------- editor/js/ui/tab-info.js | 7 +++ editor/templates/index.mst | 4 ++ red/api/editor/locales/en-US/editor.json | 2 + 6 files changed, 113 insertions(+), 24 deletions(-) diff --git a/editor/js/nodes.js b/editor/js/nodes.js index 433e400a2..12ff3e682 100644 --- a/editor/js/nodes.js +++ b/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 = []; diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index df50db725..380521333 100644 --- a/editor/js/ui/editor.js +++ b/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($("").val(cat.id).text(cat.label)); + }) + $("#subflow-input-category").append($("").attr('disabled',true).text("---")); + $("#subflow-input-category").append($("").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; diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index 38ebc1091..c72ed4f7a 100644 --- a/editor/js/ui/palette.js +++ b/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('
'); + } + } + function createCategoryContainer(originalCategory,category, labelId) { + var label = RED._(labelId, {defaultValue:category}); label = (label || category).replace(/_/g, " "); var catDiv = $('
'+ '
'+label+'
'+ @@ -31,7 +42,8 @@ RED.palette = (function() { '
'+ '
'+ '').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 = $('
',{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) { - 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('
'); - } + createCategory(def.category,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id); $("#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 }; })(); diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index 340a6bd74..bb1bf37cb 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -170,6 +170,10 @@ RED.sidebar.info = (function() { if (node.type === "tab") { propRow = $(''+RED._("sidebar.info.status")+'').appendTo(tableBody); $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled")) + } else if (node.type === "subflow") { + propRow = $(''+RED._("subflow.category")+'').appendTo(tableBody); + var category = node.category||"subflows"; + $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category})) } } else { propRow = $(''+RED._("sidebar.info.node")+"").appendTo(tableBody); @@ -235,6 +239,9 @@ RED.sidebar.info = (function() { } } if (m) { + propRow = $(''+RED._("subflow.category")+'').appendTo(tableBody); + var category = subflowNode.category||"subflows"; + $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category})) $(''+RED._("sidebar.info.instances")+""+subflowUserCount+'').appendTo(tableBody); } diff --git a/editor/templates/index.mst b/editor/templates/index.mst index 972258a55..23a87fde7 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -132,6 +132,10 @@
+
+ + +
diff --git a/red/api/editor/locales/en-US/editor.json b/red/api/editor/locales/en-US/editor.json index af62248da..65681850f 100644 --- a/red/api/editor/locales/en-US/editor.json +++ b/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": "Cannot create subflow: 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",