From a528838712b8aef6aa59e7ace639276f9b858cda Mon Sep 17 00:00:00 2001
From: Philip Wedemann <22521688+hfhbd@users.noreply.github.com>
Date: Mon, 14 Feb 2022 12:32:27 +0100
Subject: [PATCH] Web: Add Canvas element (#1823)

Co-authored-by: hfhbd <hfhbd@users.noreply.github.com>
---
 .../org/jetbrains/compose/web/attributes/Attrs.kt  |  8 ++++++++
 .../org/jetbrains/compose/web/elements/Elements.kt | 14 ++++++++++++++
 .../src/jsTest/kotlin/elements/AttributesTests.kt  | 11 +++++++++++
 .../src/jsTest/kotlin/elements/ElementsTests.kt    |  1 +
 4 files changed, 34 insertions(+)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt
index 5e2137d6dd..278a3cb371 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt
@@ -1,9 +1,11 @@
 package org.jetbrains.compose.web.attributes
 
 import org.jetbrains.compose.web.attributes.builders.saveControlledInputState
+import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.events.SyntheticSubmitEvent
 import org.w3c.dom.HTMLAnchorElement
 import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.HTMLFormElement
 import org.w3c.dom.HTMLImageElement
 import org.w3c.dom.HTMLInputElement
@@ -329,3 +331,9 @@ fun AttrsScope<HTMLTableCellElement>.colspan(value: Int): AttrsScope<HTMLTableCe
 fun AttrsScope<HTMLTableCellElement>.rowspan(value: Int): AttrsScope<HTMLTableCellElement> =
     attr("rowspan", value.toString())
 
+/* Canvas attributes */
+fun AttrsScope<HTMLCanvasElement>.width(value: CSSSizeValue<out CSSUnitLengthOrPercentage>) =
+    attr("width", value.toString())
+
+fun AttrsScope<HTMLCanvasElement>.height(value: CSSSizeValue<out CSSUnitLengthOrPercentage>) =
+    attr("height", value.toString())
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
index 3cede7cf44..e42289d9a2 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
@@ -17,6 +17,7 @@ import org.w3c.dom.HTMLAreaElement
 import org.w3c.dom.HTMLAudioElement
 import org.w3c.dom.HTMLBRElement
 import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.HTMLDataListElement
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
@@ -93,6 +94,7 @@ private val Object: ElementBuilder<HTMLObjectElement> = ElementBuilderImplementa
 private val Param: ElementBuilder<HTMLParamElement> = ElementBuilderImplementation("param")
 private val Picture: ElementBuilder<HTMLPictureElement> = ElementBuilderImplementation("picture")
 private val Source: ElementBuilder<HTMLSourceElement> = ElementBuilderImplementation("source")
+private val Canvas: ElementBuilder<HTMLCanvasElement> = ElementBuilderImplementation("canvas")
 
 private val Div: ElementBuilder<HTMLDivElement> = ElementBuilderImplementation("div")
 private val A: ElementBuilder<HTMLAnchorElement> = ElementBuilderImplementation("a")
@@ -414,6 +416,18 @@ fun Source(
     )
 }
 
+@Composable
+fun Canvas(
+    attrs: AttrBuilderContext<HTMLCanvasElement>? = null,
+    content: ContentBuilder<HTMLCanvasElement>? = null
+) {
+    TagElement(
+        elementBuilder = Canvas,
+        applyAttrs = attrs,
+        content = content
+    )
+}
+
 @OptIn(ComposeWebInternalApi::class)
 @Composable
 fun Text(value: String) {
diff --git a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt
index bb1e76c3c1..8f1774db1b 100644
--- a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt
+++ b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt
@@ -550,4 +550,15 @@ class AttributesTests {
         check(InputMode.Search, "search")
         check(InputMode.Url, "url")
     }
+
+    @Test
+    fun canvasAttributeTest() = runTest {
+        composition {
+            Canvas({
+                height(400.px)
+                width(400.px)
+            })
+        }
+        assertEquals("""<canvas height="400px" width="400px"></canvas>""",root.innerHTML)
+    }
 }
diff --git a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
index d0c33b12b5..23c2b70c11 100644
--- a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
+++ b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
@@ -45,6 +45,7 @@ class ElementsTests {
             Pair({ Param() }, "PARAM"),
             Pair({ Picture() }, "PICTURE"),
             Pair({ Source() }, "SOURCE"),
+            Pair({ Canvas() }, "CANVAS"),
 
             Pair({ Div() }, "DIV"),
             Pair({ A() }, "A"),