5
5
declare var $ ;
6
6
declare var javaLog ;
7
7
8
- var animationTime : number = 2500 ;
8
+ var animationTime :number = 2500 ;
9
9
var idCounter = 0 ;
10
10
11
11
class GraphNode {
@@ -18,7 +18,7 @@ class GraphNode {
18
18
top : number ;
19
19
connectedLines : Array < Line > ;
20
20
21
- constructor ( id : number , value : number ) {
21
+ constructor ( id :number , value :number ) {
22
22
this . id = id ;
23
23
this . value = value ;
24
24
this . children = new Array ;
@@ -28,7 +28,7 @@ class GraphNode {
28
28
this . top = 0 ;
29
29
}
30
30
31
- positionNode ( xLayer : number , yLayer : number , time : number ) : number {
31
+ positionNode ( xLayer :number , yLayer :number , time :number ) : number {
32
32
33
33
// Basis
34
34
if ( this . children . length == 0 ) {
@@ -42,16 +42,16 @@ class GraphNode {
42
42
xLayer = child . positionNode ( xLayer , yLayer + 1 , time ) ;
43
43
}
44
44
45
- var rightChildNodeLeft : number = this . children [ this . children . length - 1 ] . left ;
46
- var leftChildNodeLeft : number = this . children [ 0 ] . left ;
45
+ var rightChildNodeLeft : number = this . children [ this . children . length - 1 ] . left ;
46
+ var leftChildNodeLeft : number = this . children [ 0 ] . left ;
47
47
var x = ( ( rightChildNodeLeft - leftChildNodeLeft ) / 2 ) + leftChildNodeLeft ;
48
48
49
49
this . moveBothDirections ( x , yLayer * 50 , time ) ;
50
50
return xLayer ;
51
51
}
52
52
}
53
53
54
- addChild ( child : GraphNode ) {
54
+ addChild ( child : GraphNode ) {
55
55
// remove from last parents child list
56
56
if ( child . parent !== undefined && child . parent !== null ) {
57
57
child . parent . removeChild ( child ) ;
@@ -61,7 +61,7 @@ class GraphNode {
61
61
this . children . push ( child ) ;
62
62
63
63
//Add line
64
- var line : Line = new Line ( idCounter ++ , this , child ) ;
64
+ var line : Line = new Line ( idCounter ++ , this , child ) ;
65
65
this . connectedLines . push ( line ) ;
66
66
child . connectedLines . push ( line ) ;
67
67
}
@@ -70,7 +70,7 @@ class GraphNode {
70
70
removeChild ( child : GraphNode ) {
71
71
//Remove child from children-array
72
72
if ( this . children . indexOf ( child ) != - 1 ) {
73
- var index : number = this . children . indexOf ( child ) ;
73
+ var index :number = this . children . indexOf ( child ) ;
74
74
this . children . splice ( index , 1 ) ;
75
75
}
76
76
@@ -79,7 +79,7 @@ class GraphNode {
79
79
}
80
80
81
81
//Remove the line between us
82
- var line : Line = this . removeLineToNode ( child ) ;
82
+ var line :Line = this . removeLineToNode ( child ) ;
83
83
child . removeLineToNode ( this ) ;
84
84
85
85
//Remove the line from the screen
@@ -89,27 +89,27 @@ class GraphNode {
89
89
90
90
}
91
91
92
- removeLineToNode ( node : GraphNode ) : Line {
93
- for ( var i : number = 0 ; i < this . connectedLines . length ; i ++ ) {
92
+ removeLineToNode ( node : GraphNode ) : Line {
93
+ for ( var i : number = 0 ; i < this . connectedLines . length ; i ++ ) {
94
94
if ( this . connectedLines [ i ] . child . id == node . id || this . connectedLines [ i ] . parent . id == node . id ) {
95
95
return this . connectedLines . splice ( i , 1 ) [ 0 ] ; //Remove from array and return the line (for screen removal)
96
96
}
97
97
}
98
98
}
99
99
100
- moveSideways ( newLeftValue : number , time : number ) {
100
+ moveSideways ( newLeftValue :number , time :number ) {
101
101
this . left = newLeftValue ;
102
- $ ( "#node" + this . id ) . clearQueue ( ) . animate ( { left : newLeftValue + "px" } , time ) ;
103
- for ( var i : number = 0 ; i < this . connectedLines . length ; i ++ ) {
102
+ $ ( "#node" + this . id ) . clearQueue ( ) . animate ( { left : newLeftValue + "px" } , time ) ;
103
+ for ( var i : number = 0 ; i < this . connectedLines . length ; i ++ ) {
104
104
this . connectedLines [ i ] . animateLinePoint ( this , time ) ;
105
105
}
106
106
}
107
107
108
- moveBothDirections ( newLeftValue : number , newTopValue : number , time : number ) {
108
+ moveBothDirections ( newLeftValue :number , newTopValue :number , time :number ) {
109
109
this . left = newLeftValue ;
110
110
this . top = newTopValue ;
111
- $ ( "#node" + this . id ) . clearQueue ( ) . animate ( { left : newLeftValue + "px" , top : newTopValue + "px" } , time ) ;
112
- for ( var i : number = 0 ; i < this . connectedLines . length ; i ++ ) {
111
+ $ ( "#node" + this . id ) . clearQueue ( ) . animate ( { left : newLeftValue + "px" , top : newTopValue + "px" } , time ) ;
112
+ for ( var i : number = 0 ; i < this . connectedLines . length ; i ++ ) {
113
113
this . connectedLines [ i ] . animateLinePoint ( this , time ) ;
114
114
}
115
115
}
@@ -125,11 +125,11 @@ class GraphNode {
125
125
126
126
// This class holds information about svg-lines between nodes
127
127
class Line {
128
- id : number ;
129
- parent : GraphNode ;
130
- child : GraphNode ;
128
+ id : number ;
129
+ parent : GraphNode ;
130
+ child : GraphNode ;
131
131
132
- constructor ( id : number , parent : GraphNode , child : GraphNode ) {
132
+ constructor ( id : number , parent : GraphNode , child : GraphNode ) {
133
133
this . id = id ;
134
134
this . parent = parent ;
135
135
this . child = child ;
@@ -138,55 +138,39 @@ class Line {
138
138
var $parent = $ ( "#node" + parent . id ) ;
139
139
var $child = $ ( "#node" + child . id ) ;
140
140
// JQuery have no support for creating svg elements yet, using JavaScript instead
141
- var newLine = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'line' ) ;
142
- newLine . setAttribute ( 'id' , 'line' + this . id ) ;
143
- newLine . setAttribute ( 'x1' , $parent . position ( ) . left + width / 2 ) ;
144
- newLine . setAttribute ( 'y1' , $parent . position ( ) . top + width / 2 ) ;
145
- newLine . setAttribute ( 'x2' , $child . position ( ) . left + width / 2 ) ;
146
- newLine . setAttribute ( 'y2' , $child . position ( ) . top + width / 2 ) ; // TODO: Line is placed too late after node has moved
141
+ var newLine = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'line' ) ;
142
+ newLine . setAttribute ( 'id' , 'line' + this . id ) ;
143
+ newLine . setAttribute ( 'x1' , $parent . position ( ) . left + width / 2 ) ;
144
+ newLine . setAttribute ( 'y1' , $parent . position ( ) . top + width / 2 ) ;
145
+ newLine . setAttribute ( 'x2' , $child . position ( ) . left + width / 2 ) ;
146
+ newLine . setAttribute ( 'y2' , $child . position ( ) . top + width / 2 ) ; // TODO: Line is placed too late after node has moved
147
147
$ ( "#graphUL svg#lines" ) . append ( newLine ) ;
148
148
$ ( "#line" + id ) . removeClass ( 'hidden' ) ;
149
149
}
150
150
151
151
//Animate either the child side of the line or the parent side based on what node is passed
152
- animateLinePoint ( node : GraphNode , animationTime : number ) {
153
- var width : number = $ ( "#node" + node . id ) . outerWidth ( ) ;
152
+ animateLinePoint ( node :GraphNode , animationTime :number ) {
153
+ var width : number = $ ( "#node" + node . id ) . outerWidth ( ) ;
154
154
155
155
var $line = $ ( "#line" + this . id ) ;
156
- var parentPoint : boolean = ( this . parent . id == node . id ) ;
156
+ var parentPoint :boolean = ( this . parent . id == node . id ) ;
157
157
if ( parentPoint ) {
158
- $ ( { x1 : $line . attr ( 'x1' ) } )
159
- . animate ( { x1 : this . parent . left + width / 2 } , {
160
- duration : animationTime , step : function ( now ) {
161
- $line . attr ( 'x1' , now ) ;
162
- }
163
- } ) ;
164
- $ ( { y1 : $line . attr ( 'y1' ) } )
165
- . animate ( { y1 : this . parent . top + width / 2 } , {
166
- duration : animationTime , step : function ( now ) {
167
- $line . attr ( 'y1' , now ) ;
168
- }
169
- } ) ;
158
+ $ ( { x1 :$line . attr ( 'x1' ) } )
159
+ . animate ( { x1 : this . parent . left + width / 2 } , { duration :animationTime , step :function ( now ) { $line . attr ( 'x1' , now ) ; } } ) ;
160
+ $ ( { y1 :$line . attr ( 'y1' ) } )
161
+ . animate ( { y1 : this . parent . top + width / 2 } , { duration :animationTime , step :function ( now ) { $line . attr ( 'y1' , now ) ; } } ) ;
170
162
} else {
171
163
$ ( { x2 : $line . attr ( 'x2' ) } )
172
- . animate ( { x2 : this . child . left + width / 2 } , {
173
- duration : animationTime , step : function ( now ) {
174
- $line . attr ( 'x2' , now ) ;
175
- }
176
- } ) ;
164
+ . animate ( { x2 : this . child . left + width / 2 } , { duration : animationTime , step : function ( now ) { $line . attr ( 'x2' , now ) ; } } ) ;
177
165
$ ( { y2 : $line . attr ( 'y2' ) } )
178
- . animate ( { y2 : this . child . top + width / 2 } , {
179
- duration : animationTime , step : function ( now ) {
180
- $line . attr ( 'y2' , now ) ;
181
- }
182
- } ) ;
166
+ . animate ( { y2 : this . child . top + width / 2 } , { duration : animationTime , step : function ( now ) { $line . attr ( 'y2' , now ) ; } } ) ;
183
167
}
184
168
}
185
169
}
186
170
187
171
// Top node - not visible
188
- var superNode : GraphNode = new GraphNode ( - 1 , 0 ) ;
189
- var allNodes : Array < GraphNode > = new Array ;
172
+ var superNode : GraphNode = new GraphNode ( - 1 , 0 ) ;
173
+ var allNodes : Array < GraphNode > = new Array ;
190
174
191
175
function createAndDrawNodes ( numberOfNodes ) {
192
176
@@ -195,8 +179,8 @@ function createAndDrawNodes(numberOfNodes) {
195
179
superNode . children = new Array ;
196
180
allNodes = new Array ;
197
181
198
- for ( var i = 0 ; i < numberOfNodes ; i ++ ) {
199
- var node : GraphNode = new GraphNode ( i , i ) ;
182
+ for ( var i = 0 ; i < numberOfNodes ; i ++ ) {
183
+ var node : GraphNode = new GraphNode ( i , i ) ;
200
184
201
185
// Add node to nodeList
202
186
allNodes . push ( node ) ;
@@ -213,18 +197,18 @@ function createAndDrawNodes(numberOfNodes) {
213
197
positioningNodes ( 1500 ) ;
214
198
}
215
199
216
- function positioningNodes ( time : number ) {
200
+ function positioningNodes ( time :number ) {
217
201
// Position the whole graph
218
202
superNode . positionNode ( 0 , - 1 , time ) ;
219
203
centerDivWidthNodes ( time ) ;
220
204
}
221
205
222
- function getTotalWidthOfNodes ( ) : number {
223
- var leftNodePx : number = 2000 ;
224
- var rightNodePx : number = - 2000 ;
225
- var width : number = 0 ;
226
- allNodes . forEach ( function ( node ) {
227
- var left : number = node . left ;
206
+ function getTotalWidthOfNodes ( ) : number {
207
+ var leftNodePx : number = 2000 ;
208
+ var rightNodePx : number = - 2000 ;
209
+ var width : number = 0 ;
210
+ allNodes . forEach ( function ( node ) {
211
+ var left : number = node . left ;
228
212
if ( left < leftNodePx ) {
229
213
leftNodePx = left ;
230
214
}
@@ -237,32 +221,30 @@ function getTotalWidthOfNodes(): number {
237
221
}
238
222
239
223
function getSpaceBetweenDivAndLeftNode ( ) {
240
- var divWidth : number = $ ( "div#nodes" ) . width ( ) ;
224
+ var divWidth : number = $ ( "div#nodes" ) . width ( ) ;
241
225
return divWidth / 2 - getTotalWidthOfNodes ( ) / 2 ;
242
226
}
243
227
244
- function centerDivWidthNodes ( time : number ) : void {
228
+ function centerDivWidthNodes ( time :number ) : void {
245
229
$ ( "#graphUL" ) . finish ( ) ; // if already animating, finish animation
246
- $ ( "#graphUL" ) . animate ( { left : getSpaceBetweenDivAndLeftNode ( ) } , time ) ;
230
+ $ ( "#graphUL" ) . animate ( { left : getSpaceBetweenDivAndLeftNode ( ) } , time ) ;
247
231
}
248
232
249
- window . addEventListener ( 'resize' , function ( ) {
250
- centerDivWidthNodes ( animationTime )
251
- } ) ;
233
+ window . addEventListener ( 'resize' , function ( ) { centerDivWidthNodes ( animationTime ) } ) ;
252
234
253
- function getGraphState ( ) : string {
254
- var state : Array < Array < number > > = [ ] ;
255
- for ( var nodeIndex : number = 0 ; nodeIndex < allNodes . length ; nodeIndex ++ ) {
235
+ function getGraphState ( ) : string {
236
+ var state :Array < Array < number > > = [ ] ;
237
+ for ( var nodeIndex :number = 0 ; nodeIndex < allNodes . length ; nodeIndex ++ ) {
256
238
state . push ( new Array ) ;
257
- for ( var childIndex : number = 0 ; childIndex < allNodes [ nodeIndex ] . children . length ; childIndex ++ ) {
239
+ for ( var childIndex :number = 0 ; childIndex < allNodes [ nodeIndex ] . children . length ; childIndex ++ ) {
258
240
state [ nodeIndex ] . push ( allNodes [ nodeIndex ] . children [ childIndex ] . id ) ;
259
241
}
260
242
}
261
243
return JSON . stringify ( state ) . toString ( ) ;
262
244
}
263
245
264
- function getArrayState ( ) : string {
265
- var state : Array < number > = [ ] ;
246
+ function getArrayState ( ) : string {
247
+ var state :Array < number > = [ ] ;
266
248
267
249
for ( var i = 0 ; i < allNodes . length ; i ++ ) {
268
250
state . push ( parseInt ( $ ( "#arrayElem" + i + " div.content" ) . text ( ) ) ) ;
0 commit comments