Left/right/middle mouse click/drag

[Cybermaxke]

Right now its impossible to know which mouse button was used, I would like to be able to assign different behaviors to each kind of click and drag.

[prepor]

We added mouseEvent property for PointerEvent on Desktop. You can use it as a workaround while we are working at better and (I hope) common API for Desktop and Android. I think the easiest way to get PointerEvent is by directly using new pointerInput API. For example:

private suspend fun AwaitPointerEventScope.awaitEventFirstDown(): PointerEvent {
    var event: PointerEvent
    do {
        event = awaitPointerEvent()
    } while (
        !event.changes.all { it.changedToDown() }
    )
    return event
}


var lastEvent by remember { mutableStateOf<MouseEvent?>(null) }
Text(
    modifier = Modifier.pointerInput(Unit) {
        forEachGesture {
            awaitPointerEventScope {
                lastEvent = awaitEventFirstDown().also {
                    it.changes.forEach { it.consumeDownChange() }
                }.mouseEvent
            }
        }
    },
    text = "Custom mouse event button: ${lastEvent?.button}"
)

[atoktoto]

One addition to this workaround that someone might find useful. You can user this in addition to normal .clickable {} modifier:

.clickable {
    if (lastEvent?.button == 3) {
        model.onClick()
    } else {
        dropdownMenuExpanded.value = true
    }
}
.pointerInput(Unit) {
    forEachGesture {
        awaitPointerEventScope {
            lastEvent = awaitEventFirstDown().mouseEvent
        }
    }
}

The order of modifiers matters here. Not sure why. My theory is that clickable consumes the events, and the events are processed from the last element first.

[akurasov]

@prepor do we still have anything to do here?

[ejektaflex]

Whenever I'm inside of this code, inside of pointerInput:

forEachGesture {
  awaitPointerEventScope {
    val down = awaitFirstDown()
    drag(down.id) {
      println(currentEvent.mouseEvent?.button)
    }
  }
}

The printed result I get is 0, no matter which button I've clicked.

[ejektaflex]

Furthermore, there's no way of handling mouseUp. I really would like to handle a mouse release over an element, but that doesn't seem to be possible (only mouse down). This is so that I can implement drag & drop, releasing the mouse on a different element.

[zsmb13]

Seems like this is also missing on the web.

The info is there in the native pointer events, but it's really inconvenient to get to.

Disclaimer: this modifier code here might conflict with other clicks/gestures, use with caution, the event consuming part could probably be written in a nicer way.

Modifier.pointerInput(Unit) {
    awaitPointerEventScope {
        while (true) {
            val event = awaitPointerEvent()
            val nativeEvent = event.nativeEvent
            if (nativeEvent is SkikoPointerEvent) {
                if (nativeEvent.button == SkikoMouseButtons.RIGHT && nativeEvent.kind == SkikoPointerEventKind.UP) {
                    event.changes.forEach { it.consume() } // or similar, would need to check if this works nicely with other registered listeners
                    println("Right click!")
                }
            }
        }
    }
}

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.