@ryandymock/ancestor-tree/dist/index.d.ts

Interactive ancestor tree React component built with ReactFlow, featuring expandable generations and customizable UI controls

import * as react_jsx_runtime from 'react/jsx-runtime';

interface Person {
    id: string;
    name: string;
    birth?: string;
    death?: string;
    imageUrl?: string;
    spouseId?: string;
    /** [fatherId, motherId]. Undefined items allowed when a parent is unknown */
    parentIds?: [string?, string?];
}
type PeopleIndex = Record<string, Person>;

interface AncestorTreeCallbacks {
    /** Called when a person node is clicked */
    onPersonClick?: (person: Person) => void;
    /** Called when a couple node is clicked */
    onCoupleClick?: (partner1: Person, partner2: Person) => void;
    /** Called when the tree is panned */
    onTreePan?: (x: number, y: number) => void;
    /** Called when the tree is zoomed */
    onTreeZoom?: (zoom: number) => void;
    /** Called when the tree viewport changes (pan or zoom) */
    onViewportChange?: (x: number, y: number, zoom: number) => void;
    /** Called when a couple is expanded/collapsed */
    onCoupleExpansion?: (partner1: Person | undefined, partner2: Person | undefined, isExpanded: boolean) => void;
}
interface AncestorTreeUIControls {
    /** Show/hide the zoom and fit controls */
    showControls?: boolean;
    /** Show/hide the mini map */
    showMiniMap?: boolean;
    /** Show/hide the background grid */
    showBackground?: boolean;
    /** Enable/disable panning */
    enablePan?: boolean;
    /** Enable/disable zooming */
    enableZoom?: boolean;
    /** Enable/disable fit view on mount */
    enableFitView?: boolean;
    /** Custom background color */
    backgroundColor?: string;
    /** Node height (affects vertical spacing calculation) */
    nodeHeight?: number;
    /** Vertical gaps between nodes for each generation [gen0, gen1, gen2, gen3, gen4...] */
    verticalGaps?: number[];
    /** Default vertical gap when generation not specified in verticalGaps */
    defaultVerticalGap?: number;
    /** Custom formatter for person subtitle text */
    formatPersonSubtitle?: (person: Person) => string;
    /** Width of couple nodes */
    coupleNodeWidth?: number;
    /** Width of person nodes */
    personNodeWidth?: number;
}
interface Props {
    people: PeopleIndex;
    rootId: string;
    /** Callback functions for various tree interactions */
    callbacks?: AncestorTreeCallbacks;
    /** UI control options */
    uiControls?: AncestorTreeUIControls;
}
declare function AncestorTree({ people, rootId, callbacks, uiControls, }: Props): react_jsx_runtime.JSX.Element;

export { AncestorTree, type AncestorTreeCallbacks, type AncestorTreeUIControls };