wunderbaum 0.2.0 → 0.3.0

package/src/wb_extension_base.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - wb_extension_base
- * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 

package/src/wb_node.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - wunderbaum_node
- * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
@@ -10,7 +10,7 @@ import * as util from "./util";
 import { Wunderbaum } from "./wunderbaum";
 import {
   AddChildrenOptions,
-  AddNodeType,
+  InsertNodeType,
   ApplyCommandOptions,
   ApplyCommandType,
   ChangeType,
@@ -30,6 +30,7 @@ import {
   SetExpandedOptions,
   SetSelectedOptions,
   SetStatusOptions,
+  SortCallback,
 } from "./types";
 import {
   iconMap,
@@ -41,6 +42,7 @@ import {
   ROW_HEIGHT,
   TEST_IMG,
   inflateSourceData,
+  nodeTitleSorter,
 } from "./common";
 import { Deferred } from "./deferred";
 import { WbNodeData } from "./wb_options";
@@ -332,9 +334,12 @@ export class WunderbaumNode {
    * @param [mode=child] 'before', 'after', 'firstChild', or 'child' ('over' is a synonym for 'child')
    * @returns new node
    */
-  addNode(nodeData: WbNodeData, mode = "child"): WunderbaumNode {
-    if (mode === "over") {
-      mode = "child"; // compatible with drop region
+  addNode(
+    nodeData: WbNodeData,
+    mode: InsertNodeType = "appendChild"
+  ): WunderbaumNode {
+    if (<string>mode === "over") {
+      mode = "appendChild"; // compatible with drop region
     }
     switch (mode) {
       case "after":
@@ -343,11 +348,11 @@ export class WunderbaumNode {
         });
       case "before":
         return this.parent.addChildren(nodeData, { before: this });
-      case "firstChild":
+      case "prependChild":
         // Insert before the first child if any
         // let insertBefore = this.children ? this.children[0] : undefined;
         return this.addChildren(nodeData, { before: 0 });
-      case "child":
+      case "appendChild":
         return this.addChildren(nodeData);
     }
     util.assert(false, "Invalid mode: " + mode);
@@ -784,8 +789,17 @@ export class WunderbaumNode {
    * an expand operation is currently possible.
    */
   isExpandable(andCollapsed = false): boolean {
-    // return !!this.children && (!this.expanded || !andCollapsed);
-    return !!(this.children || this.lazy) && (!this.expanded || !andCollapsed);
+    // `false` is never expandable (unoffical)
+    if ((andCollapsed && this.expanded) || <any>this.children === false) {
+      return false;
+    }
+    if (this.children == null) {
+      return this.lazy; // null or undefined can trigger lazy load
+    }
+    if (this.children.length === 0) {
+      return !!this.tree.options.emptyChildListExpandable;
+    }
+    return true;
   }
 
   /** Return true if this node is currently in edit-title mode. */
@@ -953,7 +967,7 @@ export class WunderbaumNode {
       tree.logInfo("Redefine columns", source.columns);
       tree.columns = source.columns;
       delete source.columns;
-      tree.updateColumns({ calculateCols: false });
+      tree.setModified(ChangeType.colStructure);
     }
 
     this.addChildren(source.children);
@@ -969,12 +983,50 @@ export class WunderbaumNode {
     this._callEvent("load");
   }
 
+  async _fetchWithOptions(source: any) {
+    // Either a URL string or an object with a `.url` property.
+    let url: string, params, body, options, rest;
+    let fetchOpts: any = {};
+    if (typeof source === "string") {
+      // source is a plain URL string: assume GET request
+      url = source;
+      fetchOpts.method = "GET";
+    } else if (util.isPlainObject(source)) {
+      // source is a plain object with `.url` property.
+      ({ url, params, body, options, ...rest } = source);
+      util.assert(typeof url === "string", `expected source.url as string`);
+      if (util.isPlainObject(options)) {
+        fetchOpts = options;
+      }
+      if (util.isPlainObject(body)) {
+        // we also accept 'body' as object...
+        util.assert(
+          !fetchOpts.body,
+          "options.body should be passed as source.body"
+        );
+        fetchOpts.body = JSON.stringify(fetchOpts.body);
+        fetchOpts.method ??= "POST"; // set default
+      }
+      if (util.isPlainObject(params)) {
+        url += "?" + new URLSearchParams(params);
+        fetchOpts.method ??= "GET"; // set default
+      }
+    } else {
+      url = ""; // keep linter happy
+      util.error(`Unsupported source format: ${source}`);
+    }
+    this.setStatus(NodeStatusType.loading);
+    const response = await fetch(url, fetchOpts);
+    if (!response.ok) {
+      util.error(`GET ${url} returned ${response.status}, ${response}`);
+    }
+    return await response.json();
+  }
   /** Download  data from the cloud, then call `.update()`. */
   async load(source: any) {
     const tree = this.tree;
     const requestId = Date.now();
     const prevParent = this.parent;
-    const url = typeof source === "string" ? source : source.url;
     const start = Date.now();
     let elap = 0,
       elapLoad = 0,
@@ -992,16 +1044,16 @@ export class WunderbaumNode {
     // const timerLabel = tree.logTime(this + ".load()");
 
     try {
+      let url: string = typeof source === "string" ? source : source.url;
       if (!url) {
+        // An array or a plain object (that does NOT contain a `.url` property)
+        // will be treated as native Wunderbaum data
         this._loadSourceObject(source);
         elapProcess = Date.now() - start;
       } else {
-        this.setStatus(NodeStatusType.loading);
-        const response = await fetch(url, { method: "GET" });
-        if (!response.ok) {
-          util.error(`GET ${url} returned ${response.status}, ${response}`);
-        }
-        const data = await response.json();
+        // Either a URL string or an object with a `.url` property.
+        const data = await this._fetchWithOptions(source);
+
         elapLoad = Date.now() - start;
 
         if (this._requestId && this._requestId > requestId) {
@@ -1169,9 +1221,12 @@ export class WunderbaumNode {
   /** Move this node to targetNode. */
   moveTo(
     targetNode: WunderbaumNode,
-    mode: AddNodeType = "appendChild",
+    mode: InsertNodeType = "appendChild",
     map?: NodeAnyCallback
   ) {
+    if (<string>mode === "over") {
+      mode = "appendChild"; // compatible with drop region
+    }
     if (mode === "prependChild") {
       if (targetNode.children && targetNode.children.length) {
         mode = "before";
@@ -1229,7 +1284,7 @@ export class WunderbaumNode {
           targetParent.children!.splice(pos + 1, 0, this);
           break;
         default:
-          util.error("Invalid mode " + mode);
+          util.error(`Invalid mode '${mode}'.`);
       }
     } else {
       targetParent.children = [this];
@@ -1255,8 +1310,12 @@ export class WunderbaumNode {
         n.tree = targetNode.tree;
       }, true);
     }
-
-    tree.setModified(ChangeType.structure);
+    // Make sure we update async, because discarding the markup would prevent
+    // DragAndDrop to generate a dragend event on the source node
+    setTimeout(() => {
+      // Even indentation may have changed:
+      tree.setModified(ChangeType.any);
+    }, 0);
     // TODO: fix selection state
     // TODO: fix active state
   }
@@ -1395,7 +1454,7 @@ export class WunderbaumNode {
       icon = iconMap.loading;
     }
     if (icon === false) {
-      return null;
+      return null; // explicitly disabled: don't try default icons
     }
     if (typeof icon === "string") {
       // Callback returned an icon definition
@@ -1413,7 +1472,10 @@ export class WunderbaumNode {
     }
 
     // this.log("_createIcon: " + icon);
-    if (icon.indexOf("<") >= 0) {
+    if (!icon) {
+      iconSpan = document.createElement("i");
+      iconSpan.className = "wb-icon";
+    } else if (icon.indexOf("<") >= 0) {
       // HTML
       iconSpan = util.elemFromHtml(icon);
     } else if (TEST_IMG.test(icon)) {
@@ -1765,9 +1827,12 @@ export class WunderbaumNode {
       case "data":
         this._render_data(opts);
         break;
-      default:
+      case "row":
+        // _rowElem is not yet created (asserted in _render_markup)
         this._render_markup(opts);
         break;
+      default:
+        util.error(`Invalid change type '${opts.change}'.`);
     }
   }
 
@@ -2005,9 +2070,9 @@ export class WunderbaumNode {
   }
 
   /** Set a new icon path or class. */
-  setIcon() {
-    throw new Error("Not yet implemented");
-    // this.setModified();
+  setIcon(icon: string) {
+    this.icon = icon;
+    this.setModified();
   }
 
   /** Change node's {@link key} and/or {@link refKey}.  */
@@ -2016,11 +2081,15 @@ export class WunderbaumNode {
   }
 
   /**
-   * Schedule a render, typically called to update after a status or data change.
+   * Trigger a repaint, typically after a status or data change.
    *
    * `change` defaults to 'data', which handles modifcations of title, icon,
    * and column content. It can be reduced to 'ChangeType.status' if only
    * active/focus/selected state has changed.
+   *
+   * This method will eventually call  {@link WunderbaumNode.render()} with
+   * default options, but may be more consistent with the tree's
+   * {@link Wunderbaum.setModified()} API.
    */
   setModified(change: ChangeType = ChangeType.data) {
     util.assert(change === ChangeType.status || change === ChangeType.data);
@@ -2067,7 +2136,7 @@ export class WunderbaumNode {
       util.assert(data.statusNodeType);
       util.assert(!firstChild || !firstChild.isStatusNode());
 
-      statusNode = this.addNode(data, "firstChild");
+      statusNode = this.addNode(data, "prependChild");
       statusNode.match = true;
       tree.setModified(ChangeType.structure);
 
@@ -2139,6 +2208,37 @@ export class WunderbaumNode {
     // this.triggerModify("rename"); // TODO
   }
 
+  _sortChildren(cmp: SortCallback, deep: boolean): void {
+    const cl = this.children;
+
+    if (!cl) {
+      return;
+    }
+    cl.sort(cmp);
+    if (deep) {
+      for (let i = 0, l = cl.length; i < l; i++) {
+        if (cl[i].children) {
+          cl[i]._sortChildren(cmp, deep);
+        }
+      }
+    }
+  }
+
+  /**
+   * Sort child list by title or custom criteria.
+   * @param {function} cmp custom compare function(a, b) that returns -1, 0, or 1
+   *    (defaults to sorting by title).
+   * @param {boolean} deep pass true to sort all descendant nodes recursively
+   */
+  sortChildren(
+    cmp: SortCallback | null = nodeTitleSorter,
+    deep: boolean = false
+  ): void {
+    this._sortChildren(cmp || nodeTitleSorter, deep);
+    this.tree.setModified(ChangeType.structure);
+    // this.triggerModify("sort"); // TODO
+  }
+
   /**
    * Trigger `modifyChild` event on a parent to signal that a child was modified.
    * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
@@ -2148,8 +2248,8 @@ export class WunderbaumNode {
     child: WunderbaumNode | null,
     extra?: any
   ) {
+    this.logDebug(`modifyChild(${operation})`, extra, child);
     if (!this.tree.options.modifyChild) return;
-
     if (child && child.parent !== this) {
       util.error("child " + child + " is not a child of " + this);
     }

package/src/wb_options.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - utils
- * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
@@ -44,7 +44,7 @@ export interface WbNodeData {
  * ```js
  * const tree = new mar10.Wunderbaum({
  *   id: "demo",
- *   element: document.querySelector("#demo-tree"),
+ *   element: document.getElementById("demo-tree"),
  *   source: "url/of/data/request",
  *   ...
  * });
@@ -107,7 +107,7 @@ export interface WunderbaumOptions {
    * real data.
    * Default: false.
    */
-  skeleton?: false;
+  skeleton?: boolean;
   /**
    * Translation map for some system messages.
    */
@@ -123,6 +123,12 @@ export interface WunderbaumOptions {
    * Default: 0
    */
   minExpandLevel?: number;
+  /**
+   * If true, allow to expand parent nodes, even if `node.children` conatains
+   * an empty array (`[]`). This is the the behavior of macOS Finder, for example.
+   * Default: false
+   */
+  emptyChildListExpandable?: boolean;
   // escapeTitles: boolean;
   // /**
   //  * Height of the header row div.

package/src/wunderbaum.scss

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum style sheet (generated from wunderbaum.scss)
- * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
@@ -52,11 +52,14 @@ $icon-padding-x: ($icon-outer-width - $icon-width) / 2;
 $header-height: $row-outer-height;
 
 // PyCharm:
-$level-rainbow: rgba(255, 255, 232, 1), rgba(240, 255, 240, 1),
-  rgba(255, 240, 255, 1), rgba(234, 253, 253, 1);
+// $level-rainbow: rgba(255, 255, 232, 1), rgba(240, 255, 240, 1),
+//   rgba(255, 240, 255, 1), rgba(234, 253, 253, 1);
 // VS-Code_
 // $level-rainbow: rgba(255, 255, 64, 0.07), rgba(127, 255, 127, 0.07),
 //   rgba(255, 127, 255, 0.07), rgba(79, 236, 236, 0.07);
+// Slightly stronger*
+$level-rainbow: rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254),
+  rgb(204, 250, 250);
 
 div.wunderbaum {
   box-sizing: border-box;