balkan-orgchart-js 9.1.41 → 9.1.57

package/{orgchart.d.ts → OrgChart.d.ts}

@@ -33,7 +33,7 @@
  * </html>
  * ```
  */
-declare class OrgChart extends OrgChart.eventListeners {
+declare class OrgChart {
     /**
      * ```typescript     
      * let chart = new OrgChart('#tree', {});
@@ -302,7 +302,137 @@ declare class OrgChart extends OrgChart.eventListeners {
     removeListener(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener?: () => void): boolean;
 
 
+    /**
+     * Occurs when the node data has been updated by updateNode method.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onUpdateNode((args) => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */
+    onUpdateNode(listener: (args: {
+        /**
+         * old node data
+         */
+        oldData: OrgChart.nodeData,
+        /**
+         * new node data
+         */
+        newData: OrgChart.nodeData
+    }) => void): OrgChart;
 
+        /**
+     * Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations.
+     * Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onUpdated(() => {
+     *  //Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
+     * });
+     * ```
+     * @category Event Listeners
+     */
+    onUpdated(): OrgChart;
+
+    
+    /**
+     * Occurs when a node has been removed by removeNode method. 
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onRemoveNode((args) => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */
+    onRemoveNode(listener: (args: {
+        /**
+         * node id
+         */
+        id: number | string,
+        /**
+         * parent ids and sub tree parents ids that needs to be updated on the server. For example if you remove a node that has children all chilren nodes will change their pid to the parent node id of the removed node.
+         */
+        newPidsAndStpidsForIds: {
+            newPidsForIds: { [key in any]: string | number },
+            newStpidsForIds: { [key in any]: string | number }
+        }
+    }) => void): OrgChart;
+
+    /**
+     * Occurs when a node has been added by addNode method.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onAddNode((args) => {     
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */
+    onAddNode(listener: (args: {
+        /**
+         * new added data node
+         */
+        data: OrgChart.nodeData
+    }) => void): OrgChart;
+    /**
+     * The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onDrag(() => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */
+    onDrag(listener: (args: {
+        /**
+         * dragged node id
+         */
+        dragId: string | number, 
+        event: MouseEvent,
+        /**
+         * array of node ids
+         * 
+         * this property is initialized only if movable option is set
+         */
+        nodeIds: Array<string | number>
+    }) => void): OrgChart;
+    /**
+     * The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onDrop(() => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */
+    onDrop(listener: (args: {
+        /**
+         * dragged node id
+         */
+        dragId: string | number,
+        /**
+         * dropped node id
+         */
+        dropId: string | number,
+        /**
+         * draging element
+         */
+        dragNodeElement: HTMLElement,
+        /**
+         * Mouse event
+         */
+        event: MouseEvent
+    }) => void): OrgChart;
 
     /**
      * All chart nodes
@@ -1106,7 +1236,246 @@ declare class OrgChart extends OrgChart.eventListeners {
 
 
 
+    /**
+     * Occurs when the nodes in OrgChart has been created and loaded to the DOM.
+     * ```typescript     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onInit(() => {
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */
+    onInit(listener: (this: OrgChart) => void): OrgChart;
+    
+    /**
+     * The onRedraw event occurs when the chart is redrawed.
+     *  ```typescript     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onRedraw(() => {
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */        
+    onRedraw(listener: (this: OrgChart) => void): OrgChart;
 
+    /**
+     * The onExpandCollapseButtonClick event occurs when the chart is redrawed.
+     * ```typescript     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onExpandCollapseButtonClick(() => {
+     *  //return false; to cancel the operation
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */         
+    onExpandCollapseButtonClick(listener: (this: OrgChart, 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): OrgChart;
+
+    /**
+     * 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     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onExportStart(() => {
+     *  args.styles += '<link href="[link to my styles]" rel="stylesheet">';
+     *  //return false; to cancel the operation
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */             
+    onExportStart(listener: (this: OrgChart, args: {
+            options: {
+                childLevels?: number,
+                expandChildren?: boolean,
+                fileName?: string,
+                footer?: string,
+                header?: string,
+                height?: number,
+                width?: number,
+                landscape?: boolean,
+                margin?: Array<number>,
+                min?: boolean,
+                openInNewTab?: boolean,
+                padding?: number,
+                parentLevels?: number,
+                type?: string,
+                pages?: Array<{            
+                    chartInstance?: OrgChart,
+                    childLevels?: number,
+                    expandChildren?: boolean,
+                    footer?: string,
+                    header?: string,
+                    margin?: Array<number>,
+                    min?: boolean,
+                    padding?: number,
+                    parentLevels?: number,
+                    isProfile?: boolean,
+                    nodeId?: number | string,
+                    content?:  string,
+                    height?: number,
+                    width?: number,
+                }>
+            },
+            pages?: Array<SVGElement>,            
+            styles?: string
+    }) => void): OrgChart;
+
+    /**
+     * 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     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onExportEnd(() => {
+     *  //return false; to cancel the operation for example id you prefer the exported document to not download
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */         
+    onExportEnd(listener: (this: OrgChart, 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,
+        /**
+         * add extra styles
+         * 
+         * this property is initialized only for SVG exports
+         */
+        styles: string,        
+    }) => void): OrgChart;
+
+    /**
+     * On node click event listener.
+     *  ```typescript     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onNodeClick(() => {
+     *  //return false; to cancel the operation      
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */   
+    onNodeClick(listener: (this: OrgChart, args: {
+        /**
+         * node JSON object
+         */
+        node: OrgChart.node,
+        /**
+         * the browser event
+         */
+        event: any
+    }) => void): OrgChart;
+
+
+        /**
+     * On canvas SVG click event listener.
+     *  ```typescript     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onCanvasClick(() => {  
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */   
+    onCanvasClick(listener: (this: OrgChart, args: {
+        /**
+         * the browser event
+         */
+        event: any
+    }) => void): OrgChart;
+
+    /**
+     * In onAIToolCalls we parse the AI responce to our functions
+     * ```typescript
+     * chart.onAIToolCalls(function(args){
+     *  for(var toolCall of args.toolCalls){
+     *      if (toolCall.FunctionName == 'sendEmail'){
+     *          toolCall.FunctionResult = sendEmail(toolCall.FunctionArguments);
+     *      }
+     *  }
+     * });
+     * ```
+     * [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
+     * @param listener 
+     */
+    onAIToolCalls(listener: (this: OrgChart, args: {
+        toolCalls: Array<{
+            FunctionName : string,
+            FunctionResult  : string,
+            FunctionArguments  : { [key: string]: any }
+        }>
+    }) => void): OrgChart;
+
+    /**
+     * On node double click event listener.
+     * ```typescript     
+     * let chart = new OrgChart('#tree', {});
+     * chart.onNodeDoubleClick(() => {
+     *  //return false; to cancel the operation 
+     * });
+     * chart.load(nodes);
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */       
+    onNodeDoubleClick(listener: (this: OrgChart, args: {
+        /**
+         * clicked node data
+         */
+        data: object
+    }) => void): OrgChart;
 
     /**
      * The tree div element.
@@ -1502,7 +1871,7 @@ declare class OrgChart extends OrgChart.eventListeners {
          * @param listener 
          */
         on(type: "layout", listener: (args: any, args1: any, args2: any) => void): void
-    };    
+    };
     
     /**
      * @ignore
@@ -1930,383 +2299,6 @@ declare class OrgChart extends OrgChart.eventListeners {
 
 declare namespace OrgChart {   
 
-    interface eventListeners{        
-        /**
-         * Occurs when a node has been removed by removeNode method. 
-         *  ```typescript     
-         * var chart = new OrgChart('#tree', {});
-         * chart.onRemoveNode((args) => {
-         *  //return false; to cancel the operation
-         * });
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */
-        onRemoveNode(listener: (args: {
-            /**
-             * node id
-             */
-            id: number | string,
-            /**
-             * parent ids and sub tree parents ids that needs to be updated on the server. For example if you remove a node that has children all chilren nodes will change their pid to the parent node id of the removed node.
-             */
-            newPidsAndStpidsForIds: {
-                newPidsForIds: { [key in any]: string | number },
-                newStpidsForIds: { [key in any]: string | number }
-            }
-        }) => void): OrgChart;
-
-        /**
-         * Occurs when a node has been added by addNode method.
-         *  ```typescript     
-         * var chart = new OrgChart('#tree', {});
-         * chart.onAddNode((args) => {     
-         *  //return false; to cancel the operation
-         * });
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */
-        onAddNode(listener: (args: {
-            /**
-             * new added data node
-             */
-            data: OrgChart.nodeData
-        }) => void): OrgChart;
-        /**
-         * The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
-         *  ```typescript     
-         * var chart = new OrgChart('#tree', {});
-         * chart.onDrag(() => {
-         *  //return false; to cancel the operation
-         * });
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */
-        onDrag(listener: (args: {
-            /**
-             * dragged node id
-             */
-            dragId: string | number, 
-            event: MouseEvent,
-            /**
-             * array of node ids
-             * 
-             * this property is initialized only if movable option is set
-             */
-            nodeIds: Array<string | number>
-        }) => void): OrgChart;
-        /**
-         * The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
-         *  ```typescript     
-         * var chart = new OrgChart('#tree', {});
-         * chart.onDrop(() => {
-         *  //return false; to cancel the operation
-         * });
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */
-        onDrop(listener: (args: {
-            /**
-             * dragged node id
-             */
-            dragId: string | number,
-            /**
-             * dropped node id
-             */
-            dropId: string | number,
-            /**
-             * draging element
-             */
-            dragNodeElement: HTMLElement,
-            /**
-             * Mouse event
-             */
-            event: MouseEvent
-        }) => void): OrgChart;
-
-
-
-        /**
-         * Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations.
-         * Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc.
-         *  ```typescript     
-         * var chart = new OrgChart('#tree', {});
-         * chart.onUpdated(() => {
-         *  //Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
-         * });
-         * ```
-         * @category Event Listeners
-         */
-        onUpdated(): OrgChart;
-
-        
-        /**
-         * Occurs when the node data has been updated by updateNode method.
-         *  ```typescript     
-         * var chart = new OrgChart('#tree', {});
-         * chart.onUpdateNode((args) => {
-         *  //return false; to cancel the operation
-         * });
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */
-        onUpdateNode(listener: (args: {
-            /**
-             * old node data
-             */
-            oldData: OrgChart.nodeData,
-            /**
-             * new node data
-             */
-            newData: OrgChart.nodeData
-        }) => void): OrgChart;
-
-        /**
-         * Occurs when the nodes in OrgChart has been created and loaded to the DOM.
-         * ```typescript     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onInit(() => {
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */
-        onInit(listener: (this: OrgChart) => void): OrgChart;
-        
-        /**
-         * The onRedraw event occurs when the chart is redrawed.
-         *  ```typescript     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onRedraw(() => {
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */        
-        onRedraw(listener: (this: OrgChart) => void): OrgChart;
-
-        /**
-         * The onExpandCollapseButtonClick event occurs when the chart is redrawed.
-         * ```typescript     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onExpandCollapseButtonClick(() => {
-         *  //return false; to cancel the operation
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */         
-        onExpandCollapseButtonClick(listener: (this: OrgChart, 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): OrgChart;
-
-        /**
-         * 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     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onExportStart(() => {
-         *  args.styles += '<link href="[link to my styles]" rel="stylesheet">';
-         *  //return false; to cancel the operation
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */             
-        onExportStart(listener: (this: OrgChart, args: {
-                options: {
-                    childLevels?: number,
-                    expandChildren?: boolean,
-                    fileName?: string,
-                    footer?: string,
-                    header?: string,
-                    height?: number,
-                    width?: number,
-                    landscape?: boolean,
-                    margin?: Array<number>,
-                    min?: boolean,
-                    openInNewTab?: boolean,
-                    padding?: number,
-                    parentLevels?: number,
-                    type?: string,
-                    pages?: Array<{            
-                        chartInstance?: OrgChart,
-                        childLevels?: number,
-                        expandChildren?: boolean,
-                        footer?: string,
-                        header?: string,
-                        margin?: Array<number>,
-                        min?: boolean,
-                        padding?: number,
-                        parentLevels?: number,
-                        isProfile?: boolean,
-                        nodeId?: number | string,
-                        content?:  string,
-                        height?: number,
-                        width?: number,
-                    }>
-                },
-                pages?: Array<SVGElement>,            
-                styles?: string
-        }) => void): OrgChart;
-
-        /**
-         * 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     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onExportEnd(() => {
-         *  //return false; to cancel the operation for example id you prefer the exported document to not download
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */         
-        onExportEnd(listener: (this: OrgChart, 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,
-            /**
-             * add extra styles
-             * 
-             * this property is initialized only for SVG exports
-             */
-            styles: string,        
-        }) => void): OrgChart;
-
-        /**
-         * On node click event listener.
-         *  ```typescript     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onNodeClick(() => {
-         *  //return false; to cancel the operation      
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */   
-        onNodeClick(listener: (this: OrgChart, args: {
-            /**
-             * node JSON object
-             */
-            node: OrgChart.node,
-            /**
-             * the browser event
-             */
-            event: any
-        }) => void): OrgChart;
-
-
-            /**
-         * On canvas SVG click event listener.
-         *  ```typescript     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onCanvasClick(() => {  
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */   
-        onCanvasClick(listener: (this: OrgChart, args: {
-            /**
-             * the browser event
-             */
-            event: any
-        }) => void): OrgChart;
-
-        /**
-         * In onAIToolCalls we parse the AI responce to our functions
-         * ```typescript
-         * chart.onAIToolCalls(function(args){
-         *  for(var toolCall of args.toolCalls){
-         *      if (toolCall.FunctionName == 'sendEmail'){
-         *          toolCall.FunctionResult = sendEmail(toolCall.FunctionArguments);
-         *      }
-         *  }
-         * });
-         * ```
-         * [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
-         * @param listener 
-         */
-        onAIToolCalls(listener: (this: OrgChart, args: {
-            toolCalls: Array<{
-                FunctionName : string,
-                FunctionResult  : string,
-                FunctionArguments  : { [key: string]: any }
-            }>
-        }) => void): OrgChart;
-
-        /**
-         * On node double click event listener.
-         * ```typescript     
-         * let chart = new OrgChart('#tree', {});
-         * chart.onNodeDoubleClick(() => {
-         *  //return false; to cancel the operation 
-         * });
-         * chart.load(nodes);
-         * ```
-         * @category Event Listeners
-         * @param listener 
-         */       
-        onNodeDoubleClick(listener: (this: OrgChart, args: {
-            /**
-             * clicked node data
-             */
-            data: object
-        }) => void): OrgChart;
-    }
-
     /**
      * The node JSON data
      * ```ts