wunderbaum 0.0.7 → 0.0.9

package/dist/wunderbaum.umd.js

@@ -7,7 +7,7 @@
   /*!
    * Wunderbaum - util
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   /** @module util */
   /** Readable names for `MouseEvent.button` */
@@ -287,11 +287,17 @@
               case "week":
               case "datetime":
               case "datetime-local":
-                  input.valueAsDate = value;
+                  input.valueAsDate = new Date(value);
+                  // input.valueAsDate = value;  // breaks in Edge?
                   break;
               case "number":
               case "range":
-                  input.valueAsNumber = value;
+                  if (value == null) {
+                      input.value = value;
+                  }
+                  else {
+                      input.valueAsNumber = value;
+                  }
                   break;
               case "radio":
                   error("Not implemented");
@@ -308,7 +314,7 @@
                   break;
               case "text":
               default:
-                  input.value = value || "";
+                  input.value = value !== null && value !== void 0 ? value : "";
           }
       }
       else if (tag === "SELECT") {
@@ -707,7 +713,7 @@
   /*!
    * Wunderbaum - types
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   /** Possible values for `setModified()`. */
   var ChangeType;
@@ -759,7 +765,7 @@
   /*!
    * Wunderbaum - wb_extension_base
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   class WunderbaumExtension {
       constructor(tree, id, defaults) {
@@ -1050,7 +1056,7 @@
   /*!
    * Wunderbaum - ext-filter
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   const START_MARKER = "\uFFF7";
   const END_MARKER = "\uFFF8";
@@ -1355,7 +1361,7 @@
   /*!
    * Wunderbaum - ext-keynav
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   const QUICKSEARCH_DELAY = 500;
   class KeynavExtension extends WunderbaumExtension {
@@ -1453,7 +1459,8 @@
                       if (!node.expanded && (node.children || node.lazy)) {
                           eventName = "Add"; // expand
                       }
-                      else if (navModeOption === NavigationOptions.startRow) {
+                      else if (navModeOption === NavigationOptions.startCell ||
+                          navModeOption === NavigationOptions.startRow) {
                           tree.setCellNav();
                           return;
                       }
@@ -1606,17 +1613,31 @@
                       }
                       handled = true;
                       break;
+                  case "Home": // Generated by FN + ArrowLeft on Mac
+                  case "Meta+ArrowLeft":
+                      tree.setFocus(); // Blur prev. input if any
+                      if (!isColspan && tree.activeColIdx > 0) {
+                          tree.setColumn(0);
+                      }
+                      handled = true;
+                      break;
+                  case "End": // Generated by FN + ArrowRight on Mac
+                  case "Meta+ArrowRight":
+                      tree.setFocus(); // Blur prev. input if any
+                      if (!isColspan && tree.activeColIdx < tree.columns.length - 1) {
+                          tree.setColumn(tree.columns.length - 1);
+                      }
+                      handled = true;
+                      break;
                   case "ArrowDown":
                   case "ArrowUp":
                   case "Backspace":
-                  case "End":
-                  case "Home":
-                  case "Control+End":
-                  case "Control+Home":
+                  case "Control+End": // Generated by FN + Control + ArrowRight on Mac
+                  case "Control+Home": // Generated by FN + Control + Arrowleft on Mac
                   case "Meta+ArrowDown":
                   case "Meta+ArrowUp":
-                  case "PageDown":
-                  case "PageUp":
+                  case "PageDown": // Generated by FN + ArrowDown on Mac
+                  case "PageUp": // Generated by FN + ArrowUp on Mac
                       node.navigate(eventName, { activate: activate, event: event });
                       // if (isCellEditMode) {
                       //   this._getEmbeddedInputElem(null, true); // set focus to input
@@ -1637,7 +1658,7 @@
   /*!
    * Wunderbaum - ext-logger
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   class LoggerExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -1677,7 +1698,7 @@
   /*!
    * Wunderbaum - common
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
   /**
@@ -1732,14 +1753,14 @@
   };
   /** Dict keys that are evaluated by source loader (others are added to `tree.data` instead). */
   const RESERVED_TREE_SOURCE_KEYS = new Set([
+      "_format",
+      "_keyMap",
+      "_positional",
+      "_typeList",
+      "_version",
       "children",
       "columns",
-      "format",
-      "keyMap",
-      "positional",
-      "typeList",
       "types",
-      "version", // reserved for future use
   ]);
   // /** Key codes that trigger grid navigation, even when inside an input element. */
   // export const INPUT_BREAKOUT_KEYS: Set<string> = new Set([
@@ -1773,11 +1794,22 @@
       "-": "collapse",
       Subtract: "collapse",
   };
-  /** Return a callback that returns true if the node title contains a substring (case-insensitive). */
-  function makeNodeTitleMatcher(s) {
-      s = escapeRegex(s.toLowerCase());
+  /** Return a callback that returns true if the node title matches the string
+   * or regular expression.
+   * @see {@link WunderbaumNode.findAll}
+   */
+  function makeNodeTitleMatcher(match) {
+      if (match instanceof RegExp) {
+          return function (node) {
+              return match.test(node.title);
+          };
+      }
+      assert(typeof match === "string");
+      // s = escapeRegex(s.toLowerCase());
       return function (node) {
-          return node.title.toLowerCase().indexOf(s) >= 0;
+          return node.title === match;
+          // console.log("match " + node, node.title.toLowerCase().indexOf(match))
+          // return node.title.toLowerCase().indexOf(match) >= 0;
       };
   }
   /** Return a callback that returns true if the node title starts with a string (case-insensitive). */
@@ -1788,11 +1820,125 @@
           return reMatch.test(node.title);
       };
   }
+  function unflattenSource(source) {
+      var _a, _b, _c;
+      const { _format, _keyMap, _positional, children } = source;
+      if (_format !== "flat") {
+          throw new Error(`Expected source._format: "flat", but got ${_format}`);
+      }
+      if (_positional && _positional.includes("children")) {
+          throw new Error(`source._positional must not include "children": ${_positional}`);
+      }
+      // Inverse keyMap:
+      let longToShort = {};
+      if (_keyMap) {
+          for (const [key, value] of Object.entries(_keyMap)) {
+              longToShort[value] = key;
+          }
+      }
+      const positionalShort = _positional.map((e) => longToShort[e]);
+      const newChildren = [];
+      const keyToNodeMap = {};
+      const indexToNodeMap = {};
+      const keyAttrName = (_a = longToShort["key"]) !== null && _a !== void 0 ? _a : "key";
+      const childrenAttrName = (_b = longToShort["children"]) !== null && _b !== void 0 ? _b : "children";
+      for (const [index, node] of children.entries()) {
+          // Node entry format:
+          //   [PARENT_ID, [POSITIONAL_ARGS]]
+          // or
+          //   [PARENT_ID, [POSITIONAL_ARGS], {KEY_VALUE_ARGS}]
+          const [parentId, args, kwargs = {}] = node;
+          // Free up some memory as we go
+          node[1] = null;
+          if (node[2] != null) {
+              node[2] = null;
+          }
+          // console.log("flatten", parentId, args, kwargs)
+          // We keep `kwargs` as our new node definition. Then we add all positional
+          // values to this object:
+          args.forEach((val, positionalIdx) => {
+              kwargs[positionalShort[positionalIdx]] = val;
+          });
+          // Find the parent node. `null` means 'toplevel'. PARENT_ID may be the numeric
+          // index of the source.children list. If PARENT_ID is a string, we search
+          // a parent with node.key of this value.
+          indexToNodeMap[index] = kwargs;
+          const key = kwargs[keyAttrName];
+          if (key != null) {
+              keyToNodeMap[key] = kwargs;
+          }
+          let parentNode = null;
+          if (parentId === null) ;
+          else if (typeof parentId === "number") {
+              parentNode = indexToNodeMap[parentId];
+              if (parentNode === undefined) {
+                  throw new Error(`unflattenSource: Could not find parent node by index: ${parentId}.`);
+              }
+          }
+          else {
+              parentNode = keyToNodeMap[parentId];
+              if (parentNode === undefined) {
+                  throw new Error(`unflattenSource: Could not find parent node by key: ${parentId}`);
+              }
+          }
+          if (parentNode) {
+              (_c = parentNode[childrenAttrName]) !== null && _c !== void 0 ? _c : (parentNode[childrenAttrName] = []);
+              parentNode[childrenAttrName].push(kwargs);
+          }
+          else {
+              newChildren.push(kwargs);
+          }
+      }
+      delete source.children;
+      source.children = newChildren;
+  }
+  function inflateSourceData(source) {
+      const { _format, _keyMap, _typeList } = source;
+      if (_format === "flat") {
+          unflattenSource(source);
+      }
+      delete source._format;
+      delete source._version;
+      delete source._keyMap;
+      delete source._typeList;
+      delete source._positional;
+      function _iter(childList) {
+          for (let node of childList) {
+              // Expand short alias names
+              if (_keyMap) {
+                  // Iterate over a list of names, because we modify inside the loop:
+                  Object.getOwnPropertyNames(node).forEach((propName) => {
+                      var _a;
+                      const long = (_a = _keyMap[propName]) !== null && _a !== void 0 ? _a : propName;
+                      if (long !== propName) {
+                          node[long] = node[propName];
+                          delete node[propName];
+                      }
+                  });
+              }
+              // `node` now has long attribute names
+              // Resolve node type indexes
+              const type = node.type;
+              if (_typeList && type != null && typeof type === "number") {
+                  const newType = _typeList[type];
+                  if (newType == null) {
+                      throw new Error(`Expected typeList[${type}] entry in [${_typeList}]`);
+                  }
+                  node.type = newType;
+              }
+              // Recursion
+              if (node.children) {
+                  _iter(node.children);
+              }
+          }
+      }
+      _iter(source.children);
+  }
 
   /*!
    * Wunderbaum - ext-dnd
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   const nodeMimeType = "application/x-wunderbaum-node";
   class DndExtension extends WunderbaumExtension {
@@ -1936,6 +2082,11 @@
           if (e.type === "dragstart") {
               // Set a default definition of allowed effects
               e.dataTransfer.effectAllowed = dndOpts.effectAllowed; //"copyMove"; // "all";
+              if (srcNode.isEditing()) {
+                  srcNode.logDebug("Prevented dragging node in edit mode.");
+                  e.preventDefault();
+                  return false;
+              }
               // Let user cancel the drag operation, override effectAllowed, etc.:
               const res = srcNode._callEvent("dnd.dragStart", { event: e });
               if (!res) {
@@ -2060,7 +2211,7 @@
   /*!
    * Wunderbaum - drag_observer
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2079,8 +2230,10 @@
           this.dragging = false;
           // TODO: touch events
           this.events = ["mousedown", "mouseup", "mousemove", "keydown"];
-          assert(opts.root);
-          this.opts = extend({ thresh: 5 }, opts);
+          if (!opts.root) {
+              throw new Error("Missing `root` option.");
+          }
+          this.opts = Object.assign({ thresh: 5 }, opts);
           this.root = opts.root;
           this._handler = this.handleEvent.bind(this);
           this.events.forEach((type) => {
@@ -2194,7 +2347,7 @@
   /*!
    * Wunderbaum - ext-grid
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   class GridExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -2231,7 +2384,7 @@
   /*!
    * Wunderbaum - deferred
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -2284,7 +2437,7 @@
   /*!
    * Wunderbaum - wunderbaum_node
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   /** Top-level properties that can be passed with `data`. */
   const NODE_PROPS = new Set([
@@ -2395,6 +2548,35 @@
       toString() {
           return `WunderbaumNode@${this.key}<'${this.title}'>`;
       }
+      /**
+       * Iterate all descendant nodes depth-first, pre-order using `for ... of ...` syntax.
+       * More concise, but slightly slower than {@link WunderbaumNode.visit}.
+       *
+       * Example:
+       * ```js
+       * for(const n of node) {
+       *   ...
+       * }
+       * ```
+       */
+      *[Symbol.iterator]() {
+          // let node: WunderbaumNode | null = this;
+          const cl = this.children;
+          if (cl) {
+              for (let i = 0, l = cl.length; i < l; i++) {
+                  const n = cl[i];
+                  yield n;
+                  if (n.children) {
+                      yield* n;
+                  }
+              }
+              // Slower:
+              // for (let node of this.children) {
+              //   yield node;
+              //   yield* node : 0;
+              // }
+          }
+      }
       // /** Return an option value. */
       // protected _getOpt(
       //   name: string,
@@ -2425,48 +2607,46 @@
       /**
        * Append (or insert) a list of child nodes.
        *
-       * Tip: pass `{ before: 0 }` to prepend children
-       * @param {NodeData[]} nodeData array of child node definitions (also single child accepted)
-       * @param  child node (or key or index of such).
-       *     If omitted, the new children are appended.
+       * Tip: pass `{ before: 0 }` to prepend new nodes as first children.
+       *
        * @returns first child added
        */
       addChildren(nodeData, options) {
           const tree = this.tree;
-          const level = options ? options.level : this.getLevel();
-          let insertBefore = options
-              ? options.before
-              : null, 
-          // redraw = options ? options.redraw !== false : true,
-          nodeList = [];
+          let { before = null, applyMinExpanLevel = true, _level } = options !== null && options !== void 0 ? options : {};
+          // let { before, loadLazy=true, _level } = options ?? {};
+          // const isTopCall = _level == null;
+          _level !== null && _level !== void 0 ? _level : (_level = this.getLevel());
+          const nodeList = [];
           try {
               tree.enableUpdate(false);
               if (isPlainObject(nodeData)) {
                   nodeData = [nodeData];
               }
-              const forceExpand = level < tree.options.minExpandLevel;
+              const forceExpand = applyMinExpanLevel && _level < tree.options.minExpandLevel;
               for (let child of nodeData) {
-                  let subChildren = child.children;
+                  const subChildren = child.children;
                   delete child.children;
-                  let n = new WunderbaumNode(tree, this, child);
-                  if (forceExpand && !n.lazy)
+                  const n = new WunderbaumNode(tree, this, child);
+                  if (forceExpand && !n.isUnloaded()) {
                       n.expanded = true;
+                  }
                   nodeList.push(n);
                   if (subChildren) {
-                      n.addChildren(subChildren, { redraw: false, level: level + 1 });
+                      n.addChildren(subChildren, { _level: _level + 1 });
                   }
               }
               if (!this.children) {
                   this.children = nodeList;
               }
-              else if (insertBefore == null || this.children.length === 0) {
+              else if (before == null || this.children.length === 0) {
                   this.children = this.children.concat(nodeList);
               }
               else {
-                  // Returns null if insertBefore is not a direct child:
-                  insertBefore = this.findDirectChild(insertBefore);
-                  let pos = this.children.indexOf(insertBefore);
-                  assert(pos >= 0, "insertBefore must be an existing child");
+                  // Returns null if before is not a direct child:
+                  before = this.findDirectChild(before);
+                  let pos = this.children.indexOf(before);
+                  assert(pos >= 0, `options.before must be a direct child of ${this}`);
                   // insert nodeList after children[pos]
                   this.children.splice(pos, 0, ...nodeList);
               }
@@ -2476,11 +2656,14 @@
               // }
               // this.triggerModifyChild("add", nodeList.length === 1 ? nodeList[0] : null);
               tree.setModified(ChangeType.structure);
-              return nodeList[0];
           }
           finally {
               tree.enableUpdate(true);
           }
+          // if(isTopCall && loadLazy){
+          //   this.logWarn("addChildren(): loadLazy is not yet implemented.")
+          // }
+          return nodeList[0];
       }
       /**
        * Append or prepend a node, or append a child node.
@@ -2554,21 +2737,98 @@
               }
           }
       }
-      /** Call `setExpanded()` on al child nodes*/
-      async expandAll(flag = true) {
-          this.visit((node) => {
-              node.setExpanded(flag);
-          });
+      /** Call `setExpanded()` on all descendant nodes. */
+      async expandAll(flag = true, options) {
+          const tree = this.tree;
+          const minExpandLevel = this.tree.options.minExpandLevel;
+          let { depth = 99, loadLazy, force } = options !== null && options !== void 0 ? options : {};
+          const expand_opts = {
+              scrollIntoView: false,
+              force: force,
+              loadLazy: loadLazy,
+          };
+          // this.logInfo(`expandAll(${flag})`);
+          // Expand all direct children in parallel:
+          async function _iter(n, level) {
+              var _a;
+              // n.logInfo(`  _iter(${level})`);
+              if (level === 0) {
+                  return;
+              }
+              // if (!flag && minExpandLevel && !force && n.getLevel() <= minExpandLevel) {
+              //   return; // Do not collapse until minExpandLevel
+              // }
+              const level_1 = level == null ? null : level - 1;
+              const promises = [];
+              (_a = n.children) === null || _a === void 0 ? void 0 : _a.forEach((cn) => {
+                  if (flag) {
+                      if (!cn.expanded && (cn.children || (loadLazy && cn.lazy))) {
+                          // Node is collapsed and may be expanded (i.e. has children or is lazy)
+                          // Expanding may be async, so we store the promise.
+                          // Also the recursion is delayed until expansion finished.
+                          const p = cn.setExpanded(true, expand_opts);
+                          promises.push(p);
+                          p.then(async () => {
+                              await _iter(cn, level_1);
+                          });
+                      }
+                      else {
+                          // We don't expand the node, but still visit descendants.
+                          // There we may find lazy nodes, so we
+                          promises.push(_iter(cn, level_1));
+                      }
+                  }
+                  else {
+                      // Collapsing is always synchronous, so no promises required
+                      if (!minExpandLevel || force || cn.getLevel() > minExpandLevel) {
+                          // Do not collapse until minExpandLevel
+                          cn.setExpanded(false, expand_opts);
+                      }
+                      _iter(cn, level_1); // recursion, even if cn was already collapsed
+                  }
+              });
+              return new Promise((resolve) => {
+                  Promise.all(promises).then(() => {
+                      resolve(true);
+                  });
+              });
+          }
+          const tag = tree.logTime(`${this}.expandAll(${flag})`);
+          try {
+              tree.enableUpdate(false);
+              await _iter(this, depth);
+          }
+          finally {
+              tree.enableUpdate(true);
+              tree.logTimeEnd(tag);
+          }
       }
-      /**Find all nodes that match condition (excluding self).
+      /**
+       * Find all descendant nodes that match condition (excluding self).
        *
-       * @param {string | function(node)} match title string to search for, or a
-       *     callback function that returns `true` if a node is matched.
+       * If `match` is a string, search for exact node title.
+       * If `match` is a RegExp expression, apply it to node.title, using
+       * [RegExp.test()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test).
+       * If `match` is a callback, match all nodes for that the callback(node) returns true.
+       *
+       * Returns an empty array if no nodes were found.
+       *
+       * Examples:
+       * ```js
+       * // Match all node titles that match exactly 'Joe':
+       * nodeList = node.findAll("Joe")
+       * // Match all node titles that start with 'Joe' case sensitive:
+       * nodeList = node.findAll(/^Joe/)
+       * // Match all node titles that contain 'oe', case insensitive:
+       * nodeList = node.findAll(/oe/i)
+       * // Match all nodes with `data.price` >= 99:
+       * nodeList = node.findAll((n) => {
+       *   return n.data.price >= 99;
+       * })
+       * ```
        */
       findAll(match) {
-          const matcher = isFunction(match)
-              ? match
-              : makeNodeTitleMatcher(match);
+          const matcher = typeof match === "function" ? match : makeNodeTitleMatcher(match);
           const res = [];
           this.visit((n) => {
               if (matcher(n)) {
@@ -2598,15 +2858,13 @@
           }
           return null;
       }
-      /**Find first node that matches condition (excluding self).
+      /**
+       * Find first descendant node that matches condition (excluding self) or null.
        *
-       * @param match title string to search for, or a
-       *     callback function that returns `true` if a node is matched.
+       * @see {@link WunderbaumNode.findAll} for examples.
        */
       findFirst(match) {
-          const matcher = isFunction(match)
-              ? match
-              : makeNodeTitleMatcher(match);
+          const matcher = typeof match === "function" ? match : makeNodeTitleMatcher(match);
           let res = null;
           this.visit((n) => {
               if (matcher(n)) {
@@ -2623,6 +2881,57 @@
       findRelatedNode(where, includeHidden = false) {
           return this.tree.findRelatedNode(this, where, includeHidden);
       }
+      /**
+       * Iterator version of {@link WunderbaumNode.format}.
+       */
+      *format_iter(name_cb, connectors) {
+          connectors !== null && connectors !== void 0 ? connectors : (connectors = ["    ", " |  ", " ╰─ ", " ├─ "]);
+          name_cb !== null && name_cb !== void 0 ? name_cb : (name_cb = (node) => "" + node);
+          function _is_last(node) {
+              const ca = node.parent.children;
+              return node === ca[ca.length - 1];
+          }
+          const _format_line = (node) => {
+              // https://www.measurethat.net/Benchmarks/Show/12196/0/arr-unshift-vs-push-reverse-small-array
+              const parts = [name_cb(node)];
+              parts.unshift(connectors[_is_last(node) ? 2 : 3]);
+              let p = node.parent;
+              while (p && p !== this) {
+                  // `this` is the top node
+                  parts.unshift(connectors[_is_last(p) ? 0 : 1]);
+                  p = p.parent;
+              }
+              return parts.join("");
+          };
+          yield name_cb(this);
+          for (let node of this) {
+              yield _format_line(node);
+          }
+      }
+      /**
+       * Return multiline string representation of a node/subnode hierarchy.
+       * Mostly useful for debugging.
+       *
+       * Example:
+       * ```js
+       * console.info(tree.getActiveNode().format((n)=>n.title));
+       * ```
+       * logs
+       * ```
+       * Books
+       *  ├─ Art of War
+       *  ╰─ Don Quixote
+       * ...
+       * ```
+       * @see {@link WunderbaumNode.format_iter}
+       */
+      format(name_cb, connectors) {
+          const a = [];
+          for (let line of this.format_iter(name_cb, connectors)) {
+              a.push(line);
+          }
+          return a.join("\n");
+      }
       /** Return the `<span class='wb-col'>` element with a given index or id.
        * @returns {WunderbaumNode | null}
        */
@@ -2770,7 +3079,8 @@
        * an expand operation is currently possible.
        */
       isExpandable(andCollapsed = false) {
-          return !!this.children && (!this.expanded || !andCollapsed);
+          // return !!this.children && (!this.expanded || !andCollapsed);
+          return !!(this.children || this.lazy) && (!this.expanded || !andCollapsed);
       }
       /** Return true if this node is currently in edit-title mode. */
       isEditing() {
@@ -2872,14 +3182,22 @@
           return true;
       }
       _loadSourceObject(source, level) {
+          var _a;
           const tree = this.tree;
           level !== null && level !== void 0 ? level : (level = this.getLevel());
           // Let caller modify the parsed JSON response:
-          this._callEvent("receive", { response: source });
+          const res = this._callEvent("receive", { response: source });
+          if (res != null) {
+              source = res;
+          }
           if (isArray(source)) {
               source = { children: source };
           }
           assert(isPlainObject(source));
+          const format = (_a = source.format) !== null && _a !== void 0 ? _a : "nested";
+          assert(format === "nested" || format === "flat");
+          // Pre-rocess for 'nested' or 'flat' format
+          inflateSourceData(source);
           assert(source.children, "If `source` is an object, it must have a `children` property");
           if (source.types) {
               tree.logInfo("Redefine types", source.columns);
@@ -3039,17 +3357,16 @@
       }
       /** Expand all parents and optionally scroll into visible area as neccessary.
        * Promise is resolved, when lazy loading and animations are done.
-       * @param {object} [opts] passed to `setExpanded()`.
+       * @param {object} [options] passed to `setExpanded()`.
        *     Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
        */
-      async makeVisible(opts) {
-          let i, dfd = new Deferred(), deferreds = [], parents = this.getParentList(false, false), len = parents.length, 
-          // effects = !(opts && opts.noAnimation === true),
-          scroll = !(opts && opts.scrollIntoView === false);
+      async makeVisible(options) {
+          let i, dfd = new Deferred(), deferreds = [], parents = this.getParentList(false, false), len = parents.length, noAnimation = getOption(options, "noAnimation", false), scroll = getOption(options, "scrollIntoView", true);
+          // scroll = !(options && options.scrollIntoView === false);
           // Expand bottom-up, so only the top node is animated
           for (i = len - 1; i >= 0; i--) {
               // self.debug("pushexpand" + parents[i]);
-              const seOpts = { noAnimation: opts === null || opts === void 0 ? void 0 : opts.noAnimation };
+              const seOpts = { noAnimation: noAnimation };
               deferreds.push(parents[i].setExpanded(true, seOpts));
           }
           Promise.all(deferreds).then(() => {
@@ -3269,13 +3586,15 @@
               renderColInfosById: renderColInfosById,
           };
       }
-      _createIcon(parentElem, replaceChild) {
+      _createIcon(parentElem, replaceChild, showLoading) {
           let iconSpan;
           let icon = this.getOption("icon");
           if (this._errorInfo) {
               icon = iconMap.error;
           }
-          else if (this._isLoading) {
+          else if (this._isLoading && showLoading) {
+              // Status nodes, or nodes without expander (< minExpandLevel) should
+              // display the 'loading' status with the i.wb-icon span
               icon = iconMap.loading;
           }
           if (icon === false) {
@@ -3370,7 +3689,9 @@
               nodeElem.appendChild(expanderSpan);
               ofsTitlePx += ICON_WIDTH;
           }
-          iconSpan = this._createIcon(nodeElem);
+          // Render the icon (show a 'loading' icon if we do not have an expander that
+          // we would prefer).
+          iconSpan = this._createIcon(nodeElem, null, !expanderSpan);
           if (iconSpan) {
               ofsTitlePx += ICON_WIDTH;
           }
@@ -3528,7 +3849,10 @@
               rowDiv.classList.add(...typeInfo.classes);
           }
           if (expanderSpan) {
-              if (this.isExpandable(false)) {
+              if (this._isLoading) {
+                  expanderSpan.className = "wb-expander " + iconMap.loading;
+              }
+              else if (this.isExpandable(false)) {
                   if (this.expanded) {
                       expanderSpan.className = "wb-expander " + iconMap.expanderExpanded;
                   }
@@ -3536,9 +3860,6 @@
                       expanderSpan.className = "wb-expander " + iconMap.expanderCollapsed;
                   }
               }
-              else if (this._isLoading) {
-                  expanderSpan.className = "wb-expander " + iconMap.loading;
-              }
               else if (this.lazy && this.children == null) {
                   expanderSpan.className = "wb-expander " + iconMap.expanderLazy;
               }
@@ -3563,7 +3884,7 @@
               // Update icon (if not opts.isNew, which would rebuild markup anyway)
               const iconSpan = nodeElem.querySelector("i.wb-icon");
               if (iconSpan) {
-                  this._createIcon(nodeElem, iconSpan);
+                  this._createIcon(nodeElem, iconSpan, !expanderSpan);
               }
           }
       }
@@ -3572,11 +3893,14 @@
        *
        * `options.change` defaults to ChangeType.data, which updates the title,
        * icon, and status. It also triggers the `render` event, that lets the user
-       * create or update the content of embeded cell elements.<br>
+       * create or update the content of embeded cell elements.
        *
        * If only the status or other class-only modifications have changed,
        * `options.change` should be set to ChangeType.status instead for best
        * efficiency.
+       *
+       * Calling `setModified` instead may be a better alternative.
+       * @see {@link WunderbaumNode.setModified}
        */
       render(options) {
           // this.log("render", options);
@@ -3776,25 +4100,29 @@
        * Expand or collapse this node.
        */
       async setExpanded(flag = true, options) {
+          const { force, scrollIntoView, immediate } = options !== null && options !== void 0 ? options : {};
           if (!flag &&
               this.isExpanded() &&
               this.getLevel() <= this.tree.getOption("minExpandLevel") &&
-              !getOption(options, "force")) {
+              !force) {
               this.logDebug("Ignored collapse request below expandLevel.");
               return;
           }
           if (!flag === !this.expanded) {
               return; // Nothing to do
           }
+          // this.log("setExpanded()");
           if (flag && this.lazy && this.children == null) {
               await this.loadLazy();
           }
           this.expanded = flag;
-          const updateOpts = { immediate: !!getOption(options, "immediate") };
+          const updateOpts = { immediate: immediate };
+          // const updateOpts = { immediate: !!util.getOption(options, "immediate") };
           this.tree.setModified(ChangeType.structure, updateOpts);
-          if (getOption(options, "scrollIntoView") !== false) {
+          if (flag && scrollIntoView !== false) {
               const lastChild = this.getLastChild();
               if (lastChild) {
+                  this.tree.updatePendingModifications();
                   lastChild.scrollIntoView({ topNode: this });
               }
           }
@@ -3872,8 +4200,13 @@
                   this._errorInfo = null;
                   break;
               case "loading":
-                  // If this is the invisible root, add a visible top-level node
-                  if (!this.parent) {
+                  this._isLoading = true;
+                  this._errorInfo = null;
+                  if (this.parent) {
+                      this.setModified(ChangeType.status);
+                  }
+                  else {
+                      // If this is the invisible root, add a visible top-level node
                       _setStatusNode({
                           statusNodeType: status,
                           title: tree.options.strings.loading +
@@ -3883,8 +4216,6 @@
                           tooltip: details,
                       });
                   }
-                  this._isLoading = true;
-                  this._errorInfo = null;
                   // this.render();
                   break;
               case "error":
@@ -3947,7 +4278,7 @@
           this.parent.triggerModifyChild(operation, this, extra);
       }
       /**
-       * Call fn(node) for all child nodes in hierarchical order (depth-first).
+       * Call `callback(node)` for all child nodes in hierarchical order (depth-first, pre-order).
        *
        * Stop iteration, if fn() returns false. Skip current branch, if fn()
        * returns "skip".<br>
@@ -3956,6 +4287,7 @@
        * @param {function} callback the callback function.
        *     Return false to stop iteration, return "skip" to skip this node and
        *     its children only.
+       * @see {@link WunderbaumNode.*[Symbol.iterator]}, {@link Wunderbaum.visit}.
        */
       visit(callback, includeSelf = false) {
           let i, l, res = true, children = this.children;
@@ -4026,7 +4358,7 @@
   /*!
    * Wunderbaum - ext-edit
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.7, Sun, 11 Sep 2022 16:02:08 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.9, Mon, 31 Oct 2022 17:06:10 GMT (https://github.com/mar10/wunderbaum)
    */
   // const START_MARKER = "\uFFF7";
   class EditExtension extends WunderbaumExtension {
@@ -4319,8 +4651,8 @@
    * https://github.com/mar10/wunderbaum
    *
    * Released under the MIT license.
-   * @version v0.0.7
-   * @date Sun, 11 Sep 2022 16:02:08 GMT
+   * @version v0.0.9
+   * @date Mon, 31 Oct 2022 17:06:10 GMT
    */
   class WbSystemRoot extends WunderbaumNode {
       constructor(tree) {
@@ -4707,6 +5039,20 @@
           }
           return null;
       }
+      /**
+       * Iterate all descendant nodes depth-first, pre-order using `for ... of ...` syntax.
+       * More concise, but slightly slower than {@link Wunderbaum.visit}.
+       *
+       * Example:
+       * ```js
+       * for(const node of tree) {
+       *   ...
+       * }
+       * ```
+       */
+      *[Symbol.iterator]() {
+          yield* this.root;
+      }
       /** @internal */
       _registerExtension(extension) {
           this.extensionList.push(extension);
@@ -4721,8 +5067,8 @@
       }
       /** Add node to tree's bookkeeping data structures. */
       _registerNode(node) {
-          let key = node.key;
-          assert(key != null && !this.keyMap.has(key));
+          const key = node.key;
+          assert(key != null && !this.keyMap.has(key), `Missing or duplicate key: '${key}'.`);
           this.keyMap.set(key, node);
           let rk = node.refKey;
           if (rk) {
@@ -4891,22 +5237,22 @@
        *   - 'down', 'first', 'last', 'left', 'parent', 'right', 'up': navigate
        *
        */
-      applyCommand(cmd, nodeOrOpts, opts) {
+      applyCommand(cmd, nodeOrOpts, options) {
           let // clipboard,
           node, refNode;
-          // opts = $.extend(
+          // options = $.extend(
           // 	{ setActive: true, clipboard: CLIPBOARD },
-          // 	opts_
+          // 	options_
           // );
           if (nodeOrOpts instanceof WunderbaumNode) {
               node = nodeOrOpts;
           }
           else {
               node = this.getActiveNode();
-              assert(opts === undefined);
-              opts = nodeOrOpts;
+              assert(options === undefined);
+              options = nodeOrOpts;
           }
-          // clipboard = opts.clipboard;
+          // clipboard = options.clipboard;
           switch (cmd) {
               // Sorting and indentation:
               case "moveUp":
@@ -5112,16 +5458,8 @@
           }
       }
       /** Recursively expand all expandable nodes (triggers lazy load id needed). */
-      async expandAll(flag = true) {
-          const tag = this.logTime("expandAll(" + flag + ")");
-          try {
-              this.enableUpdate(false);
-              await this.root.expandAll(flag);
-          }
-          finally {
-              this.enableUpdate(true);
-              this.logTimeEnd(tag);
-          }
+      async expandAll(flag = true, options) {
+          await this.root.expandAll(flag, options);
       }
       /** Recursively select all nodes. */
       selectAll(flag = true) {
@@ -5155,10 +5493,7 @@
           // util.assert(this.keyMap.size === i);
       }
       /**
-       * Find all nodes that matches condition.
-       *
-       * @param match title string to search for, or a
-       *     callback function that returns `true` if a node is matched.
+       * Find all nodes that match condition.
        *
        * @see {@link WunderbaumNode.findAll}
        */
@@ -5168,10 +5503,7 @@
       /**
        * 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}
-       *
        */
       findFirst(match) {
           return this.root.findFirst(match);
@@ -5185,7 +5517,7 @@
        *
        */
       findKey(key) {
-          return this.keyMap.get(key);
+          return this.keyMap.get(key) || null;
       }
       /**
        * Find the next visible node that starts with `match`, starting at `startNode`
@@ -5314,6 +5646,35 @@
           }
           return res;
       }
+      /**
+       * Iterator version of {@link Wunderbaum.format}.
+       */
+      *format_iter(name_cb, connectors) {
+          return this.root.format_iter(name_cb, connectors);
+      }
+      /**
+       * Return multiline string representation of the node hierarchy.
+       * Mostly useful for debugging.
+       *
+       * Example:
+       * ```js
+       * console.info(tree.format((n)=>n.title));
+       * ```
+       * logs
+       * ```
+       * Playground
+       * ├─ Books
+       * |   ├─ Art of War
+       * |   ╰─ Don Quixote
+       * ├─ Music
+       * ...
+       * ```
+       *
+       * @see {@link Wunderbaum.format_iter} and {@link WunderbaumNode.format}.
+       */
+      format(name_cb, connectors) {
+          return this.root.format(name_cb, connectors);
+      }
       /**
        * Return the active cell (`span.wb-col`) of the currently active node or null.
        */
@@ -5481,13 +5842,13 @@
       scrollTo(nodeOrOpts) {
           const PADDING = 2; // leave some pixels between viewport bounds
           let node;
-          let opts;
+          let options;
           if (nodeOrOpts instanceof WunderbaumNode) {
               node = nodeOrOpts;
           }
           else {
-              opts = nodeOrOpts;
-              node = opts.node;
+              options = nodeOrOpts;
+              node = options.node;
           }
           assert(node && node._rowIdx != null);
           const scrollParent = this.element;
@@ -5498,7 +5859,7 @@
           const vpTop = headerHeight;
           const vpRowTop = rowTop - scrollTop;
           const vpRowBottom = vpRowTop + ROW_HEIGHT;
-          const topNode = opts === null || opts === void 0 ? void 0 : opts.topNode;
+          const topNode = options === null || options === void 0 ? void 0 : options.topNode;
           // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts );
           let newScrollTop = null;
           if (vpRowTop >= vpTop) {
@@ -5742,11 +6103,13 @@
           }
       }
       /** Update column headers and width. */
-      updateColumns(opts) {
-          opts = Object.assign({ calculateCols: true, updateRows: true }, opts);
+      updateColumns(options) {
+          options = Object.assign({ calculateCols: true, updateRows: true }, 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;
           let totalWidth = 0;
           let totalWeight = 0;
           let fixedWidth = 0;
@@ -5755,7 +6118,7 @@
           if (!isGrid && this.isCellNav()) {
               this.setCellNav(false);
           }
-          if (opts.calculateCols) {
+          if (options.calculateCols) {
               // Gather width definitions
               this._columnsById = {};
               for (let col of this.columns) {
@@ -5807,7 +6170,8 @@
                   col._ofsPx = ofsPx;
                   ofsPx += col._widthPx;
               }
-              totalWidth = ofsPx;
+              this.columns[this.columns.length - 1]._widthPx -= FIX_ADJUST_LAST_COL;
+              totalWidth = ofsPx - FIX_ADJUST_LAST_COL;
           }
           // if (this.options.fixedCol) {
           // 'position: fixed' requires that the content has the correct size
@@ -5821,7 +6185,7 @@
           // util.error("BREAK");
           if (modified) {
               this._renderHeaderMarkup();
-              if (opts.updateRows) {
+              if (options.updateRows) {
                   this._updateRows();
               }
           }
@@ -5884,6 +6248,8 @@
        */
       _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}`);
               return;
@@ -5897,7 +6263,7 @@
           // 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;
+          const wantHeight = this.element.clientHeight - headerHeight - FIX_ADJUST_HEIGHT;
           if (Math.abs(height - wantHeight) > 1.0) {
               // this.log("resize", height, wantHeight);
               this.scrollContainerElement.style.height = wantHeight + "px";
@@ -5954,11 +6320,11 @@
        *   (including upper and lower prefetch)
        * -
        */
-      _updateRows(opts) {
+      _updateRows(options) {
           // const label = this.logTime("_updateRows");
           // this.log("_updateRows", opts)
-          opts = Object.assign({ newNodesOnly: false }, opts);
-          const newNodesOnly = !!opts.newNodesOnly;
+          options = Object.assign({ newNodesOnly: false }, options);
+          const newNodesOnly = !!options.newNodesOnly;
           const row_height = ROW_HEIGHT;
           const vp_height = this.element.clientHeight;
           const prefetch = RENDER_MAX_PREFETCH;
@@ -6035,7 +6401,8 @@
           return modified;
       }
       /**
-       * Call callback(node) for all nodes in hierarchical order (depth-first).
+       * Call `callback(node)` for all nodes in hierarchical order (depth-first, pre-order).
+       * @see {@link Wunderbaum.*[Symbol.iterator]}, {@link WunderbaumNode.visit}.
        *
        * @param {function} callback the callback function.
        *     Return false to stop iteration, return "skip" to skip this node and
@@ -6061,16 +6428,16 @@
        *     {start: First tree node, reverse: false, includeSelf: true, includeHidden: false, wrap: false}
        * @returns {boolean} false if iteration was canceled
        */
-      visitRows(callback, opts) {
+      visitRows(callback, options) {
           if (!this.root.hasChildren()) {
               return false;
           }
-          if (opts && opts.reverse) {
-              delete opts.reverse;
-              return this._visitRowsUp(callback, opts);
+          if (options && options.reverse) {
+              delete options.reverse;
+              return this._visitRowsUp(callback, options);
           }
-          opts = opts || {};
-          let i, nextIdx, parent, res, siblings, stopNode, siblingOfs = 0, skipFirstNode = opts.includeSelf === false, includeHidden = !!opts.includeHidden, checkFilter = !includeHidden && this.filterMode === "hide", node = opts.start || this.root.children[0];
+          options = options || {};
+          let i, nextIdx, parent, res, siblings, stopNode, siblingOfs = 0, skipFirstNode = options.includeSelf === false, includeHidden = !!options.includeHidden, checkFilter = !includeHidden && this.filterMode === "hide", node = options.start || this.root.children[0];
           parent = node.parent;
           while (parent) {
               // visit siblings
@@ -6119,11 +6486,11 @@
               node = parent;
               parent = parent.parent;
               siblingOfs = 1; //
-              if (!parent && opts.wrap) {
+              if (!parent && options.wrap) {
                   this.logDebug("visitRows(): wrap around");
-                  assert(opts.start, "`wrap` option requires `start`");
-                  stopNode = opts.start;
-                  opts.wrap = false;
+                  assert(options.start, "`wrap` option requires `start`");
+                  stopNode = options.start;
+                  options.wrap = false;
                   parent = this.root;
                   siblingOfs = 0;
               }
@@ -6258,7 +6625,7 @@
   }
   Wunderbaum.sequence = 0;
   /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-  Wunderbaum.version = "v0.0.7"; // Set to semver by 'grunt release'
+  Wunderbaum.version = "v0.0.9"; // Set to semver by 'grunt release'
   /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
   Wunderbaum.util = util;