wunderbaum 0.9.0 → 0.10.1

package/dist/wunderbaum.umd.js

@@ -294,7 +294,7 @@
     /*!
      * Wunderbaum - util
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     /** @module util */
     /** Readable names for `MouseEvent.button` */
@@ -770,7 +770,7 @@
     function isArray(obj) {
         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. */
     function isEmptyObject(obj) {
         return Object.keys(obj).length === 0 && obj.constructor === Object;
     }
@@ -943,6 +943,54 @@
         }
         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
+     * ```
+     */
+    function toPixel(
+    // val: string | number | undefined | null,
+    ...defaults) {
+        // 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
+     * ```
+     */
+    function toBool(
+    // val: boolean | undefined | null,
+    ...boolDefaults) {
+        // 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)
@@ -1084,6 +1132,8 @@
         setValueToElem: setValueToElem,
         sleep: sleep,
         throttle: throttle,
+        toBool: toBool,
+        toPixel: toPixel,
         toSet: toSet,
         toggleCheckbox: toggleCheckbox,
         type: type
@@ -1092,7 +1142,7 @@
     /*!
      * Wunderbaum - types
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     /**
      * Possible values for {@link WunderbaumNode.update()} and {@link Wunderbaum.update()}.
@@ -1156,7 +1206,7 @@
     /*!
      * Wunderbaum - wb_extension_base
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     class WunderbaumExtension {
         constructor(tree, id, defaults) {
@@ -1215,7 +1265,7 @@
     /*!
      * Wunderbaum - ext-filter
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     const START_MARKER = "\uFFF7";
     const END_MARKER = "\uFFF8";
@@ -1242,6 +1292,7 @@
             const connectInput = this.getPluginOption("connectInput");
             if (connectInput) {
                 this.queryInput = elemFromSelector(connectInput);
+                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(), {});
@@ -1539,7 +1590,7 @@
     /*!
      * Wunderbaum - ext-keynav
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     const QUICKSEARCH_DELAY = 500;
     class KeynavExtension extends WunderbaumExtension {
@@ -1903,7 +1954,7 @@
     /*!
      * Wunderbaum - ext-logger
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     class LoggerExtension extends WunderbaumExtension {
         constructor(tree) {
@@ -1945,7 +1996,7 @@
     /*!
      * Wunderbaum - common
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     const DEFAULT_DEBUGLEVEL = 3; // Replaced by rollup script
     /**
@@ -1963,6 +2014,8 @@
     const TITLE_SPAN_PAD_Y = 7;
     /** Render row markup for N nodes above and below the visible viewport. */
     const RENDER_MAX_PREFETCH = 5;
+    /** Minimum column width if not set otherwise. */
+    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 '/'.
      */
@@ -2268,7 +2321,7 @@
     /*!
      * Wunderbaum - ext-dnd
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     const nodeMimeType = "application/x-wunderbaum-node";
     class DndExtension extends WunderbaumExtension {
@@ -2713,7 +2766,7 @@
     /*!
      * Wunderbaum - drag_observer
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     /**
      * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2721,6 +2774,7 @@
     class DragObserver {
         constructor(opts) {
             this.start = {
+                event: null,
                 x: 0,
                 y: 0,
                 altKey: false,
@@ -2730,6 +2784,7 @@
             };
             this.dragElem = null;
             this.dragging = false;
+            this.customData = {};
             // TODO: touch events
             this.events = ["mousedown", "mouseup", "mousemove", "keydown"];
             if (!opts.root) {
@@ -2757,22 +2812,32 @@
         stopDrag(cb_event) {
             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 = {};
         }
         handleEvent(e) {
             const type = e.type;
             const opts = this.opts;
             const cb_event = {
                 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);
@@ -2797,6 +2862,7 @@
                             }
                         }
                     }
+                    this.start.event = e;
                     this.start.x = e.pageX;
                     this.start.y = e.pageY;
                     this.start.altKey = e.altKey;
@@ -2849,7 +2915,7 @@
     /*!
      * Wunderbaum - ext-grid
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     class GridExtension extends WunderbaumExtension {
         constructor(tree) {
@@ -2858,11 +2924,43 @@
             });
             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
@@ -2876,17 +2974,39 @@
         init() {
             super.init();
         }
+        /**
+         * Hanldes drag and sragstop events for column resizing.
+         */
         handleDrag(e) {
-            const info = Wunderbaum.getEventInfo(e.event);
-            // this.tree.options.
-            this.tree.log(`${e.type}(${e.dx})`, e, info);
+            const custom = e.customData;
+            const colDef = 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);
+            }
         }
     }
 
     /*!
      * Wunderbaum - deferred
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     /**
      * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -2939,7 +3059,7 @@
     /*!
      * Wunderbaum - wunderbaum_node
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     /** WunderbaumNode properties that can be passed with source data.
      * (Any other source properties will be stored as `node.data.PROP`.)
@@ -5348,7 +5468,7 @@
     /*!
      * Wunderbaum - ext-edit
      * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
-     * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+     * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
      */
     // const START_MARKER = "\uFFF7";
     class EditExtension extends WunderbaumExtension {
@@ -5679,8 +5799,8 @@
      * https://github.com/mar10/wunderbaum
      *
      * Released under the MIT license.
-     * @version v0.9.0
-     * @date Sun, 05 May 2024 16:08:56 GMT
+     * @version v0.10.1
+     * @date Sat, 20 Jul 2024 13:53:46 GMT
      */
     // import "./wunderbaum.scss";
     class WbSystemRoot extends WunderbaumNode {
@@ -7003,6 +7123,13 @@
                 console.warn(this.toString(), ...args); // eslint-disable-line no-console
             }
         }
+        /** 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.
          *
@@ -7360,7 +7487,7 @@
             this._columnsById = {};
             for (const col of columns) {
                 this._columnsById[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}'.`);
                 }
@@ -7466,7 +7593,13 @@
                 }
                 let resizer = "";
                 if (i < colCount - 1) {
-                    resizer = '<span class="wb-col-resizer"></span>';
+                    if (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()) {
@@ -7547,6 +7680,7 @@
                 // console.profileEnd(`_updateViewportImmediately()`)
             }
             if (this.options.connectTopBreadcrumb) {
+                assert(this.options.connectTopBreadcrumb.textContent != null, `Invalid 'connectTopBreadcrumb' option (input element expected).`);
                 let path = (_a = this.getTopmostVpNode(true)) === null || _a === void 0 ? void 0 : _a.getPath(false, "title", " > ");
                 path = path ? path + " >" : "";
                 this.options.connectTopBreadcrumb.textContent = path;
@@ -7916,7 +8050,7 @@
     }
     Wunderbaum.sequence = 0;
     /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-    Wunderbaum.version = "v0.9.0"; // Set to semver by 'grunt release'
+    Wunderbaum.version = "v0.10.1"; // Set to semver by 'grunt release'
     /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
     Wunderbaum.util = util;