wunderbaum 0.12.1 → 0.14.0

package/src/wb_ext_dnd.ts

@@ -78,7 +78,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     // this.$scrollParent = $temp.scrollParent();
     // $temp.remove();
     const tree = this.tree;
-    const dndOpts = tree.options.dnd!;
+    const dndOpts = tree.options.dnd;
 
     // Enable drag support if dragStart() is specified:
     if (dndOpts.dragStart) {
@@ -134,7 +134,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     e: DragEvent,
     allowed: DropRegionTypeSet | null
   ): DropRegionType | false {
-    const rowHeight = this.tree.options.rowHeightPx!;
+    const rowHeight = this.tree.options.rowHeightPx;
     const dy = e.offsetY;
 
     if (!allowed) {
@@ -208,7 +208,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     //   `_isVoidDrop: ${srcNode} -> ${dropRegion} ${targetNode}`
     // );
     // TODO: should be checked on  move only
-    if (!this.treeOpts.dnd.preventVoidMoves || !srcNode) {
+    if (!this.treeOpts.dnd!.preventVoidMoves || !srcNode) {
       return false;
     }
     if (
@@ -225,7 +225,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
   /* Implement auto scrolling when drag cursor is in top/bottom area of scroll parent. */
   protected _applyScrollDir(): void {
     if (this.isDragging() && this.currentScrollDir) {
-      const dndOpts = this.tree.options.dnd!;
+      const dndOpts = this.tree.options.dnd;
       const sp = this.tree.element; // scroll parent
       const scrollTop = sp.scrollTop;
       if (this.currentScrollDir < 0) {
@@ -238,7 +238,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
   /* Implement auto scrolling when drag cursor is in top/bottom area of scroll parent. */
   protected _autoScroll(viewportY: number): number {
     const tree = this.tree;
-    const dndOpts = tree.options.dnd!;
+    const dndOpts = tree.options.dnd;
     const sensitivity = dndOpts.scrollSensitivity;
     const sp = tree.element; // scroll parent
     const headerHeight = tree.headerElement.clientHeight; // May be 0
@@ -284,7 +284,6 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
    * Handle dragstart, drag and dragend events for the source node.
    */
   protected onDragEvent(e: DragEvent) {
-    // const tree = this.tree;
     const dndOpts: DndOptionsType = this.treeOpts.dnd;
     const srcNode = Wunderbaum.getNode(e);
 
@@ -312,7 +311,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
         return false;
       }
       const nodeData = srcNode.toDict(true, (n: any) => {
-        // We don't want to re-use the key on drop:
+        // We don't want to reuse the key on drop:
         n._orgKey = n.key;
         delete n.key;
       });
@@ -377,6 +376,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     };
     if (!targetNode) {
       this._leaveNode();
+      e.preventDefault(); // Don't open file in browser when dropped in empty area
       return;
     }
     if (["drop"].includes(e.type)) {
@@ -518,19 +518,20 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       const srcNode = this.srcNode;
       const lastDropEffect = this.lastDropEffect;
 
-      setTimeout(() => {
-        // Decouple this call, because drop actions may prevent the dragend event
-        // from being fired on some browsers
-        targetNode._callEvent("dnd.drop", {
-          event: e,
-          region: region,
-          suggestedDropMode: region === "over" ? "appendChild" : region,
-          suggestedDropEffect: lastDropEffect,
-          // suggestedDropEffect: e.dataTransfer?.dropEffect,
-          sourceNode: srcNode,
-          sourceNodeData: nodeData,
-        });
-      }, 10);
+      /* Before v0.14.0, we decoupled `_callEvent` like so:
+           Decouple this call, because drop actions may prevent the dragend
+           event from being fired on some browsers.
+           setTimeout(() => {...}, 10);
+        however this made e.dataTransfer.items inaccessible */
+      targetNode._callEvent("dnd.drop", {
+        event: e,
+        region: region,
+        suggestedDropMode: region === "over" ? "appendChild" : region,
+        suggestedDropEffect: lastDropEffect,
+        sourceNode: srcNode,
+        sourceNodeData: nodeData,
+        dataTransfer: e.dataTransfer,
+      });
     }
     return false;
   }

package/src/wb_ext_edit.ts

@@ -286,7 +286,7 @@ export class EditExtension extends WunderbaumExtension<EditOptionsType> {
       newValue = newValue.trim();
     }
     if (!node) {
-      this.tree.logDebug("stopEditTitle: not in edit mode.");
+      // this.tree.logDebug("stopEditTitle: not in edit mode.");
       return;
     }
     node.logDebug(`stopEditTitle(${apply})`, options, focusElem, newValue);
@@ -381,7 +381,7 @@ export class EditExtension extends WunderbaumExtension<EditOptionsType> {
     this.relatedNode = node;
 
     // Don't filter new nodes:
-    newNode.match = true;
+    newNode.match = -1;
 
     newNode.makeVisible({ noAnimation: true }).then(() => {
       this.startEditTitle(newNode);

package/src/wb_ext_filter.ts

@@ -13,6 +13,7 @@ import {
   onEvent,
 } from "./util";
 import {
+  FilterConnectType,
   FilterNodesOptions,
   FilterOptionsType,
   NodeFilterCallback,
@@ -29,7 +30,11 @@ const RE_START_MARKER = new RegExp(escapeRegex(START_MARKER), "g");
 const RE_END_MARTKER = new RegExp(escapeRegex(END_MARKER), "g");
 
 export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
-  public queryInput?: HTMLInputElement;
+  public queryInput: HTMLInputElement | null = null;
+  public prevButton: HTMLElement | HTMLAnchorElement | null = null;
+  public nextButton: HTMLElement | HTMLAnchorElement | null = null;
+  public modeButton: HTMLButtonElement | null = null;
+  public matchInfoElem: HTMLElement | null = null;
   public lastFilterArgs: IArguments | null = null;
 
   constructor(tree: Wunderbaum) {
@@ -37,7 +42,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       autoApply: true, // Re-apply last filter if lazy data is loaded
       autoExpand: false, // Expand all branches that contain matches while filtered
       matchBranch: false, // Whether to implicitly match all children of matched nodes
-      connectInput: null, // Element or selector of an input control for filter query strings
+      connect: null, // Element or selector of an input control for filter query strings
       fuzzy: false, // Match single characters in order, e.g. 'fb' will match 'FooBar'
       hideExpanders: false, // Hide expanders if all child nodes are hidden by filter
       highlight: true, // Highlight matches by wrapping inside <mark> tags
@@ -49,35 +54,118 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
 
   init() {
     super.init();
-    const connectInput = this.getPluginOption("connectInput");
-    if (connectInput) {
-      this.queryInput = elemFromSelector(connectInput) as HTMLInputElement;
-      assert(
-        this.queryInput,
-        `Invalid 'filter.connectInput' option: ${connectInput}.`
-      );
-      onEvent(
-        this.queryInput,
-        "input",
-        debounce((e) => {
-          // this.tree.log("query", e);
-          this.filterNodes(this.queryInput!.value.trim(), {});
-        }, 700)
-      );
+    const connect: FilterConnectType = this.getPluginOption("connect");
+    if (connect) {
+      this._connectControls();
     }
   }
 
   setPluginOption(name: string, value: any): void {
-    // alert("filter opt=" + name + ", " + value)
     super.setPluginOption(name, value);
     switch (name) {
       case "mode":
-        this.tree.filterMode = value === "hide" ? "hide" : "dim";
+        this.tree.filterMode =
+          value === "hide" ? "hide" : value === "mark" ? "mark" : "dim";
         this.tree.updateFilter();
         break;
     }
   }
 
+  _updatedConnectedControls() {
+    const filterActive = this.tree.filterMode !== null;
+    const activeNode = this.tree.getActiveNode();
+    const matchCount = filterActive ? this.countMatches() : 0;
+    const strings = this.treeOpts.strings;
+    let matchIdx: string | number = "?";
+
+    if (this.matchInfoElem) {
+      if (filterActive) {
+        let info;
+        if (matchCount === 0) {
+          info = strings.noMatch;
+        } else if (activeNode && activeNode.match! >= 1) {
+          matchIdx = activeNode.match ?? "?";
+          info = strings.matchIndex;
+        } else {
+          info = strings.queryResult;
+        }
+        info = info
+          .replace("${count}", this.tree.count().toLocaleString())
+          .replace("${match}", "" + matchIdx)
+          .replace("${matches}", matchCount.toLocaleString());
+        this.matchInfoElem.textContent = info;
+      } else {
+        this.matchInfoElem.textContent = "";
+      }
+    }
+
+    if (this.nextButton instanceof HTMLButtonElement) {
+      this.nextButton.disabled = !matchCount;
+    }
+    if (this.prevButton instanceof HTMLButtonElement) {
+      this.prevButton.disabled = !matchCount;
+    }
+    if (this.modeButton) {
+      this.modeButton.disabled = !filterActive;
+      this.modeButton.classList.toggle(
+        "wb-filter-hide",
+        this.tree.filterMode === "hide"
+      );
+    }
+  }
+  _connectControls() {
+    const tree = this.tree;
+    const connect: FilterConnectType = this.getPluginOption("connect");
+    if (!connect) {
+      return;
+    }
+    this.queryInput = elemFromSelector(connect.inputElem);
+    if (!this.queryInput) {
+      throw new Error(`Invalid 'filter.connect' option: ${connect.inputElem}.`);
+    }
+    this.prevButton = elemFromSelector(connect.prevButton!);
+    this.nextButton = elemFromSelector(connect.nextButton!);
+    this.modeButton = elemFromSelector(connect.modeButton!);
+    this.matchInfoElem = elemFromSelector(connect.matchInfoElem!);
+    if (this.prevButton) {
+      onEvent(this.prevButton, "click", () => {
+        tree.findRelatedNode(
+          tree.getActiveNode() || tree.getFirstChild()!,
+          "prevMatch"
+        );
+        this._updatedConnectedControls();
+      });
+    }
+    if (this.nextButton) {
+      onEvent(this.nextButton, "click", () => {
+        tree.findRelatedNode(
+          tree.getActiveNode() || tree.getFirstChild()!,
+          "nextMatch"
+        );
+        this._updatedConnectedControls();
+      });
+    }
+    if (this.modeButton) {
+      onEvent(this.modeButton, "click", (e) => {
+        if (!this.tree.filterMode) {
+          return;
+        }
+        this.setPluginOption(
+          "mode",
+          tree.filterMode === "dim" ? "hide" : "dim"
+        );
+      });
+    }
+    onEvent(
+      this.queryInput,
+      "input",
+      debounce((e) => {
+        this.filterNodes(this.queryInput!.value.trim(), {});
+      }, 700)
+    );
+    this._updatedConnectedControls();
+  }
+
   _applyFilterNoUpdate(
     filter: string | RegExp | NodeFilterCallback,
     _opts: FilterNodesOptions
@@ -98,7 +186,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     const treeOpts = tree.options;
     const prevAutoCollapse = treeOpts.autoCollapse;
     // Use default options from `tree.options.filter`, but allow to override them
-    const opts = extend({}, treeOpts.filter, _opts);
+    const opts: FilterOptionsType = extend({}, treeOpts.filter, _opts);
     const hideMode = opts.mode === "hide";
     const matchBranch = !!opts.matchBranch;
     const leavesOnly = !!opts.leavesOnly && !matchBranch;
@@ -176,12 +264,12 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       };
     }
 
-    tree.filterMode = opts.mode;
+    tree.filterMode = opts.mode ?? "dim";
     // eslint-disable-next-line prefer-rest-params
     this.lastFilterArgs = arguments;
 
     tree.element.classList.toggle("wb-ext-filter-hide", !!hideMode);
-    tree.element.classList.toggle("wb-ext-filter-dim", !hideMode);
+    tree.element.classList.toggle("wb-ext-filter-dim", opts.mode === "dim");
     tree.element.classList.toggle(
       "wb-ext-filter-hide-expanders",
       !!opts.hideExpanders
@@ -193,10 +281,6 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       delete node.titleWithHighlight;
       node.subMatchCount = 0;
     });
-    // statusNode = tree.root.findDirectChild(KEY_NODATA);
-    // if (statusNode) {
-    //   statusNode.remove();
-    // }
     tree.setStatus(NodeStatusType.ok);
 
     // Adjust node.hide, .match, and .subMatchCount properties
@@ -210,7 +294,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
 
       if (res === "skip") {
         node.visit(function (c) {
-          c.match = false;
+          c.match = undefined;
         }, true);
         return "skip";
       }
@@ -223,7 +307,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
 
       if (res) {
         count++;
-        node.match = true;
+        node.match = count;
         node.visitParents((p) => {
           if (p !== node) {
             p.subMatchCount! += 1;
@@ -252,6 +336,8 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     tree.logDebug(
       `Filter '${filter}' found ${count} nodes in ${Date.now() - start} ms.`
     );
+    this._updatedConnectedControls();
+
     return count;
   }
 
@@ -277,6 +363,10 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       options.matchBranch === undefined,
       "filterBranches() is deprecated."
     );
+    this.tree.logDeprecate("filterBranches()", {
+      since: "0.9.0",
+      hint: "Use `filterNodes` instead and set `options.matchBranch: true`",
+    });
     options.matchBranch = true;
     return this._applyFilterNoUpdate(filter, options);
   }
@@ -309,6 +399,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     } else {
       tree.logWarn("updateFilter(): no filter active.");
     }
+    this._updatedConnectedControls();
   }
 
   /**
@@ -316,30 +407,17 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
    */
   clearFilter() {
     const tree = this.tree;
-    // statusNode = tree.root.findDirectChild(KEY_NODATA),
-    // escapeTitles = tree.options.escapeTitles;
     tree.enableUpdate(false);
 
-    // if (statusNode) {
-    //   statusNode.remove();
-    // }
     tree.setStatus(NodeStatusType.ok);
     // we also counted root node's subMatchCount
     delete tree.root.match;
     delete tree.root.subMatchCount;
 
     tree.visit((node) => {
-      // if (node.match && node._rowElem) {
-      //   let titleElem = node._rowElem.querySelector("span.wb-title")!;
-      //   node._callEvent("enhanceTitle", { titleElem: titleElem });
-      // }
       delete node.match;
       delete node.subMatchCount;
       delete node.titleWithHighlight;
-      // if (node.subMatchBadge) {
-      //   node.subMatchBadge.remove();
-      //   delete node.subMatchBadge;
-      // }
       if (node._filterAutoExpanded && node.expanded) {
         node.setExpanded(false, {
           noAnimation: true,
@@ -355,13 +433,14 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       "wb-ext-filter-dim",
       "wb-ext-filter-hide"
     );
-    // tree._callHook("treeStructureChanged", this, "clearFilter");
+    this._updatedConnectedControls();
+
     tree.enableUpdate(true);
   }
 }
 
 /**
- * @description Marks the matching charecters of `text` either by `mark` or
+ * @description Marks the matching characters of `text` either by `mark` or
  * by exotic*Chars (if `escapeTitles` is `true`) based on `matches`
  * which is an array of matching groups.
  * @param {string} text

package/src/wb_ext_grid.ts

@@ -77,7 +77,7 @@ export class GridExtension extends WunderbaumExtension<GridOptionsType> {
   }
 
   /**
-   * Hanldes drag and sragstop events for column resizing.
+   * Handles drag and sragstop events for column resizing.
    */
   protected handleDrag(e: DragCallbackArgType): void {
     const custom = e.customData;

package/src/wb_extension_base.ts

@@ -5,15 +5,31 @@
  */
 
 import * as util from "./util";
+import { DndExtension } from "./wb_ext_dnd";
+import { EditExtension } from "./wb_ext_edit";
+import { FilterExtension } from "./wb_ext_filter";
+import { GridExtension } from "./wb_ext_grid";
+import { KeynavExtension } from "./wb_ext_keynav";
+import { LoggerExtension } from "./wb_ext_logger";
+import { WunderbaumOptions } from "./wb_options";
 import { Wunderbaum } from "./wunderbaum";
 
-export type ExtensionsDict = { [key: string]: WunderbaumExtension<any> };
+export type ExtensionsDict = {
+  dnd: DndExtension;
+  edit: EditExtension;
+  filter: FilterExtension;
+  grid: GridExtension;
+  keynav: KeynavExtension;
+  logger: LoggerExtension;
+
+  [key: string]: WunderbaumExtension<any>;
+};
 
 export abstract class WunderbaumExtension<TOptions> {
   public enabled = true;
   readonly id: string;
   readonly tree: Wunderbaum;
-  readonly treeOpts: any;
+  readonly treeOpts: WunderbaumOptions;
   readonly extensionOpts: any;
 
   constructor(tree: Wunderbaum, id: string, defaults: TOptions) {
@@ -23,7 +39,7 @@ export abstract class WunderbaumExtension<TOptions> {
 
     const opts = tree.options as any;
 
-    if (this.treeOpts[id] === undefined) {
+    if ((<any>this.treeOpts)[id] === undefined) {
       opts[id] = this.extensionOpts = util.extend({}, defaults);
     } else {
       // TODO: do we break existing object instance references here?