jqtree 1.8.7 → 1.8.9

package/src/keyHandler.ts

@@ -7,8 +7,6 @@ import {
 } from "./jqtreeMethodTypes";
 import { Node } from "./node";
 
-type KeyboardEventHandler = (event: KeyboardEvent) => boolean;
-
 interface KeyHandlerParams {
     closeNode: CloseNode;
     getSelectedNode: GetSelectedNode;
@@ -22,6 +20,49 @@ export default class KeyHandler {
     private closeNode: CloseNode;
     private getSelectedNode: GetSelectedNode;
 
+    private isFocusOnTree: IsFocusOnTree;
+
+    private keyboardSupport: boolean;
+    private openNode: OpenNode;
+    private originalSelectNode: SelectNode;
+    constructor({
+        closeNode,
+        getSelectedNode,
+        isFocusOnTree,
+        keyboardSupport,
+        openNode,
+        selectNode,
+    }: KeyHandlerParams) {
+        this.closeNode = closeNode;
+        this.getSelectedNode = getSelectedNode;
+        this.isFocusOnTree = isFocusOnTree;
+        this.keyboardSupport = keyboardSupport;
+        this.openNode = openNode;
+        this.originalSelectNode = selectNode;
+
+        if (keyboardSupport) {
+            document.addEventListener("keydown", this.handleKeyDown);
+        }
+    }
+
+    public deinit(): void {
+        if (this.keyboardSupport) {
+            document.removeEventListener("keydown", this.handleKeyDown);
+        }
+    }
+
+    public moveDown(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getNextVisibleNode());
+    }
+
+    public moveUp(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
+    }
+
+    private canHandleKeyboard(): boolean {
+        return this.keyboardSupport && this.isFocusOnTree();
+    }
+
     private handleKeyDown = (e: KeyboardEvent): void => {
         if (!this.canHandleKeyboard()) {
             return;
@@ -36,16 +77,16 @@ export default class KeyHandler {
                     isKeyHandled = this.moveDown(selectedNode);
                     break;
 
-                case "ArrowUp":
-                    isKeyHandled = this.moveUp(selectedNode);
+                case "ArrowLeft":
+                    isKeyHandled = this.moveLeft(selectedNode);
                     break;
 
                 case "ArrowRight":
                     isKeyHandled = this.moveRight(selectedNode);
                     break;
 
-                case "ArrowLeft":
-                    isKeyHandled = this.moveLeft(selectedNode);
+                case "ArrowUp":
+                    isKeyHandled = this.moveUp(selectedNode);
                     break;
             }
         }
@@ -55,36 +96,6 @@ export default class KeyHandler {
         }
     };
 
-    private handleKeyDownHandler?: KeyboardEventHandler;
-    private isFocusOnTree: IsFocusOnTree;
-    private keyboardSupport: boolean;
-    private openNode: OpenNode;
-    private originalSelectNode: SelectNode;
-
-    constructor({
-        closeNode,
-        getSelectedNode,
-        isFocusOnTree,
-        keyboardSupport,
-        openNode,
-        selectNode,
-    }: KeyHandlerParams) {
-        this.closeNode = closeNode;
-        this.getSelectedNode = getSelectedNode;
-        this.isFocusOnTree = isFocusOnTree;
-        this.keyboardSupport = keyboardSupport;
-        this.openNode = openNode;
-        this.originalSelectNode = selectNode;
-
-        if (keyboardSupport) {
-            document.addEventListener("keydown", this.handleKeyDown);
-        }
-    }
-
-    private canHandleKeyboard(): boolean {
-        return this.keyboardSupport && this.isFocusOnTree();
-    }
-
     private moveLeft(selectedNode: Node): boolean {
         if (selectedNode.isFolder() && selectedNode.is_open) {
             // Left on an open node closes the node
@@ -125,18 +136,4 @@ export default class KeyHandler {
             return true;
         }
     }
-
-    public deinit(): void {
-        if (this.handleKeyDownHandler) {
-            document.removeEventListener("keydown", this.handleKeyDownHandler);
-        }
-    }
-
-    public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextVisibleNode());
-    }
-
-    public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
-    }
 }

package/src/mouseHandler.ts

@@ -32,159 +32,26 @@ class MouseHandler {
     private getMouseDelay: () => number;
     private getNode: GetNode;
 
-    private handleClick = (e: MouseEvent): void => {
-        if (!e.target) {
-            return;
-        }
-
-        const clickTarget = this.getClickTarget(e.target as HTMLElement);
-
-        if (!clickTarget) {
-            return;
-        }
-
-        switch (clickTarget.type) {
-            case "button":
-                this.onClickButton(clickTarget.node);
-
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-
-            case "label": {
-                const event = this.triggerEvent("tree.click", {
-                    click_event: e,
-                    node: clickTarget.node,
-                });
-
-                if (!event.isDefaultPrevented()) {
-                    this.onClickTitle(clickTarget.node);
-                }
-                break;
-            }
-        }
-    };
-
-    private handleContextmenu = (e: MouseEvent) => {
-        if (!e.target) {
-            return;
-        }
-
-        const div = (e.target as HTMLElement).closest<HTMLElement>(
-            "ul.jqtree-tree .jqtree-element",
-        );
-
-        if (div) {
-            const node = this.getNode(div);
-            if (node) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.triggerEvent("tree.contextmenu", {
-                    click_event: e,
-                    node,
-                });
-                return false;
-            }
-        }
-
-        return null;
-    };
-
-    private handleDblclick = (e: MouseEvent): void => {
-        if (!e.target) {
-            return;
-        }
-
-        const clickTarget = this.getClickTarget(e.target as HTMLElement);
-
-        if (clickTarget?.type === "label") {
-            this.triggerEvent("tree.dblclick", {
-                click_event: e,
-                node: clickTarget.node,
-            });
-        }
-    };
-
     private isMouseDelayMet: boolean;
-    private isMouseStarted: boolean;
-    private mouseDelayTimer: null | number;
 
-    private mouseDown = (e: MouseEvent): void => {
-        // Left mouse button?
-        if (e.button !== 0) {
-            return;
-        }
-
-        const result = this.handleMouseDown(getPositionInfoFromMouseEvent(e));
+    private isMouseStarted: boolean;
 
-        if (result && e.cancelable) {
-            e.preventDefault();
-        }
-    };
+    private mouseDelayTimer: null | number;
 
     private mouseDownInfo: null | PositionInfo;
-
-    private mouseMove = (e: MouseEvent): void => {
-        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
-    };
-
-    private mouseUp = (e: MouseEvent): void => {
-        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
-    };
-
     private onClickButton: (node: Node) => void;
     private onClickTitle: (node: Node) => void;
-    private onMouseCapture: (positionInfo: PositionInfo) => boolean | null;
-    private onMouseDrag: (positionInfo: PositionInfo) => void;
-    private onMouseStart: (positionInfo: PositionInfo) => boolean;
-    private onMouseStop: (positionInfo: PositionInfo) => void;
-
-    private touchEnd = (e: TouchEvent): void => {
-        if (e.touches.length > 1) {
-            return;
-        }
-
-        const touch = e.touches[0];
-
-        if (!touch) {
-            return;
-        }
-
-        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
-    };
-
-    private touchMove = (e: TouchEvent): void => {
-        if (e.touches.length > 1) {
-            return;
-        }
 
-        const touch = e.touches[0];
-
-        if (!touch) {
-            return;
-        }
-
-        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
-    };
-
-    private touchStart = (e: TouchEvent): void => {
-        if (e.touches.length > 1) {
-            return;
-        }
+    private onMouseCapture: (positionInfo: PositionInfo) => boolean | null;
 
-        const touch = e.touches[0];
+    private onMouseDrag: (positionInfo: PositionInfo) => void;
 
-        if (!touch) {
-            return;
-        }
+    private onMouseStart: (positionInfo: PositionInfo) => boolean;
 
-        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
-    };
+    private onMouseStop: (positionInfo: PositionInfo) => void;
 
     private triggerEvent: TriggerEvent;
     private useContextMenu: boolean;
-
     constructor({
         element,
         getMouseDelay,
@@ -228,7 +95,21 @@ class MouseHandler {
         this.isMouseDelayMet = false;
         this.mouseDownInfo = null;
     }
+    public deinit(): void {
+        this.element.removeEventListener("click", this.handleClick);
+        this.element.removeEventListener("dblclick", this.handleDblclick);
+
+        if (this.useContextMenu) {
+            this.element.removeEventListener(
+                "contextmenu",
+                this.handleContextmenu,
+            );
+        }
 
+        this.element.removeEventListener("mousedown", this.mouseDown);
+        this.element.removeEventListener("touchstart", this.touchStart);
+        this.removeMouseMoveEventListeners();
+    }
     private getClickTarget(element: HTMLElement): ClickTarget | null {
         const button = element.closest<HTMLElement>(".jqtree-toggler");
 
@@ -258,6 +139,79 @@ class MouseHandler {
 
         return null;
     }
+    private handleClick = (e: MouseEvent): void => {
+        if (!e.target) {
+            return;
+        }
+
+        const clickTarget = this.getClickTarget(e.target as HTMLElement);
+
+        if (!clickTarget) {
+            return;
+        }
+
+        switch (clickTarget.type) {
+            case "button":
+                this.onClickButton(clickTarget.node);
+
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+
+            case "label": {
+                const event = this.triggerEvent("tree.click", {
+                    click_event: e,
+                    node: clickTarget.node,
+                });
+
+                if (!event.isDefaultPrevented()) {
+                    this.onClickTitle(clickTarget.node);
+                }
+                break;
+            }
+        }
+    };
+
+    private handleContextmenu = (e: MouseEvent) => {
+        if (!e.target) {
+            return;
+        }
+
+        const div = (e.target as HTMLElement).closest<HTMLElement>(
+            "ul.jqtree-tree .jqtree-element",
+        );
+
+        if (div) {
+            const node = this.getNode(div);
+            if (node) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                this.triggerEvent("tree.contextmenu", {
+                    click_event: e,
+                    node,
+                });
+                return false;
+            }
+        }
+
+        return null;
+    };
+
+    private handleDblclick = (e: MouseEvent): void => {
+        if (!e.target) {
+            return;
+        }
+
+        const clickTarget = this.getClickTarget(e.target as HTMLElement);
+
+        if (clickTarget?.type === "label") {
+            this.triggerEvent("tree.dblclick", {
+                click_event: e,
+                node: clickTarget.node,
+            });
+        }
+    };
 
     private handleMouseDown(positionInfo: PositionInfo): boolean {
         // We may have missed mouseup (out of window)
@@ -307,7 +261,6 @@ class MouseHandler {
             this.handleMouseUp(positionInfo);
         }
     }
-
     private handleMouseUp(positionInfo: PositionInfo): void {
         this.removeMouseMoveEventListeners();
         this.isMouseDelayMet = false;
@@ -340,6 +293,27 @@ class MouseHandler {
         }
     }
 
+    private mouseDown = (e: MouseEvent): void => {
+        // Left mouse button?
+        if (e.button !== 0) {
+            return;
+        }
+
+        const result = this.handleMouseDown(getPositionInfoFromMouseEvent(e));
+
+        if (result && e.cancelable) {
+            e.preventDefault();
+        }
+    };
+
+    private mouseMove = (e: MouseEvent): void => {
+        this.handleMouseMove(e, getPositionInfoFromMouseEvent(e));
+    };
+
+    private mouseUp = (e: MouseEvent): void => {
+        this.handleMouseUp(getPositionInfoFromMouseEvent(e));
+    };
+
     private removeMouseMoveEventListeners() {
         document.removeEventListener("mousemove", this.mouseMove);
         document.removeEventListener("touchmove", this.touchMove);
@@ -361,21 +335,47 @@ class MouseHandler {
         this.isMouseDelayMet = false;
     }
 
-    public deinit(): void {
-        this.element.removeEventListener("click", this.handleClick);
-        this.element.removeEventListener("dblclick", this.handleDblclick);
+    private touchEnd = (e: TouchEvent): void => {
+        if (e.touches.length > 1) {
+            return;
+        }
 
-        if (this.useContextMenu) {
-            this.element.removeEventListener(
-                "contextmenu",
-                this.handleContextmenu,
-            );
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
         }
 
-        this.element.removeEventListener("mousedown", this.mouseDown);
-        this.element.removeEventListener("touchstart", this.touchStart);
-        this.removeMouseMoveEventListeners();
-    }
+        this.handleMouseUp(getPositionInfoFromTouch(touch, e));
+    };
+
+    private touchMove = (e: TouchEvent): void => {
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
+    };
+
+    private touchStart = (e: TouchEvent): void => {
+        if (e.touches.length > 1) {
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) {
+            return;
+        }
+
+        this.handleMouseDown(getPositionInfoFromTouch(touch, e));
+    };
 }
 
 export default MouseHandler;

package/src/node.ts

@@ -1,5 +1,6 @@
 import { isNodeRecordWithChildren } from "./nodeUtils";
-import { Position } from "./position";
+
+export type Position = "after" | "before" | "inside";
 
 type IterateCallback = (node: Node, level: number) => boolean;
 
@@ -44,33 +45,6 @@ export class Node implements INode {
         }
     }
 
-    private createNode(nodeData?: NodeData): Node {
-        const nodeClass = this.getNodeClass();
-        return new nodeClass(nodeData);
-    }
-
-    private doRemoveChild(node: Node): void {
-        this.children.splice(this.getChildIndex(node), 1);
-        this.tree?.removeNodeFromIndex(node);
-    }
-
-    private getNodeClass(): typeof Node {
-        return this.nodeClass ?? this.tree?.nodeClass ?? Node;
-    }
-
-    // Load children data from nodeInfo if it has children
-    private loadChildrenFromData(nodeInfo: NodeData) {
-        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
-            this.loadFromData(nodeInfo.children);
-        }
-    }
-
-    private setParent(parent: Node): void {
-        this.parent = parent;
-        this.tree = parent.tree;
-        this.tree?.addNodeToIndex(this);
-    }
-
     public addAfter(nodeInfo: NodeData): Node | null {
         if (!this.parent) {
             return null;
@@ -541,7 +515,7 @@ export class Node implements INode {
             movedNode.parent.doRemoveChild(movedNode);
 
             switch (position) {
-                case Position.After: {
+                case "after": {
                     if (targetNode.parent) {
                         targetNode.parent.addChildAtPosition(
                             movedNode,
@@ -552,7 +526,7 @@ export class Node implements INode {
                     return false;
                 }
 
-                case Position.Before: {
+                case "before": {
                     if (targetNode.parent) {
                         targetNode.parent.addChildAtPosition(
                             movedNode,
@@ -563,14 +537,11 @@ export class Node implements INode {
                     return false;
                 }
 
-                case Position.Inside: {
+                case "inside": {
                     // move inside as first child
                     targetNode.addChildAtPosition(movedNode, 0);
                     return true;
                 }
-
-                default:
-                    return false;
             }
         }
     }
@@ -656,4 +627,31 @@ export class Node implements INode {
             }
         }
     }
+
+    private createNode(nodeData?: NodeData): Node {
+        const nodeClass = this.getNodeClass();
+        return new nodeClass(nodeData);
+    }
+
+    private doRemoveChild(node: Node): void {
+        this.children.splice(this.getChildIndex(node), 1);
+        this.tree?.removeNodeFromIndex(node);
+    }
+
+    private getNodeClass(): typeof Node {
+        return this.nodeClass ?? this.tree?.nodeClass ?? Node;
+    }
+
+    // Load children data from nodeInfo if it has children
+    private loadChildrenFromData(nodeInfo: NodeData) {
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+            this.loadFromData(nodeInfo.children);
+        }
+    }
+
+    private setParent(parent: Node): void {
+        this.parent = parent;
+        this.tree = parent.tree;
+        this.tree?.addNodeToIndex(this);
+    }
 }

package/src/nodeElement/folderElement.ts

@@ -1,5 +1,5 @@
 import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
-import { Position } from "../position";
+import { Position } from "../node";
 import NodeElement, { NodeElementParams } from "./index";
 
 interface FolderElementParams extends NodeElementParams {
@@ -14,19 +14,19 @@ class FolderElement extends NodeElement {
     private triggerEvent: TriggerEvent;
 
     constructor({
-        $treeElement,
         closedIconElement,
         getScrollLeft,
         node,
         openedIconElement,
         tabIndex,
+        treeElement,
         triggerEvent,
     }: FolderElementParams) {
         super({
-            $treeElement,
             getScrollLeft,
             node,
             tabIndex,
+            treeElement,
         });
 
         this.closedIconElement = closedIconElement;
@@ -34,20 +34,7 @@ class FolderElement extends NodeElement {
         this.triggerEvent = triggerEvent;
     }
 
-    protected mustShowBorderDropHint(position: Position): boolean {
-        return !this.node.is_open && position === Position.Inside;
-    }
-
-    private getButton(): HTMLLinkElement {
-        return this.element.querySelector(
-            ":scope > .jqtree-element > a.jqtree-toggler",
-        ) as HTMLLinkElement;
-    }
-
-    public close(
-        slide = true,
-        animationSpeed: JQuery.Duration | undefined = "fast",
-    ): void {
+    public close(slide: boolean, animationSpeed: JQuery.Duration): void {
         if (!this.node.is_open) {
             return;
         }
@@ -86,8 +73,8 @@ class FolderElement extends NodeElement {
 
     public open(
         onFinished: OnFinishOpenNode | undefined,
-        slide = true,
-        animationSpeed: JQuery.Duration = "fast",
+        slide: boolean,
+        animationSpeed: JQuery.Duration,
     ): void {
         if (this.node.is_open) {
             return;
@@ -128,6 +115,16 @@ class FolderElement extends NodeElement {
             doOpen();
         }
     }
+
+    protected mustShowBorderDropHint(position: Position): boolean {
+        return !this.node.is_open && position === "inside";
+    }
+
+    private getButton(): HTMLLinkElement {
+        return this.element.querySelector(
+            ":scope > .jqtree-element > a.jqtree-toggler",
+        ) as HTMLLinkElement;
+    }
 }
 
 export default FolderElement;