Creating a resizable Qml dialog - qt

Question

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

Answer 1

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