wunderbaum 0.0.9 → 0.1.1

package/src/wunderbaum.ts

@@ -26,15 +26,20 @@ import {
   ExpandAllOptions,
   FilterModeType,
   MatcherCallback,
-  NavigationOptions,
+  NavModeEnum,
   NodeStatusType,
   NodeStringCallback,
-  NodeTypeDefinitions,
+  NodeTypeDefinitionMap,
   ScrollToOptions,
   SetActiveOptions,
   SetModifiedOptions,
   SetStatusOptions,
-  TargetType as NodeRegion,
+  NodeRegion,
+  WbEventInfo,
+  ApplyCommandOptions,
+  AddChildrenOptions,
+  UpdateColumnsOptions,
+  VisitRowsOptions,
 } from "./types";
 import {
   DEFAULT_DEBUGLEVEL,
@@ -79,8 +84,8 @@ export class Wunderbaum {
   public readonly element: HTMLDivElement;
   /** The `div.wb-header` element if any. */
   public readonly headerElement: HTMLDivElement;
-  /** The `div.wb-scroll-container` element that contains the `nodeListElement`. */
-  public readonly scrollContainerElement: HTMLDivElement;
+  /** The `div.wb-list-container` element that contains the `nodeListElement`. */
+  public readonly listContainerElement: HTMLDivElement;
   /** The `div.wb-node-list` element that contains all visible div.wb-row child elements. */
   public readonly nodeListElement: HTMLDivElement;
   /** Contains additional data that was sent as response to an Ajax source load request. */
@@ -104,7 +109,7 @@ export class Wunderbaum {
   public focusNode: WunderbaumNode | null = null;
 
   /** Shared properties, referenced by `node.type`. */
-  public types: NodeTypeDefinitions = {};
+  public types: NodeTypeDefinitionMap = {};
   /** List of column definitions. */
   public columns: ColumnDefinitionList = []; // any[] = [];
 
@@ -160,7 +165,7 @@ export class Wunderbaum {
         skeleton: false,
         connectTopBreadcrumb: null, // HTMLElement that receives the top nodes breadcrumb
         // --- KeyNav ---
-        navigationModeOption: null, // NavigationOptions.startRow,
+        navigationModeOption: null, // NavModeEnum.startRow,
         quicksearch: true,
         // --- Events ---
         change: util.noop,
@@ -293,13 +298,13 @@ export class Wunderbaum {
 
     //
     this.element.innerHTML += `
-      <div class="wb-scroll-container">
+      <div class="wb-list-container">
         <div class="wb-node-list"></div>
       </div>`;
-    this.scrollContainerElement = this.element.querySelector(
-      "div.wb-scroll-container"
+    this.listContainerElement = this.element.querySelector(
+      "div.wb-list-container"
     ) as HTMLDivElement;
-    this.nodeListElement = this.scrollContainerElement.querySelector(
+    this.nodeListElement = this.listContainerElement.querySelector(
       "div.wb-node-list"
     ) as HTMLDivElement;
     this.headerElement = this.element.querySelector(
@@ -328,9 +333,9 @@ export class Wunderbaum {
           // The source may have defined columns, so we may adjust the nav mode
           if (opts.navigationModeOption == null) {
             if (this.isGrid()) {
-              this.setNavigationOption(NavigationOptions.cell);
+              this.setNavigationOption(NavModeEnum.cell);
             } else {
-              this.setNavigationOption(NavigationOptions.row);
+              this.setNavigationOption(NavModeEnum.row);
             }
           } else {
             this.setNavigationOption(opts.navigationModeOption);
@@ -354,13 +359,9 @@ export class Wunderbaum {
 
     // --- Bind listeners
     this.element.addEventListener("scroll", (e: Event) => {
-      // this.log("scroll", e);
+      // this.log(`scroll, scrollTop:${e.target.scrollTop}`, e);
       this.setModified(ChangeType.vscroll);
     });
-    // this.scrollContainerElement.addEventListener("scroll", (e: Event) => {
-    //   this.log("scroll", e)
-    //   this.setModified(ChangeType.vscroll);
-    // });
 
     this.resizeObserver = new ResizeObserver((entries) => {
       this.setModified(ChangeType.vscroll);
@@ -373,16 +374,6 @@ export class Wunderbaum {
       const node = info.node;
       // this.log("click", info, e);
 
-      // if( (e.target as HTMLElement).matches("input[type=checkbox]")){
-      //   // Click on an embedded checkbox triggers a change event.
-      //   // We return here, before the `setActive()` performs a render
-      //   this.log("click - cb", info, e);
-      //   // e.preventDefault()
-      //   setTimeout(()=>{
-      //     // (e.target as HTMLElement).click()
-      //   }, 50)
-      //   // return
-      // }
       if (
         this._callEvent("click", { event: e, node: node, info: info }) === false
       ) {
@@ -417,6 +408,22 @@ export class Wunderbaum {
       this.lastClickTime = Date.now();
     });
 
+    util.onEvent(this.nodeListElement, "dblclick", "div.wb-row", (e) => {
+      const info = Wunderbaum.getEventInfo(e);
+      const node = info.node;
+      // this.log("dblclick", info, e);
+
+      if (
+        this._callEvent("dblclick", { event: e, node: node, info: info }) ===
+        false
+      ) {
+        return false;
+      }
+      if (node && info.colIdx === 0 && node.isExpandable()) {
+        node.setExpanded(!node.isExpanded());
+      }
+    });
+
     util.onEvent(this.element, "keydown", (e) => {
       const info = Wunderbaum.getEventInfo(e);
       const eventName = util.eventToString(e);
@@ -724,20 +731,24 @@ export class Wunderbaum {
    *
    * @see {@link WunderbaumNode.addChildren}
    */
-  addChildren(nodeData: any, options?: any): WunderbaumNode {
+  addChildren(nodeData: any, options?: AddChildrenOptions): WunderbaumNode {
     return this.root.addChildren(nodeData, options);
   }
 
   /**
    * Apply a modification (or navigation) operation on the **tree or active node**.
    */
-  applyCommand(cmd: ApplyCommandType, options?: any): any;
+  applyCommand(cmd: ApplyCommandType, options?: ApplyCommandOptions): any;
 
   /**
    * Apply a modification (or navigation) operation on a **node**.
    * @see {@link WunderbaumNode.applyCommand}
    */
-  applyCommand(cmd: ApplyCommandType, node: WunderbaumNode, options?: any): any;
+  applyCommand(
+    cmd: ApplyCommandType,
+    node: WunderbaumNode,
+    options?: ApplyCommandOptions
+  ): any;
 
   /**
    * Apply a modification or navigation operation.
@@ -758,7 +769,7 @@ export class Wunderbaum {
   applyCommand(
     cmd: ApplyCommandType,
     nodeOrOpts?: WunderbaumNode | any,
-    options?: any
+    options?: ApplyCommandOptions
   ): any {
     let // clipboard,
       node,
@@ -1112,7 +1123,7 @@ export class Wunderbaum {
   findRelatedNode(node: WunderbaumNode, where: string, includeHidden = false) {
     let res = null;
     const pageSize = Math.floor(
-      this.scrollContainerElement.clientHeight / ROW_HEIGHT
+      this.listContainerElement.clientHeight / ROW_HEIGHT
     );
 
     switch (where) {
@@ -1270,14 +1281,14 @@ export class Wunderbaum {
    * @returns {object} Return a {node: WunderbaumNode, region: TYPE} object
    *     TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
    */
-  static getEventInfo(event: Event) {
+  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 = {
-        tree: tree,
+      res: WbEventInfo = {
+        tree: tree!,
         node: node,
         region: NodeRegion.unknown,
         colDef: undefined,
@@ -1324,15 +1335,6 @@ export class Wunderbaum {
     return res;
   }
 
-  // /** Return a string describing the affected node region for a mouse event.
-  //  *
-  //  * @param {Event} event Mouse event, e.g. click, mousemove, ...
-  //  * @returns {string} 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
-  //  */
-  // getEventNodeRegion(event: Event) {
-  //   return this.getEventInfo(event).region;
-  // }
-
   /**
    * Return readable string representation for this instance.
    * @internal
@@ -1445,7 +1447,8 @@ export class Wunderbaum {
     const vpRowBottom = vpRowTop + ROW_HEIGHT;
     const topNode = options?.topNode;
 
-    // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts );
+    // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts , options);
+
     let newScrollTop: number | null = null;
     if (vpRowTop >= vpTop) {
       if (vpRowBottom <= vpHeight) {
@@ -1481,9 +1484,6 @@ export class Wunderbaum {
     const fixedWidth = this.columns[0]._widthPx!;
     const vpWidth = this.element.clientWidth;
     const scrollLeft = this.element.scrollLeft;
-    // if (scrollLeft <= 0) {
-    //   return; // Not scrolled horizontally: Nothing to do
-    // }
     const colElem = this.getActiveColElem()!;
     const colLeft = Number.parseInt(colElem?.style.left, 10);
     const colRight = colLeft + Number.parseInt(colElem?.style.width, 10);
@@ -1496,13 +1496,13 @@ export class Wunderbaum {
       // The current column is scrolled outside the right side
       newLeft = colRight - vpWidth;
     }
+    newLeft = Math.max(0, newLeft);
     // util.assert(node._rowIdx != null);
-    // this.log(
-    //   `scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`
-    // );
+    this.log(
+      `scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`
+    );
     this.element.scrollLeft = newLeft;
     // this.setModified(ChangeType.vscroll);
-    // }
   }
   /**
    * Set column #colIdx to 'active'.
@@ -1555,12 +1555,16 @@ export class Wunderbaum {
   }
 
   /** Schedule an update request to reflect a tree change. */
-  setModified(change: ChangeType, options?: any): void;
+  setModified(change: ChangeType, options?: SetModifiedOptions): void;
 
   /** Schedule an update request to reflect a single node modification.
    * @see {@link WunderbaumNode.setModified}
    */
-  setModified(change: ChangeType, node: WunderbaumNode, options?: any): void;
+  setModified(
+    change: ChangeType,
+    node: WunderbaumNode,
+    options?: SetModifiedOptions
+  ): void;
 
   setModified(
     change: ChangeType,
@@ -1662,26 +1666,26 @@ export class Wunderbaum {
   }
 
   /** Set the tree's navigation mode option. */
-  setNavigationOption(mode: NavigationOptions, reset = false) {
-    if (!this.isGrid() && mode !== NavigationOptions.row) {
+  setNavigationOption(mode: NavModeEnum, reset = false) {
+    if (!this.isGrid() && mode !== NavModeEnum.row) {
       this.logWarn("Plain trees only support row navigation mode.");
       return;
     }
     this.options.navigationModeOption = mode;
 
     switch (mode) {
-      case NavigationOptions.cell:
+      case NavModeEnum.cell:
         this.setCellNav(true);
         break;
-      case NavigationOptions.row:
+      case NavModeEnum.row:
         this.setCellNav(false);
         break;
-      case NavigationOptions.startCell:
+      case NavModeEnum.startCell:
         if (reset) {
           this.setCellNav(true);
         }
         break;
-      case NavigationOptions.startRow:
+      case NavModeEnum.startRow:
         if (reset) {
           this.setCellNav(false);
         }
@@ -1713,8 +1717,10 @@ export class Wunderbaum {
       }
     }
   }
-  /** Update column headers and width. */
-  updateColumns(options?: any) {
+  /** 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;
@@ -1754,7 +1760,9 @@ 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
@@ -1789,7 +1797,7 @@ export class Wunderbaum {
     // 'position: fixed' requires that the content has the correct size
     const tw = `${totalWidth}px`;
     this.headerElement.style.width = tw;
-    this.scrollContainerElement!.style.width = tw;
+    this.listContainerElement!.style.width = tw;
     // }
 
     // Every column has now a calculated `_ofsPx` and `_widthPx`
@@ -1802,6 +1810,7 @@ export class Wunderbaum {
         this._updateRows();
       }
     }
+    return modified;
   }
 
   /** Create/update header markup from `this.columns` definition.
@@ -1837,6 +1846,9 @@ export class Wunderbaum {
         resizer = '<span class="wb-col-resizer"></span>';
       }
       colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
+      if (this.isCellNav()) {
+        colElem.classList.toggle("wb-active", i === this.activeColIdx);
+      }
     }
   }
 
@@ -1879,7 +1891,7 @@ export class Wunderbaum {
     this.changeRedrawRequestPending = false;
     this.changeScrollRequestPending = false;
 
-    let height = this.scrollContainerElement.clientHeight;
+    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;
@@ -1890,14 +1902,14 @@ export class Wunderbaum {
 
     if (Math.abs(height - wantHeight) > 1.0) {
       // this.log("resize", height, wantHeight);
-      this.scrollContainerElement.style.height = wantHeight + "px";
+      this.listContainerElement.style.height = wantHeight + "px";
       height = wantHeight;
     }
     // 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()`)
 
@@ -2028,7 +2040,7 @@ export class Wunderbaum {
     // Resize tree container
     this.nodeListElement.style.height = `${top}px`;
     // this.log(
-    //   `render(scrollOfs:${ofs}, ${startIdx}..${endIdx})`,
+    //   `_updateRows(scrollOfs:${ofs}, ${startIdx}..${endIdx})`,
     //   this.nodeListElement.style.height
     // );
     // this.logTimeEnd(label);
@@ -2065,7 +2077,10 @@ export class Wunderbaum {
    *     {start: First tree node, reverse: false, includeSelf: true, includeHidden: false, wrap: false}
    * @returns {boolean} false if iteration was canceled
    */
-  visitRows(callback: (node: WunderbaumNode) => any, options?: any): boolean {
+  visitRows(
+    callback: (node: WunderbaumNode) => any,
+    options?: VisitRowsOptions
+  ): boolean {
     if (!this.root.hasChildren()) {
       return false;
     }
@@ -2146,7 +2161,7 @@ export class Wunderbaum {
       if (!parent && options.wrap) {
         this.logDebug("visitRows(): wrap around");
         util.assert(options.start, "`wrap` option requires `start`");
-        stopNode = options.start;
+        stopNode = options.start!;
         options.wrap = false;
         parent = this.root;
         siblingOfs = 0;
@@ -2161,22 +2176,22 @@ export class Wunderbaum {
    */
   protected _visitRowsUp(
     callback: (node: WunderbaumNode) => any,
-    opts: any
+    options: VisitRowsOptions
   ): boolean {
     let children,
       idx,
       parent,
-      includeHidden = !!opts.includeHidden,
-      node = opts.start || this.root.children![0];
+      includeHidden = !!options.includeHidden,
+      node = options.start || this.root.children![0];
 
-    if (opts.includeSelf !== false) {
+    if (options.includeSelf !== false) {
       if (callback(node) === false) {
         return false;
       }
     }
     while (true) {
       parent = node.parent;
-      children = parent.children;
+      children = parent.children!;
 
       if (children[0] === node) {
         // If this is already the first sibling, goto parent