balkan-orgchart-js-community 9.1.77 → 9.1.79
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.
- package/orgchart.d.mts +437 -414
- package/orgchart.d.ts +437 -414
- package/orgchart.js +1 -1
- package/orgchart.mjs +1 -1
- package/package.json +1 -1
package/orgchart.d.mts
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
* </html>
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
|
-
declare class OrgChart
|
|
36
|
+
declare class OrgChart {
|
|
37
37
|
/**
|
|
38
38
|
* ```typescript
|
|
39
39
|
* let chart = new OrgChart('#tree', {});
|
|
@@ -43,6 +43,230 @@ declare class OrgChart extends OrgChartEventListeners {
|
|
|
43
43
|
*/
|
|
44
44
|
constructor(element?: HTMLElement | string | null, options?: OrgChart.options);
|
|
45
45
|
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *
|
|
49
|
+
* ```typescript
|
|
50
|
+
* let chart = new OrgChart('#tree', {});
|
|
51
|
+
* chart.on('init', function () {
|
|
52
|
+
* // console.log("initiated")
|
|
53
|
+
* })
|
|
54
|
+
* chart.load(nodes);
|
|
55
|
+
* ```
|
|
56
|
+
* @category Event Listeners
|
|
57
|
+
* @param type A case-sensitive string representing the event type to listen for.
|
|
58
|
+
* @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
|
|
59
|
+
*/
|
|
60
|
+
on(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener: (sender: OrgChart, args?: any, args1?: any, args2?: any) => void | boolean): OrgChart;
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Occurs when the node data has been updated by updateNode method.
|
|
66
|
+
* ```typescript
|
|
67
|
+
* var chart = new OrgChart('#tree', {});
|
|
68
|
+
* chart.onUpdateNode((args) => {
|
|
69
|
+
* //return false; to cancel the operation
|
|
70
|
+
* });
|
|
71
|
+
* ```
|
|
72
|
+
* @category Event Listeners
|
|
73
|
+
* @param listener
|
|
74
|
+
*/
|
|
75
|
+
onUpdateNode(listener: (this: OrgChart, args: OrgChart.updateNodeEventArgs) => void): OrgChart;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations.
|
|
79
|
+
* Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc.
|
|
80
|
+
* ```typescript
|
|
81
|
+
* var chart = new OrgChart('#tree', {});
|
|
82
|
+
* chart.onUpdated(() => {
|
|
83
|
+
* //Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
|
|
84
|
+
* });
|
|
85
|
+
* ```
|
|
86
|
+
* @category Event Listeners
|
|
87
|
+
*/
|
|
88
|
+
onUpdated(listener: (this: OrgChart) => void): OrgChart;
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Occurs when a node has been removed by removeNode method.
|
|
93
|
+
* ```typescript
|
|
94
|
+
* var chart = new OrgChart('#tree', {});
|
|
95
|
+
* chart.onRemoveNode((args) => {
|
|
96
|
+
* //return false; to cancel the operation
|
|
97
|
+
* });
|
|
98
|
+
* ```
|
|
99
|
+
* @category Event Listeners
|
|
100
|
+
* @param listener
|
|
101
|
+
*/
|
|
102
|
+
onRemoveNode(listener: (this: OrgChart, args: OrgChart.removeNodeEvemtArgs) => void): OrgChart;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Occurs when a node has been added by addNode method.
|
|
106
|
+
* ```typescript
|
|
107
|
+
* var chart = new OrgChart('#tree', {});
|
|
108
|
+
* chart.onAddNode((args) => {
|
|
109
|
+
* //return false; to cancel the operation
|
|
110
|
+
* });
|
|
111
|
+
* ```
|
|
112
|
+
* @category Event Listeners
|
|
113
|
+
* @param listener
|
|
114
|
+
*/
|
|
115
|
+
onAddNode(listener: (this: OrgChart, args: OrgChart.addNodeEvemtArgs) => void): OrgChart;
|
|
116
|
+
/**
|
|
117
|
+
* The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
|
|
118
|
+
* ```typescript
|
|
119
|
+
* var chart = new OrgChart('#tree', {});
|
|
120
|
+
* chart.onDrag(() => {
|
|
121
|
+
* //return false; to cancel the operation
|
|
122
|
+
* });
|
|
123
|
+
* ```
|
|
124
|
+
* @category Event Listeners
|
|
125
|
+
* @param listener
|
|
126
|
+
*/
|
|
127
|
+
onDrag(listener: (this: OrgChart, args: OrgChart.dragEventArgs) => void): OrgChart;
|
|
128
|
+
/**
|
|
129
|
+
* The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
|
|
130
|
+
* ```typescript
|
|
131
|
+
* var chart = new OrgChart('#tree', {});
|
|
132
|
+
* chart.onDrop(() => {
|
|
133
|
+
* //return false; to cancel the operation
|
|
134
|
+
* });
|
|
135
|
+
* ```
|
|
136
|
+
* @category Event Listeners
|
|
137
|
+
* @param listener
|
|
138
|
+
*/
|
|
139
|
+
onDrop(listener: (this: OrgChart, args: OrgChart.dropEventArgs) => void): OrgChart;
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* Occurs when the nodes in OrgChart has been created and loaded to the DOM.
|
|
145
|
+
* ```typescript
|
|
146
|
+
* let chart = new OrgChart('#tree', {});
|
|
147
|
+
* chart.onInit(() => {
|
|
148
|
+
* });
|
|
149
|
+
* chart.load(nodes);
|
|
150
|
+
* ```
|
|
151
|
+
* @category Event Listeners
|
|
152
|
+
* @param listener
|
|
153
|
+
*/
|
|
154
|
+
onInit(listener: (this: OrgChart) => void): OrgChart;
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* The onRedraw event occurs when the chart is redrawed.
|
|
158
|
+
* ```typescript
|
|
159
|
+
* let chart = new OrgChart('#tree', {});
|
|
160
|
+
* chart.onRedraw(() => {
|
|
161
|
+
* });
|
|
162
|
+
* chart.load(nodes);
|
|
163
|
+
* ```
|
|
164
|
+
* @category Event Listeners
|
|
165
|
+
* @param listener
|
|
166
|
+
*/
|
|
167
|
+
onRedraw(listener: (this: OrgChart) => void): OrgChart;
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* The onExpandCollapseButtonClick event occurs when the chart is redrawed.
|
|
171
|
+
* ```typescript
|
|
172
|
+
* let chart = new OrgChart('#tree', {});
|
|
173
|
+
* chart.onExpandCollapseButtonClick(() => {
|
|
174
|
+
* //return false; to cancel the operation
|
|
175
|
+
* });
|
|
176
|
+
* chart.load(nodes);
|
|
177
|
+
* ```
|
|
178
|
+
* @category Event Listeners
|
|
179
|
+
* @param listener
|
|
180
|
+
*/
|
|
181
|
+
onExpandCollapseButtonClick(listener: (this: OrgChart, args: OrgChart.expandCollapseButtonClickEventArgs) => void): OrgChart;
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* 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.
|
|
185
|
+
* ```typescript
|
|
186
|
+
* let chart = new OrgChart('#tree', {});
|
|
187
|
+
* chart.onExportStart(() => {
|
|
188
|
+
* args.styles += '<link href="[link to my styles]" rel="stylesheet">';
|
|
189
|
+
* //return false; to cancel the operation
|
|
190
|
+
* });
|
|
191
|
+
* chart.load(nodes);
|
|
192
|
+
* ```
|
|
193
|
+
* @category Event Listeners
|
|
194
|
+
* @param listener
|
|
195
|
+
*/
|
|
196
|
+
onExportStart(listener: (this: OrgChart, args: OrgChart.exportStartEventArgs) => void): OrgChart;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* 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.
|
|
200
|
+
* ```typescript
|
|
201
|
+
* let chart = new OrgChart('#tree', {});
|
|
202
|
+
* chart.onExportEnd(() => {
|
|
203
|
+
* //return false; to cancel the operation for example id you prefer the exported document to not download
|
|
204
|
+
* });
|
|
205
|
+
* chart.load(nodes);
|
|
206
|
+
* ```
|
|
207
|
+
* @category Event Listeners
|
|
208
|
+
* @param listener
|
|
209
|
+
*/
|
|
210
|
+
onExportEnd(listener: (this: OrgChart, args: OrgChart.exportEndEventArgs) => void): OrgChart;
|
|
211
|
+
|
|
212
|
+
/**
|
|
213
|
+
* On node click event listener.
|
|
214
|
+
* ```typescript
|
|
215
|
+
* let chart = new OrgChart('#tree', {});
|
|
216
|
+
* chart.onNodeClick(() => {
|
|
217
|
+
* //return false; to cancel the operation
|
|
218
|
+
* });
|
|
219
|
+
* chart.load(nodes);
|
|
220
|
+
* ```
|
|
221
|
+
* @category Event Listeners
|
|
222
|
+
* @param listener
|
|
223
|
+
*/
|
|
224
|
+
onNodeClick(listener: (this: OrgChart, args: OrgChart.nodeClickEventArgs) => void): OrgChart;
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* On canvas SVG click event listener.
|
|
229
|
+
* ```typescript
|
|
230
|
+
* let chart = new OrgChart('#tree', {});
|
|
231
|
+
* chart.onCanvasClick(() => {
|
|
232
|
+
* });
|
|
233
|
+
* chart.load(nodes);
|
|
234
|
+
* ```
|
|
235
|
+
* @category Event Listeners
|
|
236
|
+
* @param listener
|
|
237
|
+
*/
|
|
238
|
+
onCanvasClick(listener: (this: OrgChart, args: OrgChart.canvasClickEventArgs) => void): OrgChart;
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* In onAIToolCalls we parse the AI responce to our functions
|
|
242
|
+
* ```typescript
|
|
243
|
+
* chart.onAIToolCalls(function(args){
|
|
244
|
+
* for(var toolCall of args.toolCalls){
|
|
245
|
+
* if (toolCall.FunctionName == 'sendEmail'){
|
|
246
|
+
* toolCall.FunctionResult = sendEmail(toolCall.FunctionArguments);
|
|
247
|
+
* }
|
|
248
|
+
* }
|
|
249
|
+
* });
|
|
250
|
+
* ```
|
|
251
|
+
* [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
|
|
252
|
+
* @param listener
|
|
253
|
+
*/
|
|
254
|
+
onAIToolCalls(listener: (this: OrgChart, args: OrgChart.aiToolCallsEventArgs) => void): OrgChart;
|
|
255
|
+
|
|
256
|
+
/**
|
|
257
|
+
* On node double click event listener.
|
|
258
|
+
* ```typescript
|
|
259
|
+
* let chart = new OrgChart('#tree', {});
|
|
260
|
+
* chart.onNodeDoubleClick(() => {
|
|
261
|
+
* //return false; to cancel the operation
|
|
262
|
+
* });
|
|
263
|
+
* chart.load(nodes);
|
|
264
|
+
* ```
|
|
265
|
+
* @category Event Listeners
|
|
266
|
+
* @param listener
|
|
267
|
+
*/
|
|
268
|
+
onNodeDoubleClick(listener: (this: OrgChart, args: OrgChart.nodeDoubleClickEventArgs) => void): OrgChart;
|
|
269
|
+
|
|
46
270
|
|
|
47
271
|
/**
|
|
48
272
|
* SVG icons
|
|
@@ -1910,36 +2134,232 @@ declare class OrgChart extends OrgChartEventListeners {
|
|
|
1910
2134
|
|
|
1911
2135
|
declare namespace OrgChart {
|
|
1912
2136
|
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
2137
|
+
interface updateNodeEventArgs{
|
|
2138
|
+
/**
|
|
2139
|
+
* old node data
|
|
2140
|
+
*/
|
|
2141
|
+
oldData: OrgChart.nodeData,
|
|
2142
|
+
/**
|
|
2143
|
+
* new node data
|
|
2144
|
+
*/
|
|
2145
|
+
newData: OrgChart.nodeData
|
|
2146
|
+
}
|
|
1920
2147
|
|
|
2148
|
+
interface removeNodeEvemtArgs{
|
|
1921
2149
|
/**
|
|
1922
|
-
*
|
|
2150
|
+
* node id
|
|
1923
2151
|
*/
|
|
1924
2152
|
id: number | string,
|
|
1925
|
-
|
|
1926
2153
|
/**
|
|
1927
|
-
* the parent id
|
|
2154
|
+
* 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.
|
|
1928
2155
|
*/
|
|
1929
|
-
|
|
2156
|
+
newPidsAndStpidsForIds: {
|
|
2157
|
+
newPidsForIds: { [key in any]: string | number },
|
|
2158
|
+
newStpidsForIds: { [key in any]: string | number }
|
|
2159
|
+
}
|
|
2160
|
+
}
|
|
1930
2161
|
|
|
2162
|
+
interface addNodeEvemtArgs{
|
|
1931
2163
|
/**
|
|
1932
|
-
*
|
|
2164
|
+
* new added data node
|
|
1933
2165
|
*/
|
|
1934
|
-
|
|
2166
|
+
data: OrgChart.nodeData
|
|
2167
|
+
}
|
|
1935
2168
|
|
|
2169
|
+
interface dragEventArgs{
|
|
1936
2170
|
/**
|
|
1937
|
-
*
|
|
2171
|
+
* dragged node id
|
|
1938
2172
|
*/
|
|
1939
|
-
|
|
2173
|
+
dragId: string | number,
|
|
2174
|
+
event: MouseEvent,
|
|
2175
|
+
/**
|
|
2176
|
+
* array of node ids
|
|
2177
|
+
*
|
|
2178
|
+
* this property is initialized only if movable option is set
|
|
2179
|
+
*/
|
|
2180
|
+
nodeIds: Array<string | number>
|
|
2181
|
+
}
|
|
1940
2182
|
|
|
2183
|
+
interface dropEventArgs{
|
|
1941
2184
|
/**
|
|
1942
|
-
*
|
|
2185
|
+
* dragged node id
|
|
2186
|
+
*/
|
|
2187
|
+
dragId: string | number,
|
|
2188
|
+
/**
|
|
2189
|
+
* dropped node id
|
|
2190
|
+
*/
|
|
2191
|
+
dropId: string | number,
|
|
2192
|
+
/**
|
|
2193
|
+
* draging element
|
|
2194
|
+
*/
|
|
2195
|
+
dragNodeElement: HTMLElement,
|
|
2196
|
+
/**
|
|
2197
|
+
* Mouse event
|
|
2198
|
+
*/
|
|
2199
|
+
event: MouseEvent
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
interface expandCollapseButtonClickEventArgs{
|
|
2203
|
+
/**
|
|
2204
|
+
* Indicates id the operation is collaps or expand
|
|
2205
|
+
*/
|
|
2206
|
+
collapsing: boolean,
|
|
2207
|
+
/**
|
|
2208
|
+
* the id of the clicked node
|
|
2209
|
+
*/
|
|
2210
|
+
id: number | string,
|
|
2211
|
+
/**
|
|
2212
|
+
* node ids that will be expanded or collapsed
|
|
2213
|
+
*/
|
|
2214
|
+
ids: Array<number | string>
|
|
2215
|
+
}
|
|
2216
|
+
|
|
2217
|
+
interface exportStartEventArgs {
|
|
2218
|
+
options: {
|
|
2219
|
+
childLevels?: number,
|
|
2220
|
+
expandChildren?: boolean,
|
|
2221
|
+
fileName?: string,
|
|
2222
|
+
footer?: string,
|
|
2223
|
+
header?: string,
|
|
2224
|
+
height?: number,
|
|
2225
|
+
width?: number,
|
|
2226
|
+
landscape?: boolean,
|
|
2227
|
+
margin?: Array<number>,
|
|
2228
|
+
min?: boolean,
|
|
2229
|
+
openInNewTab?: boolean,
|
|
2230
|
+
padding?: number,
|
|
2231
|
+
parentLevels?: number,
|
|
2232
|
+
type?: string,
|
|
2233
|
+
pages?: Array<{
|
|
2234
|
+
chartInstance?: OrgChart,
|
|
2235
|
+
childLevels?: number,
|
|
2236
|
+
expandChildren?: boolean,
|
|
2237
|
+
footer?: string,
|
|
2238
|
+
header?: string,
|
|
2239
|
+
margin?: Array<number>,
|
|
2240
|
+
min?: boolean,
|
|
2241
|
+
padding?: number,
|
|
2242
|
+
parentLevels?: number,
|
|
2243
|
+
isProfile?: boolean,
|
|
2244
|
+
nodeId?: number | string,
|
|
2245
|
+
content?: string,
|
|
2246
|
+
height?: number,
|
|
2247
|
+
width?: number,
|
|
2248
|
+
}>
|
|
2249
|
+
},
|
|
2250
|
+
pages?: Array<SVGElement>,
|
|
2251
|
+
styles?: string
|
|
2252
|
+
};
|
|
2253
|
+
|
|
2254
|
+
/**
|
|
2255
|
+
* for PDF/PNG
|
|
2256
|
+
*/
|
|
2257
|
+
interface exportEndEventArgs {
|
|
2258
|
+
/**
|
|
2259
|
+
* the array buffer is the exported document, you can save it on a server or send it via email
|
|
2260
|
+
*
|
|
2261
|
+
* this property is initialized only for PDF/PNG exports
|
|
2262
|
+
*/
|
|
2263
|
+
ArrayBuffer: ArrayBuffer
|
|
2264
|
+
/**
|
|
2265
|
+
* extension
|
|
2266
|
+
*
|
|
2267
|
+
* this property is initialized only for CSV/XML exports
|
|
2268
|
+
*/
|
|
2269
|
+
ext: string,
|
|
2270
|
+
/**
|
|
2271
|
+
* filename, you can change the filename here
|
|
2272
|
+
*
|
|
2273
|
+
* this property is initialized only for CSV/XML exports
|
|
2274
|
+
*/
|
|
2275
|
+
filename: string,
|
|
2276
|
+
/**
|
|
2277
|
+
* an array of node objects
|
|
2278
|
+
*
|
|
2279
|
+
* this property is initialized only for CSV/XML exports
|
|
2280
|
+
*/
|
|
2281
|
+
nodes: Array<object>,
|
|
2282
|
+
/**
|
|
2283
|
+
* csv ot xml string
|
|
2284
|
+
*
|
|
2285
|
+
* this property is initialized only for CSV/XML/SVG exports
|
|
2286
|
+
*/
|
|
2287
|
+
content: string,
|
|
2288
|
+
/**
|
|
2289
|
+
* add extra styles
|
|
2290
|
+
*
|
|
2291
|
+
* this property is initialized only for SVG exports
|
|
2292
|
+
*/
|
|
2293
|
+
styles: string,
|
|
2294
|
+
}
|
|
2295
|
+
|
|
2296
|
+
interface nodeClickEventArgs {
|
|
2297
|
+
/**
|
|
2298
|
+
* node JSON object
|
|
2299
|
+
*/
|
|
2300
|
+
node: OrgChart.node,
|
|
2301
|
+
/**
|
|
2302
|
+
* the browser event
|
|
2303
|
+
*/
|
|
2304
|
+
event: any
|
|
2305
|
+
}
|
|
2306
|
+
|
|
2307
|
+
|
|
2308
|
+
interface canvasClickEventArgs {
|
|
2309
|
+
/**
|
|
2310
|
+
* the browser event
|
|
2311
|
+
*/
|
|
2312
|
+
event: any
|
|
2313
|
+
}
|
|
2314
|
+
|
|
2315
|
+
|
|
2316
|
+
interface aiToolCallsEventArgs {
|
|
2317
|
+
toolCalls: Array<{
|
|
2318
|
+
FunctionName : string,
|
|
2319
|
+
FunctionResult : string,
|
|
2320
|
+
FunctionArguments : { [key: string]: any }
|
|
2321
|
+
}>
|
|
2322
|
+
}
|
|
2323
|
+
|
|
2324
|
+
|
|
2325
|
+
interface nodeDoubleClickEventArgs {
|
|
2326
|
+
/**
|
|
2327
|
+
* clicked node data
|
|
2328
|
+
*/
|
|
2329
|
+
data: object
|
|
2330
|
+
}
|
|
2331
|
+
|
|
2332
|
+
|
|
2333
|
+
/**
|
|
2334
|
+
* The node JSON data
|
|
2335
|
+
* ```ts
|
|
2336
|
+
* { id: 2, pid: 1, tags: ["HR"], name: "Anna Smith" }
|
|
2337
|
+
* ```
|
|
2338
|
+
*/
|
|
2339
|
+
interface nodeData {
|
|
2340
|
+
|
|
2341
|
+
/**
|
|
2342
|
+
* the id of the node
|
|
2343
|
+
*/
|
|
2344
|
+
id: number | string,
|
|
2345
|
+
|
|
2346
|
+
/**
|
|
2347
|
+
* the parent id
|
|
2348
|
+
*/
|
|
2349
|
+
pid?: number | string,
|
|
2350
|
+
|
|
2351
|
+
/**
|
|
2352
|
+
* the parent partner id
|
|
2353
|
+
*/
|
|
2354
|
+
ppid?: number | string,
|
|
2355
|
+
|
|
2356
|
+
/**
|
|
2357
|
+
* the subtree parent id
|
|
2358
|
+
*/
|
|
2359
|
+
stpid?: number | string,
|
|
2360
|
+
|
|
2361
|
+
/**
|
|
2362
|
+
* Set custom configuration for the tagged node
|
|
1943
2363
|
*{@link https://balkan.app/OrgChartJS/Docs/Tags | See Tags doc page...}
|
|
1944
2364
|
*/
|
|
1945
2365
|
tags?: Array<string>,
|
|
@@ -5606,402 +6026,5 @@ declare namespace OrgChart {
|
|
|
5606
6026
|
}
|
|
5607
6027
|
|
|
5608
6028
|
|
|
5609
|
-
declare class OrgChartEventListeners {
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
/**
|
|
5613
|
-
* The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *
|
|
5614
|
-
* ```typescript
|
|
5615
|
-
* let chart = new OrgChart('#tree', {});
|
|
5616
|
-
* chart.on('init', function () {
|
|
5617
|
-
* // console.log("initiated")
|
|
5618
|
-
* })
|
|
5619
|
-
* chart.load(nodes);
|
|
5620
|
-
* ```
|
|
5621
|
-
* @category Event Listeners
|
|
5622
|
-
* @param type A case-sensitive string representing the event type to listen for.
|
|
5623
|
-
* @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
|
|
5624
|
-
*/
|
|
5625
|
-
on(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener: (sender: OrgChart, args?: any, args1?: any, args2?: any) => void | boolean): OrgChart;
|
|
5626
|
-
|
|
5627
|
-
|
|
5628
|
-
|
|
5629
|
-
/**
|
|
5630
|
-
* Occurs when the node data has been updated by updateNode method.
|
|
5631
|
-
* ```typescript
|
|
5632
|
-
* var chart = new OrgChart('#tree', {});
|
|
5633
|
-
* chart.onUpdateNode((args) => {
|
|
5634
|
-
* //return false; to cancel the operation
|
|
5635
|
-
* });
|
|
5636
|
-
* ```
|
|
5637
|
-
* @category Event Listeners
|
|
5638
|
-
* @param listener
|
|
5639
|
-
*/
|
|
5640
|
-
onUpdateNode(listener: (args: {
|
|
5641
|
-
/**
|
|
5642
|
-
* old node data
|
|
5643
|
-
*/
|
|
5644
|
-
oldData: OrgChart.nodeData,
|
|
5645
|
-
/**
|
|
5646
|
-
* new node data
|
|
5647
|
-
*/
|
|
5648
|
-
newData: OrgChart.nodeData
|
|
5649
|
-
}) => void): OrgChart;
|
|
5650
|
-
|
|
5651
|
-
/**
|
|
5652
|
-
* Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations.
|
|
5653
|
-
* Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc.
|
|
5654
|
-
* ```typescript
|
|
5655
|
-
* var chart = new OrgChart('#tree', {});
|
|
5656
|
-
* chart.onUpdated(() => {
|
|
5657
|
-
* //Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
|
|
5658
|
-
* });
|
|
5659
|
-
* ```
|
|
5660
|
-
* @category Event Listeners
|
|
5661
|
-
*/
|
|
5662
|
-
onUpdated(): OrgChart;
|
|
5663
|
-
|
|
5664
|
-
|
|
5665
|
-
/**
|
|
5666
|
-
* Occurs when a node has been removed by removeNode method.
|
|
5667
|
-
* ```typescript
|
|
5668
|
-
* var chart = new OrgChart('#tree', {});
|
|
5669
|
-
* chart.onRemoveNode((args) => {
|
|
5670
|
-
* //return false; to cancel the operation
|
|
5671
|
-
* });
|
|
5672
|
-
* ```
|
|
5673
|
-
* @category Event Listeners
|
|
5674
|
-
* @param listener
|
|
5675
|
-
*/
|
|
5676
|
-
onRemoveNode(listener: (args: {
|
|
5677
|
-
/**
|
|
5678
|
-
* node id
|
|
5679
|
-
*/
|
|
5680
|
-
id: number | string,
|
|
5681
|
-
/**
|
|
5682
|
-
* 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.
|
|
5683
|
-
*/
|
|
5684
|
-
newPidsAndStpidsForIds: {
|
|
5685
|
-
newPidsForIds: { [key in any]: string | number },
|
|
5686
|
-
newStpidsForIds: { [key in any]: string | number }
|
|
5687
|
-
}
|
|
5688
|
-
}) => void): OrgChart;
|
|
5689
|
-
|
|
5690
|
-
/**
|
|
5691
|
-
* Occurs when a node has been added by addNode method.
|
|
5692
|
-
* ```typescript
|
|
5693
|
-
* var chart = new OrgChart('#tree', {});
|
|
5694
|
-
* chart.onAddNode((args) => {
|
|
5695
|
-
* //return false; to cancel the operation
|
|
5696
|
-
* });
|
|
5697
|
-
* ```
|
|
5698
|
-
* @category Event Listeners
|
|
5699
|
-
* @param listener
|
|
5700
|
-
*/
|
|
5701
|
-
onAddNode(listener: (args: {
|
|
5702
|
-
/**
|
|
5703
|
-
* new added data node
|
|
5704
|
-
*/
|
|
5705
|
-
data: OrgChart.nodeData
|
|
5706
|
-
}) => void): OrgChart;
|
|
5707
|
-
/**
|
|
5708
|
-
* The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
|
|
5709
|
-
* ```typescript
|
|
5710
|
-
* var chart = new OrgChart('#tree', {});
|
|
5711
|
-
* chart.onDrag(() => {
|
|
5712
|
-
* //return false; to cancel the operation
|
|
5713
|
-
* });
|
|
5714
|
-
* ```
|
|
5715
|
-
* @category Event Listeners
|
|
5716
|
-
* @param listener
|
|
5717
|
-
*/
|
|
5718
|
-
onDrag(listener: (args: {
|
|
5719
|
-
/**
|
|
5720
|
-
* dragged node id
|
|
5721
|
-
*/
|
|
5722
|
-
dragId: string | number,
|
|
5723
|
-
event: MouseEvent,
|
|
5724
|
-
/**
|
|
5725
|
-
* array of node ids
|
|
5726
|
-
*
|
|
5727
|
-
* this property is initialized only if movable option is set
|
|
5728
|
-
*/
|
|
5729
|
-
nodeIds: Array<string | number>
|
|
5730
|
-
}) => void): OrgChart;
|
|
5731
|
-
/**
|
|
5732
|
-
* The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
|
|
5733
|
-
* ```typescript
|
|
5734
|
-
* var chart = new OrgChart('#tree', {});
|
|
5735
|
-
* chart.onDrop(() => {
|
|
5736
|
-
* //return false; to cancel the operation
|
|
5737
|
-
* });
|
|
5738
|
-
* ```
|
|
5739
|
-
* @category Event Listeners
|
|
5740
|
-
* @param listener
|
|
5741
|
-
*/
|
|
5742
|
-
onDrop(listener: (args: {
|
|
5743
|
-
/**
|
|
5744
|
-
* dragged node id
|
|
5745
|
-
*/
|
|
5746
|
-
dragId: string | number,
|
|
5747
|
-
/**
|
|
5748
|
-
* dropped node id
|
|
5749
|
-
*/
|
|
5750
|
-
dropId: string | number,
|
|
5751
|
-
/**
|
|
5752
|
-
* draging element
|
|
5753
|
-
*/
|
|
5754
|
-
dragNodeElement: HTMLElement,
|
|
5755
|
-
/**
|
|
5756
|
-
* Mouse event
|
|
5757
|
-
*/
|
|
5758
|
-
event: MouseEvent
|
|
5759
|
-
}) => void): OrgChart;
|
|
5760
|
-
|
|
5761
|
-
|
|
5762
|
-
|
|
5763
|
-
/**
|
|
5764
|
-
* Occurs when the nodes in OrgChart has been created and loaded to the DOM.
|
|
5765
|
-
* ```typescript
|
|
5766
|
-
* let chart = new OrgChart('#tree', {});
|
|
5767
|
-
* chart.onInit(() => {
|
|
5768
|
-
* });
|
|
5769
|
-
* chart.load(nodes);
|
|
5770
|
-
* ```
|
|
5771
|
-
* @category Event Listeners
|
|
5772
|
-
* @param listener
|
|
5773
|
-
*/
|
|
5774
|
-
onInit(listener: (this: OrgChart) => void): OrgChart;
|
|
5775
|
-
|
|
5776
|
-
/**
|
|
5777
|
-
* The onRedraw event occurs when the chart is redrawed.
|
|
5778
|
-
* ```typescript
|
|
5779
|
-
* let chart = new OrgChart('#tree', {});
|
|
5780
|
-
* chart.onRedraw(() => {
|
|
5781
|
-
* });
|
|
5782
|
-
* chart.load(nodes);
|
|
5783
|
-
* ```
|
|
5784
|
-
* @category Event Listeners
|
|
5785
|
-
* @param listener
|
|
5786
|
-
*/
|
|
5787
|
-
onRedraw(listener: (this: OrgChart) => void): OrgChart;
|
|
5788
|
-
|
|
5789
|
-
/**
|
|
5790
|
-
* The onExpandCollapseButtonClick event occurs when the chart is redrawed.
|
|
5791
|
-
* ```typescript
|
|
5792
|
-
* let chart = new OrgChart('#tree', {});
|
|
5793
|
-
* chart.onExpandCollapseButtonClick(() => {
|
|
5794
|
-
* //return false; to cancel the operation
|
|
5795
|
-
* });
|
|
5796
|
-
* chart.load(nodes);
|
|
5797
|
-
* ```
|
|
5798
|
-
* @category Event Listeners
|
|
5799
|
-
* @param listener
|
|
5800
|
-
*/
|
|
5801
|
-
onExpandCollapseButtonClick(listener: (this: OrgChart, args: {
|
|
5802
|
-
/**
|
|
5803
|
-
* Indicates id the operation is collaps or expand
|
|
5804
|
-
*/
|
|
5805
|
-
collapsing: boolean,
|
|
5806
|
-
/**
|
|
5807
|
-
* the id of the clicked node
|
|
5808
|
-
*/
|
|
5809
|
-
id: number | string,
|
|
5810
|
-
/**
|
|
5811
|
-
* node ids that will be expanded or collapsed
|
|
5812
|
-
*/
|
|
5813
|
-
ids: Array<number | string>
|
|
5814
|
-
}) => void): OrgChart;
|
|
5815
|
-
|
|
5816
|
-
/**
|
|
5817
|
-
* 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.
|
|
5818
|
-
* ```typescript
|
|
5819
|
-
* let chart = new OrgChart('#tree', {});
|
|
5820
|
-
* chart.onExportStart(() => {
|
|
5821
|
-
* args.styles += '<link href="[link to my styles]" rel="stylesheet">';
|
|
5822
|
-
* //return false; to cancel the operation
|
|
5823
|
-
* });
|
|
5824
|
-
* chart.load(nodes);
|
|
5825
|
-
* ```
|
|
5826
|
-
* @category Event Listeners
|
|
5827
|
-
* @param listener
|
|
5828
|
-
*/
|
|
5829
|
-
onExportStart(listener: (this: OrgChart, args: {
|
|
5830
|
-
options: {
|
|
5831
|
-
childLevels?: number,
|
|
5832
|
-
expandChildren?: boolean,
|
|
5833
|
-
fileName?: string,
|
|
5834
|
-
footer?: string,
|
|
5835
|
-
header?: string,
|
|
5836
|
-
height?: number,
|
|
5837
|
-
width?: number,
|
|
5838
|
-
landscape?: boolean,
|
|
5839
|
-
margin?: Array<number>,
|
|
5840
|
-
min?: boolean,
|
|
5841
|
-
openInNewTab?: boolean,
|
|
5842
|
-
padding?: number,
|
|
5843
|
-
parentLevels?: number,
|
|
5844
|
-
type?: string,
|
|
5845
|
-
pages?: Array<{
|
|
5846
|
-
chartInstance?: OrgChart,
|
|
5847
|
-
childLevels?: number,
|
|
5848
|
-
expandChildren?: boolean,
|
|
5849
|
-
footer?: string,
|
|
5850
|
-
header?: string,
|
|
5851
|
-
margin?: Array<number>,
|
|
5852
|
-
min?: boolean,
|
|
5853
|
-
padding?: number,
|
|
5854
|
-
parentLevels?: number,
|
|
5855
|
-
isProfile?: boolean,
|
|
5856
|
-
nodeId?: number | string,
|
|
5857
|
-
content?: string,
|
|
5858
|
-
height?: number,
|
|
5859
|
-
width?: number,
|
|
5860
|
-
}>
|
|
5861
|
-
},
|
|
5862
|
-
pages?: Array<SVGElement>,
|
|
5863
|
-
styles?: string
|
|
5864
|
-
}) => void): OrgChart;
|
|
5865
|
-
|
|
5866
|
-
/**
|
|
5867
|
-
* 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.
|
|
5868
|
-
* ```typescript
|
|
5869
|
-
* let chart = new OrgChart('#tree', {});
|
|
5870
|
-
* chart.onExportEnd(() => {
|
|
5871
|
-
* //return false; to cancel the operation for example id you prefer the exported document to not download
|
|
5872
|
-
* });
|
|
5873
|
-
* chart.load(nodes);
|
|
5874
|
-
* ```
|
|
5875
|
-
* @category Event Listeners
|
|
5876
|
-
* @param listener
|
|
5877
|
-
*/
|
|
5878
|
-
onExportEnd(listener: (this: OrgChart, args:
|
|
5879
|
-
/**
|
|
5880
|
-
* for PDF/PNG
|
|
5881
|
-
*/
|
|
5882
|
-
{
|
|
5883
|
-
/**
|
|
5884
|
-
* the array buffer is the exported document, you can save it on a server or send it via email
|
|
5885
|
-
*
|
|
5886
|
-
* this property is initialized only for PDF/PNG exports
|
|
5887
|
-
*/
|
|
5888
|
-
ArrayBuffer: ArrayBuffer
|
|
5889
|
-
/**
|
|
5890
|
-
* extension
|
|
5891
|
-
*
|
|
5892
|
-
* this property is initialized only for CSV/XML exports
|
|
5893
|
-
*/
|
|
5894
|
-
ext: string,
|
|
5895
|
-
/**
|
|
5896
|
-
* filename, you can change the filename here
|
|
5897
|
-
*
|
|
5898
|
-
* this property is initialized only for CSV/XML exports
|
|
5899
|
-
*/
|
|
5900
|
-
filename: string,
|
|
5901
|
-
/**
|
|
5902
|
-
* an array of node objects
|
|
5903
|
-
*
|
|
5904
|
-
* this property is initialized only for CSV/XML exports
|
|
5905
|
-
*/
|
|
5906
|
-
nodes: Array<object>,
|
|
5907
|
-
/**
|
|
5908
|
-
* csv ot xml string
|
|
5909
|
-
*
|
|
5910
|
-
* this property is initialized only for CSV/XML/SVG exports
|
|
5911
|
-
*/
|
|
5912
|
-
content: string,
|
|
5913
|
-
/**
|
|
5914
|
-
* add extra styles
|
|
5915
|
-
*
|
|
5916
|
-
* this property is initialized only for SVG exports
|
|
5917
|
-
*/
|
|
5918
|
-
styles: string,
|
|
5919
|
-
}) => void): OrgChart;
|
|
5920
|
-
|
|
5921
|
-
/**
|
|
5922
|
-
* On node click event listener.
|
|
5923
|
-
* ```typescript
|
|
5924
|
-
* let chart = new OrgChart('#tree', {});
|
|
5925
|
-
* chart.onNodeClick(() => {
|
|
5926
|
-
* //return false; to cancel the operation
|
|
5927
|
-
* });
|
|
5928
|
-
* chart.load(nodes);
|
|
5929
|
-
* ```
|
|
5930
|
-
* @category Event Listeners
|
|
5931
|
-
* @param listener
|
|
5932
|
-
*/
|
|
5933
|
-
onNodeClick(listener: (this: OrgChart, args: {
|
|
5934
|
-
/**
|
|
5935
|
-
* node JSON object
|
|
5936
|
-
*/
|
|
5937
|
-
node: OrgChart.node,
|
|
5938
|
-
/**
|
|
5939
|
-
* the browser event
|
|
5940
|
-
*/
|
|
5941
|
-
event: any
|
|
5942
|
-
}) => void): OrgChart;
|
|
5943
|
-
|
|
5944
|
-
|
|
5945
|
-
/**
|
|
5946
|
-
* On canvas SVG click event listener.
|
|
5947
|
-
* ```typescript
|
|
5948
|
-
* let chart = new OrgChart('#tree', {});
|
|
5949
|
-
* chart.onCanvasClick(() => {
|
|
5950
|
-
* });
|
|
5951
|
-
* chart.load(nodes);
|
|
5952
|
-
* ```
|
|
5953
|
-
* @category Event Listeners
|
|
5954
|
-
* @param listener
|
|
5955
|
-
*/
|
|
5956
|
-
onCanvasClick(listener: (this: OrgChart, args: {
|
|
5957
|
-
/**
|
|
5958
|
-
* the browser event
|
|
5959
|
-
*/
|
|
5960
|
-
event: any
|
|
5961
|
-
}) => void): OrgChart;
|
|
5962
|
-
|
|
5963
|
-
/**
|
|
5964
|
-
* In onAIToolCalls we parse the AI responce to our functions
|
|
5965
|
-
* ```typescript
|
|
5966
|
-
* chart.onAIToolCalls(function(args){
|
|
5967
|
-
* for(var toolCall of args.toolCalls){
|
|
5968
|
-
* if (toolCall.FunctionName == 'sendEmail'){
|
|
5969
|
-
* toolCall.FunctionResult = sendEmail(toolCall.FunctionArguments);
|
|
5970
|
-
* }
|
|
5971
|
-
* }
|
|
5972
|
-
* });
|
|
5973
|
-
* ```
|
|
5974
|
-
* [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
|
|
5975
|
-
* @param listener
|
|
5976
|
-
*/
|
|
5977
|
-
onAIToolCalls(listener: (this: OrgChart, args: {
|
|
5978
|
-
toolCalls: Array<{
|
|
5979
|
-
FunctionName : string,
|
|
5980
|
-
FunctionResult : string,
|
|
5981
|
-
FunctionArguments : { [key: string]: any }
|
|
5982
|
-
}>
|
|
5983
|
-
}) => void): OrgChart;
|
|
5984
|
-
|
|
5985
|
-
/**
|
|
5986
|
-
* On node double click event listener.
|
|
5987
|
-
* ```typescript
|
|
5988
|
-
* let chart = new OrgChart('#tree', {});
|
|
5989
|
-
* chart.onNodeDoubleClick(() => {
|
|
5990
|
-
* //return false; to cancel the operation
|
|
5991
|
-
* });
|
|
5992
|
-
* chart.load(nodes);
|
|
5993
|
-
* ```
|
|
5994
|
-
* @category Event Listeners
|
|
5995
|
-
* @param listener
|
|
5996
|
-
*/
|
|
5997
|
-
onNodeDoubleClick(listener: (this: OrgChart, args: {
|
|
5998
|
-
/**
|
|
5999
|
-
* clicked node data
|
|
6000
|
-
*/
|
|
6001
|
-
data: object
|
|
6002
|
-
}) => void): OrgChart;
|
|
6003
|
-
}
|
|
6004
|
-
|
|
6005
6029
|
|
|
6006
|
-
export { OrgChart, OrgChartEventListeners };
|
|
6007
6030
|
export default OrgChart;
|