wunderbaum 0.0.1 → 0.0.2

package/src/drag_observer.ts

@@ -0,0 +1,169 @@
+/*!
+ * Wunderbaum - drag_observer
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+import * as util from "./util";
+
+export type DragCallbackArgType = {
+  /** "dragstart", "drag", or "dragstop". */
+  type: string;
+  /** Original mouse or touch event that triggered the drag event. */
+  event: MouseEvent | TouchEvent;
+  /** Element which is currently dragged. */
+  dragElem: HTMLElement | null;
+  /** Relative horizontal drag distance since start. */
+  dx: number;
+  /** Relative vertical drag distance since start. */
+  dy: number;
+  /** False if drag was canceled. */
+  apply?: boolean;
+};
+export type DragCallbackType = (e: DragCallbackArgType) => boolean | void;
+type DragObserverOptionsType = {
+  /**Event target (typically `window.document`). */
+  root: EventTarget;
+  /**Event delegation selector.*/
+  selector?: string;
+  /**Minimum drag distance in px. */
+  thresh?: number;
+  /**Return `false` to cancel drag. */
+  dragstart: DragCallbackType;
+  drag?: DragCallbackType;
+  dragstop?: DragCallbackType;
+};
+
+/**
+ * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
+ */
+export class DragObserver {
+  protected _handler;
+  protected root: EventTarget;
+  protected start = {
+    x: 0,
+    y: 0,
+    altKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+  };
+  protected dragElem: HTMLElement | null = null;
+  protected dragging: boolean = false;
+  // TODO: touch events
+  protected events = ["mousedown", "mouseup", "mousemove", "keydown"];
+  protected opts: DragObserverOptionsType;
+
+  constructor(opts: DragObserverOptionsType) {
+    util.assert(opts.root);
+    this.opts = util.extend({ thresh: 5 }, opts);
+    this.root = opts.root;
+    this._handler = this.handleEvent.bind(this) as EventListener;
+    this.events.forEach((type) => {
+      this.root.addEventListener(type, this._handler);
+    });
+  }
+  /** Unregister all event listeners. */
+  disconnect() {
+    this.events.forEach((type) => {
+      this.root.removeEventListener(type, this._handler);
+    });
+  }
+
+  public getDragElem(): HTMLElement | null {
+    return this.dragElem;
+  }
+
+  public isDragging(): boolean {
+    return this.dragging;
+  }
+
+  public stopDrag(cb_event?: DragCallbackArgType): void {
+    if (this.dragging && this.opts.dragstop && cb_event) {
+      cb_event.type = "dragstop";
+      this.opts.dragstop(cb_event);
+    }
+    this.dragElem = null;
+    this.dragging = false;
+  }
+
+  protected handleEvent(e: MouseEvent): boolean | void {
+    const type = e.type;
+    const opts = this.opts;
+    const cb_event: DragCallbackArgType = {
+      type: e.type,
+      event: e,
+      dragElem: this.dragElem,
+      dx: e.pageX - this.start.x,
+      dy: e.pageY - this.start.y,
+      apply: undefined,
+    };
+    switch (type) {
+      case "keydown":
+        this.stopDrag(cb_event);
+        break;
+      case "mousedown":
+        if (this.dragElem) {
+          this.stopDrag(cb_event);
+          break;
+        }
+        if (opts.selector) {
+          let elem = e.target as HTMLElement;
+          if (elem.matches(opts.selector)) {
+            this.dragElem = elem;
+          } else {
+            elem = elem.closest(opts.selector) as HTMLElement;
+            if (elem) {
+              this.dragElem = elem;
+            } else {
+              break; // no event delegation selector matched
+            }
+          }
+        }
+        this.start.x = e.pageX;
+        this.start.y = e.pageY;
+        this.start.altKey = e.altKey;
+        this.start.ctrlKey = e.ctrlKey;
+        this.start.metaKey = e.metaKey;
+        this.start.shiftKey = e.shiftKey;
+        break;
+
+      case "mousemove":
+        // TODO: debounce/throttle?
+        // TODO: horizontal mode: ignore if dx unchanged
+        if (!this.dragElem) {
+          break;
+        }
+        if (!this.dragging) {
+          if (opts.thresh) {
+            const dist2 = cb_event.dx * cb_event.dx + cb_event.dy * cb_event.dy;
+            if (dist2 < opts.thresh * opts.thresh) {
+              break;
+            }
+          }
+          cb_event.type = "dragstart";
+          if (opts.dragstart(cb_event) === false) {
+            this.stopDrag(cb_event);
+            break;
+          }
+          this.dragging = true;
+        }
+        if (this.dragging && this.opts.drag) {
+          cb_event.type = "drag";
+          this.opts.drag(cb_event);
+        }
+        break;
+      case "mouseup":
+        if (!this.dragging) {
+          this.stopDrag(cb_event);
+          break;
+        }
+        if (e.button === 0) {
+          cb_event.apply = true;
+        } else {
+          cb_event.apply = false;
+        }
+        this.stopDrag(cb_event);
+        break;
+    }
+  }
+}

package/src/util.ts

@@ -16,7 +16,7 @@ export const MOUSE_BUTTONS: { [key: number]: string } = {
 
 export const MAX_INT = 9007199254740991;
 const userInfo = _getUserInfo();
-/**True if the user is using a macOS platform. */
+/**True if the client is using a macOS platform. */
 export const isMac = userInfo.isMac;
 
 const REX_HTML = /[&<>"'/]/g; // Escape those characters
@@ -186,7 +186,7 @@ export function escapeTooltip(s: string): string {
 /** TODO */
 export function extractHtmlText(s: string) {
   if (s.indexOf(">") >= 0) {
-    error("not implemented");
+    error("Not implemented");
     // return $("<div/>").html(s).text();
   }
   return s;
@@ -315,7 +315,7 @@ export function setValueToElem(elem: HTMLElement, value: any): void {
         input.valueAsNumber = value;
         break;
       case "radio":
-        assert(false, "not implemented");
+        error("Not implemented");
         // const name = input.name;
         // const checked = input.parentElement!.querySelector(
         //   `input[name="${name}"]:checked`
@@ -338,7 +338,7 @@ export function setValueToElem(elem: HTMLElement, value: any): void {
   // return value;
 }
 
-/** Return an unconnected `HTMLElement` from a HTML string. */
+/** Create and return an unconnected `HTMLElement` from a HTML string. */
 export function elemFromHtml(html: string): HTMLElement {
   const t = document.createElement("template");
   t.innerHTML = html.trim();
@@ -358,11 +358,26 @@ export function elemFromSelector(obj: string | Element): HTMLElement | null {
   return obj as HTMLElement;
 }
 
+/** Return a EventTarget from selector or cast an existing element. */
+export function eventTargetFromSelector(
+  obj: string | EventTarget
+): EventTarget | null {
+  if (!obj) {
+    return null;
+  }
+  if (typeof obj === "string") {
+    return document.querySelector(obj) as EventTarget;
+  }
+  return obj as EventTarget;
+}
+
 /**
- * Return a descriptive string for a keyboard or mouse event.
+ * Return a canonical descriptive string for a keyboard or mouse event.
  *
  * The result also contains a prefix for modifiers if any, for example
  * `"x"`, `"F2"`, `"Control+Home"`, or `"Shift+clickright"`.
+ * This is especially useful in `switch` statements, to make sure that modifier
+ * keys are considered and handled correctly.
  */
 export function eventToString(event: Event): string {
   let key = (<KeyboardEvent>event).key,
@@ -397,6 +412,13 @@ export function eventToString(event: Event): string {
   return s.join("+");
 }
 
+/**
+ * Copy allproperties from one or more source objects to a target object.
+ *
+ * @returns the modified target object.
+ */
+// TODO: use Object.assign()? --> https://stackoverflow.com/a/42740894
+// TODO: support deep merge --> https://stackoverflow.com/a/42740894
 export function extend(...args: any[]) {
   for (let i = 1; i < args.length; i++) {
     let arg = args[i];
@@ -412,18 +434,22 @@ export function extend(...args: any[]) {
   return args[0];
 }
 
+/** Return true if `obj` is of type `array`. */
 export function isArray(obj: any) {
   return Array.isArray(obj);
 }
 
+/** Return true if `obj` is of type `Object` and has no propertied. */
 export function isEmptyObject(obj: any) {
   return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
 
+/** Return true if `obj` is of type `function`. */
 export function isFunction(obj: any) {
   return typeof obj === "function";
 }
 
+/** Return true if `obj` is of type `Object`. */
 export function isPlainObject(obj: any) {
   return Object.prototype.toString.call(obj) === "[object Object]";
 }
@@ -432,14 +458,14 @@ export function isPlainObject(obj: any) {
 export function noop(...args: any[]): any {}
 
 /**
- * Bind one or more event handlers directly to an [[HtmlElement]].
+ * Bind one or more event handlers directly to an [[EventTarget]].
  *
- * @param element HTMLElement or selector
+ * @param element EventTarget or selector
  * @param eventNames
  * @param handler
  */
 export function onEvent(
-  rootElem: HTMLElement | string,
+  rootTarget: EventTarget | string,
   eventNames: string,
   handler: EventCallbackType
 ): void;
@@ -455,26 +481,26 @@ export function onEvent(
  * });
  * ```
  *
- * @param element HTMLElement or selector
+ * @param element EventTarget or selector
  * @param eventNames
  * @param selector
  * @param handler
  */
 export function onEvent(
-  rootElem: HTMLElement | string,
+  rootTarget: EventTarget | string,
   eventNames: string,
   selector: string,
   handler: EventCallbackType
 ): void;
 
 export function onEvent(
-  rootElem: HTMLElement | string,
+  rootTarget: EventTarget | string,
   eventNames: string,
   selectorOrHandler: string | EventCallbackType,
   handlerOrNone?: EventCallbackType
 ): void {
   let selector: string | null, handler: EventCallbackType;
-  rootElem = elemFromSelector(rootElem)!;
+  rootTarget = eventTargetFromSelector(rootTarget)!;
 
   if (handlerOrNone) {
     selector = selectorOrHandler as string;
@@ -485,7 +511,7 @@ export function onEvent(
   }
 
   eventNames.split(" ").forEach((evn) => {
-    (<HTMLElement>rootElem).addEventListener(evn, function (e) {
+    (<EventTarget>rootTarget).addEventListener(evn, function (e) {
       if (!selector) {
         return handler!(e); // no event delegation
       } else if (e.target) {
@@ -578,6 +604,13 @@ export async function sleep(ms: number) {
 
 /**
  * Set or rotate checkbox status with support for tri-state.
+ *
+ * An initial 'indeterminate' state becomes 'checked' on the first call.
+ *
+ * If the input element has the class 'wb-tristate' assigned, the sequence is:<br>
+ * 'indeterminate' -> 'checked' -> 'unchecked' -> 'indeterminate' -> ...<br>
+ * Otherwise we toggle like <br>
+ * 'checked' -> 'unchecked' -> 'checked' -> ...
  */
 export function toggleCheckbox(
   element: HTMLElement | string,
@@ -648,6 +681,7 @@ export function toSet(val: any): Set<string> {
   throw new Error("Cannot convert to Set<string>: " + val);
 }
 
+/**Return a canonical string representation for an object's type (e.g. 'array', 'number', ...) */
 export function type(obj: any): string {
   return Object.prototype.toString
     .call(obj)

package/src/wb_ext_dnd.ts

@@ -8,7 +8,7 @@ import { EventCallbackType, onEvent } from "./util";
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumExtension } from "./wb_extension_base";
 import { WunderbaumNode } from "./wb_node";
-import { ROW_HEIGHT } from "./common";
+import { ROW_HEIGHT, WbNodeEventType } from "./common";
 
 const nodeMimeType = "application/x-wunderbaum-node";
 export type DropRegionType = "over" | "before" | "after";
@@ -24,6 +24,147 @@ type DropRegionTypeSet = Set<DropRegionType>;
 //   | "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;
   protected srcNode: WunderbaumNode | null = null;
@@ -78,7 +219,7 @@ export class DndExtension extends WunderbaumExtension {
     // 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) {
@@ -153,7 +294,7 @@ export class DndExtension extends WunderbaumExtension {
   /* Implement auto scrolling when drag cursor is in top/bottom area of scroll parent. */
   protected autoScroll(event: DragEvent): number {
     let tree = this.tree,
-      dndOpts = tree.options.dnd,
+      dndOpts = tree.options.dnd!,
       sp = tree.scrollContainer,
       sensitivity = dndOpts.scrollSensitivity,
       speed = dndOpts.scrollSpeed,

package/src/wb_ext_filter.ts

@@ -9,7 +9,6 @@ import {
   escapeHtml,
   escapeRegex,
   extend,
-  extractHtmlText,
   onEvent,
 } from "./util";
 import { NodeFilterCallback, NodeStatusType } from "./common";
@@ -79,7 +78,7 @@ export class FilterExtension extends WunderbaumExtension {
       count = 0,
       tree = this.tree,
       treeOpts = tree.options,
-      escapeTitles = treeOpts.escapeTitles,
+      // escapeTitles = treeOpts.escapeTitles,
       prevAutoCollapse = treeOpts.autoCollapse,
       opts = extend({}, treeOpts.filter, _opts),
       hideMode = opts.mode === "hide",
@@ -118,35 +117,36 @@ export class FilterExtension extends WunderbaumExtension {
         if (!node.title) {
           return false;
         }
-        let text = escapeTitles ? node.title : extractHtmlText(node.title);
+        // let text = escapeTitles ? node.title : extractHtmlText(node.title);
+        let text = 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. `"`
-              // 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>");
+          // if (escapeTitles) {
+          if (opts.fuzzy) {
+            temp = _markFuzzyMatchedChars(text, res, true);
           } else {
-            if (opts.fuzzy) {
-              node.titleWithHighlight = _markFuzzyMatchedChars(text, res);
-            } else {
-              node.titleWithHighlight = text.replace(reHighlight, function (s) {
-                return "<mark>" + s + "</mark>";
-              });
-            }
+            // #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;
@@ -266,9 +266,9 @@ export class FilterExtension extends WunderbaumExtension {
    * [ext-filter] Reset the filter.
    */
   clearFilter() {
-    let tree = this.tree,
-      // statusNode = tree.root.findDirectChild(KEY_NODATA),
-      escapeTitles = tree.options.escapeTitles;
+    let tree = this.tree;
+    // statusNode = tree.root.findDirectChild(KEY_NODATA),
+    // escapeTitles = tree.options.escapeTitles;
     // enhanceTitle = tree.options.enhanceTitle,
     tree.enableUpdate(false);
 
@@ -284,11 +284,11 @@ export class FilterExtension extends WunderbaumExtension {
       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;
-        }
+        // if (escapeTitles) {
+        titleElem.textContent = node.title;
+        // } else {
+        //   titleElem.innerHTML = node.title;
+        // }
         node._callEvent("enhanceTitle", { titleElem: titleElem });
       }
       delete node.match;
@@ -330,7 +330,7 @@ export class FilterExtension extends WunderbaumExtension {
 function _markFuzzyMatchedChars(
   text: string,
   matches: RegExpMatchArray,
-  escapeTitles = false
+  escapeTitles = true
 ) {
   let matchingIndices = [];
   // get the indices of matched characters (Iterate through `RegExpMatchArray`)
@@ -350,7 +350,7 @@ function _markFuzzyMatchedChars(
   // 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
+    // If escaping the title, then wrap the matching char within exotic chars
     matchingIndices.forEach(function (v) {
       textPoses[v] = START_MARKER + textPoses[v] + END_MARKER;
     });

package/src/wb_ext_grid.ts

@@ -0,0 +1,45 @@
+/*!
+ * Wunderbaum - ext-grid
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+import { Wunderbaum } from "./wunderbaum";
+import { WunderbaumExtension } from "./wb_extension_base";
+import { DragCallbackArgType, DragObserver } from "./drag_observer";
+
+export class GridExtension extends WunderbaumExtension {
+  protected observer: DragObserver;
+
+  constructor(tree: Wunderbaum) {
+    super(tree, "grid", {
+      // throttle: 200,
+    });
+
+    this.observer = new DragObserver({
+      root: window.document,
+      selector: "span.wb-col-resizer",
+      thresh: 4,
+      // throttle: 400,
+      dragstart: (e) => {
+        return this.tree.element.contains(e.dragElem);
+      },
+      drag: (e) => {
+        // TODO: throttle
+        return this.handleDrag(e);
+      },
+      dragstop: (e) => {
+        return this.handleDrag(e);
+      },
+    });
+  }
+
+  init() {
+    super.init();
+  }
+
+  protected handleDrag(e: DragCallbackArgType): void {
+    const info = Wunderbaum.getEventInfo(e.event);
+    // this.tree.options.
+    this.tree.log(`${e.type}(${e.dx})`, e, info);
+  }
+}