/**
* ```typescript
*
*
*
*
*
* OrgChartJS
*
*
*
*
*
*
*
*
* ```
*/
declare class OrgChart {
/**
* ```typescript
* let chart = new OrgChart('#tree', {});
* ```
* @param element HTML element or string selector for example '#tree'
* @param options configuration options
*/
constructor(element?: HTMLElement | string | null, options?: OrgChart.options);
/**
* The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.on('init', function () {
* // console.log("initiated")
* })
* chart.load(nodes);
* ```
* @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" | "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: (sender: OrgChart, args?: any, args1?: any, args2?: any) => void | boolean): 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: (this: OrgChart, args: OrgChart.updateNodeEventArgs) => 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(listener: (this: OrgChart) => void): 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: (this: OrgChart, args: OrgChart.removeNodeEventArgs) => 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: (this: OrgChart, args: OrgChart.addNodeEventArgs) => 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: (this: OrgChart, args: OrgChart.dragEventArgs) => 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: (this: OrgChart, args: OrgChart.dropEventArgs) => 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: OrgChart.expandCollapseButtonClickEventArgs) => 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 += '';
* //return false; to cancel the operation
* });
* chart.load(nodes);
* ```
* @category Event Listeners
* @param listener
*/
onExportStart(listener: (this: OrgChart, args: OrgChart.exportStartEventArgs) => 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: OrgChart.exportEndEventArgs) => 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: OrgChart.nodeClickEventArgs) => void): OrgChart;
/**
* On node mouse over event listener.
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.onNodeMouseover(() => {
* });
* chart.load(nodes);
* ```
* @category Event Listeners
* @param listener
*/
onNodeMouseover(listener: (this: OrgChart, args: OrgChart.nodeMouseEventArgs) => void): OrgChart;
/**
* On node mouse over event listener.
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.onNodeMouseleave(() => {
* });
* chart.load(nodes);
* ```
* @category Event Listeners
* @param listener
*/
onNodeMouseleave(listener: (this: OrgChart, args: OrgChart.nodeMouseEventArgs) => void): OrgChart;
/**
* Fires when the chart requests nodes on demand.
* Use this event to dynamically load and append nodes.
*
* @param listener Callback function triggered on demand node request.
* @param listener.args Event arguments containing the requested node data.
* @returns {OrgChart} The current chart instance.
*/
onDemand(listener: (this: OrgChart, args: OrgChart.demandEventArgs) => 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: OrgChart.canvasClickEventArgs) => 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: OrgChart.aiToolCallsEventArgs) => 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: OrgChart.nodeDoubleClickEventArgs) => void): OrgChart;
/**
* SVG icons
* @param w - width
* @param h - height
* @param c - color
* @param x - X position
* @param y - Y position
* @returns string with the SVG definition
*/
static icon: {
/**
* ```typescript
* let pngIcon = OrgChart.icon.png(24, 24, "#7A7A7A");
* ```
*/
png: (w: string| number, h: string | number, c: string, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let pdfIcon = OrgChart.icon.pdf(24, 24, "#7A7A7A");
* ```
*/
pdf: (w: string | number, h: string | number, c: string, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let svgIcon = OrgChart.icon.svg(24, 24, "#7A7A7A");
* ```
*/
svg: (w: string| number, h: string| number, c: string | number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let csvIcon = OrgChart.icon.csv(24, 24, "#7A7A7A");
* ```
*/
csv: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let excelIcon = OrgChart.icon.excel(24, 24, "#7A7A7A");
* ```
*/
excel: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let jsonIcon = OrgChart.icon.json(24, 24, "#7A7A7A");
* ```
*/
json: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let powerPointIcon = OrgChart.icon.powerpoint(24, 24, "#7A7A7A");
* ```
*/
powerpoint: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let powerPointPreviewIcon = OrgChart.icon.pppreview(24, 24, "#7A7A7A");
* ```
*/
pppreview: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let editIcon = OrgChart.icon.edit(24, 24, "#7A7A7A");
* ```
*/
edit: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let detailsIcon = OrgChart.icon.details(24, 24, "#7A7A7A");
* ```
*/
details: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let removeIcon = OrgChart.icon.remove(24, 24, "#7A7A7A");
* ```
*/
remove: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let addIcon = OrgChart.icon.add(24, 24, "#7A7A7A");
* ```
*/
add: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let xmlIcon = OrgChart.icon.xml(24, 24, "#7A7A7A");
* ```
*/
xml: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let visioIcon = OrgChart.icon.visio(24, 24, "#7A7A7A");
* ```
*/
visio: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let linkIcon = OrgChart.icon.link(24, 24, "#7A7A7A");
* ```
*/
link: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let happyIcon = OrgChart.icon.happy(24, 24, "#7A7A7A");
* ```
*/
happy: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let sadIcon = OrgChart.icon.sad(24, 24, "#7A7A7A");
* ```
*/
sad: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let shareIcon = OrgChart.icon.share(24, 24, "#7A7A7A");
* ```
*/
share: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let userIcon = OrgChart.icon.user(24, 24, "#7A7A7A");
* ```
*/
user: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let undoIcon = OrgChart.icon.undo(24, 24, "#7A7A7A");
* ```
*/
undo: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let redoIcon = OrgChart.icon.redo(24, 24, "#7A7A7A");
* ```
*/
redo: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let fitIcon = OrgChart.icon.fit(24, 24, "#7A7A7A");
* ```
*/
fit: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let expand_allIcon = OrgChart.icon.expand_all(24, 24, "#7A7A7A");
* ```
*/
expand_all: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let full_screenIcon = OrgChart.icon.full_screen(24, 24, "#7A7A7A");
* ```
*/
full_screen: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let zoom_inIcon = OrgChart.icon.zoom_in(24, 24, "#7A7A7A");
* ```
*/
zoom_in: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let zoom_outIcon = OrgChart.icon.zoom_out(24, 24, "#7A7A7A");
* ```
*/
zoom_out: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let layout_mixedIcon = OrgChart.icon.layout_mixed(24, 24, "#7A7A7A");
* ```
*/
layout_mixed: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let layout_normalIcon = OrgChart.icon.layout_normal(24, 24, "#7A7A7A");
* ```
*/
layout_normal: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let layout_right_offsetIcon = OrgChart.icon.layout_right_offset(24, 24, "#7A7A7A");
* ```
*/
layout_right_offset: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let layout_left_offsetIcon = OrgChart.icon.layout_left_offset(24, 24, "#7A7A7A");
* ```
*/
layout_left_offset: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let layout_treeIcon = OrgChart.icon.layout_tree(24, 24, "#7A7A7A");
* ```
*/
layout_tree: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let layout_gridIcon = OrgChart.icon.layout_grid(24, 24, "#7A7A7A");
* ```
*/
layout_grid: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
/**
* ```typescript
* let cursorIcon = OrgChart.icon.cursor(24, 24, "#7A7A7A");
* ```
*/
cursor: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
}
/**
* Can update link (Does the node is dropping under itself)
* ```typescript
* let canDropTheNode = chart.canUpdateLink(draggedNodeId, droppedNodeId));
* ```
* @param id child id
* @param pid parent id
*/
canUpdateLink(id: string | number, pid: string | number): boolean;
/**
* 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.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let listener = function(sender, args){
* console.log(sender.removeListener('update', listener));
* };
* chart.on('update', listener);
* chart.load(nodes)
* ```
};
family.on('update', listener);
* @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" | "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;
/**
* All chart nodes
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.onInit(() => {
* let nodes = chart.nodes;
* });
* chart.load(nodes)
* ```
*/
nodes: { [key in any]: OrgChart.node };
/**
* Returns true if chart is visible
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.onInit(() => {
* console.log(chart.isVisible);
* });
* chart.load(nodes)
* ```
*/
isVisible: boolean;
/**
* Returns the visible nodes ids
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.onInit(() => {
* console.log(chart.visibleNodeIds);
* });
* chart.load(nodes)
* ```
*/
visibleNodeIds: Array;
/**
* Updates the node data
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.update({ id: 1, name: "Updated Name", title: "Updated Title" });
* chart.draw();
* ```
* @param newData node data
*/
update(newData: object): OrgChart;
/**
* Removes specified node from nodes collection
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.remove(2);
* chart.draw();
* ```
* @param id identification number of the node
*/
remove(id: string | number): OrgChart;
/**
* Adds new node to the nodes collection
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.add({ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager" })
* chart.draw();
* ```
* @param data node data
*/
add(data: object): OrgChart;
/**
* Adds new node to the nodes collection, redraws the chart and fires remove event
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.addNode({ id: 1, name: "Denny Curtis", title: "CEO" });
* ```
* @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: OrgChart.nodeData, callback?: () => void, fireEvent?: boolean): void;
/**
* Adds new nodes to the chart while keeping the specified node fixed in its current position.
*
* @param {string | number} id The id of the node that should remain stationary when the new nodes are added.
* @param {Array} dataArray An array of node data objects to add to the chart.
* @param {() => void} [callback] A callback function that is called after the nodes are added.
* @returns {void}
*/
addNodes(id: string | number, dataArray: Array, callback?: () => void): void;
/**
* Removes specified node from nodes collection, redraws the chart and fires remove event.
* ```typescript
* var chart = new OrgChart('#tree', {});
* chart.removeNode(2);
* ```
* @param id identification number of the node
* @param callback called at the end of animation
* @param fireEvent indicates if the remove event will be called or not
*/
removeNode(id: string | number, callback?: () => void, fireEvent?: boolean): void;
/**
* Init method can be used if the chart needs to be instantiated without parameters, and init can be called later.
* ```typescript
* let chart = new OrgChart();
* chart.init('#tree', {})
* ```
* @param element
* @param options
*/
init(element?: HTMLElement | string | null, options?: OrgChart.options): void;
/**
* Gets node data.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let node = chart.get(2);
* ```
* @param id identification number of the node
*/
get(id: string | number): OrgChart.nodeData;
/**
* If specified node has assistant/s or partner/s as children will return false.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let canRemove = chart.canRemove(2);
* ```
* @param id identification number of the node
*/
canRemove(id: string | number): boolean;
/**
* Expands specified nodes.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.expand(1, [2]);
* ```
* @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 | "all", callback?: () => void): void;
/**
* Collapses specified nodes.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.collapse(1, [2]);
* ```
* @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, callback?: () => void): void;
/**
* Expand/Collapse lists of nodes.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.expandCollapse(1, [2], [3]);
* ```
* @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, collapseIds: Array, callback?: () => void): void;
/**
* Changes roots order.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.changeRoots(1, [2]);
* ```
* @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, callback?: () => void): void;
/**
* Maximize the node. Without parameters maximize all nodes.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.maximize();
* ```
* @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;
/**
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.minimize();
* ```
* 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.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.load([
* { id: 1, name: "Denny Curtis" },
* { id: 2, pid: 1, name: "Ashley Barnett" },
* { id: 3, pid: 1, name: "Caden Ellison" }
* ]);
* ```
* @param data nodes data array
* @param callback function called after the load
*/
load(data: Array, callback?: () => void): OrgChart;
/**
* Updates the node data, redraws the chart and fires update event.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
* ```
* @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: OrgChart.nodeData, callback?: () => void, fireEvent?: boolean): void;
/**
* Loads nodes from xml.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let xml = '';
* chart.loadXML(xml);
* ```
* @param xml Xml with node structure
* @param callback function called after the load
*/
loadXML(xml: string, callback?: () => void): OrgChart;
/**
* Gets nodes as xml.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let xml = chart.getXML();
* ```
*/
getXML(): string;
/**
* Draws the chart.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.update({ id: 1, name: "Updated Name", title: "Updated Title" });
* chart.draw();
* ```
* @param action Action for example OrgChart.action.centerNode, default is OrgChart.action.update
* @param actionParams parameters for the action
* @param callback called when the animation completes
*/
draw(action?: OrgChart.action, actionParams?: any, callback?: () => void): void;
/**
* Gets the width of the container.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let width = chart.width();
* ```
*/
width(): number;
/**
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let height = chart.height();
* ```
* Gets the height of the container.
*/
height(): number;
/**
* Gets the view box attribute of the svg html element.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let viewBox = chart.getViewBox();
* ```
*/
getViewBox(): Array;
/**
* Sets the view box attribute of the svg html element.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.setViewBox();
* ```
* @param viewBox
*/
setViewBox(viewBox: Array): void;
/**
* Gets the current scale of the chart.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let scale = chart.getScale();
* ```
* @param viewBox
*/
getScale(viewBox?: Array): number;
/**
* Sets the current scale of the chart.
* Returns the actual scale limited by scaleMax and scaleMin
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.setScale(1.2);
* ```
* @param newScale new scale value
*/
setScale(newScale: number): number;
/**
* Animates specified node with ripple animation - highlight the node.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.ripple(2);
* ```
* @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.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.center(2);
* ```
* @param nodeId the id of the node
* @param options parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.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;
/**
* Highlights a node and optionally related nodes in the chart.
*
* This method applies a visual highlight state to the target node identified by
* `nodeId`. Depending on the `highlightOnHover` mode, it can also highlight
* parent nodes, child nodes, sibling nodes on the same level, or a combination
* of related nodes.
*
* @param {string|number} nodeId
* The unique identifier of the node to highlight.
*
* @param {'parents'|'children'|'sameLevel'|'childrenAndParents'|'self'} highlightOnHover
* Determines which nodes should be highlighted:
* - `'self'` - Highlights only the selected node.
* - `'parents'` - Highlights the selected node and its ancestor chain.
* - `'children'` - Highlights the selected node and all descendant nodes.
* - `'sameLevel'` - Highlights nodes on the same hierarchy level as the selected node.
* - `'childrenAndParents'` - Highlights the selected node, its ancestors, and descendants.
*
* @returns {Orgchart}
* Returns the current :contentReference[oaicite:0]{index=0} instance for method chaining.
*
* @example
* chart.highlightNode(12, 'self');
*
* @example
* chart.highlightNode('ceo', 'parents');
*/
highlightNode(nodeId: string | number, highlightOnHover: 'parents' | 'children' | 'sameLevel' | 'childrenAndParents' | 'self'): Orgchart;
/**
* Fits the content to the visible area.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.fit();
* ```
* @param callback called when the animation completes
*/
fit(callback?: () => void): void;
/**
* Fits the content to the visible area if it is ouside of the visible area.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.fitOfOutside();
* ```
* @param callback called when the animation completes
*/
fitIfOutside(callback?: () => void): void;
/**
* Toggles full screen mode.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.toggleFullScreen();
* ```
*/
toggleFullScreen(): void;
/**
* Gets the node as {@link OrgChart.node} object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let node = chart.getNode(2);
* ```
* @param nodeId
*/
getNode(nodeId: string | number): OrgChart.node;
/**
* Sets layout.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.setLayout(OrgChart.tree);
* ```
* @param layout layout type
* @param lcn lyout config name for the specified sub tree
*/
setLayout(layout: OrgChart.layout | number, lcn?: string): void;
/**
* Sets orientation.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.setOrientation(2);
* ```
* @param orientation orientation type
* @param lcn lyout config name for the specified sub tree
* @param callback called at the end of animation
*/
setOrientation(orientation: OrgChart.orientation, lcn?: string, callback?: () => void): void;
/**
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.moveNodesToVisibleArea([2, 3]);
* ```
* Moves specified nodes to the visible area.
* @param ids Array of node ids
* @param callback called at the end of animation
*/
moveNodesToVisibleArea(ids: Array, callback?: () => void): void;
/**
* Moves the specified nodes into the visible area after a node expansion.
*
* @param id The ID of the node that was clicked to trigger the expand action.
* @param ids Array of node IDs that should be moved into the visible area.
* @param Optional callback executed after the operation is completed.
*/
moveNodesToVisibleAreaAfterExpand(id: number | string, ids: Array, callback?: () => void): void;
/**
* Search in the chart.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.search("Ava");
* ```
* @param value search for value
* @param searchInFields search in field names
* @param retrieveFields retrive data for fields
* {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
*/
search(value: string, searchInFields?: Array, retrieveFields?: Array): Array<{
id: number | string,
name: string,
__score: number,
__searchField: string,
__searchMarks: string
}>;
/**
* State to url.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let url = chart.stateToUrl();
* ```
* {@link https://balkan.app/OrgChartJS/Docs/State | See doc...}
*/
stateToUrl(): string;
/**
* Genereates unique identification number that can be used for new nodes
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let id = chart.generateId();
* ```
*/
generateId(): string;
/**
* Destroys the object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.destroy();
* ```
*/
destroy(): void;
/**
* Replaces the id, pid, stpid, ppid and the ids in clinks, slinks, dottedLines, groupDottedLines.
* After the replacment updates the UI
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.replaceIds[{2:21, 3:31});
* ```
* @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.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.addClink(4, 0, 'text')
* chart.draw();
* ```
* @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): OrgChart;
/**
* Removes curved link.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.removeClink(4, 0)
* chart.draw();
* ```
* @param from from node with id
* @param to to node with id
*/
removeClink(from: string | number, to: string | number): OrgChart;
/**
* Adds second link.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.addSlink(4, 0, 'text')
* chart.draw();
* ```
* @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): OrgChart;
/**
* Removes second link.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.removeSlink(4, 0)
* chart.draw();
* ```
* @param from from node with id
* @param to to node with id
*/
removeSlink(from: string | number, to: string | number): OrgChart;
/**
* Gets svg html element
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let svg = chart.getSvg();
* ```
*/
getSvg(): SVGAElement;
/**
* Gets node html element
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let nodeElement = chart.getNodeElement(2);
* ```
* @param id node id
*/
getNodeElement(id: string | number): HTMLElement;
/**
* Gets menu button html element
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let menuButton = chart.getMenuButton(2);
* ```
*/
getMenuButton(): HTMLElement;
/**
* Exports to CSV
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.exportToCSV();
* ```
* @param filename The name of the exported file
* {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}
*/
exportToCSV(filename?: string | OrgChart.exportCSVXMLJSONOptions): void;
/**
* Exports to XML
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.exportToXML();
* ```
* @param filename The name of the exported file
* {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}
*/
exportToXML(filename: string | OrgChart.exportCSVXMLJSONOptions): void;
/**
* Exports to JSON
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.exportToJSON();
* ```
* @param filename The name of the exported file
* {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}
*/
exportToJSON(filename?: string | OrgChart.exportCSVXMLJSONOptions ): void;
/**
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.shareProfile(2);
* ```
* Shares node data, uses build-in device sharing functionallity.
* @param id node id
*/
shareProfile(id: string | number): void;
/**
* Exports to Visio document
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.exportToVisio();
* ```
* @param options export options
* @param callback called when the export completes
* {@link https://balkan.app/OrgChartJS/Docs/ExportingOther | See doc...}
*/
exportToVisio(options?: OrgChart.exportVisioOptions, callback?: () => void): void;
exportToPowerPoint(options?: OrgChart.exportPowerPointOptions, callback?: () => void): void;
exportToPDF(options?: OrgChart.exportPDFOptions, callback?: () => void): void;
exportToPNG(options?: OrgChart.exportPNGOptions, callback?: () => void): void;
exportToSVG(options?: OrgChart.exportSVGOptions, callback?: () => void): void;
exportToPDFProfile(nodeId: number | string, callback?: () => void): void;
/**
* Imports CSV file.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.importCSV();
* ```
* {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}
*/
importCSV(): void;
/**
* Imports XML file.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.importXML();
* ```
* {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}
*/
importXML(): void;
/**
* Imports JSON file.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.importJSON();
* ```
* {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}
*/
importJSON(): void;
/**
* Zoom out or zoom in the chart.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.zoom(true);
* ```
* @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, shouldAnimate?: boolean, callback?: () => void): void;
/**
* Magnify(Zoom in) specific node in the chart.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.magnify(2, 1.25);
* ```
* @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?: OrgChart.anim | null, callback?: () => void): void;
/**
* Starts the move
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.moveStart({right: true});
* ```
* @param movePosition move position
* @param tick callback function in each step
* @param func the name of the animation function, for example OrgChart.anim.inSin
* @param duration duration before going to 100 percent speed
*/
moveStart(movePosition: OrgChart.move, tick?: () => void, func?: OrgChart.anim, duration?: number): void;
/**
* Ends the move
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.moveEnd();
*/
moveEnd(): void;
/**
* Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.undo();
* ```
* @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.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.redo();
* ```
* @param callback called when the animation completes
*/
redo(callback?: () => void): void;
/**
* Clears all Redo stack steps.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.clearRedo();
* ```
*/
clearRedo(): void;
/**
* Clears all Undo stack steps.
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* chart.clearUndo();
* ```
*/
clearUndo(): void;
/**
* Returns the number of Undo stack steps
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let undoSteps = chart.undoStepsCount();
* ```
*/
undoStepsCount(): number;
/**
* Returns the number of Redo stack steps
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let redoSteps = chart.redoStepsCount();
* ```
*/
redoStepsCount(): number;
/**
* The tree div element.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let element = chart.element;
* ```
*/
element: HTMLElement;
/**
* The tree div element.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let mainElement = chart.mainElement;
* ```
*/
mainElement: HTMLElement;
get leftElement(): HTMLElement;
/**
* The chart editUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let editUI = chart.editUI;
* ```
*/
editUI: OrgChart.editUI;
/**
* The chart aiUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let aiUI = chart.aiUI;
* ```
*/
aiUI: OrgChart.aiUI;
/**
* The chart orgScribeUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let orgScribeUI = chart.orgScribeUI;
* ```
*/
orgScribeUI: OrgChart.orgScribeUI;
/**
* The chart searchUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let searchUI = chart.searchUI;
* ```
*/
searchUI: OrgChart.searchUI;
/**
* The chart nodeMenuUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let nodeMenuUI = chart.nodeMenuUI;
* ```
*/
nodeMenuUI: OrgChart.menuUI;
powerPointPreviewUI: OrgChart.powerPointPreviewUI;
pdfPreviewUI: OrgChart.pdfPreviewUI;
svgPreviewUI: OrgChart.pngPreviewUI;
pngPreviewUI: OrgChart.pngPreviewUI;
/**
* The chart filterUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let filterUI = chart.filterUI;
* ```
*/
filterUI: OrgChart.filterUI;
/**
* @ignore
*/
xScrollUI: OrgChart.xScrollUI;
/**
* @ignore
*/
yScrollUI: OrgChart.yScrollUI;
/**
* The chart undoRedoUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let undoRedoUI = chart.undoRedoUI;
* ```
*/
undoRedoUI: OrgChart.undoRedoUI;
/**
* The chart nodeCircleMenuUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let nodeCircleMenuUI = chart.nodeCircleMenuUI;
* ```
*/
nodeCircleMenuUI: OrgChart.circleMenuUI;
/**
* The chart controlsUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let controlsUI = chart.controlsUI;
* ```
*/
controlsUI: OrgChart.controlsUI;
/**
* The chart nodeContextMenuUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let nodeContextMenuUI = chart.nodeContextMenuUI;
* ```
*/
nodeContextMenuUI: OrgChart.menuUI;
/**
* The chart menuUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let menuUI = chart.menuUI;
* ```
*/
menuUI: OrgChart.menuUI;
/**
* The chart toolbarUI object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let toolbarUI = chart.toolbarUI;
* ```
*/
toolbarUI: OrgChart.toolbarUI;
/**
* The chart config object.
* ```typescript
* let chart = new OrgChart('#tree', {});
* let config = chart.config;
* ```
*/
config: OrgChart.options;
/**
* All root nodes in the chart
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.onInit(() => {
* let roots = chart.roots
* });
* chart.load(nodes)
* ```
*/
roots: Array;
/**
* Opens file upload dialog
* ```typescript
* 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;
/**
* Checks if the screen is mobile
* ```typescript
* console.log(OrgChart.isMobile());
* ```
*/
static isMobile(): boolean;
/**
* Checks if the used library is licnsed or not
* ```typescript
* console.log(OrgChart.isTrial());
* ```
*/
static isTrial(): boolean;
/**
* Get the root node of the specified id.
* ```typescript
* let chart = new OrgChart('#tree', {});
* chart.onInit(() => {
* let root = OrgChart.getRootOf(chart.getNode(4));
* });
* chart.load(nodes)
* ```
* @param node
*/
static getRootOf(node: OrgChart.node): OrgChart.node;
/**
* is null, empty or undefined
* ```typescript
* console.log(OrgChart.isNEU(any_prmeter))
* ```
* @param val
*/
static isNEU(val: any): boolean;
/**
* Defines gradient circle form array of colors
* ```typescript
* OrgChart.templates.myTemplate.defs = OrgChart.gradientCircleForDefs('circle', ['#FF0000', '#FFD800'], 60, 10);
* ```
* @param id - id of the element
* @param colors - array of colors
* @param r - radius
* @param strokeWidth - stroke width
*/
static gradientCircleForDefs(id: string | number, colors: Array | string, r: number, strokeWidth: number): string;
/**
* Convert CSV to nodes
* ```typescript
* let chart = new OrgChart('#tree', {});
* fetch('https://balkan.app/content/data.csv')
* .then(response => response.text())
* .then(text => {
* var nodes = OrgChart.convertCsvToNodes(text);
* chart.load(nodes);
* });
* ```
* @param text
*/
static convertCsvToNodes(text: string) : Array