wunderbaum 0.3.4 → 0.4.0

package/src/wb_node.ts

@@ -4,7 +4,6 @@
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
-import "./wunderbaum.scss";
 import * as util from "./util";
 
 import { Wunderbaum } from "./wunderbaum";
@@ -33,6 +32,7 @@ import {
   SortCallback,
   NodeToDictCallback,
   WbNodeData,
+  TristateType,
 } from "./types";
 import {
   iconMap,
@@ -48,31 +48,18 @@ import {
 } from "./common";
 import { Deferred } from "./deferred";
 
-/** Top-level properties that can be passed with `data`. */
+/** WunderbaumNode properties that can be passed with source data.
+ * (Any other source properties will be stored as `node.data.PROP`.)
+ */
 const NODE_PROPS = new Set<string>([
-  // TODO: use NODE_ATTRS instead?
-  "classes",
-  "expanded",
-  "icon",
-  "key",
-  "lazy",
-  "refKey",
-  "selected",
-  "title",
-  "tooltip",
-  "type",
-]);
-
-const NODE_ATTRS = new Set<string>([
   "checkbox",
-  "expanded",
   "classes",
-  "folder",
+  "expanded",
   "icon",
   "iconTooltip",
   "key",
   "lazy",
-  "partsel",
+  "_partsel",
   "radiogroup",
   "refKey",
   "selected",
@@ -81,9 +68,16 @@ const NODE_ATTRS = new Set<string>([
   "tooltip",
   "type",
   "unselectable",
-  "unselectableIgnore",
-  "unselectableStatus",
+  // "unselectableIgnore",
+  // "unselectableStatus",
 ]);
+/** WunderbaumNode properties that will be returned by `node.toDict()`.)
+ */
+const NODE_DICT_PROPS = new Set<string>(NODE_PROPS);
+NODE_DICT_PROPS.delete("_partsel");
+NODE_DICT_PROPS.delete("unselectable");
+// NODE_DICT_PROPS.delete("unselectableIgnore");
+// NODE_DICT_PROPS.delete("unselectableStatus");
 
 /**
  * A single tree node.
@@ -112,6 +106,7 @@ export class WunderbaumNode {
   public readonly refKey: string | undefined = undefined;
   public children: WunderbaumNode[] | null = null;
   public checkbox?: boolean;
+  public radiogroup?: boolean;
   /** If true, (in grid mode) no cells are rendered, except for the node title.*/
   public colspan?: boolean;
   public icon?: boolean | string;
@@ -120,8 +115,11 @@ export class WunderbaumNode {
    * @see {@link isExpandable}, {@link isExpanded}, {@link setExpanded}. */
   public expanded: boolean = false;
   /** Selection state.
-   * @see {@link isSelected}, {@link setSelected}. */
+   * @see {@link isSelected}, {@link setSelected}, {@link toggleSelected}. */
   public selected: boolean = false;
+  public unselectable?: boolean;
+  // public unselectableStatus?: boolean;
+  // public unselectableIgnore?: boolean;
   public type?: string;
   public tooltip?: string;
   /** Additional classes added to `div.wb-row`.
@@ -150,22 +148,32 @@ export class WunderbaumNode {
   constructor(tree: Wunderbaum, parent: WunderbaumNode, data: any) {
     util.assert(!parent || parent.tree === tree);
     util.assert(!data.children);
+
     this.tree = tree;
     this.parent = parent;
+
     this.key = "" + (data.key ?? ++WunderbaumNode.sequence);
     this.title = "" + (data.title ?? "<" + this.key + ">");
-
     data.refKey != null ? (this.refKey = "" + data.refKey) : 0;
-    data.statusNodeType != null
-      ? (this.statusNodeType = "" + data.statusNodeType)
-      : 0;
     data.type != null ? (this.type = "" + data.type) : 0;
-    data.checkbox != null ? (this.checkbox = !!data.checkbox) : 0;
-    data.colspan != null ? (this.colspan = !!data.colspan) : 0;
     this.expanded = data.expanded === true;
     data.icon != null ? (this.icon = data.icon) : 0;
     this.lazy = data.lazy === true;
+    data.statusNodeType != null
+      ? (this.statusNodeType = "" + data.statusNodeType)
+      : 0;
+    data.colspan != null ? (this.colspan = !!data.colspan) : 0;
+
+    // Selection
+    data.checkbox != null ? (this.checkbox = !!data.checkbox) : 0;
+    data.radiogroup != null ? (this.radiogroup = !!data.radiogroup) : 0;
     this.selected = data.selected === true;
+    data.unselectable === true ? (this.unselectable = true) : 0;
+    // data.unselectableStatus != null
+    //   ? (this.unselectableStatus = !!data.unselectableStatus)
+    //   : 0;
+    // data.unselectableIgnore === true ? (this.unselectableIgnore = true) : 0;
+
     if (data.classes) {
       this.setClass(data.classes);
     }
@@ -311,13 +319,16 @@ export class WunderbaumNode {
         // insert nodeList after children[pos]
         this.children.splice(pos, 0, ...nodeList);
       }
-      // TODO:
-      // if (tree.options.selectMode === 3) {
-      //   this.fixSelection3FromEndNodes();
-      // }
       // this.triggerModifyChild("add", nodeList.length === 1 ? nodeList[0] : null);
-      tree.setModified(ChangeType.structure);
+      tree.update(ChangeType.structure);
     } finally {
+      // if (tree.options.selectMode === "hier") {
+      //   if (this.parent && this.parent.children) {
+      //     this.fixSelection3FromEndNodes();
+      //   } else {
+      //     // my happen when loading __root__;
+      //   }
+      // }
       tree.enableUpdate(true);
     }
     // if(isTopCall && loadLazy){
@@ -369,6 +380,18 @@ export class WunderbaumNode {
     return this.tree.applyCommand(cmd, this, options);
   }
 
+  /**
+   * Collapse all expanded sibling nodes if any.
+   * (Automatically called when `autoCollapse` is true.)
+   */
+  collapseSiblings(options?: SetExpandedOptions): any {
+    for (let node of this.parent.children!) {
+      if (node !== this && node.expanded) {
+        node.setExpanded(false, options);
+      }
+    }
+  }
+
   /**
    * Add/remove one or more classes to `<div class='wb-row'>`.
    *
@@ -410,7 +433,7 @@ export class WunderbaumNode {
     const minExpandLevel = this.tree.options.minExpandLevel;
     let { depth = 99, loadLazy, force } = options ?? {};
 
-    const expand_opts = {
+    const expandOpts = {
       scrollIntoView: false,
       force: force,
       loadLazy: loadLazy,
@@ -434,7 +457,7 @@ export class WunderbaumNode {
             // Node is collapsed and may be expanded (i.e. has children or is lazy)
             // Expanding may be async, so we store the promise.
             // Also the recursion is delayed until expansion finished.
-            const p = cn.setExpanded(true, expand_opts);
+            const p = cn.setExpanded(true, expandOpts);
             promises.push(p);
             p.then(async () => {
               await _iter(cn, level_1);
@@ -448,7 +471,7 @@ export class WunderbaumNode {
           // Collapsing is always synchronous, so no promises required
           if (!minExpandLevel || force || cn.getLevel() > minExpandLevel) {
             // Do not collapse until minExpandLevel
-            cn.setExpanded(false, expand_opts);
+            cn.setExpanded(false, expandOpts);
           }
           _iter(cn, level_1); // recursion, even if cn was already collapsed
         }
@@ -874,9 +897,11 @@ export class WunderbaumNode {
     return this.tree.root === this;
   }
 
-  /** Return true if this node is selected, i.e. the checkbox is set. */
-  isSelected(): boolean {
-    return !!this.selected;
+  /** Return true if this node is selected, i.e. the checkbox is set.
+   * `undefined` if partly selected (tri-state), false otherwise.
+   */
+  isSelected(): TristateType {
+    return this.selected ? true : this._partsel ? undefined : false;
   }
 
   /** Return true if this node is a temporarily generated system node like
@@ -968,7 +993,7 @@ export class WunderbaumNode {
       tree.logInfo("Redefine columns", source.columns);
       tree.columns = source.columns;
       delete source.columns;
-      tree.setModified(ChangeType.colStructure);
+      tree.update(ChangeType.colStructure);
     }
 
     this.addChildren(source.children);
@@ -980,6 +1005,9 @@ export class WunderbaumNode {
         tree.logDebug(`Add source.${key} to tree.data.${key}`);
       }
     }
+    if (tree.options.selectMode === "hier") {
+      this.fixSelection3FromEndNodes();
+    }
 
     this._callEvent("load");
   }
@@ -1131,9 +1159,9 @@ export class WunderbaumNode {
 
       if (wasExpanded) {
         this.expanded = true;
-        this.tree.setModified(ChangeType.structure);
+        this.tree.update(ChangeType.structure);
       } else {
-        this.setModified(); // Fix expander icon to 'loaded'
+        this.update(); // Fix expander icon to 'loaded'
       }
     } catch (e) {
       this.logError("Error during loadLazy()", e);
@@ -1306,7 +1334,7 @@ export class WunderbaumNode {
       // Fix node.tree for all source nodes
       // 	util.assert(false, "Cross-tree move is not yet implemented.");
       this.logWarn("Cross-tree moveTo is experimental!");
-      this.visit(function (n) {
+      this.visit((n) => {
         // TODO: fix selection state and activation, ...
         n.tree = targetNode.tree;
       }, true);
@@ -1315,7 +1343,7 @@ export class WunderbaumNode {
     // DragAndDrop to generate a dragend event on the source node
     setTimeout(() => {
       // Even indentation may have changed:
-      tree.setModified(ChangeType.any);
+      tree.update(ChangeType.any);
     }, 0);
     // TODO: fix selection state
     // TODO: fix active state
@@ -1364,7 +1392,7 @@ export class WunderbaumNode {
       n.removeMarkup();
       tree._unregisterNode(n);
     }, true);
-    tree.setModified(ChangeType.structure);
+    tree.update(ChangeType.structure);
   }
 
   /** Remove all descendants of this node. */
@@ -1397,7 +1425,7 @@ export class WunderbaumNode {
     if (!this.isRootNode()) {
       this.expanded = false;
     }
-    this.tree.setModified(ChangeType.structure);
+    this.tree.update(ChangeType.structure);
   }
 
   /** Remove all HTML markup from the DOM. */
@@ -1498,12 +1526,13 @@ export class WunderbaumNode {
 
   /**
    * Create a whole new `<div class="wb-row">` element.
-   * @see {@link WunderbaumNode.render}
+   * @see {@link WunderbaumNode._render}
    */
   protected _render_markup(opts: RenderOptions) {
     const tree = this.tree;
     const treeOptions = tree.options;
-    const checkbox = this.getOption("checkbox") !== false;
+    const checkbox = this.getOption("checkbox");
+    // const checkbox = this.getOption("checkbox") !== false;
     const columns = tree.columns;
     const level = this.getLevel();
     let elem: HTMLElement;
@@ -1542,6 +1571,9 @@ export class WunderbaumNode {
     if (checkbox) {
       checkboxSpan = document.createElement("i");
       checkboxSpan.classList.add("wb-checkbox");
+      if (checkbox === "radio" || this.parent.radiogroup) {
+        checkboxSpan.classList.add("wb-radio");
+      }
       nodeElem.appendChild(checkboxSpan);
       ofsTitlePx += ICON_WIDTH;
     }
@@ -1633,7 +1665,7 @@ export class WunderbaumNode {
   /**
    * Render `node.title`, `.icon` into an existing row.
    *
-   * @see {@link WunderbaumNode.render}
+   * @see {@link WunderbaumNode._render}
    */
   protected _render_data(opts: RenderOptions) {
     util.assert(this._rowElem);
@@ -1706,7 +1738,7 @@ export class WunderbaumNode {
 
   /**
    * Update row classes to reflect active, focuses, etc.
-   * @see {@link WunderbaumNode.render}
+   * @see {@link WunderbaumNode._render}
    */
   protected _render_status(opts: RenderOptions) {
     // this.log("_render_status", opts);
@@ -1728,6 +1760,7 @@ export class WunderbaumNode {
     this.expanded ? rowClasses.push("wb-expanded") : 0;
     this.lazy ? rowClasses.push("wb-lazy") : 0;
     this.selected ? rowClasses.push("wb-selected") : 0;
+    this._partsel ? rowClasses.push("wb-partsel") : 0;
     this === tree.activeNode ? rowClasses.push("wb-active") : 0;
     this === tree.focusNode ? rowClasses.push("wb-focus") : 0;
     this._errorInfo ? rowClasses.push("wb-error") : 0;
@@ -1768,11 +1801,26 @@ export class WunderbaumNode {
       }
     }
     if (checkboxSpan) {
-      if (this.selected) {
-        checkboxSpan.className = "wb-checkbox " + iconMap.checkChecked;
+      let cbclass = "wb-checkbox ";
+      if (this.parent.radiogroup) {
+        cbclass += "wb-radio ";
+        if (this.selected) {
+          cbclass += iconMap.radioChecked;
+          // } else if (this._partsel) {
+          //   cbclass += iconMap.radioUnknown;
+        } else {
+          cbclass += iconMap.radioUnchecked;
+        }
       } else {
-        checkboxSpan.className = "wb-checkbox " + iconMap.checkUnchecked;
+        if (this.selected) {
+          cbclass += iconMap.checkChecked;
+        } else if (this._partsel) {
+          cbclass += iconMap.checkUnknown;
+        } else {
+          cbclass += iconMap.checkUnchecked;
+        }
       }
+      checkboxSpan.className = cbclass;
     }
     // Fix active cell in cell-nav mode
     if (!opts.isNew) {
@@ -1801,7 +1849,7 @@ export class WunderbaumNode {
     }
   }
 
-  /**
+  /*
    * Create or update node's markup.
    *
    * `options.change` defaults to ChangeType.data, which updates the title,
@@ -1812,10 +1860,10 @@ export class WunderbaumNode {
    * `options.change` should be set to ChangeType.status instead for best
    * efficiency.
    *
-   * Calling `setModified` instead may be a better alternative.
-   * @see {@link WunderbaumNode.setModified}
+   * Calling `update()` is almost always a better alternative.
+   * @see {@link WunderbaumNode.update}
    */
-  render(options?: RenderOptions) {
+  _render(options?: RenderOptions) {
     // this.log("render", options);
     const opts = Object.assign({ change: ChangeType.data }, options);
     if (!this._rowElem) {
@@ -1846,7 +1894,7 @@ export class WunderbaumNode {
     this.expanded = false;
     this.lazy = true;
     this.children = null;
-    this.tree.setModified(ChangeType.structure);
+    this.tree.update(ChangeType.structure);
   }
 
   /** Convert node (or whole branch) into a plain object.
@@ -1863,7 +1911,7 @@ export class WunderbaumNode {
   toDict(recursive = false, callback?: NodeToDictCallback): WbNodeData {
     const dict: any = {};
 
-    NODE_ATTRS.forEach((propName: string) => {
+    NODE_DICT_PROPS.forEach((propName: string) => {
       const val = (<any>this)[propName];
 
       if (val instanceof Set) {
@@ -1996,7 +2044,7 @@ export class WunderbaumNode {
             return;
           }
           tree.activeNode = null;
-          prev?.setModified(ChangeType.status);
+          prev?.update(ChangeType.status);
         }
       } else if (prev === this || retrigger) {
         this._callEvent("deactivate", { nextNode: null, event: orgEvent });
@@ -2009,8 +2057,8 @@ export class WunderbaumNode {
         if (focusNode || focusTree) tree.focusNode = this;
         if (focusTree) tree.setFocus();
       }
-      prev?.setModified(ChangeType.status);
-      this.setModified(ChangeType.status);
+      prev?.update(ChangeType.status);
+      this.update(ChangeType.status);
     }
     if (
       options &&
@@ -2044,13 +2092,16 @@ export class WunderbaumNode {
       return; // Nothing to do
     }
     // this.log("setExpanded()");
+    if (flag && this.getOption("autoCollapse")) {
+      this.collapseSiblings(options);
+    }
     if (flag && this.lazy && this.children == null) {
       await this.loadLazy();
     }
     this.expanded = flag;
     const updateOpts = { immediate: immediate };
     // const updateOpts = { immediate: !!util.getOption(options, "immediate") };
-    this.tree.setModified(ChangeType.structure, updateOpts);
+    this.tree.update(ChangeType.structure, updateOpts);
     if (flag && scrollIntoView !== false) {
       const lastChild = this.getLastChild();
       if (lastChild) {
@@ -2068,14 +2119,14 @@ export class WunderbaumNode {
     util.assert(!!flag, "blur is not yet implemented");
     const prev = this.tree.focusNode;
     this.tree.focusNode = this;
-    prev?.setModified();
-    this.setModified();
+    prev?.update();
+    this.update();
   }
 
   /** Set a new icon path or class. */
   setIcon(icon: string) {
     this.icon = icon;
-    this.setModified();
+    this.update();
   }
 
   /** Change node's {@link key} and/or {@link refKey}.  */
@@ -2083,6 +2134,13 @@ export class WunderbaumNode {
     throw new Error("Not yet implemented");
   }
 
+  /**
+   * @deprecated since v0.3.6: use `update()` instead.
+   */
+  setModified(change: ChangeType = ChangeType.data): void {
+    this.logWarn("setModified() is deprecated: use update() instead.");
+    return this.update(change);
+  }
   /**
    * Trigger a repaint, typically after a status or data change.
    *
@@ -2090,23 +2148,244 @@ export class WunderbaumNode {
    * and column content. It can be reduced to 'ChangeType.status' if only
    * active/focus/selected state has changed.
    *
-   * This method will eventually call  {@link WunderbaumNode.render()} with
+   * This method will eventually call  {@link WunderbaumNode._render()} with
    * default options, but may be more consistent with the tree's
-   * {@link Wunderbaum.setModified()} API.
+   * {@link Wunderbaum.update()} API.
    */
-  setModified(change: ChangeType = ChangeType.data) {
+  update(change: ChangeType = ChangeType.data) {
     util.assert(change === ChangeType.status || change === ChangeType.data);
-    this.tree.setModified(change, this);
+    this.tree.update(change, this);
+  }
+
+  /**
+   * Return an array of selected nodes.
+   * @param stopOnParents only return the topmost selected node (useful with selectMode 'hier')
+   */
+  getSelectedNodes(stopOnParents: boolean = false): WunderbaumNode[] {
+    let nodeList: WunderbaumNode[] = [];
+    this.visit((node) => {
+      if (node.selected) {
+        nodeList.push(node);
+        if (stopOnParents === true) {
+          return "skip"; // stop processing this branch
+        }
+      }
+    });
+    return nodeList;
+  }
+
+  /** Toggle the check/uncheck state. */
+  toggleSelected(options?: SetSelectedOptions): TristateType {
+    let flag = this.isSelected();
+    if (flag === undefined) {
+      flag = this._anySelectable();
+    } else {
+      flag = !flag;
+    }
+    return this.setSelected(flag, options);
+  }
+
+  /** Return true if at least on selectable descendant end-node is unselected. @internal */
+  _anySelectable(): boolean {
+    let found = false;
+    this.visit((node) => {
+      if (
+        node.selected === false &&
+        !node.unselectable &&
+        !node.hasChildren() &&
+        !node.parent.radiogroup
+      ) {
+        found = true;
+        return false; // Stop iteration
+      }
+    });
+    return found;
+  }
+
+  /* Apply selection state to a single node. */
+  protected _changeSelectStatusProps(state: TristateType): boolean {
+    let changed = false;
+    switch (state) {
+      case false:
+        changed = this.selected || this._partsel;
+        this.selected = false;
+        this._partsel = false;
+        break;
+      case true:
+        changed = !this.selected || !this._partsel;
+        this.selected = true;
+        this._partsel = true;
+        break;
+      case undefined:
+        changed = this.selected || !this._partsel;
+        this.selected = false;
+        this._partsel = true;
+        break;
+      default:
+        util.error(`Invalid state: ${state}`);
+    }
+    if (changed) {
+      this.update();
+    }
+    return changed;
+  }
+  /**
+   * Fix selection status, after this node was (de)selected in `selectMode: 'hier'`.
+   * This includes (de)selecting all descendants.
+   */
+  fixSelection3AfterClick(opts?: SetSelectedOptions): void {
+    const force = !!opts?.force;
+    let flag = this.isSelected();
+
+    this.visit((node) => {
+      if (node.radiogroup) {
+        return "skip"; // Don't (de)select this branch
+      }
+      if (force || !node.getOption("unselectable")) {
+        node._changeSelectStatusProps(flag);
+      }
+    });
+    this.fixSelection3FromEndNodes();
+  }
+
+  /**
+   * Fix selection status for multi-hier mode.
+   * Only end-nodes are considered to update the descendants branch and parents.
+   * Should be called after this node has loaded new children or after
+   * children have been modified using the API.
+   */
+  fixSelection3FromEndNodes(opts?: SetSelectedOptions): void {
+    const force = !!opts?.force;
+    util.assert(
+      this.tree.options.selectMode === "hier",
+      "expected selectMode 'hier'"
+    );
+
+    // Visit all end nodes and adjust their parent's `selected` and `_partsel`
+    // attributes. Return selection state true, false, or undefined.
+    const _walk = (node: WunderbaumNode) => {
+      let state;
+      const children = node.children;
+
+      if (children && children.length) {
+        // check all children recursively
+        let allSelected = true;
+        let someSelected = false;
+
+        for (let i = 0, l = children.length; i < l; i++) {
+          const child = children[i];
+          // the selection state of a node is not relevant; we need the end-nodes
+          const s = _walk(child);
+          if (s !== false) {
+            someSelected = true;
+          }
+          if (s !== true) {
+            allSelected = false;
+          }
+        }
+        state = allSelected ? true : someSelected ? undefined : false;
+      } else {
+        // This is an end-node: simply report the status
+        state = !!node.selected;
+      }
+      // #939: Keep a `_partsel` flag that was explicitly set on a lazy node
+      if (
+        node._partsel &&
+        !node.selected &&
+        node.lazy &&
+        node.children == null
+      ) {
+        state = undefined;
+      }
+      if (force || !node.getOption("unselectable")) {
+        node._changeSelectStatusProps(state);
+      }
+      return state;
+    };
+    _walk(this);
+
+    // Update parent's state
+    this.visitParents((node) => {
+      let state;
+      const children = node.children!;
+      let allSelected = true;
+      let someSelected = false;
+
+      for (let i = 0, l = children.length; i < l; i++) {
+        const child = children[i];
+
+        state = !!child.selected;
+        // When fixing the parents, we trust the sibling status (i.e. we don't recurse)
+        if (state || child._partsel) {
+          someSelected = true;
+        }
+        if (!state) {
+          allSelected = false;
+        }
+      }
+      state = allSelected ? true : someSelected ? undefined : false;
+      node._changeSelectStatusProps(state);
+    });
   }
 
   /** Modify the check/uncheck state. */
-  setSelected(flag: boolean = true, options?: SetSelectedOptions) {
-    const prev = this.selected;
-    if (!!flag !== prev) {
+  setSelected(
+    flag: boolean = true,
+    options?: SetSelectedOptions
+  ): TristateType {
+    const tree = this.tree;
+    const sendEvents = !options?.noEvents; // Default: send events
+    const prev = this.isSelected();
+    const isRadio = this.parent && this.parent.radiogroup;
+    const selectMode = tree.options.selectMode;
+    const canSelect = options?.force || !this.getOption("unselectable");
+
+    flag = !!flag;
+    // this.logDebug(`setSelected(${flag})`, this);
+    if (!canSelect) {
+      return prev;
+    }
+    if (options?.propagateDown && selectMode === "multi") {
+      tree.runWithDeferredUpdate(() => {
+        this.visit((node) => {
+          node.setSelected(flag);
+        });
+      });
+      return prev;
+    }
+
+    if (
+      flag === prev ||
+      (sendEvents && this._callEvent("beforeSelect", { flag: flag }) === false)
+    ) {
+      return prev;
+    }
+
+    tree.runWithDeferredUpdate(() => {
+      if (isRadio) {
+        // Radiobutton Group
+        if (!flag && !options?.force) {
+          return prev; // don't uncheck radio buttons
+        }
+        for (let sibling of this.parent.children!) {
+          sibling.selected = sibling === this;
+        }
+      } else {
+        this.selected = flag;
+        if (selectMode === "hier") {
+          this.fixSelection3AfterClick();
+        } else if (selectMode === "single") {
+          tree.visit((n) => {
+            n.selected = false;
+          });
+        }
+      }
+    });
+
+    if (sendEvents) {
       this._callEvent("select", { flag: flag });
     }
-    this.selected = !!flag;
-    this.setModified();
+    return prev;
   }
 
   /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
@@ -2141,7 +2420,7 @@ export class WunderbaumNode {
 
       statusNode = this.addNode(data, "prependChild");
       statusNode.match = true;
-      tree.setModified(ChangeType.structure);
+      tree.update(ChangeType.structure);
 
       return statusNode;
     };
@@ -2157,7 +2436,7 @@ export class WunderbaumNode {
         this._isLoading = true;
         this._errorInfo = null;
         if (this.parent) {
-          this.setModified(ChangeType.status);
+          this.update(ChangeType.status);
         } else {
           // If this is the invisible root, add a visible top-level node
           _setStatusNode({
@@ -2170,7 +2449,7 @@ export class WunderbaumNode {
             tooltip: details,
           });
         }
-        // this.render();
+        // this.update();
         break;
       case "error":
         _setStatusNode({
@@ -2200,14 +2479,14 @@ export class WunderbaumNode {
       default:
         util.error("invalid node status " + status);
     }
-    tree.setModified(ChangeType.structure);
+    tree.update(ChangeType.structure);
     return statusNode;
   }
 
   /** Rename this node. */
   setTitle(title: string): void {
     this.title = title;
-    this.setModified();
+    this.update();
     // this.triggerModify("rename"); // TODO
   }
 
@@ -2238,7 +2517,7 @@ export class WunderbaumNode {
     deep: boolean = false
   ): void {
     this._sortChildren(cmp || nodeTitleSorter, deep);
-    this.tree.setModified(ChangeType.structure);
+    this.tree.update(ChangeType.structure);
     // this.triggerModify("sort"); // TODO
   }
 
@@ -2275,7 +2554,7 @@ export class WunderbaumNode {
   }
 
   /**
-   * Call `callback(node)` for all child nodes in hierarchical order (depth-first, pre-order).
+   * Call `callback(node)` for all descendant nodes in hierarchical order (depth-first, pre-order).
    *
    * Stop iteration, if fn() returns false. Skip current branch, if fn()
    * returns "skip".<br>