jqtree 1.8.7 → 1.8.9

package/tree.jquery.debug.js

@@ -1,5 +1,5 @@
 /*
-JqTree 1.8.7
+JqTree 1.8.8
 
 Copyright 2024 Marco Braak
 
@@ -37,6 +37,32 @@ var jqtree = (function (exports) {
         this.treeElement = treeElement;
         this.triggerEvent = triggerEvent;
       }
+      loadFromUrl(urlInfo, parentNode, onFinished) {
+        if (!urlInfo) {
+          return;
+        }
+        const element = this.getDomElement(parentNode);
+        this.addLoadingClass(element);
+        this.notifyLoading(true, parentNode, element);
+        const stopLoading = () => {
+          this.removeLoadingClass(element);
+          this.notifyLoading(false, parentNode, element);
+        };
+        const handleSuccess = data => {
+          stopLoading();
+          this.loadData(this.parseData(data), parentNode);
+          if (onFinished && typeof onFinished === "function") {
+            onFinished();
+          }
+        };
+        const handleError = jqXHR => {
+          stopLoading();
+          if (this.onLoadFailed) {
+            this.onLoadFailed(jqXHR);
+          }
+        };
+        this.submitRequest(urlInfo, handleSuccess, handleError);
+      }
       addLoadingClass(element) {
         element.classList.add("jqtree-loading");
       }
@@ -91,32 +117,6 @@ var jqtree = (function (exports) {
         ajaxSettings.method = ajaxSettings.method?.toUpperCase() ?? "GET";
         void jQuery.ajax(ajaxSettings);
       }
-      loadFromUrl(urlInfo, parentNode, onFinished) {
-        if (!urlInfo) {
-          return;
-        }
-        const element = this.getDomElement(parentNode);
-        this.addLoadingClass(element);
-        this.notifyLoading(true, parentNode, element);
-        const stopLoading = () => {
-          this.removeLoadingClass(element);
-          this.notifyLoading(false, parentNode, element);
-        };
-        const handleSuccess = data => {
-          stopLoading();
-          this.loadData(this.parseData(data), parentNode);
-          if (onFinished && typeof onFinished === "function") {
-            onFinished();
-          }
-        };
-        const handleError = jqXHR => {
-          stopLoading();
-          if (this.onLoadFailed) {
-            this.onLoadFailed(jqXHR);
-          }
-        };
-        this.submitRequest(urlInfo, handleSuccess, handleError);
-      }
     }
 
     let Position = /*#__PURE__*/function (Position) {
@@ -156,6 +156,27 @@ var jqtree = (function (exports) {
       };
     };
 
+    function binarySearch(items, compareFn) {
+      let low = 0;
+      let high = items.length;
+      while (low < high) {
+        const mid = low + high >> 1;
+        const item = items[mid];
+        if (item === undefined) {
+          return null;
+        }
+        const compareResult = compareFn(item);
+        if (compareResult > 0) {
+          high = mid;
+        } else if (compareResult < 0) {
+          low = mid + 1;
+        } else {
+          return item;
+        }
+      }
+      return null;
+    }
+
     class DragElement {
       constructor(_ref) {
         let {
@@ -170,6 +191,13 @@ var jqtree = (function (exports) {
         this.element = this.createElement(nodeName, autoEscape);
         treeElement.appendChild(this.element);
       }
+      move(pageX, pageY) {
+        this.element.style.left = `${pageX - this.offsetX}px`;
+        this.element.style.top = `${pageY - this.offsetY}px`;
+      }
+      remove() {
+        this.element.remove();
+      }
       createElement(nodeName, autoEscape) {
         const element = document.createElement("span");
         element.classList.add("jqtree-title", "jqtree-dragging");
@@ -181,13 +209,6 @@ var jqtree = (function (exports) {
         element.style.position = "absolute";
         return element;
       }
-      move(pageX, pageY) {
-        this.element.style.left = `${pageX - this.offsetX}px`;
-        this.element.style.top = `${pageY - this.offsetY}px`;
-      }
-      remove() {
-        this.element.remove();
-      }
     }
 
     const iterateVisibleNodes = (tree, _ref) => {
@@ -407,15 +428,113 @@ var jqtree = (function (exports) {
         this.isDragging = false;
         this.currentItem = null;
       }
-      canMoveToArea(area) {
-        if (!this.onCanMoveTo) {
-          return true;
+      mouseCapture(positionInfo) {
+        const element = positionInfo.target;
+        if (!this.mustCaptureElement(element)) {
+          return null;
+        }
+        if (this.onIsMoveHandle && !this.onIsMoveHandle(jQuery(element))) {
+          return null;
+        }
+        let nodeElement = this.getNodeElement(element);
+        if (nodeElement && this.onCanMove) {
+          if (!this.onCanMove(nodeElement.node)) {
+            nodeElement = null;
+          }
+        }
+        this.currentItem = nodeElement;
+        return this.currentItem != null;
+      }
+      mouseDrag(positionInfo) {
+        if (!this.currentItem || !this.dragElement) {
+          return false;
         }
+        this.dragElement.move(positionInfo.pageX, positionInfo.pageY);
+        const area = this.findHoveredArea(positionInfo.pageX, positionInfo.pageY);
+        if (area && this.canMoveToArea(area, this.currentItem)) {
+          if (!area.node.isFolder()) {
+            this.stopOpenFolderTimer();
+          }
+          if (this.hoveredArea !== area) {
+            this.hoveredArea = area;
+
+            // If this is a closed folder, start timer to open it
+            if (this.mustOpenFolderTimer(area)) {
+              this.startOpenFolderTimer(area.node);
+            } else {
+              this.stopOpenFolderTimer();
+            }
+            this.updateDropHint();
+          }
+        } else {
+          this.removeDropHint();
+          this.stopOpenFolderTimer();
+          this.hoveredArea = area;
+        }
+        if (!area) {
+          if (this.onDragMove) {
+            this.onDragMove(this.currentItem.node, positionInfo.originalEvent);
+          }
+        }
+        return true;
+      }
+      mouseStart(positionInfo) {
         if (!this.currentItem) {
           return false;
         }
+        this.refresh();
+        const {
+          left,
+          top
+        } = getElementPosition(positionInfo.target);
+        const node = this.currentItem.node;
+        this.dragElement = new DragElement({
+          autoEscape: this.autoEscape ?? true,
+          nodeName: node.name,
+          offsetX: positionInfo.pageX - left,
+          offsetY: positionInfo.pageY - top,
+          treeElement: this.treeElement
+        });
+        this.isDragging = true;
+        this.currentItem.element.classList.add("jqtree-moving");
+        return true;
+      }
+      mouseStop(positionInfo) {
+        this.moveItem(positionInfo);
+        this.clear();
+        this.removeHover();
+        this.removeDropHint();
+        this.removeHitAreas();
+        const currentItem = this.currentItem;
+        if (this.currentItem) {
+          this.currentItem.element.classList.remove("jqtree-moving");
+          this.currentItem = null;
+        }
+        this.isDragging = false;
+        if (!this.hoveredArea && currentItem) {
+          if (this.onDragStop) {
+            this.onDragStop(currentItem.node, positionInfo.originalEvent);
+          }
+        }
+        return false;
+      }
+      refresh() {
+        this.removeHitAreas();
+        if (this.currentItem) {
+          const currentNode = this.currentItem.node;
+          this.generateHitAreas(currentNode);
+          this.currentItem = this.getNodeElementForNode(currentNode);
+          if (this.isDragging) {
+            this.currentItem.element.classList.add("jqtree-moving");
+          }
+        }
+      }
+      canMoveToArea(area, currentItem) {
+        if (!this.onCanMoveTo) {
+          return true;
+        }
         const positionName = getPositionName(area.position);
-        return this.onCanMoveTo(this.currentItem.node, area.node, positionName);
+        return this.onCanMoveTo(currentItem.node, area.node, positionName);
       }
       clear() {
         if (this.dragElement) {
@@ -428,30 +547,22 @@ var jqtree = (function (exports) {
         if (x < dimensions.left || y < dimensions.top || x > dimensions.right || y > dimensions.bottom) {
           return null;
         }
-        let low = 0;
-        let high = this.hitAreas.length;
-        while (low < high) {
-          const mid = low + high >> 1;
-          const area = this.hitAreas[mid];
-          if (!area) {
-            return null;
-          }
+        return binarySearch(this.hitAreas, area => {
           if (y < area.top) {
-            high = mid;
+            return 1;
           } else if (y > area.bottom) {
-            low = mid + 1;
+            return -1;
           } else {
-            return area;
+            return 0;
           }
-        }
-        return null;
+        });
       }
-      generateHitAreas() {
+      generateHitAreas(currentNode) {
         const tree = this.getTree();
-        if (!this.currentItem || !tree) {
+        if (!tree) {
           this.hitAreas = [];
         } else {
-          this.hitAreas = generateHitAreas(tree, this.currentItem.node, this.getTreeDimensions().bottom);
+          this.hitAreas = generateHitAreas(tree, currentNode, this.getTreeDimensions().bottom);
         }
       }
       getTreeDimensions() {
@@ -467,8 +578,10 @@ var jqtree = (function (exports) {
           top
         };
       }
+
+      /* Move the dragged node to the selected position in the tree. */
       moveItem(positionInfo) {
-        if (this.currentItem && this.hoveredArea && this.hoveredArea.position !== Position.None && this.canMoveToArea(this.hoveredArea)) {
+        if (this.currentItem && this.hoveredArea && this.hoveredArea.position !== Position.None && this.canMoveToArea(this.hoveredArea, this.currentItem)) {
           const movedNode = this.currentItem.node;
           const targetNode = this.hoveredArea.node;
           const position = this.hoveredArea.position;
@@ -549,137 +662,71 @@ var jqtree = (function (exports) {
         const nodeElement = this.getNodeElementForNode(this.hoveredArea.node);
         this.previousGhost = nodeElement.addDropHint(this.hoveredArea.position);
       }
-      mouseCapture(positionInfo) {
-        const element = positionInfo.target;
-        if (!this.mustCaptureElement(element)) {
-          return null;
-        }
-        if (this.onIsMoveHandle && !this.onIsMoveHandle(jQuery(element))) {
-          return null;
-        }
-        let nodeElement = this.getNodeElement(element);
-        if (nodeElement && this.onCanMove) {
-          if (!this.onCanMove(nodeElement.node)) {
-            nodeElement = null;
-          }
+    }
+
+    class ElementsRenderer {
+      constructor(_ref) {
+        let {
+          $element,
+          autoEscape,
+          buttonLeft,
+          closedIcon,
+          dragAndDrop,
+          getTree,
+          isNodeSelected,
+          onCreateLi,
+          openedIcon,
+          rtl,
+          showEmptyFolder,
+          tabIndex
+        } = _ref;
+        this.autoEscape = autoEscape;
+        this.buttonLeft = buttonLeft;
+        this.dragAndDrop = dragAndDrop;
+        this.$element = $element;
+        this.getTree = getTree;
+        this.isNodeSelected = isNodeSelected;
+        this.onCreateLi = onCreateLi;
+        this.rtl = rtl;
+        this.showEmptyFolder = showEmptyFolder;
+        this.tabIndex = tabIndex;
+        this.openedIconElement = this.createButtonElement(openedIcon ?? "+");
+        this.closedIconElement = this.createButtonElement(closedIcon ?? "-");
+      }
+      render(fromNode) {
+        if (fromNode?.parent) {
+          this.renderFromNode(fromNode);
+        } else {
+          this.renderFromRoot();
         }
-        this.currentItem = nodeElement;
-        return this.currentItem != null;
       }
-      mouseDrag(positionInfo) {
-        if (!this.currentItem || !this.dragElement) {
-          return false;
+      renderFromNode(node) {
+        if (!node.element) {
+          return;
         }
-        this.dragElement.move(positionInfo.pageX, positionInfo.pageY);
-        const area = this.findHoveredArea(positionInfo.pageX, positionInfo.pageY);
-        if (area && this.canMoveToArea(area)) {
-          if (!area.node.isFolder()) {
-            this.stopOpenFolderTimer();
-          }
-          if (this.hoveredArea !== area) {
-            this.hoveredArea = area;
 
-            // If this is a closed folder, start timer to open it
-            if (this.mustOpenFolderTimer(area)) {
-              this.startOpenFolderTimer(area.node);
-            } else {
-              this.stopOpenFolderTimer();
-            }
-            this.updateDropHint();
-          }
-        } else {
-          this.removeDropHint();
-          this.stopOpenFolderTimer();
-          this.hoveredArea = area;
-        }
-        if (!area) {
-          if (this.onDragMove) {
-            this.onDragMove(this.currentItem.node, positionInfo.originalEvent);
-          }
-        }
-        return true;
-      }
-      mouseStart(positionInfo) {
-        if (!this.currentItem) {
-          return false;
-        }
-        this.refresh();
-        const {
-          left,
-          top
-        } = getElementPosition(positionInfo.target);
-        const node = this.currentItem.node;
-        this.dragElement = new DragElement({
-          autoEscape: this.autoEscape ?? true,
-          nodeName: node.name,
-          offsetX: positionInfo.pageX - left,
-          offsetY: positionInfo.pageY - top,
-          treeElement: this.treeElement
-        });
-        this.isDragging = true;
-        this.currentItem.element.classList.add("jqtree-moving");
-        return true;
-      }
-      mouseStop(positionInfo) {
-        this.moveItem(positionInfo);
-        this.clear();
-        this.removeHover();
-        this.removeDropHint();
-        this.removeHitAreas();
-        const currentItem = this.currentItem;
-        if (this.currentItem) {
-          this.currentItem.element.classList.remove("jqtree-moving");
-          this.currentItem = null;
-        }
-        this.isDragging = false;
-        if (!this.hoveredArea && currentItem) {
-          if (this.onDragStop) {
-            this.onDragStop(currentItem.node, positionInfo.originalEvent);
-          }
-        }
-        return false;
+        // remember current li
+        const $previousLi = jQuery(node.element);
+
+        // create element
+        const li = this.createLi(node, node.getLevel());
+
+        // add element to dom
+        $previousLi.after(li);
+
+        // remove previous li
+        $previousLi.remove();
+
+        // create children
+        this.createDomElements(li, node.children, false, node.getLevel() + 1);
       }
-      refresh() {
-        this.removeHitAreas();
-        if (this.currentItem) {
-          this.generateHitAreas();
-          this.currentItem = this.getNodeElementForNode(this.currentItem.node);
-          if (this.isDragging) {
-            this.currentItem.element.classList.add("jqtree-moving");
-          }
+      renderFromRoot() {
+        this.$element.empty();
+        const tree = this.getTree();
+        if (this.$element[0] && tree) {
+          this.createDomElements(this.$element[0], tree.children, true, 1);
         }
       }
-    }
-
-    class ElementsRenderer {
-      constructor(_ref) {
-        let {
-          $element,
-          autoEscape,
-          buttonLeft,
-          closedIcon,
-          dragAndDrop,
-          getTree,
-          isNodeSelected,
-          onCreateLi,
-          openedIcon,
-          rtl,
-          showEmptyFolder,
-          tabIndex
-        } = _ref;
-        this.autoEscape = autoEscape;
-        this.buttonLeft = buttonLeft;
-        this.dragAndDrop = dragAndDrop;
-        this.$element = $element;
-        this.getTree = getTree;
-        this.isNodeSelected = isNodeSelected;
-        this.onCreateLi = onCreateLi;
-        this.rtl = rtl;
-        this.showEmptyFolder = showEmptyFolder;
-        this.tabIndex = tabIndex;
-        this.openedIconElement = this.createButtonElement(openedIcon ?? "+");
-        this.closedIconElement = this.createButtonElement(closedIcon ?? "-");
-      }
       attachNodeData(node, li) {
         node.element = li;
         jQuery(li).data("node", node);
@@ -854,43 +901,42 @@ var jqtree = (function (exports) {
         element.setAttribute("aria-selected", getBoolString(isSelected));
         element.setAttribute("role", "treeitem");
       }
-      render(fromNode) {
-        if (fromNode?.parent) {
-          this.renderFromNode(fromNode);
-        } else {
-          this.renderFromRoot();
+    }
+
+    class KeyHandler {
+      constructor(_ref) {
+        let {
+          closeNode,
+          getSelectedNode,
+          isFocusOnTree,
+          keyboardSupport,
+          openNode,
+          selectNode
+        } = _ref;
+        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);
         }
       }
-      renderFromNode(node) {
-        if (!node.element) {
-          return;
+      deinit() {
+        if (this.keyboardSupport) {
+          document.removeEventListener("keydown", this.handleKeyDown);
         }
-
-        // remember current li
-        const $previousLi = jQuery(node.element);
-
-        // create element
-        const li = this.createLi(node, node.getLevel());
-
-        // add element to dom
-        $previousLi.after(li);
-
-        // remove previous li
-        $previousLi.remove();
-
-        // create children
-        this.createDomElements(li, node.children, false, node.getLevel() + 1);
       }
-      renderFromRoot() {
-        this.$element.empty();
-        const tree = this.getTree();
-        if (this.$element[0] && tree) {
-          this.createDomElements(this.$element[0], tree.children, true, 1);
-        }
+      moveDown(selectedNode) {
+        return this.selectNode(selectedNode.getNextVisibleNode());
+      }
+      moveUp(selectedNode) {
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
+      }
+      canHandleKeyboard() {
+        return this.keyboardSupport && this.isFocusOnTree();
       }
-    }
-
-    class KeyHandler {
       handleKeyDown = e => {
         if (!this.canHandleKeyboard()) {
           return;
@@ -902,14 +948,14 @@ var jqtree = (function (exports) {
             case "ArrowDown":
               isKeyHandled = this.moveDown(selectedNode);
               break;
-            case "ArrowUp":
-              isKeyHandled = this.moveUp(selectedNode);
+            case "ArrowLeft":
+              isKeyHandled = this.moveLeft(selectedNode);
               break;
             case "ArrowRight":
               isKeyHandled = this.moveRight(selectedNode);
               break;
-            case "ArrowLeft":
-              isKeyHandled = this.moveLeft(selectedNode);
+            case "ArrowUp":
+              isKeyHandled = this.moveUp(selectedNode);
               break;
           }
         }
@@ -917,28 +963,6 @@ var jqtree = (function (exports) {
           e.preventDefault();
         }
       };
-      constructor(_ref) {
-        let {
-          closeNode,
-          getSelectedNode,
-          isFocusOnTree,
-          keyboardSupport,
-          openNode,
-          selectNode
-        } = _ref;
-        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);
-        }
-      }
-      canHandleKeyboard() {
-        return this.keyboardSupport && this.isFocusOnTree();
-      }
       moveLeft(selectedNode) {
         if (selectedNode.isFolder() && selectedNode.is_open) {
           // Left on an open node closes the node
@@ -977,17 +1001,6 @@ var jqtree = (function (exports) {
           return true;
         }
       }
-      deinit() {
-        if (this.handleKeyDownHandler) {
-          document.removeEventListener("keydown", this.handleKeyDownHandler);
-        }
-      }
-      moveDown(selectedNode) {
-        return this.selectNode(selectedNode.getNextVisibleNode());
-      }
-      moveUp(selectedNode) {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
-      }
     }
 
     const getPositionInfoFromMouseEvent = e => ({
@@ -1004,18 +1017,93 @@ var jqtree = (function (exports) {
     });
 
     class MouseHandler {
-      handleClick = e => {
-        if (!e.target) {
-          return;
+      constructor(_ref) {
+        let {
+          element,
+          getMouseDelay,
+          getNode,
+          onClickButton,
+          onClickTitle,
+          onMouseCapture,
+          onMouseDrag,
+          onMouseStart,
+          onMouseStop,
+          triggerEvent,
+          useContextMenu
+        } = _ref;
+        this.element = element;
+        this.getMouseDelay = getMouseDelay;
+        this.getNode = getNode;
+        this.onClickButton = onClickButton;
+        this.onClickTitle = onClickTitle;
+        this.onMouseCapture = onMouseCapture;
+        this.onMouseDrag = onMouseDrag;
+        this.onMouseStart = onMouseStart;
+        this.onMouseStop = onMouseStop;
+        this.triggerEvent = triggerEvent;
+        this.useContextMenu = useContextMenu;
+        element.addEventListener("click", this.handleClick);
+        element.addEventListener("dblclick", this.handleDblclick);
+        element.addEventListener("mousedown", this.mouseDown, {
+          passive: false
+        });
+        element.addEventListener("touchstart", this.touchStart, {
+          passive: false
+        });
+        if (useContextMenu) {
+          element.addEventListener("contextmenu", this.handleContextmenu);
         }
-        const clickTarget = this.getClickTarget(e.target);
-        if (!clickTarget) {
-          return;
+        this.isMouseStarted = false;
+        this.mouseDelayTimer = null;
+        this.isMouseDelayMet = false;
+        this.mouseDownInfo = null;
+      }
+      deinit() {
+        this.element.removeEventListener("click", this.handleClick);
+        this.element.removeEventListener("dblclick", this.handleDblclick);
+        if (this.useContextMenu) {
+          this.element.removeEventListener("contextmenu", this.handleContextmenu);
         }
-        switch (clickTarget.type) {
-          case "button":
-            this.onClickButton(clickTarget.node);
-            e.preventDefault();
+        this.element.removeEventListener("mousedown", this.mouseDown);
+        this.element.removeEventListener("touchstart", this.touchStart);
+        this.removeMouseMoveEventListeners();
+      }
+      getClickTarget(element) {
+        const button = element.closest(".jqtree-toggler");
+        if (button) {
+          const node = this.getNode(button);
+          if (node) {
+            return {
+              node,
+              type: "button"
+            };
+          }
+        } else {
+          const jqTreeElement = element.closest(".jqtree-element");
+          if (jqTreeElement) {
+            const node = this.getNode(jqTreeElement);
+            if (node) {
+              return {
+                node,
+                type: "label"
+              };
+            }
+          }
+        }
+        return null;
+      }
+      handleClick = e => {
+        if (!e.target) {
+          return;
+        }
+        const clickTarget = this.getClickTarget(e.target);
+        if (!clickTarget) {
+          return;
+        }
+        switch (clickTarget.type) {
+          case "button":
+            this.onClickButton(clickTarget.node);
+            e.preventDefault();
             e.stopPropagation();
             break;
           case "label":
@@ -1062,117 +1150,6 @@ var jqtree = (function (exports) {
           });
         }
       };
-      mouseDown = e => {
-        // Left mouse button?
-        if (e.button !== 0) {
-          return;
-        }
-        const result = this.handleMouseDown(getPositionInfoFromMouseEvent(e));
-        if (result && e.cancelable) {
-          e.preventDefault();
-        }
-      };
-      mouseMove = e => {
-        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
-      };
-      mouseUp = e => {
-        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
-      };
-      touchEnd = e => {
-        if (e.touches.length > 1) {
-          return;
-        }
-        const touch = e.touches[0];
-        if (!touch) {
-          return;
-        }
-        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
-      };
-      touchMove = e => {
-        if (e.touches.length > 1) {
-          return;
-        }
-        const touch = e.touches[0];
-        if (!touch) {
-          return;
-        }
-        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
-      };
-      touchStart = e => {
-        if (e.touches.length > 1) {
-          return;
-        }
-        const touch = e.touches[0];
-        if (!touch) {
-          return;
-        }
-        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
-      };
-      constructor(_ref) {
-        let {
-          element,
-          getMouseDelay,
-          getNode,
-          onClickButton,
-          onClickTitle,
-          onMouseCapture,
-          onMouseDrag,
-          onMouseStart,
-          onMouseStop,
-          triggerEvent,
-          useContextMenu
-        } = _ref;
-        this.element = element;
-        this.getMouseDelay = getMouseDelay;
-        this.getNode = getNode;
-        this.onClickButton = onClickButton;
-        this.onClickTitle = onClickTitle;
-        this.onMouseCapture = onMouseCapture;
-        this.onMouseDrag = onMouseDrag;
-        this.onMouseStart = onMouseStart;
-        this.onMouseStop = onMouseStop;
-        this.triggerEvent = triggerEvent;
-        this.useContextMenu = useContextMenu;
-        element.addEventListener("click", this.handleClick);
-        element.addEventListener("dblclick", this.handleDblclick);
-        element.addEventListener("mousedown", this.mouseDown, {
-          passive: false
-        });
-        element.addEventListener("touchstart", this.touchStart, {
-          passive: false
-        });
-        if (useContextMenu) {
-          element.addEventListener("contextmenu", this.handleContextmenu);
-        }
-        this.isMouseStarted = false;
-        this.mouseDelayTimer = null;
-        this.isMouseDelayMet = false;
-        this.mouseDownInfo = null;
-      }
-      getClickTarget(element) {
-        const button = element.closest(".jqtree-toggler");
-        if (button) {
-          const node = this.getNode(button);
-          if (node) {
-            return {
-              node,
-              type: "button"
-            };
-          }
-        } else {
-          const jqTreeElement = element.closest(".jqtree-element");
-          if (jqTreeElement) {
-            const node = this.getNode(jqTreeElement);
-            if (node) {
-              return {
-                node,
-                type: "label"
-              };
-            }
-          }
-        }
-        return null;
-      }
       handleMouseDown(positionInfo) {
         // We may have missed mouseup (out of window)
         if (this.isMouseStarted) {
@@ -1237,6 +1214,22 @@ var jqtree = (function (exports) {
           this.isMouseDelayMet = true;
         }
       }
+      mouseDown = e => {
+        // Left mouse button?
+        if (e.button !== 0) {
+          return;
+        }
+        const result = this.handleMouseDown(getPositionInfoFromMouseEvent(e));
+        if (result && e.cancelable) {
+          e.preventDefault();
+        }
+      };
+      mouseMove = e => {
+        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
+      };
+      mouseUp = e => {
+        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
+      };
       removeMouseMoveEventListeners() {
         document.removeEventListener("mousemove", this.mouseMove);
         document.removeEventListener("touchmove", this.touchMove);
@@ -1254,16 +1247,36 @@ var jqtree = (function (exports) {
         }, mouseDelay);
         this.isMouseDelayMet = false;
       }
-      deinit() {
-        this.element.removeEventListener("click", this.handleClick);
-        this.element.removeEventListener("dblclick", this.handleDblclick);
-        if (this.useContextMenu) {
-          this.element.removeEventListener("contextmenu", this.handleContextmenu);
+      touchEnd = e => {
+        if (e.touches.length > 1) {
+          return;
         }
-        this.element.removeEventListener("mousedown", this.mouseDown);
-        this.element.removeEventListener("touchstart", this.touchStart);
-        this.removeMouseMoveEventListeners();
-      }
+        const touch = e.touches[0];
+        if (!touch) {
+          return;
+        }
+        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
+      };
+      touchMove = e => {
+        if (e.touches.length > 1) {
+          return;
+        }
+        const touch = e.touches[0];
+        if (!touch) {
+          return;
+        }
+        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
+      };
+      touchStart = e => {
+        if (e.touches.length > 1) {
+          return;
+        }
+        const touch = e.touches[0];
+        if (!touch) {
+          return;
+        }
+        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
+      };
     }
 
     const isNodeRecordWithChildren = data => typeof data === "object" && "children" in data && data.children instanceof Array;
@@ -1285,29 +1298,6 @@ var jqtree = (function (exports) {
           this.nodeClass = nodeClass;
         }
       }
-      createNode(nodeData) {
-        const nodeClass = this.getNodeClass();
-        return new nodeClass(nodeData);
-      }
-      doRemoveChild(node) {
-        this.children.splice(this.getChildIndex(node), 1);
-        this.tree?.removeNodeFromIndex(node);
-      }
-      getNodeClass() {
-        return this.nodeClass ?? this.tree?.nodeClass ?? Node;
-      }
-
-      // Load children data from nodeInfo if it has children
-      loadChildrenFromData(nodeInfo) {
-        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
-          this.loadFromData(nodeInfo.children);
-        }
-      }
-      setParent(parent) {
-        this.parent = parent;
-        this.tree = parent.tree;
-        this.tree?.addNodeToIndex(this);
-      }
       addAfter(nodeInfo) {
         if (!this.parent) {
           return null;
@@ -1783,6 +1773,29 @@ var jqtree = (function (exports) {
           }
         }
       }
+      createNode(nodeData) {
+        const nodeClass = this.getNodeClass();
+        return new nodeClass(nodeData);
+      }
+      doRemoveChild(node) {
+        this.children.splice(this.getChildIndex(node), 1);
+        this.tree?.removeNodeFromIndex(node);
+      }
+      getNodeClass() {
+        return this.nodeClass ?? this.tree?.nodeClass ?? Node;
+      }
+
+      // Load children data from nodeInfo if it has children
+      loadChildrenFromData(nodeInfo) {
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+          this.loadFromData(nodeInfo.children);
+        }
+      }
+      setParent(parent) {
+        this.parent = parent;
+        this.tree = parent.tree;
+        this.tree?.addNodeToIndex(this);
+      }
     }
 
     class BorderDropHint {
@@ -1828,6 +1841,9 @@ var jqtree = (function (exports) {
             }
         }
       }
+      remove() {
+        this.ghost.remove();
+      }
       createGhostElement() {
         const ghost = document.createElement("li");
         ghost.className = "jqtree_common jqtree-ghost";
@@ -1855,33 +1871,21 @@ var jqtree = (function (exports) {
           childElement.before(this.ghost);
         }
       }
-      remove() {
-        this.ghost.remove();
-      }
     }
 
     class NodeElement {
       constructor(_ref) {
         let {
-          $treeElement,
           getScrollLeft,
           node,
-          tabIndex
+          tabIndex,
+          treeElement
         } = _ref;
         this.getScrollLeft = getScrollLeft;
         this.tabIndex = tabIndex;
-        this.$treeElement = $treeElement;
+        this.treeElement = treeElement;
         this.init(node);
       }
-      getTitleSpan() {
-        return this.element.querySelector(":scope > .jqtree-element > span.jqtree-title");
-      }
-      getUl() {
-        return this.element.querySelector(":scope > ul");
-      }
-      mustShowBorderDropHint(position) {
-        return position === Position.Inside;
-      }
       addDropHint(position) {
         if (this.mustShowBorderDropHint(position)) {
           return new BorderDropHint(this.element, this.getScrollLeft());
@@ -1899,14 +1903,9 @@ var jqtree = (function (exports) {
       init(node) {
         this.node = node;
         if (!node.element) {
-          const element = this.$treeElement.get(0);
-          if (element) {
-            node.element = element;
-          }
-        }
-        if (node.element) {
-          this.element = node.element;
+          node.element = this.treeElement;
         }
+        this.element = node.element;
       }
       select(mustSetFocus) {
         this.element.classList.add("jqtree-selected");
@@ -1922,38 +1921,39 @@ var jqtree = (function (exports) {
           titleSpan.focus();
         }
       }
+      getTitleSpan() {
+        return this.element.querySelector(":scope > .jqtree-element > span.jqtree-title");
+      }
+      getUl() {
+        return this.element.querySelector(":scope > ul");
+      }
+      mustShowBorderDropHint(position) {
+        return position === Position.Inside;
+      }
     }
 
     class FolderElement extends NodeElement {
       constructor(_ref) {
         let {
-          $treeElement,
           closedIconElement,
           getScrollLeft,
           node,
           openedIconElement,
           tabIndex,
+          treeElement,
           triggerEvent
         } = _ref;
         super({
-          $treeElement,
           getScrollLeft,
           node,
-          tabIndex
+          tabIndex,
+          treeElement
         });
         this.closedIconElement = closedIconElement;
         this.openedIconElement = openedIconElement;
         this.triggerEvent = triggerEvent;
       }
-      mustShowBorderDropHint(position) {
-        return !this.node.is_open && position === Position.Inside;
-      }
-      getButton() {
-        return this.element.querySelector(":scope > .jqtree-element > a.jqtree-toggler");
-      }
-      close() {
-        let slide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-        let animationSpeed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "fast";
+      close(slide, animationSpeed) {
         if (!this.node.is_open) {
           return;
         }
@@ -1981,9 +1981,7 @@ var jqtree = (function (exports) {
           doClose();
         }
       }
-      open(onFinished) {
-        let slide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-        let animationSpeed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "fast";
+      open(onFinished, slide, animationSpeed) {
         if (this.node.is_open) {
           return;
         }
@@ -2014,6 +2012,12 @@ var jqtree = (function (exports) {
           doOpen();
         }
       }
+      mustShowBorderDropHint(position) {
+        return !this.node.is_open && position === Position.Inside;
+      }
+      getButton() {
+        return this.element.querySelector(":scope > .jqtree-element > a.jqtree-toggler");
+      }
     }
 
     class SaveStateHandler {
@@ -2041,80 +2045,6 @@ var jqtree = (function (exports) {
         this.removeFromSelection = removeFromSelection;
         this.saveStateOption = saveState;
       }
-      getKeyName() {
-        if (typeof this.saveStateOption === "string") {
-          return this.saveStateOption;
-        } else {
-          return "tree";
-        }
-      }
-      loadFromStorage() {
-        if (this.onGetStateFromStorage) {
-          return this.onGetStateFromStorage();
-        } else if (this.supportsLocalStorage()) {
-          return localStorage.getItem(this.getKeyName());
-        } else {
-          return null;
-        }
-      }
-      openInitialNodes(nodeIds) {
-        let mustLoadOnDemand = false;
-        for (const nodeId of nodeIds) {
-          const node = this.getNodeById(nodeId);
-          if (node) {
-            if (!node.load_on_demand) {
-              node.is_open = true;
-            } else {
-              mustLoadOnDemand = true;
-            }
-          }
-        }
-        return mustLoadOnDemand;
-      }
-      parseState(jsonData) {
-        const state = JSON.parse(jsonData);
-
-        // Check if selected_node is an int (instead of an array)
-        if (state.selected_node && isInt(state.selected_node)) {
-          // Convert to array
-          state.selected_node = [state.selected_node];
-        }
-        return state;
-      }
-      resetSelection() {
-        const selectedNodes = this.getSelectedNodes();
-        selectedNodes.forEach(node => {
-          this.removeFromSelection(node);
-        });
-      }
-      selectInitialNodes(nodeIds) {
-        let selectCount = 0;
-        for (const nodeId of nodeIds) {
-          const node = this.getNodeById(nodeId);
-          if (node) {
-            selectCount += 1;
-            this.addToSelection(node);
-          }
-        }
-        return selectCount !== 0;
-      }
-      supportsLocalStorage() {
-        const testSupport = () => {
-          // Check if it's possible to store an item. Safari does not allow this in private browsing mode.
-          try {
-            const key = "_storage_test";
-            sessionStorage.setItem(key, "value");
-            sessionStorage.removeItem(key);
-          } catch {
-            return false;
-          }
-          return true;
-        };
-        if (this._supportsLocalStorage == null) {
-          this._supportsLocalStorage = testSupport();
-        }
-        return this._supportsLocalStorage;
-      }
       getNodeIdToBeSelected() {
         const state = this.getStateFromStorage();
         if (state?.selected_node) {
@@ -2160,7 +2090,7 @@ var jqtree = (function (exports) {
         const state = JSON.stringify(this.getState());
         if (this.onSetStateFromStorage) {
           this.onSetStateFromStorage(state);
-        } else if (this.supportsLocalStorage()) {
+        } else {
           localStorage.setItem(this.getKeyName(), state);
         }
       }
@@ -2168,7 +2098,7 @@ var jqtree = (function (exports) {
       /*
       Set initial state
       Don't handle nodes that are loaded on demand
-       result: must load on demand
+       result: must load on demand (boolean)
       */
       setInitialState(state) {
         let mustLoadOnDemand = false;
@@ -2222,6 +2152,61 @@ var jqtree = (function (exports) {
         };
         openNodes();
       }
+      getKeyName() {
+        if (typeof this.saveStateOption === "string") {
+          return this.saveStateOption;
+        } else {
+          return "tree";
+        }
+      }
+      loadFromStorage() {
+        if (this.onGetStateFromStorage) {
+          return this.onGetStateFromStorage();
+        } else {
+          return localStorage.getItem(this.getKeyName());
+        }
+      }
+      openInitialNodes(nodeIds) {
+        let mustLoadOnDemand = false;
+        for (const nodeId of nodeIds) {
+          const node = this.getNodeById(nodeId);
+          if (node) {
+            if (!node.load_on_demand) {
+              node.is_open = true;
+            } else {
+              mustLoadOnDemand = true;
+            }
+          }
+        }
+        return mustLoadOnDemand;
+      }
+      parseState(jsonData) {
+        const state = JSON.parse(jsonData);
+
+        // Check if selected_node is an int (instead of an array)
+        if (state.selected_node && isInt(state.selected_node)) {
+          // Convert to array
+          state.selected_node = [state.selected_node];
+        }
+        return state;
+      }
+      resetSelection() {
+        const selectedNodes = this.getSelectedNodes();
+        selectedNodes.forEach(node => {
+          this.removeFromSelection(node);
+        });
+      }
+      selectInitialNodes(nodeIds) {
+        let selectCount = 0;
+        for (const nodeId of nodeIds) {
+          const node = this.getNodeById(nodeId);
+          if (node) {
+            selectCount += 1;
+            this.addToSelection(node);
+          }
+        }
+        return selectCount !== 0;
+      }
     }
 
     class ContainerScrollParent {
@@ -2233,6 +2218,43 @@ var jqtree = (function (exports) {
         this.container = container;
         this.refreshHitAreas = refreshHitAreas;
       }
+      checkHorizontalScrolling(pageX) {
+        const newHorizontalScrollDirection = this.getNewHorizontalScrollDirection(pageX);
+        if (this.horizontalScrollDirection !== newHorizontalScrollDirection) {
+          this.horizontalScrollDirection = newHorizontalScrollDirection;
+          if (this.horizontalScrollTimeout != null) {
+            window.clearTimeout(this.verticalScrollTimeout);
+          }
+          if (newHorizontalScrollDirection) {
+            this.horizontalScrollTimeout = window.setTimeout(this.scrollHorizontally.bind(this), 40);
+          }
+        }
+      }
+      checkVerticalScrolling(pageY) {
+        const newVerticalScrollDirection = this.getNewVerticalScrollDirection(pageY);
+        if (this.verticalScrollDirection !== newVerticalScrollDirection) {
+          this.verticalScrollDirection = newVerticalScrollDirection;
+          if (this.verticalScrollTimeout != null) {
+            window.clearTimeout(this.verticalScrollTimeout);
+            this.verticalScrollTimeout = undefined;
+          }
+          if (newVerticalScrollDirection) {
+            this.verticalScrollTimeout = window.setTimeout(this.scrollVertically.bind(this), 40);
+          }
+        }
+      }
+      getScrollLeft() {
+        return this.container.scrollLeft;
+      }
+      scrollToY(top) {
+        this.container.scrollTop = top;
+      }
+      stopScrolling() {
+        this.horizontalScrollDirection = undefined;
+        this.verticalScrollDirection = undefined;
+        this.scrollParentTop = undefined;
+        this.scrollParentBottom = undefined;
+      }
       getNewHorizontalScrollDirection(pageX) {
         const scrollParentOffset = getElementPosition(this.container);
         const rightEdge = scrollParentOffset.left + this.container.clientWidth;
@@ -2293,12 +2315,23 @@ var jqtree = (function (exports) {
         this.refreshHitAreas();
         setTimeout(this.scrollVertically.bind(this), 40);
       }
+    }
+
+    class DocumentScrollParent {
+      constructor(_ref) {
+        let {
+          refreshHitAreas,
+          treeElement
+        } = _ref;
+        this.refreshHitAreas = refreshHitAreas;
+        this.treeElement = treeElement;
+      }
       checkHorizontalScrolling(pageX) {
         const newHorizontalScrollDirection = this.getNewHorizontalScrollDirection(pageX);
         if (this.horizontalScrollDirection !== newHorizontalScrollDirection) {
           this.horizontalScrollDirection = newHorizontalScrollDirection;
           if (this.horizontalScrollTimeout != null) {
-            window.clearTimeout(this.verticalScrollTimeout);
+            window.clearTimeout(this.horizontalScrollTimeout);
           }
           if (newHorizontalScrollDirection) {
             this.horizontalScrollTimeout = window.setTimeout(this.scrollHorizontally.bind(this), 40);
@@ -2319,27 +2352,17 @@ var jqtree = (function (exports) {
         }
       }
       getScrollLeft() {
-        return this.container.scrollLeft;
+        return document.documentElement.scrollLeft;
       }
       scrollToY(top) {
-        this.container.scrollTop = top;
+        const treeTop = getOffsetTop(this.treeElement);
+        document.documentElement.scrollTop = top + treeTop;
       }
       stopScrolling() {
         this.horizontalScrollDirection = undefined;
         this.verticalScrollDirection = undefined;
-        this.scrollParentTop = undefined;
-        this.scrollParentBottom = undefined;
-      }
-    }
-
-    class DocumentScrollParent {
-      constructor(_ref) {
-        let {
-          refreshHitAreas,
-          treeElement
-        } = _ref;
-        this.refreshHitAreas = refreshHitAreas;
-        this.treeElement = treeElement;
+        this.documentScrollHeight = undefined;
+        this.documentScrollWidth = undefined;
       }
       canScrollDown() {
         const documentElement = document.documentElement;
@@ -2414,61 +2437,23 @@ var jqtree = (function (exports) {
         this.refreshHitAreas();
         setTimeout(this.scrollVertically.bind(this), 40);
       }
-      checkHorizontalScrolling(pageX) {
-        const newHorizontalScrollDirection = this.getNewHorizontalScrollDirection(pageX);
-        if (this.horizontalScrollDirection !== newHorizontalScrollDirection) {
-          this.horizontalScrollDirection = newHorizontalScrollDirection;
-          if (this.horizontalScrollTimeout != null) {
-            window.clearTimeout(this.horizontalScrollTimeout);
-          }
-          if (newHorizontalScrollDirection) {
-            this.horizontalScrollTimeout = window.setTimeout(this.scrollHorizontally.bind(this), 40);
-          }
+    }
+
+    const isOverflow = overflowValue => overflowValue === "auto" || overflowValue === "scroll";
+    const hasOverFlow = element => {
+      const style = getComputedStyle(element);
+      return isOverflow(style.overflowX) || isOverflow(style.overflowY);
+    };
+    const getParentWithOverflow = treeElement => {
+      if (hasOverFlow(treeElement)) {
+        return treeElement;
+      }
+      let parent = treeElement.parentElement;
+      while (parent) {
+        if (hasOverFlow(parent)) {
+          return parent;
         }
-      }
-      checkVerticalScrolling(pageY) {
-        const newVerticalScrollDirection = this.getNewVerticalScrollDirection(pageY);
-        if (this.verticalScrollDirection !== newVerticalScrollDirection) {
-          this.verticalScrollDirection = newVerticalScrollDirection;
-          if (this.verticalScrollTimeout != null) {
-            window.clearTimeout(this.verticalScrollTimeout);
-            this.verticalScrollTimeout = undefined;
-          }
-          if (newVerticalScrollDirection) {
-            this.verticalScrollTimeout = window.setTimeout(this.scrollVertically.bind(this), 40);
-          }
-        }
-      }
-      getScrollLeft() {
-        return document.documentElement.scrollLeft;
-      }
-      scrollToY(top) {
-        const treeTop = getOffsetTop(this.treeElement);
-        document.documentElement.scrollTop = top + treeTop;
-      }
-      stopScrolling() {
-        this.horizontalScrollDirection = undefined;
-        this.verticalScrollDirection = undefined;
-        this.documentScrollHeight = undefined;
-        this.documentScrollWidth = undefined;
-      }
-    }
-
-    const isOverflow = overflowValue => overflowValue === "auto" || overflowValue === "scroll";
-    const hasOverFlow = element => {
-      const style = getComputedStyle(element);
-      return isOverflow(style.overflowX) || isOverflow(style.overflowY);
-    };
-    const getParentWithOverflow = treeElement => {
-      if (hasOverFlow(treeElement)) {
-        return treeElement;
-      }
-      let parent = treeElement.parentElement;
-      while (parent) {
-        if (hasOverFlow(parent)) {
-          return parent;
-        }
-        parent = parent.parentElement;
+        parent = parent.parentElement;
       }
       return null;
     };
@@ -2497,18 +2482,6 @@ var jqtree = (function (exports) {
         this.scrollParent = undefined;
         this.treeElement = treeElement;
       }
-      checkHorizontalScrolling(positionInfo) {
-        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
-      }
-      checkVerticalScrolling(positionInfo) {
-        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
-      }
-      getScrollParent() {
-        if (!this.scrollParent) {
-          this.scrollParent = createScrollParent(this.treeElement, this.refreshHitAreas);
-        }
-        return this.scrollParent;
-      }
       checkScrolling(positionInfo) {
         this.checkVerticalScrolling(positionInfo);
         this.checkHorizontalScrolling(positionInfo);
@@ -2522,6 +2495,18 @@ var jqtree = (function (exports) {
       stopScrolling() {
         this.getScrollParent().stopScrolling();
       }
+      checkHorizontalScrolling(positionInfo) {
+        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
+      }
+      checkVerticalScrolling(positionInfo) {
+        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
+      }
+      getScrollParent() {
+        if (!this.scrollParent) {
+          this.scrollParent = createScrollParent(this.treeElement, this.refreshHitAreas);
+        }
+        return this.scrollParent;
+      }
     }
 
     class SelectNodeHandler {
@@ -2575,14 +2560,12 @@ var jqtree = (function (exports) {
           }
         } else {
           const selectedNodes = [];
-          for (const id in this.selectedNodes) {
-            if (Object.prototype.hasOwnProperty.call(this.selectedNodes, id)) {
-              const node = this.getNodeById(id);
-              if (node && parent.isParentOf(node)) {
-                selectedNodes.push(node);
-              }
+          this.selectedNodes.forEach(id => {
+            const node = this.getNodeById(id);
+            if (node && parent.isParentOf(node)) {
+              selectedNodes.push(node);
             }
-          }
+          });
           return selectedNodes;
         }
       }
@@ -2718,7 +2701,7 @@ var jqtree = (function (exports) {
       }
     }
 
-    const version = "1.8.7";
+    const version = "1.8.8";
 
     const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
     const PARAM_IS_EMPTY = "Parameter is empty: ";
@@ -2769,917 +2752,920 @@ var jqtree = (function (exports) {
         tabIndex: 0,
         useContextMenu: true
       }))();
-      connectHandlers() {
-        const {
-          autoEscape,
-          buttonLeft,
-          closedIcon,
-          dataFilter,
-          dragAndDrop,
-          keyboardSupport,
-          onCanMove,
-          onCanMoveTo,
-          onCreateLi,
-          onDragMove,
-          onDragStop,
-          onGetStateFromStorage,
-          onIsMoveHandle,
-          onLoadFailed,
-          onLoading,
-          onSetStateFromStorage,
-          openedIcon,
-          openFolderDelay,
-          rtl,
-          saveState,
-          showEmptyFolder,
-          slide,
-          tabIndex
-        } = this.options;
-        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.openNodeInternal.bind(this);
-        const refreshElements = this.refreshElements.bind(this);
-        const refreshHitAreas = this.refreshHitAreas.bind(this);
-        const selectNode = this.selectNode.bind(this);
-        const $treeElement = this.element;
-        const treeElement = this.element.get(0);
-        const triggerEvent = this.triggerEvent.bind(this);
-        const selectNodeHandler = new SelectNodeHandler({
-          getNodeById
-        });
-        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 getMouseDelay = () => this.options.startDndDelay ?? 0;
-        const dataLoader = new DataLoader({
-          dataFilter,
-          loadData,
-          onLoadFailed,
-          onLoading,
-          treeElement,
-          triggerEvent
-        });
-        const saveStateHandler = new SaveStateHandler({
-          addToSelection,
-          getNodeById,
-          getSelectedNodes,
-          getTree,
-          onGetStateFromStorage,
-          onSetStateFromStorage,
-          openNode,
-          refreshElements,
-          removeFromSelection,
-          saveState
-        });
-        const scrollHandler = new ScrollHandler({
-          refreshHitAreas,
-          treeElement
-        });
-        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
-        const dndHandler = new DragAndDropHandler({
-          autoEscape,
-          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({
-          $element: $treeElement,
-          autoEscape,
-          buttonLeft,
-          closedIcon,
-          dragAndDrop,
-          getTree,
-          isNodeSelected,
-          onCreateLi,
-          openedIcon,
-          rtl,
-          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({
-          element: treeElement,
-          getMouseDelay,
-          getNode,
-          onClickButton: this.toggle.bind(this),
-          onClickTitle: this.doSelectNode.bind(this),
-          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;
+      addNodeAfter(newNodeInfo, existingNode) {
+        const newNode = existingNode.addAfter(newNodeInfo);
+        if (newNode) {
+          this.refreshElements(existingNode.parent);
+        }
+        return newNode;
       }
-      containsElement(element) {
-        const node = this.getNode(element);
-        return node != null && node.tree === this.tree;
+      addNodeBefore(newNodeInfo, existingNode) {
+        if (!existingNode) {
+          throw Error(PARAM_IS_EMPTY + "existingNode");
+        }
+        const newNode = existingNode.addBefore(newNodeInfo);
+        if (newNode) {
+          this.refreshElements(existingNode.parent);
+        }
+        return newNode;
       }
-      createFolderElement(node) {
-        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.element;
-        const triggerEvent = this.triggerEvent.bind(this);
-        return new FolderElement({
-          $treeElement,
-          closedIconElement,
-          getScrollLeft,
-          node,
-          openedIconElement,
-          tabIndex,
-          triggerEvent
-        });
+      addParentNode(newNodeInfo, existingNode) {
+        if (!existingNode) {
+          throw Error(PARAM_IS_EMPTY + "existingNode");
+        }
+        const newNode = existingNode.addParent(newNodeInfo);
+        if (newNode) {
+          this.refreshElements(newNode.parent);
+        }
+        return newNode;
       }
-      createNodeElement(node) {
-        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(this.scrollHandler);
-        const tabIndex = this.options.tabIndex;
-        const $treeElement = this.element;
-        return new NodeElement({
-          $treeElement,
-          getScrollLeft,
-          node,
-          tabIndex
-        });
-      }
-      deselectCurrentNode() {
-        const node = this.getSelectedNode();
-        if (node) {
-          this.removeFromSelection(node);
-        }
-      }
-      deselectNodes(parentNode) {
-        const selectedNodesUnderParent = this.selectNodeHandler.getSelectedNodesUnder(parentNode);
-        for (const n of selectedNodesUnderParent) {
-          this.selectNodeHandler.removeFromSelection(n);
-        }
-      }
-      doLoadData(data, parentNode) {
-        if (data) {
-          if (parentNode) {
-            this.deselectNodes(parentNode);
-            this.loadSubtree(data, parentNode);
-          } else {
-            this.initTree(data);
-          }
-          if (this.isDragging()) {
-            this.dndHandler.refresh();
-          }
+      addToSelection(node, mustSetFocus) {
+        if (!node) {
+          throw Error(NODE_PARAM_IS_EMPTY);
         }
-        this.triggerEvent("tree.load_data", {
-          parent_node: parentNode,
-          tree_data: data
-        });
+        this.selectNodeHandler.addToSelection(node);
+        this.openParents(node);
+        this.getNodeElementForNode(node).select(mustSetFocus ?? true);
+        this.saveState();
+        return this.element;
       }
-      doLoadDataFromUrl(urlInfoParam, parentNode, onFinished) {
-        const urlInfo = urlInfoParam ?? this.getDataUrlInfo(parentNode);
-        this.dataLoader.loadFromUrl(urlInfo, parentNode, onFinished);
+      appendNode(newNodeInfo, parentNodeParam) {
+        const parentNode = parentNodeParam ?? this.tree;
+        const node = parentNode.append(newNodeInfo);
+        this.refreshElements(parentNode);
+        return node;
       }
-      doSelectNode(node, optionsParam) {
-        const saveState = () => {
-          if (this.options.saveState) {
-            this.saveStateHandler.saveState();
-          }
-        };
+      closeNode(node, slideParam) {
         if (!node) {
-          // Called with empty node -> deselect current node
-          this.deselectCurrentNode();
-          saveState();
-          return;
-        }
-        const defaultOptions = {
-          mustSetFocus: true,
-          mustToggle: true
-        };
-        const selectOptions = {
-          ...defaultOptions,
-          ...(optionsParam ?? {})
-        };
-        const canSelect = () => {
-          if (this.options.onCanSelectNode) {
-            return this.options.selectable && this.options.onCanSelectNode(node);
-          } else {
-            return this.options.selectable;
-          }
-        };
-        if (!canSelect()) {
-          return;
-        }
-        if (this.selectNodeHandler.isNodeSelected(node)) {
-          if (selectOptions.mustToggle) {
-            this.deselectCurrentNode();
-            this.triggerEvent("tree.select", {
-              node: null,
-              previous_node: node
-            });
-          }
-        } else {
-          const deselectedNode = this.getSelectedNode() || null;
-          this.deselectCurrentNode();
-          this.addToSelection(node, selectOptions.mustSetFocus);
-          this.triggerEvent("tree.select", {
-            deselected_node: deselectedNode,
-            node
-          });
-          this.openParents(node);
+          throw Error(NODE_PARAM_IS_EMPTY);
         }
-        saveState();
-      }
-      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);
-        } else {
-          return 0;
+        const slide = slideParam ?? this.options.slide;
+        if (node.isFolder() || node.isEmptyFolder) {
+          this.createFolderElement(node).close(slide, this.options.animationSpeed);
+          this.saveState();
         }
+        return this.element;
       }
-      getDataUrlInfo(node) {
-        const dataUrl = this.options.dataUrl ?? this.element.data("url");
-        const getUrlFromString = url => {
-          const urlInfo = {
-            url
-          };
-          setUrlInfoData(urlInfo);
-          return urlInfo;
-        };
-        const setUrlInfoData = urlInfo => {
-          if (node?.id) {
-            // Load on demand of a subtree; add node parameter
-            const data = {
-              node: node.id
-            };
-            urlInfo.data = data;
-          } else {
-            // Add selected_node parameter
-            const selectedNodeId = this.getNodeIdToBeSelected();
-            if (selectedNodeId) {
-              const data = {
-                selected_node: selectedNodeId
-              };
-              urlInfo.data = data;
-            }
-          }
-        };
-        if (typeof dataUrl === "function") {
-          return dataUrl(node);
-        } else if (typeof dataUrl === "string") {
-          return getUrlFromString(dataUrl);
-        } else if (dataUrl && typeof dataUrl === "object") {
-          setUrlInfoData(dataUrl);
-          return dataUrl;
-        } else {
-          return null;
-        }
+      deinit() {
+        this.element.empty();
+        this.element.off();
+        this.keyHandler.deinit();
+        this.mouseHandler.deinit();
+        this.tree = new Node({}, true);
+        super.deinit();
       }
-      getDefaultClosedIcon() {
-        if (this.options.rtl) {
-          // triangle to the left
-          return "&#x25c0;";
-        } else {
-          // triangle to the right
-          return "&#x25ba;";
-        }
+      getNodeByCallback(callback) {
+        return this.tree.getNodeByCallback(callback);
       }
-      getNode(element) {
-        const liElement = element.closest("li.jqtree_common");
-        if (liElement) {
-          return jQuery(liElement).data("node");
-        } else {
+      getNodeByHtmlElement(inputElement) {
+        const element = inputElement instanceof HTMLElement ? inputElement : inputElement[0];
+        if (!element) {
           return null;
         }
+        return this.getNode(element);
       }
-      getNodeElement(element) {
-        const node = this.getNode(element);
-        if (node) {
-          return this.getNodeElementForNode(node);
-        } else {
-          return null;
-        }
+      getNodeById(nodeId) {
+        return this.tree.getNodeById(nodeId);
       }
-      getNodeElementForNode(node) {
-        if (node.isFolder()) {
-          return this.createFolderElement(node);
-        } else {
-          return this.createNodeElement(node);
-        }
+      getNodeByName(name) {
+        return this.tree.getNodeByName(name);
       }
-      getNodeIdToBeSelected() {
-        if (this.options.saveState) {
-          return this.saveStateHandler.getNodeIdToBeSelected();
-        } else {
-          return null;
-        }
+      getNodeByNameMustExist(name) {
+        return this.tree.getNodeByNameMustExist(name);
       }
-      getRtlOption() {
-        if (this.options.rtl != null) {
-          return this.options.rtl;
-        } else {
-          const dataRtl = this.element.data("rtl");
-          if (dataRtl !== null && dataRtl !== false && dataRtl !== undefined) {
-            return true;
-          } else {
-            return false;
-          }
-        }
+      getNodesByProperty(key, value) {
+        return this.tree.getNodesByProperty(key, value);
       }
-      initData() {
-        if (this.options.data) {
-          this.doLoadData(this.options.data, null);
-        } else {
-          const dataUrl = this.getDataUrlInfo(null);
-          if (dataUrl) {
-            this.doLoadDataFromUrl(null, null, null);
-          } else {
-            this.doLoadData([], null);
-          }
-        }
+      getSelectedNode() {
+        return this.selectNodeHandler.getSelectedNode();
       }
-      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) {
-          doInit();
-        } else {
-          // Load data on demand and then init the tree
-          this.setInitialStateOnDemand(doInit);
-        }
+      getSelectedNodes() {
+        return this.selectNodeHandler.getSelectedNodes();
       }
-      isFocusOnTree() {
-        const activeElement = document.activeElement;
-        return Boolean(activeElement && activeElement.tagName === "SPAN" && this.containsElement(activeElement));
+      getState() {
+        return this.saveStateHandler.getState();
       }
-      isSelectedNodeInSubtree(subtree) {
-        const selectedNode = this.getSelectedNode();
-        if (!selectedNode) {
-          return false;
-        } else {
-          return subtree === selectedNode || subtree.isParentOf(selectedNode);
-        }
+      getStateFromStorage() {
+        return this.saveStateHandler.getStateFromStorage();
       }
-      loadFolderOnDemand(node) {
-        let slide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-        let onFinished = arguments.length > 2 ? arguments[2] : undefined;
-        node.is_loading = true;
-        this.doLoadDataFromUrl(null, node, () => {
-          this.openNodeInternal(node, slide, onFinished);
-        });
+      getTree() {
+        return this.tree;
       }
-      loadSubtree(data, parentNode) {
-        parentNode.loadFromData(data);
-        parentNode.load_on_demand = false;
-        parentNode.is_loading = false;
-        this.refreshElements(parentNode);
+      getVersion() {
+        return version;
       }
-      mouseCapture(positionInfo) {
-        if (this.options.dragAndDrop) {
-          return this.dndHandler.mouseCapture(positionInfo);
-        } else {
-          return false;
+      init() {
+        super.init();
+        this.element = this.$el;
+        this.isInitialized = false;
+        this.options.rtl = this.getRtlOption();
+        if (this.options.closedIcon == null) {
+          this.options.closedIcon = this.getDefaultClosedIcon();
         }
+        this.connectHandlers();
+        this.initData();
       }
-      mouseDrag(positionInfo) {
-        if (this.options.dragAndDrop) {
-          const result = this.dndHandler.mouseDrag(positionInfo);
-          this.scrollHandler.checkScrolling(positionInfo);
-          return result;
-        } else {
-          return false;
-        }
+      isDragging() {
+        return this.dndHandler.isDragging;
       }
-      mouseStart(positionInfo) {
-        if (this.options.dragAndDrop) {
-          return this.dndHandler.mouseStart(positionInfo);
-        } else {
-          return false;
+      isNodeSelected(node) {
+        if (!node) {
+          throw Error(NODE_PARAM_IS_EMPTY);
         }
+        return this.selectNodeHandler.isNodeSelected(node);
       }
-      mouseStop(positionInfo) {
-        if (this.options.dragAndDrop) {
-          this.scrollHandler.stopScrolling();
-          return this.dndHandler.mouseStop(positionInfo);
+      loadData(data, parentNode) {
+        this.doLoadData(data, parentNode);
+        return this.element;
+      }
+
+      /*
+      signatures:
+      - loadDataFromUrl(url, parent_node=null, on_finished=null)
+          loadDataFromUrl('/my_data');
+          loadDataFromUrl('/my_data', node1);
+          loadDataFromUrl('/my_data', node1, function() { console.log('finished'); });
+          loadDataFromUrl('/my_data', null, function() { console.log('finished'); });
+       - loadDataFromUrl(parent_node=null, on_finished=null)
+          loadDataFromUrl();
+          loadDataFromUrl(node1);
+          loadDataFromUrl(null, function() { console.log('finished'); });
+          loadDataFromUrl(node1, function() { console.log('finished'); });
+      */
+      loadDataFromUrl(param1, param2, param3) {
+        if (typeof param1 === "string") {
+          // first parameter is url
+          this.doLoadDataFromUrl(param1, param2, param3 ?? null);
         } else {
-          return false;
+          // first parameter is not url
+          this.doLoadDataFromUrl(null, param1, param2);
         }
+        return this.element;
       }
-      openNodeInternal(node) {
-        let slide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-        let onFinished = arguments.length > 2 ? arguments[2] : undefined;
-        const doOpenNode = (_node, _slide, _onFinished) => {
-          const folderElement = this.createFolderElement(_node);
-          folderElement.open(_onFinished, _slide, this.options.animationSpeed);
-        };
-        if (node.isFolder() || node.isEmptyFolder) {
-          if (node.load_on_demand) {
-            this.loadFolderOnDemand(node, slide, onFinished);
-          } else {
-            let parent = node.parent;
-            while (parent) {
-              // nb: do not open root element
-              if (parent.parent) {
-                doOpenNode(parent, false);
-              }
-              parent = parent.parent;
-            }
-            doOpenNode(node, slide, onFinished);
-            this.saveState();
-          }
+      moveDown() {
+        const selectedNode = this.getSelectedNode();
+        if (selectedNode) {
+          this.keyHandler.moveDown(selectedNode);
         }
+        return this.element;
       }
-      openParents(node) {
-        const parent = node.parent;
-        if (parent?.parent && !parent.is_open) {
-          this.openNode(parent, false);
+      moveNode(node, targetNode, position) {
+        if (!node) {
+          throw Error(NODE_PARAM_IS_EMPTY);
         }
-      }
-
-      /*
-      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);
+        if (!targetNode) {
+          throw Error(PARAM_IS_EMPTY + "targetNode");
         }
-        this.triggerEvent("tree.refresh");
-      }
-      saveState() {
-        if (this.options.saveState) {
-          this.saveStateHandler.saveState();
+        if (!position) {
+          throw Error(PARAM_IS_EMPTY + "position");
+        }
+        const positionIndex = getPosition(position);
+        if (positionIndex !== undefined) {
+          this.tree.moveNode(node, targetNode, positionIndex);
+          this.refreshElements(null);
         }
+        return this.element;
       }
-      selectCurrentNode(mustSetFocus) {
-        const node = this.getSelectedNode();
-        if (node) {
-          const nodeElement = this.getNodeElementForNode(node);
-          nodeElement.select(mustSetFocus);
+      moveUp() {
+        const selectedNode = this.getSelectedNode();
+        if (selectedNode) {
+          this.keyHandler.moveUp(selectedNode);
         }
+        return this.element;
       }
-
-      // 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?
-          if (!this.options.saveState) {
-            return [false, false];
+      openNode(node, param1, param2) {
+        if (!node) {
+          throw Error(NODE_PARAM_IS_EMPTY);
+        }
+        const parseParams = () => {
+          let onFinished;
+          let slide;
+          if (isFunction(param1)) {
+            onFinished = param1;
+            slide = null;
           } else {
-            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];
-            }
+            slide = param1;
+            onFinished = param2;
           }
-        };
-        const autoOpenNodes = () => {
-          // result: must load on demand?
-          if (this.options.autoOpen === false) {
-            return false;
+          if (slide == null) {
+            slide = this.options.slide;
           }
-          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;
+          return [slide, onFinished];
         };
-        let [isRestored, mustLoadOnDemand] = restoreState(); // eslint-disable-line prefer-const
-
-        if (!isRestored) {
-          mustLoadOnDemand = autoOpenNodes();
+        const [slide, onFinished] = parseParams();
+        this.openNodeInternal(node, slide, onFinished);
+        return this.element;
+      }
+      prependNode(newNodeInfo, parentNodeParam) {
+        const parentNode = parentNodeParam ?? this.tree;
+        const node = parentNode.prepend(newNodeInfo);
+        this.refreshElements(parentNode);
+        return node;
+      }
+      refresh() {
+        this.refreshElements(null);
+        return this.element;
+      }
+      refreshHitAreas() {
+        this.dndHandler.refresh();
+        return this.element;
+      }
+      reload(onFinished) {
+        this.doLoadDataFromUrl(null, null, onFinished);
+        return this.element;
+      }
+      removeFromSelection(node) {
+        if (!node) {
+          throw Error(NODE_PARAM_IS_EMPTY);
         }
-        return mustLoadOnDemand;
+        this.selectNodeHandler.removeFromSelection(node);
+        this.getNodeElementForNode(node).deselect();
+        this.saveState();
+        return this.element;
       }
+      removeNode(node) {
+        if (!node) {
+          throw Error(NODE_PARAM_IS_EMPTY);
+        }
+        if (!node.parent) {
+          throw Error("Node has no parent");
+        }
+        this.selectNodeHandler.removeFromSelection(node, true); // including children
 
-      // Set the initial state for nodes that are loaded on demand
-      // Call cb_finished when done
-      setInitialStateOnDemand(cbFinished) {
-        const restoreState = () => {
-          if (!this.options.saveState) {
-            return false;
-          } else {
-            const state = this.saveStateHandler.getStateFromStorage();
-            if (!state) {
-              return false;
-            } else {
-              this.saveStateHandler.setInitialStateOnDemand(state, cbFinished);
-              return true;
-            }
-          }
-        };
-        const autoOpenNodes = () => {
-          const maxLevel = this.getAutoOpenMaxLevel();
-          let loadingCount = 0;
-          const loadAndOpenNode = node => {
-            loadingCount += 1;
-            this.openNodeInternal(node, false, () => {
-              loadingCount -= 1;
-              openNodes();
-            });
-          };
-          const openNodes = () => {
-            this.tree.iterate((node, level) => {
-              if (node.load_on_demand) {
-                if (!node.is_loading) {
-                  loadAndOpenNode(node);
-                }
-                return false;
-              } else {
-                this.openNodeInternal(node, false);
-                return level !== maxLevel;
-              }
-            });
-            if (loadingCount === 0) {
-              cbFinished();
-            }
-          };
-          openNodes();
-        };
-        if (!restoreState()) {
-          autoOpenNodes();
-        }
-      }
-      triggerEvent(eventName, values) {
-        const event = jQuery.Event(eventName, values);
-        this.element.trigger(event);
-        return event;
-      }
-      addNodeAfter(newNodeInfo, existingNode) {
-        const newNode = existingNode.addAfter(newNodeInfo);
-        if (newNode) {
-          this.refreshElements(existingNode.parent);
-        }
-        return newNode;
+        const parent = node.parent;
+        node.remove();
+        this.refreshElements(parent);
+        return this.element;
       }
-      addNodeBefore(newNodeInfo, existingNode) {
-        if (!existingNode) {
-          throw Error(PARAM_IS_EMPTY + "existingNode");
+      scrollToNode(node) {
+        if (!node) {
+          throw Error(NODE_PARAM_IS_EMPTY);
         }
-        const newNode = existingNode.addBefore(newNodeInfo);
-        if (newNode) {
-          this.refreshElements(existingNode.parent);
+        if (!node.element) {
+          return this.element;
         }
-        return newNode;
+        const top = getOffsetTop(node.element) - getOffsetTop(this.$el.get(0));
+        this.scrollHandler.scrollToY(top);
+        return this.element;
       }
-      addParentNode(newNodeInfo, existingNode) {
-        if (!existingNode) {
-          throw Error(PARAM_IS_EMPTY + "existingNode");
-        }
-        const newNode = existingNode.addParent(newNodeInfo);
-        if (newNode) {
-          this.refreshElements(newNode.parent);
+      selectNode(node, optionsParam) {
+        this.doSelectNode(node, optionsParam);
+        return this.element;
+      }
+      setOption(option, value) {
+        this.options[option] = value;
+        return this.element;
+      }
+      setState(state) {
+        if (state) {
+          this.saveStateHandler.setInitialState(state);
+          this.refreshElements(null);
         }
-        return newNode;
+        return this.element;
       }
-      addToSelection(node, mustSetFocus) {
+      toggle(node) {
+        let slideParam = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
         if (!node) {
           throw Error(NODE_PARAM_IS_EMPTY);
         }
-        this.selectNodeHandler.addToSelection(node);
-        this.openParents(node);
-        this.getNodeElementForNode(node).select(mustSetFocus ?? true);
-        this.saveState();
+        const slide = slideParam ?? this.options.slide;
+        if (node.is_open) {
+          this.closeNode(node, slide);
+        } else {
+          this.openNode(node, slide);
+        }
         return this.element;
       }
-      appendNode(newNodeInfo, parentNodeParam) {
-        const parentNode = parentNodeParam ?? this.tree;
-        const node = parentNode.append(newNodeInfo);
-        this.refreshElements(parentNode);
-        return node;
+      toJson() {
+        return JSON.stringify(this.tree.getData());
       }
-      closeNode(node, slideParam) {
+      updateNode(node, data) {
         if (!node) {
           throw Error(NODE_PARAM_IS_EMPTY);
         }
-        const slide = slideParam ?? this.options.slide;
-        if (node.isFolder() || node.isEmptyFolder) {
-          this.createFolderElement(node).close(slide, this.options.animationSpeed);
-          this.saveState();
+        if (!data) {
+          return this.element;
+        }
+        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);
         return this.element;
       }
-      deinit() {
-        this.element.empty();
-        this.element.off();
-        this.keyHandler.deinit();
-        this.mouseHandler.deinit();
-        this.tree = new Node({}, true);
-        super.deinit();
+      connectHandlers() {
+        const {
+          autoEscape,
+          buttonLeft,
+          closedIcon,
+          dataFilter,
+          dragAndDrop,
+          keyboardSupport,
+          onCanMove,
+          onCanMoveTo,
+          onCreateLi,
+          onDragMove,
+          onDragStop,
+          onGetStateFromStorage,
+          onIsMoveHandle,
+          onLoadFailed,
+          onLoading,
+          onSetStateFromStorage,
+          openedIcon,
+          openFolderDelay,
+          rtl,
+          saveState,
+          showEmptyFolder,
+          slide,
+          tabIndex
+        } = this.options;
+        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.openNodeInternal.bind(this);
+        const refreshElements = this.refreshElements.bind(this);
+        const refreshHitAreas = this.refreshHitAreas.bind(this);
+        const selectNode = this.selectNode.bind(this);
+        const $treeElement = this.element;
+        const treeElement = this.element.get(0);
+        const triggerEvent = this.triggerEvent.bind(this);
+        const selectNodeHandler = new SelectNodeHandler({
+          getNodeById
+        });
+        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 getMouseDelay = () => this.options.startDndDelay ?? 0;
+        const dataLoader = new DataLoader({
+          dataFilter,
+          loadData,
+          onLoadFailed,
+          onLoading,
+          treeElement,
+          triggerEvent
+        });
+        const saveStateHandler = new SaveStateHandler({
+          addToSelection,
+          getNodeById,
+          getSelectedNodes,
+          getTree,
+          onGetStateFromStorage,
+          onSetStateFromStorage,
+          openNode,
+          refreshElements,
+          removeFromSelection,
+          saveState
+        });
+        const scrollHandler = new ScrollHandler({
+          refreshHitAreas,
+          treeElement
+        });
+        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
+        const dndHandler = new DragAndDropHandler({
+          autoEscape,
+          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({
+          $element: $treeElement,
+          autoEscape,
+          buttonLeft,
+          closedIcon,
+          dragAndDrop,
+          getTree,
+          isNodeSelected,
+          onCreateLi,
+          openedIcon,
+          rtl,
+          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({
+          element: treeElement,
+          getMouseDelay,
+          getNode,
+          onClickButton: this.toggle.bind(this),
+          onClickTitle: this.doSelectNode.bind(this),
+          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;
+      }
+      containsElement(element) {
+        const node = this.getNode(element);
+        return node != null && node.tree === this.tree;
+      }
+      createFolderElement(node) {
+        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.element.get(0);
+        const triggerEvent = this.triggerEvent.bind(this);
+        return new FolderElement({
+          closedIconElement,
+          getScrollLeft,
+          node,
+          openedIconElement,
+          tabIndex,
+          treeElement,
+          triggerEvent
+        });
+      }
+      createNodeElement(node) {
+        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(this.scrollHandler);
+        const tabIndex = this.options.tabIndex;
+        const treeElement = this.element.get(0);
+        return new NodeElement({
+          getScrollLeft,
+          node,
+          tabIndex,
+          treeElement
+        });
+      }
+      deselectCurrentNode() {
+        const node = this.getSelectedNode();
+        if (node) {
+          this.removeFromSelection(node);
+        }
+      }
+      deselectNodes(parentNode) {
+        const selectedNodesUnderParent = this.selectNodeHandler.getSelectedNodesUnder(parentNode);
+        for (const n of selectedNodesUnderParent) {
+          this.selectNodeHandler.removeFromSelection(n);
+        }
+      }
+      doLoadData(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.load_data", {
+          parent_node: parentNode,
+          tree_data: data
+        });
+      }
+      doLoadDataFromUrl(urlInfoParam, parentNode, onFinished) {
+        const urlInfo = urlInfoParam ?? this.getDataUrlInfo(parentNode);
+        this.dataLoader.loadFromUrl(urlInfo, parentNode, onFinished);
+      }
+      doSelectNode(node, optionsParam) {
+        const saveState = () => {
+          if (this.options.saveState) {
+            this.saveStateHandler.saveState();
+          }
+        };
+        if (!node) {
+          // Called with empty node -> deselect current node
+          this.deselectCurrentNode();
+          saveState();
+          return;
+        }
+        const defaultOptions = {
+          mustSetFocus: true,
+          mustToggle: true
+        };
+        const selectOptions = {
+          ...defaultOptions,
+          ...(optionsParam ?? {})
+        };
+        const canSelect = () => {
+          if (this.options.onCanSelectNode) {
+            return this.options.selectable && this.options.onCanSelectNode(node);
+          } else {
+            return this.options.selectable;
+          }
+        };
+        if (!canSelect()) {
+          return;
+        }
+        if (this.selectNodeHandler.isNodeSelected(node)) {
+          if (selectOptions.mustToggle) {
+            this.deselectCurrentNode();
+            this.triggerEvent("tree.select", {
+              node: null,
+              previous_node: node
+            });
+          }
+        } else {
+          const deselectedNode = this.getSelectedNode() || null;
+          this.deselectCurrentNode();
+          this.addToSelection(node, selectOptions.mustSetFocus);
+          this.triggerEvent("tree.select", {
+            deselected_node: deselectedNode,
+            node
+          });
+          this.openParents(node);
+        }
+        saveState();
       }
-      getNodeByCallback(callback) {
-        return this.tree.getNodeByCallback(callback);
+      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);
+        } else {
+          return 0;
+        }
       }
-      getNodeByHtmlElement(inputElement) {
-        const element = inputElement instanceof HTMLElement ? inputElement : inputElement[0];
-        if (!element) {
+      getDataUrlInfo(node) {
+        const dataUrl = this.options.dataUrl ?? this.element.data("url");
+        const getUrlFromString = url => {
+          const urlInfo = {
+            url
+          };
+          setUrlInfoData(urlInfo);
+          return urlInfo;
+        };
+        const setUrlInfoData = urlInfo => {
+          if (node?.id) {
+            // Load on demand of a subtree; add node parameter
+            const data = {
+              node: node.id
+            };
+            urlInfo.data = data;
+          } else {
+            // Add selected_node parameter
+            const selectedNodeId = this.getNodeIdToBeSelected();
+            if (selectedNodeId) {
+              const data = {
+                selected_node: selectedNodeId
+              };
+              urlInfo.data = data;
+            }
+          }
+        };
+        if (typeof dataUrl === "function") {
+          return dataUrl(node);
+        } else if (typeof dataUrl === "string") {
+          return getUrlFromString(dataUrl);
+        } else if (dataUrl && typeof dataUrl === "object") {
+          setUrlInfoData(dataUrl);
+          return dataUrl;
+        } else {
           return null;
         }
-        return this.getNode(element);
-      }
-      getNodeById(nodeId) {
-        return this.tree.getNodeById(nodeId);
-      }
-      getNodeByName(name) {
-        return this.tree.getNodeByName(name);
-      }
-      getNodeByNameMustExist(name) {
-        return this.tree.getNodeByNameMustExist(name);
-      }
-      getNodesByProperty(key, value) {
-        return this.tree.getNodesByProperty(key, value);
-      }
-      getSelectedNode() {
-        return this.selectNodeHandler.getSelectedNode();
-      }
-      getSelectedNodes() {
-        return this.selectNodeHandler.getSelectedNodes();
-      }
-      getState() {
-        return this.saveStateHandler.getState();
-      }
-      getStateFromStorage() {
-        return this.saveStateHandler.getStateFromStorage();
-      }
-      getTree() {
-        return this.tree;
-      }
-      getVersion() {
-        return version;
       }
-      init() {
-        super.init();
-        this.element = this.$el;
-        this.isInitialized = false;
-        this.options.rtl = this.getRtlOption();
-        if (this.options.closedIcon == null) {
-          this.options.closedIcon = this.getDefaultClosedIcon();
+      getDefaultClosedIcon() {
+        if (this.options.rtl) {
+          // triangle to the left
+          return "&#x25c0;";
+        } else {
+          // triangle to the right
+          return "&#x25ba;";
         }
-        this.connectHandlers();
-        this.initData();
-      }
-      isDragging() {
-        return this.dndHandler.isDragging;
       }
-      isNodeSelected(node) {
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
+      getNode(element) {
+        const liElement = element.closest("li.jqtree_common");
+        if (liElement) {
+          return jQuery(liElement).data("node");
+        } else {
+          return null;
         }
-        return this.selectNodeHandler.isNodeSelected(node);
-      }
-      loadData(data, parentNode) {
-        this.doLoadData(data, parentNode);
-        return this.element;
       }
-
-      /*
-      signatures:
-      - loadDataFromUrl(url, parent_node=null, on_finished=null)
-          loadDataFromUrl('/my_data');
-          loadDataFromUrl('/my_data', node1);
-          loadDataFromUrl('/my_data', node1, function() { console.log('finished'); });
-          loadDataFromUrl('/my_data', null, function() { console.log('finished'); });
-       - loadDataFromUrl(parent_node=null, on_finished=null)
-          loadDataFromUrl();
-          loadDataFromUrl(node1);
-          loadDataFromUrl(null, function() { console.log('finished'); });
-          loadDataFromUrl(node1, function() { console.log('finished'); });
-      */
-      loadDataFromUrl(param1, param2, param3) {
-        if (typeof param1 === "string") {
-          // first parameter is url
-          this.doLoadDataFromUrl(param1, param2, param3 ?? null);
+      getNodeElement(element) {
+        const node = this.getNode(element);
+        if (node) {
+          return this.getNodeElementForNode(node);
         } else {
-          // first parameter is not url
-          this.doLoadDataFromUrl(null, param1, param2);
+          return null;
         }
-        return this.element;
       }
-      moveDown() {
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-          this.keyHandler.moveDown(selectedNode);
+      getNodeElementForNode(node) {
+        if (node.isFolder()) {
+          return this.createFolderElement(node);
+        } else {
+          return this.createNodeElement(node);
         }
-        return this.element;
       }
-      moveNode(node, targetNode, position) {
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
-        }
-        if (!targetNode) {
-          throw Error(PARAM_IS_EMPTY + "targetNode");
-        }
-        if (!position) {
-          throw Error(PARAM_IS_EMPTY + "position");
-        }
-        const positionIndex = getPosition(position);
-        if (positionIndex !== undefined) {
-          this.tree.moveNode(node, targetNode, positionIndex);
-          this.refreshElements(null);
+      getNodeIdToBeSelected() {
+        if (this.options.saveState) {
+          return this.saveStateHandler.getNodeIdToBeSelected();
+        } else {
+          return null;
         }
-        return this.element;
       }
-      moveUp() {
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-          this.keyHandler.moveUp(selectedNode);
+      getRtlOption() {
+        if (this.options.rtl != null) {
+          return this.options.rtl;
+        } else {
+          const dataRtl = this.element.data("rtl");
+          if (dataRtl !== null && dataRtl !== false && dataRtl !== undefined) {
+            return true;
+          } else {
+            return false;
+          }
         }
-        return this.element;
       }
-      openNode(node, param1, param2) {
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
-        }
-        const parseParams = () => {
-          let onFinished;
-          let slide;
-          if (isFunction(param1)) {
-            onFinished = param1;
-            slide = null;
+      initData() {
+        if (this.options.data) {
+          this.doLoadData(this.options.data, null);
+        } else {
+          const dataUrl = this.getDataUrlInfo(null);
+          if (dataUrl) {
+            this.doLoadDataFromUrl(null, null, null);
           } else {
-            slide = param1;
-            onFinished = param2;
+            this.doLoadData([], null);
           }
-          if (slide == null) {
-            slide = this.options.slide;
+        }
+      }
+      initTree(data) {
+        const doInit = () => {
+          if (!this.isInitialized) {
+            this.isInitialized = true;
+            this.triggerEvent("tree.init");
           }
-          return [slide, onFinished];
         };
-        const [slide, onFinished] = parseParams();
-        this.openNodeInternal(node, slide, onFinished);
-        return this.element;
-      }
-      prependNode(newNodeInfo, parentNodeParam) {
-        const parentNode = parentNodeParam ?? this.tree;
-        const node = parentNode.prepend(newNodeInfo);
-        this.refreshElements(parentNode);
-        return node;
-      }
-      refresh() {
+        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);
-        return this.element;
-      }
-      refreshHitAreas() {
-        this.dndHandler.refresh();
-        return this.element;
-      }
-      reload(onFinished) {
-        this.doLoadDataFromUrl(null, null, onFinished);
-        return this.element;
-      }
-      removeFromSelection(node) {
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
-        }
-        this.selectNodeHandler.removeFromSelection(node);
-        this.getNodeElementForNode(node).deselect();
-        this.saveState();
-        return this.element;
-      }
-      removeNode(node) {
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
-        }
-        if (!node.parent) {
-          throw Error("Node has no parent");
+        if (!mustLoadOnDemand) {
+          doInit();
+        } else {
+          // Load data on demand and then init the tree
+          this.setInitialStateOnDemand(doInit);
         }
-        this.selectNodeHandler.removeFromSelection(node, true); // including children
-
-        const parent = node.parent;
-        node.remove();
-        this.refreshElements(parent);
-        return this.element;
       }
-      scrollToNode(node) {
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
-        }
-        if (!node.element) {
-          return this.element;
+      isFocusOnTree() {
+        const activeElement = document.activeElement;
+        return Boolean(activeElement && activeElement.tagName === "SPAN" && this.containsElement(activeElement));
+      }
+      isSelectedNodeInSubtree(subtree) {
+        const selectedNode = this.getSelectedNode();
+        if (!selectedNode) {
+          return false;
+        } else {
+          return subtree === selectedNode || subtree.isParentOf(selectedNode);
         }
-        const top = getOffsetTop(node.element) - getOffsetTop(this.$el.get(0));
-        this.scrollHandler.scrollToY(top);
-        return this.element;
       }
-      selectNode(node, optionsParam) {
-        this.doSelectNode(node, optionsParam);
-        return this.element;
+      loadFolderOnDemand(node) {
+        let slide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        let onFinished = arguments.length > 2 ? arguments[2] : undefined;
+        node.is_loading = true;
+        this.doLoadDataFromUrl(null, node, () => {
+          this.openNodeInternal(node, slide, onFinished);
+        });
       }
-      setOption(option, value) {
-        this.options[option] = value;
-        return this.element;
+      loadSubtree(data, parentNode) {
+        parentNode.loadFromData(data);
+        parentNode.load_on_demand = false;
+        parentNode.is_loading = false;
+        this.refreshElements(parentNode);
       }
-      setState(state) {
-        if (state) {
-          this.saveStateHandler.setInitialState(state);
-          this.refreshElements(null);
+      mouseCapture(positionInfo) {
+        if (this.options.dragAndDrop) {
+          return this.dndHandler.mouseCapture(positionInfo);
+        } else {
+          return false;
         }
-        return this.element;
       }
-      toggle(node) {
-        let slideParam = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
+      mouseDrag(positionInfo) {
+        if (this.options.dragAndDrop) {
+          const result = this.dndHandler.mouseDrag(positionInfo);
+          this.scrollHandler.checkScrolling(positionInfo);
+          return result;
+        } else {
+          return false;
         }
-        const slide = slideParam ?? this.options.slide;
-        if (node.is_open) {
-          this.closeNode(node, slide);
+      }
+      mouseStart(positionInfo) {
+        if (this.options.dragAndDrop) {
+          return this.dndHandler.mouseStart(positionInfo);
         } else {
-          this.openNode(node, slide);
+          return false;
         }
-        return this.element;
       }
-      toJson() {
-        return JSON.stringify(this.tree.getData());
+      mouseStop(positionInfo) {
+        if (this.options.dragAndDrop) {
+          this.scrollHandler.stopScrolling();
+          return this.dndHandler.mouseStop(positionInfo);
+        } else {
+          return false;
+        }
       }
-      updateNode(node, data) {
-        if (!node) {
-          throw Error(NODE_PARAM_IS_EMPTY);
+      openNodeInternal(node) {
+        let slide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        let onFinished = arguments.length > 2 ? arguments[2] : undefined;
+        const doOpenNode = (_node, _slide, _onFinished) => {
+          if (!node.children.length) {
+            return;
+          }
+          const folderElement = this.createFolderElement(_node);
+          folderElement.open(_onFinished, _slide, this.options.animationSpeed);
+        };
+        if (node.isFolder() || node.isEmptyFolder) {
+          if (node.load_on_demand) {
+            this.loadFolderOnDemand(node, slide, onFinished);
+          } else {
+            let parent = node.parent;
+            while (parent) {
+              // nb: do not open root element
+              if (parent.parent) {
+                doOpenNode(parent, false);
+              }
+              parent = parent.parent;
+            }
+            doOpenNode(node, slide, onFinished);
+            this.saveState();
+          }
         }
-        if (!data) {
-          return this.element;
+      }
+      openParents(node) {
+        const parent = node.parent;
+        if (parent?.parent && !parent.is_open) {
+          this.openNode(parent, false);
         }
-        const idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
-        if (idIsChanged) {
-          this.tree.removeNodeFromIndex(node);
+      }
+
+      /*
+      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);
         }
-        node.setData(data);
-        if (idIsChanged) {
-          this.tree.addNodeToIndex(node);
+        this.triggerEvent("tree.refresh");
+      }
+      saveState() {
+        if (this.options.saveState) {
+          this.saveStateHandler.saveState();
         }
-        if (typeof data === "object" && data.children && data.children instanceof Array) {
-          node.removeChildren();
-          if (data.children.length) {
-            node.loadFromData(data.children);
+      }
+      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?
+          if (!this.options.saveState) {
+            return [false, false];
+          } else {
+            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
+      // Call cb_finished when done
+      setInitialStateOnDemand(cbFinished) {
+        const restoreState = () => {
+          if (!this.options.saveState) {
+            return false;
+          } else {
+            const state = this.saveStateHandler.getStateFromStorage();
+            if (!state) {
+              return false;
+            } else {
+              this.saveStateHandler.setInitialStateOnDemand(state, cbFinished);
+              return true;
+            }
           }
+        };
+        const autoOpenNodes = () => {
+          const maxLevel = this.getAutoOpenMaxLevel();
+          let loadingCount = 0;
+          const loadAndOpenNode = node => {
+            loadingCount += 1;
+            this.openNodeInternal(node, false, () => {
+              loadingCount -= 1;
+              openNodes();
+            });
+          };
+          const openNodes = () => {
+            this.tree.iterate((node, level) => {
+              if (node.load_on_demand) {
+                if (!node.is_loading) {
+                  loadAndOpenNode(node);
+                }
+                return false;
+              } else {
+                this.openNodeInternal(node, false);
+                return level !== maxLevel;
+              }
+            });
+            if (loadingCount === 0) {
+              cbFinished();
+            }
+          };
+          openNodes();
+        };
+        if (!restoreState()) {
+          autoOpenNodes();
         }
-        this.refreshElements(node);
-        return this.element;
+      }
+      triggerEvent(eventName, values) {
+        const event = jQuery.Event(eventName, values);
+        this.element.trigger(event);
+        return event;
       }
     }
     SimpleWidget.register(JqTreeWidget, "tree");