tree-element 0.1.1 → 0.3.0

package/src/scrollHandler/createScrollParent.ts

@@ -4,48 +4,47 @@ import ContainerScrollParent from "./containerScrollParent";
 import DocumentScrollParent from "./documentScrollParent";
 
 const isOverflow = (overflowValue: string) =>
-    overflowValue === "auto" || overflowValue === "scroll";
+  overflowValue === "auto" || overflowValue === "scroll";
 
 const hasOverFlow = (element: HTMLElement): boolean => {
-    const style = getComputedStyle(element);
+  const style = getComputedStyle(element);
 
-    return isOverflow(style.overflowX) || isOverflow(style.overflowY);
+  return isOverflow(style.overflowX) || isOverflow(style.overflowY);
 };
 
 const getParentWithOverflow = (
-    treeElement: HTMLElement,
+  treeElement: HTMLElement,
 ): HTMLElement | null => {
-    if (hasOverFlow(treeElement)) {
-        return treeElement;
-    }
-
-    let parent = treeElement.parentElement;
+  if (hasOverFlow(treeElement)) {
+    return treeElement;
+  }
 
-    while (parent) {
-        if (hasOverFlow(parent)) {
-            return parent;
-        }
+  let parent = treeElement.parentElement;
 
-        parent = parent.parentElement;
+  while (parent) {
+    if (hasOverFlow(parent)) {
+      return parent;
     }
 
-    return null;
+    parent = parent.parentElement;
+  }
+
+  return null;
 };
 
 const createScrollParent = (
-    treeElement: HTMLElement,
-    refreshHitAreas: () => void,
+  treeElement: HTMLElement,
+  refreshHitAreas: () => void,
 ): ScrollParent => {
-    const container = getParentWithOverflow(treeElement);
-
-    if (container && container.tagName !== "HTML") {
-        return new ContainerScrollParent({
-            container,
-            refreshHitAreas,
-        });
-    } else {
-        return new DocumentScrollParent({ refreshHitAreas, treeElement });
-    }
+  const container = getParentWithOverflow(treeElement);
+
+  if (container && container.tagName !== "HTML") {
+    return new ContainerScrollParent({
+      container,
+      refreshHitAreas,
+    });
+  }
+  return new DocumentScrollParent({ refreshHitAreas, treeElement });
 };
 
 export default createScrollParent;

package/src/scrollHandler/documentScrollParent.ts

@@ -1,104 +1,98 @@
 import type {
-    HorizontalScrollDirection,
-    VerticalScrollDirection,
+  HorizontalScrollDirection,
+  VerticalScrollDirection,
 } from "./scrollParent";
 
 import { getOffsetTop } from "../positionUtils";
 import { ScrollParent } from "./scrollParent";
 
 interface Params {
-    refreshHitAreas: () => void;
-    treeElement: HTMLElement;
+  refreshHitAreas: () => void;
+  treeElement: HTMLElement;
 }
 
 export default class DocumentScrollParent extends ScrollParent {
-    private documentScrollHeight?: number;
-    private documentScrollWidth?: number;
-    private treeElement: HTMLElement;
+  private documentScrollHeight?: number;
+  private documentScrollWidth?: number;
+  private treeElement: HTMLElement;
 
-    constructor({ refreshHitAreas, treeElement }: Params) {
-        super({ container: document.documentElement, refreshHitAreas });
+  constructor({ refreshHitAreas, treeElement }: Params) {
+    super({ container: document.documentElement, refreshHitAreas });
 
-        this.treeElement = treeElement;
-    }
-
-    public scrollToY(top: number): void {
-        const treeTop = getOffsetTop(this.treeElement);
-
-        super.scrollToY(top + treeTop);
-    }
+    this.treeElement = treeElement;
+  }
 
-    public stopScrolling() {
-        super.stopScrolling();
+  public scrollToY(top: number): void {
+    const treeTop = getOffsetTop(this.treeElement);
 
-        this.documentScrollHeight = undefined;
-        this.documentScrollWidth = undefined;
-    }
+    super.scrollToY(top + treeTop);
+  }
 
-    protected getNewHorizontalScrollDirection(
-        pageX: number,
-    ): HorizontalScrollDirection | undefined {
-        const scrollLeft = this.container.scrollLeft;
-        const windowWidth = window.innerWidth;
+  public stopScrolling() {
+    super.stopScrolling();
 
-        const isNearRightEdge = pageX > windowWidth - 20;
-        const isNearLeftEdge = pageX - scrollLeft < 20;
+    this.documentScrollHeight = undefined;
+    this.documentScrollWidth = undefined;
+  }
 
-        if (isNearRightEdge && this.canScrollRight()) {
-            return "right";
-        }
+  protected getNewHorizontalScrollDirection(
+    pageX: number,
+  ): HorizontalScrollDirection | undefined {
+    const scrollLeft = this.container.scrollLeft;
+    const windowWidth = window.innerWidth;
 
-        if (isNearLeftEdge) {
-            return "left";
-        }
+    const isNearRightEdge = pageX > windowWidth - 20;
 
-        return undefined;
+    if (isNearRightEdge && this.canScrollRight()) {
+      return "right";
     }
 
-    protected getNewVerticalScrollDirection(
-        pageY: number,
-    ): undefined | VerticalScrollDirection {
-        const scrollTop = this.container.scrollTop;
-        const distanceTop = pageY - scrollTop;
+    const isNearLeftEdge = pageX - scrollLeft < 20;
+    return isNearLeftEdge ? "left" : undefined;
+  }
 
-        if (distanceTop < 20) {
-            return "top";
-        }
+  protected getNewVerticalScrollDirection(
+    pageY: number,
+  ): undefined | VerticalScrollDirection {
+    const scrollTop = this.container.scrollTop;
+    const distanceTop = pageY - scrollTop;
 
-        const windowHeight = window.innerHeight;
+    if (distanceTop < 20) {
+      return "top";
+    }
 
-        if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
-            return "bottom";
-        }
+    const windowHeight = window.innerHeight;
 
-        return undefined;
-    }
+    return windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()
+      ? "bottom"
+      : undefined;
+  }
 
-    private canScrollDown() {
-        return (
-            this.container.scrollTop + this.container.clientHeight <
-            this.getDocumentScrollHeight()
-        );
-    }
+  private canScrollDown() {
+    return (
+      this.container.scrollTop + this.container.clientHeight <
+      this.getDocumentScrollHeight()
+    );
+  }
 
-    private canScrollRight() {
-        return (
-            this.container.scrollLeft + this.container.clientWidth <
-            this.getDocumentScrollWidth()
-        );
-    }
+  private canScrollRight() {
+    return (
+      this.container.scrollLeft + this.container.clientWidth <
+      this.getDocumentScrollWidth()
+    );
+  }
 
-    private getDocumentScrollHeight() {
-        // Store the original scroll height because the scroll height can increase when the drag element is moved beyond the scroll height.
-        this.documentScrollHeight ??= this.container.scrollHeight;
+  private getDocumentScrollHeight() {
+    // Store the original scroll height because the scroll height can increase when the drag element is moved beyond the scroll height.
+    this.documentScrollHeight ??= this.container.scrollHeight;
 
-        return this.documentScrollHeight;
-    }
+    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.
-        this.documentScrollWidth ??= this.container.scrollWidth;
+  private getDocumentScrollWidth() {
+    // Store the original scroll width because the scroll width can increase when the drag element is moved beyond the scroll width.
+    this.documentScrollWidth ??= this.container.scrollWidth;
 
-        return this.documentScrollWidth;
-    }
+    return this.documentScrollWidth;
+  }
 }

package/src/scrollHandler/scrollParent.ts

@@ -2,116 +2,120 @@ export type HorizontalScrollDirection = "left" | "right";
 export type VerticalScrollDirection = "bottom" | "top";
 
 interface ConstructorParams {
-    container: HTMLElement;
-    refreshHitAreas: () => void;
+  container: HTMLElement;
+  refreshHitAreas: () => void;
 }
 
 export abstract class ScrollParent {
-    protected container: HTMLElement;
-    protected horizontalScrollDirection?: HorizontalScrollDirection;
-    protected horizontalScrollTimeout?: number;
+  protected container: HTMLElement;
+  protected horizontalScrollDirection?: HorizontalScrollDirection;
+  protected horizontalScrollTimeout?: number;
 
-    protected refreshHitAreas: () => void;
-    protected verticalScrollDirection?: VerticalScrollDirection;
-    protected verticalScrollTimeout?: number;
+  protected refreshHitAreas: () => void;
+  protected verticalScrollDirection?: VerticalScrollDirection;
+  protected verticalScrollTimeout?: number;
 
-    constructor({ container, refreshHitAreas }: ConstructorParams) {
-        this.container = container;
-        this.refreshHitAreas = refreshHitAreas;
-    }
+  constructor({ container, refreshHitAreas }: ConstructorParams) {
+    this.container = container;
+    this.refreshHitAreas = refreshHitAreas;
+  }
 
-    public checkHorizontalScrolling(pageX: number): void {
-        const newHorizontalScrollDirection =
-            this.getNewHorizontalScrollDirection(pageX);
+  public checkHorizontalScrolling(pageX: number): void {
+    const newHorizontalScrollDirection =
+      this.getNewHorizontalScrollDirection(pageX);
 
-        if (this.horizontalScrollDirection !== newHorizontalScrollDirection) {
-            this.horizontalScrollDirection = newHorizontalScrollDirection;
+    if (this.horizontalScrollDirection === newHorizontalScrollDirection) {
+      return;
+    }
 
-            if (this.horizontalScrollTimeout != null) {
-                window.clearTimeout(this.horizontalScrollTimeout);
-            }
+    this.horizontalScrollDirection = newHorizontalScrollDirection;
 
-            if (newHorizontalScrollDirection) {
-                this.horizontalScrollTimeout = window.setTimeout(
-                    this.scrollHorizontally.bind(this),
-                    40,
-                );
-            }
-        }
+    if (this.horizontalScrollTimeout != null) {
+      window.clearTimeout(this.horizontalScrollTimeout);
     }
 
-    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,
-                );
-            }
-        }
+    if (newHorizontalScrollDirection) {
+      this.horizontalScrollTimeout = window.setTimeout(
+        this.scrollHorizontally.bind(this),
+        40,
+      );
     }
+  }
 
-    public getScrollLeft(): number {
-        return this.container.scrollLeft;
-    }
+  public checkVerticalScrolling(pageY: number) {
+    const newVerticalScrollDirection =
+      this.getNewVerticalScrollDirection(pageY);
 
-    public scrollToY(top: number): void {
-        this.container.scrollTop = top;
+    if (this.verticalScrollDirection === newVerticalScrollDirection) {
+      return;
     }
 
-    public stopScrolling() {
-        this.horizontalScrollDirection = undefined;
-        this.verticalScrollDirection = undefined;
+    this.verticalScrollDirection = newVerticalScrollDirection;
+
+    if (this.verticalScrollTimeout != null) {
+      window.clearTimeout(this.verticalScrollTimeout);
+      this.verticalScrollTimeout = undefined;
     }
 
-    protected abstract getNewHorizontalScrollDirection(
-        pageX: number,
-    ): HorizontalScrollDirection | undefined;
-    protected abstract getNewVerticalScrollDirection(
-        pageY: number,
-    ): undefined | VerticalScrollDirection;
+    if (newVerticalScrollDirection) {
+      this.verticalScrollTimeout = window.setTimeout(
+        this.scrollVertically.bind(this),
+        40,
+      );
+    }
+  }
+
+  public getScrollLeft(): number {
+    return this.container.scrollLeft;
+  }
+
+  public scrollToY(top: number): void {
+    this.container.scrollTop = top;
+  }
+
+  public stopScrolling() {
+    this.horizontalScrollDirection = undefined;
+    this.verticalScrollDirection = undefined;
+  }
+
+  protected abstract getNewHorizontalScrollDirection(
+    pageX: number,
+  ): HorizontalScrollDirection | undefined;
+  protected abstract getNewVerticalScrollDirection(
+    pageY: number,
+  ): undefined | VerticalScrollDirection;
+
+  protected scrollHorizontally() {
+    if (!this.horizontalScrollDirection) {
+      return;
+    }
 
-    protected scrollHorizontally() {
-        if (!this.horizontalScrollDirection) {
-            return;
-        }
+    const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
+    this.container.scrollBy({
+      behavior: "instant",
+      left: distance,
+      top: 0,
+    });
 
-        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
-        this.container.scrollBy({
-            behavior: "instant",
-            left: distance,
-            top: 0,
-        });
+    this.refreshHitAreas();
 
-        this.refreshHitAreas();
+    setTimeout(this.scrollHorizontally.bind(this), 40);
+  }
 
-        setTimeout(this.scrollHorizontally.bind(this), 40);
+  protected scrollVertically() {
+    if (!this.verticalScrollDirection) {
+      return;
     }
 
-    protected scrollVertically() {
-        if (!this.verticalScrollDirection) {
-            return;
-        }
+    const distance = this.verticalScrollDirection === "top" ? -20 : 20;
+    this.container.scrollBy({
+      behavior: "instant",
+      left: 0,
+      top: distance,
+    });
 
-        const distance = this.verticalScrollDirection === "top" ? -20 : 20;
-        this.container.scrollBy({
-            behavior: "instant",
-            left: 0,
-            top: distance,
-        });
+    this.refreshHitAreas();
 
-        this.refreshHitAreas();
-
-        setTimeout(this.scrollVertically.bind(this), 40);
-    }
+    setTimeout(this.scrollVertically.bind(this), 40);
+  }
 }

package/src/scrollHandler.ts

@@ -4,52 +4,52 @@ import type { ScrollParent } from "./scrollHandler/scrollParent";
 import createScrollParent from "./scrollHandler/createScrollParent";
 
 interface ScrollHandlerParams {
-    refreshHitAreas: () => void;
-    treeElement: HTMLElement;
+  refreshHitAreas: () => void;
+  treeElement: HTMLElement;
 }
 
 export default class ScrollHandler {
-    private refreshHitAreas: () => void;
-    private scrollParent?: ScrollParent;
-    private treeElement: HTMLElement;
-
-    constructor({ refreshHitAreas, treeElement }: ScrollHandlerParams) {
-        this.refreshHitAreas = refreshHitAreas;
-        this.scrollParent = undefined;
-        this.treeElement = treeElement;
-    }
-
-    public checkScrolling(positionInfo: PositionInfo): void {
-        this.checkVerticalScrolling(positionInfo);
-        this.checkHorizontalScrolling(positionInfo);
-    }
-
-    public getScrollLeft(): number {
-        return this.getScrollParent().getScrollLeft();
-    }
-
-    public scrollToY(top: number): void {
-        this.getScrollParent().scrollToY(top);
-    }
-
-    public stopScrolling() {
-        this.getScrollParent().stopScrolling();
-    }
-
-    private checkHorizontalScrolling(positionInfo: PositionInfo): void {
-        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
-    }
-
-    private checkVerticalScrolling(positionInfo: PositionInfo): void {
-        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
-    }
-
-    private getScrollParent(): ScrollParent {
-        this.scrollParent ??= createScrollParent(
-            this.treeElement,
-            this.refreshHitAreas,
-        );
-
-        return this.scrollParent;
-    }
+  private refreshHitAreas: () => void;
+  private scrollParent?: ScrollParent;
+  private treeElement: HTMLElement;
+
+  constructor({ refreshHitAreas, treeElement }: ScrollHandlerParams) {
+    this.refreshHitAreas = refreshHitAreas;
+    this.scrollParent = undefined;
+    this.treeElement = treeElement;
+  }
+
+  public checkScrolling(positionInfo: PositionInfo): void {
+    this.checkVerticalScrolling(positionInfo);
+    this.checkHorizontalScrolling(positionInfo);
+  }
+
+  public getScrollLeft(): number {
+    return this.getScrollParent().getScrollLeft();
+  }
+
+  public scrollToY(top: number): void {
+    this.getScrollParent().scrollToY(top);
+  }
+
+  public stopScrolling() {
+    this.getScrollParent().stopScrolling();
+  }
+
+  private checkHorizontalScrolling(positionInfo: PositionInfo): void {
+    this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
+  }
+
+  private checkVerticalScrolling(positionInfo: PositionInfo): void {
+    this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
+  }
+
+  private getScrollParent(): ScrollParent {
+    this.scrollParent ??= createScrollParent(
+      this.treeElement,
+      this.refreshHitAreas,
+    );
+
+    return this.scrollParent;
+  }
 }