@balkangraph/orgchart.js 8.1.7 → 8.2.0

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