jqtree 1.8.8 → 1.8.9

package/src/tree.jquery.ts

@@ -6,10 +6,9 @@ import { JQTreeOptions } from "./jqtreeOptions";
 import KeyHandler from "./keyHandler";
 import MouseHandler from "./mouseHandler";
 import { PositionInfo } from "./mouseUtils";
-import { Node } from "./node";
+import { Node, Position } from "./node";
 import NodeElement from "./nodeElement";
 import FolderElement from "./nodeElement/folderElement";
-import { getPosition } from "./position";
 import SaveStateHandler, { SavedState } from "./saveStateHandler";
 import ScrollHandler from "./scrollHandler";
 import SelectNodeHandler from "./selectNodeHandler";
@@ -78,1215 +77,1215 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
     private selectNodeHandler: SelectNodeHandler;
     private tree: Node;
 
-    private connectHandlers() {
-        const {
-            autoEscape,
-            buttonLeft,
-            closedIcon,
-            dataFilter,
-            dragAndDrop,
-            keyboardSupport,
-            onCanMove,
-            onCanMoveTo,
-            onCreateLi,
-            onDragMove,
-            onDragStop,
-            onGetStateFromStorage,
-            onIsMoveHandle,
-            onLoadFailed,
-            onLoading,
-            onSetStateFromStorage,
-            openedIcon,
-            openFolderDelay,
-            rtl,
-            saveState,
-            showEmptyFolder,
-            slide,
-            tabIndex,
-        } = this.options;
+    public addNodeAfter(
+        newNodeInfo: NodeData,
+        existingNode: Node,
+    ): Node | null {
+        const newNode = existingNode.addAfter(newNodeInfo);
 
-        const closeNode = this.closeNode.bind(this);
-        const getNodeElement = this.getNodeElement.bind(this);
-        const getNodeElementForNode = this.getNodeElementForNode.bind(this);
-        const getNodeById = this.getNodeById.bind(this);
-        const getSelectedNode = this.getSelectedNode.bind(this);
-        const getTree = this.getTree.bind(this);
-        const isFocusOnTree = this.isFocusOnTree.bind(this);
-        const loadData = this.loadData.bind(this);
-        const openNode = this.openNodeInternal.bind(this);
-        const refreshElements = this.refreshElements.bind(this);
-        const refreshHitAreas = this.refreshHitAreas.bind(this);
-        const selectNode = this.selectNode.bind(this);
-        const $treeElement = this.element;
-        const treeElement = this.element.get(0) as HTMLElement;
-        const triggerEvent = this.triggerEvent.bind(this);
+        if (newNode) {
+            this.refreshElements(existingNode.parent);
+        }
 
-        const selectNodeHandler = new SelectNodeHandler({
-            getNodeById,
-        });
+        return newNode;
+    }
 
-        const addToSelection =
-            selectNodeHandler.addToSelection.bind(selectNodeHandler);
-        const getSelectedNodes =
-            selectNodeHandler.getSelectedNodes.bind(selectNodeHandler);
-        const isNodeSelected =
-            selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
-        const removeFromSelection =
-            selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
-        const getMouseDelay = () => this.options.startDndDelay ?? 0;
+    public addNodeBefore(
+        newNodeInfo: NodeData,
+        existingNode?: Node,
+    ): Node | null {
+        if (!existingNode) {
+            throw Error(PARAM_IS_EMPTY + "existingNode");
+        }
 
-        const dataLoader = new DataLoader({
-            dataFilter,
-            loadData,
-            onLoadFailed,
-            onLoading,
-            treeElement,
-            triggerEvent,
-        });
+        const newNode = existingNode.addBefore(newNodeInfo);
 
-        const saveStateHandler = new SaveStateHandler({
-            addToSelection,
-            getNodeById,
-            getSelectedNodes,
-            getTree,
-            onGetStateFromStorage,
-            onSetStateFromStorage,
-            openNode,
-            refreshElements,
-            removeFromSelection,
-            saveState,
-        });
+        if (newNode) {
+            this.refreshElements(existingNode.parent);
+        }
 
-        const scrollHandler = new ScrollHandler({
-            refreshHitAreas,
-            treeElement,
-        });
+        return newNode;
+    }
 
-        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
+    public addParentNode(
+        newNodeInfo: NodeData,
+        existingNode?: Node,
+    ): Node | null {
+        if (!existingNode) {
+            throw Error(PARAM_IS_EMPTY + "existingNode");
+        }
 
-        const dndHandler = new DragAndDropHandler({
-            autoEscape,
-            getNodeElement,
-            getNodeElementForNode,
-            getScrollLeft,
-            getTree,
-            onCanMove,
-            onCanMoveTo,
-            onDragMove,
-            onDragStop,
-            onIsMoveHandle,
-            openFolderDelay,
-            openNode,
-            refreshElements,
-            slide,
-            treeElement,
-            triggerEvent,
-        });
+        const newNode = existingNode.addParent(newNodeInfo);
 
-        const keyHandler = new KeyHandler({
-            closeNode,
-            getSelectedNode,
-            isFocusOnTree,
-            keyboardSupport,
-            openNode,
-            selectNode,
-        });
+        if (newNode) {
+            this.refreshElements(newNode.parent);
+        }
 
-        const renderer = new ElementsRenderer({
-            $element: $treeElement,
-            autoEscape,
-            buttonLeft,
-            closedIcon,
-            dragAndDrop,
-            getTree,
-            isNodeSelected,
-            onCreateLi,
-            openedIcon,
-            rtl,
-            showEmptyFolder,
-            tabIndex,
-        });
+        return newNode;
+    }
 
-        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);
+    public addToSelection(node?: Node, mustSetFocus?: boolean): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
+        }
 
-        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.selectNodeHandler.addToSelection(node);
+        this.openParents(node);
 
-        this.dataLoader = dataLoader;
-        this.dndHandler = dndHandler;
-        this.keyHandler = keyHandler;
-        this.mouseHandler = mouseHandler;
-        this.renderer = renderer;
-        this.saveStateHandler = saveStateHandler;
-        this.scrollHandler = scrollHandler;
-        this.selectNodeHandler = selectNodeHandler;
-    }
+        this.getNodeElementForNode(node).select(mustSetFocus ?? true);
 
-    private containsElement(element: HTMLElement): boolean {
-        const node = this.getNode(element);
+        this.saveState();
 
-        return node != null && node.tree === this.tree;
+        return this.element;
     }
 
-    private createFolderElement(node: Node) {
-        const closedIconElement = this.renderer.closedIconElement;
-        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(
-            this.scrollHandler,
-        );
-        const openedIconElement = this.renderer.openedIconElement;
-        const tabIndex = this.options.tabIndex;
-        const treeElement = this.element.get(0) as HTMLElement;
-        const triggerEvent = this.triggerEvent.bind(this);
+    public appendNode(newNodeInfo: NodeData, parentNodeParam?: Node): Node {
+        const parentNode = parentNodeParam ?? this.tree;
 
-        return new FolderElement({
-            closedIconElement,
-            getScrollLeft,
-            node,
-            openedIconElement,
-            tabIndex,
-            treeElement,
-            triggerEvent,
-        });
-    }
+        const node = parentNode.append(newNodeInfo);
 
-    private createNodeElement(node: Node) {
-        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(
-            this.scrollHandler,
-        );
-        const tabIndex = this.options.tabIndex;
-        const treeElement = this.element.get(0) as HTMLElement;
+        this.refreshElements(parentNode);
 
-        return new NodeElement({
-            getScrollLeft,
-            node,
-            tabIndex,
-            treeElement,
-        });
+        return node;
     }
 
-    private deselectCurrentNode(): void {
-        const node = this.getSelectedNode();
-        if (node) {
-            this.removeFromSelection(node);
+    public closeNode(node?: Node, slideParam?: boolean | null): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
         }
-    }
 
-    private deselectNodes(parentNode: Node): void {
-        const selectedNodesUnderParent =
-            this.selectNodeHandler.getSelectedNodesUnder(parentNode);
-        for (const n of selectedNodesUnderParent) {
-            this.selectNodeHandler.removeFromSelection(n);
+        const slide = slideParam ?? this.options.slide;
+
+        if (node.isFolder() || node.isEmptyFolder) {
+            this.createFolderElement(node).close(
+                slide,
+                this.options.animationSpeed,
+            );
+
+            this.saveState();
         }
+
+        return this.element;
     }
 
-    private doLoadData(data: NodeData[] | null, parentNode: Node | null): void {
-        if (data) {
-            if (parentNode) {
-                this.deselectNodes(parentNode);
-                this.loadSubtree(data, parentNode);
-            } else {
-                this.initTree(data);
-            }
+    public deinit(): void {
+        this.element.empty();
+        this.element.off();
 
-            if (this.isDragging()) {
-                this.dndHandler.refresh();
-            }
-        }
+        this.keyHandler.deinit();
+        this.mouseHandler.deinit();
 
-        this.triggerEvent("tree.load_data", {
-            parent_node: parentNode,
-            tree_data: data,
-        });
-    }
+        this.tree = new Node({}, true);
 
-    private doLoadDataFromUrl(
-        urlInfoParam: JQuery.AjaxSettings | null | string,
-        parentNode: Node | null,
-        onFinished: HandleFinishedLoading | null,
-    ): void {
-        const urlInfo = urlInfoParam ?? this.getDataUrlInfo(parentNode);
+        super.deinit();
+    }
 
-        this.dataLoader.loadFromUrl(urlInfo, parentNode, onFinished);
+    public getNodeByCallback(callback: (node: Node) => boolean): Node | null {
+        return this.tree.getNodeByCallback(callback);
     }
 
-    private doSelectNode(
-        node: Node | null,
-        optionsParam?: SelectNodeOptions,
-    ): void {
-        const saveState = (): void => {
-            if (this.options.saveState) {
-                this.saveStateHandler.saveState();
-            }
-        };
+    public getNodeByHtmlElement(
+        inputElement: HTMLElement | JQuery,
+    ): Node | null {
+        const element =
+            inputElement instanceof HTMLElement
+                ? inputElement
+                : inputElement[0];
 
-        if (!node) {
-            // Called with empty node -> deselect current node
-            this.deselectCurrentNode();
-            saveState();
-            return;
+        if (!element) {
+            return null;
         }
-        const defaultOptions = { mustSetFocus: true, mustToggle: true };
-        const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };
-
-        const canSelect = (): boolean => {
-            if (this.options.onCanSelectNode) {
-                return (
-                    this.options.selectable &&
-                    this.options.onCanSelectNode(node)
-                );
-            } else {
-                return this.options.selectable;
-            }
-        };
 
-        if (!canSelect()) {
-            return;
-        }
+        return this.getNode(element);
+    }
 
-        if (this.selectNodeHandler.isNodeSelected(node)) {
-            if (selectOptions.mustToggle) {
-                this.deselectCurrentNode();
-                this.triggerEvent("tree.select", {
-                    node: null,
-                    previous_node: node,
-                });
-            }
-        } else {
-            const deselectedNode = this.getSelectedNode() || null;
-            this.deselectCurrentNode();
-            this.addToSelection(node, selectOptions.mustSetFocus);
+    public getNodeById(nodeId: NodeId): Node | null {
+        return this.tree.getNodeById(nodeId);
+    }
 
-            this.triggerEvent("tree.select", {
-                deselected_node: deselectedNode,
-                node,
-            });
-            this.openParents(node);
-        }
+    public getNodeByName(name: string): Node | null {
+        return this.tree.getNodeByName(name);
+    }
 
-        saveState();
+    public getNodeByNameMustExist(name: string): Node {
+        return this.tree.getNodeByNameMustExist(name);
     }
 
-    private getAutoOpenMaxLevel(): number {
-        if (this.options.autoOpen === true) {
-            return -1;
-        } else if (typeof this.options.autoOpen === "number") {
-            return this.options.autoOpen;
-        } else if (typeof this.options.autoOpen === "string") {
-            return parseInt(this.options.autoOpen, 10);
-        } else {
-            return 0;
-        }
+    public getNodesByProperty(key: string, value: unknown): Node[] {
+        return this.tree.getNodesByProperty(key, value);
     }
 
-    private getDataUrlInfo(node: Node | null): JQuery.AjaxSettings | null {
-        const dataUrl =
-            this.options.dataUrl ?? (this.element.data("url") as null | string);
+    public getSelectedNode(): false | Node {
+        return this.selectNodeHandler.getSelectedNode();
+    }
 
-        const getUrlFromString = (url: string): JQuery.AjaxSettings => {
-            const urlInfo: JQuery.AjaxSettings = { url };
+    public getSelectedNodes(): Node[] {
+        return this.selectNodeHandler.getSelectedNodes();
+    }
 
-            setUrlInfoData(urlInfo);
+    public getState(): null | SavedState {
+        return this.saveStateHandler.getState();
+    }
 
-            return urlInfo;
-        };
+    public getStateFromStorage(): null | SavedState {
+        return this.saveStateHandler.getStateFromStorage();
+    }
 
-        const setUrlInfoData = (urlInfo: JQuery.AjaxSettings): void => {
-            if (node?.id) {
-                // Load on demand of a subtree; add node parameter
-                const data = { node: node.id };
-                urlInfo.data = data;
-            } else {
-                // Add selected_node parameter
-                const selectedNodeId = this.getNodeIdToBeSelected();
-                if (selectedNodeId) {
-                    const data = { selected_node: selectedNodeId };
-                    urlInfo.data = data;
-                }
-            }
-        };
+    public getTree(): Node {
+        return this.tree;
+    }
 
-        if (typeof dataUrl === "function") {
-            return dataUrl(node);
-        } else if (typeof dataUrl === "string") {
-            return getUrlFromString(dataUrl);
-        } else if (dataUrl && typeof dataUrl === "object") {
-            setUrlInfoData(dataUrl);
-            return dataUrl;
-        } else {
-            return null;
-        }
+    public getVersion(): string {
+        return __version__;
     }
 
-    private getDefaultClosedIcon(): string {
-        if (this.options.rtl) {
-            // triangle to the left
-            return "&#x25c0;";
-        } else {
-            // triangle to the right
-            return "&#x25ba;";
+    public init(): void {
+        super.init();
+
+        this.element = this.$el;
+        this.isInitialized = false;
+
+        this.options.rtl = this.getRtlOption();
+
+        if (this.options.closedIcon == null) {
+            this.options.closedIcon = this.getDefaultClosedIcon();
         }
+
+        this.connectHandlers();
+
+        this.initData();
     }
 
-    private getNode(element: HTMLElement): Node | null {
-        const liElement = element.closest("li.jqtree_common");
+    public isDragging(): boolean {
+        return this.dndHandler.isDragging;
+    }
 
-        if (liElement) {
-            return jQuery(liElement).data("node") as Node;
-        } else {
-            return null;
+    public isNodeSelected(node?: Node): boolean {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
         }
+
+        return this.selectNodeHandler.isNodeSelected(node);
     }
 
-    private getNodeElement(element: HTMLElement): NodeElement | null {
-        const node = this.getNode(element);
-        if (node) {
-            return this.getNodeElementForNode(node);
-        } else {
-            return null;
-        }
+    public loadData(data: NodeData[], parentNode: Node | null): JQuery {
+        this.doLoadData(data, parentNode);
+        return this.element;
     }
 
-    private getNodeElementForNode(node: Node): NodeElement {
-        if (node.isFolder()) {
-            return this.createFolderElement(node);
+    /*
+    signatures:
+    - loadDataFromUrl(url, parent_node=null, on_finished=null)
+        loadDataFromUrl('/my_data');
+        loadDataFromUrl('/my_data', node1);
+        loadDataFromUrl('/my_data', node1, function() { console.log('finished'); });
+        loadDataFromUrl('/my_data', null, function() { console.log('finished'); });
+
+    - loadDataFromUrl(parent_node=null, on_finished=null)
+        loadDataFromUrl();
+        loadDataFromUrl(node1);
+        loadDataFromUrl(null, function() { console.log('finished'); });
+        loadDataFromUrl(node1, function() { console.log('finished'); });
+    */
+    public loadDataFromUrl(
+        param1: Node | null | string,
+        param2?: HandleFinishedLoading | Node | null,
+        param3?: HandleFinishedLoading,
+    ): JQuery {
+        if (typeof param1 === "string") {
+            // first parameter is url
+            this.doLoadDataFromUrl(
+                param1,
+                param2 as Node | null,
+                param3 ?? null,
+            );
         } else {
-            return this.createNodeElement(node);
+            // first parameter is not url
+            this.doLoadDataFromUrl(
+                null,
+                param1,
+                param2 as HandleFinishedLoading | null,
+            );
         }
+
+        return this.element;
     }
 
-    private getNodeIdToBeSelected(): NodeId | null {
-        if (this.options.saveState) {
-            return this.saveStateHandler.getNodeIdToBeSelected();
-        } else {
-            return null;
+    public moveDown(): JQuery {
+        const selectedNode = this.getSelectedNode();
+        if (selectedNode) {
+            this.keyHandler.moveDown(selectedNode);
         }
+
+        return this.element;
     }
 
-    private getRtlOption(): boolean {
-        if (this.options.rtl != null) {
-            return this.options.rtl;
-        } else {
-            const dataRtl = this.element.data("rtl") as unknown;
-
-            if (
-                dataRtl !== null &&
-                dataRtl !== false &&
-                dataRtl !== undefined
-            ) {
-                return true;
-            } else {
-                return false;
-            }
+    public moveNode(
+        node?: Node,
+        targetNode?: Node,
+        position?: Position,
+    ): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
         }
-    }
-
-    private initData(): void {
-        if (this.options.data) {
-            this.doLoadData(this.options.data, null);
-        } else {
-            const dataUrl = this.getDataUrlInfo(null);
 
-            if (dataUrl) {
-                this.doLoadDataFromUrl(null, null, null);
-            } else {
-                this.doLoadData([], null);
-            }
+        if (!targetNode) {
+            throw Error(PARAM_IS_EMPTY + "targetNode");
         }
-    }
 
-    private initTree(data: NodeData[]): void {
-        const doInit = (): void => {
-            if (!this.isInitialized) {
-                this.isInitialized = true;
-                this.triggerEvent("tree.init");
-            }
-        };
-
-        this.tree = new this.options.nodeClass(
-            null,
-            true,
-            this.options.nodeClass,
-        );
+        if (!position) {
+            throw Error(PARAM_IS_EMPTY + "position");
+        }
 
-        this.selectNodeHandler.clear();
+        this.tree.moveNode(node, targetNode, position);
+        this.refreshElements(null);
 
-        this.tree.loadFromData(data);
+        return this.element;
+    }
 
-        const mustLoadOnDemand = this.setInitialState();
+    public moveUp(): JQuery {
+        const selectedNode = this.getSelectedNode();
+        if (selectedNode) {
+            this.keyHandler.moveUp(selectedNode);
+        }
 
-        this.refreshElements(null);
+        return this.element;
+    }
 
-        if (!mustLoadOnDemand) {
-            doInit();
-        } else {
-            // Load data on demand and then init the tree
-            this.setInitialStateOnDemand(doInit);
+    public openNode(
+        node?: Node,
+        param1?: boolean | OnFinishOpenNode,
+        param2?: OnFinishOpenNode,
+    ): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
         }
-    }
 
-    private isFocusOnTree(): boolean {
-        const activeElement = document.activeElement;
+        const parseParams = (): [boolean, OnFinishOpenNode | undefined] => {
+            let onFinished: null | OnFinishOpenNode;
+            let slide: boolean | null;
 
-        return Boolean(
-            activeElement &&
-                activeElement.tagName === "SPAN" &&
-                this.containsElement(activeElement as HTMLElement),
-        );
-    }
+            if (isFunction(param1)) {
+                onFinished = param1 as OnFinishOpenNode;
+                slide = null;
+            } else {
+                slide = param1 as boolean;
+                onFinished = param2 as OnFinishOpenNode;
+            }
 
-    private isSelectedNodeInSubtree(subtree: Node): boolean {
-        const selectedNode = this.getSelectedNode();
+            if (slide == null) {
+                slide = this.options.slide;
+            }
 
-        if (!selectedNode) {
-            return false;
-        } else {
-            return subtree === selectedNode || subtree.isParentOf(selectedNode);
-        }
-    }
+            return [slide, onFinished];
+        };
 
-    private loadFolderOnDemand(
-        node: Node,
-        slide = true,
-        onFinished?: OnFinishOpenNode,
-    ): void {
-        node.is_loading = true;
+        const [slide, onFinished] = parseParams();
 
-        this.doLoadDataFromUrl(null, node, () => {
-            this.openNodeInternal(node, slide, onFinished);
-        });
+        this.openNodeInternal(node, slide, onFinished);
+        return this.element;
     }
 
-    private loadSubtree(data: NodeData[], parentNode: Node): void {
-        parentNode.loadFromData(data);
+    public prependNode(newNodeInfo: NodeData, parentNodeParam?: Node): Node {
+        const parentNode = parentNodeParam ?? this.tree;
 
-        parentNode.load_on_demand = false;
-        parentNode.is_loading = false;
+        const node = parentNode.prepend(newNodeInfo);
 
         this.refreshElements(parentNode);
-    }
 
-    private mouseCapture(positionInfo: PositionInfo): boolean | null {
-        if (this.options.dragAndDrop) {
-            return this.dndHandler.mouseCapture(positionInfo);
-        } else {
-            return false;
-        }
+        return node;
     }
 
-    private mouseDrag(positionInfo: PositionInfo): boolean {
-        if (this.options.dragAndDrop) {
-            const result = this.dndHandler.mouseDrag(positionInfo);
+    public refresh(): JQuery {
+        this.refreshElements(null);
+        return this.element;
+    }
 
-            this.scrollHandler.checkScrolling(positionInfo);
-            return result;
-        } else {
-            return false;
-        }
+    public refreshHitAreas(): JQuery {
+        this.dndHandler.refresh();
+        return this.element;
     }
 
-    private mouseStart(positionInfo: PositionInfo): boolean {
-        if (this.options.dragAndDrop) {
-            return this.dndHandler.mouseStart(positionInfo);
-        } else {
-            return false;
-        }
+    public reload(onFinished: HandleFinishedLoading | null): JQuery {
+        this.doLoadDataFromUrl(null, null, onFinished);
+        return this.element;
     }
 
-    private mouseStop(positionInfo: PositionInfo): boolean {
-        if (this.options.dragAndDrop) {
-            this.scrollHandler.stopScrolling();
-            return this.dndHandler.mouseStop(positionInfo);
-        } else {
-            return false;
+    public removeFromSelection(node?: Node): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
         }
-    }
 
-    private openNodeInternal(
-        node: Node,
-        slide = true,
-        onFinished?: OnFinishOpenNode,
-    ): void {
-        const doOpenNode = (
-            _node: Node,
-            _slide: boolean,
-            _onFinished?: OnFinishOpenNode,
-        ): void => {
-            if (!node.children.length) {
-                return;
-            }
+        this.selectNodeHandler.removeFromSelection(node);
 
-            const folderElement = this.createFolderElement(_node);
-            folderElement.open(
-                _onFinished,
-                _slide,
-                this.options.animationSpeed,
-            );
-        };
+        this.getNodeElementForNode(node).deselect();
+        this.saveState();
 
-        if (node.isFolder() || node.isEmptyFolder) {
-            if (node.load_on_demand) {
-                this.loadFolderOnDemand(node, slide, onFinished);
-            } else {
-                let parent = node.parent;
+        return this.element;
+    }
 
-                while (parent) {
-                    // nb: do not open root element
-                    if (parent.parent) {
-                        doOpenNode(parent, false);
-                    }
-                    parent = parent.parent;
-                }
+    public removeNode(node?: Node): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
+        }
 
-                doOpenNode(node, slide, onFinished);
-                this.saveState();
-            }
+        if (!node.parent) {
+            throw Error("Node has no parent");
         }
-    }
 
-    private openParents(node: Node) {
+        this.selectNodeHandler.removeFromSelection(node, true); // including children
+
         const parent = node.parent;
+        node.remove();
+        this.refreshElements(parent);
 
-        if (parent?.parent && !parent.is_open) {
-            this.openNode(parent, false);
-        }
+        return this.element;
     }
 
-    /*
-    Redraw the tree or part of the tree.
-     from_node: redraw this subtree
-    */
-    private refreshElements(fromNode: Node | null): void {
-        const mustSetFocus = this.isFocusOnTree();
-        const mustSelect = fromNode
-            ? this.isSelectedNodeInSubtree(fromNode)
-            : false;
-
-        this.renderer.render(fromNode);
+    public scrollToNode(node?: Node): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
+        }
 
-        if (mustSelect) {
-            this.selectCurrentNode(mustSetFocus);
+        if (!node.element) {
+            return this.element;
         }
 
-        this.triggerEvent("tree.refresh");
-    }
+        const top =
+            getOffsetTop(node.element) -
+            getOffsetTop(this.$el.get(0) as HTMLElement);
 
-    private saveState(): void {
-        if (this.options.saveState) {
-            this.saveStateHandler.saveState();
-        }
+        this.scrollHandler.scrollToY(top);
+
+        return this.element;
     }
 
-    private selectCurrentNode(mustSetFocus: boolean): void {
-        const node = this.getSelectedNode();
-        if (node) {
-            const nodeElement = this.getNodeElementForNode(node);
-            nodeElement.select(mustSetFocus);
+    public selectNode(
+        node: Node | null,
+        optionsParam?: SelectNodeOptions,
+    ): JQuery {
+        this.doSelectNode(node, optionsParam);
+        return this.element;
+    }
+
+    public setOption(option: string, value: unknown): JQuery {
+        (this.options as unknown as Record<string, unknown>)[option] = value;
+        return this.element;
+    }
+
+    public setState(state?: SavedState): JQuery {
+        if (state) {
+            this.saveStateHandler.setInitialState(state);
+            this.refreshElements(null);
         }
+
+        return this.element;
     }
 
-    // Set initial state, either by restoring the state or auto-opening nodes
-    // result: must load nodes on demand?
-    private setInitialState(): boolean {
-        const restoreState = (): [boolean, boolean] => {
-            // result: is state restored, must load on demand?
-            if (!this.options.saveState) {
-                return [false, false];
-            } else {
-                const state = this.saveStateHandler.getStateFromStorage();
+    public toggle(node?: Node, slideParam: boolean | null = null): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
+        }
 
-                if (!state) {
-                    return [false, false];
-                } else {
-                    const mustLoadOnDemand =
-                        this.saveStateHandler.setInitialState(state);
+        const slide = slideParam ?? this.options.slide;
 
-                    // return true: the state is restored
-                    return [true, mustLoadOnDemand];
-                }
-            }
-        };
+        if (node.is_open) {
+            this.closeNode(node, slide);
+        } else {
+            this.openNode(node, slide);
+        }
 
-        const autoOpenNodes = (): boolean => {
-            // result: must load on demand?
-            if (this.options.autoOpen === false) {
-                return false;
-            }
+        return this.element;
+    }
 
-            const maxLevel = this.getAutoOpenMaxLevel();
-            let mustLoadOnDemand = false;
+    public toJson(): string {
+        return JSON.stringify(this.tree.getData());
+    }
 
-            this.tree.iterate((node: Node, level: number) => {
-                if (node.load_on_demand) {
-                    mustLoadOnDemand = true;
-                    return false;
-                } else if (!node.hasChildren()) {
-                    return false;
-                } else {
-                    node.is_open = true;
-                    return level !== maxLevel;
-                }
-            });
+    public updateNode(node?: Node, data?: NodeData): JQuery {
+        if (!node) {
+            throw Error(NODE_PARAM_IS_EMPTY);
+        }
 
-            return mustLoadOnDemand;
-        };
+        if (!data) {
+            return this.element;
+        }
 
-        let [isRestored, mustLoadOnDemand] = restoreState(); // eslint-disable-line prefer-const
+        const idIsChanged =
+            typeof data === "object" && data.id && data.id !== node.id;
 
-        if (!isRestored) {
-            mustLoadOnDemand = autoOpenNodes();
+        if (idIsChanged) {
+            this.tree.removeNodeFromIndex(node);
         }
 
-        return mustLoadOnDemand;
-    }
+        node.setData(data);
 
-    // Set the initial state for nodes that are loaded on demand
-    // Call cb_finished when done
-    private setInitialStateOnDemand(cbFinished: () => void): void {
-        const restoreState = (): boolean => {
-            if (!this.options.saveState) {
-                return false;
-            } else {
-                const state = this.saveStateHandler.getStateFromStorage();
+        if (idIsChanged) {
+            this.tree.addNodeToIndex(node);
+        }
 
-                if (!state) {
-                    return false;
-                } else {
-                    this.saveStateHandler.setInitialStateOnDemand(
-                        state,
-                        cbFinished,
-                    );
+        if (
+            typeof data === "object" &&
+            data.children &&
+            data.children instanceof Array
+        ) {
+            node.removeChildren();
 
-                    return true;
-                }
+            if (data.children.length) {
+                node.loadFromData(data.children as Node[]);
             }
-        };
+        }
 
-        const autoOpenNodes = (): void => {
-            const maxLevel = this.getAutoOpenMaxLevel();
-            let loadingCount = 0;
+        this.refreshElements(node);
 
-            const loadAndOpenNode = (node: Node): void => {
-                loadingCount += 1;
-                this.openNodeInternal(node, false, () => {
-                    loadingCount -= 1;
-                    openNodes();
-                });
-            };
+        return this.element;
+    }
 
-            const openNodes = (): void => {
-                this.tree.iterate((node: Node, level: number) => {
-                    if (node.load_on_demand) {
-                        if (!node.is_loading) {
-                            loadAndOpenNode(node);
-                        }
+    private connectHandlers() {
+        const {
+            autoEscape,
+            buttonLeft,
+            closedIcon,
+            dataFilter,
+            dragAndDrop,
+            keyboardSupport,
+            onCanMove,
+            onCanMoveTo,
+            onCreateLi,
+            onDragMove,
+            onDragStop,
+            onGetStateFromStorage,
+            onIsMoveHandle,
+            onLoadFailed,
+            onLoading,
+            onSetStateFromStorage,
+            openedIcon,
+            openFolderDelay,
+            rtl,
+            saveState,
+            showEmptyFolder,
+            slide,
+            tabIndex,
+        } = this.options;
 
-                        return false;
-                    } else {
-                        this.openNodeInternal(node, false);
+        const closeNode = this.closeNode.bind(this);
+        const getNodeElement = this.getNodeElement.bind(this);
+        const getNodeElementForNode = this.getNodeElementForNode.bind(this);
+        const getNodeById = this.getNodeById.bind(this);
+        const getSelectedNode = this.getSelectedNode.bind(this);
+        const getTree = this.getTree.bind(this);
+        const isFocusOnTree = this.isFocusOnTree.bind(this);
+        const loadData = this.loadData.bind(this);
+        const openNode = this.openNodeInternal.bind(this);
+        const refreshElements = this.refreshElements.bind(this);
+        const refreshHitAreas = this.refreshHitAreas.bind(this);
+        const selectNode = this.selectNode.bind(this);
+        const $treeElement = this.element;
+        const treeElement = this.element.get(0) as HTMLElement;
+        const triggerEvent = this.triggerEvent.bind(this);
 
-                        return level !== maxLevel;
-                    }
-                });
+        const selectNodeHandler = new SelectNodeHandler({
+            getNodeById,
+        });
 
-                if (loadingCount === 0) {
-                    cbFinished();
-                }
-            };
+        const addToSelection =
+            selectNodeHandler.addToSelection.bind(selectNodeHandler);
+        const getSelectedNodes =
+            selectNodeHandler.getSelectedNodes.bind(selectNodeHandler);
+        const isNodeSelected =
+            selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
+        const removeFromSelection =
+            selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
+        const getMouseDelay = () => this.options.startDndDelay ?? 0;
 
-            openNodes();
-        };
+        const dataLoader = new DataLoader({
+            dataFilter,
+            loadData,
+            onLoadFailed,
+            onLoading,
+            treeElement,
+            triggerEvent,
+        });
 
-        if (!restoreState()) {
-            autoOpenNodes();
-        }
-    }
+        const saveStateHandler = new SaveStateHandler({
+            addToSelection,
+            getNodeById,
+            getSelectedNodes,
+            getTree,
+            onGetStateFromStorage,
+            onSetStateFromStorage,
+            openNode,
+            refreshElements,
+            removeFromSelection,
+            saveState,
+        });
 
-    private triggerEvent(
-        eventName: string,
-        values?: Record<string, unknown>,
-    ): JQuery.Event {
-        const event = jQuery.Event(eventName, values);
-        this.element.trigger(event);
-        return event;
-    }
+        const scrollHandler = new ScrollHandler({
+            refreshHitAreas,
+            treeElement,
+        });
 
-    public addNodeAfter(
-        newNodeInfo: NodeData,
-        existingNode: Node,
-    ): Node | null {
-        const newNode = existingNode.addAfter(newNodeInfo);
+        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
 
-        if (newNode) {
-            this.refreshElements(existingNode.parent);
-        }
+        const dndHandler = new DragAndDropHandler({
+            autoEscape,
+            getNodeElement,
+            getNodeElementForNode,
+            getScrollLeft,
+            getTree,
+            onCanMove,
+            onCanMoveTo,
+            onDragMove,
+            onDragStop,
+            onIsMoveHandle,
+            openFolderDelay,
+            openNode,
+            refreshElements,
+            slide,
+            treeElement,
+            triggerEvent,
+        });
 
-        return newNode;
-    }
+        const keyHandler = new KeyHandler({
+            closeNode,
+            getSelectedNode,
+            isFocusOnTree,
+            keyboardSupport,
+            openNode,
+            selectNode,
+        });
 
-    public addNodeBefore(
-        newNodeInfo: NodeData,
-        existingNode?: Node,
-    ): Node | null {
-        if (!existingNode) {
-            throw Error(PARAM_IS_EMPTY + "existingNode");
-        }
+        const renderer = new ElementsRenderer({
+            $element: $treeElement,
+            autoEscape,
+            buttonLeft,
+            closedIcon,
+            dragAndDrop,
+            getTree,
+            isNodeSelected,
+            onCreateLi,
+            openedIcon,
+            rtl,
+            showEmptyFolder,
+            tabIndex,
+        });
 
-        const newNode = existingNode.addBefore(newNodeInfo);
+        const getNode = this.getNode.bind(this);
+        const onMouseCapture = this.mouseCapture.bind(this);
+        const onMouseDrag = this.mouseDrag.bind(this);
+        const onMouseStart = this.mouseStart.bind(this);
+        const onMouseStop = this.mouseStop.bind(this);
+
+        const mouseHandler = new MouseHandler({
+            element: treeElement,
+            getMouseDelay,
+            getNode,
+            onClickButton: this.toggle.bind(this),
+            onClickTitle: this.doSelectNode.bind(this),
+            onMouseCapture,
+            onMouseDrag,
+            onMouseStart,
+            onMouseStop,
+            triggerEvent,
+            useContextMenu: this.options.useContextMenu,
+        });
+
+        this.dataLoader = dataLoader;
+        this.dndHandler = dndHandler;
+        this.keyHandler = keyHandler;
+        this.mouseHandler = mouseHandler;
+        this.renderer = renderer;
+        this.saveStateHandler = saveStateHandler;
+        this.scrollHandler = scrollHandler;
+        this.selectNodeHandler = selectNodeHandler;
+    }
 
-        if (newNode) {
-            this.refreshElements(existingNode.parent);
-        }
+    private containsElement(element: HTMLElement): boolean {
+        const node = this.getNode(element);
 
-        return newNode;
+        return node != null && node.tree === this.tree;
     }
 
-    public addParentNode(
-        newNodeInfo: NodeData,
-        existingNode?: Node,
-    ): Node | null {
-        if (!existingNode) {
-            throw Error(PARAM_IS_EMPTY + "existingNode");
-        }
+    private createFolderElement(node: Node) {
+        const closedIconElement = this.renderer.closedIconElement;
+        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(
+            this.scrollHandler,
+        );
+        const openedIconElement = this.renderer.openedIconElement;
+        const tabIndex = this.options.tabIndex;
+        const treeElement = this.element.get(0) as HTMLElement;
+        const triggerEvent = this.triggerEvent.bind(this);
 
-        const newNode = existingNode.addParent(newNodeInfo);
+        return new FolderElement({
+            closedIconElement,
+            getScrollLeft,
+            node,
+            openedIconElement,
+            tabIndex,
+            treeElement,
+            triggerEvent,
+        });
+    }
 
-        if (newNode) {
-            this.refreshElements(newNode.parent);
-        }
+    private createNodeElement(node: Node) {
+        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(
+            this.scrollHandler,
+        );
+        const tabIndex = this.options.tabIndex;
+        const treeElement = this.element.get(0) as HTMLElement;
 
-        return newNode;
+        return new NodeElement({
+            getScrollLeft,
+            node,
+            tabIndex,
+            treeElement,
+        });
     }
 
-    public addToSelection(node?: Node, mustSetFocus?: boolean): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
+    private deselectCurrentNode(): void {
+        const node = this.getSelectedNode();
+        if (node) {
+            this.removeFromSelection(node);
         }
+    }
 
-        this.selectNodeHandler.addToSelection(node);
-        this.openParents(node);
+    private deselectNodes(parentNode: Node): void {
+        const selectedNodesUnderParent =
+            this.selectNodeHandler.getSelectedNodesUnder(parentNode);
+        for (const n of selectedNodesUnderParent) {
+            this.selectNodeHandler.removeFromSelection(n);
+        }
+    }
 
-        this.getNodeElementForNode(node).select(mustSetFocus ?? true);
+    private doLoadData(data: NodeData[] | null, parentNode: Node | null): void {
+        if (data) {
+            if (parentNode) {
+                this.deselectNodes(parentNode);
+                this.loadSubtree(data, parentNode);
+            } else {
+                this.initTree(data);
+            }
 
-        this.saveState();
+            if (this.isDragging()) {
+                this.dndHandler.refresh();
+            }
+        }
 
-        return this.element;
+        this.triggerEvent("tree.load_data", {
+            parent_node: parentNode,
+            tree_data: data,
+        });
     }
 
-    public appendNode(newNodeInfo: NodeData, parentNodeParam?: Node): Node {
-        const parentNode = parentNodeParam ?? this.tree;
-
-        const node = parentNode.append(newNodeInfo);
-
-        this.refreshElements(parentNode);
+    private doLoadDataFromUrl(
+        urlInfoParam: JQuery.AjaxSettings | null | string,
+        parentNode: Node | null,
+        onFinished: HandleFinishedLoading | null,
+    ): void {
+        const urlInfo = urlInfoParam ?? this.getDataUrlInfo(parentNode);
 
-        return node;
+        this.dataLoader.loadFromUrl(urlInfo, parentNode, onFinished);
     }
 
-    public closeNode(node?: Node, slideParam?: boolean | null): JQuery {
+    private doSelectNode(
+        node: Node | null,
+        optionsParam?: SelectNodeOptions,
+    ): void {
+        const saveState = (): void => {
+            if (this.options.saveState) {
+                this.saveStateHandler.saveState();
+            }
+        };
+
         if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
+            // Called with empty node -> deselect current node
+            this.deselectCurrentNode();
+            saveState();
+            return;
         }
+        const defaultOptions = { mustSetFocus: true, mustToggle: true };
+        const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };
 
-        const slide = slideParam ?? this.options.slide;
+        const canSelect = (): boolean => {
+            if (this.options.onCanSelectNode) {
+                return (
+                    this.options.selectable &&
+                    this.options.onCanSelectNode(node)
+                );
+            } else {
+                return this.options.selectable;
+            }
+        };
 
-        if (node.isFolder() || node.isEmptyFolder) {
-            this.createFolderElement(node).close(
-                slide,
-                this.options.animationSpeed,
-            );
+        if (!canSelect()) {
+            return;
+        }
 
-            this.saveState();
+        if (this.selectNodeHandler.isNodeSelected(node)) {
+            if (selectOptions.mustToggle) {
+                this.deselectCurrentNode();
+                this.triggerEvent("tree.select", {
+                    node: null,
+                    previous_node: node,
+                });
+            }
+        } else {
+            const deselectedNode = this.getSelectedNode() || null;
+            this.deselectCurrentNode();
+            this.addToSelection(node, selectOptions.mustSetFocus);
+
+            this.triggerEvent("tree.select", {
+                deselected_node: deselectedNode,
+                node,
+            });
+            this.openParents(node);
         }
 
-        return this.element;
+        saveState();
     }
 
-    public deinit(): void {
-        this.element.empty();
-        this.element.off();
+    private getAutoOpenMaxLevel(): number {
+        if (this.options.autoOpen === true) {
+            return -1;
+        } else if (typeof this.options.autoOpen === "number") {
+            return this.options.autoOpen;
+        } else if (typeof this.options.autoOpen === "string") {
+            return parseInt(this.options.autoOpen, 10);
+        } else {
+            return 0;
+        }
+    }
 
-        this.keyHandler.deinit();
-        this.mouseHandler.deinit();
+    private getDataUrlInfo(node: Node | null): JQuery.AjaxSettings | null {
+        const dataUrl =
+            this.options.dataUrl ?? (this.element.data("url") as null | string);
 
-        this.tree = new Node({}, true);
+        const getUrlFromString = (url: string): JQuery.AjaxSettings => {
+            const urlInfo: JQuery.AjaxSettings = { url };
 
-        super.deinit();
-    }
+            setUrlInfoData(urlInfo);
 
-    public getNodeByCallback(callback: (node: Node) => boolean): Node | null {
-        return this.tree.getNodeByCallback(callback);
-    }
+            return urlInfo;
+        };
 
-    public getNodeByHtmlElement(
-        inputElement: HTMLElement | JQuery,
-    ): Node | null {
-        const element =
-            inputElement instanceof HTMLElement
-                ? inputElement
-                : inputElement[0];
+        const setUrlInfoData = (urlInfo: JQuery.AjaxSettings): void => {
+            if (node?.id) {
+                // Load on demand of a subtree; add node parameter
+                const data = { node: node.id };
+                urlInfo.data = data;
+            } else {
+                // Add selected_node parameter
+                const selectedNodeId = this.getNodeIdToBeSelected();
+                if (selectedNodeId) {
+                    const data = { selected_node: selectedNodeId };
+                    urlInfo.data = data;
+                }
+            }
+        };
 
-        if (!element) {
+        if (typeof dataUrl === "function") {
+            return dataUrl(node);
+        } else if (typeof dataUrl === "string") {
+            return getUrlFromString(dataUrl);
+        } else if (dataUrl && typeof dataUrl === "object") {
+            setUrlInfoData(dataUrl);
+            return dataUrl;
+        } else {
             return null;
         }
-
-        return this.getNode(element);
     }
 
-    public getNodeById(nodeId: NodeId): Node | null {
-        return this.tree.getNodeById(nodeId);
+    private getDefaultClosedIcon(): string {
+        if (this.options.rtl) {
+            // triangle to the left
+            return "&#x25c0;";
+        } else {
+            // triangle to the right
+            return "&#x25ba;";
+        }
     }
 
-    public getNodeByName(name: string): Node | null {
-        return this.tree.getNodeByName(name);
-    }
+    private getNode(element: HTMLElement): Node | null {
+        const liElement = element.closest("li.jqtree_common");
 
-    public getNodeByNameMustExist(name: string): Node {
-        return this.tree.getNodeByNameMustExist(name);
+        if (liElement) {
+            return jQuery(liElement).data("node") as Node;
+        } else {
+            return null;
+        }
     }
 
-    public getNodesByProperty(key: string, value: unknown): Node[] {
-        return this.tree.getNodesByProperty(key, value);
+    private getNodeElement(element: HTMLElement): NodeElement | null {
+        const node = this.getNode(element);
+        if (node) {
+            return this.getNodeElementForNode(node);
+        } else {
+            return null;
+        }
     }
 
-    public getSelectedNode(): false | Node {
-        return this.selectNodeHandler.getSelectedNode();
+    private getNodeElementForNode(node: Node): NodeElement {
+        if (node.isFolder()) {
+            return this.createFolderElement(node);
+        } else {
+            return this.createNodeElement(node);
+        }
     }
 
-    public getSelectedNodes(): Node[] {
-        return this.selectNodeHandler.getSelectedNodes();
+    private getNodeIdToBeSelected(): NodeId | null {
+        if (this.options.saveState) {
+            return this.saveStateHandler.getNodeIdToBeSelected();
+        } else {
+            return null;
+        }
     }
 
-    public getState(): null | SavedState {
-        return this.saveStateHandler.getState();
-    }
+    private getRtlOption(): boolean {
+        if (this.options.rtl != null) {
+            return this.options.rtl;
+        } else {
+            const dataRtl = this.element.data("rtl") as unknown;
 
-    public getStateFromStorage(): null | SavedState {
-        return this.saveStateHandler.getStateFromStorage();
+            if (
+                dataRtl !== null &&
+                dataRtl !== false &&
+                dataRtl !== undefined
+            ) {
+                return true;
+            } else {
+                return false;
+            }
+        }
     }
 
-    public getTree(): Node {
-        return this.tree;
-    }
+    private initData(): void {
+        if (this.options.data) {
+            this.doLoadData(this.options.data, null);
+        } else {
+            const dataUrl = this.getDataUrlInfo(null);
 
-    public getVersion(): string {
-        return __version__;
+            if (dataUrl) {
+                this.doLoadDataFromUrl(null, null, null);
+            } else {
+                this.doLoadData([], null);
+            }
+        }
     }
 
-    public init(): void {
-        super.init();
-
-        this.element = this.$el;
-        this.isInitialized = false;
+    private initTree(data: NodeData[]): void {
+        const doInit = (): void => {
+            if (!this.isInitialized) {
+                this.isInitialized = true;
+                this.triggerEvent("tree.init");
+            }
+        };
 
-        this.options.rtl = this.getRtlOption();
+        this.tree = new this.options.nodeClass(
+            null,
+            true,
+            this.options.nodeClass,
+        );
 
-        if (this.options.closedIcon == null) {
-            this.options.closedIcon = this.getDefaultClosedIcon();
-        }
+        this.selectNodeHandler.clear();
 
-        this.connectHandlers();
+        this.tree.loadFromData(data);
 
-        this.initData();
-    }
+        const mustLoadOnDemand = this.setInitialState();
 
-    public isDragging(): boolean {
-        return this.dndHandler.isDragging;
-    }
+        this.refreshElements(null);
 
-    public isNodeSelected(node?: Node): boolean {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
+        if (!mustLoadOnDemand) {
+            doInit();
+        } else {
+            // Load data on demand and then init the tree
+            this.setInitialStateOnDemand(doInit);
         }
-
-        return this.selectNodeHandler.isNodeSelected(node);
     }
 
-    public loadData(data: NodeData[], parentNode: Node | null): JQuery {
-        this.doLoadData(data, parentNode);
-        return this.element;
+    private isFocusOnTree(): boolean {
+        const activeElement = document.activeElement;
+
+        return Boolean(
+            activeElement &&
+                activeElement.tagName === "SPAN" &&
+                this.containsElement(activeElement as HTMLElement),
+        );
     }
 
-    /*
-    signatures:
-    - loadDataFromUrl(url, parent_node=null, on_finished=null)
-        loadDataFromUrl('/my_data');
-        loadDataFromUrl('/my_data', node1);
-        loadDataFromUrl('/my_data', node1, function() { console.log('finished'); });
-        loadDataFromUrl('/my_data', null, function() { console.log('finished'); });
+    private isSelectedNodeInSubtree(subtree: Node): boolean {
+        const selectedNode = this.getSelectedNode();
 
-    - loadDataFromUrl(parent_node=null, on_finished=null)
-        loadDataFromUrl();
-        loadDataFromUrl(node1);
-        loadDataFromUrl(null, function() { console.log('finished'); });
-        loadDataFromUrl(node1, function() { console.log('finished'); });
-    */
-    public loadDataFromUrl(
-        param1: Node | null | string,
-        param2?: HandleFinishedLoading | Node | null,
-        param3?: HandleFinishedLoading,
-    ): JQuery {
-        if (typeof param1 === "string") {
-            // first parameter is url
-            this.doLoadDataFromUrl(
-                param1,
-                param2 as Node | null,
-                param3 ?? null,
-            );
+        if (!selectedNode) {
+            return false;
         } else {
-            // first parameter is not url
-            this.doLoadDataFromUrl(
-                null,
-                param1,
-                param2 as HandleFinishedLoading | null,
-            );
+            return subtree === selectedNode || subtree.isParentOf(selectedNode);
         }
-
-        return this.element;
     }
 
-    public moveDown(): JQuery {
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-            this.keyHandler.moveDown(selectedNode);
-        }
+    private loadFolderOnDemand(
+        node: Node,
+        slide = true,
+        onFinished?: OnFinishOpenNode,
+    ): void {
+        node.is_loading = true;
 
-        return this.element;
+        this.doLoadDataFromUrl(null, node, () => {
+            this.openNodeInternal(node, slide, onFinished);
+        });
     }
 
-    public moveNode(node?: Node, targetNode?: Node, position?: string): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
-        }
+    private loadSubtree(data: NodeData[], parentNode: Node): void {
+        parentNode.loadFromData(data);
 
-        if (!targetNode) {
-            throw Error(PARAM_IS_EMPTY + "targetNode");
-        }
+        parentNode.load_on_demand = false;
+        parentNode.is_loading = false;
 
-        if (!position) {
-            throw Error(PARAM_IS_EMPTY + "position");
+        this.refreshElements(parentNode);
+    }
+
+    private mouseCapture(positionInfo: PositionInfo): boolean | null {
+        if (this.options.dragAndDrop) {
+            return this.dndHandler.mouseCapture(positionInfo);
+        } else {
+            return false;
         }
+    }
 
-        const positionIndex = getPosition(position);
+    private mouseDrag(positionInfo: PositionInfo): boolean {
+        if (this.options.dragAndDrop) {
+            const result = this.dndHandler.mouseDrag(positionInfo);
 
-        if (positionIndex !== undefined) {
-            this.tree.moveNode(node, targetNode, positionIndex);
-            this.refreshElements(null);
+            this.scrollHandler.checkScrolling(positionInfo);
+            return result;
+        } else {
+            return false;
         }
-
-        return this.element;
     }
 
-    public moveUp(): JQuery {
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-            this.keyHandler.moveUp(selectedNode);
+    private mouseStart(positionInfo: PositionInfo): boolean {
+        if (this.options.dragAndDrop) {
+            return this.dndHandler.mouseStart(positionInfo);
+        } else {
+            return false;
         }
-
-        return this.element;
     }
 
-    public openNode(
-        node?: Node,
-        param1?: boolean | OnFinishOpenNode,
-        param2?: OnFinishOpenNode,
-    ): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
+    private mouseStop(positionInfo: PositionInfo): boolean {
+        if (this.options.dragAndDrop) {
+            this.scrollHandler.stopScrolling();
+            return this.dndHandler.mouseStop(positionInfo);
+        } else {
+            return false;
         }
-
-        const parseParams = (): [boolean, OnFinishOpenNode | undefined] => {
-            let onFinished: null | OnFinishOpenNode;
-            let slide: boolean | null;
-
-            if (isFunction(param1)) {
-                onFinished = param1 as OnFinishOpenNode;
-                slide = null;
-            } else {
-                slide = param1 as boolean;
-                onFinished = param2 as OnFinishOpenNode;
-            }
-
-            if (slide == null) {
-                slide = this.options.slide;
-            }
-
-            return [slide, onFinished];
-        };
-
-        const [slide, onFinished] = parseParams();
-
-        this.openNodeInternal(node, slide, onFinished);
-        return this.element;
     }
 
-    public prependNode(newNodeInfo: NodeData, parentNodeParam?: Node): Node {
-        const parentNode = parentNodeParam ?? this.tree;
+    private openNodeInternal(
+        node: Node,
+        slide = true,
+        onFinished?: OnFinishOpenNode,
+    ): void {
+        const doOpenNode = (
+            _node: Node,
+            _slide: boolean,
+            _onFinished?: OnFinishOpenNode,
+        ): void => {
+            if (!node.children.length) {
+                return;
+            }
 
-        const node = parentNode.prepend(newNodeInfo);
+            const folderElement = this.createFolderElement(_node);
+            folderElement.open(
+                _onFinished,
+                _slide,
+                this.options.animationSpeed,
+            );
+        };
 
-        this.refreshElements(parentNode);
+        if (node.isFolder() || node.isEmptyFolder) {
+            if (node.load_on_demand) {
+                this.loadFolderOnDemand(node, slide, onFinished);
+            } else {
+                let parent = node.parent;
 
-        return node;
-    }
+                while (parent) {
+                    // nb: do not open root element
+                    if (parent.parent) {
+                        doOpenNode(parent, false);
+                    }
+                    parent = parent.parent;
+                }
 
-    public refresh(): JQuery {
-        this.refreshElements(null);
-        return this.element;
+                doOpenNode(node, slide, onFinished);
+                this.saveState();
+            }
+        }
     }
 
-    public refreshHitAreas(): JQuery {
-        this.dndHandler.refresh();
-        return this.element;
-    }
+    private openParents(node: Node) {
+        const parent = node.parent;
 
-    public reload(onFinished: HandleFinishedLoading | null): JQuery {
-        this.doLoadDataFromUrl(null, null, onFinished);
-        return this.element;
+        if (parent?.parent && !parent.is_open) {
+            this.openNode(parent, false);
+        }
     }
 
-    public removeFromSelection(node?: Node): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
-        }
+    /*
+    Redraw the tree or part of the tree.
+     from_node: redraw this subtree
+    */
+    private refreshElements(fromNode: Node | null): void {
+        const mustSetFocus = this.isFocusOnTree();
+        const mustSelect = fromNode
+            ? this.isSelectedNodeInSubtree(fromNode)
+            : false;
 
-        this.selectNodeHandler.removeFromSelection(node);
+        this.renderer.render(fromNode);
 
-        this.getNodeElementForNode(node).deselect();
-        this.saveState();
+        if (mustSelect) {
+            this.selectCurrentNode(mustSetFocus);
+        }
 
-        return this.element;
+        this.triggerEvent("tree.refresh");
     }
 
-    public removeNode(node?: Node): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
-        }
-
-        if (!node.parent) {
-            throw Error("Node has no parent");
+    private saveState(): void {
+        if (this.options.saveState) {
+            this.saveStateHandler.saveState();
         }
-
-        this.selectNodeHandler.removeFromSelection(node, true); // including children
-
-        const parent = node.parent;
-        node.remove();
-        this.refreshElements(parent);
-
-        return this.element;
     }
 
-    public scrollToNode(node?: Node): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
+    private selectCurrentNode(mustSetFocus: boolean): void {
+        const node = this.getSelectedNode();
+        if (node) {
+            const nodeElement = this.getNodeElementForNode(node);
+            nodeElement.select(mustSetFocus);
         }
+    }
 
-        if (!node.element) {
-            return this.element;
-        }
+    // Set initial state, either by restoring the state or auto-opening nodes
+    // result: must load nodes on demand?
+    private setInitialState(): boolean {
+        const restoreState = (): [boolean, boolean] => {
+            // result: is state restored, must load on demand?
+            if (!this.options.saveState) {
+                return [false, false];
+            } else {
+                const state = this.saveStateHandler.getStateFromStorage();
 
-        const top =
-            getOffsetTop(node.element) -
-            getOffsetTop(this.$el.get(0) as HTMLElement);
+                if (!state) {
+                    return [false, false];
+                } else {
+                    const mustLoadOnDemand =
+                        this.saveStateHandler.setInitialState(state);
 
-        this.scrollHandler.scrollToY(top);
+                    // return true: the state is restored
+                    return [true, mustLoadOnDemand];
+                }
+            }
+        };
 
-        return this.element;
-    }
+        const autoOpenNodes = (): boolean => {
+            // result: must load on demand?
+            if (this.options.autoOpen === false) {
+                return false;
+            }
 
-    public selectNode(
-        node: Node | null,
-        optionsParam?: SelectNodeOptions,
-    ): JQuery {
-        this.doSelectNode(node, optionsParam);
-        return this.element;
-    }
+            const maxLevel = this.getAutoOpenMaxLevel();
+            let mustLoadOnDemand = false;
 
-    public setOption(option: string, value: unknown): JQuery {
-        (this.options as unknown as Record<string, unknown>)[option] = value;
-        return this.element;
-    }
+            this.tree.iterate((node: Node, level: number) => {
+                if (node.load_on_demand) {
+                    mustLoadOnDemand = true;
+                    return false;
+                } else if (!node.hasChildren()) {
+                    return false;
+                } else {
+                    node.is_open = true;
+                    return level !== maxLevel;
+                }
+            });
 
-    public setState(state?: SavedState): JQuery {
-        if (state) {
-            this.saveStateHandler.setInitialState(state);
-            this.refreshElements(null);
-        }
+            return mustLoadOnDemand;
+        };
 
-        return this.element;
-    }
+        let [isRestored, mustLoadOnDemand] = restoreState(); // eslint-disable-line prefer-const
 
-    public toggle(node?: Node, slideParam: boolean | null = null): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
+        if (!isRestored) {
+            mustLoadOnDemand = autoOpenNodes();
         }
 
-        const slide = slideParam ?? this.options.slide;
+        return mustLoadOnDemand;
+    }
 
-        if (node.is_open) {
-            this.closeNode(node, slide);
-        } else {
-            this.openNode(node, slide);
-        }
+    // Set the initial state for nodes that are loaded on demand
+    // Call cb_finished when done
+    private setInitialStateOnDemand(cbFinished: () => void): void {
+        const restoreState = (): boolean => {
+            if (!this.options.saveState) {
+                return false;
+            } else {
+                const state = this.saveStateHandler.getStateFromStorage();
 
-        return this.element;
-    }
+                if (!state) {
+                    return false;
+                } else {
+                    this.saveStateHandler.setInitialStateOnDemand(
+                        state,
+                        cbFinished,
+                    );
 
-    public toJson(): string {
-        return JSON.stringify(this.tree.getData());
-    }
+                    return true;
+                }
+            }
+        };
 
-    public updateNode(node?: Node, data?: NodeData): JQuery {
-        if (!node) {
-            throw Error(NODE_PARAM_IS_EMPTY);
-        }
+        const autoOpenNodes = (): void => {
+            const maxLevel = this.getAutoOpenMaxLevel();
+            let loadingCount = 0;
 
-        if (!data) {
-            return this.element;
-        }
+            const loadAndOpenNode = (node: Node): void => {
+                loadingCount += 1;
+                this.openNodeInternal(node, false, () => {
+                    loadingCount -= 1;
+                    openNodes();
+                });
+            };
 
-        const idIsChanged =
-            typeof data === "object" && data.id && data.id !== node.id;
+            const openNodes = (): void => {
+                this.tree.iterate((node: Node, level: number) => {
+                    if (node.load_on_demand) {
+                        if (!node.is_loading) {
+                            loadAndOpenNode(node);
+                        }
 
-        if (idIsChanged) {
-            this.tree.removeNodeFromIndex(node);
-        }
+                        return false;
+                    } else {
+                        this.openNodeInternal(node, false);
 
-        node.setData(data);
+                        return level !== maxLevel;
+                    }
+                });
 
-        if (idIsChanged) {
-            this.tree.addNodeToIndex(node);
-        }
+                if (loadingCount === 0) {
+                    cbFinished();
+                }
+            };
 
-        if (
-            typeof data === "object" &&
-            data.children &&
-            data.children instanceof Array
-        ) {
-            node.removeChildren();
+            openNodes();
+        };
 
-            if (data.children.length) {
-                node.loadFromData(data.children as Node[]);
-            }
+        if (!restoreState()) {
+            autoOpenNodes();
         }
+    }
 
-        this.refreshElements(node);
-
-        return this.element;
+    private triggerEvent(
+        eventName: string,
+        values?: Record<string, unknown>,
+    ): JQuery.Event {
+        const event = jQuery.Event(eventName, values);
+        this.element.trigger(event);
+        return event;
     }
 }