jqtree 1.8.1 → 1.8.3

package/bower.json

@@ -1,6 +1,6 @@
 {
     "name": "jqTree",
-    "version": "1.8.1",
+    "version": "1.8.3",
     "main": [
         "jqtree.css",
         "jqtree-circle.png",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.8.1",
+    "version": "1.8.3",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -35,11 +35,12 @@
         "jquery": "^3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.9",
-        "@babel/core": "^7.23.9",
-        "@babel/preset-env": "^7.23.9",
-        "@babel/preset-typescript": "^7.23.3",
-        "@playwright/test": "^1.41.2",
+        "@babel/cli": "^7.24.1",
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.24.4",
+        "@babel/preset-typescript": "^7.24.1",
+        "@codecov/rollup-plugin": "0.0.1-beta.5",
+        "@playwright/test": "^1.43.0",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
@@ -49,17 +50,17 @@
         "@types/jest": "^29.5.12",
         "@types/jest-axe": "^3.5.9",
         "@types/jquery": "^3.5.29",
-        "@types/node": "^20.11.19",
-        "@typescript-eslint/eslint-plugin": "^7.0.1",
-        "@typescript-eslint/parser": "^7.0.1",
-        "autoprefixer": "^10.4.17",
+        "@types/node": "^20.12.5",
+        "@typescript-eslint/eslint-plugin": "^7.5.0",
+        "@typescript-eslint/parser": "^7.5.0",
+        "autoprefixer": "^10.4.19",
         "babel-jest": "^29.7.0",
         "babel-plugin-istanbul": "^6.1.1",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^27.9.0",
-        "eslint-plugin-playwright": "^1.1.2",
+        "eslint-plugin-playwright": "^1.5.4",
         "eslint-plugin-testing-library": "^6.2.0",
         "givens": "^1.3.9",
         "graphql": "^16.8.1",
@@ -68,18 +69,18 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-extended": "^4.0.2",
         "jsonfile": "^6.1.0",
-        "lodash.template": "^4.5.0",
-        "msw": "^2.2.1",
-        "postcss": "^8.4.35",
+        "lodash": "^4.17.21",
+        "msw": "^2.2.13",
+        "postcss": "^8.4.38",
         "postcss-cli": "^11.0.0",
-        "postcss-import": "^16.0.1",
+        "postcss-import": "^16.1.0",
         "postcss-load-config": "^5.0.3",
         "postcss-nested": "^6.0.1",
         "prettier": "^3.2.5",
-        "rollup": "^4.12.0",
+        "rollup": "^4.14.0",
         "rollup-plugin-serve": "^3.0.0",
         "tslib": "^2.6.2",
-        "typescript": "^5.3.3",
-        "undici": "^5.28.3"
+        "typescript": "^5.4.4",
+        "undici": "^5.28.4"
     }
 }

package/src/dragAndDropHandler/generateHitAreas.ts

@@ -4,28 +4,34 @@ import { Position } from "../position";
 import { getOffsetTop } from "../util";
 import iterateVisibleNodes from "./iterateVisibleNodes";
 
-const generatePositions = (tree: Node, currentNode: Node): HitArea[] => {
-    const positions: HitArea[] = [];
+interface HitPosition {
+    top: number;
+    node: Node;
+    position: Position;
+}
+
+export const generateHitPositions = (
+    tree: Node,
+    currentNode: Node,
+): HitPosition[] => {
+    const hitPositions: HitPosition[] = [];
     let lastTop = 0;
 
-    const addPosition = (node: Node, position: number, top: number) => {
-        const area = {
+    const addHitPosition = (node: Node, position: number, top: number) => {
+        hitPositions.push({
             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);
+            addHitPosition(node, Position.None, lastTop);
         } else {
-            addPosition(node, Position.After, lastTop);
+            addHitPosition(node, Position.After, lastTop);
         }
     };
 
@@ -38,20 +44,20 @@ const generatePositions = (tree: Node, currentNode: Node): HitArea[] => {
 
         if (node === currentNode) {
             // Cannot move after current item
-            addPosition(node, Position.None, top);
+            addHitPosition(node, Position.None, top);
         } else {
-            addPosition(node, Position.Inside, top);
+            addHitPosition(node, Position.Inside, top);
 
             // Cannot move before current item
             if (nextNode !== currentNode) {
-                addPosition(node, Position.After, top);
+                addHitPosition(node, Position.After, top);
             }
         }
     };
 
     const handleFirstNode = (node: Node) => {
         if (node !== currentNode) {
-            addPosition(node, Position.Before, getOffsetTop(node.element));
+            addHitPosition(node, Position.Before, getOffsetTop(node.element));
         }
     };
 
@@ -64,29 +70,40 @@ const generatePositions = (tree: Node, currentNode: Node): HitArea[] => {
 
         if (node === currentNode) {
             // Cannot move inside current item
-            addPosition(node, Position.None, top);
+            addHitPosition(node, Position.None, top);
         } else {
-            addPosition(node, Position.Inside, top);
+            addHitPosition(node, Position.Inside, top);
         }
 
         if (nextNode === currentNode || node === currentNode) {
             // Cannot move before or after current item
-            addPosition(node, Position.None, top);
+            addHitPosition(node, Position.None, top);
         } else {
-            addPosition(node, Position.After, top);
+            addHitPosition(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;
+            addHitPosition(node, Position.None, top);
+
+            if (height > 5) {
+                // Subtract 5 pixels to allow more space for the next element.
+                addHitPosition(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));
+            addHitPosition(node, Position.Inside, getOffsetTop(element));
         }
 
         // Continue iterating
@@ -101,12 +118,12 @@ const generatePositions = (tree: Node, currentNode: Node): HitArea[] => {
         handleOpenFolder,
     });
 
-    return positions;
+    return hitPositions;
 };
 
-const generateHitAreasForGroup = (
+export const generateHitAreasForGroup = (
     hitAreas: HitArea[],
-    positionsInGroup: HitArea[],
+    positionsInGroup: HitPosition[],
     top: number,
     bottom: number,
 ) => {
@@ -116,11 +133,10 @@ const generateHitAreasForGroup = (
     const areaHeight = Math.round((bottom - top) / positionCount);
     let areaTop = top;
 
-    let i = 0;
-    while (i < positionCount) {
-        const position = positionsInGroup[i];
+    for (let i = 0; i < positionCount; i++) {
+        const position = positionsInGroup[i] as HitPosition;
 
-        if (position) {
+        if (position.position !== Position.None) {
             hitAreas.push({
                 top: areaTop,
                 bottom: areaTop + areaHeight,
@@ -130,19 +146,22 @@ const generateHitAreasForGroup = (
         }
 
         areaTop += areaHeight;
-        i += 1;
     }
 };
 
-const generateHitAreasFromPositions = (
-    positions: HitArea[],
+export const generateHitAreasFromPositions = (
+    hitPositions: HitPosition[],
     treeBottom: number,
 ): HitArea[] => {
-    let previousTop = positions[0]?.top ?? 0;
-    let group = [];
+    if (!hitPositions.length) {
+        return [];
+    }
+
+    let previousTop = (hitPositions[0] as HitPosition).top;
+    let group: HitPosition[] = [];
     const hitAreas: HitArea[] = [];
 
-    for (const position of positions) {
+    for (const position of hitPositions) {
         if (position.top !== previousTop && group.length) {
             generateHitAreasForGroup(
                 hitAreas,
@@ -163,14 +182,10 @@ const generateHitAreasFromPositions = (
     return hitAreas;
 };
 
-const generateHitAreas = (
-    tree: Node,
-    currentNode: Node,
-    treeBottom: number,
-) => {
-    const positions = generatePositions(tree, currentNode);
-
-    return generateHitAreasFromPositions(positions, treeBottom);
-};
+const generateHitAreas = (tree: Node, currentNode: Node, treeBottom: number) =>
+    generateHitAreasFromPositions(
+        generateHitPositions(tree, currentNode),
+        treeBottom,
+    );
 
 export default generateHitAreas;

package/src/nodeElement/ghostDropHint.ts

@@ -1,55 +1,21 @@
-import { Node } from "../node";
-import { Position } from "../position";
 import { DropHint } from "../dragAndDropHandler/types";
 
 class GhostDropHint implements DropHint {
     private element: HTMLElement;
-    private node: Node;
     private ghost: HTMLElement;
 
-    constructor(node: Node, element: HTMLElement, position: Position) {
+    constructor(element: HTMLElement) {
         this.element = element;
-        this.node = node;
         this.ghost = this.createGhostElement();
 
-        if (position === Position.After) {
-            this.moveAfter();
-        } else if (position === Position.Before) {
-            this.moveBefore();
-        } else if (position === Position.Inside) {
-            if (node.isFolder() && node.is_open) {
-                this.moveInsideOpenFolder();
-            } else {
-                this.moveInside();
-            }
-        }
+        this.element.after(this.ghost);
+        this.ghost.classList.add("jqtree-inside");
     }
 
     public remove(): void {
         this.ghost.remove();
     }
 
-    private moveAfter(): void {
-        this.element.after(this.ghost);
-    }
-
-    private moveBefore(): void {
-        this.element.before(this.ghost);
-    }
-
-    private moveInsideOpenFolder(): void {
-        const childElement = this.node.children[0]?.element;
-
-        if (childElement) {
-            childElement.before(this.ghost);
-        }
-    }
-
-    private moveInside(): void {
-        this.element.after(this.ghost);
-        this.ghost.classList.add("jqtree-inside");
-    }
-
     private createGhostElement() {
         const ghost = document.createElement("li");
         ghost.className = "jqtree_common jqtree-ghost";

package/src/nodeElement/index.ts

@@ -52,7 +52,7 @@ class NodeElement {
         if (this.mustShowBorderDropHint(position)) {
             return new BorderDropHint(this.element, this.getScrollLeft());
         } else {
-            return new GhostDropHint(this.node, this.element, position);
+            return new GhostDropHint(this.element);
         }
     }
 

package/src/saveStateHandler.ts

@@ -147,21 +147,54 @@ export default class SaveStateHandler {
         state: SavedState,
         cbFinished: () => void,
     ): void {
-        if (state) {
-            this.doSetInitialStateOnDemand(
-                state.open_nodes,
-                state.selected_node,
-                cbFinished,
-            );
-        } else {
-            cbFinished();
-        }
+        let loadingCount = 0;
+        let nodeIds = state.open_nodes;
+
+        const openNodes = (): void => {
+            const newNodesIds = [];
+
+            for (const nodeId of nodeIds) {
+                const node = this.getNodeById(nodeId);
+
+                if (!node) {
+                    newNodesIds.push(nodeId);
+                } else {
+                    if (!node.is_loading) {
+                        if (node.load_on_demand) {
+                            loadAndOpenNode(node);
+                        } else {
+                            this.openNode(node, false);
+                        }
+                    }
+                }
+            }
+
+            nodeIds = newNodesIds;
+
+            if (this.selectInitialNodes(state.selected_node)) {
+                this.refreshElements(null);
+            }
+
+            if (loadingCount === 0) {
+                cbFinished();
+            }
+        };
+
+        const loadAndOpenNode = (node: Node): void => {
+            loadingCount += 1;
+            this.openNode(node, false, () => {
+                loadingCount -= 1;
+                openNodes();
+            });
+        };
+
+        openNodes();
     }
 
     public getNodeIdToBeSelected(): NodeId | null {
         const state = this.getStateFromStorage();
 
-        if (state && state.selected_node) {
+        if (state?.selected_node) {
             return state.selected_node[0] || null;
         } else {
             return null;
@@ -232,55 +265,6 @@ export default class SaveStateHandler {
         });
     }
 
-    private doSetInitialStateOnDemand(
-        nodeIdsParam: NodeId[],
-        selectedNodes: NodeId[],
-        cbFinished: () => void,
-    ): void {
-        let loadingCount = 0;
-        let nodeIds = nodeIdsParam;
-
-        const openNodes = (): void => {
-            const newNodesIds = [];
-
-            for (const nodeId of nodeIds) {
-                const node = this.getNodeById(nodeId);
-
-                if (!node) {
-                    newNodesIds.push(nodeId);
-                } else {
-                    if (!node.is_loading) {
-                        if (node.load_on_demand) {
-                            loadAndOpenNode(node);
-                        } else {
-                            this.openNode(node, false);
-                        }
-                    }
-                }
-            }
-
-            nodeIds = newNodesIds;
-
-            if (this.selectInitialNodes(selectedNodes)) {
-                this.refreshElements(null);
-            }
-
-            if (loadingCount === 0) {
-                cbFinished();
-            }
-        };
-
-        const loadAndOpenNode = (node: Node): void => {
-            loadingCount += 1;
-            this.openNode(node, false, () => {
-                loadingCount -= 1;
-                openNodes();
-            });
-        };
-
-        openNodes();
-    }
-
     private getKeyName(): string {
         if (typeof this.saveStateOption === "string") {
             return this.saveStateOption;

package/src/version.ts

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