QML Unable to change position of item while being dragged by MouseArea - c++

Question

Context
I am trying to create a tiled map using QML without using QtLocation. I am trying to design the application such that only essential tiles are being loaded. Here is the strategy I have come up with.
Each tile is 256x256 px. The tiles are placed in a Grid class with nested Repeaters. The xOffset determines the tiles that should be loaded into the grid.
Grid{
id: mapgrid
rows: 6
columns: 9
spacing: 1
Repeater{
model: 6
Repeater{
model: 9
property int outerIndex: index
Tile{
imgsrc: "image://provider/" + maprect.zoomLevel + '/' + (index + maprect.xOffset) + '/' + (outerIndex+maprect.yOffset)
}
}
}
}
When the grid is shifted by 256 pixels left, a new set of tiles should be loaded in. This can be achieved by changing the offset values. I can then shift the grid by 256 pixels again so its back in the view.
onXChanged: {
if(x <= -512){
maprect.x = -256;
maprect.xOffset++;
}
}
Problem
The movement of my grid is controlled by a MouseArea with drag.target set to it. It appears that the MouseArea controls the coordinates until the mouse is released. Here is a simple example:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Text{
z:1
text: "X: " + rect.x
}
MouseArea{
id:marea
anchors.fill: rect
drag.target: rect
}
Rectangle{
id: rect
height: 256
width: 256
color: "red"
onXChanged: {
if(x > 100){
x = 0;
}
}
}
}
If you move the box right past x > 100, indeed x=0 is set. However that is because the actual value of the box is still 100+. If you move the box left again (x<100) without releasing, you'll find that the box is back at its actual x value. Sorry if it sounds confusing, its easier to understand to see it for yourself.
What I am looking for is an alternative way to load tiles or a fix to the MouseArea problem such that I can actually change the position of an item while its being dragged by the MouseArea.
Also, would it be possible for me to implement a different version of MouseArea so I can deal with this problem at a lower abstraction?
Update
I have been able to achieve the effect I wanted to a certain degree. It appears to be working fine but QML is detecting a binding loop.
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
id: wind
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id: wrapper
height: wind.height
width: wind.width
MouseArea{
id:marea
anchors.fill: wrapper
//drag.target: rect
property int initialX: 0
property int iniMouseX;
onEntered: {
initialX = rect.x
iniMouseX = mouseX
console.log ("set")
}
}
Rectangle{
id: rect
height: 256
width: 256
border.color: "green"
x: marea.initialX + (marea.mouseX - marea.iniMouseX)
color: "red"
onXChanged: {
if(rect.x > 200){
marea.initialX -= 200;
}
}
}
}
}
https://imgur.com/a/zmu5eiO

Answer 1

The problem with the updated code is initialX bind with rect.x, so if rect.x be updated it will invoke onXChanged, and if rect.x > 200 will update initialX again, this will become an infinite loop.
So to fix it here is the solution, make the event goes like flow :
Window {
id: wind
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id: wrapper
height: wind.height
width: wind.width
MouseArea{
id:marea
anchors.fill: wrapper
//drag.target: rect
property int initialX: 0
property int iniMouseX;
onEntered: {
initialX = rect.x
iniMouseX = mouseX
console.log ("set")
}
onMouseXChanged: {
if(rect.x > 200){
marea.initialX -= 200;
}
rect.x = marea.initialX + (marea.mouseX - marea.iniMouseX)
}
}
Rectangle{
id: rect
height: 256
width: 256
border.color: "green"
color: "red"
}
}
}