jqtree 1.7.4 → 1.7.5

package/src/scrollHandler/documentScrollParent.ts

@@ -0,0 +1,182 @@
+import type { ScrollParent } from "./types";
+
+type HorizontalScrollDirection = "left" | "right";
+type VerticalScrollDirection = "bottom" | "top";
+
+export default class DocumentScrollParent implements ScrollParent {
+    private $element: JQuery<HTMLElement>;
+    private horizontalScrollDirection?: HorizontalScrollDirection;
+    private horizontalScrollTimeout?: number;
+    private refreshHitAreas: () => void;
+    private verticalScrollDirection?: VerticalScrollDirection;
+    private verticalScrollTimeout?: number;
+    private documentScrollHeight?: number;
+    private documentScrollWidth?: number;
+
+    constructor($element: JQuery<HTMLElement>, refreshHitAreas: () => void) {
+        this.$element = $element;
+        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.horizontalScrollTimeout);
+            }
+
+            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 document.documentElement.scrollLeft;
+    }
+
+    public scrollToY(top: number): void {
+        const offset = this.$element.offset();
+        const treeTop = offset ? offset.top : 0;
+
+        jQuery(document).scrollTop(top + treeTop);
+    }
+
+    public stopScrolling() {
+        this.horizontalScrollDirection = undefined;
+        this.verticalScrollDirection = undefined;
+        this.documentScrollHeight = undefined;
+        this.documentScrollWidth = undefined;
+    }
+
+    private getNewHorizontalScrollDirection(
+        pageX: number,
+    ): HorizontalScrollDirection | undefined {
+        const $document = jQuery(document);
+
+        const scrollLeft = $document.scrollLeft() || 0;
+        const windowWidth = jQuery(window).width() || 0;
+
+        const isNearRightEdge = pageX > windowWidth - 20;
+        const isNearLeftEdge = pageX - scrollLeft < 20;
+
+        if (isNearRightEdge && this.canScrollRight()) {
+            return "right";
+        }
+
+        if (isNearLeftEdge) {
+            return "left";
+        }
+
+        return undefined;
+    }
+
+    private canScrollRight() {
+        const documentElement = document.documentElement;
+
+        return (
+            documentElement.scrollLeft + documentElement.clientWidth <
+            this.getDocumentScrollWidth()
+        );
+    }
+
+    private canScrollDown() {
+        const documentElement = document.documentElement;
+
+        return (
+            documentElement.scrollTop + documentElement.clientHeight <
+            this.getDocumentScrollHeight()
+        );
+    }
+
+    private getDocumentScrollHeight() {
+        // Store the original scroll height because the scroll height can increase when the drag element is moved beyond the scroll height.
+        if (this.documentScrollHeight == null) {
+            this.documentScrollHeight = document.documentElement.scrollHeight;
+        }
+
+        return this.documentScrollHeight;
+    }
+
+    private getDocumentScrollWidth() {
+        // Store the original scroll width because the scroll width can increase when the drag element is moved beyond the scroll width.
+        if (this.documentScrollWidth == null) {
+            this.documentScrollWidth = document.documentElement.scrollWidth;
+        }
+
+        return this.documentScrollWidth;
+    }
+
+    private getNewVerticalScrollDirection(
+        pageY: number,
+    ): VerticalScrollDirection | undefined {
+        const scrollTop = jQuery(document).scrollTop() || 0;
+        const distanceTop = pageY - scrollTop;
+
+        if (distanceTop < 20) {
+            return "top";
+        }
+
+        const windowHeight = jQuery(window).height() || 0;
+
+        if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
+            return "bottom";
+        }
+
+        return undefined;
+    }
+
+    private scrollHorizontally() {
+        if (!this.horizontalScrollDirection) {
+            return;
+        }
+
+        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
+        window.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;
+        window.scrollBy({ left: 0, top: distance, behavior: "instant" });
+
+        this.refreshHitAreas();
+
+        setTimeout(this.scrollVertically.bind(this), 40);
+    }
+}

package/src/scrollHandler/types.ts

@@ -0,0 +1,7 @@
+export interface ScrollParent {
+    checkHorizontalScrolling(pageX: number): void;
+    checkVerticalScrolling(pageY: number): void;
+    getScrollLeft(): number;
+    scrollToY(top: number): void;
+    stopScrolling(): void;
+}

package/src/scrollHandler.ts

@@ -1,276 +1,58 @@
 import { JqTreeWidget } from "./tree.jquery";
-import { HitArea, PositionInfo } from "./types";
+import { PositionInfo } from "./types";
+import { ScrollParent } from "./scrollHandler/types";
+import createScrollParent from "./scrollHandler/createScrollParent";
 
 export default class ScrollHandler {
     private treeWidget: JqTreeWidget;
-    private previousTop: number;
-    private isInitialized: boolean;
-    private $scrollParent: JQuery | null;
-    private scrollParentTop: number;
+    private scrollParent?: ScrollParent;
 
     constructor(treeWidget: JqTreeWidget) {
         this.treeWidget = treeWidget;
-        this.previousTop = -1;
-        this.isInitialized = false;
+        this.scrollParent = undefined;
     }
 
-    public checkScrolling(): void {
-        this.ensureInit();
-        this.checkVerticalScrolling();
-        this.checkHorizontalScrolling();
+    public checkScrolling(positionInfo: PositionInfo): void {
+        this.checkVerticalScrolling(positionInfo);
+        this.checkHorizontalScrolling(positionInfo);
     }
 
-    public scrollToY(top: number): void {
-        this.ensureInit();
-
-        if (this.$scrollParent && this.$scrollParent[0]) {
-            this.$scrollParent[0].scrollTop = top;
-        } else {
-            const offset = this.treeWidget.$el.offset();
-            const treeTop = offset ? offset.top : 0;
-
-            jQuery(document).scrollTop(top + treeTop);
-        }
+    public stopScrolling() {
+        this.getScrollParent().stopScrolling();
     }
 
-    public isScrolledIntoView($element: JQuery): boolean {
-        this.ensureInit();
-
-        let elementBottom: number;
-        let viewBottom: number;
-        let elementTop: number;
-        let viewTop: number;
-
-        const elHeight = $element.height() || 0;
-
-        if (this.$scrollParent) {
-            viewTop = 0;
-            viewBottom = this.$scrollParent.height() || 0;
-
-            const offset = $element.offset();
-            const originalTop = offset ? offset.top : 0;
-
-            elementTop = originalTop - this.scrollParentTop;
-            elementBottom = elementTop + elHeight;
-        } else {
-            viewTop = jQuery(window).scrollTop() || 0;
-
-            const windowHeight = jQuery(window).height() || 0;
-            viewBottom = viewTop + windowHeight;
-
-            const offset = $element.offset();
-
-            elementTop = offset ? offset.top : 0;
-            elementBottom = elementTop + elHeight;
-        }
-
-        return elementBottom <= viewBottom && elementTop >= viewTop;
+    public scrollToY(top: number): void {
+        this.getScrollParent().scrollToY(top);
     }
 
     public getScrollLeft(): number {
-        if (!this.$scrollParent) {
-            return 0;
-        } else {
-            return this.$scrollParent.scrollLeft() || 0;
-        }
-    }
-
-    private initScrollParent(): void {
-        const getParentWithOverflow = (): JQuery | null => {
-            const cssAttributes = ["overflow", "overflow-y"];
-
-            const hasOverFlow = ($el: JQuery): boolean => {
-                for (const attr of cssAttributes) {
-                    const overflowValue = $el.css(attr);
-                    if (
-                        overflowValue === "auto" ||
-                        overflowValue === "scroll"
-                    ) {
-                        return true;
-                    }
-                }
-
-                return false;
-            };
-
-            if (hasOverFlow(this.treeWidget.$el)) {
-                return this.treeWidget.$el;
-            }
-
-            for (const el of this.treeWidget.$el.parents().get()) {
-                const $el = jQuery(el);
-                if (hasOverFlow($el)) {
-                    return $el;
-                }
-            }
-
-            return null;
-        };
-
-        const setDocumentAsScrollParent = (): void => {
-            this.scrollParentTop = 0;
-            this.$scrollParent = null;
-        };
-
-        if (this.treeWidget.$el.css("position") === "fixed") {
-            setDocumentAsScrollParent();
-        }
-
-        const $scrollParent = getParentWithOverflow();
-
-        if (
-            $scrollParent &&
-            $scrollParent.length &&
-            $scrollParent[0]?.tagName !== "HTML"
-        ) {
-            this.$scrollParent = $scrollParent;
-
-            const offset = this.$scrollParent.offset();
-            this.scrollParentTop = offset ? offset.top : 0;
-        } else {
-            setDocumentAsScrollParent();
-        }
-
-        this.isInitialized = true;
+        return this.getScrollParent().getScrollLeft();
     }
 
-    private ensureInit(): void {
-        if (!this.isInitialized) {
-            this.initScrollParent();
-        }
-    }
-
-    private handleVerticalScrollingWithScrollParent(area: HitArea): void {
-        const scrollParent = this.$scrollParent && this.$scrollParent[0];
-
-        if (!scrollParent) {
+    private checkVerticalScrolling(positionInfo: PositionInfo): void {
+        if (positionInfo.pageY == null) {
             return;
         }
 
-        const distanceBottom =
-            this.scrollParentTop + scrollParent.offsetHeight - area.bottom;
-
-        if (distanceBottom < 20) {
-            scrollParent.scrollTop += 20;
-            this.treeWidget.refreshHitAreas();
-            this.previousTop = -1;
-        } else if (area.top - this.scrollParentTop < 20) {
-            scrollParent.scrollTop -= 20;
-            this.treeWidget.refreshHitAreas();
-            this.previousTop = -1;
-        }
-    }
-
-    private handleVerticalScrollingWithDocument(area: HitArea): void {
-        const scrollTop = jQuery(document).scrollTop() || 0;
-        const distanceTop = area.top - scrollTop;
-
-        if (distanceTop < 20) {
-            jQuery(document).scrollTop(scrollTop - 20);
-        } else {
-            const windowHeight = jQuery(window).height() || 0;
-
-            if (windowHeight - (area.bottom - scrollTop) < 20) {
-                jQuery(document).scrollTop(scrollTop + 20);
-            }
-        }
-    }
-
-    private checkVerticalScrolling(): void {
-        const hoveredArea = this.treeWidget.dndHandler.hoveredArea;
-
-        if (hoveredArea && hoveredArea.top !== this.previousTop) {
-            this.previousTop = hoveredArea.top;
-
-            if (this.$scrollParent) {
-                this.handleVerticalScrollingWithScrollParent(hoveredArea);
-            } else {
-                this.handleVerticalScrollingWithDocument(hoveredArea);
-            }
-        }
+        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
     }
 
-    private checkHorizontalScrolling(): void {
-        const positionInfo = this.treeWidget.dndHandler.positionInfo;
-
-        if (!positionInfo) {
+    private checkHorizontalScrolling(positionInfo: PositionInfo): void {
+        if (positionInfo.pageX == null) {
             return;
         }
 
-        if (this.$scrollParent) {
-            this.handleHorizontalScrollingWithParent(positionInfo);
-        } else {
-            this.handleHorizontalScrollingWithDocument(positionInfo);
-        }
+        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
     }
 
-    private handleHorizontalScrollingWithParent(
-        positionInfo: PositionInfo
-    ): void {
-        if (
-            positionInfo.pageX === undefined ||
-            positionInfo.pageY === undefined
-        ) {
-            return;
-        }
-
-        const $scrollParent = this.$scrollParent;
-        const scrollParentOffset = $scrollParent && $scrollParent.offset();
-
-        if (!($scrollParent && scrollParentOffset)) {
-            return;
-        }
-
-        const scrollParent = $scrollParent[0];
-
-        if (!scrollParent) {
-            return;
-        }
-
-        const canScrollRight =
-            scrollParent.scrollLeft + scrollParent.clientWidth <
-            scrollParent.scrollWidth;
-        const canScrollLeft = scrollParent.scrollLeft > 0;
-
-        const rightEdge = scrollParentOffset.left + scrollParent.clientWidth;
-        const leftEdge = scrollParentOffset.left;
-        const isNearRightEdge = positionInfo.pageX > rightEdge - 20;
-        const isNearLeftEdge = positionInfo.pageX < leftEdge + 20;
-
-        if (isNearRightEdge && canScrollRight) {
-            scrollParent.scrollLeft = Math.min(
-                scrollParent.scrollLeft + 20,
-                scrollParent.scrollWidth
+    private getScrollParent(): ScrollParent {
+        if (!this.scrollParent) {
+            this.scrollParent = createScrollParent(
+                this.treeWidget.$el,
+                this.treeWidget.refreshHitAreas.bind(this.treeWidget),
             );
-        } else if (isNearLeftEdge && canScrollLeft) {
-            scrollParent.scrollLeft = Math.max(scrollParent.scrollLeft - 20, 0);
         }
-    }
 
-    private handleHorizontalScrollingWithDocument(
-        positionInfo: PositionInfo
-    ): void {
-        if (
-            positionInfo.pageX === undefined ||
-            positionInfo.pageY === undefined
-        ) {
-            return;
-        }
-
-        const $document = jQuery(document);
-
-        const scrollLeft = $document.scrollLeft() || 0;
-        const windowWidth = jQuery(window).width() || 0;
-
-        const canScrollLeft = scrollLeft > 0;
-
-        const isNearRightEdge = positionInfo.pageX > windowWidth - 20;
-        const isNearLeftEdge = positionInfo.pageX - scrollLeft < 20;
-
-        if (isNearRightEdge) {
-            $document.scrollLeft(scrollLeft + 20);
-        } else if (isNearLeftEdge && canScrollLeft) {
-            $document.scrollLeft(Math.max(scrollLeft - 20, 0));
-        }
+        return this.scrollParent;
     }
 }

package/src/test/jqTree/loadOnDemand.test.ts

@@ -136,9 +136,8 @@ context("when a node has load_on_demand in the data", () => {
 
         context("when the node is selected and doesn't have the focus", () => {
             beforeEach(() => {
-                given.$tree.tree("selectNode", given.node, {
-                    mustSetFocus: false,
-                });
+                given.$tree.tree("selectNode", given.node);
+                (document.activeElement as HTMLElement).blur(); // eslint-disable-line testing-library/no-node-access
             });
 
             it("keeps the node selected and not focused", async () => {

package/src/test/jqTree/methods.test.ts

@@ -984,7 +984,7 @@ describe("refresh", () => {
 
     it("rerenders the tree", () => {
         const tree = given.$tree.tree("getTree");
-        (tree.children[0] as INode).name = "node1a";
+        (tree.children[0] as INode).name = "node1a"; // eslint-disable-line testing-library/no-node-access
 
         expect(given.$tree).toHaveTreeStructure([
             expect.objectContaining({ name: "node1" }),