wunderbaum 0.0.4 → 0.0.7

package/src/wb_ext_dnd.ts

@@ -8,162 +8,10 @@ import { EventCallbackType, onEvent } from "./util";
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumExtension } from "./wb_extension_base";
 import { WunderbaumNode } from "./wb_node";
-import { ROW_HEIGHT, WbNodeEventType } from "./common";
+import { DropRegionType, DropRegionTypeSet } from "./types";
+import { ROW_HEIGHT } from "./common";
 
 const nodeMimeType = "application/x-wunderbaum-node";
-export type DropRegionType = "over" | "before" | "after";
-type DropRegionTypeSet = Set<DropRegionType>;
-// type AllowedDropRegionType =
-//   | "after"
-//   | "afterBefore"
-//   // | "afterBeforeOver" // == all == true
-//   | "afterOver"
-//   | "all" // == true
-//   | "before"
-//   | "beforeOver"
-//   | "none" // == false == "" == null
-//   | "over"; // == "child"
-
-export type DndOptionsType = {
-  /**
-   * Expand nodes after n milliseconds of hovering
-   * Default: 1500
-   */
-  autoExpandMS: 1500;
-  // /**
-  //  * Additional offset for drop-marker with hitMode = "before"/"after"
-  //  * Default:
-  //  */
-  // dropMarkerInsertOffsetX: -16;
-  // /**
-  //  * Absolute position offset for .fancytree-drop-marker relatively to ..fancytree-title (icon/img near a node accepting drop)
-  //  * Default:
-  //  */
-  // dropMarkerOffsetX: -24;
-  // /**
-  //  * Root Container used for drop marker (could be a shadow root)
-  //  * (#1021 `document.body` is not available yet)
-  //  * Default:
-  //  */
-  // dropMarkerParent: "body";
-  /**
-   * true: Drag multiple (i.e. selected) nodes. Also a callback() is allowed
-   * Default: false
-   */
-  multiSource: false;
-  /**
-   * Restrict the possible cursor shapes and modifier operations (can also be set in the dragStart event)
-   * Default: "all"
-   */
-  effectAllowed: "all";
-  // /**
-  //  * 'copy'|'link'|'move'|'auto'(calculate from `effectAllowed`+modifier keys) or callback(node, data) that returns such string.
-  //  * Default:
-  //  */
-  // dropEffect: "auto";
-  /**
-   * Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (overide in dragDrag, dragOver).
-   * Default: "move"
-   */
-  dropEffectDefault: string;
-  /**
-   * Prevent dropping nodes from different Wunderbaum trees
-   * Default: false
-   */
-  preventForeignNodes: boolean;
-  /**
-   * Prevent dropping items on unloaded lazy Wunderbaum tree nodes
-   * Default: true
-   */
-  preventLazyParents: boolean;
-  /**
-   * Prevent dropping items other than Wunderbaum tree nodes
-   * Default: false
-   */
-  preventNonNodes: boolean;
-  /**
-   * Prevent dropping nodes on own descendants
-   * Default: true
-   */
-  preventRecursion: boolean;
-  /**
-   * Prevent dropping nodes under same direct parent
-   * Default: false
-   */
-  preventSameParent: false;
-  /**
-   * Prevent dropping nodes 'before self', etc. (move only)
-   * Default: true
-   */
-  preventVoidMoves: boolean;
-  /**
-   * Enable auto-scrolling while dragging
-   * Default: true
-   */
-  scroll: boolean;
-  /**
-   * Active top/bottom margin in pixel
-   * Default: 20
-   */
-  scrollSensitivity: 20;
-  /**
-   * Pixel per event
-   * Default: 5
-   */
-  scrollSpeed: 5;
-  // /**
-  //  * Allow dragging of nodes to different IE windows
-  //  * Default: false
-  //  */
-  // setTextTypeJson: boolean;
-  /**
-   * Optional callback passed to `toDict` on dragStart @since 2.38
-   * Default: null
-   */
-  sourceCopyHook: null;
-  // Events (drag support)
-  /**
-   * Callback(sourceNode, data), return true, to enable dnd drag
-   * Default: null
-   */
-  dragStart?: WbNodeEventType;
-  /**
-   * Callback(sourceNode, data)
-   * Default: null
-   */
-  dragDrag: null;
-  /**
-   * Callback(sourceNode, data)
-   * Default: null
-   */
-  dragEnd: null;
-  // Events (drop support)
-  /**
-   * Callback(targetNode, data), return true, to enable dnd drop
-   * Default: null
-   */
-  dragEnter: null;
-  /**
-   * Callback(targetNode, data)
-   * Default: null
-   */
-  dragOver: null;
-  /**
-   * Callback(targetNode, data), return false to prevent autoExpand
-   * Default: null
-   */
-  dragExpand: null;
-  /**
-   * Callback(targetNode, data)
-   * Default: null
-   */
-  dragDrop: null;
-  /**
-   * Callback(targetNode, data)
-   * Default: null
-   */
-  dragLeave: null;
-};
 
 export class DndExtension extends WunderbaumExtension {
   // public dropMarkerElem?: HTMLElement;
@@ -245,8 +93,9 @@ export class DndExtension extends WunderbaumExtension {
     const ltn = this.lastTargetNode;
     this.lastEnterStamp = 0;
     if (ltn) {
-      ltn.removeClass(
-        "wb-drop-target wb-drop-over wb-drop-after wb-drop-before"
+      ltn.setClass(
+        "wb-drop-target wb-drop-over wb-drop-after wb-drop-before",
+        false
       );
       this.lastTargetNode = null;
     }
@@ -295,7 +144,7 @@ export class DndExtension extends WunderbaumExtension {
   protected autoScroll(event: DragEvent): number {
     let tree = this.tree,
       dndOpts = tree.options.dnd!,
-      sp = tree.scrollContainer,
+      sp = tree.scrollContainerElement,
       sensitivity = dndOpts.scrollSensitivity,
       speed = dndOpts.scrollSpeed,
       scrolled = 0;
@@ -352,7 +201,7 @@ export class DndExtension extends WunderbaumExtension {
       setTimeout(() => {
         // Decouple this call, so the CSS is applied to the node, but not to
         // the system generated drag image
-        srcNode.addClass("wb-drag-source");
+        srcNode.setClass("wb-drag-source");
       }, 0);
 
       // --- drag ---
@@ -360,7 +209,7 @@ export class DndExtension extends WunderbaumExtension {
       // This event occurs very often...
       // --- dragend ---
     } else if (e.type === "dragend") {
-      srcNode.removeClass("wb-drag-source");
+      srcNode.setClass("wb-drag-source", false);
       this.srcNode = null;
       if (this.lastTargetNode) {
         this._leaveNode();
@@ -424,7 +273,7 @@ export class DndExtension extends WunderbaumExtension {
       }
       this.lastAllowedDropRegions = regionSet;
       this.lastDropEffect = dt.dropEffect;
-      targetNode.addClass("wb-drop-target");
+      targetNode.setClass("wb-drop-target");
 
       e.preventDefault(); // Allow drop (Drop operation is denied by default)
       return false;
@@ -450,9 +299,9 @@ export class DndExtension extends WunderbaumExtension {
       if (!region) {
         return; // We already rejected in dragenter
       }
-      targetNode.toggleClass("wb-drop-over", region === "over");
-      targetNode.toggleClass("wb-drop-before", region === "before");
-      targetNode.toggleClass("wb-drop-after", region === "after");
+      targetNode.setClass("wb-drop-over", region === "over");
+      targetNode.setClass("wb-drop-before", region === "before");
+      targetNode.setClass("wb-drop-after", region === "after");
       // console.log("dragover", e);
 
       // dt.dropEffect = this.lastDropEffect!;

package/src/wb_ext_edit.ts

@@ -17,7 +17,7 @@ import {
 } from "./util";
 import { debounce } from "./debounce";
 import { WunderbaumNode } from "./wb_node";
-import { AddNodeType, NavigationMode } from "./common";
+import { AddNodeType } from "./types";
 import { WbNodeData } from "./wb_options";
 
 // const START_MARKER = "\uFFF7";
@@ -63,14 +63,14 @@ export class EditExtension extends WunderbaumExtension {
 
     node.log(`_applyChange(${eventName})`, extra);
 
-    colElem.classList.add("wb-dirty");
+    colElem.classList.add("wb-busy");
     colElem.classList.remove("wb-error");
     try {
       res = node._callEvent(eventName, extra);
     } catch (err) {
       node.logError(`Error in ${eventName} event handler`, err);
       colElem.classList.add("wb-error");
-      colElem.classList.remove("wb-dirty");
+      colElem.classList.remove("wb-busy");
     }
     // Convert scalar return value to a resolved promise
     if (!(res instanceof Promise)) {
@@ -82,7 +82,7 @@ export class EditExtension extends WunderbaumExtension {
         colElem.classList.add("wb-error");
       })
       .finally(() => {
-        colElem.classList.remove("wb-dirty");
+        colElem.classList.remove("wb-busy");
       });
     return res;
   }
@@ -130,15 +130,14 @@ export class EditExtension extends WunderbaumExtension {
     const eventName = eventToString(event);
     const tree = this.tree;
     const trigger = this.getPluginOption("trigger");
-    const inputElem =
-      event.target && event.target.closest("input,[contenteditable]");
-    // let handled = true;
+    // const inputElem =
+    //   event.target && event.target.closest("input,[contenteditable]");
 
-    tree.logDebug(`_preprocessKeyEvent: ${eventName}`);
+    // tree.logDebug(`_preprocessKeyEvent: ${eventName}`);
 
     // --- Title editing: apply/discard ---
-    if (inputElem) {
-      //this.isEditingTitle()) {
+    // if (inputElem) {
+    if (this.isEditingTitle()) {
       switch (eventName) {
         case "Enter":
           this._stopEditTitle(true, { event: event });
@@ -152,7 +151,7 @@ export class EditExtension extends WunderbaumExtension {
       return false;
     }
     // --- Trigger title editing
-    if (tree.navMode === NavigationMode.row || tree.activeColIdx === 0) {
+    if (tree.isRowNav() || tree.activeColIdx === 0) {
       switch (eventName) {
         case "Enter":
           if (trigger.indexOf("macEnter") >= 0 && isMac) {
@@ -193,8 +192,9 @@ export class EditExtension extends WunderbaumExtension {
       node.logInfo("beforeEdit canceled operation.");
       return;
     }
-    // `beforeEdit(e)` may return an input HTML string. Otherwise use a default:
-    if (!inputHtml) {
+    // `beforeEdit(e)` may return an input HTML string. Otherwise use a default.
+    // (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>`;
     }
@@ -205,7 +205,7 @@ export class EditExtension extends WunderbaumExtension {
     titleSpan.innerHTML = inputHtml;
     const inputElem = titleSpan.firstElementChild as HTMLInputElement;
     if (validity) {
-      // Permanently apply  input validations (CSS and tooltip)
+      // Permanently apply input validations (CSS and tooltip)
       inputElem.addEventListener("keydown", (e) => {
         inputElem.setCustomValidity("");
         if (!inputElem.reportValidity()) {
@@ -336,7 +336,7 @@ export class EditExtension extends WunderbaumExtension {
       return;
     }
     const newNode = node.addNode(init, mode);
-    newNode.addClass("wb-edit-new");
+    newNode.setClass("wb-edit-new");
     this.relatedNode = node;
 
     // Don't filter new nodes:

package/src/wb_ext_filter.ts

@@ -11,7 +11,7 @@ import {
   extend,
   onEvent,
 } from "./util";
-import { NodeFilterCallback, NodeStatusType } from "./common";
+import { NodeFilterCallback, NodeStatusType } from "./types";
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumNode } from "./wb_node";
 import { WunderbaumExtension } from "./wb_extension_base";
@@ -28,6 +28,7 @@ export class FilterExtension extends WunderbaumExtension {
 
   constructor(tree: Wunderbaum) {
     super(tree, "filter", {
+      connectInput: null, // Element or selector of an input control for filter query strings
       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
@@ -36,16 +37,16 @@ export class FilterExtension extends WunderbaumExtension {
       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)
+      mode: "dim", // 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;
+    const connectInput = this.getPluginOption("connectInput");
+    if (connectInput) {
+      this.queryInput = elemFromSelector(connectInput) as HTMLInputElement;
       onEvent(
         this.queryInput,
         "input",
@@ -57,6 +58,17 @@ export class FilterExtension extends WunderbaumExtension {
     }
   }
 
+  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.updateFilter();
+        break;
+    }
+  }
+
   _applyFilterNoUpdate(
     filter: string | NodeFilterCallback,
     branchMode: boolean,

package/src/wb_ext_keynav.ts

@@ -4,29 +4,62 @@
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
-import { NavigationMode, NavigationModeOption } from "./common";
+import { NavigationOptions } from "./types";
 import { eventToString } from "./util";
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumNode } from "./wb_node";
 import { WunderbaumExtension } from "./wb_extension_base";
 
+const QUICKSEARCH_DELAY = 500;
+
 export class KeynavExtension extends WunderbaumExtension {
   constructor(tree: Wunderbaum) {
     super(tree, "keynav", {});
   }
 
+  protected _getEmbeddedInputElem(elem: any): HTMLInputElement | null {
+    let input = null;
+
+    if (elem && elem.type != null) {
+      input = elem;
+    } else {
+      // ,[contenteditable]
+      const ace = this.tree.getActiveColElem()?.querySelector("input,select");
+      if (ace) {
+        input = ace as HTMLInputElement;
+      }
+    }
+    return input;
+  }
+
+  /* Return true if the current cell's embedded input has keyboard focus. */
+  protected _isCurInputFocused(): boolean {
+    const ace = this.tree
+      .getActiveColElem()
+      ?.querySelector("input:focus,select:focus");
+    console.log(`_isCurInputFocused`, ace);
+    return !!ace;
+  }
+
   onKeyEvent(data: any): boolean | undefined {
-    let event = data.event,
-      eventName = eventToString(event),
-      focusNode,
-      node = data.node as WunderbaumNode,
+    const event = data.event,
       tree = this.tree,
       opts = data.options,
-      handled = true,
-      activate = !event.ctrlKey || opts.autoActivate;
-    const navModeOption = opts.navigationMode;
+      activate = !event.ctrlKey || opts.autoActivate,
+      curInput = this._getEmbeddedInputElem(event.target),
+      navModeOption = opts.navigationModeOption as NavigationOptions;
+    // isCellEditMode = tree.navMode === NavigationMode.cellEdit;
+
+    let focusNode,
+      eventName = eventToString(event),
+      node = data.node as WunderbaumNode,
+      handled = true;
 
-    tree.logDebug(`onKeyEvent: ${eventName}`);
+    // tree.log(`onKeyEvent: ${eventName}, curInput`, curInput);
+    if (!tree.isEnabled()) {
+      // tree.logDebug(`onKeyEvent ignored for disabled tree: ${eventName}`);
+      return false;
+    }
 
     // Let callback prevent default processing
     if (tree._callEvent("keydown", data) === false) {
@@ -40,34 +73,38 @@ export class KeynavExtension extends WunderbaumExtension {
 
     // Set focus to active (or first node) if no other node has the focus yet
     if (!node) {
-      const activeNode = tree.getActiveNode();
+      const currentNode = tree.getFocusNode() || tree.getActiveNode();
       const firstNode = tree.getFirstChild();
 
-      if (!activeNode && firstNode && eventName === "ArrowDown") {
+      if (!currentNode && firstNode && eventName === "ArrowDown") {
         firstNode.logInfo("Keydown: activate first node.");
         firstNode.setActive();
         return;
       }
 
-      focusNode = activeNode || firstNode;
+      focusNode = currentNode || firstNode;
       if (focusNode) {
         focusNode.setFocus();
         node = tree.getFocusNode()!;
         node.logInfo("Keydown: force focus on active node.");
       }
     }
+    const isColspan = node.isColspan();
 
-    if (tree.navMode === NavigationMode.row) {
+    if (tree.isRowNav()) {
+      // -----------------------------------------------------------------------
+      // --- Row Mode ---
+      // -----------------------------------------------------------------------
       // --- Quick-Search
       if (
         opts.quicksearch &&
         eventName.length === 1 &&
-        /^\w$/.test(eventName)
-        // && !$target.is(":input:enabled")
+        /^\w$/.test(eventName) &&
+        !curInput
       ) {
         // Allow to search for longer streaks if typed in quickly
         const stamp = Date.now();
-        if (stamp - tree.lastQuicksearchTime > 500) {
+        if (stamp - tree.lastQuicksearchTime > QUICKSEARCH_DELAY) {
           tree.lastQuicksearchTerm = "";
         }
         tree.lastQuicksearchTime = stamp;
@@ -93,8 +130,8 @@ export class KeynavExtension extends WunderbaumExtension {
         case "ArrowRight":
           if (!node.expanded && (node.children || node.lazy)) {
             eventName = "Add"; // expand
-          } else if (navModeOption === NavigationModeOption.startRow) {
-            tree.setNavigationMode(NavigationMode.cellNav);
+          } else if (navModeOption === NavigationOptions.startRow) {
+            tree.setCellNav();
             return;
           }
           break;
@@ -143,50 +180,111 @@ export class KeynavExtension extends WunderbaumExtension {
           handled = false;
       }
     } else {
-      // Standard navigation (cell mode)
+      // -----------------------------------------------------------------------
+      // --- Cell Mode ---
+      // -----------------------------------------------------------------------
+      // // Standard navigation (cell mode)
+      // if (isCellEditMode && INPUT_BREAKOUT_KEYS.has(eventName)) {
+      // }
+      const ENTER_EDITS = false;
+      const curInput = this._getEmbeddedInputElem(null);
+      const curInputType = curInput ? curInput.type || curInput.tagName : "";
+      const inputHasFocus = curInput && this._isCurInputFocused();
+      const inputCanFocus = curInput && curInputType !== "checkbox";
+
+      if (inputHasFocus) {
+        if (eventName === "Escape") {
+          // Discard changes
+          node.render();
+          // } else if (!INPUT_BREAKOUT_KEYS.has(eventName)) {
+        } else if (eventName !== "Enter") {
+          // Let current `<input>` handle it
+          node.logDebug(`Ignored ${eventName} inside focused input`);
+          return;
+        }
+        // const curInputType = curInput.type || curInput.tagName;
+        // const breakoutKeys = INPUT_KEYS[curInputType];
+        // if (!breakoutKeys.includes(eventName)) {
+        //   node.logDebug(`Ignored ${eventName} inside ${curInputType} input`);
+        //   return;
+        // }
+      } else if (curInput) {
+        // On a cell that has an embedded, unfocused <input>
+        if (eventName.length === 1 && inputCanFocus) {
+          curInput.focus();
+          curInput.value = "";
+          node.logDebug(`Focus imput: ${eventName}`);
+          return false;
+        }
+      }
+      if (eventName === "Tab") {
+        eventName = "ArrowRight";
+        handled = true;
+      } else if (eventName === "Shift+Tab") {
+        eventName = tree.activeColIdx > 0 ? "ArrowLeft" : "";
+        handled = true;
+      } else if (ENTER_EDITS && eventName === "Enter") {
+        eventName = "F2";
+      }
+
       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();
+          } else if (curInput && curInputType === "checkbox") {
+            curInput.click();
+            // toggleCheckbox(curInput)
+            // new Event("change")
+            // curInput.change
+            handled = true;
+          }
+          break;
+        case "F2":
+          if (curInput && !inputHasFocus && inputCanFocus) {
+            curInput.focus();
+            handled = true;
           }
           break;
         case "Enter":
+          tree.setFocus(); // Blur prev. input if any
           if (tree.activeColIdx === 0 && node.isExpandable()) {
             node.setExpanded(!node.isExpanded());
             handled = true;
+          } else if (curInput && !inputHasFocus && inputCanFocus) {
+            curInput.focus();
+            handled = true;
           }
           break;
         case "Escape":
-          if (tree.navMode === NavigationMode.cellEdit) {
-            tree.setNavigationMode(NavigationMode.cellNav);
-            handled = true;
-          } else if (tree.navMode === NavigationMode.cellNav) {
-            tree.setNavigationMode(NavigationMode.row);
+          tree.setFocus(); // Blur prev. input if any
+          if (tree.isCellNav() && navModeOption !== NavigationOptions.cell) {
+            tree.setCellNav(false); // row-nav mode
             handled = true;
           }
           break;
         case "ArrowLeft":
-          if (tree.activeColIdx > 0) {
+          tree.setFocus(); // Blur prev. input if any
+          if (isColspan && node.isExpanded()) {
+            node.setExpanded(false);
+          } else if (!isColspan && tree.activeColIdx > 0) {
             tree.setColumn(tree.activeColIdx - 1);
-            handled = true;
-          } else if (navModeOption !== NavigationModeOption.cell) {
-            tree.setNavigationMode(NavigationMode.row);
-            handled = true;
+          } else if (navModeOption !== NavigationOptions.cell) {
+            tree.setCellNav(false); // row-nav mode
           }
+          handled = true;
           break;
         case "ArrowRight":
-          if (tree.activeColIdx < tree.columns.length - 1) {
+          tree.setFocus(); // Blur prev. input if any
+          if (isColspan && !node.isExpanded()) {
+            node.setExpanded();
+          } else if (
+            !isColspan &&
+            tree.activeColIdx < tree.columns.length - 1
+          ) {
             tree.setColumn(tree.activeColIdx + 1);
-            handled = true;
           }
+          handled = true;
           break;
         case "ArrowDown":
         case "ArrowUp":
@@ -200,6 +298,10 @@ export class KeynavExtension extends WunderbaumExtension {
         case "PageDown":
         case "PageUp":
           node.navigate(eventName, { activate: activate, event: event });
+          // if (isCellEditMode) {
+          //   this._getEmbeddedInputElem(null, true); // set focus to input
+          // }
+          handled = true;
           break;
         default:
           handled = false;

package/src/wb_ext_logger.ts

@@ -35,7 +35,7 @@ export class LoggerExtension extends WunderbaumExtension {
         if (ignoreEvents.has(name)) {
           return (<any>tree)._superApply(arguments);
         }
-        let start = Date.now();
+        const start = Date.now();
         const res = (<any>tree)._superApply(arguments);
         console.debug(
           `${prefix}: callEvent('${name}') took ${Date.now() - start} ms.`,