wunderbaum 0.0.6 → 0.0.8

package/dist/wunderbaum.umd.js

@@ -7,7 +7,7 @@
   /*!
    * Wunderbaum - util
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 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") {
@@ -466,7 +472,7 @@
           });
       });
   }
-  /** Return a wrapped handler method, that provides `this._super`.
+  /** Return a wrapped handler method, that provides `this._super` and `this._superApply`.
    *
    * ```ts
     // Implement `opts.createNode` event to add the 'draggable' attribute
@@ -707,7 +713,7 @@
   /*!
    * Wunderbaum - types
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 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.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 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.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   const START_MARKER = "\uFFF7";
   const END_MARKER = "\uFFF8";
@@ -1352,107 +1358,10 @@
       return textPoses.join("");
   }
 
-  /*!
-   * Wunderbaum - common
-   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
-   */
-  const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
-  const ROW_HEIGHT = 22;
-  // export const HEADER_HEIGHT = ROW_HEIGHT;
-  const ICON_WIDTH = 20;
-  const ROW_EXTRA_PAD = 7; // 2x $col-padding-x + 3px rounding errors
-  const RENDER_MAX_PREFETCH = 5;
-  const TEST_IMG = new RegExp(/\.|\//); // strings are considered image urls if they contain '.' or '/'
-  // export const RECURSIVE_REQUEST_ERROR = "$recursive_request";
-  // export const INVALID_REQUEST_TARGET_ERROR = "$request_target_invalid";
-  let iconMap = {
-      error: "bi bi-exclamation-triangle",
-      // loading: "bi bi-hourglass-split wb-busy",
-      loading: "bi bi-chevron-right wb-busy",
-      // loading: "bi bi-arrow-repeat wb-spin",
-      // loading: '<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>',
-      // noData: "bi bi-search",
-      noData: "bi bi-question-circle",
-      expanderExpanded: "bi bi-chevron-down",
-      // expanderExpanded: "bi bi-dash-square",
-      expanderCollapsed: "bi bi-chevron-right",
-      // expanderCollapsed: "bi bi-plus-square",
-      expanderLazy: "bi bi-chevron-right wb-helper-lazy-expander",
-      // expanderLazy: "bi bi-chevron-bar-right",
-      checkChecked: "bi bi-check-square",
-      checkUnchecked: "bi bi-square",
-      checkUnknown: "bi dash-square-dotted",
-      radioChecked: "bi bi-circle-fill",
-      radioUnchecked: "bi bi-circle",
-      radioUnknown: "bi bi-circle-dotted",
-      folder: "bi bi-folder2",
-      folderOpen: "bi bi-folder2-open",
-      doc: "bi bi-file-earmark",
-  };
-  /** Dict keys that are evaluated by source loader (others are added to `tree.data` instead). */
-  const RESERVED_TREE_SOURCE_KEYS = new Set([
-      "children",
-      "columns",
-      "format",
-      "keyMap",
-      "positional",
-      "typeList",
-      "types",
-      "version", // reserved for future use
-  ]);
-  /** Key codes that trigger grid navigation, even when inside an input element. */
-  const INPUT_BREAKOUT_KEYS = new Set([
-      // "ArrowDown",
-      // "ArrowUp",
-      "Enter",
-      "Escape",
-  ]);
-  /** Map `KeyEvent.key` to navigation action. */
-  const KEY_TO_ACTION_DICT = {
-      " ": "toggleSelect",
-      "+": "expand",
-      Add: "expand",
-      ArrowDown: "down",
-      ArrowLeft: "left",
-      ArrowRight: "right",
-      ArrowUp: "up",
-      Backspace: "parent",
-      "/": "collapseAll",
-      Divide: "collapseAll",
-      End: "lastCol",
-      Home: "firstCol",
-      "Control+End": "last",
-      "Control+Home": "first",
-      "Meta+ArrowDown": "last",
-      "Meta+ArrowUp": "first",
-      "*": "expandAll",
-      Multiply: "expandAll",
-      PageDown: "pageDown",
-      PageUp: "pageUp",
-      "-": "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 function (node) {
-          return node.title.toLowerCase().indexOf(s) >= 0;
-      };
-  }
-  /** Return a callback that returns true if the node title starts with a string (case-insensitive). */
-  function makeNodeTitleStartMatcher(s) {
-      s = escapeRegex(s);
-      const reMatch = new RegExp("^" + s, "i");
-      return function (node) {
-          return reMatch.test(node.title);
-      };
-  }
-
   /*!
    * Wunderbaum - ext-keynav
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   const QUICKSEARCH_DELAY = 500;
   class KeynavExtension extends WunderbaumExtension {
@@ -1486,7 +1395,7 @@
           const event = data.event, tree = this.tree, opts = data.options, activate = !event.ctrlKey || opts.autoActivate, curInput = this._getEmbeddedInputElem(event.target), navModeOption = opts.navigationModeOption;
           // isCellEditMode = tree.navMode === NavigationMode.cellEdit;
           let focusNode, eventName = eventToString(event), node = data.node, handled = true;
-          tree.log(`onKeyEvent: ${eventName}, curInput`, curInput);
+          // tree.log(`onKeyEvent: ${eventName}, curInput`, curInput);
           if (!tree.isEnabled()) {
               // tree.logDebug(`onKeyEvent ignored for disabled tree: ${eventName}`);
               return false;
@@ -1609,10 +1518,11 @@
                   if (eventName === "Escape") {
                       // Discard changes
                       node.render();
+                      // } else if (!INPUT_BREAKOUT_KEYS.has(eventName)) {
                   }
-                  else if (!INPUT_BREAKOUT_KEYS.has(eventName)) {
+                  else if (eventName !== "Enter") {
                       // Let current `<input>` handle it
-                      node.logDebug(`Ignored ${eventName} inside input`);
+                      node.logDebug(`Ignored ${eventName} inside focused input`);
                       return;
                   }
                   // const curInputType = curInput.type || curInput.tagName;
@@ -1683,24 +1593,24 @@
                       if (isColspan && node.isExpanded()) {
                           node.setExpanded(false);
                       }
-                      else if (tree.activeColIdx > 0) {
+                      else if (!isColspan && tree.activeColIdx > 0) {
                           tree.setColumn(tree.activeColIdx - 1);
-                          handled = true;
                       }
                       else if (navModeOption !== NavigationOptions.cell) {
                           tree.setCellNav(false); // row-nav mode
-                          handled = true;
                       }
+                      handled = true;
                       break;
                   case "ArrowRight":
                       tree.setFocus(); // Blur prev. input if any
                       if (isColspan && !node.isExpanded()) {
                           node.setExpanded();
                       }
-                      else if (tree.activeColIdx < tree.columns.length - 1) {
+                      else if (!isColspan &&
+                          tree.activeColIdx < tree.columns.length - 1) {
                           tree.setColumn(tree.activeColIdx + 1);
-                          handled = true;
                       }
+                      handled = true;
                       break;
                   case "ArrowDown":
                   case "ArrowUp":
@@ -1733,7 +1643,7 @@
   /*!
    * Wunderbaum - ext-logger
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   class LoggerExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -1756,7 +1666,7 @@
                   if (ignoreEvents.has(name)) {
                       return tree._superApply(arguments);
                   }
-                  let start = Date.now();
+                  const start = Date.now();
                   const res = tree._superApply(arguments);
                   console.debug(`${prefix}: callEvent('${name}') took ${Date.now() - start} ms.`, arguments[1]);
                   return res;
@@ -1770,10 +1680,250 @@
       }
   }
 
+  /*!
+   * Wunderbaum - common
+   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
+   */
+  const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
+  /**
+   * Fixed height of a row in pixel. Must match the SCSS variable `$row-outer-height`.
+   */
+  const ROW_HEIGHT = 22;
+  /**
+   * Fixed width of node icons in pixel. Must match the SCSS variable `$icon-outer-width`.
+   */
+  const ICON_WIDTH = 20;
+  /**
+   * Adjust the width of the title span, so overflow ellipsis work.
+   * (2 x `$col-padding-x` + 3px rounding errors).
+   */
+  const TITLE_SPAN_PAD_Y = 7;
+  /** Render row markup for N nodes above and below the visible viewport. */
+  const RENDER_MAX_PREFETCH = 5;
+  /** Regular expression to detect if a string describes an image URL (in contrast
+   * to a class name). Strings are considered image urls if they contain '.' or '/'.
+   */
+  const TEST_IMG = new RegExp(/\.|\//);
+  // export const RECURSIVE_REQUEST_ERROR = "$recursive_request";
+  // export const INVALID_REQUEST_TARGET_ERROR = "$request_target_invalid";
+  /**
+   * Default node icons.
+   * Requires bootstrap icons https://icons.getbootstrap.com
+   */
+  const iconMap = {
+      error: "bi bi-exclamation-triangle",
+      // loading: "bi bi-hourglass-split wb-busy",
+      loading: "bi bi-chevron-right wb-busy",
+      // loading: "bi bi-arrow-repeat wb-spin",
+      // loading: '<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>',
+      // noData: "bi bi-search",
+      noData: "bi bi-question-circle",
+      expanderExpanded: "bi bi-chevron-down",
+      // expanderExpanded: "bi bi-dash-square",
+      expanderCollapsed: "bi bi-chevron-right",
+      // expanderCollapsed: "bi bi-plus-square",
+      expanderLazy: "bi bi-chevron-right wb-helper-lazy-expander",
+      // expanderLazy: "bi bi-chevron-bar-right",
+      checkChecked: "bi bi-check-square",
+      checkUnchecked: "bi bi-square",
+      checkUnknown: "bi dash-square-dotted",
+      radioChecked: "bi bi-circle-fill",
+      radioUnchecked: "bi bi-circle",
+      radioUnknown: "bi bi-circle-dotted",
+      folder: "bi bi-folder2",
+      folderOpen: "bi bi-folder2-open",
+      folderLazy: "bi bi-folder-symlink",
+      doc: "bi bi-file-earmark",
+  };
+  /** 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",
+      "types",
+  ]);
+  // /** Key codes that trigger grid navigation, even when inside an input element. */
+  // export const INPUT_BREAKOUT_KEYS: Set<string> = new Set([
+  //   // "ArrowDown",
+  //   // "ArrowUp",
+  //   "Enter",
+  //   "Escape",
+  // ]);
+  /** Map `KeyEvent.key` to navigation action. */
+  const KEY_TO_ACTION_DICT = {
+      " ": "toggleSelect",
+      "+": "expand",
+      Add: "expand",
+      ArrowDown: "down",
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      ArrowUp: "up",
+      Backspace: "parent",
+      "/": "collapseAll",
+      Divide: "collapseAll",
+      End: "lastCol",
+      Home: "firstCol",
+      "Control+End": "last",
+      "Control+Home": "first",
+      "Meta+ArrowDown": "last",
+      "Meta+ArrowUp": "first",
+      "*": "expandAll",
+      Multiply: "expandAll",
+      PageDown: "pageDown",
+      PageUp: "pageUp",
+      "-": "collapse",
+      Subtract: "collapse",
+  };
+  /** 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 === 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). */
+  function makeNodeTitleStartMatcher(s) {
+      s = escapeRegex(s);
+      const reMatch = new RegExp("^" + s, "i");
+      return function (node) {
+          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.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   const nodeMimeType = "application/x-wunderbaum-node";
   class DndExtension extends WunderbaumExtension {
@@ -2041,7 +2191,7 @@
   /*!
    * Wunderbaum - drag_observer
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2175,7 +2325,7 @@
   /*!
    * Wunderbaum - ext-grid
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   class GridExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -2212,7 +2362,7 @@
   /*!
    * Wunderbaum - deferred
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -2265,7 +2415,7 @@
   /*!
    * Wunderbaum - wunderbaum_node
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   /** Top-level properties that can be passed with `data`. */
   const NODE_PROPS = new Set([
@@ -2406,57 +2556,63 @@
       /**
        * 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) {
-          let insertBefore = options
-              ? options.before
-              : null, 
-          // redraw = options ? options.redraw !== false : true,
-          nodeList = [];
+          const tree = this.tree;
+          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 {
-              this.tree.enableUpdate(false);
+              tree.enableUpdate(false);
               if (isPlainObject(nodeData)) {
                   nodeData = [nodeData];
               }
+              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(this.tree, this, child);
+                  const n = new WunderbaumNode(tree, this, child);
+                  if (forceExpand && !n.isUnloaded()) {
+                      n.expanded = true;
+                  }
                   nodeList.push(n);
                   if (subChildren) {
-                      n.addChildren(subChildren, { redraw: false });
+                      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);
               }
               // TODO:
-              // if (this.tree.options.selectMode === 3) {
+              // if (tree.options.selectMode === 3) {
               //   this.fixSelection3FromEndNodes();
               // }
               // this.triggerModifyChild("add", nodeList.length === 1 ? nodeList[0] : null);
-              this.tree.setModified(ChangeType.structure);
-              return nodeList[0];
+              tree.setModified(ChangeType.structure);
           }
           finally {
-              this.tree.enableUpdate(true);
+              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.
@@ -2530,21 +2686,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)) {
@@ -2574,15 +2807,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)) {
@@ -2746,7 +2977,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() {
@@ -2847,14 +3079,20 @@
           // this.debug("isVisible: VISIBLE");
           return true;
       }
-      _loadSourceObject(source) {
+      _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 });
           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);
@@ -2868,7 +3106,6 @@
               tree.updateColumns({ calculateCols: false });
           }
           this.addChildren(source.children);
-          delete source.columns;
           // Add extra data to `tree.data`
           for (const [key, value] of Object.entries(source)) {
               if (!RESERVED_TREE_SOURCE_KEYS.has(key)) {
@@ -3015,17 +3252,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(() => {
@@ -3267,6 +3503,9 @@
           else if (this.children) {
               icon = iconMap.folder;
           }
+          else if (this.lazy) {
+              icon = iconMap.folderLazy;
+          }
           else {
               icon = iconMap.doc;
           }
@@ -3430,13 +3669,13 @@
               if (isColspan) {
                   let vpWidth = tree.element.clientWidth;
                   titleSpan.style.width =
-                      vpWidth - nodeElem._ofsTitlePx - ROW_EXTRA_PAD + "px";
+                      vpWidth - nodeElem._ofsTitlePx - TITLE_SPAN_PAD_Y + "px";
               }
               else {
                   titleSpan.style.width =
                       columns[0]._widthPx -
                           nodeElem._ofsTitlePx -
-                          ROW_EXTRA_PAD +
+                          TITLE_SPAN_PAD_Y +
                           "px";
               }
           }
@@ -3749,22 +3988,32 @@
        * 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 (flag && scrollIntoView !== false) {
+              const lastChild = this.getLastChild();
+              if (lastChild) {
+                  this.tree.updatePendingModifications();
+                  lastChild.scrollIntoView({ topNode: this });
+              }
+          }
       }
       /**
        * Set keyboard focus here.
@@ -3993,7 +4242,7 @@
   /*!
    * Wunderbaum - ext-edit
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.8, Fri, 23 Sep 2022 20:47:29 GMT (https://github.com/mar10/wunderbaum)
    */
   // const START_MARKER = "\uFFF7";
   class EditExtension extends WunderbaumExtension {
@@ -4139,8 +4388,9 @@
               node.logInfo("beforeEdit canceled operation.");
               return;
           }
-          // `beforeEdit(e)` may return an input HTML string. Otherwise use a default:
-          if (!inputHtml) {
+          // `beforeEdit(e)` may return an input HTML string. Otherwise use a default.
+          // (we also treat a `true` return value as 'use default'):
+          if (inputHtml === true || !inputHtml) {
               const title = escapeHtml(node.title);
               inputHtml = `<input type=text class="wb-input-edit" value="${title}" required autocorrect=off>`;
           }
@@ -4285,8 +4535,8 @@
    * https://github.com/mar10/wunderbaum
    *
    * Released under the MIT license.
-   * @version v0.0.6
-   * @date Sat, 10 Sep 2022 19:29:21 GMT
+   * @version v0.0.8
+   * @date Fri, 23 Sep 2022 20:47:29 GMT
    */
   class WbSystemRoot extends WunderbaumNode {
       constructor(tree) {
@@ -4857,22 +5107,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":
@@ -5078,16 +5328,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) {
@@ -5121,10 +5363,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}
        */
@@ -5134,10 +5373,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);
@@ -5151,7 +5387,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`
@@ -5440,17 +5676,20 @@
       }
       /**
        * Make sure that this node is vertically scrolled into the viewport.
+       *
+       * Nodes that are above the visible area become the top row, nodes that are
+       * below the viewport become the bottom row.
        */
       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;
@@ -5461,6 +5700,7 @@
           const vpTop = headerHeight;
           const vpRowTop = rowTop - scrollTop;
           const vpRowBottom = vpRowTop + ROW_HEIGHT;
+          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) {
@@ -5468,17 +5708,21 @@
               else {
                   // Node is below viewport
                   // this.log("Below viewport");
-                  newScrollTop = rowTop + ROW_HEIGHT - vpHeight + PADDING; // leave some pixels between vieeport bounds
+                  newScrollTop = rowTop + ROW_HEIGHT - vpHeight + PADDING; // leave some pixels between viewport bounds
               }
           }
           else {
               // Node is above viewport
               // this.log("Above viewport");
-              newScrollTop = rowTop - vpTop - PADDING; // leave some pixels between vieeport bounds
+              newScrollTop = rowTop - vpTop - PADDING; // leave some pixels between viewport bounds
           }
           if (newScrollTop != null) {
               this.log(`scrollTo(${rowTop}): ${scrollTop} => ${newScrollTop}`);
               scrollParent.scrollTop = newScrollTop;
+              if (topNode) {
+                  // Make sure the topNode is always visible
+                  this.scrollTo(topNode);
+              }
               // this.setModified(ChangeType.vscroll);
           }
       }
@@ -5507,10 +5751,9 @@
               newLeft = colRight - vpWidth;
           }
           // util.assert(node._rowIdx != null);
-          // const curLeft = this.scrollContainer.scrollLeft;
-          this.log(`scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`);
-          // const nodeOfs = node._rowIdx * ROW_HEIGHT;
-          // let newLeft;
+          // this.log(
+          //   `scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`
+          // );
           this.element.scrollLeft = newLeft;
           // this.setModified(ChangeType.vscroll);
           // }
@@ -5701,11 +5944,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;
@@ -5714,7 +5959,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) {
@@ -5766,7 +6011,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
@@ -5780,7 +6026,7 @@
           // util.error("BREAK");
           if (modified) {
               this._renderHeaderMarkup();
-              if (opts.updateRows) {
+              if (options.updateRows) {
                   this._updateRows();
               }
           }
@@ -5843,6 +6089,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;
@@ -5856,7 +6104,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";
@@ -5913,14 +6161,15 @@
        *   (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;
+          // const grace_prefetch = RENDER_MAX_PREFETCH - RENDER_MIN_PREFETCH;
           const ofs = this.element.scrollTop;
           let startIdx = Math.max(0, ofs / row_height - prefetch);
           startIdx = Math.floor(startIdx);
@@ -6019,16 +6268,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
@@ -6077,11 +6326,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;
               }
@@ -6216,7 +6465,7 @@
   }
   Wunderbaum.sequence = 0;
   /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-  Wunderbaum.version = "v0.0.6"; // Set to semver by 'grunt release'
+  Wunderbaum.version = "v0.0.8"; // Set to semver by 'grunt release'
   /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
   Wunderbaum.util = util;