wunderbaum 0.1.0 → 0.2.0

package/src/wb_node.ts

@@ -1723,6 +1723,19 @@ export class WunderbaumNode {
         this._createIcon(nodeElem, iconSpan, !expanderSpan);
       }
     }
+    // Adjust column width
+    if (opts.resizeCols !== false && !this.isColspan()) {
+      const colElems = rowDiv.querySelectorAll("span.wb-col");
+      let idx = 0;
+      let ofs = 0;
+      for (let colDef of this.tree.columns) {
+        const colElem = colElems[idx] as HTMLSpanElement;
+        colElem.style.left = `${ofs}px`;
+        colElem.style.width = `${colDef._widthPx}px`;
+        idx++;
+        ofs += colDef._widthPx!;
+      }
+    }
   }
 
   /**

package/src/wunderbaum.ts

@@ -40,6 +40,8 @@ import {
   AddChildrenOptions,
   UpdateColumnsOptions,
   VisitRowsOptions,
+  NodeFilterCallback,
+  FilterNodesOptions,
 } from "./types";
 import {
   DEFAULT_DEBUGLEVEL,
@@ -420,6 +422,7 @@ export class Wunderbaum {
         return false;
       }
       if (node && info.colIdx === 0 && node.isExpandable()) {
+        this._callMethod("edit._stopEditTitle");
         node.setExpanded(!node.isExpanded());
       }
     });
@@ -439,8 +442,17 @@ export class Wunderbaum {
 
     util.onEvent(this.element, "focusin focusout", (e) => {
       const flag = e.type === "focusin";
+      const targetNode = Wunderbaum.getNode(e)!;
 
       this._callEvent("focus", { flag: flag, event: e });
+
+      if (flag && this.isRowNav() && !this.isEditing()) {
+        if ((opts.navigationModeOption as NavModeEnum) === NavModeEnum.row) {
+          targetNode?.setActive();
+        } else {
+          this.setCellNav();
+        }
+      }
       if (!flag) {
         this._callMethod("edit._stopEditTitle", true, {
           event: e,
@@ -1717,14 +1729,18 @@ export class Wunderbaum {
       }
     }
   }
-  /** Update column headers and width. */
-  updateColumns(options?: UpdateColumnsOptions) {
+  /** Update column headers and width.
+   * Return true if at least one column width changed.
+   */
+  updateColumns(options?: UpdateColumnsOptions): boolean {
     options = Object.assign({ calculateCols: true, updateRows: true }, options);
     const defaultMinWidth = 4;
     const vpWidth = this.element.clientWidth;
     const isGrid = this.isGrid();
     // Shorten last column width to avoid h-scrollbar
     const FIX_ADJUST_LAST_COL = 2;
+    const columns = this.columns;
+    const col0 = columns[0];
 
     let totalWidth = 0;
     let totalWeight = 0;
@@ -1737,11 +1753,19 @@ export class Wunderbaum {
     }
 
     if (options.calculateCols) {
+      if (col0.id !== "*") {
+        throw new Error(`First column must have  id '*': got '${col0.id}'`);
+      }
       // Gather width definitions
       this._columnsById = {};
-      for (let col of this.columns) {
+      for (let col of columns) {
         this._columnsById[<string>col.id] = col;
         let cw = col.width;
+        if (col.id === "*" && col !== col0) {
+          throw new Error(
+            `Column id '*' must be defined only once: '${col.title}'`
+          );
+        }
 
         if (!cw || cw === "*") {
           col._weight = 1.0;
@@ -1758,14 +1782,16 @@ export class Wunderbaum {
           }
           fixedWidth += px;
         } else {
-          util.error(`Invalid column width: ${cw}`);
+          util.error(
+            `Invalid column width: ${cw} (expected string ending with 'px' or number, e.g. "<num>px" or <int>)`
+          );
         }
       }
       // Share remaining space between non-fixed columns
       const restPx = Math.max(0, vpWidth - fixedWidth);
       let ofsPx = 0;
 
-      for (let col of this.columns) {
+      for (let col of columns) {
         let minWidth: number;
 
         if (col._weight) {
@@ -1786,7 +1812,7 @@ export class Wunderbaum {
         col._ofsPx = ofsPx;
         ofsPx += col._widthPx!;
       }
-      this.columns[this.columns.length - 1]._widthPx! -= FIX_ADJUST_LAST_COL;
+      columns[columns.length - 1]._widthPx! -= FIX_ADJUST_LAST_COL;
       totalWidth = ofsPx - FIX_ADJUST_LAST_COL;
     }
     // if (this.options.fixedCol) {
@@ -1806,6 +1832,7 @@ export class Wunderbaum {
         this._updateRows();
       }
     }
+    return modified;
   }
 
   /** Create/update header markup from `this.columns` definition.
@@ -1902,9 +1929,9 @@ export class Wunderbaum {
     }
     // console.profile(`_updateViewportImmediately()`)
 
-    this.updateColumns({ updateRows: false });
+    const modified = this.updateColumns({ updateRows: false });
 
-    this._updateRows({ newNodesOnly: newNodesOnly });
+    this._updateRows({ newNodesOnly: newNodesOnly && !modified });
 
     // console.profileEnd(`_updateViewportImmediately()`)
 
@@ -2281,6 +2308,32 @@ export class Wunderbaum {
   /* ---------------------------------------------------------------------------
    * FILTER
    * -------------------------------------------------------------------------*/
+  /**
+   * [ext-filter] Dim or hide nodes.
+   */
+  filterNodes(
+    filter: string | NodeFilterCallback,
+    options: FilterNodesOptions
+  ) {
+    return (this.extensions.filter as FilterExtension).filterNodes(
+      filter,
+      options
+    );
+  }
+
+  /**
+   * [ext-filter] Dim or hide whole branches.
+   */
+  filterBranches(
+    filter: string | NodeFilterCallback,
+    options: FilterNodesOptions
+  ) {
+    return (this.extensions.filter as FilterExtension).filterBranches(
+      filter,
+      options
+    );
+  }
+
   /**
    * [ext-filter] Reset the filter.
    *