/**
* ```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, options?: OrgChart.options);
/**
* 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) => string,
/**
* ```typescript
* let pdfIcon = OrgChart.icon.pdf(24, 24, "#7A7A7A");
* ```
*/
pdf: (w: string | number, h: string | number, c: string) => string,
/**
* ```typescript
* let svgIcon = OrgChart.icon.svg(24, 24, "#7A7A7A");
* ```
*/
svg: (w: string| number, h: string| number, c: string | number) => string,
/**
* ```typescript
* let csvIcon = OrgChart.icon.csv(24, 24, "#7A7A7A");
* ```
*/
csv: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let excelIcon = OrgChart.icon.excel(24, 24, "#7A7A7A");
* ```
*/
excel: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let powerPointIcon = OrgChart.icon.powerpoint(24, 24, "#7A7A7A");
* ```
*/
powerpoint: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let powerPointPreviewIcon = OrgChart.icon.pppreview(24, 24, "#7A7A7A");
* ```
*/
pppreview: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let editIcon = OrgChart.icon.edit(24, 24, "#7A7A7A");
* ```
*/
edit: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let detailsIcon = OrgChart.icon.details(24, 24, "#7A7A7A");
* ```
*/
details: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let removeIcon = OrgChart.icon.remove(24, 24, "#7A7A7A");
* ```
*/
remove: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let addIcon = OrgChart.icon.add(24, 24, "#7A7A7A");
* ```
*/
add: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let xmlIcon = OrgChart.icon.xml(24, 24, "#7A7A7A");
* ```
*/
xml: (w: string| number, h: string| number, c: 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) => string,
/**
* ```typescript
* let happyIcon = OrgChart.icon.happy(24, 24, "#7A7A7A");
* ```
*/
happy: (w: string| number, h: string| number, c: string| number) => string,
/**
* ```typescript
* let sadIcon = OrgChart.icon.sad(24, 24, "#7A7A7A");
* ```
*/
sad: (w: string| number, h: string| number, c: 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;
/**
* 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;
/**
* 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;
/**
* 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: nodeData,
/**
* new node data
*/
newData: 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: 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
}) => 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
* ```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: nodeData, callback?: () => void, fireEvent?: boolean): 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;
/**
* 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): 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: 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;
/**
* 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;
/**
* 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
}>;
/**
* Gets collpased node ids of the specifeid node
* ```typescript
* let chart = new OrgChart('#tree', {});
* ...
* let ids = chart.getCollapsedIds(2);
* ```
* @param node
*/
getCollapsedIds(node: OrgChart.node): Array;
/**
* 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.exportPowerPontOptions, 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;
/**
* 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
}) => 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: {
options: {
childLevels?: number,
expandChildren?: boolean,
fileName?: string,
footer?: string,
header?: string,
height?: number,
width?: number,
landscape?: boolean,
margin?: Array,
min?: boolean,
openInNewTab?: boolean,
padding?: number,
parentLevels?: number,
type?: string,
pages?: Array<{
chartInstance?: OrgChart,
childLevels?: number,
expandChildren?: boolean,
footer?: string,
header?: string,
margin?: Array,
min?: boolean,
padding?: number,
parentLevels?: number,
isProfile?: boolean,
nodeId?: number | string,
content?: string,
height?: number,
width?: number,
}>
},
pages?: Array,
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