tree-element 0.1.0

package/lib/index.js

@@ -0,0 +1,1098 @@
+/*
+Html-tree 0.1.0
+
+Copyright 2026 Marco Braak
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+@license
+
+*/
+import createClassNames from './classNames.js';
+import DataLoader from './dataLoader.js';
+import { DragAndDropHandler } from './dragAndDropHandler/index.js';
+import ElementsRenderer from './elementsRenderer.js';
+import KeyHandler from './keyHandler.js';
+import MouseHandler from './mouseHandler.js';
+import { Node } from './node.js';
+import NodeElement from './nodeElement/index.js';
+import FolderElement from './nodeElement/folderElement.js';
+import { getOffsetTop } from './positionUtils.js';
+import RequestUrl from './requestUrl.js';
+import SaveStateHandler from './saveStateHandler.js';
+import ScrollHandler from './scrollHandler.js';
+import SelectNodeHandler from './selectNodeHandler.js';
+import setDefaultOptions from './setDefaultOptions.js';
+import triggerCustomEvent from './triggerCustomEvent.js';
+import version from './version.js';
+
+// The types that appear in the public api. Consumers cannot import them from
+// the submodules directly, because those are not exposed in package.json.
+// Type only, so that the iife build keeps exposing the TreeElement class itself
+// as its global, instead of an object of named exports.
+
+class TreeElement {
+  /** @hidden */
+  tree;
+  _classNames;
+  _dataLoader;
+  _dndHandler;
+  _htmlElement;
+  _isInitialized;
+  _keyHandler;
+  _mouseHandler;
+  _nodeMap;
+  _options;
+  _renderer;
+  _saveStateHandler;
+  _scrollHandler;
+  _selectNodeHandler;
+  _triggerEventProvider;
+
+  /** @hidden */
+  constructor({
+    htmlElement,
+    overrideTriggerEventProvider,
+    ...options
+  }) {
+    this._htmlElement = htmlElement;
+    this._options = setDefaultOptions(htmlElement, options);
+    this._classNames = createClassNames(this._options);
+    this._triggerEventProvider = overrideTriggerEventProvider ?? triggerCustomEvent;
+    this._isInitialized = false;
+    this.tree = new Node({}, true);
+    this._nodeMap = new WeakMap();
+    const {
+      autoEscape,
+      buttonLeft,
+      closedIcon,
+      dataFilter,
+      dragAndDrop,
+      keyboardSupport,
+      onCanMove,
+      onCanMoveTo,
+      onCreateLi,
+      onDragMove,
+      onDragStop,
+      onGetStateFromStorage,
+      onIsMoveHandle,
+      onSetStateFromStorage,
+      openedIcon,
+      openFolderDelay,
+      rtl,
+      saveState: saveStateOption,
+      showEmptyFolder,
+      slide,
+      tabIndex
+    } = this._options;
+    const classNames = this._classNames;
+    const closeNode = this.closeNode.bind(this);
+    const getNodeElement = this._getNodeElement.bind(this);
+    const getNodeElementForNode = this._getNodeElementForNode.bind(this);
+    const getNodeById = this.getNodeById.bind(this);
+    const getSelectedNode = this.getSelectedNode.bind(this);
+    const getTree = this.getTree.bind(this);
+    const isFocusOnTree = this._isFocusOnTree.bind(this);
+    const loadData = this.loadData.bind(this);
+    const openNode = this.openNode.bind(this);
+    const openParents = this._openParents.bind(this);
+    const refreshElements = this._refreshElements.bind(this);
+    const refreshHitAreas = this.refreshHitAreas.bind(this);
+    const setNodeElement = this._setNodeElement.bind(this);
+    const treeElement = this._htmlElement;
+    const triggerEvent = this._triggerEvent.bind(this);
+    const saveState = () => {
+      saveStateHandler.saveState();
+    };
+    const selectNodeHandler = new SelectNodeHandler({
+      getNodeById,
+      getNodeElementForNode,
+      getOnCanSelectNode: () => this._options.onCanSelectNode,
+      getSelectable: () => this._options.selectable,
+      openParents,
+      saveState,
+      triggerEvent
+    });
+    const addToSelection = selectNodeHandler.addToSelection.bind(selectNodeHandler);
+    const getSelectedNodes = selectNodeHandler.getSelectedNodes.bind(selectNodeHandler);
+    const isNodeSelected = selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
+    const removeFromSelection = selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
+    const selectNode = selectNodeHandler.selectSingleNode.bind(selectNodeHandler);
+    const getMouseDelay = () => this._options.startDndDelay ?? 0;
+    const dataLoader = new DataLoader({
+      classNames,
+      dataFilter,
+      loadData,
+      treeElement,
+      triggerEvent
+    });
+    const saveStateHandler = new SaveStateHandler({
+      addToSelection,
+      getNodeById,
+      getSelectedNodes,
+      getTree,
+      onGetStateFromStorage,
+      onSetStateFromStorage,
+      openNode,
+      refreshElements,
+      removeFromSelection,
+      saveState: saveStateOption
+    });
+    const scrollHandler = new ScrollHandler({
+      refreshHitAreas,
+      treeElement
+    });
+    const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
+    const dndHandler = new DragAndDropHandler({
+      autoEscape,
+      classNames,
+      getNodeElement,
+      getNodeElementForNode,
+      getScrollLeft,
+      getTree,
+      onCanMove,
+      onCanMoveTo,
+      onDragMove,
+      onDragStop,
+      onIsMoveHandle,
+      openFolderDelay,
+      openNode,
+      refreshElements,
+      slide,
+      treeElement,
+      triggerEvent
+    });
+    const keyHandler = new KeyHandler({
+      closeNode,
+      getSelectedNode,
+      isFocusOnTree,
+      keyboardSupport,
+      openNode,
+      selectNode
+    });
+    const renderer = new ElementsRenderer({
+      autoEscape,
+      buttonLeft,
+      classNames,
+      closedIcon,
+      dragAndDrop,
+      getTree,
+      htmlElement: treeElement,
+      isNodeSelected,
+      onCreateLi,
+      openedIcon,
+      rtl,
+      setNodeElement,
+      showEmptyFolder,
+      tabIndex
+    });
+    const getNode = this.getNode.bind(this);
+    const onMouseCapture = this._mouseCapture.bind(this);
+    const onMouseDrag = this._mouseDrag.bind(this);
+    const onMouseStart = this._mouseStart.bind(this);
+    const onMouseStop = this._mouseStop.bind(this);
+    const mouseHandler = new MouseHandler({
+      classNames,
+      element: treeElement,
+      getMouseDelay,
+      getNode,
+      onClickButton: this.toggle.bind(this),
+      onClickTitle: selectNode,
+      onMouseCapture,
+      onMouseDrag,
+      onMouseStart,
+      onMouseStop,
+      triggerEvent,
+      useContextMenu: this._options.useContextMenu
+    });
+    this._dataLoader = dataLoader;
+    this._dndHandler = dndHandler;
+    this._keyHandler = keyHandler;
+    this._mouseHandler = mouseHandler;
+    this._renderer = renderer;
+    this._saveStateHandler = saveStateHandler;
+    this._scrollHandler = scrollHandler;
+    this._selectNodeHandler = selectNodeHandler;
+    this._initData();
+  }
+
+  /**
+   * Adds a sibling after a node.
+   *
+   * @returns The new node, or `null` when the node has no parent.
+   * @group Changing the tree
+   */
+  addNodeAfter(nodeData, existingNode) {
+    const newNode = existingNode.addAfter(nodeData);
+    if (newNode) {
+      this._refreshElements(existingNode.parent);
+    }
+    return newNode;
+  }
+
+  /**
+   * Adds a sibling before a node.
+   *
+   * @returns The new node, or `null` when the node has no parent.
+   * @group Changing the tree
+   */
+  addNodeBefore(nodeData, existingNode) {
+    const newNode = existingNode.addBefore(nodeData);
+    if (newNode) {
+      this._refreshElements(existingNode.parent);
+    }
+    return newNode;
+  }
+
+  /**
+   * Inserts a new node between a node and its parent, taking the node as its
+   * child.
+   *
+   * @returns The new node, or `null` when the node has no parent.
+   * @group Changing the tree
+   */
+  addParentNode(nodeData, existingNode) {
+    const newNode = existingNode.addParent(nodeData);
+    if (newNode) {
+      this._refreshElements(newNode.parent);
+    }
+    return newNode;
+  }
+
+  /**
+   * Adds a node to the selection instead of replacing it.
+   *
+   * @param mustSetFocus - Move the focus to the node. Default `true`.
+   * @group Selection
+   */
+  addToSelection(node, mustSetFocus) {
+    this._selectNodeHandler.addToSelection(node);
+    this._openParents(node);
+    this._getNodeElementForNode(node).select(mustSetFocus ?? true);
+    this._saveState();
+  }
+
+  /**
+   * Adds a node as the last child of a parent.
+   *
+   * @example
+   * ```js
+   * tree.appendNode({ name: "child", id: 5 }, tree.getNodeById(1));
+   * ```
+   *
+   * @returns The new node.
+   * @group Changing the tree
+   */
+  appendNode(nodeData, parentNode) {
+    const node = parentNode.append(nodeData);
+    this._refreshElements(parentNode);
+    return node;
+  }
+
+  /**
+   * Closes a folder.
+   *
+   * @param slide - Override the `slide` option for this call.
+   * @group Opening and closing
+   */
+  closeNode(node, slide) {
+    if (node.isFolder() || node.isEmptyFolder) {
+      this._createFolderElement(node).close(slide ?? this._options.slide, this._options.animationSpeed);
+      this._saveState();
+    }
+  }
+
+  /**
+   * Empties the element and removes the tree's document-level keyboard
+   * listener. Call it when you remove the tree from the page.
+   *
+   * @group Other
+   */
+  deinit() {
+    this._htmlElement.textContent = '';
+    this._dataLoader.deinit();
+    this._keyHandler.deinit();
+    this._mouseHandler.deinit();
+    this.tree = new Node({}, true);
+  }
+
+  /**
+   * Returns the node that belongs to a `li` element the tree rendered.
+   *
+   * @group Finding nodes
+   */
+  getNode(element) {
+    const liElement = element.closest(`li.${this._classNames.common}`);
+    if (liElement) {
+      return this._nodeMap.get(liElement) ?? null;
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * Returns the first node for which the callback returns `true`.
+   *
+   * @example
+   * ```js
+   * const node = tree.getNodeByCallback((node) => node.children.length > 3);
+   * ```
+   *
+   * @group Finding nodes
+   */
+  getNodeByCallback(callback) {
+    return this.tree.getNodeByCallback(callback);
+  }
+
+  /**
+   * Returns the node with this id.
+   *
+   * @example
+   * ```js
+   * const node = tree.getNodeById(1);
+   * ```
+   *
+   * @group Finding nodes
+   */
+  getNodeById(id) {
+    return this.tree.getNodeById(id);
+  }
+
+  /**
+   * Returns the first node with this name.
+   *
+   * @group Finding nodes
+   */
+  getNodeByName(name) {
+    return this.tree.getNodeByName(name);
+  }
+
+  /**
+   * Like `getNodeByName`, but throws when there is no such node. Convenient
+   * in tests and when a missing node is a bug.
+   *
+   * @group Finding nodes
+   */
+  getNodeByNameMustExist(name) {
+    return this.tree.getNodeByNameMustExist(name);
+  }
+
+  /**
+   * Returns all nodes with this property value.
+   *
+   * @example
+   * ```js
+   * tree.getNodesByProperty("color", "green");
+   * ```
+   *
+   * @group Finding nodes
+   */
+  getNodesByProperty(key, value) {
+    return this.tree.getNodesByProperty(key, value);
+  }
+
+  /**
+   * Returns the selected node, or `false` when nothing is selected.
+   *
+   * @group Selection
+   */
+  getSelectedNode() {
+    return this._selectNodeHandler.getSelectedNode();
+  }
+
+  /**
+   * Returns the selected nodes.
+   *
+   * @group Selection
+   */
+  getSelectedNodes() {
+    return this._selectNodeHandler.getSelectedNodes();
+  }
+
+  /**
+   * Returns the current state — `open_nodes` and `selected_node` — whether or
+   * not `saveState` is enabled.
+   *
+   * @group State
+   */
+  getState() {
+    return this._saveStateHandler.getState();
+  }
+
+  /**
+   * Returns the state as it is stored.
+   *
+   * @group State
+   */
+  getStateFromStorage() {
+    return this._saveStateHandler.getStateFromStorage();
+  }
+
+  /**
+   * Returns the root node. It is not rendered; its `children` are the
+   * top-level nodes. Also available as the `tree` property.
+   *
+   * @group Finding nodes
+   */
+  getTree() {
+    return this.tree;
+  }
+
+  /**
+   * Returns the version of tree-element.
+   *
+   * @group Other
+   */
+  getVersion() {
+    return version;
+  }
+
+  /**
+   * Returns whether the user is dragging a node.
+   *
+   * @group Other
+   */
+  isDragging() {
+    return this._dndHandler.isDragging;
+  }
+
+  /**
+   * Returns whether the node is selected.
+   *
+   * @group Selection
+   */
+  isNodeSelected(node) {
+    return this._selectNodeHandler.isNodeSelected(node);
+  }
+
+  /**
+   * Loads data into the tree.
+   *
+   * @param parentNode - Replace this node's children instead of the whole
+   * tree.
+   * @group Loading data
+   */
+  loadData(data, parentNode) {
+    if (data) {
+      if (parentNode) {
+        this._deselectNodes(parentNode);
+        this._loadSubtree(data, parentNode);
+      } else {
+        this._initTree(data);
+      }
+      if (this.isDragging()) {
+        this._dndHandler.refresh();
+      }
+    }
+    this._triggerEvent("tree.set_data", {
+      node: parentNode,
+      treeData: data ?? undefined
+    });
+  }
+
+  /**
+   * Fetches data and loads it into the tree, or into `parentNode`.
+   *
+   * @param url - Defaults to the `dataUrl` option.
+   * @group Loading data
+   */
+  async loadDataFromUrl(url, parentNode) {
+    const requestUrl = url ? new RequestUrl(url) : this._createRequestUrl(parentNode);
+    if (requestUrl) {
+      await this._dataLoader.loadFromUrl(requestUrl, parentNode);
+    }
+  }
+
+  /**
+   * Selects the next visible node, like the down arrow key.
+   *
+   * @group Selection
+   */
+  moveDown() {
+    const selectedNode = this.getSelectedNode();
+    if (selectedNode) {
+      this._keyHandler.moveDown(selectedNode);
+    }
+  }
+
+  /**
+   * Moves a node inside the tree.
+   *
+   * @example
+   * ```js
+   * tree.moveNode(tree.getNodeById(2), tree.getNodeById(1), "inside");
+   * ```
+   *
+   * @param position - `"before"`, `"after"` or `"inside"`.
+   * @group Changing the tree
+   */
+  moveNode(node, targetNode, position) {
+    this.tree.moveNode(node, targetNode, position);
+    this._refreshElements(null);
+  }
+
+  /**
+   * Selects the previous visible node, like the up arrow key.
+   *
+   * @group Selection
+   */
+  moveUp() {
+    const selectedNode = this.getSelectedNode();
+    if (selectedNode) {
+      this._keyHandler.moveUp(selectedNode);
+    }
+  }
+
+  /**
+   * Opens a folder, and the folders above it. A node marked `load_on_demand`
+   * is fetched first, so await the promise when you need to know it is really
+   * open.
+   *
+   * @example
+   * ```js
+   * await tree.openNode(node);
+   * console.log("open");
+   * ```
+   *
+   * @param slide - Override the `slide` option for this call.
+   * @group Opening and closing
+   */
+  async openNode(node, slide) {
+    const mustSlide = slide ?? this._options.slide;
+    const doOpenNode = async (openedNode, slideOption) => {
+      if (!node.children.length) {
+        return;
+      }
+      const folderElement = this._createFolderElement(openedNode);
+      await folderElement.open(slideOption, this._options.animationSpeed);
+    };
+    if (node.isFolder() || node.isEmptyFolder) {
+      if (node.load_on_demand) {
+        await this._loadFolderOnDemand(node, mustSlide);
+      } else {
+        let parent = node.parent;
+        while (parent) {
+          // nb: do not open root element
+          if (parent.parent) {
+            await doOpenNode(parent, false);
+          }
+          parent = parent.parent;
+        }
+        await doOpenNode(node, mustSlide);
+        this._saveState();
+      }
+    }
+  }
+
+  /**
+   * Adds a node as the first child of a parent.
+   *
+   * @returns The new node.
+   * @group Changing the tree
+   */
+  prependNode(nodeData, parentNode) {
+    const node = parentNode.prepend(nodeData);
+    this._refreshElements(parentNode);
+    return node;
+  }
+
+  /**
+   * Re-renders the whole tree. Needed after changing node data directly
+   * instead of through these methods.
+   *
+   * @group Changing the tree
+   */
+  refresh() {
+    this._refreshElements(null);
+  }
+
+  /**
+   * Recomputes the drop targets. Call this if the layout changes during a
+   * drag.
+   *
+   * @group Other
+   */
+  refreshHitAreas() {
+    this._dndHandler.refresh();
+  }
+
+  /**
+   * Removes a node from the selection.
+   *
+   * @group Selection
+   */
+  removeFromSelection(node) {
+    this._selectNodeHandler.removeFromSelection(node);
+    this._getNodeElementForNode(node).deselect();
+    this._saveState();
+  }
+
+  /**
+   * Removes a node and its children.
+   *
+   * @group Changing the tree
+   */
+  removeNode(node) {
+    this._selectNodeHandler.removeFromSelection(node, true); // including children
+
+    const parent = node.parent;
+    node.remove();
+    this._refreshElements(parent);
+  }
+
+  /**
+   * Scrolls the node into view.
+   *
+   * @group Selection
+   */
+  scrollToNode(node) {
+    if (!node.element) {
+      return;
+    }
+    const top = getOffsetTop(node.element) - getOffsetTop(this._htmlElement);
+    this._scrollHandler.scrollToY(top);
+  }
+
+  /**
+   * Replaces the selection, and opens the parents of the node.
+   *
+   * @param node - `null` clears the selection.
+   * @param options - `mustSetFocus`: move focus to the node, default `true`.
+   * `mustToggle`: deselect the node if it is already selected, default
+   * `false`.
+   * @group Selection
+   */
+  selectNode(node, options) {
+    if (!node) {
+      // Called with empty node -> deselect current node
+      this._deselectCurrentNode();
+      this._saveStateHandler.saveState();
+      return;
+    }
+    this._selectNodeHandler.selectSingleNode(node, options);
+  }
+
+  /**
+   * Changes an option after construction. See
+   * [Options](/reference/options#changing-an-option-later) for the caveats.
+   *
+   * @group Other
+   */
+  setOption(option, value) {
+    this._options[option] = value;
+  }
+
+  /**
+   * Applies a state to the tree.
+   *
+   * @group State
+   */
+  setState(state) {
+    this._saveStateHandler.setInitialState(state);
+    this._refreshElements(null);
+  }
+
+  /**
+   * Closes an open node and opens a closed one.
+   *
+   * @param slide - Override the `slide` option for this call.
+   * @group Opening and closing
+   */
+  toggle(node, slide = null) {
+    const mustSlide = slide ?? this._options.slide;
+    if (node.is_open) {
+      this.closeNode(node, mustSlide);
+    } else {
+      void this.openNode(node, mustSlide);
+    }
+  }
+
+  /**
+   * Returns the tree as a json string, including changes made through the
+   * api.
+   *
+   * @group Other
+   */
+  toJson() {
+    return JSON.stringify(this.tree.getData());
+  }
+
+  /**
+   * Updates the data of a node and re-renders it. A string updates just the
+   * name.
+   *
+   * Changing the `id` re-indexes the node. `children` and `parent` are
+   * ignored — use `loadData` or `moveNode` for those.
+   *
+   * @example
+   * ```js
+   * tree.updateNode(node, "new name");
+   * tree.updateNode(node, { name: "new name", color: "red" });
+   * ```
+   *
+   * @group Changing the tree
+   */
+  updateNode(node, data) {
+    const idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
+    if (idIsChanged) {
+      this.tree.removeNodeFromIndex(node);
+    }
+    node.setData(data);
+    if (idIsChanged) {
+      this.tree.addNodeToIndex(node);
+    }
+    if (typeof data === "object" && data.children && data.children instanceof Array) {
+      node.removeChildren();
+      if (data.children.length) {
+        node.loadFromData(data.children);
+      }
+    }
+    this._refreshElements(node);
+  }
+  _createFolderElement(node) {
+    const classNames = this._classNames;
+    const closedIconElement = this._renderer.closedIconElement;
+    const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
+    const openedIconElement = this._renderer.openedIconElement;
+    const tabIndex = this._options.tabIndex;
+    const treeElement = this._htmlElement;
+    const triggerEvent = this._triggerEvent.bind(this);
+    return new FolderElement({
+      classNames,
+      closedIconElement,
+      getScrollLeft,
+      node,
+      openedIconElement,
+      tabIndex,
+      treeElement,
+      triggerEvent
+    });
+  }
+  _createNodeElement(node) {
+    const classNames = this._classNames;
+    const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
+    const tabIndex = this._options.tabIndex;
+    const treeElement = this._htmlElement;
+    return new NodeElement({
+      classNames,
+      getScrollLeft,
+      node,
+      tabIndex,
+      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.
+  */
+  _createRequestUrl(node) {
+    const dataUrl = this._options.dataUrl;
+    let url;
+    if (typeof dataUrl === "function") {
+      url = dataUrl(node);
+    } else {
+      url = dataUrl;
+    }
+    if (!url) {
+      return null;
+    }
+    const requestUrl = new RequestUrl(url);
+    if (node?.id) {
+      // Load on demand of a subtree; add node parameter
+      requestUrl.setSearchParam('node', node.id.toString());
+    } else {
+      // Add selected_node parameter
+      const selectedNodeId = this._getNodeIdToBeSelected();
+      if (selectedNodeId) {
+        requestUrl.setSearchParam('selected_node', selectedNodeId.toString());
+      }
+    }
+    return requestUrl;
+  }
+  _deselectCurrentNode() {
+    const node = this.getSelectedNode();
+    if (node) {
+      this.removeFromSelection(node);
+    }
+  }
+
+  // Deselect the children of the node.
+  _deselectNodes(parentNode) {
+    const selectedNodesUnderParent = this._selectNodeHandler.getSelectedNodesUnder(parentNode);
+    for (const n of selectedNodesUnderParent) {
+      this._selectNodeHandler.removeFromSelection(n);
+    }
+  }
+
+  // Get the maximum level for auto open
+  _getAutoOpenMaxLevel() {
+    if (this._options.autoOpen === true) {
+      return -1;
+    } else if (typeof this._options.autoOpen === "number") {
+      return this._options.autoOpen;
+    } else if (typeof this._options.autoOpen === "string") {
+      return parseInt(this._options.autoOpen, 10);
+    }
+
+    /* istanbul ignore next @preserve */
+    return 0;
+  }
+  _getNodeElement(element) {
+    const node = this.getNode(element);
+    if (node) {
+      return this._getNodeElementForNode(node);
+    } else {
+      return null;
+    }
+  }
+  _getNodeElementForNode(node) {
+    if (node.isFolder()) {
+      return this._createFolderElement(node);
+    } else {
+      return this._createNodeElement(node);
+    }
+  }
+  _getNodeIdToBeSelected() {
+    return this._saveStateHandler.getNodeIdToBeSelected();
+  }
+  _initData() {
+    if (this._options.data) {
+      this.loadData(this._options.data);
+    } else {
+      const dataUrl = this._createRequestUrl();
+      if (dataUrl) {
+        void this.loadDataFromUrl();
+      } else {
+        this.loadData([]);
+      }
+    }
+  }
+  _initTree(data) {
+    const doInit = () => {
+      if (!this._isInitialized) {
+        this._isInitialized = true;
+        this._triggerEvent("tree.init");
+      }
+    };
+    this.tree = new this._options.nodeClass(null, true, this._options.nodeClass);
+    this._selectNodeHandler.clear();
+    this.tree.loadFromData(data);
+    const mustLoadOnDemand = this._setInitialState();
+    this._refreshElements(null);
+    if (mustLoadOnDemand) {
+      // Load data on demand and then init the tree
+      void this._setInitialStateOnDemand().then(doInit);
+    } else {
+      doInit();
+    }
+  }
+
+  // Does an HTML element of the tree have the focus?
+  _isFocusOnTree() {
+    const activeElement = document.activeElement;
+
+    /* istanbul ignore if */
+    if (!activeElement) {
+      return false;
+    }
+
+    // The keyboard must still work for input elements.
+    const tagName = activeElement.tagName;
+    if (tagName !== "A" && tagName !== "SPAN") {
+      return false;
+    }
+    const node = this.getNode(activeElement);
+    return node?.tree === this.tree;
+  }
+  _isSelectedNodeInSubtree(subtree) {
+    const selectedNode = this.getSelectedNode();
+    if (!selectedNode) {
+      return false;
+    } else {
+      return subtree === selectedNode || subtree.isParentOf(selectedNode);
+    }
+  }
+  async _loadFolderOnDemand(node, slide) {
+    node.is_loading = true;
+    await this.loadDataFromUrl(undefined, node);
+    await this.openNode(node, slide);
+  }
+  _loadSubtree(data, parentNode) {
+    parentNode.loadFromData(data);
+    parentNode.load_on_demand = false;
+    parentNode.is_loading = false;
+    this._refreshElements(parentNode);
+  }
+  _mouseCapture(positionInfo) {
+    if (!this._options.dragAndDrop) {
+      return false;
+    }
+    return this._dndHandler.mouseCapture(positionInfo);
+  }
+  _mouseDrag(positionInfo) {
+    /* istanbul ignore if */
+    if (!this._options.dragAndDrop) {
+      return false;
+    }
+    const result = this._dndHandler.mouseDrag(positionInfo);
+    this._scrollHandler.checkScrolling(positionInfo);
+    return result;
+  }
+  _mouseStart(positionInfo) {
+    /* istanbul ignore if */
+    if (!this._options.dragAndDrop) {
+      return false;
+    }
+    return this._dndHandler.mouseStart(positionInfo);
+  }
+  _mouseStop(positionInfo) {
+    /* istanbul ignore if */
+    if (!this._options.dragAndDrop) {
+      return false;
+    }
+    this._scrollHandler.stopScrolling();
+    return this._dndHandler.mouseStop(positionInfo);
+  }
+  _openParents(node) {
+    const parent = node.parent;
+    if (parent?.parent && !parent.is_open) {
+      void this.openNode(parent, false);
+    }
+  }
+
+  /*
+  Redraw the tree or part of the tree.
+    from_node: redraw this subtree
+  */
+  _refreshElements(fromNode) {
+    const mustSetFocus = this._isFocusOnTree();
+    const mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
+    this._renderer.render(fromNode);
+    if (mustSelect) {
+      this._selectCurrentNode(mustSetFocus);
+    }
+    this._triggerEvent("tree.refresh");
+  }
+  _saveState() {
+    this._saveStateHandler.saveState();
+  }
+  _selectCurrentNode(mustSetFocus) {
+    const node = this.getSelectedNode();
+    if (node) {
+      const nodeElement = this._getNodeElementForNode(node);
+      nodeElement.select(mustSetFocus);
+    }
+  }
+
+  // Set initial state, either by restoring the state or auto-opening nodes
+  // result: must load nodes on demand?
+  _setInitialState() {
+    const restoreState = () => {
+      // result: is state restored, must load on demand?
+      const state = this._saveStateHandler.getStateFromStorage();
+      if (!state) {
+        return [false, false];
+      } else {
+        const mustLoadOnDemand = this._saveStateHandler.setInitialState(state);
+
+        // return true: the state is restored
+        return [true, mustLoadOnDemand];
+      }
+    };
+    const autoOpenNodes = () => {
+      // result: must load on demand?
+      if (this._options.autoOpen === false) {
+        return false;
+      }
+      const maxLevel = this._getAutoOpenMaxLevel();
+      let mustLoadOnDemand = false;
+      this.tree.iterate((node, level) => {
+        if (node.load_on_demand) {
+          mustLoadOnDemand = true;
+          return false;
+        } else if (!node.hasChildren()) {
+          return false;
+        } else {
+          node.is_open = true;
+          return level !== maxLevel;
+        }
+      });
+      return mustLoadOnDemand;
+    };
+    let [isRestored, mustLoadOnDemand] = restoreState(); // eslint-disable-line prefer-const
+
+    if (!isRestored) {
+      mustLoadOnDemand = autoOpenNodes();
+    }
+    return mustLoadOnDemand;
+  }
+
+  // Set the initial state for nodes that are loaded on demand
+  async _setInitialStateOnDemand() {
+    return new Promise(resolve => {
+      const restoreState = () => {
+        const state = this._saveStateHandler.getStateFromStorage();
+        if (!state) {
+          return false;
+        } else {
+          void this._saveStateHandler.setInitialStateOnDemand(state).then(() => {
+            resolve();
+          });
+          return true;
+        }
+      };
+      const autoOpenNodes = () => {
+        const maxLevel = this._getAutoOpenMaxLevel();
+        let loadingCount = 0;
+        const loadAndOpenNode = node => {
+          loadingCount += 1;
+          void this.openNode(node, false).then(() => {
+            loadingCount -= 1;
+            openNodes();
+          });
+        };
+        const openNodes = () => {
+          this.tree.iterate((node, level) => {
+            if (node.load_on_demand) {
+              if (!node.is_loading) {
+                loadAndOpenNode(node);
+              }
+              return false;
+            } else {
+              void this.openNode(node, false);
+              return level !== maxLevel;
+            }
+          });
+          if (loadingCount === 0) {
+            resolve();
+          }
+        };
+        openNodes();
+      };
+      if (!restoreState()) {
+        autoOpenNodes();
+      }
+    });
+  }
+
+  // Set this HTML element to this node in the node map.
+  _setNodeElement(element, node) {
+    this._nodeMap.set(element, node);
+  }
+  _triggerEvent(eventName, values) {
+    return this._triggerEventProvider(this._htmlElement, eventName, values);
+  }
+}
+
+export { TreeElement as default };
+//# sourceMappingURL=index.js.map