drop interval/timeout funs. Modify traffic light example

js/js.libraries/src/core/core.kt

@@ -28,12 +28,3 @@ library
 open class RuntimeException() : Exception() {}
 library
 class NumberFormatException() : Exception() {}
-
-native
-fun setTimeout(callback : ()-> Unit) {}
-native
-fun setTimeout(callback : ()-> Unit, ms : Int) {}
-native
-fun setInterval(callback : ()-> Unit, ms : Int) {}
-native
-fun setInterval(callback : ()-> Unit) {}

js/js.tests/test/org/jetbrains/k2js/test/semantics/WebDemoCanvasExamplesTest.java

@@ -40,11 +40,11 @@ public final class WebDemoCanvasExamplesTest extends SingleFileTranslationTest {
     }
 
     public void testCreatures() throws Exception {
-        doTest("Creatures.kt", "document");
+        doTest("Creatures.kt", "$");
     }
 
     public void testHelloKotlin() throws Exception {
-        doTest("Hello, Kotlin.kt", "document");
+        doTest("Hello, Kotlin.kt", "$");
     }
 
     public void testFancyLines() throws Exception {
@@ -52,7 +52,7 @@ public final class WebDemoCanvasExamplesTest extends SingleFileTranslationTest {
     }
 
     public void testTrafficLight() throws Exception {
-        doTest("Traffic light.kt", "document");
+        doTest("Traffic light.kt", "window");
     }
 
     private void doTest(@NotNull String filename, @NotNull String firstUnknownSymbolEncountered) throws Exception {

js/js.translator/testFiles/webDemoCanvasExamples/cases/Creatures.kt

@@ -74,6 +74,7 @@ class Logo(override var pos: Vector): Shape()
 
     fun drawLogo(state: CanvasState) {
         size = imageSize * (state.size.x / imageSize.x) * relSize
+        // getKotlinLogo() is a 'magic' function here defined only for purposes of demonstration but in fact it just find an element containing the logo
         state.context.drawImage(getImage("http://kotlin-demo.jetbrains.com/static/images/kotlinlogowobackground.png"), 0, 0,
                 imageSize.x.toInt(), imageSize.y.toInt(),
                 position.x.toInt(), position.y.toInt(),
@@ -245,7 +246,7 @@ class CanvasState(val canvas: HTMLCanvasElement) {
             valid = false
         }
 
-        setInterval({
+        window.setInterval({
             draw()
         }, interval)
     }
@@ -339,9 +340,9 @@ fun main(args: Array<String>) {
         state.addShape(Kotlin)
         state.addShape(Creature(state.size * 0.25, state))
         state.addShape(Creature(state.size * 0.75, state))
-        setTimeout({
+        window.setTimeout({
             state.valid = false
-        })
+        }, 1000)
     }
 }
 

js/js.translator/testFiles/webDemoCanvasExamples/cases/Fancy lines.kt

@@ -29,15 +29,15 @@ class FancyLines() {
     var hue = 0;
 
     fun line() {
-        context.save()
+        context.save();
 
-        context.beginPath()
+        context.beginPath();
 
-        context.lineWidth = 20.0 * Math.random()
+        context.lineWidth = 20.0 * Math.random();
         context.moveTo(x.toInt(), y.toInt());
 
         x = width * Math.random();
-        y = height * Math.random()
+        y = height * Math.random();
 
         context.bezierCurveTo(width * Math.random(), height * Math.random(),
                 width * Math.random(), height * Math.random(), x, y);
@@ -60,7 +60,7 @@ class FancyLines() {
     }
 
     fun run() {
-        setInterval({line()}, 40);
+        window.setInterval({line()}, 40);
-        setInterval({blank()}, 100);
+        window.setInterval({blank()}, 100);
     }
 }

js/js.translator/testFiles/webDemoCanvasExamples/cases/Hello, Kotlin.kt

@@ -98,7 +98,7 @@ fun main(args: Array<String>) {
             HelloKotlin()
         }
 
-        setInterval({
+        window.setInterval({
             renderBackground()
             for (logo in logos) {
                 logo.draw()

js/js.translator/testFiles/webDemoCanvasExamples/cases/Traffic light.kt

@@ -1,15 +1,42 @@
-import jquery.*
+package traffic
-import html5.*
+
 import java.util.ArrayList
-import js.setInterval
+import js.dom.html5.CanvasContext
-import js.DomElement
+import js.dom.html5.HTMLCanvasElement
-import js.setTimeout
-import js.*;
 
-val PATH_TO_IMAGES = "/static/images/canvas/"
+import js.dom.html.HTMLImageElement
+import js.dom.html.window
+import js.jquery.*
+import js.dom.html.HTMLElement
 
-val state = CanvasState(getCanvas())
+fun getImage(path: String): HTMLImageElement {
-val colors = Colors()
+    val image = window.document.createElement("img") as HTMLImageElement
+    image.src = path
+    return image
+}
+
+val canvas: HTMLCanvasElement
+    get() {
+        return window.document.getElementsByTagName("canvas").item(0)!! as HTMLCanvasElement
+    }
+
+val context: CanvasContext
+    get() {
+        return canvas.getContext("2d")!!
+    }
+
+
+val PATH_TO_IMAGES = "http://kotlin-demo.jetbrains.com/static/images/canvas/"
+
+val state: CanvasState
+    get() {
+        return CanvasState(canvas)
+    }
+
+val colors: Colors
+    get() {
+        return Colors()
+    }
 
 var trafficLightUp = TrafficLight(v(180.0, 181.0), "up", "red")
 var trafficLightDown = TrafficLight(v(100.0, 77.0), "down", "red")
@@ -76,14 +103,14 @@ class Button(val src : String, override var pos : Vector, var imageSize : Vector
 
     fun mouseClick() {
         isMouseDown = true
-    setTimeout({
+        window.setTimeout({
             isMouseDown = false
         }, 1000)
     }
 
     fun mouseOver() {
         isMouseOver = true
-    setTimeout({
+        window.setTimeout({
             isMouseOver = false
         }, 1000)
     }
@@ -184,7 +211,7 @@ class TrafficLight(override var pos : Vector, val direction : String, val startC
     fun changeColorForward() {
         changeColorForward = false
         currentColor = "yellow"
-    setTimeout({
+        window.setTimeout({
             if (!isForceColorChange) timer.resetTimer() else isForceColorChange = false
             currentColor = "green"
         }, 3000)
@@ -194,9 +221,9 @@ class TrafficLight(override var pos : Vector, val direction : String, val startC
     fun changeColorBackward() {
         changeColorForward = true
         currentColor = "green_flash"
-    setTimeout({
+        window.setTimeout({
             currentColor = "yellow"
-      setTimeout({
+            window.setTimeout({
                 if (!isForceColorChange) timer.resetTimer() else isForceColorChange = false
                 currentColor = "red"
             }, 1000)
@@ -324,12 +351,12 @@ class Map(override var pos : Vector) : Shape() {
 }
 
 
-class CanvasState(val canvas : Canvas) {
+class CanvasState(val canvas: HTMLCanvasElement) {
-  val context = getContext()
+    val context = traffic.context
     var shapes = ArrayList<Shape>()
 
-  var width = canvas.width.toDouble()
+    var width = canvas.width
-  var height = canvas.height.toDouble()
+    var height = canvas.height
 
     val size: Vector
         get() = v(width, height)
@@ -378,11 +405,11 @@ class CanvasState(val canvas : Canvas) {
             }
         }
 
-    setInterval({
+        window.setInterval({
             draw()
         }, 1000 / 30)
 
-    setInterval({
+        window.setInterval({
             trafficLightUp.changeColor()
             trafficLightLeft.changeColor()
             trafficLightRight.changeColor()
@@ -392,17 +419,17 @@ class CanvasState(val canvas : Canvas) {
 
     }
 
+
     fun mousePos(e: MouseEvent): Vector {
         var offset = Vector()
-    var element : DomElement? = canvas
+        var element: HTMLElement? = canvas
         while (element != null) {
-      val el : DomElement = element.sure()
+            val el: HTMLElement = element.sure()
             offset += Vector(el.offsetLeft, el.offsetTop)
             element = el.offsetParent
         }
-    return v(e.pageX, e.pageY) - offset
+        return Vector(e.pageX, e.pageY) - offset
     }
-
     fun draw() {
         clear()
         for (shape in shapes) {
@@ -421,7 +448,7 @@ abstract class Shape() {
     abstract fun draw()
 
     // a couple of helper extension methods we'll be using in the derived classes
-  fun Context.shadowed(shadowOffset : Vector, alpha : Double, render : Context.() -> Unit) {
+    fun CanvasContext.shadowed(shadowOffset: Vector, alpha: Double, render: CanvasContext.() -> Unit) {
         save()
         shadowColor = "rgba(100, 100, 100, $alpha)"
         shadowBlur = 5.0
@@ -431,7 +458,7 @@ abstract class Shape() {
         restore()
     }
 
-  fun Context.fillPath(constructPath : Context.() -> Unit) {
+    fun CanvasContext.fillPath(constructPath: CanvasContext.() -> Unit) {
         beginPath()
         constructPath()
         closePath()