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

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

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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

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 
               }

   }

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

As expected, you're the beast!

Thank you very much!