Skip to content

Commit a027bba

Browse files
SmartToolFactorySmartToolFactory
authored
Merge pull request #4 from noproxy/master
add jitpack configuration
2 parents 25f1b19 + 20cd061 commit a027bba

File tree

5 files changed

+318
-2
lines changed

5 files changed

+318
-2
lines changed

‎app/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ dependencies {
5353
implementation 'com.github.SmartToolFactory:Compose-Colorful-Sliders:1.2.0'
5454
implementation 'com.github.SmartToolFactory:Compose-Extended-Gestures:3.0.0'
5555
implementation 'com.github.SmartToolFactory:Compose-Extended-Colors:1.0.0-alpha07'
56+
implementation "androidx.compose.material3:material3:1.1.1"
5657

5758
// Jetpack Compose
5859
implementation 'androidx.core:core-ktx:1.10.1'

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/DoughnutDemo.kt‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
package com.smarttoolfactory.composecolorpicker.demo
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.aspectRatio
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.foundation.shape.RoundedCornerShape
13+
import androidx.compose.material3.MaterialTheme
14+
import androidx.compose.material3.Surface
15+
import androidx.compose.material3.Text
16+
import androidx.compose.runtime.Composable
17+
import androidx.compose.runtime.getValue
18+
import androidx.compose.runtime.mutableStateOf
19+
import androidx.compose.runtime.remember
20+
import androidx.compose.runtime.setValue
21+
import androidx.compose.ui.Alignment
22+
import androidx.compose.ui.Modifier
23+
import androidx.compose.ui.draw.alpha
24+
import androidx.compose.ui.draw.clip
25+
import androidx.compose.ui.graphics.Brush
26+
import androidx.compose.ui.graphics.Color
27+
import androidx.compose.ui.text.font.FontWeight
28+
import androidx.compose.ui.tooling.preview.Preview
29+
import androidx.compose.ui.unit.Dp
30+
import androidx.compose.ui.unit.dp
31+
import com.smarttoolfactory.colorpicker.selector.SelectorRectHueLightnessHSLHorizontal
32+
import com.smarttoolfactory.colorpicker.widget.drawChecker
33+
import com.smarttoolfactory.extendedcolors.util.ColorUtil
34+
import com.smarttoolfactory.extendedcolors.util.roundToTwoDigits
35+
import com.smarttoolfactory.slider.ColorfulSlider
36+
import com.smarttoolfactory.slider.MaterialSliderDefaults
37+
import com.smarttoolfactory.slider.SliderBrushColor
38+
import kotlin.math.roundToInt
39+
40+
@Composable
41+
fun ColorPickerRectHueLightnessHSLHorizontal(
42+
modifier: Modifier = Modifier,
43+
selectionRadius: Dp = 8.dp,
44+
initialColor: Color,
45+
onColorChange: (Color, String) -> Unit
46+
) {
47+
val hslArray = ColorUtil.colorToHSL(initialColor)
48+
49+
var hue by remember { mutableStateOf(hslArray[0]) }
50+
val saturation by remember { mutableStateOf(hslArray[1]) }
51+
var lightness by remember { mutableStateOf(hslArray[2]) }
52+
var alpha by remember { mutableStateOf(initialColor.alpha) }
53+
54+
55+
val currentColor =
56+
Color.hsl(hue = hue, saturation = saturation, lightness = lightness, alpha = alpha)
57+
58+
59+
Column(
60+
modifier = modifier,
61+
horizontalAlignment = Alignment.Start
62+
) {
63+
SelectorRectHueLightnessHSLHorizontal(
64+
modifier = Modifier
65+
.aspectRatio(1f, true)
66+
.fillMaxWidth(),
67+
hue = hue,
68+
lightness = lightness,
69+
selectionRadius = selectionRadius,
70+
onChange = { h, l ->
71+
hue = h
72+
lightness = l
73+
74+
onColorChange(currentColor, ColorUtil.colorToHexAlpha(currentColor))
75+
},
76+
)
77+
78+
Text(
79+
text = "OPACITY",
80+
modifier = Modifier
81+
.padding(top = 8.dp)
82+
.alpha(0.38f),
83+
fontWeight = FontWeight.Bold,
84+
style = MaterialTheme.typography.labelSmall,
85+
)
86+
Slider(
87+
modifier = Modifier,
88+
value = alpha,
89+
onValueChange = { alpha = it },
90+
brush = Brush.linearGradient(
91+
colors = listOf(
92+
currentColor.copy(alpha = 0f),
93+
currentColor.copy(alpha = 1f),
94+
)
95+
),
96+
drawChecker = true
97+
)
98+
}
99+
}
100+
101+
102+
@Composable
103+
@Preview
104+
private fun Preview() {
105+
MaterialTheme {
106+
Box(modifier = Modifier.background(Color.Red)) {
107+
Surface(
108+
modifier = Modifier
109+
.background(Color(0xFFF9F9F9))
110+
.padding(16.dp)
111+
) {
112+
var color by remember {
113+
mutableStateOf(Color(0xFF00FFF7))
114+
}
115+
Column {
116+
ColorPickerRectHueLightnessHSLHorizontal(
117+
modifier = Modifier
118+
.clip(RoundedCornerShape(8.dp)),
119+
initialColor = color,
120+
onColorChange = { c, _ -> color = c.copy(alpha = color.alpha) }
121+
)
122+
123+
124+
}
125+
}
126+
}
127+
}
128+
}
129+
130+
@Composable
131+
private fun Slider(
132+
modifier: Modifier = Modifier,
133+
value: Float,
134+
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
135+
onValueChange: (Float) -> Unit,
136+
brush: Brush,
137+
drawChecker: Boolean = false
138+
) {
139+
Row(
140+
verticalAlignment = Alignment.CenterVertically,
141+
horizontalArrangement = Arrangement.spacedBy(16.dp),
142+
) {
143+
Box(
144+
modifier = modifier.weight(1f),
145+
contentAlignment = Alignment.CenterStart
146+
) {
147+
if (drawChecker) {
148+
Box(
149+
modifier = Modifier
150+
.fillMaxWidth()
151+
.height(36.dp)
152+
.drawChecker(shape = RoundedCornerShape(50))
153+
)
154+
}
155+
156+
ColorfulSlider(
157+
value = value,
158+
modifier = Modifier,
159+
thumbRadius = 18.dp,
160+
trackHeight = 36.dp,
161+
onValueChange = { value ->
162+
onValueChange(value.roundToTwoDigits())
163+
},
164+
valueRange = valueRange,
165+
coerceThumbInTrack = true,
166+
colors = MaterialSliderDefaults.materialColors(
167+
activeTrackColor = SliderBrushColor(brush = brush),
168+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
169+
),
170+
drawInactiveTrack = false
171+
)
172+
}
173+
174+
Surface(shape = MaterialTheme.shapes.small, color = Color.White) {
175+
Text(
176+
modifier = Modifier
177+
.padding(4.dp)
178+
.padding(horizontal = 16.dp),
179+
text = "${(value * 100).roundToInt()}%",
180+
fontWeight = FontWeight.Bold,
181+
)
182+
}
183+
}
184+
185+
}

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/selector/SelectorRectHueLightnessValue.kt‎

Lines changed: 116 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ package com.smarttoolfactory.colorpicker.selector
33
import androidx.compose.foundation.Canvas
44
import androidx.compose.foundation.layout.BoxWithConstraints
55
import androidx.compose.foundation.layout.fillMaxSize
6-
import androidx.compose.runtime.*
6+
import androidx.compose.runtime.Composable
7+
import androidx.compose.runtime.getValue
8+
import androidx.compose.runtime.mutableStateOf
9+
import androidx.compose.runtime.remember
10+
import androidx.compose.runtime.setValue
711
import androidx.compose.ui.Modifier
812
import androidx.compose.ui.geometry.Offset
913
import androidx.compose.ui.graphics.Brush
@@ -13,6 +17,7 @@ import androidx.compose.ui.unit.Dp
1317
import com.smarttoolfactory.colorpicker.ui.brush.transparentToBlackVerticalGradient
1418
import com.smarttoolfactory.colorpicker.ui.brush.transparentToGrayVerticalGradient
1519
import com.smarttoolfactory.colorpicker.ui.brush.transparentToWhiteVerticalGradient
20+
import com.smarttoolfactory.colorpicker.ui.brush.whiteToTransparentToBlackHorizontalGradient
1621
import com.smarttoolfactory.colorpicker.ui.brush.whiteToTransparentToBlackVerticalGradient
1722
import com.smarttoolfactory.colorpicker.ui.gradientColorScaleHSL
1823
import com.smarttoolfactory.colorpicker.ui.gradientColorScaleHSV
@@ -196,6 +201,40 @@ fun SelectorRectHueLightnessHSL(
196201
)
197202
}
198203

204+
@Composable
205+
fun SelectorRectHueLightnessHSLHorizontal(
206+
modifier: Modifier = Modifier,
207+
hue: Float,
208+
lightness: Float,
209+
selectionRadius: Dp = Dp.Unspecified,
210+
onChange: (Float, Float) -> Unit
211+
) {
212+
213+
val selectorType = SelectorType.HLWithHSL
214+
// Red, Magenta, Blue, Cyan, Green, Yellow, Red
215+
val colorScaleHSLGradient = remember {
216+
Brush.linearGradient(
217+
colors = gradientColorScaleHSL,
218+
start = Offset.Zero,
219+
end = Offset(0f, Float.POSITIVE_INFINITY),
220+
)
221+
}
222+
val transitionGradient = remember {
223+
whiteToTransparentToBlackHorizontalGradient()
224+
}
225+
226+
SelectorRectHorizontal(
227+
modifier = modifier,
228+
hue = hue,
229+
property = lightness,
230+
selectionRadius = selectionRadius,
231+
brushHue = colorScaleHSLGradient,
232+
brushProperty = transitionGradient,
233+
selectorType = selectorType,
234+
onChange = onChange
235+
)
236+
}
237+
199238
/**
200239
* Base Selector rectangle for Hue and another property such as Saturation or Value in HSV or
201240
* Saturation or Lightness in HSL color mode.
@@ -245,7 +284,7 @@ private fun SelectorRect(
245284
else width.coerceAtMost(height) * .04f
246285

247286
val canvasModifier = Modifier
248-
.pointerInput(Unit){
287+
.pointerInput(Unit) {
249288
detectMotionEvents(
250289
onDown = {
251290
val position = it.position
@@ -285,6 +324,81 @@ private fun SelectorRect(
285324
}
286325
}
287326

327+
@Composable
328+
private fun SelectorRectHorizontal(
329+
modifier: Modifier = Modifier,
330+
hue: Float,
331+
property: Float,
332+
selectionRadius: Dp = Dp.Unspecified,
333+
brushHue: Brush,
334+
brushProperty: Brush,
335+
selectorType: SelectorType,
336+
onChange: (Float, Float) -> Unit
337+
) {
338+
BoxWithConstraints(modifier) {
339+
340+
val density = LocalDensity.current.density
341+
342+
val width = constraints.maxWidth.toFloat()
343+
val height = constraints.maxHeight.toFloat()
344+
345+
// Center position of color picker
346+
val center = Offset(width / 2, height / 2)
347+
348+
var currentPosition by remember {
349+
mutableStateOf(center)
350+
}
351+
352+
val posX = (1 - property) * width
353+
val posY = hue / 360 * height
354+
currentPosition = Offset(posX, posY)
355+
356+
val selectorRadius =
357+
if (selectionRadius != Dp.Unspecified) selectionRadius.value * density
358+
else width.coerceAtMost(height) * .04f
359+
360+
val canvasModifier = Modifier
361+
.pointerInput(Unit) {
362+
detectMotionEvents(
363+
onDown = {
364+
val position = it.position
365+
val hueChange = (position.y / width).coerceIn(0f, 1f) * 360f
366+
val propertyChange = if (selectorType == SelectorType.HSWithHSV) {
367+
(position.x / height).coerceIn(0f, 1f)
368+
} else {
369+
(1 - (position.x / height)).coerceIn(0f, 1f)
370+
}
371+
onChange(hueChange, propertyChange)
372+
it.consume()
373+
374+
},
375+
onMove = {
376+
val position = it.position
377+
val hueChange = (position.y / width).coerceIn(0f, 1f) * 360f
378+
val propertyChange = if (selectorType == SelectorType.HSWithHSV) {
379+
(position.x / height).coerceIn(0f, 1f)
380+
} else {
381+
(1 - (position.x / height)).coerceIn(0f, 1f)
382+
}
383+
onChange(hueChange, propertyChange)
384+
it.consume()
385+
},
386+
delayAfterDownInMillis = 20
387+
)
388+
}
389+
390+
SelectorRectImpl(
391+
modifier = canvasModifier,
392+
selectorPosition = currentPosition,
393+
brushHue = brushHue,
394+
brushProperty = brushProperty,
395+
selectorRadius = selectorRadius
396+
)
397+
398+
}
399+
}
400+
401+
288402
@Composable
289403
private fun SelectorRectImpl(
290404
modifier: Modifier,

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/ui/brush/Brush.kt‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,20 @@ fun whiteToTransparentToBlackVerticalGradient(
5656
)
5757
}
5858

59+
fun whiteToTransparentToBlackHorizontalGradient(
60+
startX: Float = 0.0f,
61+
endX: Float = Float.POSITIVE_INFINITY
62+
): Brush {
63+
return Brush.horizontalGradient(
64+
0.0f to Color.White,
65+
0.5f to WhiteTransparent,
66+
0.5f to Color.Transparent,
67+
1f to Color.Black,
68+
startX = startX,
69+
endX = endX
70+
)
71+
}
72+
5973
fun whiteToBlackGradient(
6074
startY: Float = 0.0f,
6175
endY: Float = Float.POSITIVE_INFINITY

‎jitpack.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
jdk:
2+
- openjdk17

0 commit comments

Comments
 (0)