Browse Source

Web: Add Canvas element (#1823)

Co-authored-by: hfhbd <hfhbd@users.noreply.github.com>
pull/1843/head
Philip Wedemann 3 years ago committed by GitHub
parent
commit
a528838712
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt
  2. 14
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
  3. 11
      web/core/src/jsTest/kotlin/elements/AttributesTests.kt
  4. 1
      web/core/src/jsTest/kotlin/elements/ElementsTests.kt

8
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt

@ -1,9 +1,11 @@
package org.jetbrains.compose.web.attributes package org.jetbrains.compose.web.attributes
import org.jetbrains.compose.web.attributes.builders.saveControlledInputState import org.jetbrains.compose.web.attributes.builders.saveControlledInputState
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.events.SyntheticSubmitEvent import org.jetbrains.compose.web.events.SyntheticSubmitEvent
import org.w3c.dom.HTMLAnchorElement import org.w3c.dom.HTMLAnchorElement
import org.w3c.dom.HTMLButtonElement import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLCanvasElement
import org.w3c.dom.HTMLFormElement import org.w3c.dom.HTMLFormElement
import org.w3c.dom.HTMLImageElement import org.w3c.dom.HTMLImageElement
import org.w3c.dom.HTMLInputElement 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> = fun AttrsScope<HTMLTableCellElement>.rowspan(value: Int): AttrsScope<HTMLTableCellElement> =
attr("rowspan", value.toString()) 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())

14
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.HTMLAudioElement
import org.w3c.dom.HTMLBRElement import org.w3c.dom.HTMLBRElement
import org.w3c.dom.HTMLButtonElement import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLCanvasElement
import org.w3c.dom.HTMLDataListElement import org.w3c.dom.HTMLDataListElement
import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLDivElement
import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLElement
@ -93,6 +94,7 @@ private val Object: ElementBuilder<HTMLObjectElement> = ElementBuilderImplementa
private val Param: ElementBuilder<HTMLParamElement> = ElementBuilderImplementation("param") private val Param: ElementBuilder<HTMLParamElement> = ElementBuilderImplementation("param")
private val Picture: ElementBuilder<HTMLPictureElement> = ElementBuilderImplementation("picture") private val Picture: ElementBuilder<HTMLPictureElement> = ElementBuilderImplementation("picture")
private val Source: ElementBuilder<HTMLSourceElement> = ElementBuilderImplementation("source") private val Source: ElementBuilder<HTMLSourceElement> = ElementBuilderImplementation("source")
private val Canvas: ElementBuilder<HTMLCanvasElement> = ElementBuilderImplementation("canvas")
private val Div: ElementBuilder<HTMLDivElement> = ElementBuilderImplementation("div") private val Div: ElementBuilder<HTMLDivElement> = ElementBuilderImplementation("div")
private val A: ElementBuilder<HTMLAnchorElement> = ElementBuilderImplementation("a") 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) @OptIn(ComposeWebInternalApi::class)
@Composable @Composable
fun Text(value: String) { fun Text(value: String) {

11
web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@ -550,4 +550,15 @@ class AttributesTests {
check(InputMode.Search, "search") check(InputMode.Search, "search")
check(InputMode.Url, "url") 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)
}
} }

1
web/core/src/jsTest/kotlin/elements/ElementsTests.kt

@ -45,6 +45,7 @@ class ElementsTests {
Pair({ Param() }, "PARAM"), Pair({ Param() }, "PARAM"),
Pair({ Picture() }, "PICTURE"), Pair({ Picture() }, "PICTURE"),
Pair({ Source() }, "SOURCE"), Pair({ Source() }, "SOURCE"),
Pair({ Canvas() }, "CANVAS"),
Pair({ Div() }, "DIV"), Pair({ Div() }, "DIV"),
Pair({ A() }, "A"), Pair({ A() }, "A"),

Loading…
Cancel
Save