@balkangraph/familytree.js/familytree.d.ts

Ultimate Family Tree JavaScript library

declare class FamilyTree {
    
    static icon: {
        png: (w: string| number, h: string | number, c: string) => string,
        pdf: (w: string | number| number, h: string | number, c: string) => string,
        svg: (w: string| number, h: string| number, c: string | number) => string,
        csv: (w: string| number, h: string| number, c: string| number) => string,
        excel: (w: string| number, h: string| number, c: string| number) => string,
        edit: (w: string| number, h: string| number, c: string| number) => string,
        details: (w: string| number, h: string| number, c: string| number) => string,
        remove: (w: string| number, h: string| number, c: string| number) => string,
        add: (w: string| number, h: string| number, c: string| number) => string,
        xml: (w: string| number, h: string| number, c: string| number) => string,
        link: (w: string| number, h: string| number, c: string| number) => string,
        happy: (w: string| number, h: string| number, c: string| number) => string,
        sad: (w: string| number, h: string| number, c: string| number) => string,
        share: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
        user: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
        addUser: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
        close: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
        ft: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string
    }

    /**
     * Hides the tree menu
     * @param redraw 
     * @param callback called at the end of the animation
     */
    hideTreeMenu(redraw: boolean, callback?: () => void): void;

    /**
     * Shows tree menu
     * @param id node id
     * @param callback called at the end of the animation
     */
    showTreeMenu(id: string | number, callback?: () => void): void;


    /**
     * Adds child
     * @param data child node data
     * @param callback called at the end of the animation
     * @param fireEvent indicates if the update event will be called or not
     * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...}  
     */
    addChildNode(data: object, callback?: () => void, fireEvent?: boolean): void;


    /**
     * Adds child and partner 
     * @param id id of the existing partner node
     * @param childData child data 
     * @param partnerData partner data
     * @param callback called at the end of the animation
     * @param fireEvent indicates if the update event will be called or not
     * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...}       
     */
    addChildAndPartnerNodes(id: string | number, childData: object, partnerData: object, callback?: () => void, fireEvent?: boolean): void;

    /**
     * 
     * @param id id of the existing partner node
     * @param childIds ids of the child nodes
     * @param partnerData partner data
     * @param callback called at the end of the animation
     * @param fireEvent indicates if the update event will be called or not
     * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 
     */
    addPartnerAndParentNodes(id: string | number, childIds: Array<string | number>, partnerData: object, callback?: () => void, fireEvent?: boolean): void;


    /**
     * Adds partner node
     * 
     * data.pids partner id should be an existing id
     * @param data new added partner data
     * @param callback called at the end of the animation
     * @param fireEvent indicates if the update event will be called or not
     * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...}       
     */
    addPartnerNode(data: object, callback?: () => void, fireEvent?: boolean): void;


    /**
     * Adds parrent
     * @param childId node child id 
     * @param type mother or father 
     * @param data new added parent data
     * @param callback called at the end of the animation
     * @param fireEvent indicates if the update event will be called or not
     * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 
     */
    addParentNode(childId:number | string, type: 'mid' | 'fid', data:object, callback?: () => void, fireEvent?: boolean): void;


    /**
     * Removes node if the node can be removed
     * @param id node id  to be removed
     * @param callback called at the end of the animation
     * @param fireEvent indicates if the update event will be called or not
     * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 
     */
    removeNode(id:number | string, callback?: () => void, fireEvent?: boolean): void;

    /**
     * The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.     * 
     * @category Event Listeners
     * @param type A case-sensitive string representing the event type to listen for.
     * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
     */
     on(type: "init" | "node-tree-menu-show" | "field" | "update" | "renderbuttons" | "label" | "render-link" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "node-layout", listener: (sender: FamilyTree, args?: any, args1?: any, args2?: any) => void | boolean): FamilyTree;

         /**
     * Removes an event listener previously registered. The event listener to be removed is identified using a combination of the event type and the event listener function itself. Returns true if success and false if fail.
     * @param type A string which specifies the type of event for which to remove an event listener
     * @param listener The event listener function of the event handler to remove from the event target
     */
    
    removeListener(type: "init" | "node-tree-menu-show" | "field" | "update" | "renderbuttons" | "label" | "render-link" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "removed" | "ready" | "ripple" | "node-initialized" | "node-layout", listener?: () => void): boolean;

    /**
     * Occurs when the node data has been updated, removed or added.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onUpdateNode((args) => {
     *  //return false; to cancel the operation
     * });
     * ```
     * @category Event Listeners
     * @param listener 
     */
    onUpdateNode(listener: (this: FamilyTree, args: {
        addNodesData: Array<object>,
        updateNodesData: Array<object>,
        removeNodeId: number | string
    }) => void): FamilyTree;

    /**
     * Occurs when node tree menu button is clicked. Use this event to modify the nodes in the tree menu.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onNodeTreeMenuShow((args) => {  
     * });
     * ```
     * @category Event Listeners
     * @param listener 
     */
    onNodeTreeMenuShow(listener: (this: FamilyTree, args: {
        nodes: Array<object>,
        node: object
    }) => void): FamilyTree;
    nodes: { [key in any]: FamilyTree.node };
    isVisible: boolean;
    visibleNodeIds: Array<number | string>;

    /**
     * @param element HTML element or string selector for example '#tree'
     * @param options configuration options
     */
    constructor(element: HTMLElement | string, options?: FamilyTree.options);


    /**
     * Updates the node data
     * @param newData node data
     */
    update(newData: object): FamilyTree;

    /**
     * Removes specified node from nodes collection
     * @param id identification number of the node
     */
    remove(id: string | number): FamilyTree;
    /**
     * Adds new node to the nodes collection
     * @param data node data
     */
    add(data: object): FamilyTree;
    /**
     * Gets node data.
     * @param id identification number of the node
     */
    get(id: string | number): FamilyTree.node;
    /**
     * If specified node has assistant/s or partner/s as children will return false.
     * @param id identification number of the node
     */
    canRemove(id: string | number): boolean;
    /**
     * Expands specified nodes.
     * @param id  the id of the node that will not move during the animation 
     * @param ids node ids that will be expanded
     * @param callback called after the animation completes
     */
    expand(id: string | number, ids: Array<string | number> | "all", callback?: () => void): void;
    /**
     * Collapses specified nodes.
     * @param id  the id of the node that will not move
     * @param ids node ids that will be collapsed
     * @param callback called after the animation completes
     */
    collapse(id: string | number, ids: Array<string | number>, callback?: () => void): void;
    /**
     * Expand/Collapse lists of nodes.
     * @param id the id of the node that will not move
     * @param expandIds expand all nodes with ids
     * @param collapseIds collpase all nodes with ids
     * @param callback called after the animation completes
     */
    expandCollapse(id: string | number, expandIds: Array<string | number>, collapseIds: Array<string | number>, callback?: () => void): void;
    /**
     * Changes roots order.
     * @param id id of a node that will not change is position, can be null
     * @param roots roots id array in the required order
     * @param callback called after the roots are changed and animation completes
     */
    changeRoots(id: string | number, roots: Array<string | number>, callback?: () => void): void;
    /**
     * Maximize the node. Without parameters maximize all nodes.
     * @param id the id of the node, if id is null, undefined ot empty string will maximize all nodes
     * @param horizontalCenter center horizontally 
     * @param verticalCenter center vertically 
     * @param callback called when the animation completes
     */
    maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void;
    /**
     * Minimize the node. Without parameters minimize all nodes.
     * @param id the id of the node, if id is null, undefined ot empty string will minimize all nodes
     * @param callback called when the animation completes
     */
    minimize(id?: string | number, callback?: () => void): void;
    /**
     * Load nodes data.
     * @param data node data array
     * @param callback function called after the load
     */
    load(data: Array<object>, callback?: () => void): FamilyTree;

    /**
     * Updates the node data, redraws the family and fires update event.
     * @param data node data
     * @param callback function called when the animation completes
     * @param fireEvent if it set to true the update event is called
     */
    updateNode(data: object, callback?: () => void, fireEvent?: boolean): void;

    /**
     * Loads nodes from xml.
     * @param xml Xml with node structure
     * @param callback function called after the load
     */
    loadXML(xml: string, callback?: () => void): FamilyTree;
    /**
     * Gets nodes as xml.
     */
    getXML(): string;
    /**
     * Draws the family.
     * @param action Action for example FamilyTree.action.centerNode, default is FamilyTree.action.update
     * @param actionParams parameters for the action
     * @param callback called when the animation completes
     */
    draw(action?: FamilyTree.action, actionParams?: any, callback?: () => void): void;
    /**
     * Gets the width of the container.
     */
    width(): number;
    /**
     * Gets the height of the container.
     */
    height(): number;
    /**
     * Gets the view box attribute of the svg html element.
     */
    getViewBox(): Array<number>;
    /**
     * Sets the view box attribute of the svg html element.
     * @param viewBox 
     */
    setViewBox(viewBox: Array<number>): void;
    /**
     * Gets the current scale of the family.
     * @param viewBox 
     */
    getScale(viewBox?: Array<number>): number;

    /**
     * Sets the current scale of the family. 
     * Returns the actual scale limited by scaleMax and scaleMin
     * @param newScale new scale value
     */
    setScale(newScale: number): number;
    /**
     * Animates specified node with ripple animation - highlight the node.
     * @param id the id of the node
     * @param clientX x value of the ripple center in the node
     * @param clientY y value of the ripple center in the node
     */
    ripple(id: string | number, clientX?: number, clientY?: number): void;
    /**
     * Centers specified node on the screen.
     * @param nodeId the id of the node
     * @param options parentState: FamilyTree.COLLAPSE_PARENT_NEIGHBORS, childrenState: FamilyTree.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false
     * @param callback called when the animation completes
     */
    center(nodeId: string | number, options?: {
        parentState: any,
        childrenState: any,
        rippleId: string | number,
        vertical: boolean,
        horizontal: boolean
    } | null, callback?: () => void): void;
    /**
     * Fits the content to the visible area.
     * @param callback called when the animation completes
     */
    fit(callback?: () => void): void;
    /**
     * Toggles full screen mode.
     */
    toggleFullScreen(): void;
    /**
     * Gets the node as {@link FamilyTree.node} object.
     * @param nodeId 
     */
    getNode(nodeId: string | number): FamilyTree.node;
    /**
     * Sets layout.
     * @param layout layout type
     * @param lcn lyout config name for the specified sub tree
     */

    /**
     * Adds new node to the nodes collection, redraws the family and fires remove event
     * @param data node data
     * @param callback called at the end of animation
     * @param fireEvent indicates if the add event will be called or not
     */
    addNode(data: object, callback?: () => void, fireEvent?: boolean): void;  

    setLayout(layout: FamilyTree.layout | number, lcn?: string): void;
    /**
     * Sets orientation.
     * @param orientation  orientation type
     * @param lcn lyout config name for the specified sub tree
     * @param callback called at the end of animation
     */
    setOrientation(orientation: FamilyTree.orientation, lcn?: string, callback?: () => void): void;


    /**
     * Moves specified nodes to the visible area.
     * @param ids  Array of node ids
     * @param callback called at the end of animation
     */
    moveNodesToVisibleArea(ids: Array<number | string>, callback?: () => void): void;

    /**
     * Search in the family.
     * @param value search for value
     * @param searchInFields search in field names
     * @param retrieveFields retrive data for fields
     * {@link https://balkan.app/FamilyTreeJS/Docs/Search | See doc...}            
     */
    search(value: string, searchInFields?: Array<string>, retrieveFields?: Array<string>): Array<{
        id: number | string,
        name: string,
        __score: number,
        __searchField: string,
        __searchMarks: string
    }>;
    /**
     * Gets collpased node ids of the specifeid node
     * @param node 
     */
    getCollapsedIds(node: FamilyTree.node): Array<string | number>;
    /**
     * State to url.
     * {@link https://balkan.app/FamilyTreeJS/Docs/State | See doc...}  
     */
    stateToUrl(): string;
    /**
     * Genereates unique identification number that can be used for new nodes
     */
    generateId(): string;
    /**
     * Destroys the object.
     */
    destroy(): void;
    /**
     * Replaces the id, pid, stpid, ppid and the ids in clinks, slinks, dottedLines, groupDottedLines.
     * After the replacment updates the UI
     * @param old_new_ids dictionary containing old and new ids
     * @param callback called when the replacment completes
     */
    replaceIds(old_new_ids:  {
        [key: string]: string | number
    }, callback?: () => void): void;
    /**
     * Adds curved link.
     * @param from from node with id
     * @param to to node with id
     * @param label link label
     * @param template link template, for example 'orange'
     */
    addClink(from: string | number, to: string | number, label?: string, template?: string): FamilyTree;
    /**
     * Removes curved link.
     * @param from from node with id
     * @param to to node with id
     */
    removeClink(from: string | number, to: string | number): FamilyTree;
    /**
     * Adds second link.
     * @param from from node with id
     * @param to to node with id
     * @param label link label
     * @param template link template, for example 'orange'
     */    
    addSlink(from: string | number, to: string | number, label?: string, template?: string): FamilyTree;
    /**
     * Removes second link.
     * @param from from node with id
     * @param to to node with id
     */    
    removeSlink(from: string | number, to: string | number): FamilyTree;
    /**
     * Gets svg html element
     */
    getSvg(): SVGAElement;
    /**
     * Gets node html element
     * @param id node id
     */
    getNodeElement(id: string | number): HTMLElement;
    /**
     * Gets menu button html element
     */
    getMenuButton(): HTMLElement;
    /**
     * Exports the details form to PDF.
     * @param options export options
     * @param callback called when the export completes
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}        
     */
    exportPDFProfile(options: FamilyTree.exportOptions, callback?: () => void): void;
    /**
     * Exports the details form to PDF.
     * @param options export options
     * @param callback called when the export completes
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}        
     */
    exportPNGProfile(options: FamilyTree.exportOptions, callback?: () => void): void;
    /**
     * Exports to CSV
     * @param filename The name of the exported file
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}            
     */
    exportCSV(filename: string | FamilyTree.exportCSVXMLJSONOptions): void;
    /**
     * Exports to XML   
     * @param filename The name of the exported file
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}            
     */
    exportXML(filename: string | FamilyTree.exportCSVXMLJSONOptions): void;
    /**
     * Exports to JSON   
     * @param filename The name of the exported file
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}            
     */
     exportJSON(filename: string | FamilyTree.exportCSVXMLJSONOptions ): void;

    /**
     * Shares node data, uses build-in  device sharing functionallity.
     * @param id node id 
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}            
     */
    shareProfile(id: string | number): void;
    /**
     * Exports to PDF document
     * @param options export options
     * @param callback called when the export completes
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}       
     */
    exportPDF(options?: FamilyTree.exportOptions, callback?: () => void): void;    
    /**
     * Exports to PNG document
     * @param options export options 
     * @param callback called when the export completes
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}       
     */
    exportPNG(options?: FamilyTree.exportOptions, callback?: () => void): void;
    /**
     * Exports to SVG document
     * @param options export options 
     * @param callback called when the export completes
     * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...}       
     */    
    exportSVG(options?: FamilyTree.exportOptions, callback?: () => void): void;
    /**
     * Imports CSV file.
     * {@link https://balkan.app/FamilyTreeJS/Docs/Importing | See doc...}       
     */
    importCSV(): void;
    /**
     * Imports XML file.
     * {@link https://balkan.app/FamilyTreeJS/Docs/Importing | See doc...}       
     */    
    importXML(): void;

    /**
     * Imports JSON file.
     * {@link https://balkan.app/FamilyTreeJS/Docs/Importing | See doc...}       
     */    
    importJSON(): void;

    /**
     * Zoom out or zoom in the family.
     * @param delta true for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.
     * @param center array [x, y], where x is x percantege from the width and y is y percentage from the height.
     * @param shouldAnimate should animate 
     * @param callback called when the animation completes
     */
    zoom(delta: boolean | number, center?: Array<number>, shouldAnimate?: boolean, callback?: () => void): void;
    
    /**
     * Magnify(Zoom in) specific node in the family.
     * @param id id of the node
     * @param scale scale to magnify
     * @param front show on front or back 
     * @param anim animation type
     */
     magnify(id: string | number, scale: number, front?: boolean, anim?: FamilyTree.anim | null, callback?: () => void): void;     

    /**
     * Starts the move 
     * @param movePosition move position
     * @param tick callback function in each step
     * @param func the name of the animation function, for example FamilyTree.anim.inSin
     * @param duration duration before going to 100 percent speed
     */
    moveStart(movePosition: FamilyTree.move, tick?: () => void, func?: FamilyTree.anim, duration?: number): void;
    /**
     * Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
     * @param callback called when the animation completes
     */
    undo(callback?: () => void): void;
    /**
     * Redo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
     * @param callback called when the animation completes
     */
    redo(callback?: () => void): void;

    /**
     * Clears all Redo stack steps.
     */
    clearRedo(): void;
    
    /**
     * Clears all Undo stack steps.
     */
    clearUndo(): void;
    /**
     * Returns the number of Undo stack steps
     */
    undoStepsCount(): number;
    /**
     * Returns the number of Redo stack steps
     */    
    redoStepsCount(): number;    
    /**
     * Ends the move
     */
    moveEnd(): void;

    /**
     * The onField() method of the FamilyTree class sets up a function that will be called whenever the specified event is delivered to the target.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onField((args) => {
     *      //return false; to cancel
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */
    onField(listener: (this: FamilyTree, args: { 
        /**
         * the node
         */
        node: FamilyTree.node, 
        /**
         * node data json object
         */
        data: object, 
        /**
         * value of the filed, can be changed in the event
         */
        value: any, 
        /**
         * svg or html element of the filed, can be changed in the event
         */
        element: string, 
        /**
         * name of the field
         */
        name: string         
        /**
         * field template name
         */
        field: string 
    }) => void | boolean): FamilyTree;

    /**
     * Occurs when the nodes in FamilyTree has been created and loaded to the DOM.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onInit(() => {
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */
    onInit(listener: (this: FamilyTree) => void): FamilyTree;
    


    /**
     * The onRedraw event occurs when the family is redrawed.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onRedraw(() => {
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */        
    onRedraw(listener: (this: FamilyTree) => void): FamilyTree;

    /**
     * The onExpandCollpaseButtonClick event occurs when the family is redrawed.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onExpandCollpaseButtonClick(() => {
     *  //return false; to cancel the operation
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */         
    onExpandCollpaseButtonClick(listener: (this: FamilyTree, args: {
        /**
         * Indicates id the operation is collaps or expand
         */
        collapsing: boolean,
        /**
         * the id of the clicked node
         */
        id: number | string,
        /**
         *  node ids that will be expanded or collapsed
         */
        ids: Array<number | string>
    }) => void): FamilyTree;
    /**
     * Occurs in the beginning of the export. Extra css styles can be added to the exported document using this event listener or show loading image.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onExportStart(() => {
     *  args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
     *  //return false; to cancel the operation
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */             
    onExportStart(listener: (this: FamilyTree, args: 
        {
        /**
         * the content to be exported
         * 
         * this property is initialized only for PDF/PNG/SVG exports
         */
        content: string,
        /**
         * export options
         * 
         * this property is initialized only for PDF/PNG/SVG exports
         */
        options: FamilyTree.exportOptions,
        /**
         * add extra styles
         * 
         * this property is initialized only for PDF/PNG/SVG exports
         */
        styles: string,
        /**
         * an object that discribes pages to be exported
         * 
         * this property is initialized only for PDF/PNG exports
         */
        pages: any,
        /**
         * extension
         * 
         * this property is initialized only for CSV/XML
         */
        ext: string,
        /**
         * filename, you can change the filename here
         * 
         * this property is initialized only for CSV/XML exports
         */
        filename: string,
        /**
         * array of node objects
         * 
         * this property is initialized only for CSV/XML exports
         */
        nodes: Array<object>
    }) => void): FamilyTree;
    /**
     * Occurs in the beginning of the export. Use this event listener to hide loading image or upload exported document to your server using ArrayBuffer argument.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onExportEnd(() => {
     *  //return false; to cancel the operation for example id you prefer the exported document to not download
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */         
    onExportEnd(listener: (this: FamilyTree, args: 
        /**
         * for PDF/PNG
         */
    {
        /**
         * the array buffer is the exported document, you can save it on a server or send it via email
         * 
         * this property is initialized only for PDF/PNG exports
         */
        ArrayBuffer: ArrayBuffer
        /**
         * extension
         * 
         * this property is initialized only for CSV/XML exports
         */
        ext: string,
        /**
         * filename, you can change the filename here
         * 
         * this property is initialized only for CSV/XML exports
         */
        filename: string,
        /**
         * an array of node objects
         * 
         * this property is initialized only for CSV/XML exports
         */
        nodes: Array<object>,
        /**
         * csv ot xml string
         * 
         * this property is initialized only for CSV/XML/SVG exports
         */
        content: string
        /**
         * export options
         * 
         * this property is initialized only for SVG exports
         */
        options: FamilyTree.exportOptions,
        /**
         * add extra styles
         * 
         * this property is initialized only for SVG exports
         */
        styles: string,        
    }) => void): FamilyTree;
    /**
     * On node click event listener.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onNodeClick(() => {
     *  //return false; to cancel the operation      
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */   
    onNodeClick(listener: (this: FamilyTree, args: {
        /**
         * node JSON object
         */
        node: FamilyTree.node,
        /**
         * the browser event
         */
        event: any
    }) => void): FamilyTree;
    /**
     * On node double click event listener.
     *  ```typescript     
     * var family = new FamilyTree('#tree', {});
     * family.onNodeDoubleClick(() => {
     *  //return false; to cancel the operation 
     * });
     * family.load(nodes);
     * ```
     * @category Event Listeners
     * @param listener 
     */       
    onNodeDoubleClick(listener: (this: FamilyTree, args: {
        /**
         * clicked node data
         */
        data: object
    }) => void): FamilyTree;

    element: HTMLElement;

    editUI: FamilyTree.editUI;
    searchUI: FamilyTree.searchUI;
    nodeMenuUI: FamilyTree.menuUI;
    filterUI: FamilyTree.filterUI;
    xScrollUI: FamilyTree.xScrollUI;
    yScrollUI: FamilyTree.yScrollUI;
    undoRedoUI: FamilyTree.undoRedoUI;
    nodeCircleMenuUI: FamilyTree.circleMenuUI;
    nodeContextMenuUI: FamilyTree.menuUI;
    menuUI: FamilyTree.menuUI;
    toolbarUI: FamilyTree.toolbarUI;    
    config: FamilyTree.options;
    roots: Array<FamilyTree.node>;

    /**
     * Uploads a file
     * 
     * let chart = new OrgChart('#tree', {});
     * chart.editUI.on('element-btn-click', function (sender, args) {
     *      OrgChart.fileUploadDialog(function (file) {
     *          var formData = new FormData();
     *          formData.append('file', file);
     *          alert('upload the file');
     *      })
     * });
     * chart.load(nodes)
     * 
     */
    static fileUploadDialog(callback: (file: any) => void): void;

    /**
     * Export multiple charts or a chart by team
     * 
     * let chart1 = new OrgChart('#tree', {});
     * let chart2 = new OrgChart('#tree', {});
     * document.getElementById('btn_export').addEventListener('click', function(){
     *     OrgChart.exportPDFFromCharts([
     *         { chartInstance: chart1, scale: 'fit', format: 'A4', header: 'OrgChart 1' },
     *         { chartInstance: chart2, scale: 'fit', format: 'A4', header: 'OrgChart 2' }
     *     ], "test.pdf");
     * });
     * 
     */
    static exportPDFFromCharts(optionList: Array<{
        chartInstance: OrgChart,
        margin?: Array<number>,
        padding?: number,
        landscape?: boolean,
        type?: "preview" | "nodes",
        scale?: "fit" | number,
        format?: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal",
        header?: string,
        footer?: string,
        expandChildren?: boolean,
        min?: boolean,
        nodeId? : number | string
    }>, filename?: string, openInNewTab?: boolean, callback?: (arrayBuffer: ArrayBuffer) => void): void;


    /**
     * Check if the screen is mobile
     * 
     * let isMobile = OrgChart.isMobile()
     * 
     */
    static isMobile(): boolean;
    /**
     * Checks if the used libraris is licnsed or not
     */
    static isTrial(): boolean;
    /**
     * Count all children nodes of the specified id.
     * @param family FamilyTree instance
     * @param node 
     * @param count 
     */
    static childrenCount(family: FamilyTree, node: FamilyTree.node): number;
    static childrenTotalCount(family: FamilyTree, node: FamilyTree.node): number;
    static collapsedChildrenCount(family: FamilyTree, node: FamilyTree.node): number;
    static collapsedChildrenTotalCount(family: FamilyTree, node: FamilyTree.node): number;
    static getRootOf(node: FamilyTree.node): FamilyTree.node;

    /**
     * is null, empty or undefined
     * @param val 
     */
    static isNEU(val: any): boolean;
    static gradientCircleForDefs(id: string | number, colors: Array<string> | string, r: number, strokeWidth: number): string;
    static convertCsvToNodes(text: string) : Array<Object>;
    /**
    * SVG Path rounding function. Takes an input path string or commands and outputs a path
    * string where all line-line corners have been rounded. 
    * @param commands The SVG input path or commands array
    * @param radius 
    * @param useFractionalRadius The amount to round the corners, either a value in the SVG coordinate space, or, if useFractionalRadius is true, a value from 0 to 1.
    * @returns A new SVG path string with the rounding
    */
    static roundPathCorners(commands: string | Array<Array<any>>, radius: number, useFractionalRadius: boolean) : string;
    static convertNodesToCsv(nodes: Array<Object>) : string;
    static wrapText(text: string, field: Object): string;

    static filterUI: {
        textFilterBy: string,
        all: string,
    };

    /**
     * Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
     */
    static loading: {
        show: (family: FamilyTree) => void,
        hide: (family: FamilyTree) => void
    }

    static clinkTemplates: {
        [key: string]: FamilyTree.linkTemplate
    }

    static slinkTemplates: {
        [key: string]: FamilyTree.linkTemplate
    }


    static templates: { [key: string]: FamilyTree.template} ;
    

    static scroll: {
        visible?: boolean,
        smooth?: number,
        speed?: number,
        safari?: { smooth?: number; speed?: number; },
        edge?: { smooth?: number; speed?: number; },
        chrome?: { smooth?: number; speed?: number; },
        firefox?: { smooth?: number; speed?: number; },
        opera?: { smooth?: number; speed?: number; }
    };
    

    static events: {
        /**
         * layout event listener is obsolete, use node-layout instead
         * @param type 
         * @param listener 
         */
        on(type: "layout", listener: (args: any, args1: any, args2: any) => void): void
    };
    static state: { clear(stateName: string): void };

    static animate(element: Object, attrStart?: Object, attrEnd?: Object, duration?: number, func?: FamilyTree.anim, callback?: Function, tick?: boolean): void;

    static miniMap: {
        colors: Array<string>,
        selectorBackgroundColor: string,
        focusStroke: string,
        opacity: number,
        border: string,
        width: number,
        height: number,
        padding: number,
        position: Object
    };

    static VERSION: string;
    /**
    * @ignore
    */
    static TEXT_THRESHOLD: number;
    /**
    * @ignore
    */
    static IMAGES_THRESHOLD: number;
    /**
    * @ignore
    */
    static LINKS_THRESHOLD: number;
    /**
    * @ignore
    */
    static BUTTONS_THRESHOLD: number;
    /**
    * @ignore
    */
    static ANIM_THRESHOLD: number;

    /**
    * @ignore
    */
    static IT_IS_LONELY_HERE: string;
    static IT_IS_LONELY_HERE_LINK: string;
    /**
    * @ignore
    */
    static RES: {
        /**
        * @ignore
        */
        IT_IS_LONELY_HERE_LINK: string
    };


    /**
    * @ignore
    */
    static FIRE_DRAG_NOT_CLICK_IF_MOVE: number;
    /**
    * @ignore
    */
    static STRING_TAGS: boolean;
    /**
     * Search placeholder
     */
    static SEARCH_PLACEHOLDER: string;
    /**
     * Search help symbol. 
     */
    static SEARCH_HELP_SYMBOL: string;

    /**
     * Close search result list by click outside list and clean search input 
     */
    static SEARCH_CLOSE_RESULT_ON_ESCAPE_OR_CLICKOUTSIDE: boolean;
    /**
    * @ignore
    */
    static IMPORT_MESSAGE: string;
    /**
    * @ignore
    */
    static FIXED_POSITION_ON_CLICK: boolean;
    /**
    * Render links before nodes, default is false
    */
    static RENDER_LINKS_BEFORE_NODES: boolean;
    /**
    * Render clinks before nodes, default is false
    */
    static RENDER_CLINKS_BEFORE_NODES: boolean;
    /**
    * @ignore
    */
    static MIXED_LAYOUT_ALL_NODES: boolean;
    /**
    * @ignore
    */
    static MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN: boolean;
    /**
    * Use mixed layout for example tree or treeLeftOffset if number of children is more then specified value
    */
    static MIXED_LAYOUT_IF_NUMBER_OF_CHILDREN_IS_MORE_THEN: boolean;
    /**
    * @ignore
    */
    static LINK_ROUNDED_CORNERS: number;
    /**
    * @ignore
    */
    static MOVE_STEP: number;
    /**
    * @ignore
    */
    static CLINK_CURVE: number;
    /**
    * @ignore
    */
    static SEARCH_RESULT_LIMIT: number;
    /**
    * @ignore
    */
    static MAX_DEPTH: number;
    /**
    * @ignore
    */
    static SCALE_FACTOR: number;
    /**
    * @ignore
    */
    static LAZY_LOADING_FACTOR: number;
    /**
     * Can be used to instruct the browser to defer loading of FamilyTree that are off-screen until the user scrolls near them.
     * The init event listener will be called as soon as the FamilyTree become visible.
     */
    static LAZY_LOADING: boolean;

    /**
     * Minimum in search input before triggering the  search.
     */
    static MINIMUM_SYMBOLS_IN_SEARCH_INPUT: number;
   
    /**
     * Hides the Edit Form when the family is moved with pan
     */
    static HIDE_EDIT_FORM_ON_PAN: boolean;
    static ARRAY_FIELDS: Array<string>;

    /**
     * Csv import and export delimiter/separator
     */
    static CSV_DELIMITER: string;

    /**
     * 
     */
    static EDITFORM_CLOSE_BTN: string;
    /**
     * Escape HTML to prevent Cross-site scripting (also known as XSS) attacks 
     */
    static ESCAPE_HTML: boolean;

    /**
     * Align children of assistant vertically 
     */
    static VERTICAL_CHILDREN_ASSISTANT: boolean;

    /**
    * Cut nodes when export with pages, dafault is false
    */
    static EXPORT_PAGES_CUT_NODES: boolean;

    /**
    * Reset movable nodes to its original position when expand or collapse
    */
    static RESET_MOVABLE_ONEXPANDCOLLAPSE: boolean;    

    /**
    * Filter menu is ordered alphabetically
    */
    static FILTER_ALPHABETICALLY: boolean;   

    /**
    * @ignore
    */

    static randomId(): any;
    static searchUI: any;
    static editUI: any;
    static pdfPrevUI: FamilyTree.pdfPrevUI;
    // static menuUI: any;
    static attr: any;
    static toolbarUI: any;
    static elements: any;

    static expcollOpenTag: any;
    static upOpenTag: any;
    static grCloseTag: any;
}

declare namespace FamilyTree {    
    interface node {
        fid?: string | number,
                /**
         * mother id - same fid you provided in the source node, the default value is null if not provided or if node with the same id does not exist
         */
        mid?: string | number,
        /**
         *  partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined.
         */
    }
    interface options {
        nodeTreeMenu?: boolean
    }
    interface template {
        nodeTreeMenuButton: string,
        nodeTreeMenuCloseButton: string
    }

    /**
     * deprecated
     * @ignore
     */
    const none: number;

    /**
     * @ignore
     */    
    const COLLAPSE_PARENT_NEIGHBORS: number;
    
    /**
     * @ignore
     */
    const COLLAPSE_SUB_CHILDRENS: number;


    var template: object;

    interface node {
        /**
         * the same id you provided in the source node
         */
        id?: string | number,
        /**
         *  partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined.
         */
        ppid?: string | number,
        /**
         * a reference to the parent node, default value is null, if the nodes is collapse this proprty is not initalized and can be null even if pid is not null
         */
        parent?: node,
        /**
         * ub tree parent id, it is the parent node id of the root node of the sub tree, it is the same stpid you provided in the source node, the default value is null if not provided or if node with the same id does not exist.
         */
        stpid?: string | number,
        /**
         * - a reference to the parent node of a sub tree, default value is null, if the parent node is minimized this proprty is not initalized and can be null even if we have stpid
         */
        stParent?: node,
        isPartner?: boolean,
        partnerSeparation?: number,
        /**
         * array of ids, always initialized
         */
        childrenIds?: Array<string | number>,
        /**
         * array of children nodes, initialized on demand if all children are collpased it will be empty array
         */
        children?: Array<node>,
        /**
         * array of sub tree children root node ids, always initialized
         */
        stChildrenIds?: Array<string | number>,
        /**
         * array of sub tree children root nodes, initialized on demand if the node is minimized it will be empty array
         */
        stChildren?: Array<node>,
        /**
         * array of string values, the same array you provided in the source node
         */
        tags?: Array<string>,
        /**
         * template name, you can specify multiple templates with tags in one family
         */
        templateName?: string,
        /**
         * a reference to the left node neighbor, the default value is undefined
         */
        leftNeighbor?: node | undefined,
        /**
         *  a reference to the right node neighbor, the default value is undefined
         */
        rightNeighbor?: node | undefined,
        /**
         * x position, default value undefined
         */
        x?: number | undefined,
        /**
         *  y position, default value undefined
         */
        y?: number | undefined,
        /**
         * width of the node, default value undefined
         */
        w?: number | undefined,
        /**
         * height of the node, default value undefined
         */
        h?: number | undefined,
        /**
         * if the node is assistant is true if not false if the node is not initialized is undefined
         */
        isAssistant?: boolean | undefined,
        /**
         * sub tree container nodes array, property only for the root node, default value undefined
         */
        stContainerNodes?: Array<node> | undefined,
        /**
         * it is set only if you define order option, default value undefined
         */
        order?: number | undefined,
        /**
         * true if the node is collpased, false if it is not and undefined if not initalized
         */
        collapsed?: boolean | undefined,
        /**
         * a level of the node starting from zero
         */
        level?: number,
        /**
         * true if the node is minimized, default value undefined
         */
        min?: boolean | undefined,
        /**
         * sub levels, default value undefined
         */
        subLevels?: number | undefined,
        /**
         * set only if the node contains sub trees and padding is defined in the template, default value undefined
         */
        padding?: number | undefined,
        /**
         * layout configuration name, default value undefined
         */
        lcn?: string | undefined,
        /**
         * for assistant nodes and mixed layout we create dynamic nodes called splits, default value undefined
         */
        isSplit?: boolean | undefined,
        /**
         * indicates if the node is child of partner node
         */
        isChildOfPartner?: boolean,
        /**
         * move the the node on x axis 
         */
        movex?: number | undefined,
        /**
         * move the the node on y axis 
         */
        movey?: number | undefined
    }


    interface template  
         {
            defs?: string,
            size?: Array<number>,
            expandCollapseSize?: number,
            linkAdjuster?: {
                fromX?: number,
                fromY?: number,
                toX?: number,
                toY?: number
            },
            ripple?: {
                radius?: number,
                color?: string,
                rect?: Array<number>
            },
            assistanseLink?: string,
            svg?: string,
            link?: string,
            pointer?: string,
            node?: string,
            plus?: string,
            minus?: string,
            nodeMenuButton?: string,
            menuButton?: string,
            img_0?: string,
            link_field_0?: string,
            editFormHeaderColor?: string,
            nodeCircleMenuButton?: object,
            min?: template,
            [name: string]: any
        }

    interface editUI {
        /**
         * Inits edit ui
         * @param obj 
         */
        init(obj: FamilyTree): void;
        /**
         * The on() method of the editUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
         * @category Event Listeners
         * @param type A case-sensitive string representing the event type to listen for.
         * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
         */
        on(type: "show" | "save" | "cancel" | "element-btn-click" | "button-click" | "hide", listener: (sender: editUI, args: any, args1: any, args2: any) => void | boolean): editUI;
        /**
         * Shows the edit form for the specified node id
         * @param id node id
         * @param detailsMode If true the edit form is in read only mode
         * @param dontAnim 
         */
        show(id: string | number, detailsMode?: boolean, dontAnim?: boolean): void;
        /**
         * Hides the edit form
         */
        hide(): void;
        content(id: string | number, detailsMode: boolean, dontAnim: boolean, width: string, dontRenderButtons: boolean): string;
        /**
         * Sets the avatar of the edit form
         * @param avatarUrl avatar url
         */
        setAvatar(avatarUrl?: string): void;
        // static renderHeaderContent(title: string, photo: string, node: FamilyTree.node, data: object): string;        
    }

    interface searchUI {
        init(obj: FamilyTree): void;
        /**
         * The on() method of the searchUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
         * @category Event Listeners
         * @param type A case-sensitive string representing the event type to listen for.
         * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
         */        
        on(type: "add-item" | "show-items" | "hide" | "searchclick" , listener: (sender: searchUI, args: any, args1: any, args