import * as THREE from "three"; import { TreeModel, States } from "../rendering/tree-model.js"; import type { TreeNode, TreeData, StateValue, IconIndex } from "../rendering/tree-model.js"; /** * Callback types for TreeView. */ type ObjectHandler = (path: string, state: StateValue, iconNumber: number, propagate: boolean, notify: boolean) => void; type PickHandler = (parentPath: string, name: string, meta: boolean, shift: boolean, alt: boolean, extra: THREE.Vector3 | null, nodeType: "leaf" | "node" | string | null, fromTree: boolean) => void; type UpdateHandler = (flag: boolean) => void; type NotificationHandler = () => void; type ColorGetter = (path: string) => string | null; /** * A tree viewer component with lazy loading of large trees. * Uses TreeModel for data management and handles DOM rendering/events. */ declare class TreeView { tree: TreeData | null; scrollContainer: HTMLElement; objectHandler: ObjectHandler; pickHandler: PickHandler; updateHandler: UpdateHandler; notificationHandler: NotificationHandler; colorGetter: ColorGetter; theme: string; linkIcons: boolean; debug: boolean; model: TreeModel | null; container: HTMLUListElement | null; lastLabel: HTMLElement | null; lastScrollTop: number; /** * Constructs a TreeView object. * @param tree - The tree structure data. * @param scrollContainer - The scrollable container element. * @param objectHandler - Callback for object visibility changes. * @param pickHandler - Callback for node selection/picking. * @param updateHandler - Callback for tree updates. * @param notificationHandler - Callback for notifications. * @param colorGetter - Function to get color for a path. * @param theme - The UI theme ('light' or 'dark'). * @param linkIcons - Whether icon 0 and 1 are linked. * @param debug - Enable debug logging. */ constructor(tree: TreeData, scrollContainer: HTMLElement, objectHandler: ObjectHandler, pickHandler: PickHandler, updateHandler: UpdateHandler, notificationHandler: NotificationHandler, colorGetter: ColorGetter, theme: string, linkIcons: boolean, debug?: boolean); /** * Initialize the tree view - creates the model and DOM container. * @returns The container element. */ create(): HTMLUListElement; /** * Handle state changes from the model. * @param node - The node whose state changed. * @param iconNumber - Which icon changed (0 or 1). */ private _handleStateChange; /** @returns The root node of the tree. */ get root(): TreeNode | null; /** @returns The maximum depth level of the tree. */ get maxLevel(): number; /** * Retrieves the visible elements within the container. * @returns An array of visible elements. */ getVisibleElements(): Element[]; /** * Debug logging for visible elements. * @param elements - The visible elements. */ private _logVisibleElements; /************************************************************************************ * Handlers ************************************************************************************/ /** * Handles the scroll event. */ handleScroll: () => void; /** * Handles the click event on a navigation node. * @param node - The node associated with the navigation marker. * @returns The event handler function. */ handleNavigationClick: (node: TreeNode) => ((e: Event) => void); /** * Handles the click event on an icon. * @param node - The node associated with the icon. * @param s - The icon index (0 for shapes, 1 for edges). * @returns The event handler function. */ handleIconClick: (node: TreeNode, s: IconIndex) => ((e: Event) => void); /** * Handles the click event on a label. * @param node - The node that was clicked. * @param e - The event. */ handleLabelClick(node: TreeNode, e: Event): void; /** * Updates the tree view with the given prefix. * @param prefix - The prefix to filter the visible elements. */ update: (prefix?: string | null) => void; /************************************************************************************ * Rendering routines ************************************************************************************/ /** * Renders the tree view by clearing the container, rendering the placeholder, * and updating the tree. */ render(): void; /** * Renders a placeholder node in the tree view. * @param node - The node object to render. * @param container - The container element to append the rendered node to. * @param openPath - The path of the node to be opened, or null if no node should be opened. */ renderPlaceholder(node: TreeNode, container: HTMLElement, openPath?: string | null): void; /** * Renders a node in the tree view to replace the placeholder. * @param node - The node object to render. * @param parentElement - The parent element to append the rendered node to. * @returns The container element for the node's children, if any. */ renderNode(node: TreeNode, parentElement: HTMLElement): HTMLDivElement | null; /************************************************************************************ * DOM functions ************************************************************************************/ /** * Retrieves the DOM node with the specified path. * @param path - The path of the DOM node to retrieve. * @returns The DOM node with the specified path, or null if not found. */ getDomNode: (path: string) => HTMLElement | null; /** * Shows or hides the child container of a node based on the expanded parameter. * @param node - The node object. */ showChildContainer(node: TreeNode): void; /** * Updates the icon in the DOM for a given node. * @param node - The node to update the icon for. * @param iconNumber - The icon number to update. */ updateIconInDOM(node: TreeNode, iconNumber: IconIndex): void; /** * Toggles the color of the label for a given node. * @param node - The node for which to toggle the label color. * @param path - If node is null, the path for which to toggle the label color. */ toggleLabelColor(node: TreeNode | null, path?: string | null): void; /** * Traverse the tree and call a callback for each node. * @param node - Starting node. * @param callback - Function to call for each node. */ traverse(node: TreeNode, callback: (node: TreeNode) => void): void; /** * Check if a node is a leaf (has no children). * @param node - The node to check. * @returns True if the node is a leaf. */ isLeaf(node: TreeNode): boolean; /** * Get the full path of a node. * @param node - The node. * @returns The full path. */ getNodePath(node: TreeNode | null): string; /** * Find a node by its path. * @param path - The path to find. * @returns The found node or null. */ findNodeByPath(path: string): TreeNode | null; /** * Get the parent node of a given node. * @param node - The child node. * @returns The parent node or null. */ getParent(node: TreeNode): TreeNode | null; /** * Toggle the state of a node's icon. * @param node - The node to toggle. * @param iconNumber - Which icon (0 or 1). * @param force - Force state (true=selected, false=unselected, null=toggle). */ toggleIcon(node: TreeNode, iconNumber: IconIndex, force?: boolean | null): void; /** * Hide all nodes in the tree. */ hideAll(): void; /** * Show all nodes in the tree. */ showAll(): void; /** * Show a specific node by path. * @param path - The node path. */ show(path: string): void; /** * Hide a specific node by path. * @param path - The node path. */ hide(path: string): void; /** * Get the state of a node by path. * @param path - The node path. * @returns The state array or null. */ getState(path: string): [StateValue, StateValue] | null; /** * Get all leaf node states. * @returns Map of path -> state array. */ getStates(): Record; /** * Set the state of a node by path. * @param path - The node path. * @param state - The new state. */ setState(path: string, state: [StateValue, StateValue]): void; /** * Set multiple node states at once. * @param states - Map of path -> state array. */ setStates(states: Record): void; /************************************************************************************ * Tree handling high level API ************************************************************************************/ /** * Scrolls the parent container to center the specified element within the visible area. * @param element - The DOM element to center within the scroll container. */ scrollCentered(element: HTMLElement | null): void; /** * Ensures a node and its children are rendered in the DOM. * @param node - The node to render. */ private _ensureNodeRendered; /** * Opens the specified path in the tree view. * @param path - The path to open in the tree view. */ openPath(path: string): void; /** * Closes the specified path in the tree view. * @param path - The path to be closed. */ closePath(path: string): void; /** * Open all nodes to a specified level. * @param level - The level to open (-1 for smart expand). */ openLevel(level: number): void; /** * Collapse all nodes in the tree view. */ collapseAll(): void; /** * Expand all nodes in the tree view. */ expandAll(): void; /** * Dispose of resources and clean up. */ dispose(): void; } export { TreeView, States };