wunderbaum 0.9.0 → 0.10.1

package/src/common.ts

@@ -26,6 +26,8 @@ export const TITLE_SPAN_PAD_Y = 7;
 export const RENDER_MAX_PREFETCH = 5;
 /** Skip rendering new rows when we have at least N nodes rendeed above and below the viewport. */
 export const RENDER_MIN_PREFETCH = 5;
+/** Minimum column width if not set otherwise. */
+export const DEFAULT_MIN_COL_WIDTH = 4;
 /** Regular expression to detect if a string describes an image URL (in contrast
  * to a class name). Strings are considered image urls if they contain '.' or '/'.
  */

package/src/drag_observer.ts

@@ -7,8 +7,15 @@
 export type DragCallbackArgType = {
   /** "dragstart", "drag", or "dragstop". */
   type: string;
-  /** Original mouse or touch event that triggered the drag event. */
+  /** Original mousedown or touch event that triggered the dragstart event. */
+  startEvent: MouseEvent | TouchEvent;
+  /** Original mouse or touch event that triggered the current drag event.
+   * Note that this is not the same as `startEvent`, but a mousemove in case of
+   * a dragstart threshold.
+   */
   event: MouseEvent | TouchEvent;
+  /** Custom data that was passed to the DragObserver, typically on dragstart. */
+  customData: any;
   /** Element which is currently dragged. */
   dragElem: HTMLElement | null;
   /** Relative horizontal drag distance since start. */
@@ -38,7 +45,16 @@ type DragObserverOptionsType = {
 export class DragObserver {
   protected _handler;
   protected root: EventTarget;
-  protected start = {
+  protected start: {
+    event: MouseEvent | TouchEvent | null;
+    x: number;
+    y: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+  } = {
+    event: null,
     x: 0,
     y: 0,
     altKey: false,
@@ -48,6 +64,7 @@ export class DragObserver {
   };
   protected dragElem: HTMLElement | null = null;
   protected dragging: boolean = false;
+  protected customData: object = {};
   // TODO: touch events
   protected events = ["mousedown", "mouseup", "mousemove", "keydown"];
   protected opts: DragObserverOptionsType;
@@ -81,10 +98,16 @@ export class DragObserver {
   public stopDrag(cb_event?: DragCallbackArgType): void {
     if (this.dragging && this.opts.dragstop && cb_event) {
       cb_event.type = "dragstop";
-      this.opts.dragstop(cb_event);
+      try {
+        this.opts.dragstop(cb_event);
+      } catch (err) {
+        console.error("dragstop error", err); // eslint-disable-line no-console
+      }
     }
     this.dragElem = null;
     this.dragging = false;
+    this.start.event = null;
+    this.customData = {};
   }
 
   protected handleEvent(e: MouseEvent): boolean | void {
@@ -92,12 +115,17 @@ export class DragObserver {
     const opts = this.opts;
     const cb_event: DragCallbackArgType = {
       type: e.type,
+      startEvent: type === "mousedown" ? e : this.start.event!,
       event: e,
+      customData: this.customData,
       dragElem: this.dragElem,
       dx: e.pageX - this.start.x,
       dy: e.pageY - this.start.y,
       apply: undefined,
     };
+
+    // console.log("handleEvent", type, cb_event);
+
     switch (type) {
       case "keydown":
         this.stopDrag(cb_event);
@@ -120,6 +148,7 @@ export class DragObserver {
             }
           }
         }
+        this.start.event = e;
         this.start.x = e.pageX;
         this.start.y = e.pageY;
         this.start.altKey = e.altKey;

package/src/types.ts

@@ -12,6 +12,8 @@ import { WunderbaumOptions } from "./wb_options";
 export type TristateType = boolean | undefined;
 /** Show/hide checkbox or display a radiobutton icon instead. */
 export type CheckboxOption = boolean | "radio";
+/** A value that can either be true, false, or undefined. */
+export type SortOrderType = "asc" | "desc" | undefined;
 /** An icon may either be
  * a string-tag that references an entry in the `iconMap` (e.g. `"folderOpen"`)),
  * an HTML string that contains a `<` and is used as-is,
@@ -348,6 +350,23 @@ export interface ColumnDefinition {
    * Default: `4px`.
    */
   minWidth?: string | number;
+  /** Allow user to resize the column.
+   * Default: false.
+   */
+  resizable?: boolean;
+  /** Optional custom column width when user resized by mouse drag.
+   * Default: unset.
+   */
+  customWidthPx?: number;
+  /** Allow user to sort the column. Default: false. <br>
+   * **Note:** Sorting is not implemented yet.
+   */
+  sortable?: boolean;
+  /** Optional custom column sort orde when user clicked the sort icon.
+   * Default: unset. <br>
+   * **Note:** Sorting is not implemented yet.
+   */
+  sortOrder?: SortOrderType;
   /** Optional class names that are added to all `span.wb-col` header AND data
    * elements of that column.
    */

package/src/util.ts

@@ -521,7 +521,7 @@ export function isArray(obj: any) {
   return Array.isArray(obj);
 }
 
-/** Return true if `obj` is of type `Object` and has no propertied. */
+/** Return true if `obj` is of type `Object` and has no properties. */
 export function isEmptyObject(obj: any) {
   return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
@@ -764,6 +764,58 @@ export function toSet(val: any): Set<string> {
   throw new Error("Cannot convert to Set<string>: " + val);
 }
 
+/** Convert a pixel string to number.
+ * We accept a number or a string like '123px'. If undefined, the first default
+ * value that is a number or a string ending with 'px' is returned.
+ *
+ * Example:
+ * ```js
+ * let x = undefined;
+ * let y = "123px";
+ * const width = util.toPixel(x, y, 100);  // returns 123
+ * ```
+ */
+export function toPixel(
+  // val: string | number | undefined | null,
+  ...defaults: (string | number | undefined | null)[]
+): number {
+  // if (typeof val === "number") {
+  //   return val;
+  // }
+  for (const d of defaults) {
+    if (typeof d === "number") {
+      return d;
+    }
+    if (typeof d === "string" && d.endsWith("px")) {
+      return parseInt(d, 10);
+    }
+    assert(d == null, `Expected a number or string like '123px': ${d}`);
+  }
+  throw new Error(`Expected a string like '123px': ${defaults}`);
+}
+
+/** Return the the boolean value of the first non-null element.
+ * Example:
+ * ```js
+ * const opts = { flag: true };
+ * const value = util.toBool(opts.foo, opts.flag, false);  // returns true
+ * ```
+ */
+export function toBool(
+  // val: boolean | undefined | null,
+  ...boolDefaults: (boolean | undefined | null)[]
+): boolean {
+  // if (val != null) {
+  //   return !!val;
+  // }
+  for (const d of boolDefaults) {
+    if (d != null) {
+      return !!d;
+    }
+  }
+  throw new Error("No default boolean value provided");
+}
+
 // /** Check if a string is contained in an Array or Set. */
 // export function isAnyOf(s: string, items: Array<string>|Set<string>): boolean {
 //   return Array.prototype.includes.call(items, s)

package/src/wb_ext_filter.ts

@@ -52,6 +52,10 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     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",

package/src/wb_ext_grid.ts

@@ -6,7 +6,9 @@
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumExtension } from "./wb_extension_base";
 import { DragCallbackArgType, DragObserver } from "./drag_observer";
-import { GridOptionsType } from "./types";
+import { ChangeType, ColumnDefinition, GridOptionsType } from "./types";
+import { DEFAULT_MIN_COL_WIDTH } from "./common";
+import { toBool, toPixel } from "./util";
 
 export class GridExtension extends WunderbaumExtension<GridOptionsType> {
   protected observer: DragObserver;
@@ -18,11 +20,47 @@ export class GridExtension extends WunderbaumExtension<GridOptionsType> {
 
     this.observer = new DragObserver({
       root: window.document,
-      selector: "span.wb-col-resizer",
+      selector: "span.wb-col-resizer-active",
       thresh: 4,
       // throttle: 400,
       dragstart: (e) => {
-        return this.tree.element.contains(e.dragElem);
+        const info = Wunderbaum.getEventInfo(e.startEvent);
+        const colDef = info.colDef!;
+        const allow =
+          colDef &&
+          this.tree.element.contains(e.dragElem) &&
+          toBool(colDef.resizable, tree.options.resizableColumns, false);
+
+        // this.tree.log("dragstart", colDef, e, info);
+
+        this.tree.element.classList.toggle("wb-col-resizing", !!allow);
+        info.colElem!.classList.toggle("wb-col-resizing", !!allow);
+
+        // We start dagging, so we remember the actual width in *pixels*
+        // (which may be 'auto' or '100%').
+        // Since we we re-create the markup on each update, we also cannot store
+        // the original event or DOM element, but only the colDef object.
+        if (allow) {
+          // Store initial target column infos in customData
+          e.customData.colDef = colDef;
+          e.customData.orgCustomWidthPx = colDef.customWidthPx;
+          const curWidthPx = Number.parseInt(info.colElem!.style.width, 10);
+          e.customData.orgWidthPx = curWidthPx;
+          // Set custom width to current width, so that we can modify it
+          colDef.customWidthPx = curWidthPx;
+          // this.tree.log(
+          //   `dragstart customWidthPx=${colDef.customWidthPx}`,
+          //   e,
+          //   info
+          // );
+          this.tree.update(ChangeType.colStructure);
+          // this.tree.log(
+          //   `dragstart 2 customWidthPx=${colDef.customWidthPx}`,
+          //   e,
+          //   info
+          // );
+        }
+        return allow;
       },
       drag: (e) => {
         // TODO: throttle
@@ -38,9 +76,31 @@ export class GridExtension extends WunderbaumExtension<GridOptionsType> {
     super.init();
   }
 
+  /**
+   * Hanldes drag and sragstop events for column resizing.
+   */
   protected handleDrag(e: DragCallbackArgType): void {
-    const info = Wunderbaum.getEventInfo(e.event);
-    // this.tree.options.
-    this.tree.log(`${e.type}(${e.dx})`, e, info);
+    const custom = e.customData;
+    const colDef = <ColumnDefinition>custom.colDef!;
+    // this.tree.log(`${e.type} (dx=${e.dx})`, e, info);
+
+    if (e.type === "dragstop" || e.type === "drag") {
+      this.tree.element.classList.remove("wb-col-resizing");
+      // info.colElem!.classList.remove("wb-col-resizing");
+      if (e.apply || e.type === "drag") {
+        const minWidth = toPixel(colDef.minWidth, DEFAULT_MIN_COL_WIDTH);
+        const newWidth = Math.max(minWidth, custom.orgWidthPx + e.dx);
+        colDef.customWidthPx = newWidth;
+        // this.tree.log(
+        //   `${e.type} minWidth=${minWidth}, newWidth=${newWidth}`,
+        //   colDef
+        // );
+      } else {
+        // Drag was cancelled
+        this.tree.log("Column resize cancelled", e);
+        colDef.customWidthPx = custom.orgCustomWidthPx; // Restore original width or undefined
+      }
+      this.tree.update(ChangeType.colStructure);
+    }
   }
 }

package/src/wb_options.ts

@@ -217,6 +217,11 @@ export interface WunderbaumOptions {
    * Default: false
    */
   fixedCol?: boolean;
+  /**
+   * Default value for ColumnDefinition.resizable option.
+   * Default: false
+   */
+  resizableColumns?: boolean;
 
   // --- Selection ---
   /**

package/src/wunderbaum.scss

@@ -183,6 +183,8 @@ div.wunderbaum {
     position: sticky;
     top: 0;
     z-index: 2;
+    -webkit-user-select: none; /* Safari */
+    user-select: none;
   }
 
   div.wb-header,
@@ -384,7 +386,12 @@ div.wunderbaum {
       border: none;
       border-right: 2px solid var(--wb-border-color);
       height: 100%;
-      cursor: col-resize;
+      -webkit-user-select: none; // Safari
+      user-select: none;
+      &.wb-col-resizer-active {
+        cursor: col-resize;
+        // border-right-color: red;
+      }
     }
   }
 
@@ -405,6 +412,7 @@ div.wunderbaum {
   }
 
   span.wb-node {
+    -webkit-user-select: none; // Safari
     user-select: none;
     // &:first-of-type {
     //   margin-left: 8px; // leftmost icon gets a little margin
@@ -765,12 +773,12 @@ div.wunderbaum {
 }
 
 .wb-no-select {
+  -webkit-user-select: none; // Safari
   user-select: none;
-  -webkit-user-select: none;
 
   span.wb-title {
+    -webkit-user-select: contain; // Safari
     user-select: contain;
-    -webkit-user-select: contain;
   }
 }
 

package/src/wunderbaum.ts

@@ -1602,6 +1602,14 @@ export class Wunderbaum {
     }
   }
 
+  /** Reset column widths to default. */
+  resetColumns() {
+    this.columns.forEach((col) => {
+      delete col.customWidthPx;
+    });
+    this.update(ChangeType.colStructure);
+  }
+
   /**
    * Make sure that this node is vertically scrolled into the viewport.
    *
@@ -2026,7 +2034,7 @@ export class Wunderbaum {
     this._columnsById = {};
     for (const col of columns) {
       this._columnsById[<string>col.id] = col;
-      const cw = col.width;
+      const cw = col.customWidthPx ? `${col.customWidthPx}px` : col.width;
       if (col.id === "*" && col !== col0) {
         throw new Error(
           `Column id '*' must be defined only once: '${col.title}'.`
@@ -2139,7 +2147,12 @@ export class Wunderbaum {
       }
       let resizer = "";
       if (i < colCount - 1) {
-        resizer = '<span class="wb-col-resizer"></span>';
+        if (util.toBool(col.resizable, this.options.resizableColumns, false)) {
+          resizer =
+            '<span class="wb-col-resizer wb-col-resizer-active"></span>';
+        } else {
+          resizer = '<span class="wb-col-resizer"></span>';
+        }
       }
       colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
       if (this.isCellNav()) {
@@ -2229,6 +2242,10 @@ export class Wunderbaum {
     }
 
     if (this.options.connectTopBreadcrumb) {
+      util.assert(
+        this.options.connectTopBreadcrumb.textContent != null,
+        `Invalid 'connectTopBreadcrumb' option (input element expected).`
+      );
       let path = this.getTopmostVpNode(true)?.getPath(false, "title", " > ");
       path = path ? path + " >" : "";
       this.options.connectTopBreadcrumb.textContent = path;