wunderbaum 0.5.5 → 0.7.0

package/README.md

@@ -9,34 +9,24 @@
 
 <!-- [![Build Status](https://travis-ci.com/mar10/wunderbaum.svg?branch=main)](https://travis-ci.com/github/mar10/wunderbaum) -->
 
-> Potential successor of [Fancytree](https://github.com/mar10/fancytree).<br> > **NOTE: Status _beta_. Do not use in production!**
+> A modern tree/treegrid control for the web. <br>
+> Potential successor of [Fancytree](https://github.com/mar10/fancytree).
+
+**Status _beta_:<br>API, Markup, Stylesheet, etc. are still subject to change.**
 
 [![Demo](docs/assets/teaser_2.png?raw=true)](https://mar10.github.io/wunderbaum/demo/)
 
-Wunderbaum is a rewrite of the [Fancytree](https://github.com/mar10/fancytree)
-library. Major features include
-
-- **Treegrid** control with emphasis on "tree".<br>
-  Depending on the number of columns and nesting depth, Wunderbaum can also be
-  used as a **plain tree**, **plain grid**, or a **simple list** control.
-- **Performant** and efficient handling of **big data structures**.
-- Use modern technologies with **zero dependencies** (except for icon fonts you
-  may want to use).<br>
-  Drop legacy support (IE, jQuery, ...).
-- Built-in support for
-  <!-- [aria](https://www.w3.org/TR/wai-aria-1.1/), -->
-  [drag and drop](https://mar10.github.io/wunderbaum/#/tutorial/tutorial_dnd),
-  [editing](https://mar10.github.io/wunderbaum/#/tutorial/tutorial_edit),
-  [filtering](https://mar10.github.io/wunderbaum/#/tutorial/tutorial_filter),
-  [multi-selection](https://mar10.github.io/wunderbaum/#/tutorial/tutorial_select).
-- Fully [controllable using the keyboard](https://mar10.github.io/wunderbaum/#/tutorial/tutorial_keyboard).
+- Supports drag and drop, editing, filtering, and multi-selection.
+- Written in TypeScript, transpiled to ES6 (esm & umd).
+- Performant handling of big data structures.
+- Provide an object oriented API.
 - Framework agnostic.
-- Written in TypeScript, transpiled to JavaScript ES6 with type hints (.esm & .umd).
-  <!-- - Good documentation. -->
-  <!-- - Decent test coverage. -->
+- Zero dependencies.
+- Keyboard support.
 
 ### Details
 
 - [Online Demo](https://mar10.github.io/wunderbaum/demo/)
-- [User Guide](https://mar10.github.io/wunderbaum/)
+- [Documentation](https://mar10.github.io/wunderbaum/)
 - [API Reference](https://mar10.github.io/wunderbaum/api/index.html)
+- [Quick Start](https://mar10.github.io/wunderbaum/#/tutorial/quick_start)

package/dist/wunderbaum.d.ts

@@ -257,7 +257,7 @@ declare module "common" {
      * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
      * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
      */
-    import { MatcherCallback } from "types";
+    import { MatcherCallback, SourceObjectType } from "types";
     import { WunderbaumNode } from "wb_node";
     export const DEFAULT_DEBUGLEVEL = 4;
     /**
@@ -312,7 +312,16 @@ declare module "common" {
     export function makeNodeTitleStartMatcher(s: string): MatcherCallback;
     /** Compare two nodes by title (case-insensitive). */
     export function nodeTitleSorter(a: WunderbaumNode, b: WunderbaumNode): number;
-    export function inflateSourceData(source: any): void;
+    /**
+     * Decompresses the source data by
+     * - converting from 'flat' to 'nested' format
+     * - expanding short alias names to long names (if defined in _keyMap)
+     * - resolving value indexes to value strings (if defined in _valueMap)
+     *
+     * @param source - The source object to be decompressed.
+     * @returns void
+     */
+    export function decompressSourceData(source: SourceObjectType): void;
 }
 declare module "deferred" {
     /*!
@@ -1201,14 +1210,17 @@ declare module "types" {
     export type SourceListType = Array<WbNodeData>;
     export interface SourceObjectType {
         _format?: "nested" | "flat";
+        _version?: number;
         types?: NodeTypeDefinitionMap;
         columns?: ColumnDefinitionList;
         children: SourceListType;
         _keyMap?: {
             [key: string]: string;
         };
-        _typeList?: Array<string>;
         _positional?: Array<string>;
+        _valueMap?: {
+            [key: string]: Array<string>;
+        };
     }
     /** Possible initilization for tree nodes. */
     export type SourceType = string | SourceListType | SourceAjaxType | SourceObjectType;

package/dist/wunderbaum.esm.js

@@ -1,7 +1,7 @@
 /*!
  * Wunderbaum - util
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 /** @module util */
 /** Readable names for `MouseEvent.button` */
@@ -765,7 +765,7 @@ var util = /*#__PURE__*/Object.freeze({
 /*!
  * Wunderbaum - types
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Possible values for {@link WunderbaumNode.update()} and {@link Wunderbaum.update()}.
@@ -829,7 +829,7 @@ var NavModeEnum;
 /*!
  * Wunderbaum - wb_extension_base
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 class WunderbaumExtension {
     constructor(tree, id, defaults) {
@@ -1185,7 +1185,7 @@ function throttle(func, wait = 0, options = {}) {
 /*!
  * Wunderbaum - ext-filter
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 const START_MARKER = "\uFFF7";
 const END_MARKER = "\uFFF8";
@@ -1485,7 +1485,7 @@ function _markFuzzyMatchedChars(text, matches, escapeTitles = true) {
 /*!
  * Wunderbaum - ext-keynav
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 const QUICKSEARCH_DELAY = 500;
 class KeynavExtension extends WunderbaumExtension {
@@ -1831,7 +1831,7 @@ class KeynavExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - ext-logger
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 class LoggerExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1873,7 +1873,7 @@ class LoggerExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - common
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 const DEFAULT_DEBUGLEVEL = 3; // Replaced by rollup script
 /**
@@ -1952,6 +1952,7 @@ const RESERVED_TREE_SOURCE_KEYS = new Set([
     "_keyMap",
     "_positional",
     "_typeList",
+    "_valueMap",
     "_version",
     "children",
     "columns",
@@ -2021,18 +2022,34 @@ function nodeTitleSorter(a, b) {
     const y = b.title.toLowerCase();
     return x === y ? 0 : x > y ? 1 : -1;
 }
+/**
+ * Convert 'flat' to 'nested' format.
+ *
+ *  Flat node entry format:
+ *    [PARENT_ID, [POSITIONAL_ARGS]]
+ *  or
+ *    [PARENT_ID, [POSITIONAL_ARGS], {KEY_VALUE_ARGS}]
+ *
+ * 1. Parent-referencing list is converted to a list of nested dicts with
+ *    optional `children` properties.
+ * 2. `[POSITIONAL_ARGS]` are added as dict attributes.
+ */
 function unflattenSource(source) {
     var _a, _b, _c;
-    const { _format, _keyMap, _positional, children } = source;
+    const { _format, _keyMap = {}, _positional = [], children } = source;
     if (_format !== "flat") {
         throw new Error(`Expected source._format: "flat", but got ${_format}`);
     }
     if (_positional && _positional.includes("children")) {
         throw new Error(`source._positional must not include "children": ${_positional}`);
     }
-    // Inverse keyMap:
-    const longToShort = {};
-    if (_keyMap) {
+    let longToShort = _keyMap;
+    if (_keyMap.t) {
+        // Inverse keyMap was used (pre 0.7.0)
+        // TODO: raise Error on final 1.x release
+        const msg = `source._keyMap maps from long to short since v0.7.0. Flip key/value!`;
+        console.warn(msg); // eslint-disable-line no-console
+        longToShort = {};
         for (const [key, value] of Object.entries(_keyMap)) {
             longToShort[value] = key;
         }
@@ -2043,16 +2060,16 @@ function unflattenSource(source) {
     const indexToNodeMap = {};
     const keyAttrName = (_a = longToShort["key"]) !== null && _a !== void 0 ? _a : "key";
     const childrenAttrName = (_b = longToShort["children"]) !== null && _b !== void 0 ? _b : "children";
-    for (const [index, node] of children.entries()) {
+    for (const [index, nodeTuple] of children.entries()) {
         // Node entry format:
         //   [PARENT_ID, [POSITIONAL_ARGS]]
         // or
         //   [PARENT_ID, [POSITIONAL_ARGS], {KEY_VALUE_ARGS}]
-        const [parentId, args, kwargs = {}] = node;
+        const [parentId, args, kwargs = {}] = nodeTuple;
         // Free up some memory as we go
-        node[1] = null;
-        if (node[2] != null) {
-            node[2] = null;
+        nodeTuple[1] = null;
+        if (nodeTuple[2] != null) {
+            nodeTuple[2] = null;
         }
         // console.log("flatten", parentId, args, kwargs)
         // We keep `kwargs` as our new node definition. Then we add all positional
@@ -2090,56 +2107,96 @@ function unflattenSource(source) {
             newChildren.push(kwargs);
         }
     }
-    delete source.children;
     source.children = newChildren;
 }
-function inflateSourceData(source) {
-    const { _format, _keyMap, _typeList } = source;
+/**
+ * Decompresses the source data by
+ * - converting from 'flat' to 'nested' format
+ * - expanding short alias names to long names (if defined in _keyMap)
+ * - resolving value indexes to value strings (if defined in _valueMap)
+ *
+ * @param source - The source object to be decompressed.
+ * @returns void
+ */
+function decompressSourceData(source) {
+    let { _format, _version = 1, _keyMap, _valueMap } = source;
+    assert(_version === 1, `Expected file version 1 instead of ${_version}`);
+    let longToShort = _keyMap;
+    let shortToLong = {};
+    if (longToShort) {
+        for (const [key, value] of Object.entries(longToShort)) {
+            shortToLong[value] = key;
+        }
+    }
+    // Fallback for old format (pre 0.7.0, using _keyMap in reverse direction)
+    // TODO: raise Error on final 1.x release
+    if (longToShort && longToShort.t) {
+        const msg = `source._keyMap maps from long to short since v0.7.0. Flip key/value!`;
+        console.warn(msg); // eslint-disable-line no-console
+        [longToShort, shortToLong] = [shortToLong, longToShort];
+    }
+    // Fallback for old format (pre 0.7.0, using _typeList instead of _valueMap)
+    // TODO: raise Error on final 1.x release
+    if (source._typeList != null) {
+        const msg = `source._typeList is deprecated since v0.7.0: use source._valueMap: {"type": [...]} instead.`;
+        if (_valueMap != null) {
+            throw new Error(msg);
+        }
+        else {
+            console.warn(msg); // eslint-disable-line no-console
+            _valueMap = { type: source._typeList };
+            delete source._typeList;
+        }
+    }
     if (_format === "flat") {
         unflattenSource(source);
     }
     delete source._format;
     delete source._version;
     delete source._keyMap;
-    delete source._typeList;
+    delete source._valueMap;
     delete source._positional;
     function _iter(childList) {
         for (const node of childList) {
-            // Expand short alias names
-            if (_keyMap) {
-                // Iterate over a list of names, because we modify inside the loop:
-                Object.getOwnPropertyNames(node).forEach((propName) => {
-                    var _a;
-                    const long = (_a = _keyMap[propName]) !== null && _a !== void 0 ? _a : propName;
-                    if (long !== propName) {
-                        node[long] = node[propName];
+            // Iterate over a list of names, because we modify inside the loop
+            // (for ... of ... does not allow this)
+            Object.getOwnPropertyNames(node).forEach((propName) => {
+                const value = node[propName];
+                // Replace short names with long names if defined in _keyMap
+                let longName = propName;
+                if (_keyMap && shortToLong[propName] != null) {
+                    longName = shortToLong[propName];
+                    if (longName !== propName) {
+                        node[longName] = value;
                         delete node[propName];
                     }
-                });
-            }
-            // `node` now has long attribute names
-            // Resolve node type indexes
-            const type = node.type;
-            if (_typeList && type != null && typeof type === "number") {
-                const newType = _typeList[type];
-                if (newType == null) {
-                    throw new Error(`Expected typeList[${type}] entry in [${_typeList}]`);
                 }
-                node.type = newType;
-            }
+                // Replace type index with type name if defined in _valueMap
+                if (_valueMap &&
+                    typeof value === "number" &&
+                    _valueMap[longName] != null) {
+                    const newValue = _valueMap[longName][value];
+                    if (newValue == null) {
+                        throw new Error(`Expected valueMap[${longName}][${value}] entry in [${_valueMap[longName]}]`);
+                    }
+                    node[longName] = newValue;
+                }
+            });
             // Recursion
             if (node.children) {
                 _iter(node.children);
             }
         }
     }
-    _iter(source.children);
+    if (_keyMap || _valueMap) {
+        _iter(source.children);
+    }
 }
 
 /*!
  * Wunderbaum - ext-dnd
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 const nodeMimeType = "application/x-wunderbaum-node";
 class DndExtension extends WunderbaumExtension {
@@ -2373,6 +2430,7 @@ class DndExtension extends WunderbaumExtension {
      * Handle dragstart, drag and dragend events for the source node.
      */
     onDragEvent(e) {
+        var _a;
         // const tree = this.tree;
         const dndOpts = this.treeOpts.dnd;
         const srcNode = Wunderbaum.getNode(e);
@@ -2413,7 +2471,9 @@ class DndExtension extends WunderbaumExtension {
                 }
             }
             // e.dataTransfer!.setData("text/html", $(node.span).html());
-            e.dataTransfer.setData("text/plain", srcNode.title);
+            if (!((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types.includes("text/plain"))) {
+                e.dataTransfer.setData("text/plain", srcNode.title);
+            }
             this.srcNode = srcNode;
             setTimeout(() => {
                 // Decouple this call, so the CSS is applied to the node, but not to
@@ -2539,6 +2599,7 @@ class DndExtension extends WunderbaumExtension {
         }
         else if (e.type === "drop") {
             e.stopPropagation(); // prevent browser from opening links?
+            e.preventDefault(); // #69 prevent iOS browser from opening links
             this._leaveNode();
             const region = this.lastDropRegion;
             let nodeData = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(nodeMimeType);
@@ -2559,13 +2620,14 @@ class DndExtension extends WunderbaumExtension {
                 });
             }, 10);
         }
+        return false;
     }
 }
 
 /*!
  * Wunderbaum - drag_observer
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2701,7 +2763,7 @@ class DragObserver {
 /*!
  * Wunderbaum - ext-grid
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 class GridExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -2738,7 +2800,7 @@ class GridExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - deferred
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -2791,7 +2853,7 @@ class Deferred {
 /*!
  * Wunderbaum - wunderbaum_node
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 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`.)
@@ -3586,7 +3648,7 @@ class WunderbaumNode {
         const format = (_a = source.format) !== null && _a !== void 0 ? _a : "nested";
         assert(format === "nested" || format === "flat", `Expected source.format = 'nested' or 'flat': ${format}`);
         // Pre-rocess for 'nested' or 'flat' format
-        inflateSourceData(source);
+        decompressSourceData(source);
         assert(source.children, "If `source` is an object, it must have a `children` property");
         if (source.types) {
             tree.logInfo("Redefine types", source.columns);
@@ -3671,6 +3733,11 @@ class WunderbaumNode {
             if (!url) {
                 // An array or a plain object (that does NOT contain a `.url` property)
                 // will be treated as native Wunderbaum data
+                if (typeof source.then === "function") {
+                    const msg = tree.logTime(`Resolve thenable ${source}`);
+                    source = await Promise.resolve(source);
+                    tree.logTimeEnd(msg);
+                }
                 this._loadSourceObject(source);
                 elapProcess = Date.now() - start;
             }
@@ -3739,7 +3806,8 @@ class WunderbaumNode {
                 return;
             }
             assert(isArray(source) || (source && source.url), "The lazyLoad event must return a node list, `{url: ...}`, or false.");
-            await this.load(source); // also calls setStatus('ok')
+            await this.load(source);
+            this.setStatus(NodeStatusType.ok);
             if (wasExpanded) {
                 this.expanded = true;
                 this.tree.update(ChangeType.structure);
@@ -5118,7 +5186,7 @@ WunderbaumNode.sequence = 0;
 /*!
  * Wunderbaum - ext-edit
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
- * v0.5.5, Tue, 31 Oct 2023 14:26:34 GMT (https://github.com/mar10/wunderbaum)
+ * v0.7.0, Sat, 09 Dec 2023 13:47:27 GMT (https://github.com/mar10/wunderbaum)
  */
 // const START_MARKER = "\uFFF7";
 class EditExtension extends WunderbaumExtension {
@@ -5197,9 +5265,13 @@ class EditExtension extends WunderbaumExtension {
     init() {
         super.init();
         onEvent(this.tree.element, "change", //"change input",
-        ".contenteditable,input,textarea,select", (e) => {
-            this.debouncedOnChange(e);
-        });
+        ".contenteditable,input,textarea,select", 
+        // #61: we must not debounce the `change`, event.target may be reset to null
+        // when the debounced handler is called.
+        // (e) => {
+        //   this.debouncedOnChange(e);
+        // }
+        (e) => this._onChange(e));
     }
     /* Called by ext_keynav to pre-process input. */
     _preprocessKeyEvent(data) {
@@ -5414,8 +5486,8 @@ class EditExtension extends WunderbaumExtension {
  * https://github.com/mar10/wunderbaum
  *
  * Released under the MIT license.
- * @version v0.5.5
- * @date Tue, 31 Oct 2023 14:26:34 GMT
+ * @version v0.7.0
+ * @date Sat, 09 Dec 2023 13:47:27 GMT
  */
 // import "./wunderbaum.scss";
 class WbSystemRoot extends WunderbaumNode {
@@ -7548,7 +7620,7 @@ class Wunderbaum {
 }
 Wunderbaum.sequence = 0;
 /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-Wunderbaum.version = "v0.5.5"; // Set to semver by 'grunt release'
+Wunderbaum.version = "v0.7.0"; // Set to semver by 'grunt release'
 /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
 Wunderbaum.util = util;