jqtree 1.8.5 → 1.8.6

package/src/dragAndDropHandler/index.ts

@@ -1,17 +1,3 @@
-import { Node } from "../node";
-import { getPositionName, Position } from "../position";
-import { DropHint, HitArea } from "./types";
-import { PositionInfo } from "../mouseUtils";
-import NodeElement from "../nodeElement";
-import DragElement from "./dragElement";
-import generateHitAreas from "./generateHitAreas";
-import { getElementPosition } from "../util";
-import {
-    OnCanMove,
-    OnCanMoveTo,
-    OnIsMoveHandle,
-    DragMethod,
-} from "../jqtreeOptions";
 import {
     GetScrollLeft,
     GetTree,
@@ -19,12 +5,26 @@ import {
     RefreshElements,
     TriggerEvent,
 } from "../jqtreeMethodTypes";
+import {
+    DragMethod,
+    OnCanMove,
+    OnCanMoveTo,
+    OnIsMoveHandle,
+} from "../jqtreeOptions";
+import { PositionInfo } from "../mouseUtils";
+import { Node } from "../node";
+import NodeElement from "../nodeElement";
+import { getPositionName, Position } from "../position";
+import { getElementPosition } from "../util";
+import DragElement from "./dragElement";
+import generateHitAreas from "./generateHitAreas";
+import { DropHint, HitArea } from "./types";
 
 interface Dimensions {
+    bottom: number;
     left: number;
-    top: number;
     right: number;
-    bottom: number;
+    top: number;
 }
 
 type GetNodeElement = (element: HTMLElement) => NodeElement | null;
@@ -41,7 +41,7 @@ interface DragAndDropHandlerParams {
     onDragMove?: DragMethod;
     onDragStop?: DragMethod;
     onIsMoveHandle?: OnIsMoveHandle;
-    openFolderDelay: number | false;
+    openFolderDelay: false | number;
     openNode: OpenNode;
     refreshElements: RefreshElements;
     slide: boolean;
@@ -50,15 +50,11 @@ interface DragAndDropHandlerParams {
 }
 
 export class DragAndDropHandler {
-    public hitAreas: HitArea[];
-    public isDragging: boolean;
-    public currentItem: NodeElement | null;
-    public hoveredArea: HitArea | null;
-
     private autoEscape?: boolean;
     private dragElement: DragElement | null;
     private getNodeElement: GetNodeElement;
     private getNodeElementForNode: GetNodeElementForNode;
+
     private getScrollLeft: GetScrollLeft;
     private getTree: GetTree;
     private onCanMove?: OnCanMove;
@@ -66,14 +62,18 @@ export class DragAndDropHandler {
     private onDragMove?: DragMethod;
     private onDragStop?: DragMethod;
     private onIsMoveHandle?: OnIsMoveHandle;
-    private openFolderDelay: number | false;
-    private openFolderTimer: number | null;
+    private openFolderDelay: false | number;
+    private openFolderTimer: null | number;
     private openNode: OpenNode;
     private previousGhost: DropHint | null;
     private refreshElements: RefreshElements;
     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,
@@ -114,166 +114,6 @@ export class DragAndDropHandler {
         this.currentItem = null;
     }
 
-    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 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 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 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");
-            }
-        }
-    }
-
-    private generateHitAreas(): void {
-        const tree = this.getTree();
-
-        if (!this.currentItem || !tree) {
-            this.hitAreas = [];
-        } else {
-            this.hitAreas = generateHitAreas(
-                tree,
-                this.currentItem.node,
-                this.getTreeDimensions().bottom,
-            );
-        }
-    }
-
-    private mustCaptureElement(element: HTMLElement): boolean {
-        const nodeName = element.nodeName;
-
-        return (
-            nodeName !== "INPUT" &&
-            nodeName !== "SELECT" &&
-            nodeName !== "TEXTAREA"
-        );
-    }
-
     private canMoveToArea(area: HitArea): boolean {
         if (!this.onCanMoveTo) {
             return true;
@@ -288,10 +128,6 @@ export class DragAndDropHandler {
         return this.onCanMoveTo(this.currentItem.node, area.node, positionName);
     }
 
-    private removeHitAreas(): void {
-        this.hitAreas = [];
-    }
-
     private clear(): void {
         if (this.dragElement) {
             this.dragElement.remove();
@@ -299,16 +135,6 @@ export class DragAndDropHandler {
         }
     }
 
-    private removeDropHint(): void {
-        if (this.previousGhost) {
-            this.previousGhost.remove();
-        }
-    }
-
-    private removeHover(): void {
-        this.hoveredArea = null;
-    }
-
     private findHoveredArea(x: number, y: number): HitArea | null {
         const dimensions = this.getTreeDimensions();
 
@@ -343,6 +169,89 @@ export class DragAndDropHandler {
         return null;
     }
 
+    private generateHitAreas(): void {
+        const tree = this.getTree();
+
+        if (!this.currentItem || !tree) {
+            this.hitAreas = [];
+        } else {
+            this.hitAreas = generateHitAreas(
+                tree,
+                this.currentItem.node,
+                this.getTreeDimensions().bottom,
+            );
+        }
+    }
+
+    private getTreeDimensions(): Dimensions {
+        // Return the dimensions of the tree. Add a margin to the bottom to allow
+        // to drag-and-drop after the last element.
+        const treePosition = getElementPosition(this.treeElement);
+        const left = treePosition.left + this.getScrollLeft();
+        const top = treePosition.top;
+
+        return {
+            bottom: top + this.treeElement.clientHeight + 16,
+            left,
+            right: left + this.treeElement.clientWidth,
+            top,
+        };
+    }
+
+    private moveItem(positionInfo: PositionInfo): void {
+        if (
+            this.currentItem &&
+            this.hoveredArea &&
+            this.hoveredArea.position !== Position.None &&
+            this.canMoveToArea(this.hoveredArea)
+        ) {
+            const movedNode = this.currentItem.node;
+            const targetNode = this.hoveredArea.node;
+            const position = this.hoveredArea.position;
+            const previousParent = movedNode.parent;
+
+            if (position === Position.Inside) {
+                this.hoveredArea.node.is_open = true;
+            }
+
+            const doMove = (): void => {
+                const tree = this.getTree();
+
+                if (tree) {
+                    tree.moveNode(movedNode, targetNode, position);
+
+                    this.treeElement.textContent = "";
+                    this.refreshElements(null);
+                }
+            };
+
+            const event = this.triggerEvent("tree.move", {
+                move_info: {
+                    do_move: doMove,
+                    moved_node: movedNode,
+                    original_event: positionInfo.originalEvent,
+                    position: getPositionName(position),
+                    previous_parent: previousParent,
+                    target_node: targetNode,
+                },
+            });
+
+            if (!event.isDefaultPrevented()) {
+                doMove();
+            }
+        }
+    }
+
+    private mustCaptureElement(element: HTMLElement): boolean {
+        const nodeName = element.nodeName;
+
+        return (
+            nodeName !== "INPUT" &&
+            nodeName !== "SELECT" &&
+            nodeName !== "TEXTAREA"
+        );
+    }
+
     private mustOpenFolderTimer(area: HitArea): boolean {
         const node = area.node;
 
@@ -353,17 +262,18 @@ export class DragAndDropHandler {
         );
     }
 
-    private updateDropHint(): void {
-        if (!this.hoveredArea) {
-            return;
+    private removeDropHint(): void {
+        if (this.previousGhost) {
+            this.previousGhost.remove();
         }
+    }
 
-        // remove previous drop hint
-        this.removeDropHint();
+    private removeHitAreas(): void {
+        this.hitAreas = [];
+    }
 
-        // add new drop hint
-        const nodeElement = this.getNodeElementForNode(this.hoveredArea.node);
-        this.previousGhost = nodeElement.addDropHint(this.hoveredArea.position);
+    private removeHover(): void {
+        this.hoveredArea = null;
     }
 
     private startOpenFolderTimer(folder: Node): void {
@@ -393,62 +303,152 @@ export class DragAndDropHandler {
         }
     }
 
-    private moveItem(positionInfo: PositionInfo): void {
-        if (
-            this.currentItem &&
-            this.hoveredArea &&
-            this.hoveredArea.position !== Position.None &&
-            this.canMoveToArea(this.hoveredArea)
-        ) {
-            const movedNode = this.currentItem.node;
-            const targetNode = this.hoveredArea.node;
-            const position = this.hoveredArea.position;
-            const previousParent = movedNode.parent;
+    private updateDropHint(): void {
+        if (!this.hoveredArea) {
+            return;
+        }
 
-            if (position === Position.Inside) {
-                this.hoveredArea.node.is_open = true;
+        // remove previous drop hint
+        this.removeDropHint();
+
+        // add new drop hint
+        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;
             }
+        }
 
-            const doMove = (): void => {
-                const tree = this.getTree();
+        this.currentItem = nodeElement;
+        return this.currentItem != null;
+    }
 
-                if (tree) {
-                    tree.moveNode(movedNode, targetNode, position);
+    public mouseDrag(positionInfo: PositionInfo): boolean {
+        if (!this.currentItem || !this.dragElement) {
+            return false;
+        }
 
-                    this.treeElement.textContent = "";
-                    this.refreshElements(null);
+        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();
                 }
-            };
 
-            const event = this.triggerEvent("tree.move", {
-                move_info: {
-                    moved_node: movedNode,
-                    target_node: targetNode,
-                    position: getPositionName(position),
-                    previous_parent: previousParent,
-                    do_move: doMove,
-                    original_event: positionInfo.originalEvent,
-                },
-            });
+                this.updateDropHint();
+            }
+        } else {
+            this.removeDropHint();
+            this.stopOpenFolderTimer();
+            this.hoveredArea = area;
+        }
 
-            if (!event.isDefaultPrevented()) {
-                doMove();
+        if (!area) {
+            if (this.onDragMove) {
+                this.onDragMove(
+                    this.currentItem.node,
+                    positionInfo.originalEvent,
+                );
             }
         }
+
+        return true;
     }
 
-    private getTreeDimensions(): Dimensions {
-        // Return the dimensions of the tree. Add a margin to the bottom to allow
-        // to drag-and-drop after the last element.
-        const treePosition = getElementPosition(this.treeElement);
-        const left = treePosition.left + this.getScrollLeft();
-        const top = treePosition.top;
+    public mouseStart(positionInfo: PositionInfo): boolean {
+        if (!this.currentItem) {
+            return false;
+        }
 
-        return {
-            left,
-            top,
-            right: left + this.treeElement.clientWidth,
-            bottom: top + this.treeElement.clientHeight + 16,
-        };
+        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

@@ -6,8 +6,8 @@ export interface DropHint {
 }
 
 export interface HitArea {
-    top: number;
     bottom: number;
     node: Node;
     position: Position;
+    top: number;
 }