You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
4.3 KiB
142 lines
4.3 KiB
|
|
class TreeView {
|
|
/**
|
|
* @param {Printable} printable
|
|
* @param {WebConsole} console
|
|
*/
|
|
constructor(printable, console) {
|
|
this.console = console;
|
|
this.container = createElement("div", "tree-view");
|
|
this.list = createElement("ul", "tree-root");
|
|
this.valueID = printable.id;
|
|
this.rootItem = this.treeItem(printable);
|
|
this.list.appendChild(this.rootItem.container);
|
|
this.container.appendChild(this.list);
|
|
}
|
|
|
|
treeItem(printable) {
|
|
let item = new Item(printable, this);
|
|
return item;
|
|
}
|
|
|
|
rootElement() {
|
|
return this.container;
|
|
}
|
|
|
|
}
|
|
|
|
class Item extends NavigatablesHost {
|
|
constructor(printable, tree) {
|
|
super();
|
|
this.tree = tree;
|
|
this.printable = printable;
|
|
this.container = createElement("li", "tree-item");
|
|
let state = this.hasChildren() ? 'collapsed' : "leaf";
|
|
this.container.classList.add(state);
|
|
|
|
this.addNavigatable(this.container);
|
|
this.expandAction = () => this.expand();
|
|
this.collapseAction = () => this.collapse();
|
|
|
|
let preview = createTextNode(printable);
|
|
preview.classList.add("preview");
|
|
preview.classList.add(...printable.styleClasses);
|
|
if (printable.iconURL != null) {
|
|
let iconElement = WebConsole._createDynamicIcon(printable, "node-icon");
|
|
preview.insertAdjacentElement("afterbegin", iconElement);
|
|
}
|
|
this.container.appendChild(preview);
|
|
|
|
if (this.hasChildren()) {
|
|
this.collapsed = true;
|
|
|
|
let childrenElem = createElement("ul", "group-container");
|
|
this.childContainer = childrenElem;
|
|
this.childrenItems = [];
|
|
this.container.appendChild(childrenElem);
|
|
let clickHandler = (event) => {
|
|
event.stopPropagation();
|
|
if (this.collapsed) {
|
|
this.expand();
|
|
} else {
|
|
this.collapse();
|
|
}
|
|
};
|
|
preview.onclick = clickHandler;
|
|
this.container.onclick = (event) => {
|
|
if (event.target !== event.currentTarget) return;
|
|
clickHandler(event);
|
|
}
|
|
} else if (printable.type === PRINTABLE_TYPES.TREE_LINK) {
|
|
let navigate = (e) => {
|
|
callJVM("nodeLinkClick", [this.printable.id]);
|
|
};
|
|
this.container.navigateAction = navigate;
|
|
preview.onclick = navigate;
|
|
}
|
|
}
|
|
|
|
hasChildren() {
|
|
return this.printable.type === PRINTABLE_TYPES.TREE;
|
|
}
|
|
|
|
expand() {
|
|
if (this.collapsed && this.hasChildren()) {
|
|
let callbackId = callJVM('expand', [this.printable.id], ([add, children]) => {
|
|
if (add) {
|
|
for (let childAndIndex of children) {
|
|
let childPrintable = childAndIndex.first;
|
|
let childItem = new Item(childPrintable);
|
|
if (childPrintable.type === PRINTABLE_TYPES.MESSAGE_TREE_NODE) {
|
|
let navigate = (event) => {
|
|
callJVM('messageNodeCallback', [childPrintable.id]);
|
|
};
|
|
childItem.container.ondblclick = navigate;
|
|
childItem.navigateAction = navigate;
|
|
}
|
|
this.addChild(childAndIndex.second, childItem);
|
|
}
|
|
}
|
|
else {
|
|
for (let index of children) {
|
|
this.childrenItems.splice(index, 1);
|
|
this.childContainer.removeChild(this.childContainer.childNodes[index]);
|
|
}
|
|
}
|
|
}, true);
|
|
this.callbackId = callbackId;
|
|
toggle_visibility(this.container);
|
|
this.collapsed = false;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
addChild(index, childItem) {
|
|
if (index != null && index < this.childrenItems.length ) {
|
|
let prevChild = this.childrenItems[index];
|
|
this.childContainer.insertBefore(childItem.container, prevChild.container);
|
|
this.childrenItems.splice(index, 0, childItem);
|
|
this.addNavigatableBefore(prevChild, childItem);
|
|
} else {
|
|
this.addNavigatable(childItem);
|
|
this.childContainer.appendChild(childItem.container);
|
|
this.childrenItems.push(childItem);
|
|
}
|
|
}
|
|
|
|
collapse() {
|
|
if (!this.collapsed && this.hasChildren()) {
|
|
clearContainer(this.childContainer);
|
|
callbackMap.delete(this.callbackId);
|
|
callJVM("collapse", [this.printable.id]);
|
|
toggle_visibility(this.container);
|
|
this.collapsed = true;
|
|
this.firstNavigatable.nextNavigatable = null;
|
|
this.lastNavigatable = this.firstNavigatable;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
} |