Improve canvas sizing mode, fix preview A/R

This commit changes the canvas sizing mode; it is now going to either
fill available space, or have a fixed size, on both directions. This
makes it behave more intuitively, and allows us to properly respect
the canvas aspect ratio in the preview. This is reflected in the UI.

That change also includes a bunch of cleanup (including addressing
Lint complaints) of the project code.

It also includes a change to how points are drawn in the gradient, to
avoid the points being squashed for non-square canvases.

Lastly, it adds an explicit output image size in the export scale
selector, allowing a better understanding of what each option means.

Author: rock3r

composeApp/src/commonMain/kotlin/des/c5inco/mesh/common/MeshGradient.kt

@@ -24,7 +24,7 @@ import androidx.compose.ui.graphics.lerp
 @Composable
 fun Modifier.meshGradient(
     points: List<List<Pair<Offset, Color>>>,
-    blendMode: BlendMode = BlendMode.DstIn,
+    gradientBlendMode: BlendMode = BlendMode.DstIn,
     resolutionX: Int = 1,
     resolutionY: Int = 1,
     showPoints: Boolean = false,
@@ -36,6 +36,15 @@ fun Modifier.meshGradient(
         }
     }
 
+    val pointsPaint = remember {
+        Paint().apply {
+            color = Color.White.copy(alpha = .9f)
+            strokeWidth = 4f
+            strokeCap = StrokeCap.Round
+            blendMode = BlendMode.SrcOver
+        }
+    }
+
     return drawWithCache {
         onDrawBehind {
             drawIntoCanvas { canvas ->
@@ -52,29 +61,20 @@ fun Modifier.meshGradient(
                             colors = pointData.colors,
                             indices = indicesModifier(pointData.indices)
                         ),
-                        blendMode = blendMode,
+                        blendMode = gradientBlendMode,
                         paint = paint,
                     )
                 }
 
                 if (showPoints) {
-                    val flattenedPaint = Paint()
-                    flattenedPaint.color = Color.White.copy(alpha = .9f)
-                    flattenedPaint.strokeWidth = 4f * .001f
-                    flattenedPaint.strokeCap = StrokeCap.Round
-                    flattenedPaint.blendMode = BlendMode.SrcOver
-
-                    scale(
-                        scaleX = size.width,
-                        scaleY = size.height,
-                        pivot = Offset.Zero
-                    ) {
-                        canvas.drawPoints(
-                            pointMode = PointMode.Points,
-                            points = pointData.offsets,
-                            paint = flattenedPaint
-                        )
-                    }
+                    val intermediatePoints = pointData.offsets
+                        .map { Offset(it.x * size.width, it.y * size.height) }
+
+                    canvas.drawPoints(
+                        pointMode = PointMode.Points,
+                        points = intermediatePoints,
+                        paint = pointsPaint
+                    )
                 }
             }
         }
@@ -285,4 +285,4 @@ private fun cubicPathY(point1: Offset, point2: Offset, position: Int): Path {
     return path
 }
 
-private val paint = Paint()
+private val paint = Paint()

composeApp/src/desktopMain/kotlin/des/c5inco/mesh/App.kt

@@ -3,7 +3,12 @@ package des.c5inco.mesh
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.width
-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.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.graphics.toAwtImage
@@ -26,12 +31,11 @@ fun App() {
         val coroutineScope = rememberCoroutineScope()
 
         GradientCanvas(
-            exportGraphicsLayer = exportGraphicsLayer,
-            exportScale = exportScale,
-            onPointDrag = { selectedColorPoint = it },
-            modifier = Modifier.weight(1f)
-        )
-        SidePanel(
+          exportGraphicsLayer = exportGraphicsLayer,
+          exportScale = exportScale,
+          modifier = Modifier.weight(1f)
+        ) { selectedColorPoint = it }
+      SidePanel(
             exportScale = exportScale,
             onExportScaleChange = { exportScale = it },
             onExport = {
@@ -47,4 +51,4 @@ fun App() {
             modifier = Modifier.width(280.dp)
         )
     }
-}
+}

composeApp/src/desktopMain/kotlin/des/c5inco/mesh/ui/GradientCanvas.kt

@@ -6,20 +6,15 @@ import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateListOf
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -54,24 +49,19 @@ import org.jetbrains.jewel.ui.util.thenIf
 fun GradientCanvas(
     exportGraphicsLayer: GraphicsLayer,
     exportScale: Int,
+    modifier: Modifier = Modifier,
     onPointDrag: (Pair<Int, Int>?) -> Unit = { _ -> },
-    modifier: Modifier = Modifier
 ) {
     val showPoints by remember { AppState::showPoints }
     val resolution by remember { AppState::resolution }
     val colors = remember { AppState.colorPoints }
 
-    val canvasWidthMode by AppState.canvasWidthMode.collectAsState()
-    val canvasHeightMode by AppState.canvasHeightMode.collectAsState()
+    val canvasSizeMode = AppState.canvasSizeMode
     var canvasWidth by remember { AppState::canvasWidth }
     var canvasHeight by remember { AppState::canvasHeight }
 
     val notifications = remember { mutableStateListOf<String>() }
 
-    val exportSize by derivedStateOf {
-        mutableStateOf(IntSize(canvasWidth, canvasHeight))
-    }
-
     val density = LocalDensity.current
 
     LaunchedEffect(Unit) {
@@ -83,7 +73,7 @@ fun GradientCanvas(
     }
 
     fun handlePositioned(coordinates: LayoutCoordinates) {
-        with (density) {
+        with(density) {
             val dpWidth = coordinates.size.width.toDp()
             val dpHeight = coordinates.size.height.toDp()
 
@@ -95,13 +85,17 @@ fun GradientCanvas(
     Box(
         contentAlignment = Alignment.Center,
         modifier = modifier
-            .background(if (AppState.canvasBackgroundColor > -1) {
-                AppState.getColor(AppState.canvasBackgroundColor)
-            } else {
-                JewelTheme.colorPalette.gray(1)
-            })
+            .background(
+                if (AppState.canvasBackgroundColor > -1) {
+                    AppState.getColor(AppState.canvasBackgroundColor)
+                } else {
+                    JewelTheme.colorPalette.gray(1)
+                }
+            )
             .fillMaxSize()
     ) {
+        val canvasAspectRatio by remember { derivedStateOf { canvasWidth.toFloat() / canvasHeight } }
+
         BoxWithConstraints(
             modifier = Modifier
                 .pointerInput(Unit) {
@@ -112,20 +106,12 @@ fun GradientCanvas(
                     )
                 }
                 .padding(32.dp)
-                .then(
-                    if (canvasWidthMode == DimensionMode.Fill) {
-                        Modifier.fillMaxWidth()
-                    } else {
-                        Modifier.width(canvasWidth.dp)
-                    }
-                )
-                .then(
-                    if (canvasHeightMode == DimensionMode.Fill) {
-                        Modifier.fillMaxHeight()
-                    } else {
-                        Modifier.height(canvasHeight.dp)
-                    }
-                )
+                .thenIf(canvasSizeMode == DimensionMode.Fixed) {
+                    aspectRatio(canvasAspectRatio)
+                }
+                .thenIf(canvasSizeMode == DimensionMode.Fill) {
+                    fillMaxSize()
+                }
         ) {
             val maxWidth = constraints.maxWidth
             val maxHeight = constraints.maxHeight
@@ -149,32 +135,32 @@ fun GradientCanvas(
 
             Box(
                 Modifier
-                    .thenIf(canvasWidthMode == DimensionMode.Fill || canvasHeightMode == DimensionMode.Fill) {
-                        Modifier.onGloballyPositioned { handlePositioned(it) }
+                    .thenIf(canvasSizeMode == DimensionMode.Fill) {
+                        onGloballyPositioned { handlePositioned(it) }
                     }
                     .clip(RoundedCornerShape(16.dp))
                     .drawWithContent {
-                        // Record content on visible graphics layer
+                        // Record content on a visible graphics layer
                         graphicsLayer.record {
                             this@drawWithContent.drawContent()
                         }
 
-                        val (width, height) = exportSize.value
-
                         // Scale and translate the export graphics layer accordingly
                         exportGraphicsLayer.apply {
                             scaleX = exportScale.toFloat()
                             scaleY = exportScale.toFloat()
 
                             when (exportScale) {
                                 3 -> {
-                                    translationX = width.toFloat() * 3
-                                    translationY = height.toFloat() * 3
+                                    translationX = canvasWidth.toFloat() * 3
+                                    translationY = canvasHeight.toFloat() * 3
                                 }
+
                                 2 -> {
-                                    translationX = width.toFloat()
-                                    translationY = height.toFloat()
+                                    translationX = canvasWidth.toFloat()
+                                    translationY = canvasHeight.toFloat()
                                 }
+
                                 else -> {
                                     translationX = 0f
                                     translationY = 0f
@@ -184,7 +170,7 @@ fun GradientCanvas(
 
                         // Record content on the export graphics layer
                         exportGraphicsLayer.record(
-                            size = IntSize(width * exportScale, height * exportScale),
+                            size = IntSize(canvasWidth * exportScale, canvasHeight * exportScale),
                         ) {
                             scale(
                                 scale = 1f / density.density,
@@ -287,4 +273,4 @@ fun GradientCanvas(
             }
         }
     }
-}
+}