wunderbaum 0.0.2 → 0.0.3

package/dist/wunderbaum.umd.js

@@ -7,8 +7,9 @@
   /*!
    * Wunderbaum - util
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
+  /** @module util */
   /** Readable names for `MouseEvent.button` */
   const MOUSE_BUTTONS = {
       0: "",
@@ -619,7 +620,7 @@
   /*!
    * Wunderbaum - common
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
   const ROW_HEIGHT = 22;
@@ -707,6 +708,8 @@
       Home: "firstCol",
       "Control+End": "last",
       "Control+Home": "first",
+      "Meta+ArrowDown": "last",
+      "Meta+ArrowUp": "first",
       "*": "expandAll",
       Multiply: "expandAll",
       PageDown: "pageDown",
@@ -733,7 +736,7 @@
   /*!
    * Wunderbaum - wb_extension_base
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   class WunderbaumExtension {
       constructor(tree, id, defaults) {
@@ -1088,7 +1091,7 @@
   /*!
    * Wunderbaum - ext-filter
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   const START_MARKER = "\uFFF7";
   const END_MARKER = "\uFFF8";
@@ -1382,7 +1385,7 @@
   /*!
    * Wunderbaum - ext-keynav
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   class KeynavExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -1449,7 +1452,7 @@
                           eventName = "Add"; // expand
                       }
                       else if (navModeOption === NavigationModeOption.startRow) {
-                          tree.setCellMode(NavigationMode.cellNav);
+                          tree.setNavigationMode(NavigationMode.cellNav);
                           return;
                       }
                       break;
@@ -1488,6 +1491,8 @@
                   case "Home":
                   case "Control+End":
                   case "Control+Home":
+                  case "Meta+ArrowDown":
+                  case "Meta+ArrowUp":
                   case "PageDown":
                   case "PageUp":
                       node.navigate(eventName, { activate: activate, event: event });
@@ -1519,11 +1524,11 @@
                       break;
                   case "Escape":
                       if (tree.navMode === NavigationMode.cellEdit) {
-                          tree.setCellMode(NavigationMode.cellNav);
+                          tree.setNavigationMode(NavigationMode.cellNav);
                           handled = true;
                       }
                       else if (tree.navMode === NavigationMode.cellNav) {
-                          tree.setCellMode(NavigationMode.row);
+                          tree.setNavigationMode(NavigationMode.row);
                           handled = true;
                       }
                       break;
@@ -1533,7 +1538,7 @@
                           handled = true;
                       }
                       else if (navModeOption !== NavigationModeOption.cell) {
-                          tree.setCellMode(NavigationMode.row);
+                          tree.setNavigationMode(NavigationMode.row);
                           handled = true;
                       }
                       break;
@@ -1550,6 +1555,8 @@
                   case "Home":
                   case "Control+End":
                   case "Control+Home":
+                  case "Meta+ArrowDown":
+                  case "Meta+ArrowUp":
                   case "PageDown":
                   case "PageUp":
                       node.navigate(eventName, { activate: activate, event: event });
@@ -1568,7 +1575,7 @@
   /*!
    * Wunderbaum - ext-logger
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   class LoggerExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -1608,7 +1615,7 @@
   /*!
    * Wunderbaum - ext-dnd
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   const nodeMimeType = "application/x-wunderbaum-node";
   class DndExtension extends WunderbaumExtension {
@@ -1876,7 +1883,7 @@
   /*!
    * Wunderbaum - drag_observer
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2010,7 +2017,7 @@
   /*!
    * Wunderbaum - ext-grid
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   class GridExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -2047,7 +2054,7 @@
   /*!
    * Wunderbaum - deferred
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Deferred is a ES6 Promise, that exposes the resolve() and reject()` method.
@@ -2090,7 +2097,7 @@
   /*!
    * Wunderbaum - wunderbaum_node
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   /** Top-level properties that can be passed with `data`. */
   const NODE_PROPS = new Set([
@@ -2127,15 +2134,31 @@
       "unselectableIgnore",
       "unselectableStatus",
   ]);
+  /**
+   * A single tree node.
+   *
+   * **NOTE:** <br>
+   * Generally you should not modify properties directly, since this may break
+   * the internal bookkeeping.
+   */
   class WunderbaumNode {
       constructor(tree, parent, data) {
           var _a, _b;
+          /** Reference key. Unlike {@link key}, a `refKey` may occur multiple
+           * times within a tree (in this case we have 'clone nodes').
+           * @see Use {@link setKey} to modify.
+           */
           this.refKey = undefined;
           this.children = null;
           this.lazy = false;
+          /** Expansion state.
+           * @see {@link isExpandable}, {@link isExpanded}, {@link setExpanded}. */
           this.expanded = false;
+          /** Selection state.
+           * @see {@link isSelected}, {@link setSelected}. */
           this.selected = false;
-          /** Additional classes added to `div.wb-row`. */
+          /** Additional classes added to `div.wb-row`.
+           * @see {@link addClass}, {@link removeClass}, {@link toggleClass}. */
           this.extraClasses = new Set();
           /** Custom data that was passed to the constructor */
           this.data = {};
@@ -2301,7 +2324,8 @@
       }
       /**
        * Apply a modification (or navigation) operation.
-       * @see Wunderbaum#applyCommand
+       *
+       * @see {@link Wunderbaum.applyCommand}
        */
       applyCommand(cmd, opts) {
           return this.tree.applyCommand(cmd, this, opts);
@@ -2394,8 +2418,7 @@
       }
       /** Find a node relative to self.
        *
-       * @param where The keyCode that would normally trigger this move,
-       *		or a keyword ('down', 'first', 'last', 'left', 'parent', 'right', 'up').
+       * @see {@link Wunderbaum.findRelatedNode|tree.findRelatedNode()}
        */
       findRelatedNode(where, includeHidden = false) {
           return this.tree.findRelatedNode(this, where, includeHidden);
@@ -2696,7 +2719,7 @@
                       assert(!this.parent);
                       tree.columns = data.columns;
                       delete data.columns;
-                      tree.renderHeader();
+                      tree.updateColumns({ calculateCols: false });
                   }
                   this._loadSourceObject(data);
               }
@@ -2732,19 +2755,20 @@
                   this.setStatus(NodeStatusType.ok);
                   return;
               }
-              assert(isArray(source) || (source && source.url), "The lazyLoad event must return a node list, `{url: ...}` or false.");
+              assert(isArray(source) || (source && source.url), "The lazyLoad event must return a node list, `{url: ...}`, or false.");
               await this.load(source); // also calls setStatus('ok')
               if (wasExpanded) {
                   this.expanded = true;
                   this.tree.setModified(ChangeType.structure);
               }
               else {
-                  this.render(); // Fix expander icon to 'loaded'
+                  this.setModified(); // Fix expander icon to 'loaded'
               }
           }
           catch (e) {
+              this.logError("Error during loadLazy()", e);
+              this._callEvent("error", { error: e });
               this.setStatus(NodeStatusType.error, "" + e);
-              // } finally {
           }
           return;
       }
@@ -2912,31 +2936,33 @@
           // Allow to pass 'ArrowLeft' instead of 'left'
           where = KEY_TO_ACTION_DICT[where] || where;
           // Otherwise activate or focus the related node
-          let node = this.findRelatedNode(where);
-          if (node) {
-              // setFocus/setActive will scroll later (if autoScroll is specified)
-              try {
-                  node.makeVisible({ scrollIntoView: false });
-              }
-              catch (e) { } // #272
-              node.setFocus();
-              if ((options === null || options === void 0 ? void 0 : options.activate) === false) {
-                  return Promise.resolve(this);
-              }
-              return node.setActive(true, { event: options === null || options === void 0 ? void 0 : options.event });
+          const node = this.findRelatedNode(where);
+          if (!node) {
+              this.logWarn(`Could not find related node '${where}'.`);
+              return Promise.resolve(this);
           }
-          this.logWarn("Could not find related node '" + where + "'.");
-          return Promise.resolve(this);
+          // setFocus/setActive will scroll later (if autoScroll is specified)
+          try {
+              node.makeVisible({ scrollIntoView: false });
+          }
+          catch (e) { } // #272
+          node.setFocus();
+          if ((options === null || options === void 0 ? void 0 : options.activate) === false) {
+              return Promise.resolve(this);
+          }
+          return node.setActive(true, { event: options === null || options === void 0 ? void 0 : options.event });
       }
       /** Delete this node and all descendants. */
       remove() {
           const tree = this.tree;
           const pos = this.parent.children.indexOf(this);
+          this.triggerModify("remove");
           this.parent.children.splice(pos, 1);
           this.visit((n) => {
               n.removeMarkup();
               tree._unregisterNode(n);
           }, true);
+          tree.setModified(ChangeType.structure);
       }
       /** Remove all descendants of this node. */
       removeChildren() {
@@ -3061,6 +3087,7 @@
           const activeColIdx = tree.navMode === NavigationMode.row ? null : tree.activeColIdx;
           // let colElems: HTMLElement[];
           const isNew = !rowDiv;
+          assert(!isNew || (opts && opts.after), "opts.after expected, unless updating");
           assert(!this.isRootNode());
           //
           let rowClasses = ["wb-row"];
@@ -3112,7 +3139,7 @@
                   nodeElem.appendChild(elem);
                   ofsTitlePx += ICON_WIDTH;
               }
-              if (treeOptions.minExpandLevel && level > treeOptions.minExpandLevel) {
+              if (!treeOptions.minExpandLevel || level > treeOptions.minExpandLevel) {
                   expanderSpan = document.createElement("i");
                   nodeElem.appendChild(expanderSpan);
                   ofsTitlePx += ICON_WIDTH;
@@ -3241,9 +3268,19 @@
               });
           }
           // Attach to DOM as late as possible
-          // if (!this._rowElem) {
-          tree.nodeListElement.appendChild(rowDiv);
-          // }
+          if (isNew) {
+              const after = opts ? opts.after : "last";
+              switch (after) {
+                  case "first":
+                      tree.nodeListElement.prepend(rowDiv);
+                      break;
+                  case "last":
+                      tree.nodeListElement.appendChild(rowDiv);
+                      break;
+                  default:
+                      opts.after.after(rowDiv);
+              }
+          }
       }
       /**
        * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
@@ -3317,14 +3354,15 @@
        *
        * Evaluation sequence:
        *
-       * If `tree.options.<name>` is a callback that returns something, use that.
-       * Else if `node.<name>` is defined, use that.
-       * Else if `tree.types[<node.type>]` is a value, use that.
-       * Else if `tree.options.<name>` is a value, use that.
-       * Else use `defaultValue`.
+       * - If `tree.options.<name>` is a callback that returns something, use that.
+       * - Else if `node.<name>` is defined, use that.
+       * - Else if `tree.types[<node.type>]` is a value, use that.
+       * - Else if `tree.options.<name>` is a value, use that.
+       * - Else use `defaultValue`.
        *
        * @param name name of the option property (on node and tree)
        * @param defaultValue return this if nothing else matched
+       * {@link Wunderbaum.getOption|Wunderbaum.getOption()}
        */
       getOption(name, defaultValue) {
           let tree = this.tree;
@@ -3359,15 +3397,21 @@
           // Use value from value options dict, fallback do default
           return value !== null && value !== void 0 ? value : defaultValue;
       }
+      /** Make sure that this node is visible in the viewport.
+       * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo()}
+       */
       async scrollIntoView(options) {
           return this.tree.scrollTo(this);
       }
+      /**
+       * Activate this node, deactivate previous, send events, activate column and scroll int viewport.
+       */
       async setActive(flag = true, options) {
           const tree = this.tree;
           const prev = tree.activeNode;
           const retrigger = options === null || options === void 0 ? void 0 : options.retrigger;
-          const noEvent = options === null || options === void 0 ? void 0 : options.noEvent;
-          if (!noEvent) {
+          const noEvents = options === null || options === void 0 ? void 0 : options.noEvents;
+          if (!noEvents) {
               let orgEvent = options === null || options === void 0 ? void 0 : options.event;
               if (flag) {
                   if (prev !== this || retrigger) {
@@ -3405,19 +3449,18 @@
           // requestAnimationFrame(() => {
           //   this.scrollIntoView();
           // })
-          this.scrollIntoView();
-      }
-      setModified(change = ChangeType.status) {
-          assert(change === ChangeType.status);
-          this.tree.setModified(ChangeType.row, this);
+          return this.scrollIntoView();
       }
+      /**
+       * Expand or collapse this node.
+       */
       async setExpanded(flag = true, options) {
           // alert("" + this.getLevel() + ", "+ this.getOption("minExpandLevel");
           if (!flag &&
               this.isExpanded() &&
               this.getLevel() < this.getOption("minExpandLevel") &&
               !getOption(options, "force")) {
-              this.logDebug("Ignored collapse request.");
+              this.logDebug("Ignored collapse request below expandLevel.");
               return;
           }
           if (flag && this.lazy && this.children == null) {
@@ -3426,16 +3469,31 @@
           this.expanded = flag;
           this.tree.setModified(ChangeType.structure);
       }
-      setIcon() {
-          throw new Error("Not yet implemented");
-          // this.setDirty(ChangeType.status);
-      }
+      /**
+       * Set keyboard focus here.
+       * @see {@link setActive}
+       */
       setFocus(flag = true, options) {
           const prev = this.tree.focusNode;
           this.tree.focusNode = this;
           prev === null || prev === void 0 ? void 0 : prev.setModified();
           this.setModified();
       }
+      /** Set a new icon path or class. */
+      setIcon() {
+          throw new Error("Not yet implemented");
+          // this.setModified();
+      }
+      /** Change node's {@link key} and/or {@link refKey}.  */
+      setKey(key, refKey) {
+          throw new Error("Not yet implemented");
+      }
+      /** Schedule a render, typically called to update after a status or data change. */
+      setModified(change = ChangeType.status) {
+          assert(change === ChangeType.status);
+          this.tree.setModified(ChangeType.row, this);
+      }
+      /** Modify the check/uncheck state. */
       setSelected(flag = true, options) {
           const prev = this.selected;
           if (!!flag !== prev) {
@@ -3444,10 +3502,9 @@
           this.selected = !!flag;
           this.setModified();
       }
-      /** Show node status (ok, loading, error, noData) using styles and a dummy child node.
-       */
+      /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
       setStatus(status, message, details) {
-          let tree = this.tree;
+          const tree = this.tree;
           let statusNode = null;
           const _clearStatusNode = () => {
               // Remove dedicated dummy node, if any
@@ -3521,6 +3578,7 @@
           tree.setModified(ChangeType.structure);
           return statusNode;
       }
+      /** Rename this node. */
       setTitle(title) {
           this.title = title;
           this.setModified();
@@ -3544,10 +3602,16 @@
        * @param {object} [extra]
        */
       triggerModify(operation, extra) {
+          if (!this.parent) {
+              return;
+          }
           this.parent.triggerModifyChild(operation, this, extra);
       }
-      /** Call fn(node) for all child nodes in hierarchical order (depth-first).<br>
-       * Stop iteration, if fn() returns false. Skip current branch, if fn() returns "skip".<br>
+      /**
+       * Call fn(node) for all child nodes in hierarchical order (depth-first).
+       *
+       * Stop iteration, if fn() returns false. Skip current branch, if fn()
+       * returns "skip".<br>
        * Return false if iteration was stopped.
        *
        * @param {function} callback the callback function.
@@ -3591,7 +3655,8 @@
           }
           return true;
       }
-      /** Call fn(node) for all sibling nodes.<br>
+      /**
+       * Call fn(node) for all sibling nodes.<br>
        * Stop iteration, if fn() returns false.<br>
        * Return false if iteration was stopped.
        *
@@ -3622,7 +3687,7 @@
   /*!
    * Wunderbaum - ext-edit
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.2, Tue, 12 Apr 2022 18:36:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   // const START_MARKER = "\uFFF7";
   class EditExtension extends WunderbaumExtension {
@@ -3740,7 +3805,7 @@
                       break;
                   case "F2":
                       if (trigger.indexOf("F2") >= 0) {
-                          // tree.setCellMode(NavigationMode.cellEdit);
+                          // tree.setNavigationMode(NavigationMode.cellEdit);
                           this.startEditTitle();
                           return false;
                       }
@@ -3781,6 +3846,7 @@
           if (validity) {
               // Permanently apply  input validations (CSS and tooltip)
               inputElem.addEventListener("keydown", (e) => {
+                  inputElem.setCustomValidity("");
                   if (!inputElem.reportValidity()) ;
               });
           }
@@ -3821,6 +3887,11 @@
           }
           node.logDebug(`stopEditTitle(${apply})`, opts, focusElem, newValue);
           if (apply && newValue !== null && newValue !== node.title) {
+              const errMsg = focusElem.validationMessage;
+              if (errMsg) {
+                  // input element's native validation failed
+                  throw new Error(`Input validation failed for "${newValue}": ${errMsg}.`);
+              }
               const colElem = node.getColElem(0);
               this._applyChange("edit.apply", node, colElem, {
                   oldValue: node.title,
@@ -3907,8 +3978,8 @@
    * Copyright (c) 2021-2022, Martin Wendt (https://wwWendt.de).
    * Released under the MIT license.
    *
-   * @version v0.0.2
-   * @date Tue, 12 Apr 2022 18:36:21 GMT
+   * @version v0.0.3
+   * @date Mon, 18 Apr 2022 11:52:44 GMT
    */
   // const class_prefix = "wb-";
   // const node_props: string[] = ["title", "key", "refKey"];
@@ -3924,37 +3995,43 @@
           this.extensions = {};
           this.keyMap = new Map();
           this.refKeyMap = new Map();
-          this.viewNodes = new Set();
-          // protected rows: WunderbaumNode[] = [];
-          // protected _rowCount = 0;
+          // protected viewNodes = new Set<WunderbaumNode>();
+          this.treeRowCount = 0;
+          this._disableUpdateCount = 0;
           // protected eventHandlers : Array<function> = [];
+          /** Currently active node if any. */
           this.activeNode = null;
+          /** Current node hat has keyboard focus if any. */
           this.focusNode = null;
-          this._disableUpdate = 0;
-          this._disableUpdateCount = 0;
           /** Shared properties, referenced by `node.type`. */
           this.types = {};
           /** List of column definitions. */
           this.columns = [];
           this._columnsById = {};
           // Modification Status
-          this.changedSince = 0;
-          this.changes = new Set();
-          this.changedNodes = new Set();
-          this.changeRedrawPending = false;
+          // protected changedSince = 0;
+          // protected changes = new Set<ChangeType>();
+          // protected changedNodes = new Set<WunderbaumNode>();
+          this.changeRedrawRequestPending = false;
+          /** Expose some useful methods of the util.ts module as `tree._util`. */
+          this._util = util;
           // --- FILTER ---
           this.filterMode = null;
           // --- KEYNAV ---
+          /** @internal Use `setColumn()`/`getActiveColElem()`*/
           this.activeColIdx = 0;
+          /** @internal */
           this.navMode = NavigationMode.row;
+          /** @internal */
           this.lastQuicksearchTime = 0;
+          /** @internal */
           this.lastQuicksearchTerm = "";
           // --- EDIT ---
           this.lastClickTime = 0;
-          // TODO: make accessible in compiled JS like this?
-          this._util = util;
-          /** Alias for `logDebug` */
-          this.log = this.logDebug; // Alias
+          /** Alias for {@link Wunderbaum.logDebug}.
+           * @alias Wunderbaum.logDebug
+           */
+          this.log = this.logDebug;
           let opts = (this.options = extend({
               id: null,
               source: null,
@@ -4188,37 +4265,18 @@
                       forceClose: true,
                   });
               }
-              // if (flag && !this.activeNode ) {
-              //   setTimeout(() => {
-              //     if (!this.activeNode) {
-              //       const firstNode = this.getFirstChild();
-              //       if (firstNode && !firstNode?.isStatusNode()) {
-              //         firstNode.logInfo("Activate on focus", e);
-              //         firstNode.setActive(true, { event: e });
-              //       }
-              //     }
-              //   }, 10);
-              // }
           });
       }
-      /** */
-      // _renderHeader(){
-      //   const coldivs = "<span class='wb-col'></span>".repeat(this.columns.length);
-      //   this.element.innerHTML = `
-      //     <div class='wb-header'>
-      //       <div class='wb-row'>
-      //         ${coldivs}
-      //       </div>
-      //     </div>`;
-      // }
-      /** Return a Wunderbaum instance, from element, index, or event.
+      /**
+       * Return a Wunderbaum instance, from element, id, index, or event.
        *
-       * @example
-       * getTree();  // Get first Wunderbaum instance on page
-       * getTree(1);  // Get second Wunderbaum instance on page
-       * getTree(event);  // Get tree for this mouse- or keyboard event
-       * getTree("foo");  // Get tree for this `tree.options.id`
+       * ```js
+       * getTree();         // Get first Wunderbaum instance on page
+       * getTree(1);        // Get second Wunderbaum instance on page
+       * getTree(event);    // Get tree for this mouse- or keyboard event
+       * getTree("foo");    // Get tree for this `tree.options.id`
        * getTree("#tree");  // Get tree for this matching element
+       * ```
        */
       static getTree(el) {
           if (el instanceof Wunderbaum) {
@@ -4259,9 +4317,8 @@
           }
           return null;
       }
-      /** Return a WunderbaumNode instance from element, event.
-       *
-       * @param  el
+      /**
+       * Return a WunderbaumNode instance from element or event.
        */
       static getNode(el) {
           if (!el) {
@@ -4283,7 +4340,7 @@
           }
           return null;
       }
-      /** */
+      /** @internal */
       _registerExtension(extension) {
           this.extensionList.push(extension);
           this.extensions[extension.id] = extension;
@@ -4325,7 +4382,7 @@
           node.tree = null;
           node.parent = null;
           // node.title = "DISPOSED: " + node.title
-          this.viewNodes.delete(node);
+          // this.viewNodes.delete(node);
           node.removeMarkup();
       }
       /** Call all hook methods of all registered extensions.*/
@@ -4343,7 +4400,9 @@
           }
           return res;
       }
-      /** Call tree method or extension method if defined.
+      /**
+       * Call tree method or extension method if defined.
+       *
        * Example:
        * ```js
        * tree._callMethod("edit.startEdit", "arg1", "arg2")
@@ -4360,7 +4419,9 @@
               this.logError(`Calling undefined method '${name}()'.`);
           }
       }
-      /** Call event handler if defined in tree.options.
+      /**
+       * Call event handler if defined in tree or tree.EXTENSION options.
+       *
        * Example:
        * ```js
        * tree._callEvent("edit.beforeEdit", {foo: 42})
@@ -4376,27 +4437,33 @@
               //   this.logError(`Triggering undefined event '${name}'.`)
           }
       }
-      /** Return the topmost visible node in the viewport */
-      _firstNodeInView(complete = true) {
-          let topIdx, node;
-          if (complete) {
-              topIdx = Math.ceil(this.scrollContainer.scrollTop / ROW_HEIGHT);
-          }
-          else {
-              topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
-          }
+      /** Return the node for  given row index. */
+      _getNodeByRowIdx(idx) {
           // TODO: start searching from active node (reverse)
+          let node = null;
           this.visitRows((n) => {
-              if (n._rowIdx === topIdx) {
+              if (n._rowIdx === idx) {
                   node = n;
                   return false;
               }
           });
           return node;
       }
-      /** Return the lowest visible node in the viewport */
+      /** Return the topmost visible node in the viewport. */
+      _firstNodeInView(complete = true) {
+          let topIdx;
+          const gracePy = 1; // ignore subpixel scrolling
+          if (complete) {
+              topIdx = Math.ceil((this.scrollContainer.scrollTop - gracePy) / ROW_HEIGHT);
+          }
+          else {
+              topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
+          }
+          return this._getNodeByRowIdx(topIdx);
+      }
+      /** Return the lowest visible node in the viewport. */
       _lastNodeInView(complete = true) {
-          let bottomIdx, node;
+          let bottomIdx;
           if (complete) {
               bottomIdx =
                   Math.floor((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
@@ -4407,16 +4474,10 @@
                   Math.ceil((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
                       ROW_HEIGHT) - 1;
           }
-          // TODO: start searching from active node
-          this.visitRows((n) => {
-              if (n._rowIdx === bottomIdx) {
-                  node = n;
-                  return false;
-              }
-          });
-          return node;
+          bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
+          return this._getNodeByRowIdx(bottomIdx);
       }
-      /** Return preceeding visible node in the viewport */
+      /** Return preceeding visible node in the viewport. */
       _getPrevNodeInView(node, ofs = 1) {
           this.visitRows((n) => {
               node = n;
@@ -4426,7 +4487,7 @@
           }, { reverse: true, start: node || this.getActiveNode() });
           return node;
       }
-      /** Return following visible node in the viewport */
+      /** Return following visible node in the viewport. */
       _getNextNodeInView(node, ofs = 1) {
           this.visitRows((n) => {
               node = n;
@@ -4436,10 +4497,15 @@
           }, { reverse: false, start: node || this.getActiveNode() });
           return node;
       }
+      /**
+       * Append (or insert) a list of toplevel nodes.
+       *
+       * @see {@link WunderbaumNode.addChildren}
+       */
       addChildren(nodeData, options) {
           return this.root.addChildren(nodeData, options);
       }
-      /*
+      /**
        * Apply a modification or navigation operation.
        *
        * Most of these commands simply map to a node or tree method.
@@ -4564,16 +4630,17 @@
           this.root.children = null;
           this.keyMap.clear();
           this.refKeyMap.clear();
-          this.viewNodes.clear();
+          // this.viewNodes.clear();
+          this.treeRowCount = 0;
           this.activeNode = null;
           this.focusNode = null;
           // this.types = {};
           // this. columns =[];
           // this._columnsById = {};
           // Modification Status
-          this.changedSince = 0;
-          this.changes.clear();
-          this.changedNodes.clear();
+          // this.changedSince = 0;
+          // this.changes.clear();
+          // this.changedNodes.clear();
           // // --- FILTER ---
           // public filterMode: FilterModeType = null;
           // // --- KEYNAV ---
@@ -4601,10 +4668,11 @@
       /**
        * Return `tree.option.NAME` (also resolving if this is a callback).
        *
-       * See also [[WunderbaumNode.getOption()]] to consider `node.NAME` setting and
-       * `tree.types[node.type].NAME`.
+       * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
+       * to consider `node.NAME` setting and `tree.types[node.type].NAME`.
        *
-       * @param name option name (use dot notation to access extension option, e.g. `filter.mode`)
+       * @param name option name (use dot notation to access extension option, e.g.
+       * `filter.mode`)
        */
       getOption(name, defaultValue) {
           let ext;
@@ -4648,18 +4716,14 @@
       }
       /** Run code, but defer `updateViewport()` until done. */
       runWithoutUpdate(func, hint = null) {
-          // const prev = this._disableUpdate;
-          // const start = Date.now();
-          // this._disableUpdate = Date.now();
           try {
               this.enableUpdate(false);
-              return func();
+              const res = func();
+              assert(!(res instanceof Promise));
+              return res;
           }
           finally {
               this.enableUpdate(true);
-              // if (!prev && this._disableUpdate === start) {
-              //   this._disableUpdate = 0;
-              // }
           }
       }
       /** Recursively expand all expandable nodes (triggers lazy load id needed). */
@@ -4677,11 +4741,12 @@
       /** Return the number of nodes in the data model.*/
       count(visible = false) {
           if (visible) {
-              return this.viewNodes.size;
+              return this.treeRowCount;
+              // return this.viewNodes.size;
           }
           return this.keyMap.size;
       }
-      /* Internal sanity check. */
+      /** @internal sanity check. */
       _check() {
           let i = 0;
           this.visit((n) => {
@@ -4692,25 +4757,30 @@
           }
           // util.assert(this.keyMap.size === i);
       }
-      /**Find all nodes that matches condition.
+      /**
+       * Find all nodes that matches condition.
        *
        * @param match title string to search for, or a
        *     callback function that returns `true` if a node is matched.
-       * @see [[WunderbaumNode.findAll]]
+       *
+       * @see {@link WunderbaumNode.findAll}
        */
       findAll(match) {
           return this.root.findAll(match);
       }
-      /**Find first node that matches condition.
+      /**
+       * Find first node that matches condition.
        *
        * @param match title string to search for, or a
        *     callback function that returns `true` if a node is matched.
-       * @see [[WunderbaumNode.findFirst]]
+       * @see {@link WunderbaumNode.findFirst}
+       *
        */
       findFirst(match) {
           return this.root.findFirst(match);
       }
-      /** Find the next visible node that starts with `match`, starting at `startNode`
+      /**
+       * Find the next visible node that starts with `match`, starting at `startNode`
        * and wrap-around at the end.
        */
       findNextNode(match, startNode) {
@@ -4740,7 +4810,8 @@
           }
           return res;
       }
-      /** Find a node relative to another node.
+      /**
+       * Find a node relative to another node.
        *
        * @param node
        * @param where 'down', 'first', 'last', 'left', 'parent', 'right', or 'up'.
@@ -4750,7 +4821,7 @@
        */
       findRelatedNode(node, where, includeHidden = false) {
           let res = null;
-          let pageSize = Math.floor(this.scrollContainer.clientHeight / ROW_HEIGHT);
+          const pageSize = Math.floor(this.scrollContainer.clientHeight / ROW_HEIGHT);
           switch (where) {
               case "parent":
                   if (node.parent && node.parent.parent) {
@@ -4806,9 +4877,9 @@
                   res = this._getNextNodeInView(node);
                   break;
               case "pageDown":
-                  let bottomNode = this._lastNodeInView();
-                  // this.logDebug(where, this.focusNode, bottomNode);
-                  if (this.focusNode !== bottomNode) {
+                  const bottomNode = this._lastNodeInView();
+                  // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
+                  if (node._rowIdx < bottomNode._rowIdx) {
                       res = bottomNode;
                   }
                   else {
@@ -4816,12 +4887,13 @@
                   }
                   break;
               case "pageUp":
-                  if (this.focusNode && this.focusNode._rowIdx === 0) {
-                      res = this.focusNode;
+                  if (node._rowIdx === 0) {
+                      res = node;
                   }
                   else {
-                      let topNode = this._firstNodeInView();
-                      if (this.focusNode !== topNode) {
+                      const topNode = this._firstNodeInView();
+                      // this.logDebug(`${where}(${node}) -> ${topNode}`);
+                      if (node._rowIdx > topNode._rowIdx) {
                           res = topNode;
                       }
                       else {
@@ -4835,7 +4907,7 @@
           return res;
       }
       /**
-       * Return the active cell of the currently active node or null.
+       * Return the active cell (`span.wb-col`) of the currently active node or null.
        */
       getActiveColElem() {
           if (this.activeNode && this.activeColIdx >= 0) {
@@ -4901,7 +4973,7 @@
           }
           else {
               // Somewhere near the title
-              if (event.type !== "mousemove") {
+              if (event.type !== "mousemove" && !(event instanceof KeyboardEvent)) {
                   console.warn("getEventInfo(): not found", event, res);
               }
               return res;
@@ -4933,7 +5005,8 @@
       isEditing() {
           return this._callMethod("edit.isEditingTitle");
       }
-      /** Return true if any node is currently beeing loaded, i.e. a Ajax request is pending.
+      /**
+       * Return true if any node is currently beeing loaded, i.e. a Ajax request is pending.
        */
       isLoading() {
           var res = false;
@@ -4960,7 +5033,7 @@
               console.error.apply(console, args);
           }
       }
-      /* Log to console if opts.debugLevel >= 3 */
+      /** Log to console if opts.debugLevel >= 3 */
       logInfo(...args) {
           if (this.options.debugLevel >= 3) {
               Array.prototype.unshift.call(args, this.toString());
@@ -4987,75 +5060,6 @@
               console.warn.apply(console, args);
           }
       }
-      /** */
-      render(opts) {
-          const label = this.logTime("render");
-          let idx = 0;
-          let top = 0;
-          const height = ROW_HEIGHT;
-          let modified = false;
-          let start = opts === null || opts === void 0 ? void 0 : opts.startIdx;
-          let end = opts === null || opts === void 0 ? void 0 : opts.endIdx;
-          const obsoleteViewNodes = this.viewNodes;
-          const newNodesOnly = !!getOption(opts, "newNodesOnly");
-          this.viewNodes = new Set();
-          let viewNodes = this.viewNodes;
-          // this.debug("render", opts);
-          assert(start != null && end != null);
-          // Make sure start is always even, so the alternating row colors don't
-          // change when scrolling:
-          if (start % 2) {
-              start--;
-          }
-          this.visitRows(function (node) {
-              const prevIdx = node._rowIdx;
-              viewNodes.add(node);
-              obsoleteViewNodes.delete(node);
-              if (prevIdx !== idx) {
-                  node._rowIdx = idx;
-                  modified = true;
-              }
-              if (idx < start || idx > end) {
-                  node._callEvent("discard");
-                  node.removeMarkup();
-              }
-              else if (!node._rowElem || !newNodesOnly) {
-                  node.render({ top: top });
-                  // }else{
-                  //   node.log("ignrored render")
-              }
-              idx++;
-              top += height;
-          });
-          for (const prevNode of obsoleteViewNodes) {
-              prevNode._callEvent("discard");
-              prevNode.removeMarkup();
-          }
-          // Resize tree container
-          this.nodeListElement.style.height = "" + top + "px";
-          // this.log("render()", this.nodeListElement.style.height);
-          this.logTimeEnd(label);
-          return modified;
-      }
-      /**Recalc and apply header columns from `this.columns`. */
-      renderHeader() {
-          if (!this.headerElement) {
-              return;
-          }
-          const headerRow = this.headerElement.querySelector(".wb-row");
-          assert(headerRow);
-          headerRow.innerHTML = "<span class='wb-col'></span>".repeat(this.columns.length);
-          for (let i = 0; i < this.columns.length; i++) {
-              const col = this.columns[i];
-              const colElem = headerRow.children[i];
-              colElem.style.left = col._ofsPx + "px";
-              colElem.style.width = col._widthPx + "px";
-              // colElem.textContent = col.title || col.id;
-              const title = escapeHtml(col.title || col.id);
-              colElem.innerHTML = `<span class="wb-col-title">${title}</span> <span class="wb-col-resizer"></span>`;
-              // colElem.innerHTML = `${title} <span class="wb-col-resizer"></span>`;
-          }
-      }
       /**
        * Make sure that this node is scrolled into the viewport.
        *
@@ -5089,24 +5093,12 @@
               this.setModified(ChangeType.vscroll);
           }
       }
-      /** */
-      setCellMode(mode) {
-          // util.assert(this.cellNavMode);
-          // util.assert(0 <= colIdx && colIdx < this.columns.length);
-          if (mode === this.navMode) {
-              return;
-          }
-          const prevMode = this.navMode;
-          const cellMode = mode !== NavigationMode.row;
-          this.navMode = mode;
-          if (cellMode && prevMode === NavigationMode.row) {
-              this.setColumn(0);
-          }
-          this.element.classList.toggle("wb-cell-mode", cellMode);
-          this.element.classList.toggle("wb-cell-edit-mode", mode === NavigationMode.cellEdit);
-          this.setModified(ChangeType.row, this.activeNode);
-      }
-      /** */
+      /**
+       * Set column #colIdx to 'active'.
+       *
+       * This higlights the column header and -cells by adding the `wb-active` class.
+       * Available in cell-nav and cell-edit mode, not in row-mode.
+       */
       setColumn(colIdx) {
           assert(this.navMode !== NavigationMode.row);
           assert(0 <= colIdx && colIdx < this.columns.length);
@@ -5131,7 +5123,7 @@
               }
           }
       }
-      /** */
+      /** Set or remove keybaord focus to the tree container. */
       setFocus(flag = true) {
           if (flag) {
               this.element.focus();
@@ -5140,20 +5132,24 @@
               this.element.blur();
           }
       }
-      /* */
       setModified(change, node, options) {
+          if (this._disableUpdateCount) {
+              // Assuming that we redraw all when enableUpdate() is re-enabled.
+              // this.log(
+              //   `IGNORED setModified(${change}) node=${node} (disable level ${this._disableUpdateCount})`
+              // );
+              return;
+          }
+          // this.log(`setModified(${change}) node=${node}`);
           if (!(node instanceof WunderbaumNode)) {
               options = node;
           }
-          if (this._disableUpdate) {
-              return;
-          }
           const immediate = !!getOption(options, "immediate");
           switch (change) {
               case ChangeType.any:
               case ChangeType.structure:
               case ChangeType.header:
-                  this.changeRedrawPending = true;
+                  this.changeRedrawRequestPending = true;
                   this.updateViewport(immediate);
                   break;
               case ChangeType.vscroll:
@@ -5170,84 +5166,111 @@
               default:
                   error(`Invalid change type ${change}`);
           }
-          // if (!this.changedSince) {
-          //   this.changedSince = Date.now();
-          // }
-          // this.changes.add(change);
-          // if (change === ChangeType.structure) {
-          //   this.changedNodes.clear();
-          // } else if (node && !this.changes.has(ChangeType.structure)) {
-          //   if (this.changedNodes.size < MAX_CHANGED_NODES) {
-          //     this.changedNodes.add(node);
-          //   } else {
-          //     this.changes.add(ChangeType.structure);
-          //     this.changedNodes.clear();
-          //   }
-          // }
-          // this.log("setModified(" + change + ")", node);
       }
+      /** Set the tree's navigation mode. */
+      setNavigationMode(mode) {
+          // util.assert(this.cellNavMode);
+          // util.assert(0 <= colIdx && colIdx < this.columns.length);
+          if (mode === this.navMode) {
+              return;
+          }
+          const prevMode = this.navMode;
+          const cellMode = mode !== NavigationMode.row;
+          this.navMode = mode;
+          if (cellMode && prevMode === NavigationMode.row) {
+              this.setColumn(0);
+          }
+          this.element.classList.toggle("wb-cell-mode", cellMode);
+          this.element.classList.toggle("wb-cell-edit-mode", mode === NavigationMode.cellEdit);
+          this.setModified(ChangeType.row, this.activeNode);
+      }
+      /** Display tree status (ok, loading, error, noData) using styles and a dummy root node. */
       setStatus(status, message, details) {
           return this.root.setStatus(status, message, details);
       }
       /** Update column headers and width. */
       updateColumns(opts) {
-          let modified = false;
-          let minWidth = 4;
-          let vpWidth = this.element.clientWidth;
+          opts = Object.assign({ calculateCols: true, updateRows: true }, opts);
+          const minWidth = 4;
+          const vpWidth = this.element.clientWidth;
           let totalWeight = 0;
           let fixedWidth = 0;
-          // Gather width requests
-          this._columnsById = {};
-          for (let col of this.columns) {
-              this._columnsById[col.id] = col;
-              let cw = col.width;
-              if (!cw || cw === "*") {
-                  col._weight = 1.0;
-                  totalWeight += 1.0;
-              }
-              else if (typeof cw === "number") {
-                  col._weight = cw;
-                  totalWeight += cw;
-              }
-              else if (typeof cw === "string" && cw.endsWith("px")) {
-                  col._weight = 0;
-                  let px = parseFloat(cw.slice(0, -2));
-                  if (col._widthPx != px) {
-                      modified = true;
-                      col._widthPx = px;
+          let modified = false;
+          if (opts.calculateCols) {
+              // Gather width requests
+              this._columnsById = {};
+              for (let col of this.columns) {
+                  this._columnsById[col.id] = col;
+                  let cw = col.width;
+                  if (!cw || cw === "*") {
+                      col._weight = 1.0;
+                      totalWeight += 1.0;
+                  }
+                  else if (typeof cw === "number") {
+                      col._weight = cw;
+                      totalWeight += cw;
+                  }
+                  else if (typeof cw === "string" && cw.endsWith("px")) {
+                      col._weight = 0;
+                      let px = parseFloat(cw.slice(0, -2));
+                      if (col._widthPx != px) {
+                          modified = true;
+                          col._widthPx = px;
+                      }
+                      fixedWidth += px;
+                  }
+                  else {
+                      error("Invalid column width: " + cw);
                   }
-                  fixedWidth += px;
               }
-              else {
-                  error("Invalid column width: " + cw);
-              }
-          }
-          // Share remaining space between non-fixed columns
-          let restPx = Math.max(0, vpWidth - fixedWidth);
-          let ofsPx = 0;
-          for (let col of this.columns) {
-              if (col._weight) {
-                  let px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
-                  if (col._widthPx != px) {
-                      modified = true;
-                      col._widthPx = px;
+              // Share remaining space between non-fixed columns
+              const restPx = Math.max(0, vpWidth - fixedWidth);
+              let ofsPx = 0;
+              for (let col of this.columns) {
+                  if (col._weight) {
+                      const px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
+                      if (col._widthPx != px) {
+                          modified = true;
+                          col._widthPx = px;
+                      }
                   }
+                  col._ofsPx = ofsPx;
+                  ofsPx += col._widthPx;
               }
-              col._ofsPx = ofsPx;
-              ofsPx += col._widthPx;
           }
           // Every column has now a calculated `_ofsPx` and `_widthPx`
           // this.logInfo("UC", this.columns, vpWidth, this.element.clientWidth, this.element);
           // console.trace();
           // util.error("BREAK");
           if (modified) {
-              this.renderHeader();
-              if (opts.render !== false) {
-                  this.render();
+              this._renderHeaderMarkup();
+              if (opts.updateRows) {
+                  this._updateRows();
               }
           }
       }
-      /** Render all rows that are visible in the viewport. */
+      /** Create/update header markup from `this.columns` definition.
+       * @internal
+       */
+      _renderHeaderMarkup() {
+          if (!this.headerElement) {
+              return;
+          }
+          const headerRow = this.headerElement.querySelector(".wb-row");
+          assert(headerRow);
+          headerRow.innerHTML = "<span class='wb-col'></span>".repeat(this.columns.length);
+          for (let i = 0; i < this.columns.length; i++) {
+              const col = this.columns[i];
+              const colElem = headerRow.children[i];
+              colElem.style.left = col._ofsPx + "px";
+              colElem.style.width = col._widthPx + "px";
+              // colElem.textContent = col.title || col.id;
+              const title = escapeHtml(col.title || col.id);
+              colElem.innerHTML = `<span class="wb-col-title">${title}</span> <span class="wb-col-resizer"></span>`;
+              // colElem.innerHTML = `${title} <span class="wb-col-resizer"></span>`;
+          }
+      }
+      /** Render header and all rows that are visible in the viewport (async, throttled). */
       updateViewport(immediate = false) {
           // Call the `throttle` wrapper for `this._updateViewport()` which will
           // execute immediately on the leading edge of a sequence:
@@ -5256,42 +5279,163 @@
               this._updateViewportThrottled.flush();
           }
       }
+      /**
+       * This is the actual update method, which is wrapped inside a throttle method.
+       * This protected method should not be called directly but via
+       * `tree.updateViewport()` or `tree.setModified()`.
+       * It calls `updateColumns()` and `_updateRows()`.
+       * @internal
+       */
       _updateViewport() {
-          if (this._disableUpdate) {
+          if (this._disableUpdateCount) {
+              this.log(`IGNORED _updateViewport() disable level: ${this._disableUpdateCount}`);
               return;
           }
-          const newNodesOnly = !this.changeRedrawPending;
-          this.changeRedrawPending = false;
+          const newNodesOnly = !this.changeRedrawRequestPending;
+          this.changeRedrawRequestPending = false;
           let height = this.scrollContainer.clientHeight;
-          // We cannot get the height for absolut positioned parent, so look at first col
+          // We cannot get the height for absolute positioned parent, so look at first col
           // let headerHeight = this.headerElement.clientHeight
           // let headerHeight = this.headerElement.children[0].children[0].clientHeight;
           const headerHeight = this.options.headerHeightPx;
           const wantHeight = this.element.clientHeight - headerHeight;
-          const ofs = this.scrollContainer.scrollTop;
           if (Math.abs(height - wantHeight) > 1.0) {
               // this.log("resize", height, wantHeight);
               this.scrollContainer.style.height = wantHeight + "px";
               height = wantHeight;
           }
-          this.updateColumns({ render: false });
-          this.render({
-              startIdx: Math.max(0, ofs / ROW_HEIGHT - RENDER_MAX_PREFETCH),
-              endIdx: Math.max(0, (ofs + height) / ROW_HEIGHT + RENDER_MAX_PREFETCH),
-              newNodesOnly: newNodesOnly,
-          });
+          this.updateColumns({ updateRows: false });
+          this._updateRows({ newNodesOnly: newNodesOnly });
           this._callEvent("update");
       }
-      /** Call callback(node) for all nodes in hierarchical order (depth-first).
+      /**
+       * Assert that TR order matches the natural node order
+       * @internal
+       */
+      _validateRows() {
+          let trs = this.nodeListElement.childNodes;
+          let i = 0;
+          let prev = -1;
+          let ok = true;
+          trs.forEach((element) => {
+              const tr = element;
+              const top = Number.parseInt(tr.style.top);
+              const n = tr._wb_node;
+              // if (i < 4) {
+              //   console.info(
+              //     `TR#${i}, rowIdx=${n._rowIdx} , top=${top}px: '${n.title}'`
+              //   );
+              // }
+              if (top <= prev) {
+                  console.warn(`TR order mismatch at index ${i}: top=${top}px, node=${n}`);
+                  // throw new Error("fault");
+                  ok = false;
+              }
+              prev = top;
+              i++;
+          });
+          return ok;
+      }
+      /*
+       * - Traverse all *visible* of the whole tree, i.e. skip collapsed nodes.
+       * - Store count of rows to `tree.treeRowCount`.
+       * - Renumber `node._rowIdx` for all visible nodes.
+       * - Calculate the index range that must be rendered to fill the viewport
+       *   (including upper and lower prefetch)
+       * -
+       */
+      _updateRows(opts) {
+          const label = this.logTime("_updateRows");
+          opts = Object.assign({ newNodesOnly: false }, opts);
+          const newNodesOnly = !!opts.newNodesOnly;
+          const row_height = ROW_HEIGHT;
+          const vp_height = this.scrollContainer.clientHeight;
+          const prefetch = RENDER_MAX_PREFETCH;
+          const ofs = this.scrollContainer.scrollTop;
+          let startIdx = Math.max(0, ofs / row_height - prefetch);
+          startIdx = Math.floor(startIdx);
+          // Make sure start is always even, so the alternating row colors don't
+          // change when scrolling:
+          if (startIdx % 2) {
+              startIdx--;
+          }
+          let endIdx = Math.max(0, (ofs + vp_height) / row_height + prefetch);
+          endIdx = Math.ceil(endIdx);
+          // const obsoleteViewNodes = this.viewNodes;
+          // this.viewNodes = new Set();
+          // const viewNodes = this.viewNodes;
+          // this.debug("render", opts);
+          const obsoleteNodes = new Set();
+          this.nodeListElement.childNodes.forEach((elem) => {
+              const tr = elem;
+              obsoleteNodes.add(tr._wb_node);
+          });
+          let idx = 0;
+          let top = 0;
+          let modified = false;
+          let prevElem = "first";
+          this.visitRows(function (node) {
+              // console.log("visit", node)
+              const rowDiv = node._rowElem;
+              // Renumber all expanded nodes
+              if (node._rowIdx !== idx) {
+                  node._rowIdx = idx;
+                  modified = true;
+              }
+              if (idx < startIdx || idx > endIdx) {
+                  // row is outside viewport bounds
+                  if (rowDiv) {
+                      prevElem = rowDiv;
+                  }
+              }
+              else if (rowDiv && newNodesOnly) {
+                  obsoleteNodes.delete(node);
+                  // no need to update existing node markup
+                  rowDiv.style.top = idx * ROW_HEIGHT + "px";
+                  prevElem = rowDiv;
+              }
+              else {
+                  obsoleteNodes.delete(node);
+                  // Create new markup
+                  node.render({ top: top, after: prevElem });
+                  // console.log("render", top, prevElem, "=>", node._rowElem);
+                  prevElem = node._rowElem;
+              }
+              idx++;
+              top += row_height;
+          });
+          this.treeRowCount = idx;
+          for (const n of obsoleteNodes) {
+              n._callEvent("discard");
+              n.removeMarkup();
+          }
+          // Resize tree container
+          this.nodeListElement.style.height = `${top}px`;
+          // this.log(
+          //   `render(scrollOfs:${ofs}, ${startIdx}..${endIdx})`,
+          //   this.nodeListElement.style.height
+          // );
+          this.logTimeEnd(label);
+          this._validateRows();
+          return modified;
+      }
+      /**
+       * Call callback(node) for all nodes in hierarchical order (depth-first).
        *
        * @param {function} callback the callback function.
-       *     Return false to stop iteration, return "skip" to skip this node and children only.
+       *     Return false to stop iteration, return "skip" to skip this node and
+       *     children only.
        * @returns {boolean} false, if the iterator was stopped.
        */
       visit(callback) {
           return this.root.visit(callback, false);
       }
-      /** Call fn(node) for all nodes in vertical order, top down (or bottom up).<br>
+      /**
+       * Call fn(node) for all nodes in vertical order, top down (or bottom up).
+       *
+       * Note that this considers expansion state, i.e. children of collapsed nodes
+       * are skipped.
+       *
        * Stop iteration, if fn() returns false.<br>
        * Return false if iteration was stopped.
        *
@@ -5371,7 +5515,8 @@
           }
           return true;
       }
-      /** Call fn(node) for all nodes in vertical order, bottom up.
+      /**
+       * Call fn(node) for all nodes in vertical order, bottom up.
        * @internal
        */
       _visitRowsUp(callback, opts) {
@@ -5415,19 +5560,36 @@
           }
           return true;
       }
-      /** . */
+      /**
+       * Reload the tree with a new source.
+       *
+       * Previous data is cleared.
+       * Pass `options.columns` to define a header (may also be part of `source.columns`).
+       */
       load(source, options = {}) {
           this.clear();
           const columns = options.columns || source.columns;
           if (columns) {
               this.columns = options.columns;
-              this.renderHeader();
-              // this.updateColumns({ render: false });
+              // this._renderHeaderMarkup();
+              this.updateColumns({ calculateCols: false });
           }
           return this.root.load(source);
       }
       /**
+       * Disable render requests during operations that would trigger many updates.
        *
+       * ```js
+       * try {
+       *   tree.enableUpdate(false);
+       *   // ... (long running operation that would trigger many updates)
+       *   foo();
+       *   // ... NOTE: make sure that async operations have finished
+       *   await foo();
+       * } finally {
+       *   tree.enableUpdate(true);
+       * }
+       * ```
        */
       enableUpdate(flag) {
           /*
@@ -5435,20 +5597,22 @@
           1   >-------------------------------------<
           2      >--------------------<
           3         >--------------------------<
-      
-            5
-      
           */
-          // this.logDebug( `enableUpdate(${flag}): count=${this._disableUpdateCount}...` );
           if (flag) {
-              assert(this._disableUpdateCount > 0);
+              assert(this._disableUpdateCount > 0, "enableUpdate(true) was called too often");
               this._disableUpdateCount--;
+              // this.logDebug(
+              //   `enableUpdate(${flag}): count -> ${this._disableUpdateCount}...`
+              // );
               if (this._disableUpdateCount === 0) {
                   this.updateViewport();
               }
           }
           else {
               this._disableUpdateCount++;
+              // this.logDebug(
+              //   `enableUpdate(${flag}): count -> ${this._disableUpdateCount}...`
+              // );
               // this._disableUpdate = Date.now();
           }
           // return !flag; // return previous value
@@ -5481,8 +5645,10 @@
           return this.extensions.filter.updateFilter();
       }
   }
-  Wunderbaum.version = "v0.0.2"; // Set to semver by 'grunt release'
   Wunderbaum.sequence = 0;
+  /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
+  Wunderbaum.version = "v0.0.3"; // Set to semver by 'grunt release'
+  /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
   Wunderbaum.util = util;
 
   exports.Wunderbaum = Wunderbaum;