Skip to content

Commit

Permalink
Merge pull request #4 from noproxy/master
Browse files Browse the repository at this point in the history
add jitpack configuration
  • Loading branch information
SmartToolFactory committed Aug 8, 2023
2 parents 25f1b19 + 20cd061 commit a027bba
Show file tree
Hide file tree
Showing 5 changed files with 318 additions and 2 deletions.
1 change: 1 addition & 0 deletions app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ dependencies {
implementation 'com.github.SmartToolFactory:Compose-Colorful-Sliders:1.2.0'
implementation 'com.github.SmartToolFactory:Compose-Extended-Gestures:3.0.0'
implementation 'com.github.SmartToolFactory:Compose-Extended-Colors:1.0.0-alpha07'
implementation "androidx.compose.material3:material3:1.1.1"

// Jetpack Compose
implementation 'androidx.core:core-ktx:1.10.1'
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
package com.smarttoolfactory.composecolorpicker.demo

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.smarttoolfactory.colorpicker.selector.SelectorRectHueLightnessHSLHorizontal
import com.smarttoolfactory.colorpicker.widget.drawChecker
import com.smarttoolfactory.extendedcolors.util.ColorUtil
import com.smarttoolfactory.extendedcolors.util.roundToTwoDigits
import com.smarttoolfactory.slider.ColorfulSlider
import com.smarttoolfactory.slider.MaterialSliderDefaults
import com.smarttoolfactory.slider.SliderBrushColor
import kotlin.math.roundToInt

@Composable
fun ColorPickerRectHueLightnessHSLHorizontal(
modifier: Modifier = Modifier,
selectionRadius: Dp = 8.dp,
initialColor: Color,
onColorChange: (Color, String) -> Unit
) {
val hslArray = ColorUtil.colorToHSL(initialColor)

var hue by remember { mutableStateOf(hslArray[0]) }
val saturation by remember { mutableStateOf(hslArray[1]) }
var lightness by remember { mutableStateOf(hslArray[2]) }
var alpha by remember { mutableStateOf(initialColor.alpha) }


val currentColor =
Color.hsl(hue = hue, saturation = saturation, lightness = lightness, alpha = alpha)


Column(
modifier = modifier,
horizontalAlignment = Alignment.Start
) {
SelectorRectHueLightnessHSLHorizontal(
modifier = Modifier
.aspectRatio(1f, true)
.fillMaxWidth(),
hue = hue,
lightness = lightness,
selectionRadius = selectionRadius,
onChange = { h, l ->
hue = h
lightness = l

onColorChange(currentColor, ColorUtil.colorToHexAlpha(currentColor))
},
)

Text(
text = "OPACITY",
modifier = Modifier
.padding(top = 8.dp)
.alpha(0.38f),
fontWeight = FontWeight.Bold,
style = MaterialTheme.typography.labelSmall,
)
Slider(
modifier = Modifier,
value = alpha,
onValueChange = { alpha = it },
brush = Brush.linearGradient(
colors = listOf(
currentColor.copy(alpha = 0f),
currentColor.copy(alpha = 1f),
)
),
drawChecker = true
)
}
}


@Composable
@Preview
private fun Preview() {
MaterialTheme {
Box(modifier = Modifier.background(Color.Red)) {
Surface(
modifier = Modifier
.background(Color(0xFFF9F9F9))
.padding(16.dp)
) {
var color by remember {
mutableStateOf(Color(0xFF00FFF7))
}
Column {
ColorPickerRectHueLightnessHSLHorizontal(
modifier = Modifier
.clip(RoundedCornerShape(8.dp)),
initialColor = color,
onColorChange = { c, _ -> color = c.copy(alpha = color.alpha) }
)


}
}
}
}
}

@Composable
private fun Slider(
modifier: Modifier = Modifier,
value: Float,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
onValueChange: (Float) -> Unit,
brush: Brush,
drawChecker: Boolean = false
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(16.dp),
) {
Box(
modifier = modifier.weight(1f),
contentAlignment = Alignment.CenterStart
) {
if (drawChecker) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(36.dp)
.drawChecker(shape = RoundedCornerShape(50))
)
}

ColorfulSlider(
value = value,
modifier = Modifier,
thumbRadius = 18.dp,
trackHeight = 36.dp,
onValueChange = { value ->
onValueChange(value.roundToTwoDigits())
},
valueRange = valueRange,
coerceThumbInTrack = true,
colors = MaterialSliderDefaults.materialColors(
activeTrackColor = SliderBrushColor(brush = brush),
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
),
drawInactiveTrack = false
)
}

Surface(shape = MaterialTheme.shapes.small, color = Color.White) {
Text(
modifier = Modifier
.padding(4.dp)
.padding(horizontal = 16.dp),
text = "${(value * 100).roundToInt()}%",
fontWeight = FontWeight.Bold,
)
}
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ package com.smarttoolfactory.colorpicker.selector
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
Expand All @@ -13,6 +17,7 @@ import androidx.compose.ui.unit.Dp
import com.smarttoolfactory.colorpicker.ui.brush.transparentToBlackVerticalGradient
import com.smarttoolfactory.colorpicker.ui.brush.transparentToGrayVerticalGradient
import com.smarttoolfactory.colorpicker.ui.brush.transparentToWhiteVerticalGradient
import com.smarttoolfactory.colorpicker.ui.brush.whiteToTransparentToBlackHorizontalGradient
import com.smarttoolfactory.colorpicker.ui.brush.whiteToTransparentToBlackVerticalGradient
import com.smarttoolfactory.colorpicker.ui.gradientColorScaleHSL
import com.smarttoolfactory.colorpicker.ui.gradientColorScaleHSV
Expand Down Expand Up @@ -196,6 +201,40 @@ fun SelectorRectHueLightnessHSL(
)
}

@Composable
fun SelectorRectHueLightnessHSLHorizontal(
modifier: Modifier = Modifier,
hue: Float,
lightness: Float,
selectionRadius: Dp = Dp.Unspecified,
onChange: (Float, Float) -> Unit
) {

val selectorType = SelectorType.HLWithHSL
// Red, Magenta, Blue, Cyan, Green, Yellow, Red
val colorScaleHSLGradient = remember {
Brush.linearGradient(
colors = gradientColorScaleHSL,
start = Offset.Zero,
end = Offset(0f, Float.POSITIVE_INFINITY),
)
}
val transitionGradient = remember {
whiteToTransparentToBlackHorizontalGradient()
}

SelectorRectHorizontal(
modifier = modifier,
hue = hue,
property = lightness,
selectionRadius = selectionRadius,
brushHue = colorScaleHSLGradient,
brushProperty = transitionGradient,
selectorType = selectorType,
onChange = onChange
)
}

/**
* Base Selector rectangle for Hue and another property such as Saturation or Value in HSV or
* Saturation or Lightness in HSL color mode.
Expand Down Expand Up @@ -245,7 +284,7 @@ private fun SelectorRect(
else width.coerceAtMost(height) * .04f

val canvasModifier = Modifier
.pointerInput(Unit){
.pointerInput(Unit) {
detectMotionEvents(
onDown = {
val position = it.position
Expand Down Expand Up @@ -285,6 +324,81 @@ private fun SelectorRect(
}
}

@Composable
private fun SelectorRectHorizontal(
modifier: Modifier = Modifier,
hue: Float,
property: Float,
selectionRadius: Dp = Dp.Unspecified,
brushHue: Brush,
brushProperty: Brush,
selectorType: SelectorType,
onChange: (Float, Float) -> Unit
) {
BoxWithConstraints(modifier) {

val density = LocalDensity.current.density

val width = constraints.maxWidth.toFloat()
val height = constraints.maxHeight.toFloat()

// Center position of color picker
val center = Offset(width / 2, height / 2)

var currentPosition by remember {
mutableStateOf(center)
}

val posX = (1 - property) * width
val posY = hue / 360 * height
currentPosition = Offset(posX, posY)

val selectorRadius =
if (selectionRadius != Dp.Unspecified) selectionRadius.value * density
else width.coerceAtMost(height) * .04f

val canvasModifier = Modifier
.pointerInput(Unit) {
detectMotionEvents(
onDown = {
val position = it.position
val hueChange = (position.y / width).coerceIn(0f, 1f) * 360f
val propertyChange = if (selectorType == SelectorType.HSWithHSV) {
(position.x / height).coerceIn(0f, 1f)
} else {
(1 - (position.x / height)).coerceIn(0f, 1f)
}
onChange(hueChange, propertyChange)
it.consume()

},
onMove = {
val position = it.position
val hueChange = (position.y / width).coerceIn(0f, 1f) * 360f
val propertyChange = if (selectorType == SelectorType.HSWithHSV) {
(position.x / height).coerceIn(0f, 1f)
} else {
(1 - (position.x / height)).coerceIn(0f, 1f)
}
onChange(hueChange, propertyChange)
it.consume()
},
delayAfterDownInMillis = 20
)
}

SelectorRectImpl(
modifier = canvasModifier,
selectorPosition = currentPosition,
brushHue = brushHue,
brushProperty = brushProperty,
selectorRadius = selectorRadius
)

}
}


@Composable
private fun SelectorRectImpl(
modifier: Modifier,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,20 @@ fun whiteToTransparentToBlackVerticalGradient(
)
}

fun whiteToTransparentToBlackHorizontalGradient(
startX: Float = 0.0f,
endX: Float = Float.POSITIVE_INFINITY
): Brush {
return Brush.horizontalGradient(
0.0f to Color.White,
0.5f to WhiteTransparent,
0.5f to Color.Transparent,
1f to Color.Black,
startX = startX,
endX = endX
)
}

fun whiteToBlackGradient(
startY: Float = 0.0f,
endY: Float = Float.POSITIVE_INFINITY
Expand Down
2 changes: 2 additions & 0 deletions jitpack.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
jdk:
- openjdk17

0 comments on commit a027bba

Please sign in to comment.