wunderbaum 0.0.1-0

package/src/wb_ext_filter.ts

@@ -0,0 +1,370 @@
+/*!
+ * Wunderbaum - ext-filter
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+
+import {
+  elemFromSelector,
+  escapeHtml,
+  escapeRegex,
+  extend,
+  extractHtmlText,
+  onEvent,
+} from "./util";
+import { NodeFilterCallback, NodeStatusType } from "./common";
+import { Wunderbaum } from "./wunderbaum";
+import { WunderbaumNode } from "./wb_node";
+import { WunderbaumExtension } from "./wb_extension_base";
+import { debounce } from "./debounce";
+
+const START_MARKER = "\uFFF7";
+const END_MARKER = "\uFFF8";
+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 {
+  public queryInput?: HTMLInputElement;
+  public lastFilterArgs: IArguments | null = null;
+
+  constructor(tree: Wunderbaum) {
+    super(tree, "filter", {
+      autoApply: true, // Re-apply last filter if lazy data is loaded
+      autoExpand: false, // Expand all branches that contain matches while filtered
+      counter: true, // Show a badge with number of matching child nodes near parent icons
+      fuzzy: false, // Match single characters in order, e.g. 'fb' will match 'FooBar'
+      hideExpandedCounter: true, // Hide counter badge if parent is expanded
+      hideExpanders: false, // Hide expanders if all child nodes are hidden by filter
+      highlight: true, // Highlight matches by wrapping inside <mark> tags
+      leavesOnly: false, // Match end nodes only
+      mode: "hide", // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
+      noData: true, // Display a 'no data' status node if result is empty
+    });
+  }
+
+  init() {
+    super.init();
+    let attachInput = this.getPluginOption("attachInput");
+    if (attachInput) {
+      this.queryInput = elemFromSelector(attachInput) as HTMLInputElement;
+      onEvent(
+        this.queryInput,
+        "input",
+        debounce((e) => {
+          // this.tree.log("query", e);
+          this.filterNodes(this.queryInput!.value.trim(), {});
+        }, 700)
+      );
+    }
+  }
+
+  _applyFilterNoUpdate(
+    filter: string | NodeFilterCallback,
+    branchMode: boolean,
+    _opts: any
+  ) {
+    return this.tree.runWithoutUpdate(() => {
+      return this._applyFilterImpl(filter, branchMode, _opts);
+    });
+  }
+
+  _applyFilterImpl(
+    filter: string | NodeFilterCallback,
+    branchMode: boolean,
+    _opts: any
+  ) {
+    let match,
+      temp,
+      start = Date.now(),
+      count = 0,
+      tree = this.tree,
+      treeOpts = tree.options,
+      escapeTitles = treeOpts.escapeTitles,
+      prevAutoCollapse = treeOpts.autoCollapse,
+      opts = extend({}, treeOpts.filter, _opts),
+      hideMode = opts.mode === "hide",
+      leavesOnly = !!opts.leavesOnly && !branchMode;
+
+    // Default to 'match title substring (case insensitive)'
+    if (typeof filter === "string") {
+      if (filter === "") {
+        tree.logInfo(
+          "Passing an empty string as a filter is handled as clearFilter()."
+        );
+        this.clearFilter();
+        return;
+      }
+      if (opts.fuzzy) {
+        // See https://codereview.stackexchange.com/questions/23899/faster-javascript-fuzzy-string-matching-function/23905#23905
+        // and http://www.quora.com/How-is-the-fuzzy-search-algorithm-in-Sublime-Text-designed
+        // and http://www.dustindiaz.com/autocomplete-fuzzy-matching
+        match = filter
+          .split("")
+          // Escaping the `filter` will not work because,
+          // it gets further split into individual characters. So,
+          // escape each character after splitting
+          .map(escapeRegex)
+          .reduce(function (a, b) {
+            // create capture groups for parts that comes before
+            // the character
+            return a + "([^" + b + "]*)" + b;
+          }, "");
+      } else {
+        match = escapeRegex(filter); // make sure a '.' is treated literally
+      }
+      let re = new RegExp(match, "i");
+      let reHighlight = new RegExp(escapeRegex(filter), "gi");
+      filter = (node: WunderbaumNode) => {
+        if (!node.title) {
+          return false;
+        }
+        let text = escapeTitles ? node.title : extractHtmlText(node.title);
+        // `.match` instead of `.test` to get the capture groups
+        let res = text.match(re);
+
+        if (res && opts.highlight) {
+          if (escapeTitles) {
+            if (opts.fuzzy) {
+              temp = _markFuzzyMatchedChars(text, res, escapeTitles);
+            } else {
+              // #740: we must not apply the marks to escaped entity names, e.g. `&quot;`
+              // Use some exotic characters to mark matches:
+              temp = text.replace(reHighlight, function (s) {
+                return START_MARKER + s + END_MARKER;
+              });
+            }
+            // now we can escape the title...
+            node.titleWithHighlight = escapeHtml(temp)
+              // ... and finally insert the desired `<mark>` tags
+              .replace(RE_START_MARKER, "<mark>")
+              .replace(RE_END_MARTKER, "</mark>");
+          } else {
+            if (opts.fuzzy) {
+              node.titleWithHighlight = _markFuzzyMatchedChars(text, res);
+            } else {
+              node.titleWithHighlight = text.replace(reHighlight, function (s) {
+                return "<mark>" + s + "</mark>";
+              });
+            }
+          }
+          // node.debug("filter", escapeTitles, text, node.titleWithHighlight);
+        }
+        return !!res;
+      };
+    }
+
+    tree.filterMode = opts.mode;
+    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-hide-expanders",
+      !!opts.hideExpanders
+    );
+    // Reset current filter
+    tree.root.subMatchCount = 0;
+    tree.visit((node) => {
+      delete node.match;
+      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
+    treeOpts.autoCollapse = false; // #528
+
+    tree.visit((node) => {
+      if (leavesOnly && node.children != null) {
+        return;
+      }
+      let res = (<NodeFilterCallback>filter)(node);
+
+      if (res === "skip") {
+        node.visit(function (c) {
+          c.match = false;
+        }, true);
+        return "skip";
+      }
+
+      let matchedByBranch = false;
+      if ((branchMode || res === "branch") && node.parent.match) {
+        res = true;
+        matchedByBranch = true;
+      }
+
+      if (res) {
+        count++;
+        node.match = true;
+        node.visitParents((p) => {
+          if (p !== node) {
+            p.subMatchCount! += 1;
+          }
+          // Expand match (unless this is no real match, but only a node in a matched branch)
+          if (opts.autoExpand && !matchedByBranch && !p.expanded) {
+            p.setExpanded(true, {
+              noAnimation: true,
+              noEvents: true,
+              scrollIntoView: false,
+            });
+            p._filterAutoExpanded = true;
+          }
+        }, true);
+      }
+    });
+    treeOpts.autoCollapse = prevAutoCollapse;
+
+    if (count === 0 && opts.noData && hideMode) {
+      tree.root.setStatus(NodeStatusType.noData);
+    }
+    // Redraw whole tree
+    tree.logInfo(
+      `Filter '${match}' found ${count} nodes in ${Date.now() - start} ms.`
+    );
+    return count;
+  }
+
+  /**
+   * [ext-filter] Dim or hide nodes.
+   *
+   * @param {boolean} [opts={autoExpand: false, leavesOnly: false}]
+   */
+  filterNodes(filter: string | NodeFilterCallback, opts: any) {
+    return this._applyFilterNoUpdate(filter, false, opts);
+  }
+
+  /**
+   * [ext-filter] Dim or hide whole branches.
+   *
+   * @param {boolean} [opts={autoExpand: false}]
+   */
+  filterBranches(filter: string | NodeFilterCallback, opts: any) {
+    return this._applyFilterNoUpdate(filter, true, opts);
+  }
+
+  /**
+   * [ext-filter] Re-apply current filter.
+   *
+   * @requires jquery.fancytree.filter.js
+   */
+  updateFilter() {
+    let tree = this.tree;
+    if (
+      tree.filterMode &&
+      this.lastFilterArgs &&
+      tree.options.filter.autoApply
+    ) {
+      this._applyFilterNoUpdate.apply(this, <any>this.lastFilterArgs);
+    } else {
+      tree.logWarn("updateFilter(): no filter active.");
+    }
+  }
+
+  /**
+   * [ext-filter] Reset the filter.
+   *
+   * @alias Fancytree#clearFilter
+   * @requires jquery.fancytree.filter.js
+   */
+  clearFilter() {
+    let tree = this.tree,
+      // statusNode = tree.root.findDirectChild(KEY_NODATA),
+      escapeTitles = tree.options.escapeTitles;
+    // enhanceTitle = tree.options.enhanceTitle,
+    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) {
+        // #491, #601
+        let titleElem = node._rowElem.querySelector("span.wb-title")!;
+        if (escapeTitles) {
+          titleElem.textContent = node.title;
+        } else {
+          titleElem.innerHTML = node.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,
+          noEvents: true,
+          scrollIntoView: false,
+        });
+      }
+      delete node._filterAutoExpanded;
+    });
+    tree.filterMode = null;
+    this.lastFilterArgs = null;
+    tree.element.classList.remove(
+      // "wb-ext-filter",
+      "wb-ext-filter-dim",
+      "wb-ext-filter-hide"
+    );
+    // tree._callHook("treeStructureChanged", this, "clearFilter");
+    // tree.render();
+    tree.enableUpdate(true);
+  }
+}
+
+/**
+ * @description Marks the matching charecters 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
+ * @param {RegExpMatchArray} matches
+ */
+function _markFuzzyMatchedChars(
+  text: string,
+  matches: RegExpMatchArray,
+  escapeTitles = false
+) {
+  let matchingIndices = [];
+  // get the indices of matched characters (Iterate through `RegExpMatchArray`)
+  for (
+    let _matchingArrIdx = 1;
+    _matchingArrIdx < matches.length;
+    _matchingArrIdx++
+  ) {
+    let _mIdx: number =
+      // get matching char index by cumulatively adding
+      // the matched group length
+      matches[_matchingArrIdx].length +
+      (_matchingArrIdx === 1 ? 0 : 1) +
+      (matchingIndices[matchingIndices.length - 1] || 0);
+    matchingIndices.push(_mIdx);
+  }
+  // Map each `text` char to its position and store in `textPoses`.
+  let textPoses = text.split("");
+  if (escapeTitles) {
+    // If escaping the title, then wrap the matchng char within exotic chars
+    matchingIndices.forEach(function (v) {
+      textPoses[v] = START_MARKER + textPoses[v] + END_MARKER;
+    });
+  } else {
+    // Otherwise, Wrap the matching chars within `mark`.
+    matchingIndices.forEach(function (v) {
+      textPoses[v] = "<mark>" + textPoses[v] + "</mark>";
+    });
+  }
+  // Join back the modified `textPoses` to create final highlight markup.
+  return textPoses.join("");
+}

package/src/wb_ext_keynav.ts

@@ -0,0 +1,210 @@
+/*!
+ * Wunderbaum - ext-keynav
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+
+import { NavigationMode, NavigationModeOption } from "./common";
+import { eventToString } from "./util";
+import { Wunderbaum } from "./wunderbaum";
+import { WunderbaumNode } from "./wb_node";
+import { WunderbaumExtension } from "./wb_extension_base";
+
+export class KeynavExtension extends WunderbaumExtension {
+  constructor(tree: Wunderbaum) {
+    super(tree, "keynav", {});
+  }
+
+  onKeyEvent(data: any): boolean | undefined {
+    let event = data.event,
+      eventName = eventToString(event),
+      focusNode,
+      node = data.node as WunderbaumNode,
+      tree = this.tree,
+      opts = data.options,
+      handled = true,
+      activate = !event.ctrlKey || opts.autoActivate;
+    const navModeOption = opts.navigationMode;
+
+    tree.logDebug(`onKeyEvent: ${eventName}`);
+
+    // Let callback prevent default processing
+    if (tree._callEvent("keydown", data) === false) {
+      return false;
+    }
+
+    // Let ext-edit trigger editing
+    if (tree._callMethod("edit._preprocessKeyEvent", data) === false) {
+      return false;
+    }
+
+    // Set focus to active (or first node) if no other node has the focus yet
+    if (!node) {
+      const activeNode = tree.getActiveNode();
+      const firstNode = tree.getFirstChild();
+
+      if (!activeNode && firstNode && eventName === "ArrowDown") {
+        firstNode.logInfo("Keydown: activate first node.");
+        firstNode.setActive();
+        return;
+      }
+
+      focusNode = activeNode || firstNode;
+      if (focusNode) {
+        focusNode.setFocus();
+        node = tree.getFocusNode()!;
+        node.logInfo("Keydown: force focus on active node.");
+      }
+    }
+
+    if (tree.navMode === NavigationMode.row) {
+      // --- Quick-Search
+      if (
+        opts.quicksearch &&
+        eventName.length === 1 &&
+        /^\w$/.test(eventName)
+        // && !$target.is(":input:enabled")
+      ) {
+        // Allow to search for longer streaks if typed in quickly
+        const stamp = Date.now();
+        if (stamp - tree.lastQuicksearchTime > 500) {
+          tree.lastQuicksearchTerm = "";
+        }
+        tree.lastQuicksearchTime = stamp;
+        tree.lastQuicksearchTerm += eventName;
+        let matchNode = tree.findNextNode(
+          tree.lastQuicksearchTerm,
+          tree.getActiveNode()
+        );
+        if (matchNode) {
+          matchNode.setActive(true, { event: event });
+        }
+        event.preventDefault();
+        return;
+      }
+
+      // Pre-Evaluate expand/collapse action for LEFT/RIGHT
+      switch (eventName) {
+        case "ArrowLeft":
+          if (node.expanded) {
+            eventName = "Subtract"; // collapse
+          }
+          break;
+        case "ArrowRight":
+          if (!node.expanded && (node.children || node.lazy)) {
+            eventName = "Add"; // expand
+          } else if (navModeOption === NavigationModeOption.startRow) {
+            tree.setCellMode(NavigationMode.cellNav);
+            return;
+          }
+          break;
+      }
+
+      // Standard navigation (row mode)
+      switch (eventName) {
+        case "+":
+        case "Add":
+          // case "=": // 187: '+' @ Chrome, Safari
+          node.setExpanded(true);
+          break;
+        case "-":
+        case "Subtract":
+          node.setExpanded(false);
+          break;
+        case " ":
+          // if (node.isPagingNode()) {
+          //   tree._triggerNodeEvent("clickPaging", ctx, event);
+          // } else
+          if (node.getOption("checkbox")) {
+            node.setSelected(!node.isSelected());
+          } else {
+            node.setActive(true, { event: event });
+          }
+          break;
+        case "Enter":
+          node.setActive(true, { event: event });
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "Backspace":
+        case "End":
+        case "Home":
+        case "Control+End":
+        case "Control+Home":
+        case "PageDown":
+        case "PageUp":
+          node.navigate(eventName, { activate: activate, event: event });
+          break;
+        default:
+          handled = false;
+      }
+    } else {
+      // Standard navigation (cell mode)
+      switch (eventName) {
+        case " ":
+          if (tree.activeColIdx === 0 && node.getOption("checkbox")) {
+            node.setSelected(!node.isSelected());
+            handled = true;
+          } else {
+            // [Space] key should trigger embedded checkbox
+            const elem = tree.getActiveColElem();
+            const cb = elem?.querySelector(
+              "input[type=checkbox]"
+            ) as HTMLInputElement;
+            cb?.click();
+          }
+          break;
+        case "Enter":
+          if (tree.activeColIdx === 0 && node.isExpandable()) {
+            node.setExpanded(!node.isExpanded());
+            handled = true;
+          }
+          break;
+        case "Escape":
+          if (tree.navMode === NavigationMode.cellEdit) {
+            tree.setCellMode(NavigationMode.cellNav);
+            handled = true;
+          } else if (tree.navMode === NavigationMode.cellNav) {
+            tree.setCellMode(NavigationMode.row);
+            handled = true;
+          }
+          break;
+        case "ArrowLeft":
+          if (tree.activeColIdx > 0) {
+            tree.setColumn(tree.activeColIdx - 1);
+            handled = true;
+          } else if (navModeOption !== NavigationModeOption.cell) {
+            tree.setCellMode(NavigationMode.row);
+            handled = true;
+          }
+          break;
+        case "ArrowRight":
+          if (tree.activeColIdx < tree.columns.length - 1) {
+            tree.setColumn(tree.activeColIdx + 1);
+            handled = true;
+          }
+          break;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Backspace":
+        case "End":
+        case "Home":
+        case "Control+End":
+        case "Control+Home":
+        case "PageDown":
+        case "PageUp":
+          node.navigate(eventName, { activate: activate, event: event });
+          break;
+        default:
+          handled = false;
+      }
+    }
+
+    if (handled) {
+      event.preventDefault();
+    }
+    return;
+  }
+}

package/src/wb_ext_logger.ts

@@ -0,0 +1,54 @@
+/*!
+ * Wunderbaum - ext-logger
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+
+import { overrideMethod } from "./util";
+import { WunderbaumExtension } from "./wb_extension_base";
+import { Wunderbaum } from "./wunderbaum";
+
+export class LoggerExtension extends WunderbaumExtension {
+  readonly prefix: string;
+  protected ignoreEvents = new Set<string>([
+    "enhanceTitle",
+    "render",
+    "discard",
+  ]);
+
+  constructor(tree: Wunderbaum) {
+    super(tree, "logger", {});
+    this.prefix = tree + ".ext-logger";
+  }
+
+  init() {
+    const tree = this.tree;
+
+    // this.ignoreEvents.add();
+
+    if (tree.getOption("debugLevel") >= 4) {
+      // const self = this;
+      const ignoreEvents = this.ignoreEvents;
+      const prefix = this.prefix;
+
+      overrideMethod(tree, "callEvent", function (name, extra) {
+        if (ignoreEvents.has(name)) {
+          return (<any>tree)._superApply(arguments);
+        }
+        let start = Date.now();
+        const res = (<any>tree)._superApply(arguments);
+        console.debug(
+          `${prefix}: callEvent('${name}') took ${Date.now() - start} ms.`,
+          arguments[1]
+        );
+        return res;
+      });
+    }
+  }
+
+  onKeyEvent(data: any): boolean | undefined {
+    // this.tree.logInfo("onKeyEvent", eventToString(data.event), data);
+    console.debug(`${this.prefix}: onKeyEvent()`, data);
+    return;
+  }
+}

package/src/wb_extension_base.ts

@@ -0,0 +1,76 @@
+/*!
+ * Wunderbaum - wb_extension_base
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+
+import * as util from "./util";
+import { Wunderbaum } from "./wunderbaum";
+
+export type ExtensionsDict = { [key: string]: WunderbaumExtension };
+
+export abstract class WunderbaumExtension {
+  public enabled = true;
+  readonly id: string;
+  readonly tree: Wunderbaum;
+  readonly treeOpts: any;
+  readonly extensionOpts: any;
+
+  constructor(tree: Wunderbaum, id: string, defaults: any) {
+    this.tree = tree;
+    this.id = id;
+    this.treeOpts = tree.options;
+
+    const opts = tree.options as any;
+
+    if (this.treeOpts[id] === undefined) {
+      opts[id] = this.extensionOpts = util.extend({}, defaults);
+    } else {
+      // TODO: do we break existing object instance references here?
+      this.extensionOpts = util.extend({}, defaults, opts[id]);
+      opts[id] = this.extensionOpts;
+    }
+    this.enabled = this.getPluginOption("enabled", true);
+  }
+
+  /** Called on tree (re)init after all extensions are added, but before loading.*/
+  init() {
+    this.tree.element.classList.add("wb-ext-" + this.id);
+  }
+
+  // protected callEvent(name: string, extra?: any): any {
+  //   let func = this.extensionOpts[name];
+  //   if (func) {
+  //     return func.call(
+  //       this.tree,
+  //       util.extend(
+  //         {
+  //           event: this.id + "." + name,
+  //         },
+  //         extra
+  //       )
+  //     );
+  //   }
+  // }
+
+  getPluginOption(name: string, defaultValue?: any): any {
+    return this.extensionOpts[name] ?? defaultValue;
+  }
+
+  setPluginOption(name: string, value: any): void {
+    this.extensionOpts[name] = value;
+  }
+
+  setEnabled(flag = true) {
+    return this.setPluginOption("enabled", !!flag);
+    // this.enabled = !!flag;
+  }
+
+  onKeyEvent(data: any): boolean | undefined {
+    return;
+  }
+
+  onRender(data: any): boolean | undefined {
+    return;
+  }
+}