UNPKG

18.4 kBTypeScriptView Raw
1/**
2 * Welcome to ng2tree
3 */
4export declare type IDType = string | number;
5export declare type IDTypeDictionary = {
6 [id: string]: boolean;
7 [id: number]: boolean;
8};
9/**
10 * See ITreeNode for documentation
11 */
12export declare type TreeNode = any;
13export interface IAllowDropFn {
14 (element: any, to: {
15 parent: TreeNode;
16 index: number;
17 }, $event?: any): boolean;
18}
19export interface INodeHeightFn {
20 (node: TreeNode): number;
21}
22export interface IAllowDragFn {
23 (node: TreeNode): boolean;
24}
25export interface ITreeState {
26 expandedNodeIds?: IDTypeDictionary;
27 selectedNodeIds?: IDTypeDictionary;
28 activeNodeIds?: IDTypeDictionary;
29 hiddenNodeIds?: IDTypeDictionary;
30 selectedLeafNodeIds?: IDTypeDictionary;
31 focusedNodeId?: IDType;
32}
33export 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}
288export 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}
452export 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 */
601export 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}