github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Web SVG: Publish custom attr functions (#2127) 

* Web SVG: Publish custom attr functions

* Add points and ry overload

* Remove duplicate ry method

Co-authored-by: hfhbd <hfhbd@users.noreply.github.com>
pull/2302/head
Philip Wedemann 2 years ago committed by GitHub
parent
f618a73348
commit
28755d0f70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 233 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 125
      web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
  2. 158
      web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svgAttrs.kt

125
web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
Unescape 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
Unescape 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)
}
Write Preview
Loading…
Cancel
Save