tree-element 0.1.0 → 0.2.0

package/src/index.ts

@@ -54,13 +54,10 @@ interface TreeElementParams extends Partial<TreeElementOptions> {
   /** Replaces how events are dispatched. It must return whether the event
    * was not cancelled. This exists for tests and for integrating with
    * another event system. */
-  overrideTriggerEventProvider?: TriggerEventProvider,
+  overrideTriggerEventProvider?: TriggerEventProvider;
 }
 
 export default class TreeElement {
-  /** @hidden */
-  public tree: Node;
-
   private classNames: ClassNames;
   private dataLoader: DataLoader;
   private dndHandler: DragAndDropHandler;
@@ -74,14 +71,20 @@ export default class TreeElement {
   private saveStateHandler: SaveStateHandler;
   private scrollHandler: ScrollHandler;
   private selectNodeHandler: SelectNodeHandler;
+  private tree: Node;
   private triggerEventProvider: TriggerEventProvider;
 
   /** @hidden */
-  constructor({ htmlElement, overrideTriggerEventProvider, ...options }: TreeElementParams) {
+  constructor({
+    htmlElement,
+    overrideTriggerEventProvider,
+    ...options
+  }: TreeElementParams) {
     this.htmlElement = htmlElement;
     this.options = setDefaultOptions(htmlElement, options);
     this.classNames = createClassNames(this.options);
-    this.triggerEventProvider = overrideTriggerEventProvider ?? triggerCustomEvent;
+    this.triggerEventProvider =
+      overrideTriggerEventProvider ?? triggerCustomEvent;
 
     this.isInitialized = false;
     this.tree = new Node({}, true);
@@ -130,7 +133,7 @@ export default class TreeElement {
 
     const saveState = () => {
       saveStateHandler.saveState();
-    }
+    };
 
     const selectNodeHandler = new SelectNodeHandler({
       getNodeById,
@@ -139,7 +142,7 @@ export default class TreeElement {
       getSelectable: () => this.options.selectable,
       openParents,
       saveState,
-      triggerEvent
+      triggerEvent,
     });
 
     const addToSelection =
@@ -150,7 +153,8 @@ export default class TreeElement {
       selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
     const removeFromSelection =
       selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
-    const selectNode = selectNodeHandler.selectSingleNode.bind(selectNodeHandler);
+    const selectNode =
+      selectNodeHandler.selectSingleNode.bind(selectNodeHandler);
 
     const getMouseDelay = () => this.options.startDndDelay ?? 0;
 
@@ -267,10 +271,7 @@ export default class TreeElement {
    * @returns The new node, or `null` when the node has no parent.
    * @group Changing the tree
    */
-  public addNodeAfter(
-    nodeData: NodeData,
-    existingNode: Node,
-  ): Node | null {
+  public addNodeAfter(nodeData: NodeData, existingNode: Node): Node | null {
     const newNode = existingNode.addAfter(nodeData);
 
     if (newNode) {
@@ -286,10 +287,7 @@ export default class TreeElement {
    * @returns The new node, or `null` when the node has no parent.
    * @group Changing the tree
    */
-  public addNodeBefore(
-    nodeData: NodeData,
-    existingNode: Node,
-  ): Node | null {
+  public addNodeBefore(nodeData: NodeData, existingNode: Node): Node | null {
     const newNode = existingNode.addBefore(nodeData);
 
     if (newNode) {
@@ -306,10 +304,7 @@ export default class TreeElement {
    * @returns The new node, or `null` when the node has no parent.
    * @group Changing the tree
    */
-  public addParentNode(
-    nodeData: NodeData,
-    existingNode: Node,
-  ): Node | null {
+  public addParentNode(nodeData: NodeData, existingNode: Node): Node | null {
     const newNode = existingNode.addParent(nodeData);
 
     if (newNode) {
@@ -377,7 +372,7 @@ export default class TreeElement {
    * @group Other
    */
   public deinit(): void {
-    this.htmlElement.textContent = '';
+    this.htmlElement.textContent = "";
 
     this.dataLoader.deinit();
     this.keyHandler.deinit();
@@ -465,11 +460,11 @@ export default class TreeElement {
   }
 
   /**
-   * Returns the selected node, or `false` when nothing is selected.
+   * Returns the selected node, or `null` when nothing is selected.
    *
    * @group Selection
    */
-  public getSelectedNode(): false | Node {
+  public getSelectedNode(): Node | null {
     return this.selectNodeHandler.getSelectedNode();
   }
 
@@ -571,11 +566,10 @@ export default class TreeElement {
    * @param url - Defaults to the `dataUrl` option.
    * @group Loading data
    */
-  public async loadDataFromUrl(
-    url?: string,
-    parentNode?: Node
-  ): Promise<void> {
-    const requestUrl = url ? new RequestUrl(url) : this.createRequestUrl(parentNode);
+  public async loadDataFromUrl(url?: string, parentNode?: Node): Promise<void> {
+    const requestUrl = url
+      ? new RequestUrl(url)
+      : this.createRequestUrl(parentNode);
 
     if (requestUrl) {
       await this.dataLoader.loadFromUrl(requestUrl, parentNode);
@@ -588,10 +582,7 @@ export default class TreeElement {
    * @group Selection
    */
   public moveDown() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this.keyHandler.moveDown(selectedNode);
-    }
+    this.keyHandler.moveDown();
   }
 
   /**
@@ -605,11 +596,7 @@ export default class TreeElement {
    * @param position - `"before"`, `"after"` or `"inside"`.
    * @group Changing the tree
    */
-  public moveNode(
-    node: Node,
-    targetNode: Node,
-    position: Position,
-  ): void {
+  public moveNode(node: Node, targetNode: Node, position: Position): void {
     this.tree.moveNode(node, targetNode, position);
     this.refreshElements(null);
   }
@@ -620,10 +607,7 @@ export default class TreeElement {
    * @group Selection
    */
   public moveUp() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this.keyHandler.moveUp(selectedNode);
-    }
+    this.keyHandler.moveUp();
   }
 
   /**
@@ -640,15 +624,12 @@ export default class TreeElement {
    * @param slide - Override the `slide` option for this call.
    * @group Opening and closing
    */
-  public async openNode(
-    node: Node,
-    slide?: boolean
-  ): Promise<void> {
+  public async openNode(node: Node, slide?: boolean): Promise<void> {
     const mustSlide = slide ?? this.options.slide;
 
     const doOpenNode = async (
       openedNode: Node,
-      slideOption: boolean
+      slideOption: boolean,
     ): Promise<void> => {
       if (!node.children.length) {
         return;
@@ -656,10 +637,7 @@ export default class TreeElement {
 
       const folderElement = this.createFolderElement(openedNode);
 
-      await folderElement.open(
-        slideOption,
-        this.options.animationSpeed,
-      );
+      await folderElement.open(slideOption, this.options.animationSpeed);
     };
 
     if (node.isFolder() || node.isEmptyFolder) {
@@ -752,9 +730,7 @@ export default class TreeElement {
       return;
     }
 
-    const top =
-      getOffsetTop(node.element) -
-      getOffsetTop(this.htmlElement);
+    const top = getOffsetTop(node.element) - getOffsetTop(this.htmlElement);
 
     this.scrollHandler.scrollToY(top);
   }
@@ -768,10 +744,7 @@ export default class TreeElement {
    * `false`.
    * @group Selection
    */
-  public selectNode(
-    node: Node | null,
-    options?: SelectNodeOptions,
-  ): void {
+  public selectNode(node: Node | null, options?: SelectNodeOptions): void {
     if (!node) {
       // Called with empty node -> deselect current node
       this.deselectCurrentNode();
@@ -793,13 +766,15 @@ export default class TreeElement {
   }
 
   /**
-   * Applies a state to the tree.
+   * Applies a state to the tree, and saves it to storage when `saveState` is
+   * enabled.
    *
    * @group State
    */
   public setState(state: SavedState) {
     this.saveStateHandler.setInitialState(state);
     this.refreshElements(null);
+    this.saveState();
   }
 
   /**
@@ -879,6 +854,7 @@ export default class TreeElement {
       this.scrollHandler,
     );
     const openedIconElement = this.renderer.openedIconElement;
+    const renderChildren = this.renderer.renderChildren.bind(this.renderer);
     const tabIndex = this.options.tabIndex;
     const treeElement = this.htmlElement;
     const triggerEvent = this.triggerEvent.bind(this);
@@ -889,6 +865,7 @@ export default class TreeElement {
       getScrollLeft,
       node,
       openedIconElement,
+      renderChildren,
       tabIndex,
       treeElement,
       triggerEvent,
@@ -913,9 +890,9 @@ export default class TreeElement {
   }
 
   /* Create a RequestUrl based on the url in the options.
-    * Add a 'node' query parameter for loading on demand
-    * Add a 'selected_node' query parameter if a node is selected.
-  */
+   * Add a 'node' query parameter for loading on demand
+   * Add a 'selected_node' query parameter if a node is selected.
+   */
   private createRequestUrl(node?: Node): null | RequestUrl {
     const dataUrl = this.options.dataUrl;
 
@@ -935,12 +912,12 @@ export default class TreeElement {
 
     if (node?.id) {
       // Load on demand of a subtree; add node parameter
-      requestUrl.setSearchParam('node', node.id.toString());
+      requestUrl.setSearchParam("node", node.id.toString());
     } else {
       // Add selected_node parameter
       const selectedNodeId = this.getNodeIdToBeSelected();
       if (selectedNodeId) {
-        requestUrl.setSearchParam('selected_node', selectedNodeId.toString());
+        requestUrl.setSearchParam("selected_node", selectedNodeId.toString());
       }
     }
 
@@ -1020,11 +997,7 @@ export default class TreeElement {
       }
     };
 
-    this.tree = new this.options.nodeClass(
-      null,
-      true,
-      this.options.nodeClass,
-    );
+    this.tree = new this.options.nodeClass(null, true, this.options.nodeClass);
 
     this.selectNodeHandler.clear();
 
@@ -1071,10 +1044,7 @@ export default class TreeElement {
     }
   }
 
-  private async loadFolderOnDemand(
-    node: Node,
-    slide: boolean,
-  ): Promise<void> {
+  private async loadFolderOnDemand(node: Node, slide: boolean): Promise<void> {
     node.is_loading = true;
 
     await this.loadDataFromUrl(undefined, node);
@@ -1178,8 +1148,7 @@ export default class TreeElement {
       if (!state) {
         return [false, false];
       } else {
-        const mustLoadOnDemand =
-          this.saveStateHandler.setInitialState(state);
+        const mustLoadOnDemand = this.saveStateHandler.setInitialState(state);
 
         // return true: the state is restored
         return [true, mustLoadOnDemand];
@@ -1221,16 +1190,14 @@ export default class TreeElement {
 
   // Set the initial state for nodes that are loaded on demand
   private async setInitialStateOnDemand(): Promise<void> {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       const restoreState = (): boolean => {
         const state = this.saveStateHandler.getStateFromStorage();
 
         if (!state) {
           return false;
         } else {
-          void this.saveStateHandler.setInitialStateOnDemand(
-            state,
-          ).then(() => {
+          void this.saveStateHandler.setInitialStateOnDemand(state).then(() => {
             resolve();
           });
 
@@ -1284,7 +1251,10 @@ export default class TreeElement {
     this.nodeMap.set(element, node);
   }
 
-  private triggerEvent<Name extends TreeEventName>(eventName: Name, values?: TreeEvents[Name]): boolean {
-    return this.triggerEventProvider(this.htmlElement, eventName, values)
+  private triggerEvent<Name extends TreeEventName>(
+    eventName: Name,
+    values?: TreeEvents[Name],
+  ): boolean {
+    return this.triggerEventProvider(this.htmlElement, eventName, values);
   }
-}
+}

package/src/keyHandler.ts

@@ -1,139 +1,149 @@
 import type {
-    CloseNode,
-    GetSelectedNode,
-    IsFocusOnTree,
-    OpenNode,
-    SelectNode,
+  CloseNode,
+  GetSelectedNode,
+  IsFocusOnTree,
+  OpenNode,
+  SelectNode,
 } from "./methodTypes";
 import type { Node } from "./node";
 
 interface KeyHandlerParams {
-    closeNode: CloseNode;
-    getSelectedNode: GetSelectedNode;
-    isFocusOnTree: IsFocusOnTree;
-    keyboardSupport: boolean;
-    openNode: OpenNode;
-    selectNode: SelectNode;
+  closeNode: CloseNode;
+  getSelectedNode: GetSelectedNode;
+  isFocusOnTree: IsFocusOnTree;
+  keyboardSupport: boolean;
+  openNode: OpenNode;
+  selectNode: SelectNode;
 }
 
 export default class KeyHandler {
-    private closeNode: CloseNode;
-    private getSelectedNode: GetSelectedNode;
-
-    private isFocusOnTree: IsFocusOnTree;
-
-    private keyboardSupport: boolean;
-    private openNode: OpenNode;
-    private originalSelectNode: SelectNode;
-    constructor({
-        closeNode,
-        getSelectedNode,
-        isFocusOnTree,
-        keyboardSupport,
-        openNode,
-        selectNode,
-    }: KeyHandlerParams) {
-        this.closeNode = closeNode;
-        this.getSelectedNode = getSelectedNode;
-        this.isFocusOnTree = isFocusOnTree;
-        this.keyboardSupport = keyboardSupport;
-        this.openNode = openNode;
-        this.originalSelectNode = selectNode;
-
-        if (keyboardSupport) {
-            document.addEventListener("keydown", this.handleKeyDown);
-        }
+  private closeNode: CloseNode;
+  private getSelectedNode: GetSelectedNode;
+
+  private isFocusOnTree: IsFocusOnTree;
+
+  private keyboardSupport: boolean;
+  private openNode: OpenNode;
+  private originalSelectNode: SelectNode;
+
+  constructor({
+    closeNode,
+    getSelectedNode,
+    isFocusOnTree,
+    keyboardSupport,
+    openNode,
+    selectNode,
+  }: KeyHandlerParams) {
+    this.closeNode = closeNode;
+    this.getSelectedNode = getSelectedNode;
+    this.isFocusOnTree = isFocusOnTree;
+    this.keyboardSupport = keyboardSupport;
+    this.openNode = openNode;
+    this.originalSelectNode = selectNode;
+
+    if (keyboardSupport) {
+      document.addEventListener("keydown", this.handleKeyDown);
     }
+  }
 
-    public deinit(): void {
-        if (this.keyboardSupport) {
-            document.removeEventListener("keydown", this.handleKeyDown);
-        }
+  public deinit(): void {
+    if (this.keyboardSupport) {
+      document.removeEventListener("keydown", this.handleKeyDown);
     }
+  }
 
-    public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextVisibleNode());
+  public moveDown(): boolean {
+    return this.selectNode(this.getSelectedNode()?.getNextVisibleNode());
+  }
+
+  public moveUp(): boolean {
+    return this.selectNode(this.getSelectedNode()?.getPreviousVisibleNode());
+  }
+
+  private canHandleKeyboard(): boolean {
+    return this.keyboardSupport && this.isFocusOnTree();
+  }
+
+  private handleKeyDown = (e: KeyboardEvent): void => {
+    if (!this.canHandleKeyboard()) {
+      return;
     }
 
-    public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
+    let isKeyHandled = false;
+
+    const selectedNode = this.getSelectedNode();
+    if (selectedNode) {
+      switch (e.key) {
+        case "ArrowDown":
+          isKeyHandled = this.moveDown();
+          break;
+
+        case "ArrowLeft":
+          isKeyHandled = this.moveLeft();
+          break;
+
+        case "ArrowRight":
+          isKeyHandled = this.moveRight();
+          break;
+
+        case "ArrowUp":
+          isKeyHandled = this.moveUp();
+          break;
+      }
     }
 
-    private canHandleKeyboard(): boolean {
-        return this.keyboardSupport && this.isFocusOnTree();
+    if (isKeyHandled) {
+      e.preventDefault();
     }
+  };
+
+  private moveLeft(): boolean {
+    const selectedNode = this.getSelectedNode();
 
-    private handleKeyDown = (e: KeyboardEvent): void => {
-        if (!this.canHandleKeyboard()) {
-            return;
-        }
-
-        let isKeyHandled = false;
-
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-            switch (e.key) {
-                case "ArrowDown":
-                    isKeyHandled = this.moveDown(selectedNode);
-                    break;
-
-                case "ArrowLeft":
-                    isKeyHandled = this.moveLeft(selectedNode);
-                    break;
-
-                case "ArrowRight":
-                    isKeyHandled = this.moveRight(selectedNode);
-                    break;
-
-                case "ArrowUp":
-                    isKeyHandled = this.moveUp(selectedNode);
-                    break;
-            }
-        }
-
-        if (isKeyHandled) {
-            e.preventDefault();
-        }
-    };
-
-    private moveLeft(selectedNode: Node): boolean {
-        if (selectedNode.isFolder() && selectedNode.is_open) {
-            // Left on an open node closes the node
-            this.closeNode(selectedNode);
-            return true;
-        } else {
-            // Left on a closed or end node moves focus to the node's parent
-            return this.selectNode(selectedNode.getParent());
-        }
+    /* istanbul ignore if */
+    if (!selectedNode) {
+      return false;
     }
 
-    private moveRight(selectedNode: Node): boolean {
-        if (!selectedNode.isFolder()) {
-            return false;
-        } else {
-            // folder node
-            if (selectedNode.is_open) {
-                // Right moves to the first child of an open node
-                return this.selectNode(selectedNode.getNextVisibleNode());
-            } else {
-                // Right expands a closed node
-                void this.openNode(selectedNode);
-                return true;
-            }
-        }
+    if (selectedNode.isFolder() && selectedNode.is_open) {
+      // Left on an open node closes the node
+      this.closeNode(selectedNode);
+      return true;
+    } else {
+      // Left on a closed or end node moves focus to the node's parent
+      return this.selectNode(selectedNode.getParent());
     }
+  }
 
-    /* Select the node.
-     * Don't do anything if the node is null.
-     * Result: a different node was selected.
-     */
-    private selectNode(node: Node | null): boolean {
-        if (!node) {
-            return false;
-        } else {
-            this.originalSelectNode(node);
-
-            return true;
-        }
+  private moveRight(): boolean {
+    const selectedNode = this.getSelectedNode();
+
+    if (!selectedNode?.isFolder()) {
+      return false;
+    } else {
+      // folder node
+      if (selectedNode.is_open) {
+        // Right moves to the first child of an open node
+        return this.selectNode(selectedNode.getNextVisibleNode());
+      } else {
+        // Right expands a closed node
+        void this.openNode(selectedNode);
+        return true;
+      }
+    }
+  }
+
+  /* Select the node.
+   * Don't do anything if the node is null.
+   * Result: a different node was selected.
+   */
+  private selectNode(node?: Node | null): boolean {
+    if (!node) {
+      return false;
+    } else {
+      this.originalSelectNode(node);
+
+      return true;
     }
+  }
 }

package/src/methodTypes.ts

@@ -12,7 +12,7 @@ export type GetNodeElementForNode = (node: Node) => NodeElement;
 
 export type GetScrollLeft = () => number;
 
-export type GetSelectedNode = () => false | Node;
+export type GetSelectedNode = () => Node | null;
 
 export type GetSelectedNodes = () => Node[];
 
@@ -24,10 +24,7 @@ export type IsNodeSelected = (node: Node) => boolean;
 
 export type LoadData = (data: NodeData[], parentNode?: Node) => void;
 
-export type OpenNode = (
-    node: Node,
-    slide?: boolean,
-) => Promise<void>;
+export type OpenNode = (node: Node, slide?: boolean) => Promise<void>;
 
 export type OpenParents = (node: Node) => void;
 
@@ -39,6 +36,6 @@ export type SelectNode = (node: Node) => void;
 
 // Trigger an event. Return if the event is processed (true) or cancelled (false).
 export type TriggerEvent = <Name extends TreeEventName>(
-    eventName: Name,
-    values?: TreeEvents[Name],
+  eventName: Name,
+  values?: TreeEvents[Name],
 ) => boolean;