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



  • 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
                    }
                }
            }
        }
    }
    

    }
    @



  • 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.



  • 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!



  • 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.



  • 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



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.