jqtree 1.5.2 → 1.6.2

package/src/node.ts

@@ -1,7 +1,6 @@
-export type NodeId = number | string;
-
-export type DefaultRecord = Record<string, unknown>;
-export type NodeData = string | DefaultRecord;
+interface NodeRecordWithChildren extends NodeRecord {
+    children: NodeData[];
+}
 
 export enum Position {
     Before = 1,
@@ -34,12 +33,19 @@ export const getPositionName = (position: Position): string => {
 export const getPosition = (name: string): Position | undefined =>
     positionNames[name];
 
+const isNodeRecordWithChildren = (
+    data: NodeData
+): data is NodeRecordWithChildren =>
+    typeof data === "object" &&
+    "children" in data &&
+    data["children"] instanceof Array;
+
 export class Node implements INode {
     public id?: NodeId;
     public name: string;
     public children: Node[];
     public parent: Node | null;
-    public idMapping: Record<NodeId, Node>;
+    public idMapping: Map<NodeId, Node>;
     public tree?: Node;
     public nodeClass?: typeof Node;
     public load_on_demand: boolean;
@@ -61,7 +67,7 @@ export class Node implements INode {
         this.parent = null;
 
         if (isRoot) {
-            this.idMapping = {};
+            this.idMapping = new Map<NodeId, Node>();
             this.tree = this;
             this.nodeClass = nodeClass;
         }
@@ -131,15 +137,11 @@ export class Node implements INode {
             const node = this.createNode(o);
             this.addChild(node);
 
-            if (
-                typeof o === "object" &&
-                o["children"] &&
-                o["children"] instanceof Array
-            ) {
-                if (o["children"].length === 0) {
+            if (isNodeRecordWithChildren(o)) {
+                if (o.children.length === 0) {
                     node.isEmptyFolder = true;
                 } else {
-                    node.loadFromData(o["children"]);
+                    node.loadFromData(o.children);
                 }
             }
         }
@@ -299,7 +301,7 @@ export class Node implements INode {
     /*
     Get the tree as data.
     */
-    public getData(includeParent = false): DefaultRecord[] {
+    public getData(includeParent = false): NodeRecord[] {
         const getDataFromNodes = (nodes: Node[]): Record<string, unknown>[] => {
             return nodes.map((node) => {
                 const tmpNode: Record<string, unknown> = {};
@@ -379,12 +381,10 @@ export class Node implements INode {
             this.parent.addChildAtPosition(node, childIndex + 1);
 
             if (
-                typeof nodeInfo === "object" &&
-                nodeInfo["children"] &&
-                nodeInfo["children"] instanceof Array &&
-                nodeInfo["children"].length
+                isNodeRecordWithChildren(nodeInfo) &&
+                nodeInfo.children.length
             ) {
-                node.loadFromData(nodeInfo["children"]);
+                node.loadFromData(nodeInfo.children);
             }
 
             return node;
@@ -401,12 +401,10 @@ export class Node implements INode {
             this.parent.addChildAtPosition(node, childIndex);
 
             if (
-                typeof nodeInfo === "object" &&
-                nodeInfo["children"] &&
-                nodeInfo["children"] instanceof Array &&
-                nodeInfo["children"].length
+                isNodeRecordWithChildren(nodeInfo) &&
+                nodeInfo.children.length
             ) {
-                node.loadFromData(nodeInfo["children"]);
+                node.loadFromData(nodeInfo.children);
             }
 
             return node;
@@ -445,13 +443,8 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChild(node);
 
-        if (
-            typeof nodeInfo === "object" &&
-            nodeInfo["children"] &&
-            nodeInfo["children"] instanceof Array &&
-            nodeInfo["children"].length
-        ) {
-            node.loadFromData(nodeInfo["children"]);
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+            node.loadFromData(nodeInfo.children);
         }
 
         return node;
@@ -461,13 +454,8 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChildAtPosition(node, 0);
 
-        if (
-            typeof nodeInfo === "object" &&
-            nodeInfo["children"] &&
-            nodeInfo["children"] instanceof Array &&
-            nodeInfo["children"].length
-        ) {
-            node.loadFromData(nodeInfo["children"]);
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+            node.loadFromData(nodeInfo.children);
         }
 
         return node;
@@ -500,18 +488,18 @@ export class Node implements INode {
     }
 
     public getNodeById(nodeId: NodeId): Node | null {
-        return this.idMapping[nodeId] || null;
+        return this.idMapping.get(nodeId) || null;
     }
 
     public addNodeToIndex(node: Node): void {
         if (node.id != null) {
-            this.idMapping[node.id] = node;
+            this.idMapping.set(node.id, node);
         }
     }
 
     public removeNodeFromIndex(node: Node): void {
         if (node.id != null) {
-            delete this.idMapping[node.id];
+            this.idMapping.delete(node.id);
         }
     }
 
@@ -641,12 +629,10 @@ export class Node implements INode {
             this.setData(nodeData);
 
             if (
-                typeof nodeData === "object" &&
-                nodeData["children"] &&
-                nodeData["children"] instanceof Array &&
-                nodeData["children"].length
+                isNodeRecordWithChildren(nodeData) &&
+                nodeData.children.length
             ) {
-                addChildren(nodeData["children"]);
+                addChildren(nodeData.children);
             }
         };
 

package/src/nodeElement.ts

@@ -18,10 +18,16 @@ export class NodeElement {
         this.treeWidget = treeWidget;
 
         if (!node.element) {
-            node.element = this.treeWidget.element.get(0);
+            const element = this.treeWidget.element.get(0);
+
+            if (element) {
+                node.element = element;
+            }
         }
 
-        this.$element = jQuery(node.element);
+        if (node.element) {
+            this.$element = jQuery(node.element);
+        }
     }
 
     public addDropHint(position: number): DropHint {
@@ -99,9 +105,8 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon = this.treeWidget.renderer.openedIconElement.cloneNode(
-                true
-            );
+            const icon =
+                this.treeWidget.renderer.openedIconElement.cloneNode(true);
 
             buttonEl.appendChild(icon);
         }
@@ -147,9 +152,8 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon = this.treeWidget.renderer.closedIconElement.cloneNode(
-                true
-            );
+            const icon =
+                this.treeWidget.renderer.closedIconElement.cloneNode(true);
 
             buttonEl.appendChild(icon);
         }
@@ -248,7 +252,11 @@ class GhostDropHint implements DropHint {
     }
 
     public moveInsideOpenFolder(): void {
-        jQuery(this.node.children[0].element).before(this.$ghost);
+        const childElement = this.node.children[0].element;
+
+        if (childElement) {
+            jQuery(childElement).before(this.$ghost);
+        }
     }
 
     public moveInside(): void {

package/src/playwright/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "plugin:playwright/jest-playwright"
+  ]
+}

package/src/playwright/playwright.test.ts

@@ -41,8 +41,8 @@ beforeEach(async () => {
             autoOpen: 0,
             data: ExampleData.exampleData,
             dragAndDrop: ${given.dragAndDrop},
+            startDndDelay: 100,
         });
-        $tree.tree("setMouseDelay", 100);
     `);
 });
 
@@ -51,15 +51,15 @@ afterEach(async () => {
 });
 
 it("displays a tree", async () => {
-    await expect(page).toHaveText("Saurischia");
-    await expect(page).toHaveText("Ornithischians");
-    await expect(page).toHaveText("Coelophysoids");
+    await expect(page).toMatchText(/.*Saurischia.*/);
+    await expect(page).toMatchText(/.*Ornithischians.*/);
+    await expect(page).toMatchText(/.*Coelophysoids.*/);
 
     await matchScreenshot("displays_a_tree");
 });
 
 it("selects a node", async () => {
-    await expect(page).toHaveText("Saurischia");
+    await expect(page).toMatchText(/.*Saurischia.*/);
     const saurischia = await findNodeElement("Saurischia");
     await selectNode(saurischia);
     await expectToBeSelected(saurischia);
@@ -68,7 +68,7 @@ it("selects a node", async () => {
 });
 
 it("opens a node", async () => {
-    await expect(page).toHaveText("Saurischia");
+    await expect(page).toMatchText(/.*Saurischia.*/);
 
     const theropods = await findNodeElement("Theropods");
     await expectToBeClosed(theropods);
@@ -84,30 +84,30 @@ describe("dragAndDrop", () => {
     it("moves a node", async () => {
         await dragAndDrop("Herrerasaurians", "Ornithischians");
 
-        await getTreeStructure().then((structure) => {
-            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" }),
-                    ],
-                }),
-            ]);
-        });
+        const structure = await getTreeStructure();
+
+        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" }),
+                ],
+            }),
+        ]);
 
         await matchScreenshot("moves_a_node");
     });

package/src/playwright/testUtil.ts

@@ -96,47 +96,46 @@ export const selectNode = async (
     await titleHandle?.click();
 };
 
-export const getTreeStructure = async (): Promise<
-    JQTreeMatchers.TreeStructure
-> =>
+export const getTreeStructure = async (): Promise<JQTreeMatchers.TreeStructure> =>
     await page
         .evaluate(
             `
-        function getTreeNode($li) {
-            const $div = $li.children("div.jqtree-element");
-            const $span = $div.children("span.jqtree-title");
-            const name = $span.text();
-            const selected = $li.hasClass("jqtree-selected");
-
-            if ($li.hasClass("jqtree-folder")) {
-                const $ul = $li.children("ul.jqtree_common");
-
-                return {
-                    nodeType: "folder",
-                    children: getChildren($ul),
-                    name,
-                    open: !$li.hasClass("jqtree-closed"),
-                    selected,
-                };
-            } else {
-                return {
-                    nodeType: "child",
-                    name,
-                    selected,
-                };
+            ;
+            function getTreeNode($li) {
+                const $div = $li.children("div.jqtree-element");
+                const $span = $div.children("span.jqtree-title");
+                const name = $span.text();
+                const selected = $li.hasClass("jqtree-selected");
+
+                if ($li.hasClass("jqtree-folder")) {
+                    const $ul = $li.children("ul.jqtree_common");
+
+                    return {
+                        nodeType: "folder",
+                        children: getChildren($ul),
+                        name,
+                        open: !$li.hasClass("jqtree-closed"),
+                        selected,
+                    };
+                } else {
+                    return {
+                        nodeType: "child",
+                        name,
+                        selected,
+                    };
+                }
             }
-        };
-
-        function getChildren($ul) {
-            return $ul
-                .children("li.jqtree_common")
-                .map((_, li) => {
-                    return getTreeNode(jQuery(li))
-                })
-                .get();
-        };
-
-        JSON.stringify(window.getChildren(jQuery("ul.jqtree-tree")))
+
+            function getChildren($ul) {
+                return $ul
+                    .children("li.jqtree_common")
+                    .map((_, li) => {
+                        return getTreeNode(jQuery(li));
+                    })
+                    .get();
+            }
+
+            JSON.stringify(window.getChildren(jQuery("ul.jqtree-tree")));
         `
         )
         .then((s) => JSON.parse(s as string) as JQTreeMatchers.TreeStructure);

package/src/saveStateHandler.ts

@@ -1,6 +1,11 @@
 import { isInt } from "./util";
 import { JqTreeWidget } from "./tree.jquery";
-import { Node, NodeId } from "./node";
+import { Node } from "./node";
+
+export interface SavedState {
+    open_nodes: NodeId[];
+    selected_node: NodeId[];
+}
 
 export default class SaveStateHandler {
     private treeWidget: JqTreeWidget;
@@ -24,7 +29,7 @@ export default class SaveStateHandler {
         const jsonData = this.loadFromStorage();
 
         if (jsonData) {
-            return (this.parseState(jsonData) as unknown) as SavedState;
+            return this.parseState(jsonData) as unknown as SavedState;
         } else {
             return null;
         }
@@ -121,7 +126,7 @@ export default class SaveStateHandler {
             state.selected_node = [state.selected_node];
         }
 
-        return (state as unknown) as SavedState;
+        return state as unknown as SavedState;
     }
 
     private loadFromStorage(): string | null {
@@ -134,11 +139,11 @@ export default class SaveStateHandler {
         }
     }
 
-    private openInitialNodes(nodeIds: any[]): boolean {
+    private openInitialNodes(nodeIds: NodeId[]): boolean {
         let mustLoadOnDemand = false;
 
-        for (const nodeDd of nodeIds) {
-            const node = this.treeWidget.getNodeById(nodeDd);
+        for (const nodeId of nodeIds) {
+            const node = this.treeWidget.getNodeById(nodeId);
 
             if (node) {
                 if (!node.load_on_demand) {

package/src/selectNodeHandler.ts

@@ -1,13 +1,14 @@
-import { Node, NodeId } from "./node";
+import { Node } from "./node";
 import { JqTreeWidget } from "./tree.jquery";
 
 export default class SelectNodeHandler {
     private treeWidget: JqTreeWidget;
-    private selectedNodes: Record<NodeId, boolean>;
+    private selectedNodes: Set<NodeId>;
     private selectedSingleNode: Node | null;
 
     constructor(treeWidget: JqTreeWidget) {
         this.treeWidget = treeWidget;
+        this.selectedNodes = new Set<NodeId>();
         this.clear();
     }
 
@@ -25,18 +26,14 @@ export default class SelectNodeHandler {
         if (this.selectedSingleNode) {
             return [this.selectedSingleNode];
         } else {
-            const selectedNodes = [];
+            const selectedNodes: Node[] = [];
 
-            for (const id in this.selectedNodes) {
-                if (
-                    Object.prototype.hasOwnProperty.call(this.selectedNodes, id)
-                ) {
-                    const node = this.treeWidget.getNodeById(id);
-                    if (node) {
-                        selectedNodes.push(node);
-                    }
+            this.selectedNodes.forEach((id) => {
+                const node = this.treeWidget.getNodeById(id);
+                if (node) {
+                    selectedNodes.push(node);
                 }
-            }
+            });
 
             return selectedNodes;
         }
@@ -69,11 +66,7 @@ export default class SelectNodeHandler {
 
     public isNodeSelected(node: Node): boolean {
         if (node.id != null) {
-            if (this.selectedNodes[node.id]) {
-                return true;
-            } else {
-                return false;
-            }
+            return this.selectedNodes.has(node.id);
         } else if (this.selectedSingleNode) {
             return this.selectedSingleNode.element === node.element;
         } else {
@@ -82,7 +75,7 @@ export default class SelectNodeHandler {
     }
 
     public clear(): void {
-        this.selectedNodes = {};
+        this.selectedNodes.clear();
         this.selectedSingleNode = null;
     }
 
@@ -95,12 +88,12 @@ export default class SelectNodeHandler {
                 this.selectedSingleNode = null;
             }
         } else {
-            delete this.selectedNodes[node.id];
+            this.selectedNodes.delete(node.id);
 
             if (includeChildren) {
                 node.iterate(() => {
                     if (node.id != null) {
-                        delete this.selectedNodes[node.id];
+                        this.selectedNodes.delete(node.id);
                     }
                     return true;
                 });
@@ -110,7 +103,7 @@ export default class SelectNodeHandler {
 
     public addToSelection(node: Node): void {
         if (node.id != null) {
-            this.selectedNodes[node.id] = true;
+            this.selectedNodes.add(node.id);
         } else {
             this.selectedSingleNode = node;
         }

package/src/simple.widget.ts

@@ -109,7 +109,7 @@ export default class SimpleWidget<WidgetOptions> {
 
     public options: WidgetOptions;
 
-    protected $el: JQuery<HTMLElement>;
+    public $el: JQuery<HTMLElement>;
 
     constructor(el: HTMLElement, options: WidgetOptions) {
         this.$el = jQuery(el);

package/src/test/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["testing-library"],
+  "extends": ["plugin:testing-library/dom"]
+}

package/src/test/jqTree/create.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";

package/src/test/jqTree/events.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import { rest } from "msw";
 import { setupServer } from "msw/node";
@@ -35,7 +34,7 @@ describe("tree.click", () => {
     });
 
     it("fires tree.click", () =>
-        new Promise((done) => {
+        new Promise<void>((done) => {
             given.$tree.on("tree.click", (e: unknown) => {
                 const treeClickEvent = e as ClickNodeEvent;
 
@@ -43,7 +42,7 @@ describe("tree.click", () => {
                 done();
             });
 
-            given.titleSpan.click();
+            given.titleSpan.trigger("click");
         }));
 });
 
@@ -64,7 +63,7 @@ describe("tree.contextmenu", () => {
     });
 
     it("fires tree.contextmenu", () =>
-        new Promise((done) => {
+        new Promise<void>((done) => {
             given.$tree.on("tree.contextmenu", (e: unknown) => {
                 const treeClickEvent = e as ClickNodeEvent;
 
@@ -93,7 +92,7 @@ describe("tree.dblclick", () => {
     });
 
     it("fires tree.dblclick", () =>
-        new Promise((done) => {
+        new Promise<void>((done) => {
             given.$tree.on("tree.dblclick", (e: unknown) => {
                 const treeClickEvent = e as ClickNodeEvent;
 
@@ -101,7 +100,7 @@ describe("tree.dblclick", () => {
                 done();
             });
 
-            given.titleSpan.dblclick();
+            given.titleSpan.trigger("dblclick");
         }));
 });
 
@@ -114,7 +113,7 @@ describe("tree.init", () => {
 
     context("with json data", () => {
         it("is called", () =>
-            new Promise((done) => {
+            new Promise<void>((done) => {
                 given.$tree.on("tree.init", () => {
                     expect(
                         given.$tree.tree("getNodeByName", "node2")
@@ -148,7 +147,7 @@ describe("tree.init", () => {
         });
 
         it("is called", () =>
-            new Promise((done) => {
+            new Promise<void>((done) => {
                 given.$tree.on("tree.init", () => {
                     expect(
                         given.$tree.tree("getNodeByName", "node2")
@@ -173,7 +172,7 @@ describe("tree.load_data", () => {
 
     context("when the tree is initialized with data", () => {
         it("fires tree.load_data", () =>
-            new Promise((resolve) => {
+            new Promise<void>((resolve) => {
                 given.$tree.on("tree.load_data", (e: any) => {
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                     expect(e.tree_data).toEqual(exampleData);
@@ -204,7 +203,7 @@ describe("tree.select", () => {
     });
 
     it("fires tree.click", () =>
-        new Promise((done) => {
+        new Promise<void>((done) => {
             given.$tree.on("tree.select", (e: unknown) => {
                 const treeClickEvent = e as ClickNodeEvent;
 
@@ -213,7 +212,7 @@ describe("tree.select", () => {
                 done();
             });
 
-            given.titleSpan.click();
+            given.titleSpan.trigger("click");
         }));
 
     context("when the node was selected", () => {
@@ -222,7 +221,7 @@ describe("tree.select", () => {
         });
 
         it("fires tree.select with node is null", () =>
-            new Promise((done) => {
+            new Promise<void>((done) => {
                 given.$tree.on("tree.select", (e: unknown) => {
                     const treeClickEvent = e as ClickNodeEvent;
 
@@ -231,7 +230,7 @@ describe("tree.select", () => {
                     done();
                 });
 
-                given.titleSpan.click();
+                given.titleSpan.trigger("click");
             }));
     });
 });