Skip to content

[WIP] new scope #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

[WIP] new scope #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2fa13ce
style: code cleanup
vicb Feb 12, 2014
0cd022f
fix(balls): ball number can not go below 0
vicb Feb 12, 2014
78d32e2
refactor(collection items): Collection items indexes are int
vicb Feb 12, 2014
57cf334
test(change detector): re-add a previously failing test
vicb Feb 12, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 36 additions & 27 deletions demo/bouncing_balls/bouncy_balls.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class BallModel {

static _color() {
var color = '#';
for(var i=0; i < 6; i++) {
for(var i = 0; i < 6; i++) {
color += (16 * random.nextDouble()).floor().toRadixString(16);
}
return color;
Expand All @@ -27,70 +27,80 @@ class BallModel {

@NgController(
selector: '[bounce-controller]',
publishAs: 'bounce'
)
publishAs: 'bounce')
class BounceController {
var lastTime = window.performance.now();
var run = true;
var fps = 0;
var digestTime = 0;
var currentDigestTime = 0;
var balls = [];
var zone;
var scope;
final NgZone zone;
final Scope scope;
var ballClassName = 'ball';

BounceController(NgZone this.zone, Scope this.scope) {
BounceController(this.zone, this.scope) {
changeCount(100);
tick();
}

toggleCSS() {
void toggleCSS() {
ballClassName = ballClassName == '' ? 'ball' : '';
}

playPause() {
void playPause() {
run = !run;
if (run) requestAnimationFrame(tick);
}

requestAnimationFrame(fn) {
void requestAnimationFrame(fn) {
window.requestAnimationFrame((_) => zone.run(fn));
}

changeCount(count) {
void changeCount(count) {
while(count > 0) {
balls.add(new BallModel());
count--;
}
while(count < 0) {
while(count < 0 && balls.isNotEmpty) {
balls.removeAt(0);
count++;
}
tick();
}

timeDigest() {
void timeDigest() {
var start = window.performance.now();
digestTime = currentDigestTime;
scope.rootScope.domRead(() {
currentDigestTime = (window.performance.now() - start).round();
});
}

tick() {
var now = window.performance.now(),
delay = now - lastTime;
void tick() {
var now = window.performance.now();
var delay = now - lastTime;

fps = (1000/delay).round();
for(var i=0, ii=balls.length; i<ii; i++) {
var b = balls[i];
b.x += delay * b.velX;
b.y += delay * b.velY;
if (b.x < 0) { b.x *= -1; b.velX *= -1; }
if (b.y < 0) { b.y *= -1; b.velY *= -1; }
if (b.x > width) { b.x = 2*width - b.x; b.velX *= -1; }
if (b.y > height) { b.y = 2*height - b.y; b.velY *= -1; }
if (b.x < 0) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may not be the right style, but I find the original code way easier to read.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're talking about the extra else... it's no more equivalent but it is now symmetric.

If you're talking about all on the same line vs separated lines, we should have Dart specific CCs if we go this way otherwise anyone could use his own and the result will be messy. For now I try to apply Dart CCs.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am of the opinion that we should follow the guidelines, unless they get
in the way of readability. In this case having things in one line makes it
very easy to see that b.x and b.y logic is same just y replaced with x. If
you do proper style, you loose that benefit. So on occasions I do break the
rule.

On Thu, Feb 13, 2014 at 9:24 AM, Victor Berchet notifications@github.comwrote:

In demo/bouncing_balls/bouncy_balls.dart:

 fps = (1000/delay).round();
 for(var i=0, ii=balls.length; i<ii; i++) {
   var b = balls[i];
   b.x += delay * b.velX;
   b.y += delay * b.velY;

  •  if (b.x < 0) { b.x *= -1; b.velX *= -1; }

  •  if (b.y < 0) { b.y *= -1; b.velY *= -1; }

  •  if (b.x > width) { b.x = 2*width - b.x; b.velX *= -1; }

  •  if (b.y > height) { b.y = 2*height - b.y; b.velY *= -1; }

  •  if (b.x < 0) {

If you're talking about the extra else... it's no more equivalent but it
is now symmetric.

If you're talking about all on the same line vs separated lines, we should
have Dart specific CCs if we go this way otherwise anyone could use his own
and the result will be messy. For now I try to apply Dart CCs.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/6/files#r9717945
.

b.x *= -1;
b.velX *= -1;
} else if (b.x > width) {
b.x = 2*width - b.x;
b.velX *= -1;
}

if (b.y < 0) {
b.y *= -1;
b.velY *= -1;
} else if (b.y > height) {
b.y = 2*height - b.y;
b.velY *= -1;
}
}
lastTime = now;
timeDigest();
Expand All @@ -101,18 +111,17 @@ class BounceController {
@NgDirective(
selector: '[ball-position]',
map: const {
"ballPosition": '=>position'
}
)
"ballPosition": '=>position'})
class BallPositionDirective {
Element element;
Scope scope;
BallPositionDirective(Element this.element, Scope this.scope);
final Element element;
final Scope scope;
BallPositionDirective(this.element, this.scope);

set position(BallModel model) {
element.style.backgroundColor = model.color;
scope.observe('x', (x, _) => element.style.left = '${x + 10}px', context:model);
scope.observe('y', (y, _) => element.style.top = '${y + 10}px', context:model);
scope
..observe('x', (x, _) => element.style.left = '${x + 10}px', context: model)
..observe('y', (y, _) => element.style.top = '${y + 10}px', context: model);
}
}

Expand Down
4 changes: 3 additions & 1 deletion demo/bouncing_balls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@
</div>

<div>
<div class="fps-bar"><div class="fps" ng-style-width="bounce.fps*4 + 'px'"></div></div>
<div class="fps-bar">
<div class="fps" ng-style-width="bounce.fps*4 + 'px'"></div>
</div>
</div>

{{bounce.fps}} fps. ({{bounce.balls.length}} balls) [{{(1000/bounce.fps).round()}} ms] <br>
Expand Down
3 changes: 1 addition & 2 deletions demo/helloworld/helloworld.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ import 'dart:mirrors';

@NgController(
selector: '[hello-world-controller]',
publishAs: 'ctrl'
)
publishAs: 'ctrl')
class HelloWorldController {
String name = "world";
}
Expand Down
43 changes: 21 additions & 22 deletions demo/todo/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,32 @@
</head>
<body ng-app>

<div ng-hide="true" class="border well loading">Wait, Dart is loading this awesome app...</div>
<div ng-hide="true" class="border well loading">Wait, Dart is loading this awesome app...</div>

<div todo-controller class="border well" ng-cloak>
<h2>Things To Do ;-)</h2>
<div todo-controller class="border well" ng-cloak>
<h2>Things To Do ;-)</h2>

<div class="right">
<button ng-click="todo.markAllDone()" class="btn btn-small">mark all done</button>
<button ng-click="todo.archiveDone()" class="btn btn-small">archive done</button>
</div>

<p>Remaining <b>{{todo.remaining()}}</b> of <b>{{todo.items.length}}</b> items.</p>
<div class="right">
<button ng-click="todo.markAllDone()" class="btn btn-small">mark all done</button>
<button ng-click="todo.archiveDone()" class="btn btn-small">archive done</button>
</div>

<p>Remaining <b>{{todo.remaining()}}</b> of <b>{{todo.items.length}}</b> items.</p>

<ul class="well unstyled">
<li ng-repeat="item in todo.items" ng-class="todo.classFor(item)">
<label class="checkbox">
<input type="checkbox" ng-model="item.done"> {{item.text}}
</label>
</li>
</ul>

<form class="form-inline" onsubmit="return false;">
<input type="text" ng-model="todo.newItem.text">
<button ng-click="todo.add()" ng-disabled="todo.newItem.isEmpty" class="btn btn-primary">add</button>
<button ng-click="todo.newItem.clear()" ng-disabled="todo.newItem.isEmpty" class="btn">clear</button>
</form>
<ul class="well unstyled">
<li ng-repeat="item in todo.items" ng-class="todo.classFor(item)">
<label class="checkbox">
<input type="checkbox" ng-model="item.done"> {{item.text}}
</label>
</li>
</ul>

</div>
<form class="form-inline" onsubmit="return false;">
<input type="text" ng-model="todo.newItem.text">
<button ng-click="todo.add()" ng-disabled="todo.newItem.isEmpty" class="btn btn-primary">add</button>
<button ng-click="todo.newItem.clear()" ng-disabled="todo.newItem.isEmpty" class="btn">clear</button>
</form>
</div>
</body>
</html>
6 changes: 3 additions & 3 deletions demo/todo/web/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ main() {

print(window.location.search);
var module = new Module()
..type(TodoController)
..type(PlaybackHttpBackendConfig);
..type(TodoController)
..type(PlaybackHttpBackendConfig);

// If these is a query in the URL, use the server-backed
// TodoController. Otherwise, use the stored-data controller.
Expand All @@ -39,5 +39,5 @@ main() {
module.type(HttpBackend, implementedBy: PlaybackHttpBackend);
}

ngBootstrap(module:module);
ngBootstrap(module: module);
}
34 changes: 12 additions & 22 deletions demo/todo/web/todo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ class Item {
String text;
bool done;

Item([String this.text = '', bool this.done = false]);
Item([this.text = '', this.done = false]);

bool get isEmpty => text.isEmpty;

clone() => new Item(text, done);
Item clone() => new Item(text, done);

clear() {
void clear() {
text = '';
done = false;
}
Expand Down Expand Up @@ -50,11 +50,10 @@ class HttpServerController implements ServerController {


@NgController(
selector: '[todo-controller]',
publishAs: 'todo'
)
selector: '[todo-controller]',
publishAs: 'todo')
class TodoController {
List<Item> items;
var items = <Item>[];
Item newItem;

TodoController(ServerController serverController) {
Expand All @@ -69,33 +68,24 @@ class TodoController {
}

// workaround for https://github.com/angular/angular.dart/issues/37
dynamic operator [](String key) {
if (key == 'newItem') {
return newItem;
}
return null;
}
dynamic operator [](String key) => key == 'newItem' ? newItem : null;

add() {
void add() {
if (newItem.isEmpty) return;

items.add(newItem.clone());
newItem.clear();
}

markAllDone() {
void markAllDone() {
items.forEach((item) => item.done = true);
}

archiveDone() {
void archiveDone() {
items.removeWhere((item) => item.done);
}

String classFor(Item item) {
return item.done ? 'done' : '';
}
String classFor(Item item) => item.done ? 'done' : '';

int remaining() {
return items.where((item) => !item.done).length;
}
int remaining() => items.fold(0, (count, item) => count += item.done ? 0 : 1);
}
14 changes: 7 additions & 7 deletions lib/change_detection/ast.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ abstract class AST {
assert(expression!=null);
}
WatchRecord<_Handler> setupWatch(WatchGroup watchGroup);
toString() => expression;
String toString() => expression;
}

/**
Expand Down Expand Up @@ -59,9 +59,9 @@ class FieldReadAST extends AST {
final String name;

FieldReadAST(lhs, name)
: super('$lhs.$name'),
lhs = lhs,
name = name;
: lhs = lhs,
name = name,
super('$lhs.$name');

WatchRecord<_Handler> setupWatch(WatchGroup watchGroup) =>
watchGroup.addFieldWatch(lhs, name, expression);
Expand Down Expand Up @@ -111,14 +111,14 @@ class MethodAST extends AST {
class CollectionAST extends AST {
final AST valueAST;
CollectionAST(valueAST)
: super('#collection($valueAST)'),
valueAST = valueAST;
: valueAST = valueAST,
super('#collection($valueAST)');

WatchRecord<_Handler> setupWatch(WatchGroup watchGroup) =>
watchGroup.addCollectionWatch(valueAST);
}

_argList(List<AST> items) => items.join(', ');
String _argList(List<AST> items) => items.join(', ');

/**
* The name is a bit oxymoron, but it is essentially the NullObject pattern.
Expand Down
Loading