wunderbaum 0.0.9 → 0.1.1

package/src/wb_node.ts

@@ -11,17 +11,20 @@ import { Wunderbaum } from "./wunderbaum";
 import {
   AddChildrenOptions,
   AddNodeType,
+  ApplyCommandOptions,
   ApplyCommandType,
   ChangeType,
-  ColumnEventInfos,
+  ColumnEventInfoMap,
   ExpandAllOptions,
   MakeVisibleOptions,
   MatcherCallback,
+  NavigateOptions,
   NodeAnyCallback,
   NodeStatusType,
   NodeStringCallback,
   NodeVisitCallback,
   NodeVisitResponse,
+  RenderOptions,
   ScrollIntoViewOptions,
   SetActiveOptions,
   SetExpandedOptions,
@@ -356,8 +359,8 @@ export class WunderbaumNode {
    *
    * @see {@link Wunderbaum.applyCommand}
    */
-  applyCommand(cmd: ApplyCommandType, opts: any): any {
-    return this.tree.applyCommand(cmd, this, opts);
+  applyCommand(cmd: ApplyCommandType, options: ApplyCommandOptions): any {
+    return this.tree.applyCommand(cmd, this, options);
   }
 
   /**
@@ -580,7 +583,7 @@ export class WunderbaumNode {
   }
 
   /**
-   * Return multiline string representation of a node/subnode hierarchy.
+   * Return a multiline string representation of a node/subnode hierarchy.
    * Mostly useful for debugging.
    *
    * Example:
@@ -592,7 +595,6 @@ export class WunderbaumNode {
    * Books
    *  ├─ Art of War
    *  ╰─ Don Quixote
-   * ...
    * ```
    * @see {@link WunderbaumNode.format_iter}
    */
@@ -736,11 +738,18 @@ export class WunderbaumNode {
     return this.tree.activeNode === this;
   }
 
-  /** Return true if this node is a *direct* child of `other`.
+  /** Return true if this node is a direct or indirect parent of `other`.
+   * (See also [[isParentOf]].)
+   */
+  isAncestorOf(other: WunderbaumNode) {
+    return other && other.isDescendantOf(this);
+  }
+
+  /** Return true if this node is a **direct** subnode of `other`.
    * (See also [[isDescendantOf]].)
    */
   isChildOf(other: WunderbaumNode) {
-    return this.parent && this.parent === other;
+    return other && this.parent === other;
   }
 
   /** Return true if this node's title spans all columns, i.e. the node has no
@@ -750,7 +759,7 @@ export class WunderbaumNode {
     return !!this.getOption("colspan");
   }
 
-  /** Return true if this node is a direct or indirect sub node of `other`.
+  /** Return true if this node is a direct or indirect subnode of `other`.
    * (See also [[isChildOf]].)
    */
   isDescendantOf(other: WunderbaumNode) {
@@ -763,7 +772,7 @@ export class WunderbaumNode {
         return true;
       }
       if (p === p.parent) {
-        util.error("Recursive parent link: " + p);
+        util.error(`Recursive parent link: ${p}`);
       }
       p = p.parent;
     }
@@ -821,6 +830,13 @@ export class WunderbaumNode {
     return this.statusNodeType === "paging";
   }
 
+  /** Return true if this node is a **direct** parent of `other`.
+   * (See also [[isAncestorOf]].)
+   */
+  isParentOf(other: WunderbaumNode) {
+    return other && other.parent === this;
+  }
+
   /** (experimental) Return true if this node is partially loaded. */
   isPartload(): boolean {
     return !!this._partload;
@@ -1257,7 +1273,7 @@ export class WunderbaumNode {
    *   e.g. `ArrowLeft` = 'left'.
    * @param options
    */
-  async navigate(where: string, options?: any) {
+  async navigate(where: string, options?: NavigateOptions) {
     // Allow to pass 'ArrowLeft' instead of 'left'
     where = KEY_TO_ACTION_DICT[where] || where;
 
@@ -1334,8 +1350,8 @@ export class WunderbaumNode {
   }
 
   protected _getRenderInfo(): any {
-    const allColInfosById: ColumnEventInfos = {};
-    const renderColInfosById: ColumnEventInfos = {};
+    const allColInfosById: ColumnEventInfoMap = {};
+    const renderColInfosById: ColumnEventInfoMap = {};
     const isColspan = this.isColspan();
 
     const colElems = this._rowElem
@@ -1421,7 +1437,7 @@ export class WunderbaumNode {
    * Create a whole new `<div class="wb-row">` element.
    * @see {@link WunderbaumNode.render}
    */
-  protected _render_markup(opts: any) {
+  protected _render_markup(opts: RenderOptions) {
     const tree = this.tree;
     const treeOptions = tree.options;
     const checkbox = this.getOption("checkbox") !== false;
@@ -1556,13 +1572,14 @@ export class WunderbaumNode {
    *
    * @see {@link WunderbaumNode.render}
    */
-  protected _render_data(opts: any) {
+  protected _render_data(opts: RenderOptions) {
     util.assert(this._rowElem);
 
     const tree = this.tree;
     const treeOptions = tree.options;
     const rowDiv = this._rowElem!;
     const isNew = !!opts.isNew; // Called by _render_markup()?
+    const preventScroll = !!opts.preventScroll;
     const columns = tree.columns;
     const isColspan = this.isColspan();
 
@@ -1572,10 +1589,16 @@ export class WunderbaumNode {
       "span.wb-title"
     ) as HTMLSpanElement;
 
+    const scrollTop = tree.element.scrollTop;
     if (this.titleWithHighlight) {
       titleSpan.innerHTML = this.titleWithHighlight;
     } else {
-      titleSpan.textContent = this.title;
+      titleSpan.textContent = this.title; // TODO: this triggers scroll events
+    }
+    // NOTE: At least on Safari, this render call triggers a scroll event
+    // probably when a focused input is replaced.
+    if (preventScroll) {
+      tree.element.scrollTop = scrollTop;
     }
 
     // Set the width of the title span, so overflow ellipsis work
@@ -1602,6 +1625,7 @@ export class WunderbaumNode {
       this._callEvent("renderStatusNode", {
         isNew: isNew,
         nodeElem: nodeElem,
+        isColspan: isColspan,
       });
     } else if (this.parent) {
       // Skip root node
@@ -1609,9 +1633,8 @@ export class WunderbaumNode {
 
       this._callEvent("render", {
         isNew: isNew,
-        isColspan: isColspan,
-        // isDataChange: true,
         nodeElem: nodeElem,
+        isColspan: isColspan,
         allColInfosById: renderInfo.allColInfosById,
         renderColInfosById: renderInfo.renderColInfosById,
       });
@@ -1622,7 +1645,7 @@ export class WunderbaumNode {
    * Update row classes to reflect active, focuses, etc.
    * @see {@link WunderbaumNode.render}
    */
-  protected _render_status(opts: any) {
+  protected _render_status(opts: RenderOptions) {
     // this.log("_render_status", opts);
     const tree = this.tree;
     const treeOptions = tree.options;
@@ -1700,6 +1723,19 @@ export class WunderbaumNode {
         this._createIcon(nodeElem, iconSpan, !expanderSpan);
       }
     }
+    // Adjust column width
+    if (opts.resizeCols !== false && !this.isColspan()) {
+      const colElems = rowDiv.querySelectorAll("span.wb-col");
+      let idx = 0;
+      let ofs = 0;
+      for (let colDef of this.tree.columns) {
+        const colElem = colElems[idx] as HTMLSpanElement;
+        colElem.style.left = `${ofs}px`;
+        colElem.style.width = `${colDef._widthPx}px`;
+        idx++;
+        ofs += colDef._widthPx!;
+      }
+    }
   }
 
   /**
@@ -1716,11 +1752,11 @@ export class WunderbaumNode {
    * Calling `setModified` instead may be a better alternative.
    * @see {@link WunderbaumNode.setModified}
    */
-  render(options?: any) {
+  render(options?: RenderOptions) {
     // this.log("render", options);
     const opts = Object.assign({ change: ChangeType.data }, options);
     if (!this._rowElem) {
-      opts.change = "row";
+      opts.change = ChangeType.row;
     }
     switch (opts.change) {
       case "status":
@@ -1882,11 +1918,11 @@ export class WunderbaumNode {
           if (
             prev?._callEvent("deactivate", {
               nextNode: this,
-              orgEvent: orgEvent,
+              event: orgEvent,
             }) === false ||
             this._callEvent("beforeActivate", {
               prevNode: prev,
-              orgEvent: orgEvent,
+              event: orgEvent,
             }) === false
           ) {
             return;
@@ -1895,7 +1931,7 @@ export class WunderbaumNode {
           prev?.setModified(ChangeType.status);
         }
       } else if (prev === this || retrigger) {
-        this._callEvent("deactivate", { nextNode: null, orgEvent: orgEvent });
+        this._callEvent("deactivate", { nextNode: null, event: orgEvent });
       }
     }
 
@@ -1917,7 +1953,7 @@ export class WunderbaumNode {
       tree.setColumn(options.colIdx);
     }
     if (flag && !noEvents) {
-      this._callEvent("activate", { prevNode: prev, orgEvent: orgEvent });
+      this._callEvent("activate", { prevNode: prev, event: orgEvent });
     }
     return this.makeVisible();
   }

package/src/wb_options.ts

@@ -8,9 +8,18 @@ import {
   BoolOptionResolver,
   ColumnDefinitionList,
   DndOptionsType,
-  NavigationOptions,
-  NodeTypeDefinitions,
+  NavModeEnum,
+  NodeTypeDefinitionMap,
+  WbActivateEventType,
+  WbChangeEventType,
+  WbClickEventType,
+  WbDeactivateEventType,
+  WbEnhanceTitleEventType,
+  WbErrorEventType,
+  WbInitEventType,
+  WbKeydownEventType,
   WbNodeEventType,
+  WbReceiveEventType,
   WbRenderEventType,
   WbTreeEventType,
 } from "./types";
@@ -22,6 +31,7 @@ export interface WbNodeData {
   expanded?: boolean;
   selected?: boolean;
   checkbox?: boolean | string;
+  colspan?: boolean;
   children?: Array<WbNodeData>;
   // ...any?: Any;
 }
@@ -82,7 +92,7 @@ export interface WunderbaumOptions {
    *
    * Default: `{}`.
    */
-  types?: NodeTypeDefinitions; // { [key: string]: NodeTypeDefinition };
+  types?: NodeTypeDefinitionMap; // { [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.
@@ -135,9 +145,9 @@ export interface WunderbaumOptions {
    */
   connectTopBreadcrumb?: HTMLElement;
   /**
-   * Default:  NavigationOptions.startRow
+   * Default:  NavModeEnum.startRow
    */
-  navigationModeOption?: NavigationOptions;
+  navigationModeOption?: NavModeEnum;
   /**
    * Show/hide header (default: null)
    * null: assume false for plain tree and true for grids.
@@ -187,32 +197,36 @@ export interface WunderbaumOptions {
    *
    * @category Callback
    */
-  activate?: (e: WbNodeEventType) => void;
+  activate?: (e: WbActivateEventType) => void;
   /**
    *
+   * Return `false` to prevent default handling, e.g. activating the node.
    * @category Callback
    */
-  change?: (e: WbNodeEventType) => void;
+  beforeActivate?: (e: WbActivateEventType) => void;
   /**
    *
-   * Return `false` to prevent default handling, e.g. activating the node.
    * @category Callback
    */
-  click?: (e: WbTreeEventType) => void;
+  change?: (e: WbChangeEventType) => void;
   /**
    *
    * Return `false` to prevent default handling, e.g. activating the node.
    * @category Callback
    */
-  beforeActivate?: (e: WbNodeEventType) => void;
+  click?: (e: WbClickEventType) => void;
   /**
+   *
+   * @category Callback
+   */
+  dblclick?: (e: WbClickEventType) => void;
   /**
    *
    * Return `false` to prevent default handling, e.g. deactivating the node
    * and activating the next.
    * @category Callback
    */
-  deactivate?: (e: WbNodeEventType) => void;
+  deactivate?: (e: WbDeactivateEventType) => void;
   /**
    *
    * @category Callback
@@ -222,12 +236,12 @@ export interface WunderbaumOptions {
    *
    * @category Callback
    */
-  enhanceTitle?: (e: WbNodeEventType) => void;
+  enhanceTitle?: (e: WbEnhanceTitleEventType) => void;
   /**
    *
    * @category Callback
    */
-  error?: (e: WbTreeEventType) => void;
+  error?: (e: WbErrorEventType) => void;
   /**
    *
    * Check `e.flag` for status.
@@ -241,12 +255,12 @@ export interface WunderbaumOptions {
    * Check `e.error` for status.
    * @category Callback
    */
-  init?: (e: WbTreeEventType) => void;
+  init?: (e: WbInitEventType) => void;
   /**
    *
    * @category Callback
    */
-  keydown?: (e: WbNodeEventType) => void;
+  keydown?: (e: WbKeydownEventType) => void;
   /**
    * Fires when a node that was marked 'lazy', is expanded for the first time.
    * Typically we return an endpoint URL or the Promise of a fetch request that
@@ -271,7 +285,7 @@ export interface WunderbaumOptions {
    * external response to native Wunderbaum syntax.
    * @category Callback
    */
-  receive?: (e: WbNodeEventType) => void;
+  receive?: (e: WbReceiveEventType) => void;
   /**
    * Fires when a node is about to be displayed.
    * The default HTML markup is already created, but not yet added to the DOM.
@@ -285,7 +299,7 @@ export interface WunderbaumOptions {
    *
    * @category Callback
    */
-  renderStatusNode?: (e: WbNodeEventType) => void;
+  renderStatusNode?: (e: WbRenderEventType) => void;
   /**
    *
    * Check `e.flag` for status.

package/src/wunderbaum.scss

@@ -27,7 +27,7 @@ $hover-color: adjust-color($bg-highlight-color, $lightness: 48%); // #f7f7f7;
 $hover-border-color: $hover-color;
 $grid-color: #dedede;
 $active-color: #e5f3fb;
-$active-cell-color: $bg-highlight-color;
+$active-cell-color: adjust-color($bg-highlight-color, $lightness: 20%);
 $active-border-color: #70c0e7;
 $active-hover-color: #dceff8;
 $active-hover-border-color: $bg-highlight-color;
@@ -77,6 +77,7 @@ div.wunderbaum {
   // TODO:auto would be better, but may cause unwanted effects when auto-resizing?
   // overflow-y: auto;
   overflow-y: scroll;
+  // scroll-behavior: smooth;
 
   // Focus border is generated by the browsers per default:
   &:focus,
@@ -90,10 +91,9 @@ div.wunderbaum {
     pointer-events: none;
   }
 
-  div.wb-scroll-container {
+  div.wb-list-container {
     position: relative;
     // overflow: auto;
-    // scroll-behavior: smooth;
     min-height: 4px;
     // height: calc(100% - #{$header-height});  // didn't work. Using JS instead
   }
@@ -107,35 +107,62 @@ div.wunderbaum {
   }
 
   div.wb-header,
-  div.wb-scroll-container {
+  div.wb-list-container {
     overflow: unset;
   }
 
   // }
+  // --- Header and node list ---
+  div.wb-row {
+    position: absolute;
+    width: 100%;
+    height: $row-outer-height;
+    line-height: $row-outer-height;
+    border: 1px solid transparent;
+  }
 
-  /* Fixed column must be opaque, i.e. have the bg color set.*/
+  /* Fixed column must be opaque, i.e. have the bg color set. */
   &.wb-fixed-col {
-    div.wb-header {
-      span.wb-col:first-of-type {
-        background-color: $header-color;
-      }
-    }
-
+    /* Sticky firdt column (header and nodes) */
     span.wb-col:first-of-type {
       position: sticky;
       left: 0;
       z-index: 1;
       background-color: $background-color;
     }
-  }
 
-  // --- Header and node list ---
-  div.wb-row {
-    position: absolute;
-    width: 100%;
-    height: $row-outer-height;
-    line-height: $row-outer-height;
-    border: 1px solid transparent;
+    div.wb-header {
+      span.wb-col:first-of-type {
+        background-color: $header-color;
+      }
+    }
+    div.wb-node-list div.wb-row {
+      &.wb-active span.wb-col:first-of-type,
+      &.wb-selected span.wb-col:first-of-type {
+        background-color: $active-color;
+      }
+      &.wb-active:hover span.wb-col:first-of-type,
+      &.wb-selected:hover span.wb-col:first-of-type {
+        background-color: $active-hover-color;
+      }
+      &:hover span.wb-col:first-of-type {
+        background-color: $hover-color;
+      }
+    }
+
+    &:not(:focus-within),
+    &:not(:focus) {
+      div.wb-node-list div.wb-row {
+        &.wb-active span.wb-col:first-of-type,
+        &.wb-selected span.wb-col:first-of-type {
+          background-color: grayscale($active-color);
+          border-color: grayscale($active-border-color);
+          &:hover span.wb-col:first-of-type {
+            background-color: grayscale($active-hover-color);
+          }
+        }
+      }
+    }
   }
 
   // --- Node List Only ---
@@ -349,6 +376,7 @@ div.wunderbaum {
   }
 
   /* --- GRID --- */
+
   &.wb-grid {
     div.wb-header {
       div.wb-row {
@@ -417,6 +445,16 @@ div.wunderbaum {
 
     &.wb-cell-mode {
       div.wb-row:not(.wb-colspan) {
+        &.wb-active {
+          span.wb-col.wb-active {
+            background-color: grayscale($active-cell-color);
+          }
+        }
+      }
+    }
+    &.wb-cell-mode:focus-within,
+    &.wb-cell-mode:focus {
+      div.wb-row:not(.wb-colspan):not(.wb-selected) {
         // background-color: $background-color;
 
         span.wb-col.wb-active {
@@ -453,6 +491,7 @@ div.wunderbaum {
   }
 
   /* --- FILTER --- */
+
   &.wb-ext-filter-dim,
   &.wb-ext-filter-hide {
     div.wb-node-list div.wb-row {
@@ -476,6 +515,7 @@ div.wunderbaum {
   // }
 
   /* --- DND --- */
+
   div.wb-row.wb-drag-source {
     opacity: 0.5;
 
@@ -531,6 +571,9 @@ div.wunderbaum {
     top: ($row-outer-height - 16) / 2 + $row-outer-height / 2;
   }
 
+  /* --- SPECIAL EFFECTS --- */
+
+  /* Colorize indentation levels. */
   &.wb-rainbow {
     @for $i from 1 through length($level-rainbow) {
       i.wb-expander:nth-child(#{length($level-rainbow)}n + #{$i}),
@@ -592,8 +635,6 @@ div.wunderbaum {
   }
 }
 
-// div.wunderbaum
-
 /* --- TOOL CLASSES --- */
 
 .wb-helper-center {