1 | /**
|
2 | * Welcome to ng2tree
|
3 | */
|
4 | export declare type IDType = string | number;
|
5 | export declare type IDTypeDictionary = {
|
6 | [id: string]: boolean;
|
7 | [id: number]: boolean;
|
8 | };
|
9 | /**
|
10 | * See ITreeNode for documentation
|
11 | */
|
12 | export declare type TreeNode = any;
|
13 | export interface IAllowDropFn {
|
14 | (element: any, to: {
|
15 | parent: TreeNode;
|
16 | index: number;
|
17 | }, $event?: any): boolean;
|
18 | }
|
19 | export interface INodeHeightFn {
|
20 | (node: TreeNode): number;
|
21 | }
|
22 | export interface IAllowDragFn {
|
23 | (node: TreeNode): boolean;
|
24 | }
|
25 | export interface ITreeState {
|
26 | expandedNodeIds?: IDTypeDictionary;
|
27 | selectedNodeIds?: IDTypeDictionary;
|
28 | activeNodeIds?: IDTypeDictionary;
|
29 | hiddenNodeIds?: IDTypeDictionary;
|
30 | selectedLeafNodeIds?: IDTypeDictionary;
|
31 | focusedNodeId?: IDType;
|
32 | }
|
33 | export interface ITreeOptions {
|
34 | /**
|
35 | * A string representing the attribute of the node that indicates whether there are child nodes.
|
36 |
|
37 | * **Default value: `hasChildren`.**
|
38 |
|
39 | For example, if your nodes have an `isDirectory` attribute that indicates whether there are children, use:
|
40 | ```
|
41 | options = { hasChildrenField: 'isDirectory' }
|
42 | ```
|
43 | */
|
44 | hasChildrenField?: string;
|
45 | /**
|
46 | * A string representing the attribute of the node that contains the array of children.
|
47 |
|
48 | * **Default value: `children`.**
|
49 |
|
50 | For example, if your nodes have a `nodes` attribute, that contains the children, use:
|
51 | ```
|
52 | options = { childrenField: 'nodes' }
|
53 | ```
|
54 | */
|
55 | childrenField?: string;
|
56 | /**
|
57 | * A string representing the attribute of the node to display.
|
58 |
|
59 | * **Default value: `name`**
|
60 |
|
61 | For example, if your nodes have a `title` attribute that should be displayed, use:
|
62 | ```
|
63 | options = { displayField: 'title' }
|
64 | ```
|
65 | */
|
66 | displayField?: string;
|
67 | /**
|
68 | * A string representing the attribute of the node that contains the unique ID.
|
69 | This will be used to construct the `path`, which is an array of IDs that point to the node.
|
70 |
|
71 | * **Default value: `id`.**
|
72 |
|
73 | For example, if your nodes have a `uuid` attribute, that contains the unique key, use:
|
74 | ```
|
75 | options = { idField: 'uuid' }
|
76 | ```
|
77 | */
|
78 | idField?: string;
|
79 | /**
|
80 | * A string representing the attribute of the node that contains whether the node starts as expanded.
|
81 |
|
82 | * **Default value: `isExpanded`.**
|
83 |
|
84 | For example, if your nodes have an `expanded` attribute, that contains a boolean value, use:
|
85 | ```
|
86 | options = { isExpandedField: 'expanded' }
|
87 | ```
|
88 | */
|
89 | isExpandedField?: string;
|
90 | /**
|
91 | * Function for loading a node's children.
|
92 | The function receives a TreeNode, and returns a value or a promise that resolves to the node's children.
|
93 |
|
94 | This function will be called whenever a node is expanded, the `hasChildren` (`options.hasChildrenField`)
|
95 | field is true, and the `children` field is empty.
|
96 | The result will be loaded into the node's children attribute.
|
97 |
|
98 | Example:
|
99 | ```
|
100 | * options = {
|
101 | * getChildren: (node:TreeNode) => {
|
102 | * return request('/api/children/' + node.id);
|
103 | * }
|
104 | * }
|
105 | ```
|
106 | */
|
107 | getChildren?: (node: TreeNode) => any;
|
108 | /**
|
109 | * Rewire which trigger causes which action using this attribute, or create custom actions / event bindings.
|
110 | * See the [Action Mapping Section](https://angular2-tree.readme.io/docs/action-mapping) for more details.
|
111 | */
|
112 | actionMapping?: any;
|
113 | /**
|
114 | * Specify if dragging tree nodes is allowed.
|
115 | * This could be a boolean, or a function that receives a TreeNode and returns a boolean
|
116 |
|
117 | * **Default value: false**
|
118 |
|
119 | Example:
|
120 | ```
|
121 | * options = {
|
122 | * allowDrag: true
|
123 | * }
|
124 | ```
|
125 | */
|
126 | allowDrag?: boolean | IAllowDragFn;
|
127 | /**
|
128 | * Specify whether dropping inside the tree is allowed. Optional types:
|
129 | * - boolean
|
130 | * - (element:any, to:{parent:TreeNode, index:number}):boolean
|
131 | A function that receives the dragged element, and the drop location (parent node and index inside the parent),
|
132 | and returns true or false.
|
133 |
|
134 | * **Default Value: true**
|
135 |
|
136 | example:
|
137 | ```
|
138 | * options = {
|
139 | * allowDrop: (element, {parent, index}) => parent.isLeaf
|
140 | * }
|
141 | ```
|
142 | */
|
143 | allowDrop?: boolean | IAllowDropFn;
|
144 | /**
|
145 | Boolean flag to allow adding and removing is-dragging-over and is-dragging-over-disabled classes.
|
146 |
|
147 | If set to false it will not add the above mentioned classes and you should handle the styling yourself with css and in
|
148 | the actionMapping -> mouse -> dragEnter, dragLeave
|
149 |
|
150 | * **Default Value: true**
|
151 |
|
152 | example:
|
153 | ```
|
154 | * options = {
|
155 | * allowDrop: true,
|
156 | * allowDragoverStyling: false
|
157 | * }
|
158 | ```
|
159 | */
|
160 | allowDragoverStyling?: boolean;
|
161 | /**
|
162 | * Specify padding per node (integer).
|
163 | Each node will have padding-left value of level * levelPadding, instead of using the default padding for children.
|
164 |
|
165 | This option is good for example for allowing whole row selection, etc.
|
166 |
|
167 | You can alternatively use the tree-node-level-X classes to give padding on a per-level basis.
|
168 |
|
169 | * **Default value: 0**
|
170 | */
|
171 | levelPadding?: number;
|
172 | /**
|
173 | * Specify a function that returns a class per node. Useful for styling the nodes individually.
|
174 |
|
175 | Example:
|
176 | ```
|
177 | * options = {
|
178 | * nodeClass: (node:TreeNode) => {
|
179 | * return 'icon-' + node.data.icon;
|
180 | * }
|
181 | * }
|
182 | ```
|
183 | */
|
184 | nodeClass?: (node: TreeNode) => string;
|
185 | /**
|
186 | Boolean flag to use the virtual scroll option.
|
187 |
|
188 | To use this option, you must supply the height of the container, and the height of each node in the tree.
|
189 |
|
190 | You can also specify height for the dropSlot which is located between nodes.
|
191 |
|
192 | * **Default Value: false**
|
193 |
|
194 | example:
|
195 | ```
|
196 | * options = {
|
197 | * useVirtualScroll: true,
|
198 | * nodeHeight: (node: TreeNode) => node.myHeight,
|
199 | * dropSlotHeight: 3
|
200 | * }
|
201 | ```
|
202 | */
|
203 | useVirtualScroll?: boolean;
|
204 | /**
|
205 | * For use with `useVirtualScroll` option.
|
206 | * Specify a height for nodes in pixels. Could be either:
|
207 | * - number
|
208 | * - (node: TreeNode) => number
|
209 |
|
210 | * **Default Value: 22**
|
211 | */
|
212 | nodeHeight?: number | INodeHeightFn;
|
213 | /**
|
214 | * For use with `useVirtualScroll` option.
|
215 | * Specify a height for drop slots (located between nodes) in pixels
|
216 |
|
217 | * **Default Value: 2**
|
218 | */
|
219 | dropSlotHeight?: number;
|
220 | /**
|
221 | * Boolean whether or not to animate expand / collapse of nodes.
|
222 |
|
223 | * **Default Value: false**
|
224 | */
|
225 | animateExpand?: boolean;
|
226 | /**
|
227 | * Speed of expand animation (described in pixels per 17 ms).
|
228 |
|
229 | * **Default Value: 30**
|
230 | */
|
231 | animateSpeed?: number;
|
232 | /**
|
233 | * Increase of expand animation speed (described in multiply per 17 ms).
|
234 |
|
235 | * **Default Value: 1.2**
|
236 | */
|
237 | animateAcceleration?: number;
|
238 | /**
|
239 | * Whether to scroll to the node to make it visible when it is activated.
|
240 |
|
241 | * **Default Value: true**
|
242 | */
|
243 | scrollOnActivate?: boolean;
|
244 | /**
|
245 | * Function to clone a node.
|
246 | * Receives a TreeNode object, and returns a node object (only the data).
|
247 | * This callback will be called when copying a node inside the tree,
|
248 | * by either calling copyNode, or by dragging and holding the ctrl key
|
249 | *
|
250 | * For example:
|
251 | ```
|
252 | options: ITreeOptions = {
|
253 | getNodeClone: (node) => ({
|
254 | ...node.data,
|
255 | id: uuid.v4(),
|
256 | name: `copy of ${node.data.name}`
|
257 | })
|
258 | };
|
259 | ```
|
260 | *
|
261 | * **Default Value: clone the node using Object.assign, and remove 'id' property**
|
262 | */
|
263 | getNodeClone?: (node: TreeNode) => any;
|
264 | /**
|
265 | * Makes the tree right-to-left.
|
266 | * This include direction, expander style, and change key binding (right key collapse and left key expands instead of vice-versa)
|
267 | */
|
268 | rtl?: boolean;
|
269 | /**
|
270 | * Specifies id of root node (virtualRoot)
|
271 | */
|
272 | rootId?: any;
|
273 | /**
|
274 | * Whether to display a checkbox next to the node or not
|
275 | */
|
276 | useCheckbox?: boolean;
|
277 | /**
|
278 | * Whether to use master checkboxes mechanism if the useCheckbox is set to true
|
279 | */
|
280 | useTriState?: boolean;
|
281 | /**
|
282 | * The HTML element that is the scroll container for the tree.
|
283 | * The default behaviour is to wrap the tree with a container that has overflow: hidden,
|
284 | * and then the scrolling container is the viewport inside the tree component
|
285 | */
|
286 | scrollContainer?: HTMLElement;
|
287 | }
|
288 | export interface ITreeNode {
|
289 | /**
|
290 | * Parent node
|
291 | */
|
292 | parent: ITreeNode;
|
293 | /**
|
294 | * The value of the node's field that is used for displaying its content.
|
295 | * By default 'name', unless stated otherwise in the options
|
296 | */
|
297 | displayField: string;
|
298 | /**
|
299 | * The children of the node.
|
300 | * By default is determined by 'node.data.children', unless stated otherwise in the options
|
301 | */
|
302 | children: ITreeNode[];
|
303 | /**
|
304 | * Pointer to the original data.
|
305 | */
|
306 | data: any;
|
307 | /**
|
308 | * Pointer to the ElementRef of the TreeNodeComponent that's displaying this node
|
309 | */
|
310 | elementRef: any;
|
311 | /**
|
312 | * Level in the tree (starts from 1).
|
313 | */
|
314 | level: number;
|
315 | /**
|
316 | * Path in the tree: Array of IDs.
|
317 | */
|
318 | path: string[];
|
319 | /**
|
320 | * index of the node inside its parent's children
|
321 | */
|
322 | index: number;
|
323 | /**
|
324 | * A unique key of this node among its siblings.
|
325 | * By default it's the 'id' of the original node, unless stated otherwise in options.idField
|
326 | */
|
327 | id: IDType;
|
328 | isExpanded: boolean;
|
329 | isActive: boolean;
|
330 | isFocused: boolean;
|
331 | isCollapsed: boolean;
|
332 | isLeaf: boolean;
|
333 | hasChildren: boolean;
|
334 | isRoot: boolean;
|
335 | /**
|
336 | * @param skipHidden whether to skip hidden nodes
|
337 | * @returns next sibling (or null)
|
338 | */
|
339 | findNextSibling(skipHidden: any): ITreeNode;
|
340 | /**
|
341 | * @param skipHidden whether to skip hidden nodes
|
342 | * @returns previous sibling (or null)
|
343 | */
|
344 | findPreviousSibling(skipHidden: any): ITreeNode;
|
345 | /**
|
346 | * @param skipHidden whether to skip hidden nodes
|
347 | * @returns first child (or null)
|
348 | */
|
349 | getFirstChild(skipHidden: any): ITreeNode;
|
350 | /**
|
351 | * @param skipHidden whether to skip hidden nodes
|
352 | * @returns last child (or null)
|
353 | */
|
354 | getLastChild(skipHidden: any): ITreeNode;
|
355 | /**
|
356 | * Finds the visually next node in the tree.
|
357 | * @param goInside whether to look for children or just siblings
|
358 | * @returns next node.
|
359 | */
|
360 | findNextNode(goInside: boolean): ITreeNode;
|
361 | /**
|
362 | * Finds the visually previous node in the tree.
|
363 | * @param skipHidden whether to skip hidden nodes
|
364 | * @returns previous node.
|
365 | */
|
366 | findPreviousNode(skipHidden: any): ITreeNode;
|
367 | /**
|
368 | * @returns true if this node is a descendant of the parameter node
|
369 | */
|
370 | isDescendantOf(node: ITreeNode): boolean;
|
371 | /**
|
372 | * @returns in case levelPadding option is supplied, returns the current node's padding
|
373 | */
|
374 | getNodePadding(): string;
|
375 | /**
|
376 | * @returns in case nodeClass option is supplied, returns the current node's class
|
377 | */
|
378 | getClass(): string;
|
379 | /**
|
380 | * Expands / Collapses the node
|
381 | */
|
382 | toggleExpanded(): any;
|
383 | /**
|
384 | * Expands the node
|
385 | */
|
386 | expand(): any;
|
387 | /**
|
388 | * Collapses the node
|
389 | */
|
390 | collapse(): any;
|
391 | /**
|
392 | * Expands all ancestors of the node
|
393 | */
|
394 | ensureVisible(): any;
|
395 | /**
|
396 | * Activates / Deactivates the node (selects / deselects)
|
397 | */
|
398 | toggleActivated(multi: any): any;
|
399 | /**
|
400 | * Focus on the node
|
401 | */
|
402 | focus(): any;
|
403 | /**
|
404 | * Blur (unfocus) the node
|
405 | */
|
406 | blur(): any;
|
407 | /**
|
408 | * Hides the node
|
409 | */
|
410 | hide(): any;
|
411 | /**
|
412 | * Makes the node visible
|
413 | */
|
414 | show(): any;
|
415 | /**
|
416 | * @param value if true makes the node hidden, otherwise visible
|
417 | */
|
418 | setIsHidden(value: boolean): any;
|
419 | /**
|
420 | * Scroll the screen to make the node visible
|
421 | */
|
422 | scrollIntoView(): any;
|
423 | /**
|
424 | * Fire an event to the renderer of the tree (if it was registered)
|
425 | */
|
426 | fireEvent(event: any): any;
|
427 | /**
|
428 | * Invokes a method for every node under this one - depth first
|
429 | * @param fn a function that receives the node
|
430 | */
|
431 | doForAll(fn: (node: ITreeNode) => any): any;
|
432 | /**
|
433 | * expand all nodes under this one
|
434 | */
|
435 | expandAll(): any;
|
436 | /**
|
437 | * collapse all nodes under this one
|
438 | */
|
439 | collapseAll(): any;
|
440 | /**
|
441 | * sets the node to active / inactive according to the value.
|
442 | * If multi is true (default false) - does a multiselect.
|
443 | */
|
444 | setIsActive(value: boolean, multi?: boolean): any;
|
445 | /**
|
446 | * sets the node to be active and makes sure it's visible by expanding all nodes above it and scrolling it into view.
|
447 | * Very similar to calling `activate`, `ensureVisible` and `scrollIntoView` methods.
|
448 | * If multi is true (default false) - does a multiselect.
|
449 | */
|
450 | setActiveAndVisible(multi: boolean): any;
|
451 | }
|
452 | export interface ITreeModel {
|
453 | /**
|
454 | * All root nodes
|
455 | */
|
456 | roots: ITreeNode[];
|
457 | /**
|
458 | * Current focused node
|
459 | */
|
460 | focusedNode: ITreeNode;
|
461 | /**
|
462 | * Options that were passed to the tree component
|
463 | */
|
464 | options: ITreeOptions;
|
465 | /**
|
466 | * Is the tree currently focused
|
467 | */
|
468 | isFocused: boolean;
|
469 | /**
|
470 | * @returns Current active nodes
|
471 | */
|
472 | activeNodes: ITreeNode[];
|
473 | /**
|
474 | * @returns Current expanded nodes
|
475 | */
|
476 | expandedNodes: ITreeNode[];
|
477 | /**
|
478 | * @returns Current active node. If multiple nodes are active - returns the first one.
|
479 | */
|
480 | getActiveNode(): ITreeNode;
|
481 | /**
|
482 | * @returns Current focused node (either hovered or traversed with keys)
|
483 | */
|
484 | getFocusedNode(): ITreeNode;
|
485 | /**
|
486 | * Set focus on a node
|
487 | * @param value true or false - whether to set focus or blur.
|
488 | */
|
489 | setFocusedNode(node: ITreeNode): any;
|
490 | /**
|
491 | * @param skipHidden true or false - whether to skip hidden nodes
|
492 | * @returns first root of the tree
|
493 | */
|
494 | getFirstRoot(skipHidden?: boolean): ITreeNode;
|
495 | /**
|
496 | * @param skipHidden true or false - whether to skip hidden nodes
|
497 | * @returns last root of the tree
|
498 | */
|
499 | getLastRoot(skipHidden?: boolean): ITreeNode;
|
500 | /**
|
501 | * @returns true if the tree is empty
|
502 | */
|
503 | isEmptyTree(): boolean;
|
504 | /**
|
505 | * @returns All root nodes that pass the current filter
|
506 | */
|
507 | getVisibleRoots(): ITreeNode[];
|
508 | /**
|
509 | * @param path array of node IDs to be traversed respectively
|
510 | * @param statrNode optional. Which node to start traversing from
|
511 | * @returns The node, if found - null otherwise
|
512 | */
|
513 | getNodeByPath(path: any[], startNode?: ITreeNode): ITreeNode;
|
514 | /**
|
515 | * @param id node ID to find
|
516 | * @returns The node, if found - null otherwise
|
517 | */
|
518 | getNodeById(id: IDType): ITreeNode;
|
519 | /**
|
520 | * @param predicate - either an object or a function, used as a test condition on all nodes.
|
521 | * Could be every predicate that's supported by lodash's `find` method
|
522 | * @param statrNode optional. Which node to start traversing from
|
523 | * @returns First node that matches the predicate, if found - null otherwise
|
524 | */
|
525 | getNodeBy(predicate: any, startNode?: ITreeNode): ITreeNode;
|
526 | /**
|
527 | * get tree state
|
528 | */
|
529 | getState(): ITreeState;
|
530 | /**
|
531 | * Focuses or blurs the tree
|
532 | * @param value true or false - whether to set focus or blur.
|
533 | */
|
534 | setFocus(value: boolean): any;
|
535 | /**
|
536 | * Focuses on the next node in the tree (same as down arrow)
|
537 | */
|
538 | focusNextNode(): any;
|
539 | /**
|
540 | * Focuses on the previous node in the tree (same as up arrow)
|
541 | */
|
542 | focusPreviousNode(): any;
|
543 | /**
|
544 | * Focuses on the inner child of the current focused node (same as right arrow on an expanded node)
|
545 | */
|
546 | focusDrillDown(): any;
|
547 | /**
|
548 | * Focuses on the parent of the current focused node (same as left arrow on a collapsed node)
|
549 | */
|
550 | focusDrillUp(): any;
|
551 | /**
|
552 | * Marks isHidden field in all nodes recursively according to the filter param.
|
553 | * If a node is marked visible, all of its ancestors will be marked visible as well.
|
554 | * @param filter either a string or a function.
|
555 | * In case it's a string, it will be searched case insensitively in the node's display attribute
|
556 | * In case it's a function, it will be passed the node, and should return true if the node should be visible, false otherwise
|
557 | * @param autoShow if true, make sure all nodes that passed the filter are visible
|
558 | */
|
559 | filterNodes(filter: any, autoShow?: boolean): any;
|
560 | /**
|
561 | * Marks all nodes isHidden = false
|
562 | */
|
563 | clearFilter(): any;
|
564 | /**
|
565 | * moves a node from one location in the tree to another
|
566 | * @param node describes which node needs to be moved
|
567 | * @param to describes where to move the node to.
|
568 | * @param from describes where to move the node from.
|
569 | * Contains a 'parent' node, an 'index', and a 'dropOnNode' - to distinguish between dropping between nodes or on the node
|
570 | */
|
571 | moveNode(node: ITreeNode, to: {
|
572 | parent: ITreeNode;
|
573 | index: number;
|
574 | dropOnNode: boolean;
|
575 | }, from: {
|
576 | parent: ITreeNode;
|
577 | index: number;
|
578 | }): any;
|
579 | /**
|
580 | * Invokes a method for every node of the tree - depth first
|
581 | * @param fn a function that receives the node
|
582 | */
|
583 | doForAll(fn: (node: ITreeNode) => any): any;
|
584 | /**
|
585 | * expand all nodes
|
586 | */
|
587 | expandAll(): any;
|
588 | /**
|
589 | * collapse all nodes
|
590 | */
|
591 | collapseAll(): any;
|
592 | /**
|
593 | * set tree state
|
594 | */
|
595 | setState(state: ITreeState): any;
|
596 | subscribeToState(fn: (state: ITreeState) => any): any;
|
597 | }
|
598 | /**
|
599 | * This is the interface of the TreeNodeDrag service
|
600 | */
|
601 | export interface ITreeNodeDrag {
|
602 | /**
|
603 | * Gets the current dragged node. Useful for overriding the drop action.
|
604 | * @param node The parent node of the current dragged node
|
605 | * @param index The index inside parent's children, of the current dragged node
|
606 | */
|
607 | getDragNode(): {
|
608 | node: TreeNode;
|
609 | index: number;
|
610 | };
|
611 | }
|