https://kotlinlang.org logo
#compose
Title
# compose
s

Stefan Oltmann

03/14/2022, 12:37 PM
Is it correct that
.pointerInput(Unit) {}
can only take one argument? I have one call to
detectTransformGestures
, but if I add another thing like
Copy code
detectTapGestures(
    onPress = {
        println("ON PRESS")
    }
)
or
detectDragGestures
before that it's never called. Only the first of these are called and all others are ignored. I don't know how I'm supposed to combine a drag handler with a pinch-zoom detection... The "pan" does not help me, because I don't know when the drag is ended (the finger lifted).
1
a

Albert Chang

03/14/2022, 12:47 PM
detect*Gestures
are suspend functions that will never end. You can just use multiple pointer input modifiers.
s

Stefan Oltmann

03/14/2022, 1:10 PM
Wasn't aware. Thank you! That makes it a bit better. I feel
detectTransformGestures
does not go well together with
detectDragGestures
because now most of my input is recognized as
pan
, only a bit as drag. I only wanted a way to detect pinch-to-zoom on Android without the pan, but this does not seem to exist. 🤔
a

Albert Chang

03/14/2022, 1:22 PM
Yeah these two are not intended to be used together. However you can always write your own
detect*Gestures
function. See this.
s

Stefan Oltmann

03/14/2022, 1:22 PM
Thank you. I will take a look.
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 ^^
a

Albert Chang

03/14/2022, 2:58 PM
Of course. There is not even touch screen support in compose desktop.
s

Stefan Oltmann

03/14/2022, 3:01 PM
The desktop version of my photo app should use mouse to drag and scroll wheel to zoom in and out. Pinch-to-zoom via Notebook touchpad should also be possible, but that's not available right now in compose-jb ( https://github.com/JetBrains/compose-jb/issues/1953 )
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. 🙂
a

Albert Chang

03/15/2022, 12:53 AM
If you follow the sample code, that shouldn’t happen.
s

Stefan Oltmann

03/15/2022, 9:09 AM
Thank you! 🙂 Yes, the
Modifier.aspectRatio(size.width / size.height).fillMaxSize()
is important to ensure it works correctly (for me). Very nice work! ❤️ On Android at least I got now what I wanted.
👍 1
@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:
Copy code
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:
Copy code
expect fun Modifier.onMouseScrollEvent(
    onScroll: (Float) -> Unit
): Modifier
desktop:
Copy code
@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:
Copy code
@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.
a

Albert Chang

03/15/2022, 2:14 PM
Not important actually. It's just used to indicate the range of the property value. By "fully compatible" do you mean you can directly use the published artifact from maven central or you have to copy the code?
s

Stefan Oltmann

03/15/2022, 2:18 PM
I mean other than FloatRange and the fast* methods you used nothing that isn't available on compose-jb and I can fully use the feature with the mouse (after adding my
onMouseScrollEvent()
from the outside). I had to copy the code (to removed FloatRange usage). But I see a way where you could make it with little effort work for Android and compose-jb. And actually I would prefer to use it as a dependency from maven instead of copying those two classes. Just wanted that you know that you could extend the use of your library.
a

Albert Chang

03/15/2022, 2:38 PM
Yeah I can easily remove FloatRange but I just wonder if it's possible to use aar dependency in common code.
If it's not possible I may see if I can make it possible.
s

Stefan Oltmann

03/15/2022, 2:39 PM
Oh, you are right - you must provide it as JAR.
Maybe you can provide both?
a

Albert Chang

03/15/2022, 2:45 PM
Filed an issue. Will look into it when I have time.
s

Stefan Oltmann

03/15/2022, 2:50 PM
Awesome. ❤️👍
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.
a

Albert Chang

03/19/2022, 4:05 PM
I published a snapshot build (
1.5.0-mp-SNAPSHOT
) of the multiplatform version. Could you please try it and check if it works in both desktop and android modules? You can find how to use snapshot builds in the README.
s

Stefan Oltmann

03/21/2022, 8:27 AM
Just tested it. It works great. 👍🚀
👍 1
3 Views