OrgChartJS

44 | 56 | ``` 57 | 58 | 59 | ## 1 click to talk 2 us 60 | 61 | [![OrgChart](https://balkangraph.com/content/img/phone-icon4.png)](https://webcall.me/BALKANGraph) 62 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "orgchart.js", 3 | "authors": [ 4 | "BALKAN App" 5 | ], 6 | "description": "OrgChart JS is a simple, flexible and highly customizable organization chart plugin.", 7 | "main": "orgchart.js", 8 | "keywords": [ 9 | "diagram", 10 | "chart", 11 | "tree", 12 | "orgchart", 13 | "graph", 14 | "svg", 15 | "hierarchy", 16 | "family-tree", 17 | "decision-tree", 18 | "visualization", 19 | "tree-layout", 20 | "hierarchical", 21 | "javascript", 22 | "js", 23 | "html", 24 | "html5" 25 | ], 26 | "license": "MIT", 27 | "homepage": "https://balkan.app" 28 | } -------------------------------------------------------------------------------- /orgchart.d.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /** 5 | * ```typescript 6 | * 7 | * 8 | * 9 | * 10 | * 11 | * OrgChartJS 12 | * 16 | * 17 | * 18 | * 19 | *

20 | * 32 | * 33 | * 34 | * ``` 35 | */ 36 | declare class OrgChart { 37 | /** 38 | * ```typescript 39 | * let chart = new OrgChart('#tree', {}); 40 | * ``` 41 | * @param element HTML element or string selector for example '#tree' 42 | * @param options configuration options 43 | */ 44 | constructor(element?: HTMLElement | string, options?: OrgChart.options); 45 | 46 | 47 | /** 48 | * SVG icons 49 | * @param w - width 50 | * @param h - height 51 | * @param c - color 52 | * @param x - X position 53 | * @param y - Y position 54 | * @returns string with the SVG definition 55 | */ 56 | static icon: { 57 | /** 58 | * ```typescript 59 | * let pngIcon = OrgChart.icon.png(24, 24, "#7A7A7A"); 60 | * ``` 61 | */ 62 | png: (w: string| number, h: string | number, c: string) => string, 63 | /** 64 | * ```typescript 65 | * let pdfIcon = OrgChart.icon.pdf(24, 24, "#7A7A7A"); 66 | * ``` 67 | */ 68 | pdf: (w: string | number, h: string | number, c: string) => string, 69 | /** 70 | * ```typescript 71 | * let svgIcon = OrgChart.icon.svg(24, 24, "#7A7A7A"); 72 | * ``` 73 | */ 74 | svg: (w: string| number, h: string| number, c: string | number) => string, 75 | /** 76 | * ```typescript 77 | * let csvIcon = OrgChart.icon.csv(24, 24, "#7A7A7A"); 78 | * ``` 79 | */ 80 | csv: (w: string| number, h: string| number, c: string| number) => string, 81 | /** 82 | * ```typescript 83 | * let excelIcon = OrgChart.icon.excel(24, 24, "#7A7A7A"); 84 | * ``` 85 | */ 86 | excel: (w: string| number, h: string| number, c: string| number) => string, 87 | /** 88 | * ```typescript 89 | * let powerPointIcon = OrgChart.icon.powerpoint(24, 24, "#7A7A7A"); 90 | * ``` 91 | */ 92 | powerpoint: (w: string| number, h: string| number, c: string| number) => string, 93 | /** 94 | * ```typescript 95 | * let powerPointPreviewIcon = OrgChart.icon.pppreview(24, 24, "#7A7A7A"); 96 | * ``` 97 | */ 98 | pppreview: (w: string| number, h: string| number, c: string| number) => string, 99 | /** 100 | * ```typescript 101 | * let editIcon = OrgChart.icon.edit(24, 24, "#7A7A7A"); 102 | * ``` 103 | */ 104 | edit: (w: string| number, h: string| number, c: string| number) => string, 105 | /** 106 | * ```typescript 107 | * let detailsIcon = OrgChart.icon.details(24, 24, "#7A7A7A"); 108 | * ``` 109 | */ 110 | details: (w: string| number, h: string| number, c: string| number) => string, 111 | /** 112 | * ```typescript 113 | * let removeIcon = OrgChart.icon.remove(24, 24, "#7A7A7A"); 114 | * ``` 115 | */ 116 | remove: (w: string| number, h: string| number, c: string| number) => string, 117 | /** 118 | * ```typescript 119 | * let addIcon = OrgChart.icon.add(24, 24, "#7A7A7A"); 120 | * ``` 121 | */ 122 | add: (w: string| number, h: string| number, c: string| number) => string, 123 | /** 124 | * ```typescript 125 | * let xmlIcon = OrgChart.icon.xml(24, 24, "#7A7A7A"); 126 | * ``` 127 | */ 128 | xml: (w: string| number, h: string| number, c: string| number) => string, 129 | /** 130 | * ```typescript 131 | * let visioIcon = OrgChart.icon.visio(24, 24, "#7A7A7A"); 132 | * ``` 133 | */ 134 | visio: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 135 | /** 136 | * ```typescript 137 | * let linkIcon = OrgChart.icon.link(24, 24, "#7A7A7A"); 138 | * ``` 139 | */ 140 | link: (w: string| number, h: string| number, c: string| number) => string, 141 | /** 142 | * ```typescript 143 | * let happyIcon = OrgChart.icon.happy(24, 24, "#7A7A7A"); 144 | * ``` 145 | */ 146 | happy: (w: string| number, h: string| number, c: string| number) => string, 147 | /** 148 | * ```typescript 149 | * let sadIcon = OrgChart.icon.sad(24, 24, "#7A7A7A"); 150 | * ``` 151 | */ 152 | sad: (w: string| number, h: string| number, c: string| number) => string, 153 | /** 154 | * ```typescript 155 | * let shareIcon = OrgChart.icon.share(24, 24, "#7A7A7A"); 156 | * ``` 157 | */ 158 | share: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 159 | /** 160 | * ```typescript 161 | * let userIcon = OrgChart.icon.user(24, 24, "#7A7A7A"); 162 | * ``` 163 | */ 164 | user: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 165 | /** 166 | * ```typescript 167 | * let undoIcon = OrgChart.icon.undo(24, 24, "#7A7A7A"); 168 | * ``` 169 | */ 170 | undo: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 171 | /** 172 | * ```typescript 173 | * let redoIcon = OrgChart.icon.redo(24, 24, "#7A7A7A"); 174 | * ``` 175 | */ 176 | redo: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string 177 | } 178 | 179 | 180 | 181 | /** 182 | * Can update link (Does the node is dropping under itself) 183 | * ```typescript 184 | * let canDropTheNode = chart.canUpdateLink(draggedNodeId, droppedNodeId)); 185 | * ``` 186 | * @param id child id 187 | * @param pid parent id 188 | */ 189 | canUpdateLink(id: string | number, pid: string | number): boolean; 190 | 191 | 192 | /** 193 | * The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. * 194 | * ```typescript 195 | * let chart = new OrgChart('#tree', {}); 196 | * chart.on('init', function () { 197 | * // console.log("initiated") 198 | * }) 199 | * chart.load(nodes); 200 | * ``` 201 | * @category Event Listeners 202 | * @param type A case-sensitive string representing the event type to listen for. 203 | * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 204 | */ 205 | 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; 206 | 207 | /** 208 | * 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. 209 | * ```typescript 210 | * let chart = new OrgChart('#tree', {}); 211 | * let listener = function(sender, args){ 212 | * console.log(sender.removeListener('update', listener)); 213 | * }; 214 | * chart.on('update', listener); 215 | * chart.load(nodes) 216 | * ``` 217 | }; 218 | 219 | family.on('update', listener); 220 | * @param type A string which specifies the type of event for which to remove an event listener 221 | * @param listener The event listener function of the event handler to remove from the event target 222 | */ 223 | 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; 224 | 225 | 226 | /** 227 | * Occurs when the node data has been updated by updateNode method. 228 | * ```typescript 229 | * var chart = new OrgChart('#tree', {}); 230 | * chart.onUpdateNode((args) => { 231 | * //return false; to cancel the operation 232 | * }); 233 | * ``` 234 | * @category Event Listeners 235 | * @param listener 236 | */ 237 | onUpdateNode(listener: (args: { 238 | /** 239 | * old node data 240 | */ 241 | oldData: nodeData, 242 | /** 243 | * new node data 244 | */ 245 | newData: nodeData 246 | }) => void): OrgChart; 247 | 248 | /** 249 | * 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. 250 | * Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc. 251 | * ```typescript 252 | * var chart = new OrgChart('#tree', {}); 253 | * chart.onUpdated(() => { 254 | * //Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc. 255 | * }); 256 | * ``` 257 | * @category Event Listeners 258 | */ 259 | onUpdated(): OrgChart; 260 | 261 | 262 | /** 263 | * Occurs when a node has been removed by removeNode method. 264 | * ```typescript 265 | * var chart = new OrgChart('#tree', {}); 266 | * chart.onRemoveNode((args) => { 267 | * //return false; to cancel the operation 268 | * }); 269 | * ``` 270 | * @category Event Listeners 271 | * @param listener 272 | */ 273 | onRemoveNode(listener: (args: { 274 | /** 275 | * node id 276 | */ 277 | id: number | string, 278 | /** 279 | * 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. 280 | */ 281 | newPidsAndStpidsForIds: { 282 | newPidsForIds: { [key in any]: string | number }, 283 | newStpidsForIds: { [key in any]: string | number } 284 | } 285 | }) => void): OrgChart; 286 | 287 | /** 288 | * Occurs when a node has been added by addNode method. 289 | * ```typescript 290 | * var chart = new OrgChart('#tree', {}); 291 | * chart.onAddNode((args) => { 292 | * //return false; to cancel the operation 293 | * }); 294 | * ``` 295 | * @category Event Listeners 296 | * @param listener 297 | */ 298 | onAddNode(listener: (args: { 299 | /** 300 | * new added data node 301 | */ 302 | data: nodeData 303 | }) => void): OrgChart; 304 | /** 305 | * The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on. 306 | * ```typescript 307 | * var chart = new OrgChart('#tree', {}); 308 | * chart.onDrag(() => { 309 | * //return false; to cancel the operation 310 | * }); 311 | * ``` 312 | * @category Event Listeners 313 | * @param listener 314 | */ 315 | onDrag(listener: (args: { 316 | /** 317 | * dragged node id 318 | */ 319 | dragId: string | number, 320 | event: MouseEvent, 321 | /** 322 | * array of node ids 323 | * 324 | * this property is initialized only if movable option is set 325 | */ 326 | nodeIds: Array 327 | }) => void): OrgChart; 328 | /** 329 | * The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on. 330 | * ```typescript 331 | * var chart = new OrgChart('#tree', {}); 332 | * chart.onDrop(() => { 333 | * //return false; to cancel the operation 334 | * }); 335 | * ``` 336 | * @category Event Listeners 337 | * @param listener 338 | */ 339 | onDrop(listener: (args: { 340 | /** 341 | * dragged node id 342 | */ 343 | dragId: string | number, 344 | /** 345 | * dropped node id 346 | */ 347 | dropId: string | number, 348 | /** 349 | * draging element 350 | */ 351 | dragNodeElement: HTMLElement, 352 | /** 353 | * Mouse event 354 | */ 355 | event: MouseEvent 356 | }) => void): OrgChart; 357 | 358 | /** 359 | * All chart nodes 360 | * ```typescript 361 | * let chart = new OrgChart('#tree', {}); 362 | * chart.onInit(() => { 363 | * let nodes = chart.nodes; 364 | * }); 365 | * chart.load(nodes) 366 | * ``` 367 | */ 368 | nodes: { [key in any]: OrgChart.node }; 369 | 370 | /** 371 | * Returns true if chart is visible 372 | * ```typescript 373 | * let chart = new OrgChart('#tree', {}); 374 | * chart.onInit(() => { 375 | * console.log(chart.isVisible); 376 | * }); 377 | * chart.load(nodes) 378 | * ``` 379 | */ 380 | isVisible: boolean; 381 | 382 | /** 383 | * Returns the visible nodes ids 384 | * ```typescript 385 | * let chart = new OrgChart('#tree', {}); 386 | * chart.onInit(() => { 387 | * console.log(chart.visibleNodeIds); 388 | * }); 389 | * chart.load(nodes) 390 | * ``` 391 | */ 392 | visibleNodeIds: Array; 393 | 394 | /** 395 | * Updates the node data 396 | * ```typescript 397 | * let chart = new OrgChart('#tree', {}); 398 | * ... 399 | * chart.update({ id: 1, name: "Updated Name", title: "Updated Title" }); 400 | * chart.draw(); 401 | * ``` 402 | * @param newData node data 403 | */ 404 | update(newData: object): OrgChart; 405 | 406 | /** 407 | * Removes specified node from nodes collection 408 | * ```typescript 409 | * let chart = new OrgChart('#tree', {}); 410 | * ... 411 | * chart.remove(2); 412 | * chart.draw(); 413 | * ``` 414 | 415 | * @param id identification number of the node 416 | */ 417 | remove(id: string | number): OrgChart; 418 | /** 419 | * Adds new node to the nodes collection 420 | * ```typescript 421 | * let chart = new OrgChart('#tree', {}); 422 | * ... 423 | * chart.add({ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager" }) 424 | * chart.draw(); 425 | * ``` 426 | 427 | * @param data node data 428 | */ 429 | add(data: object): OrgChart; 430 | 431 | /** 432 | * Adds new node to the nodes collection, redraws the chart and fires remove event 433 | * ```typescript 434 | * let chart = new OrgChart('#tree', {}); 435 | * ... 436 | * chart.addNode({ id: 1, name: "Denny Curtis", title: "CEO" }); 437 | * ``` 438 | * @param data node data 439 | * @param callback called at the end of animation 440 | * @param fireEvent indicates if the add event will be called or not 441 | */ 442 | addNode(data: nodeData, callback?: () => void, fireEvent?: boolean): void; 443 | 444 | /** 445 | * Removes specified node from nodes collection, redraws the chart and fires remove event. 446 | * ```typescript 447 | * var chart = new OrgChart('#tree', {}); 448 | * chart.removeNode(2); 449 | * ``` 450 | * @param id identification number of the node 451 | * @param callback called at the end of animation 452 | * @param fireEvent indicates if the remove event will be called or not 453 | */ 454 | removeNode(id: string | number, callback?: () => void, fireEvent?: boolean): void; 455 | 456 | 457 | /** 458 | * Gets node data. 459 | * ```typescript 460 | * let chart = new OrgChart('#tree', {}); 461 | * ... 462 | * let node = chart.get(2); 463 | * ``` 464 | * @param id identification number of the node 465 | */ 466 | get(id: string | number): nodeData; 467 | /** 468 | * If specified node has assistant/s or partner/s as children will return false. 469 | * ```typescript 470 | * let chart = new OrgChart('#tree', {}); 471 | * ... 472 | * let canRemove = chart.canRemove(2); 473 | * ``` 474 | * @param id identification number of the node 475 | */ 476 | canRemove(id: string | number): boolean; 477 | /** 478 | * Expands specified nodes. 479 | * ```typescript 480 | * let chart = new OrgChart('#tree', {}); 481 | * ... 482 | * chart.expand(1, [2]); 483 | * ``` 484 | * @param id the id of the node that will not move during the animation 485 | * @param ids node ids that will be expanded 486 | * @param callback called after the animation completes 487 | */ 488 | expand(id: string | number, ids: Array | "all", callback?: () => void): void; 489 | /** 490 | * Collapses specified nodes. 491 | * ```typescript 492 | * let chart = new OrgChart('#tree', {}); 493 | * ... 494 | * chart.collapse(1, [2]); 495 | * ``` 496 | * @param id the id of the node that will not move 497 | * @param ids node ids that will be collapsed 498 | * @param callback called after the animation completes 499 | */ 500 | collapse(id: string | number, ids: Array, callback?: () => void): void; 501 | /** 502 | * Expand/Collapse lists of nodes. 503 | * ```typescript 504 | * let chart = new OrgChart('#tree', {}); 505 | * ... 506 | * chart.expandCollapse(1, [2], [3]); 507 | * ``` 508 | * @param id the id of the node that will not move 509 | * @param expandIds expand all nodes with ids 510 | * @param collapseIds collpase all nodes with ids 511 | * @param callback called after the animation completes 512 | */ 513 | expandCollapse(id: string | number, expandIds: Array, collapseIds: Array, callback?: () => void): void; 514 | /** 515 | * Changes roots order. 516 | * ```typescript 517 | * let chart = new OrgChart('#tree', {}); 518 | * ... 519 | * chart.changeRoots(1, [2]); 520 | * ``` 521 | * @param id id of a node that will not change is position, can be null 522 | * @param roots roots id array in the required order 523 | * @param callback called after the roots are changed and animation completes 524 | */ 525 | changeRoots(id: string | number, roots: Array, callback?: () => void): void; 526 | /** 527 | * Maximize the node. Without parameters maximize all nodes. 528 | * ```typescript 529 | * let chart = new OrgChart('#tree', {}); 530 | * ... 531 | * chart.maximize(); 532 | * ``` 533 | * @param id the id of the node, if id is null, undefined ot empty string will maximize all nodes 534 | * @param horizontalCenter center horizontally 535 | * @param verticalCenter center vertically 536 | * @param callback called when the animation completes 537 | */ 538 | maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void; 539 | /** 540 | * ```typescript 541 | * let chart = new OrgChart('#tree', {}); 542 | * ... 543 | * chart.minimize(); 544 | * ``` 545 | * Minimize the node. Without parameters minimize all nodes. 546 | * @param id the id of the node, if id is null, undefined ot empty string will minimize all nodes 547 | * @param callback called when the animation completes 548 | */ 549 | minimize(id?: string | number, callback?: () => void): void; 550 | /** 551 | * Load nodes data. 552 | * ```typescript 553 | * let chart = new OrgChart('#tree', {}); 554 | * ... 555 | * chart.load([ 556 | * { id: 1, name: "Denny Curtis" }, 557 | * { id: 2, pid: 1, name: "Ashley Barnett" }, 558 | * { id: 3, pid: 1, name: "Caden Ellison" } 559 | * ]); 560 | * ``` 561 | * @param data nodes data array 562 | * @param callback function called after the load 563 | */ 564 | load(data: Array, callback?: () => void): OrgChart; 565 | 566 | 567 | 568 | /** 569 | * Updates the node data, redraws the chart and fires update event. 570 | * ```typescript 571 | * let chart = new OrgChart('#tree', {}); 572 | * ... 573 | * chart.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" }); 574 | * ``` 575 | * @param data node data 576 | * @param callback function called when the animation completes 577 | * @param fireEvent if it set to true the update event is called 578 | */ 579 | updateNode(data: nodeData, callback?: () => void, fireEvent?: boolean): void; 580 | 581 | /** 582 | * Loads nodes from xml. 583 | * ```typescript 584 | * let chart = new OrgChart('#tree', {}); 585 | * let xml = ''; 586 | * chart.loadXML(xml); 587 | * ``` 588 | * @param xml Xml with node structure 589 | * @param callback function called after the load 590 | */ 591 | loadXML(xml: string, callback?: () => void): OrgChart; 592 | /** 593 | * Gets nodes as xml. 594 | * ```typescript 595 | * let chart = new OrgChart('#tree', {}); 596 | * let xml = chart.getXML(); 597 | * ``` 598 | */ 599 | getXML(): string; 600 | /** 601 | * Draws the chart. 602 | * ```typescript 603 | * let chart = new OrgChart('#tree', {}); 604 | * ... 605 | * chart.update({ id: 1, name: "Updated Name", title: "Updated Title" }); 606 | * chart.draw(); 607 | * ``` 608 | * @param action Action for example OrgChart.action.centerNode, default is OrgChart.action.update 609 | * @param actionParams parameters for the action 610 | * @param callback called when the animation completes 611 | */ 612 | draw(action?: OrgChart.action, actionParams?: any, callback?: () => void): void; 613 | /** 614 | * Gets the width of the container. 615 | * ```typescript 616 | * let chart = new OrgChart('#tree', {}); 617 | * ... 618 | * let width = chart.width(); 619 | * ``` 620 | */ 621 | width(): number; 622 | /** 623 | * ```typescript 624 | * let chart = new OrgChart('#tree', {}); 625 | * ... 626 | * let height = chart.height(); 627 | * ``` 628 | * Gets the height of the container. 629 | */ 630 | height(): number; 631 | /** 632 | * Gets the view box attribute of the svg html element. 633 | * ```typescript 634 | * let chart = new OrgChart('#tree', {}); 635 | * ... 636 | * let viewBox = chart.getViewBox(); 637 | * ``` 638 | */ 639 | getViewBox(): Array; 640 | /** 641 | * Sets the view box attribute of the svg html element. 642 | * ```typescript 643 | * let chart = new OrgChart('#tree', {}); 644 | * ... 645 | * chart.setViewBox(); 646 | * ``` 647 | * @param viewBox 648 | */ 649 | setViewBox(viewBox: Array): void; 650 | /** 651 | * Gets the current scale of the chart. 652 | * ```typescript 653 | * let chart = new OrgChart('#tree', {}); 654 | * ... 655 | * let scale = chart.getScale(); 656 | * ``` 657 | * @param viewBox 658 | */ 659 | getScale(viewBox?: Array): number; 660 | 661 | /** 662 | * Sets the current scale of the chart. 663 | * Returns the actual scale limited by scaleMax and scaleMin 664 | * ```typescript 665 | * let chart = new OrgChart('#tree', {}); 666 | * ... 667 | * chart.setScale(1.2); 668 | * ``` 669 | * @param newScale new scale value 670 | */ 671 | setScale(newScale: number): number; 672 | /** 673 | * Animates specified node with ripple animation - highlight the node. 674 | * ```typescript 675 | * let chart = new OrgChart('#tree', {}); 676 | * ... 677 | * chart.ripple(2); 678 | * ``` 679 | * @param id the id of the node 680 | * @param clientX x value of the ripple center in the node 681 | * @param clientY y value of the ripple center in the node 682 | */ 683 | ripple(id: string | number, clientX?: number, clientY?: number): void; 684 | /** 685 | * Centers specified node on the screen. 686 | * ```typescript 687 | * let chart = new OrgChart('#tree', {}); 688 | * ... 689 | * chart.center(2); 690 | * ``` 691 | * @param nodeId the id of the node 692 | * @param options parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false 693 | * @param callback called when the animation completes 694 | */ 695 | center(nodeId: string | number, options?: { 696 | parentState: any, 697 | childrenState: any, 698 | rippleId: string | number, 699 | vertical: boolean, 700 | horizontal: boolean 701 | } | null, callback?: () => void): void; 702 | 703 | 704 | 705 | /** 706 | * Fits the content to the visible area. 707 | * ```typescript 708 | * let chart = new OrgChart('#tree', {}); 709 | * ... 710 | * chart.fit(); 711 | * ``` 712 | * @param callback called when the animation completes 713 | */ 714 | fit(callback?: () => void): void; 715 | /** 716 | * Toggles full screen mode. 717 | * ```typescript 718 | * let chart = new OrgChart('#tree', {}); 719 | * ... 720 | * chart.toggleFullScreen(); 721 | * ``` 722 | */ 723 | toggleFullScreen(): void; 724 | /** 725 | * Gets the node as {@link OrgChart.node} object. 726 | * ```typescript 727 | * let chart = new OrgChart('#tree', {}); 728 | * ... 729 | * let node = chart.getNode(2); 730 | * ``` 731 | * @param nodeId 732 | */ 733 | getNode(nodeId: string | number): OrgChart.node; 734 | 735 | 736 | /** 737 | * Sets layout. 738 | * ```typescript 739 | * let chart = new OrgChart('#tree', {}); 740 | * ... 741 | * chart.setLayout(OrgChart.tree); 742 | * ``` 743 | * @param layout layout type 744 | * @param lcn lyout config name for the specified sub tree 745 | */ 746 | 747 | setLayout(layout: OrgChart.layout | number, lcn?: string): void; 748 | /** 749 | * Sets orientation. 750 | * ```typescript 751 | * let chart = new OrgChart('#tree', {}); 752 | * ... 753 | * chart.setOrientation(2); 754 | * ``` 755 | * @param orientation orientation type 756 | * @param lcn lyout config name for the specified sub tree 757 | * @param callback called at the end of animation 758 | */ 759 | setOrientation(orientation: OrgChart.orientation, lcn?: string, callback?: () => void): void; 760 | 761 | /** 762 | * ```typescript 763 | * let chart = new OrgChart('#tree', {}); 764 | * ... 765 | * chart.moveNodesToVisibleArea([2, 3]); 766 | * ``` 767 | * Moves specified nodes to the visible area. 768 | * @param ids Array of node ids 769 | * @param callback called at the end of animation 770 | */ 771 | moveNodesToVisibleArea(ids: Array, callback?: () => void): void; 772 | 773 | /** 774 | * Search in the chart. 775 | * ```typescript 776 | * let chart = new OrgChart('#tree', {}); 777 | * ... 778 | * chart.search("Ava"); 779 | * ``` 780 | * @param value search for value 781 | * @param searchInFields search in field names 782 | * @param retrieveFields retrive data for fields 783 | * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...} 784 | */ 785 | search(value: string, searchInFields?: Array, retrieveFields?: Array): Array<{ 786 | id: number | string, 787 | name: string, 788 | __score: number, 789 | __searchField: string, 790 | __searchMarks: string 791 | }>; 792 | /** 793 | * Gets collpased node ids of the specifeid node 794 | * ```typescript 795 | * let chart = new OrgChart('#tree', {}); 796 | * ... 797 | * let ids = chart.getCollapsedIds(2); 798 | * ``` 799 | * @param node 800 | */ 801 | getCollapsedIds(node: OrgChart.node): Array; 802 | /** 803 | * State to url. 804 | * ```typescript 805 | * let chart = new OrgChart('#tree', {}); 806 | * ... 807 | * let url = chart.stateToUrl(); 808 | * ``` 809 | * {@link https://balkan.app/OrgChartJS/Docs/State | See doc...} 810 | */ 811 | stateToUrl(): string; 812 | /** 813 | * Genereates unique identification number that can be used for new nodes 814 | * ```typescript 815 | * let chart = new OrgChart('#tree', {}); 816 | * ... 817 | * let id = chart.generateId(); 818 | * ``` 819 | */ 820 | generateId(): string; 821 | /** 822 | * Destroys the object. 823 | * ```typescript 824 | * let chart = new OrgChart('#tree', {}); 825 | * ... 826 | * chart.destroy(); 827 | * ``` 828 | */ 829 | destroy(): void; 830 | /** 831 | * Replaces the id, pid, stpid, ppid and the ids in clinks, slinks, dottedLines, groupDottedLines. 832 | * After the replacment updates the UI 833 | * ```typescript 834 | * let chart = new OrgChart('#tree', {}); 835 | * ... 836 | * chart.replaceIds[{2:21, 3:31}); 837 | * ``` 838 | * @param old_new_ids dictionary containing old and new ids 839 | * @param callback called when the replacment completes 840 | */ 841 | replaceIds(old_new_ids: { 842 | [key: string]: string | number 843 | }, callback?: () => void): void; 844 | /** 845 | * Adds curved link. 846 | * ```typescript 847 | * let chart = new OrgChart('#tree', {}); 848 | * ... 849 | * chart.addClink(4, 0, 'text') 850 | * chart.draw(); 851 | * ``` 852 | * @param from from node with id 853 | * @param to to node with id 854 | * @param label link label 855 | * @param template link template, for example 'orange' 856 | */ 857 | addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChart; 858 | /** 859 | * Removes curved link. 860 | * ```typescript 861 | * let chart = new OrgChart('#tree', {}); 862 | * ... 863 | * chart.removeClink(4, 0) 864 | * chart.draw(); 865 | * ``` 866 | * @param from from node with id 867 | * @param to to node with id 868 | */ 869 | removeClink(from: string | number, to: string | number): OrgChart; 870 | /** 871 | * Adds second link. 872 | * ```typescript 873 | * let chart = new OrgChart('#tree', {}); 874 | * ... 875 | * chart.addSlink(4, 0, 'text') 876 | * chart.draw(); 877 | * ``` 878 | * @param from from node with id 879 | * @param to to node with id 880 | * @param label link label 881 | * @param template link template, for example 'orange' 882 | */ 883 | addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChart; 884 | /** 885 | * Removes second link. 886 | * ```typescript 887 | * let chart = new OrgChart('#tree', {}); 888 | * ... 889 | * chart.removeSlink(4, 0) 890 | * chart.draw(); 891 | * ``` 892 | * @param from from node with id 893 | * @param to to node with id 894 | */ 895 | removeSlink(from: string | number, to: string | number): OrgChart; 896 | /** 897 | * Gets svg html element 898 | * ```typescript 899 | * let chart = new OrgChart('#tree', {}); 900 | * ... 901 | * let svg = chart.getSvg(); 902 | * ``` 903 | */ 904 | getSvg(): SVGAElement; 905 | /** 906 | * Gets node html element 907 | * ```typescript 908 | * let chart = new OrgChart('#tree', {}); 909 | * ... 910 | * let nodeElement = chart.getNodeElement(2); 911 | * ``` 912 | * @param id node id 913 | */ 914 | getNodeElement(id: string | number): HTMLElement; 915 | /** 916 | * Gets menu button html element 917 | * ```typescript 918 | * let chart = new OrgChart('#tree', {}); 919 | * ... 920 | * let menuButton = chart.getMenuButton(2); 921 | * ``` 922 | */ 923 | getMenuButton(): HTMLElement; 924 | /** 925 | * Exports the details form to PDF. 926 | * ```typescript 927 | * let chart = new OrgChart('#tree', {}); 928 | * ... 929 | * chart.exportPDFProfile({nodeId: 2}); 930 | * ``` 931 | * @param options export options 932 | * @param callback called when the export completes 933 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 934 | */ 935 | exportPDFProfile(options: OrgChart.exportOptions, callback?: () => void): void; 936 | /** 937 | * Exports the details form to PDF. 938 | * ```typescript 939 | * let chart = new OrgChart('#tree', {}); 940 | * ... 941 | * chart.exportPNGProfile({nodeId: 2}); 942 | * ``` 943 | * @param options export options 944 | * @param callback called when the export completes 945 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 946 | */ 947 | exportPNGProfile(options: OrgChart.exportOptions, callback?: () => void): void; 948 | /** 949 | * Exports to CSV 950 | * ```typescript 951 | * let chart = new OrgChart('#tree', {}); 952 | * ... 953 | * chart.exportCSV(); 954 | * ``` 955 | * @param filename The name of the exported file 956 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 957 | */ 958 | exportCSV(filename?: string | OrgChart.exportCSVXMLJSONOptions): void; 959 | /** 960 | * Exports to XML 961 | * ```typescript 962 | * let chart = new OrgChart('#tree', {}); 963 | * ... 964 | * chart.exportXML(); 965 | * ``` 966 | * @param filename The name of the exported file 967 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 968 | */ 969 | exportXML(filename: string | OrgChart.exportCSVXMLJSONOptions): void; 970 | /** 971 | * Exports to JSON 972 | * ```typescript 973 | * let chart = new OrgChart('#tree', {}); 974 | * ... 975 | * chart.exportJSON(); 976 | * ``` 977 | * @param filename The name of the exported file 978 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 979 | */ 980 | exportJSON(filename?: string | OrgChart.exportCSVXMLJSONOptions ): void; 981 | 982 | /** 983 | * ```typescript 984 | * let chart = new OrgChart('#tree', {}); 985 | * ... 986 | * chart.shareProfile(2); 987 | * ``` 988 | * Shares node data, uses build-in device sharing functionallity. 989 | * @param id node id 990 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 991 | */ 992 | shareProfile(id: string | number): void; 993 | /** 994 | * Exports to PDF document 995 | * ```typescript 996 | * let chart = new OrgChart('#tree', {}); 997 | * ... 998 | * chart.exportPDF(); 999 | * ``` 1000 | * @param options export options 1001 | * @param callback called when the export completes 1002 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 1003 | */ 1004 | exportPDF(options?: OrgChart.exportOptions, callback?: () => void): void; 1005 | /** 1006 | * Exports to PNG document 1007 | * ```typescript 1008 | * let chart = new OrgChart('#tree', {}); 1009 | * ... 1010 | * chart.exportPNG(); 1011 | * ``` 1012 | * @param options export options 1013 | * @param callback called when the export completes 1014 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 1015 | */ 1016 | exportPNG(options?: OrgChart.exportOptions, callback?: () => void): void; 1017 | /** 1018 | * Exports to SVG document 1019 | * ```typescript 1020 | * let chart = new OrgChart('#tree', {}); 1021 | * ... 1022 | * chart.exportSVG(); 1023 | * ``` 1024 | * @param options export options 1025 | * @param callback called when the export completes 1026 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 1027 | */ 1028 | exportSVG(options?: OrgChart.exportOptions, callback?: () => void): void; 1029 | /** 1030 | * Exports to Visio document 1031 | * ```typescript 1032 | * let chart = new OrgChart('#tree', {}); 1033 | * ... 1034 | * chart.exportVisio(); 1035 | * ``` 1036 | * @param options export options 1037 | * @param callback called when the export completes 1038 | * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...} 1039 | */ 1040 | exportVisio(options?: OrgChart.exportOptions, callback?: () => void): void; 1041 | exportToPowerPoint(options?: OrgChart.exportPowerPontOptions, callback?: () => void): void; 1042 | exportToPDF(options?: OrgChart.exportPDFOptions, callback?: () => void): void; 1043 | exportToPNG(options?: OrgChart.exportPNGOptions, callback?: () => void): void; 1044 | 1045 | /** 1046 | * Imports CSV file. 1047 | * ```typescript 1048 | * let chart = new OrgChart('#tree', {}); 1049 | * ... 1050 | * chart.importCSV(); 1051 | * ``` 1052 | * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...} 1053 | */ 1054 | importCSV(): void; 1055 | /** 1056 | * Imports XML file. 1057 | * ```typescript 1058 | * let chart = new OrgChart('#tree', {}); 1059 | * ... 1060 | * chart.importXML(); 1061 | * ``` 1062 | * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...} 1063 | */ 1064 | importXML(): void; 1065 | 1066 | /** 1067 | * Imports JSON file. 1068 | * ```typescript 1069 | * let chart = new OrgChart('#tree', {}); 1070 | * ... 1071 | * chart.importJSON(); 1072 | * ``` 1073 | * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...} 1074 | */ 1075 | importJSON(): void; 1076 | 1077 | /** 1078 | * Zoom out or zoom in the chart. 1079 | * ```typescript 1080 | * let chart = new OrgChart('#tree', {}); 1081 | * ... 1082 | * chart.zoom(true); 1083 | * ``` 1084 | * @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. 1085 | * @param center array [x, y], where x is x percantege from the width and y is y percentage from the height. 1086 | * @param shouldAnimate should animate 1087 | * @param callback called when the animation completes 1088 | */ 1089 | zoom(delta: boolean | number, center?: Array, shouldAnimate?: boolean, callback?: () => void): void; 1090 | 1091 | /** 1092 | * Magnify(Zoom in) specific node in the chart. 1093 | * ```typescript 1094 | * let chart = new OrgChart('#tree', {}); 1095 | * ... 1096 | * chart.magnify(2, 1.25); 1097 | * ``` 1098 | * @param id id of the node 1099 | * @param scale scale to magnify 1100 | * @param front show on front or back 1101 | * @param anim animation type 1102 | */ 1103 | magnify(id: string | number, scale: number, front?: boolean, anim?: OrgChart.anim | null, callback?: () => void): void; 1104 | 1105 | /** 1106 | * Starts the move 1107 | * ```typescript 1108 | * let chart = new OrgChart('#tree', {}); 1109 | * ... 1110 | * chart.moveStart({right: true}); 1111 | * ``` 1112 | * @param movePosition move position 1113 | * @param tick callback function in each step 1114 | * @param func the name of the animation function, for example OrgChart.anim.inSin 1115 | * @param duration duration before going to 100 percent speed 1116 | */ 1117 | moveStart(movePosition: OrgChart.move, tick?: () => void, func?: OrgChart.anim, duration?: number): void; 1118 | 1119 | /** 1120 | * Ends the move 1121 | * ```typescript 1122 | * let chart = new OrgChart('#tree', {}); 1123 | * ... 1124 | * chart.moveEnd(); 1125 | */ 1126 | moveEnd(): void; 1127 | 1128 | /** 1129 | * Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method. 1130 | * ```typescript 1131 | * let chart = new OrgChart('#tree', {}); 1132 | * ... 1133 | * chart.undo(); 1134 | * ``` 1135 | * @param callback called when the animation completes 1136 | */ 1137 | undo(callback?: () => void): void; 1138 | /** 1139 | * Redo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method. 1140 | * ```typescript 1141 | * let chart = new OrgChart('#tree', {}); 1142 | * ... 1143 | * chart.redo(); 1144 | * ``` 1145 | * @param callback called when the animation completes 1146 | */ 1147 | redo(callback?: () => void): void; 1148 | 1149 | /** 1150 | * Clears all Redo stack steps. 1151 | * ```typescript 1152 | * let chart = new OrgChart('#tree', {}); 1153 | * ... 1154 | * chart.clearRedo(); 1155 | * ``` 1156 | */ 1157 | clearRedo(): void; 1158 | 1159 | /** 1160 | * Clears all Undo stack steps. 1161 | * ```typescript 1162 | * let chart = new OrgChart('#tree', {}); 1163 | * ... 1164 | * chart.clearUndo(); 1165 | * ``` 1166 | */ 1167 | clearUndo(): void; 1168 | /** 1169 | * Returns the number of Undo stack steps 1170 | * ```typescript 1171 | * let chart = new OrgChart('#tree', {}); 1172 | * ... 1173 | * let undoSteps = chart.undoStepsCount(); 1174 | * ``` 1175 | */ 1176 | undoStepsCount(): number; 1177 | /** 1178 | * Returns the number of Redo stack steps 1179 | * ```typescript 1180 | * let chart = new OrgChart('#tree', {}); 1181 | * ... 1182 | * let redoSteps = chart.redoStepsCount(); 1183 | * ``` 1184 | */ 1185 | redoStepsCount(): number; 1186 | 1187 | 1188 | /** 1189 | * The onField() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. 1190 | * ```typescript 1191 | * let chart = new OrgChart('#tree', {}); 1192 | * chart.onField((args) => { 1193 | * //return false; to cancel 1194 | * }); 1195 | * chart.load(nodes); 1196 | * ``` 1197 | * @category Event Listeners 1198 | * @param listener 1199 | */ 1200 | onField(listener: (this: OrgChart, args: { 1201 | /** 1202 | * the node 1203 | */ 1204 | node: OrgChart.node, 1205 | /** 1206 | * node data json object 1207 | */ 1208 | data: object, 1209 | /** 1210 | * value of the filed, can be changed in the event 1211 | */ 1212 | value: any, 1213 | /** 1214 | * svg or html element of the filed, can be changed in the event 1215 | */ 1216 | element: string, 1217 | /** 1218 | * name of the field 1219 | */ 1220 | name: string 1221 | /** 1222 | * field template name 1223 | */ 1224 | field: string 1225 | }) => void | boolean): OrgChart; 1226 | 1227 | /** 1228 | * Occurs when the nodes in OrgChart has been created and loaded to the DOM. 1229 | * ```typescript 1230 | * let chart = new OrgChart('#tree', {}); 1231 | * chart.onInit(() => { 1232 | * }); 1233 | * chart.load(nodes); 1234 | * ``` 1235 | * @category Event Listeners 1236 | * @param listener 1237 | */ 1238 | onInit(listener: (this: OrgChart) => void): OrgChart; 1239 | 1240 | /** 1241 | * The onRedraw event occurs when the chart is redrawed. 1242 | * ```typescript 1243 | * let chart = new OrgChart('#tree', {}); 1244 | * chart.onRedraw(() => { 1245 | * }); 1246 | * chart.load(nodes); 1247 | * ``` 1248 | * @category Event Listeners 1249 | * @param listener 1250 | */ 1251 | onRedraw(listener: (this: OrgChart) => void): OrgChart; 1252 | 1253 | /** 1254 | * The onExpandCollpaseButtonClick event occurs when the chart is redrawed. 1255 | * ```typescript 1256 | * let chart = new OrgChart('#tree', {}); 1257 | * chart.onExpandCollpaseButtonClick(() => { 1258 | * //return false; to cancel the operation 1259 | * }); 1260 | * chart.load(nodes); 1261 | * ``` 1262 | * @category Event Listeners 1263 | * @param listener 1264 | */ 1265 | onExpandCollpaseButtonClick(listener: (this: OrgChart, args: { 1266 | /** 1267 | * Indicates id the operation is collaps or expand 1268 | */ 1269 | collapsing: boolean, 1270 | /** 1271 | * the id of the clicked node 1272 | */ 1273 | id: number | string, 1274 | /** 1275 | * node ids that will be expanded or collapsed 1276 | */ 1277 | ids: Array 1278 | }) => void): OrgChart; 1279 | 1280 | /** 1281 | * 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. 1282 | * ```typescript 1283 | * let chart = new OrgChart('#tree', {}); 1284 | * chart.onExportStart(() => { 1285 | * args.styles += ''; 1286 | * //return false; to cancel the operation 1287 | * }); 1288 | * chart.load(nodes); 1289 | * ``` 1290 | * @category Event Listeners 1291 | * @param listener 1292 | */ 1293 | onExportStart(listener: (this: OrgChart, args: 1294 | { 1295 | /** 1296 | * the content to be exported 1297 | * 1298 | * this property is initialized only for PDF/PNG/SVG exports 1299 | */ 1300 | content: string, 1301 | /** 1302 | * export options 1303 | * 1304 | * this property is initialized only for PDF/PNG/SVG exports 1305 | */ 1306 | options: OrgChart.exportOptions, 1307 | /** 1308 | * add extra styles 1309 | * 1310 | * this property is initialized only for PDF/PNG/SVG exports 1311 | */ 1312 | styles: string, 1313 | /** 1314 | * an object that discribes pages to be exported 1315 | * 1316 | * this property is initialized only for PDF/PNG exports 1317 | */ 1318 | pages: any, 1319 | /** 1320 | * extension 1321 | * 1322 | * this property is initialized only for CSV/XML 1323 | */ 1324 | ext: string, 1325 | /** 1326 | * filename, you can change the filename here 1327 | * 1328 | * this property is initialized only for CSV/XML exports 1329 | */ 1330 | filename: string, 1331 | /** 1332 | * array of node objects 1333 | * 1334 | * this property is initialized only for CSV/XML exports 1335 | */ 1336 | nodes: Array