frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add expression editor for jsonata

This commit is contained in:
Nick O'Leary 2016-11-15 00:19:04 +00:00
parent bf90509526
commit d33029027f
9 changed files with 4540 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Gruntfile.js
View File

@ -161,7 +161,9 @@ module.exports = function(grunt) {
files: {
'public/red/red.min.js': 'public/red/red.js',
'public/red/main.min.js': 'public/red/main.js',
'public/vendor/jsonata/jsonata.min.js': 'editor/vendor/jsonata/jsonata.js'
'public/vendor/jsonata/jsonata.min.js': 'editor/vendor/jsonata/jsonata.js',
'public/vendor/ace/mode-jsonata.js': 'editor/vendor/jsonata/mode-jsonata.js',
'public/vendor/ace/worker-jsonata.js': 'editor/vendor/jsonata/worker-jsonata.js'
}
}
},

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

@ -95,7 +95,21 @@
json: {value:"json",label:"JSON",icon:"red/images/typedInput/json.png", validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}}},
re: {value:"re",label:"regular expression",icon:"red/images/typedInput/re.png"},
date: {value:"date",label:"timestamp",hasValue:false},
jsonata: {value:"jsonata",label:"expression",icon:"red/images/typedInput/expr.png", validate: function(v) { try{jsonata(v);return true;}catch(e){return false;}}},
jsonata: {
value: "jsonata",
label: "expression",
icon: "red/images/typedInput/expr.png",
validate: function(v) { try{jsonata(v);return true;}catch(e){return false;}},
expand:function() {
var that = this;
RED.editor.editExpression({
value: this.value(),
complete: function(v) {
that.value(v);
}
})
}
}
};
var nlsd = false;
@ -189,7 +203,7 @@
that.uiSelect.addClass('red-ui-typedInput-focus');
});
this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"><i class="fa fa-ellipsis-h"></i></button>').appendTo(this.uiSelect);
this.type(this.options.default||this.typeList[0].value);
@ -323,11 +337,16 @@
this.uiSelect.width(this.uiWidth);
}
if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) {
this.selectTrigger.css('width',"100%");
this.selectTrigger.addClass("red-ui-typedInput-full-width");
} else {
this.selectTrigger.width('auto');
this.selectTrigger.removeClass("red-ui-typedInput-full-width");
var labelWidth = this._getLabelWidth(this.selectTrigger);
this.elementDiv.css('left',labelWidth+"px");
if (this.optionExpandButton.is(":visible")) {
this.elementDiv.css('right',"22px");
} else {
this.elementDiv.css('right','0');
}
if (this.optionSelectTrigger) {
this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'});
}
@ -397,6 +416,9 @@
this.selectLabel.text(opt.label);
}
if (opt.options) {
if (this.optionExpandButton) {
this.optionExpandButton.hide();
}
if (this.optionSelectTrigger) {
this.optionSelectTrigger.show();
this.elementDiv.hide();
@ -430,6 +452,16 @@
}
this.elementDiv.show();
}
if (opt.expand && typeof opt.expand === 'function') {
this.optionExpandButton.show();
this.optionExpandButton.off('click');
this.optionExpandButton.on('click',function(evt) {
evt.preventDefault();
opt.expand.call(that);
})
} else {
this.optionExpandButton.hide();
}
this.element.trigger('change',this.propertyType,this.value());
}
if (image) {

170
editor/js/ui/editor.js
View File

@ -494,12 +494,13 @@ RED.editor = (function() {
}
function getEditStackTitle() {
var title = '<ul class="editor-tray-breadcrumbs">';
for (var i=0;i<editStack.length;i++) {
var node = editStack[i];
var label = node.type;
if (node.type === 'subflow') {
if (node.type === '_expression') {
label = "Expression editor";
} else if (node.type === 'subflow') {
label = RED._("subflow.editSubflow",{name:node.name})
} else if (node.type.indexOf("subflow:")===0) {
var subflow = RED.nodes.subflow(node.type.substring(8));
@ -526,6 +527,33 @@ RED.editor = (function() {
return title;
}
function buildEditForm(tray,formId,type,ns) {
var trayBody = tray.find('.editor-tray-body');
var dialogForm = $('<form id="'+formId+'" class="form-horizontal"></form>').appendTo(trayBody);
dialogForm.html($("script[data-template-name='"+type+"']").html());
ns = ns||"node-red";
dialogForm.find('[data-i18n]').each(function() {
var current = $(this).attr("data-i18n");
var keys = current.split(";");
for (var i=0;i<keys.length;i++) {
var key = keys[i];
if (key.indexOf(":") === -1) {
var prefix = "";
if (key.indexOf("[")===0) {
var parts = key.split("]");
prefix = parts[0]+"]";
key = parts[1];
}
keys[i] = prefix+ns+":"+key;
}
}
$(this).attr("data-i18n",keys.join(";"));
});
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
dialogForm.submit(function(e) { e.preventDefault();});
return dialogForm;
}
function showEditDialog(node) {
var editing_node = node;
editStack.push(node);
@ -763,33 +791,13 @@ RED.editor = (function() {
if (editing_node) {
RED.sidebar.info.refresh(editing_node);
}
var trayBody = tray.find('.editor-tray-body');
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
dialogForm.html($("script[data-template-name='"+type+"']").html());
var ns;
if (node._def.set.module === "node-red") {
ns = "node-red";
} else {
ns = node._def.set.id;
}
dialogForm.find('[data-i18n]').each(function() {
var current = $(this).attr("data-i18n");
var keys = current.split(";");
for (var i=0;i<keys.length;i++) {
var key = keys[i];
if (key.indexOf(":") === -1) {
var prefix = "";
if (key.indexOf("[")===0) {
var parts = key.split("]");
prefix = parts[0]+"]";
key = parts[1];
}
keys[i] = prefix+ns+":"+key;
}
}
$(this).attr("data-i18n",keys.join(";"));
});
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
var dialogForm = buildEditForm(tray,"dialog-form",type,ns);
prepareEditDialog(node,node._def,"node-input");
dialogForm.i18n();
},
@ -882,7 +890,6 @@ RED.editor = (function() {
},
open: function(tray) {
var trayHeader = tray.find(".editor-tray-header");
var trayBody = tray.find(".editor-tray-body");
var trayFooter = tray.find(".editor-tray-footer");
if (node_def.hasUsers !== false) {
@ -890,21 +897,8 @@ RED.editor = (function() {
}
trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
var dialogForm = $('<form id="node-config-dialog-edit-form" class="form-horizontal"></form>').appendTo(trayBody);
dialogForm.html($("script[data-template-name='"+type+"']").html());
dialogForm.find('[data-i18n]').each(function() {
var current = $(this).attr("data-i18n");
if (current.indexOf(":") === -1) {
var prefix = "";
if (current.indexOf("[")===0) {
var parts = current.split("]");
prefix = parts[0]+"]";
current = parts[1];
}
$(this).attr("data-i18n",prefix+ns+":"+current);
}
});
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
var dialogForm = buildEditForm(tray,"node-config-dialog-edit-form",type,ns);
prepareEditDialog(editing_config_node,node_def,"node-config-input");
if (editing_config_node._def.exclusive) {
$("#node-config-dialog-scope").hide();
@ -1338,30 +1332,7 @@ RED.editor = (function() {
if (editing_node) {
RED.sidebar.info.refresh(editing_node);
}
var trayBody = tray.find('.editor-tray-body');
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
dialogForm.html($("script[data-template-name='subflow-template']").html());
var ns = "node-red";
dialogForm.find('[data-i18n]').each(function() {
var current = $(this).attr("data-i18n");
var keys = current.split(";");
for (var i=0;i<keys.length;i++) {
var key = keys[i];
if (key.indexOf(":") === -1) {
var prefix = "";
if (key.indexOf("[")===0) {
var parts = key.split("]");
prefix = parts[0]+"]";
key = parts[1];
}
keys[i] = prefix+ns+":"+key;
}
}
$(this).attr("data-i18n",keys.join(";"));
});
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
dialogForm.submit(function(e) { e.preventDefault();});
var dialogForm = buildEditForm(tray,"dialog-form","subflow-template");
subflowEditor = RED.editor.createEditor({
id: 'subflow-input-info-editor',
mode: 'ace/mode/markdown',
@ -1397,6 +1368,78 @@ RED.editor = (function() {
RED.tray.show(trayOptions);
}
function editExpression(options) {
var value = options.value;
var onComplete = options.complete;
var type = "_expression"
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,'dialog-form','_expression');
expressionEditor = RED.editor.createEditor({
id: 'node-input-expression',
value: "",
mode:"ace/mode/jsonata",
options: {
enableBasicAutocompletion:true,
enableSnippets:false,
enableLiveAutocompletion: true
}
});
expressionEditor.getSession().setValue(value||"",-1);
dialogForm.i18n();
},
close: function() {
editStack.pop();
},
show: function() {}
}
if (editTrayWidthCache.hasOwnProperty(type)) {
trayOptions.width = editTrayWidthCache[type];
}
RED.tray.show(trayOptions);
}
return {
init: function() {
RED.tray.init();
@ -1413,6 +1456,7 @@ RED.editor = (function() {
edit: showEditDialog,
editConfig: showEditConfigNodeDialog,
editSubflow: showEditSubflowDialog,
editExpression: editExpression,
validateNode: validateNode,
updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo

8
editor/sass/ace.scss Normal file
View File

@ -0,0 +1,8 @@
.ace_gutter {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.ace_scroller {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

1
editor/sass/style.scss
View File

@ -21,6 +21,7 @@
@import "jquery";
@import "bootstrap";
@import "ace";
@import "dropdownMenu";

16
editor/sass/ui/common/typedInput.scss
View File

@ -69,6 +69,9 @@
margin-right:4px;
margin-top: 1px;
vertical-align: middle;
&.fa-ellipsis-h {
top: -1px;
}
}
&.disabled {
cursor: default;
@ -95,6 +98,19 @@
background: $typedInput-button-background-active;
text-decoration: none;
}
&.red-ui-typedInput-full-width {
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
button.red-ui-typedInput-option-expand {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
right: 0;
}
button.red-ui-typedInput-option-trigger {

7
editor/templates/index.mst
View File

@ -159,6 +159,13 @@
<div class="form-row form-tips" id="subflow-dialog-user-count"></div>
</script>
<script type="text/x-red" data-template-name="_expression">
<div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-expression"></div>
</div>
</script>
<script src="vendor/vendor.js"></script>
<script src="vendor/jsonata/jsonata.min.js"></script>
<script src="vendor/ace/ace.js"></script>

129
editor/vendor/jsonata/mode-jsonata.js vendored Normal file
View File

@ -0,0 +1,129 @@
define("ace/mode/jsonata",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules","ace/worker/worker_client","ace/mode/text"], function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
var WorkerClient = require("../worker/worker_client").WorkerClient;
var JSONataHighlightRules = function() {
var keywordMapper = this.createKeywordMapper({
"keyword.operator":
"and|or|in",
"constant.language":
"null|Infinity|NaN|undefined",
"storage.type":
"function",
"keyword":
"$sum|$count|$max|$min|$average|$string|$substring|$substringBefore|"+
"$substringAfter|$lowercase|$uppercase|$length|$split|$join|$number|"+
"$boolean|$not|$map|$reduce|$keys|$lookup|$append|$exists|$spread"
}, "identifier");
this.$rules = {
"start" : [
{
token : "string",
regex : "'(?=.)",
next : "qstring"
},
{
token : "string",
regex : '"(?=.)',
next : "qqstring"
},
{
token : "constant.numeric", // hex
regex : /0(?:[xX][0-9a-fA-F]+|[bB][01]+)\b/
},
{
token : "constant.numeric", // float
regex : /[+-]?\d[\d_]*(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?\b/
},
{
token : keywordMapper,
regex : "[a-zA-Z\\$_\u00a1-\uffff][a-zA-Z\\d\\$_\u00a1-\uffff]*"
},
{ token: "keyword",
regex: /λ/
},
{
token: "constant.language.boolean",
regex: "true|false"
},
{
token : "punctuation.operator",
regex : /[.](?![.])/
},
{
token : "keyword.operator",
regex : /\|\||<=|>=|\.\.|\*\*|!=|:=|[=<>`!$%&*+\-~\/^]/,
next : "start"
},
{
token : "punctuation.operator",
regex : /[?:,;.]/,
next : "start"
},
{
token : "paren.lparen",
regex : /[\[({]/,
next : "start"
},
{
token : "paren.rparen",
regex : /[\])}]/
}
],
"qqstring" : [
{
token : "string",
regex : '"|$',
next : "start"
}, {
defaultToken: "string"
}
],
"qstring" : [
{
token : "string",
regex : "'|$",
next : "start"
}, {
defaultToken: "string"
}
]
};
};
oop.inherits(JSONataHighlightRules, TextHighlightRules);
var TextMode = require("./text").Mode;
var Mode = function() {
this.HighlightRules = JSONataHighlightRules;
};
oop.inherits(Mode, TextMode);
(function() {
this.createWorker = function(session) {
var worker = new WorkerClient(["ace"], "ace/mode/jsonata_worker", "JSONataWorker");
worker.attachToDocument(session.getDocument());
worker.on("annotate", function(e) {
session.setAnnotations(e.data);
});
worker.on("terminate", function() {
session.clearAnnotations();
});
return worker;
};
this.$id = "ace/mode/jsonata";
}).call(Mode.prototype);
exports.Mode = Mode;
});

4233
editor/vendor/jsonata/worker-jsonata.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff