Browse Source

Simplify CSS transform API signatures

There's no need to any of this methods to be Boolean
pull/1098/head v1.0.0-alpha4-build321
Shagen Ogandzhanian 3 years ago
parent
commit
14909c23b2
  1. 200
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt

200
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt

@ -18,39 +18,39 @@ interface TransformBuilder {
a2: Number, b2: Number, c2: Number, d2: Number, a2: Number, b2: Number, c2: Number, d2: Number,
a3: Number, b3: Number, c3: Number, d3: Number, a3: Number, b3: Number, c3: Number, d3: Number,
a4: Number, b4: Number, c4: Number, d4: Number a4: Number, b4: Number, c4: Number, d4: Number
): Boolean )
fun perspective(d: CSSLengthValue): Boolean fun perspective(d: CSSLengthValue)
fun rotate(a: CSSAngleValue): Boolean fun rotate(a: CSSAngleValue)
fun rotate3d(x: Number, y: Number, z: Number, a: CSSAngleValue): Boolean fun rotate3d(x: Number, y: Number, z: Number, a: CSSAngleValue)
fun rotateX(a: CSSAngleValue): Boolean fun rotateX(a: CSSAngleValue)
fun rotateY(a: CSSAngleValue): Boolean fun rotateY(a: CSSAngleValue)
fun rotateZ(a: CSSAngleValue): Boolean fun rotateZ(a: CSSAngleValue)
fun scale(sx: Number): Boolean fun scale(sx: Number)
fun scale(sx: Number, sy: Number): Boolean fun scale(sx: Number, sy: Number)
fun scale3d(sx: Number, sy: Number, sz: Number): Boolean fun scale3d(sx: Number, sy: Number, sz: Number)
fun scaleX(s: Number): Boolean fun scaleX(s: Number)
fun scaleY(s: Number): Boolean fun scaleY(s: Number)
fun scaleZ(s: Number): Boolean fun scaleZ(s: Number)
fun skew(ax: CSSAngleValue): Boolean fun skew(ax: CSSAngleValue)
fun skew(ax: CSSAngleValue, ay: CSSAngleValue): Boolean fun skew(ax: CSSAngleValue, ay: CSSAngleValue)
fun skewX(a: CSSAngleValue): Boolean fun skewX(a: CSSAngleValue)
fun skewY(a: CSSAngleValue): Boolean fun skewY(a: CSSAngleValue)
fun translate(tx: CSSLengthValue): Boolean fun translate(tx: CSSLengthValue)
fun translate(tx: CSSPercentageValue): Boolean fun translate(tx: CSSPercentageValue)
fun translate(tx: CSSLengthValue, ty: CSSLengthValue): Boolean fun translate(tx: CSSLengthValue, ty: CSSLengthValue)
fun translate(tx: CSSLengthValue, ty: CSSPercentageValue): Boolean fun translate(tx: CSSLengthValue, ty: CSSPercentageValue)
fun translate(tx: CSSPercentageValue, ty: CSSLengthValue): Boolean fun translate(tx: CSSPercentageValue, ty: CSSLengthValue)
fun translate(tx: CSSPercentageValue, ty: CSSPercentageValue): Boolean fun translate(tx: CSSPercentageValue, ty: CSSPercentageValue)
fun translate3d(tx: CSSLengthValue, ty: CSSLengthValue, tz: CSSLengthValue): Boolean fun translate3d(tx: CSSLengthValue, ty: CSSLengthValue, tz: CSSLengthValue)
fun translate3d(tx: CSSLengthValue, ty: CSSPercentageValue, tz: CSSLengthValue): Boolean fun translate3d(tx: CSSLengthValue, ty: CSSPercentageValue, tz: CSSLengthValue)
fun translate3d(tx: CSSPercentageValue, ty: CSSLengthValue, tz: CSSLengthValue): Boolean fun translate3d(tx: CSSPercentageValue, ty: CSSLengthValue, tz: CSSLengthValue)
fun translate3d(tx: CSSPercentageValue, ty: CSSPercentageValue, tz: CSSLengthValue): Boolean fun translate3d(tx: CSSPercentageValue, ty: CSSPercentageValue, tz: CSSLengthValue)
fun translateX(tx: CSSLengthValue): Boolean fun translateX(tx: CSSLengthValue)
fun translateX(tx: CSSPercentageValue): Boolean fun translateX(tx: CSSPercentageValue)
fun translateY(ty: CSSLengthValue): Boolean fun translateY(ty: CSSLengthValue)
fun translateY(ty: CSSPercentageValue): Boolean fun translateY(ty: CSSPercentageValue)
fun translateZ(tz: CSSLengthValue): Boolean fun translateZ(tz: CSSLengthValue)
} }
private class TransformBuilderImplementation : TransformBuilder { private class TransformBuilderImplementation : TransformBuilder {
@ -64,67 +64,133 @@ private class TransformBuilderImplementation : TransformBuilder {
a2: Number, b2: Number, c2: Number, d2: Number, a2: Number, b2: Number, c2: Number, d2: Number,
a3: Number, b3: Number, c3: Number, d3: Number, a3: Number, b3: Number, c3: Number, d3: Number,
a4: Number, b4: Number, c4: Number, d4: Number a4: Number, b4: Number, c4: Number, d4: Number
) = ) {
transformations.add { "matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4)" } transformations.add { "matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4)" }
}
override fun perspective(d: CSSLengthValue) {
transformations.add { "perspective($d)" }
}
override fun perspective(d: CSSLengthValue) = transformations.add { "perspective($d)" } override fun rotate(a: CSSAngleValue) {
transformations.add { "rotate($a)" }
}
override fun rotate(a: CSSAngleValue) = transformations.add { "rotate($a)" } override fun rotate3d(x: Number, y: Number, z: Number, a: CSSAngleValue) {
override fun rotate3d(x: Number, y: Number, z: Number, a: CSSAngleValue) =
transformations.add({ "rotate3d($x, $y, $z, $a)" }) transformations.add({ "rotate3d($x, $y, $z, $a)" })
}
override fun rotateX(a: CSSAngleValue) {
transformations.add { "rotateX($a)" }
}
override fun rotateY(a: CSSAngleValue) {
transformations.add { "rotateY($a)" }
}
override fun rotateX(a: CSSAngleValue) = transformations.add { "rotateX($a)" } override fun rotateZ(a: CSSAngleValue) {
override fun rotateY(a: CSSAngleValue) = transformations.add { "rotateY($a)" } transformations.add { "rotateZ($a)" }
override fun rotateZ(a: CSSAngleValue) = transformations.add { "rotateZ($a)" } }
override fun scale(sx: Number) {
transformations.add { "scale($sx)" }
}
override fun scale(sx: Number) = transformations.add { "scale($sx)" } override fun scale(sx: Number, sy: Number) {
override fun scale(sx: Number, sy: Number) = transformations.add { "scale($sx, $sy)" } transformations.add { "scale($sx, $sy)" }
override fun scale3d(sx: Number, sy: Number, sz: Number) = }
override fun scale3d(sx: Number, sy: Number, sz: Number) {
transformations.add { "scale3d($sx, $sy, $sz)" } transformations.add { "scale3d($sx, $sy, $sz)" }
}
override fun scaleX(s: Number) = transformations.add { "scaleX($s)" } override fun scaleX(s: Number) {
override fun scaleY(s: Number) = transformations.add { "scaleY($s)" } transformations.add { "scaleX($s)" }
override fun scaleZ(s: Number) = transformations.add { "scaleZ($s)" } }
override fun skew(ax: CSSAngleValue) = transformations.add { "skew($ax)" } override fun scaleY(s: Number) {
override fun skew(ax: CSSAngleValue, ay: CSSAngleValue) = transformations.add { "skew($ax, $ay)" } transformations.add { "scaleY($s)" }
override fun skewX(a: CSSAngleValue) = transformations.add { "skewX($a)" } }
override fun skewY(a: CSSAngleValue) = transformations.add { "skewY($a)" }
override fun translate(tx: CSSLengthValue) = transformations.add { "translate($tx)" } override fun scaleZ(s: Number) {
override fun translate(tx: CSSPercentageValue) = transformations.add { "translate($tx)" } transformations.add { "scaleZ($s)" }
}
override fun translate(tx: CSSLengthValue, ty: CSSLengthValue) = override fun skew(ax: CSSAngleValue) {
transformations.add { "skew($ax)" }
}
override fun skew(ax: CSSAngleValue, ay: CSSAngleValue) {
transformations.add { "skew($ax, $ay)" }
}
override fun skewX(a: CSSAngleValue) {
transformations.add { "skewX($a)" }
}
override fun skewY(a: CSSAngleValue) {
transformations.add { "skewY($a)" }
}
override fun translate(tx: CSSLengthValue) {
transformations.add { "translate($tx)" }
}
override fun translate(tx: CSSPercentageValue) {
transformations.add { "translate($tx)" }
}
override fun translate(tx: CSSLengthValue, ty: CSSLengthValue) {
transformations.add { "translate($tx, $ty)" } transformations.add { "translate($tx, $ty)" }
}
override fun translate(tx: CSSLengthValue, ty: CSSPercentageValue) = override fun translate(tx: CSSLengthValue, ty: CSSPercentageValue) {
transformations.add { "translate($tx, $ty)" } transformations.add { "translate($tx, $ty)" }
}
override fun translate(tx: CSSPercentageValue, ty: CSSLengthValue) = override fun translate(tx: CSSPercentageValue, ty: CSSLengthValue) {
transformations.add { "translate($tx, $ty)" } transformations.add { "translate($tx, $ty)" }
}
override fun translate(tx: CSSPercentageValue, ty: CSSPercentageValue) = override fun translate(tx: CSSPercentageValue, ty: CSSPercentageValue) {
transformations.add { "translate($tx, $ty)" } transformations.add { "translate($tx, $ty)" }
}
override fun translate3d(tx: CSSLengthValue, ty: CSSLengthValue, tz: CSSLengthValue) = override fun translate3d(tx: CSSLengthValue, ty: CSSLengthValue, tz: CSSLengthValue) {
transformations.add { "translate3d($tx, $ty, $tz)" } transformations.add { "translate3d($tx, $ty, $tz)" }
}
override fun translate3d(tx: CSSLengthValue, ty: CSSPercentageValue, tz: CSSLengthValue) = override fun translate3d(tx: CSSLengthValue, ty: CSSPercentageValue, tz: CSSLengthValue) {
transformations.add { "translate3d($tx, $ty, $tz)" } transformations.add { "translate3d($tx, $ty, $tz)" }
}
override fun translate3d(tx: CSSPercentageValue, ty: CSSLengthValue, tz: CSSLengthValue) = override fun translate3d(tx: CSSPercentageValue, ty: CSSLengthValue, tz: CSSLengthValue) {
transformations.add { "translate3d($tx, $ty, $tz)" } transformations.add { "translate3d($tx, $ty, $tz)" }
}
override fun translate3d(tx: CSSPercentageValue, ty: CSSPercentageValue, tz: CSSLengthValue) = override fun translate3d(tx: CSSPercentageValue, ty: CSSPercentageValue, tz: CSSLengthValue) {
transformations.add { "translate3d($tx, $ty, $tz)" } transformations.add { "translate3d($tx, $ty, $tz)" }
}
override fun translateX(tx: CSSLengthValue) = transformations.add { "translateX($tx)" } override fun translateX(tx: CSSLengthValue) {
override fun translateX(tx: CSSPercentageValue) = transformations.add { "translateX($tx)" } transformations.add { "translateX($tx)" }
}
override fun translateY(ty: CSSLengthValue) = transformations.add { "translateY($ty)" } override fun translateX(tx: CSSPercentageValue) {
override fun translateY(ty: CSSPercentageValue) = transformations.add { "translateY($ty)" } transformations.add { "translateX($tx)" }
}
override fun translateZ(tz: CSSLengthValue) = transformations.add { "translateZ($tz)" } override fun translateY(ty: CSSLengthValue) {
transformations.add { "translateY($ty)" }
}
override fun translateY(ty: CSSPercentageValue) {
transformations.add { "translateY($ty)" }
}
override fun translateZ(tz: CSSLengthValue) {
transformations.add { "translateZ($tz)" }
}
override fun toString(): String { override fun toString(): String {
return transformations.joinToString(" ") { it.apply() } return transformations.joinToString(" ") { it.apply() }
@ -132,7 +198,7 @@ private class TransformBuilderImplementation : TransformBuilder {
} }
@ExperimentalComposeWebApi @ExperimentalComposeWebApi
fun StyleBuilder.transform(transformFunction: TransformBuilder.() -> Unit) { fun StyleBuilder.transform(transformContext: TransformBuilder.() -> Unit) {
val transformBuilder = TransformBuilderImplementation() val transformBuilder = TransformBuilderImplementation()
property("transform", transformBuilder.apply(transformFunction).toString()) property("transform", transformBuilder.apply(transformContext).toString())
} }
Loading…
Cancel
Save