tree-element 0.1.0

package/src/positionUtils.ts

@@ -0,0 +1,18 @@
+interface TopLeftPosition {
+  left: number;
+  top: number;
+}
+
+// Get the top position of the HTML element.
+export const getOffsetTop = (element: HTMLElement): number =>
+  getElementPosition(element).top;
+
+// Get the top left position of the HTML element.
+export const getElementPosition = (element: HTMLElement): TopLeftPosition => {
+  const rect = element.getBoundingClientRect();
+
+  return {
+    left: rect.x + window.scrollX,
+    top: rect.y + window.scrollY,
+  };
+};

package/src/requestUrl.ts

@@ -0,0 +1,41 @@
+// Url class for absolute and relative urls.
+
+const isAbsoluteUrl = (inputUrl: string) => {
+  try {
+    new URL(inputUrl);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const LOCALHOST = "http://localhost";
+
+class RequestUrl {
+  private isAbsolute: boolean;
+  private url: URL;
+
+  constructor(inputUrl: string) {
+    if (isAbsoluteUrl(inputUrl)) {
+      this.url = new URL(inputUrl);
+      this.isAbsolute = true;
+    } else {
+      this.url = new URL(inputUrl, LOCALHOST);
+      this.isAbsolute = false;
+    }
+  }
+
+  setSearchParam(key: string, value: string) {
+    this.url.searchParams.set(key, value);
+  }
+
+  toString() {
+    if (this.isAbsolute) {
+      return this.url.href;
+    } else {
+      return this.url.href.slice(LOCALHOST.length);
+    }
+  }
+}
+
+export default RequestUrl;

package/src/saveStateHandler.ts

@@ -0,0 +1,279 @@
+import type {
+    AddToSelection,
+    GetNodeById,
+    GetSelectedNodes,
+    GetTree,
+    OpenNode,
+    RefreshElements,
+    RemoveFromSelection,
+} from "./methodTypes";
+import type { Node, NodeId } from "./node";
+import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./options";
+
+import { isInt } from "./util";
+
+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 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;
+
+    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 getNodeIdToBeSelected(): NodeId | null {
+        if (!this.saveStateOption) {
+            return null;
+        }
+
+        const state = this.getStateFromStorage();
+
+        if (state?.selected_node) {
+            return state.selected_node[0] ?? null;
+        } else {
+            return null;
+        }
+    }
+
+    public getState(): SavedState {
+        const getOpenNodeIds = (): NodeId[] => {
+            const openNodes: NodeId[] = [];
+
+            this.getTree()?.iterate((node: Node) => {
+                if (node.is_open && node.id && node.hasChildren()) {
+                    openNodes.push(node.id);
+                }
+                return true;
+            });
+
+            return openNodes;
+        };
+
+        const getSelectedNodeIds = (): NodeId[] => {
+            const selectedNodeIds: NodeId[] = [];
+
+            this.getSelectedNodes().forEach((node) => {
+                if (node.id != null) {
+                    selectedNodeIds.push(node.id);
+                }
+            });
+
+            return selectedNodeIds;
+        };
+
+        return {
+            open_nodes: getOpenNodeIds(),
+            selected_node: getSelectedNodeIds(),
+        };
+    }
+
+    public getStateFromStorage(): null | SavedState {
+        if (!this.saveStateOption) {
+            return null;
+        }
+
+        const jsonData = this.loadFromStorage();
+
+        if (jsonData) {
+            return this.parseState(jsonData);
+        } else {
+            return null;
+        }
+    }
+
+    public saveState(): void {
+        if (!this.saveStateOption) {
+            return;
+        }
+
+        const state = JSON.stringify(this.getState());
+
+        if (this.onSetStateFromStorage) {
+            this.onSetStateFromStorage(state);
+        } else {
+            localStorage.setItem(this.getKeyName(), state);
+        }
+    }
+
+    /*
+    Set initial state
+    Don't handle nodes that are loaded on demand
+
+    result: must load on demand (boolean)
+    */
+    public setInitialState(state: SavedState): boolean {
+        let mustLoadOnDemand = false;
+
+        if (state.open_nodes) {
+            mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
+        }
+
+        this.resetSelection();
+
+        if (state.selected_node) {
+            this.selectInitialNodes(state.selected_node);
+        }
+
+        return mustLoadOnDemand;
+    }
+
+    public async setInitialStateOnDemand(
+        state: SavedState,
+    ): Promise<void> {
+        let nodeIds = state.open_nodes;
+
+        const openNodes = async () => {
+            if (!nodeIds) {
+                return;
+            }
+
+            const newNodesIds = [];
+
+            for (const nodeId of nodeIds) {
+                const node = this.getNodeById(nodeId);
+
+                if (!node) {
+                    newNodesIds.push(nodeId);
+                } else {
+                    if (!node.is_loading) {
+                        if (node.load_on_demand) {
+                            await loadAndOpenNode(node);
+                        } else {
+                            await this.openNode(node, false);
+                        }
+                    }
+                }
+            }
+
+            nodeIds = newNodesIds;
+
+            if (state.selected_node) {
+                if (this.selectInitialNodes(state.selected_node)) {
+                    this.refreshElements(null);
+                }
+            }
+        };
+
+        const loadAndOpenNode = async (node: Node) => {
+            await this.openNode(node, false);
+            await openNodes();
+        };
+
+        await openNodes();
+    }
+
+    private getKeyName(): string {
+        if (typeof this.saveStateOption === "string") {
+            return this.saveStateOption;
+        } else {
+            return "tree";
+        }
+    }
+
+    private loadFromStorage(): null | string {
+        if (this.onGetStateFromStorage) {
+            return this.onGetStateFromStorage();
+        } else {
+            return localStorage.getItem(this.getKeyName());
+        }
+    }
+
+    private openInitialNodes(nodeIds: NodeId[]): boolean {
+        let mustLoadOnDemand = false;
+
+        for (const nodeId of nodeIds) {
+            const node = this.getNodeById(nodeId);
+
+            if (node) {
+                if (!node.load_on_demand) {
+                    node.is_open = true;
+                } else {
+                    mustLoadOnDemand = true;
+                }
+            }
+        }
+
+        return mustLoadOnDemand;
+    }
+
+    private parseState(jsonData: string): SavedState {
+        const state = JSON.parse(jsonData) as Record<string, unknown>;
+
+        // Check if selected_node is an int (instead of an array)
+        if (state.selected_node && isInt(state.selected_node)) {
+            // Convert to array
+            state.selected_node = [state.selected_node];
+        }
+
+        return state;
+    }
+
+    private resetSelection(): void {
+        const selectedNodes = this.getSelectedNodes();
+
+        selectedNodes.forEach((node) => {
+            this.removeFromSelection(node);
+        });
+    }
+
+    private selectInitialNodes(nodeIds: NodeId[]): boolean {
+        let selectCount = 0;
+
+        for (const nodeId of nodeIds) {
+            const node = this.getNodeById(nodeId);
+
+            if (node) {
+                selectCount += 1;
+
+                this.addToSelection(node);
+            }
+        }
+
+        return selectCount !== 0;
+    }
+}

package/src/scrollHandler/containerScrollParent.ts

@@ -0,0 +1,71 @@
+import type {
+    HorizontalScrollDirection,
+    VerticalScrollDirection,
+} from "./scrollParent";
+
+import { getElementPosition, getOffsetTop } from "../positionUtils";
+import { ScrollParent } from "./scrollParent";
+
+
+export default class ContainerScrollParent extends ScrollParent {
+    private scrollParentBottom?: number;
+    private scrollParentTop?: number;
+
+    public stopScrolling() {
+        super.stopScrolling();
+
+        this.horizontalScrollDirection = undefined;
+        this.verticalScrollDirection = undefined;
+    }
+
+    protected getNewHorizontalScrollDirection(
+        pageX: number,
+    ): HorizontalScrollDirection | undefined {
+        const scrollParentOffset = getElementPosition(this.container);
+        const containerWidth = this.container.getBoundingClientRect().width;
+
+        const rightEdge = scrollParentOffset.left + containerWidth;
+        const leftEdge = scrollParentOffset.left;
+        const isNearRightEdge = pageX > rightEdge - 20;
+        const isNearLeftEdge = pageX < leftEdge + 20;
+
+        if (isNearRightEdge) {
+            return "right";
+        } else if (isNearLeftEdge) {
+            return "left";
+        }
+
+        return undefined;
+    }
+
+    protected getNewVerticalScrollDirection(
+        pageY: number,
+    ): undefined | VerticalScrollDirection {
+        if (pageY < this.getScrollParentTop()) {
+            return "top";
+        }
+
+        if (pageY > this.getScrollParentBottom()) {
+            return "bottom";
+        }
+
+        return undefined;
+    }
+
+    private getScrollParentBottom() {
+        if (this.scrollParentBottom == null) {
+            const containerHeight =
+                this.container.getBoundingClientRect().height;
+            this.scrollParentBottom =
+                this.getScrollParentTop() + containerHeight;
+        }
+
+        return this.scrollParentBottom;
+    }
+
+    private getScrollParentTop() {
+        this.scrollParentTop ??= getOffsetTop(this.container);
+
+        return this.scrollParentTop;
+    }
+}

package/src/scrollHandler/createScrollParent.ts

@@ -0,0 +1,51 @@
+import type { ScrollParent } from "./scrollParent";
+
+import ContainerScrollParent from "./containerScrollParent";
+import DocumentScrollParent from "./documentScrollParent";
+
+const isOverflow = (overflowValue: string) =>
+    overflowValue === "auto" || overflowValue === "scroll";
+
+const hasOverFlow = (element: HTMLElement): boolean => {
+    const style = getComputedStyle(element);
+
+    return isOverflow(style.overflowX) || isOverflow(style.overflowY);
+};
+
+const getParentWithOverflow = (
+    treeElement: HTMLElement,
+): HTMLElement | null => {
+    if (hasOverFlow(treeElement)) {
+        return treeElement;
+    }
+
+    let parent = treeElement.parentElement;
+
+    while (parent) {
+        if (hasOverFlow(parent)) {
+            return parent;
+        }
+
+        parent = parent.parentElement;
+    }
+
+    return null;
+};
+
+const createScrollParent = (
+    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 });
+    }
+};
+
+export default createScrollParent;

package/src/scrollHandler/documentScrollParent.ts

@@ -0,0 +1,104 @@
+import type {
+    HorizontalScrollDirection,
+    VerticalScrollDirection,
+} from "./scrollParent";
+
+import { getOffsetTop } from "../positionUtils";
+import { ScrollParent } from "./scrollParent";
+
+interface Params {
+    refreshHitAreas: () => void;
+    treeElement: HTMLElement;
+}
+
+export default class DocumentScrollParent extends ScrollParent {
+    private documentScrollHeight?: number;
+    private documentScrollWidth?: number;
+    private treeElement: HTMLElement;
+
+    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);
+    }
+
+    public stopScrolling() {
+        super.stopScrolling();
+
+        this.documentScrollHeight = undefined;
+        this.documentScrollWidth = undefined;
+    }
+
+    protected getNewHorizontalScrollDirection(
+        pageX: number,
+    ): HorizontalScrollDirection | undefined {
+        const scrollLeft = this.container.scrollLeft;
+        const windowWidth = window.innerWidth;
+
+        const isNearRightEdge = pageX > windowWidth - 20;
+        const isNearLeftEdge = pageX - scrollLeft < 20;
+
+        if (isNearRightEdge && this.canScrollRight()) {
+            return "right";
+        }
+
+        if (isNearLeftEdge) {
+            return "left";
+        }
+
+        return undefined;
+    }
+
+    protected getNewVerticalScrollDirection(
+        pageY: number,
+    ): undefined | VerticalScrollDirection {
+        const scrollTop = this.container.scrollTop;
+        const distanceTop = pageY - scrollTop;
+
+        if (distanceTop < 20) {
+            return "top";
+        }
+
+        const windowHeight = window.innerHeight;
+
+        if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
+            return "bottom";
+        }
+
+        return undefined;
+    }
+
+    private canScrollDown() {
+        return (
+            this.container.scrollTop + this.container.clientHeight <
+            this.getDocumentScrollHeight()
+        );
+    }
+
+    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;
+
+        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;
+
+        return this.documentScrollWidth;
+    }
+}

package/src/scrollHandler/scrollParent.ts

@@ -0,0 +1,117 @@
+export type HorizontalScrollDirection = "left" | "right";
+export type VerticalScrollDirection = "bottom" | "top";
+
+interface ConstructorParams {
+    container: HTMLElement;
+    refreshHitAreas: () => void;
+}
+
+export abstract class ScrollParent {
+    protected container: HTMLElement;
+    protected horizontalScrollDirection?: HorizontalScrollDirection;
+    protected horizontalScrollTimeout?: number;
+
+    protected refreshHitAreas: () => void;
+    protected verticalScrollDirection?: VerticalScrollDirection;
+    protected verticalScrollTimeout?: number;
+
+    constructor({ container, refreshHitAreas }: ConstructorParams) {
+        this.container = container;
+        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 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;
+        }
+
+        const distance = this.horizontalScrollDirection === "left" ? -20 : 20;
+        this.container.scrollBy({
+            behavior: "instant",
+            left: distance,
+            top: 0,
+        });
+
+        this.refreshHitAreas();
+
+        setTimeout(this.scrollHorizontally.bind(this), 40);
+    }
+
+    protected scrollVertically() {
+        if (!this.verticalScrollDirection) {
+            return;
+        }
+
+        const distance = this.verticalScrollDirection === "top" ? -20 : 20;
+        this.container.scrollBy({
+            behavior: "instant",
+            left: 0,
+            top: distance,
+        });
+
+        this.refreshHitAreas();
+
+        setTimeout(this.scrollVertically.bind(this), 40);
+    }
+}