wunderbaum 0.11.1 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wunderbaum",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "title": "A treegrid control.",
   "description": "JavaScript tree/grid/treegrid control.",
   "homepage": "https://github.com/mar10/wunderbaum",

package/src/types.ts

@@ -594,12 +594,34 @@ export interface ApplyCommandOptions {
 
 /** Possible values for {@link Wunderbaum.expandAll} and {@link WunderbaumNode.expandAll}. */
 export interface ExpandAllOptions {
-  /** Restrict expand level @default 99 */
-  depth?: number;
   /** Expand and load lazy nodes @default false  */
   loadLazy?: boolean;
-  /** Ignore `minExpandLevel` option @default false */
+  /** Unload lazily loaded children if any (if collapsing). @default false */
+  resetLazy?: boolean;
+  /** Ignore tree's `minExpandLevel` option @default false */
   force?: boolean;
+  /** Restrict expand level.
+   * Pass 0 to make only toplevel nodes visible, 1 to expand one level deeper, etc.
+   * @default unset (unlimited)
+   */
+  depth?: number;
+  /**
+   * Also collapse child nodes beyond the `depth` level.
+   * Otherwise only the `depth` level is collapsed and the expand state of the
+   * descendants is retained.
+   * Only in combination with collapse and `depth`.
+   * Expanding with `deep` option is not supported as recursion depth implied by
+   * the `depth` option. However a `deep` option will be considered if
+   * `collapseOthers` is set.
+   * @default false
+   */
+  deep?: boolean;
+  /**
+   * Expand up to level=depth and collapse all other branches.
+   * Only in combination with `flag == true`, `depth > 0`.
+   * @default false
+   */
+  collapseOthers?: boolean;
   /** Keep active node visible @default true */
   keepActiveNodeVisible?: boolean;
 }
@@ -723,7 +745,7 @@ export interface SetColumnOptions {
 
 /** Possible values for {@link WunderbaumNode.setExpanded} `options` argument. */
 export interface SetExpandedOptions {
-  /** Ignore {@link WunderbaumOptions.minExpandLevel}. @default false */
+  /** Ignore {@link WunderbaumOptions}.minExpandLevel. @default false */
   force?: boolean;
   /** Immediately update viewport (async otherwise). @default false */
   immediate?: boolean;
@@ -731,6 +753,8 @@ export interface SetExpandedOptions {
   noAnimation?: boolean;
   /** Do not send events. @default false */
   noEvents?: boolean;
+  /** Unload lazily loaded children if any (if collapsing). @default false */
+  resetLazy?: boolean;
   /** Scroll up to bring expanded nodes into viewport. @default false */
   scrollIntoView?: boolean;
 }

package/src/wb_node.ts

@@ -470,58 +470,78 @@ export class WunderbaumNode {
     this.tree._callMethod("edit.startEditTitle", this);
   }
 
-  /** Call `setExpanded()` on all descendant nodes. */
+  /**
+   * Call `setExpanded()` on all descendant nodes.
+   *
+   * @param flag true to expand, false to collapse.
+   * @param options Additional options.
+   * @see {@link Wunderbaum.expandAll}
+   * @see {@link WunderbaumNode.setExpanded}
+   */
   async expandAll(flag: boolean = true, options?: ExpandAllOptions) {
     const tree = this.tree;
-    const minExpandLevel = this.tree.options.minExpandLevel;
     const {
-      depth = 99,
-      loadLazy,
+      collapseOthers,
+      deep,
+      depth,
       force,
       keepActiveNodeVisible = true,
+      loadLazy,
+      resetLazy,
     } = options ?? {};
-
+    // limit expansion level to `depth` (or tree.minExpandLevel). Default: unlimited
+    const treeLevel = this.tree.options.minExpandLevel || null; // 0 -> null
+    const minLevel = depth ?? (force ? null : treeLevel);
     const expandOpts = {
-      scrollIntoView: false, // don't scroll very node on iteration
+      deep: deep,
       force: force,
       loadLazy: loadLazy,
+      resetLazy: resetLazy,
+      scrollIntoView: false, // don't scroll every node while iterating
     };
 
-    // this.logInfo(`expandAll(${flag})`);
+    this.logInfo(`expandAll(${flag}, depth=${depth}, minLevel=${minLevel})`);
+
+    util.assert(
+      !(flag && deep != null && !collapseOthers),
+      "Expanding with `deep` option is not supported (implied by the `depth` option)."
+    );
+
     // 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;
+    async function _iter(n: WunderbaumNode, level: number) {
+      // n.logInfo(`  _iter(level=${level})`);
       const promises: Promise<unknown>[] = [];
       n.children?.forEach((cn) => {
         if (flag) {
-          if (!cn.expanded && (cn.children || (loadLazy && cn.lazy))) {
+          if (
+            !cn.expanded &&
+            (minLevel == null || level < minLevel) &&
+            (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, expandOpts);
             promises.push(p);
-            p.then(async () => {
-              await _iter(cn, level_1);
-            });
+            if (depth == null) {
+              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));
+            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
+          // Do not collapse until minExpandLevel
+          if (minLevel == null || level >= minLevel) {
             cn.setExpanded(false, expandOpts);
           }
-          _iter(cn, level_1); // recursion, even if cn was already collapsed
+          if ((minLevel != null && level < minLevel) || deep) {
+            _iter(cn, level + 1); // recursion, even if cn was already collapsed
+          }
         }
       });
       return new Promise((resolve) => {
@@ -531,10 +551,20 @@ export class WunderbaumNode {
       });
     }
 
-    const tag = tree.logTime(`${this}.expandAll(${flag})`);
+    const tag = tree.logTime(`${this}.expandAll(${flag}, depth=${depth})`);
     try {
       tree.enableUpdate(false);
-      await _iter(this, depth);
+
+      await _iter(this, 0);
+
+      if (collapseOthers) {
+        util.assert(flag, "Option `collapseOthers` requires flag=true");
+        util.assert(
+          minLevel != null,
+          "Option `collapseOthers` requires `depth` or `minExpandLevel`"
+        );
+        this.expandAll(false, { depth: minLevel! });
+      }
     } finally {
       tree.enableUpdate(true);
       tree.logTimeEnd(tag);
@@ -2199,7 +2229,7 @@ export class WunderbaumNode {
     const colIdx = options?.colIdx; // Default: null
     const edit = options?.edit; // Default: false
 
-    util.assert(!colIdx || tree.isCellNav(), "colIdx requires cellNav");
+    // util.assert(!colIdx || tree.isCellNav(), "colIdx requires cellNav");
     util.assert(!edit || colIdx != null, "edit requires colIdx");
 
     if (!noEvents) {
@@ -2257,7 +2287,7 @@ export class WunderbaumNode {
    * Expand or collapse this node.
    */
   async setExpanded(flag: boolean = true, options?: SetExpandedOptions) {
-    const { force, scrollIntoView, immediate } = options ?? {};
+    const { force, scrollIntoView, immediate, resetLazy } = options ?? {};
     const sendEvents = !options?.noEvents; // Default: send events
     if (
       !flag &&
@@ -2284,6 +2314,8 @@ export class WunderbaumNode {
     }
     if (flag && this.lazy && this.children == null) {
       await this.loadLazy();
+    } else if (!flag && resetLazy && this.lazy && this.children) {
+      this.resetLazy();
     }
     this.expanded = flag;
     const updateOpts = { immediate: immediate };

package/src/wunderbaum.scss

@@ -4,6 +4,8 @@
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 // @use "sass:meta";
+@use "sass:color";
+@use "sass:list";
 
 // ----------------------------------------------------------------------------
 // --- Define default colors and settings
@@ -22,26 +24,26 @@ $alternate-row-color-hover: #f3f3f3; //#f7fcfe;
 $focus-border-color: #275dc5;
 
 // derived
-$drop-source-color: adjust-color($node-text-color, $lightness: 50%);
-$drop-target-color: adjust-color($bg-highlight-color, $lightness: 40%);
-$dim-color: adjust-color($node-text-color, $lightness: 20%);
-$error-background-color: adjust-color($error-color, $lightness: 45%);
+$drop-source-color: color.adjust($node-text-color, $lightness: 50%);
+$drop-target-color: color.adjust($bg-highlight-color, $lightness: 40%);
+$dim-color: color.adjust($node-text-color, $lightness: 20%);
+$error-background-color: color.adjust($error-color, $lightness: 45%);
 // @debug $dim-color;
-$hover-color: adjust-color($bg-highlight-color, $lightness: 48%); // #f7f7f7;
+$hover-color: color.adjust($bg-highlight-color, $lightness: 48%); // #f7f7f7;
 $hover-border-color: $hover-color;
 $grid-color: #dedede;
 $active-color: #e5f3fb;
-$active-cell-color: adjust-color($bg-highlight-color, $lightness: 20%);
+$active-cell-color: color.adjust($bg-highlight-color, $lightness: 20%);
 $active-border-color: #70c0e7;
 $active-hover-color: #dceff8;
 $active-hover-border-color: $bg-highlight-color;
 $active-column-color: $hover-color;
-$active-header-column-color: adjust-color($header-color, $lightness: -10%);
-$active-color-grayscale: grayscale($active-color);
-$active-border-color-grayscale: grayscale($active-border-color);
-$active-hover-color-grayscale: grayscale($active-hover-color);
-$active-cell-color-grayscale: grayscale($active-cell-color);
-$grid-color-grayscale: grayscale($grid-color);
+$active-header-column-color: color.adjust($header-color, $lightness: -10%);
+$active-color-grayscale: color.grayscale($active-color);
+$active-border-color-grayscale: color.grayscale($active-border-color);
+$active-hover-color-grayscale: color.grayscale($active-hover-color);
+$active-cell-color-grayscale: color.grayscale($active-cell-color);
+$grid-color-grayscale: color.grayscale($grid-color);
 // @debug $active-header-column-color;
 $filter-dim-color: #dedede;
 $filter-submatch-color: #868581;
@@ -696,10 +698,10 @@ div.wunderbaum {
 
   /* Colorize indentation levels. */
   &.wb-rainbow {
-    @for $i from 1 through length($level-rainbow) {
-      i.wb-expander:nth-child(#{length($level-rainbow)}n + #{$i}),
-      i.wb-indent:nth-child(#{length($level-rainbow)}n + #{$i}) {
-        background: nth($level-rainbow, $i);
+    @for $i from 1 through list.length($level-rainbow) {
+      i.wb-expander:nth-child(#{list.length($level-rainbow)}n + #{$i}),
+      i.wb-indent:nth-child(#{list.length($level-rainbow)}n + #{$i}) {
+        background: list.nth($level-rainbow, $i);
       }
     }
   }

package/src/wunderbaum.ts

@@ -498,7 +498,12 @@ export class Wunderbaum {
       ) {
         return false;
       }
-      if (node && info.colIdx === 0 && node.isExpandable()) {
+      if (
+        node &&
+        info.colIdx === 0 &&
+        node.isExpandable() &&
+        info.region !== NodeRegion.expander
+      ) {
         this._callMethod("edit._stopEditTitle");
         node.setExpanded(!node.isExpanded());
       }