Creating a resizable Qml dialog-CodePudding

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

CodePudding user response：

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()
        }
    }
}