From 694757adcf9d3c7b386cd425d4c098559f15b551 Mon Sep 17 00:00:00 2001 From: Ivan Matkov Date: Mon, 3 Jul 2023 12:55:54 +0200 Subject: [PATCH] Update skiko and add blending page to mpp demo (#617) * Update skiko to 0.7.67 * Add blending page to mpp demo --- .../kotlin/androidx/compose/mpp/demo/App.kt | 1 + .../androidx/compose/mpp/demo/Blending.kt | 150 ++++++++++++++++++ .../compose/mpp/demo/GraphicsLayerSettings.kt | 4 +- gradle/libs.versions.toml | 2 +- 4 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/Blending.kt diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt index 2a504d42691d7..0ce370a5baf0a 100644 --- a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt +++ b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt @@ -26,6 +26,7 @@ val MainScreen = Screen.Selection( Screen.Example("LottieAnimation") { LottieAnimation() }, Screen.ScaffoldExample("ApplicationLayouts") { ApplicationLayouts(it) }, Screen.Example("GraphicsLayerSettings") { GraphicsLayerSettings() }, + Screen.Example("Blending") { Blending() }, LazyLayouts, TextFields, ) diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/Blending.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/Blending.kt new file mode 100644 index 0000000000000..9b725b2e6411d --- /dev/null +++ b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/Blending.kt @@ -0,0 +1,150 @@ +/* + * Copyright 2023 The Android Open Source Project + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package androidx.compose.mpp.demo + +import androidx.compose.animation.core.* +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.selection.selectable +import androidx.compose.foundation.selection.selectableGroup +import androidx.compose.material.RadioButton +import androidx.compose.material.Slider +import androidx.compose.material.Text +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.geometry.center +import androidx.compose.ui.graphics.BlendMode +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.compositeOver +import androidx.compose.ui.graphics.drawscope.DrawScope +import androidx.compose.ui.graphics.drawscope.DrawScope.Companion.DefaultBlendMode +import androidx.compose.ui.semantics.Role +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import kotlin.math.min +import kotlin.math.round +import kotlin.math.roundToInt + + +@Composable +fun Blending() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(20.dp) + ) { + var blendMode by remember { mutableStateOf(DefaultBlendMode) } + var red by remember { mutableStateOf(1f) } + var green by remember { mutableStateOf(0f) } + var blue by remember { mutableStateOf(0f) } + var alpha by remember { mutableStateOf(0.5f) } + Canvas( + modifier = Modifier + .align(Alignment.CenterHorizontally) + .size(200.dp) + ) { + val radius = size.minDimension / 2 + drawCircle( + Color.Red, + center = Offset(center.x - radius / 2, center.y), + radius = radius, + alpha = 0.5f, + ) + + drawCircle( + color = Color(red, green, blue), + center = Offset(center.x + radius / 2, center.y), + radius = radius, + alpha = alpha, + blendMode = blendMode + ) + } + SliderSetting("Red", red) { red = it } + SliderSetting("Green", green) { green = it } + SliderSetting("Blue", blue) { blue = it } + SliderSetting("Alpha", alpha) { alpha = it } + BlendModeSetting(blendMode) { blendMode = it } + } +} + +@Composable +fun BlendModeSetting( + value: BlendMode, + onOptionSelected: (BlendMode) -> Unit +) { + val blendModes = listOf( + BlendMode.Clear, + BlendMode.Src, + BlendMode.Dst, + BlendMode.SrcOver, + BlendMode.DstOver, + BlendMode.SrcIn, + BlendMode.DstIn, + BlendMode.SrcOut, + BlendMode.DstOut, + BlendMode.SrcAtop, + BlendMode.DstAtop, + BlendMode.Xor, + BlendMode.Plus, + BlendMode.Modulate, + BlendMode.Screen, + BlendMode.Overlay, + BlendMode.Darken, + BlendMode.Lighten, + BlendMode.ColorDodge, + BlendMode.ColorBurn, + BlendMode.Hardlight, + BlendMode.Softlight, + BlendMode.Difference, + BlendMode.Exclusion, + BlendMode.Multiply, + BlendMode.Hue, + BlendMode.Saturation, + BlendMode.Color, + BlendMode.Luminosity, + ) + LazyColumn(modifier = Modifier.selectableGroup()) { + items(blendModes) { + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .height(30.dp) + .selectable( + selected = it == value, + onClick = { onOptionSelected(it) }, + role = Role.RadioButton + ) + ) { + RadioButton( + selected = it == value, + onClick = null + ) + Text( + text = it.toString(), + modifier = Modifier.padding(start = 16.dp) + ) + } + } + } +} diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/GraphicsLayerSettings.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/GraphicsLayerSettings.kt index 4fb091affab4b..8d632a1ae1553 100644 --- a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/GraphicsLayerSettings.kt +++ b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/GraphicsLayerSettings.kt @@ -96,9 +96,9 @@ fun GraphicsLayerSettings() { } @Composable -private fun SliderSetting(text: String, +fun SliderSetting(text: String, value: Float, - range: ClosedFloatingPointRange, + range: ClosedFloatingPointRange = 0f..1f, onValueChange: (Float) -> Unit) { Row( verticalAlignment = Alignment.CenterVertically, diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index d80efb1f4d9d6..9ff77e05227d0 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -52,7 +52,7 @@ moshi = "1.13.0" protobuf = "3.21.8" paparazzi = "1.0.0" paparazziNative = "2022.1.1-canary-f5f9f71" -skiko = "0.7.63" +skiko = "0.7.67" sqldelight = "1.3.0" retrofit = "2.7.2" wire = "4.5.1"