wunderbaum 0.0.4 → 0.0.7

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,
+  TITLE_SPAN_PAD_Y,
+  ROW_HEIGHT,
+  TEST_IMG,
 } from "./common";
 import { Deferred } from "./deferred";
 import { WbNodeData } from "./wb_options";
@@ -50,7 +56,7 @@ const NODE_PROPS = new Set<string>([
 const NODE_ATTRS = new Set<string>([
   "checkbox",
   "expanded",
-  "extraClasses", // TODO: rename to classes
+  "classes",
   "folder",
   "icon",
   "iconTooltip",
@@ -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;
@@ -108,8 +115,8 @@ export class WunderbaumNode {
   public type?: string;
   public tooltip?: string;
   /** Additional classes added to `div.wb-row`.
-   * @see {@link addClass}, {@link removeClass}, {@link toggleClass}. */
-  public extraClasses = new Set<string>();
+   * @see {@link hasClass}, {@link setClass}. */
+  public classes: Set<string> | null = null; //new Set<string>();
   /** Custom data that was passed to the constructor */
   public data: any = {};
   // --- Node Status ---
@@ -150,9 +157,7 @@ export class WunderbaumNode {
     this.lazy = data.lazy === true;
     this.selected = data.selected === true;
     if (data.classes) {
-      for (const c of data.classes.split(" ")) {
-        this.extraClasses.add(c.trim());
-      }
+      this.setClass(data.classes);
     }
     // Store custom fields as `node.data`
     for (const [key, value] of Object.entries(data)) {
@@ -172,7 +177,7 @@ export class WunderbaumNode {
    * @internal
    */
   toString() {
-    return "WunderbaumNode@" + this.key + "<'" + this.title + "'>";
+    return `WunderbaumNode@${this.key}<'${this.title}'>`;
   }
 
   // /** Return an option value. */
@@ -220,6 +225,8 @@ export class WunderbaumNode {
    * @returns first child added
    */
   addChildren(nodeData: any, options?: any): WunderbaumNode {
+    const tree = this.tree;
+    const level = options ? options.level : this.getLevel();
     let insertBefore: WunderbaumNode | string | number = options
         ? options.before
         : null,
@@ -227,19 +234,21 @@ export class WunderbaumNode {
       nodeList = [];
 
     try {
-      this.tree.enableUpdate(false);
+      tree.enableUpdate(false);
 
       if (util.isPlainObject(nodeData)) {
         nodeData = [nodeData];
       }
+      const forceExpand = level < tree.options.minExpandLevel!;
       for (let child of nodeData) {
         let subChildren = child.children;
         delete child.children;
 
-        let n = new WunderbaumNode(this.tree, this, child);
+        let n = new WunderbaumNode(tree, this, child);
+        if (forceExpand && !n.lazy) n.expanded = true;
         nodeList.push(n);
         if (subChildren) {
-          n.addChildren(subChildren, { redraw: false });
+          n.addChildren(subChildren, { redraw: false, level: level + 1 });
         }
       }
 
@@ -256,14 +265,14 @@ export class WunderbaumNode {
         this.children.splice(pos, 0, ...nodeList);
       }
       // TODO:
-      // if (this.tree.options.selectMode === 3) {
+      // if (tree.options.selectMode === 3) {
       //   this.fixSelection3FromEndNodes();
       // }
       // this.triggerModifyChild("add", nodeList.length === 1 ? nodeList[0] : null);
-      this.tree.setModified(ChangeType.structure);
+      tree.setModified(ChangeType.structure);
       return nodeList[0];
     } finally {
-      this.tree.enableUpdate(true);
+      tree.enableUpdate(true);
     }
   }
 
@@ -307,31 +316,42 @@ export class WunderbaumNode {
     return this.tree.applyCommand(cmd, this, opts);
   }
 
-  addClass(className: string | string[] | Set<string>) {
-    const cnSet = util.toSet(className);
-    cnSet.forEach((cn) => {
-      this.extraClasses.add(cn);
-      this._rowElem?.classList.add(cn);
-    });
-  }
-
-  removeClass(className: string | string[] | Set<string>) {
-    const cnSet = util.toSet(className);
-    cnSet.forEach((cn) => {
-      this.extraClasses.delete(cn);
-      this._rowElem?.classList.remove(cn);
-    });
-  }
-
-  toggleClass(className: string | string[] | Set<string>, flag: boolean) {
+  /**
+   * Add/remove one or more classes to `<div class='wb-row'>`.
+   *
+   * This also maintains `node.classes`, so the class will survive a re-render.
+   *
+   * @param className one or more class names. Multiple classes can be passed
+   *     as space-separated string, array of strings, or set of strings.
+   */
+  setClass(
+    className: string | string[] | Set<string>,
+    flag: boolean = true
+  ): void {
     const cnSet = util.toSet(className);
-    cnSet.forEach((cn) => {
-      flag ? this.extraClasses.add(cn) : this.extraClasses.delete(cn);
-      this._rowElem?.classList.toggle(cn, flag);
-    });
+    if (flag) {
+      if (this.classes === null) {
+        this.classes = new Set<string>();
+      }
+      cnSet.forEach((cn) => {
+        this.classes!.add(cn);
+        this._rowElem?.classList.toggle(cn, flag);
+      });
+    } else {
+      if (this.classes === null) {
+        return;
+      }
+      cnSet.forEach((cn) => {
+        this.classes!.delete(cn);
+        this._rowElem?.classList.toggle(cn, flag);
+      });
+      if (this.classes.size === 0) {
+        this.classes = null;
+      }
+    }
   }
 
-  /** */
+  /** Call `setExpanded()` on al child nodes*/
   async expandAll(flag: boolean = true) {
     this.visit((node) => {
       node.setExpanded(flag);
@@ -527,6 +547,11 @@ export class WunderbaumNode {
     return !!(this.children && this.children.length);
   }
 
+  /** Return true if node has className set. */
+  hasClass(className: string): boolean {
+    return this.classes ? this.classes.has(className) : false;
+  }
+
   /** Return true if this node is the currently active tree node. */
   isActive() {
     return this.tree.activeNode === this;
@@ -539,6 +564,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]].)
    */
@@ -690,9 +722,11 @@ export class WunderbaumNode {
     return true;
   }
 
-  protected _loadSourceObject(source: any) {
+  protected _loadSourceObject(source: any, level?: number) {
     const tree = this.tree;
 
+    level ??= this.getLevel();
+
     // Let caller modify the parsed JSON response:
     this._callEvent("receive", { response: source });
 
@@ -705,21 +739,40 @@ export class WunderbaumNode {
       "If `source` is an object, it must have a `children` property"
     );
     if (source.types) {
-      // TODO: convert types.classes to Set()
-      util.extend(tree.types, 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);
 
+    // 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");
   }
 
   /** 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) {
@@ -730,11 +783,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" });
@@ -742,6 +796,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(
@@ -758,23 +813,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)`
+        );
+      }
     }
   }
 
@@ -815,7 +879,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;
   }
@@ -862,25 +926,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();
         });
@@ -1074,25 +1142,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(
@@ -1118,6 +1196,8 @@ export class WunderbaumNode {
       icon = iconMap.folderOpen;
     } else if (this.children) {
       icon = iconMap.folder;
+    } else if (this.lazy) {
+      icon = iconMap.folderLazy;
     } else {
       icon = iconMap.doc;
     }
@@ -1145,7 +1225,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;
@@ -1160,8 +1240,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);
@@ -1229,7 +1308,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++;
@@ -1257,11 +1338,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) {
@@ -1274,12 +1350,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);
@@ -1289,7 +1368,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;
@@ -1305,15 +1384,15 @@ 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";
+          vpWidth - (<any>nodeElem)._ofsTitlePx - TITLE_SPAN_PAD_Y + "px";
       } else {
         titleSpan.style.width =
-          columns[0]._widthPx -
+          columns[0]._widthPx! -
           (<any>nodeElem)._ofsTitlePx -
-          ROW_EXTRA_PAD +
+          TITLE_SPAN_PAD_Y +
           "px";
       }
     }
@@ -1330,19 +1409,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);
@@ -1359,8 +1441,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;
@@ -1370,6 +1450,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;
@@ -1381,8 +1462,8 @@ export class WunderbaumNode {
     // Replace previous classes:
     rowDiv.className = rowClasses.join(" ");
 
-    // Add classes from `node.extraClasses`
-    rowDiv.classList.add(...this.extraClasses);
+    // Add classes from `node.classes`
+    this.classes ? rowDiv.classList.add(...this.classes) : 0;
 
     // Add classes from `tree.types[node.type]`
     if (typeInfo && typeInfo.classes) {
@@ -1417,6 +1498,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);
+      }
     }
   }
 
@@ -1574,8 +1660,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);
   }
 
   /**
@@ -1584,31 +1671,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 });
@@ -1616,7 +1701,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);
     }
@@ -1624,42 +1713,52 @@ 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);
+    if (util.getOption(options, "scrollIntoView") !== false) {
+      const lastChild = this.getLastChild();
+      if (lastChild) {
+        lastChild.scrollIntoView({ topNode: this });
+      }
+    }
   }
 
   /**
    * 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();
@@ -1702,10 +1801,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 = () => {
@@ -1823,9 +1924,9 @@ export class WunderbaumNode {
    * @param {object} [extra]
    */
   triggerModify(operation: string, extra?: any) {
-    if (!this.parent) {
-      return;
-    }
+    // if (!this.parent) {
+    //   return;
+    // }
     this.parent.triggerModifyChild(operation, this, extra);
   }