jqtree 1.8.0 → 1.8.1

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";
 
@@ -70,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();
     });
@@ -112,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,
     }) => {
@@ -132,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
@@ -162,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
@@ -202,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);
 
@@ -216,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);
@@ -229,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];

package/src/scrollHandler/containerScrollParent.ts

@@ -1,16 +1,16 @@
 import type { ScrollParent } from "./types";
+import { getElementPosition, getOffsetTop } from '../util'
 
 type HorizontalScrollDirection = "left" | "right";
 type VerticalScrollDirection = "bottom" | "top";
 
 interface Params {
-    $container: JQuery<HTMLElement>;
+    container: HTMLElement;
     refreshHitAreas: () => void;
-    $treeElement: JQuery<HTMLElement>;
 }
 
 export default class ContainerScrollParent implements ScrollParent {
-    private $container: JQuery<HTMLElement>;
+    private container: HTMLElement;
     private horizontalScrollDirection?: HorizontalScrollDirection;
     private horizontalScrollTimeout?: number;
     private refreshHitAreas: () => void;
@@ -19,8 +19,8 @@ export default class ContainerScrollParent implements ScrollParent {
     private verticalScrollTimeout?: number;
     private verticalScrollDirection?: VerticalScrollDirection;
 
-    constructor({ $container, refreshHitAreas }: Params) {
-        this.$container = $container;
+    constructor({ container, refreshHitAreas }: Params) {
+        this.container = container;
         this.refreshHitAreas = refreshHitAreas;
     }
 
@@ -66,12 +66,11 @@ export default class ContainerScrollParent implements ScrollParent {
     }
 
     public getScrollLeft(): number {
-        return this.$container.scrollLeft() || 0;
+        return this.container.scrollLeft;
     }
 
     public scrollToY(top: number): void {
-        const container = this.$container.get(0) as HTMLElement;
-        container.scrollTop = top;
+        this.container.scrollTop = top;
     }
 
     public stopScrolling() {
@@ -84,14 +83,9 @@ export default class ContainerScrollParent implements ScrollParent {
     private getNewHorizontalScrollDirection(
         pageX: number,
     ): HorizontalScrollDirection | undefined {
-        const scrollParentOffset = this.$container.offset();
-        if (!scrollParentOffset) {
-            return undefined;
-        }
-
-        const container = this.$container.get(0) as HTMLElement;
+        const scrollParentOffset = getElementPosition(this.container);
 
-        const rightEdge = scrollParentOffset.left + container.clientWidth;
+        const rightEdge = scrollParentOffset.left + this.container.clientWidth;
         const leftEdge = scrollParentOffset.left;
         const isNearRightEdge = pageX > rightEdge - 20;
         const isNearLeftEdge = pageX < leftEdge + 20;
@@ -125,9 +119,8 @@ export default class ContainerScrollParent implements ScrollParent {
         }
 
         const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
-        const container = this.$container.get(0) as HTMLElement;
 
-        container.scrollBy({
+        this.container.scrollBy({
             left: distance,
             top: 0,
             behavior: "instant",
@@ -144,9 +137,8 @@ export default class ContainerScrollParent implements ScrollParent {
         }
 
         const distance = this.verticalScrollDirection === "top" ? -20 : 20;
-        const container = this.$container.get(0) as HTMLElement;
 
-        container.scrollBy({
+        this.container.scrollBy({
             left: 0,
             top: distance,
             behavior: "instant",
@@ -159,7 +151,7 @@ export default class ContainerScrollParent implements ScrollParent {
 
     private getScrollParentTop() {
         if (this.scrollParentTop == null) {
-            this.scrollParentTop = this.$container.offset()?.top || 0;
+            this.scrollParentTop = getOffsetTop(this.container)
         }
 
         return this.scrollParentTop;
@@ -167,9 +159,7 @@ export default class ContainerScrollParent implements ScrollParent {
 
     private getScrollParentBottom() {
         if (this.scrollParentBottom == null) {
-            this.scrollParentBottom =
-                this.getScrollParentTop() +
-                (this.$container.innerHeight() ?? 0);
+            this.scrollParentBottom = this.getScrollParentTop() + this.container.clientHeight;
         }
 
         return this.scrollParentBottom;

package/src/scrollHandler/createScrollParent.ts

@@ -2,48 +2,48 @@ 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;
-        }
-    }
+const isOverflow = (overflowValue: string) =>
+    overflowValue === "auto" || overflowValue === "scroll";
+
+const hasOverFlow = (element: HTMLElement): boolean => {
+    const style = getComputedStyle(element);
 
-    return false;
+    return isOverflow(style.overflowX) || isOverflow(style.overflowY);
 };
 
 const getParentWithOverflow = (
-    $treeElement: JQuery<HTMLElement>,
-): JQuery<HTMLElement> | null => {
-    if (hasOverFlow($treeElement)) {
-        return $treeElement;
+    treeElement: HTMLElement,
+): HTMLElement | null => {
+    if (hasOverFlow(treeElement)) {
+        return treeElement;
     }
 
-    for (const element of $treeElement.parents().get()) {
-        const $element = jQuery(element);
-        if (hasOverFlow($element)) {
-            return $element;
+    let parent = treeElement.parentElement;
+
+    while (parent) {
+        if (hasOverFlow(parent)) {
+            return parent;
         }
+
+        parent = parent.parentElement;
     }
 
     return null;
 };
 
 const createScrollParent = (
-    $treeElement: JQuery<HTMLElement>,
+    treeElement: HTMLElement,
     refreshHitAreas: () => void,
 ): ScrollParent => {
-    const $container = getParentWithOverflow($treeElement);
+    const container = getParentWithOverflow(treeElement);
 
-    if ($container?.length && $container[0]?.tagName !== "HTML") {
+    if (container && container.tagName !== "HTML") {
         return new ContainerScrollParent({
-            $container,
+            container,
             refreshHitAreas,
-            $treeElement,
         });
     } else {
-        return new DocumentScrollParent($treeElement, refreshHitAreas);
+        return new DocumentScrollParent({ refreshHitAreas, treeElement });
     }
 };
 

package/src/scrollHandler/documentScrollParent.ts

@@ -1,21 +1,27 @@
 import type { ScrollParent } from "./types";
+import { getOffsetTop } from '../util'
 
 type HorizontalScrollDirection = "left" | "right";
 type VerticalScrollDirection = "bottom" | "top";
 
+interface Params {
+    refreshHitAreas: () => void;
+    treeElement: HTMLElement;
+}
+
 export default class DocumentScrollParent implements ScrollParent {
-    private $element: JQuery<HTMLElement>;
+    private documentScrollHeight?: number;
+    private documentScrollWidth?: number;
     private horizontalScrollDirection?: HorizontalScrollDirection;
     private horizontalScrollTimeout?: number;
     private refreshHitAreas: () => void;
+    private treeElement: HTMLElement;
     private verticalScrollDirection?: VerticalScrollDirection;
     private verticalScrollTimeout?: number;
-    private documentScrollHeight?: number;
-    private documentScrollWidth?: number;
 
-    constructor($element: JQuery<HTMLElement>, refreshHitAreas: () => void) {
-        this.$element = $element;
+    constructor({ refreshHitAreas, treeElement }: Params) {
         this.refreshHitAreas = refreshHitAreas;
+        this.treeElement = treeElement;
     }
 
     public checkHorizontalScrolling(pageX: number): void {
@@ -64,10 +70,9 @@ export default class DocumentScrollParent implements ScrollParent {
     }
 
     public scrollToY(top: number): void {
-        const offset = this.$element.offset();
-        const treeTop = offset ? offset.top : 0;
+        const treeTop = getOffsetTop(this.treeElement);
 
-        jQuery(document).scrollTop(top + treeTop);
+        document.documentElement.scrollTop = top + treeTop;
     }
 
     public stopScrolling() {
@@ -80,10 +85,8 @@ export default class DocumentScrollParent implements ScrollParent {
     private getNewHorizontalScrollDirection(
         pageX: number,
     ): HorizontalScrollDirection | undefined {
-        const $document = jQuery(document);
-
-        const scrollLeft = $document.scrollLeft() || 0;
-        const windowWidth = jQuery(window).width() || 0;
+        const scrollLeft = document.documentElement.scrollLeft;
+        const windowWidth = window.innerWidth;
 
         const isNearRightEdge = pageX > windowWidth - 20;
         const isNearLeftEdge = pageX - scrollLeft < 20;
@@ -145,7 +148,7 @@ export default class DocumentScrollParent implements ScrollParent {
             return "top";
         }
 
-        const windowHeight = jQuery(window).height() || 0;
+        const windowHeight = window.innerHeight;
 
         if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
             return "bottom";

package/src/scrollHandler.ts

@@ -1,21 +1,21 @@
-import { PositionInfo } from "./mouseWidgetTypes";
+import { PositionInfo } from "./mouseUtils";
 import { ScrollParent } from "./scrollHandler/types";
 import createScrollParent from "./scrollHandler/createScrollParent";
 
 interface ScrollHandlerParams {
     refreshHitAreas: () => void;
-    $treeElement: JQuery<HTMLElement>;
+    treeElement: HTMLElement;
 }
 
 export default class ScrollHandler {
     private refreshHitAreas: () => void;
     private scrollParent?: ScrollParent;
-    private $treeElement: JQuery<HTMLElement>;
+    private treeElement: HTMLElement;
 
-    constructor({ refreshHitAreas, $treeElement }: ScrollHandlerParams) {
+    constructor({ refreshHitAreas, treeElement }: ScrollHandlerParams) {
         this.refreshHitAreas = refreshHitAreas;
         this.scrollParent = undefined;
-        this.$treeElement = $treeElement;
+        this.treeElement = treeElement;
     }
 
     public checkScrolling(positionInfo: PositionInfo): void {
@@ -36,25 +36,17 @@ export default class ScrollHandler {
     }
 
     private checkVerticalScrolling(positionInfo: PositionInfo): void {
-        if (positionInfo.pageY == null) {
-            return;
-        }
-
         this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
     }
 
     private checkHorizontalScrolling(positionInfo: PositionInfo): void {
-        if (positionInfo.pageX == null) {
-            return;
-        }
-
         this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
     }
 
     private getScrollParent(): ScrollParent {
         if (!this.scrollParent) {
             this.scrollParent = createScrollParent(
-                this.$treeElement,
+                this.treeElement,
                 this.refreshHitAreas,
             );
         }