tree-element 0.1.1 → 0.2.0

package/src/nodeUtils.ts

@@ -1,12 +1,12 @@
 import type { NodeData, NodeRecord } from "./node";
 
 interface NodeRecordWithChildren extends NodeRecord {
-    children: NodeData[];
+  children: NodeData[];
 }
 
 export const isNodeRecordWithChildren = (
-    data: NodeData,
+  data: NodeData,
 ): data is NodeRecordWithChildren =>
-    typeof data === "object" &&
-    "children" in data &&
-    data.children instanceof Array;
+  typeof data === "object" &&
+  "children" in data &&
+  data.children instanceof Array;

package/src/options.ts

@@ -17,9 +17,13 @@ export type OnCanMoveTo = (
   positionName: string,
 ) => boolean;
 
-export type OnCanSelectNode = (node: Node) => boolean
+export type OnCanSelectNode = (node: Node) => boolean;
 
-export type OnCreateLi = (node: Node, el: HTMLElement, isSelected: boolean) => void;
+export type OnCreateLi = (
+  node: Node,
+  el: HTMLElement,
+  isSelected: boolean,
+) => void;
 
 export type OnGetStateFromStorage = (() => string) | undefined;
 

package/src/requestUrl.ts

@@ -7,7 +7,7 @@ const isAbsoluteUrl = (inputUrl: string) => {
   } catch {
     return false;
   }
-}
+};
 
 const LOCALHOST = "http://localhost";
 
@@ -29,7 +29,7 @@ class RequestUrl {
     this.url.searchParams.set(key, value);
   }
 
-  toString() {
+  value() {
     if (this.isAbsolute) {
       return this.url.href;
     } else {
@@ -38,4 +38,4 @@ class RequestUrl {
   }
 }
 
-export default RequestUrl;
+export default RequestUrl;

package/src/saveStateHandler.ts

@@ -1,11 +1,11 @@
 import type {
-    AddToSelection,
-    GetNodeById,
-    GetSelectedNodes,
-    GetTree,
-    OpenNode,
-    RefreshElements,
-    RemoveFromSelection,
+  AddToSelection,
+  GetNodeById,
+  GetSelectedNodes,
+  GetTree,
+  OpenNode,
+  RefreshElements,
+  RemoveFromSelection,
 } from "./methodTypes";
 import type { Node, NodeId } from "./node";
 import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./options";
@@ -13,267 +13,265 @@ import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./options";
 import { isInt } from "./util";
 
 export interface SavedState {
-    open_nodes?: NodeId[];
-    selected_node?: NodeId[];
+  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;
+  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;
+  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;
     }
 
-    public getNodeIdToBeSelected(): NodeId | null {
-        if (!this.saveStateOption) {
-            return null;
-        }
-
-        const state = this.getStateFromStorage();
+    const state = this.getStateFromStorage();
 
-        if (state?.selected_node) {
-            return state.selected_node[0] ?? null;
-        } else {
-            return null;
-        }
+    if (state?.selected_node) {
+      return state.selected_node[0] ?? null;
+    } else {
+      return null;
     }
+  }
+
+  public getState(): SavedState {
+    const getOpenNodeIds = (): NodeId[] => {
+      const openNodes: NodeId[] = [];
 
-    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;
+      });
 
-            this.getTree()?.iterate((node: Node) => {
-                if (node.is_open && node.id && node.hasChildren()) {
-                    openNodes.push(node.id);
-                }
-                return true;
-            });
+      return openNodes;
+    };
 
-            return openNodes;
-        };
+    const getSelectedNodeIds = (): NodeId[] => {
+      const selectedNodeIds: NodeId[] = [];
 
-        const getSelectedNodeIds = (): NodeId[] => {
-            const selectedNodeIds: NodeId[] = [];
+      this.getSelectedNodes().forEach((node) => {
+        if (node.id != null) {
+          selectedNodeIds.push(node.id);
+        }
+      });
 
-            this.getSelectedNodes().forEach((node) => {
-                if (node.id != null) {
-                    selectedNodeIds.push(node.id);
-                }
-            });
+      return selectedNodeIds;
+    };
 
-            return selectedNodeIds;
-        };
+    return {
+      open_nodes: getOpenNodeIds(),
+      selected_node: getSelectedNodeIds(),
+    };
+  }
 
-        return {
-            open_nodes: getOpenNodeIds(),
-            selected_node: getSelectedNodeIds(),
-        };
+  public getStateFromStorage(): null | SavedState {
+    if (!this.saveStateOption) {
+      return null;
     }
 
-    public getStateFromStorage(): null | SavedState {
-        if (!this.saveStateOption) {
-            return null;
-        }
+    const jsonData = this.loadFromStorage();
 
-        const jsonData = this.loadFromStorage();
-
-        if (jsonData) {
-            return this.parseState(jsonData);
-        } else {
-            return null;
-        }
+    if (jsonData) {
+      return this.parseState(jsonData);
+    } else {
+      return null;
     }
+  }
 
-    public saveState(): void {
-        if (!this.saveStateOption) {
-            return;
-        }
+  public saveState(): void {
+    if (!this.saveStateOption) {
+      return;
+    }
 
-        const state = JSON.stringify(this.getState());
+    const state = JSON.stringify(this.getState());
 
-        if (this.onSetStateFromStorage) {
-            this.onSetStateFromStorage(state);
-        } else {
-            localStorage.setItem(this.getKeyName(), state);
-        }
+    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;
+  public setInitialState(state: SavedState): boolean {
+    let mustLoadOnDemand = false;
 
-        if (state.open_nodes) {
-            mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
-        }
-
-        this.resetSelection();
+    if (state.open_nodes) {
+      mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
+    }
 
-        if (state.selected_node) {
-            this.selectInitialNodes(state.selected_node);
-        }
+    this.resetSelection();
 
-        return mustLoadOnDemand;
+    if (state.selected_node) {
+      this.selectInitialNodes(state.selected_node);
     }
 
-    public async setInitialStateOnDemand(
-        state: SavedState,
-    ): Promise<void> {
-        let nodeIds = state.open_nodes;
+    return mustLoadOnDemand;
+  }
 
-        const openNodes = async () => {
-            if (!nodeIds) {
-                return;
-            }
+  public async setInitialStateOnDemand(state: SavedState): Promise<void> {
+    let nodeIds = state.open_nodes;
 
-            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);
-                        }
-                    }
-                }
-            }
+    const openNodes = async () => {
+      if (!nodeIds) {
+        return;
+      }
 
-            nodeIds = newNodesIds;
+      const newNodesIds = [];
 
-            if (state.selected_node) {
-                if (this.selectInitialNodes(state.selected_node)) {
-                    this.refreshElements(null);
-                }
-            }
-        };
+      for (const nodeId of nodeIds) {
+        const node = this.getNodeById(nodeId);
 
-        const loadAndOpenNode = async (node: Node) => {
-            await this.openNode(node, false);
-            await openNodes();
-        };
+        if (!node) {
+          newNodesIds.push(nodeId);
+        } else {
+          if (!node.is_loading) {
+            if (node.load_on_demand) {
+              await loadAndOpenNode(node);
+            } else {
+              await this.openNode(node, false);
+            }
+          }
+        }
+      }
 
-        await openNodes();
-    }
+      nodeIds = newNodesIds;
 
-    private getKeyName(): string {
-        if (typeof this.saveStateOption === "string") {
-            return this.saveStateOption;
-        } else {
-            return "tree";
+      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 loadFromStorage(): null | string {
+    if (this.onGetStateFromStorage) {
+      return this.onGetStateFromStorage();
+    } else {
+      return localStorage.getItem(this.getKeyName());
     }
+  }
 
-    private openInitialNodes(nodeIds: NodeId[]): boolean {
-        let mustLoadOnDemand = false;
+  private openInitialNodes(nodeIds: NodeId[]): boolean {
+    let mustLoadOnDemand = false;
 
-        for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
+    for (const nodeId of nodeIds) {
+      const node = this.getNodeById(nodeId);
 
-            if (node) {
-                if (!node.load_on_demand) {
-                    node.is_open = true;
-                } else {
-                    mustLoadOnDemand = true;
-                }
-            }
+      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>;
+    return mustLoadOnDemand;
+  }
 
-        // 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];
-        }
+  private parseState(jsonData: string): SavedState {
+    const state = JSON.parse(jsonData) as Record<string, unknown>;
 
-        return state;
+    // 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];
     }
 
-    private resetSelection(): void {
-        const selectedNodes = this.getSelectedNodes();
+    return state;
+  }
 
-        selectedNodes.forEach((node) => {
-            this.removeFromSelection(node);
-        });
-    }
+  private resetSelection(): void {
+    const selectedNodes = this.getSelectedNodes();
 
-    private selectInitialNodes(nodeIds: NodeId[]): boolean {
-        let selectCount = 0;
+    selectedNodes.forEach((node) => {
+      this.removeFromSelection(node);
+    });
+  }
 
-        for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
+  private selectInitialNodes(nodeIds: NodeId[]): boolean {
+    let selectCount = 0;
 
-            if (node) {
-                selectCount += 1;
+    for (const nodeId of nodeIds) {
+      const node = this.getNodeById(nodeId);
 
-                this.addToSelection(node);
-            }
-        }
+      if (node) {
+        selectCount += 1;
 
-        return selectCount !== 0;
+        this.addToSelection(node);
+      }
     }
+
+    return selectCount !== 0;
+  }
 }

package/src/scrollHandler/containerScrollParent.ts

@@ -1,71 +1,68 @@
 import type {
-    HorizontalScrollDirection,
-    VerticalScrollDirection,
+  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;
+  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";
     }
 
-    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;
+  }
 
-        return undefined;
+  protected getNewVerticalScrollDirection(
+    pageY: number,
+  ): undefined | VerticalScrollDirection {
+    if (pageY < this.getScrollParentTop()) {
+      return "top";
     }
 
-    protected getNewVerticalScrollDirection(
-        pageY: number,
-    ): undefined | VerticalScrollDirection {
-        if (pageY < this.getScrollParentTop()) {
-            return "top";
-        }
-
-        if (pageY > this.getScrollParentBottom()) {
-            return "bottom";
-        }
-
-        return undefined;
+    if (pageY > this.getScrollParentBottom()) {
+      return "bottom";
     }
 
-    private getScrollParentBottom() {
-        if (this.scrollParentBottom == null) {
-            const containerHeight =
-                this.container.getBoundingClientRect().height;
-            this.scrollParentBottom =
-                this.getScrollParentTop() + containerHeight;
-        }
+    return undefined;
+  }
 
-        return this.scrollParentBottom;
+  private getScrollParentBottom() {
+    if (this.scrollParentBottom == null) {
+      const containerHeight = this.container.getBoundingClientRect().height;
+      this.scrollParentBottom = this.getScrollParentTop() + containerHeight;
     }
 
-    private getScrollParentTop() {
-        this.scrollParentTop ??= getOffsetTop(this.container);
+    return this.scrollParentBottom;
+  }
 
-        return this.scrollParentTop;
-    }
+  private getScrollParentTop() {
+    this.scrollParentTop ??= getOffsetTop(this.container);
+
+    return this.scrollParentTop;
+  }
 }