wunderbaum 0.0.8 → 0.1.0

package/src/types.ts

@@ -17,16 +17,24 @@ export type BoolOrStringOptionResolver = (
 ) => boolean | string;
 
 export type NodeAnyCallback = (node: WunderbaumNode) => any;
+export type NodeStringCallback = (node: WunderbaumNode) => string;
 
 export type NodeVisitResponse = "skip" | boolean | void;
 export type NodeVisitCallback = (node: WunderbaumNode) => NodeVisitResponse;
 
 // type WithWildcards<T> = T & { [key: string]: unknown };
+
+/* -----------------------------------------------------------------------------
+ * EVENT CALLBACK TYPES
+ * ---------------------------------------------------------------------------*/
+
 export interface WbTreeEventType {
   /** Name of the event. */
   type: string;
-  /** The affected tree. */
+  /** The affected tree instance. */
   tree: Wunderbaum;
+  /** Exposed utility module methods. */
+  util: any;
   /** Originating HTML event, e.g. `click` if any. */
   event?: Event;
   // [key: string]: unknown;
@@ -42,6 +50,63 @@ export interface WbNodeEventType extends WbTreeEventType {
   typeInfo: NodeTypeDefinition;
 }
 
+export interface WbActivateEventType extends WbNodeEventType {
+  prevNode: WunderbaumNode;
+  /** The original event. */
+  event: Event;
+}
+
+export interface WbChangeEventType extends WbNodeEventType {
+  info: WbEventInfo;
+  inputElem: HTMLInputElement;
+  inputValue: any;
+}
+
+export interface WbClickEventType extends WbTreeEventType {
+  /** The original event. */
+  event: MouseEvent;
+  node: WunderbaumNode;
+  info: WbEventInfo;
+}
+
+export interface WbErrorEventType extends WbNodeEventType {
+  error: any;
+}
+
+export interface WbDeactivateEventType extends WbNodeEventType {
+  nextNode: WunderbaumNode;
+  /** The original event. */
+  event: Event;
+}
+
+export interface WbEnhanceTitleEventType extends WbNodeEventType {
+  titleSpan: HTMLSpanElement;
+}
+
+export interface WbFocusEventType extends WbTreeEventType {
+  /** The original event. */
+  event: FocusEvent;
+  /** True if `focusin`, false if `focusout`. */
+  flag: boolean;
+}
+
+export interface WbKeydownEventType extends WbTreeEventType {
+  /** The original event. */
+  event: KeyboardEvent;
+  node: WunderbaumNode;
+  info: WbEventInfo;
+  /** Canical name of the key including modifiers. @see {@link eventToString} */
+  eventName: string;
+}
+
+export interface WbInitEventType extends WbTreeEventType {
+  error?: any;
+}
+
+export interface WbReceiveEventType extends WbNodeEventType {
+  response: any;
+}
+
 export interface WbRenderEventType extends WbNodeEventType {
   /**
    * True if the node's markup was not yet created. In this case the render
@@ -49,24 +114,22 @@ export interface WbRenderEventType extends WbNodeEventType {
    * values according to to current node data).
    */
   isNew: boolean;
-  /** True if the node only displays the title and is stretched over all remaining columns. */
-  isColspan: boolean;
-  // /** */
-  // isDataChange: boolean;
   /** The node's `<span class='wb-node'>` element. */
   nodeElem: HTMLSpanElement;
+  /** True if the node only displays the title and is stretched over all remaining columns. */
+  isColspan: boolean;
   /**
    * Array of node's `<span class='wb-col'>` elements.
    * The first element is `<span class='wb-node wb-col'>`, which contains the
    * node title and icon (`idx: 0`, id: '*'`).
    */
-  allColInfosById: ColumnEventInfos;
+  allColInfosById: ColumnEventInfoMap;
   /**
    * Array of node's `<span class='wb-node'>` elements, *that should be rendered*.
    * In contrast to `allColInfosById`, the node title is not part of this array.
    * If node.isColspan() is true, this array is empty (`[]`).
    */
-  renderColInfosById: ColumnEventInfos;
+  renderColInfosById: ColumnEventInfoMap;
 }
 
 /**
@@ -76,13 +139,13 @@ export interface WbRenderEventType extends WbNodeEventType {
 export interface NodeTypeDefinition {
   // /** Type ID that matches `node.type`. */
   // id: string;
-  /** En/disable checkbox for matching nodes.*/
+  /** En/disable checkbox for matching nodes. */
   checkbox?: boolean | BoolOrStringOptionResolver;
-  /** En/disable checkbox for matching nodes.*/
-  colspan?: boolean | BoolOptionResolver;
-  /** Optional class names that are added to all `div.wb-row` elements of matching nodes.*/
+  /** Optional class names that are added to all `div.wb-row` elements of matching nodes. */
   classes?: string;
-  /**Default icon for matching nodes.*/
+  /** Only show title and hide other columns if any. */
+  colspan?: boolean | BoolOptionResolver;
+  /** Default icon for matching nodes. */
   icon?: boolean | string | BoolOrStringOptionResolver;
   /**
    * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
@@ -93,26 +156,19 @@ export interface NodeTypeDefinition {
   // _any: any;
 }
 
-// /**
-//  * Contains the node's type information, i.e. `tree.types[node.type]` if
-//  * defined. @see {@link Wunderbaum.types}
-//  */
-// export type NodeTypeInfo = {
-//   icon?: string;
-//   classes?: string;
-//   // and more
-//   [key: string]: unknown;
-// };
-export type NodeTypeDefinitions = { [type: string]: NodeTypeDefinition };
+/* -----------------------------------------------------------------------------
+ * DATA TYPES
+ * ---------------------------------------------------------------------------*/
+
+export type NodeTypeDefinitionMap = { [type: string]: NodeTypeDefinition };
 
 /**
+ * Column type definitions.
  * @see {@link `Wunderbaum.columns`}
  */
 export interface ColumnDefinition {
   /** Column ID as defined in `tree.columns` definition ("*" for title column). */
   id: string;
-  // /** */
-  // idx: number;
   /** Column header (defaults to id) */
   title: string;
   /** Column header tooltip (optional) */
@@ -136,8 +192,12 @@ export interface ColumnDefinition {
   _widthPx?: number;
   _ofsPx?: number;
 }
+
 export type ColumnDefinitionList = Array<ColumnDefinition>;
 
+/**
+ * Column information (passed to the `render` event).
+ */
 export interface ColumnEventInfo {
   /** Column ID as defined in `tree.columns` definition ("*" for title column). */
   id: string;
@@ -148,11 +208,33 @@ export interface ColumnEventInfo {
   /** The value of `tree.columns[]` for the current index. */
   info: ColumnDefinition;
 }
-export type ColumnEventInfos = { [colId: string]: ColumnEventInfo };
 
-export type WbTreeCallbackType = (e: WbTreeEventType) => any;
-export type WbNodeCallbackType = (e: WbNodeEventType) => any;
-export type WbRenderCallbackType = (e: WbRenderEventType) => void;
+export type ColumnEventInfoMap = { [colId: string]: ColumnEventInfo };
+
+/**
+ * Additional inforation derived from mouse or keyboard events.
+ * @see {@link Wunderbaum.getEventInfo}
+ */
+export interface WbEventInfo {
+  /** The tree instance. */
+  tree: Wunderbaum;
+  /** The affected node instance instance if any. */
+  node: WunderbaumNode | null;
+  /** The affected part of the node span (e.g. title, expander, ...). */
+  region: NodeRegion;
+  /** The definition of the affected column if any. */
+  colDef?: ColumnDefinition;
+  /** The index of affected column or -1. */
+  colIdx: number;
+  /** The column definition ID of affected column if any. */
+  colId?: string;
+  /** The affected column's span tag if any. */
+  colElem?: HTMLSpanElement;
+}
+
+// export type WbTreeCallbackType = (e: WbTreeEventType) => any;
+// export type WbNodeCallbackType = (e: WbNodeEventType) => any;
+// export type WbRenderCallbackType = (e: WbRenderEventType) => void;
 
 export type FilterModeType = null | "dim" | "hide";
 export type ApplyCommandType =
@@ -210,7 +292,7 @@ export enum NodeStatusType {
 }
 
 /** Define the subregion of a node, where an event occurred. */
-export enum TargetType {
+export enum NodeRegion {
   unknown = "",
   checkbox = "checkbox",
   column = "column",
@@ -220,6 +302,18 @@ export enum TargetType {
   title = "title",
 }
 
+/** Initial navigation mode and possible transition. */
+export enum NavModeEnum {
+  startRow = "startRow", // Start with row mode, but allow cell-nav mode
+  cell = "cell", // Cell-nav mode only
+  startCell = "startCell", // Start in cell-nav mode, but allow row mode
+  row = "row", // Row mode only
+}
+
+/* -----------------------------------------------------------------------------
+ * METHOD OPTIONS TYPES
+ * ---------------------------------------------------------------------------*/
+
 /** Possible values for {@link WunderbaumNode.addChildren()}. */
 export interface AddChildrenOptions {
   /** Insert children before this node (or index)
@@ -236,6 +330,11 @@ export interface AddChildrenOptions {
   _level?: number;
 }
 
+/** Possible values for {@link Wunderbaum.applyCommand()} and {@link WunderbaumNode.applyCommand()}. */
+export interface ApplyCommandOptions {
+  [key: string]: unknown;
+}
+
 /** Possible values for {@link Wunderbaum.expandAll()} and {@link WunderbaumNode.expandAll()}. */
 export interface ExpandAllOptions {
   /** Restrict expand level @default 99 */
@@ -246,6 +345,17 @@ export interface ExpandAllOptions {
   force?: boolean;
 }
 
+/** Possible values for {@link Wunderbaum.filterNodes()} and {@link Wunderbaum.filterBranches()}. */
+export interface FilterNodesOptions {
+  mode?: string;
+  leavesOnly?: boolean;
+  fuzzy?: boolean;
+  highlight?: boolean;
+  hideExpanders?: boolean;
+  autoExpand?: boolean;
+  noData?: boolean;
+}
+
 /** Possible values for {@link WunderbaumNode.makeVisible()}. */
 export interface MakeVisibleOptions {
   /** Do not animate expand (currently not implemented). @default false */
@@ -256,12 +366,20 @@ export interface MakeVisibleOptions {
   noEvents?: boolean;
 }
 
-/** Initial navigation mode and possible transition. */
-export enum NavigationOptions {
-  startRow = "startRow", // Start with row mode, but allow cell-nav mode
-  cell = "cell", // Cell-nav mode only
-  startCell = "startCell", // Start in cell-nav mode, but allow row mode
-  row = "row", // Row mode only
+/** Possible values for {@link Wunderbaum.navigate()}. */
+export interface NavigateOptions {
+  activate?: boolean;
+  event?: Event;
+}
+
+/** Possible values for {@link WunderbaumNode.render()}. */
+export interface RenderOptions {
+  change?: ChangeType;
+  after?: any;
+  isNew?: boolean;
+  preventScroll?: boolean;
+  isDataChange?: boolean;
+  top?: number;
 }
 
 /** Possible values for {@link scrollIntoView()}. */
@@ -336,9 +454,25 @@ export interface SetStatusOptions {
   details?: string;
 }
 
+/** Possible values for {@link Wunderbaum.updateColumns()}. */
+export interface UpdateColumnsOptions {
+  calculateCols?: boolean;
+  updateRows?: boolean;
+}
+
+/** Possible values for {@link Wunderbaum.visitRows()} and {@link Wunderbaum.visitRowsUp()}. */
+export interface VisitRowsOptions {
+  reverse?: boolean;
+  includeSelf?: boolean;
+  includeHidden?: boolean;
+  wrap?: boolean;
+  start?: WunderbaumNode | null;
+}
+
 /* -----------------------------------------------------------------------------
  * wb_ext_dnd
- */
+ * ---------------------------------------------------------------------------*/
+
 export type DropRegionType = "over" | "before" | "after";
 export type DropRegionTypeSet = Set<DropRegionType>;
 // type AllowedDropRegionType =

package/src/wb_ext_dnd.ts

@@ -144,7 +144,7 @@ export class DndExtension extends WunderbaumExtension {
   protected autoScroll(event: DragEvent): number {
     let tree = this.tree,
       dndOpts = tree.options.dnd!,
-      sp = tree.scrollContainerElement,
+      sp = tree.listContainerElement,
       sensitivity = dndOpts.scrollSensitivity,
       speed = dndOpts.scrollSpeed,
       scrolled = 0;
@@ -180,6 +180,11 @@ export class DndExtension extends WunderbaumExtension {
     if (e.type === "dragstart") {
       // Set a default definition of allowed effects
       e.dataTransfer!.effectAllowed = dndOpts.effectAllowed; //"copyMove"; // "all";
+      if (srcNode.isEditing()) {
+        srcNode.logDebug("Prevented dragging node in edit mode.");
+        e.preventDefault();
+        return false;
+      }
       // Let user cancel the drag operation, override effectAllowed, etc.:
       const res = srcNode._callEvent("dnd.dragStart", { event: e });
       if (!res) {

package/src/wb_ext_edit.ts

@@ -196,7 +196,7 @@ export class EditExtension extends WunderbaumExtension {
     // (we also treat a `true` return value as 'use default'):
     if (inputHtml === true || !inputHtml) {
       const title = escapeHtml(node.title);
-      inputHtml = `<input type=text class="wb-input-edit" value="${title}" required autocorrect=off>`;
+      inputHtml = `<input type=text class="wb-input-edit" tabindex=-1 value="${title}" required autocorrect=off>`;
     }
     const titleSpan = node
       .getColElem(0)!
@@ -236,11 +236,11 @@ export class EditExtension extends WunderbaumExtension {
    * @param apply
    * @param opts.canKeepOpen
    */
-  _stopEditTitle(apply: boolean, opts: any) {
+  _stopEditTitle(apply: boolean, options: any) {
     const focusElem = document.activeElement as HTMLInputElement;
     let newValue = focusElem ? getValueFromElem(focusElem) : null;
     const node = this.curEditNode;
-    const forceClose = !!opts.forceClose;
+    const forceClose = !!options.forceClose;
     const validity = this.getPluginOption("validity");
 
     if (newValue && this.getPluginOption("trim")) {
@@ -250,7 +250,7 @@ export class EditExtension extends WunderbaumExtension {
       this.tree.logDebug("stopEditTitle: not in edit mode.");
       return;
     }
-    node.logDebug(`stopEditTitle(${apply})`, opts, focusElem, newValue);
+    node.logDebug(`stopEditTitle(${apply})`, options, focusElem, newValue);
 
     if (apply && newValue !== null && newValue !== node.title) {
       const errMsg = focusElem.validationMessage;
@@ -283,21 +283,23 @@ export class EditExtension extends WunderbaumExtension {
             return;
           }
           node?.setTitle(newValue);
-          this.curEditNode!.render();
+          // NOTE: At least on Safari, this render call triggers a scroll event
+          // probably because the focused input is replaced.
+          this.curEditNode!.render({ preventScroll: true });
           this.curEditNode = null;
           this.relatedNode = null;
           this.tree.setFocus(); // restore focus that was in the input element
         })
         .catch((err) => {
-          // this.curEditNode!.render();
-          // this.curEditNode = null;
-          // this.relatedNode = null;
+          node.logError(err);
         });
       // Trigger 'change' event for embedded `<input>`
       // focusElem.blur();
     } else {
       // Discard the embedded `<input>`
-      this.curEditNode!.render();
+      // NOTE: At least on Safari, this render call triggers a scroll event
+      // probably because the focused input is replaced.
+      this.curEditNode!.render({ preventScroll: true });
       this.curEditNode = null;
       this.relatedNode = null;
       // We discarded the <input>, so we have to acquire keyboard focus again

package/src/wb_ext_filter.ts

@@ -11,7 +11,11 @@ import {
   extend,
   onEvent,
 } from "./util";
-import { NodeFilterCallback, NodeStatusType } from "./types";
+import {
+  FilterNodesOptions,
+  NodeFilterCallback,
+  NodeStatusType,
+} from "./types";
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumNode } from "./wb_node";
 import { WunderbaumExtension } from "./wb_extension_base";
@@ -243,19 +247,25 @@ export class FilterExtension extends WunderbaumExtension {
   /**
    * [ext-filter] Dim or hide nodes.
    *
-   * @param {boolean} [opts={autoExpand: false, leavesOnly: false}]
+   * @param {boolean} [options={autoExpand: false, leavesOnly: false}]
    */
-  filterNodes(filter: string | NodeFilterCallback, opts: any) {
-    return this._applyFilterNoUpdate(filter, false, opts);
+  filterNodes(
+    filter: string | NodeFilterCallback,
+    options: FilterNodesOptions
+  ) {
+    return this._applyFilterNoUpdate(filter, false, options);
   }
 
   /**
    * [ext-filter] Dim or hide whole branches.
    *
-   * @param {boolean} [opts={autoExpand: false}]
+   * @param {boolean} [options={autoExpand: false}]
    */
-  filterBranches(filter: string | NodeFilterCallback, opts: any) {
-    return this._applyFilterNoUpdate(filter, true, opts);
+  filterBranches(
+    filter: string | NodeFilterCallback,
+    options: FilterNodesOptions
+  ) {
+    return this._applyFilterNoUpdate(filter, true, options);
   }
 
   /**

package/src/wb_ext_keynav.ts

@@ -4,7 +4,7 @@
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
-import { NavigationOptions } from "./types";
+import { NavModeEnum } from "./types";
 import { eventToString } from "./util";
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumNode } from "./wb_node";
@@ -47,7 +47,7 @@ export class KeynavExtension extends WunderbaumExtension {
       opts = data.options,
       activate = !event.ctrlKey || opts.autoActivate,
       curInput = this._getEmbeddedInputElem(event.target),
-      navModeOption = opts.navigationModeOption as NavigationOptions;
+      navModeOption = opts.navigationModeOption as NavModeEnum;
     // isCellEditMode = tree.navMode === NavigationMode.cellEdit;
 
     let focusNode,
@@ -122,17 +122,30 @@ export class KeynavExtension extends WunderbaumExtension {
 
       // Pre-Evaluate expand/collapse action for LEFT/RIGHT
       switch (eventName) {
+        case "Enter":
+          if (node.isActive()) {
+            if (node.isExpanded()) {
+              eventName = "Subtract"; // callapse
+            } else if (node.isExpandable(true)) {
+              eventName = "Add"; // expand
+            }
+          }
+          break;
         case "ArrowLeft":
           if (node.expanded) {
             eventName = "Subtract"; // collapse
           }
           break;
         case "ArrowRight":
-          if (!node.expanded && (node.children || node.lazy)) {
+          if (!node.expanded && node.isExpandable(true)) {
             eventName = "Add"; // expand
-          } else if (navModeOption === NavigationOptions.startRow) {
+          } else if (
+            navModeOption === NavModeEnum.startCell ||
+            navModeOption === NavModeEnum.startRow
+          ) {
+            event.preventDefault();
             tree.setCellNav();
-            return;
+            return false;
           }
           break;
       }
@@ -148,7 +161,7 @@ export class KeynavExtension extends WunderbaumExtension {
         case "Subtract":
           node.setExpanded(false);
           break;
-        case " ":
+        case " ": // Space
           // if (node.isPagingNode()) {
           //   tree._triggerNodeEvent("clickPaging", ctx, event);
           // } else
@@ -228,7 +241,16 @@ export class KeynavExtension extends WunderbaumExtension {
       }
 
       switch (eventName) {
-        case " ":
+        case "+":
+        case "Add":
+          // case "=": // 187: '+' @ Chrome, Safari
+          node.setExpanded(true);
+          break;
+        case "-":
+        case "Subtract":
+          node.setExpanded(false);
+          break;
+        case " ": // Space
           if (tree.activeColIdx === 0 && node.getOption("checkbox")) {
             node.setSelected(!node.isSelected());
             handled = true;
@@ -248,7 +270,7 @@ export class KeynavExtension extends WunderbaumExtension {
           break;
         case "Enter":
           tree.setFocus(); // Blur prev. input if any
-          if (tree.activeColIdx === 0 && node.isExpandable()) {
+          if ((tree.activeColIdx === 0 || isColspan) && node.isExpandable()) {
             node.setExpanded(!node.isExpanded());
             handled = true;
           } else if (curInput && !inputHasFocus && inputCanFocus) {
@@ -258,7 +280,7 @@ export class KeynavExtension extends WunderbaumExtension {
           break;
         case "Escape":
           tree.setFocus(); // Blur prev. input if any
-          if (tree.isCellNav() && navModeOption !== NavigationOptions.cell) {
+          if (tree.isCellNav() && navModeOption !== NavModeEnum.cell) {
             tree.setCellNav(false); // row-nav mode
             handled = true;
           }
@@ -269,7 +291,7 @@ export class KeynavExtension extends WunderbaumExtension {
             node.setExpanded(false);
           } else if (!isColspan && tree.activeColIdx > 0) {
             tree.setColumn(tree.activeColIdx - 1);
-          } else if (navModeOption !== NavigationOptions.cell) {
+          } else if (navModeOption !== NavModeEnum.cell) {
             tree.setCellNav(false); // row-nav mode
           }
           handled = true;
@@ -286,17 +308,31 @@ export class KeynavExtension extends WunderbaumExtension {
           }
           handled = true;
           break;
+        case "Home": // Generated by [Fn] + ArrowLeft on Mac
+          // case "Meta+ArrowLeft":
+          tree.setFocus(); // Blur prev. input if any
+          if (!isColspan && tree.activeColIdx > 0) {
+            tree.setColumn(0);
+          }
+          handled = true;
+          break;
+        case "End": // Generated by [Fn] + ArrowRight on Mac
+          // case "Meta+ArrowRight":
+          tree.setFocus(); // Blur prev. input if any
+          if (!isColspan && tree.activeColIdx < tree.columns.length - 1) {
+            tree.setColumn(tree.columns.length - 1);
+          }
+          handled = true;
+          break;
         case "ArrowDown":
         case "ArrowUp":
         case "Backspace":
-        case "End":
-        case "Home":
-        case "Control+End":
-        case "Control+Home":
-        case "Meta+ArrowDown":
-        case "Meta+ArrowUp":
-        case "PageDown":
-        case "PageUp":
+        case "Control+End": // Generated by Control + [Fn] + ArrowRight on Mac
+        case "Control+Home": // Generated by Control + [Fn] + Arrowleft on Mac
+        case "Meta+ArrowDown": // [⌘] + ArrowDown on Mac
+        case "Meta+ArrowUp": // [⌘] + ArrowUp on Mac
+        case "PageDown": // Generated by [Fn] + ArrowDown on Mac
+        case "PageUp": // Generated by [Fn] + ArrowUp on Mac
           node.navigate(eventName, { activate: activate, event: event });
           // if (isCellEditMode) {
           //   this._getEmbeddedInputElem(null, true); // set focus to input