DrewNaylor
For now maybe I should give up on trying to integrate TilesGrid and just have tile positions be a config file thing with a custom grid.
TilesGrid is just too hard for me right now.
Here's what I can try: https://stackoverflow.com/a/61804867
I'll have to have a spacing property that's added to the x and y values for when tiles are added if the column and row are greater than 0 (zero). Making sure tiles are moved to the next available space will also be necessary if they're resized, as will moving tiles when unpinning them. The row amount will need to be grabbed from the highest value in the tiles layout config file also, I'm thinking what we can do is there will be a property that's increased if the current tile we're looking at in the config file has a larger row value than that temporary "total rows" variable, and we'll send it back to the main file along with all the tiles in the dict so it can be processed right then, just like I do with the messagebox regarding deprecated tile stuff.
Will need to have the file licensed under the CC BY-SA 3.0 because it's pretty much what I need and I don't foresee it being basically entirely changed like I usually do.
This won't include drag-and-drop support yet, but it's better than nothing.
This answer might help with drag-and-drop when I'm ready to do that, but I'll need to re-add support for getting indexes from the simple grid unless I can just get the children from it instead: https://stackoverflow.com/a/13970199
Not everything will be used from it though, and I need to re-implement the collision code in a way that doesn't cause a lot of interference and is simple.
Here's the answer for archival, it was posted by meolic and is under the CC BY-SA 3.0: "Here, I give the working code. I have added additional hiearchy and put Rectangle into Item. Moreover, I had to reparent Rectangle. There are many similar solutions available, e.g. here.
In the given solution, there is no problem with function indexAt() and thus explicit calculation of gridArea.index is not needed anymore.
I will appreciate any comment on this solution and why these changes are so important. I still think that the original solution is intuitive and I do not understand why it is not working.
import QtQuick 1.1
GridView {
id: mainGrid
cellWidth: 165; cellHeight: 95
width: 5*cellWidth; height: 4*cellHeight
model: myModel
delegate: myButton
ListModel {
id: myModel
function createModel() {
for (var i=1; i<=20; i++) {
myModel.append({"display": i, "uid": i})
}
}
Component.onCompleted: {createModel()}
}
Component {
id: myButton
Item {
id: item
width: mainGrid.cellWidth-5; height: mainGrid.cellHeight-5;
Rectangle {
id: box
parent: mainGrid
x: item.x; y: item.y;
width: item.width; height: item.height;
border.width: 1
property int uid: (index >= 0) ? myModel.get(index).uid : -1
Text {
anchors.centerIn: parent
text: display
font.pixelSize: 48
}
states: [
State {
name: "active"; when: gridArea.activeId == box.uid
PropertyChanges {target: box; x: gridArea.mouseX-80; y: gridArea.mouseY-45; z: 10}
}
]
}
}
}
MouseArea {
id: gridArea
anchors.fill: parent
hoverEnabled: true
preventStealing : true
property int index: mainGrid.indexAt(mouseX, mouseY) //item underneath cursor
property int activeId: -1 //uid of active item
property int activeIndex //current position of active item
onPressAndHold: {
activeId = mainGrid.model.get(activeIndex=index).uid
}
onReleased: {
activeId = -1
}
onPositionChanged: {
if (activeId != -1 && index != -1 && index != activeIndex) {
mainGrid.model.move(activeIndex, activeIndex = index, 1)
}
}
}
}
"
Also, in 2019, Valentin Radu posted this comment to another answer posted by meolic I'll copy after their comment:
"The code at 'onPositionChanged' doesn't really work properly, as you also need to swap the previous/next position relative to new position with old position. This way, vertical swaps work as well. The corrected code should be onPositionChanged: { if (activeId != -1 && index != -1 && index != activeIndex) { var ac = activeIndex; mainGrid.model.move(activeIndex, activeIndex = index, 1); if (ac < activeIndex) { mainGrid.model.move(activeIndex - 1, ac, 1); } else { mainGrid.model.move(activeIndex + 1, ac, 1); }}}"
And here's meolic's other answer, also under CC BY-SA 3.0 (link: https://stackoverflow.com/a/13975952 ) : "Here is another answer using drag property of MouseArea. Its strange, but this solution has problems with function indexAt(). Moreover, it seems not to be possible to add nice slow motion effects using Behavior on x and y.
Any comment on this solution is also very welcome.
import QtQuick 1.1
GridView {
id: mainGrid
cellWidth: 165; cellHeight: 95
width: 5*cellWidth; height: 4*cellHeight
model: myModel
delegate: myButton
ListModel {
id: myModel
function createModel() {
for (var i=1; i<=20; i++) {
myModel.append({"display": i})
}
}
Component.onCompleted: {createModel()}
}
Component {
id: myButton
Rectangle {
id: item
z: 1
width: mainGrid.cellWidth-5; height: mainGrid.cellHeight-5;
border.width: 1
Text {
anchors.centerIn: parent
text: display
font.pixelSize: 48
}
}
}
MouseArea {
id: gridArea
anchors.fill: parent
hoverEnabled: true
drag.axis: Drag.XandYAxis
//property int index: mainGrid.indexAt(mouseX,mouseY) //NOT WORKING RELIABLE!
property int mX: (mouseX < 0) ? 0 : ((mouseX < mainGrid.width - mainGrid.cellWidth) ? mouseX : mainGrid.width - mainGrid.cellWidth)
property int mY: (mouseY < 0) ? 0 : ((mouseY < mainGrid.height - mainGrid.cellHeight) ? mouseY : mainGrid.height - mainGrid.cellHeight)
property int index: parseInt(mX/mainGrid.cellWidth) + 5*parseInt(mY/mainGrid.cellHeight) //item underneath cursor
property int activeIndex
onPressAndHold: {
currentIndex = index
currentItem.z = 10
gridArea.drag.target = currentItem
activeIndex = index
}
onReleased: {
currentItem.x = mainGrid.cellWidth * (index % 5)
currentItem.y = mainGrid.cellHeight * parseInt(index / 5)
currentItem.z = 1
currentIndex = -1
gridArea.drag.target = null
}
onPositionChanged: {
if (drag.active && index !== -1 && index !== activeIndex) {
mainGrid.model.move(activeIndex, activeIndex = index, 1)
}
}
}
}
"