jqtree 1.8.0 → 1.8.1

package/src/tree.jquery.ts

@@ -3,24 +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 "./mouseWidgetTypes";
+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 { 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;
@@ -29,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,
@@ -69,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) {
@@ -166,7 +163,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     public refresh(): JQuery {
-        this._refreshElements(null);
+        this.refreshElements(null);
         return this.element;
     }
 
@@ -235,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;
     }
 
@@ -274,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;
@@ -291,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;
@@ -308,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;
@@ -327,7 +324,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const parent = node.parent;
         node.remove();
-        this._refreshElements(parent);
+        this.refreshElements(parent);
 
         return this.element;
     }
@@ -337,7 +334,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const node = parentNode.append(newNodeInfo);
 
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
 
         return node;
     }
@@ -347,7 +344,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
         const node = parentNode.prepend(newNodeInfo);
 
-        this._refreshElements(parentNode);
+        this.refreshElements(parentNode);
 
         return node;
     }
@@ -382,7 +379,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             }
         }
 
-        this._refreshElements(node);
+        this.refreshElements(node);
 
         return this.element;
     }
@@ -410,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;
@@ -428,7 +425,7 @@ 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,
         );
 
@@ -456,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;
@@ -467,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);
 
@@ -482,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;
     }
@@ -514,16 +511,7 @@ 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,
@@ -565,7 +553,7 @@ 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 {
+    private refreshElements(fromNode: Node | null): void {
         const mustSetFocus = this.isFocusOnTree();
         const mustSelect = fromNode
             ? this.isSelectedNodeInSubtree(fromNode)
@@ -577,10 +565,10 @@ 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 this.createFolderElement(node);
         } else {
@@ -588,19 +576,15 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    public _getNodeElement(element: HTMLElement): NodeElement | null {
+    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 _getScrollLeft(): number {
-        return this.scrollHandler.getScrollLeft();
-    }
-
     public init(): void {
         super.init();
 
@@ -616,13 +600,6 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         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);
+                        this.openNodeInternal(node, false);
 
                         return level !== maxLevel;
                     }
@@ -900,73 +883,6 @@ 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: HTMLElement): ClickTarget | null {
-        const button = element.closest(".jqtree-toggler");
-
-        if (button) {
-            const node = this.getNode(button as HTMLElement);
-
-            if (node) {
-                return {
-                    type: "button",
-                    node,
-                };
-            }
-        } else {
-            const jqTreeElement = element.closest(".jqtree-element");
-
-            if (jqTreeElement) {
-                const node = this.getNode(jqTreeElement as HTMLElement);
-                if (node) {
-                    return {
-                        type: "label",
-                        node,
-                    };
-                }
-            }
-        }
-
-        return null;
-    }
-
     private getNode(element: HTMLElement): null | Node {
         const liElement = element.closest("li.jqtree_common");
 
@@ -977,28 +893,6 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private handleContextmenu = (
-        e: JQuery.ContextMenuEvent<HTMLElement, any, HTMLElement, HTMLElement>,
-    ) => {
-        const div = e.target.closest("ul.jqtree-tree .jqtree-element");
-
-        if (div) {
-            const node = this.getNode(div as HTMLElement);
-            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();
@@ -1008,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);
             }
@@ -1087,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,
                 });
@@ -1097,7 +991,7 @@ 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,
             });
@@ -1121,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,
         });
@@ -1141,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(
@@ -1162,7 +1056,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         node.is_loading = true;
 
         this.doLoadDataFromUrl(null, node, () => {
-            this._openNode(node, slide, onFinished);
+            this.openNodeInternal(node, slide, onFinished);
         });
     }
 
@@ -1191,6 +1085,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             dragAndDrop,
             keyboardSupport,
             onCanMove,
+            onCanMoveTo,
             onCreateLi,
             onDragMove,
             onDragStop,
@@ -1209,20 +1104,20 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         } = this.options;
 
         const closeNode = this.closeNode.bind(this);
-        const getNodeElement = this._getNodeElement.bind(this);
-        const getNodeElementForNode = this._getNodeElementForNode.bind(this);
+        const getNodeElement = this.getNodeElement.bind(this);
+        const getNodeElementForNode = this.getNodeElementForNode.bind(this);
         const getNodeById = this.getNodeById.bind(this);
-        const getScrollLeft = this._getScrollLeft.bind(this);
         const getSelectedNode = this.getSelectedNode.bind(this);
         const getTree = this.getTree.bind(this);
         const isFocusOnTree = this.isFocusOnTree.bind(this);
         const loadData = this.loadData.bind(this);
-        const openNode = this._openNode.bind(this);
-        const refreshElements = this._refreshElements.bind(this);
+        const openNode = this.openNodeInternal.bind(this);
+        const refreshElements = this.refreshElements.bind(this);
         const refreshHitAreas = this.refreshHitAreas.bind(this);
         const selectNode = this.selectNode.bind(this);
         const $treeElement = this.element;
-        const triggerEvent = this._triggerEvent.bind(this);
+        const treeElement = this.element.get(0) as HTMLElement;
+        const triggerEvent = this.triggerEvent.bind(this);
 
         const selectNodeHandler = new SelectNodeHandler({
             getNodeById,
@@ -1236,13 +1131,14 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
         const removeFromSelection =
             selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
+        const getMouseDelay = () => this.options.startDndDelay ?? 0;
 
         const dataLoader = new DataLoader({
             dataFilter,
             loadData,
             onLoadFailed,
             onLoading,
-            $treeElement,
+            treeElement,
             triggerEvent,
         });
 
@@ -1259,6 +1155,13 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             saveState,
         });
 
+        const scrollHandler = new ScrollHandler({
+            refreshHitAreas,
+            treeElement,
+        });
+
+        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
+
         const dndHandler = new DragAndDropHandler({
             autoEscape,
             getNodeElement,
@@ -1266,6 +1169,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             getScrollLeft,
             getTree,
             onCanMove,
+            onCanMoveTo,
             onDragMove,
             onDragStop,
             onIsMoveHandle,
@@ -1273,15 +1177,10 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             openNode,
             refreshElements,
             slide,
-            $treeElement,
+            treeElement,
             triggerEvent,
         });
 
-        const scrollHandler = new ScrollHandler({
-            refreshHitAreas,
-            $treeElement,
-        });
-
         const keyHandler = new KeyHandler({
             closeNode,
             getSelectedNode,
@@ -1306,9 +1205,30 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             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;
@@ -1317,11 +1237,13 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     private createFolderElement(node: Node) {
         const closedIconElement = this.renderer.closedIconElement;
-        const getScrollLeft = this._getScrollLeft.bind(this);
+        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(
+            this.scrollHandler,
+        );
         const openedIconElement = this.renderer.openedIconElement;
         const tabIndex = this.options.tabIndex;
         const $treeElement = this.element;
-        const triggerEvent = this._triggerEvent.bind(this);
+        const triggerEvent = this.triggerEvent.bind(this);
 
         return new FolderElement({
             closedIconElement,
@@ -1335,7 +1257,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     private createNodeElement(node: Node) {
-        const getScrollLeft = this._getScrollLeft.bind(this);
+        const getScrollLeft = this.scrollHandler.getScrollLeft.bind(
+            this.scrollHandler,
+        );
         const tabIndex = this.options.tabIndex;
         const $treeElement = this.element;
 

package/src/util.ts

@@ -7,4 +7,13 @@ export const getBoolString = (value: unknown): string =>
     value ? "true" : "false";
 
 export const getOffsetTop = (element: HTMLElement) =>
-    element.getBoundingClientRect().y + window.scrollY;
+    getElementPosition(element).top;
+
+export const getElementPosition = (element: HTMLElement) => {
+    const rect = element.getBoundingClientRect();
+
+    return {
+        left: rect.x + window.scrollX,
+        top: rect.y + window.scrollY,
+    };
+};

package/src/version.ts

@@ -1,3 +1,3 @@
-const version = "1.8.0";
+const version = "1.8.1";
 
 export default version;