Skip to content

Nullable borderRadius optimization on shadows and outline #46819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jorge-cab wants to merge 1 commit into from
Closed

Nullable borderRadius optimization on shadows and outline #46819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions ...tive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,33 +105,28 @@ public object BackgroundStyleApplicator {
): Unit {
ensureCSSBackground(view).setBorderRadius(corner, radius)
val compositeBackgroundDrawable = ensureCompositeBackgroundDrawable(view)
compositeBackgroundDrawable.borderRadius =
compositeBackgroundDrawable.borderRadius ?: BorderRadiusStyle()
compositeBackgroundDrawable.borderRadius?.set(corner, radius)

if (Build.VERSION.SDK_INT >= MIN_OUTSET_BOX_SHADOW_SDK_VERSION) {
for (shadow in compositeBackgroundDrawable.outerShadows) {
if (shadow is OutsetBoxShadowDrawable) {
shadow.borderRadius = shadow.borderRadius ?: BorderRadiusStyle()
shadow.borderRadius?.set(corner, radius)
shadow.invalidateSelf()
shadow.borderRadius = compositeBackgroundDrawable.borderRadius
}
}
}

if (Build.VERSION.SDK_INT >= MIN_INSET_BOX_SHADOW_SDK_VERSION) {
for (shadow in compositeBackgroundDrawable.innerShadows) {
if (shadow is InsetBoxShadowDrawable) {
shadow.borderRadius = shadow.borderRadius ?: BorderRadiusStyle()
shadow.borderRadius?.set(corner, radius)
shadow.invalidateSelf()
shadow.borderRadius = compositeBackgroundDrawable.borderRadius
}
}
}

val outline = compositeBackgroundDrawable.outline
if (outline != null) {
outline.borderRadius = outline.borderRadius ?: BorderRadiusStyle()
outline.borderRadius?.set(corner, radius)
outline.invalidateSelf()
}
compositeBackgroundDrawable.outline?.borderRadius = compositeBackgroundDrawable.borderRadius
compositeBackgroundDrawable.invalidateSelf()
}

@JvmStatic
Expand Down Expand Up @@ -207,7 +202,9 @@ public object BackgroundStyleApplicator {
val outerShadows = mutableListOf<OutsetBoxShadowDrawable>()
val innerShadows = mutableListOf<InsetBoxShadowDrawable>()

val borderInsets = ensureCompositeBackgroundDrawable(view).borderInsets
val compositeBackgroundDrawable = ensureCompositeBackgroundDrawable(view)
val borderInsets = compositeBackgroundDrawable.borderInsets
val borderRadius = compositeBackgroundDrawable.borderRadius

for (boxShadow in shadows) {
val offsetX = boxShadow.offsetX
Expand All @@ -221,7 +218,7 @@ public object BackgroundStyleApplicator {
innerShadows.add(
InsetBoxShadowDrawable(
context = view.context,
borderRadius = ensureCSSBackground(view).borderRadius,
borderRadius = borderRadius,
borderInsets = borderInsets,
shadowColor = color,
offsetX = offsetX,
Expand All @@ -232,7 +229,7 @@ public object BackgroundStyleApplicator {
outerShadows.add(
OutsetBoxShadowDrawable(
context = view.context,
borderRadius = ensureCSSBackground(view).borderRadius,
borderRadius = borderRadius,
shadowColor = color,
offsetX = offsetX,
offsetY = offsetY,
Expand Down Expand Up @@ -329,7 +326,7 @@ public object BackgroundStyleApplicator {
outline =
OutlineDrawable(
context = view.context,
borderRadius = ensureCSSBackground(view).borderRadius.copy(),
borderRadius = compositeBackgroundDrawable.borderRadius,
outlineColor = Color.BLACK,
outlineOffset = 0f,
outlineStyle = OutlineStyle.SOLID,
Expand Down
42 changes: 38 additions & 4 deletions ...ndroid/src/main/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawable.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import android.graphics.drawable.Drawable
import android.graphics.drawable.LayerDrawable
import com.facebook.react.common.annotations.UnstableReactNativeAPI
import com.facebook.react.uimanager.style.BorderInsets
import com.facebook.react.uimanager.style.BorderRadiusStyle

/**
* CompositeBackgroundDrawable can overlay multiple different layers, shadows, and native effects
Expand Down Expand Up @@ -59,6 +60,8 @@ internal class CompositeBackgroundDrawable(

// Holder value for currently set insets
public var borderInsets: BorderInsets? = null
// Holder value for currently set border radius
public var borderRadius: BorderRadiusStyle? = null

init {
// We want to overlay drawables, instead of placing future drawables within the content area of
Expand All @@ -71,24 +74,55 @@ internal class CompositeBackgroundDrawable(
cssBackground: CSSBackgroundDrawable?
): CompositeBackgroundDrawable {
return CompositeBackgroundDrawable(
originalBackground, outerShadows, cssBackground, feedbackUnderlay, innerShadows, outline)
originalBackground,
outerShadows,
cssBackground,
feedbackUnderlay,
innerShadows,
outline)
.also { composite ->
composite.borderInsets = this.borderInsets
composite.borderRadius = this.borderRadius
}
}

public fun withNewShadows(
outerShadows: List<Drawable>,
innerShadows: List<Drawable>
): CompositeBackgroundDrawable {
return CompositeBackgroundDrawable(
originalBackground, outerShadows, cssBackground, feedbackUnderlay, innerShadows, outline)
originalBackground,
outerShadows,
cssBackground,
feedbackUnderlay,
innerShadows,
outline)
.also { composite ->
composite.borderInsets = this.borderInsets
composite.borderRadius = this.borderRadius
}
}

public fun withNewOutline(outline: OutlineDrawable): CompositeBackgroundDrawable {
return CompositeBackgroundDrawable(
originalBackground, outerShadows, cssBackground, feedbackUnderlay, innerShadows, outline)
originalBackground,
outerShadows,
cssBackground,
feedbackUnderlay,
innerShadows,
outline)
.also { composite ->
composite.borderInsets = this.borderInsets
composite.borderRadius = this.borderRadius
}
}

public fun withNewFeedbackUnderlay(newUnderlay: Drawable?): CompositeBackgroundDrawable {
return CompositeBackgroundDrawable(
originalBackground, outerShadows, cssBackground, newUnderlay, innerShadows, outline)
originalBackground, outerShadows, cssBackground, newUnderlay, innerShadows, outline)
.apply {
borderInsets = this@CompositeBackgroundDrawable.borderInsets
borderRadius = this@CompositeBackgroundDrawable.borderRadius
}
}
}
24 changes: 6 additions & 18 deletions ...eactAndroid/src/main/java/com/facebook/react/uimanager/drawable/InsetBoxShadowDrawable.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,30 +40,18 @@ private val ZERO_RADII = floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
@RequiresApi(MIN_INSET_BOX_SHADOW_SDK_VERSION)
internal class InsetBoxShadowDrawable(
private val context: Context,
borderRadius: BorderRadiusStyle? = null,
borderInsets: BorderInsets? = null,
private val shadowColor: Int,
private val offsetX: Float,
private val offsetY: Float,
private val blurRadius: Float,
private val spread: Float,
/*
* We assume borderRadius & borderInsets to be shared across multiple drawables
* therefore user should invalidate this drawable when changing either of them
*/
var borderInsets: BorderInsets? = null,
var borderRadius: BorderRadiusStyle? = null,
) : Drawable() {
public var borderRadius = borderRadius
set(value) {
if (value != field) {
field = value
invalidateSelf()
}
}

public var borderInsets = borderInsets
set(value) {
if (value != field) {
field = value
invalidateSelf()
}
}

private val shadowPaint =
Paint().apply {
color = shadowColor
Expand Down
24 changes: 11 additions & 13 deletions ...ative/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/OutlineDrawable.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,15 @@ import com.facebook.react.uimanager.style.ComputedBorderRadius
import com.facebook.react.uimanager.style.CornerRadii
import com.facebook.react.uimanager.style.OutlineStyle
import kotlin.math.roundToInt
import kotlin.properties.ObservableProperty
import kotlin.properties.ReadWriteProperty
import kotlin.reflect.KProperty

/** Draws outline https://drafts.csswg.org/css-ui/#outline */
internal class OutlineDrawable(
private val context: Context,
borderRadius: BorderRadiusStyle? = null,
/*
* We assume borderRadius to be shared across multiple drawables
* therefore we should manually invalidate this drawable when changing it
*/
var borderRadius: BorderRadiusStyle? = null,
outlineColor: Int,
outlineOffset: Float,
outlineStyle: OutlineStyle,
Expand All @@ -43,17 +44,14 @@ internal class OutlineDrawable(
*/
private val gapBetweenPaths = 0.8f

private fun <T> invalidatingChange(initialValue: T): ReadWriteProperty<Any?, T> =
object : ObservableProperty<T>(initialValue) {
override fun afterChange(property: KProperty<*>, oldValue: T, newValue: T) {
if (oldValue != newValue) {
invalidateSelf()
}
}
public var outlineOffset: Float = outlineOffset
set(value) {
if (value != field) {
field = value
invalidateSelf()
}
}

public var borderRadius: BorderRadiusStyle? by invalidatingChange(borderRadius)
public var outlineOffset: Float by invalidatingChange(outlineOffset)
public var outlineStyle: OutlineStyle = outlineStyle
set(value) {
if (value != field) {
Expand Down
14 changes: 5 additions & 9 deletions ...actAndroid/src/main/java/com/facebook/react/uimanager/drawable/OutsetBoxShadowDrawable.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,17 @@ private const val BLUR_RADIUS_SIGMA_SCALE = 0.5f
@RequiresApi(MIN_OUTSET_BOX_SHADOW_SDK_VERSION)
internal class OutsetBoxShadowDrawable(
private val context: Context,
borderRadius: BorderRadiusStyle? = null,
private val shadowColor: Int,
private val offsetX: Float,
private val offsetY: Float,
private val blurRadius: Float,
private val spread: Float,
/*
* We assume borderRadius to be shared across multiple drawables
* therefore we should manually invalidate this drawable when changing it
*/
var borderRadius: BorderRadiusStyle? = null,
) : Drawable() {
public var borderRadius = borderRadius
set(value) {
if (value != field) {
field = value
invalidateSelf()
}
}

private val shadowPaint =
Paint().apply {
color = shadowColor
Expand Down