wunderbaum 0.2.0 → 0.3.0

package/dist/wunderbaum.umd.js

@@ -6,8 +6,8 @@
 
   /*!
    * Wunderbaum - util
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   /** @module util */
   /** Readable names for `MouseEvent.button` */
@@ -183,17 +183,19 @@
    * the element is checked, unchecked, or indeterminate.
    * For datetime input control a numerical value is assumed, etc.
    *
-   * Common use case: store the new user input in the `change` event:
+   * Common use case: store the new user input in a `change` event handler:
    *
    * ```ts
    *   change: (e) => {
+   *     const tree = e.tree;
+   *     const node = e.node;
    *     // Read the value from the input control that triggered the change event:
-   *     let value = e.tree.getValueFromElem(e.element);
-   *     //
-   *     e.node.data[]
+   *     let value = tree.getValueFromElem(e.element);
+   *     // and store it to the node model (assuming the column id matches the property name)
+   *     node.data[e.info.colId] = value;
    *   },
    * ```
-   * @param elem `<input>` or `<select>` element Also a parent `span.wb-col` is accepted.
+   * @param elem `<input>` or `<select>` element. Also a parent `span.wb-col` is accepted.
    * @param coerce pass true to convert date/time inputs to `Date`.
    * @returns the value
    */
@@ -257,6 +259,23 @@
    * value is truethy, falsy, or `null`.
    * For datetime input control a numerical value is assumed, etc.
    *
+   * Common use case: update embedded input controls in a `render` event handler:
+   *
+   * ```ts
+   *   render: (e) => {
+   *     // e.node.log(e.type, e, e.node.data);
+   *
+   *     for (const col of Object.values(e.renderColInfosById)) {
+   *       switch (col.id) {
+   *         default:
+   *           // Assumption: we named column.id === node.data.NAME
+   *           util.setValueToElem(col.elem, e.node.data[col.id]);
+   *           break;
+   *       }
+   *     }
+   *   },
+   * ```
+   *
    * @param elem `<input>` or `<select>` element Also a parent `span.wb-col` is accepted.
    * @param value a value that matches the target element.
    */
@@ -288,7 +307,6 @@
               case "datetime":
               case "datetime-local":
                   input.valueAsDate = new Date(value);
-                  // input.valueAsDate = value;  // breaks in Edge?
                   break;
               case "number":
               case "range":
@@ -300,7 +318,7 @@
                   }
                   break;
               case "radio":
-                  error("Not implemented");
+                  error(`Not yet implemented: ${type}`);
                   // const name = input.name;
                   // const checked = input.parentElement!.querySelector(
                   //   `input[name="${name}"]:checked`
@@ -327,7 +345,7 @@
           }
       }
   }
-  /** Show/hide element by setting the `display`style to 'none'. */
+  /** Show/hide element by setting the `display` style to 'none'. */
   function setElemDisplay(elem, flag) {
       const style = elemFromSelector(elem).style;
       if (flag) {
@@ -372,7 +390,23 @@
    * The result also contains a prefix for modifiers if any, for example
    * `"x"`, `"F2"`, `"Control+Home"`, or `"Shift+clickright"`.
    * This is especially useful in `switch` statements, to make sure that modifier
-   * keys are considered and handled correctly.
+   * keys are considered and handled correctly:
+   * ```ts
+   *   const eventName = util.eventToString(e);
+   *   switch (eventName) {
+   *     case "+":
+   *     case "Add":
+   *       ...
+   *       break;
+   *     case "Enter":
+   *     case "End":
+   *     case "Control+End":
+   *     case "Meta+ArrowDown":
+   *     case "PageDown":
+   *       ...
+   *       break;
+   *   }
+   * ```
    */
   function eventToString(event) {
       let key = event.key, et = event.type, s = [];
@@ -597,6 +631,21 @@
       }
       throw new Error("Cannot convert to Set<string>: " + val);
   }
+  // /** Check if a string is contained in an Array or Set. */
+  // export function isAnyOf(s: string, items: Array<string>|Set<string>): boolean {
+  //   return Array.prototype.includes.call(items, s)
+  // }
+  // /** Check if an Array or Set has at least one matching entry. */
+  // export function hasAnyOf(container: Array<string>|Set<string>, items: Array<string>): boolean {
+  //   if (Array.isArray(container)) {
+  //     return container.some(v => )
+  //   }
+  //   return container.some(v => {})
+  //   // const container = toSet(items);
+  //   // const itemSet = toSet(items);
+  //   // Array.prototype.includes
+  //   // throw new Error("Cannot convert to Set<string>: " + val);
+  // }
   /** Return a canonical string representation for an object's type (e.g. 'array', 'number', ...). */
   function type(obj) {
       return Object.prototype.toString
@@ -712,28 +761,40 @@
 
   /*!
    * Wunderbaum - types
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
+   */
+  /**
+   * Possible values for {@link WunderbaumNode.setModified()} and {@link Wunderbaum.setModified()}.
    */
-  /** Possible values for `setModified()`. */
   var ChangeType;
   (function (ChangeType) {
       /** Re-render the whole viewport, headers, and all rows. */
       ChangeType["any"] = "any";
-      /** Update current row title, icon, columns, and status. */
+      /** A node's title, icon, columns, or status have changed. Update the existing row markup. */
       ChangeType["data"] = "data";
-      /** Redraw the header and update the width of all row columns. */
-      ChangeType["header"] = "header";
-      /** Re-render the whole current row. */
+      /** The `tree.columns` definition has changed beyond simple width adjustments. */
+      ChangeType["colStructure"] = "colStructure";
+      /** The viewport/window was resized. Adjust layout attributes for all elements. */
+      ChangeType["resize"] = "resize";
+      /** A node's definition has changed beyond status and data. Re-render the whole row's markup. */
       ChangeType["row"] = "row";
-      /** Alias for 'any'. */
+      /** Nodes have been added, removed, etc. Update markup. */
       ChangeType["structure"] = "structure";
-      /** Update current row's classes, to reflect active, selected, ... */
+      /** A node's status has changed. Update current row's classes, to reflect active, selected, ... */
       ChangeType["status"] = "status";
-      /** Update the 'top' property of all rows. */
-      ChangeType["vscroll"] = "vscroll";
+      /** Vertical scroll event. Update the 'top' property of all rows. */
+      ChangeType["scroll"] = "scroll";
   })(ChangeType || (ChangeType = {}));
-  /** Possible values for `setStatus()`. */
+  /* Internal use. */
+  var RenderFlag;
+  (function (RenderFlag) {
+      RenderFlag["clearMarkup"] = "clearMarkup";
+      RenderFlag["header"] = "header";
+      RenderFlag["redraw"] = "redraw";
+      RenderFlag["scroll"] = "scroll";
+  })(RenderFlag || (RenderFlag = {}));
+  /** Possible values for {@link WunderbaumNode.setStatus()}. */
   var NodeStatusType;
   (function (NodeStatusType) {
       NodeStatusType["ok"] = "ok";
@@ -764,8 +825,8 @@
 
   /*!
    * Wunderbaum - wb_extension_base
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   class WunderbaumExtension {
       constructor(tree, id, defaults) {
@@ -1055,8 +1116,8 @@
 
   /*!
    * Wunderbaum - ext-filter
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   const START_MARKER = "\uFFF7";
   const END_MARKER = "\uFFF8";
@@ -1356,8 +1417,8 @@
 
   /*!
    * Wunderbaum - ext-keynav
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   const QUICKSEARCH_DELAY = 500;
   class KeynavExtension extends WunderbaumExtension {
@@ -1696,8 +1757,8 @@
 
   /*!
    * Wunderbaum - ext-logger
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   class LoggerExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -1736,8 +1797,8 @@
 
   /*!
    * Wunderbaum - common
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
   /**
@@ -1859,6 +1920,12 @@
           return reMatch.test(node.title);
       };
   }
+  /** Compare two nodes by title (case-insensitive). */
+  function nodeTitleSorter(a, b) {
+      const x = a.title.toLowerCase();
+      const y = b.title.toLowerCase();
+      return x === y ? 0 : x > y ? 1 : -1;
+  }
   function unflattenSource(source) {
       var _a, _b, _c;
       const { _format, _keyMap, _positional, children } = source;
@@ -1976,8 +2043,8 @@
 
   /*!
    * Wunderbaum - ext-dnd
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   const nodeMimeType = "application/x-wunderbaum-node";
   class DndExtension extends WunderbaumExtension {
@@ -2088,6 +2155,7 @@
               // Only 'before' and 'after':
               return dy > ROW_HEIGHT / 2 ? "after" : "before";
           }
+          // return "over";
       }
       /* Implement auto scrolling when drag cursor is in top/bottom area of scroll parent. */
       autoScroll(event) {
@@ -2162,6 +2230,8 @@
       }
       onDropEvent(e) {
           // const isLink = event.dataTransfer.types.includes("text/uri-list");
+          const srcNode = this.srcNode;
+          const srcTree = srcNode ? srcNode.tree : null;
           const targetNode = Wunderbaum.getNode(e);
           const dndOpts = this.treeOpts.dnd;
           const dt = e.dataTransfer;
@@ -2169,7 +2239,7 @@
               this._leaveNode();
               return;
           }
-          if (e.type !== "dragover") {
+          if (!["dragenter", "dragover", "dragleave"].includes(e.type)) {
               this.tree.logDebug("onDropEvent." +
                   e.type +
                   " targetNode: " +
@@ -2190,9 +2260,24 @@
               this.lastTargetNode = targetNode;
               this.lastEnterStamp = Date.now();
               if (
-              // Don't allow void operation ('drop on self')
-              (dndOpts.preventVoidMoves && targetNode === this.srcNode) ||
-                  targetNode.isStatusNode()) {
+              // Don't drop on status node:
+              targetNode.isStatusNode() ||
+                  // Prevent dropping nodes from different Wunderbaum trees:
+                  (dndOpts.preventForeignNodes && targetNode.tree !== srcTree) ||
+                  // Prevent dropping items on unloaded lazy Wunderbaum tree nodes:
+                  (dndOpts.preventLazyParents && !targetNode.isLoaded()) ||
+                  // Prevent dropping items other than Wunderbaum tree nodes:
+                  (dndOpts.preventNonNodes && !srcNode) ||
+                  // Prevent dropping nodes on own descendants:
+                  (dndOpts.preventRecursion &&
+                      srcNode &&
+                      srcNode.isAncestorOf(targetNode)) ||
+                  // Prevent dropping nodes under same direct parent:
+                  (dndOpts.preventSameParent &&
+                      srcNode &&
+                      targetNode.parent === srcNode.parent) ||
+                  // Don't allow void operation ('drop on self'): TODO: should be checke onn  move only
+                  (dndOpts.preventVoidMoves && targetNode === srcNode)) {
                   dt.dropEffect = "none";
                   return true; // Prevent drop operation
               }
@@ -2238,9 +2323,11 @@
           else if (e.type === "drop") {
               e.stopPropagation(); // prevent browser from opening links?
               this._leaveNode();
+              const region = this.lastDropRegion;
               targetNode._callEvent("dnd.drop", {
                   event: e,
-                  region: this.lastDropRegion,
+                  region: region,
+                  defaultDropMode: region === "over" ? "appendChild" : region,
                   sourceNode: this.srcNode,
               });
           }
@@ -2249,8 +2336,8 @@
 
   /*!
    * Wunderbaum - drag_observer
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2385,8 +2472,8 @@
 
   /*!
    * Wunderbaum - ext-grid
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   class GridExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -2422,8 +2509,8 @@
 
   /*!
    * Wunderbaum - deferred
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -2475,8 +2562,8 @@
 
   /*!
    * Wunderbaum - wunderbaum_node
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   /** Top-level properties that can be passed with `data`. */
   const NODE_PROPS = new Set([
@@ -2713,9 +2800,9 @@
        * @param [mode=child] 'before', 'after', 'firstChild', or 'child' ('over' is a synonym for 'child')
        * @returns new node
        */
-      addNode(nodeData, mode = "child") {
+      addNode(nodeData, mode = "appendChild") {
           if (mode === "over") {
-              mode = "child"; // compatible with drop region
+              mode = "appendChild"; // compatible with drop region
           }
           switch (mode) {
               case "after":
@@ -2724,11 +2811,11 @@
                   });
               case "before":
                   return this.parent.addChildren(nodeData, { before: this });
-              case "firstChild":
+              case "prependChild":
                   // Insert before the first child if any
                   // let insertBefore = this.children ? this.children[0] : undefined;
                   return this.addChildren(nodeData, { before: 0 });
-              case "child":
+              case "appendChild":
                   return this.addChildren(nodeData);
           }
           assert(false, "Invalid mode: " + mode);
@@ -3123,8 +3210,17 @@
        * an expand operation is currently possible.
        */
       isExpandable(andCollapsed = false) {
-          // return !!this.children && (!this.expanded || !andCollapsed);
-          return !!(this.children || this.lazy) && (!this.expanded || !andCollapsed);
+          // `false` is never expandable (unoffical)
+          if ((andCollapsed && this.expanded) || this.children === false) {
+              return false;
+          }
+          if (this.children == null) {
+              return this.lazy; // null or undefined can trigger lazy load
+          }
+          if (this.children.length === 0) {
+              return !!this.tree.options.emptyChildListExpandable;
+          }
+          return true;
       }
       /** Return true if this node is currently in edit-title mode. */
       isEditing() {
@@ -3258,7 +3354,7 @@
               tree.logInfo("Redefine columns", source.columns);
               tree.columns = source.columns;
               delete source.columns;
-              tree.updateColumns({ calculateCols: false });
+              tree.setModified(ChangeType.colStructure);
           }
           this.addChildren(source.children);
           // Add extra data to `tree.data`
@@ -3270,12 +3366,50 @@
           }
           this._callEvent("load");
       }
+      async _fetchWithOptions(source) {
+          var _a, _b;
+          // Either a URL string or an object with a `.url` property.
+          let url, params, body, options, rest;
+          let fetchOpts = {};
+          if (typeof source === "string") {
+              // source is a plain URL string: assume GET request
+              url = source;
+              fetchOpts.method = "GET";
+          }
+          else if (isPlainObject(source)) {
+              // source is a plain object with `.url` property.
+              ({ url, params, body, options, ...rest } = source);
+              assert(typeof url === "string", `expected source.url as string`);
+              if (isPlainObject(options)) {
+                  fetchOpts = options;
+              }
+              if (isPlainObject(body)) {
+                  // we also accept 'body' as object...
+                  assert(!fetchOpts.body, "options.body should be passed as source.body");
+                  fetchOpts.body = JSON.stringify(fetchOpts.body);
+                  (_a = fetchOpts.method) !== null && _a !== void 0 ? _a : (fetchOpts.method = "POST"); // set default
+              }
+              if (isPlainObject(params)) {
+                  url += "?" + new URLSearchParams(params);
+                  (_b = fetchOpts.method) !== null && _b !== void 0 ? _b : (fetchOpts.method = "GET"); // set default
+              }
+          }
+          else {
+              url = ""; // keep linter happy
+              error(`Unsupported source format: ${source}`);
+          }
+          this.setStatus(NodeStatusType.loading);
+          const response = await fetch(url, fetchOpts);
+          if (!response.ok) {
+              error(`GET ${url} returned ${response.status}, ${response}`);
+          }
+          return await response.json();
+      }
       /** Download  data from the cloud, then call `.update()`. */
       async load(source) {
           const tree = this.tree;
           const requestId = Date.now();
           const prevParent = this.parent;
-          const url = typeof source === "string" ? source : source.url;
           const start = Date.now();
           let elap = 0, elapLoad = 0, elapProcess = 0;
           // Check for overlapping requests
@@ -3286,17 +3420,16 @@
           this._requestId = requestId;
           // const timerLabel = tree.logTime(this + ".load()");
           try {
+              let url = typeof source === "string" ? source : source.url;
               if (!url) {
+                  // An array or a plain object (that does NOT contain a `.url` property)
+                  // will be treated as native Wunderbaum data
                   this._loadSourceObject(source);
                   elapProcess = Date.now() - start;
               }
               else {
-                  this.setStatus(NodeStatusType.loading);
-                  const response = await fetch(url, { method: "GET" });
-                  if (!response.ok) {
-                      error(`GET ${url} returned ${response.status}, ${response}`);
-                  }
-                  const data = await response.json();
+                  // Either a URL string or an object with a `.url` property.
+                  const data = await this._fetchWithOptions(source);
                   elapLoad = Date.now() - start;
                   if (this._requestId && this._requestId > requestId) {
                       this.logWarn(`Ignored load response #${requestId} because #${this._requestId} is pending.`);
@@ -3439,6 +3572,9 @@
       }
       /** Move this node to targetNode. */
       moveTo(targetNode, mode = "appendChild", map) {
+          if (mode === "over") {
+              mode = "appendChild"; // compatible with drop region
+          }
           if (mode === "prependChild") {
               if (targetNode.children && targetNode.children.length) {
                   mode = "before";
@@ -3495,7 +3631,7 @@
                       targetParent.children.splice(pos + 1, 0, this);
                       break;
                   default:
-                      error("Invalid mode " + mode);
+                      error(`Invalid mode '${mode}'.`);
               }
           }
           else {
@@ -3522,7 +3658,12 @@
                   n.tree = targetNode.tree;
               }, true);
           }
-          tree.setModified(ChangeType.structure);
+          // Make sure we update async, because discarding the markup would prevent
+          // DragAndDrop to generate a dragend event on the source node
+          setTimeout(() => {
+              // Even indentation may have changed:
+              tree.setModified(ChangeType.any);
+          }, 0);
           // TODO: fix selection state
           // TODO: fix active state
       }
@@ -3648,7 +3789,7 @@
               icon = iconMap.loading;
           }
           if (icon === false) {
-              return null;
+              return null; // explicitly disabled: don't try default icons
           }
           if (typeof icon === "string") ;
           else if (this.statusNodeType) {
@@ -3667,7 +3808,11 @@
               icon = iconMap.doc;
           }
           // this.log("_createIcon: " + icon);
-          if (icon.indexOf("<") >= 0) {
+          if (!icon) {
+              iconSpan = document.createElement("i");
+              iconSpan.className = "wb-icon";
+          }
+          else if (icon.indexOf("<") >= 0) {
               // HTML
               iconSpan = elemFromHtml(icon);
           }
@@ -3985,9 +4130,12 @@
               case "data":
                   this._render_data(opts);
                   break;
-              default:
+              case "row":
+                  // _rowElem is not yet created (asserted in _render_markup)
                   this._render_markup(opts);
                   break;
+              default:
+                  error(`Invalid change type '${opts.change}'.`);
           }
       }
       /**
@@ -4209,20 +4357,24 @@
           this.setModified();
       }
       /** Set a new icon path or class. */
-      setIcon() {
-          throw new Error("Not yet implemented");
-          // this.setModified();
+      setIcon(icon) {
+          this.icon = icon;
+          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.
+       * Trigger a repaint, typically after a status or data change.
        *
        * `change` defaults to 'data', which handles modifcations of title, icon,
        * and column content. It can be reduced to 'ChangeType.status' if only
        * active/focus/selected state has changed.
+       *
+       * This method will eventually call  {@link WunderbaumNode.render()} with
+       * default options, but may be more consistent with the tree's
+       * {@link Wunderbaum.setModified()} API.
        */
       setModified(change = ChangeType.data) {
           assert(change === ChangeType.status || change === ChangeType.data);
@@ -4258,7 +4410,7 @@
               let firstChild = children ? children[0] : null;
               assert(data.statusNodeType);
               assert(!firstChild || !firstChild.isStatusNode());
-              statusNode = this.addNode(data, "firstChild");
+              statusNode = this.addNode(data, "prependChild");
               statusNode.match = true;
               tree.setModified(ChangeType.structure);
               return statusNode;
@@ -4324,11 +4476,37 @@
           this.setModified();
           // this.triggerModify("rename"); // TODO
       }
+      _sortChildren(cmp, deep) {
+          const cl = this.children;
+          if (!cl) {
+              return;
+          }
+          cl.sort(cmp);
+          if (deep) {
+              for (let i = 0, l = cl.length; i < l; i++) {
+                  if (cl[i].children) {
+                      cl[i]._sortChildren(cmp, deep);
+                  }
+              }
+          }
+      }
+      /**
+       * Sort child list by title or custom criteria.
+       * @param {function} cmp custom compare function(a, b) that returns -1, 0, or 1
+       *    (defaults to sorting by title).
+       * @param {boolean} deep pass true to sort all descendant nodes recursively
+       */
+      sortChildren(cmp = nodeTitleSorter, deep = false) {
+          this._sortChildren(cmp || nodeTitleSorter, deep);
+          this.tree.setModified(ChangeType.structure);
+          // this.triggerModify("sort"); // TODO
+      }
       /**
        * Trigger `modifyChild` event on a parent to signal that a child was modified.
        * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
        */
       triggerModifyChild(operation, child, extra) {
+          this.logDebug(`modifyChild(${operation})`, extra, child);
           if (!this.tree.options.modifyChild)
               return;
           if (child && child.parent !== this) {
@@ -4427,8 +4605,8 @@
 
   /*!
    * Wunderbaum - ext-edit
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.2.0, Tue, 17 Jan 2023 19:26:18 GMT (https://github.com/mar10/wunderbaum)
+   * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
+   * v0.3.0, Sat, 27 May 2023 04:56:52 GMT (https://github.com/mar10/wunderbaum)
    */
   // const START_MARKER = "\uFFF7";
   class EditExtension extends WunderbaumExtension {
@@ -4719,12 +4897,12 @@
    *
    * A treegrid control.
    *
-   * Copyright (c) 2021-2022, Martin Wendt (https://wwWendt.de).
+   * Copyright (c) 2021-2023, Martin Wendt (https://wwWendt.de).
    * https://github.com/mar10/wunderbaum
    *
    * Released under the MIT license.
-   * @version v0.2.0
-   * @date Tue, 17 Jan 2023 19:26:18 GMT
+   * @version v0.3.0
+   * @date Sat, 27 May 2023 04:56:52 GMT
    */
   class WbSystemRoot extends WunderbaumNode {
       constructor(tree) {
@@ -4753,6 +4931,7 @@
           this.refKeyMap = new Map();
           this.treeRowCount = 0;
           this._disableUpdateCount = 0;
+          this._disableUpdateIgnoreCount = 0;
           /** Currently active node if any. */
           this.activeNode = null;
           /** Current node hat has keyboard focus if any. */
@@ -4763,8 +4942,7 @@
           this.columns = []; // any[] = [];
           this._columnsById = {};
           // Modification Status
-          this.changeRedrawRequestPending = false;
-          this.changeScrollRequestPending = false;
+          this.pendingChangeTypes = new Set();
           /** Expose some useful methods of the util.ts module as `tree._util`. */
           this._util = util;
           // --- FILTER ---
@@ -4800,6 +4978,7 @@
               showSpinner: false,
               checkbox: false,
               minExpandLevel: 0,
+              emptyChildListExpandable: false,
               updateThrottleWait: 200,
               skeleton: false,
               connectTopBreadcrumb: null,
@@ -4962,11 +5141,11 @@
           // --- Bind listeners
           this.element.addEventListener("scroll", (e) => {
               // this.log(`scroll, scrollTop:${e.target.scrollTop}`, e);
-              this.setModified(ChangeType.vscroll);
+              this.setModified(ChangeType.scroll);
           });
           this.resizeObserver = new ResizeObserver((entries) => {
-              this.setModified(ChangeType.vscroll);
               // this.log("ResizeObserver: Size changed", entries);
+              this.setModified(ChangeType.resize);
           });
           this.resizeObserver.observe(this.element);
           onEvent(this.nodeListElement, "click", "div.wb-row", (e) => {
@@ -5502,7 +5681,7 @@
           this.options[name] = value;
           switch (name) {
               case "checkbox":
-                  this.setModified(ChangeType.any, { removeMarkup: true });
+                  this.setModified(ChangeType.any);
                   break;
               case "enabled":
                   this.setEnabled(!!value);
@@ -5802,8 +5981,9 @@
               res.region = NodeRegion.title;
           }
           else if (cl.contains("wb-expander")) {
-              res.region =
-                  node.hasChildren() === false ? NodeRegion.prefix : NodeRegion.expander;
+              res.region = node.isExpandable()
+                  ? NodeRegion.expander
+                  : NodeRegion.prefix;
           }
           else if (cl.contains("wb-checkbox")) {
               res.region = NodeRegion.checkbox;
@@ -5954,7 +6134,7 @@
                   // Make sure the topNode is always visible
                   this.scrollTo(topNode);
               }
-              // this.setModified(ChangeType.vscroll);
+              // this.setModified(ChangeType.scroll);
           }
       }
       /**
@@ -5982,7 +6162,7 @@
           // util.assert(node._rowIdx != null);
           this.log(`scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`);
           this.element.scrollLeft = newLeft;
-          // this.setModified(ChangeType.vscroll);
+          // this.setModified(ChangeType.scroll);
       }
       /**
        * Set column #colIdx to 'active'.
@@ -6037,34 +6217,40 @@
               // this.log(
               //   `IGNORED setModified(${change}) node=${node} (disable level ${this._disableUpdateCount})`
               // );
+              this._disableUpdateIgnoreCount++;
               return;
           }
           // this.log(`setModified(${change}) node=${node}`);
           if (!(node instanceof WunderbaumNode)) {
               options = node;
+              node = null;
           }
           const immediate = !!getOption(options, "immediate");
-          const removeMarkup = !!getOption(options, "removeMarkup");
-          if (removeMarkup) {
-              this.visit((n) => {
-                  n.removeMarkup();
-              });
-          }
-          let callUpdate = false;
+          const RF = RenderFlag;
+          const pending = this.pendingChangeTypes;
           switch (change) {
               case ChangeType.any:
+              case ChangeType.colStructure:
+                  pending.add(RF.header);
+                  pending.add(RF.clearMarkup);
+                  pending.add(RF.redraw);
+                  pending.add(RF.scroll);
+                  break;
+              case ChangeType.resize:
+                  // case ChangeType.colWidth:
+                  pending.add(RF.header);
+                  pending.add(RF.redraw);
+                  break;
               case ChangeType.structure:
-              case ChangeType.header:
-                  this.changeRedrawRequestPending = true;
-                  callUpdate = true;
+                  pending.add(RF.redraw);
                   break;
-              case ChangeType.vscroll:
-                  this.changeScrollRequestPending = true;
-                  callUpdate = true;
+              case ChangeType.scroll:
+                  pending.add(RF.scroll);
                   break;
               case ChangeType.row:
               case ChangeType.data:
               case ChangeType.status:
+                  assert(node, `Option '${change}' requires a node.`);
                   // Single nodes are immediately updated if already inside the viewport
                   // (otherwise we can ignore)
                   if (node._rowElem) {
@@ -6072,9 +6258,16 @@
                   }
                   break;
               default:
-                  error(`Invalid change type ${change}`);
+                  error(`Invalid change type '${change}'.`);
+          }
+          if (change === ChangeType.colStructure) {
+              const isGrid = this.isGrid();
+              this.element.classList.toggle("wb-grid", isGrid);
+              if (!isGrid && this.isCellNav()) {
+                  this.setCellNav(false);
+              }
           }
-          if (callUpdate) {
+          if (pending.size > 0) {
               if (immediate) {
                   this._updateViewportImmediately();
               }
@@ -6146,7 +6339,7 @@
                   }
                   break;
               default:
-                  error(`Invalid mode '${mode}'`);
+                  error(`Invalid mode '${mode}'.`);
           }
       }
       /** Display tree status (ok, loading, error, noData) using styles and a dummy root node. */
@@ -6169,14 +6362,24 @@
               }
           }
       }
-      /** Update column headers and width.
+      /**
+       * Sort nodes list by title or custom criteria.
+       * @param {function} cmp custom compare function(a, b) that returns -1, 0, or 1
+       *    (defaults to sorting by title).
+       * @param {boolean} deep pass true to sort all descendant nodes recursively
+       */
+      sortChildren(cmp = nodeTitleSorter, deep = false) {
+          this.root.sortChildren(cmp, deep);
+      }
+      /**
+       * Update column headers and column width.
        * Return true if at least one column width changed.
        */
-      updateColumns(options) {
-          options = Object.assign({ calculateCols: true, updateRows: true }, options);
+      // _updateColumnWidths(options?: UpdateColumnsOptions): boolean {
+      _updateColumnWidths() {
+          // options = Object.assign({ updateRows: true, renderMarkup: false }, options);
           const defaultMinWidth = 4;
           const vpWidth = this.element.clientWidth;
-          const isGrid = this.isGrid();
           // Shorten last column width to avoid h-scrollbar
           const FIX_ADJUST_LAST_COL = 2;
           const columns = this.columns;
@@ -6185,73 +6388,70 @@
           let totalWeight = 0;
           let fixedWidth = 0;
           let modified = false;
-          this.element.classList.toggle("wb-grid", isGrid);
-          if (!isGrid && this.isCellNav()) {
-              this.setCellNav(false);
+          // this.element.classList.toggle("wb-grid", isGrid);
+          // if (!isGrid && this.isCellNav()) {
+          //   this.setCellNav(false);
+          // }
+          // if (options.calculateCols) {
+          if (col0.id !== "*") {
+              throw new Error(`First column must have  id '*': got '${col0.id}'.`);
           }
-          if (options.calculateCols) {
-              if (col0.id !== "*") {
-                  throw new Error(`First column must have  id '*': got '${col0.id}'`);
-              }
-              // Gather width definitions
-              this._columnsById = {};
-              for (let col of columns) {
-                  this._columnsById[col.id] = col;
-                  let cw = col.width;
-                  if (col.id === "*" && col !== col0) {
-                      throw new Error(`Column id '*' must be defined only once: '${col.title}'`);
-                  }
-                  if (!cw || cw === "*") {
-                      col._weight = 1.0;
-                      totalWeight += 1.0;
+          // Gather width definitions
+          this._columnsById = {};
+          for (let col of columns) {
+              this._columnsById[col.id] = col;
+              let cw = col.width;
+              if (col.id === "*" && col !== col0) {
+                  throw new Error(`Column id '*' must be defined only once: '${col.title}'.`);
+              }
+              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;
                   }
-                  else if (typeof cw === "number") {
-                      col._weight = cw;
-                      totalWeight += cw;
+                  fixedWidth += px;
+              }
+              else {
+                  error(`Invalid column width: ${cw} (expected string ending with 'px' or number, e.g. "<num>px" or <int>).`);
+              }
+          }
+          // Share remaining space between non-fixed columns
+          const restPx = Math.max(0, vpWidth - fixedWidth);
+          let ofsPx = 0;
+          for (let col of columns) {
+              let minWidth;
+              if (col._weight) {
+                  const cmw = col.minWidth;
+                  if (typeof cmw === "number") {
+                      minWidth = cmw;
                   }
-                  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 if (typeof cmw === "string" && cmw.endsWith("px")) {
+                      minWidth = parseFloat(cmw.slice(0, -2));
                   }
                   else {
-                      error(`Invalid column width: ${cw} (expected string ending with 'px' or number, e.g. "<num>px" or <int>)`);
+                      minWidth = defaultMinWidth;
                   }
-              }
-              // Share remaining space between non-fixed columns
-              const restPx = Math.max(0, vpWidth - fixedWidth);
-              let ofsPx = 0;
-              for (let col of columns) {
-                  let minWidth;
-                  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;
-                          col._widthPx = px;
-                      }
+                  const px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
+                  if (col._widthPx != px) {
+                      modified = true;
+                      col._widthPx = px;
                   }
-                  col._ofsPx = ofsPx;
-                  ofsPx += col._widthPx;
               }
-              columns[columns.length - 1]._widthPx -= FIX_ADJUST_LAST_COL;
-              totalWidth = ofsPx - FIX_ADJUST_LAST_COL;
+              col._ofsPx = ofsPx;
+              ofsPx += col._widthPx;
           }
-          // if (this.options.fixedCol) {
-          // 'position: fixed' requires that the content has the correct size
+          columns[columns.length - 1]._widthPx -= FIX_ADJUST_LAST_COL;
+          totalWidth = ofsPx - FIX_ADJUST_LAST_COL;
           const tw = `${totalWidth}px`;
           this.headerElement.style.width = tw;
           this.listContainerElement.style.width = tw;
@@ -6260,12 +6460,14 @@
           // this.logInfo("UC", this.columns, vpWidth, this.element.clientWidth, this.element);
           // console.trace();
           // util.error("BREAK");
-          if (modified) {
-              this._renderHeaderMarkup();
-              if (options.updateRows) {
-                  this._updateRows();
-              }
-          }
+          // if (modified) {
+          //   this._renderHeaderMarkup();
+          //   if (options.renderMarkup) {
+          //     this.setModified(ChangeType.header, { removeMarkup: true });
+          //   } else if (options.updateRows) {
+          //     this._updateRows();
+          //   }
+          // }
           return modified;
       }
       /** Create/update header markup from `this.columns` definition.
@@ -6314,7 +6516,7 @@
        * pending async changes if any.
        */
       updatePendingModifications() {
-          if (this.changeRedrawRequestPending || this.changeScrollRequestPending) {
+          if (this.pendingChangeTypes.size > 0) {
               this._updateViewportImmediately();
           }
       }
@@ -6329,31 +6531,50 @@
        */
       _updateViewportImmediately() {
           var _a;
-          // Shorten container height to avoid v-scrollbar
-          const FIX_ADJUST_HEIGHT = 1;
           if (this._disableUpdateCount) {
-              this.log(`IGNORED _updateViewportImmediately() disable level: ${this._disableUpdateCount}`);
+              this.log(`_updateViewportImmediately() IGNORED (disable level: ${this._disableUpdateCount})`);
+              this._disableUpdateIgnoreCount++;
               return;
           }
-          const newNodesOnly = !this.changeRedrawRequestPending;
-          this.changeRedrawRequestPending = false;
-          this.changeScrollRequestPending = false;
-          let height = this.listContainerElement.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.headerElement.clientHeight; // May be 0
-          const wantHeight = this.element.clientHeight - headerHeight - FIX_ADJUST_HEIGHT;
-          if (Math.abs(height - wantHeight) > 1.0) {
-              // this.log("resize", height, wantHeight);
-              this.listContainerElement.style.height = wantHeight + "px";
-              height = wantHeight;
-          }
-          // console.profile(`_updateViewportImmediately()`)
-          const modified = this.updateColumns({ updateRows: false });
-          this._updateRows({ newNodesOnly: newNodesOnly && !modified });
-          // console.profileEnd(`_updateViewportImmediately()`)
+          // Shorten container height to avoid v-scrollbar
+          const FIX_ADJUST_HEIGHT = 1;
+          const RF = RenderFlag;
+          const pending = new Set(this.pendingChangeTypes);
+          this.pendingChangeTypes.clear();
+          const scrollOnly = pending.has(RF.scroll) && pending.size === 1;
+          if (scrollOnly) {
+              this._updateRows({ newNodesOnly: true });
+              // this.log("_updateViewportImmediately(): scroll only.");
+          }
+          else {
+              this.log("_updateViewportImmediately():", pending);
+              let height = this.listContainerElement.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.headerElement.clientHeight; // May be 0
+              const wantHeight = this.element.clientHeight - headerHeight - FIX_ADJUST_HEIGHT;
+              if (Math.abs(height - wantHeight) > 1.0) {
+                  // this.log("resize", height, wantHeight);
+                  this.listContainerElement.style.height = wantHeight + "px";
+                  height = wantHeight;
+              }
+              // console.profile(`_updateViewportImmediately()`)
+              if (pending.has(RF.clearMarkup)) {
+                  this.visit((n) => {
+                      n.removeMarkup();
+                  });
+              }
+              // let widthModified = false;
+              if (pending.has(RF.header)) {
+                  // widthModified = this._updateColumnWidths();
+                  this._updateColumnWidths();
+                  this._renderHeaderMarkup();
+              }
+              this._updateRows();
+              // console.profileEnd(`_updateViewportImmediately()`)
+          }
           if (this.options.connectTopBreadcrumb) {
               let path = (_a = this.getTopmostVpNode(true)) === null || _a === void 0 ? void 0 : _a.getPath(false, "title", " > ");
               path = path ? path + " >" : "";
@@ -6494,19 +6715,14 @@
           return this.root.visit(callback, false);
       }
       /**
-       * Call fn(node) for all nodes in vertical order, top down (or bottom up).
+       * Call callback(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.
+       * Note that this considers expansion state, i.e. filtered nodes and children
+       * of collapsed nodes are skipped, unless `includeHidden` is set.
        *
-       * Stop iteration, if fn() returns false.<br>
+       * Stop iteration if callback() returns false.<br>
        * Return false if iteration was stopped.
        *
-       * @param callback the callback function.
-       *     Return false to stop iteration, return "skip" to skip this node and children only.
-       * @param [options]
-       *     Defaults:
-       *     {start: First tree node, reverse: false, includeSelf: true, includeHidden: false, wrap: false}
        * @returns {boolean} false if iteration was canceled
        */
       visitRows(callback, options) {
@@ -6524,7 +6740,7 @@
               // visit siblings
               siblings = parent.children;
               nextIdx = siblings.indexOf(node) + siblingOfs;
-              assert(nextIdx >= 0, "Could not find " + node + " in parent's children: " + parent);
+              assert(nextIdx >= 0, `Could not find ${node} in parent's children: ${parent}`);
               for (i = nextIdx; i < siblings.length; i++) {
                   node = siblings[i];
                   if (node === stopNode) {
@@ -6662,8 +6878,8 @@
               //   `enableUpdate(${flag}): count -> ${this._disableUpdateCount}...`
               // );
               if (this._disableUpdateCount === 0) {
-                  // this.changeRedrawRequestPending = true; // make sure, we re-render all markup
-                  // this.updateViewport();
+                  this.logDebug(`enableUpdate(): active again. Re-painting to catch up with ${this._disableUpdateIgnoreCount} ignored update requests...`);
+                  this._disableUpdateIgnoreCount = 0;
                   this.setModified(ChangeType.any, { immediate: true });
               }
           }
@@ -6718,7 +6934,7 @@
   }
   Wunderbaum.sequence = 0;
   /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-  Wunderbaum.version = "v0.2.0"; // Set to semver by 'grunt release'
+  Wunderbaum.version = "v0.3.0"; // Set to semver by 'grunt release'
   /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
   Wunderbaum.util = util;