Port touch-demo.sky to Dart and make it work in SkyShell

sky/examples/touch-demo.sky

Index: sky/examples/touch-demo.sky
diff --git a/sky/examples/touch-demo.sky b/sky/examples/touch-demo.sky
index 78b86d20b15838200319a912b9626b836d8ea023..2afefd757771ce2cdb336abce339dff534e78814 100644
--- a/sky/examples/touch-demo.sky
+++ b/sky/examples/touch-demo.sky
@@ -1,6 +1,5 @@
 #!mojo mojo:sky_viewer
 <sky>
-<import src="fps-counter.sky" />
 <style>
 dot {
     position: absolute;
@@ -11,25 +10,23 @@ dot {
 </style>
 <dot />
 <log>Ready</log>
-<fps-counter />
 <script>
-var dot = document.querySelector("dot");
-var log = document.querySelector("log");
+import "dart:sky";
 
-function logPointerEvent(evt) {
-  var message = "type=" + event.type;
-  var x = evt.x.toFixed(2);
-  var y = evt.y.toFixed(2);
-  message += " x=" + x + " y=" + y;
+final Element dot = document.querySelector("dot");
 
-  var transform = "translate(" + (x - 50)  + "px," + (y - 50) + "px)";
-  dot.style.transform = transform;
-  log.textContent = message;
+void moveDot(event) {
+  double x = event.x;
+  double y = event.y;
+
+  dot.style.setProperty("transform", "translate(${x-50}px,${y-50}px)");
 }
 
-document.documentElement.addEventListener("pointerdown", logPointerEvent);
-document.documentElement.addEventListener("pointermove", logPointerEvent);
-document.documentElement.addEventListener("pointerup", logPointerEvent);
-document.documentElement.addEventListener("pointercancel", logPointerEvent);
+void main() {
+  document.addEventListener("pointerdown", moveDot);
+  document.addEventListener("pointermove", moveDot);
+  document.addEventListener("pointerup", moveDot);
+  document.addEventListener("pointercancel", moveDot);
+}
 </script>
 </sky>