QtQuick 2.1 on OS X: MouseArea within a ScrollView doesn't respond to events under scrollbars

? Offline

I'm rather new to Qt Quick, so please bear with me.

A little background on my project:
I develop on a Mac with 10.8.4 using a local build of Qt 5.1. To introduce myself to Quick, I'm creating a Quick version of an existing widget-based GUI. The idea is to provide multiple cut views (XY, XZ, YZ, 3D) of a ray-traced 3D model to the user.

Implementation details:
To be able to display all cut views simultaneously, I chose to utilize a top-level SplitView with two more embedded in it so I have what is now a 2x2 set of panels. Modeling the layout using static images, I embedded an Image within each SplitView. The images (cut planes) could all be different dimensions and might not fit in their respective SplitView without cropping and I don't want to scale the images, so I place the Image within a ScrollView. My hierarchy now becomes SplitView -> ScrollView -> Image.

In order to interact with the images generated by the ray tracing and perform panning, zooming, etc., I added a MouseArea to the Image. The MouseArea fills the area occupied by the Image. Hovering the mouse over the image now allows me to indicate mouse position in world coordinates along with metadata associated with said position (material, object ID, etc.).

The issue at hand:
When I hover the mouse over the bottom/right portions of the image, the MouseArea does not report the mouse movements and update my StatusBar with the appropriate position information. This appears to be a result of the overlap of the MouseArea and the scrollbars in its parent ScrollView.

Is there a way to ensure that the mouse movement is recognized/reported by the MouseArea even though it sits underneath the scrollbar?

Sample code follows:

@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.0

ApplicationWindow
{
height: Screen.height * 3 / 4
title: qsTr( "QuickGui" )
width: Screen.width * 3 / 4

menuBar: MenuBar
{
    Menu
    {
        title: qsTr( "File" )

        MenuItem
        {
            onTriggered: Qt.quit();
            text: qsTr( "Exit" )
        }
    }
}

statusBar: StatusBar
{
    RowLayout
    {
        spacing: 20

        Label
        {
            id: object
            text: "Object "
        }

        Label
        {
            id: position
            text: ""
        }
    }
}

SplitView
{
    anchors.fill: parent
    orientation: Qt.Vertical

    SplitView
    {
        height: parent.height / 2
        width: parent.width

        ScrollView
        {
            width: parent.width / 2

            Image
            {
                id: viewxy

                source: "/Path/to/xy/image.png"

                MouseArea
                {
                    anchors.fill: parent
                    hoverEnabled: true
                    onExited: position.text = ""
                    onPositionChanged: position.text = "X: " + mouseX + "; Y: " + mouseY
                }
            }
        }

        ScrollView
        {
            Image
            {
                id: viewxz

                source: "/Path/to/xz/image.png"

                MouseArea
                {
                    anchors.fill: parent
                    hoverEnabled: true
                    onExited: position.text = ""
                    onPositionChanged: position.text = "X: " + mouseX + "; Z: " + mouseY
                }
            }
        }
    }

    SplitView
    {
        height: parent.height / 2
        width: parent.width

        ScrollView
        {
            width: parent.width / 2

            Image
            {
                id: viewyz

                source: "/Path/to/yz/image.png"

                MouseArea
                {
                    anchors.fill: parent
                    hoverEnabled: true
                    onExited: position.text = ""
                    onPositionChanged: position.text = "Y: " + mouseX + "; Z: " + mouseY
                }
            }
        }

        ScrollView
        {
            Image
            {
                id: view3d

                MouseArea
                {
                    anchors.fill: parent
                    hoverEnabled: true
                }
            }
        }
    }
}

}
@

Jens

You could theoretically try to reparent the mouse area into the scrollView, ignore the click event and manually add contentX, contentY offsets but this will likely not work for hover events which would lead the scroll bars to get inconsistent states.

A more clean workaround would be to do:
@
style: ScrollViewStyle{}
@

This will replace the mac look and feel with a generic or custom styled one which will not make use of the transient scroll bars.

That said, there is currently no clean way to resolve this particular issue and I think it is a valid bug that will require a fix in ScrollView or possibly MouseArea itself. You can certainly file a bug report on the bug tracker for this issue with the example attached.

? Offline

Jens,

Thank you very much for your response. If you feel the observed behavior is a bug, I'll submit a report so someone will be able to take a closer look at this.

Upon setting the ScrollView:style property to ScrollViewStyle{}, I noticed that the image no longer sits underneath the scrollbars in the ScrollView. The image contents are, in essence, pushed above/to the left of the scrollbars, thereby allowing the MouseArea to work as expected. It would just be the developer's decision as to whether the lack of a native look/feel to the scrollbars is acceptable in his/her use case.

Thanks!

Jens

Exactly. Only mac support transient scrollbars where the behaviour is that the scroll bars overlap content but fade out when not moving. I think we will add some API to always show scroll bars" in 5.2 as well, but for the time being I think the current mac behaviour should be considered a bug and it should be possible for the scroll bars to not eat mouse events when the scroll bars are not visible.

Jens

Note that I have created a task for this:
https://bugreports.qt-project.org/browse/QTBUG-32400

And I have a proposed fix here:
https://codereview.qt-project.org/#change,60981

? Offline

Jens,

Thank you for submitting a bug report (and proposed fix) - you beat me to it! And thanks again for your feedback and time/efforts.