diff options
| -rw-r--r-- | src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt | 91 | ||||
| -rw-r--r-- | src/test/kotlin/test/pl/treksoft/kvision/html/CanvasSpec.kt | 47 |
2 files changed, 138 insertions, 0 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt b/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt new file mode 100644 index 00000000..450042a2 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt @@ -0,0 +1,91 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package pl.treksoft.kvision.html + +import com.github.snabbdom.VNode +import org.w3c.dom.CanvasRenderingContext2D +import org.w3c.dom.HTMLCanvasElement +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.StringPair +import pl.treksoft.kvision.core.Widget + +/** + * Canvas component. + * + * @constructor + * @param canvasWidth the width of the canvas + * @param canvasHeight the height of the canvas + * @param classes a set of CSS class names + */ +open class Canvas( + canvasWidth: Int? = null, canvasHeight: Int? = null, classes: Set<String> = setOf() +) : Widget(classes) { + /** + * The width of the canvas. + */ + var canvasWidth by refreshOnUpdate(canvasWidth) + /** + * The height of the canvas. + */ + var canvasHeight by refreshOnUpdate(canvasHeight) + + /** + * The canvas rendering context. + */ + lateinit var context2D: CanvasRenderingContext2D + + override fun render(): VNode { + return render("canvas") + } + + override fun getSnAttrs(): List<StringPair> { + val pr = super.getSnAttrs().toMutableList() + canvasWidth?.let { + pr.add("width" to it.toString()) + } + canvasHeight?.let { + pr.add("height" to it.toString()) + } + return pr + } + + override fun afterInsert(node: VNode) { + context2D = (node.elm as HTMLCanvasElement).getContext("2d") as CanvasRenderingContext2D + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Container.canvas( + canvasWidth: Int? = null, canvasHeight: Int? = null, classes: Set<String> = setOf(), + init: (Canvas.() -> Unit)? = null + ): Canvas { + val canvas = + Canvas(canvasWidth, canvasHeight, classes).apply { init?.invoke(this) } + this.add(canvas) + return canvas + } + } +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/CanvasSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/CanvasSpec.kt new file mode 100644 index 00000000..a896d9e5 --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/html/CanvasSpec.kt @@ -0,0 +1,47 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package test.pl.treksoft.kvision.html + +import pl.treksoft.kvision.html.Canvas +import pl.treksoft.kvision.panel.Root +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class CanvasSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test", true) + val canvas = Canvas(800, 600) + root.add(canvas) + val element = document.getElementById("test") + assertEqualsHtml( + "<canvas width=\"800\" height=\"600\"></iframe>", + element?.innerHTML, + "Should render correct canvas" + ) + } + } + +} |