feat: improve tree-node typings on initialization;

fix missing normalization for addNode api

Signed-off-by: Christian Kotzbauer <christian.kotzbauer@gmail.com>

Author: ckotzbauer

demo/src/tree/multi-select/multi-select.ts

@@ -1,4 +1,4 @@
-import simpleTree, { TreeNode, SimpleTree } from "simple-tree-component";
+import simpleTree, { InitTreeNode, SimpleTree } from "simple-tree-component";
 import { autoinject } from "aurelia-framework";
 
 @autoinject()
@@ -9,7 +9,7 @@ export class MultiSelect {
 
   public attached(): void {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const nodes: TreeNode[] = require("./data.json");
+    const nodes: InitTreeNode[] = require("./data.json");
 
     this.tree = simpleTree(this.element.querySelector("#multi-select"), "multiSelectDropdown", {
       searchBar: true,

demo/src/tree/single-select/single-select.ts

@@ -1,4 +1,4 @@
-import simpleTree, { TreeNode, SimpleTree } from "simple-tree-component";
+import simpleTree, { InitTreeNode, SimpleTree } from "simple-tree-component";
 import { autoinject } from "aurelia-framework";
 
 @autoinject()
@@ -9,7 +9,7 @@ export class SingleSelect {
 
   public attached(): void {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const nodes: TreeNode[] = require("./data.json");
+    const nodes: InitTreeNode[] = require("./data.json");
 
     this.tree = simpleTree(this.element.querySelector("#single-select"), "singleSelectDropdown", {
       searchBar: true,

demo/src/tree/tree-view-checkbox/tree-view-checkbox.ts

@@ -1,4 +1,4 @@
-import simpleTree, { TreeNode, SimpleTree } from "simple-tree-component";
+import simpleTree, { InitTreeNode, SimpleTree } from "simple-tree-component";
 import { autoinject } from "aurelia-framework";
 
 @autoinject()
@@ -9,7 +9,7 @@ export class TreeViewCheckbox {
 
   public attached(): void {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const nodes: TreeNode[] = require("./data.json");
+    const nodes: InitTreeNode[] = require("./data.json");
 
     this.tree = simpleTree(this.element.querySelector("#tree-view-checkbox"), "tree", {
       searchBar: true,

demo/src/tree/tree-view/tree-view.ts

@@ -1,4 +1,4 @@
-import simpleTree, { TreeNode, SimpleTree } from "simple-tree-component";
+import simpleTree, { InitTreeNode, SimpleTree } from "simple-tree-component";
 import { autoinject } from "aurelia-framework";
 
 @autoinject()
@@ -9,7 +9,7 @@ export class TreeView {
 
   public attached(): void {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const nodes: TreeNode[] = require("./data.json");
+    const nodes: InitTreeNode[] = require("./data.json");
 
     this.tree = simpleTree(this.element.querySelector("#tree-view"), "tree", {
       searchBar: true,

dist/simple-tree-component.js

@@ -470,13 +470,14 @@
         normalizeNodes(nodes) {
             return nodes
                 .filter((node) => !!node)
-                .map((node) => {
-                const n = this.copyNode(node);
-                n.uid = this.generateUid(node.value);
-                this.mutateNode(n);
-                n.children = this.normalizeNodes(n.children || []);
-                return n;
-            });
+                .map((node) => this.normalizeNode(node));
+        }
+        normalizeNode(node) {
+            const n = this.copyNode(node);
+            n.uid = this.generateUid(node.value);
+            this.mutateNode(n);
+            n.children = this.normalizeNodes(n.children || []);
+            return n;
         }
         mutateNode(node) {
             if (!node.selectable && node.selected) {
@@ -518,18 +519,18 @@
             if (!isTreeNodeValid(node) || isDuplicateNodeValue(this.allNodes, node.value)) {
                 throw new Error("node value is invalid or node with value already exists!");
             }
-            this.mutateNode(node);
+            const n = this.normalizeNode(node);
             if (parent && this.isTreeNode(parent)) {
-                parent.children.push(node);
+                parent.children.push(n);
             }
             else if (typeof parent === "string") {
                 const parentNode = this.getNodeInternal(this.allNodes, parent);
                 if (this.isTreeNode(parentNode)) {
-                    parentNode.children.push(node);
+                    parentNode.children.push(n);
                 }
             }
             else {
-                this.allNodes.push(node);
+                this.allNodes.push(n);
             }
         }
         moveNode(node, direction) {

dist/simple-tree-component.min.js

@@ -1,5 +1,5 @@
 import { Options, BaseOptions } from "./options";
-import { TreeNode } from "./tree-node";
+import { InitTreeNode, TreeNode } from "./tree-node";
 import { Subscription } from "../types/subscription";
 export interface TreeModeNameMap {
     singleSelectDropdown: TreeNode | null;
@@ -31,7 +31,7 @@ export interface TreeInstance<K extends keyof TreeModeNameMap> {
      * @param node to add.
      * @param parent of the new tree-node or null
      */
-    addNode(node: TreeNode, parent: TreeNode | string | null): void;
+    addNode(node: InitTreeNode, parent: TreeNode | string | null): void;
     /**
      * Deletes the given tree-node from the tree.
      *

dist/types/instance.d.ts

@@ -1,4 +1,4 @@
-import { TreeNode } from "./tree-node";
+import { InitTreeNode, TreeNode } from "./tree-node";
 /**
  * @ignore
  */
@@ -102,7 +102,7 @@ export interface BaseOptions extends TreeConfiguration {
      * All tree-node data-objects to start with. Do not change this array afterwards.
      * (Default: `[]`)
      */
-    nodes: Partial<TreeNode>[];
+    nodes: InitTreeNode[];
 }
 /**
  * @ignore

dist/types/options.d.ts

@@ -36,7 +36,13 @@ export interface Rect {
  * @param maxOverlayHeight The maximum height of the overlay. Defaults to `300`.
  * @returns The calculated rectangle of the overlay position.
  */
-export declare function calculate(elementRect: Rect, availableHeight: number, overlayHeight: number, borderWith?: number, maxOverlayHeight?: number): Rect;
+export declare function calculate(
+    elementRect: Rect,
+    availableHeight: number,
+    overlayHeight: number,
+    borderWith?: number,
+    maxOverlayHeight?: number
+): Rect;
 /**
  * Calculates the position of the `overlay` relative to the `element` and sets the values accordingly.
  * See the docs of the `calculate` function for more details.

dist/types/rects.d.ts

@@ -1,7 +1,7 @@
 /**
- * The data representation of each node-object in the tree.
+ * The data representation of each node-object in the tree at initialization-time.
  */
-export interface TreeNode {
+export interface InitTreeNode {
     /**
      * The displayed text of this tree-node.
      */
@@ -10,6 +10,29 @@ export interface TreeNode {
      * The data-value of this tree-node. It has to be unique.
      */
     value: string;
+    /**
+     * Indicates if this node is currently selected and included in the component-value ({@link Instance.getSelected()}).
+     */
+    selected?: boolean;
+    /**
+     * Indicates if this node is selectable. Mouse-clicks on the node are avoided if `false`.
+     * Nodes that are not selectable are also ignored when setting via API.
+     * In Recursive Checkbox Mode this flag has no effect since all nodes are selectable there.
+     */
+    selectable?: boolean;
+    /**
+     * Recursive array of child `TreeNode` objects.
+     */
+    children?: InitTreeNode[];
+    /**
+     * Any additional property, which is available (the component-logic will respect them).
+     */
+    [key: string]: any;
+}
+/**
+ * The data representation of each node-object in the tree.
+ */
+export interface TreeNode extends InitTreeNode {
     /**
      * Indicates if this node is currently selected and included in the component-value ({@link Instance.getSelected()}).
      */
@@ -36,10 +59,6 @@ export interface TreeNode {
      * The unique id-value used internally.
      */
     uid: string;
-    /**
-     * Any additional property, which is available (the component-logic will respect them).
-     */
-    [key: string]: any;
 }
 /**
  * @ignore