Merge branch 'dev' into update-js-packages

mbraak · Dec 12, 2023 · 7027f6e · 7027f6e
2 parents 414ed09 + 976f7d7
commit 7027f6e
Show file tree

Hide file tree

Showing 21 changed files with 1,146 additions and 1,064 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -12,7 +12,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: Get pnpm store directory

diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml
@@ -11,7 +11,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 packages

diff --git a/.github/workflows/static.yml b/.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

diff --git a/devserver/test_index.html b/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>

diff --git a/src/dragAndDropHandler/hitAreasGenerator.ts b/src/dragAndDropHandler/hitAreasGenerator.ts
@@ -1,5 +1,6 @@
 import { HitArea } from "./types";
-import { Node, Position } from "../node";
+import { Node } from "../node";
+import { Position } from "../position";
 import { getOffsetTop } from "../util";
 import VisibleNodeIterator from "./visibleNodeIterator";
 

diff --git a/src/dragAndDropHandler/index.ts b/src/dragAndDropHandler/index.ts
@@ -1,4 +1,5 @@
-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 NodeElement from "../nodeElement";

diff --git a/src/dragAndDropHandler/types.ts b/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;

diff --git a/src/node.ts b/src/node.ts
@@ -1,36 +1,8 @@
 import { isNodeRecordWithChildren } from "./nodeUtils";
-
-export enum Position {
-    Before = 1,
-    After,
-    Inside,
-    None,
-}
-
-const positionNames: Record<string, Position> = {
-    before: Position.Before,
-    after: Position.After,
-    inside: Position.Inside,
-    none: Position.None,
-};
+import { Position } from "./position";
 
 type IterateCallback = (node: Node, level: number) => boolean;
 
-export const getPositionName = (position: Position): string => {
-    for (const name in positionNames) {
-        if (Object.prototype.hasOwnProperty.call(positionNames, name)) {
-            if (positionNames[name] === position) {
-                return name;
-            }
-        }
-    }
-
-    return "";
-};
-
-export const getPosition = (name: string): Position | undefined =>
-    positionNames[name];
-
 export class Node implements INode {
     public id?: NodeId;
     public name: string;

diff --git a/src/nodeElement/folderElement.ts b/src/nodeElement/folderElement.ts
@@ -1,4 +1,4 @@
-import { Position } from "../node";
+import { Position } from "../position";
 import NodeElement, { NodeElementParams } from "./index";
 import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
 

diff --git a/src/nodeElement/ghostDropHint.ts b/src/nodeElement/ghostDropHint.ts
@@ -1,4 +1,5 @@
-import { Position, Node } from "../node";
+import { Node } from "../node";
+import { Position } from "../position";
 import { DropHint } from "../dragAndDropHandler/types";
 
 class GhostDropHint implements DropHint {

diff --git a/src/nodeElement/index.ts b/src/nodeElement/index.ts
@@ -1,4 +1,5 @@
-import { Position, Node } from "../node";
+import { Node } from "../node";
+import { Position } from "../position";
 import { DropHint } from "../dragAndDropHandler/types";
 import BorderDropHint from "./borderDropHint";
 import GhostDropHint from "./ghostDropHint";

diff --git a/src/playwright/playwright.test.ts b/src/playwright/playwright.test.ts
@@ -1,10 +1,12 @@
 import { test, expect, Page } from "@playwright/test";
 import {
+    boundingBox,
     dragAndDrop,
     findNodeElement,
     getTreeStructure,
     moveMouseToNode,
     selectNode,
+    sleep,
 } from "./testUtils";
 import { initCoverage, saveCoverage } from "./coverage";
 
@@ -132,12 +134,10 @@ test.describe("autoscroll when the window is scrollable", () => {
         await moveMouseToNode(page, "Saurischia");
         await page.mouse.down();
 
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(200);
+        await sleep(page, 200);
 
         await page.mouse.move(20, 190);
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(50);
+        await sleep(page, 50);
 
         expect(
             await page
@@ -162,13 +162,10 @@ test.describe("autoscroll when the window is scrollable", () => {
 
         await moveMouseToNode(page, "Saurischia");
         await page.mouse.down();
-
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(200);
+        await sleep(page, 200);
 
         await page.mouse.move(55, 10);
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(50);
+        await sleep(page, 50);
 
         expect(
             await page
@@ -202,7 +199,7 @@ test.describe("autoscroll when the window is scrollable", () => {
     });
 });
 
-test.describe("autoscroll when the container is scrollable", () => {
+test.describe("autoscroll when the container is scrollable vertically", () => {
     test.beforeEach(async ({ page, baseURL }) => {
         await initPage(page, baseURL);
 
@@ -216,7 +213,6 @@ test.describe("autoscroll when the container is scrollable", () => {
             const container = document.createElement("div");
             container.id = "container";
             container.style.height = "200px";
-            container.style.width = "60px";
             container.style.overflowY = "scroll";
 
             document.body.replaceChild(container, treeElement);
@@ -229,72 +225,129 @@ test.describe("autoscroll when the container is scrollable", () => {
     test("it scrolls vertically when the users drags an element to the bottom", async ({
         page,
     }) => {
+        const container = page.locator("#container");
+
         expect(
-            await page
-                .locator("#container")
-                .evaluate((element) => element.scrollTop),
+            await container.evaluate((element) => element.scrollTop),
         ).toEqual(0);
 
         await moveMouseToNode(page, "Saurischia");
         await page.mouse.down();
-
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(200);
+        await sleep(page, 200);
 
         await page.mouse.move(20, 245);
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(50);
+        await sleep(page, 50);
 
         expect(
-            await page
-                .locator("#container")
-                .evaluate((element) => element.scrollTop),
+            await container.evaluate((element) => element.scrollTop),
         ).toBeGreaterThan(0);
     });
 
+    test("scrollToNode scrolls to a node", async ({ page }) => {
+        const container = page.locator("#container");
+
+        expect(
+            await container.evaluate((element) => element.scrollTop),
+        ).toEqual(0);
+
+        await page.evaluate(`
+            const $tree = jQuery("#tree1");
+            const node = $tree.tree("getNodeByName", "Sauropodomorphs");
+            $tree.tree("scrollToNode",node);
+        `);
+
+        expect(
+            await container.evaluate((element) => element.scrollTop),
+        ).toBeGreaterThan(0);
+    });
+});
+
+test.describe("autoscroll when the container is scrollable horizontally", () => {
+    test.beforeEach(async ({ page, baseURL }) => {
+        await initPage(page, baseURL);
+
+        // Add a container and make it the parent of the tree element
+        await page.evaluate(`
+            document.body.style.marginLeft = "40px";
+            document.body.style.marginTop = "40px";
+
+            const treeElement = document.querySelector("#tree1");
+
+            const container = document.createElement("div");
+            container.id = "container";
+            container.style.width = "400px";
+            container.style.overflowX = "scroll";
+            container.classList.add('wide-tree');
+
+            document.body.replaceChild(container, treeElement);
+            container.appendChild(treeElement);
+        `);
+
+        await initTree(page, { autoOpen: 3, dragAndDrop: true });
+    });
+
     test("it scrolls horizontally when the users drags an element to the right", async ({
         page,
     }) => {
+        const container = page.locator("#container");
+
         expect(
-            await page
-                .locator("#container")
-                .evaluate((element) => element.scrollLeft),
+            await container.evaluate((element) => element.scrollLeft),
         ).toEqual(0);
 
         await moveMouseToNode(page, "Saurischia");
         await page.mouse.down();
+        await sleep(page, 200);
 
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(200);
+        const containerBox = await boundingBox(container);
 
-        await page.mouse.move(100, 50);
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(50);
+        await page.mouse.move(
+            containerBox.x + containerBox.width,
+            containerBox.y + 10,
+        );
+        await sleep(page, 100);
 
         expect(
-            await page
-                .locator("#container")
-                .evaluate((element) => element.scrollLeft),
+            await container.evaluate((element) => element.scrollLeft),
         ).toBeGreaterThan(0);
     });
 
-    test("scrollToNode scrolls to a node", async ({ page }) => {
-        expect(
-            await page
-                .locator("#container")
-                .evaluate((element) => element.scrollTop),
-        ).toEqual(0);
+    test("it moves a node after scrolling horizontally", async ({ page }) => {
+        await moveMouseToNode(page, "Coelophysoids");
+        await page.mouse.down();
+        await sleep(page, 200);
 
-        await page.evaluate(`
+        const container = page.locator("#container");
+        const containerBox = await boundingBox(container);
+
+        await page.mouse.move(
+            containerBox.x + containerBox.width,
+            containerBox.y + 10,
+        );
+
+        await page.waitForFunction(() => {
+            const container = document.querySelector("#container");
+
+            if (!container) {
+                return false;
+            }
+
+            return (
+                container.scrollLeft >=
+                container.scrollWidth - container.clientWidth
+            );
+        });
+
+        await moveMouseToNode(page, "Tyrannosauroids");
+        await page.mouse.down();
+        await sleep(page, 200);
+
+        const childrenJson = await page.evaluate<string>(`
             const $tree = jQuery("#tree1");
-            const node = $tree.tree("getNodeByName", "Sauropodomorphs");
-            $tree.tree("scrollToNode",node);
+            const node = $tree.tree("getNodeByName", "Tyrannosauroids");
+            const children = node.children.map(child => child.name)
+            JSON.stringify(children);
         `);
-
-        expect(
-            await page
-                .locator("#container")
-                .evaluate((element) => element.scrollTop),
-        ).toBeGreaterThan(0);
+        expect(JSON.parse(childrenJson)).toEqual(["Coelophysoids"]);
     });
 });
diff --git a/src/playwright/testUtils.ts b/src/playwright/testUtils.ts
@@ -1,4 +1,4 @@
-import { Page, ElementHandle } from "@playwright/test";
+import { ElementHandle, Locator, Page } from "@playwright/test";
 
 interface BoundingBox {
     x: number;
@@ -7,7 +7,10 @@ interface BoundingBox {
     height: number;
 }
 
-const locateTitle = (page: Page, title: string) =>
+export const sleep = async (page: Page, timeout: number) =>
+    await page.waitForTimeout(timeout); // eslint-disable-line playwright/no-wait-for-timeout
+
+export const locateTitle = (page: Page, title: string) =>
     page.locator(".jqtree-title", {
         hasText: title,
     });
@@ -42,6 +45,16 @@ export const selectNode = async (nodeElement: ElementHandle) => {
     await titleHandle.click();
 };
 
+export const boundingBox = async (locator: Locator) => {
+    const result = await locator.boundingBox();
+
+    if (!result) {
+        throw new Error("Empty boundingBox");
+    }
+
+    return result;
+};
+
 const getRect = async (
     elementHandle: ElementHandle<HTMLElement>,
 ): Promise<BoundingBox> => {
@@ -122,8 +135,7 @@ export const dragAndDrop = async (
     await moveMouseToNode(page, fromTitle);
     await page.mouse.down();
 
-    // eslint-disable-next-line playwright/no-wait-for-timeout
-    await page.waitForTimeout(200);
+    await sleep(page, 200);
 
     await moveMouseToNode(page, toTitle);
     await page.mouse.up();