wunderbaum 0.0.1 → 0.0.2

package/src/wb_node.ts

@@ -236,7 +236,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);
@@ -784,7 +784,7 @@ export class WunderbaumNode {
 
       if (wasExpanded) {
         this.expanded = true;
-        this.tree.updateViewport();
+        this.tree.setModified(ChangeType.structure);
       } else {
         this.render(); // Fix expander icon to 'loaded'
       }
@@ -956,7 +956,7 @@ export class WunderbaumNode {
       }, true);
     }
 
-    tree.updateViewport();
+    tree.setModified(ChangeType.structure);
     // TODO: fix selection state
     // TODO: fix active state
   }
@@ -1035,7 +1035,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. */
@@ -1194,7 +1194,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 +1214,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 +1290,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) {
@@ -1342,7 +1343,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.
@@ -1482,7 +1483,7 @@ export class WunderbaumNode {
             }) === false
           ) {
             tree.activeNode = null;
-            prev?.setDirty(ChangeType.status);
+            prev?.setModified();
             return;
           }
         }
@@ -1493,8 +1494,8 @@ export class WunderbaumNode {
 
     if (prev !== this) {
       tree.activeNode = this;
-      prev?.setDirty(ChangeType.status);
-      this.setDirty(ChangeType.status);
+      prev?.setModified();
+      this.setModified();
     }
     if (
       options &&
@@ -1510,16 +1511,9 @@ export class WunderbaumNode {
     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();
-    }
+  setModified(change: ChangeType = ChangeType.status) {
+    util.assert(change === ChangeType.status);
+    this.tree.setModified(ChangeType.row, this);
   }
 
   async setExpanded(flag: boolean = true, options?: any) {
@@ -1537,7 +1531,7 @@ export class WunderbaumNode {
       await this.loadLazy();
     }
     this.expanded = flag;
-    this.setDirty(ChangeType.structure);
+    this.tree.setModified(ChangeType.structure);
   }
 
   setIcon() {
@@ -1548,8 +1542,8 @@ export class WunderbaumNode {
   setFocus(flag: boolean = true, options?: any) {
     const prev = this.tree.focusNode;
     this.tree.focusNode = this;
-    prev?.setDirty(ChangeType.status);
-    this.setDirty(ChangeType.status);
+    prev?.setModified();
+    this.setModified();
   }
 
   setSelected(flag: boolean = true, options?: any) {
@@ -1558,7 +1552,7 @@ export class WunderbaumNode {
       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.
@@ -1649,13 +1643,13 @@ export class WunderbaumNode {
       default:
         util.error("invalid node status " + status);
     }
-    tree.updateViewport();
+    tree.setModified(ChangeType.structure);
     return statusNode;
   }
 
   setTitle(title: string): void {
     this.title = title;
-    this.setDirty(ChangeType.status);
+    this.setModified();
     // this.triggerModify("rename"); // TODO
   }
 

package/src/wb_options.ts

@@ -7,8 +7,10 @@
 import {
   BoolOptionResolver,
   NavigationModeOption,
-  WbEventType,
+  WbNodeEventType,
+  WbTreeEventType,
 } from "./common";
+import { DndOptionsType } from "./wb_ext_dnd";
 
 export interface WbNodeData {
   title: string;
@@ -16,7 +18,7 @@ export interface WbNodeData {
   refKey?: string;
   expanded?: boolean;
   selected?: boolean;
-  checkbox?: boolean | "radio" | BoolOptionResolver;
+  checkbox?: boolean | string;
   children?: Array<WbNodeData>;
   // ...any?: Any;
 }
@@ -62,56 +64,167 @@ export interface WunderbaumOptions {
    *
    * Default: `{}`.
    */
-  types: any; //[key: string]: any;
+  types?: any; //[key: string]: any;
   /**
    * A list of maps that define column headers. If this option is set,
-   * Wunderbaum becomes a tree-grid control instead of a plain tree.
+   * Wunderbaum becomes a treegrid control instead of a plain tree.
    * Column definitions can be passed as tree option, or be part of a `source`
    * response.
    * Default: `[]` meaning this is a plain tree.
    */
   columns?: Array<any>;
   /**
-   *
+   * 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
+   * real data.
    * Default: false.
    */
-  skeleton: false;
+  skeleton?: false;
   /**
-   *
-   * Default: false.
+   * Translation map for some system messages.
    */
-  strings: any; //[key: string] string;
+  strings?: any; //[key: string] string;
   /**
+   * 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
+   * Default: 3 (4 in local debug environment)
    */
-  debugLevel: 3;
-  minExpandLevel: 0;
-  escapeTitles: true;
-  headerHeightPx: 22;
-  autoCollapse: false;
-  // --- Extensions ---
-  dnd: any; // = {};
-  filter: any; // = {};
+  debugLevel: number;
   /**
-   * A list of maps that define column headers. If this option is set,
-   * Wunderbaum becomes a tree grid control instead of a plain tree.
-   * Column definitions can be passed as tree option, or be part of a `source`
-   * response.
+   * Number of levels that are forced to be expanded, and have no expander icon.
+   *  Default: 0
+   */
+  minExpandLevel?: number;
+  // escapeTitles: boolean;
+  /**
+   * Height of the header row div.
+   * Default: 22
+   */
+  headerHeightPx: number;
+  /**
+   * Height of a node row div.
+   * Default: 22
+   */
+  rowHeightPx?: number;
+  /**
+   * Collapse siblings when a node is expanded.
+   * Default: false
+   */
+  autoCollapse?: boolean;
+  /**
+   * Default:  NavigationModeOption.startRow
    */
   navigationMode?: NavigationModeOption;
+  /**
+   * Show/hide header (pass bool or string)
+   */
+  header?: boolean | string | null;
+  /**
+   *
+   */
+  showSpinner?: boolean;
+  /**
+   * Default: true
+   */
+  checkbox?: boolean | "radio" | BoolOptionResolver;
+  /**
+   * Default: 200
+   */
+  updateThrottleWait?: number;
+  // --- KeyNav ---
+  /**
+   * Default: true
+   */
+  quicksearch?: boolean;
+
+  // --- Extensions ---
+  dnd?: DndOptionsType; // = {};
+  filter: any; // = {};
+  grid: any; // = {};
   // --- Events ---
   /**
    * Called after initial data was loaded and tree markup was rendered.
+   * Check `e.error` for status.
    * @category Callback
    */
-  init?: (e: WbEventType) => void;
+  init?: (e: WbTreeEventType) => void;
   /**
-   * Called after data was loaded from local storage.
+   *
+   * @category Callback
+   */
+  update?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  activate?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  deactivate?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  change?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  click?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  discard?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  error?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  enhanceTitle?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * Check `e.flag` for status.
    * @category Callback
    */
-  update?: (e: WbEventType) => void;
+  focus?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  keydown?: (e: WbNodeEventType) => void;
   /**
    * Called after data was loaded from local storage.
+   */
+  load?: (e: WbNodeEventType) => void;
+  /**
+   * @category Callback
+   */
+  modifyChild?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  receive?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  render?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  renderStatusNode?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * Check `e.flag` for status.
    * @category Callback
    */
-  modifyChild?: (e: WbEventType) => void;
+  select?: (e: WbNodeEventType) => void;
 }

package/src/wunderbaum.scss

@@ -177,7 +177,7 @@ div.wunderbaum {
   span.wb-col {
     position: absolute;
     display: inline-block;
-    text-overflow: ellipsis;
+    // text-overflow: ellipsis;
     height: $row-inner-height;
     line-height: $row-inner-height;
     padding: 0 $col-padding-x;
@@ -185,6 +185,25 @@ div.wunderbaum {
     &:last-of-type {
       border-right: none;
     }
+    overflow: visible; // allow resizer to overlap next col
+
+    span.wb-col-title {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    span.wb-col-resizer {
+      position: absolute;
+      top: 0;
+      // left: auto;
+      right: -1px;
+      width: 3px;
+      // float: right;
+      border: none;
+      border-right: 2px solid $border-color;
+      height: 100%;
+      cursor: col-resize;
+    }
   }
 
   span.wb-node {

package/src/wunderbaum.ts

@@ -16,6 +16,7 @@ import { FilterExtension } from "./wb_ext_filter";
 import { KeynavExtension } from "./wb_ext_keynav";
 import { LoggerExtension } from "./wb_ext_logger";
 import { DndExtension } from "./wb_ext_dnd";
+import { GridExtension } from "./wb_ext_grid";
 import { ExtensionsDict, WunderbaumExtension } from "./wb_extension_base";
 
 import {
@@ -40,7 +41,7 @@ import { WunderbaumOptions } from "./wb_options";
 
 // const class_prefix = "wb-";
 // const node_props: string[] = ["title", "key", "refKey"];
-const MAX_CHANGED_NODES = 10;
+// const MAX_CHANGED_NODES = 10;
 
 /**
  * A persistent plain object or array.
@@ -94,6 +95,7 @@ export class Wunderbaum {
   protected changedSince = 0;
   protected changes = new Set<ChangeType>();
   protected changedNodes = new Set<WunderbaumNode>();
+  protected changeRedrawPending = false;
 
   // --- FILTER ---
   public filterMode: FilterModeType = null;
@@ -125,7 +127,7 @@ export class Wunderbaum {
         rowHeightPx: ROW_HEIGHT,
         columns: null,
         types: null,
-        escapeTitles: true,
+        // escapeTitles: true,
         showSpinner: false,
         checkbox: true,
         minExpandLevel: 0,
@@ -185,6 +187,7 @@ export class Wunderbaum {
     this._registerExtension(new EditExtension(this));
     this._registerExtension(new FilterExtension(this));
     this._registerExtension(new DndExtension(this));
+    this._registerExtension(new GridExtension(this));
     this._registerExtension(new LoggerExtension(this));
 
     // --- Evaluate options
@@ -313,10 +316,8 @@ export class Wunderbaum {
         .finally(() => {
           this.element.querySelector("progress.spinner")?.remove();
           this.element.classList.remove("wb-initializing");
-          // this.updateViewport();
         });
     } else {
-      // this.updateViewport();
       readyDeferred.resolve();
     }
 
@@ -328,14 +329,11 @@ export class Wunderbaum {
 
     // --- Bind listeners
     this.scrollContainer.addEventListener("scroll", (e: Event) => {
-      this.updateViewport();
+      this.setModified(ChangeType.vscroll);
     });
 
-    // window.addEventListener("resize", (e: Event) => {
-    //   this.updateViewport();
-    // });
     this.resizeObserver = new ResizeObserver((entries) => {
-      this.updateViewport();
+      this.setModified(ChangeType.vscroll);
       console.log("ResizeObserver: Size changed", entries);
     });
     this.resizeObserver.observe(this.element);
@@ -845,7 +843,7 @@ export class Wunderbaum {
     // public cellNavMode = false;
     // public lastQuicksearchTime = 0;
     // public lastQuicksearchTerm = "";
-    this.updateViewport();
+    this.setModified(ChangeType.structure);
   }
 
   /**
@@ -1157,9 +1155,11 @@ export class Wunderbaum {
   static getEventInfo(event: Event) {
     let target = <Element>event.target,
       cl = target.classList,
-      parentCol = target.closest(".wb-col"),
+      parentCol = target.closest("span.wb-col") as HTMLSpanElement,
       node = Wunderbaum.getNode(target),
+      tree = node ? node.tree : Wunderbaum.getTree(event),
       res = {
+        tree: tree,
         node: node,
         region: NodeRegion.unknown,
         colDef: undefined,
@@ -1189,13 +1189,15 @@ export class Wunderbaum {
       res.colIdx = idx;
     } else {
       // Somewhere near the title
-      console.warn("getEventInfo(): not found", event, res);
+      if (event.type !== "mousemove") {
+        console.warn("getEventInfo(): not found", event, res);
+      }
       return res;
     }
     if (res.colIdx === -1) {
       res.colIdx = 0;
     }
-    res.colDef = node!.tree.columns[res.colIdx];
+    res.colDef = tree?.columns[res.colIdx];
     res.colDef != null ? (res.colId = (<any>res.colDef).id) : 0;
     // this.log("Event", event, res);
     return res;
@@ -1298,6 +1300,7 @@ export class Wunderbaum {
     let start = opts?.startIdx;
     let end = opts?.endIdx;
     const obsoleteViewNodes = this.viewNodes;
+    const newNodesOnly = !!util.getOption(opts, "newNodesOnly");
 
     this.viewNodes = new Set();
     let viewNodes = this.viewNodes;
@@ -1322,9 +1325,10 @@ export class Wunderbaum {
       if (idx < start || idx > end) {
         node._callEvent("discard");
         node.removeMarkup();
-      } else {
-        // if (!node._rowElem || prevIdx != idx) {
+      } else if (!node._rowElem || !newNodesOnly) {
         node.render({ top: top });
+        // }else{
+        //   node.log("ignrored render")
       }
       idx++;
       top += height;
@@ -1352,21 +1356,25 @@ export class Wunderbaum {
     );
 
     for (let i = 0; i < this.columns.length; i++) {
-      let col = this.columns[i];
-      let colElem = <HTMLElement>headerRow.children[i];
+      const col = this.columns[i];
+      const colElem = <HTMLElement>headerRow.children[i];
+
       colElem.style.left = col._ofsPx + "px";
       colElem.style.width = col._widthPx + "px";
-      colElem.textContent = col.title || col.id;
+      // colElem.textContent = col.title || col.id;
+      const title = util.escapeHtml(col.title || col.id);
+      colElem.innerHTML = `<span class="wb-col-title">${title}</span> <span class="wb-col-resizer"></span>`;
+      // colElem.innerHTML = `${title} <span class="wb-col-resizer"></span>`;
     }
   }
 
   /**
+   * Make sure that this node is scrolled into the viewport.
    *
    * @param {boolean | PlainObject} [effects=false] animation options.
    * @param {object} [options=null] {topNode: null, effects: ..., parent: ...}
    *     this node will remain visible in
    *     any case, even if `this` is outside the scroll pane.
-   * Make sure that a node is scrolled into the viewport.
    */
   scrollTo(opts: any) {
     const MARGIN = 1;
@@ -1388,10 +1396,13 @@ export class Wunderbaum {
       // Node is above viewport
       newTop = nodeOfs + MARGIN;
     }
-    this.log("scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop, height);
     if (newTop != null) {
+      this.log(
+        "scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop,
+        height
+      );
       this.scrollContainer.scrollTop = newTop;
-      this.updateViewport();
+      this.setModified(ChangeType.vscroll);
     }
   }
 
@@ -1456,6 +1467,9 @@ export class Wunderbaum {
   setModified(change: ChangeType, options?: any): void;
 
   /** */
+  setModified(change: ChangeType, node: WunderbaumNode, options?: any): void;
+
+  /* */
   setModified(
     change: ChangeType,
     node?: WunderbaumNode | any,
@@ -1464,20 +1478,47 @@ export class Wunderbaum {
     if (!(node instanceof WunderbaumNode)) {
       options = node;
     }
-    if (!this.changedSince) {
-      this.changedSince = Date.now();
-    }
-    this.changes.add(change);
-    if (change === ChangeType.structure) {
-      this.changedNodes.clear();
-    } else if (node && !this.changes.has(ChangeType.structure)) {
-      if (this.changedNodes.size < MAX_CHANGED_NODES) {
-        this.changedNodes.add(node);
-      } else {
-        this.changes.add(ChangeType.structure);
-        this.changedNodes.clear();
-      }
+    if (this._disableUpdate) {
+      return;
     }
+    const immediate = !!util.getOption(options, "immediate");
+
+    switch (change) {
+      case ChangeType.any:
+      case ChangeType.structure:
+      case ChangeType.header:
+        this.changeRedrawPending = true;
+        this.updateViewport(immediate);
+        break;
+      case ChangeType.vscroll:
+        this.updateViewport(immediate);
+        break;
+      case ChangeType.row:
+      case ChangeType.status:
+        // Single nodes are immedialtely updated if already inside the viewport
+        // (otherwise we can ignore)
+        if (node._rowElem) {
+          node.render();
+        }
+        break;
+      default:
+        util.error(`Invalid change type ${change}`);
+    }
+
+    // if (!this.changedSince) {
+    //   this.changedSince = Date.now();
+    // }
+    // this.changes.add(change);
+    // if (change === ChangeType.structure) {
+    //   this.changedNodes.clear();
+    // } else if (node && !this.changes.has(ChangeType.structure)) {
+    //   if (this.changedNodes.size < MAX_CHANGED_NODES) {
+    //     this.changedNodes.add(node);
+    //   } else {
+    //     this.changes.add(ChangeType.structure);
+    //     this.changedNodes.clear();
+    //   }
+    // }
     // this.log("setModified(" + change + ")", node);
   }
 
@@ -1562,13 +1603,16 @@ export class Wunderbaum {
     if (this._disableUpdate) {
       return;
     }
+    const newNodesOnly = !this.changeRedrawPending;
+    this.changeRedrawPending = false;
+
     let height = this.scrollContainer.clientHeight;
-    // We cannot get the height for abolut positioned parent, so look at first col
+    // We cannot get the height for absolut positioned parent, so look at first col
     // let headerHeight = this.headerElement.clientHeight
     // let headerHeight = this.headerElement.children[0].children[0].clientHeight;
     const headerHeight = this.options.headerHeightPx;
-    let wantHeight = this.element.clientHeight - headerHeight;
-    let ofs = this.scrollContainer.scrollTop;
+    const wantHeight = this.element.clientHeight - headerHeight;
+    const ofs = this.scrollContainer.scrollTop;
 
     if (Math.abs(height - wantHeight) > 1.0) {
       // this.log("resize", height, wantHeight);
@@ -1580,6 +1624,7 @@ export class Wunderbaum {
     this.render({
       startIdx: Math.max(0, ofs / ROW_HEIGHT - RENDER_MAX_PREFETCH),
       endIdx: Math.max(0, (ofs + height) / ROW_HEIGHT + RENDER_MAX_PREFETCH),
+      newNodesOnly: newNodesOnly,
     });
     this._callEvent("update");
   }