OLD | NEW |
1 #!mojo mojo:sky_viewer | 1 #!mojo mojo:sky_viewer |
2 <sky> | 2 <sky> |
3 <import src="fps-counter.sky" /> | |
4 <style> | 3 <style> |
5 dot { | 4 dot { |
6 position: absolute; | 5 position: absolute; |
7 height: 100px; | 6 height: 100px; |
8 width: 100px; | 7 width: 100px; |
9 background-color: #00FF00; | 8 background-color: #00FF00; |
10 } | 9 } |
11 </style> | 10 </style> |
12 <dot /> | 11 <dot /> |
13 <log>Ready</log> | 12 <log>Ready</log> |
14 <fps-counter /> | |
15 <script> | 13 <script> |
16 var dot = document.querySelector("dot"); | 14 import "dart:sky"; |
17 var log = document.querySelector("log"); | |
18 | 15 |
19 function logPointerEvent(evt) { | 16 final Element dot = document.querySelector("dot"); |
20 var message = "type=" + event.type; | |
21 var x = evt.x.toFixed(2); | |
22 var y = evt.y.toFixed(2); | |
23 message += " x=" + x + " y=" + y; | |
24 | 17 |
25 var transform = "translate(" + (x - 50) + "px," + (y - 50) + "px)"; | 18 void moveDot(event) { |
26 dot.style.transform = transform; | 19 double x = event.x; |
27 log.textContent = message; | 20 double y = event.y; |
| 21 |
| 22 dot.style.setProperty("transform", "translate(${x-50}px,${y-50}px)"); |
28 } | 23 } |
29 | 24 |
30 document.documentElement.addEventListener("pointerdown", logPointerEvent); | 25 void main() { |
31 document.documentElement.addEventListener("pointermove", logPointerEvent); | 26 document.addEventListener("pointerdown", moveDot); |
32 document.documentElement.addEventListener("pointerup", logPointerEvent); | 27 document.addEventListener("pointermove", moveDot); |
33 document.documentElement.addEventListener("pointercancel", logPointerEvent); | 28 document.addEventListener("pointerup", moveDot); |
| 29 document.addEventListener("pointercancel", moveDot); |
| 30 } |
34 </script> | 31 </script> |
35 </sky> | 32 </sky> |
OLD | NEW |