| 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 |