Skip to content

Commit

Permalink
[outline] Update information section of info sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@knolleary
knolleary committed May 1, 2020
1 parent aca61c0 commit 78c8688
Show file tree
Hide file tree
Showing 8 changed files with 417 additions and 276 deletions.
78 changes: 58 additions & 20 deletions packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,8 @@
var target;
switch(evt.keyCode) {
case 13: // ENTER
evt.preventDefault();
evt.stopPropagation();
if (selected.children) {
if (selected.treeList.container.hasClass("expanded")) {
selected.treeList.collapse()
Expand All @@ -113,13 +115,17 @@

break;
case 37: // LEFT
evt.preventDefault();
evt.stopPropagation();
if (selected.children&& selected.treeList.container.hasClass("expanded")) {
selected.treeList.collapse()
} else if (selected.parent) {
target = selected.parent;
}
break;
case 38: // UP
evt.preventDefault();
evt.stopPropagation();
target = that._getPreviousSibling(selected);
if (target) {
target = that._getLastDescendant(target);
Expand All @@ -129,13 +135,17 @@
}
break;
case 39: // RIGHT
evt.preventDefault();
evt.stopPropagation();
if (selected.children) {
if (!selected.treeList.container.hasClass("expanded")) {
selected.treeList.expand()
}
}
break
case 40: //DOWN
evt.preventDefault();
evt.stopPropagation();
if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) {
target = selected.children[0];
} else {
Expand Down Expand Up @@ -339,17 +349,17 @@
}
item.treeList.expand = function(done) {
if (!item.children) {
if (done) { done() }
if (done) { done(false) }
return;
}
if (!item.treeList.container) {
item.expanded = true;
if (done) { done() }
if (done) { done(false) }
return;
}
var container = item.treeList.container;
if (container.hasClass("expanded")) {
if (done) { done() }
if (done) { done(false) }
return;
}

Expand All @@ -376,7 +386,7 @@
}
}
item.expanded = true;
if (done) { done() }
if (done) { done(true) }
that._trigger("childrenloaded",null,item)
}
if (typeof item.children === 'function') {
Expand All @@ -399,7 +409,7 @@
item.treeList.childList.slideDown('fast');
}
item.expanded = true;
if (done) { done() }
if (done) { done(!that._loadingData) }
}
container.addClass("expanded");
}
Expand Down Expand Up @@ -427,13 +437,16 @@
}
}
item.treeList.replaceElement = function (element) {
if (item.element && item.treeList.container) {
$(item.element).remove();
if (item.element) {
if (item.treeList.container) {
$(item.element).remove();
$(element).appendTo(item.treeList.label);
var labelPaddingWidth = (item.gutter?item.gutter.width()+2:0)+(item.depth*20);
$(element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
})
}
item.element = element;
$(item.element).appendTo(label);
$(item.element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
})
}
}

Expand Down Expand Up @@ -595,6 +608,7 @@
if (v) {
that._trigger("select",null,item)
}
that.reveal(item);
}
}
if (item.icon) {
Expand Down Expand Up @@ -658,10 +672,15 @@
stack.unshift(i);
i = i.parent;
}
var handleStack = function() {
var isOpening = false;
var handleStack = function(opening) {
isOpening = isOpening ||opening
var item = stack.shift();
if (stack.length === 0) {
item.treeList.parentList.editableList('show',item);
setTimeout(function() {
that.reveal(item);
},isOpening?200:0);
// item.treeList.parentList.editableList('show',item);
} else {
item.treeList.expand(handleStack)
}
Expand All @@ -674,13 +693,27 @@
// }
// }
},
reveal: function(item) {
var listOffset = this._topList.offset().top;
var itemOffset = item.treeList.label.offset().top;
var scrollTop = this._topList.parent().scrollTop();
itemOffset -= listOffset+scrollTop;
var treeHeight = this._topList.parent().height();
var itemHeight = item.treeList.label.outerHeight();
if (itemOffset < itemHeight/2) {
this._topList.parent().scrollTop(scrollTop+itemOffset-itemHeight/2-itemHeight)
} else if (itemOffset+itemHeight > treeHeight) {
this._topList.parent().scrollTop(scrollTop+((itemOffset+2.5*itemHeight)-treeHeight));
}
console.log("scroll now",this._topList.parent().scrollTop())
},
select: function(item) {
if (!this.options.multi) {
this._topList.find(".selected").removeClass("selected");
}
this.show(item.id);
item.treeList.label.addClass("selected");
this._trigger("select",null,item)

},
clearSelection: function() {
this._topList.find(".selected").removeClass("selected");
Expand All @@ -700,16 +733,16 @@
return undefined;
}
},
filter: function(filterFunc) {
filter: function(filterFunc,expandResults) {
var filter = function(item) {
// console.log(item);
var childCount = 0;
var matchCount = 0;
if (filterFunc && filterFunc(item)) {
childCount++;
matchCount++;
}
var childCount = 0;
if (item.children && typeof item.children !== "function") {
if (item.treeList.childList) {
childCount += item.treeList.childList.editableList('filter', filter);
childCount = item.treeList.childList.editableList('filter', filter);
} else {
item.treeList.childFilter = filter;
if (filterFunc) {
Expand All @@ -718,13 +751,18 @@
childCount++;
}
})

}
}
matchCount += childCount;
if (childCount > 0) {
item.treeList.expand();
}
}
if (!filterFunc) {
return true
}
return childCount > 0
return matchCount > 0
}
return this._topList.editableList('filter', filter);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
**/
(function() {

var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px; margin-bottom:0;"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';

function stringToUTF8Array(str) {
var data = [];
Expand Down
4 changes: 2 additions & 2 deletions packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,9 +318,9 @@
var p2 = $("#red-ui-editor-type-expression-panel-info > .form-row > div:first-child");
p2Height -= p2.outerHeight(true) + 20;
$(".red-ui-editor-type-expression-tab-content").height(p2Height);
$("#red-ui-editor-type-expression-test-data").css("height",(p2Height-5)+"px");
$("#red-ui-editor-type-expression-test-data").css("height",(p2Height-25)+"px");
testDataEditor.resize();
$("#red-ui-editor-type-expression-test-result").css("height",(p2Height-5)+"px");
$("#red-ui-editor-type-expression-test-result").css("height",(p2Height-25)+"px");
testResultEditor.resize();
}
});
Expand Down

0 comments on commit 78c8688

Please sign in to comment.