Skip to content

Commit 754ef65

Browse files
rkirovrkirov
committed
feat(directives): remove the @controller directive
Completely remove the deprecated Controller directive. Major update to the demos to use setRootContext (where applicable) and to move to Components for the beefier demos (bouncing balls and form). A temporary work around was required in demos (animation and todo) so that rootContext have Map interface. The work arounds will disappear after the context is set to the component. Library changes were pulled out of the first commit in dart-archive#1269.
1 parent 73a3fe8 commit 754ef65

33 files changed

+703
-834
lines changed

‎example/lib/bouncing_balls.dart

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import 'package:angular/angular.dart';
2+
import 'package:quiver/collection.dart';
3+
4+
import 'dart:html';
5+
import 'dart:math';
6+
import 'dart:core';
7+
8+
var random = new Random();
9+
var width = 400;
10+
var height = 400;
11+
var speed = .05;
12+
13+
class BallModel {
14+
var x = width * random.nextDouble();
15+
var y = height * random.nextDouble();
16+
var velX = 2 * speed * random.nextDouble() - speed;
17+
var velY = 2 * speed * random.nextDouble() - speed;
18+
var color = BallModel._color();
19+
20+
static _color() {
21+
var color = '#';
22+
for(var i = 0; i < 6; i++) {
23+
color += (16 * random.nextDouble()).floor().toRadixString(16);
24+
}
25+
return color;
26+
}
27+
}
28+
29+
30+
@Component(
31+
selector: 'bounce-controller',
32+
publishAs: 'ctrl',
33+
templateUrl: 'packages/angular_dart_example/bouncing_controller.html',
34+
cssUrl: 'packages/angular_dart_example/bouncing_controller.css'
35+
)
36+
class BounceController {
37+
RootScope rootScope;
38+
var lastTime = window.performance.now();
39+
var run = false;
40+
var fps = 0;
41+
var digestTime = 0;
42+
var currentDigestTime = 0;
43+
var balls = [];
44+
var ballClassName = 'ball';
45+
46+
BounceController(this.rootScope) {
47+
changeCount(100);
48+
if (run) tick();
49+
}
50+
51+
void toggleCSS() {
52+
ballClassName = ballClassName == '' ? 'ball' : '';
53+
}
54+
55+
void playPause() {
56+
run = !run;
57+
if (run) requestAnimationFrame(tick);
58+
}
59+
60+
void requestAnimationFrame(fn) {
61+
window.requestAnimationFrame((_) => fn());
62+
}
63+
64+
void changeCount(count) {
65+
while(count > 0) {
66+
balls.add(new BallModel());
67+
count--;
68+
}
69+
while(count < 0 && balls.isNotEmpty) {
70+
balls.removeAt(0);
71+
count++;
72+
}
73+
//tick();
74+
}
75+
76+
void timeDigest() {
77+
var start = window.performance.now();
78+
digestTime = currentDigestTime;
79+
rootScope.domRead(() {
80+
currentDigestTime = window.performance.now() - start;
81+
});
82+
}
83+
84+
void tick() {
85+
var now = window.performance.now();
86+
var delay = now - lastTime;
87+
88+
fps = (1000/delay).round();
89+
for(var i = 0; i < balls.length; i++) {
90+
var b = balls[i];
91+
b.x += delay * b.velX;
92+
b.y += delay * b.velY;
93+
if (b.x < 0) { b.x *= -1; b.velX *= -1; }
94+
if (b.y < 0) { b.y *= -1; b.velY *= -1; }
95+
if (b.x > width) { b.x = 2*width - b.x; b.velX *= -1; }
96+
if (b.y > height) { b.y = 2*height - b.y; b.velY *= -1; }
97+
}
98+
lastTime = now;
99+
timeDigest();
100+
if (run) requestAnimationFrame(tick);
101+
}
102+
}
103+
104+
List<String> _CACHE = new List.generate(500, (i) => '${i}px');
105+
106+
@Decorator(
107+
selector: '[ball-position]',
108+
map: const {
109+
"ball-position": '=>position'},
110+
exportExpressions: const ['x', 'y'])
111+
class BallPosition {
112+
final Element element;
113+
final Scope scope;
114+
BallPosition(this.element, this.scope);
115+
116+
px(x) => _CACHE[max(0, x.round())];
117+
118+
set position(BallModel model) {
119+
var style = element.style;
120+
style.backgroundColor = model.color;
121+
scope
122+
..watch('x', (x, _) => element.style.left = '${x + 10}px',
123+
context: model, canChangeModel: false)
124+
..watch('y', (y, _) => element.style.top = '${y + 10}px',
125+
context: model, canChangeModel: false);
126+
}
127+
}

‎example/lib/bouncing_controller.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.balls {
2+
border: 1px solid black;
3+
width: 420px;
4+
height: 420px;
5+
margin: 5px;
6+
}
7+
8+
.ball {
9+
display: inline-block;
10+
position: absolute;
11+
width: 20px;
12+
height: 20px;
13+
border: 1px solid black;
14+
-webkit-border-radius: 10px;
15+
-moz-border-radius: 10px;
16+
border-radius: 10px;
17+
}
18+
19+
.fps-bar {
20+
width: 200px;
21+
height: 10px;
22+
border: 1px solid black;
23+
display: inline-block;
24+
margin-left: 5px;
25+
}
26+
27+
.fps {
28+
height: 10px;
29+
width: 60px;
30+
background-color: green;
31+
}

‎example/lib/bouncing_controller.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="balls">
2+
<div ng-repeat="ball in ctrl.balls"
3+
class="{{ ctrl.ballClassName }}"
4+
ball-position="ball"></div>
5+
</div>
6+
7+
<div>
8+
<div class="fps-bar">
9+
<div class="fps" ng-style-width="ctrl.fps * 4 + 'px'"></div>
10+
</div>
11+
</div>
12+
13+
{{ ctrl.fps }} fps. ({{ ctrl.balls.length }} balls) [{{ 1000 / ctrl.fps }} ms] <br>
14+
Digest: {{ ctrl.digestTime }} ms<br>
15+
<a href ng-click="ctrl.changeCount(1)">+1</a>
16+
<a href ng-click="ctrl.changeCount(10)">+10</a>
17+
<a href ng-click="ctrl.changeCount(100)">+100</a>
18+
<br>
19+
<a href ng-click="ctrl.changeCount(-1)">-1</a>
20+
<a href ng-click="ctrl.changeCount(-10)">-10</a>
21+
<a href ng-click="ctrl.changeCount(-100)">-100</a>
22+
<br>
23+
<a href ng-click="ctrl.playPause()">&#x25B6;&#10073;&#10073;</a> <br>
24+
<a href ng-click="ctrl.toggleCSS()">Toggle CSS</a><br>
25+
<a href ng-click="ctrl.timeDigest()">noop</a><br>

‎example/lib/form_controller.dart

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import 'package:angular/angular.dart';
2+
3+
@Component(
4+
selector: '[form-controller]',
5+
templateUrl: 'packages/angular_dart_example/form_controller.html',
6+
publishAs: 'form_ctrl',
7+
useShadowDom: false)
8+
class FormCtrl {
9+
static const String _COLOR_HEX = "hex";
10+
static const String _COLOR_HSL = "hsl";
11+
static const String _COLOR_RGB = "rgb";
12+
static const String _COLOR_NAME = "name";
13+
14+
static const _COLOR_TYPES = const [_COLOR_RGB, _COLOR_HSL, _COLOR_HEX, _COLOR_NAME];
15+
16+
static const _RESOLUTIONS = const ['1024x600',
17+
'1280x800',
18+
'1366x768',
19+
'1440x900',
20+
'1600x900',
21+
'1680x1050',
22+
'1920x1080',
23+
'1920x1200',
24+
'2560x1440',
25+
'2560x1600'];
26+
27+
final Scope scope;
28+
final NgForm form;
29+
final List colors = [];
30+
final List formattedColors = [];
31+
32+
FormCtrl(this.scope, this.form) {
33+
newColor(_COLOR_HEX, '#222');
34+
newColor(_COLOR_HEX, '#444');
35+
newColor(_COLOR_HEX, '#000');
36+
}
37+
38+
List<String> get colorTypes => _COLOR_TYPES;
39+
40+
List<String> get resolutions => _RESOLUTIONS;
41+
42+
void submit() {
43+
form.reset();
44+
}
45+
46+
int getTotalSquaresFromInput() => getTotalSquares(scope.context['squares']);
47+
48+
int getTotalSquares(inputValue) {
49+
var value = 4;
50+
if(inputValue != null) {
51+
try {
52+
value = double.parse(inputValue.toString());
53+
} catch(e) {
54+
}
55+
}
56+
return (value * value).toInt();
57+
}
58+
59+
List<String> formatColors() {
60+
formattedColors.clear();
61+
colors.forEach((color) {
62+
var value = null;
63+
switch(color['type']) {
64+
case _COLOR_HEX:
65+
value = color['hex'];
66+
break;
67+
case _COLOR_HSL:
68+
var hue = color['hue'];
69+
var saturation = color['saturation'];
70+
var luminance = color['luminance'];
71+
if(hue != null && saturation != null && luminance != null) {
72+
value = "hsl($hue, $saturation%, $luminance%)";
73+
}
74+
break;
75+
case _COLOR_RGB:
76+
var red = color['red'];
77+
var blue = color['blue'];
78+
var green = color['green'];
79+
if(red != null && green != null && blue != null) {
80+
value = "rgb($red, $green, $blue)";
81+
}
82+
break;
83+
default: //COLOR_NAME
84+
value = color['name'];
85+
break;
86+
}
87+
if(value != null) {
88+
formattedColors.add(value);
89+
}
90+
});
91+
return formattedColors;
92+
}
93+
94+
void newColor([String type = _COLOR_HEX, String color]) {
95+
colors.add({
96+
'id' : colors.length,
97+
'type' : type,
98+
'hex' : type == _COLOR_HEX ? color : '',
99+
'hue' : '',
100+
'saturation' : '',
101+
'luminance' : '',
102+
'red' : '',
103+
'green' : '',
104+
'blue': '',
105+
'name': ''
106+
});
107+
}
108+
}
109+
110+
@Decorator(
111+
selector: '[preview-controller]'
112+
)
113+
class PreviewCtrl {
114+
PreviewCtrl(Scope scope) {
115+
scope.context['preview'] = this;
116+
}
117+
118+
List _collection = [];
119+
120+
List expandList(items, limit) {
121+
_collection.clear();
122+
if(items != null && items.length > 0) {
123+
for (var i = 0; i < limit; i++) {
124+
var x = i % items.length;
125+
_collection.add(items[x]);
126+
}
127+
}
128+
return _collection;
129+
}
130+
}
131+

0 commit comments

Comments
 (0)