mouse position on repeater items

[joko]

Hi Qt Masters,

Here i am again consulting my current issue.

I am currently implementing a level indicator, which is working perfectly already using the onclicked method.
However, I wanted to add a drag capability, wherein the level will increase or decrease when dragged to the right or left, respectively.

Btw, i am using a repeater to populate the images, here's the code:



Repeater
{
property int level: -1
id:levelRepeater
model: 15

Image {
source: "/images/bar.png"
id: levelImg

MouseArea {
id: levelArea
anchors.fill: parent
onClicked: { level = index }
}
}
}


Now, I wanted to implement the drag capability. I initially thought of using the mouseX position since this is positioned horizontally.
I noticed that there were 25 pixels in every image, it has x values from 0-24.



onMouseXChanged: { if (mouseX % 25 == 0) { level++ } } //this is only for dragging to the right


Then I noticed that when dragging to the left, the mouseX value decreases from the initial value to 0 then to negative values once it reaches to another mouse area on the left of the current index.

Maybe, you already encountered this kind if issue please advise, any help is greatly appreciated.

TIA.

[wysota]

So what is the question? Are you asking whether we saw anything like that or rather how to implement the drag properly?

[joko]

So what is the question? Are you asking whether we saw anything like that or rather how to implement the drag properly?

Sorry, I forgot to include my questions. :)

I need help on implementing drag properly in this scenario wherein images are populated through repeater.

I modified the MouseArea code:



MouseArea
{
id: levelArea
anchors.fill: parent
hoverEnabled: true
property real pressX: 0
readonly property alias lvlPressed: levelArea.pressed

onClicked: { level = index }

onMouseXChanged: {
if (lvlPressed) {
if (mouseX < pressX && mouseX % 25 == 0) {
volume--
} else {
if (mouseX % 25 == 0) {
volume++
}
}
}
}

onPressed: {
level = index
pressX = mouseX
}

}


Please advise how to improve this code. Thanks.

OT: Is there a way to override the clip property of the parent, in the child element?

[wysota]

I think this approach is completely wrong and thus I don't see a way to improve this code. In my opinion you should have a single MouseArea element for the whole area of the repeater and calculate the level based on where the user clicks/drags.

Something along the lines of:

import QtQuick 2.0

Item {
id: root
width: 800
height: 200

property int currentLevel: 0

Row {
id: row
spacing: 5
anchors.fill:parent
Repeater {
model: 10
Rectangle {
width: 50
height: 200
color: currentLevel >= index ? "red" : "transparent"
border { color: "black"; width: 1 }
}
}
}
MouseArea {
anchors.fill: row
function xToIndex(xPos) { return xPos/55 }
onClicked: {
root.currentLevel = xToIndex(mouse.x)
}
onPositionChanged: root.currentLevel = xToIndex(mouse.x)
}
}
}
}
MouseArea {
anchors.fill: row
function xToIndex(xPos) { return xPos/55 }
onClicked: {
root.currentLevel = xToIndex(mouse.x)
}
onPositionChanged: root.currentLevel = xToIndex(mouse.x)
}
}

[joko]

I think this approach is completely wrong and thus I don't see a way to improve this code. In my opinion you should have a single MouseArea element for the whole area of the repeater and calculate the level based on where the user clicks/drags.

Something along the lines of:

import QtQuick 2.0

Item {
id: root
width: 800
height: 200

property int currentLevel: 0

Row {
id: row
spacing: 5
anchors.fill:parent
Repeater {
model: 10
Rectangle {
width: 50
height: 200
color: currentLevel >= index ? "red" : "transparent"
border { color: "black"; width: 1 }
}
}
}
MouseArea {
anchors.fill: row
function xToIndex(xPos) { return xPos/55 }
onClicked: {
root.currentLevel = xToIndex(mouse.x)
}
onPositionChanged: root.currentLevel = xToIndex(mouse.x)
}
}
}

As expected, you're the beast!

Thank you very much!