jqtree 1.8.0 → 1.8.2

package/tree.jquery.debug.js

@@ -1,7 +1,7 @@
 /*
-JqTree 1.8.0
+JqTree 1.8.2
 
-Copyright 2023 Marco Braak
+Copyright 2024 Marco Braak
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,9 +20,7 @@ limitations under the License.
 var jqtree = (function (exports) {
     'use strict';
 
-    const version = "1.8.0";
-
-    const isNodeRecordWithChildren = data => typeof data === "object" && "children" in data && data["children"] instanceof Array;
+    const version = "1.8.2";
 
     let Position = /*#__PURE__*/function (Position) {
       Position[Position["Before"] = 1] = "Before";
@@ -48,2360 +46,2452 @@ var jqtree = (function (exports) {
       return "";
     };
     const getPosition = name => positionNames[name];
-    class Node {
-      constructor() {
-        let nodeData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-        let isRoot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-        let nodeClass = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Node;
-        this.name = "";
-        this.load_on_demand = false;
-        this.isEmptyFolder = nodeData != null && isNodeRecordWithChildren(nodeData) && nodeData.children.length === 0;
-        this.setData(nodeData);
-        this.children = [];
-        this.parent = null;
-        if (isRoot) {
-          this.idMapping = new Map();
-          this.tree = this;
-          this.nodeClass = nodeClass;
+
+    class DragElement {
+      constructor(_ref) {
+        let {
+          autoEscape,
+          nodeName,
+          offsetX,
+          offsetY,
+          treeElement
+        } = _ref;
+        this.offsetX = offsetX;
+        this.offsetY = offsetY;
+        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");
+        if (autoEscape) {
+          element.textContent = nodeName;
+        } else {
+          element.innerHTML = nodeName;
         }
+        element.style.position = "absolute";
+        return element;
       }
+    }
 
-      /*
-      Set the data of this node.
-       setData(string): set the name of the node
-      setData(object): set attributes of the node
-       Examples:
-          setData('node1')
-           setData({ name: 'node1', id: 1});
-           setData({ name: 'node2', id: 2, color: 'green'});
-       * This is an internal function; it is not in the docs
-      * Does not remove existing node values
-      */
-      setData(o) {
-        if (!o) {
-          return;
-        } else if (typeof o === "string") {
-          this.name = o;
-        } else if (typeof o === "object") {
-          for (const key in o) {
-            if (Object.prototype.hasOwnProperty.call(o, key)) {
-              const value = o[key];
-              if (key === "label" || key === "name") {
-                // You can use the 'label' key instead of 'name'; this is a legacy feature
-                if (typeof value === "string") {
-                  this.name = value;
+    const isInt = n => typeof n === "number" && n % 1 === 0;
+    const isFunction = v => typeof v === "function";
+    const getBoolString = value => value ? "true" : "false";
+    const getOffsetTop = element => getElementPosition(element).top;
+    const getElementPosition = element => {
+      const rect = element.getBoundingClientRect();
+      return {
+        left: rect.x + window.scrollX,
+        top: rect.y + window.scrollY
+      };
+    };
+
+    const iterateVisibleNodes = (tree, _ref) => {
+      let {
+        handleAfterOpenFolder,
+        handleClosedFolder,
+        handleFirstNode,
+        handleNode,
+        handleOpenFolder
+      } = _ref;
+      let isFirstNode = true;
+      const iterate = (node, nextNode) => {
+        let mustIterateInside = (node.is_open || !node.element) && node.hasChildren();
+        let element = null;
+
+        // Is the element visible?
+        if (node.element?.offsetParent) {
+          element = node.element;
+          if (isFirstNode) {
+            handleFirstNode(node);
+            isFirstNode = false;
+          }
+          if (!node.hasChildren()) {
+            handleNode(node, nextNode, node.element);
+          } else if (node.is_open) {
+            if (!handleOpenFolder(node, node.element)) {
+              mustIterateInside = false;
+            }
+          } else {
+            handleClosedFolder(node, nextNode, element);
+          }
+        }
+        if (mustIterateInside) {
+          const childrenLength = node.children.length;
+          node.children.forEach((_, i) => {
+            const child = node.children[i];
+            if (child) {
+              if (i === childrenLength - 1) {
+                iterate(child, null);
+              } else {
+                const nextChild = node.children[i + 1];
+                if (nextChild) {
+                  iterate(child, nextChild);
                 }
-              } else if (key !== "children" && key !== "parent") {
-                // You can't update the children or the parent using this function
-                this[key] = value;
               }
             }
+          });
+          if (node.is_open && element) {
+            handleAfterOpenFolder(node, nextNode);
           }
         }
-      }
+      };
+      iterate(tree, null);
+    };
 
-      /*
-      Create tree from data.
-       Structure of data is:
-      [
-          {
-              name: 'node1',
-              children: [
-                  { name: 'child1' },
-                  { name: 'child2' }
-              ]
-          },
-          {
-              name: 'node2'
-          }
-      ]
-      */
-      loadFromData(data) {
-        this.removeChildren();
-        for (const childData of data) {
-          const node = this.createNode(childData);
-          this.addChild(node);
-          if (isNodeRecordWithChildren(childData)) {
-            node.loadFromData(childData.children);
+    const generatePositions = (tree, currentNode) => {
+      const positions = [];
+      let lastTop = 0;
+      const addPosition = (node, position, top) => {
+        const area = {
+          top,
+          bottom: 0,
+          node,
+          position
+        };
+        positions.push(area);
+        lastTop = top;
+      };
+      const handleAfterOpenFolder = (node, nextNode) => {
+        if (node === currentNode || nextNode === currentNode) {
+          // Cannot move before or after current item
+          addPosition(node, Position.None, lastTop);
+        } else {
+          addPosition(node, Position.After, lastTop);
+        }
+      };
+      const handleClosedFolder = (node, nextNode, element) => {
+        const top = getOffsetTop(element);
+        if (node === currentNode) {
+          // Cannot move after current item
+          addPosition(node, Position.None, top);
+        } else {
+          addPosition(node, Position.Inside, top);
+
+          // Cannot move before current item
+          if (nextNode !== currentNode) {
+            addPosition(node, Position.After, top);
           }
         }
-        return this;
-      }
+      };
+      const handleFirstNode = node => {
+        if (node !== currentNode) {
+          addPosition(node, Position.Before, getOffsetTop(node.element));
+        }
+      };
+      const handleNode = (node, nextNode, element) => {
+        const top = getOffsetTop(element);
+        if (node === currentNode) {
+          // Cannot move inside current item
+          addPosition(node, Position.None, top);
+        } else {
+          addPosition(node, Position.Inside, top);
+        }
+        if (nextNode === currentNode || node === currentNode) {
+          // Cannot move before or after current item
+          addPosition(node, Position.None, top);
+        } else {
+          addPosition(node, Position.After, top);
+        }
+      };
+      const handleOpenFolder = (node, element) => {
+        if (node === currentNode) {
+          // Cannot move inside current item
 
-      /*
-      Add child.
-       tree.addChild(
-          new Node('child1')
-      );
-      */
-      addChild(node) {
-        this.children.push(node);
-        node.setParent(this);
-      }
+          // Dnd over the current element is not possible: add a position with type None for the top and the bottom.
+          const top = getOffsetTop(element);
+          const height = element.clientHeight;
+          addPosition(node, Position.None, top);
+          if (height > 5) {
+            // Subtract 5 pixels to allow more space for the next element.
+            addPosition(node, Position.None, top + height - 5);
+          }
 
-      /*
-      Add child at position. Index starts at 0.
-       tree.addChildAtPosition(
-          new Node('abc'),
-          1
-      );
-      */
-      addChildAtPosition(node, index) {
-        this.children.splice(index, 0, node);
-        node.setParent(this);
-      }
+          // Stop iterating
+          return false;
+        }
 
-      /*
-      Remove child. This also removes the children of the node.
-       tree.removeChild(tree.children[0]);
-      */
-      removeChild(node) {
-        // remove children from the index
-        node.removeChildren();
-        this.doRemoveChild(node);
-      }
+        // Cannot move before current item
+        if (node.children[0] !== currentNode) {
+          addPosition(node, Position.Inside, getOffsetTop(element));
+        }
 
-      /*
-      Get child index.
-       var index = getChildIndex(node);
-      */
-      getChildIndex(node) {
-        return this.children.indexOf(node);
+        // Continue iterating
+        return true;
+      };
+      iterateVisibleNodes(tree, {
+        handleAfterOpenFolder,
+        handleClosedFolder,
+        handleFirstNode,
+        handleNode,
+        handleOpenFolder
+      });
+      return positions;
+    };
+    const generateHitAreasForGroup = (hitAreas, positionsInGroup, top, bottom) => {
+      // limit positions in group
+      const positionCount = Math.min(positionsInGroup.length, 4);
+      const areaHeight = Math.round((bottom - top) / positionCount);
+      let areaTop = top;
+      let i = 0;
+      while (i < positionCount) {
+        const position = positionsInGroup[i];
+        if (position && position.position !== Position.None) {
+          hitAreas.push({
+            top: areaTop,
+            bottom: areaTop + areaHeight,
+            node: position.node,
+            position: position.position
+          });
+        }
+        areaTop += areaHeight;
+        i += 1;
       }
+    };
+    const generateHitAreasFromPositions = (positions, treeBottom) => {
+      let previousTop = positions[0]?.top ?? 0;
+      let group = [];
+      const hitAreas = [];
+      for (const position of positions) {
+        if (position.top !== previousTop && group.length) {
+          generateHitAreasForGroup(hitAreas, group, previousTop, position.top);
+          previousTop = position.top;
+          group = [];
+        }
+        group.push(position);
+      }
+      generateHitAreasForGroup(hitAreas, group, previousTop, treeBottom);
+      return hitAreas;
+    };
+    const generateHitAreas = (tree, currentNode, treeBottom) => {
+      const positions = generatePositions(tree, currentNode);
+      return generateHitAreasFromPositions(positions, treeBottom);
+    };
 
-      /*
-      Does the tree have children?
-       if (tree.hasChildren()) {
-          //
+    class DragAndDropHandler {
+      constructor(_ref) {
+        let {
+          autoEscape,
+          getNodeElement,
+          getNodeElementForNode,
+          getScrollLeft,
+          getTree,
+          onCanMove,
+          onCanMoveTo,
+          onDragMove,
+          onDragStop,
+          onIsMoveHandle,
+          openNode,
+          refreshElements,
+          slide,
+          treeElement,
+          triggerEvent
+        } = _ref;
+        this.autoEscape = autoEscape;
+        this.getNodeElement = getNodeElement;
+        this.getNodeElementForNode = getNodeElementForNode;
+        this.getScrollLeft = getScrollLeft;
+        this.getTree = getTree;
+        this.onCanMove = onCanMove;
+        this.onCanMoveTo = onCanMoveTo;
+        this.onDragMove = onDragMove;
+        this.onDragStop = onDragStop;
+        this.onIsMoveHandle = onIsMoveHandle;
+        this.openNode = openNode;
+        this.refreshElements = refreshElements;
+        this.slide = slide;
+        this.treeElement = treeElement;
+        this.triggerEvent = triggerEvent;
+        this.hoveredArea = null;
+        this.hitAreas = [];
+        this.isDragging = false;
+        this.currentItem = null;
       }
-      */
-      hasChildren() {
-        return this.children.length !== 0;
+      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;
       }
-      isFolder() {
-        return this.hasChildren() || this.load_on_demand;
+      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;
       }
-
-      /*
-      Iterate over all the nodes in the tree.
-       Calls callback with (node, level).
-       The callback must return true to continue the iteration on current node.
-       tree.iterate(
-          function(node, level) {
-             console.log(node.name);
-              // stop iteration after level 2
-             return (level <= 2);
+      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)) {
+          if (!area.node.isFolder()) {
+            this.stopOpenFolderTimer();
           }
-      );
-       */
-      iterate(callback) {
-        const _iterate = (node, level) => {
-          if (node.children) {
-            for (const child of node.children) {
-              const result = callback(child, level);
-              if (result && child.hasChildren()) {
-                _iterate(child, level + 1);
-              }
+          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();
           }
-        };
-        _iterate(this, 0);
-      }
-
-      /*
-      Move node relative to another node.
-       Argument position: Position.BEFORE, Position.AFTER or Position.Inside
-       // move node1 after node2
-      tree.moveNode(node1, node2, Position.AFTER);
-      */
-      moveNode(movedNode, targetNode, position) {
-        if (!movedNode.parent || movedNode.isParentOf(targetNode)) {
-          // - Node is parent of target node
-          // - Or, parent is empty
-          return false;
         } else {
-          movedNode.parent.doRemoveChild(movedNode);
-          switch (position) {
-            case Position.After:
-              {
-                if (targetNode.parent) {
-                  targetNode.parent.addChildAtPosition(movedNode, targetNode.parent.getChildIndex(targetNode) + 1);
-                  return true;
-                }
-                return false;
-              }
-            case Position.Before:
-              {
-                if (targetNode.parent) {
-                  targetNode.parent.addChildAtPosition(movedNode, targetNode.parent.getChildIndex(targetNode));
-                  return true;
-                }
-                return false;
-              }
-            case Position.Inside:
-              {
-                // move inside as first child
-                targetNode.addChildAtPosition(movedNode, 0);
-                return true;
-              }
-            default:
-              return false;
+          this.removeDropHint();
+          this.stopOpenFolderTimer();
+          this.hoveredArea = area;
+        }
+        if (!area) {
+          if (this.onDragMove) {
+            this.onDragMove(this.currentItem.node, positionInfo.originalEvent);
           }
         }
+        return true;
       }
-
-      /*
-      Get the tree as data.
-      */
-      getData() {
-        let includeParent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-        const getDataFromNodes = nodes => {
-          return nodes.map(node => {
-            const tmpNode = {};
-            for (const k in node) {
-              if (["parent", "children", "element", "idMapping", "load_on_demand", "nodeClass", "tree", "isEmptyFolder"].indexOf(k) === -1 && Object.prototype.hasOwnProperty.call(node, k)) {
-                const v = node[k];
-                tmpNode[k] = v;
-              }
-            }
-            if (node.hasChildren()) {
-              tmpNode["children"] = getDataFromNodes(node.children);
-            }
-            return tmpNode;
-          });
-        };
-        if (includeParent) {
-          return getDataFromNodes([this]);
-        } else {
-          return getDataFromNodes(this.children);
+      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;
         }
-      }
-      getNodeByName(name) {
-        return this.getNodeByCallback(node => node.name === name);
-      }
-      getNodeByNameMustExist(name) {
-        const node = this.getNodeByCallback(n => n.name === name);
-        if (!node) {
-          throw `Node with name ${name} not found`;
+        this.isDragging = false;
+        if (!this.hoveredArea && currentItem) {
+          if (this.onDragStop) {
+            this.onDragStop(currentItem.node, positionInfo.originalEvent);
+          }
         }
-        return node;
+        return false;
       }
-      getNodeByCallback(callback) {
-        let result = null;
-        this.iterate(node => {
-          if (result) {
-            return false;
-          } else if (callback(node)) {
-            result = node;
-            return false;
-          } else {
-            return true;
+      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");
           }
-        });
-        return result;
-      }
-      addAfter(nodeInfo) {
-        if (!this.parent) {
-          return null;
-        } else {
-          const node = this.createNode(nodeInfo);
-          const childIndex = this.parent.getChildIndex(this);
-          this.parent.addChildAtPosition(node, childIndex + 1);
-          node.loadChildrenFromData(nodeInfo);
-          return node;
         }
       }
-      addBefore(nodeInfo) {
-        if (!this.parent) {
-          return null;
+      generateHitAreas() {
+        const tree = this.getTree();
+        if (!this.currentItem || !tree) {
+          this.hitAreas = [];
         } else {
-          const node = this.createNode(nodeInfo);
-          const childIndex = this.parent.getChildIndex(this);
-          this.parent.addChildAtPosition(node, childIndex);
-          node.loadChildrenFromData(nodeInfo);
-          return node;
+          this.hitAreas = generateHitAreas(tree, this.currentItem.node, this.getTreeDimensions().bottom);
         }
       }
-      addParent(nodeInfo) {
-        if (!this.parent) {
-          return null;
-        } else {
-          const newParent = this.createNode(nodeInfo);
-          if (this.tree) {
-            newParent.setParent(this.tree);
-          }
-          const originalParent = this.parent;
-          for (const child of originalParent.children) {
-            newParent.addChild(child);
-          }
-          originalParent.children = [];
-          originalParent.addChild(newParent);
-          return newParent;
-        }
+      mustCaptureElement(element) {
+        const nodeName = element.nodeName;
+        return nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA";
       }
-      remove() {
-        if (this.parent) {
-          this.parent.removeChild(this);
-          this.parent = null;
+      canMoveToArea(area) {
+        if (!this.onCanMoveTo) {
+          return true;
         }
+        if (!this.currentItem) {
+          return false;
+        }
+        const positionName = getPositionName(area.position);
+        return this.onCanMoveTo(this.currentItem.node, area.node, positionName);
       }
-      append(nodeInfo) {
-        const node = this.createNode(nodeInfo);
-        this.addChild(node);
-        node.loadChildrenFromData(nodeInfo);
-        return node;
-      }
-      prepend(nodeInfo) {
-        const node = this.createNode(nodeInfo);
-        this.addChildAtPosition(node, 0);
-        node.loadChildrenFromData(nodeInfo);
-        return node;
+      removeHitAreas() {
+        this.hitAreas = [];
       }
-      isParentOf(node) {
-        let parent = node.parent;
-        while (parent) {
-          if (parent === this) {
-            return true;
-          }
-          parent = parent.parent;
+      clear() {
+        if (this.dragElement) {
+          this.dragElement.remove();
+          this.dragElement = null;
         }
-        return false;
       }
-      getLevel() {
-        let level = 0;
-        let node = this; // eslint-disable-line @typescript-eslint/no-this-alias
-
-        while (node.parent) {
-          level += 1;
-          node = node.parent;
+      removeDropHint() {
+        if (this.previousGhost) {
+          this.previousGhost.remove();
         }
-        return level;
-      }
-      getNodeById(nodeId) {
-        return this.idMapping.get(nodeId) || null;
       }
-      addNodeToIndex(node) {
-        if (node.id != null) {
-          this.idMapping.set(node.id, node);
-        }
+      removeHover() {
+        this.hoveredArea = null;
       }
-      removeNodeFromIndex(node) {
-        if (node.id != null) {
-          this.idMapping.delete(node.id);
+      findHoveredArea(x, y) {
+        const dimensions = this.getTreeDimensions();
+        if (x < dimensions.left || y < dimensions.top || x > dimensions.right || y > dimensions.bottom) {
+          return null;
         }
-      }
-      removeChildren() {
-        this.iterate(child => {
-          this.tree?.removeNodeFromIndex(child);
-          return true;
-        });
-        this.children = [];
-      }
-      getPreviousSibling() {
-        if (!this.parent) {
-          return null;
-        } else {
-          const previousIndex = this.parent.getChildIndex(this) - 1;
-          if (previousIndex >= 0) {
-            return this.parent.children[previousIndex] || null;
-          } else {
+        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;
           }
-        }
-      }
-      getNextSibling() {
-        if (!this.parent) {
-          return null;
-        } else {
-          const nextIndex = this.parent.getChildIndex(this) + 1;
-          if (nextIndex < this.parent.children.length) {
-            return this.parent.children[nextIndex] || null;
+          if (y < area.top) {
+            high = mid;
+          } else if (y > area.bottom) {
+            low = mid + 1;
           } else {
-            return null;
+            return area;
           }
         }
+        return null;
       }
-      getNodesByProperty(key, value) {
-        return this.filter(node => node[key] === value);
+      mustOpenFolderTimer(area) {
+        const node = area.node;
+        return node.isFolder() && !node.is_open && area.position === Position.Inside;
       }
-      filter(f) {
-        const result = [];
-        this.iterate(node => {
-          if (f(node)) {
-            result.push(node);
-          }
-          return true;
-        });
-        return result;
+      updateDropHint() {
+        if (!this.hoveredArea) {
+          return;
+        }
+
+        // remove previous drop hint
+        this.removeDropHint();
+
+        // add new drop hint
+        const nodeElement = this.getNodeElementForNode(this.hoveredArea.node);
+        this.previousGhost = nodeElement.addDropHint(this.hoveredArea.position);
       }
-      getNextNode() {
-        let includeChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-        if (includeChildren && this.hasChildren()) {
-          return this.children[0] || null;
-        } else if (!this.parent) {
-          return null;
-        } else {
-          const nextSibling = this.getNextSibling();
-          if (nextSibling) {
-            return nextSibling;
-          } else {
-            return this.parent.getNextNode(false);
-          }
+      startOpenFolderTimer(folder) {
+        const openFolder = () => {
+          this.openNode(folder, this.slide, () => {
+            this.refresh();
+            this.updateDropHint();
+          });
+        };
+        this.stopOpenFolderTimer();
+        const openFolderDelay = this.openFolderDelay;
+        if (openFolderDelay !== false) {
+          this.openFolderTimer = window.setTimeout(openFolder, openFolderDelay);
         }
       }
-      getNextVisibleNode() {
-        if (this.hasChildren() && this.is_open) {
-          // First child
-          return this.children[0] || null;
-        } else {
-          if (!this.parent) {
-            return null;
-          } else {
-            const nextSibling = this.getNextSibling();
-            if (nextSibling) {
-              // Next sibling
-              return nextSibling;
-            } else {
-              // Next node of parent
-              return this.parent.getNextNode(false);
+      stopOpenFolderTimer() {
+        if (this.openFolderTimer) {
+          clearTimeout(this.openFolderTimer);
+          this.openFolderTimer = null;
+        }
+      }
+      moveItem(positionInfo) {
+        if (this.currentItem && this.hoveredArea && this.hoveredArea.position !== Position.None && this.canMoveToArea(this.hoveredArea)) {
+          const movedNode = this.currentItem.node;
+          const targetNode = this.hoveredArea.node;
+          const position = this.hoveredArea.position;
+          const previousParent = movedNode.parent;
+          if (position === Position.Inside) {
+            this.hoveredArea.node.is_open = true;
+          }
+          const doMove = () => {
+            const tree = this.getTree();
+            if (tree) {
+              tree.moveNode(movedNode, targetNode, position);
+              this.treeElement.textContent = "";
+              this.refreshElements(null);
+            }
+          };
+          const event = this.triggerEvent("tree.move", {
+            move_info: {
+              moved_node: movedNode,
+              target_node: targetNode,
+              position: getPositionName(position),
+              previous_parent: previousParent,
+              do_move: doMove,
+              original_event: positionInfo.originalEvent
             }
+          });
+          if (!event.isDefaultPrevented()) {
+            doMove();
           }
         }
       }
-      getPreviousNode() {
-        if (!this.parent) {
-          return null;
+      getTreeDimensions() {
+        // Return the dimensions of the tree. Add a margin to the bottom to allow
+        // to drag-and-drop after the last element.
+        const treePosition = getElementPosition(this.treeElement);
+        const left = treePosition.left + this.getScrollLeft();
+        const top = treePosition.top;
+        return {
+          left,
+          top,
+          right: left + this.treeElement.clientWidth,
+          bottom: top + this.treeElement.clientHeight + 16
+        };
+      }
+    }
+
+    class ElementsRenderer {
+      constructor(_ref) {
+        let {
+          autoEscape,
+          buttonLeft,
+          closedIcon,
+          onCreateLi,
+          dragAndDrop,
+          $element,
+          getTree,
+          isNodeSelected,
+          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 && fromNode.parent) {
+          this.renderFromNode(fromNode);
         } else {
-          const previousSibling = this.getPreviousSibling();
-          if (!previousSibling) {
-            return this.getParent();
-          } else if (previousSibling.hasChildren()) {
-            return previousSibling.getLastChild();
-          } else {
-            return previousSibling;
-          }
+          this.renderFromRoot();
         }
       }
-      getPreviousVisibleNode() {
-        if (!this.parent) {
-          return null;
-        } else {
-          const previousSibling = this.getPreviousSibling();
-          if (!previousSibling) {
-            return this.getParent();
-          } else if (!previousSibling.hasChildren() || !previousSibling.is_open) {
-            // Previous sibling
-            return previousSibling;
-          } else {
-            // Last child of previous sibling
-            return previousSibling.getLastChild();
-          }
+      renderFromRoot() {
+        this.$element.empty();
+        const tree = this.getTree();
+        if (this.$element[0] && tree) {
+          this.createDomElements(this.$element[0], tree.children, true, 1);
         }
       }
-      getParent() {
-        // Return parent except if it is the root node
-        if (!this.parent) {
-          return null;
-        } else if (!this.parent.parent) {
-          // Root node -> null
-          return null;
-        } else {
-          return this.parent;
+      renderFromNode(node) {
+        // remember current li
+        const $previousLi = jQuery(node.element);
+
+        // create element
+        const li = this.createLi(node, node.getLevel());
+        this.attachNodeData(node, li);
+
+        // add element to dom
+        $previousLi.after(li);
+
+        // remove previous li
+        $previousLi.remove();
+
+        // create children
+        if (node.children) {
+          this.createDomElements(li, node.children, false, node.getLevel() + 1);
         }
       }
-      getLastChild() {
-        if (!this.hasChildren()) {
-          return null;
-        } else {
-          const lastChild = this.children[this.children.length - 1];
-          if (!lastChild) {
-            return null;
-          }
-          if (!(lastChild.hasChildren() && lastChild.is_open)) {
-            return lastChild;
-          } else {
-            return lastChild?.getLastChild();
+      createDomElements(element, children, isRootNode, level) {
+        const ul = this.createUl(isRootNode);
+        element.appendChild(ul);
+        for (const child of children) {
+          const li = this.createLi(child, level);
+          ul.appendChild(li);
+          this.attachNodeData(child, li);
+          if (child.hasChildren()) {
+            this.createDomElements(li, child.children, false, level + 1);
           }
         }
       }
-
-      // Init Node from data without making it the root of the tree
-      initFromData(data) {
-        const addNode = nodeData => {
-          this.setData(nodeData);
-          if (isNodeRecordWithChildren(nodeData) && nodeData.children.length) {
-            addChildren(nodeData.children);
-          }
-        };
-        const addChildren = childrenData => {
-          for (const child of childrenData) {
-            const node = this.createNode();
-            node.initFromData(child);
-            this.addChild(node);
-          }
-        };
-        addNode(data);
-      }
-      setParent(parent) {
-        this.parent = parent;
-        this.tree = parent.tree;
-        this.tree?.addNodeToIndex(this);
-      }
-      doRemoveChild(node) {
-        this.children.splice(this.getChildIndex(node), 1);
-        this.tree?.removeNodeFromIndex(node);
-      }
-      getNodeClass() {
-        return this.nodeClass || this?.tree?.nodeClass || Node;
-      }
-      createNode(nodeData) {
-        const nodeClass = this.getNodeClass();
-        return new nodeClass(nodeData);
-      }
-
-      // Load children data from nodeInfo if it has children
-      loadChildrenFromData(nodeInfo) {
-        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
-          this.loadFromData(nodeInfo.children);
-        }
+      attachNodeData(node, li) {
+        node.element = li;
+        jQuery(li).data("node", node);
       }
-    }
-
-    class DragElement {
-      constructor(nodeName, offsetX, offsetY, $tree, autoEscape) {
-        this.offsetX = offsetX;
-        this.offsetY = offsetY;
-        this.$element = jQuery("<span>").addClass("jqtree-title jqtree-dragging");
-        if (autoEscape) {
-          this.$element.text(nodeName);
+      createUl(isRootNode) {
+        let classString;
+        let role;
+        if (!isRootNode) {
+          classString = "";
+          role = "group";
         } else {
-          this.$element.html(nodeName);
+          classString = "jqtree-tree";
+          role = "tree";
+          if (this.rtl) {
+            classString += " jqtree-rtl";
+          }
+        }
+        if (this.dragAndDrop) {
+          classString += " jqtree-dnd";
         }
-        this.$element.css("position", "absolute");
-        $tree.append(this.$element);
+        const ul = document.createElement("ul");
+        ul.className = `jqtree_common ${classString}`;
+        ul.setAttribute("role", role);
+        return ul;
       }
-      move(pageX, pageY) {
-        this.$element.offset({
-          left: pageX - this.offsetX,
-          top: pageY - this.offsetY
-        });
+      createLi(node, level) {
+        const isSelected = Boolean(this.isNodeSelected(node));
+        const mustShowFolder = node.isFolder() || node.isEmptyFolder && this.showEmptyFolder;
+        const li = mustShowFolder ? this.createFolderLi(node, level, isSelected) : this.createNodeLi(node, level, isSelected);
+        if (this.onCreateLi) {
+          this.onCreateLi(node, jQuery(li), isSelected);
+        }
+        return li;
       }
-      remove() {
-        this.$element.remove();
+      setTreeItemAriaAttributes(element, name, level, isSelected) {
+        element.setAttribute("aria-label", name);
+        element.setAttribute("aria-level", `${level}`);
+        element.setAttribute("aria-selected", getBoolString(isSelected));
+        element.setAttribute("role", "treeitem");
       }
-    }
+      createFolderLi(node, level, isSelected) {
+        const buttonClasses = this.getButtonClasses(node);
+        const folderClasses = this.getFolderClasses(node, isSelected);
+        const iconElement = node.is_open ? this.openedIconElement : this.closedIconElement;
 
-    const isInt = n => typeof n === "number" && n % 1 === 0;
-    const isFunction = v => typeof v === "function";
-    const getBoolString = value => value ? "true" : "false";
-    const getOffsetTop = element => element.getBoundingClientRect().y + window.scrollY;
-
-    class VisibleNodeIterator {
-      constructor(tree) {
-        this.tree = tree;
-      }
-      iterate() {
-        let isFirstNode = true;
-        const _iterateNode = (node, nextNode) => {
-          let mustIterateInside = (node.is_open || !node.element) && node.hasChildren();
-          let element = null;
-
-          // Is the element visible?
-          if (node.element?.offsetParent) {
-            element = node.element;
-            if (isFirstNode) {
-              this.handleFirstNode(node);
-              isFirstNode = false;
-            }
-            if (!node.hasChildren()) {
-              this.handleNode(node, nextNode, node.element);
-            } else if (node.is_open) {
-              if (!this.handleOpenFolder(node, node.element)) {
-                mustIterateInside = false;
-              }
-            } else {
-              this.handleClosedFolder(node, nextNode, element);
-            }
-          }
-          if (mustIterateInside) {
-            const childrenLength = node.children.length;
-            node.children.forEach((_, i) => {
-              const child = node.children[i];
-              if (child) {
-                if (i === childrenLength - 1) {
-                  _iterateNode(child, null);
-                } else {
-                  const nextChild = node.children[i + 1];
-                  if (nextChild) {
-                    _iterateNode(child, nextChild);
-                  }
-                }
-              }
-            });
-            if (node.is_open && element) {
-              this.handleAfterOpenFolder(node, nextNode);
-            }
-          }
-        };
-        _iterateNode(this.tree, null);
-      }
+        // li
+        const li = document.createElement("li");
+        li.className = `jqtree_common ${folderClasses}`;
+        li.setAttribute("role", "none");
 
-      /*
-      override
-      return
-          - true: continue iterating
-          - false: stop iterating
-      */
-    }
+        // div
+        const div = document.createElement("div");
+        div.className = "jqtree-element jqtree_common";
+        div.setAttribute("role", "none");
+        li.appendChild(div);
 
-    class HitAreasGenerator extends VisibleNodeIterator {
-      constructor(tree, currentNode, treeBottom) {
-        super(tree);
-        this.currentNode = currentNode;
-        this.treeBottom = treeBottom;
-      }
-      generate() {
-        this.positions = [];
-        this.lastTop = 0;
-        this.iterate();
-        return this.generateHitAreas(this.positions);
-      }
-      generateHitAreas(positions) {
-        let previousTop = positions[0]?.top ?? 0;
-        let group = [];
-        const hitAreas = [];
-        for (const position of positions) {
-          if (position.top !== previousTop && group.length) {
-            this.generateHitAreasForGroup(hitAreas, group, previousTop, position.top);
-            previousTop = position.top;
-            group = [];
-          }
-          group.push(position);
-        }
-        this.generateHitAreasForGroup(hitAreas, group, previousTop, this.treeBottom);
-        return hitAreas;
-      }
-      handleOpenFolder(node, element) {
-        if (node === this.currentNode) {
-          // Cannot move inside current item
-          // Stop iterating
-          return false;
+        // button link
+        const buttonLink = document.createElement("a");
+        buttonLink.className = buttonClasses;
+        if (iconElement) {
+          buttonLink.appendChild(iconElement.cloneNode(true));
         }
-
-        // Cannot move before current item
-        if (node.children[0] !== this.currentNode) {
-          this.addPosition(node, Position.Inside, getOffsetTop(element));
+        if (this.buttonLeft) {
+          div.appendChild(buttonLink);
         }
 
-        // Continue iterating
-        return true;
+        // title span
+        const titleSpan = this.createTitleSpan(node.name, isSelected, true, level);
+        titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
+        div.appendChild(titleSpan);
+        if (!this.buttonLeft) {
+          div.appendChild(buttonLink);
+        }
+        return li;
       }
-      handleClosedFolder(node, nextNode, element) {
-        const top = getOffsetTop(element);
-        if (node === this.currentNode) {
-          // Cannot move after current item
-          this.addPosition(node, Position.None, top);
-        } else {
-          this.addPosition(node, Position.Inside, top);
+      createNodeLi(node, level, isSelected) {
+        const liClasses = ["jqtree_common"];
+        if (isSelected) {
+          liClasses.push("jqtree-selected");
+        }
+        const classString = liClasses.join(" ");
 
-          // Cannot move before current item
-          if (nextNode !== this.currentNode) {
-            this.addPosition(node, Position.After, top);
+        // li
+        const li = document.createElement("li");
+        li.className = classString;
+        li.setAttribute("role", "none");
+
+        // div
+        const div = document.createElement("div");
+        div.className = "jqtree-element jqtree_common";
+        div.setAttribute("role", "none");
+        li.appendChild(div);
+
+        // title span
+        const titleSpan = this.createTitleSpan(node.name, isSelected, false, level);
+        div.appendChild(titleSpan);
+        return li;
+      }
+      createTitleSpan(nodeName, isSelected, isFolder, level) {
+        const titleSpan = document.createElement("span");
+        let classes = "jqtree-title jqtree_common";
+        if (isFolder) {
+          classes += " jqtree-title-folder";
+        }
+        classes += ` jqtree-title-button-${this.buttonLeft ? "left" : "right"}`;
+        titleSpan.className = classes;
+        if (isSelected) {
+          const tabIndex = this.tabIndex;
+          if (tabIndex !== undefined) {
+            titleSpan.setAttribute("tabindex", `${tabIndex}`);
           }
         }
-      }
-      handleFirstNode(node) {
-        if (node !== this.currentNode) {
-          this.addPosition(node, Position.Before, getOffsetTop(node.element));
+        this.setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
+        if (this.autoEscape) {
+          titleSpan.textContent = nodeName;
+        } else {
+          titleSpan.innerHTML = nodeName;
         }
+        return titleSpan;
       }
-      handleAfterOpenFolder(node, nextNode) {
-        if (node === this.currentNode || nextNode === this.currentNode) {
-          // Cannot move before or after current item
-          this.addPosition(node, Position.None, this.lastTop);
+      getButtonClasses(node) {
+        const classes = ["jqtree-toggler", "jqtree_common"];
+        if (!node.is_open) {
+          classes.push("jqtree-closed");
+        }
+        if (this.buttonLeft) {
+          classes.push("jqtree-toggler-left");
         } else {
-          this.addPosition(node, Position.After, this.lastTop);
+          classes.push("jqtree-toggler-right");
         }
+        return classes.join(" ");
       }
-      handleNode(node, nextNode, element) {
-        const top = getOffsetTop(element);
-        if (node === this.currentNode) {
-          // Cannot move inside current item
-          this.addPosition(node, Position.None, top);
-        } else {
-          this.addPosition(node, Position.Inside, top);
+      getFolderClasses(node, isSelected) {
+        const classes = ["jqtree-folder"];
+        if (!node.is_open) {
+          classes.push("jqtree-closed");
         }
-        if (nextNode === this.currentNode || node === this.currentNode) {
-          // Cannot move before or after current item
-          this.addPosition(node, Position.None, top);
-        } else {
-          this.addPosition(node, Position.After, top);
+        if (isSelected) {
+          classes.push("jqtree-selected");
+        }
+        if (node.is_loading) {
+          classes.push("jqtree-loading");
         }
+        return classes.join(" ");
       }
-      addPosition(node, position, top) {
-        const area = {
-          top,
-          bottom: 0,
-          node,
-          position
-        };
-        this.positions.push(area);
-        this.lastTop = top;
-      }
-      generateHitAreasForGroup(hitAreas, positionsInGroup, top, bottom) {
-        // limit positions in group
-        const positionCount = Math.min(positionsInGroup.length, 4);
-        const areaHeight = Math.round((bottom - top) / positionCount);
-        let areaTop = top;
-        let i = 0;
-        while (i < positionCount) {
-          const position = positionsInGroup[i];
-          if (position) {
-            hitAreas.push({
-              top: areaTop,
-              bottom: areaTop + areaHeight,
-              node: position.node,
-              position: position.position
-            });
-          }
-          areaTop += areaHeight;
-          i += 1;
+      createButtonElement(value) {
+        if (typeof value === "string") {
+          // convert value to html
+          const div = document.createElement("div");
+          div.innerHTML = value;
+          return document.createTextNode(div.innerHTML);
+        } else if (value == null) {
+          return undefined;
+        } else if (value.nodeType) {
+          return value;
+        } else {
+          return jQuery(value)[0];
         }
       }
     }
 
-    class DragAndDropHandler {
+    class DataLoader {
       constructor(_ref) {
         let {
-          autoEscape,
-          getNodeElement,
-          getNodeElementForNode,
-          getScrollLeft,
-          getTree,
-          onCanMove,
-          onCanMoveTo,
-          onDragMove,
-          onDragStop,
-          onIsMoveHandle,
-          openNode,
-          refreshElements,
-          slide,
-          $treeElement,
+          dataFilter,
+          loadData,
+          onLoadFailed,
+          onLoading,
+          treeElement,
           triggerEvent
         } = _ref;
-        this.autoEscape = autoEscape;
-        this.getNodeElement = getNodeElement;
-        this.getNodeElementForNode = getNodeElementForNode;
-        this.getScrollLeft = getScrollLeft;
-        this.getTree = getTree;
-        this.onCanMove = onCanMove;
-        this.onCanMoveTo = onCanMoveTo;
-        this.onDragMove = onDragMove;
-        this.onDragStop = onDragStop;
-        this.onIsMoveHandle = onIsMoveHandle;
-        this.openNode = openNode;
-        this.refreshElements = refreshElements;
-        this.slide = slide;
-        this.$treeElement = $treeElement;
+        this.dataFilter = dataFilter;
+        this.loadData = loadData;
+        this.onLoadFailed = onLoadFailed;
+        this.onLoading = onLoading;
+        this.treeElement = treeElement;
         this.triggerEvent = triggerEvent;
-        this.hoveredArea = null;
-        this.hitAreas = [];
-        this.isDragging = false;
-        this.currentItem = null;
       }
-      mouseCapture(positionInfo) {
-        const element = positionInfo.target;
-        if (!this.mustCaptureElement(element)) {
-          return null;
-        }
-        if (this.onIsMoveHandle && !this.onIsMoveHandle(jQuery(element))) {
-          return null;
+      loadFromUrl(urlInfo, parentNode, onFinished) {
+        if (!urlInfo) {
+          return;
         }
-        let nodeElement = this.getNodeElement(element);
-        if (nodeElement && this.onCanMove) {
-          if (!this.onCanMove(nodeElement.node)) {
-            nodeElement = null;
+        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();
           }
-        }
-        this.currentItem = nodeElement;
-        return this.currentItem != null;
+        };
+        const handleError = jqXHR => {
+          stopLoading();
+          if (this.onLoadFailed) {
+            this.onLoadFailed(jqXHR);
+          }
+        };
+        this.submitRequest(urlInfo, handleSuccess, handleError);
       }
-      mouseStart(positionInfo) {
-        if (!this.currentItem || positionInfo.pageX === undefined || positionInfo.pageY === undefined) {
-          return false;
+      addLoadingClass(element) {
+        element.classList.add("jqtree-loading");
+      }
+      removeLoadingClass(element) {
+        element.classList.remove("jqtree-loading");
+      }
+      getDomElement(parentNode) {
+        if (parentNode) {
+          return parentNode.element;
+        } else {
+          return this.treeElement;
         }
-        this.refresh();
-        const offset = jQuery(positionInfo.target).offset();
-        const left = offset ? offset.left : 0;
-        const top = offset ? offset.top : 0;
-        const node = this.currentItem.node;
-        this.dragElement = new DragElement(node.name, positionInfo.pageX - left, positionInfo.pageY - top, this.$treeElement, this.autoEscape ?? true);
-        this.isDragging = true;
-        this.currentItem.element.classList.add("jqtree-moving");
-        return true;
       }
-      mouseDrag(positionInfo) {
-        if (!this.currentItem || !this.dragElement || positionInfo.pageX === undefined || positionInfo.pageY === undefined) {
-          return false;
+      notifyLoading(isLoading, node, element) {
+        const $el = jQuery(element);
+        if (this.onLoading) {
+          this.onLoading(isLoading, node, $el);
         }
-        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();
+        this.triggerEvent("tree.loading_data", {
+          isLoading,
+          node,
+          $el
+        });
+      }
+      submitRequest(urlInfoInput, handleSuccess, handleError) {
+        const urlInfo = typeof urlInfoInput === "string" ? {
+          url: urlInfoInput
+        } : urlInfoInput;
+        const ajaxSettings = {
+          method: "GET",
+          cache: false,
+          dataType: "json",
+          success: handleSuccess,
+          error: handleError,
+          ...urlInfo
+        };
+        ajaxSettings.method = ajaxSettings.method?.toUpperCase() || "GET";
+        void jQuery.ajax(ajaxSettings);
+      }
+      parseData(data) {
+        const getParsedData = () => {
+          if (typeof data === "string") {
+            return JSON.parse(data);
+          } else {
+            return data;
           }
+        };
+        const parsedData = getParsedData();
+        if (this.dataFilter) {
+          return this.dataFilter(parsedData);
         } else {
-          this.removeDropHint();
-          this.stopOpenFolderTimer();
-          this.hoveredArea = area;
-        }
-        if (!area) {
-          if (this.onDragMove) {
-            this.onDragMove(this.currentItem.node, positionInfo.originalEvent);
-          }
+          return parsedData;
         }
-        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;
+    }
+
+    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) {
+          this.handleKeyDownHandler = this.handleKeyDown.bind(this);
+          document.addEventListener("keydown", this.handleKeyDownHandler);
         }
-        this.isDragging = false;
-        if (!this.hoveredArea && currentItem) {
-          if (this.onDragStop) {
-            this.onDragStop(currentItem.node, positionInfo.originalEvent);
-          }
+      }
+      deinit() {
+        if (this.handleKeyDownHandler) {
+          document.removeEventListener("keydown", this.handleKeyDownHandler);
         }
-        return false;
       }
-      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");
+      moveDown(selectedNode) {
+        return this.selectNode(selectedNode.getNextVisibleNode());
+      }
+      moveUp(selectedNode) {
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
+      }
+      moveRight(selectedNode) {
+        if (!selectedNode.isFolder()) {
+          return true;
+        } else {
+          // folder node
+          if (selectedNode.is_open) {
+            // Right moves to the first child of an open node
+            return this.selectNode(selectedNode.getNextVisibleNode());
+          } else {
+            // Right expands a closed node
+            this.openNode(selectedNode);
+            return false;
           }
         }
       }
-      generateHitAreas() {
-        const tree = this.getTree();
-        if (!this.currentItem || !tree) {
-          this.hitAreas = [];
+      moveLeft(selectedNode) {
+        if (selectedNode.isFolder() && selectedNode.is_open) {
+          // Left on an open node closes the node
+          this.closeNode(selectedNode);
+          return false;
         } else {
-          const hitAreasGenerator = new HitAreasGenerator(tree, this.currentItem.node, this.getTreeDimensions().bottom);
-          this.hitAreas = hitAreasGenerator.generate();
+          // Left on a closed or end node moves focus to the node's parent
+          return this.selectNode(selectedNode.getParent());
         }
       }
-      mustCaptureElement(element) {
-        const nodeName = element.nodeName;
-        return nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA";
-      }
-      canMoveToArea(area) {
-        if (!this.onCanMoveTo) {
+      selectNode(node) {
+        if (!node) {
           return true;
-        }
-        if (!this.currentItem) {
+        } else {
+          this.originalSelectNode(node);
           return false;
         }
-        const positionName = getPositionName(area.position);
-        return this.onCanMoveTo(this.currentItem.node, area.node, positionName);
-      }
-      removeHitAreas() {
-        this.hitAreas = [];
       }
-      clear() {
-        if (this.dragElement) {
-          this.dragElement.remove();
-          this.dragElement = null;
+      handleKeyDown = e => {
+        if (!this.canHandleKeyboard()) {
+          return true;
         }
-      }
-      removeDropHint() {
-        if (this.previousGhost) {
-          this.previousGhost.remove();
+        const selectedNode = this.getSelectedNode();
+        if (!selectedNode) {
+          return true;
         }
-      }
-      removeHover() {
-        this.hoveredArea = null;
-      }
-      findHoveredArea(x, y) {
-        const dimensions = this.getTreeDimensions();
-        if (x < dimensions.left || y < dimensions.top || x > dimensions.right || y > dimensions.bottom) {
-          return null;
+        switch (e.key) {
+          case "ArrowDown":
+            return this.moveDown(selectedNode);
+          case "ArrowUp":
+            return this.moveUp(selectedNode);
+          case "ArrowRight":
+            return this.moveRight(selectedNode);
+          case "ArrowLeft":
+            return this.moveLeft(selectedNode);
+          default:
+            return true;
         }
-        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;
-          }
-          if (y < area.top) {
-            high = mid;
-          } else if (y > area.bottom) {
-            low = mid + 1;
-          } else {
-            return area;
-          }
-        }
-        return null;
-      }
-      mustOpenFolderTimer(area) {
-        const node = area.node;
-        return node.isFolder() && !node.is_open && area.position === Position.Inside;
+      };
+      canHandleKeyboard() {
+        return this.keyboardSupport && this.isFocusOnTree();
       }
-      updateDropHint() {
-        if (!this.hoveredArea) {
-          return;
-        }
+    }
 
-        // remove previous drop hint
-        this.removeDropHint();
+    const getPositionInfoFromMouseEvent = e => ({
+      originalEvent: e,
+      pageX: e.pageX,
+      pageY: e.pageY,
+      target: e.target
+    });
+    const getPositionInfoFromTouch = (touch, e) => ({
+      originalEvent: e,
+      pageX: touch.pageX,
+      pageY: touch.pageY,
+      target: touch.target
+    });
 
-        // add new drop hint
-        const nodeElement = this.getNodeElementForNode(this.hoveredArea.node);
-        this.previousGhost = nodeElement.addDropHint(this.hoveredArea.position);
-      }
-      startOpenFolderTimer(folder) {
-        const openFolder = () => {
-          this.openNode(folder, this.slide, () => {
-            this.refresh();
-            this.updateDropHint();
-          });
-        };
-        this.stopOpenFolderTimer();
-        const openFolderDelay = this.openFolderDelay;
-        if (openFolderDelay !== false) {
-          this.openFolderTimer = window.setTimeout(openFolder, openFolderDelay);
+    class MouseHandler {
+      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;
       }
-      stopOpenFolderTimer() {
-        if (this.openFolderTimer) {
-          clearTimeout(this.openFolderTimer);
-          this.openFolderTimer = null;
+      deinit() {
+        this.element.removeEventListener("click", this.handleClick);
+        this.element.removeEventListener("dblclick", this.handleDblclick);
+        if (this.useContextMenu) {
+          this.element.removeEventListener("contextmenu", this.handleContextmenu);
         }
+        this.element.removeEventListener("mousedown", this.mouseDown);
+        this.element.removeEventListener("touchstart", this.touchStart);
+        this.removeMouseMoveEventListeners();
       }
-      moveItem(positionInfo) {
-        if (this.currentItem && this.hoveredArea && this.hoveredArea.position !== Position.None && this.canMoveToArea(this.hoveredArea)) {
-          const movedNode = this.currentItem.node;
-          const targetNode = this.hoveredArea.node;
-          const position = this.hoveredArea.position;
-          const previousParent = movedNode.parent;
-          if (position === Position.Inside) {
-            this.hoveredArea.node.is_open = true;
-          }
-          const doMove = () => {
-            const tree = this.getTree();
-            if (tree) {
-              tree.moveNode(movedNode, targetNode, position);
-              this.$treeElement.empty();
-              this.refreshElements(null);
-            }
-          };
-          const event = this.triggerEvent("tree.move", {
-            move_info: {
-              moved_node: movedNode,
-              target_node: targetNode,
-              position: getPositionName(position),
-              previous_parent: previousParent,
-              do_move: doMove,
-              original_event: positionInfo.originalEvent
-            }
-          });
-          if (!event.isDefaultPrevented()) {
-            doMove();
-          }
+      mouseDown = e => {
+        // Left mouse button?
+        if (e.button !== 0) {
+          return;
         }
-      }
-      getTreeDimensions() {
-        // Return the dimensions of the tree. Add a margin to the bottom to allow
-        // to drag-and-drop after the last element.
-        const offset = this.$treeElement.offset();
-        if (!offset) {
-          return {
-            left: 0,
-            top: 0,
-            right: 0,
-            bottom: 0
-          };
-        } else {
-          const el = this.$treeElement;
-          const width = el.width() || 0;
-          const height = el.height() || 0;
-          const left = offset.left + this.getScrollLeft();
-          return {
-            left,
-            top: offset.top,
-            right: left + width,
-            bottom: offset.top + height + 16
-          };
+        const result = this.handleMouseDown(getPositionInfoFromMouseEvent(e));
+        if (result && e.cancelable) {
+          e.preventDefault();
         }
-      }
-    }
-
-    class ElementsRenderer {
-      constructor(_ref) {
-        let {
-          autoEscape,
-          buttonLeft,
-          closedIcon,
-          onCreateLi,
-          dragAndDrop,
-          $element,
-          getTree,
-          isNodeSelected,
-          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 && fromNode.parent) {
-          this.renderFromNode(fromNode);
-        } else {
-          this.renderFromRoot();
+      };
+      handleMouseDown(positionInfo) {
+        // We may have missed mouseup (out of window)
+        if (this.isMouseStarted) {
+          this.handleMouseUp(positionInfo);
         }
-      }
-      renderFromRoot() {
-        this.$element.empty();
-        const tree = this.getTree();
-        if (this.$element[0] && tree) {
-          this.createDomElements(this.$element[0], tree.children, true, 1);
+        this.mouseDownInfo = positionInfo;
+        if (!this.onMouseCapture(positionInfo)) {
+          return false;
         }
+        this.handleStartMouse();
+        return true;
       }
-      renderFromNode(node) {
-        // remember current li
-        const $previousLi = jQuery(node.element);
-
-        // create element
-        const li = this.createLi(node, node.getLevel());
-        this.attachNodeData(node, li);
-
-        // add element to dom
-        $previousLi.after(li);
-
-        // remove previous li
-        $previousLi.remove();
-
-        // create children
-        if (node.children) {
-          this.createDomElements(li, node.children, false, node.getLevel() + 1);
+      handleStartMouse() {
+        document.addEventListener("mousemove", this.mouseMove, {
+          passive: false
+        });
+        document.addEventListener("touchmove", this.touchMove, {
+          passive: false
+        });
+        document.addEventListener("mouseup", this.mouseUp, {
+          passive: false
+        });
+        document.addEventListener("touchend", this.touchEnd, {
+          passive: false
+        });
+        const mouseDelay = this.getMouseDelay();
+        if (mouseDelay) {
+          this.startMouseDelayTimer(mouseDelay);
+        } else {
+          this.isMouseDelayMet = true;
         }
       }
-      createDomElements(element, children, isRootNode, level) {
-        const ul = this.createUl(isRootNode);
-        element.appendChild(ul);
-        for (const child of children) {
-          const li = this.createLi(child, level);
-          ul.appendChild(li);
-          this.attachNodeData(child, li);
-          if (child.hasChildren()) {
-            this.createDomElements(li, child.children, false, level + 1);
-          }
+      startMouseDelayTimer(mouseDelay) {
+        if (this.mouseDelayTimer) {
+          clearTimeout(this.mouseDelayTimer);
         }
+        this.mouseDelayTimer = window.setTimeout(() => {
+          if (this.mouseDownInfo) {
+            this.isMouseDelayMet = true;
+          }
+        }, mouseDelay);
+        this.isMouseDelayMet = false;
       }
-      attachNodeData(node, li) {
-        node.element = li;
-        jQuery(li).data("node", node);
-      }
-      createUl(isRootNode) {
-        let classString;
-        let role;
-        if (!isRootNode) {
-          classString = "";
-          role = "group";
-        } else {
-          classString = "jqtree-tree";
-          role = "tree";
-          if (this.rtl) {
-            classString += " jqtree-rtl";
+      mouseMove = e => {
+        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
+      };
+      handleMouseMove(e, positionInfo) {
+        if (this.isMouseStarted) {
+          this.onMouseDrag(positionInfo);
+          if (e.cancelable) {
+            e.preventDefault();
           }
+          return;
         }
-        if (this.dragAndDrop) {
-          classString += " jqtree-dnd";
+        if (!this.isMouseDelayMet) {
+          return;
         }
-        const ul = document.createElement("ul");
-        ul.className = `jqtree_common ${classString}`;
-        ul.setAttribute("role", role);
-        return ul;
-      }
-      createLi(node, level) {
-        const isSelected = Boolean(this.isNodeSelected(node));
-        const mustShowFolder = node.isFolder() || node.isEmptyFolder && this.showEmptyFolder;
-        const li = mustShowFolder ? this.createFolderLi(node, level, isSelected) : this.createNodeLi(node, level, isSelected);
-        if (this.onCreateLi) {
-          this.onCreateLi(node, jQuery(li), isSelected);
+        if (this.mouseDownInfo) {
+          this.isMouseStarted = this.onMouseStart(this.mouseDownInfo) !== false;
+        }
+        if (this.isMouseStarted) {
+          this.onMouseDrag(positionInfo);
+          if (e.cancelable) {
+            e.preventDefault();
+          }
+        } else {
+          this.handleMouseUp(positionInfo);
         }
-        return li;
       }
-      setTreeItemAriaAttributes(element, name, level, isSelected) {
-        element.setAttribute("aria-label", name);
-        element.setAttribute("aria-level", `${level}`);
-        element.setAttribute("aria-selected", getBoolString(isSelected));
-        element.setAttribute("role", "treeitem");
+      mouseUp = e => {
+        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
+      };
+      handleMouseUp(positionInfo) {
+        this.removeMouseMoveEventListeners();
+        this.isMouseDelayMet = false;
+        this.mouseDownInfo = null;
+        if (this.isMouseStarted) {
+          this.isMouseStarted = false;
+          this.onMouseStop(positionInfo);
+        }
       }
-      createFolderLi(node, level, isSelected) {
-        const buttonClasses = this.getButtonClasses(node);
-        const folderClasses = this.getFolderClasses(node, isSelected);
-        const iconElement = node.is_open ? this.openedIconElement : this.closedIconElement;
-
-        // li
-        const li = document.createElement("li");
-        li.className = `jqtree_common ${folderClasses}`;
-        li.setAttribute("role", "none");
-
-        // div
-        const div = document.createElement("div");
-        div.className = "jqtree-element jqtree_common";
-        div.setAttribute("role", "none");
-        li.appendChild(div);
-
-        // button link
-        const buttonLink = document.createElement("a");
-        buttonLink.className = buttonClasses;
-        if (iconElement) {
-          buttonLink.appendChild(iconElement.cloneNode(true));
+      removeMouseMoveEventListeners() {
+        document.removeEventListener("mousemove", this.mouseMove);
+        document.removeEventListener("touchmove", this.touchMove);
+        document.removeEventListener("mouseup", this.mouseUp);
+        document.removeEventListener("touchend", this.touchEnd);
+      }
+      touchStart = e => {
+        if (!e) {
+          return;
         }
-        if (this.buttonLeft) {
-          div.appendChild(buttonLink);
+        if (e.touches.length > 1) {
+          return;
         }
-
-        // title span
-        const titleSpan = this.createTitleSpan(node.name, isSelected, true, level);
-        titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
-        div.appendChild(titleSpan);
-        if (!this.buttonLeft) {
-          div.appendChild(buttonLink);
+        const touch = e.touches[0];
+        if (!touch) {
+          return;
         }
-        return li;
-      }
-      createNodeLi(node, level, isSelected) {
-        const liClasses = ["jqtree_common"];
-        if (isSelected) {
-          liClasses.push("jqtree-selected");
+        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
+      };
+      touchMove = e => {
+        if (!e) {
+          return;
         }
-        const classString = liClasses.join(" ");
-
-        // li
-        const li = document.createElement("li");
-        li.className = classString;
-        li.setAttribute("role", "none");
-
-        // div
-        const div = document.createElement("div");
-        div.className = "jqtree-element jqtree_common";
-        div.setAttribute("role", "none");
-        li.appendChild(div);
-
-        // title span
-        const titleSpan = this.createTitleSpan(node.name, isSelected, false, level);
-        div.appendChild(titleSpan);
-        return li;
-      }
-      createTitleSpan(nodeName, isSelected, isFolder, level) {
-        const titleSpan = document.createElement("span");
-        let classes = "jqtree-title jqtree_common";
-        if (isFolder) {
-          classes += " jqtree-title-folder";
+        if (e.touches.length > 1) {
+          return;
         }
-        classes += ` jqtree-title-button-${this.buttonLeft ? "left" : "right"}`;
-        titleSpan.className = classes;
-        if (isSelected) {
-          const tabIndex = this.tabIndex;
-          if (tabIndex !== undefined) {
-            titleSpan.setAttribute("tabindex", `${tabIndex}`);
-          }
+        const touch = e.touches[0];
+        if (!touch) {
+          return;
         }
-        this.setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
-        if (this.autoEscape) {
-          titleSpan.textContent = nodeName;
-        } else {
-          titleSpan.innerHTML = nodeName;
+        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
+      };
+      touchEnd = e => {
+        if (!e) {
+          return;
         }
-        return titleSpan;
-      }
-      getButtonClasses(node) {
-        const classes = ["jqtree-toggler", "jqtree_common"];
-        if (!node.is_open) {
-          classes.push("jqtree-closed");
+        if (e.touches.length > 1) {
+          return;
         }
-        if (this.buttonLeft) {
-          classes.push("jqtree-toggler-left");
-        } else {
-          classes.push("jqtree-toggler-right");
+        const touch = e.touches[0];
+        if (!touch) {
+          return;
         }
-        return classes.join(" ");
-      }
-      getFolderClasses(node, isSelected) {
-        const classes = ["jqtree-folder"];
-        if (!node.is_open) {
-          classes.push("jqtree-closed");
+        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
+      };
+      handleClick = e => {
+        if (!e.target) {
+          return;
         }
-        if (isSelected) {
-          classes.push("jqtree-selected");
+        const clickTarget = this.getClickTarget(e.target);
+        if (!clickTarget) {
+          return;
         }
-        if (node.is_loading) {
-          classes.push("jqtree-loading");
+        if (clickTarget.type === "button") {
+          this.onClickButton(clickTarget.node);
+          e.preventDefault();
+          e.stopPropagation();
+        } else if (clickTarget.type === "label") {
+          const event = this.triggerEvent("tree.click", {
+            node: clickTarget.node,
+            click_event: e
+          });
+          if (!event.isDefaultPrevented()) {
+            this.onClickTitle(clickTarget.node);
+          }
         }
-        return classes.join(" ");
-      }
-      createButtonElement(value) {
-        if (typeof value === "string") {
-          // convert value to html
-          const div = document.createElement("div");
-          div.innerHTML = value;
-          return document.createTextNode(div.innerHTML);
-        } else if (value == null) {
-          return undefined;
-        } else if (value.nodeType) {
-          return value;
+      };
+      handleDblclick = e => {
+        if (!e.target) {
+          return;
+        }
+        const clickTarget = this.getClickTarget(e.target);
+        if (clickTarget?.type === "label") {
+          this.triggerEvent("tree.dblclick", {
+            node: clickTarget.node,
+            click_event: e
+          });
+        }
+      };
+      handleContextmenu = e => {
+        if (!e.target) {
+          return;
+        }
+        const div = e.target.closest("ul.jqtree-tree .jqtree-element");
+        if (div) {
+          const node = this.getNode(div);
+          if (node) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.triggerEvent("tree.contextmenu", {
+              node,
+              click_event: e
+            });
+            return false;
+          }
+        }
+        return null;
+      };
+      getClickTarget(element) {
+        const button = element.closest(".jqtree-toggler");
+        if (button) {
+          const node = this.getNode(button);
+          if (node) {
+            return {
+              type: "button",
+              node
+            };
+          }
         } else {
-          return jQuery(value)[0];
+          const jqTreeElement = element.closest(".jqtree-element");
+          if (jqTreeElement) {
+            const node = this.getNode(jqTreeElement);
+            if (node) {
+              return {
+                type: "label",
+                node
+              };
+            }
+          }
         }
+        return null;
       }
     }
 
-    class DataLoader {
+    class SaveStateHandler {
       constructor(_ref) {
         let {
-          dataFilter,
-          loadData,
-          onLoadFailed,
-          onLoading,
-          $treeElement,
-          triggerEvent
+          addToSelection,
+          getNodeById,
+          getSelectedNodes,
+          getTree,
+          onGetStateFromStorage,
+          onSetStateFromStorage,
+          openNode,
+          refreshElements,
+          removeFromSelection,
+          saveState
         } = _ref;
-        this.dataFilter = dataFilter;
-        this.loadData = loadData;
-        this.onLoadFailed = onLoadFailed;
-        this.onLoading = onLoading;
-        this.$treeElement = $treeElement;
-        this.triggerEvent = triggerEvent;
+        this.addToSelection = addToSelection;
+        this.getNodeById = getNodeById;
+        this.getSelectedNodes = getSelectedNodes;
+        this.getTree = getTree;
+        this.onGetStateFromStorage = onGetStateFromStorage;
+        this.onSetStateFromStorage = onSetStateFromStorage;
+        this.openNode = openNode;
+        this.refreshElements = refreshElements;
+        this.removeFromSelection = removeFromSelection;
+        this.saveStateOption = saveState;
       }
-      loadFromUrl(urlInfo, parentNode, onFinished) {
-        if (!urlInfo) {
-          return;
+      saveState() {
+        const state = JSON.stringify(this.getState());
+        if (this.onSetStateFromStorage) {
+          this.onSetStateFromStorage(state);
+        } else if (this.supportsLocalStorage()) {
+          localStorage.setItem(this.getKeyName(), state);
         }
-        const $el = this.getDomElement(parentNode);
-        this.addLoadingClass($el);
-        this.notifyLoading(true, parentNode, $el);
-        const stopLoading = () => {
-          this.removeLoadingClass($el);
-          this.notifyLoading(false, parentNode, $el);
-        };
-        const handleSuccess = data => {
-          stopLoading();
-          this.loadData(this.parseData(data), parentNode);
-          if (onFinished && typeof onFinished === "function") {
-            onFinished();
-          }
+      }
+      getStateFromStorage() {
+        const jsonData = this.loadFromStorage();
+        if (jsonData) {
+          return this.parseState(jsonData);
+        } else {
+          return null;
+        }
+      }
+      getState() {
+        const getOpenNodeIds = () => {
+          const openNodes = [];
+          this.getTree()?.iterate(node => {
+            if (node.is_open && node.id && node.hasChildren()) {
+              openNodes.push(node.id);
+            }
+            return true;
+          });
+          return openNodes;
         };
-        const handleError = jqXHR => {
-          stopLoading();
-          if (this.onLoadFailed) {
-            this.onLoadFailed(jqXHR);
-          }
+        const getSelectedNodeIds = () => {
+          const selectedNodeIds = [];
+          this.getSelectedNodes().forEach(node => {
+            if (node.id != null) {
+              selectedNodeIds.push(node.id);
+            }
+          });
+          return selectedNodeIds;
+        };
+        return {
+          open_nodes: getOpenNodeIds(),
+          selected_node: getSelectedNodeIds()
         };
-        this.submitRequest(urlInfo, handleSuccess, handleError);
       }
-      addLoadingClass($el) {
-        if ($el) {
-          $el.addClass("jqtree-loading");
+
+      /*
+      Set initial state
+      Don't handle nodes that are loaded on demand
+       result: must load on demand
+      */
+      setInitialState(state) {
+        if (!state) {
+          return false;
+        } else {
+          let mustLoadOnDemand = false;
+          if (state.open_nodes) {
+            mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
+          }
+          if (state.selected_node) {
+            this.resetSelection();
+            this.selectInitialNodes(state.selected_node);
+          }
+          return mustLoadOnDemand;
         }
       }
-      removeLoadingClass($el) {
-        if ($el) {
-          $el.removeClass("jqtree-loading");
+      setInitialStateOnDemand(state, cbFinished) {
+        if (state) {
+          this.doSetInitialStateOnDemand(state.open_nodes, state.selected_node, cbFinished);
+        } else {
+          cbFinished();
         }
       }
-      getDomElement(parentNode) {
-        if (parentNode) {
-          return jQuery(parentNode.element);
+      getNodeIdToBeSelected() {
+        const state = this.getStateFromStorage();
+        if (state && state.selected_node) {
+          return state.selected_node[0] || null;
         } else {
-          return this.$treeElement;
+          return null;
         }
       }
-      notifyLoading(isLoading, node, $el) {
-        if (this.onLoading) {
-          this.onLoading(isLoading, node, $el);
+      parseState(jsonData) {
+        const state = JSON.parse(jsonData);
+
+        // Check if selected_node is an int (instead of an array)
+        if (state && state.selected_node && isInt(state.selected_node)) {
+          // Convert to array
+          state.selected_node = [state.selected_node];
         }
-        this.triggerEvent("tree.loading_data", {
-          isLoading,
-          node,
-          $el
+        return state;
+      }
+      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;
+      }
+      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;
+      }
+      resetSelection() {
+        const selectedNodes = this.getSelectedNodes();
+        selectedNodes.forEach(node => {
+          this.removeFromSelection(node);
         });
       }
-      submitRequest(urlInfoInput, handleSuccess, handleError) {
-        const urlInfo = typeof urlInfoInput === "string" ? {
-          url: urlInfoInput
-        } : urlInfoInput;
-        const ajaxSettings = {
-          method: "GET",
-          cache: false,
-          dataType: "json",
-          success: handleSuccess,
-          error: handleError,
-          ...urlInfo
+      doSetInitialStateOnDemand(nodeIdsParam, selectedNodes, cbFinished) {
+        let loadingCount = 0;
+        let nodeIds = nodeIdsParam;
+        const openNodes = () => {
+          const newNodesIds = [];
+          for (const nodeId of nodeIds) {
+            const node = this.getNodeById(nodeId);
+            if (!node) {
+              newNodesIds.push(nodeId);
+            } else {
+              if (!node.is_loading) {
+                if (node.load_on_demand) {
+                  loadAndOpenNode(node);
+                } else {
+                  this.openNode(node, false);
+                }
+              }
+            }
+          }
+          nodeIds = newNodesIds;
+          if (this.selectInitialNodes(selectedNodes)) {
+            this.refreshElements(null);
+          }
+          if (loadingCount === 0) {
+            cbFinished();
+          }
         };
-        ajaxSettings.method = ajaxSettings.method?.toUpperCase() || "GET";
-        void jQuery.ajax(ajaxSettings);
+        const loadAndOpenNode = node => {
+          loadingCount += 1;
+          this.openNode(node, false, () => {
+            loadingCount -= 1;
+            openNodes();
+          });
+        };
+        openNodes();
       }
-      parseData(data) {
-        const getParsedData = () => {
-          if (typeof data === "string") {
-            return JSON.parse(data);
+      getKeyName() {
+        if (typeof this.saveStateOption === "string") {
+          return this.saveStateOption;
+        } else {
+          return "tree";
+        }
+      }
+      supportsLocalStorage() {
+        const testSupport = () => {
+          // Is local storage supported?
+          if (localStorage == null) {
+            return false;
           } else {
-            return data;
+            // 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 (error) {
+              return false;
+            }
+            return true;
           }
         };
-        const parsedData = getParsedData();
-        if (this.dataFilter) {
-          return this.dataFilter(parsedData);
-        } else {
-          return parsedData;
+        if (this._supportsLocalStorage == null) {
+          this._supportsLocalStorage = testSupport();
         }
+        return this._supportsLocalStorage;
       }
     }
 
-    class KeyHandler {
+    class ContainerScrollParent {
       constructor(_ref) {
         let {
-          closeNode,
-          getSelectedNode,
-          isFocusOnTree,
-          keyboardSupport,
-          openNode,
-          selectNode
+          container,
+          refreshHitAreas
         } = _ref;
-        this.closeNode = closeNode;
-        this.getSelectedNode = getSelectedNode;
-        this.isFocusOnTree = isFocusOnTree;
-        this.keyboardSupport = keyboardSupport;
-        this.openNode = openNode;
-        this.originalSelectNode = selectNode;
-        if (keyboardSupport) {
-          this.handleKeyDownHandler = this.handleKeyDown.bind(this);
-          document.addEventListener("keydown", this.handleKeyDownHandler);
+        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);
+          }
         }
       }
-      deinit() {
-        if (this.handleKeyDownHandler) {
-          document.removeEventListener("keydown", this.handleKeyDownHandler);
+      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);
+          }
         }
       }
-      moveDown(selectedNode) {
-        return this.selectNode(selectedNode.getNextVisibleNode());
+      getScrollLeft() {
+        return this.container.scrollLeft;
       }
-      moveUp(selectedNode) {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
+      scrollToY(top) {
+        this.container.scrollTop = top;
       }
-      moveRight(selectedNode) {
-        if (!selectedNode.isFolder()) {
-          return true;
-        } else {
-          // folder node
-          if (selectedNode.is_open) {
-            // Right moves to the first child of an open node
-            return this.selectNode(selectedNode.getNextVisibleNode());
-          } else {
-            // Right expands a closed node
-            this.openNode(selectedNode);
-            return false;
-          }
+      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;
+        const leftEdge = scrollParentOffset.left;
+        const isNearRightEdge = pageX > rightEdge - 20;
+        const isNearLeftEdge = pageX < leftEdge + 20;
+        if (isNearRightEdge) {
+          return "right";
+        } else if (isNearLeftEdge) {
+          return "left";
         }
+        return undefined;
       }
-      moveLeft(selectedNode) {
-        if (selectedNode.isFolder() && selectedNode.is_open) {
-          // Left on an open node closes the node
-          this.closeNode(selectedNode);
-          return false;
-        } else {
-          // Left on a closed or end node moves focus to the node's parent
-          return this.selectNode(selectedNode.getParent());
+      getNewVerticalScrollDirection(pageY) {
+        if (pageY < this.getScrollParentTop()) {
+          return "top";
+        }
+        if (pageY > this.getScrollParentBottom()) {
+          return "bottom";
         }
+        return undefined;
       }
-      selectNode(node) {
-        if (!node) {
-          return true;
-        } else {
-          this.originalSelectNode(node);
-          return false;
+      scrollHorizontally() {
+        if (!this.horizontalScrollDirection) {
+          return;
         }
+        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
+        this.container.scrollBy({
+          left: distance,
+          top: 0,
+          behavior: "instant"
+        });
+        this.refreshHitAreas();
+        setTimeout(this.scrollHorizontally.bind(this), 40);
       }
-      handleKeyDown = e => {
-        if (!this.canHandleKeyboard()) {
-          return true;
+      scrollVertically() {
+        if (!this.verticalScrollDirection) {
+          return;
         }
-        const selectedNode = this.getSelectedNode();
-        if (!selectedNode) {
-          return true;
+        const distance = this.verticalScrollDirection === "top" ? -20 : 20;
+        this.container.scrollBy({
+          left: 0,
+          top: distance,
+          behavior: "instant"
+        });
+        this.refreshHitAreas();
+        setTimeout(this.scrollVertically.bind(this), 40);
+      }
+      getScrollParentTop() {
+        if (this.scrollParentTop == null) {
+          this.scrollParentTop = getOffsetTop(this.container);
         }
-        switch (e.key) {
-          case "ArrowDown":
-            return this.moveDown(selectedNode);
-          case "ArrowUp":
-            return this.moveUp(selectedNode);
-          case "ArrowRight":
-            return this.moveRight(selectedNode);
-          case "ArrowLeft":
-            return this.moveLeft(selectedNode);
-          default:
-            return true;
+        return this.scrollParentTop;
+      }
+      getScrollParentBottom() {
+        if (this.scrollParentBottom == null) {
+          this.scrollParentBottom = this.getScrollParentTop() + this.container.clientHeight;
         }
-      };
-      canHandleKeyboard() {
-        return this.keyboardSupport && this.isFocusOnTree();
+        return this.scrollParentBottom;
       }
     }
 
-    const register = (widgetClass, widgetName) => {
-      const getDataKey = () => `simple_widget_${widgetName}`;
-      const getWidgetData = (el, dataKey) => {
-        const widget = jQuery.data(el, dataKey);
-        if (widget && widget instanceof SimpleWidget) {
-          return widget;
-        } else {
-          return null;
-        }
-      };
-      const createWidget = ($el, options) => {
-        const dataKey = getDataKey();
-        for (const el of $el.get()) {
-          const existingWidget = getWidgetData(el, dataKey);
-          if (!existingWidget) {
-            const simpleWidgetClass = widgetClass;
-            const widget = new simpleWidgetClass(el, options);
-            if (!jQuery.data(el, dataKey)) {
-              jQuery.data(el, dataKey, widget);
-            }
-
-            // Call init after setting data, so we can call methods
-            widget.init();
+    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.horizontalScrollTimeout);
           }
-        }
-        return $el;
-      };
-      const destroyWidget = $el => {
-        const dataKey = getDataKey();
-        for (const el of $el.get()) {
-          const widget = getWidgetData(el, dataKey);
-          if (widget) {
-            widget.destroy();
+          if (newHorizontalScrollDirection) {
+            this.horizontalScrollTimeout = window.setTimeout(this.scrollHorizontally.bind(this), 40);
           }
-          jQuery.removeData(el, dataKey);
         }
-      };
-      const callFunction = ($el, functionName, args) => {
-        let result = null;
-        for (const el of $el.get()) {
-          const widget = jQuery.data(el, getDataKey());
-          if (widget && widget instanceof SimpleWidget) {
-            const simpleWidget = widget;
-            const widgetFunction = simpleWidget[functionName];
-            if (widgetFunction && typeof widgetFunction === "function") {
-              result = widgetFunction.apply(widget, args);
-            }
+      }
+      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;
           }
-        }
-        return result;
-      };
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      jQuery.fn[widgetName] = function (argument1) {
-        if (!argument1) {
-          return createWidget(this, null);
-        } else if (typeof argument1 === "object") {
-          const options = argument1;
-          return createWidget(this, options);
-        } else if (typeof argument1 === "string" && argument1[0] !== "_") {
-          const functionName = argument1;
-          if (functionName === "destroy") {
-            return destroyWidget(this);
-          } else if (functionName === "get_widget_class") {
-            return widgetClass;
-          } else {
-            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-              args[_key - 1] = arguments[_key];
-            }
-            return callFunction(this, functionName, args);
+          if (newVerticalScrollDirection) {
+            this.verticalScrollTimeout = window.setTimeout(this.scrollVertically.bind(this), 40);
           }
-        } else {
-          return undefined;
         }
-      };
-    };
-    class SimpleWidget {
-      static register(widgetClass, widgetName) {
-        register(widgetClass, widgetName);
-      }
-      static defaults = {};
-      constructor(el, options) {
-        this.$el = jQuery(el);
-
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        const defaults = this.constructor["defaults"];
-        this.options = {
-          ...defaults,
-          ...options
-        };
       }
-      destroy() {
-        this.deinit();
+      getScrollLeft() {
+        return document.documentElement.scrollLeft;
       }
-      init() {
-        //
+      scrollToY(top) {
+        const treeTop = getOffsetTop(this.treeElement);
+        document.documentElement.scrollTop = top + treeTop;
       }
-      deinit() {
-        //
+      stopScrolling() {
+        this.horizontalScrollDirection = undefined;
+        this.verticalScrollDirection = undefined;
+        this.documentScrollHeight = undefined;
+        this.documentScrollWidth = undefined;
       }
-    }
-
-    /*
-    This widget does the same a the mouse widget in jqueryui.
-    */
-    const getPositionInfoFromMouseEvent = e => ({
-      pageX: e.pageX,
-      pageY: e.pageY,
-      target: e.target,
-      originalEvent: e
-    });
-    const getPositionInfoFromTouch = (touch, e) => ({
-      pageX: touch.pageX,
-      pageY: touch.pageY,
-      target: touch.target,
-      originalEvent: e
-    });
-    class MouseWidget extends SimpleWidget {
-      init() {
-        const element = this.$el.get(0);
-        if (element) {
-          element.addEventListener("mousedown", this.mouseDown, {
-            passive: false
-          });
-          element.addEventListener("touchstart", this.touchStart, {
-            passive: false
-          });
+      getNewHorizontalScrollDirection(pageX) {
+        const scrollLeft = document.documentElement.scrollLeft;
+        const windowWidth = window.innerWidth;
+        const isNearRightEdge = pageX > windowWidth - 20;
+        const isNearLeftEdge = pageX - scrollLeft < 20;
+        if (isNearRightEdge && this.canScrollRight()) {
+          return "right";
         }
-        this.isMouseStarted = false;
-        this.mouseDelayTimer = null;
-        this.isMouseDelayMet = false;
-        this.mouseDownInfo = null;
-      }
-      deinit() {
-        const el = this.$el.get(0);
-        if (el) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-          el.removeEventListener("mousedown", this.mouseDown, {
-            passive: false
-          });
-
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-          el.removeEventListener("touchstart", this.touchStart, {
-            passive: false
-          });
+        if (isNearLeftEdge) {
+          return "left";
         }
-        this.removeMouseMoveEventListeners();
+        return undefined;
       }
-      mouseDown = e => {
-        // Left mouse button?
-        if (e.button !== 0) {
-          return;
-        }
-        const result = this.handleMouseDown(getPositionInfoFromMouseEvent(e));
-        if (result && e.cancelable) {
-          e.preventDefault();
-        }
-      };
-      handleMouseDown(positionInfo) {
-        // We may have missed mouseup (out of window)
-        if (this.isMouseStarted) {
-          this.handleMouseUp(positionInfo);
-        }
-        this.mouseDownInfo = positionInfo;
-        if (!this.mouseCapture(positionInfo)) {
-          return false;
+      canScrollRight() {
+        const documentElement = document.documentElement;
+        return documentElement.scrollLeft + documentElement.clientWidth < this.getDocumentScrollWidth();
+      }
+      canScrollDown() {
+        const documentElement = document.documentElement;
+        return documentElement.scrollTop + documentElement.clientHeight < this.getDocumentScrollHeight();
+      }
+      getDocumentScrollHeight() {
+        // Store the original scroll height because the scroll height can increase when the drag element is moved beyond the scroll height.
+        if (this.documentScrollHeight == null) {
+          this.documentScrollHeight = document.documentElement.scrollHeight;
         }
-        this.handleStartMouse();
-        return true;
+        return this.documentScrollHeight;
       }
-      handleStartMouse() {
-        document.addEventListener("mousemove", this.mouseMove, {
-          passive: false
-        });
-        document.addEventListener("touchmove", this.touchMove, {
-          passive: false
-        });
-        document.addEventListener("mouseup", this.mouseUp, {
-          passive: false
-        });
-        document.addEventListener("touchend", this.touchEnd, {
-          passive: false
-        });
-        const mouseDelay = this.getMouseDelay();
-        if (mouseDelay) {
-          this.startMouseDelayTimer(mouseDelay);
-        } else {
-          this.isMouseDelayMet = true;
+      getDocumentScrollWidth() {
+        // Store the original scroll width because the scroll width can increase when the drag element is moved beyond the scroll width.
+        if (this.documentScrollWidth == null) {
+          this.documentScrollWidth = document.documentElement.scrollWidth;
         }
+        return this.documentScrollWidth;
       }
-      startMouseDelayTimer(mouseDelay) {
-        if (this.mouseDelayTimer) {
-          clearTimeout(this.mouseDelayTimer);
+      getNewVerticalScrollDirection(pageY) {
+        const scrollTop = jQuery(document).scrollTop() || 0;
+        const distanceTop = pageY - scrollTop;
+        if (distanceTop < 20) {
+          return "top";
         }
-        this.mouseDelayTimer = window.setTimeout(() => {
-          if (this.mouseDownInfo) {
-            this.isMouseDelayMet = true;
-          }
-        }, mouseDelay);
-        this.isMouseDelayMet = false;
+        const windowHeight = window.innerHeight;
+        if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
+          return "bottom";
+        }
+        return undefined;
       }
-      mouseMove = e => {
-        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
-      };
-      handleMouseMove(e, positionInfo) {
-        if (this.isMouseStarted) {
-          this.mouseDrag(positionInfo);
-          if (e.cancelable) {
-            e.preventDefault();
-          }
+      scrollHorizontally() {
+        if (!this.horizontalScrollDirection) {
           return;
         }
-        if (!this.isMouseDelayMet) {
+        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
+        window.scrollBy({
+          left: distance,
+          top: 0,
+          behavior: "instant"
+        });
+        this.refreshHitAreas();
+        setTimeout(this.scrollHorizontally.bind(this), 40);
+      }
+      scrollVertically() {
+        if (!this.verticalScrollDirection) {
           return;
         }
-        if (this.mouseDownInfo) {
-          this.isMouseStarted = this.mouseStart(this.mouseDownInfo) !== false;
-        }
-        if (this.isMouseStarted) {
-          this.mouseDrag(positionInfo);
-          if (e.cancelable) {
-            e.preventDefault();
-          }
-        } else {
-          this.handleMouseUp(positionInfo);
-        }
+        const distance = this.verticalScrollDirection === "top" ? -20 : 20;
+        window.scrollBy({
+          left: 0,
+          top: distance,
+          behavior: "instant"
+        });
+        this.refreshHitAreas();
+        setTimeout(this.scrollVertically.bind(this), 40);
       }
-      mouseUp = e => {
-        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
-      };
-      handleMouseUp(positionInfo) {
-        this.removeMouseMoveEventListeners();
-        this.isMouseDelayMet = false;
-        this.mouseDownInfo = null;
-        if (this.isMouseStarted) {
-          this.isMouseStarted = false;
-          this.mouseStop(positionInfo);
+    }
+
+    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;
       }
-      removeMouseMoveEventListeners() {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        document.removeEventListener("mousemove", this.mouseMove, {
-          passive: false
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        document.removeEventListener("touchmove", this.touchMove, {
-          passive: false
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        document.removeEventListener("mouseup", this.mouseUp, {
-          passive: false
+      return null;
+    };
+    const createScrollParent = (treeElement, refreshHitAreas) => {
+      const container = getParentWithOverflow(treeElement);
+      if (container && container.tagName !== "HTML") {
+        return new ContainerScrollParent({
+          container,
+          refreshHitAreas
         });
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        document.removeEventListener("touchend", this.touchEnd, {
-          passive: false
+      } else {
+        return new DocumentScrollParent({
+          refreshHitAreas,
+          treeElement
         });
       }
-      touchStart = e => {
-        if (!e) {
-          return;
-        }
-        if (e.touches.length > 1) {
-          return;
-        }
-        const touch = e.changedTouches[0];
-        if (!touch) {
-          return;
-        }
-        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
-      };
-      touchMove = e => {
-        if (!e) {
-          return;
-        }
-        if (e.touches.length > 1) {
-          return;
-        }
-        const touch = e.changedTouches[0];
-        if (!touch) {
-          return;
-        }
-        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
-      };
-      touchEnd = e => {
-        if (!e) {
-          return;
-        }
-        if (e.touches.length > 1) {
-          return;
-        }
-        const touch = e.changedTouches[0];
-        if (!touch) {
-          return;
+    };
+
+    class ScrollHandler {
+      constructor(_ref) {
+        let {
+          refreshHitAreas,
+          treeElement
+        } = _ref;
+        this.refreshHitAreas = refreshHitAreas;
+        this.scrollParent = undefined;
+        this.treeElement = treeElement;
+      }
+      checkScrolling(positionInfo) {
+        this.checkVerticalScrolling(positionInfo);
+        this.checkHorizontalScrolling(positionInfo);
+      }
+      stopScrolling() {
+        this.getScrollParent().stopScrolling();
+      }
+      scrollToY(top) {
+        this.getScrollParent().scrollToY(top);
+      }
+      getScrollLeft() {
+        return this.getScrollParent().getScrollLeft();
+      }
+      checkVerticalScrolling(positionInfo) {
+        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
+      }
+      checkHorizontalScrolling(positionInfo) {
+        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
+      }
+      getScrollParent() {
+        if (!this.scrollParent) {
+          this.scrollParent = createScrollParent(this.treeElement, this.refreshHitAreas);
         }
-        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
-      };
+        return this.scrollParent;
+      }
     }
 
-    class SaveStateHandler {
+    class SelectNodeHandler {
       constructor(_ref) {
         let {
-          addToSelection,
-          getNodeById,
-          getSelectedNodes,
-          getTree,
-          onGetStateFromStorage,
-          onSetStateFromStorage,
-          openNode,
-          refreshElements,
-          removeFromSelection,
-          saveState
+          getNodeById
         } = _ref;
-        this.addToSelection = addToSelection;
         this.getNodeById = getNodeById;
-        this.getSelectedNodes = getSelectedNodes;
-        this.getTree = getTree;
-        this.onGetStateFromStorage = onGetStateFromStorage;
-        this.onSetStateFromStorage = onSetStateFromStorage;
-        this.openNode = openNode;
-        this.refreshElements = refreshElements;
-        this.removeFromSelection = removeFromSelection;
-        this.saveStateOption = saveState;
+        this.selectedNodes = new Set();
+        this.clear();
       }
-      saveState() {
-        const state = JSON.stringify(this.getState());
-        if (this.onSetStateFromStorage) {
-          this.onSetStateFromStorage(state);
-        } else if (this.supportsLocalStorage()) {
-          localStorage.setItem(this.getKeyName(), state);
+      getSelectedNode() {
+        const selectedNodes = this.getSelectedNodes();
+        if (selectedNodes.length) {
+          return selectedNodes[0] || false;
+        } else {
+          return false;
         }
       }
-      getStateFromStorage() {
-        const jsonData = this.loadFromStorage();
-        if (jsonData) {
-          return this.parseState(jsonData);
+      getSelectedNodes() {
+        if (this.selectedSingleNode) {
+          return [this.selectedSingleNode];
         } else {
-          return null;
+          const selectedNodes = [];
+          this.selectedNodes.forEach(id => {
+            const node = this.getNodeById(id);
+            if (node) {
+              selectedNodes.push(node);
+            }
+          });
+          return selectedNodes;
         }
       }
-      getState() {
-        const getOpenNodeIds = () => {
-          const openNodes = [];
-          this.getTree()?.iterate(node => {
-            if (node.is_open && node.id && node.hasChildren()) {
-              openNodes.push(node.id);
-            }
-            return true;
-          });
-          return openNodes;
-        };
-        const getSelectedNodeIds = () => {
-          const selectedNodeIds = [];
-          this.getSelectedNodes().forEach(node => {
-            if (node.id != null) {
-              selectedNodeIds.push(node.id);
-            }
-          });
-          return selectedNodeIds;
-        };
-        return {
-          open_nodes: getOpenNodeIds(),
-          selected_node: getSelectedNodeIds()
-        };
-      }
-
-      /*
-      Set initial state
-      Don't handle nodes that are loaded on demand
-       result: must load on demand
-      */
-      setInitialState(state) {
-        if (!state) {
-          return false;
-        } else {
-          let mustLoadOnDemand = false;
-          if (state.open_nodes) {
-            mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
+      getSelectedNodesUnder(parent) {
+        if (this.selectedSingleNode) {
+          if (parent.isParentOf(this.selectedSingleNode)) {
+            return [this.selectedSingleNode];
+          } else {
+            return [];
           }
-          if (state.selected_node) {
-            this.resetSelection();
-            this.selectInitialNodes(state.selected_node);
+        } 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);
+              }
+            }
           }
-          return mustLoadOnDemand;
+          return selectedNodes;
         }
       }
-      setInitialStateOnDemand(state, cbFinished) {
-        if (state) {
-          this.doSetInitialStateOnDemand(state.open_nodes, state.selected_node, cbFinished);
+      isNodeSelected(node) {
+        if (node.id != null) {
+          return this.selectedNodes.has(node.id);
+        } else if (this.selectedSingleNode) {
+          return this.selectedSingleNode.element === node.element;
         } else {
-          cbFinished();
+          return false;
         }
       }
-      getNodeIdToBeSelected() {
-        const state = this.getStateFromStorage();
-        if (state && state.selected_node) {
-          return state.selected_node[0] || null;
+      clear() {
+        this.selectedNodes.clear();
+        this.selectedSingleNode = null;
+      }
+      removeFromSelection(node) {
+        let includeChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        if (node.id == null) {
+          if (this.selectedSingleNode && node.element === this.selectedSingleNode.element) {
+            this.selectedSingleNode = null;
+          }
         } else {
-          return null;
+          this.selectedNodes.delete(node.id);
+          if (includeChildren) {
+            node.iterate(() => {
+              if (node.id != null) {
+                this.selectedNodes.delete(node.id);
+              }
+              return true;
+            });
+          }
         }
       }
-      parseState(jsonData) {
-        const state = JSON.parse(jsonData);
-
-        // Check if selected_node is an int (instead of an array)
-        if (state && state.selected_node && isInt(state.selected_node)) {
-          // Convert to array
-          state.selected_node = [state.selected_node];
+      addToSelection(node) {
+        if (node.id != null) {
+          this.selectedNodes.add(node.id);
+        } else {
+          this.selectedSingleNode = node;
         }
-        return state;
       }
-      loadFromStorage() {
-        if (this.onGetStateFromStorage) {
-          return this.onGetStateFromStorage();
-        } else if (this.supportsLocalStorage()) {
-          return localStorage.getItem(this.getKeyName());
+    }
+
+    const register = (widgetClass, widgetName) => {
+      const getDataKey = () => `simple_widget_${widgetName}`;
+      const getWidgetData = (el, dataKey) => {
+        const widget = jQuery.data(el, dataKey);
+        if (widget && widget instanceof SimpleWidget) {
+          return widget;
         } 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;
+      };
+      const createWidget = ($el, options) => {
+        const dataKey = getDataKey();
+        for (const el of $el.get()) {
+          const existingWidget = getWidgetData(el, dataKey);
+          if (!existingWidget) {
+            const simpleWidgetClass = widgetClass;
+            const widget = new simpleWidgetClass(el, options);
+            if (!jQuery.data(el, dataKey)) {
+              jQuery.data(el, dataKey, widget);
             }
+
+            // Call init after setting data, so we can call methods
+            widget.init();
           }
         }
-        return mustLoadOnDemand;
-      }
-      selectInitialNodes(nodeIds) {
-        let selectCount = 0;
-        for (const nodeId of nodeIds) {
-          const node = this.getNodeById(nodeId);
-          if (node) {
-            selectCount += 1;
-            this.addToSelection(node);
+        return $el;
+      };
+      const destroyWidget = $el => {
+        const dataKey = getDataKey();
+        for (const el of $el.get()) {
+          const widget = getWidgetData(el, dataKey);
+          if (widget) {
+            widget.destroy();
           }
+          jQuery.removeData(el, dataKey);
         }
-        return selectCount !== 0;
-      }
-      resetSelection() {
-        const selectedNodes = this.getSelectedNodes();
-        selectedNodes.forEach(node => {
-          this.removeFromSelection(node);
-        });
-      }
-      doSetInitialStateOnDemand(nodeIdsParam, selectedNodes, cbFinished) {
-        let loadingCount = 0;
-        let nodeIds = nodeIdsParam;
-        const openNodes = () => {
-          const newNodesIds = [];
-          for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
-            if (!node) {
-              newNodesIds.push(nodeId);
-            } else {
-              if (!node.is_loading) {
-                if (node.load_on_demand) {
-                  loadAndOpenNode(node);
-                } else {
-                  this.openNode(node, false);
-                }
-              }
+      };
+      const callFunction = ($el, functionName, args) => {
+        let result = null;
+        for (const el of $el.get()) {
+          const widget = jQuery.data(el, getDataKey());
+          if (widget && widget instanceof SimpleWidget) {
+            const simpleWidget = widget;
+            const widgetFunction = simpleWidget[functionName];
+            if (widgetFunction && typeof widgetFunction === "function") {
+              result = widgetFunction.apply(widget, args);
             }
           }
-          nodeIds = newNodesIds;
-          if (this.selectInitialNodes(selectedNodes)) {
-            this.refreshElements(null);
-          }
-          if (loadingCount === 0) {
-            cbFinished();
-          }
-        };
-        const loadAndOpenNode = node => {
-          loadingCount += 1;
-          this.openNode(node, false, () => {
-            loadingCount -= 1;
-            openNodes();
-          });
-        };
-        openNodes();
-      }
-      getKeyName() {
-        if (typeof this.saveStateOption === "string") {
-          return this.saveStateOption;
-        } else {
-          return "tree";
         }
-      }
-      supportsLocalStorage() {
-        const testSupport = () => {
-          // Is local storage supported?
-          if (localStorage == null) {
-            return false;
+        return result;
+      };
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      jQuery.fn[widgetName] = function (argument1) {
+        if (!argument1) {
+          return createWidget(this, null);
+        } else if (typeof argument1 === "object") {
+          const options = argument1;
+          return createWidget(this, options);
+        } else if (typeof argument1 === "string" && argument1[0] !== "_") {
+          const functionName = argument1;
+          if (functionName === "destroy") {
+            return destroyWidget(this);
+          } else if (functionName === "get_widget_class") {
+            return widgetClass;
           } else {
-            // 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 (error) {
-              return false;
+            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+              args[_key - 1] = arguments[_key];
             }
-            return true;
+            return callFunction(this, functionName, args);
           }
-        };
-        if (this._supportsLocalStorage == null) {
-          this._supportsLocalStorage = testSupport();
+        } else {
+          return undefined;
         }
-        return this._supportsLocalStorage;
+      };
+    };
+    class SimpleWidget {
+      static register(widgetClass, widgetName) {
+        register(widgetClass, widgetName);
       }
-    }
+      static defaults = {};
+      constructor(el, options) {
+        this.$el = jQuery(el);
 
-    class ContainerScrollParent {
-      constructor(_ref) {
-        let {
-          $container,
-          refreshHitAreas
-        } = _ref;
-        this.$container = $container;
-        this.refreshHitAreas = refreshHitAreas;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const defaults = this.constructor["defaults"];
+        this.options = {
+          ...defaults,
+          ...options
+        };
       }
-      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);
+      destroy() {
+        this.deinit();
+      }
+      init() {
+        //
+      }
+      deinit() {
+        //
+      }
+    }
+
+    const isNodeRecordWithChildren = data => typeof data === "object" && "children" in data && data["children"] instanceof Array;
+
+    class Node {
+      constructor() {
+        let nodeData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        let isRoot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        let nodeClass = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Node;
+        this.name = "";
+        this.load_on_demand = false;
+        this.isEmptyFolder = nodeData != null && isNodeRecordWithChildren(nodeData) && nodeData.children.length === 0;
+        this.setData(nodeData);
+        this.children = [];
+        this.parent = null;
+        if (isRoot) {
+          this.idMapping = new Map();
+          this.tree = this;
+          this.nodeClass = nodeClass;
+        }
+      }
+
+      /*
+      Set the data of this node.
+       setData(string): set the name of the node
+      setData(object): set attributes of the node
+       Examples:
+          setData('node1')
+           setData({ name: 'node1', id: 1});
+           setData({ name: 'node2', id: 2, color: 'green'});
+       * This is an internal function; it is not in the docs
+      * Does not remove existing node values
+      */
+      setData(o) {
+        if (!o) {
+          return;
+        } else if (typeof o === "string") {
+          this.name = o;
+        } else if (typeof o === "object") {
+          for (const key in o) {
+            if (Object.prototype.hasOwnProperty.call(o, key)) {
+              const value = o[key];
+              if (key === "label" || key === "name") {
+                // You can use the 'label' key instead of 'name'; this is a legacy feature
+                if (typeof value === "string") {
+                  this.name = value;
+                }
+              } else if (key !== "children" && key !== "parent") {
+                // You can't update the children or the parent using this function
+                this[key] = value;
+              }
+            }
           }
         }
       }
-      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;
+
+      /*
+      Create tree from data.
+       Structure of data is:
+      [
+          {
+              name: 'node1',
+              children: [
+                  { name: 'child1' },
+                  { name: 'child2' }
+              ]
+          },
+          {
+              name: 'node2'
           }
-          if (newVerticalScrollDirection) {
-            this.verticalScrollTimeout = window.setTimeout(this.scrollVertically.bind(this), 40);
+      ]
+      */
+      loadFromData(data) {
+        this.removeChildren();
+        for (const childData of data) {
+          const node = this.createNode(childData);
+          this.addChild(node);
+          if (isNodeRecordWithChildren(childData)) {
+            node.loadFromData(childData.children);
           }
         }
+        return this;
       }
-      getScrollLeft() {
-        return this.$container.scrollLeft() || 0;
+
+      /*
+      Add child.
+       tree.addChild(
+          new Node('child1')
+      );
+      */
+      addChild(node) {
+        this.children.push(node);
+        node.setParent(this);
       }
-      scrollToY(top) {
-        const container = this.$container.get(0);
-        container.scrollTop = top;
+
+      /*
+      Add child at position. Index starts at 0.
+       tree.addChildAtPosition(
+          new Node('abc'),
+          1
+      );
+      */
+      addChildAtPosition(node, index) {
+        this.children.splice(index, 0, node);
+        node.setParent(this);
       }
-      stopScrolling() {
-        this.horizontalScrollDirection = undefined;
-        this.verticalScrollDirection = undefined;
-        this.scrollParentTop = undefined;
-        this.scrollParentBottom = undefined;
+
+      /*
+      Remove child. This also removes the children of the node.
+       tree.removeChild(tree.children[0]);
+      */
+      removeChild(node) {
+        // remove children from the index
+        node.removeChildren();
+        this.doRemoveChild(node);
       }
-      getNewHorizontalScrollDirection(pageX) {
-        const scrollParentOffset = this.$container.offset();
-        if (!scrollParentOffset) {
-          return undefined;
-        }
-        const container = this.$container.get(0);
-        const rightEdge = scrollParentOffset.left + container.clientWidth;
-        const leftEdge = scrollParentOffset.left;
-        const isNearRightEdge = pageX > rightEdge - 20;
-        const isNearLeftEdge = pageX < leftEdge + 20;
-        if (isNearRightEdge) {
-          return "right";
-        } else if (isNearLeftEdge) {
-          return "left";
-        }
-        return undefined;
+
+      /*
+      Get child index.
+       var index = getChildIndex(node);
+      */
+      getChildIndex(node) {
+        return this.children.indexOf(node);
       }
-      getNewVerticalScrollDirection(pageY) {
-        if (pageY < this.getScrollParentTop()) {
-          return "top";
-        }
-        if (pageY > this.getScrollParentBottom()) {
-          return "bottom";
-        }
-        return undefined;
+
+      /*
+      Does the tree have children?
+       if (tree.hasChildren()) {
+          //
       }
-      scrollHorizontally() {
-        if (!this.horizontalScrollDirection) {
-          return;
+      */
+      hasChildren() {
+        return this.children.length !== 0;
+      }
+      isFolder() {
+        return this.hasChildren() || this.load_on_demand;
+      }
+
+      /*
+      Iterate over all the nodes in the tree.
+       Calls callback with (node, level).
+       The callback must return true to continue the iteration on current node.
+       tree.iterate(
+          function(node, level) {
+             console.log(node.name);
+              // stop iteration after level 2
+             return (level <= 2);
+          }
+      );
+       */
+      iterate(callback) {
+        const _iterate = (node, level) => {
+          if (node.children) {
+            for (const child of node.children) {
+              const result = callback(child, level);
+              if (result && child.hasChildren()) {
+                _iterate(child, level + 1);
+              }
+            }
+          }
+        };
+        _iterate(this, 0);
+      }
+
+      /*
+      Move node relative to another node.
+       Argument position: Position.BEFORE, Position.AFTER or Position.Inside
+       // move node1 after node2
+      tree.moveNode(node1, node2, Position.AFTER);
+      */
+      moveNode(movedNode, targetNode, position) {
+        if (!movedNode.parent || movedNode.isParentOf(targetNode)) {
+          // - Node is parent of target node
+          // - Or, parent is empty
+          return false;
+        } else {
+          movedNode.parent.doRemoveChild(movedNode);
+          switch (position) {
+            case Position.After:
+              {
+                if (targetNode.parent) {
+                  targetNode.parent.addChildAtPosition(movedNode, targetNode.parent.getChildIndex(targetNode) + 1);
+                  return true;
+                }
+                return false;
+              }
+            case Position.Before:
+              {
+                if (targetNode.parent) {
+                  targetNode.parent.addChildAtPosition(movedNode, targetNode.parent.getChildIndex(targetNode));
+                  return true;
+                }
+                return false;
+              }
+            case Position.Inside:
+              {
+                // move inside as first child
+                targetNode.addChildAtPosition(movedNode, 0);
+                return true;
+              }
+            default:
+              return false;
+          }
         }
-        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
-        const container = this.$container.get(0);
-        container.scrollBy({
-          left: distance,
-          top: 0,
-          behavior: "instant"
-        });
-        this.refreshHitAreas();
-        setTimeout(this.scrollHorizontally.bind(this), 40);
       }
-      scrollVertically() {
-        if (!this.verticalScrollDirection) {
-          return;
+
+      /*
+      Get the tree as data.
+      */
+      getData() {
+        let includeParent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        const getDataFromNodes = nodes => {
+          return nodes.map(node => {
+            const tmpNode = {};
+            for (const k in node) {
+              if (["parent", "children", "element", "idMapping", "load_on_demand", "nodeClass", "tree", "isEmptyFolder"].indexOf(k) === -1 && Object.prototype.hasOwnProperty.call(node, k)) {
+                const v = node[k];
+                tmpNode[k] = v;
+              }
+            }
+            if (node.hasChildren()) {
+              tmpNode["children"] = getDataFromNodes(node.children);
+            }
+            return tmpNode;
+          });
+        };
+        if (includeParent) {
+          return getDataFromNodes([this]);
+        } else {
+          return getDataFromNodes(this.children);
         }
-        const distance = this.verticalScrollDirection === "top" ? -20 : 20;
-        const container = this.$container.get(0);
-        container.scrollBy({
-          left: 0,
-          top: distance,
-          behavior: "instant"
-        });
-        this.refreshHitAreas();
-        setTimeout(this.scrollVertically.bind(this), 40);
       }
-      getScrollParentTop() {
-        if (this.scrollParentTop == null) {
-          this.scrollParentTop = this.$container.offset()?.top || 0;
+      getNodeByName(name) {
+        return this.getNodeByCallback(node => node.name === name);
+      }
+      getNodeByNameMustExist(name) {
+        const node = this.getNodeByCallback(n => n.name === name);
+        if (!node) {
+          throw `Node with name ${name} not found`;
         }
-        return this.scrollParentTop;
+        return node;
+      }
+      getNodeByCallback(callback) {
+        let result = null;
+        this.iterate(node => {
+          if (result) {
+            return false;
+          } else if (callback(node)) {
+            result = node;
+            return false;
+          } else {
+            return true;
+          }
+        });
+        return result;
       }
-      getScrollParentBottom() {
-        if (this.scrollParentBottom == null) {
-          this.scrollParentBottom = this.getScrollParentTop() + (this.$container.innerHeight() ?? 0);
+      addAfter(nodeInfo) {
+        if (!this.parent) {
+          return null;
+        } else {
+          const node = this.createNode(nodeInfo);
+          const childIndex = this.parent.getChildIndex(this);
+          this.parent.addChildAtPosition(node, childIndex + 1);
+          node.loadChildrenFromData(nodeInfo);
+          return node;
         }
-        return this.scrollParentBottom;
-      }
-    }
-
-    class DocumentScrollParent {
-      constructor($element, refreshHitAreas) {
-        this.$element = $element;
-        this.refreshHitAreas = refreshHitAreas;
       }
-      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);
-          }
+      addBefore(nodeInfo) {
+        if (!this.parent) {
+          return null;
+        } else {
+          const node = this.createNode(nodeInfo);
+          const childIndex = this.parent.getChildIndex(this);
+          this.parent.addChildAtPosition(node, childIndex);
+          node.loadChildrenFromData(nodeInfo);
+          return node;
         }
       }
-      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;
+      addParent(nodeInfo) {
+        if (!this.parent) {
+          return null;
+        } else {
+          const newParent = this.createNode(nodeInfo);
+          if (this.tree) {
+            newParent.setParent(this.tree);
           }
-          if (newVerticalScrollDirection) {
-            this.verticalScrollTimeout = window.setTimeout(this.scrollVertically.bind(this), 40);
+          const originalParent = this.parent;
+          for (const child of originalParent.children) {
+            newParent.addChild(child);
           }
+          originalParent.children = [];
+          originalParent.addChild(newParent);
+          return newParent;
         }
       }
-      getScrollLeft() {
-        return document.documentElement.scrollLeft;
-      }
-      scrollToY(top) {
-        const offset = this.$element.offset();
-        const treeTop = offset ? offset.top : 0;
-        jQuery(document).scrollTop(top + treeTop);
-      }
-      stopScrolling() {
-        this.horizontalScrollDirection = undefined;
-        this.verticalScrollDirection = undefined;
-        this.documentScrollHeight = undefined;
-        this.documentScrollWidth = undefined;
-      }
-      getNewHorizontalScrollDirection(pageX) {
-        const $document = jQuery(document);
-        const scrollLeft = $document.scrollLeft() || 0;
-        const windowWidth = jQuery(window).width() || 0;
-        const isNearRightEdge = pageX > windowWidth - 20;
-        const isNearLeftEdge = pageX - scrollLeft < 20;
-        if (isNearRightEdge && this.canScrollRight()) {
-          return "right";
-        }
-        if (isNearLeftEdge) {
-          return "left";
+      remove() {
+        if (this.parent) {
+          this.parent.removeChild(this);
+          this.parent = null;
         }
-        return undefined;
       }
-      canScrollRight() {
-        const documentElement = document.documentElement;
-        return documentElement.scrollLeft + documentElement.clientWidth < this.getDocumentScrollWidth();
+      append(nodeInfo) {
+        const node = this.createNode(nodeInfo);
+        this.addChild(node);
+        node.loadChildrenFromData(nodeInfo);
+        return node;
       }
-      canScrollDown() {
-        const documentElement = document.documentElement;
-        return documentElement.scrollTop + documentElement.clientHeight < this.getDocumentScrollHeight();
+      prepend(nodeInfo) {
+        const node = this.createNode(nodeInfo);
+        this.addChildAtPosition(node, 0);
+        node.loadChildrenFromData(nodeInfo);
+        return node;
       }
-      getDocumentScrollHeight() {
-        // Store the original scroll height because the scroll height can increase when the drag element is moved beyond the scroll height.
-        if (this.documentScrollHeight == null) {
-          this.documentScrollHeight = document.documentElement.scrollHeight;
+      isParentOf(node) {
+        let parent = node.parent;
+        while (parent) {
+          if (parent === this) {
+            return true;
+          }
+          parent = parent.parent;
         }
-        return this.documentScrollHeight;
+        return false;
       }
-      getDocumentScrollWidth() {
-        // Store the original scroll width because the scroll width can increase when the drag element is moved beyond the scroll width.
-        if (this.documentScrollWidth == null) {
-          this.documentScrollWidth = document.documentElement.scrollWidth;
+      getLevel() {
+        let level = 0;
+        let node = this; // eslint-disable-line @typescript-eslint/no-this-alias
+
+        while (node.parent) {
+          level += 1;
+          node = node.parent;
         }
-        return this.documentScrollWidth;
+        return level;
       }
-      getNewVerticalScrollDirection(pageY) {
-        const scrollTop = jQuery(document).scrollTop() || 0;
-        const distanceTop = pageY - scrollTop;
-        if (distanceTop < 20) {
-          return "top";
-        }
-        const windowHeight = jQuery(window).height() || 0;
-        if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
-          return "bottom";
-        }
-        return undefined;
+      getNodeById(nodeId) {
+        return this.idMapping.get(nodeId) || null;
       }
-      scrollHorizontally() {
-        if (!this.horizontalScrollDirection) {
-          return;
+      addNodeToIndex(node) {
+        if (node.id != null) {
+          this.idMapping.set(node.id, node);
         }
-        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
-        window.scrollBy({
-          left: distance,
-          top: 0,
-          behavior: "instant"
-        });
-        this.refreshHitAreas();
-        setTimeout(this.scrollHorizontally.bind(this), 40);
       }
-      scrollVertically() {
-        if (!this.verticalScrollDirection) {
-          return;
+      removeNodeFromIndex(node) {
+        if (node.id != null) {
+          this.idMapping.delete(node.id);
         }
-        const distance = this.verticalScrollDirection === "top" ? -20 : 20;
-        window.scrollBy({
-          left: 0,
-          top: distance,
-          behavior: "instant"
-        });
-        this.refreshHitAreas();
-        setTimeout(this.scrollVertically.bind(this), 40);
       }
-    }
-
-    const hasOverFlow = $element => {
-      for (const attr of ["overflow", "overflow-y"]) {
-        const overflowValue = $element.css(attr);
-        if (overflowValue === "auto" || overflowValue === "scroll") {
+      removeChildren() {
+        this.iterate(child => {
+          this.tree?.removeNodeFromIndex(child);
           return true;
-        }
-      }
-      return false;
-    };
-    const getParentWithOverflow = $treeElement => {
-      if (hasOverFlow($treeElement)) {
-        return $treeElement;
-      }
-      for (const element of $treeElement.parents().get()) {
-        const $element = jQuery(element);
-        if (hasOverFlow($element)) {
-          return $element;
-        }
-      }
-      return null;
-    };
-    const createScrollParent = ($treeElement, refreshHitAreas) => {
-      const $container = getParentWithOverflow($treeElement);
-      if ($container?.length && $container[0]?.tagName !== "HTML") {
-        return new ContainerScrollParent({
-          $container,
-          refreshHitAreas,
-          $treeElement
         });
-      } else {
-        return new DocumentScrollParent($treeElement, refreshHitAreas);
-      }
-    };
-
-    class ScrollHandler {
-      constructor(_ref) {
-        let {
-          refreshHitAreas,
-          $treeElement
-        } = _ref;
-        this.refreshHitAreas = refreshHitAreas;
-        this.scrollParent = undefined;
-        this.$treeElement = $treeElement;
-      }
-      checkScrolling(positionInfo) {
-        this.checkVerticalScrolling(positionInfo);
-        this.checkHorizontalScrolling(positionInfo);
-      }
-      stopScrolling() {
-        this.getScrollParent().stopScrolling();
-      }
-      scrollToY(top) {
-        this.getScrollParent().scrollToY(top);
-      }
-      getScrollLeft() {
-        return this.getScrollParent().getScrollLeft();
+        this.children = [];
       }
-      checkVerticalScrolling(positionInfo) {
-        if (positionInfo.pageY == null) {
-          return;
+      getPreviousSibling() {
+        if (!this.parent) {
+          return null;
+        } else {
+          const previousIndex = this.parent.getChildIndex(this) - 1;
+          if (previousIndex >= 0) {
+            return this.parent.children[previousIndex] || null;
+          } else {
+            return null;
+          }
         }
-        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
       }
-      checkHorizontalScrolling(positionInfo) {
-        if (positionInfo.pageX == null) {
-          return;
+      getNextSibling() {
+        if (!this.parent) {
+          return null;
+        } else {
+          const nextIndex = this.parent.getChildIndex(this) + 1;
+          if (nextIndex < this.parent.children.length) {
+            return this.parent.children[nextIndex] || null;
+          } else {
+            return null;
+          }
         }
-        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
       }
-      getScrollParent() {
-        if (!this.scrollParent) {
-          this.scrollParent = createScrollParent(this.$treeElement, this.refreshHitAreas);
-        }
-        return this.scrollParent;
+      getNodesByProperty(key, value) {
+        return this.filter(node => node[key] === value);
       }
-    }
-
-    class SelectNodeHandler {
-      constructor(_ref) {
-        let {
-          getNodeById
-        } = _ref;
-        this.getNodeById = getNodeById;
-        this.selectedNodes = new Set();
-        this.clear();
+      filter(f) {
+        const result = [];
+        this.iterate(node => {
+          if (f(node)) {
+            result.push(node);
+          }
+          return true;
+        });
+        return result;
       }
-      getSelectedNode() {
-        const selectedNodes = this.getSelectedNodes();
-        if (selectedNodes.length) {
-          return selectedNodes[0] || false;
+      getNextNode() {
+        let includeChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        if (includeChildren && this.hasChildren()) {
+          return this.children[0] || null;
+        } else if (!this.parent) {
+          return null;
         } else {
-          return false;
+          const nextSibling = this.getNextSibling();
+          if (nextSibling) {
+            return nextSibling;
+          } else {
+            return this.parent.getNextNode(false);
+          }
         }
       }
-      getSelectedNodes() {
-        if (this.selectedSingleNode) {
-          return [this.selectedSingleNode];
+      getNextVisibleNode() {
+        if (this.hasChildren() && this.is_open) {
+          // First child
+          return this.children[0] || null;
         } else {
-          const selectedNodes = [];
-          this.selectedNodes.forEach(id => {
-            const node = this.getNodeById(id);
-            if (node) {
-              selectedNodes.push(node);
+          if (!this.parent) {
+            return null;
+          } else {
+            const nextSibling = this.getNextSibling();
+            if (nextSibling) {
+              // Next sibling
+              return nextSibling;
+            } else {
+              // Next node of parent
+              return this.parent.getNextNode(false);
             }
-          });
-          return selectedNodes;
+          }
         }
       }
-      getSelectedNodesUnder(parent) {
-        if (this.selectedSingleNode) {
-          if (parent.isParentOf(this.selectedSingleNode)) {
-            return [this.selectedSingleNode];
+      getPreviousNode() {
+        if (!this.parent) {
+          return null;
+        } else {
+          const previousSibling = this.getPreviousSibling();
+          if (!previousSibling) {
+            return this.getParent();
+          } else if (previousSibling.hasChildren()) {
+            return previousSibling.getLastChild();
           } else {
-            return [];
+            return previousSibling;
           }
+        }
+      }
+      getPreviousVisibleNode() {
+        if (!this.parent) {
+          return null;
         } 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);
-              }
-            }
+          const previousSibling = this.getPreviousSibling();
+          if (!previousSibling) {
+            return this.getParent();
+          } else if (!previousSibling.hasChildren() || !previousSibling.is_open) {
+            // Previous sibling
+            return previousSibling;
+          } else {
+            // Last child of previous sibling
+            return previousSibling.getLastChild();
           }
-          return selectedNodes;
         }
       }
-      isNodeSelected(node) {
-        if (node.id != null) {
-          return this.selectedNodes.has(node.id);
-        } else if (this.selectedSingleNode) {
-          return this.selectedSingleNode.element === node.element;
+      getParent() {
+        // Return parent except if it is the root node
+        if (!this.parent) {
+          return null;
+        } else if (!this.parent.parent) {
+          // Root node -> null
+          return null;
         } else {
-          return false;
+          return this.parent;
         }
       }
-      clear() {
-        this.selectedNodes.clear();
-        this.selectedSingleNode = null;
-      }
-      removeFromSelection(node) {
-        let includeChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-        if (node.id == null) {
-          if (this.selectedSingleNode && node.element === this.selectedSingleNode.element) {
-            this.selectedSingleNode = null;
-          }
+      getLastChild() {
+        if (!this.hasChildren()) {
+          return null;
         } else {
-          this.selectedNodes.delete(node.id);
-          if (includeChildren) {
-            node.iterate(() => {
-              if (node.id != null) {
-                this.selectedNodes.delete(node.id);
-              }
-              return true;
-            });
+          const lastChild = this.children[this.children.length - 1];
+          if (!lastChild) {
+            return null;
+          }
+          if (!(lastChild.hasChildren() && lastChild.is_open)) {
+            return lastChild;
+          } else {
+            return lastChild?.getLastChild();
           }
         }
       }
-      addToSelection(node) {
-        if (node.id != null) {
-          this.selectedNodes.add(node.id);
-        } else {
-          this.selectedSingleNode = node;
+
+      // Init Node from data without making it the root of the tree
+      initFromData(data) {
+        const addNode = nodeData => {
+          this.setData(nodeData);
+          if (isNodeRecordWithChildren(nodeData) && nodeData.children.length) {
+            addChildren(nodeData.children);
+          }
+        };
+        const addChildren = childrenData => {
+          for (const child of childrenData) {
+            const node = this.createNode();
+            node.initFromData(child);
+            this.addChild(node);
+          }
+        };
+        addNode(data);
+      }
+      setParent(parent) {
+        this.parent = parent;
+        this.tree = parent.tree;
+        this.tree?.addNodeToIndex(this);
+      }
+      doRemoveChild(node) {
+        this.children.splice(this.getChildIndex(node), 1);
+        this.tree?.removeNodeFromIndex(node);
+      }
+      getNodeClass() {
+        return this.nodeClass || this?.tree?.nodeClass || Node;
+      }
+      createNode(nodeData) {
+        const nodeClass = this.getNodeClass();
+        return new nodeClass(nodeData);
+      }
+
+      // Load children data from nodeInfo if it has children
+      loadChildrenFromData(nodeInfo) {
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+          this.loadFromData(nodeInfo.children);
         }
       }
     }
@@ -2634,7 +2724,7 @@ var jqtree = (function (exports) {
 
     const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
     const PARAM_IS_EMPTY = "Parameter is empty: ";
-    class JqTreeWidget extends MouseWidget {
+    class JqTreeWidget extends SimpleWidget {
       static defaults = {
         animationSpeed: "fast",
         autoEscape: true,
@@ -2740,7 +2830,7 @@ var jqtree = (function (exports) {
         return this.element;
       }
       refresh() {
-        this._refreshElements(null);
+        this.refreshElements(null);
         return this.element;
       }
       getNodeById(nodeId) {
@@ -2785,7 +2875,7 @@ var jqtree = (function (exports) {
           return [slide, onFinished];
         };
         const [slide, onFinished] = parseParams();
-        this._openNode(node, slide, onFinished);
+        this.openNodeInternal(node, slide, onFinished);
         return this.element;
       }
       closeNode(node, slideParam) {
@@ -2809,7 +2899,7 @@ var jqtree = (function (exports) {
       addNodeAfter(newNodeInfo, existingNode) {
         const newNode = existingNode.addAfter(newNodeInfo);
         if (newNode) {
-          this._refreshElements(existingNode.parent);
+          this.refreshElements(existingNode.parent);
         }
         return newNode;
       }
@@ -2819,7 +2909,7 @@ var jqtree = (function (exports) {
         }
         const newNode = existingNode.addBefore(newNodeInfo);
         if (newNode) {
-          this._refreshElements(existingNode.parent);
+          this.refreshElements(existingNode.parent);
         }
         return newNode;
       }
@@ -2829,7 +2919,7 @@ var jqtree = (function (exports) {
         }
         const newNode = existingNode.addParent(newNodeInfo);
         if (newNode) {
-          this._refreshElements(newNode.parent);
+          this.refreshElements(newNode.parent);
         }
         return newNode;
       }
@@ -2844,19 +2934,19 @@ var jqtree = (function (exports) {
 
         const parent = node.parent;
         node.remove();
-        this._refreshElements(parent);
+        this.refreshElements(parent);
         return this.element;
       }
       appendNode(newNodeInfo, parentNodeParam) {
         const parentNode = parentNodeParam || this.tree;
         const node = parentNode.append(newNodeInfo);
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
         return node;
       }
       prependNode(newNodeInfo, parentNodeParam) {
         const parentNode = parentNodeParam ?? this.tree;
         const node = parentNode.prepend(newNodeInfo);
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
         return node;
       }
       updateNode(node, data) {
@@ -2877,7 +2967,7 @@ var jqtree = (function (exports) {
             node.loadFromData(data.children);
           }
         }
-        this._refreshElements(node);
+        this.refreshElements(node);
         return this.element;
       }
       isSelectedNodeInSubtree(subtree) {
@@ -2898,7 +2988,7 @@ var jqtree = (function (exports) {
         const positionIndex = getPosition(position);
         if (positionIndex !== undefined) {
           this.tree.moveNode(node, targetNode, positionIndex);
-          this._refreshElements(null);
+          this.refreshElements(null);
         }
         return this.element;
       }
@@ -2911,7 +3001,7 @@ var jqtree = (function (exports) {
         }
         this.selectNodeHandler.addToSelection(node);
         this.openParents(node);
-        this._getNodeElementForNode(node).select(mustSetFocus === undefined ? true : mustSetFocus);
+        this.getNodeElementForNode(node).select(mustSetFocus === undefined ? true : mustSetFocus);
         this.saveState();
         return this.element;
       }
@@ -2929,7 +3019,7 @@ var jqtree = (function (exports) {
           throw Error(NODE_PARAM_IS_EMPTY);
         }
         this.selectNodeHandler.removeFromSelection(node);
-        this._getNodeElementForNode(node).deselect();
+        this.getNodeElementForNode(node).deselect();
         this.saveState();
         return this.element;
       }
@@ -2937,9 +3027,7 @@ var jqtree = (function (exports) {
         if (!node) {
           throw Error(NODE_PARAM_IS_EMPTY);
         }
-        const nodeTop = jQuery(node.element).offset()?.top ?? 0;
-        const treeTop = this.$el.offset()?.top ?? 0;
-        const top = nodeTop - treeTop;
+        const top = getOffsetTop(node.element) - getOffsetTop(this.$el.get(0));
         this.scrollHandler.scrollToY(top);
         return this.element;
       }
@@ -2948,7 +3036,7 @@ var jqtree = (function (exports) {
       }
       setState(state) {
         this.saveStateHandler.setInitialState(state);
-        this._refreshElements(null);
+        this.refreshElements(null);
         return this.element;
       }
       setOption(option, value) {
@@ -2972,12 +3060,7 @@ var jqtree = (function (exports) {
       getVersion() {
         return version;
       }
-      _triggerEvent(eventName, values) {
-        const event = jQuery.Event(eventName, values);
-        this.element.trigger(event);
-        return event;
-      }
-      _openNode(node) {
+      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) => {
@@ -3006,33 +3089,30 @@ var jqtree = (function (exports) {
       Redraw the tree or part of the tree.
        from_node: redraw this subtree
       */
-      _refreshElements(fromNode) {
+      refreshElements(fromNode) {
         const mustSetFocus = this.isFocusOnTree();
         const mustSelect = fromNode ? this.isSelectedNodeInSubtree(fromNode) : false;
         this.renderer.render(fromNode);
         if (mustSelect) {
           this.selectCurrentNode(mustSetFocus);
         }
-        this._triggerEvent("tree.refresh");
+        this.triggerEvent("tree.refresh");
       }
-      _getNodeElementForNode(node) {
+      getNodeElementForNode(node) {
         if (node.isFolder()) {
           return this.createFolderElement(node);
         } else {
           return this.createNodeElement(node);
         }
       }
-      _getNodeElement(element) {
+      getNodeElement(element) {
         const node = this.getNode(element);
         if (node) {
-          return this._getNodeElementForNode(node);
+          return this.getNodeElementForNode(node);
         } else {
           return null;
         }
       }
-      _getScrollLeft() {
-        return this.scrollHandler.getScrollLeft();
-      }
       init() {
         super.init();
         this.element = this.$el;
@@ -3043,19 +3123,20 @@ var jqtree = (function (exports) {
         }
         this.connectHandlers();
         this.initData();
-        this.element.on("click", this.handleClick);
-        this.element.on("dblclick", this.handleDblclick);
-        if (this.options.useContextMenu) {
-          this.element.on("contextmenu", this.handleContextmenu);
-        }
       }
       deinit() {
         this.element.empty();
         this.element.off();
         this.keyHandler.deinit();
+        this.mouseHandler.deinit();
         this.tree = new Node({}, true);
         super.deinit();
       }
+      triggerEvent(eventName, values) {
+        const event = jQuery.Event(eventName, values);
+        this.element.trigger(event);
+        return event;
+      }
       mouseCapture(positionInfo) {
         if (this.options.dragAndDrop) {
           return this.dndHandler.mouseCapture(positionInfo);
@@ -3087,9 +3168,6 @@ var jqtree = (function (exports) {
           return false;
         }
       }
-      getMouseDelay() {
-        return this.options.startDndDelay ?? 0;
-      }
       initData() {
         if (this.options.data) {
           this.doLoadData(this.options.data, null);
@@ -3151,7 +3229,7 @@ var jqtree = (function (exports) {
         const doInit = () => {
           if (!this.isInitialized) {
             this.isInitialized = true;
-            this._triggerEvent("tree.init");
+            this.triggerEvent("tree.init");
           }
         };
         if (!this.options.nodeClass) {
@@ -3161,7 +3239,7 @@ var jqtree = (function (exports) {
         this.selectNodeHandler.clear();
         this.tree.loadFromData(data);
         const mustLoadOnDemand = this.setInitialState();
-        this._refreshElements(null);
+        this.refreshElements(null);
         if (!mustLoadOnDemand) {
           doInit();
         } else {
@@ -3238,7 +3316,7 @@ var jqtree = (function (exports) {
           let loadingCount = 0;
           const loadAndOpenNode = node => {
             loadingCount += 1;
-            this._openNode(node, false, () => {
+            this.openNodeInternal(node, false, () => {
               loadingCount -= 1;
               openNodes();
             });
@@ -3251,7 +3329,7 @@ var jqtree = (function (exports) {
                 }
                 return false;
               } else {
-                this._openNode(node, false);
+                this.openNodeInternal(node, false);
                 return level !== maxLevel;
               }
             });
@@ -3276,58 +3354,6 @@ var jqtree = (function (exports) {
           return 0;
         }
       }
-      handleClick = e => {
-        const clickTarget = this.getClickTarget(e.target);
-        if (clickTarget) {
-          if (clickTarget.type === "button") {
-            this.toggle(clickTarget.node, this.options.slide);
-            e.preventDefault();
-            e.stopPropagation();
-          } else if (clickTarget.type === "label") {
-            const node = clickTarget.node;
-            const event = this._triggerEvent("tree.click", {
-              node,
-              click_event: e
-            });
-            if (!event.isDefaultPrevented()) {
-              this.doSelectNode(node);
-            }
-          }
-        }
-      };
-      handleDblclick = e => {
-        const clickTarget = this.getClickTarget(e.target);
-        if (clickTarget?.type === "label") {
-          this._triggerEvent("tree.dblclick", {
-            node: clickTarget.node,
-            click_event: e
-          });
-        }
-      };
-      getClickTarget(element) {
-        const button = element.closest(".jqtree-toggler");
-        if (button) {
-          const node = this.getNode(button);
-          if (node) {
-            return {
-              type: "button",
-              node
-            };
-          }
-        } else {
-          const jqTreeElement = element.closest(".jqtree-element");
-          if (jqTreeElement) {
-            const node = this.getNode(jqTreeElement);
-            if (node) {
-              return {
-                type: "label",
-                node
-              };
-            }
-          }
-        }
-        return null;
-      }
       getNode(element) {
         const liElement = element.closest("li.jqtree_common");
         if (liElement) {
@@ -3336,22 +3362,6 @@ var jqtree = (function (exports) {
           return null;
         }
       }
-      handleContextmenu = e => {
-        const div = e.target.closest("ul.jqtree-tree .jqtree-element");
-        if (div) {
-          const node = this.getNode(div);
-          if (node) {
-            e.preventDefault();
-            e.stopPropagation();
-            this._triggerEvent("tree.contextmenu", {
-              node,
-              click_event: e
-            });
-            return false;
-          }
-        }
-        return null;
-      };
       saveState() {
         if (this.options.saveState) {
           this.saveStateHandler.saveState();
@@ -3360,7 +3370,7 @@ var jqtree = (function (exports) {
       selectCurrentNode(mustSetFocus) {
         const node = this.getSelectedNode();
         if (node) {
-          const nodeElement = this._getNodeElementForNode(node);
+          const nodeElement = this.getNodeElementForNode(node);
           if (nodeElement) {
             nodeElement.select(mustSetFocus);
           }
@@ -3426,7 +3436,7 @@ var jqtree = (function (exports) {
         if (this.selectNodeHandler.isNodeSelected(node)) {
           if (selectOptions.mustToggle) {
             this.deselectCurrentNode();
-            this._triggerEvent("tree.select", {
+            this.triggerEvent("tree.select", {
               node: null,
               previous_node: node
             });
@@ -3435,7 +3445,7 @@ var jqtree = (function (exports) {
           const deselectedNode = this.getSelectedNode() || null;
           this.deselectCurrentNode();
           this.addToSelection(node, selectOptions.mustSetFocus);
-          this._triggerEvent("tree.select", {
+          this.triggerEvent("tree.select", {
             node,
             deselected_node: deselectedNode
           });
@@ -3455,7 +3465,7 @@ var jqtree = (function (exports) {
             this.dndHandler.refresh();
           }
         }
-        this._triggerEvent("tree.load_data", {
+        this.triggerEvent("tree.load_data", {
           tree_data: data,
           parent_node: parentNode
         });
@@ -3470,7 +3480,7 @@ var jqtree = (function (exports) {
         parentNode.loadFromData(data);
         parentNode.load_on_demand = false;
         parentNode.is_loading = false;
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
       }
       doLoadDataFromUrl(urlInfoParam, parentNode, onFinished) {
         const urlInfo = urlInfoParam || this.getDataUrlInfo(parentNode);
@@ -3481,7 +3491,7 @@ var jqtree = (function (exports) {
         let onFinished = arguments.length > 2 ? arguments[2] : undefined;
         node.is_loading = true;
         this.doLoadDataFromUrl(null, node, () => {
-          this._openNode(node, slide, onFinished);
+          this.openNodeInternal(node, slide, onFinished);
         });
       }
       containsElement(element) {
@@ -3501,6 +3511,7 @@ var jqtree = (function (exports) {
           dragAndDrop,
           keyboardSupport,
           onCanMove,
+          onCanMoveTo,
           onCreateLi,
           onDragMove,
           onDragStop,
@@ -3518,20 +3529,20 @@ var jqtree = (function (exports) {
           tabIndex
         } = this.options;
         const closeNode = this.closeNode.bind(this);
-        const getNodeElement = this._getNodeElement.bind(this);
-        const getNodeElementForNode = this._getNodeElementForNode.bind(this);
+        const getNodeElement = this.getNodeElement.bind(this);
+        const getNodeElementForNode = this.getNodeElementForNode.bind(this);
         const getNodeById = this.getNodeById.bind(this);
-        const getScrollLeft = this._getScrollLeft.bind(this);
         const getSelectedNode = this.getSelectedNode.bind(this);
         const getTree = this.getTree.bind(this);
         const isFocusOnTree = this.isFocusOnTree.bind(this);
         const loadData = this.loadData.bind(this);
-        const openNode = this._openNode.bind(this);
-        const refreshElements = this._refreshElements.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 triggerEvent = this._triggerEvent.bind(this);
+        const treeElement = this.element.get(0);
+        const triggerEvent = this.triggerEvent.bind(this);
         const selectNodeHandler = new SelectNodeHandler({
           getNodeById
         });
@@ -3539,12 +3550,13 @@ var jqtree = (function (exports) {
         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,
+          treeElement,
           triggerEvent
         });
         const saveStateHandler = new SaveStateHandler({
@@ -3559,6 +3571,11 @@ var jqtree = (function (exports) {
           removeFromSelection,
           saveState
         });
+        const scrollHandler = new ScrollHandler({
+          refreshHitAreas,
+          treeElement
+        });
+        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
         const dndHandler = new DragAndDropHandler({
           autoEscape,
           getNodeElement,
@@ -3566,6 +3583,7 @@ var jqtree = (function (exports) {
           getScrollLeft,
           getTree,
           onCanMove,
+          onCanMoveTo,
           onDragMove,
           onDragStop,
           onIsMoveHandle,
@@ -3573,13 +3591,9 @@ var jqtree = (function (exports) {
           openNode,
           refreshElements,
           slide,
-          $treeElement,
+          treeElement,
           triggerEvent
         });
-        const scrollHandler = new ScrollHandler({
-          refreshHitAreas,
-          $treeElement
-        });
         const keyHandler = new KeyHandler({
           closeNode,
           getSelectedNode,
@@ -3602,9 +3616,28 @@ var jqtree = (function (exports) {
           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;
@@ -3612,11 +3645,11 @@ var jqtree = (function (exports) {
       }
       createFolderElement(node) {
         const closedIconElement = this.renderer.closedIconElement;
-        const getScrollLeft = this._getScrollLeft.bind(this);
+        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);
+        const triggerEvent = this.triggerEvent.bind(this);
         return new FolderElement({
           closedIconElement,
           getScrollLeft,
@@ -3628,7 +3661,7 @@ var jqtree = (function (exports) {
         });
       }
       createNodeElement(node) {
-        const getScrollLeft = this._getScrollLeft.bind(this);
+        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(this.scrollHandler);
         const tabIndex = this.options.tabIndex;
         const $treeElement = this.element;
         return new NodeElement({