@balkangraph/orgchart.js 8.2.0 → 8.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/orgchart.d.ts +1704 -1820
  2. package/orgchart.js +1 -1
  3. package/package.json +1 -1
package/orgchart.d.ts CHANGED
@@ -1,2043 +1,1927 @@
1
- declare class OrgChart {
1
+ declare class OrgChart extends OrgChartBase {
2
2
  nodes: { [key: string | number]: OrgChart.node };
3
3
  isVisible: boolean;
4
4
 
5
5
  /**
6
6
  * @param element HTML element or string selector for example '#tree'
7
- * @param options
7
+ * @param options configuration options
8
8
  */
9
- constructor(element: HTMLElement | string, options: {
10
- /**
11
- * Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - *true*.
12
- * ```typescript
13
- * var chart = new OrgChart('#tree', {
14
- * interactive: false
15
- * });
16
- * ```
17
- */
18
- interactive: boolean,
19
-
20
- /**
21
- * Color mode. Default value - *light*.
22
- * ```typescript
23
- * var chart = new OrgChart('#tree', {
24
- * mode: "dark"
25
- * });
26
- * ```
27
- */
28
- mode: "dark" | "light",
29
- /**
30
- * Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need. Default value - *true*.
31
- * ```typescript
32
- * var chart = new OrgChart('#tree', {
33
- * lazyLoading: false
34
- * });
35
- * ```
36
- */
37
- lazyLoading: boolean,
38
-
39
- /**
40
- * With the drag and drop features enabled you can move nodes easily and change the tree structure. Default value - *false*.
41
- * ```typescript
42
- * var chart = new OrgChart('#tree', {
43
- * enableDragDrop: true
44
- * });
45
- * ```
46
- */
47
- enableDragDrop: boolean,
48
-
49
- /**
50
- * Enables advanced search. Default value is true.
51
- * ```typescript
52
- * var chart = new OrgChart('#tree', {
53
- * enableSearch: false
54
- * });
55
- * ```
56
- */
57
- enableSearch: boolean,
58
-
59
- /**
60
- * Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad. Default value - *false*.
61
- * ```typescript
62
- * var chart = new OrgChart('#tree', {
63
- * enableTouch: true
64
- * });
65
- * ```
66
- */
67
- enableTouch: boolean,
68
- /**
69
- * Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the chart. Default value - *false*.
70
- * ```typescript
71
- * var chart = new OrgChart('#tree', {
72
- * enableKeyNavigation: true
73
- * });
74
- * ```
75
- * {@link https://balkan.app/OrgChartJS/Docs/KeyNavigation | See doc...}
76
- */
77
- enableKeyNavigation: boolean,
78
- /**
79
- * Shows mini map over the expanded tree. Default value - *false*.
80
- * ```typescript
81
- * var chart = new OrgChart('#tree', {
82
- * miniMap: true
83
- * });
84
- * ```
85
- */
86
- miniMap: boolean,
87
- /**
88
- * Enables edit, add, remove and other node operations. Also you can define your own node operation.
89
- * ```typescript
90
- * var chart = new OrgChart('#tree', {
91
- * nodeMenu:{
92
- * details: {text:"Details"},
93
- * edit: {text:"Edit"},
94
- * add: {text:"Add"},
95
- * remove: {text:"Remove"},
96
- * myMenuItem: {text:"My node menu Item", onClick: function {}}
97
- * }
98
- * });
99
- * ```
100
- * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
101
- */
102
- nodeMenu: OrgChart.menu;
103
- /**
104
- * With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template.
105
- * ```typescript
106
- * var chart = new OrgChart('#tree', {
107
- * nodeCircleMenu: {
108
- * editNode: {
109
- * icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
110
- * text: "Edit node",
111
- * color: "white"
112
- * },
113
- * addClink: {
114
- * icon: OrgChart.icon.link(24, 24, '#aeaeae'),
115
- * text: "Add C link",
116
- * color: '#fff',
117
- * draggable: true
118
- * }
119
- * }
120
- * });
121
- * ```
122
- * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
123
- */
124
- nodeCircleMenu: OrgChart.menu,
125
- /**
126
- * Customizable context menu. Also you can define your own node operation.
127
- * ```typescript
128
- * var chart = new OrgChart('#tree', {
129
- * nodeContextMenu:{
130
- * details: {text:"Details"},
131
- * edit: {text:"Edit"},
132
- * add: {text:"Add"},
133
- * remove: {text:"Remove"}
134
- * myMenuItem: {text:"My node menu Item", onClick: function {}}
135
- * }
136
- * });
137
- * ```
138
- * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
139
- */
140
- nodeContextMenu: OrgChart.menu,
141
- /**
142
- * Enables export to excel, export to svg and other OrgChart operations. Also you can define your own OrgChart operation.
143
- * ```typescript
144
- * var chart = new OrgChart('#tree', {
145
- * menu:{
146
- * svg: { text: "Export SVG" },
147
- * csv: { text: "Export CSV" }
148
- * myMenuItem: {text:"My node menu Item", onClick: function {}}
149
- * }
150
- * });
151
- * ```
152
- * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
153
- */
154
- menu: OrgChart.menu,
155
- /**
156
- * With the toolbar enabled allows you to change the layout, zoom in/out, expand all nodes, etc.
157
- * ```typescript
158
- * var chart = new OrgChart('#tree', {
159
- * toolbar: {
160
- * layout: true,
161
- * zoom: true,
162
- * fit: true,
163
- * expandAll: false,
164
- * fullScreen: true
165
- * },
166
- * });
167
- * ```
168
- */
169
- toolbar: OrgChart.toolbar,
170
- /**
171
- * Stops the chart locking to the top of the screen once you move it.
172
- * ```typescript
173
- * var chart = new OrgChart('#tree', {
174
- * sticky: false
175
- * });
176
- * ```
177
- */
178
- sticky: boolean,
179
- /**
180
- * nodeMouseClick can accept the following values:
181
- * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
182
- * - OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
183
- * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
184
- * - OrgChart.action.none - do nothing on node click event
185
- * - OrgChart.action.pan - allows you to move the chart in any direction
186
- *
187
- * Default value - *OrgChart.action.details*
188
- * ```typescript
189
- * var chart = new OrgChart('#tree', {
190
- * nodeMouseClick: OrgChart.action.edit
191
- * });
192
- * ```
193
- */
194
- nodeMouseClick: OrgChart.action,
195
- /**
196
- * nodeMouseDbClick can accept the following values:
197
- * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
198
- * - OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only
199
- * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
200
- * - OrgChart.action.none - do nothing on node click event
201
- *
202
- * Default value - *OrgChart.action.none*
203
- * ```typescript
204
- * var chart = new OrgChart('#tree', {
205
- * nodeMouseDbClick: OrgChart.action.edit
206
- * });
207
- * ```
208
- */
209
- nodeMouseDbClick: OrgChart.action,
210
- /**
211
- * mouseScrool can accept the following values:
212
- * - OrgChart.action.zoom - will zoom in/out on mouse scroll
213
- * - OrgChart.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed
214
- * - OrgChart.action.xScroll - left/right move of the chart on mouse scroll
215
- * - OrgChart.action.yScroll - up/down move of the chart on mouse scroll
216
- * - OrgChart.action.none - do nothing on mouse scroll
217
- *
218
- * Default value - *OrgChart.action.zoom*
219
- * ```typescript
220
- * var chart = new OrgChart('#tree', {
221
- * mouseScrool: OrgChart.action.ctrlZoom
222
- * });
223
- * ```
224
- */
225
- mouseScrool: OrgChart.action,
226
- /**
227
- * Shows horizontal scrollbar. Default value - *false*.
228
- * ```typescript
229
- * var chart = new OrgChart('#tree', {
230
- * showXScroll: true
231
- * });
232
- * ```
233
- */
234
- showXScroll: boolean,
235
- /**
236
- * Shows vertical scrollbar. Default value - *false*.
237
- * ```typescript
238
- * var chart = new OrgChart('#tree', {
239
- * showYScroll: true
240
- * });
241
- * ```
242
- */
243
- showYScroll: boolean,
244
- /**
245
- * Set template if you want to change the appearance of the chart. Org Chart JS comes with number of build-in templates:
246
- * - ana
247
- * - ula
248
- * - olivia
249
- * - belinda
250
- * - rony
251
- * - mery
252
- * - polina
253
- * - mila
254
- * - diva
255
- * - base
256
- * - isla
257
- * - deborah
258
- *
259
- * Default value - *ana*.
260
- * ```typescript
261
- * var chart = new OrgChart('#tree', {
262
- * template: 'olivia'
263
- * });
264
- * ```
265
- * {@link https://balkan.app/OrgChartJS/Docs/PredefinedTemplates | See doc...}
266
- */
267
- template: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string,
268
- /**
269
- * With tags option you can:
270
- * - Set a specific template for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/MultipleTemplates | See doc...}
271
- * - Set node as assistant {@link https://balkan.app/OrgChartJS/Docs/Assistant | See doc...}
272
- * - Change node menu, circle menu and context menu items for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
273
- * - Set the node level {@link https://balkan.app/OrgChartJS/Demos/SubLevels | See demo...}
274
- * - Set specific options for sub trees like layout templates etc {@link hhttps://balkan.app/OrgChartJS/Docs/SubTrees | See demo...}
275
- * ```typescript
276
- * var chart = new OrgChart('#tree', {
277
- * tags: {
278
- * myTag: {template: 'olivia'}
279
- * },
280
- * nodes: [{id: 1}, {id: 2, tags: ['myTag']}]
281
- * });
282
- * ```
283
- */
284
- tags: {
285
- [key: string]: {
286
- template: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string,
287
- subLevels: number,
288
- nodeMenu: OrgChart.menu,
289
- nodeCircleMenu: OrgChart.menu,
290
- nodeContextMenu: OrgChart.menu,
291
- subTreeConfig: {
292
- orientation: OrgChart.orientation,
293
- levelSeparation: number,
294
- mixedHierarchyNodesSeparation: number,
295
- subtreeSeparation: number,
296
- siblingSeparation: number,
297
- layout: OrgChart.layout,
298
- columns: number,
299
- collapse: {
300
- level: number,
301
- allChildren: boolean
302
- }
303
- }
304
- };
305
- },
306
- /**
307
- * Minimize/Maximize node. The template has to have min defined. Default value - *false*.
308
- * ```typescript
309
- * var chart = new OrgChart('#tree', {
310
- * min: true
311
- * });
312
- * ```
313
- * {@link https://balkan.app/OrgChartJS/Docs/MinMax | See doc...}
314
- */
315
- min: false,
316
- /**
317
- * Node binding in Org Chart JS maps node data to node template parameters.
318
- * ```typescript
319
- * var chart = new OrgChart('#tree', {
320
- * nodeBinding: {
321
- * field_0: "name"
322
- * },
323
- * nodes: [
324
- * { id: 1, name: "Amber McKenzie" }
325
- * ]
326
- * });
327
- * ```
328
- */
329
- nodeBinding: { [key: string]: string },
330
- /**
331
- * Link binding in Org Chart JS maps node data to link template parameters.
332
- * ```typescript
333
- * var chart = new OrgChart('#tree', {
334
- * nodeBinding: {
335
- * link_field_0: "createdAt"
336
- * },
337
- * nodes: [
338
- * { id: "1", name: "Amber McKenzie" },
339
- * { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
340
- * { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
341
- * ]
342
- * });
343
- * ```
344
- * {@link https://balkan.app/OrgChartJS/Docs/Link | See doc...}
345
- */
346
- linkBinding: { [key: string]: string },
347
- /**
348
- * Search by the fields defined in searchFields.
349
- * ```typescript
350
- * var chart = new OrgChart('#tree', {
351
- * searchFields: ["name", "title", etc...]
352
- * });
353
- * ```
354
- * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
355
- */
356
- searchFields: Array<string>,
357
- /**
358
- * Displays a field in the search result.
359
- * ```typescript
360
- * var chart = new OrgChart('#tree', {
361
- * searchDisplayField: "name"
362
- * });
363
- * ```
364
- * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
365
- */
366
- searchDisplayField: string,
367
- /**
368
- * Search by weight of the fields.
369
- * ```typescript
370
- * var chart = new OrgChart('#tree', {
371
- * searchFieldsWeight: {
372
- * "Name": 100, //percent
373
- * "Title": 20 //percent
374
- * }
375
- * });
376
- * ```
377
- * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
378
- */
379
- searchFieldsWeight: { [key: string]: number },
380
- /**
381
- * Array of node data JSON objects. nodes option is the data source of the chart. Node JSON objects could have unlimited number of properties, id, pid, ppid, stpid and tags are reserved node properties.
382
- * - id - unique identifier, it clould be integer or string
383
- * - pid - is the parent id
384
- * - stpid - subtree parent id
385
- * - ppid - parent partner id
386
- * - tags - array of strings
387
- * ```typescript
388
- * var chart = new OrgChart('#tree', {
389
- * nodes: [
390
- * { id: 1 },
391
- * { id: 2, pid: 1, tags: ["Sales"] },
392
- * { id: 3, stpid: 2 }
393
- * ]
394
- * });
395
- * ```
396
- */
397
- nodes: Array<string | number>,
398
- /**
399
- * Adds curved link.
400
- * ```typescript
401
- * var chart = new OrgChart('#tree', {
402
- * clinks: [
403
- * from: 4, to: 0, label: 'text'},
404
- * {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
405
- * {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
406
- * ]
407
- * });
408
- * ```
409
- */
410
- clinks: Array<OrgChart.link>,
411
- /**
412
- * Adds second link.
413
- * ```typescript
414
- * var chart = new OrgChart('#tree', {
415
- * slinks: [
416
- * from: 4, to: 0, label: 'text'},
417
- * {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
418
- * {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
419
- * ]
420
- * });
421
- * ```
422
- */
423
- slinks: Array<OrgChart.link>,
424
- /**
425
- * The gap between each level. Default value - *60*
426
- * ```typescript
427
- * var chart = new OrgChart('#tree', {
428
- * levelSeparation: 50
429
- * });
430
- * ```
431
- */
432
- levelSeparation: number,
433
- /**
434
- * The gap between nodes in a subtree. Default value - *20*
435
- * ```typescript
436
- * var chart = new OrgChart('#tree', {
437
- * siblingSeparation: 50
438
- * });
439
- * ```
440
- */
441
- siblingSeparation: number,
442
- /**
443
- * The gap between subtrees. Default value - *40*
444
- * ```typescript
445
- * var chart = new OrgChart('#tree', {
446
- * subtreeSeparation: 50
447
- * });
448
- * ```
449
- */
450
- subtreeSeparation: number,
451
- /**
452
- * The gap between nodes in vertical layout. Default value - *20*
453
- * ```typescript
454
- * var chart = new OrgChart('#tree', {
455
- * mixedHierarchyNodesSeparation: 5
456
- * });
457
- * ```
458
- */
459
- mixedHierarchyNodesSeparation: number,
460
- /**
461
- * Set the assistant separation value. Default value - *100*
462
- * ```typescript
463
- * var chart = new OrgChart('#tree', {
464
- * assistantSeparation: 150
465
- * });
466
- * ```
467
- */
468
- assistantSeparation: number,
469
- /**
470
- * Minimum gap between partner and node with partners. Default value - *50*
471
- * ```typescript
472
- * var chart = new OrgChart('#tree', {
473
- * minPartnerSeparation: 100
474
- * });
475
- * ```
476
- */
477
- minPartnerSeparation: number,
478
- /**
479
- * Gap between partner links. Default value - *20*
480
- * ```typescript
481
- * var chart = new OrgChart('#tree', {
482
- * partnerChildrenSplitSeparation: 50
483
- * });
484
- * ```
485
- */
486
- partnerChildrenSplitSeparation: number,
487
- /**
488
- * Gap between partners. Default value - *15*
489
- * ```typescript
490
- * var chart = new OrgChart('#tree', {
491
- * partnerNodeSeparation: 30
492
- * });
493
- * ```
494
- */
495
- partnerNodeSeparation: number,
496
- /**
497
- * The number of colums if the chart has multiple root nodes. Default value - *10*
498
- * ```typescript
499
- * var chart = new OrgChart('#tree', {
500
- * columns: 1
501
- * });
502
- * ```
503
- */
504
- columns: number,
505
- /**
506
- * The padding option sets the padding area on all four sides of the OrgChart. Default value - *30*
507
- * ```typescript
508
- * var chart = new OrgChart('#tree', {
509
- * padding: 20
510
- * });
511
- * ```
512
- */
513
- padding: number,
514
- /**
515
- * Specifies the orientation of the Org Chart JS. could accept one of the following values:
516
- * - OrgChart.orientation.top
517
- * - OrgChart.orientation.bottom
518
- * - OrgChart.orientation.right
519
- * - OrgChart.orientation.left
520
- * - OrgChart.orientation.top_left
521
- * - OrgChart.orientation.bottom_left
522
- * - OrgChart.orientation.right_top
523
- * - OrgChart.orientation.left_top
524
- *
525
- * Default value - *OrgChart.orientation.top*
526
- * ```typescript
527
- * var chart = new OrgChart('#tree', {
528
- * orientation: OrgChart.orientation.bottom
529
- * });
530
- * ```
531
- */
532
- orientation: OrgChart.orientation,
533
- /**
534
- * Sets the layout algoritm:
535
- * - OrgChart.layout.normal
536
- * - OrgChart.layout.mixed
537
- * - OrgChart.layout.tree
538
- * - OrgChart.layout.treeLeftOffset
539
- * - OrgChart.layout.treeRightOffset
540
- *
541
- * Default value - *OrgChart.layout.normal*
542
- * ```typescript
543
- * var chart = new OrgChart('#tree', {
544
- * layout: OrgChart.layout.mixed
545
- * });
546
- * ```
547
- */
548
- layout: OrgChart.layout,
549
- /**
550
- * The scale factor determines what fraction of the entire scale is visible at one time.
551
- * - OrgChart.match.height
552
- * - OrgChart.match.width
553
- * - OrgChart.match.boundary
554
- * - [number]
555
- *
556
- * Default value - *1*
557
- * ```typescript
558
- * var chart = new OrgChart('#tree', {
559
- * scaleInitial: OrgChart.match.boundary
560
- * });
561
- * ```
562
- * {@link https://balkan.app/OrgChartJS/Docs/Layout | See doc...}
563
- */
564
- scaleInitial: number | OrgChart.match,
565
- /**
566
- * Determines the minimum scale factor. Default value - *0.1*
567
- * ```typescript
568
- * var chart = new OrgChart('#tree', {
569
- * scaleMin: 0.2
570
- * });
571
- * ```
572
- */
573
- scaleMin: number,
574
- /**
575
- * Determines the naximum scale factor. Default value - *5*
576
- * ```typescript
577
- * var chart = new OrgChart('#tree', {
578
- * scaleMax: 10
579
- * });
580
- * ```
581
- */
582
- scaleMax: number,
583
- /**
584
- * The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array. Default value - *null*
585
- * ```typescript
586
- * var chart = new OrgChart('#tree', {
587
- * orderBy: "orderId",
588
- * nodes: [
589
- * { id: 10, pid: 1, orderId: 2 },
590
- * { id: 11, pid: 1, orderId: 1 }
591
- * ]
592
- * });
593
- * ```
594
- * ```typescript
595
- * var chart = new OrgChart('#tree', {
596
- * orderBy: [field: "orderId", desc: true],
597
- * nodes: [
598
- * { id: 10, pid: 1, orderId: 2 },
599
- * { id: 11, pid: 1, orderId: 1 }
600
- * ]
601
- * });
602
- * ```
603
- */
604
- orderBy: string,
605
- /**
606
- * @ignore
607
- */
608
- editUI: OrgChart.editUI,
609
- /**
610
- * @ignore
611
- */
612
- searchUI: OrgChart.searchUI,
613
- /**
614
- * @ignore
615
- */
616
- xScrollUI: any,
617
- /**
618
- * @ignore
619
- */
620
- yScrollUI: any,
621
- /**
622
- * @ignore
623
- */
624
- nodeMenuUI: OrgChart.menuUI,
625
- /**
626
- * @ignore
627
- */
628
- nodeCircleMenuUI: OrgChart.circleMenuUI,
629
- /**
630
- * @ignore
631
- */
632
- nodeContextMenuUI: OrgChart.menuUI,
633
- /**
634
- * @ignore
635
- */
636
- toolbarUI: OrgChart.toolbarUI,
637
- /**
638
- * @ignore
639
- */
640
- notifierUI: any,
641
- /**
642
- * @ignore
643
- */
644
- menuUI: OrgChart.menuUI,
645
- /**
646
- * @ignore
647
- */
648
- UI: any,
649
- /**
650
- * The URL to the export server. Default value - *https://balkan.app/export*
651
- * ```typescript
652
- * var chart = new OrgChart('#tree', {
653
- * exportUrl: "https://balkan.app/export"
654
- * });
655
- * ```
656
- */
657
- exportUrl: string,
658
- /**
659
- * Collapse specified level of the chart and its children if allChildren is true.
660
- * ```typescript
661
- * var chart = new OrgChart('#tree', {
662
- * collapse: {level: 2, allChildren: true}
663
- * });
664
- * ```
665
- */
666
- collapse: {
667
- level: number,
668
- allChildren: boolean
669
- },
670
- /**
671
- * Expand specified node ids and its children if allChildren is true. The expand option works only if collapse is set.
672
- *
673
- * In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.
674
- * ```typescript
675
- * var chart = new OrgChart('#tree', {
676
- * collapse: {level: 2, allChildren: true},
677
- * expand: {nodes: [155], allChildren: true}
678
- * });
679
- * ```
680
- */
681
- expand: {
682
- nodes: Array<string | number>,
683
- allChildren: boolean
684
- },
685
- /**
686
- * The align option specifies the alignment of the nodes inside Org Chart JS.
687
- * - OrgChart.align.center - centered
688
- * - OrgChart.align.orientation - according to the orientation option
689
- *
690
- * Default value - *OrgChart.align.center*
691
- * ```typescript
692
- * var chart = new OrgChart('#tree', {
693
- * align: OrgChart.align.orientation
694
- * });
695
- * ```
696
- */
697
- align: OrgChart.align,
698
- /**
699
- * Can be used to control the transition of the nodes on expand/collapse operation. Default value - *func: OrgChart.anim.outPow, duration: 200*
700
- * ```typescript
701
- * var chart = new OrgChart('#tree', {
702
- * anim: {func: OrgChart.anim.outBack, duration: 500}
703
- * });
704
- * ```
705
- */
706
- anim: {
707
- /**
708
- * defines how long time an animation should take to complete
709
- */
710
- func: OrgChart.anim,
711
- /**
712
- * Easing functions specify the speed at which an animation progresses at different points within the animation.
713
- */
714
- duration: number
715
- },
716
- /**
717
- * Can be used to control the zooming sensitivity. Default value - *speed: 120, smooth: 12*
718
- * ```typescript
719
- * var chart = new OrgChart('#tree', {
720
- * zoom: {speed: 130, smooth: 10}
721
- * });
722
- * ```
723
- */
724
- zoom: {
725
- speed: number,
726
- smooth: number
727
- },
728
- /**
729
- * Define nodes as roots. Default value - *null*
730
- * ```typescript
731
- * var chart = new OrgChart('#tree', {
732
- * roots: [2, 4]
733
- * });
734
- * ```
735
- */
736
- roots: Array<string | number>,
737
- /**
738
- * Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - *null*
739
- * ```typescript
740
- * var chart = new OrgChart('#tree', {
741
- * state: {
742
- * name: 'StateForMyOrgChart',
743
- * readFromLocalStorage: true,
744
- * writeToLocalStorage: true,
745
- * readFromIndexedDB: true,
746
- * writeToIndexedDB: true,
747
- * readFromUrlParams: true,
748
- * writeToUrlParams: true
749
- * }
750
- * });
751
- * ```
752
- */
753
- state: {
754
- name: string,
755
- readFromLocalStorage: boolean,
756
- writeToLocalStorage: boolean,
757
- readFromIndexedDB: boolean,
758
- writeToIndexedDB: boolean,
759
- readFromUrlParams: boolean,
760
- writeToUrlParams: boolean
761
- },
762
- /**
763
- * Configure the buildin edit form.
764
- * {@link https://balkan.app/OrgChartJS/Docs/Edit | See doc...}
765
- * ```
766
- */
767
- editForm: {
768
- readOnly: boolean,
769
- titleBinding: string,
770
- photoBinding: string,
771
- addMore: string,
772
- addMoreBtn: string,
773
- addMoreFieldName: string,
774
- generateElementsFromFields: boolean,
775
- buttons: {
776
- [key: string]: {
777
- icon: string,
778
- text: string,
779
- hideIfEditMode: boolean,
780
- hideIfDetailsMode: boolean
781
- }
782
- },
783
- elements: { [key: string]: OrgChart.editFormElement | Array<OrgChart.editFormElement> }
784
- }
785
- });
9
+ constructor(element: HTMLElement | string, options?: OrgChart.options);
10
+
786
11
 
787
- /**
788
- * Updates the node data, redraws the chart and fires update event.
789
- * @param data node data
790
- * @param callback function called when the animation completes
791
- * @param fireEvent if it set to true the update event is called
792
- */
793
- updateNode(data: object, callback?: () => void, fireEvent?: boolean): void;
794
12
  /**
795
13
  * Updates the node data
796
14
  * @param newData node data
797
15
  */
798
16
  update(newData: object): OrgChart;
799
- /**
800
- * Removes specified node from nodes collection, redraws the chart and fires remove event.
801
- * @param id identification number of the node
802
- * @param callback called at the end of animation
803
- * @param fireEvent indicates if the remove event will be called or not
804
- */
805
- removeNode(id: string | number, callback?: () => void, fireEvent?: boolean): void;
17
+
806
18
  /**
807
19
  * Removes specified node from nodes collection
808
20
  * @param id identification number of the node
809
21
  */
810
22
  remove(id: string | number): OrgChart;
811
23
  /**
812
- * Adds new node to the nodes collection, redraws the chart and fires remove event
24
+ * Adds new node to the nodes collection
813
25
  * @param data node data
814
- * @param callback called at the end of animation
815
- * @param fireEvent indicates if the add event will be called or not
816
26
  */
817
- addNode(data: object, callback?: () => void, fireEvent?: boolean): void;
27
+ add(data: object): OrgChart;
28
+ /**
29
+ * Gets node data.
30
+ * @param id identification number of the node
31
+ */
32
+ get(id: string | number): object;
33
+ /**
34
+ * If specified node has assistant/s or partner/s as children will return false.
35
+ * @param id identification number of the node
36
+ */
37
+ canRemove(id: string | number): boolean;
38
+ /**
39
+ * Expands specified nodes.
40
+ * @param id the id of the node that will not move during the animation
41
+ * @param ids node ids that will be expanded
42
+ * @param callback called after the animation completes
43
+ */
44
+ expand(id: string | number, ids: Array<string | number>, callback?: () => void): void;
45
+ /**
46
+ * Collapses specified nodes.
47
+ * @param id the id of the node that will not move
48
+ * @param ids node ids that will be collapsed
49
+ * @param callback called after the animation completes
50
+ */
51
+ collapse(id: string | number, ids: Array<string | number>, callback?: () => void): void;
52
+ /**
53
+ * Expand/Collapse lists of nodes.
54
+ * @param id the id of the node that will not move
55
+ * @param expandIds expand all nodes with ids
56
+ * @param collapseIds collpase all nodes with ids
57
+ * @param callback called after the animation completes
58
+ */
59
+ expandCollapse(id: string | number, expandIds: Array<string | number>, collapseIds: Array<string | number>, callback?: () => void): void;
60
+ /**
61
+ * Changes roots order.
62
+ * @param id id of a node that will not change is position, can be null
63
+ * @param roots roots id array in the required order
64
+ * @param callback called after the roots are changed and animation completes
65
+ */
66
+ changeRoots(id: string | number, roots: Array<string | number>, callback?: () => void): void;
67
+ /**
68
+ * Maximize the node. Without parameters maximize all nodes.
69
+ * @param id the id of the node, if id is null, undefined ot empty string will maximize all nodes
70
+ * @param horizontalCenter center horizontally
71
+ * @param verticalCenter center vertically
72
+ * @param callback called when the animation completes
73
+ */
74
+ maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void;
75
+ /**
76
+ * Minimize the node. Without parameters minimize all nodes.
77
+ * @param id the id of the node, if id is null, undefined ot empty string will minimize all nodes
78
+ * @param callback called when the animation completes
79
+ */
80
+ minimize(id?: string | number, callback?: () => void): void;
81
+ /**
82
+ * Load nodes data.
83
+ * @param data node data array
84
+ */
85
+ load(data: Array<object>): OrgChart;
86
+ /**
87
+ * Loads nodes from xml.
88
+ * @param xml Xml with node structure
89
+ */
90
+ loadXML(xml: string): OrgChart;
91
+ /**
92
+ * Gets nodes as xml.
93
+ */
94
+ getXML(): string;
95
+ /**
96
+ * Draws the chart.
97
+ * @param action Action for example OrgChart.action.centerNode, default is OrgChart.action.update
98
+ * @param actionParams parameters for the action
99
+ * @param callback called when the animation completes
100
+ */
101
+ draw(action?: OrgChart.action, actionParams?: any, callback?: () => void): void;
102
+ /**
103
+ * Gets the width of the container.
104
+ */
105
+ width(): number;
106
+ /**
107
+ * Gets the height of the container.
108
+ */
109
+ height(): number;
110
+ /**
111
+ * Gets the view box attribute of the svg html element.
112
+ */
113
+ getViewBox(): Array<number>;
114
+ /**
115
+ * Sets the view box attribute of the svg html element.
116
+ * @param viewBox
117
+ */
118
+ setViewBox(viewBox: Array<number>): void;
119
+ /**
120
+ * Gets the current scale of the chart.
121
+ * @param viewBox
122
+ */
123
+ getScale(viewBox?: Array<number>): void;
124
+ /**
125
+ * Animates specified node with ripple animation - highlight the node.
126
+ * @param id the id of the node
127
+ * @param clientX x value of the ripple center in the node
128
+ * @param clientY y value of the ripple center in the node
129
+ */
130
+ ripple(id: string | number, clientX?: number, clientY?: number): void;
131
+ /**
132
+ * Centers specified node on the screen.
133
+ * @param nodeId the id of the node
134
+ * @param options { parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false });
135
+ * @param callback called when the animation completes
136
+ */
137
+ center(nodeId: string | number, options?: {
138
+ parentState: unknown,
139
+ childrenState: unknown,
140
+ rippleId: string | number,
141
+ vertical: boolean,
142
+ horizontal: boolean
143
+ }, callback?: () => void): void;
144
+ /**
145
+ * Fits the content to the visible area.
146
+ * @param callback called when the animation completes
147
+ */
148
+ fit(callback?: () => void): void;
149
+ /**
150
+ * Toggles full screen mode.
151
+ */
152
+ toggleFullScreen(): void;
153
+ /**
154
+ * Gets the node as {@link OrgChart.node} object.
155
+ * @param nodeId
156
+ */
157
+ getNode(nodeId: string | number): OrgChart.node;
158
+ /**
159
+ * Sets layout.
160
+ * @param layout layout type
161
+ * @param lcn lyout config name for the specified sub tree
162
+ */
163
+ setLayout(layout: OrgChart.layout | number, lcn?: string): void;
164
+ /**
165
+ * Sets orientation.
166
+ * @param orientation orientation type
167
+ * @param lcn lyout config name for the specified sub tree
168
+ */
169
+ setOrientation(orientation: OrgChart.orientation, lcn?: string): void;
170
+ /**
171
+ * Search in the chart.
172
+ * @param value search for value
173
+ * @param searchInFileds search in field names
174
+ * @param retrieveFields retrive data for fields
175
+ * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
176
+ */
177
+ search(value: string, searchInFileds?: Array<string>, retrieveFields?: Array<string>): void;
178
+ /**
179
+ * Gets collpased node ids of the specifeid node
180
+ * @param node
181
+ */
182
+ getCollapsedIds(node: OrgChart.node): Array<string | number>;
183
+ /**
184
+ * State to url.
185
+ * {@link https://balkan.app/OrgChartJS/Docs/State | See doc...}
186
+ */
187
+ stateToUrl(): string;
188
+ /**
189
+ * Genereates unique identification number that can be used for new nodes
190
+ */
191
+ generateId(): string;
192
+ /**
193
+ * Destroys the object.
194
+ */
195
+ destroy(): void;
196
+ /**
197
+ * Adds curved link.
198
+ * @param from from node with id
199
+ * @param to to node with id
200
+ * @param label link label
201
+ * @param template link template, for example 'orange'
202
+ */
203
+ addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
204
+ /**
205
+ * Removes curved link.
206
+ * @param from from node with id
207
+ * @param to to node with id
208
+ */
209
+ removeClink(from: string | number, to: string | number): OrgChart;
210
+ /**
211
+ * Adds second link.
212
+ * @param from from node with id
213
+ * @param to to node with id
214
+ * @param label link label
215
+ * @param template link template, for example 'orange'
216
+ */
217
+ addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
218
+ /**
219
+ * Removes second link.
220
+ * @param from from node with id
221
+ * @param to to node with id
222
+ */
223
+ removeSlink(from: string | number, to: string | number): OrgChart;
224
+ /**
225
+ * Gets svg html element
226
+ */
227
+ getSvg(): SVGAElement;
228
+ /**
229
+ * Gets node html element
230
+ * @param id node id
231
+ */
232
+ getNodeElement(id: string | number): HTMLElement;
233
+ /**
234
+ * Gets menu button html element
235
+ */
236
+ getMenuButton(): HTMLElement;
237
+ /**
238
+ * Exports the details form to PDF.
239
+ * @param options export options
240
+ * @param callback called when the export completes
241
+ * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
242
+ */
243
+ exportPDFProfile(options: OrgChart.exportOptions, callback?: () => void): void;
818
244
  /**
819
- * Adds new node to the nodes collection
820
- * @param data node data
245
+ * Exports the details form to PDF.
246
+ * @param options export options
247
+ * @param callback called when the export completes
248
+ * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
821
249
  */
822
- add(data: object): OrgChart;
250
+ exportPNGProfile(options: OrgChart.exportOptions, callback?: () => void): void;
823
251
  /**
824
- * Gets node data.
825
- * @param id identification number of the node
252
+ * Exports to CSV
253
+ * @param id if not defained exports all nodes if defined exports childrens
254
+ * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
826
255
  */
827
- get(id: string | number): object;
256
+ exportCSV(id?: string | number): void;
828
257
  /**
829
- * If specified node has assistant/s or partner/s as children will return false.
830
- * @param id identification number of the node
258
+ * Shares node data, uses build-in device sharing functionallity.
259
+ * @param id node id
260
+ * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
831
261
  */
832
- canRemove(id: string | number): boolean;
262
+ shareProfile(id: string | number): void;
833
263
  /**
834
- * Expands specified nodes.
835
- * @param id the id of the node that will not move during the animation
836
- * @param ids node ids that will be expanded
837
- * @param callback called after the animation completes
264
+ * Exports to PDF document
265
+ * @param options export options
266
+ * @param callback called when the export completes
267
+ * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
838
268
  */
839
- expand(id: string | number, ids: Array<string | number>, callback?: () => void): void;
269
+ exportPDF(options?: OrgChart.exportOptions, callback?: () => void): void;
840
270
  /**
841
- * Collapses specified nodes.
842
- * @param id the id of the node that will not move
843
- * @param ids node ids that will be collapsed
844
- * @param callback called after the animation completes
271
+ * Exports to PNG document
272
+ * @param options export options
273
+ * @param callback called when the export completes
274
+ * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
845
275
  */
846
- collapse(id: string | number, ids: Array<string | number>, callback?: () => void): void;
276
+ exportPNG(options?: OrgChart.exportOptions, callback?: () => void): void;
847
277
  /**
848
- * Expand/Collapse lists of nodes.
849
- * @param id the id of the node that will not move
850
- * @param expandIds expand all nodes with ids
851
- * @param collapseIds collpase all nodes with ids
852
- * @param callback called after the animation completes
853
- */
854
- expandCollapse(id: string | number, expandIds: Array<string | number>, collapseIds: Array<string | number>, callback?: () => void): void;
278
+ * Exports to SVG document
279
+ * @param options export options
280
+ * @param callback called when the export completes
281
+ * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
282
+ */
283
+ exportSVG(options?: OrgChart.exportOptions, callback?: () => void): void;
855
284
  /**
856
- * Changes roots order.
857
- * @param id id of a node that will not change is position, can be null
858
- * @param roots roots id array in the required order
859
- * @param callback called after the roots are changed and animation completes
285
+ * Imports CSV file.
286
+ * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}
860
287
  */
861
- changeRoots(id: string | number, roots: Array<string | number>, callback?: () => void): void;
288
+ importCSV(): void;
862
289
  /**
863
- * Maximize the node. Without parameters maximize all nodes.
864
- * @param id the id of the node, if id is null, undefined ot empty string will maximize all nodes
865
- * @param horizontalCenter center horizontally
866
- * @param verticalCenter center vertically
867
- * @param callback called when the animation completes
868
- */
869
- maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void;
290
+ * Imports XML file.
291
+ * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}
292
+ */
293
+ importXML(filename?: string): void;
870
294
  /**
871
- * Minimize the node. Without parameters minimize all nodes.
872
- * @param id the id of the node, if id is null, undefined ot empty string will minimize all nodes
295
+ * Zoom out or zoom in the chart.
296
+ * @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.
297
+ * @param center array [x, y], where x is x percantege from the width and y is y percentage from the height.
298
+ * @param shouldAnimate should animate
873
299
  * @param callback called when the animation completes
874
300
  */
875
- minimize(id?: string | number, callback?: () => void): void;
301
+ zoom(delta: boolean | number, center?: Array<number>, shouldAnimate?: boolean, callback?: () => void): void;
302
+
303
+
876
304
  /**
877
- * Load nodes data.
878
- * @param data node data array
305
+ * The onField() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.
306
+ * ```typescript
307
+ * var chart = new OrgChart('#tree', {});
308
+ * chart.onField((args) => {
309
+ * //return false; to cancel
310
+ * });
311
+ * ```
312
+ * @category Event Listeners
313
+ * @param listener
879
314
  */
880
- load(data: Array<object>): OrgChart;
315
+ onField(listener: (args: {
316
+ /**
317
+ * the node
318
+ */
319
+ node: OrgChart.node,
320
+ /**
321
+ * node data json object
322
+ */
323
+ data: object,
324
+ /**
325
+ * value of the filed, can be changed in the event
326
+ */
327
+ value: unknown,
328
+ /**
329
+ * svg or html element of the filed, can be changed in the event
330
+ */
331
+ element: string,
332
+ /**
333
+ * name of the field
334
+ */
335
+ name: string
336
+ }) => void | boolean): OrgChart;
337
+
881
338
  /**
882
- * Loads nodes from xml.
883
- * @param xml Xml with node structure
339
+ * Occurs when the nodes in OrgChart has been created and loaded to the DOM.
340
+ * ```typescript
341
+ * var chart = new OrgChart('#tree', {});
342
+ * chart.onInit(() => {
343
+ * });
344
+ * ```
345
+ * @category Event Listeners
346
+ * @param listener
884
347
  */
885
- loadXML(xml: string): OrgChart;
348
+ onInit(listener: () => void): OrgChart;
349
+
350
+
351
+
886
352
  /**
887
- * Gets nodes as xml.
888
- */
889
- getXML(): string;
353
+ * The onRedraw event occurs when the chart is redrawed.
354
+ * ```typescript
355
+ * var chart = new OrgChart('#tree', {});
356
+ * chart.onRedraw(() => {
357
+ * });
358
+ * ```
359
+ * @category Event Listeners
360
+ * @param listener
361
+ */
362
+ onRedraw(listener: () => void): OrgChart;
363
+
890
364
  /**
891
- * Draws the chart.
892
- * @param action Action for example OrgChart.action.centerNode, default is OrgChart.action.update
893
- * @param actionParams parameters for the action
894
- * @param callback called when the animation completes
895
- */
896
- draw(action?: OrgChart.action, actionParams?: any, callback?: () => void): void;
365
+ * The onExpandCollpaseButtonClick event occurs when the chart is redrawed.
366
+ * ```typescript
367
+ * var chart = new OrgChart('#tree', {});
368
+ * chart.onExpandCollpaseButtonClick(() => {
369
+ * //return false; to cancel the operation
370
+ * });
371
+ * ```
372
+ * @category Event Listeners
373
+ * @param listener
374
+ */
375
+ onExpandCollpaseButtonClick(listener: (args: {
376
+ /**
377
+ * Indicates id the operation is collaps or expand
378
+ */
379
+ collapsing: boolean,
380
+ /**
381
+ * the id of the clicked node
382
+ */
383
+ id: number | string,
384
+ /**
385
+ * node ids that will be expanded or collapsed
386
+ */
387
+ ids: Array<number | string>
388
+ }) => void): OrgChart;
897
389
  /**
898
- * Gets the width of the container.
899
- */
900
- width(): number;
390
+ * 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.
391
+ * ```typescript
392
+ * var chart = new OrgChart('#tree', {});
393
+ * chart.onExporStart(() => {
394
+ * args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
395
+ * //return false; to cancel the operation
396
+ * });
397
+ * ```
398
+ * @category Event Listeners
399
+ * @param listener
400
+ */
401
+ onExporStart(listener: (args:
402
+ {
403
+ /**
404
+ * the content to be exported
405
+ *
406
+ * this property is initialized only for PDF/PNG/SVG exports
407
+ */
408
+ content: string,
409
+ /**
410
+ * export options
411
+ *
412
+ * this property is initialized only for PDF/PNG/SVG exports
413
+ */
414
+ options: OrgChart.exportOptions,
415
+ /**
416
+ * add extra styles
417
+ *
418
+ * this property is initialized only for PDF/PNG/SVG exports
419
+ */
420
+ styles: string,
421
+ /**
422
+ * an object that discribes pages to be exported
423
+ *
424
+ * this property is initialized only for PDF/PNG exports
425
+ */
426
+ pages: any,
427
+ /**
428
+ * extension
429
+ *
430
+ * this property is initialized only for CSV/XML
431
+ */
432
+ ext: string,
433
+ /**
434
+ * filename, you can change the filename here
435
+ *
436
+ * this property is initialized only for CSV/XML exports
437
+ */
438
+ filename: string,
439
+ /**
440
+ * array of node objects
441
+ *
442
+ * this property is initialized only for CSV/XML exports
443
+ */
444
+ nodes: Array<object>
445
+ }) => void): OrgChart;
901
446
  /**
902
- * Gets the height of the container.
903
- */
904
- height(): number;
447
+ * 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.
448
+ * ```typescript
449
+ * var chart = new OrgChart('#tree', {});
450
+ * chart.onExporEnd(() => {
451
+ * //return false; to cancel the operation for example id you prefer the exported document to not download
452
+ * });
453
+ * ```
454
+ * @category Event Listeners
455
+ * @param listener
456
+ */
457
+ onExporEnd(listener: (args:
458
+ /**
459
+ * for PDF/PNG
460
+ */
461
+ {
462
+ /**
463
+ * the array buffer is the exported document, you can save it on a server or send it via email
464
+ *
465
+ * this property is initialized only for PDF/PNG exports
466
+ */
467
+ ArrayBuffer: ArrayBuffer
468
+ /**
469
+ * extension
470
+ *
471
+ * this property is initialized only for CSV/XML exports
472
+ */
473
+ ext: string,
474
+ /**
475
+ * filename, you can change the filename here
476
+ *
477
+ * this property is initialized only for CSV/XML exports
478
+ */
479
+ filename: string,
480
+ /**
481
+ * an array of node objects
482
+ *
483
+ * this property is initialized only for CSV/XML exports
484
+ */
485
+ nodes: Array<object>,
486
+ /**
487
+ * csv ot xml string
488
+ *
489
+ * this property is initialized only for CSV/XML/SVG exports
490
+ */
491
+ content: string
492
+ /**
493
+ * export options
494
+ *
495
+ * this property is initialized only for SVG exports
496
+ */
497
+ options: OrgChart.exportOptions,
498
+ /**
499
+ * add extra styles
500
+ *
501
+ * this property is initialized only for SVG exports
502
+ */
503
+ styles: string,
504
+ }) => void): OrgChart;
905
505
  /**
906
- * Gets the view box attribute of the svg html element.
907
- */
908
- getViewBox(): Array<number>;
506
+ * On node click event listener.
507
+ * ```typescript
508
+ * var chart = new OrgChart('#tree', {});
509
+ * chart.onNodeClick(() => {
510
+ * //return false; to cancel the operation
511
+ * });
512
+ * ```
513
+ * @category Event Listeners
514
+ * @param listener
515
+ */
516
+ onNodeClick(listener: (args: {
517
+ /**
518
+ * node JSON object
519
+ */
520
+ node: OrgChart.node,
521
+ /**
522
+ * the browser event
523
+ */
524
+ event: any
525
+ }) => void): OrgChart;
909
526
  /**
910
- * Sets the view box attribute of the svg html element.
911
- * @param viewBox
912
- */
913
- setViewBox(viewBox: Array<number>): void;
527
+ * On node double click event listener.
528
+ * ```typescript
529
+ * var chart = new OrgChart('#tree', {});
530
+ * chart.onNodeDoubleClick(() => {
531
+ * //return false; to cancel the operation
532
+ * });
533
+ * ```
534
+ * @category Event Listeners
535
+ * @param listener
536
+ */
537
+ onNodeDoubleClick(listener: (args: {
538
+ /**
539
+ * clicked node data
540
+ */
541
+ data: object
542
+ }) => void): OrgChart;
543
+
544
+ editUI: OrgChart.editUI;
545
+ searchUI: OrgChart.searchUI;
546
+ nodeMenuUI: OrgChart.menuUI;
547
+ nodeCircleMenuUI: OrgChart.circleMenuUI;
548
+ nodeContextMenuUI: OrgChart.menuUI;
549
+ menuUI: OrgChart.menuUI;
550
+ toolbarUI: OrgChart.toolbarUI;
551
+
552
+ static fileUploadDialog(callback: () => void): void;
553
+ static isMobile(): boolean;
914
554
  /**
915
- * Gets the current scale of the chart.
916
- * @param viewBox
555
+ * Checks if the used libraris is licnsed or not
917
556
  */
918
- getScale(viewBox?: Array<number>): void;
557
+ static isTrial(): boolean;
919
558
  /**
920
- * Animates specified node with ripple animation - highlight the node.
921
- * @param id the id of the node
922
- * @param clientX x value of the ripple center in the node
923
- * @param clientY y value of the ripple center in the node
559
+ * Count all children nodes of the specified id.
560
+ * @param chart OrgChart instance
561
+ * @param node
562
+ * @param count
924
563
  */
925
- ripple(id: string | number, clientX?: number, clientY?: number): void;
564
+ static childrenCount(chart: OrgChart, node: OrgChart.node, count?: number): number;
565
+ static collapsedChildrenCount(chart: OrgChart, node: OrgChart.node, count?: number): number;
566
+ static getRootOf(node: OrgChart.node): OrgChart.node;
926
567
  /**
927
- * Centers specified node on the screen.
928
- * @param nodeId the id of the node
929
- * @param options { parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false });
930
- * @param callback called when the animation completes
568
+ * is null, empty or undefined
569
+ * @param val
931
570
  */
932
- center(nodeId: string | number, options?: {
933
- parentState: unknown,
934
- childrenState: unknown,
935
- rippleId: string | number,
936
- vertical: boolean,
937
- horizontal: boolean
938
- }, callback?: () => void): void;
571
+ static isNEU(val: unknown): boolean;
572
+ static gradientCircleForDefs(id: string | number, colors: Array<string> | string, r: number, strokeWidth: number): string;
573
+
574
+
939
575
  /**
940
- * Fits the content to the visible area.
941
- * @param callback called when the animation completes
576
+ * Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
942
577
  */
943
- fit(callback?: () => void): void;
578
+ static loading: {
579
+ show: (chart: OrgChart) => void,
580
+ hide: (chart: OrgChart) => void
581
+ }
582
+
583
+ static clinkTemplates: {
584
+ orange?: OrgChart.linkTemplate,
585
+ blue?: OrgChart.linkTemplate,
586
+ yellow?: OrgChart.linkTemplate,
587
+ [key: string]: OrgChart.linkTemplate
588
+ }
589
+
590
+ static slinkTemplates: {
591
+ orange?: OrgChart.linkTemplate,
592
+ blue?: OrgChart.linkTemplate,
593
+ yellow?: OrgChart.linkTemplate,
594
+ [key: string]: OrgChart.linkTemplate
595
+ }
596
+
597
+
598
+ static icon: {
599
+ png: (w: string, h: string, c: string) => string,
600
+ pdf: (w: string, h: string, c: string) => string,
601
+ svg: (w: string, h: string, c: string) => string,
602
+ csv: (w: string, h: string, c: string) => string,
603
+ excel: (w: string, h: string, c: string) => string,
604
+ edit: (w: string, h: string, c: string) => string,
605
+ details: (w: string, h: string, c: string) => string,
606
+ remove: (w: string, h: string, c: string) => string,
607
+ add: (w: string, h: string, c: string) => string,
608
+ xml: (w: string, h: string, c: string) => string,
609
+ link: (w: string, h: string, c: string) => string,
610
+ happy: (w: string, h: string, c: string) => string,
611
+ sad: (w: string, h: string, c: string) => string,
612
+ share: (w: string, h: string, c: string, x: string, y: string) => string,
613
+ user: (w: string, h: string, c: string, x: string, y: string) => string
614
+ }
615
+
616
+
617
+
618
+
619
+
620
+ static templates :{ [key: string]: OrgChart.template} ;
621
+
622
+
623
+ static scroll: {
624
+ visible?: boolean,
625
+ smooth?: number,
626
+ speed?: number,
627
+ safari?: { smooth?: number; speed?: number; },
628
+ edge?: { smooth?: number; speed?: number; },
629
+ chrome?: { smooth?: number; speed?: number; },
630
+ firefox?: { smooth?: number; speed?: number; },
631
+ opera?: { smooth?: number; speed?: number; }
632
+ };
633
+
634
+ static events: {
635
+ on(type: "node-created" | "layout", listener: (args: unknown, args1: unknown, args2: unknown) => void): void
636
+ };
637
+ static state: { clear(stateName: string): void };
638
+
639
+ static VERSION: string;
944
640
  /**
945
- * Toggle full screen mode.
946
- */
947
- toggleFullScreen(): void;
641
+ * @ignore
642
+ */
643
+ static TEXT_THRESHOLD: number;
948
644
  /**
949
- * Get the node as OrgChart.node object.
950
- * @param nodeId
951
- */
952
- getNode(nodeId: string | number): OrgChart.node;
645
+ * @ignore
646
+ */
647
+ static IMAGES_THRESHOLD: number;
953
648
  /**
954
- * Sets layout.
955
- * @param layout layout type
956
- * @param lcn lyout config name for the specified sub tree
957
- */
958
- setLayout(layout: OrgChart.layout, lcn?: string): void;
649
+ * @ignore
650
+ */
651
+ static LINKS_THRESHOLD: number;
959
652
  /**
960
- * Sets orientation.
961
- * @param orientation orientation type
962
- * @param lcn lyout config name for the specified sub tree
963
- */
964
- setOrientation(orientation: OrgChart.orientation, lcn?: string): void;
653
+ * @ignore
654
+ */
655
+ static BUTTONS_THRESHOLD: number;
965
656
  /**
966
- * Search in the chart.
967
- * @param value search for value
968
- * @param searchInFileds search in field names
969
- * @param retrieveFields retrive data for fields
970
- * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
971
- */
972
- search(value: string, searchInFileds?: Array<string>, retrieveFields?: Array<string>): void;
657
+ * @ignore
658
+ */
659
+ static ANIM_THRESHOLD: number;
660
+
973
661
  /**
974
- * Gets collpased node ids of the specifeid node
975
- * @param node
976
- */
977
- getCollapsedIds(node: OrgChart.node): Array<string | number>;
662
+ * @ignore
663
+ */
664
+ static IT_IS_LONELY_HERE: string;
978
665
  /**
979
- * State to url.
980
- * {@link https://balkan.app/OrgChartJS/Docs/State | See doc...}
981
- */
982
- stateToUrl(): string;
666
+ * @ignore
667
+ */
668
+ static RES: {
669
+ /**
670
+ * @ignore
671
+ */
672
+ IT_IS_LONELY_HERE_LINK: string
673
+ };
983
674
  /**
984
- * Genereates unique identification number that can be used for new nodes
985
- */
986
- generateId(): string;
675
+ * @ignore
676
+ */
677
+ static FIRE_DRAG_NOT_CLICK_IF_MOVE: number;
987
678
  /**
988
- * Destroys the object.
989
- */
990
- destroy(): void;
679
+ * @ignore
680
+ */
681
+ static STRING_TAGS: boolean;
991
682
  /**
992
- * Adds curved link.
993
- * @param from from node with id
994
- * @param to to node with id
995
- * @param label link label
996
- * @param template link template, for example 'orange'
997
- */
998
- addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
683
+ * @ignore
684
+ */
685
+ static SEARCH_PLACEHOLDER: string;
999
686
  /**
1000
- * Removes curved link.
1001
- * @param from from node with id
1002
- * @param to to node with id
1003
- */
1004
- removeClink(from: string | number, to: string | number): OrgChart;
687
+ * @ignore
688
+ */
689
+ static IMPORT_MESSAGE: string;
1005
690
  /**
1006
- * Adds second link.
1007
- * @param from from node with id
1008
- * @param to to node with id
1009
- * @param label link label
1010
- * @param template link template, for example 'orange'
1011
- */
1012
- addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
691
+ * @ignore
692
+ */
693
+ static FIXED_POSITION_ON_CLICK: boolean;
1013
694
  /**
1014
- * Removes second link.
1015
- * @param from from node with id
1016
- * @param to to node with id
1017
- */
1018
- removeSlink(from: string | number, to: string | number): OrgChart;
695
+ * @ignore
696
+ */
697
+ static RENDER_LINKS_BEFORE_NODES: boolean;
1019
698
  /**
1020
- * Gets svg html element
1021
- */
1022
- getSvg(): SVGAElement;
699
+ * @ignore
700
+ */
701
+ static MIXED_LAYOUT_ALL_NODES: boolean;
1023
702
  /**
1024
- * Gets node html element
1025
- * @param id node id
1026
- */
1027
- getNodeElement(id: string | number): HTMLElement;
703
+ * @ignore
704
+ */
705
+ static MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN: boolean;
1028
706
  /**
1029
- * Gets menu button html element
1030
- */
1031
- getMenuButton(): HTMLElement;
707
+ * @ignore
708
+ */
709
+ static LINK_ROUNDED_CORNERS: number;
1032
710
  /**
1033
- * Exports the details form to PDF.
1034
- * @param options export options
1035
- * @param callback called when the export completes
1036
- * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
1037
- */
1038
- exportPDFProfile(options: OrgChart.exportOptions, callback?: () => void): void;
711
+ * @ignore
712
+ */
713
+ static MOVE_STEP: number;
1039
714
  /**
1040
- * Exports the details form to PDF.
1041
- * @param options export options
1042
- * @param callback called when the export completes
1043
- * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
1044
- */
1045
- exportPNGProfile(options: OrgChart.exportOptions, callback?: () => void): void;
715
+ * @ignore
716
+ */
717
+ static MOVE_INTERVAL: number;
1046
718
  /**
1047
- * Exports to CSV
1048
- * @param id if not defained exports all nodes if defined exports childrens
1049
- * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
1050
- */
1051
- exportCSV(id?: string | number): void;
719
+ * @ignore
720
+ */
721
+ static CLINK_CURVE: number;
1052
722
  /**
1053
- * Shares node data, uses build-in device sharing functionallity.
1054
- * @param id node id
1055
- * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
1056
- */
1057
- shareProfile(id: string | number): void;
723
+ * @ignore
724
+ */
725
+ static SEARCH_RESULT_LIMIT: number;
1058
726
  /**
1059
- * Exports to PDF document
1060
- * @param options export options
1061
- * @param callback called when the export completes
1062
- * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
1063
- */
1064
- exportPDF(options?: OrgChart.exportOptions, callback?: () => void): void;
727
+ * @ignore
728
+ */
729
+ static MAX_DEPTH: number;
1065
730
  /**
1066
- * Exports to PNG document
1067
- * @param options export options
1068
- * @param callback called when the export completes
1069
- * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
1070
- */
1071
- exportPNG(options?: OrgChart.exportOptions, callback?: () => void): void;
731
+ * @ignore
732
+ */
733
+ static SCALE_FACTOR: number;
1072
734
  /**
1073
- * Exports to SVG document
1074
- * @param options export options
1075
- * @param callback called when the export completes
1076
- * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}
1077
- */
1078
- exportSVG(options?: OrgChart.exportOptions, callback?: () => void): void;
735
+ * @ignore
736
+ */
737
+ static LAZY_LOADING_FACTOR: number;
738
+
739
+ }
740
+
741
+ declare namespace OrgChart {
1079
742
  /**
1080
- * Imports CSV file.
1081
- * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}
743
+ * deprecated
744
+ * @ignore
1082
745
  */
1083
- importCSV(): void;
746
+ const none: number;
747
+
1084
748
  /**
1085
- * Imports XML file.
1086
- * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}
749
+ * @ignore
1087
750
  */
1088
- importXML(filename?: string): void;
751
+ const COLLAPSE_PARENT_NEIGHBORS: number;
752
+
1089
753
  /**
1090
- * Zoom out or zoom in the chart.
1091
- * @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.
1092
- * @param center array [x, y], where x is x percantege from the width and y is y percentage from the height.
1093
- * @param shouldAnimate should animate
1094
- * @param callback called when the animation completes
754
+ * @ignore
1095
755
  */
1096
- zoom(delta: boolean | number, center?: Array<number>, shouldAnimate?: boolean, callback?: () => void): void;
756
+ const COLLAPSE_SUB_CHILDRENS: number;
757
+
758
+
759
+
760
+
761
+
762
+ interface template
763
+ {
764
+ defs?: string,
765
+ size?: Array<number>,
766
+ expandCollapseSize?: number,
767
+ linkAdjuster?: {
768
+ fromX?: number,
769
+ fromY?: number,
770
+ toX?: number,
771
+ toY?: number
772
+ },
773
+ ripple?: {
774
+ radius?: number,
775
+ color?: string,
776
+ rect?: Array<number>
777
+ },
778
+ assistanseLink?: string,
779
+ svg?: string,
780
+ link?: string,
781
+ pointer?: string,
782
+ node?: string,
783
+ plus?: string,
784
+ minus?: string,
785
+ nodeMenuButton?: string,
786
+ menuButton?: string,
787
+ img_0?: string,
788
+ link_field_0?: string,
789
+ editFormHeaderColor?: string,
790
+ nodeCircleMenuButton?: string,
791
+ min?: template
792
+ }
793
+
794
+ interface editUI {
795
+ /**
796
+ * Inits edit ui
797
+ * @param obj
798
+ */
799
+ init(obj: OrgChart): void;
800
+ /**
801
+ * The on() method of the editUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
802
+ * @category Event Listeners
803
+ * @param type A case-sensitive string representing the event type to listen for.
804
+ * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
805
+ */
806
+ on(type: "show" | "element-btn-click" | "button-click" | "hide", listener: (sender: editUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): editUI;
807
+ /**
808
+ * Shows the edit form for the specified node id
809
+ * @param id node id
810
+ * @param detailsMode If true the edit form is in read only mode
811
+ * @param dontAnim
812
+ */
813
+ show(id: string | number, detailsMode: boolean, dontAnim: boolean): void;
814
+ /**
815
+ * Hides the edit form
816
+ */
817
+ hide(): void;
818
+ content(id: string | number, detailsMode: boolean, dontAnim: boolean, width: string, dontRenderButtons: boolean): string;
819
+ }
820
+
821
+ interface searchUI {
822
+ init(obj: OrgChart): void;
823
+ /**
824
+ * The on() method of the searchUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
825
+ * @category Event Listeners
826
+ * @param type A case-sensitive string representing the event type to listen for.
827
+ * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
828
+ */
829
+ on(type: "searchclick", listener: (sender: OrgChart, args: unknown, args1: unknown, args2: unknown) => void | boolean): searchUI;
830
+ /**
831
+ * Hides the search grid
832
+ */
833
+ hide(): void;
834
+ /**
835
+ * Finds filed data by specified value
836
+ * @param value search for value
837
+ */
838
+ find(value: string): void;
839
+ createItem(img: string, id: string | number, first: string, second: string): string;
840
+ }
841
+
842
+ interface menuUI {
843
+ init(obj: OrgChart, menu: { [key: string]: menu }): void;
844
+ /**
845
+ * The on() method of the menuUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
846
+ * @category Event Listeners
847
+ * @param type A case-sensitive string representing the event type to listen for.
848
+ * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
849
+ */
850
+ on(type: "show", listener: (sender: menuUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): menuUI;
851
+ /**
852
+ * Shows menu next to html element
853
+ * @param stickToElement
854
+ * @param firstNodeId
855
+ * @param secondNodeId
856
+ * @param menu
857
+ */
858
+ showStickIn(stickToElement: HTMLElement, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void;
859
+ /**
860
+ * Hieds the menu
861
+ */
862
+ hide(): void;
863
+ /**
864
+ * Shows menu by x,y position
865
+ * @param x
866
+ * @param y
867
+ * @param firstNodeId
868
+ * @param secondNodeId
869
+ * @param menu
870
+ */
871
+ show(x: number, y: number, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void;
872
+ }
873
+
874
+ interface circleMenuUI {
875
+ /**
876
+ * Inits circle menu instance
877
+ * @param obj
878
+ * @param menu
879
+ */
880
+ init(obj: OrgChart, menu: { [key: string]: menu }): void;
881
+ /**
882
+ * Shows circle menu
883
+ * @param nodeId
884
+ * @param menu
885
+ */
886
+ show(nodeId: string | number, menu: { [key: string]: menu }): void;
887
+ /**
888
+ * Hides circle menu
889
+ */
890
+ hide(): void;
891
+ /**
892
+ * The on() method of the circleMenuUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
893
+ * @category Event Listeners
894
+ * @param type A case-sensitive string representing the event type to listen for.
895
+ * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
896
+ */
897
+ on(type: "show" | "drag" | "drop" | "mouseenter" | "mouseout", listener: (sender: circleMenuUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): circleMenuUI;
898
+ }
899
+
900
+ interface toolbarUI {
901
+ init(obj: OrgChart, toolbar: toolbar): void;
902
+ showLayout(): void;
903
+ hideLayout(): void;
904
+
905
+
906
+ expandAllIcon?: string;
907
+ fitIcon?: string;
908
+ openFullScreenIcon?: string;
909
+ closeFullScreenIcon?: string;
910
+ zoomInIcon?: string;
911
+ zoomOutIcon?: string;
912
+ layoutIcon?: string;
913
+ }
914
+
915
+
916
+
917
+ interface toolbar {
918
+ layout?: boolean,
919
+ zoom?: boolean,
920
+ fit?: boolean,
921
+ expandAll?: boolean,
922
+ fullScreen?: boolean
923
+ }
924
+
925
+
926
+ interface exportOptions {
927
+ margin?: Array<number>,
928
+ padding?: number,
929
+ landscape?: boolean,
930
+ filename?: string,
931
+ scale?: "fit" | number,
932
+ format?: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal",
933
+ header?: string,
934
+ footer?: string,
935
+ openInNewTab?: boolean
936
+ }
937
+
938
+ interface linkTemplate {
939
+ defs?: string,
940
+ link?: string,
941
+ label?: string,
942
+ labelPosition?: string
943
+ }
944
+ interface menu {
945
+ [key: string]: {
946
+ text: string,
947
+ icon?: string,
948
+ onClick?: Function,
949
+ color?: string,
950
+ draggable?: boolean
951
+ }
952
+ }
953
+ interface editFormElement {
954
+ type?: string,
955
+ label?: string,
956
+ binding?: string,
957
+ options?: Array<unknown>,
958
+ btn?: string,
959
+ vlidators?: { required?: string, email?: string }
960
+ }
961
+ interface link {
962
+ from?: string | number,
963
+ to?: string | number,
964
+ template?: string,
965
+ label?: string
966
+ }
967
+ interface orderBy {
968
+ field?: string,
969
+ desc?: boolean
970
+ }
971
+ enum orientation {
972
+ top,
973
+ bottom,
974
+ right,
975
+ left,
976
+ top_left,
977
+ bottom_left,
978
+ right_top,
979
+ left_top
980
+ }
981
+ enum layout {
982
+ normal,
983
+ mixed,
984
+ tree,
985
+ treeLeftOffset,
986
+ treeRightOffset
987
+ }
1097
988
 
989
+ enum align {
990
+ center,
991
+ orientation
992
+ }
993
+ enum anim {
994
+ inPow,
995
+ outPow,
996
+ inOutPow,
997
+ inSin,
998
+ outSin,
999
+ inOutSin,
1000
+ inExp,
1001
+ outExp,
1002
+ inOutExp,
1003
+ inCirc,
1004
+ outCirc,
1005
+ inOutCirc,
1006
+ rebound,
1007
+ inBack,
1008
+ outBack,
1009
+ inOutBack,
1010
+ impulse,
1011
+ expPulse
1012
+ }
1013
+ enum match {
1014
+ height,
1015
+ width,
1016
+ boundary
1017
+ }
1098
1018
 
1099
- /**
1100
- * The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *
1101
- * @category Event Listeners
1102
- * @param type A case-sensitive string representing the event type to listen for.
1103
- * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
1104
- */
1105
- 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" | "import" | "adding" | "added" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "removed" | "ready" | "ripple", listener: (sender: OrgChart, args: unknown, args1: unknown, args2: unknown) => void | boolean): OrgChart;
1106
1019
 
1107
- /**
1108
- * The onField() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.
1109
- * ```typescript
1110
- * var chart = new OrgChart('#tree', {});
1111
- * chart.onField((args) => {
1112
- * //return false; to cancel
1113
- * });
1114
- * ```
1115
- * @category Event Listeners
1116
- * @param listener
1117
- */
1118
- onField(listener: (args: {
1020
+ enum action {
1021
+ update,
1022
+ expand,
1023
+ collapse,
1024
+ exporting,
1025
+ init,
1026
+ centerNode,
1027
+ insert,
1028
+ maximize,
1029
+ minimize,
1030
+ edit,
1031
+ details,
1032
+ expandCollapse,
1033
+ pan,
1034
+ zoom,
1035
+ ctrlZoom,
1036
+ xScroll,
1037
+ yScroll,
1038
+ scroll,
1039
+ none
1040
+ }
1041
+
1042
+ interface node {
1119
1043
  /**
1120
- * the node
1044
+ * the same id you provided in the source node
1121
1045
  */
1122
- node: OrgChart.node,
1046
+ id?: string | number,
1123
1047
  /**
1124
- * node data json object
1048
+ * same pid you provided in the source node, the default value is null if not provided or if node with the same id does not exist
1125
1049
  */
1126
- data: object,
1050
+ pid?: string | number,
1127
1051
  /**
1128
- * value of the filed, can be changed in the event
1052
+ * partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined.
1129
1053
  */
1130
- value: unknown,
1054
+ ppid?: string | number,
1131
1055
  /**
1132
- * svg or html element of the filed, can be changed in the event
1056
+ * a reference to the parent node, default value is null, if the nodes is collapse this proprty is not initalized and can be null even if pid is not null
1133
1057
  */
1134
- element: string,
1058
+ parent?: node,
1135
1059
  /**
1136
- * name of the field
1060
+ * ub tree parent id, it is the parent node id of the root node of the sub tree, it is the same stpid you provided in the source node, the default value is null if not provided or if node with the same id does not exist.
1137
1061
  */
1138
- name: string
1139
- }) => void | boolean): OrgChart;
1140
-
1141
- /**
1142
- * Occurs when the nodes in OrgChart has been created and loaded to the DOM.
1143
- * ```typescript
1144
- * var chart = new OrgChart('#tree', {});
1145
- * chart.onInit(() => {
1146
- * });
1147
- * ```
1148
- * @category Event Listeners
1149
- * @param listener
1150
- */
1151
- onInit(listener: () => void): OrgChart;
1152
-
1153
- /**
1154
- * Occurs when the node data has been updated by updateNode method.
1155
- * ```typescript
1156
- * var chart = new OrgChart('#tree', {});
1157
- * chart.onUpdateNode((args) => {
1158
- * //return false; to cancel the operation
1159
- * });
1160
- * ```
1161
- * @category Event Listeners
1162
- * @param listener
1163
- */
1164
- onUpdateNode(listener: (args: {
1062
+ stpid?: string | number,
1165
1063
  /**
1166
- * old node data
1064
+ * - a reference to the parent node of a sub tree, default value is null, if the parent node is minimized this proprty is not initalized and can be null even if we have stpid
1167
1065
  */
1168
- oldData: object,
1066
+ stParent?: node,
1067
+ isPartner?: boolean,
1068
+ partnerSeparation?: number,
1169
1069
  /**
1170
- * new node data
1171
- */
1172
- newData: object
1173
- }) => void): OrgChart;
1174
- /**
1175
- * Occurs when a node has been removed by removeNode method.
1176
- * ```typescript
1177
- * var chart = new OrgChart('#tree', {});
1178
- * chart.onRemoveNode((args) => {
1179
- * //return false; to cancel the operation
1180
- * });
1181
- * ```
1182
- * @category Event Listeners
1183
- * @param listener
1184
- */
1185
- onRemoveNode(listener: (args: {
1070
+ * array of ids, always initialized
1071
+ */
1072
+ childrenIds?: Array<string | number>,
1186
1073
  /**
1187
- * node id
1074
+ * array of children nodes, initialized on demand if all children are collpased it will be empty array
1188
1075
  */
1189
- id: number | string,
1076
+ children?: Array<node>,
1190
1077
  /**
1191
- * 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.
1078
+ * array of sub tree children root node ids, always initialized
1192
1079
  */
1193
- newPidsAndStpidsForIds: {
1194
- newPidsForIds: {[key: string | number] : string | number},
1195
- newStpidsForIds: {[key: string | number] : string | number}
1196
- }}) => void): OrgChart;
1197
-
1198
- /**
1199
- * Occurs when a node has been added by addNode method.
1200
- * ```typescript
1201
- * var chart = new OrgChart('#tree', {});
1202
- * chart.onAddNode((args) => {
1203
- * //return false; to cancel the operation
1204
- * });
1205
- * ```
1206
- * @category Event Listeners
1207
- * @param listener
1208
- */
1209
- onAddNode(listener: (args: {
1080
+ stChildrenIds?: Array<string | number>,
1210
1081
  /**
1211
- * new added data node
1082
+ * array of sub tree children root nodes, initialized on demand if the node is minimized it will be empty array
1212
1083
  */
1213
- data: object
1214
- }) => void): OrgChart;
1215
- /**
1216
- * The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
1217
- * ```typescript
1218
- * var chart = new OrgChart('#tree', {});
1219
- * chart.onDrag(() => {
1220
- * //return false; to cancel the operation
1221
- * });
1222
- * ```
1223
- * @category Event Listeners
1224
- * @param listener
1225
- */
1226
- onDrag(listener: (args: {
1084
+ stChildren?: Array<node>,
1227
1085
  /**
1228
- * dragged node id
1086
+ * array of string values, the same array you provided in the source node
1229
1087
  */
1230
- dragId: string | number
1231
- }) => void): OrgChart;
1232
- /**
1233
- * The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
1234
- * ```typescript
1235
- * var chart = new OrgChart('#tree', {});
1236
- * chart.onDrop(() => {
1237
- * //return false; to cancel the operation
1238
- * });
1239
- * ```
1240
- * @category Event Listeners
1241
- * @param listener
1242
- */
1243
- onDrop(listener: (args: {
1088
+ tags?: Array<string>,
1244
1089
  /**
1245
- * dragged node id
1090
+ * template name, you can specify multiple templates with tags in one chart
1246
1091
  */
1247
- dragId: string | number,
1092
+ templateName?: string,
1248
1093
  /**
1249
- * dropped node id
1094
+ * a reference to the left node neighbor, the default value is undefined
1250
1095
  */
1251
- dropId: string | number
1252
- }) => void): OrgChart;
1253
-
1254
- /**
1255
- * The onRedraw event occurs when the chart is redrawed.
1256
- * ```typescript
1257
- * var chart = new OrgChart('#tree', {});
1258
- * chart.onRedraw(() => {
1259
- * });
1260
- * ```
1261
- * @category Event Listeners
1262
- * @param listener
1263
- */
1264
- onRedraw(listener: () => void): OrgChart;
1265
-
1266
- /**
1267
- * The onExpandCollpaseButtonClick event occurs when the chart is redrawed.
1268
- * ```typescript
1269
- * var chart = new OrgChart('#tree', {});
1270
- * chart.onExpandCollpaseButtonClick(() => {
1271
- * //return false; to cancel the operation
1272
- * });
1273
- * ```
1274
- * @category Event Listeners
1275
- * @param listener
1276
- */
1277
- onExpandCollpaseButtonClick(listener: (args: {
1096
+ leftNeighbor?: node | undefined,
1278
1097
  /**
1279
- * Indicates id the operation is collaps or expand
1098
+ * a reference to the right node neighbor, the default value is undefined
1280
1099
  */
1281
- collapsing: boolean,
1100
+ rightNeighbor?: node | undefined,
1282
1101
  /**
1283
- * the id of the clicked node
1102
+ * x position, default value undefined
1284
1103
  */
1285
- id: number | string,
1104
+ x?: number | undefined,
1286
1105
  /**
1287
- * node ids that will be expanded or collapsed
1106
+ * y position, default value undefined
1288
1107
  */
1289
- ids: Array<number | string>
1290
- }) => void): OrgChart;
1291
- /**
1292
- * 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.
1293
- * ```typescript
1294
- * var chart = new OrgChart('#tree', {});
1295
- * chart.onExporStart(() => {
1296
- * args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
1297
- * //return false; to cancel the operation
1298
- * });
1299
- * ```
1300
- * @category Event Listeners
1301
- * @param listener
1302
- */
1303
- onExporStart(listener: (args:
1108
+ y?: number | undefined,
1109
+ /**
1110
+ * width of the node, default value undefined
1111
+ */
1112
+ w?: number | undefined,
1113
+ /**
1114
+ * height of the node, default value undefined
1115
+ */
1116
+ h?: number | undefined,
1117
+ /**
1118
+ * if the node is assistant is true if not false if the node is not initialized is undefined
1119
+ */
1120
+ isAssistant?: boolean | undefined,
1121
+ /**
1122
+ * sub tree container nodes array, property only for the root node, default value undefined
1123
+ */
1124
+ stContainerNodes?: Array<node> | undefined,
1125
+ /**
1126
+ * it is set only if you define order option, default value undefined
1127
+ */
1128
+ order?: number | undefined,
1129
+ /**
1130
+ * true if the node is collpased, false if it is not and undefined if not initalized
1131
+ */
1132
+ collapsed?: boolean | undefined,
1133
+ /**
1134
+ * a level of the node starting from zero
1135
+ */
1136
+ level?: number,
1304
1137
  /**
1305
- * for PDF/PNG exports
1138
+ * true if the node is minimized, default value undefined
1139
+ */
1140
+ min?: boolean | undefined,
1141
+ /**
1142
+ * sub levels, default value undefined
1143
+ */
1144
+ subLevels?: number | undefined,
1145
+ /**
1146
+ * set only if the node contains sub trees and padding is defined in the template, default value undefined
1147
+ */
1148
+ padding?: number | undefined,
1149
+ /**
1150
+ * layout configuration name, default value undefined
1151
+ */
1152
+ lcn?: string | undefined,
1153
+ /**
1154
+ * for assistant nodes and mixed layout we create dynamic nodes called splits, default value undefined
1155
+ */
1156
+ isSplit?: boolean | undefined
1157
+ }
1158
+
1159
+ interface options {
1160
+ /**
1161
+ * Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - *true*.
1162
+ * ```typescript
1163
+ * var chart = new OrgChart('#tree', {
1164
+ * interactive: false
1165
+ * });
1166
+ * ```
1167
+ */
1168
+ interactive?: boolean,
1169
+
1170
+ /**
1171
+ * Color mode. Default value - *light*.
1172
+ * ```typescript
1173
+ * var chart = new OrgChart('#tree', {
1174
+ * mode: "dark"
1175
+ * });
1176
+ * ```
1306
1177
  */
1307
- {
1178
+ mode?: "dark" | "light",
1308
1179
  /**
1309
- * the content to be exported
1180
+ * Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need. Default value - *true*.
1181
+ * ```typescript
1182
+ * var chart = new OrgChart('#tree', {
1183
+ * lazyLoading: false
1184
+ * });
1185
+ * ```
1310
1186
  */
1311
- content: string,
1187
+ lazyLoading?: boolean,
1188
+
1189
+
1190
+
1312
1191
  /**
1313
- * export options
1192
+ * Enables advanced search. Default value is true.
1193
+ * ```typescript
1194
+ * var chart = new OrgChart('#tree', {
1195
+ * enableSearch: false
1196
+ * });
1197
+ * ```
1314
1198
  */
1315
- options: OrgChart.exportOptions,
1199
+ enableSearch?: boolean,
1200
+
1316
1201
  /**
1317
- * add extra styles
1202
+ * Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad. Default value - *false*.
1203
+ * ```typescript
1204
+ * var chart = new OrgChart('#tree', {
1205
+ * enableTouch: true
1206
+ * });
1207
+ * ```
1318
1208
  */
1319
- styles: string,
1209
+ enableTouch?: boolean,
1320
1210
  /**
1321
- * an object that discribes pages to be exported
1211
+ * Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the chart. Default value - *false*.
1212
+ * ```typescript
1213
+ * var chart = new OrgChart('#tree', {
1214
+ * enableKeyNavigation: true
1215
+ * });
1216
+ * ```
1217
+ * {@link https://balkan.app/OrgChartJS/Docs/KeyNavigation | See doc...}
1322
1218
  */
1323
- pages: any
1324
- } |
1325
- /**
1326
- * for CSV/XML exports
1327
- */
1328
- {
1219
+ enableKeyNavigation?: boolean,
1329
1220
  /**
1330
- * extension
1221
+ * Shows mini map over the expanded tree. Default value - *false*.
1222
+ * ```typescript
1223
+ * var chart = new OrgChart('#tree', {
1224
+ * miniMap: true
1225
+ * });
1226
+ * ```
1331
1227
  */
1332
- ext: string,
1228
+ miniMap?: boolean,
1333
1229
  /**
1334
- * filename, you can change the filename here
1230
+ * Enables edit, add, remove and other node operations. Also you can define your own node operation.
1231
+ * ```typescript
1232
+ * var chart = new OrgChart('#tree', {
1233
+ * nodeMenu:{
1234
+ * details: {text:"Details"},
1235
+ * edit: {text:"Edit"},
1236
+ * add: {text:"Add"},
1237
+ * remove: {text:"Remove"},
1238
+ * myMenuItem: {text:"My node menu Item", onClick: function {}}
1239
+ * }
1240
+ * });
1241
+ * ```
1242
+ * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
1335
1243
  */
1336
- filename: string,
1244
+ nodeMenu?: OrgChart.menu;
1337
1245
  /**
1338
- * an array of node objects
1246
+ * With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template.
1247
+ * ```typescript
1248
+ * var chart = new OrgChart('#tree', {
1249
+ * nodeCircleMenu: {
1250
+ * editNode: {
1251
+ * icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
1252
+ * text: "Edit node",
1253
+ * color: "white"
1254
+ * },
1255
+ * addClink: {
1256
+ * icon: OrgChart.icon.link(24, 24, '#aeaeae'),
1257
+ * text: "Add C link",
1258
+ * color: '#fff',
1259
+ * draggable: true
1260
+ * }
1261
+ * }
1262
+ * });
1263
+ * ```
1264
+ * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
1339
1265
  */
1340
- nodes: Array<object>
1341
- } |
1342
- /**
1343
- * for SVG
1344
- */
1345
- {
1266
+ nodeCircleMenu?: OrgChart.menu,
1346
1267
  /**
1347
- * the content to be exported
1268
+ * Customizable context menu. Also you can define your own node operation.
1269
+ * ```typescript
1270
+ * var chart = new OrgChart('#tree', {
1271
+ * nodeContextMenu:{
1272
+ * details: {text:"Details"},
1273
+ * edit: {text:"Edit"},
1274
+ * add: {text:"Add"},
1275
+ * remove: {text:"Remove"}
1276
+ * myMenuItem: {text:"My node menu Item", onClick: function {}}
1277
+ * }
1278
+ * });
1279
+ * ```
1280
+ * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
1348
1281
  */
1349
- content: string,
1282
+ nodeContextMenu?: OrgChart.menu,
1350
1283
  /**
1351
- * export options
1284
+ * Enables export to excel, export to svg and other OrgChart operations. Also you can define your own OrgChart operation.
1285
+ * ```typescript
1286
+ * var chart = new OrgChart('#tree', {
1287
+ * menu:{
1288
+ * svg: { text: "Export SVG" },
1289
+ * csv: { text: "Export CSV" }
1290
+ * myMenuItem: {text:"My node menu Item", onClick: function {}}
1291
+ * }
1292
+ * });
1293
+ * ```
1294
+ * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
1352
1295
  */
1353
- options: OrgChart.exportOptions,
1296
+ menu?: OrgChart.menu,
1354
1297
  /**
1355
- * add extra styles
1298
+ * With the toolbar enabled allows you to change the layout, zoom in/out, expand all nodes, etc.
1299
+ * ```typescript
1300
+ * var chart = new OrgChart('#tree', {
1301
+ * toolbar: {
1302
+ * layout: true,
1303
+ * zoom: true,
1304
+ * fit: true,
1305
+ * expandAll: false,
1306
+ * fullScreen: true
1307
+ * },
1308
+ * });
1309
+ * ```
1356
1310
  */
1357
- styles: string,
1358
-
1359
- }) => void): OrgChart;
1360
- /**
1361
- * 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.
1362
- * ```typescript
1363
- * var chart = new OrgChart('#tree', {});
1364
- * chart.onExporEnd(() => {
1365
- * //return false; to cancel the operation for example id you prefer the exported document to not download
1366
- * });
1367
- * ```
1368
- * @category Event Listeners
1369
- * @param listener
1370
- */
1371
- onExporEnd(listener: (args:
1311
+ toolbar?: OrgChart.toolbar,
1372
1312
  /**
1373
- * for PDF/PNG
1313
+ * Stops the chart locking to the top of the screen once you move it.
1314
+ * ```typescript
1315
+ * var chart = new OrgChart('#tree', {
1316
+ * sticky: false
1317
+ * });
1318
+ * ```
1374
1319
  */
1375
- {
1320
+ sticky?: boolean,
1376
1321
  /**
1377
- * the array buffer is the exported document, you can save it on a server or send it via email
1322
+ * nodeMouseClick can accept the following values:
1323
+ * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
1324
+ * - OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
1325
+ * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
1326
+ * - OrgChart.action.none - do nothing on node click event
1327
+ * - OrgChart.action.pan - allows you to move the chart in any direction
1328
+ *
1329
+ * Default value - *OrgChart.action.details*
1330
+ * ```typescript
1331
+ * var chart = new OrgChart('#tree', {
1332
+ * nodeMouseClick: OrgChart.action.edit
1333
+ * });
1334
+ * ```
1378
1335
  */
1379
- ArrayBuffer: ArrayBuffer
1380
- } |
1381
- /**
1382
- * for CSV/XML exports
1383
- */
1384
- {
1336
+ nodeMouseClick?: OrgChart.action,
1385
1337
  /**
1386
- * extension
1338
+ * nodeMouseDbClick can accept the following values:
1339
+ * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
1340
+ * - OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only
1341
+ * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
1342
+ * - OrgChart.action.none - do nothing on node click event
1343
+ *
1344
+ * Default value - *OrgChart.action.none*
1345
+ * ```typescript
1346
+ * var chart = new OrgChart('#tree', {
1347
+ * nodeMouseDbClick: OrgChart.action.edit
1348
+ * });
1349
+ * ```
1387
1350
  */
1388
- ext: string,
1389
- /**
1390
- * filename, you can change the filename here
1391
- */
1392
- filename: string,
1393
- /**
1394
- * an array of node objects
1395
- */
1396
- nodes: Array<object>,
1397
- /**
1398
- * csv ot xml string
1399
- */
1400
- content: string
1401
- } |
1402
- /**
1403
- * for SVG exports
1404
- */
1405
- {
1351
+ nodeMouseDbClick?: OrgChart.action,
1406
1352
  /**
1407
- * the content to be exported
1353
+ * mouseScrool can accept the following values:
1354
+ * - OrgChart.action.zoom - will zoom in/out on mouse scroll
1355
+ * - OrgChart.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed
1356
+ * - OrgChart.action.xScroll - left/right move of the chart on mouse scroll
1357
+ * - OrgChart.action.yScroll - up/down move of the chart on mouse scroll
1358
+ * - OrgChart.action.none - do nothing on mouse scroll
1359
+ *
1360
+ * Default value - *OrgChart.action.zoom*
1361
+ * ```typescript
1362
+ * var chart = new OrgChart('#tree', {
1363
+ * mouseScrool: OrgChart.action.ctrlZoom
1364
+ * });
1365
+ * ```
1408
1366
  */
1409
- content: string,
1410
- /**
1411
- * export options
1412
- */
1413
- options: OrgChart.exportOptions,
1414
- /**
1415
- * add extra styles
1416
- */
1417
- styles: string,
1418
- }) => void): OrgChart;
1419
- /**
1420
- * On node click event listener.
1421
- * ```typescript
1422
- * var chart = new OrgChart('#tree', {});
1423
- * chart.onNodeClick(() => {
1424
- * //return false; to cancel the operation
1425
- * });
1426
- * ```
1427
- * @category Event Listeners
1428
- * @param listener
1429
- */
1430
- onNodeClick(listener: (args: {
1367
+ mouseScrool?: OrgChart.action,
1431
1368
  /**
1432
- * node JSON object
1369
+ * Shows horizontal scrollbar. Default value - *false*.
1370
+ * ```typescript
1371
+ * var chart = new OrgChart('#tree', {
1372
+ * showXScroll: true
1373
+ * });
1374
+ * ```
1433
1375
  */
1434
- node: OrgChart.node,
1376
+ showXScroll?: boolean ,
1435
1377
  /**
1436
- * the browser event
1378
+ * Shows vertical scrollbar. Default value - *false*.
1379
+ * ```typescript
1380
+ * var chart = new OrgChart('#tree', {
1381
+ * showYScroll: true
1382
+ * });
1383
+ * ```
1437
1384
  */
1438
- event: any
1439
- }) => void): OrgChart;
1440
- /**
1441
- * On node double click event listener.
1442
- * ```typescript
1443
- * var chart = new OrgChart('#tree', {});
1444
- * chart.onNodeDoubleClick(() => {
1445
- * //return false; to cancel the operation
1446
- * });
1447
- * ```
1448
- * @category Event Listeners
1449
- * @param listener
1450
- */
1451
- onNodeDoubleClick(listener: (args: {
1385
+ showYScroll?: boolean ,
1452
1386
  /**
1453
- * clicked node data
1387
+ * Set template if you want to change the appearance of the chart. Org Chart JS comes with number of build-in templates:
1388
+ * - ana
1389
+ * - ula
1390
+ * - olivia
1391
+ * - belinda
1392
+ * - rony
1393
+ * - mery
1394
+ * - polina
1395
+ * - mila
1396
+ * - diva
1397
+ * - base
1398
+ * - isla
1399
+ * - deborah
1400
+ *
1401
+ * Default value - *ana*.
1402
+ * ```typescript
1403
+ * var chart = new OrgChart('#tree', {
1404
+ * template: 'olivia'
1405
+ * });
1406
+ * ```
1407
+ * {@link https://balkan.app/OrgChartJS/Docs/PredefinedTemplates | See doc...}
1454
1408
  */
1455
- data: object
1456
- }) => void): OrgChart;
1457
-
1458
- editUI: OrgChart.editUI;
1459
- searchUI: OrgChart.searchUI;
1460
- nodeMenuUI: OrgChart.menuUI;
1461
- nodeCircleMenuUI: OrgChart.circleMenuUI;
1462
- nodeContextMenuUI: OrgChart.menuUI;
1463
- menuUI: OrgChart.menuUI;
1464
- toolbarUI: OrgChart.toolbarUI;
1465
-
1466
- static fileUploadDialog(callback: () => void): void;
1467
- static isMobile(): boolean;
1468
- /**
1469
- * Checks if the used libraris is licnsed or not
1470
- */
1471
- static isTrial(): boolean;
1472
- /**
1473
- * Count all children nodes of the specified id.
1474
- * @param chart OrgChart instance
1475
- * @param node
1476
- * @param count
1477
- */
1478
- static childrenCount(chart: OrgChart, node: OrgChart.node, count?: number): number;
1479
- static collapsedChildrenCount(chart: OrgChart, node: OrgChart.node, count?: number): number;
1480
- static getRootOf(node: OrgChart.node): OrgChart.node;
1481
- static isNEU(val: unknown): boolean;
1482
- static gradientCircleForDefs(id: string | number, colors: Array<string> | string, r: number, strokeWidth: number): string;
1483
-
1484
-
1485
- /**
1486
- * Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
1487
- */
1488
- static loading: {
1489
- show: (chart: OrgChart) => void,
1490
- hide: (chart: OrgChart) => void
1491
- }
1492
-
1493
- static clinkTemplates: {
1494
- orange: OrgChart.linkTemplate,
1495
- blue: OrgChart.linkTemplate,
1496
- yellow: OrgChart.linkTemplate,
1497
- [key: string]: OrgChart.linkTemplate
1498
- }
1499
-
1500
- static slinkTemplates: {
1501
- orange: OrgChart.linkTemplate,
1502
- blue: OrgChart.linkTemplate,
1503
- yellow: OrgChart.linkTemplate,
1504
- [key: string]: OrgChart.linkTemplate
1505
- }
1506
-
1507
-
1508
- static templates: {
1509
- [key: string]: {
1510
- defs: string,
1511
- size: Array<number>,
1512
- expandCollapseSize: number,
1513
- linkAdjuster: {
1514
- fromX: number,
1515
- fromY: number,
1516
- toX: number,
1517
- toY: number
1518
- },
1519
- ripple: {
1520
- radius: number,
1521
- color: string,
1522
- rect: Array<number>
1523
- },
1524
- assistanseLink: string,
1525
- svg: string,
1526
- link: string,
1527
- pointer: string,
1528
- node: string,
1529
- plus: string,
1530
- minus: string,
1531
- nodeMenuButton: string,
1532
- menuButton: string,
1533
- img_0: string,
1534
- link_field_0: string,
1535
- editFormHeaderColor: string,
1536
- nodeCircleMenuButton: string
1537
- }
1538
- };
1539
-
1540
-
1541
- static scroll: {
1542
- smooth: number,
1543
- speed: number,
1544
- safari: { smooth: number; speed: number; },
1545
- edge: { smooth: number; speed: number; },
1546
- chrome: { smooth: number; speed: number; },
1547
- firefox: { smooth: number; speed: number; },
1548
- opera: { smooth: number; speed: number; }
1549
- };
1550
-
1551
-
1552
- static icon: {
1553
- png: (w: string, h: string, c: string) => string,
1554
- pdf: (w: string, h: string, c: string) => string,
1555
- svg: (w: string, h: string, c: string) => string,
1556
- csv: (w: string, h: string, c: string) => string,
1557
- excel: (w: string, h: string, c: string) => string,
1558
- edit: (w: string, h: string, c: string) => string,
1559
- details: (w: string, h: string, c: string) => string,
1560
- remove: (w: string, h: string, c: string) => string,
1561
- add: (w: string, h: string, c: string) => string,
1562
- xml: (w: string, h: string, c: string) => string,
1563
- link: (w: string, h: string, c: string) => string,
1564
- happy: (w: string, h: string, c: string) => string,
1565
- sad: (w: string, h: string, c: string) => string,
1566
- share: (w: string, h: string, c: string, x: string, y: string) => string,
1567
- user: (w: string, h: string, c: string, x: string, y: string) => string
1568
- };
1569
-
1570
-
1571
- static events: {
1572
- on(type: "node-created" | "layout", listener: (args: unknown, args1: unknown, args2: unknown) => void): void
1573
- };
1574
- static state: { clear(stateName: string): void };
1575
-
1576
- static VERSION: string;
1577
- /**
1578
- * @ignore
1579
- */
1580
- static TEXT_THRESHOLD: number;
1581
- /**
1582
- * @ignore
1583
- */
1584
- static IMAGES_THRESHOLD: number;
1585
- /**
1586
- * @ignore
1587
- */
1588
- static LINKS_THRESHOLD: number;
1589
- /**
1590
- * @ignore
1591
- */
1592
- static BUTTONS_THRESHOLD: number;
1593
- /**
1594
- * @ignore
1595
- */
1596
- static ANIM_THRESHOLD: number;
1597
-
1598
- /**
1599
- * @ignore
1600
- */
1601
- static IT_IS_LONELY_HERE: string;
1602
- /**
1603
- * @ignore
1604
- */
1605
- static RES: {
1409
+ template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string,
1606
1410
  /**
1607
- * @ignore
1608
- */
1609
- IT_IS_LONELY_HERE_LINK: string
1610
- };
1611
- /**
1612
- * @ignore
1613
- */
1614
- static FIRE_DRAG_NOT_CLICK_IF_MOVE: number;
1615
- /**
1616
- * @ignore
1617
- */
1618
- static STRING_TAGS: boolean;
1619
- /**
1620
- * @ignore
1621
- */
1622
- static SEARCH_PLACEHOLDER: string;
1623
- /**
1624
- * @ignore
1625
- */
1626
- static IMPORT_MESSAGE: string;
1627
- /**
1628
- * @ignore
1629
- */
1630
- static FIXED_POSITION_ON_CLICK: boolean;
1631
- /**
1632
- * @ignore
1633
- */
1634
- static RENDER_LINKS_BEFORE_NODES: boolean;
1635
- /**
1636
- * @ignore
1637
- */
1638
- static MIXED_LAYOUT_ALL_NODES: boolean;
1639
- /**
1640
- * @ignore
1641
- */
1642
- static MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN: boolean;
1643
- /**
1644
- * @ignore
1645
- */
1646
- static LINK_ROUNDED_CORNERS: number;
1647
- /**
1648
- * @ignore
1649
- */
1650
- static MOVE_STEP: number;
1651
- /**
1652
- * @ignore
1653
- */
1654
- static MOVE_INTERVAL: number;
1655
- /**
1656
- * @ignore
1657
- */
1658
- static CLINK_CURVE: number;
1659
- /**
1660
- * @ignore
1661
- */
1662
- static SEARCH_RESULT_LIMIT: number;
1663
- /**
1664
- * @ignore
1665
- */
1666
- static MAX_DEPTH: number;
1667
- /**
1668
- * @ignore
1669
- */
1670
- static SCALE_FACTOR: number;
1671
- /**
1672
- * @ignore
1673
- */
1674
- static LAZY_LOADING_FACTOR: number;
1675
-
1676
- }
1677
-
1678
- declare namespace OrgChart {
1679
-
1680
- interface editUI {
1411
+ * With tags option you can:
1412
+ * - Set a specific template for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/MultipleTemplates | See doc...}
1413
+ * - Set node as assistant {@link https://balkan.app/OrgChartJS/Docs/Assistant | See doc...}
1414
+ * - Change node menu, circle menu and context menu items for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
1415
+ * - Set the node level {@link https://balkan.app/OrgChartJS/Demos/SubLevels | See demo...}
1416
+ * - Set specific options for sub trees like layout templates etc {@link https://balkan.app/OrgChartJS/Docs/SubTrees | See doc...}
1417
+ * ```typescript
1418
+ * var chart = new OrgChart('#tree', {
1419
+ * tags: {
1420
+ * myTag: {template: 'olivia'}
1421
+ * },
1422
+ * nodes: [{id: 1}, {id: 2, tags: ['myTag']}]
1423
+ * });
1424
+ * ```
1425
+ */
1426
+ tags?: {
1427
+ [key: string]: {
1428
+ template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string,
1429
+ subLevels?: number,
1430
+ nodeMenu?: OrgChart.menu,
1431
+ nodeCircleMenu?: OrgChart.menu,
1432
+ nodeContextMenu?: OrgChart.menu,
1433
+ subTreeConfig?: {
1434
+ orientation?: OrgChart.orientation,
1435
+ levelSeparation?: number,
1436
+ mixedHierarchyNodesSeparation?: number,
1437
+ subtreeSeparation?: number,
1438
+ siblingSeparation?: number,
1439
+ layout?: OrgChart.layout | number,
1440
+ columns?: number,
1441
+ collapse?: {
1442
+ level?: number,
1443
+ allChildren?: boolean
1444
+ }
1445
+ }
1446
+ };
1447
+ },
1681
1448
  /**
1682
- * Inits edit ui
1683
- * @param obj
1449
+ * Minimize/Maximize node. The template has to have min defined. Default value - *false*.
1450
+ * ```typescript
1451
+ * var chart = new OrgChart('#tree', {
1452
+ * min: true
1453
+ * });
1454
+ * ```
1455
+ * {@link https://balkan.app/OrgChartJS/Docs/MinMax | See doc...}
1684
1456
  */
1685
- init(obj: OrgChart): void;
1457
+ min?: false,
1686
1458
  /**
1687
- * The on() method of the editUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
1688
- * @category Event Listeners
1689
- * @param type A case-sensitive string representing the event type to listen for.
1690
- * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
1459
+ * Node binding in Org Chart JS maps node data to node template parameters.
1460
+ * ```typescript
1461
+ * var chart = new OrgChart('#tree', {
1462
+ * nodeBinding: {
1463
+ * field_0: "name"
1464
+ * },
1465
+ * nodes: [
1466
+ * { id: 1, name: "Amber McKenzie" }
1467
+ * ]
1468
+ * });
1469
+ * ```
1691
1470
  */
1692
- on(type: "show" | "element-btn-click" | "button-click" | "hide", listener: (sender: editUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): editUI;
1471
+ nodeBinding?: { [key: string]: string },
1693
1472
  /**
1694
- * Shows the edit form for the specified node id
1695
- * @param id node id
1696
- * @param detailsMode If true the edit form is in read only mode
1697
- * @param dontAnim
1473
+ * Link binding in Org Chart JS maps node data to link template parameters.
1474
+ * ```typescript
1475
+ * var chart = new OrgChart('#tree', {
1476
+ * nodeBinding: {
1477
+ * link_field_0: "createdAt"
1478
+ * },
1479
+ * nodes: [
1480
+ * { id: "1", name: "Amber McKenzie" },
1481
+ * { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
1482
+ * { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
1483
+ * ]
1484
+ * });
1485
+ * ```
1486
+ * {@link https://balkan.app/OrgChartJS/Docs/Link | See doc...}
1698
1487
  */
1699
- show(id: string | number, detailsMode: boolean, dontAnim: boolean): void;
1488
+ linkBinding?: { [key: string]: string },
1700
1489
  /**
1701
- * Hides the edit form
1490
+ * Search by the fields defined in searchFields.
1491
+ * ```typescript
1492
+ * var chart = new OrgChart('#tree', {
1493
+ * searchFields: ["name", "title", etc...]
1494
+ * });
1495
+ * ```
1496
+ * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
1702
1497
  */
1703
- hide(): void;
1704
- content(id: string | number, detailsMode: boolean, dontAnim: boolean, width: string, dontRenderButtons: boolean): string;
1705
- }
1706
-
1707
- interface searchUI {
1708
- init(obj: OrgChart): void;
1498
+ searchFields?: Array<string>,
1709
1499
  /**
1710
- * The on() method of the searchUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
1711
- * @category Event Listeners
1712
- * @param type A case-sensitive string representing the event type to listen for.
1713
- * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
1714
- */
1715
- on(type: "searchclick", listener: (sender: OrgChart, args: unknown, args1: unknown, args2: unknown) => void | boolean): searchUI;
1716
- /**
1717
- * Hides the search grid
1500
+ * Displays a field in the search result.
1501
+ * ```typescript
1502
+ * var chart = new OrgChart('#tree', {
1503
+ * searchDisplayField: "name"
1504
+ * });
1505
+ * ```
1506
+ * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
1718
1507
  */
1719
- hide(): void;
1508
+ searchDisplayField?: string,
1720
1509
  /**
1721
- * Finds filed data by specified value
1722
- * @param value search for value
1510
+ * Search by weight of the fields.
1511
+ * ```typescript
1512
+ * var chart = new OrgChart('#tree', {
1513
+ * searchFieldsWeight: {
1514
+ * "Name": 100, //percent
1515
+ * "Title": 20 //percent
1516
+ * }
1517
+ * });
1518
+ * ```
1519
+ * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
1723
1520
  */
1724
- find(value: string): void;
1725
- createItem(img: string, id: string | number, first: string, second: string): string;
1726
- }
1727
-
1728
- interface menuUI {
1729
- init(obj: OrgChart, menu: { [key: string]: menu }): void;
1521
+ searchFieldsWeight?: { [key: string]: number },
1730
1522
  /**
1731
- * The on() method of the menuUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
1732
- * @category Event Listeners
1733
- * @param type A case-sensitive string representing the event type to listen for.
1734
- * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
1735
- */
1736
- on(type: "show", listener: (sender: menuUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): menuUI;
1523
+ * Array of node data JSON objects. nodes option is the data source of the chart. Node JSON objects could have unlimited number of properties, id, pid, ppid, stpid and tags are reserved node properties.
1524
+ * - id - unique identifier, it clould be integer or string
1525
+ * - pid - is the parent id
1526
+ * - stpid - subtree parent id
1527
+ * - ppid - parent partner id
1528
+ * - tags - array of strings
1529
+ * ```typescript
1530
+ * var chart = new OrgChart('#tree', {
1531
+ * nodes: [
1532
+ * { id: 1 },
1533
+ * { id: 2, pid: 1, tags: ["Sales"] },
1534
+ * { id: 3, stpid: 2 }
1535
+ * ]
1536
+ * });
1537
+ * ```
1538
+ */
1539
+ nodes?: Array<string | number>,
1737
1540
  /**
1738
- * Shows menu next to html element
1739
- * @param stickToElement
1740
- * @param firstNodeId
1741
- * @param secondNodeId
1742
- * @param menu
1541
+ * Adds curved link.
1542
+ * ```typescript
1543
+ * var chart = new OrgChart('#tree', {
1544
+ * clinks: [
1545
+ * from: 4, to: 0, label: 'text'},
1546
+ * {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
1547
+ * {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
1548
+ * ]
1549
+ * });
1550
+ * ```
1743
1551
  */
1744
- showStickIn(stickToElement: HTMLElement, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void;
1552
+ clinks?: Array<OrgChart.link>,
1745
1553
  /**
1746
- * Hieds the menu
1554
+ * Adds second link.
1555
+ * ```typescript
1556
+ * var chart = new OrgChart('#tree', {
1557
+ * slinks: [
1558
+ * from: 4, to: 0, label: 'text'},
1559
+ * {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
1560
+ * {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
1561
+ * ]
1562
+ * });
1563
+ * ```
1747
1564
  */
1748
- hide(): void;
1565
+ slinks?: Array<OrgChart.link>,
1749
1566
  /**
1750
- * Shows menu by x,y position
1751
- * @param x
1752
- * @param y
1753
- * @param firstNodeId
1754
- * @param secondNodeId
1755
- * @param menu
1567
+ * The gap between each level. Default value - *60*
1568
+ * ```typescript
1569
+ * var chart = new OrgChart('#tree', {
1570
+ * levelSeparation: 50
1571
+ * });
1572
+ * ```
1756
1573
  */
1757
- show(x: number, y: number, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void;
1758
- }
1759
-
1760
- interface circleMenuUI {
1574
+ levelSeparation?: number,
1761
1575
  /**
1762
- * Inits circle menu instance
1763
- * @param obj
1764
- * @param menu
1576
+ * The gap between nodes in a subtree. Default value - *20*
1577
+ * ```typescript
1578
+ * var chart = new OrgChart('#tree', {
1579
+ * siblingSeparation: 50
1580
+ * });
1581
+ * ```
1765
1582
  */
1766
- init(obj: OrgChart, menu: { [key: string]: menu }): void;
1583
+ siblingSeparation?: number,
1767
1584
  /**
1768
- * Shows circle menu
1769
- * @param nodeId
1770
- * @param menu
1585
+ * The gap between subtrees. Default value - *40*
1586
+ * ```typescript
1587
+ * var chart = new OrgChart('#tree', {
1588
+ * subtreeSeparation: 50
1589
+ * });
1590
+ * ```
1771
1591
  */
1772
- show(nodeId: string | number, menu: { [key: string]: menu }): void;
1592
+ subtreeSeparation?: number,
1773
1593
  /**
1774
- * Hides circle menu
1594
+ * The gap between nodes in vertical layout. Default value - *20*
1595
+ * ```typescript
1596
+ * var chart = new OrgChart('#tree', {
1597
+ * mixedHierarchyNodesSeparation: 5
1598
+ * });
1599
+ * ```
1775
1600
  */
1776
- hide(): void;
1601
+ mixedHierarchyNodesSeparation?: number,
1777
1602
  /**
1778
- * The on() method of the circleMenuUI interface sets up a function that will be called whenever the specified event is delivered to the target. *
1779
- * @category Event Listeners
1780
- * @param type A case-sensitive string representing the event type to listen for.
1781
- * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
1782
- */
1783
- on(type: "show" | "drag" | "drop" | "mouseenter" | "mouseout", listener: (sender: circleMenuUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): circleMenuUI;
1784
- }
1785
-
1786
- interface toolbarUI {
1787
- init(obj: OrgChart, toolbar: toolbar): void;
1788
- showLayout(): void;
1789
- hideLayout(): void;
1790
-
1791
-
1792
- expandAllIcon: string;
1793
- fitIcon: string;
1794
- openFullScreenIcon: string;
1795
- closeFullScreenIcon: string;
1796
- zoomInIcon: string;
1797
- zoomOutIcon: string;
1798
- layoutIcon: string;
1799
- }
1800
-
1801
-
1802
-
1803
- type toolbar = {
1804
- layout: boolean,
1805
- zoom: boolean,
1806
- fit: boolean,
1807
- expandAll: boolean,
1808
- fullScreen: boolean
1809
- }
1810
-
1811
-
1812
- type exportOptions = {
1813
- margin: Array<number>,
1814
- padding: number,
1815
- landscape: boolean,
1816
- filename: string,
1817
- scale: "fit" | number,
1818
- format: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal",
1819
- header: string,
1820
- footer: string,
1821
- openInNewTab: boolean
1822
- }
1823
-
1824
- type linkTemplate = {
1825
- defs: string,
1826
- link: string,
1827
- label: string,
1828
- labelPosition: string
1829
- }
1830
- type menu = {
1831
- [key: string]: {
1832
- text: string,
1833
- icon: string,
1834
- onClick: Function,
1835
- color: string,
1836
- draggable: boolean
1837
- }
1838
- }
1839
- type editFormElement = {
1840
- type: string,
1841
- label: string,
1842
- binding: string,
1843
- options: Array<unknown>,
1844
- btn: string,
1845
- vlidators: { required: string, email: string }
1846
- }
1847
- type link = {
1848
- from: string | number,
1849
- to: string | number,
1850
- template: string,
1851
- label: string
1852
- }
1853
- type orderBy = {
1854
- field: string,
1855
- desc: boolean
1856
- }
1857
- enum orientation {
1858
- top,
1859
- bottom,
1860
- right,
1861
- left,
1862
- top_left,
1863
- bottom_left,
1864
- right_top,
1865
- left_top
1866
- }
1867
- enum layout {
1868
- normal,
1869
- mixed,
1870
- tree,
1871
- treeLeftOffset,
1872
- treeRightOffset
1873
- }
1874
-
1875
- enum align {
1876
- center,
1877
- orientation
1878
- }
1879
- enum anim {
1880
- inPow,
1881
- outPow,
1882
- inOutPow,
1883
- inSin,
1884
- outSin,
1885
- inOutSin,
1886
- inExp,
1887
- outExp,
1888
- inOutExp,
1889
- inCirc,
1890
- outCirc,
1891
- inOutCirc,
1892
- rebound,
1893
- inBack,
1894
- outBack,
1895
- inOutBack,
1896
- impulse,
1897
- expPulse
1898
- }
1899
- enum match {
1900
- height,
1901
- width,
1902
- boundary
1903
- }
1904
-
1905
-
1906
- enum action {
1907
- update,
1908
- expand,
1909
- collapse,
1910
- exporting,
1911
- init,
1912
- centerNode,
1913
- insert,
1914
- maximize,
1915
- minimize,
1916
- edit,
1917
- details,
1918
- expandCollapse,
1919
- pan,
1920
- zoom,
1921
- ctrlZoom,
1922
- xScroll,
1923
- yScroll,
1924
- none
1925
- }
1926
-
1927
- type node = {
1603
+ * Set the assistant separation value. Default value - *100*
1604
+ * ```typescript
1605
+ * var chart = new OrgChart('#tree', {
1606
+ * assistantSeparation: 150
1607
+ * });
1608
+ * ```
1609
+ */
1610
+ assistantSeparation?: number,
1928
1611
  /**
1929
- * the same id you provided in the source node
1612
+ * Minimum gap between partner and node with partners. Default value - *50*
1613
+ * ```typescript
1614
+ * var chart = new OrgChart('#tree', {
1615
+ * minPartnerSeparation: 100
1616
+ * });
1617
+ * ```
1930
1618
  */
1931
- id: string | number,
1619
+ minPartnerSeparation?: number,
1932
1620
  /**
1933
- * same pid you provided in the source node, the default value is null if not provided or if node with the same id does not exist
1621
+ * Gap between partner links. Default value - *20*
1622
+ * ```typescript
1623
+ * var chart = new OrgChart('#tree', {
1624
+ * partnerChildrenSplitSeparation: 50
1625
+ * });
1626
+ * ```
1934
1627
  */
1935
- pid: string | number,
1628
+ partnerChildrenSplitSeparation?: number,
1936
1629
  /**
1937
- * partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined.
1630
+ * Gap between partners. Default value - *15*
1631
+ * ```typescript
1632
+ * var chart = new OrgChart('#tree', {
1633
+ * partnerNodeSeparation: 30
1634
+ * });
1635
+ * ```
1938
1636
  */
1939
- ppid: string | number,
1637
+ partnerNodeSeparation?: number,
1940
1638
  /**
1941
- * a reference to the parent node, default value is null, if the nodes is collapse this proprty is not initalized and can be null even if pid is not null
1639
+ * The number of colums if the chart has multiple root nodes. Default value - *10*
1640
+ * ```typescript
1641
+ * var chart = new OrgChart('#tree', {
1642
+ * columns: 1
1643
+ * });
1644
+ * ```
1942
1645
  */
1943
- parent: node,
1646
+ columns?: number,
1944
1647
  /**
1945
- * ub tree parent id, it is the parent node id of the root node of the sub tree, it is the same stpid you provided in the source node, the default value is null if not provided or if node with the same id does not exist.
1648
+ * The padding option sets the padding area on all four sides of the OrgChart. Default value - *30*
1649
+ * ```typescript
1650
+ * var chart = new OrgChart('#tree', {
1651
+ * padding: 20
1652
+ * });
1653
+ * ```
1946
1654
  */
1947
- stpid: string | number,
1655
+ padding?: number,
1948
1656
  /**
1949
- * - a reference to the parent node of a sub tree, default value is null, if the parent node is minimized this proprty is not initalized and can be null even if we have stpid
1657
+ * Specifies the orientation of the Org Chart JS. could accept one of the following values:
1658
+ * - OrgChart.orientation.top
1659
+ * - OrgChart.orientation.bottom
1660
+ * - OrgChart.orientation.right
1661
+ * - OrgChart.orientation.left
1662
+ * - OrgChart.orientation.top_left
1663
+ * - OrgChart.orientation.bottom_left
1664
+ * - OrgChart.orientation.right_top
1665
+ * - OrgChart.orientation.left_top
1666
+ *
1667
+ * Default value - *OrgChart.orientation.top*
1668
+ * ```typescript
1669
+ * var chart = new OrgChart('#tree', {
1670
+ * orientation: OrgChart.orientation.bottom
1671
+ * });
1672
+ * ```
1950
1673
  */
1951
- stParent: node,
1952
- isPartner: boolean,
1953
- partnerSeparation: number,
1674
+ orientation?: OrgChart.orientation,
1954
1675
  /**
1955
- * array of ids, always initialized
1676
+ * Sets the layout algoritm:
1677
+ * - OrgChart.layout.normal
1678
+ * - OrgChart.layout.mixed
1679
+ * - OrgChart.layout.tree
1680
+ * - OrgChart.layout.treeLeftOffset
1681
+ * - OrgChart.layout.treeRightOffset
1682
+ *
1683
+ * Default value - *OrgChart.layout.normal*
1684
+ * ```typescript
1685
+ * var chart = new OrgChart('#tree', {
1686
+ * layout: OrgChart.layout.mixed
1687
+ * });
1688
+ * ```
1956
1689
  */
1957
- childrenIds: Array<string | number>,
1690
+ layout?: OrgChart.layout | number,
1958
1691
  /**
1959
- * array of children nodes, initialized on demand if all children are collpased it will be empty array
1692
+ * The scale factor determines what fraction of the entire scale is visible at one time.
1693
+ * - OrgChart.match.height
1694
+ * - OrgChart.match.width
1695
+ * - OrgChart.match.boundary
1696
+ * - [number]
1697
+ *
1698
+ * Default value - *1*
1699
+ * ```typescript
1700
+ * var chart = new OrgChart('#tree', {
1701
+ * scaleInitial: OrgChart.match.boundary
1702
+ * });
1703
+ * ```
1704
+ * {@link https://balkan.app/OrgChartJS/Docs/Layout | See doc...}
1960
1705
  */
1961
- children: Array<node>,
1706
+ scaleInitial?: number | OrgChart.match,
1962
1707
  /**
1963
- * array of sub tree children root node ids, always initialized
1708
+ * Determines the minimum scale factor. Default value - *0.1*
1709
+ * ```typescript
1710
+ * var chart = new OrgChart('#tree', {
1711
+ * scaleMin: 0.2
1712
+ * });
1713
+ * ```
1964
1714
  */
1965
- stChildrenIds: Array<string | number>,
1715
+ scaleMin?: number,
1966
1716
  /**
1967
- * array of sub tree children root nodes, initialized on demand if the node is minimized it will be empty array
1717
+ * Determines the naximum scale factor. Default value - *5*
1718
+ * ```typescript
1719
+ * var chart = new OrgChart('#tree', {
1720
+ * scaleMax: 10
1721
+ * });
1722
+ * ```
1968
1723
  */
1969
- stChildren: Array<node>,
1724
+ scaleMax?: number,
1970
1725
  /**
1971
- * array of string values, the same array you provided in the source node
1972
- */
1973
- tags: Array<string>,
1726
+ * The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array. Default value - *null*
1727
+ * ```typescript
1728
+ * var chart = new OrgChart('#tree', {
1729
+ * orderBy: "orderId",
1730
+ * nodes: [
1731
+ * { id: 10, pid: 1, orderId: 2 },
1732
+ * { id: 11, pid: 1, orderId: 1 }
1733
+ * ]
1734
+ * });
1735
+ * ```
1736
+ * ```typescript
1737
+ * var chart = new OrgChart('#tree', {
1738
+ * orderBy: [field: "orderId", desc: true],
1739
+ * nodes: [
1740
+ * { id: 10, pid: 1, orderId: 2 },
1741
+ * { id: 11, pid: 1, orderId: 1 }
1742
+ * ]
1743
+ * });
1744
+ * ```
1745
+ */
1746
+ orderBy?: string,
1974
1747
  /**
1975
- * template name, you can specify multiple templates with tags in one chart
1976
- */
1977
- templateName: string,
1748
+ * @ignore
1749
+ */
1750
+ editUI?: OrgChart.editUI,
1978
1751
  /**
1979
- * a reference to the left node neighbor, the default value is undefined
1980
- */
1981
- leftNeighbor: node | undefined,
1752
+ * @ignore
1753
+ */
1754
+ searchUI?: OrgChart.searchUI,
1982
1755
  /**
1983
- * a reference to the right node neighbor, the default value is undefined
1984
- */
1985
- rightNeighbor: node | undefined,
1756
+ * @ignore
1757
+ */
1758
+ xScrollUI?: any,
1986
1759
  /**
1987
- * x position, default value undefined
1988
- */
1989
- x: number | undefined,
1760
+ * @ignore
1761
+ */
1762
+ yScrollUI?: any,
1990
1763
  /**
1991
- * y position, default value undefined
1992
- */
1993
- y: number | undefined,
1764
+ * @ignore
1765
+ */
1766
+ nodeMenuUI?: OrgChart.menuUI,
1994
1767
  /**
1995
- * width of the node, default value undefined
1996
- */
1997
- w: number | undefined,
1768
+ * @ignore
1769
+ */
1770
+ nodeCircleMenuUI?: OrgChart.circleMenuUI,
1998
1771
  /**
1999
- * height of the node, default value undefined
2000
- */
2001
- h: number | undefined,
1772
+ * @ignore
1773
+ */
1774
+ nodeContextMenuUI?: OrgChart.menuUI,
2002
1775
  /**
2003
- * if the node is assistant is true if not false if the node is not initialized is undefined
2004
- */
2005
- isAssistant: boolean | undefined,
1776
+ * @ignore
1777
+ */
1778
+ toolbarUI?: OrgChart.toolbarUI,
2006
1779
  /**
2007
- * sub tree container nodes array, property only for the root node, default value undefined
1780
+ * @ignore
2008
1781
  */
2009
- stContainerNodes: Array<node> | undefined,
1782
+ notifierUI?: any,
2010
1783
  /**
2011
- * it is set only if you define order option, default value undefined
2012
- */
2013
- order: number | undefined,
1784
+ * @ignore
1785
+ */
1786
+ menuUI?: OrgChart.menuUI,
2014
1787
  /**
2015
- * true if the node is collpased, false if it is not and undefined if not initalized
1788
+ * @ignore
2016
1789
  */
2017
- collapsed: boolean | undefined,
1790
+ UI?: any,
2018
1791
  /**
2019
- * a level of the node starting from zero
2020
- */
2021
- level: number,
1792
+ * The URL to the export server. Default value - *https://balkan.app/export*
1793
+ * ```typescript
1794
+ * var chart = new OrgChart('#tree', {
1795
+ * exportUrl: "https://balkan.app/export"
1796
+ * });
1797
+ * ```
1798
+ */
1799
+ exportUrl?: string,
2022
1800
  /**
2023
- * true if the node is minimized, default value undefined
2024
- */
2025
- min: boolean | undefined,
1801
+ * Collapse specified level of the chart and its children if allChildren is true.
1802
+ * ```typescript
1803
+ * var chart = new OrgChart('#tree', {
1804
+ * collapse: {level: 2, allChildren: true}
1805
+ * });
1806
+ * ```
1807
+ */
1808
+ collapse?: {
1809
+ level: number,
1810
+ allChildren?: boolean
1811
+ },
2026
1812
  /**
2027
- * sub levels, default value undefined
2028
- */
2029
- subLevels: number | undefined,
1813
+ * Expand specified node ids and its children if allChildren is true. The expand option works only if collapse is set.
1814
+ *
1815
+ * In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.
1816
+ * ```typescript
1817
+ * var chart = new OrgChart('#tree', {
1818
+ * collapse: {level: 2, allChildren: true},
1819
+ * expand: {nodes: [155], allChildren: true}
1820
+ * });
1821
+ * ```
1822
+ */
1823
+ expand?: {
1824
+ nodes?: Array<string | number>,
1825
+ allChildren?: boolean
1826
+ },
2030
1827
  /**
2031
- * set only if the node contains sub trees and padding is defined in the template, default value undefined
2032
- */
2033
- padding: number | undefined,
1828
+ * The align option specifies the alignment of the nodes inside Org Chart JS.
1829
+ * - OrgChart.align.center - centered
1830
+ * - OrgChart.align.orientation - according to the orientation option
1831
+ *
1832
+ * Default value - *OrgChart.align.center*
1833
+ * ```typescript
1834
+ * var chart = new OrgChart('#tree', {
1835
+ * align: OrgChart.align.orientation
1836
+ * });
1837
+ * ```
1838
+ */
1839
+ align?: OrgChart.align | number,
2034
1840
  /**
2035
- * layout configuration name, default value undefined
2036
- */
2037
- lcn: string | undefined,
1841
+ * Can be used to control the transition of the nodes on expand/collapse operation. Default value - *func: OrgChart.anim.outPow, duration: 200*
1842
+ * ```typescript
1843
+ * var chart = new OrgChart('#tree', {
1844
+ * anim: {func: OrgChart.anim.outBack, duration: 500}
1845
+ * });
1846
+ * ```
1847
+ */
1848
+ anim?: {
1849
+ /**
1850
+ * defines how long time an animation should take to complete
1851
+ */
1852
+ func?: OrgChart.anim,
1853
+ /**
1854
+ * Easing functions specify the speed at which an animation progresses at different points within the animation.
1855
+ */
1856
+ duration?: number
1857
+ },
2038
1858
  /**
2039
- * for assistant nodes and mixed layout we create dynamic nodes called splits, default value undefined
2040
- */
2041
- isSplit: boolean | undefined
1859
+ * Can be used to control the zooming sensitivity. Default value - *speed: 120, smooth: 12*
1860
+ * ```typescript
1861
+ * var chart = new OrgChart('#tree', {
1862
+ * zoom: {speed: 130, smooth: 10}
1863
+ * });
1864
+ * ```
1865
+ */
1866
+ zoom?: {
1867
+ speed?: number,
1868
+ smooth?: number
1869
+ },
1870
+ /**
1871
+ * Define nodes as roots. Default value - *null*
1872
+ * ```typescript
1873
+ * var chart = new OrgChart('#tree', {
1874
+ * roots: [2, 4]
1875
+ * });
1876
+ * ```
1877
+ */
1878
+ roots?: Array<string | number>,
1879
+ /**
1880
+ * Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - *null*
1881
+ * ```typescript
1882
+ * var chart = new OrgChart('#tree', {
1883
+ * state: {
1884
+ * name: 'MyStateName',
1885
+ * readFromLocalStorage: true,
1886
+ * writeToLocalStorage: true,
1887
+ * readFromIndexedDB: true,
1888
+ * writeToIndexedDB: true,
1889
+ * readFromUrlParams: true,
1890
+ * writeToUrlParams: true
1891
+ * }
1892
+ * });
1893
+ * ```
1894
+ */
1895
+ state?: {
1896
+ name?: string,
1897
+ readFromLocalStorage?: boolean,
1898
+ writeToLocalStorage?: boolean,
1899
+ readFromIndexedDB?: boolean,
1900
+ writeToIndexedDB?: boolean,
1901
+ readFromUrlParams?: boolean,
1902
+ writeToUrlParams?: boolean
1903
+ },
1904
+ /**
1905
+ * Configure the buildin edit form.
1906
+ * {@link https://balkan.app/OrgChartJS/Docs/Edit | See doc...}
1907
+ */
1908
+ editForm?: {
1909
+ readOnly?: boolean,
1910
+ titleBinding?: string,
1911
+ photoBinding?: string,
1912
+ addMore?: string,
1913
+ addMoreBtn?: string,
1914
+ addMoreFieldName?: string,
1915
+ generateElementsFromFields?: boolean,
1916
+ buttons?: {
1917
+ [key: string]: {
1918
+ icon?: string,
1919
+ text?: string,
1920
+ hideIfEditMode?: boolean,
1921
+ hideIfDetailsMode?: boolean
1922
+ }
1923
+ },
1924
+ elements?: { [key: string]: OrgChart.editFormElement | Array<OrgChart.editFormElement> }
1925
+ }
2042
1926
  }
2043
1927
  }export default OrgChart