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

TreeList updates for the outliner sidebar

Browse Source 
All data items now get their `item.treeList` api added even if deferBuild is set.
This means the apis can be used regardless of whether the tree has built their
ui pieces.

Also adds a number of new api calls

Top-level methods:

 - clearSelection - clears selection from the list
 - filter(filterFunc) - filters the tree using the provided function

Data item functions:

 - item.treeList.sortChildren(sortFunction)
 - item.treeList.replaceElement(element)
This commit is contained in:
Nick O'Leary 2020-04-27 11:14:47 +01:00
parent 5c0b500f48
commit d2d872f51c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 242 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,8 @@
*
* methods:
* - data(items) - clears existing items and replaces with new data
*
* - clearSelection - clears the selected items
* - filter(filterFunc) - filters the tree using the provided function
* events:
* - treelistselect : function(event, item) {}
* - treelistconfirm : function(event,item) {}
@ -59,9 +60,9 @@
* properties and functions:
*
* item.parent - set to the parent item
* item.depth - the depth in the tree (0 == root)
* item.treeList.container
* item.treeList.label - the label element for the item
* item.treeList.depth - the depth in the tree (0 == root)
* item.treeList.parentList - the editableList instance this item is in
* item.treeList.remove() - removes the item from the tree
* item.treeList.makeLeaf(detachChildElements) - turns an element with children into a leaf node,
@ -78,8 +79,8 @@
* Optionally selects the item after adding.
* item.treeList.expand(done) - expands the parent item to show children. Optional 'done' callback.
* item.treeList.collapse() - collapse the parent item to hide children.
*
*
* item.treeList.sortChildren(sortFunction) - does a one-time sort of the children using sortFunction
* item.treeList.replaceElement(element) - replace the custom element for the item
*
*
*/
@ -151,7 +152,7 @@
}
});
this._data = [];
this._items = {};
this._topList = $('<ol class="red-ui-treeList-list">').css({
position:'absolute',
top: 0,
@ -244,7 +245,8 @@
that._trigger("changeparent",null,evt);
});
that._trigger("sort",null,parent);
}
},
filter: parent.treeList.childFilter
});
if (!!that.options.sortable) {
subtree.addClass('red-ui-treeList-sortable');
@ -289,21 +291,175 @@
}
return reparentedEvent;
},
_addSubtree: function(parentList, container, item, depth) {
_initItem: function(item,depth) {
if (item.treeList) {
return;
}
var that = this;
this._items[item.id] = item;
item.treeList = {};
item.treeList.depth = depth;
item.treeList.container = container;
item.treeList.parentList = parentList;
item.depth = depth;
item.treeList.remove = function() {
parentList.editableList('removeItem',item);
if (item.treeList.parentList) {
item.treeList.parentList.editableList('removeItem',item);
}
if (item.parent) {
var index = item.parent.children.indexOf(item);
item.parent.children.splice(index,1)
that._trigger("sort",null,item.parent);
}
delete(that._items[item.id]);
}
item.treeList.insertChildAt = function(newItem,position,select) {
newItem.parent = item;
item.children.splice(position,0,newItem);
var processChildren = function(parent,i) {
that._initItem(i,parent.depth+1)
i.parent = parent;
if (i.children && typeof i.children !== 'function') {
i.children.forEach(function(item) {
processChildren(i, item, parent.depth+2)
});
}
}
processChildren(item,newItem);
if (!item.deferBuild) {
item.treeList.childList.editableList('insertItemAt',newItem,position)
if (select) {
setTimeout(function() {
that.select(newItem)
},100);
}
that._trigger("sort",null,item);
}
}
item.treeList.addChild = function(newItem,select) {
item.treeList.insertChildAt(newItem,item.children.length,select);
}
item.treeList.expand = function(done) {
if (!item.children) {
if (done) { done() }
return;
}
if (!item.treeList.container) {
item.expanded = true;
if (done) { done() }
return;
}
var container = item.treeList.container;
if (container.hasClass("expanded")) {
if (done) { done() }
return;
}
if (!container.hasClass("built") && (item.deferBuild || typeof item.children === 'function')) {
container.addClass('built');
var childrenAdded = false;
var spinner;
var startTime = 0;
var completeBuild = function(children) {
childrenAdded = true;
item.treeList.childList = that._addChildren(container,item,children,depth).hide();
var delta = Date.now() - startTime;
if (delta < 400) {
setTimeout(function() {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
},400-delta);
} else {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
}
item.expanded = true;
if (done) { done() }
that._trigger("childrenloaded",null,item)
}
if (typeof item.children === 'function') {
item.children(completeBuild,item);
} else {
delete item.deferBuild;
completeBuild(item.children);
}
if (!childrenAdded) {
startTime = Date.now();
spinner = $('<div class="red-ui-treeList-spinner">').css({
"background-position": (35+depth*20)+'px 50%'
}).appendTo(container);
}
} else {
if (that._loadingData) {
item.treeList.childList.show();
} else {
item.treeList.childList.slideDown('fast');
}
item.expanded = true;
if (done) { done() }
}
container.addClass("expanded");
}
item.treeList.collapse = function() {
if (!item.children) {
return;
}
item.expanded = false;
if (item.treeList.container) {
item.treeList.childList.slideUp('fast');
item.treeList.container.removeClass("expanded");
}
}
item.treeList.sortChildren = function(sortFunc) {
if (!item.children) {
return;
}
item.children.sort(sortFunc);
if (item.treeList.childList) {
// Do a one-off sort of the list, which means calling sort twice:
// 1. first with the desired sort function
item.treeList.childList.editableList('sort',sortFunc);
// 2. and then with null to remove it
item.treeList.childList.editableList('sort',null);
}
}
item.treeList.replaceElement = function (element) {
if (item.element && item.treeList.container) {
$(item.element).remove();
item.element = element;
$(item.element).appendTo(label);
$(item.element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
})
}
}
if (item.children && typeof item.children !== "function") {
item.children.forEach(function(i) {
that._initItem(i,depth+1);
})
}
},
_addSubtree: function(parentList, container, item, depth) {
var that = this;
this._initItem(item,depth);
// item.treeList = {};
// item.treeList.depth = depth;
item.treeList.container = container;
item.treeList.parentList = parentList;
// item.treeList.remove = function() {
// parentList.editableList('removeItem',item);
// if (item.parent) {
// var index = item.parent.children.indexOf(item);
// item.parent.children.splice(index,1)
// that._trigger("sort",null,item.parent);
// }
// delete(that._items[item.id]);
// }
var label = $("<div>",{class:"red-ui-treeList-label"}).appendTo(container);
item.treeList.label = label;
@ -357,6 +513,7 @@
treeListIcon.off("click.red-ui-treeList-expand");
delete item.children;
container.removeClass("expanded");
delete item.expanded;
}
item.treeList.makeParent = function(children) {
if (treeListIcon.children().length) {
@ -388,86 +545,6 @@
item.treeList.childList = that._addChildren(container,item,item.children,depth).hide();
}
}
item.treeList.insertChildAt = function(newItem,position,select) {
newItem.parent = item;
item.children.splice(position,0,newItem);
if (!item.deferBuild) {
item.treeList.childList.editableList('insertItemAt',newItem,position)
if (select) {
setTimeout(function() {
that.select(newItem)
},100);
}
that._trigger("sort",null,item);
}
}
item.treeList.addChild = function(newItem,select) {
item.treeList.insertChildAt(newItem,item.children.length,select);
}
item.treeList.expand = function(done) {
if (!item.children) {
return;
}
if (container.hasClass("expanded")) {
if (done) { done() }
return;
}
if (!container.hasClass("built") && (item.deferBuild || typeof item.children === 'function')) {
container.addClass('built');
var childrenAdded = false;
var spinner;
var startTime = 0;
var completeBuild = function(children) {
childrenAdded = true;
item.treeList.childList = that._addChildren(container,item,children,depth).hide();
var delta = Date.now() - startTime;
if (delta < 400) {
setTimeout(function() {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
},400-delta);
} else {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
}
if (done) { done() }
that._trigger("childrenloaded",null,item)
}
if (typeof item.children === 'function') {
item.children(completeBuild,item);
} else {
delete item.deferBuild;
completeBuild(item.children);
}
if (!childrenAdded) {
startTime = Date.now();
spinner = $('<div class="red-ui-treeList-spinner">').css({
"background-position": (35+depth*20)+'px 50%'
}).appendTo(container);
}
} else {
if (that._loadingData) {
item.treeList.childList.show();
} else {
item.treeList.childList.slideDown('fast');
}
if (done) { done() }
}
container.addClass("expanded");
}
item.treeList.collapse = function() {
if (!item.children) {
return;
}
item.treeList.childList.slideUp('fast');
container.removeClass("expanded");
}
var treeListIcon = $('<span class="red-ui-treeList-icon"></span>').appendTo(label);
if (item.children) {
@ -499,7 +576,9 @@
}
} else {
label.on("click", function(e) {
that._topList.find(".selected").removeClass("selected");
if (!that.options.multi) {
that._topList.find(".selected").removeClass("selected");
}
label.addClass("selected");
that._trigger("select",e,item)
})
@ -508,9 +587,22 @@
that._trigger("confirm",e,item);
}
})
item.treeList.select = function(v) {
if (!that.options.multi) {
that._topList.find(".selected").removeClass("selected");
}
label.toggleClass("selected",v);
if (v) {
that._trigger("select",null,item)
}
}
}
if (item.icon) {
$('<span class="red-ui-treeList-icon"><i class="'+item.icon+'" /></span>').appendTo(label);
if (typeof item.icon === "string") {
$('<span class="red-ui-treeList-icon"><i class="'+item.icon+'" /></span>').appendTo(label);
} else {
$('<span class="red-ui-treeList-icon">').appendTo(label).append(item.icon);
}
}
if (item.hasOwnProperty('label') || item.hasOwnProperty('sublabel')) {
if (item.hasOwnProperty('label')) {
@ -542,6 +634,7 @@
var that = this;
if (items !== undefined) {
this._data = items;
this._items = {};
this._topList.editableList('empty');
this._loadingData = true;
for (var i=0; i<items.length;i++) {
@ -557,18 +650,41 @@
}
},
show: function(id) {
for (var i=0;i<this._data.length;i++) {
if (this._data[i].id === id) {
this._topList.editableList('show',this._data[i]);
var that = this;
var item = this._items[id];
var stack = [];
var i = item;
while(i) {
stack.unshift(i);
i = i.parent;
}
var handleStack = function() {
var item = stack.shift();
if (stack.length === 0) {
item.treeList.parentList.editableList('show',item);
} else {
item.treeList.expand(handleStack)
}
}
handleStack();
// for (var i=0;i<this._data.length;i++) {
// if (this._data[i].id === id) {
// this._topList.editableList('show',this._data[i]);
// }
// }
},
select: function(item) {
this._topList.find(".selected").removeClass("selected");
if (!this.options.multi) {
this._topList.find(".selected").removeClass("selected");
}
item.treeList.label.addClass("selected");
this._trigger("select",null,item)
},
clearSelection: function() {
this._topList.find(".selected").removeClass("selected");
},
selected: function() {
var s = this._topList.find(".selected");
if (this.options.multi) {
@ -583,6 +699,34 @@
} else {
return undefined;
}
},
filter: function(filterFunc) {
var filter = function(item) {
// console.log(item);
var childCount = 0;
if (filterFunc && filterFunc(item)) {
childCount++;
}
if (item.children && typeof item.children !== "function") {
if (item.treeList.childList) {
childCount += item.treeList.childList.editableList('filter', filter);
} else {
item.treeList.childFilter = filter;
if (filterFunc) {
item.children.forEach(function(i) {
if (filter(i)) {
childCount++;
}
})
}
}
}
if (!filterFunc) {
return true
}
return childCount > 0
}
return this._topList.editableList('filter', filter);
}
});