I want to drag a specific element inside a canvas ...

# compose

[nlindberg]

I want to drag a specific element inside a canvas if the drag starts from touching in the region of that element. If not then I would like to scroll the canvas parents box horizontal scroll. Im currently trying to figure out how to correctly pass up the drag from the pointerInput to the horizontalScroll. The below is what I currently have, but it doesn’t take into account flings. Any ideas?

Box(
    Modifier
        .fillMaxHeight()
        .horizontalScroll(scrollState)
) {
    CanvasComposable(data = chartData, settings = chartSettings, onHorizontalDrag = { dragX ->
        scrollState.dispatchRawDelta(-dragX)
    })

Canvas(
    modifier.then(
        Modifier
            .fillMaxHeight()
            .clipToBounds()
            .pointerInput(Unit) {
                // If drag is starting on a specific rectangle inside the canvas drag that otherwise scroll the parent horizontal 
                // composable according to the x dragAMount and (Fling?)
                detectDragGestures(
                    onDragStart = {},
                    onDragEnd = {},
                    onDrag = {change, dragAmount ->
                        change.consume()
                        onHorizontalDrag(dragAmount.x)
                        //dragOffsetStart += dragAmount.x
                    }
                )
            }
    )

[Zach Klippenstein (he/him) [MOD]]

This is what consumption is for. If your lower-level node doesn't want to handle the change, it shouldn't consume it, to allow a higher-level node to consume it instead.

[nlindberg]

If I don't call consume it still doesn't scroll, or maybe I'm misunderstanding?

[Zach Klippenstein (he/him) [MOD]]

I think detectDrag might be doing its own consume? I'm not at my computer at the moment but you might wanna check the source. If it is, then you could try a custom implementation.

[nlindberg]

Aight will check when I come back from 🌴🏝️ thanks for the help