jqtree 1.7.5 → 1.8.1

package/src/nodeElement/index.ts

@@ -0,0 +1,102 @@
+import { Node } from "../node";
+import { Position } from "../position";
+import { DropHint } from "../dragAndDropHandler/types";
+import BorderDropHint from "./borderDropHint";
+import GhostDropHint from "./ghostDropHint";
+import { GetScrollLeft } from "../jqtreeMethodTypes";
+
+export interface NodeElementParams {
+    getScrollLeft: GetScrollLeft;
+    node: Node;
+    tabIndex?: number;
+    $treeElement: JQuery<HTMLElement>;
+}
+
+class NodeElement {
+    public node: Node;
+    public element: HTMLElement;
+    private getScrollLeft: GetScrollLeft;
+    private tabIndex?: number;
+    private $treeElement: JQuery<HTMLElement>;
+
+    constructor({
+        getScrollLeft,
+        node,
+        tabIndex,
+        $treeElement,
+    }: NodeElementParams) {
+        this.getScrollLeft = getScrollLeft;
+        this.tabIndex = tabIndex;
+        this.$treeElement = $treeElement;
+
+        this.init(node);
+    }
+
+    public init(node: Node): void {
+        this.node = node;
+
+        if (!node.element) {
+            const element = this.$treeElement.get(0);
+
+            if (element) {
+                node.element = element;
+            }
+        }
+
+        if (node.element) {
+            this.element = node.element;
+        }
+    }
+
+    public addDropHint(position: number): DropHint {
+        if (this.mustShowBorderDropHint(position)) {
+            return new BorderDropHint(this.element, this.getScrollLeft());
+        } else {
+            return new GhostDropHint(this.node, this.element, position);
+        }
+    }
+
+    public select(mustSetFocus: boolean): void {
+        this.element.classList.add("jqtree-selected");
+
+        const titleSpan = this.getTitleSpan();
+        const tabIndex = this.tabIndex;
+
+        // Check for null or undefined
+        if (tabIndex != null) {
+            titleSpan.setAttribute("tabindex", tabIndex.toString());
+        }
+
+        titleSpan.setAttribute("aria-selected", "true");
+
+        if (mustSetFocus) {
+            titleSpan.focus();
+        }
+    }
+
+    public deselect(): void {
+        this.element.classList.remove("jqtree-selected");
+
+        const titleSpan = this.getTitleSpan();
+        titleSpan.removeAttribute("tabindex");
+        titleSpan.setAttribute("aria-selected", "false");
+
+        titleSpan.blur();
+    }
+
+    protected getUl(): HTMLUListElement {
+        return this.element.querySelector(":scope > ul") as HTMLUListElement;
+    }
+
+    protected getTitleSpan(): HTMLSpanElement {
+        return this.element.querySelector(
+            ":scope > .jqtree-element > span.jqtree-title",
+        ) as HTMLSpanElement;
+    }
+
+    protected mustShowBorderDropHint(position: Position): boolean {
+        return position === Position.Inside;
+    }
+}
+
+export default NodeElement;

package/src/playwright/coverage.ts

@@ -13,17 +13,14 @@ export const initCoverage = async (context: BrowserContext) => {
     await context.exposeFunction(
         "collectIstanbulCoverage",
         (coverageJSON: string) => {
-            if (!coverageJSON) {
-                console.log("No coverage");
-            } else {
+            if (coverageJSON) {
                 const filename = path.join(
                     istanbulCLIOutput,
-                    `playwright_coverage_${generateUUID()}.json`
+                    `playwright_coverage_${generateUUID()}.json`,
                 );
-                console.log(`Writing coverage to ${filename}`);
                 fs.writeFileSync(filename, coverageJSON);
             }
-        }
+        },
     );
 };
 
@@ -34,7 +31,7 @@ export const saveCoverage = async (context: BrowserContext) => {
             const anyWindow = window as any;
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
             const coverageData = anyWindow.__coverage__;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, playwright/no-unsafe-references
             anyWindow.collectIstanbulCoverage(JSON.stringify(coverageData));
         });
     }

package/src/playwright/playwright.test.ts

@@ -1,10 +1,14 @@
 import { test, expect, Page } from "@playwright/test";
 import {
+    boundingBox,
     dragAndDrop,
     findNodeElement,
+    getNodeRect,
+    getSelectedNodeName,
     getTreeStructure,
     moveMouseToNode,
     selectNode,
+    sleep,
 } from "./testUtils";
 import { initCoverage, saveCoverage } from "./coverage";
 
@@ -17,10 +21,6 @@ const initPage = async (page: Page, baseURL: string | undefined) => {
     await page.waitForLoadState("domcontentloaded");
 
     page.on("console", (msg) => console.log(`console: ${msg.text()}`));
-
-    await page.evaluate(`
-        console.log(window.__coverage__ ? 'Coverage enabled' : 'Coverage not enabled');
-    `);
 };
 
 interface InitTreeOptions {
@@ -74,6 +74,8 @@ test.describe("without dragAndDrop", () => {
         const saurischia = await findNodeElement(page, "Saurischia");
         await selectNode(saurischia);
 
+        expect(await getSelectedNodeName(page)).toBe("Saurischia");
+
         const screenshot = await page.screenshot();
         expect(screenshot).toMatchSnapshot();
     });
@@ -116,10 +118,54 @@ test.describe("with dragAndDrop", () => {
         const screenshot = await page.screenshot();
         expect(screenshot).toMatchSnapshot();
     });
+
+    test("moves a node with touch events", async ({ page }) => {
+        const client = await page.context().newCDPSession(page);
+
+        const box1 = await getNodeRect(page, "Herrerasaurians");
+
+        await client.send("Input.dispatchTouchEvent", {
+            type: "touchStart",
+            touchPoints: [{ x: box1.x + 10, y: box1.y + box1.height / 2 }],
+        });
+
+        await sleep(page, 200);
+
+        const box2 = await getNodeRect(page, "Ornithischians");
+        await client.send("Input.dispatchTouchEvent", {
+            type: "touchEnd",
+            touchPoints: [{ x: box2.x + 10, y: box2.y + box2.height / 2 }],
+        });
+
+        const structure = await getTreeStructure(page);
+
+        expect(structure).toEqual([
+            expect.objectContaining({
+                name: "Saurischia",
+                children: [
+                    expect.objectContaining({ name: "Theropods" }),
+                    expect.objectContaining({ name: "Sauropodomorphs" }),
+                ],
+            }),
+            expect.objectContaining({
+                name: "Ornithischians",
+                children: [
+                    expect.objectContaining({ name: "Herrerasaurians" }),
+                    expect.objectContaining({ name: "Heterodontosaurids" }),
+                    expect.objectContaining({ name: "Thyreophorans" }),
+                    expect.objectContaining({ name: "Ornithopods" }),
+                    expect.objectContaining({
+                        name: "Pachycephalosaurians",
+                    }),
+                    expect.objectContaining({ name: "Ceratopsians" }),
+                ],
+            }),
+        ]);
+    });
 });
 
 test.describe("autoscroll when the window is scrollable", () => {
-    test("it scrolls vertically when the users drags an element to the bottom ", async ({
+    test("it scrolls vertically when the users drags an element to the bottom", async ({
         baseURL,
         page,
     }) => {
@@ -136,12 +182,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
@@ -166,13 +210,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
@@ -206,7 +247,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);
 
@@ -220,7 +261,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);
@@ -233,72 +273,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"]);
     });
 });

package/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> => {
@@ -97,7 +110,10 @@ export const getTreeStructure = async (page: Page) => {
     return JSON.parse(structure) as JQTreeMatchers.TreeStructure;
 };
 
-const getNodeRect = async (page: Page, title: string): Promise<BoundingBox> => {
+export const getNodeRect = async (
+    page: Page,
+    title: string,
+): Promise<BoundingBox> => {
     const titleElement = await locateTitle(page, title).elementHandle();
 
     if (!titleElement) {
@@ -122,9 +138,16 @@ 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();
 };
+
+export const getSelectedNodeName = async (page: Page) => {
+    return await page.evaluate(`
+            const $tree = jQuery("#tree1");
+            const node = $tree.tree('getSelectedNode');
+            node?.name;
+        `);
+};

package/src/position.ts

@@ -0,0 +1,28 @@
+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,
+};
+
+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];