wunderbaum 0.0.1-0 → 0.0.3

package/src/wunderbaum.ts

@@ -16,6 +16,7 @@ import { FilterExtension } from "./wb_ext_filter";
 import { KeynavExtension } from "./wb_ext_keynav";
 import { LoggerExtension } from "./wb_ext_logger";
 import { DndExtension } from "./wb_ext_dnd";
+import { GridExtension } from "./wb_ext_grid";
 import { ExtensionsDict, WunderbaumExtension } from "./wb_extension_base";
 
 import {
@@ -40,7 +41,7 @@ import { WunderbaumOptions } from "./wb_options";
 
 // const class_prefix = "wb-";
 // const node_props: string[] = ["title", "key", "refKey"];
-const MAX_CHANGED_NODES = 10;
+// const MAX_CHANGED_NODES = 10;
 
 /**
  * A persistent plain object or array.
@@ -48,71 +49,83 @@ const MAX_CHANGED_NODES = 10;
  * See also [[WunderbaumOptions]].
  */
 export class Wunderbaum {
-  static version: string = "@VERSION"; // Set to semver by 'grunt release'
-  static sequence = 0;
+  protected static sequence = 0;
 
-  /** The invisible root node, that holds all visible top level nodes. */
-  readonly root: WunderbaumNode;
-  readonly id: string;
-
-  readonly element: HTMLDivElement;
-  // readonly treeElement: HTMLDivElement;
-  readonly headerElement: HTMLDivElement | null;
-  readonly scrollContainer: HTMLDivElement;
-  readonly nodeListElement: HTMLDivElement;
-  readonly _updateViewportThrottled: DebouncedFunction<(...args: any) => void>;
+  /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
+  public static version: string = "@VERSION"; // Set to semver by 'grunt release'
 
+  /** The invisible root node, that holds all visible top level nodes. */
+  public readonly root: WunderbaumNode;
+  /** Unique tree ID as passed to constructor. Defaults to `"wb_SEQUENCE"`. */
+  public readonly id: string;
+  /** The `div` container element that was passed to the constructor. */
+  public readonly element: HTMLDivElement;
+  /** The `div.wb-header` element if any. */
+  public readonly headerElement: HTMLDivElement | null;
+  /** The `div.wb-scroll-container` element that contains the `nodeListElement`. */
+  public readonly scrollContainer: HTMLDivElement;
+  /** The `div.wb-node-list` element that contains all visible div.wb-row child elements. */
+  public readonly nodeListElement: HTMLDivElement;
+
+  protected readonly _updateViewportThrottled: DebouncedFunction<
+    (...args: any) => void
+  >;
   protected extensionList: WunderbaumExtension[] = [];
   protected extensions: ExtensionsDict = {};
-  // protected extensionMap = new Map<string, WunderbaumExtension>();
 
   /** Merged options from constructor args and tree- and extension defaults. */
   public options: WunderbaumOptions;
 
   protected keyMap = new Map<string, WunderbaumNode>();
   protected refKeyMap = new Map<string, Set<WunderbaumNode>>();
-  protected viewNodes = new Set<WunderbaumNode>();
-  // protected rows: WunderbaumNode[] = [];
-  // protected _rowCount = 0;
+  // protected viewNodes = new Set<WunderbaumNode>();
+  protected treeRowCount = 0;
+  protected _disableUpdateCount = 0;
 
   // protected eventHandlers : Array<function> = [];
 
+  /** Currently active node if any. */
   public activeNode: WunderbaumNode | null = null;
+  /** Current node hat has keyboard focus if any. */
   public focusNode: WunderbaumNode | null = null;
-  _disableUpdate = 0;
-  _disableUpdateCount = 0;
 
   /** Shared properties, referenced by `node.type`. */
   public types: { [key: string]: any } = {};
   /** List of column definitions. */
   public columns: any[] = [];
-  public _columnsById: { [key: string]: any } = {};
 
-  protected resizeObserver;
+  protected _columnsById: { [key: string]: any } = {};
+  protected resizeObserver: ResizeObserver;
 
   // Modification Status
-  protected changedSince = 0;
-  protected changes = new Set<ChangeType>();
-  protected changedNodes = new Set<WunderbaumNode>();
+  // protected changedSince = 0;
+  // protected changes = new Set<ChangeType>();
+  // protected changedNodes = new Set<WunderbaumNode>();
+  protected changeRedrawRequestPending = false;
+
+  /** A Promise that is resolved when the tree was initialized (similar to `init(e)` event). */
+  public readonly ready: Promise<any>;
+  /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
+  public static util = util;
+  /** Expose some useful methods of the util.ts module as `tree._util`. */
+  public _util = util;
 
   // --- FILTER ---
   public filterMode: FilterModeType = null;
 
   // --- KEYNAV ---
+  /** @internal Use `setColumn()`/`getActiveColElem()`*/
   public activeColIdx = 0;
+  /** @internal */
   public navMode = NavigationMode.row;
+  /** @internal */
   public lastQuicksearchTime = 0;
+  /** @internal */
   public lastQuicksearchTerm = "";
 
   // --- EDIT ---
   protected lastClickTime = 0;
 
-  readonly ready: Promise<any>;
-
-  public static util = util;
-  // TODO: make accessible in compiled JS like this?
-  public _util = util;
-
   constructor(options: WunderbaumOptions) {
     let opts = (this.options = util.extend(
       {
@@ -125,7 +138,7 @@ export class Wunderbaum {
         rowHeightPx: ROW_HEIGHT,
         columns: null,
         types: null,
-        escapeTitles: true,
+        // escapeTitles: true,
         showSpinner: false,
         checkbox: true,
         minExpandLevel: 0,
@@ -185,6 +198,7 @@ export class Wunderbaum {
     this._registerExtension(new EditExtension(this));
     this._registerExtension(new FilterExtension(this));
     this._registerExtension(new DndExtension(this));
+    this._registerExtension(new GridExtension(this));
     this._registerExtension(new LoggerExtension(this));
 
     // --- Evaluate options
@@ -313,10 +327,8 @@ export class Wunderbaum {
         .finally(() => {
           this.element.querySelector("progress.spinner")?.remove();
           this.element.classList.remove("wb-initializing");
-          // this.updateViewport();
         });
     } else {
-      // this.updateViewport();
       readyDeferred.resolve();
     }
 
@@ -328,14 +340,11 @@ export class Wunderbaum {
 
     // --- Bind listeners
     this.scrollContainer.addEventListener("scroll", (e: Event) => {
-      this.updateViewport();
+      this.setModified(ChangeType.vscroll);
     });
 
-    // window.addEventListener("resize", (e: Event) => {
-    //   this.updateViewport();
-    // });
     this.resizeObserver = new ResizeObserver((entries) => {
-      this.updateViewport();
+      this.setModified(ChangeType.vscroll);
       console.log("ResizeObserver: Size changed", entries);
     });
     this.resizeObserver.observe(this.element);
@@ -401,40 +410,19 @@ export class Wunderbaum {
           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
+   * ```
    */
   public static getTree(
     el?: Element | Event | number | string | WunderbaumNode
@@ -476,9 +464,8 @@ export class Wunderbaum {
     return null;
   }
 
-  /** Return a WunderbaumNode instance from element, event.
-   *
-   * @param  el
+  /**
+   * Return a WunderbaumNode instance from element or event.
    */
   public static getNode(el: Element | Event): WunderbaumNode | null {
     if (!el) {
@@ -499,7 +486,7 @@ export class Wunderbaum {
     return null;
   }
 
-  /** */
+  /** @internal */
   protected _registerExtension(extension: WunderbaumExtension): void {
     this.extensionList.push(extension);
     this.extensions[extension.id] = extension;
@@ -543,7 +530,7 @@ export class Wunderbaum {
     (node.tree as any) = null;
     (node.parent as any) = null;
     // node.title = "DISPOSED: " + node.title
-    this.viewNodes.delete(node);
+    // this.viewNodes.delete(node);
     node.removeMarkup();
   }
 
@@ -568,7 +555,9 @@ export class Wunderbaum {
     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")
@@ -585,7 +574,9 @@ export class Wunderbaum {
     }
   }
 
-  /** 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})
@@ -605,17 +596,12 @@ export class Wunderbaum {
     }
   }
 
-  /** Return the topmost visible node in the viewport */
-  protected _firstNodeInView(complete = true) {
-    let topIdx: number, node: WunderbaumNode;
-    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. */
+  protected _getNodeByRowIdx(idx: number): WunderbaumNode | null {
     // TODO: start searching from active node (reverse)
+    let node: WunderbaumNode | null = null;
     this.visitRows((n) => {
-      if (n._rowIdx === topIdx) {
+      if (n._rowIdx === idx) {
         node = n;
         return false;
       }
@@ -623,9 +609,24 @@ export class Wunderbaum {
     return <WunderbaumNode>node!;
   }
 
-  /** Return the lowest visible node in the viewport */
+  /** Return the topmost visible node in the viewport. */
+  protected _firstNodeInView(complete = true) {
+    let topIdx: number;
+    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. */
   protected _lastNodeInView(complete = true) {
-    let bottomIdx: number, node: WunderbaumNode;
+    let bottomIdx: number;
     if (complete) {
       bottomIdx =
         Math.floor(
@@ -639,17 +640,11 @@ export class Wunderbaum {
             ROW_HEIGHT
         ) - 1;
     }
-    // TODO: start searching from active node
-    this.visitRows((n) => {
-      if (n._rowIdx === bottomIdx) {
-        node = n;
-        return false;
-      }
-    });
-    return <WunderbaumNode>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. */
   protected _getPrevNodeInView(node?: WunderbaumNode, ofs = 1) {
     this.visitRows(
       (n) => {
@@ -663,7 +658,7 @@ export class Wunderbaum {
     return node;
   }
 
-  /** Return following visible node in the viewport */
+  /** Return following visible node in the viewport. */
   protected _getNextNodeInView(node?: WunderbaumNode, ofs = 1) {
     this.visitRows(
       (n) => {
@@ -677,23 +672,27 @@ export class Wunderbaum {
     return node;
   }
 
+  /**
+   * Append (or insert) a list of toplevel nodes.
+   *
+   * @see {@link WunderbaumNode.addChildren}
+   */
   addChildren(nodeData: any, options?: any): WunderbaumNode {
     return this.root.addChildren(nodeData, options);
   }
 
   /**
-   * Apply a modification (or navigation) operation on the tree or active node.
-   * @returns
+   * Apply a modification (or navigation) operation on the **tree or active node**.
    */
   applyCommand(cmd: ApplyCommandType, opts?: any): any;
 
   /**
-   * Apply a modification (or navigation) operation on a node.
-   * @returns
+   * Apply a modification (or navigation) operation on a **node**.
+   * @see {@link WunderbaumNode.applyCommand}
    */
   applyCommand(cmd: ApplyCommandType, node: WunderbaumNode, opts?: any): any;
 
-  /*
+  /**
    * Apply a modification or navigation operation.
    *
    * Most of these commands simply map to a node or tree method.
@@ -824,7 +823,8 @@ export class Wunderbaum {
     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;
 
@@ -833,9 +833,9 @@ export class Wunderbaum {
     // 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;
@@ -845,7 +845,7 @@ export class Wunderbaum {
     // public cellNavMode = false;
     // public lastQuicksearchTime = 0;
     // public lastQuicksearchTerm = "";
-    this.updateViewport();
+    this.setModified(ChangeType.structure);
   }
 
   /**
@@ -867,10 +867,11 @@ export class Wunderbaum {
   /**
    * 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: string, defaultValue?: any): any {
     let ext;
@@ -919,17 +920,13 @@ export class Wunderbaum {
 
   /** Run code, but defer `updateViewport()` until done. */
   runWithoutUpdate(func: () => any, hint = null): void {
-    // const prev = this._disableUpdate;
-    // const start = Date.now();
-    // this._disableUpdate = Date.now();
     try {
       this.enableUpdate(false);
-      return func();
+      const res = func();
+      util.assert(!(res instanceof Promise));
+      return res;
     } finally {
       this.enableUpdate(true);
-      // if (!prev && this._disableUpdate === start) {
-      //   this._disableUpdate = 0;
-      // }
     }
   }
 
@@ -946,14 +943,15 @@ export class Wunderbaum {
   }
 
   /** Return the number of nodes in the data model.*/
-  count(visible = false) {
+  count(visible = false): number {
     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) => {
@@ -965,27 +963,32 @@ export class Wunderbaum {
     // 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: string | MatcherType) {
     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: string | MatcherType) {
     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(
@@ -1023,7 +1026,8 @@ export class Wunderbaum {
     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'.
@@ -1033,7 +1037,7 @@ export class Wunderbaum {
    */
   findRelatedNode(node: WunderbaumNode, where: string, 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":
@@ -1090,21 +1094,23 @@ export class Wunderbaum {
         res = this._getNextNodeInView(node);
         break;
       case "pageDown":
-        let bottomNode = this._lastNodeInView();
-        // this.logDebug(where, this.focusNode, bottomNode);
+        const bottomNode = this._lastNodeInView();
+        // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
 
-        if (this.focusNode !== bottomNode) {
+        if (node._rowIdx! < bottomNode._rowIdx!) {
           res = bottomNode;
         } else {
           res = this._getNextNodeInView(node, pageSize);
         }
         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 {
             res = this._getPrevNodeInView(node, pageSize);
@@ -1118,7 +1124,7 @@ export class Wunderbaum {
   }
 
   /**
-   * 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) {
@@ -1134,8 +1140,8 @@ export class Wunderbaum {
     return this.activeNode;
   }
 
-  /** Return the first top level node if any (not the invisible root node).
-   * @returns {FancytreeNode | null}
+  /**
+   * Return the first top level node if any (not the invisible root node).
    */
   getFirstChild() {
     return this.root.getFirstChild();
@@ -1148,18 +1154,20 @@ export class Wunderbaum {
     return this.focusNode;
   }
 
-  /** Return a {node: FancytreeNode, region: TYPE} object for a mouse event.
+  /** Return a {node: WunderbaumNode, region: TYPE} object for a mouse event.
    *
    * @param {Event} event Mouse event, e.g. click, ...
-   * @returns {object} Return a {node: FancytreeNode, region: TYPE} object
+   * @returns {object} Return a {node: WunderbaumNode, region: TYPE} object
    *     TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
    */
   static getEventInfo(event: Event) {
     let target = <Element>event.target,
       cl = target.classList,
-      parentCol = target.closest(".wb-col"),
+      parentCol = target.closest("span.wb-col") as HTMLSpanElement,
       node = Wunderbaum.getNode(target),
+      tree = node ? node.tree : Wunderbaum.getTree(event),
       res = {
+        tree: tree,
         node: node,
         region: NodeRegion.unknown,
         colDef: undefined,
@@ -1189,13 +1197,15 @@ export class Wunderbaum {
       res.colIdx = idx;
     } else {
       // Somewhere near the title
-      console.warn("getEventInfo(): not found", event, res);
+      if (event.type !== "mousemove" && !(event instanceof KeyboardEvent)) {
+        console.warn("getEventInfo(): not found", event, res);
+      }
       return res;
     }
     if (res.colIdx === -1) {
       res.colIdx = 0;
     }
-    res.colDef = node!.tree.columns[res.colIdx];
+    res.colDef = tree?.columns[res.colIdx];
     res.colDef != null ? (res.colId = (<any>res.colDef).id) : 0;
     // this.log("Event", event, res);
     return res;
@@ -1223,7 +1233,8 @@ export class Wunderbaum {
     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(): boolean {
     var res = false;
@@ -1238,8 +1249,10 @@ export class Wunderbaum {
     return res;
   }
 
-  /** Alias for `logDebug` */
-  log = this.logDebug; // Alias
+  /** Alias for {@link Wunderbaum.logDebug}.
+   * @alias Wunderbaum.logDebug
+   */
+  log = this.logDebug;
 
   /** Log to console if opts.debugLevel >= 4 */
   logDebug(...args: any[]) {
@@ -1257,7 +1270,7 @@ export class Wunderbaum {
     }
   }
 
-  /* Log to console if opts.debugLevel >= 3 */
+  /** Log to console if opts.debugLevel >= 3 */
   logInfo(...args: any[]) {
     if (this.options.debugLevel >= 3) {
       Array.prototype.unshift.call(args, this.toString());
@@ -1288,85 +1301,13 @@ export class Wunderbaum {
     }
   }
 
-  /** */
-  protected render(opts?: any): boolean {
-    const label = this.logTime("render");
-    let idx = 0;
-    let top = 0;
-    const height = ROW_HEIGHT;
-    let modified = false;
-    let start = opts?.startIdx;
-    let end = opts?.endIdx;
-    const obsoleteViewNodes = this.viewNodes;
-
-    this.viewNodes = new Set();
-    let viewNodes = this.viewNodes;
-    // this.debug("render", opts);
-    util.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 || prevIdx != idx) {
-        node.render({ top: top });
-      }
-      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")!;
-    util.assert(headerRow);
-    headerRow.innerHTML = "<span class='wb-col'></span>".repeat(
-      this.columns.length
-    );
-
-    for (let i = 0; i < this.columns.length; i++) {
-      let col = this.columns[i];
-      let colElem = <HTMLElement>headerRow.children[i];
-      colElem.style.left = col._ofsPx + "px";
-      colElem.style.width = col._widthPx + "px";
-      colElem.textContent = col.title || col.id;
-    }
-  }
-
   /**
+   * Make sure that this node is scrolled into the viewport.
    *
    * @param {boolean | PlainObject} [effects=false] animation options.
    * @param {object} [options=null] {topNode: null, effects: ..., parent: ...}
    *     this node will remain visible in
    *     any case, even if `this` is outside the scroll pane.
-   * Make sure that a node is scrolled into the viewport.
    */
   scrollTo(opts: any) {
     const MARGIN = 1;
@@ -1388,36 +1329,22 @@ export class Wunderbaum {
       // Node is above viewport
       newTop = nodeOfs + MARGIN;
     }
-    this.log("scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop, height);
     if (newTop != null) {
+      this.log(
+        "scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop,
+        height
+      );
       this.scrollContainer.scrollTop = newTop;
-      this.updateViewport();
-    }
-  }
-
-  /** */
-  setCellMode(mode: NavigationMode) {
-    // 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.setModified(ChangeType.vscroll);
     }
-    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: number) {
     util.assert(this.navMode !== NavigationMode.row);
     util.assert(0 <= colIdx && colIdx < this.columns.length);
@@ -1443,7 +1370,7 @@ export class Wunderbaum {
     }
   }
 
-  /** */
+  /** Set or remove keybaord focus to the tree container. */
   setFocus(flag = true) {
     if (flag) {
       this.element.focus();
@@ -1452,35 +1379,76 @@ export class Wunderbaum {
     }
   }
 
-  /** */
+  /** Schedule an update request to reflect a tree change. */
   setModified(change: ChangeType, options?: any): void;
 
-  /** */
+  /** Schedule an update request to reflect a single node modification. */
+  setModified(change: ChangeType, node: WunderbaumNode, options?: any): void;
+
   setModified(
     change: ChangeType,
     node?: WunderbaumNode | any,
     options?: any
   ): void {
+    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.changedSince) {
-      this.changedSince = Date.now();
+    const immediate = !!util.getOption(options, "immediate");
+
+    switch (change) {
+      case ChangeType.any:
+      case ChangeType.structure:
+      case ChangeType.header:
+        this.changeRedrawRequestPending = true;
+        this.updateViewport(immediate);
+        break;
+      case ChangeType.vscroll:
+        this.updateViewport(immediate);
+        break;
+      case ChangeType.row:
+      case ChangeType.status:
+        // Single nodes are immedialtely updated if already inside the viewport
+        // (otherwise we can ignore)
+        if (node._rowElem) {
+          node.render();
+        }
+        break;
+      default:
+        util.error(`Invalid change type ${change}`);
     }
-    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();
-      }
+  }
+
+  /** Set the tree's navigation mode. */
+  setNavigationMode(mode: NavigationMode) {
+    // 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.log("setModified(" + change + ")", node);
+    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: NodeStatusType,
     message?: string,
@@ -1490,65 +1458,95 @@ export class Wunderbaum {
   }
 
   /** Update column headers and width. */
-  updateColumns(opts: any) {
-    let modified = false;
-    let minWidth = 4;
-    let vpWidth = this.element.clientWidth;
+  updateColumns(opts?: any) {
+    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[<string>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[<string>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 {
+          util.error("Invalid column width: " + cw);
         }
-        fixedWidth += px;
-      } else {
-        util.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
+   */
+  protected _renderHeaderMarkup() {
+    if (!this.headerElement) {
+      return;
+    }
+    const headerRow = this.headerElement.querySelector(".wb-row")!;
+    util.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 = <HTMLElement>headerRow.children[i];
+
+      colElem.style.left = col._ofsPx + "px";
+      colElem.style.width = col._widthPx + "px";
+      // colElem.textContent = col.title || col.id;
+      const title = util.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:
@@ -1558,17 +1556,29 @@ export class Wunderbaum {
     }
   }
 
+  /**
+   * 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
+   */
   protected _updateViewport() {
-    if (this._disableUpdate) {
+    if (this._disableUpdateCount) {
+      this.log(
+        `IGNORED _updateViewport() disable level: ${this._disableUpdateCount}`
+      );
       return;
     }
+    const newNodesOnly = !this.changeRedrawRequestPending;
+    this.changeRedrawRequestPending = false;
+
     let height = this.scrollContainer.clientHeight;
-    // We cannot get the height for abolut 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;
-    let wantHeight = this.element.clientHeight - headerHeight;
-    let ofs = this.scrollContainer.scrollTop;
+    const wantHeight = this.element.clientHeight - headerHeight;
 
     if (Math.abs(height - wantHeight) > 1.0) {
       // this.log("resize", height, wantHeight);
@@ -1576,25 +1586,152 @@ export class Wunderbaum {
       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),
-    });
+    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
+   */
+  protected _validateRows(): boolean {
+    let trs = this.nodeListElement.childNodes;
+    let i = 0;
+    let prev = -1;
+    let ok = true;
+    trs.forEach((element) => {
+      const tr = element as HTMLTableRowElement;
+      const top = Number.parseInt(tr.style.top);
+      const n = (<any>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)
+   * -
+   */
+  protected _updateRows(opts?: any): boolean {
+    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<WunderbaumNode>();
+    this.nodeListElement.childNodes.forEach((elem) => {
+      const tr = elem as HTMLTableRowElement;
+      obsoleteNodes.add((<any>tr)._wb_node);
+    });
+
+    let idx = 0;
+    let top = 0;
+    let modified = false;
+    let prevElem: HTMLDivElement | "first" | "last" = "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: (node: WunderbaumNode) => any) {
     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.
    *
@@ -1695,7 +1832,8 @@ export class Wunderbaum {
     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
    */
   protected _visitRowsUp(
@@ -1750,20 +1888,37 @@ export class Wunderbaum {
     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: any, options: any = {}) {
     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);
+   * }
+   * ```
    */
   public enableUpdate(flag: boolean): void {
     /*
@@ -1771,19 +1926,24 @@ export class Wunderbaum {
     1   >-------------------------------------<
     2      >--------------------<
     3         >--------------------------<
-
-      5
-
     */
-    // this.logDebug( `enableUpdate(${flag}): count=${this._disableUpdateCount}...` );
     if (flag) {
-      util.assert(this._disableUpdateCount > 0);
+      util.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