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

Some performance improvements for TreeList

Browse Source
This commit is contained in:
Nick O'Leary 2020-06-08 17:13:05 +01:00
parent f2b30d9a3f
commit d28b8b5e8d
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js vendored
View File

@ -228,7 +228,7 @@
return candidates[index+1];
}
},
_addChildren: function(container,parent,children,depth) {
_addChildren: function(container,parent,children,depth,onCompleteChildren) {
var that = this;
var subtree = $('<ol class="red-ui-treeList-list">').appendTo(container).editableList({
connectWith: ".red-ui-treeList-sortable",
@ -263,10 +263,32 @@
if (!!that.options.sortable) {
subtree.addClass('red-ui-treeList-sortable');
}
for (var i=0;i<children.length;i++) {
children[i].parent = parent;
subtree.editableList('addItem',children[i])
var sliceSize = 30;
var index = 0;
var addSlice = function() {
var start = index;
for (var i=0;i<sliceSize;i++) {
index = start+i;
if (index === children.length) {
setTimeout(function() {
if (onCompleteChildren) {
onCompleteChildren();
}
},10);
return;
}
children[index].parent = parent;
subtree.editableList('addItem',children[index])
}
index++;
if (index < children.length) {
setTimeout(function() {
addSlice();
},10);
}
}
addSlice();
subtree.hide()
return subtree;
},
_fixDepths: function(parent,child) {
@ -376,9 +398,13 @@
var childrenAdded = false;
var spinner;
var startTime = 0;
var started = Date.now();
var completeBuild = function(children) {
childrenAdded = true;
item.treeList.childList = that._addChildren(container,item,children,depth).hide();
item.treeList.childList = that._addChildren(container,item,children,depth, function() {
if (done) { done(true) }
that._trigger("childrenloaded",null,item)
});
var delta = Date.now() - startTime;
if (delta < 400) {
setTimeout(function() {
@ -394,8 +420,6 @@
}
}
item.expanded = true;
if (done) { done(true) }
that._trigger("childrenloaded",null,item)
}
if (typeof item.children === 'function') {
item.children(completeBuild,item);
@ -411,7 +435,7 @@
}
} else {
if (that._loadingData) {
if (that._loadingData || item.children.length > 20) {
item.treeList.childList.show();
} else {
item.treeList.childList.slideDown('fast');
@ -427,7 +451,11 @@
}
item.expanded = false;
if (item.treeList.container) {
item.treeList.childList.slideUp('fast');
if (item.children.length < 20) {
item.treeList.childList.slideUp('fast');
} else {
item.treeList.childList.hide();
}
item.treeList.container.removeClass("expanded");
}
}
@ -554,7 +582,7 @@
})
if (!item.children) {
item.children = children||[];
item.treeList.childList = that._addChildren(container,item,item.children,depth).hide();
item.treeList.childList = that._addChildren(container,item,item.children,depth);
}
}
@ -646,7 +674,7 @@
}
if (item.children) {
if (Array.isArray(item.children) && !item.deferBuild) {
item.treeList.childList = that._addChildren(container,item,item.children,depth).hide();
item.treeList.childList = that._addChildren(container,item,item.children,depth);
}
if (item.expanded) {
item.treeList.expand();
@ -801,8 +829,10 @@
}
}
matchCount += childCount;
if (childCount > 0) {
item.treeList.expand();
if (filterFunc && childCount > 0) {
setTimeout(function() {
item.treeList.expand();
},10);
}
}
if (!filterFunc) {

4
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js vendored
View File

@ -208,7 +208,7 @@ RED.sidebar.info.outliner = (function() {
searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
style: "compact",
delay: 300,
delay: 500,
change: function() {
var val = $(this).val();
var searchResults = RED.search.search(val);
@ -291,8 +291,6 @@ RED.sidebar.info.outliner = (function() {
RED.events.on("groups:remove",onObjectRemove);
RED.events.on("groups:change",onNodeChange);
RED.events.on("view:selection-changed", onSelectionChanged);
RED.events.on("workspace:clear", onWorkspaceClear)
return container;