How can I resize frameless window in QML? - c++

Question

How can I return resize logic of borders in Frameless Window?
The frame windows has this logic:
Code in QML:
import QtQuick
import QtQuick.Controls 2.5
import Qt5Compat.GraphicalEffects
import NR 1.0
Window {
id: mainWindow
width: 640
height: 720
visible: true
title: qsTr("Hello World")
flags: Qt.Window | Qt.FramelessWindowHint
color: "transparent"
// (1)
MouseArea {
id: bottomArea
height: 5
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
cursorShape: Qt.SizeVerCursor
onPressed: {
previousY = mouseY
}
onMouseYChanged: {
var dy = mouseY - previousY
mainWindow.setHeight(mainWindow.height + dy)
}
}
// Some code of another Items here
}
I tried this code for left side:
MouseArea {
id: leftSideMouseArea
anchors.fill: parent
property point lastMousePos: Qt.point(0, 0)
onPressed: { lastMousePos = Qt.point(mouseX, mouseY); }
onMouseXChanged: mainWindow.width += (mouseX + lastMousePos.x)
}
I put this code in (1) place, but it doesn't work - on click (without move) windows resize to the rigth and app crashes with error:
QQuickPaintedItem::textureProvider: can only be queried on the
rendering thread of an exposed window
This looks like on picture:
Can you help me?
Thanks!

Answer 1

Since Qt5.15, we have startSystemResize, which performs a native resizing and is recommended against using methods like comparing the click position to the current position.
The function is very simple; once you pass an edge, the window begins to resize.
An example of a frameless window is shown below:
CustomWindow.QML
Change the offset from the window's edges where the mouse can be pressed by using this property.
property int edgeOffest: 5
Also for moving the window as well You can use a DragHandler, which, when activated, calls startSystemMove.
Window {
width: 200; height: 100
color: '#fab'
flags: Qt.Window | Qt.FramelessWindowHint
DragHandler {
onActiveChanged: if(active) startSystemMove();
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton
property int edges: 0;
property int edgeOffest: 5;
function setEdges(x, y) {
edges = 0;
if(x < edgeOffest) edges |= Qt.LeftEdge;
if(x > (width - edgeOffest)) edges |= Qt.RightEdge;
if(y < edgeOffest) edges |= Qt.TopEdge;
if(y > (height - edgeOffest)) edges |= Qt.BottomEdge;
}
cursorShape: {
return !containsMouse ? Qt.ArrowCursor:
edges == 3 || edges == 12 ? Qt.SizeFDiagCursor :
edges == 5 || edges == 10 ? Qt.SizeBDiagCursor :
edges & 9 ? Qt.SizeVerCursor :
edges & 6 ? Qt.SizeHorCursor : Qt.ArrowCursor;
}
onPositionChanged: setEdges(mouseX, mouseY);
onPressed: {
setEdges(mouseX, mouseY);
if(edges && containsMouse) {
startSystemResize(edges);
}
}
}
}
Preview
Final Notes
Still, I do not recommend developing a custom window with custom functionality, which forces you to handle a lot of functions while still not feeling like a native one.
However, there are a few github projects that offered some helper libraries for this, so take a look at those.
https://github.com/antonypro/QGoodWindow
https://github.com/wangwenx190/framelesshelper

Answer 2

I can't think of better way to do this
Here is a working example:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
id: window
width: 640
height: 480
visible: true
title: qsTr("Hello World")
flags: Qt.Window | Qt.FramelessWindowHint
Rectangle
{
id: dragItemRight
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 5
color: "red"
x: window.width - width
onXChanged:
{
if (dragItemRightMouse.drag.active)
{
window.width = dragItemRight.x + width
}
}
MouseArea
{
id: dragItemRightMouse
anchors.fill: parent
drag.target: parent
drag.axis: Drag.XAxis
cursorShape: Qt.SizeHorCursor
drag.minimumX: 300
drag.onActiveChanged:
{
if (!drag.active)
{
dragItemRight.x = Qt.binding(function() { return window.width - width })
}
}
}
}
Rectangle
{
id: dragItemBottom
anchors.left: parent.left
anchors.right: parent.right
height: 5
color: "red"
y: window.height - height
onYChanged:
{
if (dragItemBottomMouse.drag.active)
{
window.height = dragItemBottom.y + height
}
}
MouseArea
{
id: dragItemBottomMouse
anchors.fill: parent
drag.target: parent
drag.axis: Drag.YAxis
cursorShape: Qt.SizeVerCursor
drag.minimumY: 300
drag.onActiveChanged:
{
if (!drag.active)
{
dragItemBottom.y = Qt.binding(function() { return window.height - height })
}
}
}
}
Rectangle
{
id: dragItemBottomRight
width: 5
height: 5
color: "green"
x: window.width - width
y: window.height - height
onYChanged:
{
if (dragItemBottomRightMouse.drag.active)
{
window.height = dragItemBottomRight.y + height
}
}
onXChanged:
{
if (dragItemBottomRightMouse.drag.active)
{
window.width = dragItemBottomRight.x + width
}
}
MouseArea
{
id: dragItemBottomRightMouse
anchors.fill: parent
drag.target: parent
drag.axis: Drag.XAndYAxis
drag.minimumX: 300
drag.minimumY: 300
cursorShape: Qt.SizeFDiagCursor
drag.onActiveChanged:
{
if (!drag.active)
{
dragItemBottomRight.x = Qt.binding(function() { return window.width - width })
dragItemBottomRight.y = Qt.binding(function() { return window.height - height })
}
}
}
}
}

Answer 3

I found the solution:
import QtQuick
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
import NR 1.0
Window {
id: mainWindow
width: 640
height: 720
visible: true
title: qsTr("Hello World")
flags: Qt.Window | Qt.FramelessWindowHint
color: "transparent"
property point startMousePos
property point startWindowPos
property size startWindowSize
function absoluteMousePos(mouseArea) {
var windowAbs = mouseArea.mapToItem(null, mouseArea.mouseX, mouseArea.mouseY)
return Qt.point(windowAbs.x + mainWindow.x,
windowAbs.y + mainWindow.y)
}
MouseArea {
id: moveArea
anchors.fill: title
property point mPos;
onPressed: {
mPos = Qt.point(mouseX, mouseY)
}
onPositionChanged: {
mainWindow.setX(mainWindow.x + mouseX - mPos.x)
mainWindow.setY(mainWindow.y + mouseY - mPos.y)
}
}
MouseArea {
id: leftArea
anchors.top: parent.top
anchors.topMargin: 48
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
cursorShape: Qt.SizeHorCursor
width: 5
onPressed: {
startMousePos = absoluteMousePos(leftArea)
startWindowPos = Qt.point(mainWindow.x, mainWindow.y)
startWindowSize = Qt.size(mainWindow.width, mainWindow.height)
}
onMouseXChanged: {
var abs = absoluteMousePos(leftArea)
var newWidth = Math.max(mainWindow.minimumWidth, startWindowSize.width - (abs.x - startMousePos.x))
var newX = startWindowPos.x - (newWidth - startWindowSize.width)
mainWindow.x = newX
mainWindow.width = newWidth
}
Rectangle {
anchors.fill: parent
color: "red"
}
}
MouseArea {
id: rightArea
width: 5
x: parent.width - rightArea.width
anchors.right: parent.rigth
anchors.top: parent.top
anchors.rightMargin: 5
anchors.topMargin: 48
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
cursorShape: Qt.SizeHorCursor
onPressed: {
startMousePos = absoluteMousePos(rightArea)
startWindowPos = Qt.point(mainWindow.x, mainWindow.y)
startWindowSize = Qt.size(mainWindow.width, mainWindow.height)
}
onMouseXChanged: {
var abs = absoluteMousePos(rightArea)
var newWidth = Math.max(mainWindow.minimumWidth, startWindowSize.width + (abs.x - startMousePos.x))
mainWindow.width = newWidth
}
Rectangle {
anchors.fill: parent
color: "red"
}
}
MouseArea {
id: buttonArea
y: parent.height - buttonArea.height
height: 5
anchors.leftMargin: 5
anchors.left: parent.left
anchors.rightMargin: 5
anchors.right: parent.right
anchors.bottom: parent.bottom
cursorShape: Qt.SizeVerCursor
onPressed: {
startMousePos = absoluteMousePos(buttonArea)
startWindowPos = Qt.point(mainWindow.x, mainWindow.y)
startWindowSize = Qt.size(mainWindow.width, mainWindow.height)
}
onMouseYChanged: {
var abs = absoluteMousePos(buttonArea)
var newHeight = Math.max(mainWindow.minimumHeight, startWindowSize.height + (abs.y - startMousePos.y))
mainWindow.height = newHeight
}
Rectangle {
anchors.fill: parent
color: "red"
}
}
}