frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add JSON Expression editor

Browse Source
This commit is contained in:
Nick O'Leary 2017-03-12 23:52:31 +00:00
parent 07d131c945
commit fb24dca019
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 125 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
editor/js/ui/common/typedInput.js
View File

@ -21,7 +21,31 @@
str: {value:"str",label:"string",icon:"red/images/typedInput/az.png"},
num: {value:"num",label:"number",icon:"red/images/typedInput/09.png",validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/},
bool: {value:"bool",label:"boolean",icon:"red/images/typedInput/bool.png",options:["true","false"]},
json: {value:"json",label:"JSON",icon:"red/images/typedInput/json.png", validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}}},
json: {
value:"json",
label:"JSON",
icon:"red/images/typedInput/json.png",
validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}},
expand: function() {
var that = this;
var value = this.value();
try {
value = JSON.stringify(JSON.parse(value),null,4);
} catch(err) {
}
RED.editor.editJSON({
value: value,
complete: function(v) {
var value = v;
try {
value = JSON.stringify(JSON.parse(v));
} catch(err) {
}
that.value(value);
}
})
}
},
re: {value:"re",label:"regular expression",icon:"red/images/typedInput/re.png"},
date: {value:"date",label:"timestamp",hasValue:false},
jsonata: {

91
editor/js/ui/editor.js
View File

@ -493,7 +493,9 @@ RED.editor = (function() {
var node = editStack[i];
var label = node.type;
if (node.type === '_expression') {
label = "Expression editor";
label = "Expression editor"; // TODO: nls
} else if (node.type === '_json') {
label = "JSON editor"; // TODO: nls
} else if (node.type === 'subflow') {
label = RED._("subflow.editSubflow",{name:node.name})
} else if (node.type.indexOf("subflow:")===0) {
@ -1730,7 +1732,91 @@ RED.editor = (function() {
var snippet = jsonata.getFunctionSnippet(f);
expressionEditor.insertSnippet(snippet);
expressionEditor.focus();
})
});
$("#node-input-expression-reformat").click(function(evt) {
evt.preventDefault();
var v = expressionEditor.getValue()||"";
try {
v = jsonata.format(v);
} catch(err) {
// TODO: do an optimistic auto-format
}
expressionEditor.getSession().setValue(v||"",-1);
});
},
close: function() {
editStack.pop();
},
show: function() {}
}
if (editTrayWidthCache.hasOwnProperty(type)) {
trayOptions.width = editTrayWidthCache[type];
}
RED.tray.show(trayOptions);
}
function editJSON(options) {
var value = options.value;
var onComplete = options.complete;
var type = "_json"
editStack.push({type:type});
RED.view.state(RED.state.EDITING);
var expressionEditor;
var trayOptions = {
title: getEditStackTitle(),
buttons: [
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
RED.tray.close();
}
},
{
id: "node-dialog-ok",
text: RED._("common.label.done"),
class: "primary",
click: function() {
onComplete(expressionEditor.getValue());
RED.tray.close();
}
}
],
resize: function(dimensions) {
editTrayWidthCache[type] = dimensions.width;
var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var editorRow = $("#dialog-form>div.node-text-editor-row");
var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) {
height -= $(rows[i]).outerHeight(true);
}
height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
$(".node-text-editor").css("height",height+"px");
expressionEditor.resize();
},
open: function(tray) {
var trayBody = tray.find('.editor-tray-body');
var dialogForm = buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
expressionEditor = RED.editor.createEditor({
id: 'node-input-json',
value: "",
mode:"ace/mode/json"
});
expressionEditor.getSession().setValue(value||"",-1);
$("#node-input-expression-reformat").click(function(evt) {
evt.preventDefault();
var v = expressionEditor.getValue()||"";
try {
v = JSON.stringify(JSON.parse(v),null,4);
} catch(err) {
// TODO: do an optimistic auto-format
}
expressionEditor.getSession().setValue(v||"",-1);
});
dialogForm.i18n();
},
close: function() {
editStack.pop();
@ -1759,6 +1845,7 @@ RED.editor = (function() {
editConfig: showEditConfigNodeDialog,
editSubflow: showEditSubflowDialog,
editExpression: editExpression,
editJSON: editJSON,
validateNode: validateNode,
updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo

11
editor/templates/index.mst
View File

@ -170,6 +170,9 @@
</script>
<script type="text/x-red" data-template-name="_expression">
<div class="form-row" style="margin-bottom: 3px; text-align: right;">
<button id="node-input-expression-reformat" class="editor-button editor-button-small">format</button>
</div>
<div class="form-row node-text-editor-row">
<div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-expression"></div>
</div>
@ -180,6 +183,14 @@
<div style="min-height: 200px;" id="node-input-expression-help"></div>
</div>
</script>
<script type="text/x-red" data-template-name="_json">
<div class="form-row" style="margin-bottom: 3px; text-align: right;">
<button id="node-input-expression-reformat" class="editor-button editor-button-small">format</button>
</div>
<div class="form-row node-text-editor-row">
<div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-json"></div>
</div>
</script>
<script src="vendor/vendor.js"></script>