jqtree 1.8.0 → 1.8.1

package/.eslintrc

@@ -6,8 +6,7 @@
         "plugin:@typescript-eslint/eslint-recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
-        "plugin:import/errors",
-        "plugin:import/warnings",
+        "plugin:import/recommended",
         "plugin:import/typescript"
     ],
     "rules": {
@@ -33,6 +32,17 @@
         ]
     },
     "parserOptions": {
-        "project": "./tsconfig.json",
+        "project": "./tsconfig.json"
+    },
+    "settings": {
+        "import/parsers": {
+            "@typescript-eslint/parser": [".ts"]
+        },
+        "import/resolver": {
+            "typescript": {
+                "alwaysTryTypes": true,
+                "project": "./tsconfig.json"
+            }
+        }
     }
 }

package/.github/workflows/ci.yml

@@ -8,25 +8,25 @@ jobs:
 
         steps:
             - name: Check out repository code
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
             - name: Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                node-version: "20"
             - name: Install pnpm
               run: npm install -g pnpm
             - name: Get pnpm store directory
               id: pnpm-cache
               run: |
                 echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - uses: actions/cache@v3
+            - uses: actions/cache@v4
               name: Setup pnpm cache
               with:
                 path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
                 key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
                 restore-keys: |
                   ${{ runner.os }}-pnpm-store-
-            - uses: actions/cache@v3
+            - uses: actions/cache@v4
               name: Setup Playwright browsers cache
               with:
                 path: /home/runner/.cache/ms-playwright/
@@ -55,7 +55,7 @@ jobs:
               run: pnpm run playwright
             - name: Screenshots artifact
               if: always()
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               with:
                 name: screenshots
                 path: src/playwright/playwright.test.ts-snapshots/

package/.github/workflows/codeql-analysis.yml

@@ -18,15 +18,15 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: Initialize CodeQL
-              uses: github/codeql-action/init@v2
+              uses: github/codeql-action/init@v3
               with:
                   languages: ${{ matrix.language }}
 
             - name: Autobuild
-              uses: github/codeql-action/autobuild@v2
+              uses: github/codeql-action/autobuild@v3
 
             - name: Perform CodeQL Analysis
-              uses: github/codeql-action/analyze@v2
+              uses: github/codeql-action/analyze@v3

package/.github/workflows/size.yml

@@ -7,11 +7,11 @@ jobs:
 
         steps:
             - name: Check out repository code
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
             - name: Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: "20"
             - name: Install pnpm
               run: npm install -g pnpm
             - name: Install packages

package/.github/workflows/static.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Install pnpm
         run: npm install -g pnpm
       - name: Install ruby packages

package/bower.json

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

package/config/jest.config.js

@@ -12,7 +12,11 @@ module.exports = {
         "givens/setup.js",
         "jest-extended/all",
     ],
+    setupFiles: ["<rootDir>/config/jest.polyfills.js"],
     testEnvironment: "jsdom",
+    testEnvironmentOptions: {
+        customExportConditions: [""],
+    },
     testRegex: "\\/src\\/test\\/.*\\.test\\.ts",
     transform: {
         "\\.tsx?$": ["babel-jest", { root: __dirname }],

package/config/jest.polyfills.js

@@ -0,0 +1,14 @@
+const { TextEncoder, TextDecoder } = require("node:util");
+
+Reflect.set(globalThis, "TextEncoder", TextEncoder);
+Reflect.set(globalThis, "TextDecoder", TextDecoder);
+
+const { Blob } = require("node:buffer");
+const { fetch, Request, Response, Headers, FormData } = require("undici");
+
+Reflect.set(globalThis, "fetch", fetch);
+Reflect.set(globalThis, "Blob", Blob);
+Reflect.set(globalThis, "Request", Request);
+Reflect.set(globalThis, "Response", Response);
+Reflect.set(globalThis, "Headers", Headers);
+Reflect.set(globalThis, "FormData", FormData);

package/devserver/test_index.html

@@ -6,6 +6,15 @@
         <script src="/bower_components/jquery/dist/jquery.min.js"></script>
         <script src="tree.jquery.js"></script>
         <script src="/example_data.js"></script>
+        <style>
+            .wide-tree {
+                font-size: 20px;
+            }
+
+            .wide-tree ul.jqtree-tree ul.jqtree_common {
+                margin-left: 128px;
+            }
+        </style>
     </head>
     <body>
         <div id="tree1"></div>

package/docs/.ruby-version

@@ -1 +1 @@
-3.2.2
+3.2.3

package/docs/_config.yml

@@ -118,7 +118,7 @@ defaults:
     values:
       layout: "example"
 
-jqtree_version: 1.8.0
+jqtree_version: 1.8.1
 
 # Build settings
 markdown: kramdown

package/docs/_entries/general/changelog.md

@@ -3,6 +3,10 @@ title: Changelog
 name: changelog
 ---
 
+#### 1.8.1 (march 16 2024)
+
+-   Issue #791: fix onCanMoveTo (thanks to Christophe Caron)
+
 #### 1.8.0 (november 26 2023)
 
 This release drops support for very old browsers (like IE 11).

package/docs/_entries/multiple_selection/get-selected-nodes.md

@@ -1,6 +1,6 @@
 ---
 title: getSelectedNodes
-name: multiple-get-selected-nodes
+name: multiple-selection-get-selected-nodes
 ---
 
 Get the selected nodes. Return an array of nodes

package/docs/_entries/node/getnextnode.md

@@ -3,13 +3,10 @@ title: getNextNode
 name: node-functions-getnextnode
 ---
 
-Get the next node in the tree.
+Get the next node in the tree. This is the next sibling, if there is one. Or, if there is no next sibling, a node further down in the tree.
 
--   If the node has children, return the first child.
--   If the node is the last child, return the next sibling of the parent.
-
-Returns a node or null.
+-   Returns a node or null.
 
 {% highlight js %}
-var node = node.getNextNode();
+const nextNode = node.getNextNode();
 {% endhighlight %}

package/docs/_entries/node/getnextsibling.md

@@ -6,5 +6,5 @@ name: node-functions-getnextsibling
 Get the next sibling of this node. Returns a node or null.
 
 {% highlight js %}
-var node = node.getNextSibling();
+const nextSibling = node.getNextSibling();
 {% endhighlight %}

package/docs/_entries/node/getnextvisiblenode.md

@@ -1,12 +1,15 @@
 ---
-title: getPreviousNode
-name: node-functions-getpreviousnode
+title: getNextVisibleNode
+name: node-functions-getnextvisiblenode
 ---
 
-Return the previous node in the tree.
+Get the next visible node in the tree. Does the same as using the _down_ key.
 
-Returns a node or null.
+This is the previous sibling, if there is one. Or, if there is no previous sibling, a node further up in the tree that is visible.
+
+-   Returns a node or null.
+-   A node is visible if all its parents are open.
 
 {% highlight js %}
-var node = node.getPreviousNode();
+const nextNode = node.getNextVisibleNode();
 {% endhighlight %}

package/docs/_entries/node/getpreviousnode.md

@@ -0,0 +1,12 @@
+---
+title: getPreviousNode
+name: node-functions-getpreviousnode
+---
+
+Return the previous node in the tree. This is the previous sibling, if there is one. Or, if there is no previous sibling, a node further up in the tree.
+
+-   Returns a node or null.
+
+{% highlight js %}
+const previousNode = node.getPreviousNode();
+{% endhighlight %}

package/docs/_entries/node/getprevioussibling.md

@@ -6,5 +6,5 @@ name: node-functions-getprevioussibling
 Get the previous sibling of this node. Returns a node or null.
 
 {% highlight js %}
-var node = node.getPreviousSibling();
+const previousSibling = node.getPreviousSibling();
 {% endhighlight %}

package/docs/_entries/node/getpreviousvisiblenode.md

@@ -3,12 +3,13 @@ title: getPreviousVisibleNode
 name: node-functions-getpreviousvisiblenode
 ---
 
--   Get the previous visible node in the tree. Does the same as using the _up_ key.
--   If the previous node is an open parent: return the last child of the node.
--   If the previous node is a closed parent: skip the child nodes of the previous parent, return the previous parent node.
+Get the previous visible node in the tree. Does the same as using the _up_ key.
 
-Returns a node or null.
+This is the previous sibling, if there is one. Or, if there is no previous sibling, a node further up in the tree that is visible.
+
+-   Returns a node or null.
+-   A node is visible if all its parents are open.
 
 {% highlight js %}
-var node = node.getPreviousVisibleNode();
+const previousNode = node.getPreviousVisibleNode();
 {% endhighlight %}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -35,31 +35,32 @@
         "jquery": "^3"
     },
     "devDependencies": {
-        "@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",
+        "@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",
         "@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",
-        "@testing-library/user-event": "^14.5.1",
-        "@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",
+        "@testing-library/dom": "^9.3.4",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/debug": "^4.1.12",
+        "@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",
         "babel-jest": "^29.7.0",
         "babel-plugin-istanbul": "^6.1.1",
-        "eslint": "^8.52.0",
-        "eslint-plugin-import": "^2.28.1",
-        "eslint-plugin-jest": "^27.4.3",
-        "eslint-plugin-playwright": "^0.17.0",
-        "eslint-plugin-testing-library": "^6.1.0",
+        "eslint": "^8.56.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-testing-library": "^6.2.0",
         "givens": "^1.3.9",
         "graphql": "^16.8.1",
         "jest": "^29.7.0",
@@ -68,16 +69,17 @@
         "jest-extended": "^4.0.2",
         "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^1.3.2",
-        "postcss": "^8.4.31",
-        "postcss-cli": "^10.1.0",
-        "postcss-import": "^15.1.0",
-        "postcss-load-config": "^4.0.1",
+        "msw": "^2.2.1",
+        "postcss": "^8.4.35",
+        "postcss-cli": "^11.0.0",
+        "postcss-import": "^16.0.1",
+        "postcss-load-config": "^5.0.3",
         "postcss-nested": "^6.0.1",
-        "prettier": "^3.0.3",
-        "rollup": "^4.1.4",
-        "rollup-plugin-serve": "^2.0.2",
+        "prettier": "^3.2.5",
+        "rollup": "^4.12.0",
+        "rollup-plugin-serve": "^3.0.0",
         "tslib": "^2.6.2",
-        "typescript": "^5.2.2"
+        "typescript": "^5.3.3",
+        "undici": "^5.28.3"
     }
 }

package/src/dataLoader.ts

@@ -9,7 +9,7 @@ interface DataLoaderParams {
     loadData: LoadData;
     onLoadFailed?: OnLoadFailed;
     onLoading?: OnLoading;
-    $treeElement: JQuery<HTMLElement>;
+    treeElement: HTMLElement;
     triggerEvent: TriggerEvent;
 }
 
@@ -18,7 +18,7 @@ export default class DataLoader {
     private loadData: LoadData;
     private onLoadFailed?: OnLoadFailed;
     private onLoading?: OnLoading;
-    private $treeElement: JQuery<HTMLElement>;
+    private treeElement: HTMLElement;
     private triggerEvent: TriggerEvent;
 
     constructor({
@@ -26,14 +26,14 @@ export default class DataLoader {
         loadData,
         onLoadFailed,
         onLoading,
-        $treeElement,
+        treeElement,
         triggerEvent,
     }: DataLoaderParams) {
         this.dataFilter = dataFilter;
         this.loadData = loadData;
         this.onLoadFailed = onLoadFailed;
         this.onLoading = onLoading;
-        this.$treeElement = $treeElement;
+        this.treeElement = treeElement;
         this.triggerEvent = triggerEvent;
     }
 
@@ -46,13 +46,13 @@ export default class DataLoader {
             return;
         }
 
-        const $el = this.getDomElement(parentNode);
-        this.addLoadingClass($el);
-        this.notifyLoading(true, parentNode, $el);
+        const element = this.getDomElement(parentNode);
+        this.addLoadingClass(element);
+        this.notifyLoading(true, parentNode, element);
 
         const stopLoading = (): void => {
-            this.removeLoadingClass($el);
-            this.notifyLoading(false, parentNode, $el);
+            this.removeLoadingClass(element);
+            this.notifyLoading(false, parentNode, element);
         };
 
         const handleSuccess = (data: string | NodeData[]): void => {
@@ -75,31 +75,29 @@ export default class DataLoader {
         this.submitRequest(urlInfo, handleSuccess, handleError);
     }
 
-    private addLoadingClass($el: JQuery<HTMLElement>): void {
-        if ($el) {
-            $el.addClass("jqtree-loading");
-        }
+    private addLoadingClass(element: HTMLElement): void {
+        element.classList.add("jqtree-loading");
     }
 
-    private removeLoadingClass($el: JQuery<HTMLElement>): void {
-        if ($el) {
-            $el.removeClass("jqtree-loading");
-        }
+    private removeLoadingClass(element: HTMLElement): void {
+        element.classList.remove("jqtree-loading");
     }
 
-    private getDomElement(parentNode: Node | null): JQuery<HTMLElement> {
+    private getDomElement(parentNode: Node | null): HTMLElement {
         if (parentNode) {
-            return jQuery(parentNode.element);
+            return parentNode.element;
         } else {
-            return this.$treeElement;
+            return this.treeElement;
         }
     }
 
     private notifyLoading(
         isLoading: boolean,
         node: Node | null,
-        $el: JQuery,
+        element: HTMLElement,
     ): void {
+        const $el = jQuery(element);
+
         if (this.onLoading) {
             this.onLoading(isLoading, node, $el);
         }

package/src/dragAndDropHandler/dragElement.ts

@@ -1,41 +1,53 @@
+interface DragElementParams {
+    autoEscape: boolean;
+    nodeName: string;
+    offsetX: number;
+    offsetY: number;
+    treeElement: HTMLElement;
+}
+
 class DragElement {
     private offsetX: number;
     private offsetY: number;
-    private $element: JQuery;
-
-    constructor(
-        nodeName: string,
-        offsetX: number,
-        offsetY: number,
-        $tree: JQuery,
-        autoEscape: boolean,
-    ) {
+    private element: HTMLElement;
+
+    constructor({
+        autoEscape,
+        nodeName,
+        offsetX,
+        offsetY,
+        treeElement,
+    }: DragElementParams) {
         this.offsetX = offsetX;
         this.offsetY = offsetY;
 
-        this.$element = jQuery("<span>").addClass(
-            "jqtree-title jqtree-dragging",
-        );
-
-        if (autoEscape) {
-            this.$element.text(nodeName);
-        } else {
-            this.$element.html(nodeName);
-        }
+        this.element = this.createElement(nodeName, autoEscape);
 
-        this.$element.css("position", "absolute");
-        $tree.append(this.$element);
+        treeElement.appendChild(this.element);
     }
 
     public move(pageX: number, pageY: number): void {
-        this.$element.offset({
-            left: pageX - this.offsetX,
-            top: pageY - this.offsetY,
-        });
+        this.element.style.left = `${pageX - this.offsetX}px`;
+        this.element.style.top = `${pageY - this.offsetY}px`;
     }
 
     public remove(): void {
-        this.$element.remove();
+        this.element.remove();
+    }
+
+    private createElement(nodeName: string, autoEscape: boolean) {
+        const element = document.createElement("span");
+        element.classList.add("jqtree-title", "jqtree-dragging");
+
+        if (autoEscape) {
+            element.textContent = nodeName;
+        } else {
+            element.innerHTML = nodeName;
+        }
+
+        element.style.position = "absolute";
+
+        return element;
     }
 }