experiments/cellular-automata
1
0
Fork 0
Code Issues 29 Pull requests Projects Releases Wiki Activity

Implement Canvas as Angular Component

Browse source
This commit is contained in:
Marty Oehme 2018-07-07 16:44:27 +02:00
parent 827ab83b88
commit 3780e61453
2 changed files with 25 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
lib/app_component.dart
View file

@ -1,11 +1,14 @@
import 'package:angular/angular.dart';
import 'dart:html' as html;
import 'package:rules_of_living/src/App.dart';
@Component(
selector: 'my-app',
template: '''
<h1>Hello {{name}}</h1>
<h1>Cellular Automata - The Rules of Life</h1>
<div id="output">
<canvas id="canvas"></canvas>
<canvas #caCanvas width="500" height="500"></canvas>
</div>
<div id="controls">
<button id="run">Run</button>
@ -16,6 +19,24 @@ import 'package:angular/angular.dart';
</div>
''',
)
class AppComponent {
var name = 'Darth Marty';
class AppComponent implements OnInit {
var name = "World";
App engine;
@ViewChild("caCanvas")
html.CanvasElement canvas;
@override
void ngOnInit() {
canvas.context2D.setFillColorRgb(255, 0, 0);
canvas.context2D.fillRect(0, 0, 200, 150);
engine = new App(canvas);
html.window.animationFrame.then(animFrame);
}
void animFrame(num now) {
engine.process(now);
html.window.animationFrame.then(animFrame);
}
}

16
web/main.dart
View file

@ -1,23 +1,7 @@
import 'dart:html' as html;
import 'package:rules_of_living/App.dart';
import 'package:angular/angular.dart';
import 'package:rules_of_living/app_component.template.dart' as ng;
html.CanvasElement el;
App engine;
void main() {
runApp(ng.AppComponentNgFactory);
el = new html.CanvasElement(width: 500, height: 500);
html.querySelector('#output').append(el);
engine = new App(el);
html.window.animationFrame.then(animFrame);
}
void animFrame(num now) {
engine.process(now);
html.window.animationFrame.then(animFrame);
}