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

EditableList/TreeList - defer adding elements to DOM

Browse Source 
Whenever a DOM element is modified, it causes the browser to re-examine
the whole hierarchy around the element to see if anything needs to change.

This can cause a lot of extra work if an element is added to the DOM and
then a lot of updates are applied to the element.

It is much better to get the element as close to its final state as
possible *before* adding it to the DOM.
This commit is contained in:
Nick O'Leary 2020-06-10 00:42:11 +01:00
parent 6d294a0c74
commit 97fd34150f
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -259,28 +259,6 @@
var that = this; var that = this;
data = data || {}; data = data || {};
var li = $('<li>'); var li = $('<li>');
var added = false;
if (this.activeSort) {
var items = this.items();
var skip = false;
items.each(function(i,el) {
if (added) { return }
var itemData = el.data('data');
if (that.activeSort(data,itemData) < 0) {
li.insertBefore(el.closest("li"));
added = true;
}
});
}
if (!added) {
if (index <= 0) {
li.prependTo(this.element);
} else if (index > that.element.children().length-1) {
li.appendTo(this.element);
} else {
li.insertBefore(this.element.children().eq(index));
}
}
var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li); var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li);
row.data('data',data); row.data('data',data);
if (this.options.sortable === true) { if (this.options.sortable === true) {
@ -303,6 +281,28 @@
}); });
}); });
} }
var added = false;
if (this.activeSort) {
var items = this.items();
var skip = false;
items.each(function(i,el) {
if (added) { return }
var itemData = el.data('data');
if (that.activeSort(data,itemData) < 0) {
li.insertBefore(el.closest("li"));
added = true;
}
});
}
if (!added) {
if (index <= 0) {
li.prependTo(this.element);
} else if (index > that.element.children().length-1) {
li.appendTo(this.element);
} else {
li.insertBefore(this.element.children().eq(index));
}
}
if (this.options.addItem) { if (this.options.addItem) {
var index = that.element.children().length-1; var index = that.element.children().length-1;
// setTimeout(function() { // setTimeout(function() {

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

@ -501,7 +501,8 @@
item.treeList.parentList = parentList; item.treeList.parentList = parentList;
var label = $("<div>",{class:"red-ui-treeList-label"}).appendTo(container); var label = $("<div>",{class:"red-ui-treeList-label"});
label.appendTo(container);
item.treeList.label = label; item.treeList.label = label;
if (item.class) { if (item.class) {
label.addClass(item.class); label.addClass(item.class);
@ -592,7 +593,7 @@
} }
if (item.checkbox) { if (item.checkbox) {
var selectWrapper = $('<span class="red-ui-treeList-icon"></span>').appendTo(label); var selectWrapper = $('<span class="red-ui-treeList-icon"></span>');
var cb = $('<input class="red-ui-treeList-checkbox" type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper); var cb = $('<input class="red-ui-treeList-checkbox" type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
cb.on('click', function(e) { cb.on('click', function(e) {
e.stopPropagation(); e.stopPropagation();
@ -618,6 +619,7 @@
cb.trigger("click"); cb.trigger("click");
} }
} }
selectWrapper.appendTo(label)
} else { } else {
label.on("click", function(e) { label.on("click", function(e) {
if (!that.options.multi) { if (!that.options.multi) {
@ -680,6 +682,7 @@
item.treeList.expand(); item.treeList.expand();
} }
} }
// label.appendTo(container);
}, },
empty: function() { empty: function() {
this._topList.editableList('empty'); this._topList.editableList('empty');