Skip to content

Commit

Permalink
Merge pull request #29 from kitakkun/feature/fix_dragging_not_work_pr…
Browse files Browse the repository at this point in the history 
…operly

Fix Dragging Issue on HsvColorPicker, AlphaSlider, and BrightnessSlider
  • Loading branch information
@skydoves
skydoves authored Jul 5, 2023
2 parents c45c662 + 34f9dff commit 6642e52
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 64 deletions.
64 changes: 38 additions & 26 deletions colorpicker-compose/src/main/kotlin/com/github/skydoves/colorpicker/compose/AlphaSlider.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@

package com.github.skydoves.colorpicker.compose

import android.view.MotionEvent
import androidx.annotation.FloatRange
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.gestures.detectHorizontalDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
Expand All @@ -37,7 +38,7 @@ import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.graphics.asAndroidBitmap
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.input.pointer.pointerInteropFilter
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
Expand Down Expand Up @@ -132,31 +133,42 @@ public fun AlphaSlider(
}
bitmapSize = size
}
.pointerInteropFilter { event ->
when (event.action) {
MotionEvent.ACTION_DOWN,
MotionEvent.ACTION_MOVE,
MotionEvent.ACTION_UP -> {
// calculate wheel position.
val wheelPoint = event.x
val position: Float = if (wheelImageBitmap == null) {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
} else {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
}
controller.setAlpha(position.coerceIn(0f, 1f), fromUser = true)
true
.pointerInput(Unit) {
detectHorizontalDragGestures { change, _ ->
val wheelPoint = change.position.x
val position: Float = if (wheelImageBitmap == null) {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
} else {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
}

else -> false
controller.setAlpha(position.coerceIn(0f, 1f), fromUser = true)
}
}
.pointerInput(Unit) {
detectTapGestures { offset ->
val wheelPoint = offset.x
val position: Float = if (wheelImageBitmap == null) {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
} else {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
}
controller.setAlpha(position.coerceIn(0f, 1f), fromUser = true)
}
}
) {
Expand Down
66 changes: 40 additions & 26 deletions ...icker-compose/src/main/kotlin/com/github/skydoves/colorpicker/compose/BrightnessSlider.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@

package com.github.skydoves.colorpicker.compose

import android.view.MotionEvent
import androidx.annotation.FloatRange
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.gestures.detectHorizontalDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
Expand All @@ -40,7 +41,7 @@ import androidx.compose.ui.graphics.PaintingStyle
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.graphics.asAndroidBitmap
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.input.pointer.pointerInteropFilter
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
Expand Down Expand Up @@ -121,31 +122,44 @@ public fun BrightnessSlider(
}
bitmapSize = size
}
.pointerInteropFilter { event ->
when (event.action) {
MotionEvent.ACTION_DOWN,
MotionEvent.ACTION_MOVE,
MotionEvent.ACTION_UP -> {
// calculate wheel position.
val wheelPoint = event.x
val position: Float = if (wheelImageBitmap == null) {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
} else {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
}
controller.setBrightness(position.coerceIn(0f, 1f), fromUser = true)
true
.pointerInput(Unit) {
detectTapGestures { offset ->
// calculate wheel position.
val wheelPoint = offset.x
val position: Float = if (wheelImageBitmap == null) {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
} else {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
}

else -> false
controller.setBrightness(position.coerceIn(0f, 1f), fromUser = true)
}
}
.pointerInput(Unit) {
detectHorizontalDragGestures { change, _ ->
// calculate wheel position.
val wheelPoint = change.position.x
val position: Float = if (wheelImageBitmap == null) {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
} else {
val point = wheelPoint.coerceIn(
minimumValue = 0f,
maximumValue = bitmapSize.width.toFloat()
)
point / bitmapSize.width
}
controller.setBrightness(position.coerceIn(0f, 1f), fromUser = true)
}
}
) {
Expand Down
23 changes: 11 additions & 12 deletions ...rpicker-compose/src/main/kotlin/com/github/skydoves/colorpicker/compose/HsvColorPicker.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ package com.github.skydoves.colorpicker.compose

import android.graphics.Matrix
import android.graphics.RectF
import android.view.MotionEvent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
Expand All @@ -37,7 +38,7 @@ import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.asAndroidBitmap
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.input.pointer.pointerInteropFilter
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalContext
import kotlinx.coroutines.Dispatchers
Expand Down Expand Up @@ -133,16 +134,14 @@ public fun HsvColorPicker(
controller.imageBitmapMatrix.value = shaderMatrix
}
}
.pointerInteropFilter { event ->
when (event.action) {
MotionEvent.ACTION_DOWN,
MotionEvent.ACTION_MOVE,
MotionEvent.ACTION_UP -> {
controller.selectByCoordinate(event.x, event.y, true)
true
}

else -> false
.pointerInput(Unit) {
detectTapGestures { offset ->
controller.selectByCoordinate(offset.x, offset.y, true)
}
}
.pointerInput(Unit) {
detectDragGestures { change, _ ->
controller.selectByCoordinate(change.position.x, change.position.y, true)
}
}
) {
Expand Down

0 comments on commit 6642e52

Please sign in to comment.