jqtree 1.7.3 → 1.7.5

package/lib/tree.jquery.js

@@ -45,7 +45,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var NODE_PARAM_IS_EMPTY = "Node parameter is empty";
 var PARAM_IS_EMPTY = "Parameter is empty: ";
-var JqTreeWidget = /*#__PURE__*/function (_MouseWidget) {
+var JqTreeWidget = exports.JqTreeWidget = /*#__PURE__*/function (_MouseWidget) {
   _inherits(JqTreeWidget, _MouseWidget);
   var _super = _createSuper(JqTreeWidget);
   function JqTreeWidget() {
@@ -432,13 +432,12 @@ var JqTreeWidget = /*#__PURE__*/function (_MouseWidget) {
   }, {
     key: "scrollToNode",
     value: function scrollToNode(node) {
+      var _jQuery$offset$top, _jQuery$offset, _this$$el$offset$top, _this$$el$offset;
       if (!node) {
         throw Error(NODE_PARAM_IS_EMPTY);
       }
-      var nodeOffset = jQuery(node.element).offset();
-      var nodeTop = nodeOffset ? nodeOffset.top : 0;
-      var treeOffset = this.$el.offset();
-      var treeTop = treeOffset ? treeOffset.top : 0;
+      var nodeTop = (_jQuery$offset$top = (_jQuery$offset = jQuery(node.element).offset()) === null || _jQuery$offset === void 0 ? void 0 : _jQuery$offset.top) !== null && _jQuery$offset$top !== void 0 ? _jQuery$offset$top : 0;
+      var treeTop = (_this$$el$offset$top = (_this$$el$offset = this.$el.offset()) === null || _this$$el$offset === void 0 ? void 0 : _this$$el$offset.top) !== null && _this$$el$offset$top !== void 0 ? _this$$el$offset$top : 0;
       var top = nodeTop - treeTop;
       this.scrollHandler.scrollToY(top);
       return this.element;
@@ -620,7 +619,7 @@ var JqTreeWidget = /*#__PURE__*/function (_MouseWidget) {
     value: function mouseDrag(positionInfo) {
       if (this.options.dragAndDrop) {
         var result = this.dndHandler.mouseDrag(positionInfo);
-        this.scrollHandler.checkScrolling();
+        this.scrollHandler.checkScrolling(positionInfo);
         return result;
       } else {
         return false;
@@ -630,6 +629,7 @@ var JqTreeWidget = /*#__PURE__*/function (_MouseWidget) {
     key: "mouseStop",
     value: function mouseStop(positionInfo) {
       if (this.options.dragAndDrop) {
+        this.scrollHandler.stopScrolling();
         return this.dndHandler.mouseStop(positionInfo);
       } else {
         return false;
@@ -1056,7 +1056,6 @@ var JqTreeWidget = /*#__PURE__*/function (_MouseWidget) {
   }]);
   return JqTreeWidget;
 }(_mouse["default"]);
-exports.JqTreeWidget = JqTreeWidget;
 _defineProperty(JqTreeWidget, "defaults", {
   animationSpeed: "fast",
   autoEscape: true,

package/lib/util.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isInt = exports.isFunction = exports.getBoolString = void 0;
-var isInt = function isInt(n) {
+var isInt = exports.isInt = function isInt(n) {
   return typeof n === "number" && n % 1 === 0;
 };
-exports.isInt = isInt;
-var isFunction = function isFunction(v) {
+var isFunction = exports.isFunction = function isFunction(v) {
   return typeof v === "function";
 };
-exports.isFunction = isFunction;
-var getBoolString = function getBoolString(value) {
+var getBoolString = exports.getBoolString = function getBoolString(value) {
   return value ? "true" : "false";
-};
-exports.getBoolString = getBoolString;
+};

package/lib/version.js

@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var version = "1.7.3";
-var _default = version;
-exports["default"] = _default;
+var version = "1.7.5";
+var _default = exports["default"] = version;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.7.3",
+    "version": "1.7.5",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -32,46 +32,46 @@
         "jquery": "^3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.22.15",
-        "@babel/core": "^7.22.17",
-        "@babel/preset-env": "^7.22.15",
-        "@babel/preset-typescript": "^7.22.15",
-        "@playwright/test": "^1.38.0",
-        "@rollup/plugin-babel": "^6.0.3",
-        "@rollup/plugin-node-resolve": "^15.2.1",
-        "@rollup/plugin-terser": "^0.4.3",
-        "@testing-library/dom": "^9.3.1",
-        "@types/debug": "^4.1.8",
-        "@types/jest": "^29.5.4",
-        "@types/jest-axe": "^3.5.5",
-        "@types/jquery": "^3.5.18",
-        "@types/node": "^20.6.0",
-        "@typescript-eslint/eslint-plugin": "^6.7.0",
-        "@typescript-eslint/parser": "^6.7.0",
-        "autoprefixer": "^10.4.15",
+        "@babel/cli": "^7.23.0",
+        "@babel/core": "^7.23.2",
+        "@babel/preset-env": "^7.23.2",
+        "@babel/preset-typescript": "^7.23.2",
+        "@playwright/test": "^1.39.0",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@testing-library/dom": "^9.3.3",
+        "@types/debug": "^4.1.10",
+        "@types/jest": "^29.5.6",
+        "@types/jest-axe": "^3.5.7",
+        "@types/jquery": "^3.5.24",
+        "@types/node": "^20.8.7",
+        "@typescript-eslint/eslint-plugin": "^6.8.0",
+        "@typescript-eslint/parser": "^6.8.0",
+        "autoprefixer": "^10.4.16",
         "babel-jest": "^29.7.0",
         "babel-plugin-istanbul": "^6.1.1",
-        "eslint": "^8.49.0",
+        "eslint": "^8.52.0",
         "eslint-plugin-import": "^2.28.1",
-        "eslint-plugin-jest": "^27.2.3",
-        "eslint-plugin-playwright": "^0.16.0",
-        "eslint-plugin-testing-library": "^6.0.1",
+        "eslint-plugin-jest": "^27.4.3",
+        "eslint-plugin-playwright": "^0.17.0",
+        "eslint-plugin-testing-library": "^6.1.0",
         "givens": "^1.3.9",
-        "graphql": "^16.8.0",
+        "graphql": "^16.8.1",
         "jest": "^29.7.0",
         "jest-axe": "^8.0.0",
         "jest-environment-jsdom": "^29.7.0",
-        "jest-extended": "^4.0.1",
+        "jest-extended": "^4.0.2",
         "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^1.3.1",
-        "postcss": "^8.4.29",
+        "msw": "^1.3.2",
+        "postcss": "^8.4.31",
         "postcss-cli": "^10.1.0",
         "postcss-import": "^15.1.0",
         "postcss-load-config": "^4.0.1",
         "postcss-nested": "^6.0.1",
         "prettier": "^3.0.3",
-        "rollup": "^3.29.1",
+        "rollup": "^4.1.4",
         "rollup-plugin-serve": "^2.0.2",
         "tslib": "^2.6.2",
         "typescript": "^5.2.2"

package/src/dragAndDropHandler.ts

@@ -15,7 +15,6 @@ export class DragAndDropHandler {
     public isDragging: boolean;
     public currentItem: NodeElement | null;
     public hoveredArea: HitArea | null;
-    public positionInfo: PositionInfo | null;
 
     private treeWidget: JqTreeWidget;
     private dragElement: DragElement | null;
@@ -29,7 +28,6 @@ export class DragAndDropHandler {
         this.hitAreas = [];
         this.isDragging = false;
         this.currentItem = null;
-        this.positionInfo = null;
     }
 
     public mouseCapture(positionInfo: PositionInfo): boolean | null {
@@ -80,12 +78,12 @@ export class DragAndDropHandler {
             positionInfo.pageX - left,
             positionInfo.pageY - top,
             this.treeWidget.element,
-            this.treeWidget.options.autoEscape ?? true
+            this.treeWidget.options.autoEscape ?? true,
         );
 
         this.isDragging = true;
-        this.positionInfo = positionInfo;
         this.currentItem.$element.addClass("jqtree-moving");
+
         return true;
     }
 
@@ -100,11 +98,10 @@ export class DragAndDropHandler {
         }
 
         this.dragElement.move(positionInfo.pageX, positionInfo.pageY);
-        this.positionInfo = positionInfo;
 
         const area = this.findHoveredArea(
             positionInfo.pageX,
-            positionInfo.pageY
+            positionInfo.pageY,
         );
 
         if (area && this.canMoveToArea(area)) {
@@ -134,7 +131,7 @@ export class DragAndDropHandler {
             if (this.treeWidget.options.onDragMove) {
                 this.treeWidget.options.onDragMove(
                     this.currentItem.node,
-                    positionInfo.originalEvent
+                    positionInfo.originalEvent,
                 );
             }
         }
@@ -157,13 +154,12 @@ export class DragAndDropHandler {
         }
 
         this.isDragging = false;
-        this.positionInfo = null;
 
         if (!this.hoveredArea && currentItem) {
             if (this.treeWidget.options.onDragStop) {
                 this.treeWidget.options.onDragStop(
                     currentItem.node,
-                    positionInfo.originalEvent
+                    positionInfo.originalEvent,
                 );
             }
         }
@@ -178,7 +174,7 @@ export class DragAndDropHandler {
             this.generateHitAreas();
 
             this.currentItem = this.treeWidget._getNodeElementForNode(
-                this.currentItem.node
+                this.currentItem.node,
             );
 
             if (this.isDragging) {
@@ -194,7 +190,7 @@ export class DragAndDropHandler {
             const hitAreasGenerator = new HitAreasGenerator(
                 this.treeWidget.tree,
                 this.currentItem.node,
-                this.getTreeDimensions().bottom
+                this.getTreeDimensions().bottom,
             );
             this.hitAreas = hitAreasGenerator.generate();
         }
@@ -218,7 +214,7 @@ export class DragAndDropHandler {
         return this.treeWidget.options.onCanMoveTo(
             this.currentItem.node,
             area.node,
-            positionName
+            positionName,
         );
     }
 
@@ -297,7 +293,7 @@ export class DragAndDropHandler {
 
         // add new drop hint
         const nodeElement = this.treeWidget._getNodeElementForNode(
-            this.hoveredArea.node
+            this.hoveredArea.node,
         );
         this.previousGhost = nodeElement.addDropHint(this.hoveredArea.position);
     }
@@ -310,7 +306,7 @@ export class DragAndDropHandler {
                 () => {
                     this.refresh();
                     this.updateDropHint();
-                }
+                },
             );
         };
 
@@ -321,7 +317,7 @@ export class DragAndDropHandler {
         if (openFolderDelay !== false) {
             this.openFolderTimer = window.setTimeout(
                 openFolder,
-                openFolderDelay
+                openFolderDelay,
             );
         }
     }
@@ -464,7 +460,7 @@ abstract class VisibleNodeIterator {
     protected abstract handleNode(
         node: Node,
         nextNode: Node | null,
-        $element: JQuery
+        $element: JQuery,
     ): void;
 
     /*
@@ -478,12 +474,12 @@ abstract class VisibleNodeIterator {
     protected abstract handleClosedFolder(
         node: Node,
         nextNode: Node | null,
-        $element: JQuery
+        $element: JQuery,
     ): void;
 
     protected abstract handleAfterOpenFolder(
         node: Node,
-        nextNode: Node | null
+        nextNode: Node | null,
     ): void;
 
     protected abstract handleFirstNode(node: Node): void;
@@ -512,20 +508,18 @@ export class HitAreasGenerator extends VisibleNodeIterator {
     }
 
     protected generateHitAreas(positions: HitArea[]): HitArea[] {
-        let previousTop = -1;
+        let previousTop = positions[0]?.top ?? 0;
         let group = [];
         const hitAreas: HitArea[] = [];
 
         for (const position of positions) {
             if (position.top !== previousTop && group.length) {
-                if (group.length) {
-                    this.generateHitAreasForGroup(
-                        hitAreas,
-                        group,
-                        previousTop,
-                        position.top
-                    );
-                }
+                this.generateHitAreasForGroup(
+                    hitAreas,
+                    group,
+                    previousTop,
+                    position.top,
+                );
 
                 previousTop = position.top;
                 group = [];
@@ -538,7 +532,7 @@ export class HitAreasGenerator extends VisibleNodeIterator {
             hitAreas,
             group,
             previousTop,
-            this.treeBottom
+            this.treeBottom,
         );
 
         return hitAreas;
@@ -547,6 +541,17 @@ export class HitAreasGenerator extends VisibleNodeIterator {
     protected handleOpenFolder(node: Node, $element: JQuery): boolean {
         if (node === this.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 = this.getTop($element);
+            const height = $element.height() || 0;
+            this.addPosition(node, Position.None, top);
+
+            if (height > 5) {
+                // Subtract 5 pixels to allow more space for the next element.
+                this.addPosition(node, Position.None, top + height - 5);
+            }
+
             // Stop iterating
             return false;
         }
@@ -563,7 +568,7 @@ export class HitAreasGenerator extends VisibleNodeIterator {
     protected handleClosedFolder(
         node: Node,
         nextNode: Node,
-        $element: JQuery
+        $element: JQuery,
     ): void {
         const top = this.getTop($element);
 
@@ -585,7 +590,7 @@ export class HitAreasGenerator extends VisibleNodeIterator {
             this.addPosition(
                 node,
                 Position.Before,
-                this.getTop(jQuery(node.element))
+                this.getTop(jQuery(node.element)),
             );
         }
     }
@@ -639,7 +644,7 @@ export class HitAreasGenerator extends VisibleNodeIterator {
         hitAreas: HitArea[],
         positionsInGroup: HitArea[],
         top: number,
-        bottom: number
+        bottom: number,
     ): void {
         // limit positions in group
         const positionCount = Math.min(positionsInGroup.length, 4);
@@ -651,7 +656,7 @@ export class HitAreasGenerator extends VisibleNodeIterator {
         while (i < positionCount) {
             const position = positionsInGroup[i];
 
-            if (position) {
+            if (position && position.position !== Position.None) {
                 hitAreas.push({
                     top: areaTop,
                     bottom: areaTop + areaHeight,
@@ -676,13 +681,13 @@ class DragElement {
         offsetX: number,
         offsetY: number,
         $tree: JQuery,
-        autoEscape: boolean
+        autoEscape: boolean,
     ) {
         this.offsetX = offsetX;
         this.offsetY = offsetY;
 
         this.$element = jQuery("<span>").addClass(
-            "jqtree-title jqtree-dragging"
+            "jqtree-title jqtree-dragging",
         );
 
         if (autoEscape) {

package/src/keyHandler.ts

@@ -62,14 +62,6 @@ export default class KeyHandler {
         } else {
             this.treeWidget.selectNode(node);
 
-            if (
-                !this.treeWidget.scrollHandler.isScrolledIntoView(
-                    jQuery(node.element).find(".jqtree-element")
-                )
-            ) {
-                this.treeWidget.scrollToNode(node);
-            }
-
             return false;
         }
     }

package/src/node.ts

@@ -1,6 +1,4 @@
-interface NodeRecordWithChildren extends NodeRecord {
-    children: NodeData[];
-}
+import { isNodeRecordWithChildren } from "./nodeUtils";
 
 export enum Position {
     Before = 1,
@@ -33,13 +31,6 @@ export const getPositionName = (position: Position): string => {
 export const getPosition = (name: string): Position | undefined =>
     positionNames[name];
 
-const isNodeRecordWithChildren = (
-    data: NodeData
-): data is NodeRecordWithChildren =>
-    typeof data === "object" &&
-    "children" in data &&
-    data["children"] instanceof Array;
-
 export class Node implements INode {
     public id?: NodeId;
     public name: string;
@@ -56,12 +47,20 @@ export class Node implements INode {
 
     [key: string]: unknown;
 
-    constructor(o: NodeData | null = null, isRoot = false, nodeClass = Node) {
+    constructor(
+        nodeData: NodeData | null = null,
+        isRoot = false,
+        nodeClass = Node,
+    ) {
         this.name = "";
-        this.isEmptyFolder = false;
         this.load_on_demand = false;
 
-        this.setData(o);
+        this.isEmptyFolder =
+            nodeData != null &&
+            isNodeRecordWithChildren(nodeData) &&
+            nodeData.children.length === 0;
+
+        this.setData(nodeData);
 
         this.children = [];
         this.parent = null;
@@ -77,10 +76,10 @@ export class Node implements INode {
     Set the data of this node.
 
     setData(string): set the name of the node
-    setdata(object): set attributes of the node
+    setData(object): set attributes of the node
 
     Examples:
-        setdata('node1')
+        setData('node1')
 
         setData({ name: 'node1', id: 1});
 
@@ -133,16 +132,12 @@ export class Node implements INode {
     public loadFromData(data: NodeData[]): Node {
         this.removeChildren();
 
-        for (const o of data) {
-            const node = this.createNode(o);
+        for (const childData of data) {
+            const node = this.createNode(childData);
             this.addChild(node);
 
-            if (isNodeRecordWithChildren(o)) {
-                if (o.children.length === 0) {
-                    node.isEmptyFolder = true;
-                } else {
-                    node.loadFromData(o.children);
-                }
+            if (isNodeRecordWithChildren(childData)) {
+                node.loadFromData(childData.children);
             }
         }
 
@@ -254,7 +249,7 @@ export class Node implements INode {
     public moveNode(
         movedNode: Node,
         targetNode: Node,
-        position: Position
+        position: Position,
     ): boolean {
         if (!movedNode.parent || movedNode.isParentOf(targetNode)) {
             // - Node is parent of target node
@@ -268,7 +263,7 @@ export class Node implements INode {
                     if (targetNode.parent) {
                         targetNode.parent.addChildAtPosition(
                             movedNode,
-                            targetNode.parent.getChildIndex(targetNode) + 1
+                            targetNode.parent.getChildIndex(targetNode) + 1,
                         );
                         return true;
                     }
@@ -279,7 +274,7 @@ export class Node implements INode {
                     if (targetNode.parent) {
                         targetNode.parent.addChildAtPosition(
                             movedNode,
-                            targetNode.parent.getChildIndex(targetNode)
+                            targetNode.parent.getChildIndex(targetNode),
                         );
                         return true;
                     }
@@ -380,13 +375,7 @@ export class Node implements INode {
             const childIndex = this.parent.getChildIndex(this);
             this.parent.addChildAtPosition(node, childIndex + 1);
 
-            if (
-                isNodeRecordWithChildren(nodeInfo) &&
-                nodeInfo.children.length
-            ) {
-                node.loadFromData(nodeInfo.children);
-            }
-
+            node.loadChildrenFromData(nodeInfo);
             return node;
         }
     }
@@ -400,13 +389,7 @@ export class Node implements INode {
             const childIndex = this.parent.getChildIndex(this);
             this.parent.addChildAtPosition(node, childIndex);
 
-            if (
-                isNodeRecordWithChildren(nodeInfo) &&
-                nodeInfo.children.length
-            ) {
-                node.loadFromData(nodeInfo.children);
-            }
-
+            node.loadChildrenFromData(nodeInfo);
             return node;
         }
     }
@@ -443,10 +426,7 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChild(node);
 
-        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
-            node.loadFromData(nodeInfo.children);
-        }
-
+        node.loadChildrenFromData(nodeInfo);
         return node;
     }
 
@@ -454,10 +434,7 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChildAtPosition(node, 0);
 
-        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
-            node.loadFromData(nodeInfo.children);
-        }
-
+        node.loadChildrenFromData(nodeInfo);
         return node;
     }
 
@@ -702,4 +679,11 @@ export class Node implements INode {
         const nodeClass = this.getNodeClass();
         return new nodeClass(nodeData);
     }
+
+    // Load children data from nodeInfo if it has children
+    private loadChildrenFromData(nodeInfo: NodeData) {
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+            this.loadFromData(nodeInfo.children);
+        }
+    }
 }

package/src/nodeUtils.ts

@@ -0,0 +1,10 @@
+interface NodeRecordWithChildren extends NodeRecord {
+    children: NodeData[];
+}
+
+export const isNodeRecordWithChildren = (
+    data: NodeData,
+): data is NodeRecordWithChildren =>
+    typeof data === "object" &&
+    "children" in data &&
+    data["children"] instanceof Array;