wunderbaum 0.0.7 → 0.0.8

package/src/wb_node.ts

@@ -9,12 +9,14 @@ import * as util from "./util";
 
 import { Wunderbaum } from "./wunderbaum";
 import {
+  AddChildrenOptions,
   AddNodeType,
   ApplyCommandType,
   ChangeType,
   ColumnEventInfos,
+  ExpandAllOptions,
   MakeVisibleOptions,
-  MatcherType,
+  MatcherCallback,
   NodeAnyCallback,
   NodeStatusType,
   NodeVisitCallback,
@@ -34,6 +36,7 @@ import {
   TITLE_SPAN_PAD_Y,
   ROW_HEIGHT,
   TEST_IMG,
+  inflateSourceData,
 } from "./common";
 import { Deferred } from "./deferred";
 import { WbNodeData } from "./wb_options";
@@ -218,49 +221,55 @@ export class WunderbaumNode {
   /**
    * 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: any, options?: any): WunderbaumNode {
+  addChildren(
+    nodeData: WbNodeData | WbNodeData[],
+    options?: AddChildrenOptions
+  ): WunderbaumNode {
     const tree = this.tree;
-    const level = options ? options.level : this.getLevel();
-    let insertBefore: WunderbaumNode | string | number = options
-        ? options.before
-        : null,
-      // redraw = options ? options.redraw !== false : true,
-      nodeList = [];
+    let { before = null, applyMinExpanLevel = true, _level } = options ?? {};
+    // let { before, loadLazy=true, _level } = options ?? {};
+    // const isTopCall = _level == null;
+    _level ??= this.getLevel();
+    const nodeList = [];
 
     try {
       tree.enableUpdate(false);
 
       if (util.isPlainObject(nodeData)) {
-        nodeData = [nodeData];
+        nodeData = [<WbNodeData>nodeData];
       }
-      const forceExpand = level < tree.options.minExpandLevel!;
-      for (let child of nodeData) {
-        let subChildren = child.children;
+      const forceExpand =
+        applyMinExpanLevel && _level < tree.options.minExpandLevel!;
+      for (let child of <WbNodeData[]>nodeData) {
+        const subChildren = child.children;
         delete child.children;
 
-        let n = new WunderbaumNode(tree, this, child);
-        if (forceExpand && !n.lazy) n.expanded = true;
+        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);
-        util.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);
+        util.assert(
+          pos >= 0,
+          `options.before must be a direct child of ${this}`
+        );
         // insert nodeList after children[pos]
         this.children.splice(pos, 0, ...nodeList);
       }
@@ -270,10 +279,13 @@ export class WunderbaumNode {
       // }
       // 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];
   }
 
   /**
@@ -351,22 +363,99 @@ export class WunderbaumNode {
     }
   }
 
-  /** Call `setExpanded()` on al child nodes*/
-  async expandAll(flag: boolean = true) {
-    this.visit((node) => {
-      node.setExpanded(flag);
-    });
+  /** Call `setExpanded()` on all descendant nodes. */
+  async expandAll(flag: boolean = true, options?: ExpandAllOptions) {
+    const tree = this.tree;
+    const minExpandLevel = this.tree.options.minExpandLevel;
+    let { depth = 99, loadLazy, force } = options ?? {};
+
+    const expand_opts = {
+      scrollIntoView: false,
+      force: force,
+      loadLazy: loadLazy,
+    };
+
+    // this.logInfo(`expandAll(${flag})`);
+    // Expand all direct children in parallel:
+    async function _iter(n: WunderbaumNode, level: number | null) {
+      // 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: Promise<unknown>[] = [];
+      n.children?.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: string | MatcherType): WunderbaumNode[] {
-    const matcher = util.isFunction(match)
-      ? <MatcherType>match
-      : makeNodeTitleMatcher(<string>match);
+  findAll(match: string | RegExp | MatcherCallback): WunderbaumNode[] {
+    const matcher =
+      typeof match === "function" ? match : makeNodeTitleMatcher(match);
     const res: WunderbaumNode[] = [];
     this.visit((n) => {
       if (matcher(n)) {
@@ -398,15 +487,14 @@ export class WunderbaumNode {
     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: string | MatcherType): WunderbaumNode | null {
-    const matcher = util.isFunction(match)
-      ? <MatcherType>match
-      : makeNodeTitleMatcher(<string>match);
+  findFirst(match: string | RegExp | MatcherCallback): WunderbaumNode | null {
+    const matcher =
+      typeof match === "function" ? match : makeNodeTitleMatcher(match);
     let res = null;
     this.visit((n) => {
       if (matcher(n)) {
@@ -596,7 +684,8 @@ export class WunderbaumNode {
    * an expand operation is currently possible.
    */
   isExpandable(andCollapsed = false): boolean {
-    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. */
@@ -734,6 +823,13 @@ export class WunderbaumNode {
       source = { children: source };
     }
     util.assert(util.isPlainObject(source));
+
+    const format: string = source.format ?? "nested";
+    util.assert(format === "nested" || format === "flat");
+
+    // Pre-rocess for 'nested' or 'flat' format
+    inflateSourceData(source);
+
     util.assert(
       source.children,
       "If `source` is an object, it must have a `children` property"
@@ -923,22 +1019,23 @@ export class WunderbaumNode {
 
   /** 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?: MakeVisibleOptions) {
+  async makeVisible(options?: MakeVisibleOptions) {
     let i,
       dfd = new Deferred(),
       deferreds = [],
       parents = this.getParentList(false, false),
       len = parents.length,
-      // effects = !(opts && opts.noAnimation === true),
-      scroll = !(opts && opts.scrollIntoView === false);
+      noAnimation = util.getOption(options, "noAnimation", false),
+      scroll = util.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?.noAnimation };
+      const seOpts = { noAnimation: noAnimation };
       deferreds.push(parents[i].setExpanded(true, seOpts));
     }
     Promise.all(deferreds).then(() => {
@@ -1727,11 +1824,12 @@ export class WunderbaumNode {
    * Expand or collapse this node.
    */
   async setExpanded(flag: boolean = true, options?: SetExpandedOptions) {
+    const { force, scrollIntoView, immediate } = options ?? {};
     if (
       !flag &&
       this.isExpanded() &&
       this.getLevel() <= this.tree.getOption("minExpandLevel") &&
-      !util.getOption(options, "force")
+      !force
     ) {
       this.logDebug("Ignored collapse request below expandLevel.");
       return;
@@ -1739,15 +1837,18 @@ export class WunderbaumNode {
     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: !!util.getOption(options, "immediate") };
+    const updateOpts = { immediate: immediate };
+    // const updateOpts = { immediate: !!util.getOption(options, "immediate") };
     this.tree.setModified(ChangeType.structure, updateOpts);
-    if (util.getOption(options, "scrollIntoView") !== false) {
+    if (flag && scrollIntoView !== false) {
       const lastChild = this.getLastChild();
       if (lastChild) {
+        this.tree.updatePendingModifications();
         lastChild.scrollIntoView({ topNode: this });
       }
     }

package/src/wunderbaum.ts

@@ -23,8 +23,9 @@ import {
   ApplyCommandType,
   ChangeType,
   ColumnDefinitionList,
+  ExpandAllOptions,
   FilterModeType,
-  MatcherType,
+  MatcherCallback,
   NavigationOptions,
   NodeStatusType,
   NodeTypeDefinitions,
@@ -710,13 +711,13 @@ export class Wunderbaum {
   /**
    * Apply a modification (or navigation) operation on the **tree or active node**.
    */
-  applyCommand(cmd: ApplyCommandType, opts?: any): any;
+  applyCommand(cmd: ApplyCommandType, options?: any): any;
 
   /**
    * Apply a modification (or navigation) operation on a **node**.
    * @see {@link WunderbaumNode.applyCommand}
    */
-  applyCommand(cmd: ApplyCommandType, node: WunderbaumNode, opts?: any): any;
+  applyCommand(cmd: ApplyCommandType, node: WunderbaumNode, options?: any): any;
 
   /**
    * Apply a modification or navigation operation.
@@ -737,23 +738,23 @@ export class Wunderbaum {
   applyCommand(
     cmd: ApplyCommandType,
     nodeOrOpts?: WunderbaumNode | any,
-    opts?: any
+    options?: any
   ): any {
     let // clipboard,
       node,
       refNode;
-    // opts = $.extend(
+    // options = $.extend(
     // 	{ setActive: true, clipboard: CLIPBOARD },
-    // 	opts_
+    // 	options_
     // );
     if (nodeOrOpts instanceof WunderbaumNode) {
       node = nodeOrOpts;
     } else {
       node = this.getActiveNode()!;
-      util.assert(opts === undefined);
-      opts = nodeOrOpts;
+      util.assert(options === undefined);
+      options = nodeOrOpts;
     }
-    // clipboard = opts.clipboard;
+    // clipboard = options.clipboard;
 
     switch (cmd) {
       // Sorting and indentation:
@@ -973,15 +974,8 @@ export class Wunderbaum {
   }
 
   /** Recursively expand all expandable nodes (triggers lazy load id needed). */
-  async expandAll(flag: boolean = 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: boolean = true, options?: ExpandAllOptions) {
+    await this.root.expandAll(flag, options);
   }
 
   /** Recursively select all nodes. */
@@ -1018,26 +1012,20 @@ export class Wunderbaum {
   }
 
   /**
-   * 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}
    */
-  findAll(match: string | MatcherType) {
+  findAll(match: string | RegExp | MatcherCallback) {
     return this.root.findAll(match);
   }
 
   /**
    * Find first node that matches condition.
    *
-   * @param match title string to search for, or a
-   *     callback function that returns `true` if a node is matched.
    * @see {@link WunderbaumNode.findFirst}
-   *
    */
-  findFirst(match: string | MatcherType) {
+  findFirst(match: string | RegExp | MatcherCallback) {
     return this.root.findFirst(match);
   }
 
@@ -1049,8 +1037,8 @@ export class Wunderbaum {
    * @see {@link WunderbaumNode.findFirst}
    *
    */
-  findKey(key: string): WunderbaumNode | undefined {
-    return this.keyMap.get(key);
+  findKey(key: string): WunderbaumNode | null {
+    return this.keyMap.get(key) || null;
   }
 
   /**
@@ -1058,7 +1046,7 @@ export class Wunderbaum {
    * and wrap-around at the end.
    */
   findNextNode(
-    match: string | MatcherType,
+    match: string | MatcherCallback,
     startNode?: WunderbaumNode | null
   ): WunderbaumNode | null {
     //, visibleOnly) {
@@ -1383,13 +1371,13 @@ export class Wunderbaum {
 
     let node;
     WunderbaumNode;
-    let opts: ScrollToOptions | undefined;
+    let options: ScrollToOptions | undefined;
 
     if (nodeOrOpts instanceof WunderbaumNode) {
       node = nodeOrOpts;
     } else {
-      opts = nodeOrOpts;
-      node = opts.node;
+      options = nodeOrOpts;
+      node = options.node;
     }
     util.assert(node && node._rowIdx != null);
 
@@ -1401,7 +1389,7 @@ export class Wunderbaum {
     const vpTop = headerHeight;
     const vpRowTop = rowTop - scrollTop;
     const vpRowBottom = vpRowTop + ROW_HEIGHT;
-    const topNode = opts?.topNode;
+    const topNode = options?.topNode;
 
     // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts );
     let newScrollTop: number | null = null;
@@ -1670,11 +1658,13 @@ export class Wunderbaum {
     }
   }
   /** Update column headers and width. */
-  updateColumns(opts?: any) {
-    opts = Object.assign({ calculateCols: true, updateRows: true }, opts);
+  updateColumns(options?: any) {
+    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;
@@ -1686,7 +1676,7 @@ export class Wunderbaum {
       this.setCellNav(false);
     }
 
-    if (opts.calculateCols) {
+    if (options.calculateCols) {
       // Gather width definitions
       this._columnsById = {};
       for (let col of this.columns) {
@@ -1736,7 +1726,8 @@ export class Wunderbaum {
         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
@@ -1751,7 +1742,7 @@ export class Wunderbaum {
     // util.error("BREAK");
     if (modified) {
       this._renderHeaderMarkup();
-      if (opts.updateRows) {
+      if (options.updateRows) {
         this._updateRows();
       }
     }
@@ -1819,6 +1810,9 @@ export class Wunderbaum {
    * @internal
    */
   protected _updateViewportImmediately() {
+    // Shorten container height to avoid v-scrollbar
+    const FIX_ADJUST_HEIGHT = 1;
+
     if (this._disableUpdateCount) {
       this.log(
         `IGNORED _updateViewportImmediately() disable level: ${this._disableUpdateCount}`
@@ -1835,7 +1829,8 @@ export class Wunderbaum {
     // 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);
@@ -1899,11 +1894,11 @@ export class Wunderbaum {
    *   (including upper and lower prefetch)
    * -
    */
-  protected _updateRows(opts?: any): boolean {
+  protected _updateRows(options?: any): boolean {
     // 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;
@@ -2013,15 +2008,15 @@ export class Wunderbaum {
    *     {start: First tree node, reverse: false, includeSelf: true, includeHidden: false, wrap: false}
    * @returns {boolean} false if iteration was canceled
    */
-  visitRows(callback: (node: WunderbaumNode) => any, opts?: any): boolean {
+  visitRows(callback: (node: WunderbaumNode) => any, options?: any): boolean {
     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 || {};
+    options = options || {};
     let i,
       nextIdx,
       parent,
@@ -2029,10 +2024,10 @@ export class Wunderbaum {
       siblings,
       stopNode: WunderbaumNode,
       siblingOfs = 0,
-      skipFirstNode = opts.includeSelf === false,
-      includeHidden = !!opts.includeHidden,
+      skipFirstNode = options.includeSelf === false,
+      includeHidden = !!options.includeHidden,
       checkFilter = !includeHidden && this.filterMode === "hide",
-      node: WunderbaumNode = opts.start || this.root.children![0];
+      node: WunderbaumNode = options.start || this.root.children![0];
 
     parent = node.parent;
     while (parent) {
@@ -2091,11 +2086,11 @@ export class Wunderbaum {
       parent = parent.parent;
       siblingOfs = 1; //
 
-      if (!parent && opts.wrap) {
+      if (!parent && options.wrap) {
         this.logDebug("visitRows(): wrap around");
-        util.assert(opts.start, "`wrap` option requires `start`");
-        stopNode = opts.start;
-        opts.wrap = false;
+        util.assert(options.start, "`wrap` option requires `start`");
+        stopNode = options.start;
+        options.wrap = false;
         parent = this.root;
         siblingOfs = 0;
       }