jqtree 1.7.4 → 1.8.0

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");
     }
@@ -22,22 +17,28 @@ const initPage = async ({ baseURL, dragAndDrop, page }: InitPageParameters) => {
     await page.waitForLoadState("domcontentloaded");
 
     page.on("console", (msg) => console.log(`console: ${msg.text()}`));
+};
 
+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 +51,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 +77,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 +113,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/saveStateHandler.ts

@@ -1,25 +1,76 @@
 import { isInt } from "./util";
-import { JqTreeWidget } from "./tree.jquery";
 import { Node } from "./node";
+import { OnGetStateFromStorage, OnSetStateFromStorage } from "./jqtreeOptions";
+import {
+    AddToSelection,
+    GetNodeById,
+    GetSelectedNodes,
+    GetTree,
+    OpenNode,
+    RefreshElements,
+    RemoveFromSelection,
+} from "./jqtreeMethodTypes";
 
 export interface SavedState {
     open_nodes: NodeId[];
     selected_node: NodeId[];
 }
 
+interface SaveStateHandlerParams {
+    addToSelection: AddToSelection;
+    getNodeById: GetNodeById;
+    getSelectedNodes: GetSelectedNodes;
+    getTree: GetTree;
+    onGetStateFromStorage?: OnGetStateFromStorage;
+    onSetStateFromStorage?: OnSetStateFromStorage;
+    openNode: OpenNode;
+    refreshElements: RefreshElements;
+    removeFromSelection: RemoveFromSelection;
+    saveState: boolean | string;
+}
+
 export default class SaveStateHandler {
-    private treeWidget: JqTreeWidget;
+    private addToSelection: AddToSelection;
+    private getNodeById: GetNodeById;
+    private getSelectedNodes: GetSelectedNodes;
+    private getTree: GetTree;
+    private onGetStateFromStorage?: OnGetStateFromStorage;
+    private onSetStateFromStorage?: OnSetStateFromStorage;
+    private openNode: OpenNode;
+    private refreshElements: RefreshElements;
+    private removeFromSelection: RemoveFromSelection;
+    private saveStateOption: boolean | string;
     private _supportsLocalStorage: boolean | null;
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+    constructor({
+        addToSelection,
+        getNodeById,
+        getSelectedNodes,
+        getTree,
+        onGetStateFromStorage,
+        onSetStateFromStorage,
+        openNode,
+        refreshElements,
+        removeFromSelection,
+        saveState,
+    }: SaveStateHandlerParams) {
+        this.addToSelection = addToSelection;
+        this.getNodeById = getNodeById;
+        this.getSelectedNodes = getSelectedNodes;
+        this.getTree = getTree;
+        this.onGetStateFromStorage = onGetStateFromStorage;
+        this.onSetStateFromStorage = onSetStateFromStorage;
+        this.openNode = openNode;
+        this.refreshElements = refreshElements;
+        this.removeFromSelection = removeFromSelection;
+        this.saveStateOption = saveState;
     }
 
     public saveState(): void {
         const state = JSON.stringify(this.getState());
 
-        if (this.treeWidget.options.onSetStateFromStorage) {
-            this.treeWidget.options.onSetStateFromStorage(state);
+        if (this.onSetStateFromStorage) {
+            this.onSetStateFromStorage(state);
         } else if (this.supportsLocalStorage()) {
             localStorage.setItem(this.getKeyName(), state);
         }
@@ -39,7 +90,7 @@ export default class SaveStateHandler {
         const getOpenNodeIds = (): NodeId[] => {
             const openNodes: NodeId[] = [];
 
-            this.treeWidget.tree.iterate((node: Node) => {
+            this.getTree()?.iterate((node: Node) => {
                 if (node.is_open && node.id && node.hasChildren()) {
                     openNodes.push(node.id);
                 }
@@ -52,7 +103,7 @@ export default class SaveStateHandler {
         const getSelectedNodeIds = (): NodeId[] => {
             const selectedNodeIds: NodeId[] = [];
 
-            this.treeWidget.getSelectedNodes().forEach((node) => {
+            this.getSelectedNodes().forEach((node) => {
                 if (node.id != null) {
                     selectedNodeIds.push(node.id);
                 }
@@ -94,13 +145,13 @@ export default class SaveStateHandler {
 
     public setInitialStateOnDemand(
         state: SavedState,
-        cbFinished: () => void
+        cbFinished: () => void,
     ): void {
         if (state) {
             this.doSetInitialStateOnDemand(
                 state.open_nodes,
                 state.selected_node,
-                cbFinished
+                cbFinished,
             );
         } else {
             cbFinished();
@@ -130,8 +181,8 @@ export default class SaveStateHandler {
     }
 
     private loadFromStorage(): string | null {
-        if (this.treeWidget.options.onGetStateFromStorage) {
-            return this.treeWidget.options.onGetStateFromStorage();
+        if (this.onGetStateFromStorage) {
+            return this.onGetStateFromStorage();
         } else if (this.supportsLocalStorage()) {
             return localStorage.getItem(this.getKeyName());
         } else {
@@ -143,7 +194,7 @@ export default class SaveStateHandler {
         let mustLoadOnDemand = false;
 
         for (const nodeId of nodeIds) {
-            const node = this.treeWidget.getNodeById(nodeId);
+            const node = this.getNodeById(nodeId);
 
             if (node) {
                 if (!node.load_on_demand) {
@@ -161,12 +212,12 @@ export default class SaveStateHandler {
         let selectCount = 0;
 
         for (const nodeId of nodeIds) {
-            const node = this.treeWidget.getNodeById(nodeId);
+            const node = this.getNodeById(nodeId);
 
             if (node) {
                 selectCount += 1;
 
-                this.treeWidget.selectNodeHandler.addToSelection(node);
+                this.addToSelection(node);
             }
         }
 
@@ -174,19 +225,17 @@ export default class SaveStateHandler {
     }
 
     private resetSelection(): void {
-        const selectNodeHandler = this.treeWidget.selectNodeHandler;
-
-        const selectedNodes = selectNodeHandler.getSelectedNodes();
+        const selectedNodes = this.getSelectedNodes();
 
         selectedNodes.forEach((node) => {
-            selectNodeHandler.removeFromSelection(node);
+            this.removeFromSelection(node);
         });
     }
 
     private doSetInitialStateOnDemand(
         nodeIdsParam: NodeId[],
         selectedNodes: NodeId[],
-        cbFinished: () => void
+        cbFinished: () => void,
     ): void {
         let loadingCount = 0;
         let nodeIds = nodeIdsParam;
@@ -195,7 +244,7 @@ export default class SaveStateHandler {
             const newNodesIds = [];
 
             for (const nodeId of nodeIds) {
-                const node = this.treeWidget.getNodeById(nodeId);
+                const node = this.getNodeById(nodeId);
 
                 if (!node) {
                     newNodesIds.push(nodeId);
@@ -204,7 +253,7 @@ export default class SaveStateHandler {
                         if (node.load_on_demand) {
                             loadAndOpenNode(node);
                         } else {
-                            this.treeWidget._openNode(node, false, null);
+                            this.openNode(node, false);
                         }
                     }
                 }
@@ -213,7 +262,7 @@ export default class SaveStateHandler {
             nodeIds = newNodesIds;
 
             if (this.selectInitialNodes(selectedNodes)) {
-                this.treeWidget._refreshElements(null);
+                this.refreshElements(null);
             }
 
             if (loadingCount === 0) {
@@ -223,7 +272,7 @@ export default class SaveStateHandler {
 
         const loadAndOpenNode = (node: Node): void => {
             loadingCount += 1;
-            this.treeWidget._openNode(node, false, () => {
+            this.openNode(node, false, () => {
                 loadingCount -= 1;
                 openNodes();
             });
@@ -233,8 +282,8 @@ export default class SaveStateHandler {
     }
 
     private getKeyName(): string {
-        if (typeof this.treeWidget.options.saveState === "string") {
-            return this.treeWidget.options.saveState;
+        if (typeof this.saveStateOption === "string") {
+            return this.saveStateOption;
         } else {
             return "tree";
         }