wunderbaum 0.5.1 → 0.5.3

package/src/wunderbaum.scss

@@ -395,7 +395,7 @@ div.wunderbaum {
     overflow: hidden;
     height: var(--wb-row-inner-height);
     line-height: var(--wb-row-inner-height);
-    padding: 0 val(--wb-col-padding-x);
+    padding: 0 var(--wb-col-padding-x);
     border-right: 1px solid var(--wb-grid-color);
     white-space: nowrap;
 
@@ -416,10 +416,16 @@ div.wunderbaum {
     i.wb-indent {
       height: var(--wb-icon-outer-height);
       width: var(--wb-icon-outer-width);
-      padding: var(--wb-icon-padding) var(--wb-icon-padding-x);
+      padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x);
       display: inline-block;
     }
 
+    i.wb-expander,
+    i.wb-icon {
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
     /* Fix Bootstrap Icon alignment */
     i.bi::before {
       vertical-align: baseline;
@@ -629,7 +635,7 @@ div.wunderbaum {
           // content: url(../docs/assets/drop_marker_16x32.png);
           content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxnuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAALM9X5QAAAAudFJOU////////////////////////////////////////////////////////////wCCj3NVAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqUlEQVQoU6WQ2w6CMAxA54agsCHq1HlFBREv/f/fs1tHAoaoiedlbXrWtGXwhV8FNqAXuAi4DwkShmE0cgGIcSwCCgkSkrAxpEonot0DhQxJptFsbnOpdNdgsFh6VtYwyqzTmG+oijDY7hr22E4qY7QybeGQe46nsxP0Wwc3Q1GWl+qKec8MlqKubxX+xzV7tkDuD1+3d+heigT2zGx/hCMUeUj4wL8CwAsW1kqCTugMCwAAAABJRU5ErkJggg==);
           left: 0; //-$icon-outer-width;
-          top: calc(($row-outer-height - --wb-icon-height) / 2);
+          top: calc(($row-outer-height - var(--wb-icon-height)) / 2);
         }
       }
     }
@@ -652,13 +658,13 @@ div.wunderbaum {
     content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAMAAACROYkbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACNUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxgAAAHuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAAParqS4AAAAvdFJOU/////////////////////////////////////////////////////////////8AWqU49wAAAAlwSFlzAAAOwwAADsMBx2+oZAAAALlJREFUOE/FktsSgiAQhglMS8WstKLzQTM77Ps/XguL16I208cFyzB8/LPAYCC/ErARzcCFx23pBgnGfjAxBYhpKDwq3SBB5DeGWCYz0SUDClIkmgeLpV7HMiNDbrbbYbBaWzbaoKTaJiHfQe5oYLA/NBwxTiyVyqTSghYwox4MTmfL5XozgqxjAtODoizv1QPXPXqgKer6WeH9+Iw9XgF5ve15/Q+6/SQSsE+q8yMcocoREgzg3wKAL4vrpBIKREShAAAAAElFTkSuQmCC);
     left: 0; // $icon-outer-width * 1.5;
     top: calc(
-      ($row-outer-height - --wb-icon-height) / 2 - $row-outer-height / 2
+      ($row-outer-height - var(--wb-icon-height)) / 2 - $row-outer-height / 2
     );
   }
 
   div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
     top: calc(
-      ($row-outer-height - --wb-icon-height) / 2 + $row-outer-height / 2
+      ($row-outer-height - var(--wb-icon-height)) / 2 + $row-outer-height / 2
     );
   }
 
@@ -791,6 +797,7 @@ div.wunderbaum {
 
 i.wb-icon {
   position: relative;
+
   > span.wb-badge {
     position: absolute;
     display: inline-block;
@@ -806,6 +813,7 @@ i.wb-icon {
     white-space: nowrap;
     // vertical-align: baseline;
     border-radius: 0.5rem;
+    pointer-events: none;
   }
 }
 

package/src/wunderbaum.ts

@@ -105,7 +105,7 @@ export class Wunderbaum {
   public readonly data: { [key: string]: any } = {};
 
   protected readonly _updateViewportThrottled: (...args: any) => void;
-  protected extensionList: WunderbaumExtension[] = [];
+  protected extensionList: WunderbaumExtension<any>[] = [];
   protected extensions: ExtensionsDict = {};
 
   /** Merged options from constructor args and tree- and extension defaults. */
@@ -166,7 +166,7 @@ export class Wunderbaum {
   protected lastClickTime = 0;
 
   constructor(options: WunderbaumOptions) {
-    let opts = (this.options = util.extend(
+    const opts = (this.options = util.extend(
       {
         id: null,
         source: null, // URL for GET/PUT, Ajax options, or callback
@@ -220,7 +220,7 @@ export class Wunderbaum {
         } catch (error) {
           // We re-raise in the reject handler, but Chrome resets the stack
           // frame then, so we log it here:
-          console.error("Exception inside `init(e)` event:", error);
+          this.logError("Exception inside `init(e)` event:", error);
         }
       })
       .catch((err) => {
@@ -436,7 +436,9 @@ export class Wunderbaum {
         }
 
         if (info.region === NodeRegion.expander) {
-          node.setExpanded(!node.isExpanded());
+          node.setExpanded(!node.isExpanded(), {
+            scrollIntoView: options.scrollIntoViewOnExpandClick !== false,
+          });
         } else if (info.region === NodeRegion.checkbox) {
           node.toggleSelected();
         }
@@ -522,7 +524,7 @@ export class Wunderbaum {
       el = document.querySelectorAll(".wunderbaum")[el]; // el was an integer: return nth element
     } else if (typeof el === "string") {
       // Search all trees for matching ID
-      for (let treeElem of document.querySelectorAll(".wunderbaum")) {
+      for (const treeElem of document.querySelectorAll(".wunderbaum")) {
         const tree = (<any>treeElem)._wb_tree;
         if (tree && tree.id === el) {
           return tree;
@@ -596,7 +598,7 @@ export class Wunderbaum {
   }
 
   /** @internal */
-  protected _registerExtension(extension: WunderbaumExtension): void {
+  protected _registerExtension(extension: WunderbaumExtension<any>): void {
     this.extensionList.push(extension);
     this.extensions[extension.id] = extension;
     // this.extensionMap.set(extension.id, extension);
@@ -604,7 +606,7 @@ export class Wunderbaum {
 
   /** Called on tree (re)init after markup is created, before loading. */
   protected _initExtensions(): void {
-    for (let ext of this.extensionList) {
+    for (const ext of this.extensionList) {
       ext.init();
     }
   }
@@ -617,9 +619,9 @@ export class Wunderbaum {
       `Missing or duplicate key: '${key}'.`
     );
     this.keyMap.set(key, node);
-    let rk = node.refKey;
+    const rk = node.refKey;
     if (rk) {
-      let rks = this.refKeyMap.get(rk); // Set of nodes with this refKey
+      const rks = this.refKeyMap.get(rk); // Set of nodes with this refKey
       if (rks) {
         rks.add(node);
       } else {
@@ -647,15 +649,18 @@ export class Wunderbaum {
   }
 
   /** Call all hook methods of all registered extensions.*/
-  protected _callHook(hook: keyof WunderbaumExtension, data: any = {}): any {
+  protected _callHook(
+    hook: keyof WunderbaumExtension<any>,
+    data: any = {}
+  ): any {
     let res;
-    let d = util.extend(
+    const d = util.extend(
       {},
       { tree: this, options: this.options, result: undefined },
       data
     );
 
-    for (let ext of this.extensionList) {
+    for (const ext of this.extensionList) {
       res = (<any>ext[hook]).call(ext, d);
       if (res === false) {
         break;
@@ -974,8 +979,9 @@ export class Wunderbaum {
     this.clear();
     this.resizeObserver.disconnect();
     this.element.innerHTML = "";
+
     // Remove all event handlers
-    this.element.outerHTML = this.element.outerHTML;
+    this.element.outerHTML = this.element.outerHTML; // eslint-disable-line
   }
 
   /**
@@ -1186,10 +1192,10 @@ export class Wunderbaum {
     startNode?: WunderbaumNode | null
   ): WunderbaumNode | null {
     //, visibleOnly) {
-    let res: WunderbaumNode | null = null,
-      firstNode = this.getFirstChild()!;
+    let res: WunderbaumNode | null = null;
+    const firstNode = this.getFirstChild()!;
 
-    let matcher =
+    const matcher =
       typeof match === "string" ? makeNodeTitleStartMatcher(match) : match;
     startNode = startNode || firstNode;
 
@@ -1286,13 +1292,15 @@ export class Wunderbaum {
         res = this._getNextNodeInView(node);
         break;
       case "pageDown":
-        const bottomNode = this.getLowestVpNode();
-        // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
+        {
+          const bottomNode = this.getLowestVpNode();
+          // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
 
-        if (node._rowIdx! < bottomNode._rowIdx!) {
-          res = bottomNode;
-        } else {
-          res = this._getNextNodeInView(node, pageSize);
+          if (node._rowIdx! < bottomNode._rowIdx!) {
+            res = bottomNode;
+          } else {
+            res = this._getNextNodeInView(node, pageSize);
+          }
         }
         break;
       case "pageUp":
@@ -1322,7 +1330,7 @@ export class Wunderbaum {
     name_cb?: NodeStringCallback,
     connectors?: string[]
   ): IterableIterator<string> {
-    return this.root.format_iter(name_cb, connectors);
+    yield* this.root.format_iter(name_cb, connectors);
   }
 
   /**
@@ -1387,22 +1395,22 @@ export class Wunderbaum {
    *     TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
    */
   static getEventInfo(event: Event): WbEventInfo {
-    let target = <Element>event.target,
-      cl = target.classList,
-      parentCol = target.closest("span.wb-col") as HTMLSpanElement,
-      node = Wunderbaum.getNode(target),
-      tree = node ? node.tree : Wunderbaum.getTree(event),
-      res: WbEventInfo = {
-        event: <MouseEvent>event,
-        canonicalName: util.eventToString(event),
-        tree: tree!,
-        node: node,
-        region: NodeRegion.unknown,
-        colDef: undefined,
-        colIdx: -1,
-        colId: undefined,
-        colElem: parentCol,
-      };
+    const target = <Element>event.target;
+    const cl = target.classList;
+    const parentCol = target.closest("span.wb-col") as HTMLSpanElement;
+    const node = Wunderbaum.getNode(target);
+    const tree = node ? node.tree : Wunderbaum.getTree(event);
+    const res: WbEventInfo = {
+      event: <MouseEvent>event,
+      canonicalName: util.eventToString(event),
+      tree: tree!,
+      node: node,
+      region: NodeRegion.unknown,
+      colDef: undefined,
+      colIdx: -1,
+      colId: undefined,
+      colElem: parentCol,
+    };
 
     if (cl.contains("wb-title")) {
       res.region = NodeRegion.title;
@@ -1430,7 +1438,7 @@ export class Wunderbaum {
     } else {
       // Somewhere near the title
       if (event.type !== "mousemove" && !(event instanceof KeyboardEvent)) {
-        console.warn("getEventInfo(): not found", event, res);
+        tree?.logWarn("getEventInfo(): not found", event, res);
       }
       return res;
     }
@@ -1460,7 +1468,7 @@ export class Wunderbaum {
    * Return true if any node is currently beeing loaded, i.e. a Ajax request is pending.
    */
   isLoading(): boolean {
-    var res = false;
+    let res = false;
 
     this.root.visit((n) => {
       // also visit rootNode
@@ -1480,31 +1488,28 @@ export class Wunderbaum {
   /** Log to console if opts.debugLevel >= 4 */
   logDebug(...args: any[]) {
     if (this.options.debugLevel! >= 4) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.log.apply(console, args);
+      console.log(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
   /** Log error to console. */
   logError(...args: any[]) {
     if (this.options.debugLevel! >= 1) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.error.apply(console, args);
+      console.error(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
   /** Log to console if opts.debugLevel >= 3 */
   logInfo(...args: any[]) {
     if (this.options.debugLevel! >= 3) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.info.apply(console, args);
+      console.info(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
   /** @internal */
   logTime(label: string): string {
     if (this.options.debugLevel! >= 4) {
-      console.time(this + ": " + label);
+      console.time(this + ": " + label); // eslint-disable-line no-console
     }
     return label;
   }
@@ -1512,15 +1517,14 @@ export class Wunderbaum {
   /** @internal */
   logTimeEnd(label: string): void {
     if (this.options.debugLevel! >= 4) {
-      console.timeEnd(this + ": " + label);
+      console.timeEnd(this + ": " + label); // eslint-disable-line no-console
     }
   }
 
   /** Log to console if opts.debugLevel >= 2 */
   logWarn(...args: any[]) {
     if (this.options.debugLevel! >= 2) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.warn.apply(console, args);
+      console.warn(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
@@ -1625,9 +1629,9 @@ export class Wunderbaum {
 
     // Update `wb-active` class for all headers
     if (this.hasHeader()) {
-      for (let rowDiv of this.headerElement.children) {
+      for (const rowDiv of this.headerElement.children) {
         let i = 0;
-        for (let colDiv of rowDiv.children) {
+        for (const colDiv of rowDiv.children) {
           (colDiv as HTMLElement).classList.toggle("wb-active", i++ === colIdx);
         }
       }
@@ -1636,9 +1640,9 @@ export class Wunderbaum {
     this.activeNode?.update(ChangeType.status);
 
     // Update `wb-active` class for all cell spans
-    for (let rowDiv of this.nodeListElement.children) {
+    for (const rowDiv of this.nodeListElement.children) {
       let i = 0;
-      for (let colDiv of rowDiv.children) {
+      for (const colDiv of rowDiv.children) {
         (colDiv as HTMLElement).classList.toggle("wb-active", i++ === colIdx);
       }
     }
@@ -1662,15 +1666,6 @@ export class Wunderbaum {
     }
   }
 
-  /**
-   * @deprecated since v0.3.6: use `update()` instead.
-   */
-  setModified(change: ChangeType, ...args: any[]): void {
-    this.logWarn("setModified() is deprecated: use update() instead.");
-    // @ts-ignore
-    // (!) TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.
-    return this.update.call(this, change, ...args);
-  }
   /**
    * Schedule an update request to reflect a tree change.
    * The render operation is async and debounced unless the `immediate` option
@@ -1852,7 +1847,7 @@ export class Wunderbaum {
       util.extend(this.types, types);
     }
     // Convert `TYPE.classes` to a Set
-    for (let t of Object.values(this.types) as any) {
+    for (const t of Object.values(this.types) as any) {
       if (t.classes) {
         t.classes = util.toSet(t.classes);
       }
@@ -1895,7 +1890,7 @@ export class Wunderbaum {
     const defaultMinWidth = 4;
     const vpWidth = this.element.clientWidth;
     // Shorten last column width to avoid h-scrollbar
-    const FIX_ADJUST_LAST_COL = 2;
+    const FIX_ADJUST_LAST_COL = 0; // 2;
     const columns = this.columns;
     const col0 = columns[0];
 
@@ -1915,9 +1910,9 @@ export class Wunderbaum {
     }
     // Gather width definitions
     this._columnsById = {};
-    for (let col of columns) {
+    for (const col of columns) {
       this._columnsById[<string>col.id] = col;
-      let cw = col.width;
+      const cw = col.width;
       if (col.id === "*" && col !== col0) {
         throw new Error(
           `Column id '*' must be defined only once: '${col.title}'.`
@@ -1932,7 +1927,7 @@ export class Wunderbaum {
         totalWeight += cw;
       } else if (typeof cw === "string" && cw.endsWith("px")) {
         col._weight = 0;
-        let px = parseFloat(cw.slice(0, -2));
+        const px = parseFloat(cw.slice(0, -2));
         if (col._widthPx != px) {
           modified = true;
           col._widthPx = px;
@@ -1948,7 +1943,7 @@ export class Wunderbaum {
     const restPx = Math.max(0, vpWidth - fixedWidth);
     let ofsPx = 0;
 
-    for (let col of columns) {
+    for (const col of columns) {
       let minWidth: number;
 
       if (col._weight) {
@@ -2086,19 +2081,17 @@ export class Wunderbaum {
       // this.log("_updateViewportImmediately(): scroll only.");
     } else {
       this.log("_updateViewportImmediately():", pending);
-      let height = this.listContainerElement.clientHeight;
-      // We cannot get the height for absolute positioned parent, so look at first col
-      // let headerHeight = this.headerElement.clientHeight
-      // 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 - FIX_ADJUST_HEIGHT;
-
-      if (Math.abs(height - wantHeight) > 1.0) {
-        // this.log("resize", height, wantHeight);
-        this.listContainerElement.style.height = wantHeight + "px";
-        height = wantHeight;
+      if (this.options.adjustHeight !== false) {
+        let height = this.listContainerElement.clientHeight;
+        const headerHeight = this.headerElement.clientHeight; // May be 0
+        const wantHeight =
+          this.element.clientHeight - headerHeight - FIX_ADJUST_HEIGHT;
+
+        if (Math.abs(height - wantHeight) > 1.0) {
+          // this.log("resize", height, wantHeight);
+          this.listContainerElement.style.height = wantHeight + "px";
+          height = wantHeight;
+        }
       }
       // console.profile(`_updateViewportImmediately()`)
 
@@ -2294,10 +2287,9 @@ export class Wunderbaum {
       stopNode: WunderbaumNode,
       siblingOfs = 0,
       skipFirstNode = options.includeSelf === false,
-      includeHidden = !!options.includeHidden,
-      checkFilter = !includeHidden && this.filterMode === "hide",
       node: WunderbaumNode = options.start || this.root.children![0];
-
+    const includeHidden = !!options.includeHidden;
+    const checkFilter = !includeHidden && this.filterMode === "hide";
     parent = node.parent;
     while (parent) {
       // visit siblings
@@ -2378,8 +2370,8 @@ export class Wunderbaum {
     let children,
       idx,
       parent,
-      includeHidden = !!options.includeHidden,
       node = options.start || this.root.children![0];
+    const includeHidden = !!options.includeHidden;
 
     if (options.includeSelf !== false) {
       if (callback(node) === false) {