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