I ported this color wheel widget from Swift/UIKit....

# compose

[Travis Griggs]

I ported this color wheel widget from Swift/UIKit. In addition to positioning a target part of the wheel at the top (which aligns with some other elements), the user can click on the wheel to specify a new target hue.

@Composable
fun ColorWheel(initialHue: Double, onSelect: UnaryAction<Double?>, modifier: Modifier = Modifier) {
   // ...some initial variables setup
   Canvas(modifier = modifier.pointerInput(Unit) {
      detectTapGestures { tap ->
         val r = (minOf(size.width, size.height)).float.half - WheelInset
         val c = Offset(size.width.float.half, r + WheelInset)
         val fromCenter = tap - c
         val rFraction = fromCenter.r / r
         // ... figure out what it's closest to...
         onSelect(targetHue)
      }
   }) {
      val r = (minOf(size.width, size.height)).half - WheelInset
      val c = Offset(size.width.half, r + WheelInset)
      val outerBox = Rect(c, r)
      val innerBox = Rect(c, r.half)
      // .. bunch of drawing code
   }
}

One of the things that bothers me here, is that I end up recomputing the center/radius of the "area" in both the pointerInput code as well as the DrawScope code. It seems that if you're doing a custom view with custom interactions, you have to duplicate bounds relative geometry code between the two scopes. Is there a better way that I'm missing?

[Luke]

Maybe wrapping it in a BoxWithConstraints would work?