Make initial state setup

[distivi]

Hi there, cool library! Thanks for that.

For my use case would be super nice to have initial state setup before actually presenting the dialog.

Basically what I need in method CropState put my custom properties:

internal fun CropState(
    src: ImageSrc,
    transform: ImgTransform =  ImgTransform.Identity, // add
    shape: CropShape = RectCropShape, // add
   // ... here the rest of parameters like aspectLock, initialAspectRatio, region etc.
    onDone: () -> Unit = {},
): CropState = object : CropState {
    val defaultTransform: ImgTransform = transform  // modify
    val defaultShape: CropShape = shape // modify
    val defaultAspectLock: Boolean = false
    override val src: ImageSrc get() = src
    private var _transform: ImgTransform by mutableStateOf(defaultTransform)
    override var transform: ImgTransform
        get() = _transform
        set(value) {
            onTransformUpdated(transform, value)
            _transform = value
        }

    val defaultRegion = src.size.toSize().toRect()

Or maybe having separate data class with initial values, then it could be used in reset function as well.

[mr0xf00]

Thanks for the suggestion.
Currently, the CropState constuctor function is not part of the public api, also ImageCropper creates the instance internally. I guess in a future release you would have the option to pass your own CropState to ImageCropper::crop.

In the meantime you can do something like this

val cropState = imageCropper.cropState 
LaunchedEffect(key = cropState != null) {
    cropState?.let { state ->
        state.shape = TriangleCropShape
        state.aspectLock = true
    }
}
//.....
if (cropState != null) ImageCropperDialog(state = cropState)

Which would allow you change anything you want and would only be called once before the crop dialog is shown
Hope that helps !

[nguyennn-teq]

Thanks for the suggestion. Currently, the CropState constuctor function is not part of the public api, also ImageCropper creates the instance internally. I guess in a future release you would have the option to pass your own CropState to ImageCropper::crop.

In the meantime you can do something like this

val cropState = imageCropper.cropState 
LaunchedEffect(key = cropState != null) {
    cropState?.let { state ->
        state.shape = TriangleCropShape
        state.aspectLock = true
    }
}
//.....
if (cropState != null) ImageCropperDialog(state = cropState)

Which would allow you change anything you want and would only be called once before the crop dialog is shown Hope that helps !

Hope this coming soon. And give you a big thanks for the plugin

[PROBUSINESSSRL]

Hi! I'm using your library to implement a profile picture cropping feature. Ideally, I'd like to simplify the cropping experience for the user by limiting the options to a square crop with a fixed 1:1 aspect ratio.

I understand that the CropState constructor is not currently public, but I'm wondering if there could be a way to achieve this in a future release. Perhaps a parameter in the ImageCropper::crop function to set the initial aspect ratio and lock it, or a way to pass a custom CropState instance with the desired configuration.

This would greatly enhance the usability for profile picture cropping, as the only action required from the user would be to position and size the square cropping area.

Thanks again for your help and for developing this useful library!

[leandrofavarin]

Hi! I'm using your library to implement a profile picture cropping feature. Ideally, I'd like to simplify the cropping experience for the user by limiting the options to a square crop with a fixed 1:1 aspect ratio.

I understand that the CropState constructor is not currently public, but I'm wondering if there could be a way to achieve this in a future release. Perhaps a parameter in the ImageCropper::crop function to set the initial aspect ratio and lock it, or a way to pass a custom CropState instance with the desired configuration.

This would greatly enhance the usability for profile picture cropping, as the only action required from the user would be to position and size the square cropping area.

Thanks again for your help and for developing this useful library!

You can configure your cropState variable such as:

  LaunchedEffect(cropState) {
    cropState?.let { state ->
      state.shape = // Your impl. of a square shape
      state.region = state.region.setAspect(1f)
    }
  }

  // Prevent users from disabling aspect lock since we can't hide the aspect selection UI
  LaunchedEffect(cropState?.aspectLock) {
    cropState?.aspectLock = true
  }

[PROBUSINESSSRL]

Thank you!

I get --> Unresolved reference: setAspect

on

state.region.setAspect(1f)

[leandrofavarin]

Thank you!

I get --> Unresolved reference: setAspect

on

state.region.setAspect(1f)

I copied from here and kept public for my usage.

[PROBUSINESSSRL]

Hey, thanks again for the code snippet and the link. I really appreciate your help!

Unfortunately, I'm still getting an "Unresolved reference: setAspect" error when I try to implement the function. I've tried defining the function in my file and importing it from an external library, but I'm still having trouble.

Could you take a look at my code and see if you can spot what I'm doing wrong?Here's the relevant part of my code:

LaunchedEffect(cropState) {
    cropState?.let { state ->
        state.shape = RectCropShape
        state.region = state.region.setAspect(1f)
    }
}

[mahdiasd]

Hey, thanks again for the code snippet and the link. I really appreciate your help!

Unfortunately, I'm still getting an "Unresolved reference: setAspect" error when I try to implement the function. I've tried defining the function in my file and importing it from an external library, but I'm still having trouble.

Could you take a look at my code and see if you can spot what I'm doing wrong?Here's the relevant part of my code:

LaunchedEffect(cropState) {
    cropState?.let { state ->
        state.shape = RectCropShape
        state.region = state.region.setAspect(1f)
    }
}

Hi,
Add these extension functions, and then you can use setAspect(1f):

internal fun Rect.centerIn(outer: Rect): Rect =
    translate(outer.center.x - center.x, outer.center.y - center.y)

internal fun Rect.fitIn(outer: Rect): Rect {
    val scaleF = min(outer.width / width, outer.height / height)
    return scale(scaleF, scaleF)
}

internal fun Rect.scale(sx: Float, sy: Float) = setSizeTL(width = width * sx, height = height * sy)

internal fun Rect.setSizeTL(width: Float, height: Float) = Rect(offset = topLeft, size = Size(width, height))