From dbf0486acb36d9f8430ab0a0e829e86f01ef1a53 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 5 May 2017 11:23:24 +0100 Subject: [PATCH] Add JSONata expr tester and improved feedback --- Gruntfile.js | 1 + editor/js/ui/common/panels.js | 83 +++++++++++++++ editor/js/ui/editor.js | 140 +++++++++++++++++++++++-- editor/js/ui/tab-info.js | 3 +- editor/sass/editor.scss | 51 ++++++++- editor/sass/panels.scss | 23 ++++ editor/sass/style.scss | 1 + editor/templates/index.mst | 43 +++++--- editor/vendor/jsonata/formatter.js | 5 +- nodes/core/locales/en-US/messages.json | 5 +- nodes/core/logic/10-switch.js | 6 +- nodes/core/logic/15-change.js | 11 +- red/api/locales/en-US/editor.json | 10 +- red/api/locales/en-US/jsonata.json | 9 +- red/runtime/util.js | 23 ++-- 15 files changed, 362 insertions(+), 52 deletions(-) create mode 100644 editor/js/ui/common/panels.js create mode 100644 editor/sass/panels.scss diff --git a/Gruntfile.js b/Gruntfile.js index b9c962c87..e921be3c5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -124,6 +124,7 @@ module.exports = function(grunt) { "editor/js/ui/utils.js", "editor/js/ui/common/editableList.js", "editor/js/ui/common/menu.js", + "editor/js/ui/common/panels.js", "editor/js/ui/common/popover.js", "editor/js/ui/common/searchBox.js", "editor/js/ui/common/tabs.js", diff --git a/editor/js/ui/common/panels.js b/editor/js/ui/common/panels.js new file mode 100644 index 000000000..fbe595662 --- /dev/null +++ b/editor/js/ui/common/panels.js @@ -0,0 +1,83 @@ +/** + * Copyright JS Foundation and other contributors, http://js.foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + + +RED.panels = (function() { + + function createPanel(options) { + var container = options.container || $("#"+options.id); + var children = container.children(); + if (children.length !== 2) { + throw new Error("Container must have exactly two children"); + } + + container.addClass("red-ui-panels"); + var separator = $('
').insertAfter(children[0]); + var startPosition; + var panelHeights = []; + var modifiedHeights = false; + var panelRatio; + + separator.draggable({ + axis: "y", + containment: container, + scroll: false, + start:function(event,ui) { + var height = container.height(); + startPosition = ui.position.top; + panelHeights = [$(children[0]).height(),$(children[1]).height()]; + console.log("START",height,panelHeights,panelHeights[0]+panelHeights[1],height-(panelHeights[0]+panelHeights[1])); + }, + drag: function(event,ui) { + var height = container.height(); + var delta = ui.position.top-startPosition; + var newHeights = [panelHeights[0]+delta,panelHeights[1]-delta]; + $(children[0]).height(newHeights[0]); + $(children[1]).height(newHeights[1]); + if (options.resize) { + options.resize(newHeights[0],newHeights[1]); + } + ui.position.top -= delta; + panelRatio = newHeights[0]/height; + }, + stop:function(event,ui) { + modifiedHeights = true; + } + }); + + return { + resize: function(height) { + var panelHeights = [$(children[0]).height(),$(children[1]).height()]; + container.height(height); + if (modifiedHeights) { + var topPanelHeight = panelRatio*height; + var bottomPanelHeight = height - topPanelHeight - 48; + panelHeights = [topPanelHeight,bottomPanelHeight]; + $(children[0]).height(panelHeights[0]); + $(children[1]).height(panelHeights[1]); + console.log("SET",height,panelHeights,panelHeights[0]+panelHeights[1],height-(panelHeights[0]+panelHeights[1])); + } + if (options.resize) { + options.resize(panelHeights[0],panelHeights[1]); + } + } + } + } + + return { + create: createPanel + } +})(); diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index d742ab80f..9164be349 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -1598,6 +1598,9 @@ RED.editor = (function() { editStack.push({type:type}); RED.view.state(RED.state.EDITING); var expressionEditor; + var testDataEditor; + var testResultEditor + var panels; var trayOptions = { title: getEditStackTitle(), @@ -1621,20 +1624,18 @@ RED.editor = (function() { } ], 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 .form-row > div:first-child"); + p2Height -= p2.outerHeight(true) + 20; + $(".node-input-expression-tab-content").height(p2Height); + $("#node-input-expression-test-data").css("height",(p2Height-5)+"px"); + testDataEditor.resize(); + $("#node-input-expression-test-result").css("height",(p2Height-5)+"px"); + testResultEditor.resize(); + } + }); + + testExpression(); }, close: function() { editStack.pop(); @@ -1855,6 +1968,7 @@ RED.editor = (function() { validateNode: validateNode, updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo + createEditor: function(options) { var editor = ace.edit(options.id); editor.setTheme("ace/theme/tomorrow"); @@ -1875,6 +1989,12 @@ RED.editor = (function() { enableSnippets:true }); } + if (options.readOnly) { + editor.setOption('readOnly',options.readOnly); + } + if (options.hasOwnProperty('lineNumbers')) { + editor.renderer.setOption('showGutter',options.lineNumbers); + } editor.$blockScrolling = Infinity; if (options.value) { session.setValue(options.value,-1); diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index d95cdca92..c054ee244 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -350,7 +350,8 @@ RED.sidebar.info = (function() { // tips.stop(); sections.show(); nodeSection.container.hide(); - $(infoSection.content).html(html); + var wrapped = $('
').html(html); + $(infoSection.content).empty().append(wrapped); } diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss index 837f355de..656b4c00c 100644 --- a/editor/sass/editor.scss +++ b/editor/sass/editor.scss @@ -48,8 +48,10 @@ .editor-tray-body { position: relative; box-sizing: border-box; - form { + padding: 0.1px; // prevent margin collapsing + .dialog-form,#dialog-form, #dialog-config-form { margin: 20px; + height: calc(100% - 40px); } } .editor-tray-content { @@ -154,7 +156,7 @@ .dialog-form,#dialog-form, #dialog-config-form { - height: calc(100% - 20px); + height: 100%; } .input-error { @@ -245,3 +247,48 @@ font-size: 12px; line-height: 35px; } +.node-input-expression-editor #dialog-form { + margin: 0; + height: 100%; + .red-ui-panel { + &:first-child { + padding: 20px 20px 0; + } + &:last-child { + padding-bottom: 20px; + } + } +} +.node-input-expression-tab-content { + position: relative; + padding: 0 20px; +} + +#node-input-expression-help { + position: absolute; + top: 35px; + left:0; + right: 0; + bottom:0; + padding: 0 20px; + overflow: auto; + box-sizing: border-box; +} +#node-input-expression-panel-info { + & > .form-row { + margin: 0; + & > div:first-child { + margin-top: 10px; + } + } +} +.node-input-expression-legacy { + float: left; + cursor: pointer; + border: 1px solid white; + padding: 0 5px; + border-radius: 2px; + &:hover { + border-color: $primary-border-color; + } +} diff --git a/editor/sass/panels.scss b/editor/sass/panels.scss new file mode 100644 index 000000000..ba803a8db --- /dev/null +++ b/editor/sass/panels.scss @@ -0,0 +1,23 @@ +.red-ui-panels { + position: relative; + + & > div { + // border: 1px solid red; + box-sizing: border-box; + } +} + +.red-ui-panels-separator { + border-top: 1px solid $secondary-border-color; + border-bottom: 1px solid $secondary-border-color; + height: 7px; + box-sizing: border-box; + cursor: ns-resize; + background: $background-color url(images/grip.png) no-repeat 50% 50%; +} + + +.red-ui-panel { + overflow: auto; + height: calc(50% - 4px); +} diff --git a/editor/sass/style.scss b/editor/sass/style.scss index c8022a6f8..5007396e1 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -37,6 +37,7 @@ @import "library"; @import "search"; +@import "panels"; @import "tabs"; @import "tab-config"; @import "tab-info"; diff --git a/editor/templates/index.mst b/editor/templates/index.mst index 0e92457d9..cc11bcd0f 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -166,22 +166,41 @@