wunderbaum 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wunderbaum",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "title": "A treegrid control.",
   "description": "JavaScript tree/grid/treegrid control.",
   "homepage": "https://github.com/mar10/wunderbaum",
@@ -60,7 +60,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "grunt": "^1.6.1",
     "grunt-contrib-connect": "^3.0.0",
-    "grunt-contrib-qunit": "^7.0.0",
+    "grunt-contrib-qunit": "^10.1.1",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-exec": "^3.0.0",
     "grunt-yabs": "^1.3.0",
@@ -70,7 +70,7 @@
     "postcss-url": "^10.1.3",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
-    "puppeteer": "^20.5.0",
+    "puppeteer": "^23.10.0",
     "qunit": "^2.19.4",
     "rollup": "^3.23.0",
     "rollup-plugin-scss": "^4.0.0",
@@ -80,7 +80,8 @@
     "ts-node": "^10.9.1",
     "tslib": "^2.5.2",
     "typedoc": "^0.25.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "yarn-audit-fix": "^10.1.1"
   },
   "nodemonConfig": {
     "watch": [
@@ -131,5 +132,6 @@
         "wunderbaum.umd.min.js.map"
       ]
     }
-  ]
+  ],
+  "packageManager": "yarn@4.4.1+sha512.f825273d0689cc9ead3259c14998037662f1dcd06912637b21a450e8da7cfeb4b1965bbee73d16927baa1201054126bc385c6f43ff4aa705c8631d26e12460f1"
 }

package/src/common.ts

@@ -12,7 +12,7 @@ export const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
 /**
  * Fixed height of a row in pixel. Must match the SCSS variable `$row-outer-height`.
  */
-export const ROW_HEIGHT = 22;
+export const DEFAULT_ROW_HEIGHT = 22;
 /**
  * Fixed width of node icons in pixel. Must match the SCSS variable `$icon-outer-width`.
  */

package/src/types.ts

@@ -119,7 +119,7 @@ export interface WbNodeData {
   colspan?: boolean;
   expanded?: boolean;
   icon?: IconOption;
-  iconTooltip?: boolean | string;
+  iconTooltip?: TooltipOption;
   key?: string;
   lazy?: boolean;
   /** Make child nodes single-select radio buttons. */
@@ -128,7 +128,7 @@ export interface WbNodeData {
   selected?: boolean;
   statusNodeType?: NodeStatusType;
   title: string;
-  tooltip?: boolean | string;
+  tooltip?: TooltipOption;
   type?: string;
   unselectable?: boolean;
   /** @internal */
@@ -335,8 +335,8 @@ export interface NodeTypeDefinition {
   colspan?: boolean;
   /** Default icon for matching nodes. */
   icon?: IconOption;
-  /** Default icon for matching nodes. */
-  iconTooltip?: string | boolean;
+  /** Default icon tooltip for matching nodes. */
+  iconTooltip?: TooltipOption;
   // and more
   [key: string]: unknown;
 }
@@ -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/util.ts

@@ -814,6 +814,18 @@ export function toBool(
   throw new Error("No default boolean value provided");
 }
 
+/**
+ * Return `val` unless `val` is a number in which case we convert to boolean.
+ * This is useful when a boolean value is stored as a 0/1 (e.g. in JSON) and
+ * we still want to maintain string values. null and undefined are returned as
+ * is. E.g. `checkbox` may be boolean or 'radio'.
+ */
+export function intToBool(
+  val: boolean | number | string | undefined
+): boolean | string | undefined {
+  return typeof val === "number" ? !!val : val;
+}
+
 // /** Check if a string is contained in an Array or Set. */
 // export function isAnyOf(s: string, items: Array<string>|Set<string>): boolean {
 //   return Array.prototype.includes.call(items, s)

package/src/wb_ext_dnd.ts

@@ -14,7 +14,6 @@ import {
   DropRegionType,
   DropRegionTypeSet,
 } from "./types";
-import { ROW_HEIGHT } from "./common";
 import { DebouncedFunction, throttle } from "./debounce";
 
 const nodeMimeType = "application/x-wunderbaum-node";
@@ -135,21 +134,22 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     e: DragEvent,
     allowed: DropRegionTypeSet | null
   ): DropRegionType | false {
+    const rowHeight = this.tree.options.rowHeightPx!;
     const dy = e.offsetY;
 
     if (!allowed) {
       return false;
     } else if (allowed.size === 3) {
-      return dy < 0.25 * ROW_HEIGHT
+      return dy < 0.25 * rowHeight
         ? "before"
-        : dy > 0.75 * ROW_HEIGHT
+        : dy > 0.75 * rowHeight
         ? "after"
         : "over";
     } else if (allowed.size === 1 && allowed.has("over")) {
       return "over";
     } else {
       // Only 'before' and 'after':
-      return dy > ROW_HEIGHT / 2 ? "after" : "before";
+      return dy > rowHeight / 2 ? "after" : "before";
     }
     // return "over";
   }
@@ -452,7 +452,12 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       }
       this.lastAllowedDropRegions = regionSet;
       this.lastDropEffect = dt.dropEffect;
+
+      const region = this._calcDropRegion(e, this.lastAllowedDropRegions);
       targetNode.setClass("wb-drop-target");
+      targetNode.setClass("wb-drop-over", region === "over");
+      targetNode.setClass("wb-drop-before", region === "before");
+      targetNode.setClass("wb-drop-after", region === "after");
 
       e.preventDefault(); // Allow drop (Drop operation is denied by default)
       return false;

package/src/wb_ext_edit.ts

@@ -213,6 +213,10 @@ export class EditExtension extends WunderbaumExtension<EditOptionsType> {
     if (!node) {
       return;
     }
+    if (node.isStatusNode()) {
+      node.logWarn("Cannot edit status node.");
+      return;
+    }
     this.tree.logDebug(`startEditTitle(node=${node})`);
     let inputHtml = node._callEvent("edit.beforeEdit");
     if (inputHtml === false) {

package/src/wb_node.ts

@@ -50,7 +50,6 @@ import {
   makeNodeTitleMatcher,
   nodeTitleSorter,
   RESERVED_TREE_SOURCE_KEYS,
-  ROW_HEIGHT,
   TEST_IMG,
   TITLE_SPAN_PAD_Y,
 } from "./common";
@@ -83,6 +82,21 @@ const NODE_DICT_PROPS = new Set<string>(NODE_PROPS);
 NODE_DICT_PROPS.delete("_partsel");
 NODE_DICT_PROPS.delete("unselectable");
 
+// /** Node properties that are of type bool (or boolean & string).
+//  *  When parsing, we accept 0 for false and 1 for true for better JSON compression.
+//  */
+// export const NODE_BOOL_PROPS: Set<string> = new Set([
+//   "checkbox",
+//   "colspan",
+//   "expanded",
+//   "icon",
+//   "iconTooltip",
+//   "radiogroup",
+//   "selected",
+//   "tooltip",
+//   "unselectable",
+// ]);
+
 /**
  * A single tree node.
  *
@@ -141,7 +155,9 @@ export class WunderbaumNode {
    */
   public type?: string;
   /** Tooltip definition (`true`: use node's title). */
-  public tooltip?: string | boolean;
+  public tooltip?: TooltipOption;
+  /** Icon tooltip definition (`true`: use node's title). */
+  public iconTooltip?: TooltipOption;
   /** Additional classes added to `div.wb-row`.
    * @see {@link hasClass}, {@link setClass}. */
   public classes: Set<string> | null = null; //new Set<string>();
@@ -171,24 +187,30 @@ export class WunderbaumNode {
 
     this.tree = tree;
     this.parent = parent;
-
     this.key = "" + (data.key ?? ++WunderbaumNode.sequence);
     this.title = "" + (data.title ?? "<" + this.key + ">");
+    this.expanded = !!data.expanded;
+    this.lazy = !!data.lazy;
+
+    // We set the following node properties only if a matching data value is
+    // passed
     data.refKey != null ? (this.refKey = "" + data.refKey) : 0;
     data.type != null ? (this.type = "" + data.type) : 0;
-    this.expanded = data.expanded === true;
-    data.icon != null ? (this.icon = data.icon) : 0;
-    this.lazy = data.lazy === true;
+    data.icon != null ? (this.icon = util.intToBool(data.icon)) : 0;
+    data.tooltip != null ? (this.tooltip = util.intToBool(data.tooltip)) : 0;
+    data.iconTooltip != null
+      ? (this.iconTooltip = util.intToBool(data.iconTooltip))
+      : 0;
     data.statusNodeType != null
       ? (this.statusNodeType = ("" + data.statusNodeType) as NodeStatusType)
       : 0;
     data.colspan != null ? (this.colspan = !!data.colspan) : 0;
 
     // Selection
-    data.checkbox != null ? (this.checkbox = !!data.checkbox) : 0;
+    data.checkbox != null ? util.intToBool(data.checkbox) : 0;
     data.radiogroup != null ? (this.radiogroup = !!data.radiogroup) : 0;
-    this.selected = data.selected === true;
-    data.unselectable === true ? (this.unselectable = true) : 0;
+    data.selected != null ? (this.selected = !!data.selected) : 0;
+    data.unselectable != null ? (this.unselectable = !!data.unselectable) : 0;
 
     if (data.classes) {
       this.setClass(data.classes);
@@ -448,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) => {
@@ -509,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);
@@ -1140,9 +1192,9 @@ export class WunderbaumNode {
     // Check for overlapping requests
     if (this._requestId) {
       this.logWarn(
-        `Recursive load request #${requestId} while #${this._requestId} is pending.`
+        `Recursive load request #${requestId} while #${this._requestId} is pending. ` +
+          "The previous request will be ignored."
       );
-      // 	node.debug("Send load request #" + requestId);
     }
     this._requestId = requestId;
 
@@ -1660,6 +1712,7 @@ export class WunderbaumNode {
   protected _render_markup(opts: RenderOptions) {
     const tree = this.tree;
     const treeOptions = tree.options;
+    const rowHeight = treeOptions.rowHeightPx!;
     const checkbox = this.getOption("checkbox");
     const columns = tree.columns;
     const level = this.getLevel();
@@ -1681,7 +1734,7 @@ export class WunderbaumNode {
     rowDiv = document.createElement("div");
     rowDiv.classList.add("wb-row");
 
-    rowDiv.style.top = this._rowIdx! * ROW_HEIGHT + "px";
+    rowDiv.style.top = this._rowIdx! * rowHeight + "px";
 
     this._rowElem = rowDiv;
 
@@ -2176,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) {
@@ -2234,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 &&
@@ -2261,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 };
@@ -2763,6 +2818,19 @@ export class WunderbaumNode {
         av = a.data[propName];
         bv = b.data[propName];
       }
+      if (av == null && bv == null) {
+        return 0;
+      }
+      if (av == null) {
+        av = typeof bv === "string" ? "" : 0;
+      } else if (typeof av === "boolean") {
+        av = av ? 1 : 0;
+      }
+      if (bv == null) {
+        bv = typeof av === "string" ? "" : 0;
+      } else if (typeof bv === "boolean") {
+        bv = bv ? 1 : 0;
+      }
       if (caseInsensitive) {
         if (typeof av === "string") {
           av = av.toLowerCase();

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);
       }
     }
   }