Add description field to Subflows

This commit is contained in:
Nick O'Leary 2015-10-23 22:14:21 +01:00
parent f626ee060a
commit 712f8b4680
7 changed files with 68 additions and 20 deletions

View File

@ -315,6 +315,7 @@ RED.nodes = (function() {
subflows[sf.id] = sf;
RED.nodes.registerType("subflow:"+sf.id, {
defaults:{name:{value:""}},
info: sf.info,
icon:"subflow.png",
category: "subflows",
inputs: sf.in.length,
@ -446,6 +447,7 @@ RED.nodes = (function() {
node.id = n.id;
node.type = n.type;
node.name = n.name;
node.info = n.info;
node.in = [];
node.out = [];

View File

@ -15,6 +15,7 @@
**/
RED.editor = (function() {
var editing_node = null;
var subflowEditor;
function getCredentialsURL(nodeType, nodeID) {
var dashedType = nodeType.replace(/\s+/g, '-');
@ -1066,6 +1067,14 @@ RED.editor = (function() {
$("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName);
}
var newDescription = subflowEditor.getValue();
if (newDescription != editing_node.info) {
changes['info'] = editing_node.info;
editing_node.info = newDescription;
changed = true;
}
RED.palette.refresh();
if (changed) {
@ -1112,6 +1121,14 @@ RED.editor = (function() {
}
}
],
create: function(e) {
$("#subflow-dialog form" ).submit(function(e) { e.preventDefault();});
subflowEditor = RED.editor.createEditor({
id: 'subflow-input-info-editor',
mode: 'ace/mode/markdown',
value: ""
});
},
open: function(e) {
RED.keyboard.disable();
var minWidth = $(this).dialog('option','minWidth');
@ -1128,16 +1145,28 @@ RED.editor = (function() {
RED.sidebar.info.refresh(editing_node);
RED.workspaces.refresh();
editing_node = null;
},
resize: function(e) {
var rows = $("#subflow-dialog>form>div:not(.node-text-editor-row)");
var editorRow = $("#subflow-dialog>form>div.node-text-editor-row");
var height = $("#subflow-dialog").height();
for (var i=0;i<rows.size();i++) {
height -= $(rows[i]).outerHeight(true);
}
height -= (parseInt($("#subflow-dialog>form").css("marginTop"))+parseInt($("#subflow-dialog>form").css("marginBottom")));
$(".node-text-editor").css("height",height+"px");
subflowEditor.resize();
}
});
$("#subflow-dialog form" ).submit(function(e) { e.preventDefault();});
}
function showEditSubflowDialog(subflow) {
editing_node = subflow;
RED.view.state(RED.state.EDITING);
$("#subflow-input-name").val(subflow.name);
subflowEditor.getSession().setValue(subflow.info,-1);
var userCount = 0;
var subflowType = "subflow:"+editing_node.id;

View File

@ -60,7 +60,7 @@ RED.palette = (function() {
});
}
function setLabel(type, el,label) {
function setLabel(type, el,label, info) {
var nodeWidth = 82;
var nodeHeight = 25;
var lineHeight = 20;
@ -101,10 +101,9 @@ RED.palette = (function() {
if (label != type) {
l = "<p><b>"+label+"</b><br/><i>"+type+"</i></p>";
}
popOverContent = $(l+($("script[data-help-name|='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
popOverContent = $(l+(info?info:$("script[data-help-name|='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
.filter(function(n) {
return this.nodeType == 1 || (this.nodeType == 3 && this.textContent.trim().length > 0)
return (this.nodeType == 1 && this.nodeName == "P") || (this.nodeType == 3 && this.textContent.trim().length > 0)
}).slice(0,2);
} catch(err) {
// Malformed HTML may cause errors. TODO: need to understand what can break
@ -114,7 +113,6 @@ RED.palette = (function() {
popOverContent = "<p><b>"+label+"</b></p><p>"+RED._("palette.noInfo")+"</p>";
}
el.data('popover').setContent(popOverContent);
}
@ -127,7 +125,6 @@ RED.palette = (function() {
if ($("#palette_node_"+nodeTypeId).length) {
return;
}
if (exclusion.indexOf(def.category)===-1) {
var category = def.category.replace(" ","_");
@ -204,7 +201,13 @@ RED.palette = (function() {
// });
$(d).click(function() {
RED.view.focus();
var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
var helpText;
if (nt.indexOf("subflow:") === 0) {
helpText = marked(RED.nodes.subflow(nt.substring(8)).info) || "";
} else {
helpText = $("script[data-help-name|='"+d.type+"']").html()||"";
}
var help = '<div class="node-help">'+helpText+"</div>";
RED.sidebar.info.set(help);
});
$(d).draggable({
@ -215,14 +218,15 @@ RED.palette = (function() {
start: function() {RED.view.focus();}
});
var nodeInfo = null;
if (def.category == "subflows") {
$(d).dblclick(function(e) {
RED.workspaces.show(nt.substring(8));
e.preventDefault();
});
nodeInfo = marked(def.info);
}
setLabel(nt,$(d),label);
setLabel(nt,$(d),label,nodeInfo);
var categoryNode = $("#palette-container-"+category);
if (categoryNode.find(".palette_node").length === 1) {
@ -275,7 +279,7 @@ RED.palette = (function() {
} else if (portOutput.length !== 0 && sf.out.length === 0) {
portOutput.remove();
}
setLabel(sf.type+":"+sf.id,paletteNode,sf.name);
setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info));
});
}

View File

@ -224,7 +224,7 @@ RED.subflow = (function() {
var toolbar = $("#workspace-toolbar");
toolbar.empty();
$('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowName"><i class="fa fa-pencil"></i></a>').appendTo(toolbar);
$('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
$('<span style="margin-left: 5px;" data-i18n="subflow.input"></span> '+
'<div style="display: inline-block;" class="button-group">'+
'<a id="workspace-subflow-input-remove" class="button active" href="#">0</a>'+
@ -398,6 +398,7 @@ RED.subflow = (function() {
type:"subflow",
id:subflowId,
name:name,
info:"",
in: [],
out: []
};
@ -410,6 +411,7 @@ RED.subflow = (function() {
dirty:RED.nodes.dirty()
});
RED.workspaces.show(subflowId);
RED.nodes.dirty(true);
}
function convertToSubflow() {
@ -497,6 +499,7 @@ RED.subflow = (function() {
type:"subflow",
id:subflowId,
name:name,
info:"",
in: Object.keys(candidateInputNodes).map(function(v,i) { var index = i; return {
type:"subflow",
direction:"in",

View File

@ -75,8 +75,8 @@ RED.sidebar.info = (function() {
table += "<tr><td>"+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>";
var m = /^subflow(:(.+))?$/.exec(node.type);
var subflowNode;
if (m) {
var subflowNode;
if (m[2]) {
subflowNode = RED.nodes.subflow(m[2]);
} else {
@ -135,12 +135,13 @@ RED.sidebar.info = (function() {
}
}
table += "</tbody></table><hr/>";
if (node.type != "comment") {
if (!subflowNode && node.type != "comment") {
var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
table += '<div class="node-help">'+helpText+"</div>";
}
if (node._def && node._def.info) {
if (subflowNode) {
table += '<div class="node-help">'+marked(subflowNode.info)+'</div>';
} else if (node._def && node._def.info) {
var info = node._def.info;
table += '<div class="node-help">'+marked(typeof info === "function" ? info.call(node) : info)+'</div>';
//table += '<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
@ -173,7 +174,7 @@ RED.sidebar.info = (function() {
function set(html) {
$(content).html(html);
}
RED.events.on("view:selection-changed",function(selection) {
if (selection.nodes) {
if (selection.nodes.length == 1) {

View File

@ -83,10 +83,17 @@
<div id="subflow-dialog" class="hide">
<form class="form-horizontal">
<div class="form-row">
<label 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 class="form-row" style="margin-bottom: 0px;">
<label for="subflow-input-info" data-i18n="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>
</div>
<div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="subflow-input-info-editor"></div>
</div>
<div class="form-row form-tips" id="subflow-dialog-user-count"></div>
</form>
<div class="form-tips" id="subflow-dialog-user-count"></div>
</div>
<div id="node-dialog-confirm-deploy" class="hide">

View File

@ -99,10 +99,12 @@
"edit": "Edit flow",
"subflowInstances": "There is __count__ instance of this subflow",
"subflowInstances_plural": "There are __count__ instances of this subflow",
"editSubflowName": "edit name",
"editSubflowProperties": "edit properties",
"input": "inputs:",
"output": "outputs:",
"deleteSubflow": "delete subflow",
"info": "Description",
"format":"markdown format",
"errors": {
"noNodesSelected": "<strong>Cannot create subflow</strong>: no nodes selected",
"multipleInputsToSelection": "<strong>Cannot create subflow</strong>: multiple inputs to selection"