jqtree 1.7.5 → 1.8.1

package/src/tree.jquery.ts

@@ -3,22 +3,20 @@ import { DragAndDropHandler } from "./dragAndDropHandler";
 import ElementsRenderer from "./elementsRenderer";
 import DataLoader, { HandleFinishedLoading } from "./dataLoader";
 import KeyHandler from "./keyHandler";
-import MouseWidget from "./mouse.widget";
-import { PositionInfo } from "./types";
+import MouseHandler from "./mouseHandler";
+import { PositionInfo } from "./mouseUtils";
 import SaveStateHandler, { SavedState } from "./saveStateHandler";
 import ScrollHandler from "./scrollHandler";
 import SelectNodeHandler from "./selectNodeHandler";
 import SimpleWidget from "./simple.widget";
-import { Node, getPosition } from "./node";
-import { isFunction } from "./util";
-import { FolderElement, NodeElement, OnFinishOpenNode } from "./nodeElement";
+import { getOffsetTop, isFunction } from "./util";
+import { Node } from "./node";
+import { getPosition } from "./position";
+import NodeElement from "./nodeElement";
+import FolderElement from "./nodeElement/folderElement";
+import { OnFinishOpenNode } from "./jqtreeMethodTypes";
 import { JQTreeOptions } from "./jqtreeOptions";
 
-interface ClickTarget {
-    node: Node;
-    type: "button" | "label";
-}
-
 interface SelectNodeOptions {
     mustToggle?: boolean;
     mustSetFocus?: boolean;
@@ -27,7 +25,7 @@ interface SelectNodeOptions {
 const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
 const PARAM_IS_EMPTY = "Parameter is empty: ";
 
-export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
+export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
     protected static defaults: JQTreeOptions = {
         animationSpeed: "fast",
         autoEscape: true,
@@ -67,17 +65,18 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         useContextMenu: true,
     };
 
-    public element: JQuery;
-    public tree: Node;
-    public dndHandler: DragAndDropHandler;
-    public renderer: ElementsRenderer;
-    public dataLoader: DataLoader;
-    public scrollHandler: ScrollHandler;
-    public selectNodeHandler: SelectNodeHandler;
-
+    private element: JQuery;
     private isInitialized: boolean;
-    private saveStateHandler: SaveStateHandler;
+    private tree: Node;
+
+    private dataLoader: DataLoader;
+    private dndHandler: DragAndDropHandler;
     private keyHandler: KeyHandler;
+    private mouseHandler: MouseHandler;
+    private renderer: ElementsRenderer;
+    private saveStateHandler: SaveStateHandler;
+    private scrollHandler: ScrollHandler;
+    private selectNodeHandler: SelectNodeHandler;
 
     public toggle(node: Node, slideParam: null | boolean = null): JQuery {
         if (!node) {
@@ -164,7 +163,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     public refresh(): JQuery {
-        this._refreshElements(null);
+        this.refreshElements(null);
         return this.element;
     }
 
@@ -185,9 +184,18 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     public getNodeByHtmlElement(
-        element: HTMLElement | JQuery<HTMLElement>,
+        inputElement: HTMLElement | JQuery<HTMLElement>,
     ): Node | null {
-        return this.getNode(jQuery(element));
+        const element =
+            inputElement instanceof HTMLElement
+                ? inputElement
+                : inputElement[0];
+
+        if (!element) {
+            return null;
+        }
+
+        return this.getNode(element);
     }
 
     public getNodeByCallback(callback: (node: Node) => boolean): Node | null {
@@ -203,12 +211,12 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        const parseParams = (): [boolean, OnFinishOpenNode | null] => {
+        const parseParams = (): [boolean, OnFinishOpenNode | undefined] => {
             let onFinished: OnFinishOpenNode | null;
             let slide: boolean | null;
 
             if (isFunction(param1)) {
-                onFinished = param1 as OnFinishOpenNode | null;
+                onFinished = param1 as OnFinishOpenNode;
                 slide = null;
             } else {
                 slide = param1 as boolean;
@@ -224,7 +232,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const [slide, onFinished] = parseParams();
 
-        this._openNode(node, slide, onFinished);
+        this.openNodeInternal(node, slide, onFinished);
         return this.element;
     }
 
@@ -236,7 +244,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         const slide = slideParam ?? this.options.slide;
 
         if (node.isFolder() || node.isEmptyFolder) {
-            new FolderElement(node, this).close(
+            this.createFolderElement(node).close(
                 slide,
                 this.options.animationSpeed,
             );
@@ -263,7 +271,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         const newNode = existingNode.addAfter(newNodeInfo);
 
         if (newNode) {
-            this._refreshElements(existingNode.parent);
+            this.refreshElements(existingNode.parent);
         }
 
         return newNode;
@@ -280,7 +288,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         const newNode = existingNode.addBefore(newNodeInfo);
 
         if (newNode) {
-            this._refreshElements(existingNode.parent);
+            this.refreshElements(existingNode.parent);
         }
 
         return newNode;
@@ -297,7 +305,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         const newNode = existingNode.addParent(newNodeInfo);
 
         if (newNode) {
-            this._refreshElements(newNode.parent);
+            this.refreshElements(newNode.parent);
         }
 
         return newNode;
@@ -316,7 +324,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const parent = node.parent;
         node.remove();
-        this._refreshElements(parent);
+        this.refreshElements(parent);
 
         return this.element;
     }
@@ -326,7 +334,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const node = parentNode.append(newNodeInfo);
 
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
 
         return node;
     }
@@ -336,7 +344,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const node = parentNode.prepend(newNodeInfo);
 
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
 
         return node;
     }
@@ -371,7 +379,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             }
         }
 
-        this._refreshElements(node);
+        this.refreshElements(node);
 
         return this.element;
     }
@@ -399,7 +407,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         if (positionIndex !== undefined) {
             this.tree.moveNode(node, targetNode, positionIndex);
-            this._refreshElements(null);
+            this.refreshElements(null);
         }
 
         return this.element;
@@ -415,8 +423,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
 
         this.selectNodeHandler.addToSelection(node);
+        this.openParents(node);
 
-        this._getNodeElementForNode(node).select(
+        this.getNodeElementForNode(node).select(
             mustSetFocus === undefined ? true : mustSetFocus,
         );
 
@@ -444,7 +453,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         this.selectNodeHandler.removeFromSelection(node);
 
-        this._getNodeElementForNode(node).deselect();
+        this.getNodeElementForNode(node).deselect();
         this.saveState();
 
         return this.element;
@@ -455,9 +464,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             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) as HTMLElement);
 
         this.scrollHandler.scrollToY(top);
 
@@ -470,7 +479,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public setState(state: SavedState): JQuery {
         this.saveStateHandler.setInitialState(state);
-        this._refreshElements(null);
+        this.refreshElements(null);
 
         return this.element;
     }
@@ -502,26 +511,17 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         return __version__;
     }
 
-    public _triggerEvent(
-        eventName: string,
-        values?: Record<string, unknown>,
-    ): JQuery.Event {
-        const event = jQuery.Event(eventName, values);
-        this.element.trigger(event);
-        return event;
-    }
-
-    public _openNode(
+    private openNodeInternal(
         node: Node,
         slide = true,
-        onFinished: OnFinishOpenNode | null,
+        onFinished?: OnFinishOpenNode,
     ): void {
         const doOpenNode = (
             _node: Node,
             _slide: boolean,
-            _onFinished: OnFinishOpenNode | null,
+            _onFinished?: OnFinishOpenNode,
         ): void => {
-            const folderElement = new FolderElement(_node, this);
+            const folderElement = this.createFolderElement(_node);
             folderElement.open(
                 _onFinished,
                 _slide,
@@ -538,7 +538,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 while (parent) {
                     // nb: do not open root element
                     if (parent.parent) {
-                        doOpenNode(parent, false, null);
+                        doOpenNode(parent, false);
                     }
                     parent = parent.parent;
                 }
@@ -553,8 +553,8 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     Redraw the tree or part of the tree.
      from_node: redraw this subtree
     */
-    public _refreshElements(fromNode: Node | null): void {
-        const mustSetFocus = this.selectNodeHandler.isFocusOnTree();
+    private refreshElements(fromNode: Node | null): void {
+        const mustSetFocus = this.isFocusOnTree();
         const mustSelect = fromNode
             ? this.isSelectedNodeInSubtree(fromNode)
             : false;
@@ -565,36 +565,26 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             this.selectCurrentNode(mustSetFocus);
         }
 
-        this._triggerEvent("tree.refresh");
+        this.triggerEvent("tree.refresh");
     }
 
-    public _getNodeElementForNode(node: Node): NodeElement {
+    private getNodeElementForNode(node: Node): NodeElement {
         if (node.isFolder()) {
-            return new FolderElement(node, this);
+            return this.createFolderElement(node);
         } else {
-            return new NodeElement(node, this);
+            return this.createNodeElement(node);
         }
     }
 
-    public _getNodeElement($element: JQuery<HTMLElement>): NodeElement | null {
-        const node = this.getNode($element);
+    private getNodeElement(element: HTMLElement): NodeElement | null {
+        const node = this.getNode(element);
         if (node) {
-            return this._getNodeElementForNode(node);
+            return this.getNodeElementForNode(node);
         } else {
             return null;
         }
     }
 
-    public _containsElement(element: HTMLElement): boolean {
-        const node = this.getNode(jQuery(element));
-
-        return node != null && node.tree === this.tree;
-    }
-
-    public _getScrollLeft(): number {
-        return this.scrollHandler.getScrollLeft();
-    }
-
     public init(): void {
         super.init();
 
@@ -607,22 +597,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             this.options.closedIcon = this.getDefaultClosedIcon();
         }
 
-        this.renderer = new ElementsRenderer(this);
-        this.dataLoader = new DataLoader(this);
-        this.saveStateHandler = new SaveStateHandler(this);
-        this.selectNodeHandler = new SelectNodeHandler(this);
-        this.dndHandler = new DragAndDropHandler(this);
-        this.scrollHandler = new ScrollHandler(this);
-        this.keyHandler = new KeyHandler(this);
+        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);
-        }
     }
 
     public deinit(): void {
@@ -630,13 +607,23 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         this.element.off();
 
         this.keyHandler.deinit();
+        this.mouseHandler.deinit();
 
         this.tree = new Node({}, true);
 
         super.deinit();
     }
 
-    protected mouseCapture(positionInfo: PositionInfo): boolean | null {
+    private triggerEvent(
+        eventName: string,
+        values?: Record<string, unknown>,
+    ): JQuery.Event {
+        const event = jQuery.Event(eventName, values);
+        this.element.trigger(event);
+        return event;
+    }
+
+    private mouseCapture(positionInfo: PositionInfo): boolean | null {
         if (this.options.dragAndDrop) {
             return this.dndHandler.mouseCapture(positionInfo);
         } else {
@@ -644,7 +631,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    protected mouseStart(positionInfo: PositionInfo): boolean {
+    private mouseStart(positionInfo: PositionInfo): boolean {
         if (this.options.dragAndDrop) {
             return this.dndHandler.mouseStart(positionInfo);
         } else {
@@ -652,7 +639,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    protected mouseDrag(positionInfo: PositionInfo): boolean {
+    private mouseDrag(positionInfo: PositionInfo): boolean {
         if (this.options.dragAndDrop) {
             const result = this.dndHandler.mouseDrag(positionInfo);
 
@@ -663,7 +650,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    protected mouseStop(positionInfo: PositionInfo): boolean {
+    private mouseStop(positionInfo: PositionInfo): boolean {
         if (this.options.dragAndDrop) {
             this.scrollHandler.stopScrolling();
             return this.dndHandler.mouseStop(positionInfo);
@@ -672,10 +659,6 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    protected getMouseDelay(): number {
-        return this.options.startDndDelay ?? 0;
-    }
-
     private initData(): void {
         if (this.options.data) {
             this.doLoadData(this.options.data, null);
@@ -741,7 +724,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         const doInit = (): void => {
             if (!this.isInitialized) {
                 this.isInitialized = true;
-                this._triggerEvent("tree.init");
+                this.triggerEvent("tree.init");
             }
         };
 
@@ -761,7 +744,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const mustLoadOnDemand = this.setInitialState();
 
-        this._refreshElements(null);
+        this.refreshElements(null);
 
         if (!mustLoadOnDemand) {
             doInit();
@@ -854,7 +837,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
             const loadAndOpenNode = (node: Node): void => {
                 loadingCount += 1;
-                this._openNode(node, false, () => {
+                this.openNodeInternal(node, false, () => {
                     loadingCount -= 1;
                     openNodes();
                 });
@@ -869,7 +852,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
                         return false;
                     } else {
-                        this._openNode(node, false, null);
+                        this.openNodeInternal(node, false);
 
                         return level !== maxLevel;
                     }
@@ -900,104 +883,16 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private handleClick = (
-        e: JQuery.ClickEvent<HTMLElement, any, HTMLElement, HTMLElement>,
-    ): void => {
-        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);
-                }
-            }
-        }
-    };
-
-    private handleDblclick = (
-        e: JQuery.DoubleClickEvent<HTMLElement, any, HTMLElement, HTMLElement>,
-    ): void => {
-        const clickTarget = this.getClickTarget(e.target);
-
-        if (clickTarget?.type === "label") {
-            this._triggerEvent("tree.dblclick", {
-                node: clickTarget.node,
-                click_event: e,
-            });
-        }
-    };
-
-    private getClickTarget(element: EventTarget): ClickTarget | null {
-        const $target = jQuery(element);
-
-        const $button = $target.closest(".jqtree-toggler");
-
-        if ($button.length) {
-            const node = this.getNode($button as JQuery<HTMLElement>);
+    private getNode(element: HTMLElement): null | Node {
+        const liElement = element.closest("li.jqtree_common");
 
-            if (node) {
-                return {
-                    type: "button",
-                    node,
-                };
-            }
+        if (liElement) {
+            return jQuery(liElement).data("node") as Node;
         } else {
-            const $el = $target.closest(".jqtree-element");
-            if ($el.length) {
-                const node = this.getNode($el as JQuery<HTMLElement>);
-                if (node) {
-                    return {
-                        type: "label",
-                        node,
-                    };
-                }
-            }
-        }
-
-        return null;
-    }
-
-    private getNode($element: JQuery<HTMLElement>): null | Node {
-        const $li = $element.closest("li.jqtree_common");
-        if ($li.length === 0) {
             return null;
-        } else {
-            return $li.data("node") as Node;
         }
     }
 
-    private handleContextmenu = (
-        e: JQuery.ContextMenuEvent<HTMLElement, any, HTMLElement, HTMLElement>,
-    ) => {
-        const $div = jQuery(e.target).closest("ul.jqtree-tree .jqtree-element");
-        if ($div.length) {
-            const node = this.getNode($div);
-            if (node) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                this._triggerEvent("tree.contextmenu", {
-                    node,
-                    click_event: e,
-                });
-                return false;
-            }
-        }
-
-        return null;
-    };
-
     private saveState(): void {
         if (this.options.saveState) {
             this.saveStateHandler.saveState();
@@ -1007,7 +902,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     private selectCurrentNode(mustSetFocus: boolean): void {
         const node = this.getSelectedNode();
         if (node) {
-            const nodeElement = this._getNodeElementForNode(node);
+            const nodeElement = this.getNodeElementForNode(node);
             if (nodeElement) {
                 nodeElement.select(mustSetFocus);
             }
@@ -1079,14 +974,6 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             }
         };
 
-        const openParents = (): void => {
-            const parent = node.parent;
-
-            if (parent && parent.parent && !parent.is_open) {
-                this.openNode(parent, false);
-            }
-        };
-
         if (!canSelect()) {
             return;
         }
@@ -1094,7 +981,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         if (this.selectNodeHandler.isNodeSelected(node)) {
             if (selectOptions.mustToggle) {
                 this.deselectCurrentNode();
-                this._triggerEvent("tree.select", {
+                this.triggerEvent("tree.select", {
                     node: null,
                     previous_node: node,
                 });
@@ -1104,11 +991,11 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             this.deselectCurrentNode();
             this.addToSelection(node, selectOptions.mustSetFocus);
 
-            this._triggerEvent("tree.select", {
+            this.triggerEvent("tree.select", {
                 node,
                 deselected_node: deselectedNode,
             });
-            openParents();
+            this.openParents(node);
         }
 
         saveState();
@@ -1128,7 +1015,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             }
         }
 
-        this._triggerEvent("tree.load_data", {
+        this.triggerEvent("tree.load_data", {
             tree_data: data,
             parent_node: parentNode,
         });
@@ -1148,7 +1035,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         parentNode.load_on_demand = false;
         parentNode.is_loading = false;
 
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
     }
 
     private doLoadDataFromUrl(
@@ -1164,13 +1051,232 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     private loadFolderOnDemand(
         node: Node,
         slide = true,
-        onFinished: OnFinishOpenNode | null,
+        onFinished?: OnFinishOpenNode,
     ): void {
         node.is_loading = true;
 
         this.doLoadDataFromUrl(null, node, () => {
-            this._openNode(node, slide, onFinished);
+            this.openNodeInternal(node, slide, onFinished);
+        });
+    }
+
+    private containsElement(element: HTMLElement): boolean {
+        const node = this.getNode(element);
+
+        return node != null && node.tree === this.tree;
+    }
+
+    private isFocusOnTree(): boolean {
+        const activeElement = document.activeElement;
+
+        return Boolean(
+            activeElement &&
+                activeElement.tagName === "SPAN" &&
+                this.containsElement(activeElement as HTMLElement),
+        );
+    }
+
+    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;
+
+        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);
+
+        const selectNodeHandler = new SelectNodeHandler({
+            getNodeById,
         });
+
+        const addToSelection =
+            selectNodeHandler.addToSelection.bind(selectNodeHandler);
+        const getSelectedNodes =
+            selectNodeHandler.getSelectedNodes.bind(selectNodeHandler);
+        const isNodeSelected =
+            selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
+        const removeFromSelection =
+            selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
+        const getMouseDelay = () => this.options.startDndDelay ?? 0;
+
+        const dataLoader = new DataLoader({
+            dataFilter,
+            loadData,
+            onLoadFailed,
+            onLoading,
+            treeElement,
+            triggerEvent,
+        });
+
+        const saveStateHandler = new SaveStateHandler({
+            addToSelection,
+            getNodeById,
+            getSelectedNodes,
+            getTree,
+            onGetStateFromStorage,
+            onSetStateFromStorage,
+            openNode,
+            refreshElements,
+            removeFromSelection,
+            saveState,
+        });
+
+        const scrollHandler = new ScrollHandler({
+            refreshHitAreas,
+            treeElement,
+        });
+
+        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
+
+        const dndHandler = new DragAndDropHandler({
+            autoEscape,
+            getNodeElement,
+            getNodeElementForNode,
+            getScrollLeft,
+            getTree,
+            onCanMove,
+            onCanMoveTo,
+            onDragMove,
+            onDragStop,
+            onIsMoveHandle,
+            openFolderDelay,
+            openNode,
+            refreshElements,
+            slide,
+            treeElement,
+            triggerEvent,
+        });
+
+        const keyHandler = new KeyHandler({
+            closeNode,
+            getSelectedNode,
+            isFocusOnTree,
+            keyboardSupport,
+            openNode,
+            selectNode,
+        });
+
+        const renderer = new ElementsRenderer({
+            autoEscape,
+            buttonLeft,
+            closedIcon,
+            dragAndDrop,
+            $element: $treeElement,
+            getTree,
+            isNodeSelected,
+            onCreateLi,
+            openedIcon,
+            rtl,
+            showEmptyFolder,
+            tabIndex,
+        });
+
+        const getNode = this.getNode.bind(this);
+        const onMouseCapture = this.mouseCapture.bind(this);
+        const onMouseDrag = this.mouseDrag.bind(this);
+        const onMouseStart = this.mouseStart.bind(this);
+        const onMouseStop = this.mouseStop.bind(this);
+
+        const mouseHandler = new MouseHandler({
+            element: treeElement,
+            getMouseDelay,
+            getNode,
+            onClickButton: this.toggle.bind(this),
+            onClickTitle: this.doSelectNode.bind(this),
+            onMouseCapture,
+            onMouseDrag,
+            onMouseStart,
+            onMouseStop,
+            triggerEvent,
+            useContextMenu: this.options.useContextMenu,
+        });
+
+        this.dataLoader = dataLoader;
+        this.dndHandler = dndHandler;
+        this.keyHandler = keyHandler;
+        this.mouseHandler = mouseHandler;
+        this.renderer = renderer;
+        this.saveStateHandler = saveStateHandler;
+        this.scrollHandler = scrollHandler;
+        this.selectNodeHandler = selectNodeHandler;
+    }
+
+    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;
+        const triggerEvent = this.triggerEvent.bind(this);
+
+        return new FolderElement({
+            closedIconElement,
+            getScrollLeft,
+            node,
+            openedIconElement,
+            tabIndex,
+            $treeElement,
+            triggerEvent,
+        });
+    }
+
+    private createNodeElement(node: Node) {
+        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(
+            this.scrollHandler,
+        );
+        const tabIndex = this.options.tabIndex;
+        const $treeElement = this.element;
+
+        return new NodeElement({
+            getScrollLeft,
+            node,
+            tabIndex,
+            $treeElement,
+        });
+    }
+
+    private openParents(node: Node) {
+        const parent = node.parent;
+
+        if (parent && parent.parent && !parent.is_open) {
+            this.openNode(parent, false);
+        }
     }
 }