Skip to content

Commit

Permalink
AbsoluteSmoothRoundedCornerShape, update README
Browse files Browse the repository at this point in the history
  • Loading branch information
iamcalledrob committed Sep 6, 2024
1 parent f8c3e65 commit 506330e
Show file tree
Hide file tree
Showing 9 changed files with 272 additions and 56 deletions.
36 changes: 24 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,50 @@
# smoothRoundedCornerShape
# SmoothRoundedCornerShape

## Introduction
Kotlin Multiplatform library that provides `SmoothRoundedCornerShape` -- which works just like `RoundedCornerShape`,
but takes an additional `smoothing` parameter.
Kotlin Multiplatform library for Compose that provides `SmoothRoundedCornerShape` -- which works just like
`RoundedCornerShape`, but takes an additional `smoothing` parameter, which provides smoothed superellipse corners.

The `smoothing` value approximately maps to Figma's corner smoothing setting as a fraction, for example
`smoothing: 0.6f` is roughly equivalent to Figma's `Corner smoothing: 60%`

`AbsoluteSmoothRoundedCornerShape` and `Path.smoothRoundedRectangle` are also provided.

There is no path/smoothing logic contained in this library, it's just a lightweight binding on top of [androidx.graphics.shapes](https://developer.android.com/reference/kotlin/androidx/graphics/shapes/package-summary)
There is no path/smoothing logic contained in this library, it's just a lightweight wrapper around
[androidx.graphics.shapes](https://developer.android.com/reference/kotlin/androidx/graphics/shapes/package-summary), which is a non-compose library.

## Installation
Add the [jitpack](https://jitpack.io/) repository to your build file:
Ensure your project is using the maven central repository:
```kotlin
repositories {
maven { url 'https://jitpack.io' }
mavenCentral()
}
```

Then add as a module dependency:
```kotlin
dependencies {
implementation("com.github.iamcalledrob:smoothRoundedCornerShape:1.0.2")
implementation("io.github.iamcalledrob:smoothRoundedCornerShape:1.0.4")
}
```

## Usage
Use in place of `RoundedCornerShape` for example:
Use in place of `RoundedCornerShape` and `AbsoluteRoundedCornerShape` for example:
```kotlin
val shape = SmoothRoundedCornerShape(smoothing = 0.6f, radius = 10.dp)
Box(Modifier.background(Color.Red, shape = shape).width(128.dp).height(64.dp))
// SmoothRoundedCornerShape
SmoothRoundedCornerShape(smoothing = 0.6f, radius = 10.dp)
SmoothRoundedCornerShape(smoothing = 0.6f, percent = 25)
SmoothRoundedCornerShape(smoothing = 0.6f, topStart = 10.dp, topEnd = 5.dp, bottomEnd = 0.dp, bottomStart = 20.dp)
SmoothRoundedCornerShape(smoothing = 0.6f, topStartPercent = 10, topEndPercent = 5, bottomEndPercent = 0, bottomStartPercent = 20)

// AbsoluteSmoothRoundedCornerShape
AbsoluteSmoothRoundedCornerShape(smoothing = 0.6f, topLeft = 10.dp, topRight = 5.dp, bottomRight = 0.dp, bottomLeft = 20.dp)
AbsoluteSmoothRoundedCornerShape(smoothing = 0.6f, topLeftPercent = 10, topRightPercent = 5, bottomRightPercent = 0, bottomLeftPercent = 20)

// Path.smoothRoundedRectangle
Path.smoothRoundedRectangle(smoothing = 0.6f, size = Size(100f, 50f), topLeft = 10f, topRight = 5f, bottomRight = 0f, bottomLeft = 20f)
```


## Notes
Currently only builds desktop (jvm) and android targets, since only those have been tested. Feel free to make a PR for
other platforms.
Currently only builds desktop (jvm) and android targets, since androidx.graphics.shapes only supports those targets.
Feel free to make a PR for other platforms if they become supported.
99 changes: 81 additions & 18 deletions build.gradle.kts
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import com.vanniktech.maven.publish.JavadocJar
import com.vanniktech.maven.publish.KotlinMultiplatform
import com.vanniktech.maven.publish.SonatypeHost

plugins {
kotlin("multiplatform") version "1.9.23"
id("org.jetbrains.compose") version "1.6.11"
id("com.android.library") version "8.2.0"
id("maven-publish")

id("signing")
id("com.vanniktech.maven.publish") version "0.29.0"
}

group = "com.github.iamcalledrob"
version = "1.0.3"
group = "io.github.iamcalledrob"
version = "1.0.4"

repositories {
mavenCentral()
Expand All @@ -17,34 +23,91 @@ kotlin {
jvmToolchain(17)

jvm()
androidTarget()

androidTarget {
publishLibraryVariants("release", "debug")
}
applyDefaultHierarchyTemplate()

sourceSets {
commonMain {
dependencies {
implementation("androidx.graphics:graphics-shapes:1.0.1")

implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.ui)
}
}

// Leaving some hope that androidx.graphics:graphics-shape may eventually support
// non-desktop multiplatform targets too.
val nonAndroidMain by creating {
dependsOn(commonMain.get())
}
jvmMain.get().dependsOn(nonAndroidMain)
}
}

android {
namespace = "com.github.iamcalledrob.smoothRoundedCornerShape"
namespace = "io.github.iamcalledrob.smoothRoundedCornerShape"
compileSdk = 34
}

//publishing {
// publications {
//// create<MavenPublication>("maven2") {
//// from(components["kotlin"])
////// artifactId = "smooth-rounded-corner-shape"
//// }
// }
//}


// --- Signing + Publishing ---
//
// Make sure the following are accessible via gradle.properties.
// If they are missing or invalid, expect cryptic and misleading errors.
// Ideally in ~/.gradle/gradle.properties so it's not checked in to source control:
// - signing.gnupg.keyId,
// - signing.gnupg.password
// - signing.gnupg.secretKeyRingFile
// - mavenCentralUsername
// - mavenCentralPassword

val githubAccount = "iamcalledrob"
val githubRepository = "smooth-rounded-corner-shape"
val githubUrl = "https://github.com/$githubAccount/$githubRepository"
val email = "[email protected]"
val projectDescription = "SmoothRoundedCornerShape"

mavenPublishing {
coordinates(groupId = group.toString(), artifactId = githubRepository, version = version.toString())

configure(
KotlinMultiplatform(
javadocJar = JavadocJar.Empty(),
sourcesJar = true,
androidVariantsToPublish = listOf("debug", "release"),
)
)

pom {
name.set(githubRepository)
description.set(projectDescription)
url.set(githubUrl)
licenses {
license {
url.set("$githubUrl/blob/master/LICENSE.TXT")
}
}
developers {
developer {
id.set(githubAccount)
name.set(githubAccount)
url.set(githubUrl)
}
}
scm {
url.set(githubUrl)
connection.set("scm:git:git://github.com/$githubAccount/$githubRepository.git")
developerConnection.set("scm:git:ssh://[email protected]/$githubAccount/$githubRepository.git")
}
}

publishToMavenCentral(SonatypeHost.CENTRAL_PORTAL)
signAllPublications()
}

signing {
println("Signing...")
useGpgCmd()
sign(publishing.publications)
}
2 changes: 0 additions & 2 deletions jitpack.yml

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package com.github.iamcalledrob.smoothRoundedCornerShape
package io.github.iamcalledrob.smoothRoundedCornerShape

import androidx.compose.ui.graphics.asComposePath
import androidx.graphics.shapes.RoundedPolygon
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
package io.github.iamcalledrob.smoothRoundedCornerShape

import androidx.compose.foundation.shape.CornerBasedShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.LayoutDirection

class AbsoluteSmoothRoundedCornerShape(
val smoothing: Float = DefaultSmoothing,
topLeft: CornerSize,
topRight: CornerSize,
bottomRight: CornerSize,
bottomLeft: CornerSize
) : CornerBasedShape(
topStart = topLeft,
topEnd = topRight,
bottomEnd = bottomRight,
bottomStart = bottomLeft,
) {
constructor(
smoothing: Float = DefaultSmoothing,
topLeft: Dp,
topRight: Dp,
bottomRight: Dp,
bottomLeft: Dp,
) : this(
smoothing = smoothing,
topLeft = CornerSize(topLeft),
topRight = CornerSize(topRight),
bottomRight = CornerSize(bottomRight),
bottomLeft = CornerSize(bottomLeft),
)

constructor(
smoothing: Float = DefaultSmoothing,
topLeftPercent: Int,
topRightPercent: Int,
bottomRightPercent: Int,
bottomLeftPercent: Int,
) : this(
smoothing = smoothing,
topLeft = CornerSize(topLeftPercent),
topRight = CornerSize(topRightPercent),
bottomRight = CornerSize(bottomRightPercent),
bottomLeft = CornerSize(bottomLeftPercent),
)

override fun copy(
topStart: CornerSize,
topEnd: CornerSize,
bottomEnd: CornerSize,
bottomStart: CornerSize
) = SmoothRoundedCornerShape(
smoothing = smoothing,
topStart = topStart,
topEnd = topEnd,
bottomEnd = bottomEnd,
bottomStart = bottomStart,
)

override fun createOutline(
size: Size,
topStart: Float,
topEnd: Float,
bottomEnd: Float,
bottomStart: Float,
layoutDirection: LayoutDirection
): Outline {
val path = Path.smoothRoundedRectangle(
smoothing = smoothing,
size = size,
topLeft = topStart,
topRight = topEnd,
bottomRight = bottomEnd,
bottomLeft = bottomStart,
)
return Outline.Generic(path)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
package io.github.iamcalledrob.smoothRoundedCornerShape

import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.graphics.shapes.CornerRounding
import androidx.graphics.shapes.RoundedPolygon

fun Path.Companion.smoothRoundedRectangle(size: Size, radius: Float, smoothing: Float) =
smoothRoundedRectangle(
smoothing = smoothing,
size = size,
topLeft = radius,
topRight = radius,
bottomLeft = radius,
bottomRight = radius,
)

fun Path.Companion.smoothRoundedRectangle(
smoothing: Float,
size: Size,
topLeft: Float,
topRight: Float,
bottomLeft: Float,
bottomRight: Float,
): Path =
RoundedPolygon(
vertices = floatArrayOf(
0f, 0f, // topLeft
size.width, 0f, // topRight
size.width, size.height, // bottomRight
0f, size.height // bottomLeft
),
perVertexRounding = listOf(
CornerRounding(radius = topLeft, smoothing = smoothing),
CornerRounding(radius = topRight, smoothing = smoothing),
CornerRounding(radius = bottomRight, smoothing = smoothing),
CornerRounding(radius = bottomLeft, smoothing = smoothing),
)
).toComposePath()
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package com.github.iamcalledrob.smoothRoundedCornerShape
package io.github.iamcalledrob.smoothRoundedCornerShape

import androidx.compose.ui.graphics.Path
import androidx.graphics.shapes.RoundedPolygon
Expand Down
Loading

0 comments on commit 506330e

Please sign in to comment.