3
3
4
4
import etch from 'etch' ;
5
5
import { prewalk , postwalk , prefor } from './tree.js' ;
6
- import { Etch , Tip , Button , toView } from '../util/etch.js' ;
6
+ import { Etch , Button , toView } from '../util/etch.js' ;
7
7
8
8
function clamp ( x , min , max ) {
9
9
return Math . min ( Math . max ( x , min ) , max )
@@ -26,12 +26,12 @@ function dims(tree) {
26
26
left += ch . width ;
27
27
} ) ;
28
28
// Centre align children
29
- chwidth = parent . children . map ( ( { width} ) => width ) . reduce ( ( a , b ) => a + b , 0 ) ;
29
+ const chwidth = parent . children . map ( ( { width} ) => width ) . reduce ( ( a , b ) => a + b , 0 ) ;
30
30
parent . children . forEach ( ch => ch . left += ( parent . width - chwidth ) / 2 ) ;
31
31
return parent ;
32
32
} ) ;
33
33
// Scale total height to 100%
34
- let max = postwalk ( tree , ( { height, children} ) =>
34
+ const max = postwalk ( tree , ( { height, children} ) =>
35
35
Math . max ( height , ...children . map ( x => x + height ) ) ) ;
36
36
prewalk ( tree , ( node ) => {
37
37
node . top /= max ;
@@ -168,7 +168,7 @@ export class Pannable extends Etch {
168
168
this . toolbar = this . toolbar . concat ( this . item . toolbar )
169
169
}
170
170
171
- let style = { position :'relative' , height :'inherit' , width :'inherit' , transformOrigin : '0px 0px' }
171
+ const style = { position :'relative' , height :'inherit' , width :'inherit' , transformOrigin : '0px 0px' }
172
172
173
173
if ( this . zoomstrategy == 'width' ) {
174
174
style . transform = 'translate(' + this . left + 'px,' + this . top + 'px)'
@@ -196,11 +196,6 @@ export class Pannable extends Etch {
196
196
</ div > ;
197
197
}
198
198
199
- readAfterUpdate ( ) {
200
- this . containerRect =
201
- this . element . getElementsByClassName ( 'ink-pannable' ) [ 0 ] . getBoundingClientRect ( )
202
- }
203
-
204
199
teardown ( ) {
205
200
if ( this . item && this . item . teardown ) this . item . teardown ( )
206
201
etch . update ( this )
@@ -214,22 +209,27 @@ export class Pannable extends Etch {
214
209
215
210
class NodeView extends Etch {
216
211
render ( ) {
217
- let { height, width, top, left, onclick, onmouseover, onmouseout} = this . props ;
218
- return < Clickable onclick = { onclick } > < div className = 'node' { ...{ onmouseover, onmouseout} } style = { {
219
- height : 100 * height + '%' ,
220
- width : 100 * width + '%' ,
221
- top : 100 * top + '%' ,
222
- left : 100 * left + '%'
223
- } } >
224
- < div > < div > </ div > </ div >
225
- </ div > </ Clickable > ;
212
+ const { height, width, top, left, onclick, onmouseover, onmouseout } = this . props ;
213
+ return < Clickable onclick = { onclick } >
214
+ < div className = 'node' { ...{ onmouseover, onmouseout} } style = { {
215
+ height : 100 * height + '%' ,
216
+ width : 100 * width + '%' ,
217
+ top : 100 * top + '%' ,
218
+ left : 100 * left + '%'
219
+ } } >
220
+ < div >
221
+ < div >
222
+ </ div >
223
+ </ div >
224
+ </ div >
225
+ </ Clickable > ;
226
226
}
227
227
}
228
228
229
229
export default class Canopy extends Etch {
230
- update ( { data} ) { }
230
+ update ( { data } ) { }
231
231
render ( ) {
232
- let nodes = [ ] ;
232
+ const nodes = [ ] ;
233
233
prefor ( dims ( this . props . data ) , node => nodes . push ( < NodeView { ...node } /> ) ) ;
234
234
return < div className = "ink-canopy" >
235
235
{ nodes }
0 commit comments