wunderbaum 0.0.1-0 → 0.0.3

package/src/wb_ext_grid.ts

@@ -0,0 +1,45 @@
+/*!
+ * Wunderbaum - ext-grid
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+import { Wunderbaum } from "./wunderbaum";
+import { WunderbaumExtension } from "./wb_extension_base";
+import { DragCallbackArgType, DragObserver } from "./drag_observer";
+
+export class GridExtension extends WunderbaumExtension {
+  protected observer: DragObserver;
+
+  constructor(tree: Wunderbaum) {
+    super(tree, "grid", {
+      // throttle: 200,
+    });
+
+    this.observer = new DragObserver({
+      root: window.document,
+      selector: "span.wb-col-resizer",
+      thresh: 4,
+      // throttle: 400,
+      dragstart: (e) => {
+        return this.tree.element.contains(e.dragElem);
+      },
+      drag: (e) => {
+        // TODO: throttle
+        return this.handleDrag(e);
+      },
+      dragstop: (e) => {
+        return this.handleDrag(e);
+      },
+    });
+  }
+
+  init() {
+    super.init();
+  }
+
+  protected handleDrag(e: DragCallbackArgType): void {
+    const info = Wunderbaum.getEventInfo(e.event);
+    // this.tree.options.
+    this.tree.log(`${e.type}(${e.dx})`, e, info);
+  }
+}

package/src/wb_ext_keynav.ts

@@ -94,7 +94,7 @@ export class KeynavExtension extends WunderbaumExtension {
           if (!node.expanded && (node.children || node.lazy)) {
             eventName = "Add"; // expand
           } else if (navModeOption === NavigationModeOption.startRow) {
-            tree.setCellMode(NavigationMode.cellNav);
+            tree.setNavigationMode(NavigationMode.cellNav);
             return;
           }
           break;
@@ -133,6 +133,8 @@ export class KeynavExtension extends WunderbaumExtension {
         case "Home":
         case "Control+End":
         case "Control+Home":
+        case "Meta+ArrowDown":
+        case "Meta+ArrowUp":
         case "PageDown":
         case "PageUp":
           node.navigate(eventName, { activate: activate, event: event });
@@ -164,10 +166,10 @@ export class KeynavExtension extends WunderbaumExtension {
           break;
         case "Escape":
           if (tree.navMode === NavigationMode.cellEdit) {
-            tree.setCellMode(NavigationMode.cellNav);
+            tree.setNavigationMode(NavigationMode.cellNav);
             handled = true;
           } else if (tree.navMode === NavigationMode.cellNav) {
-            tree.setCellMode(NavigationMode.row);
+            tree.setNavigationMode(NavigationMode.row);
             handled = true;
           }
           break;
@@ -176,7 +178,7 @@ export class KeynavExtension extends WunderbaumExtension {
             tree.setColumn(tree.activeColIdx - 1);
             handled = true;
           } else if (navModeOption !== NavigationModeOption.cell) {
-            tree.setCellMode(NavigationMode.row);
+            tree.setNavigationMode(NavigationMode.row);
             handled = true;
           }
           break;
@@ -193,6 +195,8 @@ export class KeynavExtension extends WunderbaumExtension {
         case "Home":
         case "Control+End":
         case "Control+Home":
+        case "Meta+ArrowDown":
+        case "Meta+ArrowUp":
         case "PageDown":
         case "PageUp":
           node.navigate(eventName, { activate: activate, event: event });

package/src/wb_node.ts

@@ -25,6 +25,9 @@ import {
   TEST_IMG,
   ApplyCommandType,
   AddNodeType,
+  SetActiveOptions,
+  SetExpandedOptions,
+  SetSelectedOptions,
 } from "./common";
 import { Deferred } from "./deferred";
 import { WbNodeData } from "./wb_options";
@@ -66,6 +69,13 @@ const NODE_ATTRS = new Set<string>([
   "unselectableStatus",
 ]);
 
+/**
+ * A single tree node.
+ *
+ * **NOTE:** <br>
+ * Generally you should not modify properties directly, since this may break
+ * the internal bookkeeping.
+ */
 export class WunderbaumNode {
   static sequence = 0;
 
@@ -73,19 +83,32 @@ export class WunderbaumNode {
   public tree: Wunderbaum;
   /** Parent node (null for the invisible root node `tree.root`). */
   public parent: WunderbaumNode;
+  /** Name of the node.
+   * @see Use {@link setTitle} to modify. */
   public title: string;
+  /** Unique key. Passed with constructor or defaults to `SEQUENCE`.
+   * @see Use {@link setKey} to modify. */
   public readonly key: string;
+  /** Reference key. Unlike {@link key}, a `refKey` may occur multiple
+   * times within a tree (in this case we have 'clone nodes').
+   * @see Use {@link setKey} to modify.
+   */
   public readonly refKey: string | undefined = undefined;
   public children: WunderbaumNode[] | null = null;
   public checkbox?: boolean;
   public colspan?: boolean;
   public icon?: boolean | string;
   public lazy: boolean = false;
+  /** Expansion state.
+   * @see {@link isExpandable}, {@link isExpanded}, {@link setExpanded}. */
   public expanded: boolean = false;
+  /** Selection state.
+   * @see {@link isSelected}, {@link setSelected}. */
   public selected: boolean = false;
   public type?: string;
   public tooltip?: string;
-  /** Additional classes added to `div.wb-row`. */
+  /** Additional classes added to `div.wb-row`.
+   * @see {@link addClass}, {@link removeClass}, {@link toggleClass}. */
   public extraClasses = new Set<string>();
   /** Custom data that was passed to the constructor */
   public data: any = {};
@@ -100,6 +123,7 @@ export class WunderbaumNode {
   public match?: boolean; // Added and removed by filter code
   public subMatchCount?: number = 0;
   public subMatchBadge?: HTMLElement;
+  /** @internal */
   public titleWithHighlight?: string;
   public _filterAutoExpanded?: boolean;
 
@@ -236,7 +260,7 @@ export class WunderbaumNode {
       //   this.fixSelection3FromEndNodes();
       // }
       // this.triggerModifyChild("add", nodeList.length === 1 ? nodeList[0] : null);
-      this.tree.setModified(ChangeType.structure, this);
+      this.tree.setModified(ChangeType.structure);
       return nodeList[0];
     } finally {
       this.tree.enableUpdate(true);
@@ -276,7 +300,8 @@ export class WunderbaumNode {
 
   /**
    * Apply a modification (or navigation) operation.
-   * @see Wunderbaum#applyCommand
+   *
+   * @see {@link Wunderbaum.applyCommand}
    */
   applyCommand(cmd: ApplyCommandType, opts: any): any {
     return this.tree.applyCommand(cmd, this, opts);
@@ -374,8 +399,7 @@ export class WunderbaumNode {
 
   /** Find a node relative to self.
    *
-   * @param where The keyCode that would normally trigger this move,
-   *		or a keyword ('down', 'first', 'last', 'left', 'parent', 'right', 'up').
+   * @see {@link Wunderbaum.findRelatedNode|tree.findRelatedNode()}
    */
   findRelatedNode(where: string, includeHidden = false) {
     return this.tree.findRelatedNode(this, where, includeHidden);
@@ -739,7 +763,7 @@ export class WunderbaumNode {
           util.assert(!this.parent);
           tree.columns = data.columns;
           delete data.columns;
-          tree.renderHeader();
+          tree.updateColumns({ calculateCols: false });
         }
         this._loadSourceObject(data);
       }
@@ -777,20 +801,21 @@ export class WunderbaumNode {
       }
       util.assert(
         util.isArray(source) || (source && source.url),
-        "The lazyLoad event must return a node list, `{url: ...}` or false."
+        "The lazyLoad event must return a node list, `{url: ...}`, or false."
       );
 
       await this.load(source); // also calls setStatus('ok')
 
       if (wasExpanded) {
         this.expanded = true;
-        this.tree.updateViewport();
+        this.tree.setModified(ChangeType.structure);
       } else {
-        this.render(); // Fix expander icon to 'loaded'
+        this.setModified(); // Fix expander icon to 'loaded'
       }
     } catch (e) {
+      this.logError("Error during loadLazy()", e);
+      this._callEvent("error", { error: e });
       this.setStatus(NodeStatusType.error, "" + e);
-      // } finally {
     }
     return;
   }
@@ -956,7 +981,7 @@ export class WunderbaumNode {
       }, true);
     }
 
-    tree.updateViewport();
+    tree.setModified(ChangeType.structure);
     // TODO: fix selection state
     // TODO: fix active state
   }
@@ -978,31 +1003,33 @@ export class WunderbaumNode {
     where = KEY_TO_ACTION_DICT[where] || where;
 
     // Otherwise activate or focus the related node
-    let node = this.findRelatedNode(where);
-    if (node) {
-      // setFocus/setActive will scroll later (if autoScroll is specified)
-      try {
-        node.makeVisible({ scrollIntoView: false });
-      } catch (e) {} // #272
-      node.setFocus();
-      if (options?.activate === false) {
-        return Promise.resolve(this);
-      }
-      return node.setActive(true, { event: options?.event });
+    const node = this.findRelatedNode(where);
+    if (!node) {
+      this.logWarn(`Could not find related node '${where}'.`);
+      return Promise.resolve(this);
+    }
+    // setFocus/setActive will scroll later (if autoScroll is specified)
+    try {
+      node.makeVisible({ scrollIntoView: false });
+    } catch (e) {} // #272
+    node.setFocus();
+    if (options?.activate === false) {
+      return Promise.resolve(this);
     }
-    this.logWarn("Could not find related node '" + where + "'.");
-    return Promise.resolve(this);
+    return node.setActive(true, { event: options?.event });
   }
 
   /** Delete this node and all descendants. */
   remove() {
     const tree = this.tree;
     const pos = this.parent.children!.indexOf(this);
+    this.triggerModify("remove");
     this.parent.children!.splice(pos, 1);
     this.visit((n) => {
       n.removeMarkup();
       tree._unregisterNode(n);
     }, true);
+    tree.setModified(ChangeType.structure);
   }
 
   /** Remove all descendants of this node. */
@@ -1035,7 +1062,7 @@ export class WunderbaumNode {
     if (!this.isRootNode()) {
       this.expanded = false;
     }
-    this.tree.updateViewport();
+    this.tree.setModified(ChangeType.structure);
   }
 
   /** Remove all HTML markup from the DOM. */
@@ -1135,6 +1162,10 @@ export class WunderbaumNode {
       tree.navMode === NavigationMode.row ? null : tree.activeColIdx;
     // let colElems: HTMLElement[];
     const isNew = !rowDiv;
+    util.assert(
+      !isNew || (opts && opts.after),
+      "opts.after expected, unless updating"
+    );
 
     util.assert(!this.isRootNode());
     //
@@ -1194,7 +1225,7 @@ export class WunderbaumNode {
         ofsTitlePx += ICON_WIDTH;
       }
 
-      if (level > treeOptions.minExpandLevel) {
+      if (!treeOptions.minExpandLevel || level > treeOptions.minExpandLevel) {
         expanderSpan = document.createElement("i");
         nodeElem.appendChild(expanderSpan);
         ofsTitlePx += ICON_WIDTH;
@@ -1214,7 +1245,7 @@ export class WunderbaumNode {
       // Store the width of leading icons with the node, so we can calculate
       // the width of the embedded title span later
       (<any>nodeElem)._ofsTitlePx = ofsTitlePx;
-      if (tree.options.dnd.dragStart) {
+      if (tree.options.dnd!.dragStart) {
         nodeElem.draggable = true;
       }
 
@@ -1290,10 +1321,11 @@ export class WunderbaumNode {
 
     if (this.titleWithHighlight) {
       titleSpan.innerHTML = this.titleWithHighlight;
-    } else if (tree.options.escapeTitles) {
-      titleSpan.textContent = this.title;
     } else {
-      titleSpan.innerHTML = this.title;
+      // } else if (tree.options.escapeTitles) {
+      titleSpan.textContent = this.title;
+      // } else {
+      //   titleSpan.innerHTML = this.title;
     }
     // Set the width of the title span, so overflow ellipsis work
     if (!treeOptions.skeleton) {
@@ -1328,9 +1360,19 @@ export class WunderbaumNode {
     }
 
     // Attach to DOM as late as possible
-    // if (!this._rowElem) {
-    tree.nodeListElement.appendChild(rowDiv);
-    // }
+    if (isNew) {
+      const after = opts ? opts.after : "last";
+      switch (after) {
+        case "first":
+          tree.nodeListElement.prepend(rowDiv);
+          break;
+        case "last":
+          tree.nodeListElement.appendChild(rowDiv);
+          break;
+        default:
+          opts.after.after(rowDiv);
+      }
+    }
   }
 
   /**
@@ -1342,7 +1384,7 @@ export class WunderbaumNode {
     this.expanded = false;
     this.lazy = true;
     this.children = null;
-    this.tree.updateViewport();
+    this.tree.setModified(ChangeType.structure);
   }
 
   /** Convert node (or whole branch) into a plain object.
@@ -1408,14 +1450,15 @@ export class WunderbaumNode {
    *
    * Evaluation sequence:
    *
-   * If `tree.options.<name>` is a callback that returns something, use that.
-   * Else if `node.<name>` is defined, use that.
-   * Else if `tree.types[<node.type>]` is a value, use that.
-   * Else if `tree.options.<name>` is a value, use that.
-   * Else use `defaultValue`.
+   * - If `tree.options.<name>` is a callback that returns something, use that.
+   * - Else if `node.<name>` is defined, use that.
+   * - Else if `tree.types[<node.type>]` is a value, use that.
+   * - Else if `tree.options.<name>` is a value, use that.
+   * - Else use `defaultValue`.
    *
    * @param name name of the option property (on node and tree)
    * @param defaultValue return this if nothing else matched
+   * {@link Wunderbaum.getOption|Wunderbaum.getOption()}
    */
   getOption(name: string, defaultValue?: any) {
     let tree = this.tree;
@@ -1453,17 +1496,23 @@ export class WunderbaumNode {
     return value ?? defaultValue;
   }
 
+  /** 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 setActive(flag: boolean = true, options?: any) {
+  /**
+   * Activate this node, deactivate previous, send events, activate column and scroll int viewport.
+   */
+  async setActive(flag: boolean = true, options?: SetActiveOptions) {
     const tree = this.tree;
     const prev = tree.activeNode;
     const retrigger = options?.retrigger;
-    const noEvent = options?.noEvent;
+    const noEvents = options?.noEvents;
 
-    if (!noEvent) {
+    if (!noEvents) {
       let orgEvent = options?.event;
       if (flag) {
         if (prev !== this || retrigger) {
@@ -1482,7 +1531,7 @@ export class WunderbaumNode {
             }) === false
           ) {
             tree.activeNode = null;
-            prev?.setDirty(ChangeType.status);
+            prev?.setModified();
             return;
           }
         }
@@ -1493,8 +1542,8 @@ export class WunderbaumNode {
 
     if (prev !== this) {
       tree.activeNode = this;
-      prev?.setDirty(ChangeType.status);
-      this.setDirty(ChangeType.status);
+      prev?.setModified();
+      this.setModified();
     }
     if (
       options &&
@@ -1507,22 +1556,13 @@ export class WunderbaumNode {
     // requestAnimationFrame(() => {
     //   this.scrollIntoView();
     // })
-    this.scrollIntoView();
-  }
-
-  setDirty(type: ChangeType) {
-    if (this.tree._disableUpdate) {
-      return;
-    }
-    if (type === ChangeType.structure) {
-      this.tree.updateViewport();
-    } else if (this._rowElem) {
-      // otherwise not in viewport, so no need to render
-      this.render();
-    }
+    return this.scrollIntoView();
   }
 
-  async setExpanded(flag: boolean = true, options?: any) {
+  /**
+   * Expand or collapse this node.
+   */
+  async setExpanded(flag: boolean = true, options?: SetExpandedOptions) {
     // alert("" + this.getLevel() + ", "+ this.getOption("minExpandLevel");
     if (
       !flag &&
@@ -1530,45 +1570,61 @@ export class WunderbaumNode {
       this.getLevel() < this.getOption("minExpandLevel") &&
       !util.getOption(options, "force")
     ) {
-      this.logDebug("Ignored collapse request.");
+      this.logDebug("Ignored collapse request below expandLevel.");
       return;
     }
     if (flag && this.lazy && this.children == null) {
       await this.loadLazy();
     }
     this.expanded = flag;
-    this.setDirty(ChangeType.structure);
+    this.tree.setModified(ChangeType.structure);
+  }
+
+  /**
+   * Set keyboard focus here.
+   * @see {@link setActive}
+   */
+  setFocus(flag: boolean = true, options?: any) {
+    const prev = this.tree.focusNode;
+    this.tree.focusNode = this;
+    prev?.setModified();
+    this.setModified();
   }
 
+  /** Set a new icon path or class. */
   setIcon() {
     throw new Error("Not yet implemented");
-    // this.setDirty(ChangeType.status);
+    // this.setModified();
   }
 
-  setFocus(flag: boolean = true, options?: any) {
-    const prev = this.tree.focusNode;
-    this.tree.focusNode = this;
-    prev?.setDirty(ChangeType.status);
-    this.setDirty(ChangeType.status);
+  /** Change node's {@link key} and/or {@link refKey}.  */
+  setKey(key: string | null, refKey: string | null) {
+    throw new Error("Not yet implemented");
+  }
+
+  /** Schedule a render, typically called to update after a status or data change. */
+  setModified(change: ChangeType = ChangeType.status) {
+    util.assert(change === ChangeType.status);
+    this.tree.setModified(ChangeType.row, this);
   }
 
-  setSelected(flag: boolean = true, options?: any) {
+  /** Modify the check/uncheck state. */
+  setSelected(flag: boolean = true, options?: SetSelectedOptions) {
     const prev = this.selected;
     if (!!flag !== prev) {
       this._callEvent("select", { flag: flag });
     }
     this.selected = !!flag;
-    this.setDirty(ChangeType.status);
+    this.setModified();
   }
 
-  /** Show node status (ok, loading, error, noData) using styles and a dummy child node.
-   */
+  /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
   setStatus(
     status: NodeStatusType,
     message?: string,
     details?: string
   ): WunderbaumNode | null {
-    let tree = this.tree;
+    const tree = this.tree;
     let statusNode: WunderbaumNode | null = null;
 
     const _clearStatusNode = () => {
@@ -1649,13 +1705,14 @@ export class WunderbaumNode {
       default:
         util.error("invalid node status " + status);
     }
-    tree.updateViewport();
+    tree.setModified(ChangeType.structure);
     return statusNode;
   }
 
+  /** Rename this node. */
   setTitle(title: string): void {
     this.title = title;
-    this.setDirty(ChangeType.status);
+    this.setModified();
     // this.triggerModify("rename"); // TODO
   }
 
@@ -1684,12 +1741,18 @@ export class WunderbaumNode {
    * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
    * @param {object} [extra]
    */
-  triggerModify(operation: string, extra: any) {
+  triggerModify(operation: string, extra?: any) {
+    if (!this.parent) {
+      return;
+    }
     this.parent.triggerModifyChild(operation, this, extra);
   }
 
-  /** Call fn(node) for all child nodes in hierarchical order (depth-first).<br>
-   * Stop iteration, if fn() returns false. Skip current branch, if fn() returns "skip".<br>
+  /**
+   * Call fn(node) for all child nodes in hierarchical order (depth-first).
+   *
+   * Stop iteration, if fn() returns false. Skip current branch, if fn()
+   * returns "skip".<br>
    * Return false if iteration was stopped.
    *
    * @param {function} callback the callback function.
@@ -1745,7 +1808,8 @@ export class WunderbaumNode {
     return true;
   }
 
-  /** Call fn(node) for all sibling nodes.<br>
+  /**
+   * Call fn(node) for all sibling nodes.<br>
    * Stop iteration, if fn() returns false.<br>
    * Return false if iteration was stopped.
    *