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")
@@ -17,7 +44,7 @@ var trafficLightLeft = TrafficLight(v(228.0, 109.0), "left", "green")
 var trafficLightRight = TrafficLight(v(55.0, 145.0), "right", "green")
 
 
-fun main(args : Array<String>) {
+fun main(args: Array<String>) {
     state.addShape(Map(v(10.0, 10.0)))
 
     state.addShape(trafficLightLeft)
@@ -34,9 +61,9 @@ fun main(args : Array<String>) {
     state.addShape(Button(PATH_TO_IMAGES + "ud.png", v(455.0, 120.0), v(50.0, 120.0)))
 }
 
-fun v(x : Double, y : Double) = Vector(x, y)
+fun v(x: Double, y: Double) = Vector(x, y)
 
-class Image(val src : String, override var pos : Vector, var imageSize : Vector) : Shape() {
+class Image(val src: String, override var pos: Vector, var imageSize: Vector): Shape() {
     override fun draw() {
         state.context.drawImage(getImage(src), 0, 0,
                 imageSize.x.toInt(), imageSize.y.toInt(),
@@ -44,10 +71,10 @@ class Image(val src : String, override var pos : Vector, var imageSize : Vector)
                 imageSize.x.toInt(), imageSize.y.toInt())
     }
 
-  fun contains(mousePos : Vector) : Boolean = mousePos.isInRect(pos, imageSize)
+    fun contains(mousePos: Vector): Boolean = mousePos.isInRect(pos, imageSize)
 }
 
-class Button(val src : String, override var pos : Vector, var imageSize : Vector) : Shape() {
+class Button(val src: String, override var pos: Vector, var imageSize: Vector): Shape() {
     var isMouseOver = false
     var isMouseDown = false
 
@@ -76,23 +103,23 @@ 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)
     }
 
 
-  fun contains(mousePos : Vector) : Boolean = mousePos.isInRect(pos, imageSize)
+    fun contains(mousePos: Vector): Boolean = mousePos.isInRect(pos, imageSize)
 }
 
-class Border() : Shape() {
+class Border(): Shape() {
     override var pos = Vector(4.0, 4.0);
 
     override fun draw() {
@@ -108,8 +135,8 @@ class Border() : Shape() {
 
 }
 
-class Timer(override var pos : Vector) : Shape() {
+class Timer(override var pos: Vector): Shape() {
-  var timeLeftForChangeColor : Char = 'c'
+    var timeLeftForChangeColor: Char = 'c'
     var timeStartLastChangeColor = Date().getTime();
     var timerLength = 13
 
@@ -128,7 +155,7 @@ class Timer(override var pos : Vector) : Shape() {
 
 //Colors constants
 class Colors() {
-  val black : String = "#000000"
+    val black: String = "#000000"
     val white = "#FFFFFF"
     val grey = "#C0C0C0"
     val red = "#EF4137"
@@ -136,7 +163,7 @@ class Colors() {
     val green = "#0E9648"
 }
 
-class TrafficLight(override var pos : Vector, val direction : String, val startColor : String) : Shape() {
+class TrafficLight(override var pos: Vector, val direction: String, val startColor: String): Shape() {
     val list = ArrayList<TrafficLightItem>()
     var size = Vector(27.0, 34.0);
     var timer = Timer(Vector(pos.x + 6, pos.y + 12))
@@ -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,26 +221,26 @@ 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)
         }, 2000)
     }
 
-  fun canMove() : Boolean {
+    fun canMove(): Boolean {
         return (currentColor != "red" && currentColor != "yellow")
     }
 }
 
 
 //One element from Traffic light
-class TrafficLightItem(override var pos : Vector, val imageSrc : String) : Shape() {
+class TrafficLightItem(override var pos: Vector, val imageSrc: String): Shape() {
-  val relSize : Double = 0.5
+    val relSize: Double = 0.5
     val imageSize = v(33.0, 33.0)
-  var size : Vector = imageSize * relSize
+    var size: Vector = imageSize * relSize
 
     var isFlashing = (imageSrc == PATH_TO_IMAGES + "green_color_flash.png")
     var isFlashNow = false
@@ -251,7 +278,7 @@ class TrafficLightItem(override var pos : Vector, val imageSrc : String) : Shape
 }
 
 
-class Car(override var pos : Vector, val direction : String, val color : String) : Shape() {
+class Car(override var pos: Vector, val direction: String, val color: String): Shape() {
     val imageSize = v(25.0, 59.0)
     var speed = getRandomArbitary(2, 10);
 
@@ -281,7 +308,7 @@ class Car(override var pos : Vector, val direction : String, val color : String)
 
     }
 
-  fun isNearStopLine() : Boolean {
+    fun isNearStopLine(): Boolean {
         when (direction) {
             "up" ->  return (pos.y > 198 && pos.y < 208)
             "down" -> return (pos.y > 10 && pos.y < 20)
@@ -309,10 +336,10 @@ class Car(override var pos : Vector, val direction : String, val color : String)
     }
 }
 
-class Map(override var pos : Vector) : Shape() {
+class Map(override var pos: Vector): Shape() {
-  val relSize : Double = 0.8
+    val relSize: Double = 0.8
     val imageSize = v(420.0, 323.0)
-  var size : Vector = imageSize * relSize
+    var size: Vector = imageSize * relSize
 
     override fun draw() {
         size = imageSize * relSize
@@ -324,17 +351,17 @@ 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
+    val size: Vector
         get() = v(width, height)
 
-  fun addShape(shape : Shape) {
+    fun addShape(shape: Shape) {
         shapes.add(shape)
     }
 
@@ -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 {
+
+    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) {
@@ -417,11 +444,11 @@ class CanvasState(val canvas : Canvas) {
 }
 
 abstract class Shape() {
-  abstract var pos : Vector
+    abstract var pos: Vector
     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()
@@ -440,27 +467,27 @@ abstract class Shape() {
 
 }
 
-class Vector(val x : Double = 0.0, val y : Double = 0.0) {
+class Vector(val x: Double = 0.0, val y: Double = 0.0) {
-  fun plus(v : Vector) = v(x + v.x, y + v.y)
+    fun plus(v: Vector) = v(x + v.x, y + v.y)
     fun minus() = v(- x, - y)
-  fun minus(v : Vector) = v(x - v.x, y - v.y)
+    fun minus(v: Vector) = v(x - v.x, y - v.y)
-  fun times(koef : Double) = v(x * koef, y * koef)
+    fun times(koef: Double) = v(x * koef, y * koef)
-  fun distanceTo(v : Vector) = Math.sqrt((this - v).sqr)
+    fun distanceTo(v: Vector) = Math.sqrt((this - v).sqr)
-  fun rotatedBy(theta : Double) : Vector {
+    fun rotatedBy(theta: Double): Vector {
         val sin = Math.sin(theta)
         val cos = Math.cos(theta)
         return v(x * cos - y * sin, x * sin + y * cos)
     }
 
-  fun isInRect(topLeft : Vector, size : Vector) = (x >= topLeft.x) && (x <= topLeft.x + size.x) &&
+    fun isInRect(topLeft: Vector, size: Vector) = (x >= topLeft.x) && (x <= topLeft.x + size.x) &&
     (y >= topLeft.y) && (y <= topLeft.y + size.y)
 
-  val sqr : Double
+    val sqr: Double
         get() = x * x + y * y
-  val normalized : Vector
+    val normalized: Vector
         get() = this * (1.0 / Math.sqrt(sqr))
 }
 
-fun getRandomArbitary(val min : Int, val max : Int) : Double {
+fun getRandomArbitary(val min: Int, val max: Int): Double {
     return Math.random() * (max - min) + min;
 }