From 712f8b4680d74e927a70f6294fd018ec5e76d2a2 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 23 Oct 2015 22:14:21 +0100 Subject: [PATCH] Add description field to Subflows --- editor/js/nodes.js | 2 ++ editor/js/ui/editor.js | 31 ++++++++++++++++++++++++++++++- editor/js/ui/palette.js | 24 ++++++++++++++---------- editor/js/ui/subflow.js | 5 ++++- editor/js/ui/tab-info.js | 11 ++++++----- editor/templates/index.mst | 11 +++++++++-- locales/en-US/editor.json | 4 +++- 7 files changed, 68 insertions(+), 20 deletions(-) diff --git a/editor/js/nodes.js b/editor/js/nodes.js index b573f9944..1c56f43d1 100644 --- a/editor/js/nodes.js +++ b/editor/js/nodes.js @@ -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 = []; diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index 0a0498807..bdb1d8faa 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -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;iform").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; diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index 5382d3801..1cf754973 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -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 = "

"+label+"
"+type+"

"; } - - popOverContent = $(l+($("script[data-help-name|='"+type+"']").html()||"

"+RED._("palette.noInfo")+"

").trim()) + popOverContent = $(l+(info?info:$("script[data-help-name|='"+type+"']").html()||"

"+RED._("palette.noInfo")+"

").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 = "

"+label+"

"+RED._("palette.noInfo")+"

"; } - 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 = '
'+($("script[data-help-name|='"+d.type+"']").html()||"")+"
"; + 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 = '
'+helpText+"
"; 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)); }); } diff --git a/editor/js/ui/subflow.js b/editor/js/ui/subflow.js index 716cdee43..b422ce7b8 100644 --- a/editor/js/ui/subflow.js +++ b/editor/js/ui/subflow.js @@ -224,7 +224,7 @@ RED.subflow = (function() { var toolbar = $("#workspace-toolbar"); toolbar.empty(); - $('').appendTo(toolbar); + $(' ').appendTo(toolbar); $(' '+ '
'+ '0'+ @@ -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", diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index d8d53ec94..cce6e74f5 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -75,8 +75,8 @@ RED.sidebar.info = (function() { table += ""+RED._("sidebar.info.id")+" "+node.id+""; 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 += "
"; - if (node.type != "comment") { + if (!subflowNode && node.type != "comment") { var helpText = $("script[data-help-name|='"+node.type+"']").html()||""; table += '
'+helpText+"
"; } - - if (node._def && node._def.info) { + if (subflowNode) { + table += '
'+marked(subflowNode.info)+'
'; + } else if (node._def && node._def.info) { var info = node._def.info; table += '
'+marked(typeof info === "function" ? info.call(node) : info)+'
'; //table += '
'+(typeof info === "function" ? info.call(node) : info)+'
'; @@ -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) { diff --git a/editor/templates/index.mst b/editor/templates/index.mst index e618b33db..af74cf5f6 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -83,10 +83,17 @@
- +
+
+ + +
+
+
+
+
-
diff --git a/locales/en-US/editor.json b/locales/en-US/editor.json index 95a417ac6..4689cf10a 100644 --- a/locales/en-US/editor.json +++ b/locales/en-US/editor.json @@ -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": "Cannot create subflow: no nodes selected", "multipleInputsToSelection": "Cannot create subflow: multiple inputs to selection"