11import { Component , Input , ElementRef , AfterViewInit , ViewEncapsulation , TemplateRef } from '@angular/core' ;
22import { TreeNode } from '../models/tree-node.model' ;
3- import { ITreeNodeTemplate } from './tree-node-content.component' ;
43
54@Component ( {
65 selector : 'TreeNode' ,
76 encapsulation : ViewEncapsulation . None ,
87 styles : [
9- '.tree-children.tree-children-no-padding { padding-left: 0 }' ,
10- '.tree-children { padding-left: 20px }' ,
118 `.node-content-wrapper {
129 display: inline-block;
1310 padding: 2px 5px;
@@ -21,124 +18,54 @@ import { ITreeNodeTemplate } from './tree-node-content.component';
2118 '.node-content-wrapper:hover { background: #f7fbff }' ,
2219 '.tree-node-active > .node-wrapper > .node-content-wrapper, .tree-node-focused > .node-content-wrapper, .node-content-wrapper:hover { box-shadow: inset 0 0 1px #999; }' ,
2320 '.node-content-wrapper.is-dragging-over { background: #ddffee; box-shadow: inset 0 0 1px #999; }' ,
24- '.node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }' ,
25- '.tree-node-expanded > .node-wrapper > .toggle-children-wrapper > .toggle-children { transform: rotate(90deg) }' ,
26- '.tree-node-collapsed > .node-wrapper > .toggle-children-wrapper > .toggle-children { transform: rotate(0); }' ,
27- `.toggle-children-wrapper {
28- padding: 2px 3px 5px 1px;
29- }` ,
30- `.toggle-children {
31- background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC\');
32- height: 8px;
33- width: 9px;
34- background-size: contain;
35- display: inline-block;
36- position: relative;
37- background-repeat: no-repeat;
38- background-position: center;
39- }` ,
40- `.toggle-children-placeholder {
41- display: inline-block;
42- height: 10px;
43- width: 10px;
44- position: relative;
45- top: 1px;
46- padding-right: 3px;
47- }`
21+ '.node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }'
4822 ] ,
4923 template : `
5024 <div
51- *ngIf="!node.isHidden"
25+ *ngIf="!node.isHidden && !templates.treeNodeFullTemplate "
5226 class="tree-node tree-node-level-{{ node.level }}"
27+ [class]="node.getClass()"
5328 [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
5429 [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
5530 [class.tree-node-leaf]="node.isLeaf"
5631 [class.tree-node-active]="node.isActive"
5732 [class.tree-node-focused]="node.isFocused">
5833
59- <TreeNodeDropSlot
60- *ngIf="nodeIndex === 0"
61- [dropIndex]="nodeIndex"
62- [node]="node.parent"
63- ></TreeNodeDropSlot>
64-
65- <div class="node-wrapper" [style.padding-left]="getNodePadding()">
66- <span
67- *ngIf="node.hasChildren"
68- class="toggle-children-wrapper"
69- (click)="node.mouseAction('expanderClick', $event)">
34+ <TreeNodeDropSlot *ngIf="index === 0" [dropIndex]="index" [node]="node.parent"></TreeNodeDropSlot>
7035
71- <span class="toggle-children"></span>
72- </span>
73- <span
74- *ngIf="!node.hasChildren"
75- class="toggle-children-placeholder">
76- </span>
36+ <div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
37+ <TreeNodeExpander [node]="node"></TreeNodeExpander>
7738 <div class="node-content-wrapper"
78- #nodeContentWrapper
7939 (click)="node.mouseAction('click', $event)"
8040 (dblclick)="node.mouseAction('dblClick', $event)"
8141 (contextmenu)="node.mouseAction('contextMenu', $event)"
82- (treeDrop)="onDrop($event)"
83- [treeAllowDrop]="allowDrop.bind(this) "
42+ (treeDrop)="node. onDrop($event)"
43+ [treeAllowDrop]="node.allowDrop "
8444 [treeDrag]="node"
8545 [treeDragEnabled]="node.allowDrag()">
8646
87- <TreeNodeContent [node]="node" [treeNodeContentTemplate]="treeNodeContentTemplate"></TreeNodeContent>
47+ <TreeNodeContent [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
48+ </TreeNodeContent>
8849 </div>
8950 </div>
9051
91- <div [class.tree-children]="true"
92- [class.tree-children-no-padding]="node.options.levelPadding"
93- *ngIf="node.isExpanded">
94- <div *ngIf="node.children">
95- <TreeNode
96- *ngFor="let node of node.children; let i = index"
97- [node]="node"
98- [nodeIndex]="i"
99- [treeNodeContentTemplate]="treeNodeContentTemplate"
100- [loadingTemplate]="loadingTemplate">
101- </TreeNode>
102- </div>
103- <LoadingComponent
104- [style.padding-left]="getNodePadding()"
105- class="tree-node-loading"
106- *ngIf="!node.children"
107- [loadingTemplate]="loadingTemplate"
108- ></LoadingComponent>
109- </div>
110- <TreeNodeDropSlot
111- [dropIndex]="nodeIndex + 1"
112- [node]="node.parent"
113- ></TreeNodeDropSlot>
52+ <TreeNodeChildren [node]="node" [templates]="templates"></TreeNodeChildren>
53+ <TreeNodeDropSlot [dropIndex]="index + 1" [node]="node.parent"></TreeNodeDropSlot>
11454 </div>
115- `
55+ <template
56+ [ngTemplateOutlet]="templates.treeNodeFullTemplate"
57+ [ngOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
58+ </template>`
11659} )
11760
11861export class TreeNodeComponent implements AfterViewInit {
11962 @Input ( ) node :TreeNode ;
120- @Input ( ) nodeIndex :number ;
121- @Input ( ) treeNodeContentTemplate : TemplateRef < ITreeNodeTemplate > ;
122- @Input ( ) loadingTemplate : TemplateRef < any > ;
63+ @Input ( ) index :number ;
64+ @Input ( ) templates : any ;
12365
12466 constructor ( private elementRef : ElementRef ) {
12567 }
12668
127- onDrop ( $event ) {
128- this . node . mouseAction ( 'drop' , $event . event , {
129- from : $event . element ,
130- to : { parent : this . node , index : 0 }
131- } ) ;
132- }
133-
134- allowDrop ( element ) {
135- return this . node . options . allowDrop ( element , { parent : this . node , index : 0 } ) ;
136- }
137-
138- getNodePadding ( ) {
139- return this . node . options . levelPadding * ( this . node . level - 1 ) + 'px' ;
140- }
141-
14269 ngAfterViewInit ( ) {
14370 this . node . elementRef = this . elementRef ;
14471 }
0 commit comments