qtqmlqtquick2qtquickcontrols2

Creating a resizable Qml dialog


I am trying to make a resizable dialog:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.12

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test")

    Dialog {
        id: dlg
        x: 10
        y: 10
        width: 100
        height: 100
        visible: true

        Rectangle {
            anchors.fill: parent
            color: "blue"
        }

        MouseArea {
            height: 40
            width: 40
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            Rectangle {
                anchors.fill: parent
                color: "red"
            }

            property real startX: 0
            property real startY: 0
            property real startWidth: 0
            property real startHeight: 0

            onPressed: {
                startX = mouseX;
                startY = mouseY;

                startWidth = dlg.width;
                startHeight = dlg.height;
            }

            function fnc_updatePos() {
                if (pressed) {
                    var deltaX = mouseX-startX;
                    var deltaY = mouseY-startY;
                    dlg.width = startWidth + deltaX;
                    dlg.height = startHeight + deltaY;
                }
            }

            onPositionChanged: fnc_updatePos()
        }
    }
}

The code resizes the dialog but the dialog flickers during dragging. The problem is that the mouse area is part of the dialog. How can the code be improved for proper scaling of the popup dialog?

Regards


Solution

  • I post the answer instead of deleting the question, just in case someone is stumbling upon the same problem.

    mapToItem is the solution:

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Window 2.12
    ApplicationWindow {
        id: mainWindow
        width: 640
        height: 480
        visible: true
        title: qsTr("Test")
    
        Dialog {
            id: dlg
            x: 10
            y: 10
            width: 100
            height: 100
            visible: true
    
            Rectangle {
                anchors.fill: parent
                color: "blue"
            }
    
            MouseArea {
                height: 40
                width: 40
                anchors.right: parent.right
                anchors.bottom: parent.bottom
    
                Rectangle {
                    anchors.fill: parent
                    color: "red"
                }
    
                property real startX: 0
                property real startY: 0
                property real startWidth: 0
                property real startHeight: 0
    
                onPressed: {
                    var pos = mapToItem(mainWindow.contentItem, mouseX, mouseY)
                    startX = pos.x;
                    startY = pos.y;
    
                    startWidth = dlg.width;
                    startHeight = dlg.height;
                }
    
                function fnc_updatePos() {
                    if (pressed) {
                        var pos = mapToItem(mainWindow.contentItem, mouseX, mouseY)
                        //console.log(pos)
                        var deltaX = pos.x-startX;
                        var deltaY = pos.y-startY;
                        dlg.width = startWidth + deltaX;
                        dlg.height = startHeight + deltaY;
                    }
                }
    
                onPositionChanged: fnc_updatePos()
            }
        }
    }