tree-element 0.1.0 → 0.2.0

package/lib/index.js

@@ -1,5 +1,5 @@
 /*
-Html-tree 0.1.0
+Tree-element 0.2.0
 
 Copyright 2026 Marco Braak
 
@@ -41,8 +41,6 @@ import version from './version.js';
 // as its global, instead of an object of named exports.
 
 class TreeElement {
-  /** @hidden */
-  tree;
   _classNames;
   _dataLoader;
   _dndHandler;
@@ -56,6 +54,7 @@ class TreeElement {
   _saveStateHandler;
   _scrollHandler;
   _selectNodeHandler;
+  _tree;
   _triggerEventProvider;
 
   /** @hidden */
@@ -69,9 +68,9 @@ class TreeElement {
     this._classNames = createClassNames(this._options);
     this._triggerEventProvider = overrideTriggerEventProvider ?? triggerCustomEvent;
     this._isInitialized = false;
-    this.tree = new Node({}, true);
+    this._tree = new Node({}, true);
     this._nodeMap = new WeakMap();
-    const {
+    let {
       autoEscape,
       buttonLeft,
       closedIcon,
@@ -94,125 +93,125 @@ class TreeElement {
       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();
+    let classNames = this._classNames;
+    let closeNode = this.closeNode.bind(this);
+    let getNodeElement = this._getNodeElement.bind(this);
+    let getNodeElementForNode = this._getNodeElementForNode.bind(this);
+    let getNodeById = this.getNodeById.bind(this);
+    let getSelectedNode = this.getSelectedNode.bind(this);
+    let getTree = this.getTree.bind(this);
+    let isFocusOnTree = this._isFocusOnTree.bind(this);
+    let loadData = this.loadData.bind(this);
+    let openNode = this.openNode.bind(this);
+    let openParents = this._openParents.bind(this);
+    let refreshElements = this._refreshElements.bind(this);
+    let refreshHitAreas = this.refreshHitAreas.bind(this);
+    let setNodeElement = this._setNodeElement.bind(this);
+    let treeElement = this._htmlElement;
+    let triggerEvent = this._triggerEvent.bind(this);
+    let saveState = () => {
+      saveStateHandler._saveState();
     };
-    const selectNodeHandler = new SelectNodeHandler({
-      getNodeById,
-      getNodeElementForNode,
-      getOnCanSelectNode: () => this._options.onCanSelectNode,
-      getSelectable: () => this._options.selectable,
-      openParents,
-      saveState,
-      triggerEvent
+    let selectNodeHandler = new SelectNodeHandler({
+      _getNodeById: getNodeById,
+      _getNodeElementForNode: getNodeElementForNode,
+      _getOnCanSelectNode: () => this._options.onCanSelectNode,
+      _getSelectable: () => this._options.selectable,
+      _openParents: openParents,
+      _saveState: saveState,
+      _triggerEvent: 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
+    let addToSelection = selectNodeHandler._addToSelection.bind(selectNodeHandler);
+    let getSelectedNodes = selectNodeHandler._getSelectedNodes.bind(selectNodeHandler);
+    let isNodeSelected = selectNodeHandler._isNodeSelected.bind(selectNodeHandler);
+    let removeFromSelection = selectNodeHandler._removeFromSelection.bind(selectNodeHandler);
+    let selectNode = selectNodeHandler._selectSingleNode.bind(selectNodeHandler);
+    let getMouseDelay = () => this._options.startDndDelay ?? 0;
+    let dataLoader = new DataLoader({
+      _classNames: classNames,
+      _dataFilter: dataFilter,
+      _loadData: loadData,
+      _treeElement: treeElement,
+      _triggerEvent: triggerEvent
     });
-    const saveStateHandler = new SaveStateHandler({
-      addToSelection,
-      getNodeById,
-      getSelectedNodes,
-      getTree,
-      onGetStateFromStorage,
-      onSetStateFromStorage,
-      openNode,
-      refreshElements,
-      removeFromSelection,
-      saveState: saveStateOption
+    let saveStateHandler = new SaveStateHandler({
+      _addToSelection: addToSelection,
+      _getNodeById: getNodeById,
+      _getSelectedNodes: getSelectedNodes,
+      _getTree: getTree,
+      _onGetStateFromStorage: onGetStateFromStorage,
+      _onSetStateFromStorage: onSetStateFromStorage,
+      _openNode: openNode,
+      _refreshElements: refreshElements,
+      _removeFromSelection: removeFromSelection,
+      _saveState: saveStateOption
     });
-    const scrollHandler = new ScrollHandler({
-      refreshHitAreas,
-      treeElement
+    let scrollHandler = new ScrollHandler({
+      _refreshHitAreas: refreshHitAreas,
+      _treeElement: 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
+    let getScrollLeft = scrollHandler._getScrollLeft.bind(scrollHandler);
+    let dndHandler = new DragAndDropHandler({
+      _autoEscape: autoEscape,
+      _classNames: classNames,
+      _getNodeElement: getNodeElement,
+      _getNodeElementForNode: getNodeElementForNode,
+      _getScrollLeft: getScrollLeft,
+      _getTree: getTree,
+      _onCanMove: onCanMove,
+      _onCanMoveTo: onCanMoveTo,
+      _onDragMove: onDragMove,
+      _onDragStop: onDragStop,
+      _onIsMoveHandle: onIsMoveHandle,
+      _openFolderDelay: openFolderDelay,
+      _openNode: openNode,
+      _refreshElements: refreshElements,
+      _slide: slide,
+      _treeElement: treeElement,
+      _triggerEvent: triggerEvent
     });
-    const keyHandler = new KeyHandler({
-      closeNode,
-      getSelectedNode,
-      isFocusOnTree,
-      keyboardSupport,
-      openNode,
-      selectNode
+    let keyHandler = new KeyHandler({
+      _closeNode: closeNode,
+      _getSelectedNode: getSelectedNode,
+      _isFocusOnTree: isFocusOnTree,
+      _keyboardSupport: keyboardSupport,
+      _openNode: openNode,
+      _selectNode: selectNode
     });
-    const renderer = new ElementsRenderer({
-      autoEscape,
-      buttonLeft,
-      classNames,
-      closedIcon,
-      dragAndDrop,
-      getTree,
-      htmlElement: treeElement,
-      isNodeSelected,
-      onCreateLi,
-      openedIcon,
-      rtl,
-      setNodeElement,
-      showEmptyFolder,
-      tabIndex
+    let renderer = new ElementsRenderer({
+      _autoEscape: autoEscape,
+      _buttonLeft: buttonLeft,
+      _classNames: classNames,
+      _closedIcon: closedIcon,
+      _dragAndDrop: dragAndDrop,
+      _getTree: getTree,
+      _htmlElement: treeElement,
+      _isNodeSelected: isNodeSelected,
+      _onCreateLi: onCreateLi,
+      _openedIcon: openedIcon,
+      _rtl: rtl,
+      _setNodeElement: setNodeElement,
+      _showEmptyFolder: showEmptyFolder,
+      _tabIndex: 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
+    let getNode = this.getNode.bind(this);
+    let onMouseCapture = this._mouseCapture.bind(this);
+    let onMouseDrag = this._mouseDrag.bind(this);
+    let onMouseStart = this._mouseStart.bind(this);
+    let onMouseStop = this._mouseStop.bind(this);
+    let mouseHandler = new MouseHandler({
+      _classNames: classNames,
+      _element: treeElement,
+      _getMouseDelay: getMouseDelay,
+      _getNode: getNode,
+      _onClickButton: this.toggle.bind(this),
+      _onClickTitle: selectNode,
+      _onMouseCapture: onMouseCapture,
+      _onMouseDrag: onMouseDrag,
+      _onMouseStart: onMouseStart,
+      _onMouseStop: onMouseStop,
+      _triggerEvent: triggerEvent,
+      _useContextMenu: this._options.useContextMenu
     });
     this._dataLoader = dataLoader;
     this._dndHandler = dndHandler;
@@ -232,7 +231,7 @@ class TreeElement {
    * @group Changing the tree
    */
   addNodeAfter(nodeData, existingNode) {
-    const newNode = existingNode.addAfter(nodeData);
+    let newNode = existingNode.addAfter(nodeData);
     if (newNode) {
       this._refreshElements(existingNode.parent);
     }
@@ -246,7 +245,7 @@ class TreeElement {
    * @group Changing the tree
    */
   addNodeBefore(nodeData, existingNode) {
-    const newNode = existingNode.addBefore(nodeData);
+    let newNode = existingNode.addBefore(nodeData);
     if (newNode) {
       this._refreshElements(existingNode.parent);
     }
@@ -261,7 +260,7 @@ class TreeElement {
    * @group Changing the tree
    */
   addParentNode(nodeData, existingNode) {
-    const newNode = existingNode.addParent(nodeData);
+    let newNode = existingNode.addParent(nodeData);
     if (newNode) {
       this._refreshElements(newNode.parent);
     }
@@ -275,9 +274,9 @@ class TreeElement {
    * @group Selection
    */
   addToSelection(node, mustSetFocus) {
-    this._selectNodeHandler.addToSelection(node);
+    this._selectNodeHandler._addToSelection(node);
     this._openParents(node);
-    this._getNodeElementForNode(node).select(mustSetFocus ?? true);
+    this._getNodeElementForNode(node)._select(mustSetFocus ?? true);
     this._saveState();
   }
 
@@ -293,7 +292,7 @@ class TreeElement {
    * @group Changing the tree
    */
   appendNode(nodeData, parentNode) {
-    const node = parentNode.append(nodeData);
+    let node = parentNode.append(nodeData);
     this._refreshElements(parentNode);
     return node;
   }
@@ -306,7 +305,7 @@ class TreeElement {
    */
   closeNode(node, slide) {
     if (node.isFolder() || node.isEmptyFolder) {
-      this._createFolderElement(node).close(slide ?? this._options.slide, this._options.animationSpeed);
+      this._createFolderElement(node)._close(slide ?? this._options.slide, this._options.animationSpeed);
       this._saveState();
     }
   }
@@ -318,11 +317,11 @@ class TreeElement {
    * @group Other
    */
   deinit() {
-    this._htmlElement.textContent = '';
-    this._dataLoader.deinit();
-    this._keyHandler.deinit();
-    this._mouseHandler.deinit();
-    this.tree = new Node({}, true);
+    this._htmlElement.textContent = "";
+    this._dataLoader._deinit();
+    this._keyHandler._deinit();
+    this._mouseHandler._deinit();
+    this._tree = new Node({}, true);
   }
 
   /**
@@ -331,7 +330,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNode(element) {
-    const liElement = element.closest(`li.${this._classNames.common}`);
+    let liElement = element.closest(`li.${this._classNames.common}`);
     if (liElement) {
       return this._nodeMap.get(liElement) ?? null;
     } else {
@@ -350,7 +349,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeByCallback(callback) {
-    return this.tree.getNodeByCallback(callback);
+    return this._tree.getNodeByCallback(callback);
   }
 
   /**
@@ -364,7 +363,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeById(id) {
-    return this.tree.getNodeById(id);
+    return this._tree.getNodeById(id);
   }
 
   /**
@@ -373,7 +372,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeByName(name) {
-    return this.tree.getNodeByName(name);
+    return this._tree.getNodeByName(name);
   }
 
   /**
@@ -383,7 +382,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeByNameMustExist(name) {
-    return this.tree.getNodeByNameMustExist(name);
+    return this._tree.getNodeByNameMustExist(name);
   }
 
   /**
@@ -397,16 +396,16 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodesByProperty(key, value) {
-    return this.tree.getNodesByProperty(key, value);
+    return this._tree.getNodesByProperty(key, value);
   }
 
   /**
-   * Returns the selected node, or `false` when nothing is selected.
+   * Returns the selected node, or `null` when nothing is selected.
    *
    * @group Selection
    */
   getSelectedNode() {
-    return this._selectNodeHandler.getSelectedNode();
+    return this._selectNodeHandler._getSelectedNode();
   }
 
   /**
@@ -415,7 +414,7 @@ class TreeElement {
    * @group Selection
    */
   getSelectedNodes() {
-    return this._selectNodeHandler.getSelectedNodes();
+    return this._selectNodeHandler._getSelectedNodes();
   }
 
   /**
@@ -425,7 +424,7 @@ class TreeElement {
    * @group State
    */
   getState() {
-    return this._saveStateHandler.getState();
+    return this._saveStateHandler._getState();
   }
 
   /**
@@ -434,7 +433,7 @@ class TreeElement {
    * @group State
    */
   getStateFromStorage() {
-    return this._saveStateHandler.getStateFromStorage();
+    return this._saveStateHandler._getStateFromStorage();
   }
 
   /**
@@ -444,7 +443,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getTree() {
-    return this.tree;
+    return this._tree;
   }
 
   /**
@@ -462,7 +461,7 @@ class TreeElement {
    * @group Other
    */
   isDragging() {
-    return this._dndHandler.isDragging;
+    return this._dndHandler._isDragging;
   }
 
   /**
@@ -471,7 +470,7 @@ class TreeElement {
    * @group Selection
    */
   isNodeSelected(node) {
-    return this._selectNodeHandler.isNodeSelected(node);
+    return this._selectNodeHandler._isNodeSelected(node);
   }
 
   /**
@@ -490,7 +489,7 @@ class TreeElement {
         this._initTree(data);
       }
       if (this.isDragging()) {
-        this._dndHandler.refresh();
+        this._dndHandler._refresh();
       }
     }
     this._triggerEvent("tree.set_data", {
@@ -506,9 +505,9 @@ class TreeElement {
    * @group Loading data
    */
   async loadDataFromUrl(url, parentNode) {
-    const requestUrl = url ? new RequestUrl(url) : this._createRequestUrl(parentNode);
+    let requestUrl = url ? new RequestUrl(url) : this._createRequestUrl(parentNode);
     if (requestUrl) {
-      await this._dataLoader.loadFromUrl(requestUrl, parentNode);
+      await this._dataLoader._loadFromUrl(requestUrl, parentNode);
     }
   }
 
@@ -518,10 +517,7 @@ class TreeElement {
    * @group Selection
    */
   moveDown() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this._keyHandler.moveDown(selectedNode);
-    }
+    this._keyHandler._moveDown();
   }
 
   /**
@@ -536,7 +532,7 @@ class TreeElement {
    * @group Changing the tree
    */
   moveNode(node, targetNode, position) {
-    this.tree.moveNode(node, targetNode, position);
+    this._tree.moveNode(node, targetNode, position);
     this._refreshElements(null);
   }
 
@@ -546,10 +542,7 @@ class TreeElement {
    * @group Selection
    */
   moveUp() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this._keyHandler.moveUp(selectedNode);
-    }
+    this._keyHandler._moveUp();
   }
 
   /**
@@ -567,13 +560,13 @@ class TreeElement {
    * @group Opening and closing
    */
   async openNode(node, slide) {
-    const mustSlide = slide ?? this._options.slide;
-    const doOpenNode = async (openedNode, slideOption) => {
+    let mustSlide = slide ?? this._options.slide;
+    let doOpenNode = async (openedNode, slideOption) => {
       if (!node.children.length) {
         return;
       }
-      const folderElement = this._createFolderElement(openedNode);
-      await folderElement.open(slideOption, this._options.animationSpeed);
+      let folderElement = this._createFolderElement(openedNode);
+      await folderElement._open(slideOption, this._options.animationSpeed);
     };
     if (node.isFolder() || node.isEmptyFolder) {
       if (node.load_on_demand) {
@@ -600,7 +593,7 @@ class TreeElement {
    * @group Changing the tree
    */
   prependNode(nodeData, parentNode) {
-    const node = parentNode.prepend(nodeData);
+    let node = parentNode.prepend(nodeData);
     this._refreshElements(parentNode);
     return node;
   }
@@ -622,7 +615,7 @@ class TreeElement {
    * @group Other
    */
   refreshHitAreas() {
-    this._dndHandler.refresh();
+    this._dndHandler._refresh();
   }
 
   /**
@@ -631,8 +624,8 @@ class TreeElement {
    * @group Selection
    */
   removeFromSelection(node) {
-    this._selectNodeHandler.removeFromSelection(node);
-    this._getNodeElementForNode(node).deselect();
+    this._selectNodeHandler._removeFromSelection(node);
+    this._getNodeElementForNode(node)._deselect();
     this._saveState();
   }
 
@@ -642,9 +635,9 @@ class TreeElement {
    * @group Changing the tree
    */
   removeNode(node) {
-    this._selectNodeHandler.removeFromSelection(node, true); // including children
+    this._selectNodeHandler._removeFromSelection(node, true); // including children
 
-    const parent = node.parent;
+    let parent = node.parent;
     node.remove();
     this._refreshElements(parent);
   }
@@ -658,8 +651,8 @@ class TreeElement {
     if (!node.element) {
       return;
     }
-    const top = getOffsetTop(node.element) - getOffsetTop(this._htmlElement);
-    this._scrollHandler.scrollToY(top);
+    let top = getOffsetTop(node.element) - getOffsetTop(this._htmlElement);
+    this._scrollHandler._scrollToY(top);
   }
 
   /**
@@ -675,10 +668,10 @@ class TreeElement {
     if (!node) {
       // Called with empty node -> deselect current node
       this._deselectCurrentNode();
-      this._saveStateHandler.saveState();
+      this._saveStateHandler._saveState();
       return;
     }
-    this._selectNodeHandler.selectSingleNode(node, options);
+    this._selectNodeHandler._selectSingleNode(node, options);
   }
 
   /**
@@ -692,13 +685,15 @@ 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
    */
   setState(state) {
-    this._saveStateHandler.setInitialState(state);
+    this._saveStateHandler._setInitialState(state);
     this._refreshElements(null);
+    this._saveState();
   }
 
   /**
@@ -708,7 +703,7 @@ class TreeElement {
    * @group Opening and closing
    */
   toggle(node, slide = null) {
-    const mustSlide = slide ?? this._options.slide;
+    let mustSlide = slide ?? this._options.slide;
     if (node.is_open) {
       this.closeNode(node, mustSlide);
     } else {
@@ -723,7 +718,7 @@ class TreeElement {
    * @group Other
    */
   toJson() {
-    return JSON.stringify(this.tree.getData());
+    return JSON.stringify(this._tree.getData());
   }
 
   /**
@@ -742,13 +737,13 @@ class TreeElement {
    * @group Changing the tree
    */
   updateNode(node, data) {
-    const idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
+    let idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
     if (idIsChanged) {
-      this.tree.removeNodeFromIndex(node);
+      this._tree.removeNodeFromIndex(node);
     }
     node.setData(data);
     if (idIsChanged) {
-      this.tree.addNodeToIndex(node);
+      this._tree.addNodeToIndex(node);
     }
     if (typeof data === "object" && data.children && data.children instanceof Array) {
       node.removeChildren();
@@ -759,44 +754,46 @@ class TreeElement {
     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);
+    let classNames = this._classNames;
+    let closedIconElement = this._renderer._closedIconElement;
+    let getScrollLeft = this._scrollHandler._getScrollLeft.bind(this._scrollHandler);
+    let openedIconElement = this._renderer._openedIconElement;
+    let renderChildren = this._renderer._renderChildren.bind(this._renderer);
+    let tabIndex = this._options.tabIndex;
+    let treeElement = this._htmlElement;
+    let triggerEvent = this._triggerEvent.bind(this);
     return new FolderElement({
-      classNames,
-      closedIconElement,
-      getScrollLeft,
-      node,
-      openedIconElement,
-      tabIndex,
-      treeElement,
-      triggerEvent
+      _classNames: classNames,
+      _closedIconElement: closedIconElement,
+      _getScrollLeft: getScrollLeft,
+      _node: node,
+      _openedIconElement: openedIconElement,
+      _renderChildren: renderChildren,
+      _tabIndex: tabIndex,
+      _treeElement: treeElement,
+      _triggerEvent: triggerEvent
     });
   }
   _createNodeElement(node) {
-    const classNames = this._classNames;
-    const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
-    const tabIndex = this._options.tabIndex;
-    const treeElement = this._htmlElement;
+    let classNames = this._classNames;
+    let getScrollLeft = this._scrollHandler._getScrollLeft.bind(this._scrollHandler);
+    let tabIndex = this._options.tabIndex;
+    let treeElement = this._htmlElement;
     return new NodeElement({
-      classNames,
-      getScrollLeft,
-      node,
-      tabIndex,
-      treeElement
+      _classNames: classNames,
+      _getScrollLeft: getScrollLeft,
+      _node: node,
+      _tabIndex: tabIndex,
+      _treeElement: 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.
+   */
   _createRequestUrl(node) {
-    const dataUrl = this._options.dataUrl;
+    let dataUrl = this._options.dataUrl;
     let url;
     if (typeof dataUrl === "function") {
       url = dataUrl(node);
@@ -806,21 +803,21 @@ class TreeElement {
     if (!url) {
       return null;
     }
-    const requestUrl = new RequestUrl(url);
+    let requestUrl = new RequestUrl(url);
     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();
+      let selectedNodeId = this._getNodeIdToBeSelected();
       if (selectedNodeId) {
-        requestUrl.setSearchParam('selected_node', selectedNodeId.toString());
+        requestUrl._setSearchParam("selected_node", selectedNodeId.toString());
       }
     }
     return requestUrl;
   }
   _deselectCurrentNode() {
-    const node = this.getSelectedNode();
+    let node = this.getSelectedNode();
     if (node) {
       this.removeFromSelection(node);
     }
@@ -828,9 +825,9 @@ class TreeElement {
 
   // Deselect the children of the node.
   _deselectNodes(parentNode) {
-    const selectedNodesUnderParent = this._selectNodeHandler.getSelectedNodesUnder(parentNode);
-    for (const n of selectedNodesUnderParent) {
-      this._selectNodeHandler.removeFromSelection(n);
+    let selectedNodesUnderParent = this._selectNodeHandler._getSelectedNodesUnder(parentNode);
+    for (let n of selectedNodesUnderParent) {
+      this._selectNodeHandler._removeFromSelection(n);
     }
   }
 
@@ -848,7 +845,7 @@ class TreeElement {
     return 0;
   }
   _getNodeElement(element) {
-    const node = this.getNode(element);
+    let node = this.getNode(element);
     if (node) {
       return this._getNodeElementForNode(node);
     } else {
@@ -863,13 +860,13 @@ class TreeElement {
     }
   }
   _getNodeIdToBeSelected() {
-    return this._saveStateHandler.getNodeIdToBeSelected();
+    return this._saveStateHandler._getNodeIdToBeSelected();
   }
   _initData() {
     if (this._options.data) {
       this.loadData(this._options.data);
     } else {
-      const dataUrl = this._createRequestUrl();
+      let dataUrl = this._createRequestUrl();
       if (dataUrl) {
         void this.loadDataFromUrl();
       } else {
@@ -878,16 +875,16 @@ class TreeElement {
     }
   }
   _initTree(data) {
-    const doInit = () => {
+    let 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._tree = new this._options.nodeClass(null, true, this._options.nodeClass);
+    this._selectNodeHandler._clear();
+    this._tree.loadFromData(data);
+    let mustLoadOnDemand = this._setInitialState();
     this._refreshElements(null);
     if (mustLoadOnDemand) {
       // Load data on demand and then init the tree
@@ -899,7 +896,7 @@ class TreeElement {
 
   // Does an HTML element of the tree have the focus?
   _isFocusOnTree() {
-    const activeElement = document.activeElement;
+    let activeElement = document.activeElement;
 
     /* istanbul ignore if */
     if (!activeElement) {
@@ -907,15 +904,15 @@ class TreeElement {
     }
 
     // The keyboard must still work for input elements.
-    const tagName = activeElement.tagName;
+    let tagName = activeElement.tagName;
     if (tagName !== "A" && tagName !== "SPAN") {
       return false;
     }
-    const node = this.getNode(activeElement);
-    return node?.tree === this.tree;
+    let node = this.getNode(activeElement);
+    return node?.tree === this._tree;
   }
   _isSelectedNodeInSubtree(subtree) {
-    const selectedNode = this.getSelectedNode();
+    let selectedNode = this.getSelectedNode();
     if (!selectedNode) {
       return false;
     } else {
@@ -937,15 +934,15 @@ class TreeElement {
     if (!this._options.dragAndDrop) {
       return false;
     }
-    return this._dndHandler.mouseCapture(positionInfo);
+    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);
+    let result = this._dndHandler._mouseDrag(positionInfo);
+    this._scrollHandler._checkScrolling(positionInfo);
     return result;
   }
   _mouseStart(positionInfo) {
@@ -953,18 +950,18 @@ class TreeElement {
     if (!this._options.dragAndDrop) {
       return false;
     }
-    return this._dndHandler.mouseStart(positionInfo);
+    return this._dndHandler._mouseStart(positionInfo);
   }
   _mouseStop(positionInfo) {
     /* istanbul ignore if */
     if (!this._options.dragAndDrop) {
       return false;
     }
-    this._scrollHandler.stopScrolling();
-    return this._dndHandler.mouseStop(positionInfo);
+    this._scrollHandler._stopScrolling();
+    return this._dndHandler._mouseStop(positionInfo);
   }
   _openParents(node) {
-    const parent = node.parent;
+    let parent = node.parent;
     if (parent?.parent && !parent.is_open) {
       void this.openNode(parent, false);
     }
@@ -975,48 +972,48 @@ class TreeElement {
     from_node: redraw this subtree
   */
   _refreshElements(fromNode) {
-    const mustSetFocus = this._isFocusOnTree();
-    const mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
-    this._renderer.render(fromNode);
+    let mustSetFocus = this._isFocusOnTree();
+    let mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
+    this._renderer._render(fromNode);
     if (mustSelect) {
       this._selectCurrentNode(mustSetFocus);
     }
     this._triggerEvent("tree.refresh");
   }
   _saveState() {
-    this._saveStateHandler.saveState();
+    this._saveStateHandler._saveState();
   }
   _selectCurrentNode(mustSetFocus) {
-    const node = this.getSelectedNode();
+    let node = this.getSelectedNode();
     if (node) {
-      const nodeElement = this._getNodeElementForNode(node);
-      nodeElement.select(mustSetFocus);
+      let 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 = () => {
+    let restoreState = () => {
       // result: is state restored, must load on demand?
-      const state = this._saveStateHandler.getStateFromStorage();
+      let state = this._saveStateHandler._getStateFromStorage();
       if (!state) {
         return [false, false];
       } else {
-        const mustLoadOnDemand = this._saveStateHandler.setInitialState(state);
+        let mustLoadOnDemand = this._saveStateHandler._setInitialState(state);
 
         // return true: the state is restored
         return [true, mustLoadOnDemand];
       }
     };
-    const autoOpenNodes = () => {
+    let autoOpenNodes = () => {
       // result: must load on demand?
       if (this._options.autoOpen === false) {
         return false;
       }
-      const maxLevel = this._getAutoOpenMaxLevel();
+      let maxLevel = this._getAutoOpenMaxLevel();
       let mustLoadOnDemand = false;
-      this.tree.iterate((node, level) => {
+      this._tree.iterate((node, level) => {
         if (node.load_on_demand) {
           mustLoadOnDemand = true;
           return false;
@@ -1040,29 +1037,29 @@ class TreeElement {
   // Set the initial state for nodes that are loaded on demand
   async _setInitialStateOnDemand() {
     return new Promise(resolve => {
-      const restoreState = () => {
-        const state = this._saveStateHandler.getStateFromStorage();
+      let restoreState = () => {
+        let state = this._saveStateHandler._getStateFromStorage();
         if (!state) {
           return false;
         } else {
-          void this._saveStateHandler.setInitialStateOnDemand(state).then(() => {
+          void this._saveStateHandler._setInitialStateOnDemand(state).then(() => {
             resolve();
           });
           return true;
         }
       };
-      const autoOpenNodes = () => {
-        const maxLevel = this._getAutoOpenMaxLevel();
+      let autoOpenNodes = () => {
+        let maxLevel = this._getAutoOpenMaxLevel();
         let loadingCount = 0;
-        const loadAndOpenNode = node => {
+        let loadAndOpenNode = node => {
           loadingCount += 1;
           void this.openNode(node, false).then(() => {
             loadingCount -= 1;
             openNodes();
           });
         };
-        const openNodes = () => {
-          this.tree.iterate((node, level) => {
+        let openNodes = () => {
+          this._tree.iterate((node, level) => {
             if (node.load_on_demand) {
               if (!node.is_loading) {
                 loadAndOpenNode(node);