jqtree 1.7.4 → 1.7.5

package/src/playwright/playwright.test.ts

@@ -3,17 +3,12 @@ import {
     dragAndDrop,
     findNodeElement,
     getTreeStructure,
+    moveMouseToNode,
     selectNode,
 } from "./testUtils";
 import { initCoverage, saveCoverage } from "./coverage";
 
-interface InitPageParameters {
-    baseURL?: string;
-    dragAndDrop: boolean;
-    page: Page;
-}
-
-const initPage = async ({ baseURL, dragAndDrop, page }: InitPageParameters) => {
+const initPage = async (page: Page, baseURL: string | undefined) => {
     if (!baseURL) {
         throw new Error("Missing baseURL");
     }
@@ -23,21 +18,31 @@ const initPage = async ({ baseURL, dragAndDrop, page }: InitPageParameters) => {
 
     page.on("console", (msg) => console.log(`console: ${msg.text()}`));
 
+    await page.evaluate(`
+        console.log(window.__coverage__ ? 'Coverage enabled' : 'Coverage not enabled');
+    `);
+};
+
+interface InitTreeOptions {
+    autoOpen?: number;
+    dragAndDrop?: boolean;
+}
+
+const initTree = async (
+    page: Page,
+    { autoOpen, dragAndDrop }: InitTreeOptions,
+) => {
     await page.evaluate(`
         const $tree = jQuery("#tree1");
 
         $tree.tree({
             animationSpeed: 0,
-            autoOpen: 0,
+            autoOpen: ${autoOpen || 0},
             data: ExampleData.exampleData,
-            dragAndDrop: ${dragAndDrop},
+            dragAndDrop: ${dragAndDrop || false},
             startDndDelay: 100,
         });
     `);
-
-    await page.evaluate(`
-        console.log(window.__coverage__ ? 'Coverage enabled' : 'Coverage not enabled');
-    `);
 };
 
 test.beforeEach(async ({ context }) => {
@@ -50,7 +55,8 @@ test.afterEach(async ({ context }) => {
 
 test.describe("without dragAndDrop", () => {
     test.beforeEach(async ({ baseURL, page }) => {
-        await initPage({ baseURL, page, dragAndDrop: false });
+        await initPage(page, baseURL);
+        await initTree(page, { dragAndDrop: false });
     });
 
     test("displays a tree", async ({ page }) => {
@@ -75,7 +81,8 @@ test.describe("without dragAndDrop", () => {
 
 test.describe("with dragAndDrop", () => {
     test.beforeEach(async ({ baseURL, page }) => {
-        await initPage({ baseURL, page, dragAndDrop: true });
+        await initPage(page, baseURL);
+        await initTree(page, { dragAndDrop: true });
     });
 
     test("moves a node", async ({ page }) => {
@@ -110,3 +117,188 @@ test.describe("with dragAndDrop", () => {
         expect(screenshot).toMatchSnapshot();
     });
 });
+
+test.describe("autoscroll when the window is scrollable", () => {
+    test("it scrolls vertically when the users drags an element to the bottom ", async ({
+        baseURL,
+        page,
+    }) => {
+        await page.setViewportSize({ width: 200, height: 100 });
+        await initPage(page, baseURL);
+        await initTree(page, { autoOpen: 3, dragAndDrop: true });
+
+        expect(
+            await page
+                .getByRole("document")
+                .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 page.mouse.move(20, 190);
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(50);
+
+        expect(
+            await page
+                .getByRole("document")
+                .evaluate((element) => element.scrollTop),
+        ).toBeGreaterThan(0);
+    });
+
+    test("it scrolls horizontally when the users drags an element to the right", async ({
+        baseURL,
+        page,
+    }) => {
+        await page.setViewportSize({ width: 60, height: 400 });
+        await initPage(page, baseURL);
+        await initTree(page, { autoOpen: 3, dragAndDrop: true });
+
+        expect(
+            await page
+                .getByRole("document")
+                .evaluate((element) => element.scrollLeft),
+        ).toEqual(0);
+
+        await moveMouseToNode(page, "Saurischia");
+        await page.mouse.down();
+
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(200);
+
+        await page.mouse.move(55, 10);
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(50);
+
+        expect(
+            await page
+                .getByRole("document")
+                .evaluate((element) => element.scrollLeft),
+        ).toBeGreaterThan(0);
+    });
+
+    test("scrollToNode scrolls to a node", async ({ baseURL, page }) => {
+        await page.setViewportSize({ width: 200, height: 100 });
+        await initPage(page, baseURL);
+        await initTree(page, { autoOpen: 3, dragAndDrop: true });
+
+        expect(
+            await page
+                .getByRole("document")
+                .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 page
+                .getByRole("document")
+                .evaluate((element) => element.scrollTop),
+        ).toBeGreaterThan(0);
+    });
+});
+
+test.describe("autoscroll when the container is scrollable", () => {
+    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.height = "200px";
+            container.style.width = "60px";
+            container.style.overflowY = "scroll";
+
+            document.body.replaceChild(container, treeElement);
+            container.appendChild(treeElement);
+        `);
+
+        await initTree(page, { autoOpen: 3, dragAndDrop: true });
+    });
+
+    test("it scrolls vertically when the users drags an element to the bottom", async ({
+        page,
+    }) => {
+        expect(
+            await page
+                .locator("#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 page.mouse.move(20, 245);
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(50);
+
+        expect(
+            await page
+                .locator("#container")
+                .evaluate((element) => element.scrollTop),
+        ).toBeGreaterThan(0);
+    });
+
+    test("it scrolls horizontally when the users drags an element to the right", async ({
+        page,
+    }) => {
+        expect(
+            await page
+                .locator("#container")
+                .evaluate((element) => element.scrollLeft),
+        ).toEqual(0);
+
+        await moveMouseToNode(page, "Saurischia");
+        await page.mouse.down();
+
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(200);
+
+        await page.mouse.move(100, 50);
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(50);
+
+        expect(
+            await page
+                .locator("#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);
+
+        await page.evaluate(`
+            const $tree = jQuery("#tree1");
+            const node = $tree.tree("getNodeByName", "Sauropodomorphs");
+            $tree.tree("scrollToNode",node);
+        `);
+
+        expect(
+            await page
+                .locator("#container")
+                .evaluate((element) => element.scrollTop),
+        ).toBeGreaterThan(0);
+    });
+});

package/src/playwright/testUtils.ts

@@ -1,5 +1,12 @@
 import { Page, ElementHandle } from "@playwright/test";
 
+interface BoundingBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
 const locateTitle = (page: Page, title: string) =>
     page.locator(".jqtree-title", {
         hasText: title,
@@ -35,7 +42,9 @@ export const selectNode = async (nodeElement: ElementHandle) => {
     await titleHandle.click();
 };
 
-const getRect = async (elementHandle: ElementHandle<HTMLElement>) => {
+const getRect = async (
+    elementHandle: ElementHandle<HTMLElement>,
+): Promise<BoundingBox> => {
     const boundingBox = await elementHandle.boundingBox();
 
     if (!boundingBox) {
@@ -88,7 +97,7 @@ export const getTreeStructure = async (page: Page) => {
     return JSON.parse(structure) as JQTreeMatchers.TreeStructure;
 };
 
-const getNodeRect = async (page: Page, title: string) => {
+const getNodeRect = async (page: Page, title: string): Promise<BoundingBox> => {
     const titleElement = await locateTitle(page, title).elementHandle();
 
     if (!titleElement) {
@@ -99,24 +108,23 @@ const getNodeRect = async (page: Page, title: string) => {
     return rect;
 };
 
+export const moveMouseToNode = async (page: Page, title: string) => {
+    const rect = await getNodeRect(page, title);
+
+    await page.mouse.move(rect.x + 10, rect.y + rect.height / 2);
+};
+
 export const dragAndDrop = async (
     page: Page,
-    from: string,
-    to: string
+    fromTitle: string,
+    toTitle: string,
 ): Promise<void> => {
-    const fromRect = await getNodeRect(page, from);
-    const toRect = await getNodeRect(page, to);
-
-    await page.mouse.move(
-        fromRect.x + fromRect.width / 2,
-        fromRect.y + fromRect.height / 2
-    );
+    await moveMouseToNode(page, fromTitle);
     await page.mouse.down();
+
     // eslint-disable-next-line playwright/no-wait-for-timeout
     await page.waitForTimeout(200);
-    await page.mouse.move(
-        toRect.x + toRect.width / 2,
-        toRect.y + toRect.height / 2
-    );
+
+    await moveMouseToNode(page, toTitle);
     await page.mouse.up();
 };

package/src/scrollHandler/containerScrollParent.ts

@@ -0,0 +1,177 @@
+import type { ScrollParent } from "./types";
+
+type HorizontalScrollDirection = "left" | "right";
+type VerticalScrollDirection = "bottom" | "top";
+
+interface Params {
+    $container: JQuery<HTMLElement>;
+    refreshHitAreas: () => void;
+    $treeElement: JQuery<HTMLElement>;
+}
+
+export default class ContainerScrollParent implements ScrollParent {
+    private $container: JQuery<HTMLElement>;
+    private horizontalScrollDirection?: HorizontalScrollDirection;
+    private horizontalScrollTimeout?: number;
+    private refreshHitAreas: () => void;
+    private scrollParentBottom?: number;
+    private scrollParentTop?: number;
+    private verticalScrollTimeout?: number;
+    private verticalScrollDirection?: VerticalScrollDirection;
+
+    constructor({ $container, refreshHitAreas }: Params) {
+        this.$container = $container;
+        this.refreshHitAreas = refreshHitAreas;
+    }
+
+    public checkHorizontalScrolling(pageX: number): void {
+        const newHorizontalScrollDirection =
+            this.getNewHorizontalScrollDirection(pageX);
+
+        if (this.horizontalScrollDirection !== newHorizontalScrollDirection) {
+            this.horizontalScrollDirection = newHorizontalScrollDirection;
+
+            if (this.horizontalScrollTimeout != null) {
+                window.clearTimeout(this.verticalScrollTimeout);
+            }
+
+            if (newHorizontalScrollDirection) {
+                this.horizontalScrollTimeout = window.setTimeout(
+                    this.scrollHorizontally.bind(this),
+                    40,
+                );
+            }
+        }
+    }
+
+    public checkVerticalScrolling(pageY: number) {
+        const newVerticalScrollDirection =
+            this.getNewVerticalScrollDirection(pageY);
+
+        if (this.verticalScrollDirection !== newVerticalScrollDirection) {
+            this.verticalScrollDirection = newVerticalScrollDirection;
+
+            if (this.verticalScrollTimeout != null) {
+                window.clearTimeout(this.verticalScrollTimeout);
+                this.verticalScrollTimeout = undefined;
+            }
+
+            if (newVerticalScrollDirection) {
+                this.verticalScrollTimeout = window.setTimeout(
+                    this.scrollVertically.bind(this),
+                    40,
+                );
+            }
+        }
+    }
+
+    public getScrollLeft(): number {
+        return this.$container.scrollLeft() || 0;
+    }
+
+    public scrollToY(top: number): void {
+        const container = this.$container.get(0) as HTMLElement;
+        container.scrollTop = top;
+    }
+
+    public stopScrolling() {
+        this.horizontalScrollDirection = undefined;
+        this.verticalScrollDirection = undefined;
+        this.scrollParentTop = undefined;
+        this.scrollParentBottom = undefined;
+    }
+
+    private getNewHorizontalScrollDirection(
+        pageX: number,
+    ): HorizontalScrollDirection | undefined {
+        const scrollParentOffset = this.$container.offset();
+        if (!scrollParentOffset) {
+            return undefined;
+        }
+
+        const container = this.$container.get(0) as HTMLElement;
+
+        const rightEdge = scrollParentOffset.left + container.clientWidth;
+        const leftEdge = scrollParentOffset.left;
+        const isNearRightEdge = pageX > rightEdge - 20;
+        const isNearLeftEdge = pageX < leftEdge + 20;
+
+        if (isNearRightEdge) {
+            return "right";
+        } else if (isNearLeftEdge) {
+            return "left";
+        }
+
+        return undefined;
+    }
+
+    private getNewVerticalScrollDirection(
+        pageY: number,
+    ): VerticalScrollDirection | undefined {
+        if (pageY < this.getScrollParentTop()) {
+            return "top";
+        }
+
+        if (pageY > this.getScrollParentBottom()) {
+            return "bottom";
+        }
+
+        return undefined;
+    }
+
+    private scrollHorizontally() {
+        if (!this.horizontalScrollDirection) {
+            return;
+        }
+
+        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
+        const container = this.$container.get(0) as HTMLElement;
+
+        container.scrollBy({
+            left: distance,
+            top: 0,
+            behavior: "instant",
+        });
+
+        this.refreshHitAreas();
+
+        setTimeout(this.scrollHorizontally.bind(this), 40);
+    }
+
+    private scrollVertically() {
+        if (!this.verticalScrollDirection) {
+            return;
+        }
+
+        const distance = this.verticalScrollDirection === "top" ? -20 : 20;
+        const container = this.$container.get(0) as HTMLElement;
+
+        container.scrollBy({
+            left: 0,
+            top: distance,
+            behavior: "instant",
+        });
+
+        this.refreshHitAreas();
+
+        setTimeout(this.scrollVertically.bind(this), 40);
+    }
+
+    private getScrollParentTop() {
+        if (this.scrollParentTop == null) {
+            this.scrollParentTop = this.$container.offset()?.top || 0;
+        }
+
+        return this.scrollParentTop;
+    }
+
+    private getScrollParentBottom() {
+        if (this.scrollParentBottom == null) {
+            this.scrollParentBottom =
+                this.getScrollParentTop() +
+                (this.$container.innerHeight() ?? 0);
+        }
+
+        return this.scrollParentBottom;
+    }
+}

package/src/scrollHandler/createScrollParent.ts

@@ -0,0 +1,50 @@
+import type { ScrollParent } from "./types";
+import ContainerScrollParent from "./containerScrollParent";
+import DocumentScrollParent from "./documentScrollParent";
+
+const hasOverFlow = ($element: JQuery<HTMLElement>): boolean => {
+    for (const attr of ["overflow", "overflow-y"]) {
+        const overflowValue = $element.css(attr);
+        if (overflowValue === "auto" || overflowValue === "scroll") {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+const getParentWithOverflow = (
+    $treeElement: JQuery<HTMLElement>,
+): JQuery<HTMLElement> | null => {
+    if (hasOverFlow($treeElement)) {
+        return $treeElement;
+    }
+
+    for (const element of $treeElement.parents().get()) {
+        const $element = jQuery(element);
+        if (hasOverFlow($element)) {
+            return $element;
+        }
+    }
+
+    return null;
+};
+
+const createScrollParent = (
+    $treeElement: JQuery<HTMLElement>,
+    refreshHitAreas: () => void,
+): ScrollParent => {
+    const $container = getParentWithOverflow($treeElement);
+
+    if ($container?.length && $container[0]?.tagName !== "HTML") {
+        return new ContainerScrollParent({
+            $container,
+            refreshHitAreas,
+            $treeElement,
+        });
+    } else {
+        return new DocumentScrollParent($treeElement, refreshHitAreas);
+    }
+};
+
+export default createScrollParent;