ngx-interactive-org-chart

import { AfterViewInit, ElementRef, OnDestroy, TemplateRef } from '@angular/core'; import { NgxInteractiveOrgChartLayout, OrgChartNode } from '../../models'; import { PanZoom } from 'panzoom'; import * as i0 from "@angular/core"; export declare class NgxInteractiveOrgChart<T> implements AfterViewInit, OnDestroy { #private; protected readonly customNodeTemplate?: TemplateRef<unknown>; protected readonly panZoomContainer: import("@angular/core").Signal<ElementRef<HTMLElement>>; private readonly orgChartContainer; /** * The data for the org chart. */ readonly data: import("@angular/core").InputSignal<OrgChartNode<T>>; /** * The initial zoom level for the chart. */ readonly initialZoom: import("@angular/core").InputSignal<number | undefined>; /** * The minimum zoom level for the chart */ readonly minZoom: import("@angular/core").InputSignal<number>; /** * The maximum zoom level for the chart. */ readonly maxZoom: import("@angular/core").InputSignal<number>; /** * The speed at which the chart zooms in/out on wheel or pinch. */ readonly zoomSpeed: import("@angular/core").InputSignal<number>; /** * The speed at which the chart zooms in/out on double-click. */ readonly zoomDoubleClickSpeed: import("@angular/core").InputSignal<number>; /** * Whether the nodes can be collapsed/expanded. */ readonly collapsible: import("@angular/core").InputSignal<boolean>; /** * The CSS class to apply to each node element. */ readonly nodeClass: import("@angular/core").InputSignal<string | undefined>; /** * If set to `true`, all the nodes will be initially collapsed. */ readonly initialCollapsed: import("@angular/core").InputSignal<boolean | undefined>; /** * Whether to enable RTL (right-to-left) layout. */ readonly isRtl: import("@angular/core").InputSignal<boolean | undefined>; /** * The layout direction of the org chart tree. * - 'vertical': Traditional top-to-bottom tree layout * - 'horizontal': Left-to-right tree layout */ readonly layout: import("@angular/core").InputSignal<NgxInteractiveOrgChartLayout>; /** * Whether to focus on the node when it is collapsed and focus on its children when it is expanded. */ readonly focusOnCollapseOrExpand: import("@angular/core").InputSignal<boolean>; /** * Whether to display the count of children for each node on expand/collapse button. */ readonly displayChildrenCount: import("@angular/core").InputSignal<boolean>; /** * The ratio of the node's width to the viewport's width when highlighting. */ readonly highlightZoomNodeWidthRatio: import("@angular/core").InputSignal<number>; /** * The ratio of the node's height to the viewport's height when highlighting. */ readonly highlightZoomNodeHeightRatio: import("@angular/core").InputSignal<number>; /** * The minimum zoom level for the chart when highlighting a node. */ readonly highlightZoomMinimum: import("@angular/core").InputSignal<number>; /** * The theme options for the org chart. * This allows customization of the chart's appearance, including node styles, connector styles, and * other visual elements. */ readonly themeOptions: import("@angular/core").InputSignal<{ readonly node?: { readonly background?: string | undefined; readonly color?: string | undefined; readonly shadow?: string | undefined; readonly outlineColor?: string | undefined; readonly outlineWidth?: string | undefined; readonly activeOutlineColor?: string | undefined; readonly highlightShadowColor?: string | undefined; readonly padding?: string | undefined; readonly borderRadius?: string | undefined; readonly activeColor?: string | undefined; readonly containerSpacing?: string | undefined; readonly maxWidth?: string | undefined; readonly minWidth?: string | undefined; readonly maxHeight?: string | undefined; readonly minHeight?: string | undefined; } | undefined; readonly connector?: { readonly color?: string | undefined; readonly activeColor?: string | undefined; readonly borderRadius?: string | undefined; readonly width?: string | undefined; } | undefined; readonly collapseButton?: { readonly size?: string | undefined; readonly borderColor?: string | undefined; readonly borderRadius?: string | undefined; readonly color?: string | undefined; readonly background?: string | undefined; readonly hoverColor?: string | undefined; readonly hoverBackground?: string | undefined; readonly hoverShadow?: string | undefined; readonly hoverTransformScale?: string | undefined; readonly focusOutline?: string | undefined; readonly countFontSize?: string | undefined; } | undefined; readonly container?: { readonly background?: string | undefined; readonly border?: string | undefined; } | undefined; } | undefined>; private readonly defaultThemeOptions; protected panZoomInstance: PanZoom | null; protected readonly finalThemeOptions: import("@angular/core").Signal<{ readonly node?: { readonly background?: string | undefined; readonly color?: string | undefined; readonly shadow?: string | undefined; readonly outlineColor?: string | undefined; readonly outlineWidth?: string | undefined; readonly activeOutlineColor?: string | undefined; readonly highlightShadowColor?: string | undefined; readonly padding?: string | undefined; readonly borderRadius?: string | undefined; readonly activeColor?: string | undefined; readonly containerSpacing?: string | undefined; readonly maxWidth?: string | undefined; readonly minWidth?: string | undefined; readonly maxHeight?: string | undefined; readonly minHeight?: string | undefined; } | undefined; readonly connector?: { readonly color?: string | undefined; readonly activeColor?: string | undefined; readonly borderRadius?: string | undefined; readonly width?: string | undefined; } | undefined; readonly collapseButton?: { readonly size?: string | undefined; readonly borderColor?: string | undefined; readonly borderRadius?: string | undefined; readonly color?: string | undefined; readonly background?: string | undefined; readonly hoverColor?: string | undefined; readonly hoverBackground?: string | undefined; readonly hoverShadow?: string | undefined; readonly hoverTransformScale?: string | undefined; readonly focusOutline?: string | undefined; readonly countFontSize?: string | undefined; } | undefined; readonly container?: { readonly background?: string | undefined; readonly border?: string | undefined; } | undefined; }>; protected readonly nodes: import("@angular/core").WritableSignal<OrgChartNode<T> | null>; protected readonly scale: import("@angular/core").WritableSignal<number>; /** * A computed property that returns the current scale of the org chart. * @returns {number} The current scale of the org chart. */ readonly getScale: import("@angular/core").Signal<number>; /** * A computed property that flattens the org chart nodes into a single array. * It recursively traverses the nodes and their children, returning a flat array of OrgChartNode<T>. * This is useful for operations that require a single list of all nodes, such as searching or displaying all nodes in a list. * @returns {OrgChartNode<T>[]} An array of all nodes in the org chart, flattened from the hierarchical structure. */ readonly flattenedNodes: import("@angular/core").Signal<OrgChartNode<T>[]>; private readonly setNodes; ngAfterViewInit(): void; /** * Initializes the pan-zoom functionality for the org chart. * This method creates a new panZoom instance and sets it up with the container element. * It also ensures that any existing panZoom instance is disposed of before creating a new one. */ initiatePanZoom(): void; /** * Zooms in of the org chart. * @param {Object} options - Options for zooming. * @param {number} [options.by=10] - The percentage to zoom in or out by. * @param {boolean} [options.relative=true] - Whether to zoom relative to the current zoom level. * If true, zooms in by a percentage of the current zoom level. * If false, zooms to an absolute scale. */ zoomIn({ by, relative }?: { by?: number; relative?: boolean; }): void; /** * Zooms out of the org chart. * @param {Object} options - Options for zooming. * @param {number} [options.by=10] - The percentage to zoom in or out by. * @param {boolean} [options.relative=true] - Whether to zoom relative to the current zoom level. * If true, zooms out by a percentage of the current zoom level. * If false, zooms to an absolute scale. */ zoomOut({ by, relative }?: { by?: number; relative?: boolean; }): void; /** * Highlights a specific node in the org chart and pans to it. * @param {string} nodeId - The ID of the node to highlight. */ highlightNode(nodeId: string | number): void; /** * Pans the view of the org chart. * @param x The horizontal offset to pan to. * @param y The vertical offset to pan to. * @param smooth Whether to animate the panning. * @returns void */ pan(x: number, y: number, smooth: boolean): void; /** * Resets the pan position of the org chart to center it horizontally and vertically. * This method calculates the center position based on the container's dimensions * and the hosting element's dimensions, then moves the panZoom instance to that position. */ resetPan(): void; /** * Resets the zoom level of the org chart to fit the content within the container. * This method calculates the optimal scale to fit the content and applies it. * @param {number} [padding=20] - Optional padding around the content when calculating the fit scale. */ resetZoom(padding?: number): void; /** * Resets both the pan position and zoom level of the org chart. * This method first resets the pan position, then resets the zoom level after a short delay. * @param {number} [padding=20] - Optional padding around the content when calculating the fit scale. */ resetPanAndZoom(padding?: number): void; /** * Toggles the collapse state of all nodes in the org chart. * If `collapse` is provided, it will collapse or expand all nodes accordingly. * If not provided, it will toggle the current state of the root node. */ toggleCollapseAll(collapse?: boolean): void; /** * Toggles the collapse state of a specific node in the org chart. * If `collapse` is provided, it will collapse or expand the node accordingly. * If not provided, it will toggle the current state of the node. * @param {Object} options - Options for toggling collapse. * @param {OrgChartNode<T>} options.node - The node to toggle. * @param {boolean} [options.collapse] - Whether to collapse or expand the node. * @param {boolean} [options.highlightNode=false] - Whether to highlight the node after toggling. * @param {boolean} [options.playAnimation=false] - Whether to play animation when highlighting. */ onToggleCollapse({ node, collapse, highlightNode, playAnimation, }: { node: OrgChartNode<T>; collapse?: boolean; highlightNode?: boolean; playAnimation?: boolean; }): void; protected zoom({ type, by, relative, }: { type: 'in' | 'out'; by?: number; relative?: boolean; }): void; protected panZoomToNode({ nodeElement, skipZoom, playAnimation, }: { nodeElement: HTMLElement; skipZoom?: boolean; playAnimation?: boolean; }): void; protected getNodeId(nodeId: string | number): string; protected getNodeChildrenId(nodeId: string | number): string; private calculateScale; private getFitScale; /** * Calculates the optimal zoom level for highlighting a specific node. * The zoom is calculated to ensure the node is appropriately sized relative to the container, * while respecting the minimum and maximum zoom constraints. * @param {HTMLElement} nodeElement - The node element to calculate zoom for. * @returns {number} The optimal zoom level for the node. */ private calculateOptimalZoom; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<NgxInteractiveOrgChart<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<NgxInteractiveOrgChart<any>, "ngx-interactive-org-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "initialZoom": { "alias": "initialZoom"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomSpeed": { "alias": "zoomSpeed"; "required": false; "isSignal": true; }; "zoomDoubleClickSpeed": { "alias": "zoomDoubleClickSpeed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "nodeClass": { "alias": "nodeClass"; "required": false; "isSignal": true; }; "initialCollapsed": { "alias": "initialCollapsed"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "focusOnCollapseOrExpand": { "alias": "focusOnCollapseOrExpand"; "required": false; "isSignal": true; }; "displayChildrenCount": { "alias": "displayChildrenCount"; "required": false; "isSignal": true; }; "highlightZoomNodeWidthRatio": { "alias": "highlightZoomNodeWidthRatio"; "required": false; "isSignal": true; }; "highlightZoomNodeHeightRatio": { "alias": "highlightZoomNodeHeightRatio"; "required": false; "isSignal": true; }; "highlightZoomMinimum": { "alias": "highlightZoomMinimum"; "required": false; "isSignal": true; }; "themeOptions": { "alias": "themeOptions"; "required": false; "isSignal": true; }; }, {}, ["customNodeTemplate"], never, true, never>; }