jqtree 1.7.5 → 1.8.1

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";
         }

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,15 +1,21 @@
-import { JqTreeWidget } from "./tree.jquery";
-import { PositionInfo } from "./types";
+import { PositionInfo } from "./mouseUtils";
 import { ScrollParent } from "./scrollHandler/types";
 import createScrollParent from "./scrollHandler/createScrollParent";
 
+interface ScrollHandlerParams {
+    refreshHitAreas: () => void;
+    treeElement: HTMLElement;
+}
+
 export default class ScrollHandler {
-    private treeWidget: JqTreeWidget;
+    private refreshHitAreas: () => void;
     private scrollParent?: ScrollParent;
+    private treeElement: HTMLElement;
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+    constructor({ refreshHitAreas, treeElement }: ScrollHandlerParams) {
+        this.refreshHitAreas = refreshHitAreas;
         this.scrollParent = undefined;
+        this.treeElement = treeElement;
     }
 
     public checkScrolling(positionInfo: PositionInfo): void {
@@ -30,26 +36,18 @@ 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.treeWidget.$el,
-                this.treeWidget.refreshHitAreas.bind(this.treeWidget),
+                this.treeElement,
+                this.refreshHitAreas,
             );
         }
 

package/src/selectNodeHandler.ts

@@ -1,13 +1,17 @@
 import { Node } from "./node";
-import { JqTreeWidget } from "./tree.jquery";
+import { GetNodeById } from "./jqtreeMethodTypes";
+
+interface SelectNodeHandlerParameters {
+    getNodeById: GetNodeById;
+}
 
 export default class SelectNodeHandler {
-    private treeWidget: JqTreeWidget;
+    private getNodeById: GetNodeById;
     private selectedNodes: Set<NodeId>;
     private selectedSingleNode: Node | null;
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+    constructor({ getNodeById }: SelectNodeHandlerParameters) {
+        this.getNodeById = getNodeById;
         this.selectedNodes = new Set<NodeId>();
         this.clear();
     }
@@ -29,7 +33,7 @@ export default class SelectNodeHandler {
             const selectedNodes: Node[] = [];
 
             this.selectedNodes.forEach((id) => {
-                const node = this.treeWidget.getNodeById(id);
+                const node = this.getNodeById(id);
                 if (node) {
                     selectedNodes.push(node);
                 }
@@ -53,7 +57,7 @@ export default class SelectNodeHandler {
                 if (
                     Object.prototype.hasOwnProperty.call(this.selectedNodes, id)
                 ) {
-                    const node = this.treeWidget.getNodeById(id);
+                    const node = this.getNodeById(id);
                     if (node && parent.isParentOf(node)) {
                         selectedNodes.push(node);
                     }
@@ -108,14 +112,4 @@ export default class SelectNodeHandler {
             this.selectedSingleNode = node;
         }
     }
-
-    public isFocusOnTree(): boolean {
-        const activeElement = document.activeElement;
-
-        return Boolean(
-            activeElement &&
-                activeElement.tagName === "SPAN" &&
-                this.treeWidget._containsElement(activeElement as HTMLElement)
-        );
-    }
 }