wunderbaum 0.5.2 → 0.5.4

package/src/wb_node.ts

@@ -283,7 +283,7 @@ export class WunderbaumNode {
       }
       const forceExpand =
         applyMinExpanLevel && _level < tree.options.minExpandLevel!;
-      for (let child of <WbNodeData[]>nodeData) {
+      for (const child of <WbNodeData[]>nodeData) {
         const subChildren = child.children;
         delete child.children;
 
@@ -304,7 +304,7 @@ export class WunderbaumNode {
       } else {
         // Returns null if before is not a direct child:
         before = this.findDirectChild(before)!;
-        let pos = this.children.indexOf(before);
+        const pos = this.children.indexOf(before);
         util.assert(
           pos >= 0,
           `options.before must be a direct child of ${this}`
@@ -378,7 +378,7 @@ export class WunderbaumNode {
    * (Automatically called when `autoCollapse` is true.)
    */
   collapseSiblings(options?: SetExpandedOptions): any {
-    for (let node of this.parent.children!) {
+    for (const node of this.parent.children!) {
       if (node !== this && node.expanded) {
         node.setExpanded(false, options);
       }
@@ -424,7 +424,7 @@ export class WunderbaumNode {
   async expandAll(flag: boolean = true, options?: ExpandAllOptions) {
     const tree = this.tree;
     const minExpandLevel = this.tree.options.minExpandLevel;
-    let {
+    const {
       depth = 99,
       loadLazy,
       force,
@@ -534,9 +534,11 @@ export class WunderbaumNode {
   findDirectChild(
     ptr: number | string | WunderbaumNode
   ): WunderbaumNode | null {
-    let cl = this.children;
+    const cl = this.children;
 
-    if (!cl) return null;
+    if (!cl) {
+      return null;
+    }
     if (typeof ptr === "string") {
       for (let i = 0, l = cl.length; i < l; i++) {
         if (cl[i].key === ptr) {
@@ -607,7 +609,7 @@ export class WunderbaumNode {
     };
 
     yield name_cb(this);
-    for (let node of this) {
+    for (const node of this) {
       yield _format_line(node);
     }
   }
@@ -630,7 +632,7 @@ export class WunderbaumNode {
    */
   format(name_cb?: NodeStringCallback, connectors?: string[]): string {
     const a = [];
-    for (let line of this.format_iter(name_cb, connectors)) {
+    for (const line of this.format_iter(name_cb, connectors)) {
       a.push(line);
     }
     return a.join("\n");
@@ -675,8 +677,8 @@ export class WunderbaumNode {
 
   /** Return the successive node (under the same parent) or null. */
   getNextSibling(): WunderbaumNode | null {
-    let ac = this.parent.children!;
-    let idx = ac.indexOf(this);
+    const ac = this.parent.children!;
+    const idx = ac.indexOf(this);
     return ac[idx + 1] || null;
   }
 
@@ -691,8 +693,8 @@ export class WunderbaumNode {
    * @param includeSelf Include the node itself.
    */
   getParentList(includeRoot = false, includeSelf = false) {
-    let l = [],
-      dtn = includeSelf ? this : this.parent;
+    const l = [];
+    let dtn = includeSelf ? this : this.parent;
     while (dtn) {
       if (includeRoot || dtn.parent) {
         l.unshift(dtn);
@@ -715,9 +717,9 @@ export class WunderbaumNode {
     // part = part || "title";
     // separator = separator || "/";
 
-    let val,
-      path: string[] = [],
-      isFunc = typeof part === "function";
+    let val;
+    const path: string[] = [];
+    const isFunc = typeof part === "function";
 
     this.visitParents((n) => {
       if (n.parent) {
@@ -733,8 +735,8 @@ export class WunderbaumNode {
 
   /** Return the preceeding node (under the same parent) or null. */
   getPrevSibling(): WunderbaumNode | null {
-    let ac = this.parent.children!;
-    let idx = ac.indexOf(this);
+    const ac = this.parent.children!;
+    const idx = ac.indexOf(this);
     return ac[idx - 1] || null;
   }
 
@@ -796,7 +798,7 @@ export class WunderbaumNode {
     if (!other || other.tree !== this.tree) {
       return false;
     }
-    var p = this.parent;
+    let p = this.parent;
     while (p) {
       if (p === other) {
         return true;
@@ -839,13 +841,13 @@ export class WunderbaumNode {
 
   /** Return true if this node is the first node of its parent's children. */
   isFirstSibling(): boolean {
-    var p = this.parent;
+    const p = this.parent;
     return !p || p.children![0] === this;
   }
 
   /** Return true if this node is the last node of its parent's children. */
   isLastSibling(): boolean {
-    var p = this.parent;
+    const p = this.parent;
     return !p || p.children![p.children!.length - 1] === this;
   }
 
@@ -934,11 +936,8 @@ export class WunderbaumNode {
    * whether the node is scrolled into the visible part of the screen or viewport.
    */
   isVisible(): boolean {
-    let i,
-      l,
-      n,
-      hasFilter = this.tree.filterMode === "hide",
-      parents = this.getParentList(false, false);
+    const hasFilter = this.tree.filterMode === "hide";
+    const parents = this.getParentList(false, false);
 
     // TODO: check $(n.span).is(":visible")
     // i.e. return false for nodes (but not parents) that are hidden
@@ -948,8 +947,8 @@ export class WunderbaumNode {
       return false;
     }
 
-    for (i = 0, l = parents.length; i < l; i++) {
-      n = parents[i];
+    for (let i = 0, l = parents.length; i < l; i++) {
+      const n = parents[i];
 
       if (!n.expanded) {
         // this.debug("isVisible: HIDDEN (parent collapsed)");
@@ -1085,7 +1084,8 @@ export class WunderbaumNode {
     // const timerLabel = tree.logTime(this + ".load()");
 
     try {
-      let url: string = typeof source === "string" ? source : (<any>source).url;
+      const url: string =
+        typeof source === "string" ? source : (<any>source).url;
       if (!url) {
         // An array or a plain object (that does NOT contain a `.url` property)
         // will be treated as native Wunderbaum data
@@ -1185,38 +1185,34 @@ export class WunderbaumNode {
 
   /** Alias for `logDebug` */
   log(...args: any[]) {
-    this.logDebug.apply(this, args);
+    this.logDebug(...args);
   }
 
   /* Log to console if opts.debugLevel >= 4 */
   logDebug(...args: any[]) {
     if (this.tree.options.debugLevel! >= 4) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.log.apply(console, args);
+      console.log(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
   /* Log error to console. */
   logError(...args: any[]) {
     if (this.tree.options.debugLevel! >= 1) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.error.apply(console, args);
+      console.error(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
   /* Log to console if opts.debugLevel >= 3 */
   logInfo(...args: any[]) {
     if (this.tree.options.debugLevel! >= 3) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.info.apply(console, args);
+      console.info(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
   /* Log warning to console if opts.debugLevel >= 2 */
   logWarn(...args: any[]) {
     if (this.tree.options.debugLevel! >= 2) {
-      Array.prototype.unshift.call(args, this.toString());
-      console.warn.apply(console, args);
+      console.warn(this.toString(), ...args); // eslint-disable-line no-console
     }
   }
 
@@ -1226,13 +1222,13 @@ export class WunderbaumNode {
    *     Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
    */
   async makeVisible(options?: MakeVisibleOptions) {
-    let i,
-      dfd = new Deferred(),
-      deferreds = [],
-      parents = this.getParentList(false, false),
-      len = parents.length,
-      noAnimation = util.getOption(options, "noAnimation", false),
-      scroll = util.getOption(options, "scrollIntoView", true);
+    let i;
+    const dfd = new Deferred();
+    const deferreds = [];
+    const parents = this.getParentList(false, false);
+    const len = parents.length;
+    const noAnimation = util.getOption(options, "noAnimation", false);
+    const scroll = util.getOption(options, "scrollIntoView", true);
 
     // Expand bottom-up, so only the top node is animated
     for (i = len - 1; i >= 0; i--) {
@@ -1275,10 +1271,11 @@ export class WunderbaumNode {
         mode = "appendChild";
       }
     }
-    let pos,
-      tree = this.tree,
-      prevParent = this.parent,
-      targetParent = mode === "appendChild" ? targetNode : targetNode.parent;
+    let pos;
+    const tree = this.tree;
+    const prevParent = this.parent;
+    const targetParent =
+      mode === "appendChild" ? targetNode : targetNode.parent;
 
     if (this === targetNode) {
       return;
@@ -1385,7 +1382,9 @@ export class WunderbaumNode {
     // setFocus/setActive will scroll later (if autoScroll is specified)
     try {
       node.makeVisible({ scrollIntoView: false });
-    } catch (e) {} // #272
+    } catch (e) {
+      // ignore
+    }
     node.setFocus();
     if (options?.activate === false) {
       return Promise.resolve(this);
@@ -1460,7 +1459,7 @@ export class WunderbaumNode {
       : null;
 
     let idx = 0;
-    for (let col of this.tree.columns) {
+    for (const col of this.tree.columns) {
       allColInfosById[col.id] = {
         id: col.id,
         idx: idx,
@@ -1537,7 +1536,7 @@ export class WunderbaumNode {
 
     // Event handler `tree.iconBadge` can return a badge text or HTMLSpanElement
 
-    let cbRes = this._callEvent("iconBadge", { iconSpan: iconSpan });
+    const cbRes = this._callEvent("iconBadge", { iconSpan: iconSpan });
     let badge = null;
     if (cbRes != null && cbRes !== false) {
       let classes = "";
@@ -1577,14 +1576,12 @@ export class WunderbaumNode {
     const checkbox = this.getOption("checkbox");
     const columns = tree.columns;
     const level = this.getLevel();
+    const activeColIdx = tree.isRowNav() ? null : tree.activeColIdx;
+
     let elem: HTMLElement;
-    let nodeElem: HTMLElement;
     let rowDiv = this._rowElem;
-    let titleSpan: HTMLElement;
     let checkboxSpan: HTMLElement | null = null;
-    let iconSpan: HTMLElement | null;
     let expanderSpan: HTMLElement | null = null;
-    const activeColIdx = tree.isRowNav() ? null : tree.activeColIdx;
 
     const isNew = !rowDiv;
     util.assert(isNew);
@@ -1604,7 +1601,7 @@ export class WunderbaumNode {
     // Attach a node reference to the DOM Element:
     (<any>rowDiv)._wb_node = this;
 
-    nodeElem = document.createElement("span");
+    const nodeElem: HTMLElement = document.createElement("span");
     nodeElem.classList.add("wb-node", "wb-col");
     rowDiv.appendChild(nodeElem);
 
@@ -1636,12 +1633,17 @@ export class WunderbaumNode {
 
     // Render the icon (show a 'loading' icon if we do not have an expander that
     // we would prefer).
-    iconSpan = this._createIcon(tree.iconMap, nodeElem, null, !expanderSpan);
+    const iconSpan = this._createIcon(
+      tree.iconMap,
+      nodeElem,
+      null,
+      !expanderSpan
+    );
     if (iconSpan) {
       ofsTitlePx += ICON_WIDTH;
     }
 
-    titleSpan = document.createElement("span");
+    const titleSpan = document.createElement("span");
     titleSpan.classList.add("wb-title");
     nodeElem.appendChild(titleSpan);
 
@@ -1661,7 +1663,7 @@ export class WunderbaumNode {
 
     if (!isColspan && columns.length > 1) {
       let colIdx = 0;
-      for (let col of columns) {
+      for (const col of columns) {
         colIdx++;
 
         let colElem;
@@ -1741,7 +1743,7 @@ export class WunderbaumNode {
     // Set the width of the title span, so overflow ellipsis work
     if (!treeOptions.skeleton) {
       if (isColspan) {
-        let vpWidth = tree.element.clientWidth;
+        const vpWidth = tree.element.clientWidth;
         titleSpan.style.width =
           vpWidth - (<any>nodeElem)._ofsTitlePx - TITLE_SPAN_PAD_Y + "px";
       } else {
@@ -1799,7 +1801,7 @@ export class WunderbaumNode {
       "i.wb-checkbox"
     ) as HTMLLIElement;
 
-    let rowClasses = ["wb-row"];
+    const rowClasses = ["wb-row"];
     this.expanded ? rowClasses.push("wb-expanded") : 0;
     this.lazy ? rowClasses.push("wb-lazy") : 0;
     this.selected ? rowClasses.push("wb-selected") : 0;
@@ -1842,10 +1844,13 @@ export class WunderbaumNode {
         image = iconMap.expanderLazy;
       }
 
-      if (image == null) expanderSpan.classList.add("wb-indent");
-      else if (TEST_IMG.test(image))
+      if (image == null) {
+        expanderSpan.classList.add("wb-indent");
+      } else if (TEST_IMG.test(image)) {
         expanderSpan.style.backgroundImage = `url('${image}')`;
-      else expanderSpan.className = "wb-expander " + image;
+      } else {
+        expanderSpan.className = "wb-expander " + image;
+      }
     }
     if (checkboxSpan) {
       let cbclass = "wb-checkbox ";
@@ -1872,7 +1877,7 @@ export class WunderbaumNode {
     // Fix active cell in cell-nav mode
     if (!opts.isNew) {
       let i = 0;
-      for (let colSpan of rowDiv.children) {
+      for (const colSpan of rowDiv.children) {
         colSpan.classList.toggle("wb-active", i++ === tree.activeColIdx);
       }
       // Update icon (if not opts.isNew, which would rebuild markup anyway)
@@ -1886,7 +1891,7 @@ export class WunderbaumNode {
       const colElems = rowDiv.querySelectorAll("span.wb-col");
       let idx = 0;
       let ofs = 0;
-      for (let colDef of this.tree.columns) {
+      for (const colDef of this.tree.columns) {
         const colElem = colElems[idx] as HTMLSpanElement;
         colElem.style.left = `${ofs}px`;
         colElem.style.width = `${colDef._widthPx}px`;
@@ -2020,18 +2025,18 @@ export class WunderbaumNode {
    * {@link Wunderbaum.getOption|Wunderbaum.getOption()}
    */
   getOption(name: string, defaultValue?: any) {
-    let tree = this.tree;
+    const tree = this.tree;
     let opts: any = tree.options;
 
     // Lookup `name` in options dict
     if (name.indexOf(".") >= 0) {
       [opts, name] = name.split(".");
     }
-    let value = opts[name]; // ?? defaultValue;
+    const value = opts[name]; // ?? defaultValue;
 
     // A callback resolver always takes precedence
     if (typeof value === "function") {
-      let res = value.call(tree, {
+      const res = value.call(tree, {
         type: "resolve",
         tree: tree,
         node: this,
@@ -2046,8 +2051,8 @@ export class WunderbaumNode {
       return (<any>this)[name];
     }
     // Use value from type definition if defined
-    let typeInfo = this.type ? tree.types[this.type] : undefined;
-    let res = typeInfo ? typeInfo[name] : undefined;
+    const typeInfo = this.type ? tree.types[this.type] : undefined;
+    const res = typeInfo ? typeInfo[name] : undefined;
     if (res !== undefined) {
       return res;
     }
@@ -2101,8 +2106,12 @@ export class WunderbaumNode {
     if (prev !== this) {
       if (flag) {
         tree.activeNode = this;
-        if (focusNode || focusTree) tree.focusNode = this;
-        if (focusTree) tree.setFocus();
+        if (focusNode || focusTree) {
+          tree.focusNode = this;
+        }
+        if (focusTree) {
+          tree.setFocus();
+        }
       }
       prev?.update(ChangeType.status);
       this.update(ChangeType.status);
@@ -2181,13 +2190,6 @@ export class WunderbaumNode {
     throw new Error("Not yet implemented");
   }
 
-  /**
-   * @deprecated since v0.3.6: use `update()` instead.
-   */
-  setModified(change: ChangeType = ChangeType.data): void {
-    this.logWarn("setModified() is deprecated: use update() instead.");
-    return this.update(change);
-  }
   /**
    * Trigger a repaint, typically after a status or data change.
    *
@@ -2209,7 +2211,7 @@ export class WunderbaumNode {
    * @param stopOnParents only return the topmost selected node (useful with selectMode 'hier')
    */
   getSelectedNodes(stopOnParents: boolean = false): WunderbaumNode[] {
-    let nodeList: WunderbaumNode[] = [];
+    const nodeList: WunderbaumNode[] = [];
     this.visit((node) => {
       if (node.selected) {
         nodeList.push(node);
@@ -2282,7 +2284,7 @@ export class WunderbaumNode {
    */
   fixSelection3AfterClick(opts?: SetSelectedOptions): void {
     const force = !!opts?.force;
-    let flag = this.isSelected();
+    const flag = this.isSelected();
 
     this.visit((node) => {
       if (node.radiogroup) {
@@ -2414,7 +2416,7 @@ export class WunderbaumNode {
         if (!flag && !options?.force) {
           return prev; // don't uncheck radio buttons
         }
-        for (let sibling of this.parent.children!) {
+        for (const sibling of this.parent.children!) {
           sibling.selected = sibling === this;
         }
       } else {
@@ -2448,7 +2450,7 @@ export class WunderbaumNode {
 
     const _clearStatusNode = () => {
       // Remove dedicated dummy node, if any
-      let children = this.children;
+      const children = this.children;
 
       if (children && children.length && children[0].isStatusNode()) {
         children[0].remove();
@@ -2459,8 +2461,8 @@ export class WunderbaumNode {
       // Create/modify the dedicated dummy node for 'loading...' or
       // 'error!' status. (only called for direct child of the invisible
       // system root)
-      let children = this.children;
-      let firstChild = children ? children[0] : null;
+      const children = this.children;
+      const firstChild = children ? children[0] : null;
 
       util.assert(data.statusNodeType);
       util.assert(!firstChild || !firstChild.isStatusNode());
@@ -2578,7 +2580,9 @@ export class WunderbaumNode {
     extra?: any
   ) {
     this.logDebug(`modifyChild(${operation})`, extra, child);
-    if (!this.tree.options.modifyChild) return;
+    if (!this.tree.options.modifyChild) {
+      return;
+    }
     if (child && child.parent !== this) {
       util.error("child " + child + " is not a child of " + this);
     }
@@ -2616,10 +2620,8 @@ export class WunderbaumNode {
     callback: NodeVisitCallback,
     includeSelf: boolean = false
   ): NodeVisitResponse {
-    let i,
-      l,
-      res: any = true,
-      children = this.children;
+    let res: any = true;
+    const children = this.children;
 
     if (includeSelf === true) {
       res = callback(this);
@@ -2628,7 +2630,7 @@ export class WunderbaumNode {
       }
     }
     if (children) {
-      for (i = 0, l = children.length; i < l; i++) {
+      for (let i = 0, l = children.length; i < l; i++) {
         res = children[i].visit(callback, true);
         if (res === false) {
           break;
@@ -2673,13 +2675,10 @@ export class WunderbaumNode {
     callback: (node: WunderbaumNode) => boolean | void,
     includeSelf: boolean = false
   ): boolean {
-    let i,
-      l,
-      n,
-      ac = this.parent.children!;
+    const ac = this.parent.children!;
 
-    for (i = 0, l = ac.length; i < l; i++) {
-      n = ac[i];
+    for (let i = 0, l = ac.length; i < l; i++) {
+      const n = ac[i];
       if (includeSelf || n !== this) {
         if (callback(n) === false) {
           return false;

package/src/wunderbaum.scss

@@ -416,7 +416,7 @@ div.wunderbaum {
     i.wb-indent {
       height: var(--wb-icon-outer-height);
       width: var(--wb-icon-outer-width);
-      padding: var(--wb-icon-padding) var(--wb-icon-padding-x);
+      padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x);
       display: inline-block;
     }
 
@@ -635,7 +635,7 @@ div.wunderbaum {
           // content: url(../docs/assets/drop_marker_16x32.png);
           content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxnuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAALM9X5QAAAAudFJOU////////////////////////////////////////////////////////////wCCj3NVAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqUlEQVQoU6WQ2w6CMAxA54agsCHq1HlFBREv/f/fs1tHAoaoiedlbXrWtGXwhV8FNqAXuAi4DwkShmE0cgGIcSwCCgkSkrAxpEonot0DhQxJptFsbnOpdNdgsFh6VtYwyqzTmG+oijDY7hr22E4qY7QybeGQe46nsxP0Wwc3Q1GWl+qKec8MlqKubxX+xzV7tkDuD1+3d+heigT2zGx/hCMUeUj4wL8CwAsW1kqCTugMCwAAAABJRU5ErkJggg==);
           left: 0; //-$icon-outer-width;
-          top: calc(($row-outer-height - --wb-icon-height) / 2);
+          top: calc(($row-outer-height - var(--wb-icon-height)) / 2);
         }
       }
     }
@@ -658,13 +658,13 @@ div.wunderbaum {
     content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAMAAACROYkbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACNUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxgAAAHuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAAParqS4AAAAvdFJOU/////////////////////////////////////////////////////////////8AWqU49wAAAAlwSFlzAAAOwwAADsMBx2+oZAAAALlJREFUOE/FktsSgiAQhglMS8WstKLzQTM77Ps/XguL16I208cFyzB8/LPAYCC/ErARzcCFx23pBgnGfjAxBYhpKDwq3SBB5DeGWCYz0SUDClIkmgeLpV7HMiNDbrbbYbBaWzbaoKTaJiHfQe5oYLA/NBwxTiyVyqTSghYwox4MTmfL5XozgqxjAtODoizv1QPXPXqgKer6WeH9+Iw9XgF5ve15/Q+6/SQSsE+q8yMcocoREgzg3wKAL4vrpBIKREShAAAAAElFTkSuQmCC);
     left: 0; // $icon-outer-width * 1.5;
     top: calc(
-      ($row-outer-height - --wb-icon-height) / 2 - $row-outer-height / 2
+      ($row-outer-height - var(--wb-icon-height)) / 2 - $row-outer-height / 2
     );
   }
 
   div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
     top: calc(
-      ($row-outer-height - --wb-icon-height) / 2 + $row-outer-height / 2
+      ($row-outer-height - var(--wb-icon-height)) / 2 + $row-outer-height / 2
     );
   }
 
@@ -813,6 +813,7 @@ i.wb-icon {
     white-space: nowrap;
     // vertical-align: baseline;
     border-radius: 0.5rem;
+    pointer-events: none;
   }
 }