wunderbaum 0.10.1 → 0.11.1

package/src/wunderbaum.ts

@@ -47,6 +47,7 @@ import {
   SetActiveOptions,
   SetColumnOptions,
   SetStatusOptions,
+  SortByPropertyOptions,
   SortCallback,
   SourceType,
   UpdateOptions,
@@ -60,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";
@@ -196,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,
@@ -285,7 +286,7 @@ export class Wunderbaum {
     delete opts.types;
 
     // --- Create Markup
-    this.element = util.elemFromSelector(opts.element) as HTMLDivElement;
+    this.element = util.elemFromSelector<HTMLDivElement>(opts.element)!;
     util.assert(!!this.element, `Invalid 'element' option: ${opts.element}`);
 
     this.element.classList.add("wunderbaum");
@@ -293,14 +294,23 @@ 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;
 
     // Create header markup, or take it from the existing html
 
-    this.headerElement = this.element.querySelector(
-      "div.wb-header"
-    ) as HTMLDivElement;
+    this.headerElement =
+      this.element.querySelector<HTMLDivElement>("div.wb-header")!;
 
     const wantHeader =
       opts.header == null ? this.columns.length > 1 : !!opts.header;
@@ -312,9 +322,8 @@ export class Wunderbaum {
         "`opts.columns` must not be set if markup already contains a header"
       );
       this.columns = [];
-      const rowElement = this.headerElement.querySelector(
-        "div.wb-row"
-      ) as HTMLDivElement;
+      const rowElement =
+        this.headerElement.querySelector<HTMLDivElement>("div.wb-row")!;
       for (const colDiv of rowElement.querySelectorAll("div")) {
         this.columns.push({
           id: colDiv.dataset.id || `col_${this.columns.length}`,
@@ -337,9 +346,7 @@ export class Wunderbaum {
         </div>`;
 
       if (!wantHeader) {
-        const he = this.element.querySelector(
-          "div.wb-header"
-        ) as HTMLDivElement;
+        const he = this.element.querySelector<HTMLDivElement>("div.wb-header")!;
         he.style.display = "none";
       }
     }
@@ -349,15 +356,15 @@ export class Wunderbaum {
       <div class="wb-list-container">
         <div class="wb-node-list"></div>
       </div>`;
-    this.listContainerElement = this.element.querySelector(
+    this.listContainerElement = this.element.querySelector<HTMLDivElement>(
       "div.wb-list-container"
-    ) as HTMLDivElement;
-    this.nodeListElement = this.listContainerElement.querySelector(
-      "div.wb-node-list"
-    ) as HTMLDivElement;
-    this.headerElement = this.element.querySelector(
-      "div.wb-header"
-    ) as HTMLDivElement;
+    )!;
+    this.nodeListElement =
+      this.listContainerElement.querySelector<HTMLDivElement>(
+        "div.wb-node-list"
+      )!;
+    this.headerElement =
+      this.element.querySelector<HTMLDivElement>("div.wb-header")!;
 
     this.element.classList.toggle("wb-grid", this.columns.length > 1);
 
@@ -418,6 +425,17 @@ export class Wunderbaum {
     });
     this.resizeObserver.observe(this.element);
 
+    util.onEvent(this.element, "click", ".wb-button,.wb-col-icon", (e) => {
+      const info = Wunderbaum.getEventInfo(e);
+      const command = (<HTMLElement>e.target)?.dataset?.command;
+
+      this._callEvent("buttonClick", {
+        event: e,
+        info: info,
+        command: command,
+      });
+    });
+
     util.onEvent(this.nodeListElement, "click", "div.wb-row", (e) => {
       const info = Wunderbaum.getEventInfo(e);
       const node = info.node;
@@ -751,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
@@ -758,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;
@@ -774,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)!;
@@ -1078,7 +1098,7 @@ export class Wunderbaum {
 
   /** Run code, but defer rendering of viewport until done.
    *
-   * ```
+   * ```js
    * tree.runWithDeferredUpdate(() => {
    *   return someFuncThatWouldUpdateManyNodes();
    * });
@@ -1274,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) {
@@ -1602,7 +1623,7 @@ export class Wunderbaum {
     }
   }
 
-  /** Reset column widths to default. */
+  /** Reset column widths to default. @since 0.10.0 */
   resetColumns() {
     this.columns.forEach((col) => {
       delete col.customWidthPx;
@@ -1610,6 +1631,11 @@ export class Wunderbaum {
     this.update(ChangeType.colStructure);
   }
 
+  // /** Renumber nodes `_nativeIndex`. @see {@link WunderbaumNode.resetNativeChildOrder} */
+  // resetNativeChildOrder(options?: ResetOrderOptions) {
+  //   this.root.resetNativeChildOrder(options);
+  // }
+
   /**
    * Make sure that this node is vertically scrolled into the viewport.
    *
@@ -1620,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) {
@@ -1631,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);
@@ -1651,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
@@ -1790,15 +1817,15 @@ export class Wunderbaum {
    * The render operation is async and debounced unless the `immediate` option
    * is set.
    *
-   * Use {@link WunderbaumNode.update()} if only a single node has changed,
-   * or {@link WunderbaumNode._render()}) to pass special options.
+   * Use {@link WunderbaumNode.update} if only a single node has changed,
+   * or {@link WunderbaumNode._render}) to pass special options.
    */
   update(change: ChangeType, options?: UpdateOptions): void;
 
   /**
    * Update a row to reflect a single node's modification.
    *
-   * @see {@link WunderbaumNode.update()}, {@link WunderbaumNode._render()}
+   * @see {@link WunderbaumNode.update}, {@link WunderbaumNode._render}
    */
   update(
     change: ChangeType,
@@ -1988,6 +2015,15 @@ export class Wunderbaum {
     this.root.sortChildren(cmp, deep);
   }
 
+  /**
+   * Convenience method to implement column sorting.
+   * @see {@link WunderbaumNode.sortByProperty}.
+   * @since 0.11.0
+   */
+  sortByProperty(options: SortByPropertyOptions) {
+    this.root.sortByProperty(options);
+  }
+
   /** Convert tree to an array of plain objects.
    *
    * @param callback is called for every node, in order to allow
@@ -2109,6 +2145,12 @@ export class Wunderbaum {
     return modified;
   }
 
+  protected _insertIcon(icon: string, elem: HTMLElement) {
+    const iconElem = document.createElement("i");
+    iconElem.className = icon;
+    elem.appendChild(iconElem);
+  }
+
   /** Create/update header markup from `this.columns` definition.
    * @internal
    */
@@ -2119,6 +2161,7 @@ export class Wunderbaum {
     if (!wantHeader) {
       return;
     }
+    const iconMap = this.iconMap;
     const colCount = this.columns.length;
     const headerRow = this.headerElement.querySelector(".wb-row")!;
     util.assert(headerRow, "Expected a row in header element");
@@ -2139,22 +2182,55 @@ export class Wunderbaum {
         col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
       }
 
-      const title = util.escapeHtml(col.title || col.id);
+      // Add tooltip to column title
       let tooltip = "";
       if (col.tooltip) {
         tooltip = util.escapeTooltip(col.tooltip);
         tooltip = ` title="${tooltip}"`;
       }
-      let resizer = "";
+      // Add column header icons
+      let addMarkup = "";
+      // NOTE: we use CSS float: right to align icons, so they must be added in
+      // reverse order
+      if (util.toBool(col.menu, this.options.columnsMenu, false)) {
+        const iconClass = "wb-col-icon-menu " + iconMap.colMenu;
+        const icon = `<i data-command=menu class="wb-col-icon ${iconClass}"></i>`;
+        addMarkup += icon;
+      }
+      if (util.toBool(col.sortable, this.options.columnsSortable, false)) {
+        let iconClass = "wb-col-icon-sort " + iconMap.colSortable;
+        if (col.sortOrder) {
+          iconClass += `wb-col-sort-${col.sortOrder}`;
+          iconClass +=
+            col.sortOrder === "asc" ? iconMap.colSortAsc : iconMap.colSortDesc;
+        }
+        const icon = `<i data-command=sort class="wb-col-icon ${iconClass}"></i>`;
+        addMarkup += icon;
+      }
+      if (util.toBool(col.filterable, this.options.columnsFilterable, false)) {
+        colElem.classList.toggle("wb-col-filter", !!col.filterActive);
+        let iconClass = "wb-col-icon-filter " + iconMap.colFilter;
+        if (col.filterActive) {
+          iconClass += iconMap.colFilterActive;
+        }
+        const icon = `<i data-command=filter class="wb-col-icon ${iconClass}"></i>`;
+        addMarkup += icon;
+      }
+      // Add resizer to all but the last column
       if (i < colCount - 1) {
-        if (util.toBool(col.resizable, this.options.resizableColumns, false)) {
-          resizer =
+        if (util.toBool(col.resizable, this.options.columnsResizable, false)) {
+          addMarkup +=
             '<span class="wb-col-resizer wb-col-resizer-active"></span>';
         } else {
-          resizer = '<span class="wb-col-resizer"></span>';
+          addMarkup += '<span class="wb-col-resizer"></span>';
         }
       }
-      colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
+
+      // Create column header
+      const title = util.escapeHtml(col.title || col.id);
+      colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${addMarkup}`;
+
+      // Highlight active column
       if (this.isCellNav()) {
         colElem.classList.toggle("wb-active", i === this.activeColIdx);
       }
@@ -2300,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);
@@ -2346,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) {
@@ -2633,6 +2709,7 @@ export class Wunderbaum {
   /**
    * Return the number of nodes that match the current filter.
    * @see {@link Wunderbaum.filterNodes}
+   * @since 0.9.0
    */
   countMatches(): number {
     return (this.extensions.filter as FilterExtension).countMatches();