jlengrand/compose-multiplatform
1
0
Fork 0
mirror of https://github.com/jlengrand/compose-multiplatform.git synced 2026-03-10 15:48:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Web SVG: Publish custom attr functions (#2127)

Browse Source 
* Web SVG: Publish custom attr functions

* Add points and ry overload

* Remove duplicate ry method

Co-authored-by: hfhbd <hfhbd@users.noreply.github.com>
This commit is contained in:
Philip Wedemann
2022-09-09 12:33:58 +02:00
committed by GitHub
parent f618a73348
commit 28755d0f70
2 changed files with 233 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
View File

@@ -68,7 +68,7 @@ fun Svg(
TagElement(
elementBuilder = Svg,
applyAttrs = {
viewBox?.let { attr("viewBox", it) }
viewBox?.let { viewBox(it) }
attrs?.invoke(this)
},
content = content
@@ -85,7 +85,7 @@ fun ElementScope<SVGElement>.SvgA(
TagElement(
elementBuilder = A,
applyAttrs = {
attr("href", href)
href(href)
attrs?.invoke(this)
},
content = content
@@ -104,9 +104,9 @@ fun ElementScope<SVGElement>.Circle(
TagElement(
elementBuilder = Circle,
applyAttrs = {
attr("cx", cx.toString())
attr("cy", cy.toString())
attr("r", r.toString())
cx(cx)
cy(cy)
r(r)
attrs?.invoke(this)
},
content = content
@@ -126,9 +126,9 @@ fun ElementScope<SVGElement>.Circle(
TagElement(
elementBuilder = Circle,
applyAttrs = {
attr("cx", cx.toString())
attr("cy", cy.toString())
attr("r", r.toString())
cx(cx)
cy(cy)
r(r)
attrs?.invoke(this)
},
content = content
@@ -147,8 +147,8 @@ fun ElementScope<SVGElement>.SvgText(
TagElement(
elementBuilder = Text,
applyAttrs = {
attr("x", x.toString())
attr("y", y.toString())
x(x)
y(y)
attrs?.invoke(this)
},
content = {
@@ -167,8 +167,8 @@ fun ElementScope<SVGElement>.View(
TagElement(
elementBuilder = View,
applyAttrs = {
attr("id", id)
attr("viewBox", viewBox)
id(id)
viewBox(viewBox)
attrs?.invoke(this)
},
content = null
@@ -188,10 +188,10 @@ fun ElementScope<SVGElement>.Rect(
TagElement(
elementBuilder = Rect,
applyAttrs = {
attr("x", x.toString())
attr("y", y.toString())
attr("width", width.toString())
attr("height", height.toString())
x(x)
y(y)
width(width)
height(height)
attrs?.invoke(this)
},
content = content
@@ -211,10 +211,35 @@ fun ElementScope<SVGElement>.Rect(
TagElement(
elementBuilder = Rect,
applyAttrs = {
attr("x", x.toString())
attr("y", y.toString())
attr("width", width.toString())
attr("height", height.toString())
x(x)
y(y)
width(width)
height(height)
attrs?.invoke(this)
},
content = content
)
}
@Composable
@ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Rect(
width: Number,
height: Number,
rx: Number,
ry: Number = rx,
transform: String,
attrs: AttrBuilderContext<SVGRectElement>? = null,
content: ContentBuilder<SVGRectElement>? = null
) {
TagElement(
elementBuilder = Rect,
applyAttrs = {
width(width)
height(height)
rx(rx)
ry(ry)
transform(transform)
attrs?.invoke(this)
},
content = content
@@ -234,10 +259,10 @@ fun ElementScope<SVGElement>.Ellipse(
TagElement(
elementBuilder = Ellipse,
applyAttrs = {
attr("cx", cx.toString())
attr("cy", cy.toString())
attr("rx", rx.toString())
attr("ry", ry.toString())
cx(cx)
cy(cy)
rx(rx)
ry(ry)
attrs?.invoke(this)
},
content = content
@@ -257,10 +282,10 @@ fun ElementScope<SVGElement>.Ellipse(
TagElement(
elementBuilder = Ellipse,
applyAttrs = {
attr("cx", cx.toString())
attr("cy", cy.toString())
attr("rx", rx.toString())
attr("ry", ry.toString())
cx(cx)
cy(cy)
rx(rx)
ry(ry)
attrs?.invoke(this)
},
content = content
@@ -278,7 +303,7 @@ fun ElementScope<SVGElement>.Symbol(
TagElement(
elementBuilder = Symbol,
applyAttrs = {
id?.let { attr("id", it) }
id?.let { id(it) }
attrs?.invoke(this)
},
content = content
@@ -295,7 +320,7 @@ fun ElementScope<SVGElement>.Use(
TagElement(
elementBuilder = Use,
applyAttrs = {
attr("href", href)
href(href)
attrs?.invoke(this)
},
content = content
@@ -315,10 +340,10 @@ fun ElementScope<SVGElement>.Line(
TagElement(
elementBuilder = Line,
applyAttrs = {
attr("x1", x1.toString())
attr("y1", y1.toString())
attr("x2", x2.toString())
attr("y2", y2.toString())
x1(x1)
y1(y1)
x2(x2)
y2(y2)
attrs?.invoke(this)
},
content = content
@@ -338,10 +363,10 @@ fun ElementScope<SVGElement>.Line(
TagElement(
elementBuilder = Line,
applyAttrs = {
attr("x1", x1.toString())
attr("y1", y1.toString())
attr("x2", x2.toString())
attr("y2", y2.toString())
x1(x1)
y1(y1)
x2(x2)
y2(y2)
attrs?.invoke(this)
},
content = content
@@ -359,7 +384,7 @@ fun ElementScope<SVGElement>.ClipPath(
TagElement(
elementBuilder = ClipPath,
applyAttrs = {
attr("id", id)
id(id)
attrs?.invoke(this)
},
content = content
@@ -376,7 +401,7 @@ fun ElementScope<SVGElement>.Path(
TagElement(
elementBuilder = Path,
applyAttrs = {
attr("d", d)
d(d)
attrs?.invoke(this)
},
content = content
@@ -406,7 +431,7 @@ fun ElementScope<SVGElement>.Image(
TagElement(
elementBuilder = Image,
applyAttrs = {
attr("href", href)
href(href)
attrs?.invoke(this)
},
content = content
@@ -423,7 +448,7 @@ fun ElementScope<SVGElement>.Mask(
TagElement(
elementBuilder = Mask,
applyAttrs = {
id?.let { attr("id", it) }
id?.let { id(it) }
attrs?.invoke(this)
},
content = content
@@ -453,7 +478,7 @@ fun ElementScope<SVGElement>.Pattern(
TagElement(
elementBuilder = Pattern,
applyAttrs = {
attr("id", id)
id(id)
attrs?.invoke(this)
},
content = content
@@ -470,7 +495,7 @@ fun ElementScope<SVGElement>.Polygon(
TagElement(
elementBuilder = Polygon,
applyAttrs = {
attr("points", points.toList().chunked(2).joinToString(" ") { it.joinToString(",") })
points(points)
attrs?.invoke(this)
},
content = content
@@ -487,7 +512,7 @@ fun ElementScope<SVGElement>.Polyline(
TagElement(
elementBuilder = Polyline,
applyAttrs = {
attr("points", points.toList().chunked(2).joinToString(" ") { it.joinToString(",") })
points(points)
attrs?.invoke(this)
},
content = content
@@ -504,7 +529,7 @@ fun ElementScope<SVGElement>.TextPath(
TagElement(
elementBuilder = TextPath,
applyAttrs = {
attr("href", href)
href(href)
attrs?.invoke(this)
},
content = {
@@ -562,7 +587,7 @@ fun ElementScope<SVGElement>.LinearGradient(
TagElement(
elementBuilder = LinearGradient,
applyAttrs = {
id?.let { attr("id", it) }
id?.let { id(it) }
attrs?.invoke(this)
},
content = content
@@ -580,7 +605,7 @@ fun ElementScope<SVGElement>.RadialGradient(
TagElement(
elementBuilder = RadialGradient,
applyAttrs = {
id?.let { attr("id", it) }
id?.let { id(it) }
attrs?.invoke(this)
},
content = content
@@ -706,8 +731,8 @@ fun ElementScope<SVGElement>.Set(
TagElement(
elementBuilder = Set,
applyAttrs = {
attr("attributeName", attributeName)
attr("to", to)
attributeName(attributeName)
to(to)
attrs?.invoke(this)
},
content = content

158
web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svgAttrs.kt Normal file
View File

@@ -0,0 +1,158 @@
/*
* Copyright 2020-2022 JetBrains s.r.o. and respective authors and developers.
* Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
*/
package org.jetbrains.compose.web.svg
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.css.*
import org.w3c.dom.svg.*
fun AttrsScope<SVGElement>.width(px: Number) {
attr("width", px.toString())
}
fun AttrsScope<SVGElement>.height(px: Number) {
attr("height", px.toString())
}
fun AttrsScope<SVGElement>.width(value: CSSLengthOrPercentageValue) {
attr("width", value.toString())
}
fun AttrsScope<SVGElement>.height(value: CSSLengthOrPercentageValue) {
attr("height", value.toString())
}
fun AttrsScope<SVGElement>.xmlns(nameSpace: String) {
attr("xmlns", nameSpace)
}
fun AttrsScope<SVGElement>.attributeName(attributeName: String) {
attr("attributeName", attributeName)
}
fun AttrsScope<SVGElement>.fill(color: String) {
attr("fill", color)
}
fun AttrsScope<SVGElement>.fillRule(fill: String) {
attr("fill-rule", fill)
}
fun AttrsScope<SVGElement>.href(href: String) {
attr("href", href)
}
fun AttrsScope<SVGElement>.viewBox(viewBox: String) {
attr("viewBox", viewBox)
}
fun AttrsScope<SVGElement>.transform(transform: String) {
attr("transform", transform)
}
fun AttrsScope<SVGElement>.d(d: String) {
attr("d", d)
}
fun AttrsScope<SVGElement>.points(points: String) {
attr("points", points)
}
fun AttrsScope<SVGElement>.points(vararg points: Number) {
attr("points", points.toList().chunked(2).joinToString(" ") { it.joinToString(",") })
}
fun AttrsScope<SVGElement>.cx(cx: Number) {
attr("cx", cx.toString())
}
fun AttrsScope<SVGElement>.cy(cy: Number) {
attr("cy", cy.toString())
}
fun AttrsScope<SVGElement>.r(r: Number) {
attr("r", r.toString())
}
fun AttrsScope<SVGElement>.rx(rx: Number) {
attr("rx", rx.toString())
}
fun AttrsScope<SVGElement>.ry(ry: Number) {
attr("ry", ry.toString())
}
fun AttrsScope<SVGElement>.x(x: Number) {
attr("x", x.toString())
}
fun AttrsScope<SVGElement>.y(y: Number) {
attr("y", y.toString())
}
fun AttrsScope<SVGElement>.x1(x1: Number) {
attr("x1", x1.toString())
}
fun AttrsScope<SVGElement>.y1(y1: Number) {
attr("y1", y1.toString())
}
fun AttrsScope<SVGElement>.x2(x2: Number) {
attr("x2", x2.toString())
}
fun AttrsScope<SVGElement>.y2(y2: Number) {
attr("y2", y2.toString())
}
fun AttrsScope<SVGElement>.cx(cx: CSSLengthOrPercentageValue) {
attr("cx", cx.toString())
}
fun AttrsScope<SVGElement>.cy(cy: CSSLengthOrPercentageValue) {
attr("cy", cy.toString())
}
fun AttrsScope<SVGElement>.r(r: CSSLengthOrPercentageValue) {
attr("r", r.toString())
}
fun AttrsScope<SVGElement>.rx(rx: CSSLengthOrPercentageValue) {
attr("rx", rx.toString())
}
fun AttrsScope<SVGElement>.ry(ry: CSSLengthOrPercentageValue) {
attr("ry", ry.toString())
}
fun AttrsScope<SVGElement>.x(x: CSSLengthOrPercentageValue) {
attr("x", x.toString())
}
fun AttrsScope<SVGElement>.y(y: CSSLengthOrPercentageValue) {
attr("y", y.toString())
}
fun AttrsScope<SVGElement>.x1(x1: CSSLengthOrPercentageValue) {
attr("x1", x1.toString())
}
fun AttrsScope<SVGElement>.y1(y1: CSSLengthOrPercentageValue) {
attr("y1", y1.toString())
}
fun AttrsScope<SVGElement>.x2(x2: CSSLengthOrPercentageValue) {
attr("x2", x2.toString())
}
fun AttrsScope<SVGElement>.y2(y2: CSSLengthOrPercentageValue) {
attr("y2", y2.toString())
}
fun AttrsScope<SVGElement>.to(to: String) {
attr("to", to)
}