OLD | NEW |
| (Empty) |
1 import 'package:angular/angular.dart'; | |
2 import 'dart:html'; | |
3 import 'dart:math'; | |
4 import 'dart:core'; | |
5 | |
6 var random = new Random(); | |
7 var width = 400; | |
8 var height = 400; | |
9 var speed = .05; | |
10 | |
11 class BallModel { | |
12 var x = width * random.nextDouble(); | |
13 var y = height * random.nextDouble(); | |
14 var velX = 2 * speed * random.nextDouble() - speed; | |
15 var velY = 2 * speed * random.nextDouble() - speed; | |
16 var color = BallModel._color(); | |
17 | |
18 static _color() { | |
19 var color = '#'; | |
20 for(var i = 0; i < 6; i++) { | |
21 color += (16 * random.nextDouble()).floor().toRadixString(16); | |
22 } | |
23 return color; | |
24 } | |
25 | |
26 } | |
27 | |
28 @NgController( | |
29 selector: '[bounce-controller]', | |
30 publishAs: 'bounce') | |
31 class BounceController { | |
32 var lastTime = window.performance.now(); | |
33 var run = true; | |
34 var fps = 0; | |
35 var digestTime = 0; | |
36 var currentDigestTime = 0; | |
37 var balls = []; | |
38 final NgZone zone; | |
39 final Scope scope; | |
40 var ballClassName = 'ball'; | |
41 | |
42 BounceController(this.zone, this.scope) { | |
43 changeCount(100); | |
44 tick(); | |
45 } | |
46 | |
47 void toggleCSS() { | |
48 ballClassName = ballClassName == '' ? 'ball' : ''; | |
49 } | |
50 | |
51 void playPause() { | |
52 run = !run; | |
53 if (run) requestAnimationFrame(tick); | |
54 } | |
55 | |
56 void requestAnimationFrame(fn) { | |
57 window.requestAnimationFrame((_) => zone.run(fn)); | |
58 } | |
59 | |
60 void changeCount(count) { | |
61 while(count > 0) { | |
62 balls.add(new BallModel()); | |
63 count--; | |
64 } | |
65 while(count < 0 && balls.isNotEmpty) { | |
66 balls.removeAt(0); | |
67 count++; | |
68 } | |
69 //tick(); | |
70 } | |
71 | |
72 void timeDigest() { | |
73 var start = window.performance.now(); | |
74 digestTime = currentDigestTime; | |
75 scope.rootScope.domRead(() { | |
76 currentDigestTime = window.performance.now() - start; | |
77 }); | |
78 } | |
79 | |
80 void tick() { | |
81 var now = window.performance.now(); | |
82 var delay = now - lastTime; | |
83 | |
84 fps = (1000/delay).round(); | |
85 for(var i=0, ii=balls.length; i<ii; i++) { | |
86 var b = balls[i]; | |
87 b.x += delay * b.velX; | |
88 b.y += delay * b.velY; | |
89 if (b.x < 0) { b.x *= -1; b.velX *= -1; } | |
90 if (b.y < 0) { b.y *= -1; b.velY *= -1; } | |
91 if (b.x > width) { b.x = 2*width - b.x; b.velX *= -1; } | |
92 if (b.y > height) { b.y = 2*height - b.y; b.velY *= -1; } | |
93 } | |
94 lastTime = now; | |
95 timeDigest(); | |
96 if (run) requestAnimationFrame(tick); | |
97 } | |
98 } | |
99 | |
100 @NgDirective( | |
101 selector: '[ball-position]', | |
102 map: const { | |
103 "ball-position": '=>position'}) | |
104 class BallPositionDirective { | |
105 final Element element; | |
106 final Scope scope; | |
107 BallPositionDirective(this.element, this.scope); | |
108 | |
109 set position(BallModel model) { | |
110 element.style.backgroundColor = model.color; | |
111 scope | |
112 ..watch('x', (x, _) => element.style.left = '${x + 10}px', context: mode
l, readOnly: true) | |
113 ..watch('y', (y, _) => element.style.top = '${y + 10}px', context: model
, readOnly: true); | |
114 } | |
115 } | |
116 | |
117 class MyModule extends Module { | |
118 MyModule() { | |
119 type(BounceController); | |
120 type(BallPositionDirective); | |
121 value(GetterCache, new GetterCache({ | |
122 'x': (o) => o.x, | |
123 'y': (o) => o.y, | |
124 'bounce': (o) => o.bounce, | |
125 'fps': (o) => o.fps, | |
126 'balls': (o) => o.balls, | |
127 'length': (o) => o.length, | |
128 'digestTime': (o) => o.digestTime, | |
129 'ballClassName': (o) => o.ballClassName | |
130 })); | |
131 value(ScopeStats, new ScopeStats(report: true)); | |
132 } | |
133 } | |
134 | |
135 main() { | |
136 ngBootstrap(module: new MyModule()); | |
137 } | |
OLD | NEW |