jqtree 1.8.0 → 1.8.2

package/src/dragAndDropHandler/generateHitAreas.ts

@@ -0,0 +1,187 @@
+import { HitArea } from "./types";
+import { Node } from "../node";
+import { Position } from "../position";
+import { getOffsetTop } from "../util";
+import iterateVisibleNodes from "./iterateVisibleNodes";
+
+const generatePositions = (tree: Node, currentNode: Node): HitArea[] => {
+    const positions: HitArea[] = [];
+    let lastTop = 0;
+
+    const addPosition = (node: Node, position: number, top: number) => {
+        const area = {
+            top,
+            bottom: 0,
+            node,
+            position,
+        };
+
+        positions.push(area);
+        lastTop = top;
+    };
+
+    const handleAfterOpenFolder = (node: Node, nextNode: Node | null) => {
+        if (node === currentNode || nextNode === currentNode) {
+            // Cannot move before or after current item
+            addPosition(node, Position.None, lastTop);
+        } else {
+            addPosition(node, Position.After, lastTop);
+        }
+    };
+
+    const handleClosedFolder = (
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ) => {
+        const top = getOffsetTop(element);
+
+        if (node === currentNode) {
+            // Cannot move after current item
+            addPosition(node, Position.None, top);
+        } else {
+            addPosition(node, Position.Inside, top);
+
+            // Cannot move before current item
+            if (nextNode !== currentNode) {
+                addPosition(node, Position.After, top);
+            }
+        }
+    };
+
+    const handleFirstNode = (node: Node) => {
+        if (node !== currentNode) {
+            addPosition(node, Position.Before, getOffsetTop(node.element));
+        }
+    };
+
+    const handleNode = (
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ) => {
+        const top = getOffsetTop(element);
+
+        if (node === currentNode) {
+            // Cannot move inside current item
+            addPosition(node, Position.None, top);
+        } else {
+            addPosition(node, Position.Inside, top);
+        }
+
+        if (nextNode === currentNode || node === currentNode) {
+            // Cannot move before or after current item
+            addPosition(node, Position.None, top);
+        } else {
+            addPosition(node, Position.After, top);
+        }
+    };
+
+    const handleOpenFolder = (node: Node, element: HTMLElement) => {
+        if (node === currentNode) {
+            // Cannot move inside current item
+
+            // Dnd over the current element is not possible: add a position with type None for the top and the bottom.
+            const top = getOffsetTop(element);
+            const height = element.clientHeight;
+            addPosition(node, Position.None, top);
+
+            if (height > 5) {
+                // Subtract 5 pixels to allow more space for the next element.
+                addPosition(node, Position.None, top + height - 5);
+            }
+
+            // Stop iterating
+            return false;
+        }
+
+        // Cannot move before current item
+        if (node.children[0] !== currentNode) {
+            addPosition(node, Position.Inside, getOffsetTop(element));
+        }
+
+        // Continue iterating
+        return true;
+    };
+
+    iterateVisibleNodes(tree, {
+        handleAfterOpenFolder,
+        handleClosedFolder,
+        handleFirstNode,
+        handleNode,
+        handleOpenFolder,
+    });
+
+    return positions;
+};
+
+const generateHitAreasForGroup = (
+    hitAreas: HitArea[],
+    positionsInGroup: HitArea[],
+    top: number,
+    bottom: number,
+) => {
+    // limit positions in group
+    const positionCount = Math.min(positionsInGroup.length, 4);
+
+    const areaHeight = Math.round((bottom - top) / positionCount);
+    let areaTop = top;
+
+    let i = 0;
+    while (i < positionCount) {
+        const position = positionsInGroup[i];
+
+        if (position && position.position !== Position.None) {
+            hitAreas.push({
+                top: areaTop,
+                bottom: areaTop + areaHeight,
+                node: position.node,
+                position: position.position,
+            });
+        }
+
+        areaTop += areaHeight;
+        i += 1;
+    }
+};
+
+const generateHitAreasFromPositions = (
+    positions: HitArea[],
+    treeBottom: number,
+): HitArea[] => {
+    let previousTop = positions[0]?.top ?? 0;
+    let group = [];
+    const hitAreas: HitArea[] = [];
+
+    for (const position of positions) {
+        if (position.top !== previousTop && group.length) {
+            generateHitAreasForGroup(
+                hitAreas,
+                group,
+                previousTop,
+                position.top,
+            );
+
+            previousTop = position.top;
+            group = [];
+        }
+
+        group.push(position);
+    }
+
+    generateHitAreasForGroup(hitAreas, group, previousTop, treeBottom);
+
+    return hitAreas;
+};
+
+const generateHitAreas = (
+    tree: Node,
+    currentNode: Node,
+    treeBottom: number,
+) => {
+    const positions = generatePositions(tree, currentNode);
+
+    return generateHitAreasFromPositions(positions, treeBottom);
+};
+
+export default generateHitAreas;

package/src/dragAndDropHandler/index.ts

@@ -1,9 +1,11 @@
-import { getPositionName, Node, Position } from "../node";
+import { Node } from "../node";
+import { getPositionName, Position } from "../position";
 import { DropHint, HitArea } from "./types";
-import { PositionInfo } from "../mouseWidgetTypes";
+import { PositionInfo } from "../mouseUtils";
 import NodeElement from "../nodeElement";
 import DragElement from "./dragElement";
-import HitAreasGenerator from "./hitAreasGenerator";
+import generateHitAreas from "./generateHitAreas";
+import { getElementPosition } from "../util";
 import {
     OnCanMove,
     OnCanMoveTo,
@@ -43,7 +45,7 @@ interface DragAndDropHandlerParams {
     openNode: OpenNode;
     refreshElements: RefreshElements;
     slide: boolean;
-    $treeElement: JQuery<HTMLElement>;
+    treeElement: HTMLElement;
     triggerEvent: TriggerEvent;
 }
 
@@ -70,7 +72,7 @@ export class DragAndDropHandler {
     private previousGhost: DropHint | null;
     private refreshElements: RefreshElements;
     private slide: boolean;
-    private $treeElement: JQuery<HTMLElement>;
+    private treeElement: HTMLElement;
     private triggerEvent: TriggerEvent;
 
     constructor({
@@ -87,7 +89,7 @@ export class DragAndDropHandler {
         openNode,
         refreshElements,
         slide,
-        $treeElement,
+        treeElement,
         triggerEvent,
     }: DragAndDropHandlerParams) {
         this.autoEscape = autoEscape;
@@ -103,7 +105,7 @@ export class DragAndDropHandler {
         this.openNode = openNode;
         this.refreshElements = refreshElements;
         this.slide = slide;
-        this.$treeElement = $treeElement;
+        this.treeElement = treeElement;
         this.triggerEvent = triggerEvent;
 
         this.hoveredArea = null;
@@ -136,29 +138,23 @@ export class DragAndDropHandler {
     }
 
     public mouseStart(positionInfo: PositionInfo): boolean {
-        if (
-            !this.currentItem ||
-            positionInfo.pageX === undefined ||
-            positionInfo.pageY === undefined
-        ) {
+        if (!this.currentItem) {
             return false;
         }
 
         this.refresh();
 
-        const offset = jQuery(positionInfo.target).offset();
-        const left = offset ? offset.left : 0;
-        const top = offset ? offset.top : 0;
+        const { left, top } = getElementPosition(positionInfo.target);
 
         const node = this.currentItem.node;
 
-        this.dragElement = new DragElement(
-            node.name,
-            positionInfo.pageX - left,
-            positionInfo.pageY - top,
-            this.$treeElement,
-            this.autoEscape ?? true,
-        );
+        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");
@@ -167,12 +163,7 @@ export class DragAndDropHandler {
     }
 
     public mouseDrag(positionInfo: PositionInfo): boolean {
-        if (
-            !this.currentItem ||
-            !this.dragElement ||
-            positionInfo.pageX === undefined ||
-            positionInfo.pageY === undefined
-        ) {
+        if (!this.currentItem || !this.dragElement) {
             return false;
         }
 
@@ -265,12 +256,11 @@ export class DragAndDropHandler {
         if (!this.currentItem || !tree) {
             this.hitAreas = [];
         } else {
-            const hitAreasGenerator = new HitAreasGenerator(
+            this.hitAreas = generateHitAreas(
                 tree,
                 this.currentItem.node,
                 this.getTreeDimensions().bottom,
             );
-            this.hitAreas = hitAreasGenerator.generate();
         }
     }
 
@@ -424,7 +414,8 @@ export class DragAndDropHandler {
 
                 if (tree) {
                     tree.moveNode(movedNode, targetNode, position);
-                    this.$treeElement.empty();
+
+                    this.treeElement.textContent = "";
                     this.refreshElements(null);
                 }
             };
@@ -449,22 +440,15 @@ export class DragAndDropHandler {
     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 offset = this.$treeElement.offset();
-
-        if (!offset) {
-            return { left: 0, top: 0, right: 0, bottom: 0 };
-        } else {
-            const el = this.$treeElement;
-            const width = el.width() || 0;
-            const height = el.height() || 0;
-            const left = offset.left + this.getScrollLeft();
-
-            return {
-                left,
-                top: offset.top,
-                right: left + width,
-                bottom: offset.top + height + 16,
-            };
-        }
+        const treePosition = getElementPosition(this.treeElement);
+        const left = treePosition.left + this.getScrollLeft();
+        const top = treePosition.top;
+
+        return {
+            left,
+            top,
+            right: left + this.treeElement.clientWidth,
+            bottom: top + this.treeElement.clientHeight + 16,
+        };
     }
 }

package/src/dragAndDropHandler/iterateVisibleNodes.ts

@@ -0,0 +1,91 @@
+import { Node } from "../node";
+
+interface Options {
+    handleAfterOpenFolder: (node: Node, nextNode: Node | null) => void;
+    handleClosedFolder: (
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ) => void;
+    handleFirstNode: (node: Node) => void;
+    handleNode: (
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ) => void;
+
+    /*
+    override
+    return
+        - true: continue iterating
+        - false: stop iterating
+    */
+    handleOpenFolder: (node: Node, element: HTMLElement) => boolean;
+}
+
+const iterateVisibleNodes = (
+    tree: Node,
+    {
+        handleAfterOpenFolder,
+        handleClosedFolder,
+        handleFirstNode,
+        handleNode,
+        handleOpenFolder,
+    }: Options,
+) => {
+    let isFirstNode = true;
+
+    const iterate = (node: Node, nextNode: Node | null): void => {
+        let mustIterateInside =
+            (node.is_open || !node.element) && node.hasChildren();
+
+        let element: HTMLElement | null = null;
+
+        // Is the element visible?
+        if (node.element?.offsetParent) {
+            element = node.element;
+
+            if (isFirstNode) {
+                handleFirstNode(node);
+                isFirstNode = false;
+            }
+
+            if (!node.hasChildren()) {
+                handleNode(node, nextNode, node.element);
+            } else if (node.is_open) {
+                if (!handleOpenFolder(node, node.element)) {
+                    mustIterateInside = false;
+                }
+            } else {
+                handleClosedFolder(node, nextNode, element);
+            }
+        }
+
+        if (mustIterateInside) {
+            const childrenLength = node.children.length;
+            node.children.forEach((_, i) => {
+                const child = node.children[i];
+
+                if (child) {
+                    if (i === childrenLength - 1) {
+                        iterate(child, null);
+                    } else {
+                        const nextChild = node.children[i + 1];
+
+                        if (nextChild) {
+                            iterate(child, nextChild);
+                        }
+                    }
+                }
+            });
+
+            if (node.is_open && element) {
+                handleAfterOpenFolder(node, nextNode);
+            }
+        }
+    };
+
+    iterate(tree, null);
+};
+
+export default iterateVisibleNodes;

package/src/dragAndDropHandler/types.ts

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