wunderbaum 0.0.5 → 0.0.6

package/src/wb_node.ts

@@ -9,25 +9,31 @@ import * as util from "./util";
 
 import { Wunderbaum } from "./wunderbaum";
 import {
-  NavigationMode,
+  AddNodeType,
+  ApplyCommandType,
   ChangeType,
-  iconMap,
-  ICON_WIDTH,
-  KEY_TO_ACTION_DICT,
-  makeNodeTitleMatcher,
+  ColumnEventInfos,
+  MakeVisibleOptions,
   MatcherType,
   NodeAnyCallback,
   NodeStatusType,
   NodeVisitCallback,
   NodeVisitResponse,
-  ROW_EXTRA_PAD,
-  ROW_HEIGHT,
-  TEST_IMG,
-  ApplyCommandType,
-  AddNodeType,
+  ScrollIntoViewOptions,
   SetActiveOptions,
   SetExpandedOptions,
   SetSelectedOptions,
+  SetStatusOptions,
+} from "./types";
+import {
+  iconMap,
+  ICON_WIDTH,
+  KEY_TO_ACTION_DICT,
+  makeNodeTitleMatcher,
+  RESERVED_TREE_SOURCE_KEYS,
+  ROW_EXTRA_PAD,
+  ROW_HEIGHT,
+  TEST_IMG,
 } from "./common";
 import { Deferred } from "./deferred";
 import { WbNodeData } from "./wb_options";
@@ -96,6 +102,7 @@ export class WunderbaumNode {
   public readonly refKey: string | undefined = undefined;
   public children: WunderbaumNode[] | null = null;
   public checkbox?: boolean;
+  /** If true, (in grid mode) no cells are rendered, except for the node title.*/
   public colspan?: boolean;
   public icon?: boolean | string;
   public lazy: boolean = false;
@@ -340,7 +347,7 @@ export class WunderbaumNode {
     }
   }
 
-  /** */
+  /** Call `setExpanded()` on al child nodes*/
   async expandAll(flag: boolean = true) {
     this.visit((node) => {
       node.setExpanded(flag);
@@ -553,6 +560,13 @@ export class WunderbaumNode {
     return this.parent && this.parent === other;
   }
 
+  /** Return true if this node's title spans all columns, i.e. the node has no
+   * grid cells.
+   */
+  isColspan() {
+    return !!this.getOption("colspan");
+  }
+
   /** Return true if this node is a direct or indirect sub node of `other`.
    * (See also [[isChildOf]].)
    */
@@ -719,14 +733,26 @@ export class WunderbaumNode {
       "If `source` is an object, it must have a `children` property"
     );
     if (source.types) {
+      tree.logInfo("Redefine types", source.columns);
       tree.setTypes(source.types, false);
+      delete source.types;
     }
     if (source.columns) {
+      tree.logInfo("Redefine columns", source.columns);
       tree.columns = source.columns;
+      delete source.columns;
       tree.updateColumns({ calculateCols: false });
     }
-
     this.addChildren(source.children);
+    delete source.columns;
+
+    // Add extra data to `tree.data`
+    for (const [key, value] of Object.entries(source)) {
+      if (!RESERVED_TREE_SOURCE_KEYS.has(key)) {
+        tree.data[key] = value;
+        tree.logDebug(`Add source.${key} to tree.data.${key}`);
+      }
+    }
 
     this._callEvent("load");
   }
@@ -734,10 +760,13 @@ export class WunderbaumNode {
   /** Download  data from the cloud, then call `.update()`. */
   async load(source: any) {
     const tree = this.tree;
-    // const opts = tree.options;
     const requestId = Date.now();
     const prevParent = this.parent;
     const url = typeof source === "string" ? source : source.url;
+    const start = Date.now();
+    let elap = 0,
+      elapLoad = 0,
+      elapProcess = 0;
 
     // Check for overlapping requests
     if (this._requestId) {
@@ -748,11 +777,12 @@ export class WunderbaumNode {
     }
     this._requestId = requestId;
 
-    const timerLabel = tree.logTime(this + ".load()");
+    // const timerLabel = tree.logTime(this + ".load()");
 
     try {
       if (!url) {
         this._loadSourceObject(source);
+        elapProcess = Date.now() - start;
       } else {
         this.setStatus(NodeStatusType.loading);
         const response = await fetch(url, { method: "GET" });
@@ -760,6 +790,7 @@ export class WunderbaumNode {
           util.error(`GET ${url} returned ${response.status}, ${response}`);
         }
         const data = await response.json();
+        elapLoad = Date.now() - start;
 
         if (this._requestId && this._requestId > requestId) {
           this.logWarn(
@@ -776,23 +807,32 @@ export class WunderbaumNode {
           return;
         }
         this.setStatus(NodeStatusType.ok);
-        if (data.columns) {
-          tree.logInfo("Re-define columns", data.columns);
-          util.assert(!this.parent);
-          tree.columns = data.columns;
-          delete data.columns;
-          tree.updateColumns({ calculateCols: false });
-        }
+        // if (data.columns) {
+        //   tree.logInfo("Re-define columns", data.columns);
+        //   util.assert(!this.parent);
+        //   tree.columns = data.columns;
+        //   delete data.columns;
+        //   tree.updateColumns({ calculateCols: false });
+        // }
+        const startProcess = Date.now();
         this._loadSourceObject(data);
+        elapProcess = Date.now() - startProcess;
       }
     } catch (error) {
       this.logError("Error during load()", source, error);
       this._callEvent("error", { error: error });
-      this.setStatus(NodeStatusType.error, "" + error);
+      this.setStatus(NodeStatusType.error, { message: "" + error });
       throw error;
     } finally {
       this._requestId = 0;
-      tree.logTimeEnd(timerLabel);
+      elap = Date.now() - start;
+      if (tree.options.debugLevel >= 3) {
+        tree.logInfo(
+          `Load source took ${elap / 1000} seconds (transfer: ${
+            elapLoad / 1000
+          }s, processing: ${elapProcess / 1000}s)`
+        );
+      }
     }
   }
 
@@ -833,7 +873,7 @@ export class WunderbaumNode {
     } catch (e) {
       this.logError("Error during loadLazy()", e);
       this._callEvent("error", { error: e });
-      this.setStatus(NodeStatusType.error, "" + e);
+      this.setStatus(NodeStatusType.error, { message: "" + e });
     }
     return;
   }
@@ -880,25 +920,29 @@ export class WunderbaumNode {
    * @param {object} [opts] passed to `setExpanded()`.
    *     Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
    */
-  async makeVisible(opts: any) {
+  async makeVisible(opts?: MakeVisibleOptions) {
     let i,
       dfd = new Deferred(),
       deferreds = [],
       parents = this.getParentList(false, false),
       len = parents.length,
-      effects = !(opts && opts.noAnimation === true),
+      // effects = !(opts && opts.noAnimation === true),
       scroll = !(opts && opts.scrollIntoView === false);
 
     // Expand bottom-up, so only the top node is animated
     for (i = len - 1; i >= 0; i--) {
       // self.debug("pushexpand" + parents[i]);
-      deferreds.push(parents[i].setExpanded(true, opts));
+      const seOpts = { noAnimation: opts?.noAnimation };
+      deferreds.push(parents[i].setExpanded(true, seOpts));
     }
     Promise.all(deferreds).then(() => {
       // All expands have finished
       // self.debug("expand DONE", scroll);
-      if (scroll) {
-        this.scrollIntoView(effects).then(() => {
+      // Note: this.tree may be none when switching demo trees
+      if (scroll && this.tree) {
+        // Make sure markup and _rowIdx is updated before we do the scroll calculations
+        this.tree.updatePendingModifications();
+        this.scrollIntoView().then(() => {
           // self.debug("scroll DONE");
           dfd.resolve();
         });
@@ -1092,25 +1136,35 @@ export class WunderbaumNode {
     }
   }
 
-  protected _getRenderInfo() {
-    let colInfosById: { [key: string]: any } = {};
-    let idx = 0;
-    let colElems = this._rowElem
+  protected _getRenderInfo(): any {
+    const allColInfosById: ColumnEventInfos = {};
+    const renderColInfosById: ColumnEventInfos = {};
+    const isColspan = this.isColspan();
+
+    const colElems = this._rowElem
       ? ((<unknown>(
           this._rowElem.querySelectorAll("span.wb-col")
-        )) as HTMLElement[])
+        )) as HTMLSpanElement[])
       : null;
 
+    let idx = 0;
     for (let col of this.tree.columns) {
-      colInfosById[col.id] = {
+      allColInfosById[col.id] = {
         id: col.id,
         idx: idx,
         elem: colElems ? colElems[idx] : null,
         info: col,
       };
+      // renderColInfosById only contains columns that need rendering:
+      if (!isColspan && col.id !== "*") {
+        renderColInfosById[col.id] = allColInfosById[col.id];
+      }
       idx++;
     }
-    return colInfosById;
+    return {
+      allColInfosById: allColInfosById,
+      renderColInfosById: renderColInfosById,
+    };
   }
 
   protected _createIcon(
@@ -1163,7 +1217,7 @@ export class WunderbaumNode {
 
   /**
    * Create a whole new `<div class="wb-row">` element.
-   * @see {@link Wunderbaumode.render}
+   * @see {@link WunderbaumNode.render}
    */
   protected _render_markup(opts: any) {
     const tree = this.tree;
@@ -1178,8 +1232,7 @@ export class WunderbaumNode {
     let checkboxSpan: HTMLElement | null = null;
     let iconSpan: HTMLElement | null;
     let expanderSpan: HTMLElement | null = null;
-    const activeColIdx =
-      tree.navMode === NavigationMode.row ? null : tree.activeColIdx;
+    const activeColIdx = tree.isRowNav() ? null : tree.activeColIdx;
 
     const isNew = !rowDiv;
     util.assert(isNew);
@@ -1247,7 +1300,9 @@ export class WunderbaumNode {
     }
 
     // Render columns
-    if (!this.colspan && columns.length > 1) {
+    const isColspan = this.isColspan();
+
+    if (!isColspan && columns.length > 1) {
       let colIdx = 0;
       for (let col of columns) {
         colIdx++;
@@ -1275,11 +1330,6 @@ export class WunderbaumNode {
         }
       }
     }
-
-    // Now go on and fill in data and update classes
-    opts.isNew = true;
-    this._render_data(opts);
-
     // Attach to DOM as late as possible
     const after = opts ? opts.after : "last";
     switch (after) {
@@ -1292,12 +1342,15 @@ export class WunderbaumNode {
       default:
         opts.after.after(rowDiv);
     }
+    // Now go on and fill in data and update classes
+    opts.isNew = true;
+    this._render_data(opts);
   }
 
   /**
    * Render `node.title`, `.icon` into an existing row.
    *
-   * @see {@link Wunderbaumode.render}
+   * @see {@link WunderbaumNode.render}
    */
   protected _render_data(opts: any) {
     util.assert(this._rowElem);
@@ -1307,7 +1360,7 @@ export class WunderbaumNode {
     const rowDiv = this._rowElem!;
     const isNew = !!opts.isNew; // Called by _render_markup()?
     const columns = tree.columns;
-    const typeInfo = this.type ? tree.types[this.type] : null;
+    const isColspan = this.isColspan();
 
     // Row markup already exists
     const nodeElem = rowDiv.querySelector("span.wb-node") as HTMLSpanElement;
@@ -1323,13 +1376,13 @@ export class WunderbaumNode {
 
     // Set the width of the title span, so overflow ellipsis work
     if (!treeOptions.skeleton) {
-      if (this.colspan) {
+      if (isColspan) {
         let vpWidth = tree.element.clientWidth;
         titleSpan.style.width =
           vpWidth - (<any>nodeElem)._ofsTitlePx - ROW_EXTRA_PAD + "px";
       } else {
         titleSpan.style.width =
-          columns[0]._widthPx -
+          columns[0]._widthPx! -
           (<any>nodeElem)._ofsTitlePx -
           ROW_EXTRA_PAD +
           "px";
@@ -1348,19 +1401,22 @@ export class WunderbaumNode {
       });
     } else if (this.parent) {
       // Skip root node
+      const renderInfo = this._getRenderInfo();
+
       this._callEvent("render", {
         isNew: isNew,
-        isDataChange: true,
+        isColspan: isColspan,
+        // isDataChange: true,
         nodeElem: nodeElem,
-        typeInfo: typeInfo,
-        colInfosById: this._getRenderInfo(),
+        allColInfosById: renderInfo.allColInfosById,
+        renderColInfosById: renderInfo.renderColInfosById,
       });
     }
   }
 
   /**
    * Update row classes to reflect active, focuses, etc.
-   * @see {@link Wunderbaumode.render}
+   * @see {@link WunderbaumNode.render}
    */
   protected _render_status(opts: any) {
     // this.log("_render_status", opts);
@@ -1377,8 +1433,6 @@ export class WunderbaumNode {
     const checkboxSpan = nodeElem.querySelector(
       "i.wb-checkbox"
     ) as HTMLLIElement;
-    // TODO: update icon (if not opts.isNew)
-    // const iconSpan = nodeElem.querySelector("i.wb-icon") as HTMLElement;
 
     let rowClasses = ["wb-row"];
     this.expanded ? rowClasses.push("wb-expanded") : 0;
@@ -1388,6 +1442,7 @@ export class WunderbaumNode {
     this === tree.focusNode ? rowClasses.push("wb-focus") : 0;
     this._errorInfo ? rowClasses.push("wb-error") : 0;
     this._isLoading ? rowClasses.push("wb-loading") : 0;
+    this.isColspan() ? rowClasses.push("wb-colspan") : 0;
     this.statusNodeType
       ? rowClasses.push("wb-status-" + this.statusNodeType)
       : 0;
@@ -1435,6 +1490,11 @@ export class WunderbaumNode {
       for (let colSpan of rowDiv.children) {
         colSpan.classList.toggle("wb-active", i++ === tree.activeColIdx);
       }
+      // Update icon (if not opts.isNew, which would rebuild markup anyway)
+      const iconSpan = nodeElem.querySelector("i.wb-icon") as HTMLElement;
+      if (iconSpan) {
+        this._createIcon(nodeElem, iconSpan);
+      }
     }
   }
 
@@ -1592,8 +1652,9 @@ export class WunderbaumNode {
   /** Make sure that this node is visible in the viewport.
    * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo()}
    */
-  async scrollIntoView(options?: any) {
-    return this.tree.scrollTo(this);
+  async scrollIntoView(options?: ScrollIntoViewOptions) {
+    const opts = Object.assign({ node: this }, options);
+    return this.tree.scrollTo(opts);
   }
 
   /**
@@ -1602,31 +1663,29 @@ export class WunderbaumNode {
   async setActive(flag: boolean = true, options?: SetActiveOptions) {
     const tree = this.tree;
     const prev = tree.activeNode;
-    const retrigger = options?.retrigger;
-    const noEvents = options?.noEvents;
+    const retrigger = options?.retrigger; // Default: false
+    const focusTree = options?.focusTree; // Default: false
+    const focusNode = options?.focusNode !== false; // Default: true
+    const noEvents = options?.noEvents; // Default: false
+    const orgEvent = options?.event; // Default: false
 
     if (!noEvents) {
-      let orgEvent = options?.event;
       if (flag) {
         if (prev !== this || retrigger) {
           if (
             prev?._callEvent("deactivate", {
               nextNode: this,
               orgEvent: orgEvent,
-            }) === false
-          ) {
-            return;
-          }
-          if (
-            this._callEvent("activate", {
+            }) === false ||
+            this._callEvent("beforeActivate", {
               prevNode: prev,
               orgEvent: orgEvent,
             }) === false
           ) {
-            tree.activeNode = null;
-            prev?.setModified();
             return;
           }
+          tree.activeNode = null;
+          prev?.setModified(ChangeType.status);
         }
       } else if (prev === this || retrigger) {
         this._callEvent("deactivate", { nextNode: null, orgEvent: orgEvent });
@@ -1634,7 +1693,11 @@ export class WunderbaumNode {
     }
 
     if (prev !== this) {
-      tree.activeNode = this;
+      if (flag) {
+        tree.activeNode = this;
+        if (focusNode || focusTree) tree.focusNode = this;
+        if (focusTree) tree.setFocus();
+      }
       prev?.setModified(ChangeType.status);
       this.setModified(ChangeType.status);
     }
@@ -1642,42 +1705,46 @@ export class WunderbaumNode {
       options &&
       options.colIdx != null &&
       options.colIdx !== tree.activeColIdx &&
-      tree.navMode !== NavigationMode.row
+      tree.isCellNav()
     ) {
       tree.setColumn(options.colIdx);
     }
-    // requestAnimationFrame(() => {
-    //   this.scrollIntoView();
-    // })
-    return this.scrollIntoView();
+    if (flag && !noEvents) {
+      this._callEvent("activate", { prevNode: prev, orgEvent: orgEvent });
+    }
+    return this.makeVisible();
   }
 
   /**
    * Expand or collapse this node.
    */
   async setExpanded(flag: boolean = true, options?: SetExpandedOptions) {
-    // alert("" + this.getLevel() + ", "+ this.getOption("minExpandLevel");
     if (
       !flag &&
       this.isExpanded() &&
-      this.getLevel() < this.getOption("minExpandLevel") &&
+      this.getLevel() <= this.tree.getOption("minExpandLevel") &&
       !util.getOption(options, "force")
     ) {
       this.logDebug("Ignored collapse request below expandLevel.");
       return;
     }
+    if (!flag === !this.expanded) {
+      return; // Nothing to do
+    }
     if (flag && this.lazy && this.children == null) {
       await this.loadLazy();
     }
     this.expanded = flag;
-    this.tree.setModified(ChangeType.structure);
+    const updateOpts = { immediate: !!util.getOption(options, "immediate") };
+    this.tree.setModified(ChangeType.structure, updateOpts);
   }
 
   /**
    * Set keyboard focus here.
    * @see {@link setActive}
    */
-  setFocus(flag: boolean = true, options?: any) {
+  setFocus(flag: boolean = true) {
+    util.assert(!!flag, "blur is not yet implemented");
     const prev = this.tree.focusNode;
     this.tree.focusNode = this;
     prev?.setModified();
@@ -1720,10 +1787,12 @@ export class WunderbaumNode {
   /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
   setStatus(
     status: NodeStatusType,
-    message?: string,
-    details?: string
+    options?: SetStatusOptions
   ): WunderbaumNode | null {
     const tree = this.tree;
+    const message = options?.message;
+    const details = options?.details;
+
     let statusNode: WunderbaumNode | null = null;
 
     const _clearStatusNode = () => {

package/src/wb_options.ts

@@ -6,11 +6,14 @@
 
 import {
   BoolOptionResolver,
-  NavigationModeOption,
+  ColumnDefinitionList,
+  DndOptionsType,
+  NavigationOptions,
+  NodeTypeDefinitions,
   WbNodeEventType,
+  WbRenderEventType,
   WbTreeEventType,
-} from "./common";
-import { DndOptionsType } from "./wb_ext_dnd";
+} from "./types";
 
 export interface WbNodeData {
   title: string;
@@ -23,43 +26,6 @@ export interface WbNodeData {
   // ...any?: Any;
 }
 
-export interface ColumnDefinition {
-  /** Column ID (pass "*" for the main tree nodes column ) */
-  id: string;
-  /** Column header (defaults to id) */
-  title: string;
-  /** Column width or weight.
-   * Either an absolute pixel value (e.g. `"50px"`) or a relative weight (e.g. `1`)
-   * that is used to calculate the width  inside the remaining available space.
-   * Default: `"*"`, which is interpreted as `1`.
-   */
-  width?: string | number;
-  /** Only used for columns with a relative weight.
-   * Default: `4px`.
-   */
-  minWidth?: string | number;
-  /** Optional class names that are added to all `span.wb-col` elements of that column.*/
-  classes?: string;
-  /** Optional HTML content that is rendered into all `span.wb-col` elements of that column.*/
-  html: string;
-}
-
-export interface TypeDefinition {
-  // /** Type ID that matches `node.type`. */
-  // id: string;
-  /** En/disable checkbox for matching nodes.*/
-  checkbox?: boolean | BoolOptionResolver;
-  /** Optional class names that are added to all `div.wb-row` elements of matching nodes.*/
-  classes?: string;
-  /**Default icon for matching nodes.*/
-  icon?: boolean | string | BoolOptionResolver;
-  /**
-   * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
-   * to evaluate `node.NAME` setting and `tree.types[node.type].NAME`.
-   */
-  _any: any;
-}
-
 /**
  * Available options for [[Wunderbaum]].
  *
@@ -116,7 +82,7 @@ export interface WunderbaumOptions {
    *
    * Default: `{}`.
    */
-  types?: { [key: string]: TypeDefinition };
+  types?: NodeTypeDefinitions; // { [key: string]: NodeTypeDefinition };
   /**
    * A list of maps that define column headers. If this option is set,
    * Wunderbaum becomes a treegrid control instead of a plain tree.
@@ -124,7 +90,7 @@ export interface WunderbaumOptions {
    * response.
    * Default: `[]` meaning this is a plain tree.
    */
-  columns?: Array<ColumnDefinition>;
+  columns?: ColumnDefinitionList;
   /**
    * If true, add a `wb-skeleton` class to all nodes, that will result in a
    * 'glow' effect. Typically used with initial dummy nodes, while loading the
@@ -143,15 +109,16 @@ export interface WunderbaumOptions {
   debugLevel: number;
   /**
    * Number of levels that are forced to be expanded, and have no expander icon.
+   * E.g. 1 would keep all toplevel nodes expanded.
    * Default: 0
    */
   minExpandLevel?: number;
   // escapeTitles: boolean;
-  /**
-   * Height of the header row div.
-   * Default: 22
-   */
-  headerHeightPx: number;
+  // /**
+  //  * Height of the header row div.
+  //  * Default: 22
+  //  */
+  // headerHeightPx: number;
   /**
    * Height of a node row div.
    * Default: 22
@@ -166,13 +133,17 @@ export interface WunderbaumOptions {
    * HTMLElement that receives the top nodes breadcrumb.
    * Default: undefined
    */
-  attachBreadcrumb?: HTMLElement;
+  connectTopBreadcrumb?: HTMLElement;
   /**
-   * Default:  NavigationModeOption.startRow
+   * Default:  NavigationOptions.startRow
    */
-  navigationMode?: NavigationModeOption;
+  navigationModeOption?: NavigationOptions;
   /**
-   * Show/hide header (pass bool or string)
+   * Show/hide header (default: null)
+   * null: assume false for plain tree and true for grids.
+   * string: use text as header (only for plain trees)
+   * true: display a header (use tree's id as text for plain trees)
+   * false: do not display a header
    */
   header?: boolean | string | null;
   /**
@@ -180,7 +151,9 @@ export interface WunderbaumOptions {
    */
   showSpinner?: boolean;
   /**
-   * Default: true
+   * If true, render a checkbox before the node tile to allow selection with the
+   * mouse.
+   * Default: false.
    */
   checkbox?: boolean | "radio" | BoolOptionResolver;
   /**
@@ -228,6 +201,15 @@ export interface WunderbaumOptions {
   click?: (e: WbTreeEventType) => void;
   /**
    *
+   * Return `false` to prevent default handling, e.g. activating the node.
+   * @category Callback
+   */
+  beforeActivate?: (e: WbNodeEventType) => void;
+  /**
+  /**
+   *
+   * Return `false` to prevent default handling, e.g. deactivating the node
+   * and activating the next.
    * @category Callback
    */
   deactivate?: (e: WbNodeEventType) => void;
@@ -298,7 +280,7 @@ export interface WunderbaumOptions {
    * See also `Custom Rendering` for details.
    * @category Callback
    */
-  render?: (e: WbNodeEventType) => void;
+  render?: (e: WbRenderEventType) => void;
   /**
    *
    * @category Callback