jqtree 1.8.7 → 1.8.9

package/src/dragAndDropHandler/index.ts

@@ -14,8 +14,8 @@ import {
 import { PositionInfo } from "../mouseUtils";
 import { Node } from "../node";
 import NodeElement from "../nodeElement";
-import { getPositionName, Position } from "../position";
 import { getElementPosition } from "../util";
+import binarySearch from "./binarySearch";
 import DragElement from "./dragElement";
 import generateHitAreas from "./generateHitAreas";
 import { DropHint, HitArea } from "./types";
@@ -27,9 +27,6 @@ interface Dimensions {
     top: number;
 }
 
-type GetNodeElement = (element: HTMLElement) => NodeElement | null;
-type GetNodeElementForNode = (node: Node) => NodeElement;
-
 interface DragAndDropHandlerParams {
     autoEscape?: boolean;
     getNodeElement: GetNodeElement;
@@ -48,13 +45,20 @@ interface DragAndDropHandlerParams {
     treeElement: HTMLElement;
     triggerEvent: TriggerEvent;
 }
+type GetNodeElement = (element: HTMLElement) => NodeElement | null;
+
+type GetNodeElementForNode = (node: Node) => NodeElement;
 
 export class DragAndDropHandler {
+    public currentItem: NodeElement | null;
+    public hitAreas: HitArea[];
+    public hoveredArea: HitArea | null;
+    public isDragging: boolean;
+
     private autoEscape?: boolean;
     private dragElement: DragElement | null;
     private getNodeElement: GetNodeElement;
     private getNodeElementForNode: GetNodeElementForNode;
-
     private getScrollLeft: GetScrollLeft;
     private getTree: GetTree;
     private onCanMove?: OnCanMove;
@@ -70,10 +74,6 @@ export class DragAndDropHandler {
     private slide: boolean;
     private treeElement: HTMLElement;
     private triggerEvent: TriggerEvent;
-    public currentItem: NodeElement | null;
-    public hitAreas: HitArea[];
-    public hoveredArea: HitArea | null;
-    public isDragging: boolean;
 
     constructor({
         autoEscape,
@@ -86,6 +86,7 @@ export class DragAndDropHandler {
         onDragMove,
         onDragStop,
         onIsMoveHandle,
+        openFolderDelay,
         openNode,
         refreshElements,
         slide,
@@ -102,6 +103,7 @@ export class DragAndDropHandler {
         this.onDragMove = onDragMove;
         this.onDragStop = onDragStop;
         this.onIsMoveHandle = onIsMoveHandle;
+        this.openFolderDelay = openFolderDelay;
         this.openNode = openNode;
         this.refreshElements = refreshElements;
         this.slide = slide;
@@ -114,18 +116,146 @@ export class DragAndDropHandler {
         this.currentItem = null;
     }
 
-    private canMoveToArea(area: HitArea): boolean {
-        if (!this.onCanMoveTo) {
-            return true;
+    public mouseCapture(positionInfo: PositionInfo): boolean | null {
+        const element = positionInfo.target;
+
+        if (!this.mustCaptureElement(element)) {
+            return null;
+        }
+
+        if (this.onIsMoveHandle && !this.onIsMoveHandle(jQuery(element))) {
+            return null;
+        }
+
+        let nodeElement = this.getNodeElement(element);
+
+        if (nodeElement && this.onCanMove) {
+            if (!this.onCanMove(nodeElement.node)) {
+                nodeElement = null;
+            }
+        }
+
+        this.currentItem = nodeElement;
+        return this.currentItem != null;
+    }
+
+    public mouseDrag(positionInfo: PositionInfo): boolean {
+        if (!this.currentItem || !this.dragElement) {
+            return false;
         }
 
+        this.dragElement.move(positionInfo.pageX, positionInfo.pageY);
+
+        const area = this.findHoveredArea(
+            positionInfo.pageX,
+            positionInfo.pageY,
+        );
+
+        if (area && this.canMoveToArea(area, this.currentItem)) {
+            if (!area.node.isFolder()) {
+                this.stopOpenFolderTimer();
+            }
+
+            if (this.hoveredArea !== area) {
+                this.hoveredArea = area;
+
+                // If this is a closed folder, start timer to open it
+                if (this.mustOpenFolderTimer(area)) {
+                    this.startOpenFolderTimer(area.node);
+                } else {
+                    this.stopOpenFolderTimer();
+                }
+
+                this.updateDropHint();
+            }
+        } else {
+            this.removeDropHint();
+            this.stopOpenFolderTimer();
+            this.hoveredArea = area;
+        }
+
+        if (!area) {
+            if (this.onDragMove) {
+                this.onDragMove(
+                    this.currentItem.node,
+                    positionInfo.originalEvent,
+                );
+            }
+        }
+
+        return true;
+    }
+
+    public mouseStart(positionInfo: PositionInfo): boolean {
         if (!this.currentItem) {
             return false;
         }
 
-        const positionName = getPositionName(area.position);
+        this.refresh();
+
+        const { left, top } = getElementPosition(positionInfo.target);
+
+        const node = this.currentItem.node;
+
+        this.dragElement = new DragElement({
+            autoEscape: this.autoEscape ?? true,
+            nodeName: node.name,
+            offsetX: positionInfo.pageX - left,
+            offsetY: positionInfo.pageY - top,
+            treeElement: this.treeElement,
+        });
 
-        return this.onCanMoveTo(this.currentItem.node, area.node, positionName);
+        this.isDragging = true;
+        this.currentItem.element.classList.add("jqtree-moving");
+
+        return true;
+    }
+
+    public mouseStop(positionInfo: PositionInfo): boolean {
+        this.moveItem(positionInfo);
+        this.clear();
+        this.removeHover();
+        this.removeDropHint();
+        this.removeHitAreas();
+
+        const currentItem = this.currentItem;
+
+        if (this.currentItem) {
+            this.currentItem.element.classList.remove("jqtree-moving");
+            this.currentItem = null;
+        }
+
+        this.isDragging = false;
+
+        if (!this.hoveredArea && currentItem) {
+            if (this.onDragStop) {
+                this.onDragStop(currentItem.node, positionInfo.originalEvent);
+            }
+        }
+
+        return false;
+    }
+
+    public refresh(): void {
+        this.removeHitAreas();
+
+        if (this.currentItem) {
+            const currentNode = this.currentItem.node;
+            this.generateHitAreas(currentNode);
+            this.currentItem = this.getNodeElementForNode(currentNode);
+
+            if (this.isDragging) {
+                this.currentItem.element.classList.add("jqtree-moving");
+            }
+        }
+    }
+
+    private canMoveToArea(area: HitArea, currentItem: NodeElement): boolean {
+        if (!this.onCanMoveTo) {
+            return true;
+        }
+
+        return this.onCanMoveTo(currentItem.node, area.node, area.position);
     }
 
     private clear(): void {
@@ -147,37 +277,26 @@ export class DragAndDropHandler {
             return null;
         }
 
-        let low = 0;
-        let high = this.hitAreas.length;
-        while (low < high) {
-            const mid = (low + high) >> 1;
-            const area = this.hitAreas[mid];
-
-            if (!area) {
-                return null;
-            }
-
+        return binarySearch<HitArea>(this.hitAreas, (area) => {
             if (y < area.top) {
-                high = mid;
+                return 1;
             } else if (y > area.bottom) {
-                low = mid + 1;
+                return -1;
             } else {
-                return area;
+                return 0;
             }
-        }
-
-        return null;
+        });
     }
 
-    private generateHitAreas(): void {
+    private generateHitAreas(currentNode: Node): void {
         const tree = this.getTree();
 
-        if (!this.currentItem || !tree) {
+        if (!tree) {
             this.hitAreas = [];
         } else {
             this.hitAreas = generateHitAreas(
                 tree,
-                this.currentItem.node,
+                currentNode,
                 this.getTreeDimensions().bottom,
             );
         }
@@ -198,19 +317,19 @@ export class DragAndDropHandler {
         };
     }
 
+    /* Move the dragged node to the selected position in the tree. */
     private moveItem(positionInfo: PositionInfo): void {
         if (
             this.currentItem &&
-            this.hoveredArea &&
-            this.hoveredArea.position !== Position.None &&
-            this.canMoveToArea(this.hoveredArea)
+            this.hoveredArea?.position &&
+            this.canMoveToArea(this.hoveredArea, this.currentItem)
         ) {
             const movedNode = this.currentItem.node;
             const targetNode = this.hoveredArea.node;
             const position = this.hoveredArea.position;
             const previousParent = movedNode.parent;
 
-            if (position === Position.Inside) {
+            if (position === "inside") {
                 this.hoveredArea.node.is_open = true;
             }
 
@@ -230,7 +349,7 @@ export class DragAndDropHandler {
                     do_move: doMove,
                     moved_node: movedNode,
                     original_event: positionInfo.originalEvent,
-                    position: getPositionName(position),
+                    position,
                     previous_parent: previousParent,
                     target_node: targetNode,
                 },
@@ -255,11 +374,7 @@ export class DragAndDropHandler {
     private mustOpenFolderTimer(area: HitArea): boolean {
         const node = area.node;
 
-        return (
-            node.isFolder() &&
-            !node.is_open &&
-            area.position === Position.Inside
-        );
+        return node.isFolder() && !node.is_open && area.position === "inside";
     }
 
     private removeDropHint(): void {
@@ -315,140 +430,4 @@ export class DragAndDropHandler {
         const nodeElement = this.getNodeElementForNode(this.hoveredArea.node);
         this.previousGhost = nodeElement.addDropHint(this.hoveredArea.position);
     }
-
-    public mouseCapture(positionInfo: PositionInfo): boolean | null {
-        const element = positionInfo.target;
-
-        if (!this.mustCaptureElement(element)) {
-            return null;
-        }
-
-        if (this.onIsMoveHandle && !this.onIsMoveHandle(jQuery(element))) {
-            return null;
-        }
-
-        let nodeElement = this.getNodeElement(element);
-
-        if (nodeElement && this.onCanMove) {
-            if (!this.onCanMove(nodeElement.node)) {
-                nodeElement = null;
-            }
-        }
-
-        this.currentItem = nodeElement;
-        return this.currentItem != null;
-    }
-
-    public mouseDrag(positionInfo: PositionInfo): boolean {
-        if (!this.currentItem || !this.dragElement) {
-            return false;
-        }
-
-        this.dragElement.move(positionInfo.pageX, positionInfo.pageY);
-
-        const area = this.findHoveredArea(
-            positionInfo.pageX,
-            positionInfo.pageY,
-        );
-
-        if (area && this.canMoveToArea(area)) {
-            if (!area.node.isFolder()) {
-                this.stopOpenFolderTimer();
-            }
-
-            if (this.hoveredArea !== area) {
-                this.hoveredArea = area;
-
-                // If this is a closed folder, start timer to open it
-                if (this.mustOpenFolderTimer(area)) {
-                    this.startOpenFolderTimer(area.node);
-                } else {
-                    this.stopOpenFolderTimer();
-                }
-
-                this.updateDropHint();
-            }
-        } else {
-            this.removeDropHint();
-            this.stopOpenFolderTimer();
-            this.hoveredArea = area;
-        }
-
-        if (!area) {
-            if (this.onDragMove) {
-                this.onDragMove(
-                    this.currentItem.node,
-                    positionInfo.originalEvent,
-                );
-            }
-        }
-
-        return true;
-    }
-
-    public mouseStart(positionInfo: PositionInfo): boolean {
-        if (!this.currentItem) {
-            return false;
-        }
-
-        this.refresh();
-
-        const { left, top } = getElementPosition(positionInfo.target);
-
-        const node = this.currentItem.node;
-
-        this.dragElement = new DragElement({
-            autoEscape: this.autoEscape ?? true,
-            nodeName: node.name,
-            offsetX: positionInfo.pageX - left,
-            offsetY: positionInfo.pageY - top,
-            treeElement: this.treeElement,
-        });
-
-        this.isDragging = true;
-        this.currentItem.element.classList.add("jqtree-moving");
-
-        return true;
-    }
-
-    public mouseStop(positionInfo: PositionInfo): boolean {
-        this.moveItem(positionInfo);
-        this.clear();
-        this.removeHover();
-        this.removeDropHint();
-        this.removeHitAreas();
-
-        const currentItem = this.currentItem;
-
-        if (this.currentItem) {
-            this.currentItem.element.classList.remove("jqtree-moving");
-            this.currentItem = null;
-        }
-
-        this.isDragging = false;
-
-        if (!this.hoveredArea && currentItem) {
-            if (this.onDragStop) {
-                this.onDragStop(currentItem.node, positionInfo.originalEvent);
-            }
-        }
-
-        return false;
-    }
-
-    public refresh(): void {
-        this.removeHitAreas();
-
-        if (this.currentItem) {
-            this.generateHitAreas();
-
-            this.currentItem = this.getNodeElementForNode(
-                this.currentItem.node,
-            );
-
-            if (this.isDragging) {
-                this.currentItem.element.classList.add("jqtree-moving");
-            }
-        }
-    }
 }

package/src/dragAndDropHandler/types.ts

@@ -1,5 +1,4 @@
-import { Node } from "../node";
-import { Position } from "../position";
+import { Node, Position } from "../node";
 
 export interface DropHint {
     remove: () => void;

package/src/elementsRenderer.ts

@@ -19,6 +19,8 @@ interface ElementsRendererParams {
 }
 
 export default class ElementsRenderer {
+    public closedIconElement?: HTMLElement | Text;
+    public openedIconElement?: HTMLElement | Text;
     private $element: JQuery;
     private autoEscape: boolean;
     private buttonLeft: boolean;
@@ -27,12 +29,10 @@ export default class ElementsRenderer {
     private isNodeSelected: IsNodeSelected;
     private onCreateLi?: OnCreateLi;
     private rtl?: boolean;
+
     private showEmptyFolder: boolean;
     private tabIndex?: number;
 
-    public closedIconElement?: HTMLElement | Text;
-    public openedIconElement?: HTMLElement | Text;
-
     constructor({
         $element,
         autoEscape,
@@ -61,6 +61,45 @@ export default class ElementsRenderer {
         this.closedIconElement = this.createButtonElement(closedIcon ?? "-");
     }
 
+    public render(fromNode: Node | null): void {
+        if (fromNode?.parent) {
+            this.renderFromNode(fromNode);
+        } else {
+            this.renderFromRoot();
+        }
+    }
+
+    public renderFromNode(node: Node): void {
+        if (!node.element) {
+            return;
+        }
+
+        // remember current li
+        const $previousLi = jQuery(node.element);
+
+        // create element
+        const li = this.createLi(node, node.getLevel());
+
+        // add element to dom
+        $previousLi.after(li);
+
+        // remove previous li
+        $previousLi.remove();
+
+        // create children
+        this.createDomElements(li, node.children, false, node.getLevel() + 1);
+    }
+
+    public renderFromRoot(): void {
+        this.$element.empty();
+
+        const tree = this.getTree();
+
+        if (this.$element[0] && tree) {
+            this.createDomElements(this.$element[0], tree.children, true, 1);
+        }
+    }
+
     private attachNodeData(node: Node, li: HTMLElement): void {
         node.element = li;
         jQuery(li).data("node", node);
@@ -324,43 +363,4 @@ export default class ElementsRenderer {
         element.setAttribute("aria-selected", getBoolString(isSelected));
         element.setAttribute("role", "treeitem");
     }
-
-    public render(fromNode: Node | null): void {
-        if (fromNode?.parent) {
-            this.renderFromNode(fromNode);
-        } else {
-            this.renderFromRoot();
-        }
-    }
-
-    public renderFromNode(node: Node): void {
-        if (!node.element) {
-            return;
-        }
-
-        // remember current li
-        const $previousLi = jQuery(node.element);
-
-        // create element
-        const li = this.createLi(node, node.getLevel());
-
-        // add element to dom
-        $previousLi.after(li);
-
-        // remove previous li
-        $previousLi.remove();
-
-        // create children
-        this.createDomElements(li, node.children, false, node.getLevel() + 1);
-    }
-
-    public renderFromRoot(): void {
-        this.$element.empty();
-
-        const tree = this.getTree();
-
-        if (this.$element[0] && tree) {
-            this.createDomElements(this.$element[0], tree.children, true, 1);
-        }
-    }
 }

package/src/jqtreeOptions.ts

@@ -1,39 +1,13 @@
 import { Node } from "./node";
 
-export type OnCanMove = ((node: Node) => boolean) | undefined;
-
-type DataUrlFunction = (node: Node | null) => JQuery.AjaxSettings;
+export type DataFilter = (data: unknown) => NodeData[];
 
 export type DataUrl = DataUrlFunction | JQuery.AjaxSettings | string;
 
 export type DragMethod = (node: Node, event: Event | Touch) => void;
 
-export type OnCanMoveTo = (
-    node: Node,
-    targetNode: Node,
-    positionName: string,
-) => boolean;
-
-export type OnGetStateFromStorage = (() => string) | undefined;
-
-export type OnIsMoveHandle = (el: JQuery) => boolean;
-
-export type OnLoadFailed = (response: JQuery.jqXHR) => void;
-
-export type OnSetStateFromStorage = ((data: string) => void) | undefined;
-
-export type DataFilter = (data: unknown) => NodeData[];
-
 export type IconElement = HTMLElement | JQuery | string;
 
-export type OnCreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
-
-export type OnLoading = (
-    isLoading: boolean,
-    node: Node | null,
-    $el: JQuery,
-) => void;
-
 export interface JQTreeOptions {
     animationSpeed: JQuery.Duration;
     autoEscape: boolean;
@@ -68,3 +42,29 @@ export interface JQTreeOptions {
     tabIndex?: number;
     useContextMenu: boolean;
 }
+
+export type OnCanMove = ((node: Node) => boolean) | undefined;
+
+export type OnCanMoveTo = (
+    node: Node,
+    targetNode: Node,
+    positionName: string,
+) => boolean;
+
+export type OnCreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
+
+export type OnGetStateFromStorage = (() => string) | undefined;
+
+export type OnIsMoveHandle = (el: JQuery) => boolean;
+
+export type OnLoadFailed = (response: JQuery.jqXHR) => void;
+
+export type OnLoading = (
+    isLoading: boolean,
+    node: Node | null,
+    $el: JQuery,
+) => void;
+
+export type OnSetStateFromStorage = ((data: string) => void) | undefined;
+
+type DataUrlFunction = (node: Node | null) => JQuery.AjaxSettings;