1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Allow subflows to be put in any palette category

This commit is contained in:
Nick O'Leary 2018-06-12 12:54:32 +01:00
parent 17c5fdf0d5
commit 2a122ed283
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
6 changed files with 113 additions and 24 deletions

View File

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

View File

@ -1701,6 +1701,21 @@ RED.editor = (function() {
editing_node.icon = icon; editing_node.icon = icon;
changed = true; 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(); RED.palette.refresh();
@ -1773,8 +1788,6 @@ RED.editor = (function() {
}); });
portLabels.content.addClass("editor-tray-content"); portLabels.content.addClass("editor-tray-content");
if (editing_node) { if (editing_node) {
RED.sidebar.info.refresh(editing_node); RED.sidebar.info.refresh(editing_node);
} }
@ -1787,6 +1800,33 @@ RED.editor = (function() {
$("#subflow-input-name").val(subflow.name); $("#subflow-input-name").val(subflow.name);
RED.text.bidi.prepareInput($("#subflow-input-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); subflowEditor.getSession().setValue(subflow.info||"",-1);
var userCount = 0; var userCount = 0;
var subflowType = "subflow:"+editing_node.id; var subflowType = "subflow:"+editing_node.id;

View File

@ -21,7 +21,18 @@ RED.palette = (function() {
var categoryContainers = {}; 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, " "); label = (label || category).replace(/_/g, " ");
var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close hide">'+ 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>'+ '<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 id="palette-'+category+'-function"></div>'+
'</div>'+ '</div>'+
'</div>').appendTo("#palette-container"); '</div>').appendTo("#palette-container");
catDiv.data('category',originalCategory);
catDiv.data('label',label);
categoryContainers[category] = { categoryContainers[category] = {
container: catDiv, container: catDiv,
close: function() { close: function() {
@ -133,6 +145,7 @@ RED.palette = (function() {
} }
if (exclusion.indexOf(def.category)===-1) { if (exclusion.indexOf(def.category)===-1) {
var originalCategory = def.category;
var category = def.category.replace(/ /g,"_"); var category = def.category.replace(/ /g,"_");
var rootCategory = category.split("-")[0]; var rootCategory = category.split("-")[0];
@ -153,7 +166,6 @@ RED.palette = (function() {
d.className="palette_node"; d.className="palette_node";
if (def.icon) { if (def.icon) {
var icon_url = RED.utils.getNodeIcon(def); var icon_url = RED.utils.getNodeIcon(def);
var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d); 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); 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); $("#palette-"+category).append(d);
$(d).data('category',rootCategory);
d.onmousedown = function(e) { e.preventDefault(); }; d.onmousedown = function(e) { e.preventDefault(); };
var popover = RED.popover.create({ var popover = RED.popover.create({
@ -308,7 +311,7 @@ RED.palette = (function() {
}); });
var nodeInfo = null; var nodeInfo = null;
if (def.category == "subflows") { if (nt.indexOf("subflow:") === 0) {
$(d).dblclick(function(e) { $(d).dblclick(function(e) {
RED.workspaces.show(nt.substring(8)); RED.workspaces.show(nt.substring(8));
e.preventDefault(); e.preventDefault();
@ -382,6 +385,31 @@ RED.palette = (function() {
} }
setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info||"")); setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info||""));
setIcon(paletteNode,sf); 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 = coreCategories
} }
categoryList.forEach(function(category){ 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) { $("#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 { return {
init: init, init: init,
add:addNodeType, add:addNodeType,
remove:removeNodeType, remove:removeNodeType,
hide:hideNodeType, hide:hideNodeType,
show:showNodeType, show:showNodeType,
refresh:refreshNodeTypes refresh:refreshNodeTypes,
getCategories: getCategories
}; };
})(); })();

View File

@ -170,6 +170,10 @@ RED.sidebar.info = (function() {
if (node.type === "tab") { if (node.type === "tab") {
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody); 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")) $(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 { } else {
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody); 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) { 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); $('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody);
} }

View File

@ -132,6 +132,10 @@
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
<label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name"> <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name">
</div> </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;"> <div class="form-row" style="margin-bottom: 0px;">
<label for="subflow-input-info" data-i18n="editor:subflow.info"></label> <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> <a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>

View File

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