This feature is exactly what I'm looking for. Your project should be integrated into Jetpack Compose core. ❤️

At least I'm impressed how difficult that is and that's not yet a standard functionality. ^^

I try to use your lib as you already do everything I need.

Just have to look how I can add this swipe gesture to go to the last/next image.

Ohh nooo... 😞 @Albert Chang It looks like your library is not compatible mit compose-jb ^^

You are right about desktop users with touchpad - these 2-in-1 convertible devices 🤔 I think I will leave that group out for now. 🙈

@Albert Chang I got your framework working on Android. Good job. 👍 It also compiles for compose-jb if I just remove the FloatRange annotations. So it's not that incompatible. But of course scroll wheel is not supported. I'm looking into if I can add that without breaking things. Do you plan to improve on the white borders that occur if you scroll in all the way into an image that does not fit the aspect ratio of the screen? Google Photos doesn't allow to pan into that area. I can try do describe it better and open a issue for it on GitHub if you wish. 🙂

@Albert Chang Works now on Desktop, too - if I count out the pinch-to-zoom gesture on Notebooks which seems to be unsupported in general. As said I only needed to remove the

FloatRange

annotations, which are not available to compose-jb. I replaced

fastAny

and

fastForEach

with the normal versions - but I learned that including

implementation(compose("org.jetbrains.compose.ui:ui-util"))

would make that available also. I did not need to make any changes to your code for scrollwheel support thanks to the exposed state:

val scope = rememberCoroutineScope()
val zoomableState = rememberZoomableState()

Zoomable(
    state = zoomableState,
    onTap = {

        if (!photoState.photoEditMode)
            store.dispatch(PhotoAction.ToggleFullScreen)
    },
    modifier = Modifier
        .weight(1.0f)
        .onMouseScrollEvent { distance ->

            scope.launch {

                zoomableState.animateScaleTo(
                    zoomableState.scale - distance
                )
            }
        }
) {
  // my Image composable
}

common:

expect fun Modifier.onMouseScrollEvent(
    onScroll: (Float) -> Unit
): Modifier

desktop:

@OptIn(ExperimentalComposeUiApi::class)
@Suppress("kotlin:S1172")
actual fun Modifier.onMouseScrollEvent(
    onScroll: (Float) -> Unit
): Modifier = Modifier.onPointerEvent(PointerEventType.Scroll) {
    onScroll(this.currentEvent.changes.first().scrollDelta.y)
}

android:

@Suppress("kotlin:S1172")
actual fun Modifier.onMouseScrollEvent(
    onScroll: (Float) -> Unit
): Modifier = this

So my question is: How important is the

FloatRange

annotation here and could it be replaced with something else? If you could get rid of it the library would be fully compatible with compose-jb and be usable on desktop. Click, double-click and panning are working out of the box.

If it's not possible I may see if I can make it possible.

Maybe you can provide both?

And thank you a lot for your help. The Android & Windows part is done. ✅ Now I need to search a lib that solved the same for iOS & macOS.