| OLD | NEW |
| (Empty) |
| 1 import 'package:angular/angular.dart'; | |
| 2 import 'package:angular/application_factory.dart'; | |
| 3 import 'dart:html'; | |
| 4 import 'dart:math'; | |
| 5 import 'dart:core'; | |
| 6 | |
| 7 var random = new Random(); | |
| 8 var width = 400; | |
| 9 var height = 400; | |
| 10 var speed = .05; | |
| 11 | |
| 12 class BallModel { | |
| 13 var x = width * random.nextDouble(); | |
| 14 var y = height * random.nextDouble(); | |
| 15 var velX = 2 * speed * random.nextDouble() - speed; | |
| 16 var velY = 2 * speed * random.nextDouble() - speed; | |
| 17 var color = BallModel._color(); | |
| 18 | |
| 19 static _color() { | |
| 20 var color = '#'; | |
| 21 for(var i = 0; i < 6; i++) { | |
| 22 color += (16 * random.nextDouble()).floor().toRadixString(16); | |
| 23 } | |
| 24 return color; | |
| 25 } | |
| 26 | |
| 27 } | |
| 28 | |
| 29 @Controller( | |
| 30 selector: '[bounce-controller]', | |
| 31 publishAs: 'bounce') | |
| 32 class BounceController { | |
| 33 var lastTime = window.performance.now(); | |
| 34 var run = false; | |
| 35 var fps = 0; | |
| 36 var digestTime = 0; | |
| 37 var currentDigestTime = 0; | |
| 38 var balls = []; | |
| 39 final Scope scope; | |
| 40 var ballClassName = 'ball'; | |
| 41 | |
| 42 BounceController(this.scope) { | |
| 43 changeCount(100); | |
| 44 if (run) 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((_) => 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 List<String> _CACHE = new List.generate(500, (i) => '${i}px'); | |
| 101 | |
| 102 @Decorator( | |
| 103 selector: '[ball-position]', | |
| 104 map: const { | |
| 105 "ball-position": '=>position'}, | |
| 106 exportExpressions: const ['x', 'y']) | |
| 107 class BallPosition { | |
| 108 final Element element; | |
| 109 final Scope scope; | |
| 110 BallPosition(this.element, this.scope); | |
| 111 | |
| 112 px(x) => _CACHE[max(0, x.round())]; | |
| 113 | |
| 114 set position(BallModel model) { | |
| 115 var style = element.style; | |
| 116 style.backgroundColor = model.color; | |
| 117 scope | |
| 118 ..watch('x', (x, _) => element.style.left = '${x + 10}px', | |
| 119 context: model, canChangeModel: false) | |
| 120 ..watch('y', (y, _) => element.style.top = '${y + 10}px', | |
| 121 context: model, canChangeModel: false); | |
| 122 } | |
| 123 } | |
| 124 | |
| 125 class MyModule extends Module { | |
| 126 MyModule() { | |
| 127 type(BounceController); | |
| 128 type(BallPosition); | |
| 129 } | |
| 130 } | |
| 131 | |
| 132 main() { | |
| 133 applicationFactory().addModule(new MyModule()).run(); | |
| 134 } | |
| OLD | NEW |