wunderbaum 0.11.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wunderbaum",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "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;
 }

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);
@@ -1140,9 +1162,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 +1682,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 +1704,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;
 
@@ -2763,6 +2786,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.ts

@@ -61,7 +61,7 @@ import {
   makeNodeTitleStartMatcher,
   nodeTitleSorter,
   RENDER_MAX_PREFETCH,
-  ROW_HEIGHT,
+  DEFAULT_ROW_HEIGHT,
 } from "./common";
 import { WunderbaumNode } from "./wb_node";
 import { Deferred } from "./deferred";
@@ -197,7 +197,7 @@ export class Wunderbaum {
         debugLevel: DEFAULT_DEBUGLEVEL, // 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
         header: null, // Show/hide header (pass bool or string)
         // headerHeightPx: ROW_HEIGHT,
-        rowHeightPx: ROW_HEIGHT,
+        rowHeightPx: DEFAULT_ROW_HEIGHT,
         iconMap: "bootstrap",
         columns: null,
         types: null,
@@ -294,6 +294,16 @@ export class Wunderbaum {
       this.element.tabIndex = 0;
     }
 
+    if (opts.rowHeightPx !== DEFAULT_ROW_HEIGHT) {
+      this.element.style.setProperty(
+        "--wb-row-outer-height",
+        opts.rowHeightPx + "px"
+      );
+      this.element.style.setProperty(
+        "--wb-row-inner-height",
+        opts.rowHeightPx - 2 + "px"
+      );
+    }
     // Attach tree instance to <div>
     (<any>this.element)._wb_tree = this;
 
@@ -759,6 +769,7 @@ export class Wunderbaum {
 
   /** Return the topmost visible node in the viewport. */
   getTopmostVpNode(complete = true) {
+    const rowHeight = this.options.rowHeightPx!;
     const gracePx = 1; // ignore subpixel scrolling
     const scrollParent = this.element;
     // const headerHeight = this.headerElement.clientHeight;  // May be 0
@@ -766,15 +777,16 @@ export class Wunderbaum {
     let topIdx: number;
 
     if (complete) {
-      topIdx = Math.ceil((scrollTop - gracePx) / ROW_HEIGHT);
+      topIdx = Math.ceil((scrollTop - gracePx) / rowHeight);
     } else {
-      topIdx = Math.floor(scrollTop / ROW_HEIGHT);
+      topIdx = Math.floor(scrollTop / rowHeight);
     }
     return this._getNodeByRowIdx(topIdx)!;
   }
 
   /** Return the lowest visible node in the viewport. */
   getLowestVpNode(complete = true) {
+    const rowHeight = this.options.rowHeightPx!;
     const scrollParent = this.element;
     const headerHeight = this.headerElement.clientHeight; // May be 0
     const scrollTop = scrollParent.scrollTop;
@@ -782,9 +794,9 @@ export class Wunderbaum {
     let bottomIdx: number;
 
     if (complete) {
-      bottomIdx = Math.floor((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
+      bottomIdx = Math.floor((scrollTop + clientHeight) / rowHeight) - 1;
     } else {
-      bottomIdx = Math.ceil((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
+      bottomIdx = Math.ceil((scrollTop + clientHeight) / rowHeight) - 1;
     }
     bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
     return this._getNodeByRowIdx(bottomIdx)!;
@@ -1282,9 +1294,10 @@ export class Wunderbaum {
    * @param includeHidden Not yet implemented
    */
   findRelatedNode(node: WunderbaumNode, where: string, includeHidden = false) {
+    const rowHeight = this.options.rowHeightPx!;
     let res = null;
     const pageSize = Math.floor(
-      this.listContainerElement.clientHeight / ROW_HEIGHT
+      this.listContainerElement.clientHeight / rowHeight
     );
 
     switch (where) {
@@ -1633,7 +1646,7 @@ export class Wunderbaum {
     const PADDING = 2; // leave some pixels between viewport bounds
 
     let node;
-    WunderbaumNode;
+    // WunderbaumNode;
     let options: ScrollToOptions | undefined;
 
     if (nodeOrOpts instanceof WunderbaumNode) {
@@ -1644,14 +1657,15 @@ export class Wunderbaum {
     }
     util.assert(node && node._rowIdx != null, `Invalid node: ${node}`);
 
+    const rowHeight = this.options.rowHeightPx!;
     const scrollParent = this.element;
     const headerHeight = this.headerElement.clientHeight; // May be 0
     const scrollTop = scrollParent.scrollTop;
     const vpHeight = scrollParent.clientHeight;
-    const rowTop = node._rowIdx! * ROW_HEIGHT + headerHeight;
+    const rowTop = node._rowIdx! * rowHeight + headerHeight;
     const vpTop = headerHeight;
     const vpRowTop = rowTop - scrollTop;
-    const vpRowBottom = vpRowTop + ROW_HEIGHT;
+    const vpRowBottom = vpRowTop + rowHeight;
     const topNode = options?.topNode;
 
     // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts , options);
@@ -1664,7 +1678,7 @@ export class Wunderbaum {
       } else {
         // Node is below viewport
         // this.log("Below viewport");
-        newScrollTop = rowTop + ROW_HEIGHT - vpHeight + PADDING; // leave some pixels between viewport bounds
+        newScrollTop = rowTop + rowHeight - vpHeight + PADDING; // leave some pixels between viewport bounds
       }
     } else {
       // Node is above viewport
@@ -2362,20 +2376,20 @@ export class Wunderbaum {
     options = Object.assign({ newNodesOnly: false }, options);
     const newNodesOnly = !!options.newNodesOnly;
 
-    const row_height = ROW_HEIGHT;
-    const vp_height = this.element.clientHeight;
+    const rowHeight = this.options.rowHeightPx!;
+    const vpHeight = 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);
+    let startIdx = Math.max(0, ofs / rowHeight - prefetch);
     startIdx = Math.floor(startIdx);
     // Make sure start is always even, so the alternating row colors don't
     // change when scrolling:
     if (startIdx % 2) {
       startIdx--;
     }
-    let endIdx = Math.max(0, (ofs + vp_height) / row_height + prefetch);
+    let endIdx = Math.max(0, (ofs + vpHeight) / rowHeight + prefetch);
     endIdx = Math.ceil(endIdx);
 
     // this.debug("render", opts);
@@ -2408,20 +2422,20 @@ export class Wunderbaum {
       } else if (rowDiv && newNodesOnly) {
         obsoleteNodes.delete(node);
         // no need to update existing node markup
-        rowDiv.style.top = idx * ROW_HEIGHT + "px";
+        rowDiv.style.top = idx * rowHeight + "px";
         prevElem = rowDiv;
       } else {
         obsoleteNodes.delete(node);
         // Create new markup
         if (rowDiv) {
-          rowDiv.style.top = idx * ROW_HEIGHT + "px";
+          rowDiv.style.top = idx * rowHeight + "px";
         }
         node._render({ top: top, after: prevElem });
         // node.log("render", top, prevElem, "=>", node._rowElem);
         prevElem = node._rowElem!;
       }
       idx++;
-      top += row_height;
+      top += rowHeight;
     });
     this.treeRowCount = idx;
     for (const n of obsoleteNodes) {