wunderbaum 0.3.4 → 0.4.0

package/src/wb_options.ts

@@ -10,6 +10,7 @@ import {
   DndOptionsType,
   NavModeEnum,
   NodeTypeDefinitionMap,
+  SelectModeType,
   WbActivateEventType,
   WbChangeEventType,
   WbClickEventType,
@@ -161,10 +162,10 @@ export interface WunderbaumOptions {
    * Default: false.
    */
   checkbox?: boolean | "radio" | BoolOptionResolver;
-  /**
-   * Default: 200
-   */
-  updateThrottleWait?: number;
+  // /**
+  //  * Default: 200
+  //  */
+  // updateThrottleWait?: number;
   /**
    * Default: true
    */
@@ -174,6 +175,12 @@ export interface WunderbaumOptions {
    */
   fixedCol?: boolean;
 
+  // --- Selection ---
+  /**
+   * Default: "multi"
+   */
+  selectMode?: SelectModeType;
+
   // --- KeyNav ---
   /**
    * Default: true

package/src/wunderbaum.scss

@@ -16,7 +16,7 @@ $node-text-color: #56534c;
 $border-color: $node-text-color;
 $bg-highlight-color: #26a0da;
 $header-color: #dedede;
-$background-color: white;
+$background-color: #ffffff;
 $alternate-row-color: #f7f7f7; // #fcfcfc;
 $alternate-row-color-hover: #f3f3f3; //#f7fcfe;
 $focus-border-color: #275dc5;
@@ -48,15 +48,15 @@ $filter-submatch-color: #868581;
 
 $row-outer-height: 22px;
 $row-inner-height: $row-outer-height - 2; // outer height minus border size
-$row-padding-y: ($row-outer-height - $row-inner-height) / 2;
+$row-padding-y: calc(($row-outer-height - $row-inner-height) / 2);
 $col-padding-x: 2px; // on each side within span.wb-col
 
 $icon-outer-height: $row-inner-height;
 $icon-outer-width: 20px;
 $icon-height: 16px;
 $icon-width: 16px;
-$icon-padding-y: ($icon-outer-height - $icon-height) / 2;
-$icon-padding-x: ($icon-outer-width - $icon-width) / 2;
+$icon-padding-y: calc(($icon-outer-height - $icon-height) / 2);
+$icon-padding-x: calc(($icon-outer-width - $icon-width) / 2);
 
 $header-height: $row-outer-height;
 
@@ -74,6 +74,7 @@ $level-rainbow: rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254),
 // --- Define CSS variables with calculated default values
 
 :root {
+  // TODO: do we need to use 'meta.inspect' in case a font name contains spaces?
   // --wb-font-stack: #{meta.inspect($font-stack)};
   --wb-font-stack: #{$font-stack};
 
@@ -197,7 +198,7 @@ div.wunderbaum {
 
   /* Fixed column must be opaque, i.e. have the bg color set. */
   &.wb-fixed-col {
-    /* Sticky firdt column (header and nodes) */
+    // Sticky first column (header and nodes)
     span.wb-col:first-of-type {
       position: sticky;
       left: 0;
@@ -327,8 +328,8 @@ div.wunderbaum {
           // $hover-color 3.88px,
           transparent,
           transparent 3.88px,
-          $grid-color 3.88px,
-          $grid-color 7.78px
+          var(--wb-grid-color) 3.88px,
+          var(--wb-grid-color) 7.78px
         );
         animation: wb-busy-animation 2s linear infinite;
       }
@@ -386,8 +387,8 @@ div.wunderbaum {
     overflow: hidden;
     height: var(--wb-row-inner-height);
     line-height: var(--wb-row-inner-height);
-    padding: 0 $col-padding-x;
-    border-right: 1px solid $grid-color;
+    padding: 0 val(--wb-col-padding-x);
+    border-right: 1px solid var(--wb-grid-color);
     white-space: nowrap;
 
     &:last-of-type {
@@ -481,7 +482,7 @@ div.wunderbaum {
       }
 
       span.wb-col {
-        border-right: 1px solid $grid-color;
+        border-right: 1px solid var(--wb-grid-color);
 
         input.wb-input-edit,
         > input[type="color"],
@@ -617,7 +618,7 @@ div.wunderbaum {
           z-index: 1000;
           content: url(../docs/assets/drop_marker_16x32.png);
           left: 0; //-$icon-outer-width;
-          top: ($row-outer-height - 16) / 2;
+          top: calc(($row-outer-height - --wb-icon-height) / 2);
         }
       }
     }
@@ -637,11 +638,15 @@ div.wunderbaum {
   div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
     content: url(../docs/assets/drop_marker_insert_16x64.png);
     left: 0; // $icon-outer-width * 1.5;
-    top: ($row-outer-height - 16) / 2 - $row-outer-height / 2;
+    top: calc(
+      ($row-outer-height - --wb-icon-height) / 2 - $row-outer-height / 2
+    );
   }
 
   div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
-    top: ($row-outer-height - 16) / 2 + $row-outer-height / 2;
+    top: calc(
+      ($row-outer-height - --wb-icon-height) / 2 + $row-outer-height / 2
+    );
   }
 
   /* --- SPECIAL EFFECTS --- */

package/src/wunderbaum.ts

@@ -11,7 +11,7 @@
  * @date @DATE
  */
 
-import "./wunderbaum.scss";
+// import "./wunderbaum.scss";
 import * as util from "./util";
 import { FilterExtension } from "./wb_ext_filter";
 import { KeynavExtension } from "./wb_ext_keynav";
@@ -32,7 +32,7 @@ import {
   NodeTypeDefinitionMap,
   ScrollToOptions,
   SetActiveOptions,
-  SetModifiedOptions,
+  UpdateOptions,
   SetStatusOptions,
   NodeRegion,
   WbEventInfo,
@@ -134,6 +134,10 @@ export class Wunderbaum {
   /** Expose some useful methods of the util.ts module as `tree._util`. */
   public _util = util;
 
+  // --- SELECT ---
+  // /** @internal */
+  // public selectRangeAnchor: WunderbaumNode | null = null;
+
   // --- FILTER ---
   public filterMode: FilterModeType = null;
 
@@ -169,9 +173,10 @@ export class Wunderbaum {
         checkbox: false,
         minExpandLevel: 0,
         emptyChildListExpandable: false,
-        updateThrottleWait: 200,
+        // updateThrottleWait: 200,
         skeleton: false,
         connectTopBreadcrumb: null, // HTMLElement that receives the top nodes breadcrumb
+        selectMode: "multi", // SelectModeType
         // --- KeyNav ---
         navigationModeOption: null, // NavModeEnum.startRow,
         quicksearch: true,
@@ -363,24 +368,30 @@ export class Wunderbaum {
 
     // Async mode is sometimes required, because this.element.clientWidth
     // has a wrong value at start???
-    this.setModified(ChangeType.any);
+    this.update(ChangeType.any);
 
     // --- Bind listeners
     this.element.addEventListener("scroll", (e: Event) => {
       // this.log(`scroll, scrollTop:${e.target.scrollTop}`, e);
-      this.setModified(ChangeType.scroll);
+      this.update(ChangeType.scroll);
     });
 
     this.resizeObserver = new ResizeObserver((entries) => {
       // this.log("ResizeObserver: Size changed", entries);
-      this.setModified(ChangeType.resize);
+      this.update(ChangeType.resize);
     });
     this.resizeObserver.observe(this.element);
 
     util.onEvent(this.nodeListElement, "click", "div.wb-row", (e) => {
       const info = Wunderbaum.getEventInfo(e);
       const node = info.node;
-      // this.log("click", info, e);
+      const mouseEvent = e as MouseEvent;
+
+      // this.log("click", info);
+
+      // if (this._selectRange(info) === false) {
+      //   return;
+      // }
 
       if (
         this._callEvent("click", { event: e, node: node, info: info }) === false
@@ -389,6 +400,10 @@ export class Wunderbaum {
         return false;
       }
       if (node) {
+        if (mouseEvent.ctrlKey) {
+          node.toggleSelected();
+          return;
+        }
         // Edit title if 'clickActive' is triggered:
         const trigger = this.getOption("edit.trigger");
         const slowClickDelay = this.getOption("edit.slowClickDelay");
@@ -410,7 +425,7 @@ export class Wunderbaum {
         if (info.region === NodeRegion.expander) {
           node.setExpanded(!node.isExpanded());
         } else if (info.region === NodeRegion.checkbox) {
-          node.setSelected(!node.isSelected());
+          node.toggleSelected();
         }
       }
       this.lastClickTime = Date.now();
@@ -921,7 +936,7 @@ export class Wunderbaum {
     // public cellNavMode = false;
     // public lastQuicksearchTime = 0;
     // public lastQuicksearchTerm = "";
-    this.setModified(ChangeType.structure);
+    this.update(ChangeType.structure);
   }
 
   /**
@@ -984,7 +999,7 @@ export class Wunderbaum {
     (this.options as any)[name] = value;
     switch (name) {
       case "checkbox":
-        this.setModified(ChangeType.any);
+        this.update(ChangeType.any);
         break;
       case "enabled":
         this.setEnabled(!!value);
@@ -1010,8 +1025,15 @@ export class Wunderbaum {
     return this.isGrid() ? header !== false : !!header;
   }
 
-  /** Run code, but defer rendering of viewport until done. */
-  runWithoutUpdate(func: () => any, hint = null): void {
+  /** Run code, but defer rendering of viewport until done.
+   *
+   * ```
+   * tree.runWithDeferredUpdate(() => {
+   *   return someFuncThatWouldUpdateManyNodes();
+   * });
+   * ```
+   */
+  runWithDeferredUpdate(func: () => any, hint = null): void {
     try {
       this.enableUpdate(false);
       const res = func();
@@ -1022,30 +1044,72 @@ export class Wunderbaum {
     }
   }
 
-  /** Recursively expand all expandable nodes (triggers lazy load id needed). */
+  /** Recursively expand all expandable nodes (triggers lazy load if needed). */
   async expandAll(flag: boolean = true, options?: ExpandAllOptions) {
     await this.root.expandAll(flag, options);
   }
 
   /** Recursively select all nodes. */
   selectAll(flag: boolean = true) {
-    try {
-      this.enableUpdate(false);
-      this.visit((node) => {
-        node.setSelected(flag);
-      });
-    } finally {
-      this.enableUpdate(true);
-    }
+    return this.root.setSelected(flag, { propagateDown: true });
+  }
+
+  /** Toggle select all nodes. */
+  toggleSelect() {
+    this.selectAll(this.root._anySelectable());
+  }
+
+  /**
+   * Return an array of selected nodes.
+   * @param stopOnParents only return the topmost selected node (useful with selectMode 'hier')
+   */
+  getSelectedNodes(stopOnParents: boolean = false): WunderbaumNode[] {
+    return this.root.getSelectedNodes(stopOnParents);
+  }
+
+  /*
+   * Return an array of selected nodes.
+   */
+  protected _selectRange(eventInfo: WbEventInfo): false | void {
+    this.logDebug("_selectRange", eventInfo);
+    util.error("Not yet implemented.");
+    // const mode = this.options.selectMode!;
+    // if (mode !== "multi") {
+    //   this.logDebug(`Range selection only available for selectMode 'multi'`);
+    //   return;
+    // }
+
+    // if (eventInfo.canonicalName === "Meta+click") {
+    //   eventInfo.node?.toggleSelected();
+    //   return false; // don't
+    // } else if (eventInfo.canonicalName === "Shift+click") {
+    //   let from = this.activeNode;
+    //   let to = eventInfo.node;
+    //   if (!from || !to || from === to) {
+    //     return;
+    //   }
+    //   this.runWithDeferredUpdate(() => {
+    //     this.visitRows(
+    //       (node) => {
+    //         node.setSelected();
+    //       },
+    //       {
+    //         includeHidden: true,
+    //         includeSelf: false,
+    //         start: from,
+    //         reverse: from!._rowIdx! > to!._rowIdx!,
+    //       }
+    //     );
+    //   });
+    //   return false;
+    // }
   }
 
-  /** Return the number of nodes in the data model.*/
+  /** Return the number of nodes in the data model.
+   * @param visible if true, nodes that are hidden due to collapsed parents are ignored.
+   */
   count(visible = false): number {
-    if (visible) {
-      return this.treeRowCount;
-      // return this.viewNodes.size;
-    }
-    return this.keyMap.size;
+    return visible ? this.treeRowCount : this.keyMap.size;
   }
 
   /** @internal sanity check. */
@@ -1152,7 +1216,7 @@ export class Wunderbaum {
         break;
       case "first":
         // First visible node
-        this.visit(function (n) {
+        this.visit((n) => {
           if (n.isVisible()) {
             res = n;
             return false;
@@ -1160,7 +1224,7 @@ export class Wunderbaum {
         });
         break;
       case "last":
-        this.visit(function (n) {
+        this.visit((n) => {
           // last visible node
           if (n.isVisible()) {
             res = n;
@@ -1306,6 +1370,8 @@ export class Wunderbaum {
       node = Wunderbaum.getNode(target),
       tree = node ? node.tree : Wunderbaum.getTree(event),
       res: WbEventInfo = {
+        event: <MouseEvent>event,
+        canonicalName: util.eventToString(event),
         tree: tree!,
         node: node,
         region: NodeRegion.unknown,
@@ -1490,7 +1556,7 @@ export class Wunderbaum {
         // Make sure the topNode is always visible
         this.scrollTo(topNode);
       }
-      // this.setModified(ChangeType.scroll);
+      // this.update(ChangeType.scroll);
     }
   }
 
@@ -1521,7 +1587,7 @@ export class Wunderbaum {
       `scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`
     );
     this.element.scrollLeft = newLeft;
-    // this.setModified(ChangeType.scroll);
+    // this.update(ChangeType.scroll);
   }
   /**
    * Set column #colIdx to 'active'.
@@ -1544,7 +1610,7 @@ export class Wunderbaum {
       }
     }
 
-    this.activeNode?.setModified(ChangeType.status);
+    this.activeNode?.update(ChangeType.status);
 
     // Update `wb-active` class for all cell spans
     for (let rowDiv of this.nodeListElement.children) {
@@ -1573,40 +1639,49 @@ export class Wunderbaum {
     }
   }
 
+  /**
+   * @deprecated since v0.3.6: use `update()` instead.
+   */
+  setModified(change: ChangeType, ...args: any[]): void {
+    this.logWarn("setModified() is deprecated: use update() instead.");
+    // @ts-ignore
+    // (!) TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.
+    return this.update.call(this, change, ...args);
+  }
   /**
    * Schedule an update request to reflect a tree change.
    * The render operation is async and debounced unless the `immediate` option
    * is set.
-   * Use {@link WunderbaumNode.setModified()} if only a single node has changed,
-   * or {@link WunderbaumNode.render()}) to pass special options.
+   * Use {@link WunderbaumNode.update()} if only a single node has changed,
+   * or {@link WunderbaumNode._render()}) to pass special options.
    */
-  setModified(change: ChangeType, options?: SetModifiedOptions): void;
+  update(change: ChangeType, options?: UpdateOptions): void;
 
   /**
    * Update a row to reflect a single node's modification.
    *
-   * @see {@link WunderbaumNode.setModified()}, {@link WunderbaumNode.render()}
+   * @see {@link WunderbaumNode.update()}, {@link WunderbaumNode._render()}
    */
-  setModified(
+  update(
     change: ChangeType,
     node: WunderbaumNode,
-    options?: SetModifiedOptions
+    options?: UpdateOptions
   ): void;
 
-  setModified(
+  update(
     change: ChangeType,
     node?: WunderbaumNode | any,
-    options?: SetModifiedOptions
+    options?: UpdateOptions
   ): void {
     if (this._disableUpdateCount) {
       // Assuming that we redraw all when enableUpdate() is re-enabled.
       // this.log(
-      //   `IGNORED setModified(${change}) node=${node} (disable level ${this._disableUpdateCount})`
+      //   `IGNORED update(${change}) node=${node} (disable level ${this._disableUpdateCount})`
       // );
       this._disableUpdateIgnoreCount++;
       return;
     }
-    // this.log(`setModified(${change}) node=${node}`);
+    // this.log(`update(${change}) node=${node}`);
     if (!(node instanceof WunderbaumNode)) {
       options = node;
       node = null;
@@ -1641,7 +1716,7 @@ export class Wunderbaum {
         // Single nodes are immediately updated if already inside the viewport
         // (otherwise we can ignore)
         if (node._rowElem) {
-          node.render({ change: change });
+          node._render({ change: change });
         }
         break;
       default:
@@ -1704,7 +1779,7 @@ export class Wunderbaum {
       this.setColumn(0);
     }
     this.element.classList.toggle("wb-cell-mode", flag);
-    this.activeNode?.setModified(ChangeType.status);
+    this.activeNode?.update(ChangeType.status);
   }
 
   /** Set the tree's navigation mode option. */
@@ -1886,7 +1961,7 @@ export class Wunderbaum {
     // if (modified) {
     //   this._renderHeaderMarkup();
     //   if (options.renderMarkup) {
-    //     this.setModified(ChangeType.header, { removeMarkup: true });
+    //     this.update(ChangeType.header, { removeMarkup: true });
     //   } else if (options.updateRows) {
     //     this._updateRows();
     //   }
@@ -1916,7 +1991,13 @@ export class Wunderbaum {
       colElem.style.left = col._ofsPx + "px";
       colElem.style.width = col._widthPx + "px";
       // Add classes from `columns` definition to `<div.wb-col>` cells
-      col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
+      if (typeof col.headerClasses === "string") {
+        col.headerClasses
+          ? colElem.classList.add(...col.headerClasses.split(" "))
+          : 0;
+      } else {
+        col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
+      }
 
       const title = util.escapeHtml(col.title || col.id);
       let tooltip = "";
@@ -1936,11 +2017,11 @@ export class Wunderbaum {
   }
 
   /**
-   * Render pending changes that were scheduled using {@link WunderbaumNode.setModified} if any.
+   * Render pending changes that were scheduled using {@link WunderbaumNode.update} if any.
    *
    * This is hardly ever neccessary, since we normally either
-   * - call `setModified(ChangeType.TYPE)` (async, throttled), or
-   * - call `setModified(ChangeType.TYPE, {immediate: true})` (synchronous)
+   * - call `update(ChangeType.TYPE)` (async, throttled), or
+   * - call `update(ChangeType.TYPE, {immediate: true})` (synchronous)
    *
    * `updatePendingModifications()` will only force immediate execution of
    * pending async changes if any.
@@ -1956,7 +2037,7 @@ export class Wunderbaum {
    * It calls `updateColumns()` and `_updateRows()`.
    *
    * This protected method should not be called directly but via
-   * {@link WunderbaumNode.setModified}`, {@link Wunderbaum.setModified},
+   * {@link WunderbaumNode.update}`, {@link Wunderbaum.update},
    * or {@link Wunderbaum.updatePendingModifications}.
    * @internal
    */
@@ -2126,7 +2207,7 @@ export class Wunderbaum {
         if (rowDiv) {
           rowDiv.style.top = idx * ROW_HEIGHT + "px";
         }
-        node.render({ top: top, after: prevElem });
+        node._render({ top: top, after: prevElem });
         // node.log("render", top, prevElem, "=>", node._rowElem);
         prevElem = node._rowElem!;
       }
@@ -2227,7 +2308,7 @@ export class Wunderbaum {
           node.children.length &&
           (includeHidden || node.expanded)
         ) {
-          res = node.visit(function (n: WunderbaumNode) {
+          res = node.visit((n: WunderbaumNode) => {
             if (n === stopNode) {
               return false;
             }
@@ -2366,7 +2447,7 @@ export class Wunderbaum {
           `enableUpdate(): active again. Re-painting to catch up with ${this._disableUpdateIgnoreCount} ignored update requests...`
         );
         this._disableUpdateIgnoreCount = 0;
-        this.setModified(ChangeType.any, { immediate: true });
+        this.update(ChangeType.any, { immediate: true });
       }
     } else {
       this._disableUpdateCount++;