1
- import {
2
- Component ,
3
- Input ,
4
- ViewChild ,
5
- SimpleChanges ,
6
- ElementRef
7
- } from '@angular/core' ;
1
+ import { Component , Input , ViewChild , SimpleChanges , ElementRef , OnChanges , AfterViewInit } from '@angular/core' ;
8
2
9
3
import { Route } from '../../../backend/utils' ;
10
4
import { UserActions } from '../../actions/user-actions/user-actions' ;
@@ -16,28 +10,29 @@ import { takeUntil, map, mergeMap, audit, tap } from 'rxjs/operators';
16
10
@Component ( {
17
11
selector : 'bt-router-tree' ,
18
12
templateUrl : './router-tree.html' ,
19
- styleUrls : [ './router-tree.css' ] ,
13
+ styleUrls : [ './router-tree.css' ]
20
14
} )
21
- export class RouterTree {
22
- @ViewChild ( 'routeTree' , { static : false } ) private routeTreeComponent ;
23
- @ViewChild ( 'resizer' , { static : false } ) private resizerElement ;
24
- @ViewChild ( 'svgContainer' , { static : false } ) private svg : ElementRef ;
25
- @ViewChild ( 'mainGroup' , { static : false } ) private g : ElementRef ;
15
+ export class RouterTree implements OnChanges , AfterViewInit {
16
+ @ViewChild ( 'routeTree' , { static : true } ) private routeTreeComponent ;
17
+ @ViewChild ( 'resizer' , { static : true } ) private resizerElement ;
18
+ @ViewChild ( 'svgContainer' , { static : true } ) private svg : ElementRef ;
19
+ @ViewChild ( 'mainGroup' , { static : true } ) private g : ElementRef ;
26
20
@Input ( ) routerTree : Array < Route > ;
27
21
selectedRoute : Route | any ;
28
22
private tree : d3 . TreeLayout < { } > ;
29
23
private sub : Subscription ;
30
24
private routerTreeBaseHeight : number = 120 ; // init size of element
31
25
32
- constructor ( private userActions : UserActions , private element : ElementRef ) { }
26
+ constructor ( private userActions : UserActions , private element : ElementRef ) { }
33
27
34
28
ngAfterViewInit ( ) {
35
29
// On drag, get delta of mouse Y and apply it to base height. Then, update
36
30
// base height.
37
- this . sub = this . _dragEvent ( ) . pipe (
38
- tap ( delta => this . resizeElement ( delta + this . routerTreeBaseHeight ) ) ,
39
- audit ( ( ) => fromEvent ( document , 'mouseup' ) )
40
- )
31
+ this . sub = this . _dragEvent ( )
32
+ . pipe (
33
+ tap ( delta => this . resizeElement ( delta + this . routerTreeBaseHeight ) ) ,
34
+ audit ( ( ) => fromEvent ( document , 'mouseup' ) )
35
+ )
41
36
. subscribe ( delta => {
42
37
this . routerTreeBaseHeight += delta ;
43
38
} ) ;
@@ -57,7 +52,6 @@ export class RouterTree {
57
52
) ;
58
53
}
59
54
60
-
61
55
ngOnDestroy ( ) {
62
56
if ( this . sub ) {
63
57
this . sub . unsubscribe ( ) ;
@@ -91,40 +85,49 @@ export class RouterTree {
91
85
specificity : null ,
92
86
handler : null ,
93
87
data : { } ,
94
- isAux : false ,
88
+ isAux : false
95
89
} ;
96
90
97
- const nodes = this . tree ( d3 . hierarchy (
98
- ( root . children . length === 0 || root . children . length > 1 ) ? root : root . children [ 0 ] , d => d . children ) ) ;
91
+ const nodes = this . tree (
92
+ d3 . hierarchy ( root . children . length === 0 || root . children . length > 1 ? root : root . children [ 0 ] , d => d . children )
93
+ ) ;
99
94
100
95
g . selectAll ( '.link' )
101
96
. data ( nodes . descendants ( ) . slice ( 1 ) )
102
- . enter ( ) . append ( 'path' )
97
+ . enter ( )
98
+ . append ( 'path' )
103
99
. attr ( 'class' , 'link' )
104
- . attr ( 'd' , d => `
100
+ . attr (
101
+ 'd' ,
102
+ d => `
105
103
M${ d . y } ,${ d . x }
106
104
C${ ( d . y + d . parent . y ) / 2 } ,
107
105
${ d . x } ${ ( d . y + d . parent . y ) / 2 } ,
108
106
${ d . parent . x } ${ d . parent . y } ,
109
- ${ d . parent . x } ` ) ;
107
+ ${ d . parent . x } `
108
+ ) ;
110
109
111
110
// Declare the nodes
112
- const node = g . selectAll ( 'g.node' )
111
+ const node = g
112
+ . selectAll ( 'g.node' )
113
113
. data ( nodes . descendants ( ) )
114
- . enter ( ) . append ( 'g' )
114
+ . enter ( )
115
+ . append ( 'g' )
115
116
. attr ( 'class' , 'node' )
116
117
. on ( 'mouseover' , n => this . onRollover ( n . data ) )
117
118
. on ( 'mouseout' , n => this . onRollover ( n . data ) )
118
119
. attr ( 'transform' , d => `translate(${ d . y } ,${ d . x } )` ) ;
119
120
120
- node . append ( 'circle' )
121
- . attr ( 'class' , d => ( < any > d . data ) . isAux ? 'node-aux-route' : 'node-route' )
121
+ node
122
+ . append ( 'circle' )
123
+ . attr ( 'class' , d => ( ( < any > d . data ) . isAux ? 'node-aux-route' : 'node-route' ) )
122
124
. attr ( 'r' , 6 ) ;
123
125
124
- node . append ( 'text' )
125
- . attr ( 'x' , ( d ) => d . children ? - 13 : 13 )
126
+ node
127
+ . append ( 'text' )
128
+ . attr ( 'x' , d => ( d . children ? - 13 : 13 ) )
126
129
. attr ( 'dy' , '.35em' )
127
- . attr ( 'text-anchor' , ( d ) => d . children ? 'end' : 'start' )
130
+ . attr ( 'text-anchor' , d => ( d . children ? 'end' : 'start' ) )
128
131
. text ( d => ( < any > d . data ) . name )
129
132
. attr ( 'class' , 'monospace' ) ;
130
133
@@ -134,20 +137,22 @@ export class RouterTree {
134
137
const svgRect = this . svg . nativeElement . getBoundingClientRect ( ) ;
135
138
const gElRect = this . g . nativeElement . getBoundingClientRect ( ) ;
136
139
137
- g . attr ( 'transform' , `translate(
140
+ g . attr (
141
+ 'transform' ,
142
+ `translate(
138
143
${ svgRect . left - gElRect . left + svgPadding } ,
139
144
${ svgRect . top - gElRect . top + svgPadding }
140
- )` ) ;
141
-
142
- svg
143
- . attr ( 'height' , gElRect . height + svgPadding * 2 )
144
- . attr ( 'width' , gElRect . width + svgPadding * 2 ) ;
145
+ )`
146
+ ) ;
145
147
148
+ svg . attr ( 'height' , gElRect . height + svgPadding * 2 ) . attr ( 'width' , gElRect . width + svgPadding * 2 ) ;
146
149
}
147
150
148
- private ngOnChanges ( changes : SimpleChanges ) {
151
+ ngOnChanges ( changes : SimpleChanges ) {
149
152
if ( ( < any > changes ) . routerTree && this . g ) {
150
- d3 . select ( this . g . nativeElement ) . selectAll ( '*' ) . remove ( ) ;
153
+ d3 . select ( this . g . nativeElement )
154
+ . selectAll ( '*' )
155
+ . remove ( ) ;
151
156
}
152
157
this . render ( ) ;
153
158
}
@@ -163,7 +168,7 @@ export class RouterTree {
163
168
164
169
onRetrieveSearchResults = ( query : string ) : Promise < Array < any > > => {
165
170
return this . userActions . searchRouter ( this . routerTree , query ) ;
166
- }
171
+ } ;
167
172
168
173
onSelectedSearchResultChanged ( route : Route ) {
169
174
this . selectedRoute = route ;
@@ -173,5 +178,4 @@ export class RouterTree {
173
178
showReadme ( ) {
174
179
window . open ( 'https://github.com/rangle/augury#known-issues' ) ;
175
180
}
176
-
177
181
}
0 commit comments