@balkangraph/orgchart.js 8.2.1 → 8.2.2

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