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 --- .../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.colspan(value: Int): AttrsScope.rowspan(value: Int): AttrsScope = attr("rowspan", value.toString()) +/* Canvas attributes */ +fun AttrsScope.width(value: CSSSizeValue) = + attr("width", value.toString()) + +fun AttrsScope.height(value: CSSSizeValue) = + 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 = ElementBuilderImplementa private val Param: ElementBuilder = ElementBuilderImplementation("param") private val Picture: ElementBuilder = ElementBuilderImplementation("picture") private val Source: ElementBuilder = ElementBuilderImplementation("source") +private val Canvas: ElementBuilder = ElementBuilderImplementation("canvas") private val Div: ElementBuilder = ElementBuilderImplementation("div") private val A: ElementBuilder = ElementBuilderImplementation("a") @@ -414,6 +416,18 @@ fun Source( ) } +@Composable +fun Canvas( + attrs: AttrBuilderContext? = null, + content: ContentBuilder? = 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("""""",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"),