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 @@