Skip to content

Commit 6f6ace3

Browse files
SmartToolFactorySmartToolFactory
committed
update GradientColor
1 parent 3380efc commit 6f6ace3

File tree

4 files changed

+192
-113
lines changed

4 files changed

+192
-113
lines changed

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/model/GradientColor.kt‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,64 @@
11
package com.smarttoolfactory.colorpicker.model
22

33
import androidx.compose.runtime.*
4+
import androidx.compose.ui.geometry.Offset
5+
import androidx.compose.ui.geometry.Size
46
import androidx.compose.ui.graphics.Brush
57
import androidx.compose.ui.graphics.Color
68
import androidx.compose.ui.graphics.SolidColor
79
import androidx.compose.ui.graphics.TileMode
8-
import androidx.compose.ui.unit.DpOffset
9-
import androidx.compose.ui.unit.DpSize
1010
import com.smarttoolfactory.colorpicker.selector.gradient.GradientType
1111
import com.smarttoolfactory.colorpicker.ui.GradientAngle
1212
import com.smarttoolfactory.colorpicker.ui.GradientOffset
1313

14+
@Composable
15+
fun rememberGradientColor(): GradientColor {
16+
return remember {
17+
GradientColor()
18+
}
19+
}
1420

1521
class GradientColor {
1622

17-
var dpSize: DpSize by mutableStateOf(DpSize.Zero)
18-
var brushColor = BrushColor()
19-
var gradientType: GradientType by mutableStateOf( GradientType.Linear)
20-
val colorStop = mutableStateListOf<Pair<Float, Color>>()
23+
var size by mutableStateOf(Size.Zero)
24+
val brushColor: BrushColor
25+
get() {
26+
val colorStops = colorStops.toTypedArray()
27+
val brush = when (gradientType) {
28+
GradientType.Linear -> Brush.linearGradient(
29+
colorStops = colorStops,
30+
start = gradientOffset.start,
31+
end = gradientOffset.end,
32+
tileMode = tileMode
33+
)
34+
GradientType.Radial -> Brush.radialGradient(
35+
colorStops = colorStops,
36+
center = Offset(
37+
x = size.width * centerFriction.x,
38+
y = size.height * centerFriction.y
39+
),
40+
radius = (size.width.coerceAtLeast(size.height)) / 2 * radiusFriction
41+
)
42+
GradientType.Sweep -> Brush.sweepGradient(
43+
colorStops = colorStops,
44+
center = Offset(
45+
x = size.width * centerFriction.x,
46+
y = size.height * centerFriction.y
47+
)
48+
)
49+
}
50+
return BrushColor(brush = brush)
51+
}
52+
var gradientType: GradientType by mutableStateOf(GradientType.Linear)
53+
var colorStops = mutableStateListOf(
54+
0.0f to Color.Red,
55+
0.3f to Color.Green,
56+
1.0f to Color.Blue,
57+
)
2158
var tileMode by mutableStateOf(TileMode.Clamp)
2259
var gradientOffset by mutableStateOf(GradientOffset(GradientAngle.CW0))
23-
var center = derivedStateOf { DpOffset(dpSize.width / 2, dpSize.height / 2) }
24-
var radiusFraction: Float = .5f
60+
var centerFriction by mutableStateOf(Offset(.5f, .5f))
61+
var radiusFriction: Float by mutableStateOf(.5f)
2562
}
2663

2764
/**

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/selector/gradient/SelectorGradient.kt‎

Lines changed: 143 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import androidx.compose.runtime.*
1212
import androidx.compose.ui.Alignment
1313
import androidx.compose.ui.Modifier
1414
import androidx.compose.ui.draw.clip
15+
import androidx.compose.ui.geometry.Offset
1516
import androidx.compose.ui.geometry.Size
1617
import androidx.compose.ui.graphics.Brush
1718
import androidx.compose.ui.graphics.Color
@@ -20,7 +21,7 @@ import androidx.compose.ui.platform.LocalDensity
2021
import androidx.compose.ui.unit.DpSize
2122
import androidx.compose.ui.unit.dp
2223
import androidx.compose.ui.unit.sp
23-
import com.smarttoolfactory.colorpicker.ui.GradientAngle
24+
import com.smarttoolfactory.colorpicker.model.GradientColor
2425
import com.smarttoolfactory.colorpicker.ui.GradientOffset
2526
import com.smarttoolfactory.colorpicker.ui.Grey800
2627
import com.smarttoolfactory.colorpicker.ui.Orange400
@@ -47,9 +48,10 @@ internal val gradientTileModeOptions = listOf("Clamp", "Repeated", "Mirror", "De
4748
fun GradientSelector(
4849
color: Color,
4950
dpSize: DpSize,
50-
onGradientChange: (Brush) -> Unit
51+
gradientColor: GradientColor
5152
) {
5253

54+
5355
val size = with(LocalDensity.current) {
5456
Size(
5557
dpSize.width.toPx(),
@@ -69,6 +71,7 @@ fun GradientSelector(
6971
else -> TileMode.Decal
7072
}
7173

74+
7275
// Color Stops
7376
val colorStops = remember {
7477
mutableStateListOf(
@@ -78,10 +81,11 @@ fun GradientSelector(
7881
)
7982
}
8083

81-
// Offset for Linear Gradient
82-
var gradientOffset by remember {
83-
mutableStateOf(GradientOffset(GradientAngle.CW0))
84-
}
84+
gradientColor.size = size
85+
gradientColor.gradientType = gradientType
86+
gradientColor.tileMode = tileMode
87+
gradientColor.colorStops = colorStops
88+
8589

8690
Column(
8791
modifier = Modifier
@@ -113,32 +117,25 @@ fun GradientSelector(
113117

114118
// Display Brush
115119
BrushDisplay(
116-
gradientType = gradientType,
117-
colorStops = colorStops,
118-
gradientOffset = gradientOffset,
119120
size = size,
120-
tileMode = tileMode
121-
) { brush: Brush ->
122-
onGradientChange(brush)
123-
}
121+
gradientColor = gradientColor
122+
)
124123

125124
// Gradient type selection
126125
when (gradientType) {
127-
GradientType.Linear -> LinearGradientSelection(
128-
size,
129-
) { offset: GradientOffset ->
130-
gradientOffset = offset
131-
}
132-
GradientType.Radial -> RadialGradientSelection(
133-
size,
134-
) { offset: GradientOffset ->
135-
gradientOffset = offset
136-
}
137-
GradientType.Sweep -> SweepGradientSelection(
138-
size,
139-
) { offset: GradientOffset ->
140-
gradientOffset = offset
141-
}
126+
GradientType.Linear ->
127+
LinearGradientSelection(size) { offset: GradientOffset ->
128+
gradientColor.gradientOffset = offset
129+
}
130+
GradientType.Radial ->
131+
RadialGradientSelection { centerFriction: Offset, radiusFriction: Float ->
132+
gradientColor.centerFriction = centerFriction
133+
gradientColor.radiusFriction = radiusFriction
134+
}
135+
GradientType.Sweep ->
136+
SweepGradientSelection { centerFriction: Offset ->
137+
gradientColor.centerFriction = centerFriction
138+
}
142139
}
143140

144141
// Color Stops and Colors
@@ -162,68 +159,141 @@ fun GradientSelector(
162159

163160
@Composable
164161
internal fun BrushDisplay(
165-
gradientType: GradientType,
166-
colorStops: List<Pair<Float, Color>>,
167-
gradientOffset: GradientOffset,
168162
size: Size,
169-
tileMode: TileMode,
170-
onBrushChange: (Brush) -> Unit
163+
gradientColor: GradientColor
171164
) {
172-
val brush = when (gradientType) {
173-
GradientType.Linear -> {
174-
if (colorStops.size == 1) {
175-
val brushColor = colorStops.first().second
176-
Brush.linearGradient(listOf(brushColor, brushColor))
177-
} else {
178-
Brush.linearGradient(
179-
colorStops = colorStops.toTypedArray(),
180-
start = gradientOffset.start,
181-
end = gradientOffset.end,
182-
tileMode = tileMode
183-
)
184-
}
185-
}
186-
GradientType.Radial -> {
187-
Brush.radialGradient(
188-
colorStops = colorStops.toTypedArray(),
189-
center = gradientOffset.start,
190-
radius = size.width
191-
)
192-
}
193-
194-
GradientType.Sweep -> {
195-
Brush.sweepGradient(
196-
colorStops = colorStops.toTypedArray(),
197-
center = gradientOffset.start
198-
)
199-
}
200-
201-
}
202-
203-
val contentWidth = size.width
204-
val contentHeight = size.height
205-
206-
onBrushChange(brush)
207-
208165
// Display Brush
209166
BoxWithConstraints(
210167
modifier = Modifier
211168
.fillMaxWidth()
212169
.height(150.dp),
213170
contentAlignment = Alignment.Center
214171
) {
172+
173+
val contentWidth = size.width
174+
val contentHeight = size.height
175+
val contentAspectRatio = contentWidth / contentHeight
176+
177+
val boxHeight = constraints.maxHeight
178+
val boxWidth = boxHeight * contentAspectRatio
179+
val gradientType = gradientColor.gradientType
180+
val colorStops = gradientColor.colorStops
181+
val gradientOffset = gradientColor.gradientOffset
182+
val tileMode = gradientColor.tileMode
183+
val centerFriction = gradientColor.centerFriction
184+
val radiusFriction = gradientColor.radiusFriction
185+
186+
val center = Offset(
187+
boxWidth * centerFriction.x,
188+
boxHeight * centerFriction.y
189+
)
190+
191+
val radius = boxHeight * radiusFriction
192+
193+
val brush = when (gradientType) {
194+
GradientType.Linear -> {
195+
if (colorStops.size == 1) {
196+
val brushColor = colorStops.first().second
197+
Brush.linearGradient(listOf(brushColor, brushColor))
198+
} else {
199+
Brush.linearGradient(
200+
colorStops = colorStops.toTypedArray(),
201+
start = gradientOffset.start,
202+
end = gradientOffset.end,
203+
tileMode = tileMode
204+
)
205+
}
206+
}
207+
GradientType.Radial -> {
208+
Brush.radialGradient(
209+
colorStops = colorStops.toTypedArray(),
210+
center = center,
211+
radius = radius
212+
)
213+
}
214+
215+
GradientType.Sweep -> {
216+
Brush.sweepGradient(
217+
colorStops = colorStops.toTypedArray(),
218+
center = center
219+
)
220+
}
221+
}
222+
215223
Box(
216224
modifier = Modifier
217225
.height(maxHeight)
218-
.aspectRatio(contentWidth / contentHeight)
226+
.aspectRatio(contentAspectRatio)
219227
.background(brush)
220-
) {
221-
222-
}
228+
)
223229
}
224230

225231
}
226232

233+
//@Composable
234+
//internal fun BrushDisplay(
235+
// gradientType: GradientType,
236+
// colorStops: List<Pair<Float, Color>>,
237+
// gradientOffset: GradientOffset,
238+
// size: Size,
239+
// tileMode: TileMode,
240+
// onBrushChange: (Brush) -> Unit
241+
//) {
242+
// val brush = when (gradientType) {
243+
// GradientType.Linear -> {
244+
// if (colorStops.size == 1) {
245+
// val brushColor = colorStops.first().second
246+
// Brush.linearGradient(listOf(brushColor, brushColor))
247+
// } else {
248+
// Brush.linearGradient(
249+
// colorStops = colorStops.toTypedArray(),
250+
// start = gradientOffset.start,
251+
// end = gradientOffset.end,
252+
// tileMode = tileMode
253+
// )
254+
// }
255+
// }
256+
// GradientType.Radial -> {
257+
// Brush.radialGradient(
258+
// colorStops = colorStops.toTypedArray(),
259+
// center = gradientOffset.start,
260+
// radius = size.width
261+
// )
262+
// }
263+
//
264+
// GradientType.Sweep -> {
265+
// Brush.sweepGradient(
266+
// colorStops = colorStops.toTypedArray(),
267+
// center = gradientOffset.start
268+
// )
269+
// }
270+
//
271+
// }
272+
//
273+
// val contentWidth = size.width
274+
// val contentHeight = size.height
275+
//
276+
// onBrushChange(brush)
277+
//
278+
// // Display Brush
279+
// BoxWithConstraints(
280+
// modifier = Modifier
281+
// .fillMaxWidth()
282+
// .height(150.dp),
283+
// contentAlignment = Alignment.Center
284+
// ) {
285+
// Box(
286+
// modifier = Modifier
287+
// .height(maxHeight)
288+
// .aspectRatio(contentWidth / contentHeight)
289+
// .background(brush)
290+
// ) {
291+
//
292+
// }
293+
// }
294+
//
295+
//}
296+
227297
@Composable
228298
internal fun ColorStopSelection(
229299
color: Color,

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/selector/gradient/SelectorGradientRadial.kt‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,17 @@ import androidx.compose.foundation.layout.fillMaxWidth
44
import androidx.compose.runtime.*
55
import androidx.compose.ui.Modifier
66
import androidx.compose.ui.geometry.Offset
7-
import androidx.compose.ui.geometry.Size
8-
import com.smarttoolfactory.colorpicker.ui.GradientOffset
97

108
@Composable
119
internal fun RadialGradientSelection(
12-
size: Size,
13-
onGradientOffsetChange: (GradientOffset) -> Unit
10+
onRadialDimensionsChange: (Offset, Float) -> Unit
1411
) {
1512

1613
var centerX by remember { mutableStateOf(.5f) }
1714
var centerY by remember { mutableStateOf(.5f) }
1815
var radius by remember { mutableStateOf(.5f) }
1916

20-
onGradientOffsetChange(
21-
GradientOffset(
22-
start = Offset(
23-
x = size.width * centerX,
24-
y = size.height * centerY
25-
),
26-
end = Offset(
27-
x = size.width * centerX,
28-
y = size.height * centerY
29-
)
30-
)
31-
)
17+
onRadialDimensionsChange(Offset(centerX, centerY), radius)
3218

3319
SliderWithPercent(
3420
modifier = Modifier.fillMaxWidth(),

0 commit comments

Comments
 (0)