wunderbaum 0.0.3 → 0.0.6

package/src/wunderbaum.ts

@@ -1,11 +1,12 @@
 /*!
  * wunderbaum.ts
  *
- * A tree control.
+ * A treegrid control.
  *
  * Copyright (c) 2021-2022, Martin Wendt (https://wwWendt.de).
- * Released under the MIT license.
+ * https://github.com/mar10/wunderbaum
  *
+ * Released under the MIT license.
  * @version @VERSION
  * @date @DATE
  */
@@ -18,30 +19,43 @@ 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 {
-  NavigationMode,
+  ApplyCommandType,
   ChangeType,
-  DEFAULT_DEBUGLEVEL,
+  ColumnDefinitionList,
   FilterModeType,
-  makeNodeTitleStartMatcher,
   MatcherType,
-  NavigationModeOption,
+  NavigationOptions,
   NodeStatusType,
+  NodeTypeDefinitions,
+  ScrollToOptions,
+  SetActiveOptions,
+  SetModifiedOptions,
+  SetStatusOptions,
+  TargetType as NodeRegion,
+} from "./types";
+import {
+  DEFAULT_DEBUGLEVEL,
+  makeNodeTitleStartMatcher,
   RENDER_MAX_PREFETCH,
   ROW_HEIGHT,
-  TargetType as NodeRegion,
-  ApplyCommandType,
 } from "./common";
 import { WunderbaumNode } from "./wb_node";
 import { Deferred } from "./deferred";
-import { DebouncedFunction, throttle } from "./debounce";
 import { EditExtension } from "./wb_ext_edit";
 import { WunderbaumOptions } from "./wb_options";
 
-// const class_prefix = "wb-";
-// const node_props: string[] = ["title", "key", "refKey"];
-// const MAX_CHANGED_NODES = 10;
+class WbSystemRoot extends WunderbaumNode {
+  constructor(tree: Wunderbaum) {
+    super(tree, <WunderbaumNode>(<unknown>null), {
+      key: "__root__",
+      title: tree.id,
+    });
+  }
+  toString() {
+    return `WbSystemRoot@${this.key}<'${this.tree.id}'>`;
+  }
+}
 
 /**
  * A persistent plain object or array.
@@ -50,6 +64,7 @@ import { WunderbaumOptions } from "./wb_options";
  */
 export class Wunderbaum {
   protected static sequence = 0;
+  protected enabled = true;
 
   /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
   public static version: string = "@VERSION"; // Set to semver by 'grunt release'
@@ -61,15 +76,15 @@ export class Wunderbaum {
   /** 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;
+  public readonly headerElement: HTMLDivElement;
   /** The `div.wb-scroll-container` element that contains the `nodeListElement`. */
-  public readonly scrollContainer: HTMLDivElement;
+  public readonly scrollContainerElement: HTMLDivElement;
   /** The `div.wb-node-list` element that contains all visible div.wb-row child elements. */
   public readonly nodeListElement: HTMLDivElement;
+  /** Contains additional data that was sent as response to an Ajax source load request. */
+  public readonly data: { [key: string]: any } = {};
 
-  protected readonly _updateViewportThrottled: DebouncedFunction<
-    (...args: any) => void
-  >;
+  protected readonly _updateViewportThrottled: (...args: any) => void;
   protected extensionList: WunderbaumExtension[] = [];
   protected extensions: ExtensionsDict = {};
 
@@ -78,30 +93,25 @@ export class Wunderbaum {
 
   protected keyMap = new Map<string, WunderbaumNode>();
   protected refKeyMap = new Map<string, Set<WunderbaumNode>>();
-  // 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;
 
   /** Shared properties, referenced by `node.type`. */
-  public types: { [key: string]: any } = {};
+  public types: NodeTypeDefinitions = {};
   /** List of column definitions. */
-  public columns: any[] = [];
+  public columns: ColumnDefinitionList = []; // any[] = [];
 
   protected _columnsById: { [key: string]: any } = {};
   protected resizeObserver: ResizeObserver;
 
   // Modification Status
-  // protected changedSince = 0;
-  // protected changes = new Set<ChangeType>();
-  // protected changedNodes = new Set<WunderbaumNode>();
   protected changeRedrawRequestPending = false;
+  protected changeScrollRequestPending = false;
 
   /** A Promise that is resolved when the tree was initialized (similar to `init(e)` event). */
   public readonly ready: Promise<any>;
@@ -117,7 +127,7 @@ export class Wunderbaum {
   /** @internal Use `setColumn()`/`getActiveColElem()`*/
   public activeColIdx = 0;
   /** @internal */
-  public navMode = NavigationMode.row;
+  public _cellNavMode = false;
   /** @internal */
   public lastQuicksearchTime = 0;
   /** @internal */
@@ -130,22 +140,25 @@ export class Wunderbaum {
     let opts = (this.options = util.extend(
       {
         id: null,
-        source: null, // URL for GET/PUT, ajax options, or callback
+        source: null, // URL for GET/PUT, Ajax options, or callback
         element: null, // <div class="wunderbaum">
         debugLevel: DEFAULT_DEBUGLEVEL, // 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
         header: null, // Show/hide header (pass bool or string)
-        headerHeightPx: ROW_HEIGHT,
+        // headerHeightPx: ROW_HEIGHT,
         rowHeightPx: ROW_HEIGHT,
         columns: null,
         types: null,
         // escapeTitles: true,
+        enabled: true,
+        fixedCol: false,
         showSpinner: false,
-        checkbox: true,
+        checkbox: false,
         minExpandLevel: 0,
         updateThrottleWait: 200,
         skeleton: false,
+        connectTopBreadcrumb: null, // HTMLElement that receives the top nodes breadcrumb
         // --- KeyNav ---
-        navigationMode: NavigationModeOption.startRow,
+        navigationModeOption: null, // NavigationOptions.startRow,
         quicksearch: true,
         // --- Events ---
         change: util.noop,
@@ -189,10 +202,7 @@ export class Wunderbaum {
       });
 
     this.id = opts.id || "wb_" + ++Wunderbaum.sequence;
-    this.root = new WunderbaumNode(this, <WunderbaumNode>(<unknown>null), {
-      key: "__root__",
-      // title: "__root__",
-    });
+    this.root = new WbSystemRoot(this);
 
     this._registerExtension(new KeynavExtension(this));
     this._registerExtension(new EditExtension(this));
@@ -201,41 +211,23 @@ export class Wunderbaum {
     this._registerExtension(new GridExtension(this));
     this._registerExtension(new LoggerExtension(this));
 
+    this._updateViewportThrottled = util.adaptiveThrottle(
+      this._updateViewportImmediately.bind(this),
+      {}
+    );
+
     // --- Evaluate options
     this.columns = opts.columns;
     delete opts.columns;
-    if (!this.columns) {
-      let defaultName = typeof opts.header === "string" ? opts.header : this.id;
-      this.columns = [{ id: "*", title: defaultName, width: "*" }];
+    if (!this.columns || !this.columns.length) {
+      const title = typeof opts.header === "string" ? opts.header : this.id;
+      this.columns = [{ id: "*", title: title, width: "*" }];
     }
 
-    this.types = opts.types || {};
-    delete opts.types;
-    // Convert `TYPE.classes` to a Set
-    for (let t of Object.values(this.types) as any) {
-      if (t.classes) {
-        t.classes = util.toSet(t.classes);
-      }
+    if (opts.types) {
+      this.setTypes(opts.types, true);
     }
-
-    if (this.columns.length === 1) {
-      opts.navigationMode = NavigationModeOption.row;
-    }
-
-    if (
-      opts.navigationMode === NavigationModeOption.cell ||
-      opts.navigationMode === NavigationModeOption.startCell
-    ) {
-      this.navMode = NavigationMode.cellNav;
-    }
-
-    this._updateViewportThrottled = throttle(
-      () => {
-        this._updateViewport();
-      },
-      opts.updateThrottleWait,
-      { leading: true, trailing: true }
-    );
+    delete opts.types;
 
     // --- Create Markup
     this.element = util.elemFromSelector(opts.element) as HTMLDivElement;
@@ -270,11 +262,14 @@ export class Wunderbaum {
       ) as HTMLDivElement;
       for (const colDiv of rowElement.querySelectorAll("div")) {
         this.columns.push({
-          id: colDiv.dataset.id || null,
-          text: "" + colDiv.textContent,
+          id: colDiv.dataset.id || `col_${this.columns.length}`,
+          // id: colDiv.dataset.id || null,
+          title: "" + colDiv.textContent,
+          // text: "" + colDiv.textContent,
+          width: "*", // TODO: read from header span
         });
       }
-    } else if (wantHeader) {
+    } else {
       // We need a row div, the rest will be computed from `this.columns`
       const coldivs = "<span class='wb-col'></span>".repeat(
         this.columns.length
@@ -285,9 +280,13 @@ export class Wunderbaum {
             ${coldivs}
           </div>
         </div>`;
-      // this.updateColumns({ render: false });
-    } else {
-      this.element.innerHTML = "";
+
+      if (!wantHeader) {
+        const he = this.element.querySelector(
+          "div.wb-header"
+        ) as HTMLDivElement;
+        he.style.display = "none";
+      }
     }
 
     //
@@ -295,22 +294,27 @@ export class Wunderbaum {
       <div class="wb-scroll-container">
         <div class="wb-node-list"></div>
       </div>`;
-    this.scrollContainer = this.element.querySelector(
+    this.scrollContainerElement = this.element.querySelector(
       "div.wb-scroll-container"
     ) as HTMLDivElement;
-    this.nodeListElement = this.scrollContainer.querySelector(
+    this.nodeListElement = this.scrollContainerElement.querySelector(
       "div.wb-node-list"
     ) as HTMLDivElement;
     this.headerElement = this.element.querySelector(
       "div.wb-header"
     ) as HTMLDivElement;
 
-    if (this.columns.length > 1) {
-      this.element.classList.add("wb-grid");
-    }
+    this.element.classList.toggle("wb-grid", this.columns.length > 1);
 
     this._initExtensions();
 
+    // --- apply initial options
+    ["enabled", "fixedCol"].forEach((optName) => {
+      if (opts[optName] != null) {
+        this.setOption(optName, opts[optName]);
+      }
+    });
+
     // --- Load initial data
     if (opts.source) {
       if (opts.showSpinner) {
@@ -319,6 +323,16 @@ export class Wunderbaum {
       }
       this.load(opts.source)
         .then(() => {
+          // The source may have defined columns, so we may adjust the nav mode
+          if (opts.navigationModeOption == null) {
+            if (this.isGrid()) {
+              this.setNavigationOption(NavigationOptions.cell);
+            } else {
+              this.setNavigationOption(NavigationOptions.row);
+            }
+          } else {
+            this.setNavigationOption(opts.navigationModeOption);
+          }
           readyDeferred.resolve();
         })
         .catch((error) => {
@@ -332,27 +346,41 @@ export class Wunderbaum {
       readyDeferred.resolve();
     }
 
-    // TODO: This is sometimes required, because this.element.clientWidth
-    //       has a wrong value at start???
-    setTimeout(() => {
-      this.updateViewport();
-    }, 50);
+    // Async mode is sometimes required, because this.element.clientWidth
+    // has a wrong value at start???
+    this.setModified(ChangeType.any);
 
     // --- Bind listeners
-    this.scrollContainer.addEventListener("scroll", (e: Event) => {
+    this.element.addEventListener("scroll", (e: Event) => {
+      // this.log("scroll", e);
       this.setModified(ChangeType.vscroll);
     });
+    // this.scrollContainerElement.addEventListener("scroll", (e: Event) => {
+    //   this.log("scroll", e)
+    //   this.setModified(ChangeType.vscroll);
+    // });
 
     this.resizeObserver = new ResizeObserver((entries) => {
       this.setModified(ChangeType.vscroll);
-      console.log("ResizeObserver: Size changed", entries);
+      // this.log("ResizeObserver: Size changed", entries);
     });
     this.resizeObserver.observe(this.element);
 
     util.onEvent(this.nodeListElement, "click", "div.wb-row", (e) => {
       const info = Wunderbaum.getEventInfo(e);
       const node = info.node;
-
+      // this.log("click", info, e);
+
+      // if( (e.target as HTMLElement).matches("input[type=checkbox]")){
+      //   // Click on an embedded checkbox triggers a change event.
+      //   // We return here, before the `setActive()` performs a render
+      //   this.log("click - cb", info, e);
+      //   // e.preventDefault()
+      //   setTimeout(()=>{
+      //     // (e.target as HTMLElement).click()
+      //   }, 50)
+      //   // return
+      // }
       if (
         this._callEvent("click", { event: e, node: node, info: info }) === false
       ) {
@@ -384,17 +412,17 @@ export class Wunderbaum {
           node.setSelected(!node.isSelected());
         }
       }
-      // if(e.target.classList.)
-      // this.log("click", info);
       this.lastClickTime = Date.now();
     });
 
     util.onEvent(this.element, "keydown", (e) => {
       const info = Wunderbaum.getEventInfo(e);
       const eventName = util.eventToString(e);
+      const node = info.node || this.getFocusNode();
+
       this._callHook("onKeyEvent", {
         event: e,
-        node: info.node,
+        node: node,
         info: info,
         eventName: eventName,
       });
@@ -582,17 +610,17 @@ export class Wunderbaum {
    * tree._callEvent("edit.beforeEdit", {foo: 42})
    * ```
    */
-  _callEvent(name: string, extra?: any): any {
-    const [p, n] = name.split(".");
+  _callEvent(type: string, extra?: any): any {
+    const [p, n] = type.split(".");
     const opts = this.options as any;
     const func = n ? opts[p][n] : opts[p];
     if (func) {
       return func.call(
         this,
-        util.extend({ name: name, tree: this, util: this._util }, extra)
+        util.extend({ type: type, tree: this, util: this._util }, extra)
       );
       // } else {
-      //   this.logError(`Triggering undefined event '${name}'.`)
+      //   this.logError(`Triggering undefined event '${type}'.`)
     }
   }
 
@@ -610,35 +638,33 @@ export class Wunderbaum {
   }
 
   /** Return the topmost visible node in the viewport. */
-  protected _firstNodeInView(complete = true) {
+  getTopmostVpNode(complete = true) {
+    const gracePx = 1; // ignore subpixel scrolling
+    const scrollParent = this.element;
+    // const headerHeight = this.headerElement.clientHeight;  // May be 0
+    const scrollTop = scrollParent.scrollTop; // + headerHeight;
     let topIdx: number;
-    const gracePy = 1; // ignore subpixel scrolling
 
     if (complete) {
-      topIdx = Math.ceil(
-        (this.scrollContainer.scrollTop - gracePy) / ROW_HEIGHT
-      );
+      topIdx = Math.ceil((scrollTop - gracePx) / ROW_HEIGHT);
     } else {
-      topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
+      topIdx = Math.floor(scrollTop / ROW_HEIGHT);
     }
     return this._getNodeByRowIdx(topIdx)!;
   }
 
   /** Return the lowest visible node in the viewport. */
-  protected _lastNodeInView(complete = true) {
+  getLowestVpNode(complete = true) {
+    const scrollParent = this.element;
+    const headerHeight = this.headerElement.clientHeight; // May be 0
+    const scrollTop = scrollParent.scrollTop;
+    const clientHeight = scrollParent.clientHeight - headerHeight;
     let bottomIdx: number;
+
     if (complete) {
-      bottomIdx =
-        Math.floor(
-          (this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
-            ROW_HEIGHT
-        ) - 1;
+      bottomIdx = Math.floor((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
     } else {
-      bottomIdx =
-        Math.ceil(
-          (this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
-            ROW_HEIGHT
-        ) - 1;
+      bottomIdx = Math.ceil((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
     }
     bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
     return this._getNodeByRowIdx(bottomIdx)!;
@@ -868,7 +894,7 @@ export class Wunderbaum {
    * Return `tree.option.NAME` (also resolving if this is a callback).
    *
    * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
-   * to consider `node.NAME` setting and `tree.types[node.type].NAME`.
+   * to evaluate `node.NAME` setting and `tree.types[node.type].NAME`.
    *
    * @param name option name (use dot notation to access extension option, e.g.
    * `filter.mode`)
@@ -889,36 +915,52 @@ export class Wunderbaum {
       value = value({ type: "resolve", tree: this });
     }
     // Use value from value options dict, fallback do default
+    // console.info(name, value, opts)
     return value ?? defaultValue;
   }
 
   /**
-   *
-   * @param name
-   * @param value
+   * Set tree option.
+   * Use dot notation to set plugin option, e.g. "filter.mode".
    */
   setOption(name: string, value: any): void {
-    if (name.indexOf(".") === -1) {
-      (this.options as any)[name] = value;
-      // switch (name) {
-      //   case value:
-      //     break;
-      //   default:
-      //     break;
-      // }
+    // this.log(`setOption(${name}, ${value})`);
+    if (name.indexOf(".") >= 0) {
+      const parts = name.split(".");
+      const ext = this.extensions[parts[0]];
+      ext!.setPluginOption(parts[1], value);
       return;
     }
-    const parts = name.split(".");
-    const ext = this.extensions[parts[0]];
-    ext!.setPluginOption(parts[1], value);
+    (this.options as any)[name] = value;
+    switch (name) {
+      case "checkbox":
+        this.setModified(ChangeType.any, { removeMarkup: true });
+        break;
+      case "enabled":
+        this.setEnabled(!!value);
+        break;
+      case "fixedCol":
+        this.element.classList.toggle("wb-fixed-col", !!value);
+        break;
+    }
   }
 
-  /**Return true if the tree (or one of its nodes) has the input focus. */
+  /** Return true if the tree (or one of its nodes) has the input focus. */
   hasFocus() {
     return this.element.contains(document.activeElement);
   }
 
-  /** Run code, but defer `updateViewport()` until done. */
+  /**
+   * Return true if the tree displays a header. Grids have a header unless the
+   * `header` option is set to `false`. Plain trees have a header if the `header`
+   * option is a string or `true`.
+   */
+  hasHeader() {
+    const header = this.options.header;
+    return this.isGrid() ? header !== false : !!header;
+  }
+
+  /** Run code, but defer rendering of viewport until done. */
   runWithoutUpdate(func: () => any, hint = null): void {
     try {
       this.enableUpdate(false);
@@ -942,6 +984,18 @@ export class Wunderbaum {
     }
   }
 
+  /** Recursively select all nodes. */
+  selectAll(flag: boolean = true) {
+    try {
+      this.enableUpdate(false);
+      this.visit((node) => {
+        node.setSelected(flag);
+      });
+    } finally {
+      this.enableUpdate(true);
+    }
+  }
+
   /** Return the number of nodes in the data model.*/
   count(visible = false): number {
     if (visible) {
@@ -987,6 +1041,18 @@ export class Wunderbaum {
     return this.root.findFirst(match);
   }
 
+  /**
+   * 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 {@link WunderbaumNode.findFirst}
+   *
+   */
+  findKey(key: string): WunderbaumNode | undefined {
+    return this.keyMap.get(key);
+  }
+
   /**
    * Find the next visible node that starts with `match`, starting at `startNode`
    * and wrap-around at the end.
@@ -1037,7 +1103,9 @@ export class Wunderbaum {
    */
   findRelatedNode(node: WunderbaumNode, where: string, includeHidden = false) {
     let res = null;
-    const pageSize = Math.floor(this.scrollContainer.clientHeight / ROW_HEIGHT);
+    const pageSize = Math.floor(
+      this.scrollContainerElement.clientHeight / ROW_HEIGHT
+    );
 
     switch (where) {
       case "parent":
@@ -1094,7 +1162,7 @@ export class Wunderbaum {
         res = this._getNextNodeInView(node);
         break;
       case "pageDown":
-        const bottomNode = this._lastNodeInView();
+        const bottomNode = this.getLowestVpNode();
         // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
 
         if (node._rowIdx! < bottomNode._rowIdx!) {
@@ -1107,7 +1175,7 @@ export class Wunderbaum {
         if (node._rowIdx === 0) {
           res = node;
         } else {
-          const topNode = this._firstNodeInView();
+          const topNode = this.getTopmostVpNode();
           // this.logDebug(`${where}(${node}) -> ${topNode}`);
 
           if (node._rowIdx! > topNode._rowIdx!) {
@@ -1195,6 +1263,9 @@ export class Wunderbaum {
         parentCol
       );
       res.colIdx = idx;
+    } else if (cl.contains("wb-row")) {
+      // Plain tree
+      res.region = NodeRegion.title;
     } else {
       // Somewhere near the title
       if (event.type !== "mousemove" && !(event instanceof KeyboardEvent)) {
@@ -1205,7 +1276,7 @@ export class Wunderbaum {
     if (res.colIdx === -1) {
       res.colIdx = 0;
     }
-    res.colDef = tree?.columns[res.colIdx];
+    res.colDef = <any>tree?.columns[res.colIdx];
     res.colDef != null ? (res.colId = (<any>res.colDef).id) : 0;
     // this.log("Event", event, res);
     return res;
@@ -1225,7 +1296,7 @@ export class Wunderbaum {
    * @internal
    */
   toString() {
-    return "Wunderbaum<'" + this.id + "'>";
+    return `Wunderbaum<'${this.id}'>`;
   }
 
   /** Return true if any node is currently in edit-title mode. */
@@ -1302,72 +1373,130 @@ export class Wunderbaum {
   }
 
   /**
-   * 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 this node is vertically scrolled into the viewport.
    */
-  scrollTo(opts: any) {
-    const MARGIN = 1;
-    const node = opts.node || this.getActiveNode();
-    util.assert(node._rowIdx != null);
-    const curTop = this.scrollContainer.scrollTop;
-    const height = this.scrollContainer.clientHeight;
-    const nodeOfs = node._rowIdx * ROW_HEIGHT;
-    let newTop;
-
-    if (nodeOfs > curTop) {
-      if (nodeOfs + ROW_HEIGHT < curTop + height) {
+  scrollTo(nodeOrOpts: ScrollToOptions | WunderbaumNode) {
+    const PADDING = 2; // leave some pixels between viewport bounds
+
+    let node;
+    WunderbaumNode;
+    let opts: ScrollToOptions | undefined;
+
+    if (nodeOrOpts instanceof WunderbaumNode) {
+      node = nodeOrOpts;
+    } else {
+      opts = nodeOrOpts;
+      node = opts.node;
+    }
+    util.assert(node && node._rowIdx != null);
+
+    const scrollParent = this.element;
+    const headerHeight = this.headerElement.clientHeight; // May be 0
+    const scrollTop = scrollParent.scrollTop;
+    const vpHeight = scrollParent.clientHeight;
+    const rowTop = node._rowIdx! * ROW_HEIGHT + headerHeight;
+    const vpTop = headerHeight;
+    const vpRowTop = rowTop - scrollTop;
+    const vpRowBottom = vpRowTop + ROW_HEIGHT;
+
+    // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts );
+    let newScrollTop: number | null = null;
+    if (vpRowTop >= vpTop) {
+      if (vpRowBottom <= vpHeight) {
         // Already in view
+        // this.log("Already in view");
       } else {
         // Node is below viewport
-        newTop = nodeOfs - height + ROW_HEIGHT - MARGIN;
+        // this.log("Below viewport");
+        newScrollTop = rowTop + ROW_HEIGHT - vpHeight + PADDING; // leave some pixels between vieeport bounds
       }
-    } else if (nodeOfs < curTop) {
+    } else {
       // Node is above viewport
-      newTop = nodeOfs + MARGIN;
+      // this.log("Above viewport");
+      newScrollTop = rowTop - vpTop - PADDING; // leave some pixels between vieeport bounds
     }
-    if (newTop != null) {
-      this.log(
-        "scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop,
-        height
-      );
-      this.scrollContainer.scrollTop = newTop;
-      this.setModified(ChangeType.vscroll);
+    if (newScrollTop != null) {
+      this.log(`scrollTo(${rowTop}): ${scrollTop} => ${newScrollTop}`);
+      scrollParent.scrollTop = newScrollTop;
+      // this.setModified(ChangeType.vscroll);
     }
   }
 
+  /**
+   * Make sure that this node is horizontally scrolled into the viewport.
+   * Called by {@link setColumn}.
+   */
+  protected scrollToHorz() {
+    // const PADDING = 1;
+    const fixedWidth = this.columns[0]._widthPx!;
+    const vpWidth = this.element.clientWidth;
+    const scrollLeft = this.element.scrollLeft;
+    // if (scrollLeft <= 0) {
+    //   return; // Not scrolled horizontally: Nothing to do
+    // }
+    const colElem = this.getActiveColElem()!;
+    const colLeft = Number.parseInt(colElem?.style.left, 10);
+    const colRight = colLeft + Number.parseInt(colElem?.style.width, 10);
+    let newLeft = scrollLeft;
+
+    if (colLeft - scrollLeft < fixedWidth) {
+      // The current column is scrolled behind the left fixed column
+      newLeft = colLeft - fixedWidth;
+    } else if (colRight - scrollLeft > vpWidth) {
+      // The current column is scrolled outside the right side
+      newLeft = colRight - vpWidth;
+    }
+    // util.assert(node._rowIdx != null);
+    // const curLeft = this.scrollContainer.scrollLeft;
+    this.log(
+      `scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`
+    );
+    // const nodeOfs = node._rowIdx * ROW_HEIGHT;
+    // let newLeft;
+
+    this.element.scrollLeft = newLeft;
+    // this.setModified(ChangeType.vscroll);
+    // }
+  }
   /**
    * 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.
+   * Available in cell-nav mode only.
    */
   setColumn(colIdx: number) {
-    util.assert(this.navMode !== NavigationMode.row);
+    util.assert(this.isCellNav());
     util.assert(0 <= colIdx && colIdx < this.columns.length);
     this.activeColIdx = colIdx;
-    // node.setActive(true, { column: tree.activeColIdx + 1 });
-    this.setModified(ChangeType.row, this.activeNode);
+
     // Update `wb-active` class for all headers
-    if (this.headerElement) {
+    if (this.hasHeader()) {
       for (let rowDiv of this.headerElement.children) {
-        // for (let rowDiv of document.querySelector("div.wb-header").children) {
         let i = 0;
         for (let colDiv of rowDiv.children) {
           (colDiv as HTMLElement).classList.toggle("wb-active", i++ === colIdx);
         }
       }
     }
-    // Update `wb-active` class for all cell divs
+
+    this.activeNode?.setModified(ChangeType.status);
+
+    // Update `wb-active` class for all cell spans
     for (let rowDiv of this.nodeListElement.children) {
       let i = 0;
       for (let colDiv of rowDiv.children) {
         (colDiv as HTMLElement).classList.toggle("wb-active", i++ === colIdx);
       }
     }
+    // Vertical scroll into view
+    // if (this.options.fixedCol) {
+    this.scrollToHorz();
+    // }
+  }
+
+  /** Set or remove keybaord focus to the tree container. */
+  setActiveNode(key: string, flag: boolean = true, options?: SetActiveOptions) {
+    this.findKey(key)?.setActive(flag, options);
   }
 
   /** Set or remove keybaord focus to the tree container. */
@@ -1388,7 +1517,7 @@ export class Wunderbaum {
   setModified(
     change: ChangeType,
     node?: WunderbaumNode | any,
-    options?: any
+    options?: SetModifiedOptions
   ): void {
     if (this._disableUpdateCount) {
       // Assuming that we redraw all when enableUpdate() is re-enabled.
@@ -1402,73 +1531,159 @@ export class Wunderbaum {
       options = node;
     }
     const immediate = !!util.getOption(options, "immediate");
+    const removeMarkup = !!util.getOption(options, "removeMarkup");
+    if (removeMarkup) {
+      this.visit((n) => {
+        n.removeMarkup();
+      });
+    }
 
+    let callUpdate = false;
     switch (change) {
       case ChangeType.any:
       case ChangeType.structure:
       case ChangeType.header:
         this.changeRedrawRequestPending = true;
-        this.updateViewport(immediate);
+        callUpdate = true;
         break;
       case ChangeType.vscroll:
-        this.updateViewport(immediate);
+        this.changeScrollRequestPending = true;
+        callUpdate = true;
         break;
       case ChangeType.row:
+      case ChangeType.data:
       case ChangeType.status:
-        // Single nodes are immedialtely updated if already inside the viewport
+        // Single nodes are immediately updated if already inside the viewport
         // (otherwise we can ignore)
         if (node._rowElem) {
-          node.render();
+          node.render({ change: change });
         }
         break;
       default:
         util.error(`Invalid change type ${change}`);
     }
+    if (callUpdate) {
+      if (immediate) {
+        this._updateViewportImmediately();
+      } else {
+        this._updateViewportThrottled();
+      }
+    }
+  }
+
+  /** Disable mouse and keyboard interaction (return prev. state). */
+  setEnabled(flag: boolean = true): boolean {
+    const prev = this.enabled;
+    this.enabled = !!flag;
+    this.element.classList.toggle("wb-disabled", !flag);
+    return prev;
+  }
+
+  /** Return false if tree is disabled. */
+  isEnabled(): boolean {
+    return this.enabled;
+  }
+
+  /** Return true if tree has more than one column, i.e. has additional data columns. */
+  isGrid(): boolean {
+    return this.columns && this.columns.length > 1;
+  }
+
+  /** Return true if cell-navigation mode is acive. */
+  isCellNav(): boolean {
+    return !!this._cellNavMode;
+  }
+  /** Return true if row-navigation mode is acive. */
+  isRowNav(): boolean {
+    return !this._cellNavMode;
   }
 
   /** 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) {
+  setCellNav(flag: boolean = true) {
+    const prev = this._cellNavMode;
+    // if (flag === prev) {
+    //   return;
+    // }
+    this._cellNavMode = !!flag;
+    if (flag && !prev) {
+      // switch from row to cell mode
+      this.setColumn(0);
+    }
+    this.element.classList.toggle("wb-cell-mode", flag);
+    this.activeNode?.setModified(ChangeType.status);
+  }
+
+  /** Set the tree's navigation mode option. */
+  setNavigationOption(mode: NavigationOptions, reset = false) {
+    if (!this.isGrid() && mode !== NavigationOptions.row) {
+      this.logWarn("Plain trees only support row navigation mode.");
       return;
     }
-    const prevMode = this.navMode;
-    const cellMode = mode !== NavigationMode.row;
+    this.options.navigationModeOption = mode;
 
-    this.navMode = mode;
-    if (cellMode && prevMode === NavigationMode.row) {
-      this.setColumn(0);
+    switch (mode) {
+      case NavigationOptions.cell:
+        this.setCellNav(true);
+        break;
+      case NavigationOptions.row:
+        this.setCellNav(false);
+        break;
+      case NavigationOptions.startCell:
+        if (reset) {
+          this.setCellNav(true);
+        }
+        break;
+      case NavigationOptions.startRow:
+        if (reset) {
+          this.setCellNav(false);
+        }
+        break;
+      default:
+        util.error(`Invalid mode '${mode}'`);
     }
-    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,
-    details?: string
+    options?: SetStatusOptions
   ): WunderbaumNode | null {
-    return this.root.setStatus(status, message, details);
+    return this.root.setStatus(status, options);
+  }
+  /** Add or redefine node type definitions. */
+  setTypes(types: any, replace = true) {
+    util.assert(util.isPlainObject(types));
+    if (replace) {
+      this.types = types;
+    } else {
+      util.extend(this.types, types);
+    }
+    // Convert `TYPE.classes` to a Set
+    for (let t of Object.values(this.types) as any) {
+      if (t.classes) {
+        t.classes = util.toSet(t.classes);
+      }
+    }
   }
-
   /** Update column headers and width. */
   updateColumns(opts?: any) {
     opts = Object.assign({ calculateCols: true, updateRows: true }, opts);
-    const minWidth = 4;
+    const defaultMinWidth = 4;
     const vpWidth = this.element.clientWidth;
+    const isGrid = this.isGrid();
+
+    let totalWidth = 0;
     let totalWeight = 0;
     let fixedWidth = 0;
-
     let modified = false;
 
+    this.element.classList.toggle("wb-grid", isGrid);
+    if (!isGrid && this.isCellNav()) {
+      this.setCellNav(false);
+    }
+
     if (opts.calculateCols) {
-      // Gather width requests
+      // Gather width definitions
       this._columnsById = {};
       for (let col of this.columns) {
         this._columnsById[<string>col.id] = col;
@@ -1489,7 +1704,7 @@ export class Wunderbaum {
           }
           fixedWidth += px;
         } else {
-          util.error("Invalid column width: " + cw);
+          util.error(`Invalid column width: ${cw}`);
         }
       }
       // Share remaining space between non-fixed columns
@@ -1497,7 +1712,17 @@ export class Wunderbaum {
       let ofsPx = 0;
 
       for (let col of this.columns) {
+        let minWidth: number;
+
         if (col._weight) {
+          const cmw = col.minWidth;
+          if (typeof cmw === "number") {
+            minWidth = cmw;
+          } else if (typeof cmw === "string" && cmw.endsWith("px")) {
+            minWidth = parseFloat(cmw.slice(0, -2));
+          } else {
+            minWidth = defaultMinWidth;
+          }
           const px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
           if (col._widthPx != px) {
             modified = true;
@@ -1505,9 +1730,17 @@ export class Wunderbaum {
           }
         }
         col._ofsPx = ofsPx;
-        ofsPx += col._widthPx;
+        ofsPx += col._widthPx!;
       }
+      totalWidth = ofsPx;
     }
+    // if (this.options.fixedCol) {
+    // 'position: fixed' requires that the content has the correct size
+    const tw = `${totalWidth}px`;
+    this.headerElement.style.width = tw;
+    this.scrollContainerElement!.style.width = tw;
+    // }
+
     // Every column has now a calculated `_ofsPx` and `_widthPx`
     // this.logInfo("UC", this.columns, vpWidth, this.element.clientWidth, this.element);
     // console.trace();
@@ -1524,108 +1757,138 @@ export class Wunderbaum {
    * @internal
    */
   protected _renderHeaderMarkup() {
-    if (!this.headerElement) {
+    util.assert(this.headerElement);
+    const wantHeader = this.hasHeader();
+    util.setElemDisplay(this.headerElement, wantHeader);
+    if (!wantHeader) {
       return;
     }
+    const colCount = this.columns.length;
     const headerRow = this.headerElement.querySelector(".wb-row")!;
     util.assert(headerRow);
-    headerRow.innerHTML = "<span class='wb-col'></span>".repeat(
-      this.columns.length
-    );
+    headerRow.innerHTML = "<span class='wb-col'></span>".repeat(colCount);
 
-    for (let i = 0; i < this.columns.length; i++) {
+    for (let i = 0; i < colCount; 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>`;
+      let tooltip = "";
+      if (col.tooltip) {
+        tooltip = util.escapeTooltip(col.tooltip);
+        tooltip = ` title="${tooltip}"`;
+      }
+      let resizer = "";
+      if (i < colCount - 1) {
+        resizer = '<span class="wb-col-resizer"></span>';
+      }
+      colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
     }
   }
 
-  /** 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:
-    this._updateViewportThrottled();
-    if (immediate) {
-      this._updateViewportThrottled.flush();
+  /**
+   * Render pending changes that were scheduled using {@link WunderbaumNode.setModified} if any.
+   *
+   * This is hardly ever neccessary, since we normally either
+   * - call `setModified(ChangeType.TYPE)` (async, throttled), or
+   * - call `setModified(ChangeType.TYPE, {immediate: true})` (synchronous)
+   *
+   * `updatePendingModifications()` will only force immediate execution of
+   * pending async changes if any.
+   */
+  updatePendingModifications() {
+    if (this.changeRedrawRequestPending || this.changeScrollRequestPending) {
+      this._updateViewportImmediately();
     }
   }
 
   /**
    * 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()`.
+   *
+   * This protected method should not be called directly but via
+   * {@link WunderbaumNode.setModified}`, {@link Wunderbaum.setModified},
+   * or {@link Wunderbaum.updatePendingModifications}.
    * @internal
    */
-  protected _updateViewport() {
+  protected _updateViewportImmediately() {
     if (this._disableUpdateCount) {
       this.log(
-        `IGNORED _updateViewport() disable level: ${this._disableUpdateCount}`
+        `IGNORED _updateViewportImmediately() disable level: ${this._disableUpdateCount}`
       );
       return;
     }
     const newNodesOnly = !this.changeRedrawRequestPending;
     this.changeRedrawRequestPending = false;
+    this.changeScrollRequestPending = false;
 
-    let height = this.scrollContainer.clientHeight;
+    let height = this.scrollContainerElement.clientHeight;
     // 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 headerHeight = this.options.headerHeightPx;
+    const headerHeight = this.headerElement.clientHeight; // May be 0
     const wantHeight = this.element.clientHeight - headerHeight;
 
     if (Math.abs(height - wantHeight) > 1.0) {
       // this.log("resize", height, wantHeight);
-      this.scrollContainer.style.height = wantHeight + "px";
+      this.scrollContainerElement.style.height = wantHeight + "px";
       height = wantHeight;
     }
+    // console.profile(`_updateViewportImmediately()`)
 
     this.updateColumns({ updateRows: false });
 
     this._updateRows({ newNodesOnly: newNodesOnly });
 
+    // console.profileEnd(`_updateViewportImmediately()`)
+
+    if (this.options.connectTopBreadcrumb) {
+      let path = this.getTopmostVpNode(true)?.getPath(false, "title", " > ");
+      path = path ? path + " >" : "";
+      this.options.connectTopBreadcrumb.textContent = path;
+    }
     this._callEvent("update");
   }
 
-  /**
-   * 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;
-  }
+  // /**
+  //  * 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 (prev >= 0 && top !== prev + ROW_HEIGHT) {
+  //       n.logWarn(
+  //         `TR order mismatch at index ${i}: top=${top}px != ${
+  //           prev + ROW_HEIGHT
+  //         }`
+  //       );
+  //       // throw new Error("fault");
+  //       ok = false;
+  //     }
+  //     prev = top;
+  //     i++;
+  //   });
+  //   return ok;
+  // }
 
   /*
-   * - Traverse all *visible* of the whole tree, i.e. skip collapsed nodes.
+   * - Traverse all *visible* nodes 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
@@ -1633,15 +1896,15 @@ export class Wunderbaum {
    * -
    */
   protected _updateRows(opts?: any): boolean {
-    const label = this.logTime("_updateRows");
-
+    // const label = this.logTime("_updateRows");
+    // this.log("_updateRows", opts)
     opts = Object.assign({ newNodesOnly: false }, opts);
     const newNodesOnly = !!opts.newNodesOnly;
 
     const row_height = ROW_HEIGHT;
-    const vp_height = this.scrollContainer.clientHeight;
+    const vp_height = this.element.clientHeight;
     const prefetch = RENDER_MAX_PREFETCH;
-    const ofs = this.scrollContainer.scrollTop;
+    const ofs = this.element.scrollTop;
 
     let startIdx = Math.max(0, ofs / row_height - prefetch);
     startIdx = Math.floor(startIdx);
@@ -1669,7 +1932,7 @@ export class Wunderbaum {
     let prevElem: HTMLDivElement | "first" | "last" = "first";
 
     this.visitRows(function (node) {
-      // console.log("visit", node)
+      // node.log("visit")
       const rowDiv = node._rowElem;
 
       // Renumber all expanded nodes
@@ -1691,8 +1954,11 @@ export class Wunderbaum {
       } else {
         obsoleteNodes.delete(node);
         // Create new markup
+        if (rowDiv) {
+          rowDiv.style.top = idx * ROW_HEIGHT + "px";
+        }
         node.render({ top: top, after: prevElem });
-        // console.log("render", top, prevElem, "=>", node._rowElem);
+        // node.log("render", top, prevElem, "=>", node._rowElem);
         prevElem = node._rowElem!;
       }
       idx++;
@@ -1709,8 +1975,8 @@ export class Wunderbaum {
     //   `render(scrollOfs:${ofs}, ${startIdx}..${endIdx})`,
     //   this.nodeListElement.style.height
     // );
-    this.logTimeEnd(label);
-    this._validateRows();
+    // this.logTimeEnd(label);
+    // this._validateRows();
     return modified;
   }
 
@@ -1891,17 +2157,11 @@ export class Wunderbaum {
   /**
    * 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`).
+   * Previous data is cleared. Note that also column- and type defintions may
+   * be passed with the `source` object.
    */
-  load(source: any, options: any = {}) {
+  load(source: any) {
     this.clear();
-    const columns = options.columns || source.columns;
-    if (columns) {
-      this.columns = options.columns;
-      // this._renderHeaderMarkup();
-      this.updateColumns({ calculateCols: false });
-    }
     return this.root.load(source);
   }
 
@@ -1913,7 +2173,7 @@ export class Wunderbaum {
    *   tree.enableUpdate(false);
    *   // ... (long running operation that would trigger many updates)
    *   foo();
-   *   // ... NOTE: make sure that async operations have finished
+   *   // ... NOTE: make sure that async operations have finished, e.g.
    *   await foo();
    * } finally {
    *   tree.enableUpdate(true);
@@ -1937,7 +2197,9 @@ export class Wunderbaum {
       //   `enableUpdate(${flag}): count -> ${this._disableUpdateCount}...`
       // );
       if (this._disableUpdateCount === 0) {
-        this.updateViewport();
+        // this.changeRedrawRequestPending = true; // make sure, we re-render all markup
+        // this.updateViewport();
+        this.setModified(ChangeType.any, { immediate: true });
       }
     } else {
       this._disableUpdateCount++;