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

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

@ -228,7 +228,7 @@
return candidates[index+1]; return candidates[index+1];
} }
}, },
_addChildren: function(container,parent,children,depth) { _addChildren: function(container,parent,children,depth,onCompleteChildren) {
var that = this; var that = this;
var subtree = $('<ol class="red-ui-treeList-list">').appendTo(container).editableList({ var subtree = $('<ol class="red-ui-treeList-list">').appendTo(container).editableList({
connectWith: ".red-ui-treeList-sortable", connectWith: ".red-ui-treeList-sortable",
@ -263,10 +263,32 @@
if (!!that.options.sortable) { if (!!that.options.sortable) {
subtree.addClass('red-ui-treeList-sortable'); subtree.addClass('red-ui-treeList-sortable');
} }
for (var i=0;i<children.length;i++) { var sliceSize = 30;
children[i].parent = parent; var index = 0;
subtree.editableList('addItem',children[i]) 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; return subtree;
}, },
_fixDepths: function(parent,child) { _fixDepths: function(parent,child) {
@ -376,9 +398,13 @@
var childrenAdded = false; var childrenAdded = false;
var spinner; var spinner;
var startTime = 0; var startTime = 0;
var started = Date.now();
var completeBuild = function(children) { var completeBuild = function(children) {
childrenAdded = true; 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; var delta = Date.now() - startTime;
if (delta < 400) { if (delta < 400) {
setTimeout(function() { setTimeout(function() {
@ -394,8 +420,6 @@
} }
} }
item.expanded = true; item.expanded = true;
if (done) { done(true) }
that._trigger("childrenloaded",null,item)
} }
if (typeof item.children === 'function') { if (typeof item.children === 'function') {
item.children(completeBuild,item); item.children(completeBuild,item);
@ -411,7 +435,7 @@
} }
} else { } else {
if (that._loadingData) { if (that._loadingData || item.children.length > 20) {
item.treeList.childList.show(); item.treeList.childList.show();
} else { } else {
item.treeList.childList.slideDown('fast'); item.treeList.childList.slideDown('fast');
@ -427,7 +451,11 @@
} }
item.expanded = false; item.expanded = false;
if (item.treeList.container) { if (item.treeList.container) {
if (item.children.length < 20) {
item.treeList.childList.slideUp('fast'); item.treeList.childList.slideUp('fast');
} else {
item.treeList.childList.hide();
}
item.treeList.container.removeClass("expanded"); item.treeList.container.removeClass("expanded");
} }
} }
@ -554,7 +582,7 @@
}) })
if (!item.children) { if (!item.children) {
item.children = 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 (item.children) {
if (Array.isArray(item.children) && !item.deferBuild) { 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) { if (item.expanded) {
item.treeList.expand(); item.treeList.expand();
@ -801,8 +829,10 @@
} }
} }
matchCount += childCount; matchCount += childCount;
if (childCount > 0) { if (filterFunc && childCount > 0) {
setTimeout(function() {
item.treeList.expand(); item.treeList.expand();
},10);
} }
} }
if (!filterFunc) { 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({ searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
style: "compact", style: "compact",
delay: 300, delay: 500,
change: function() { change: function() {
var val = $(this).val(); var val = $(this).val();
var searchResults = RED.search.search(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:remove",onObjectRemove);
RED.events.on("groups:change",onNodeChange); RED.events.on("groups:change",onNodeChange);
RED.events.on("view:selection-changed", onSelectionChanged);
RED.events.on("workspace:clear", onWorkspaceClear) RED.events.on("workspace:clear", onWorkspaceClear)
return container; return container;