PropertyChanges on repeater elements

[joko]

Hi,

I'm trying to change the source of the repeater elements with condition included however the condition wasn't included after the changes

Row {
   id: level
   Repeater {
     id:levelRepeater
     model: 15
 
     Image {
       id: levelImg
       source: levelArea.containsMouse ? "../images/mdpi/level-off-over-vertical.png" : "../images/mdpi/level-off-vertical.png"
       fillMode: Image.PreserveAspectFit
 
       MouseArea {
         id: levelArea
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
           if (volume === -1 || index > volume) {
              volume = index
              for(var i = 0; i <= index; ++i) {
                 level.children[i].source = levelArea.containsMouse ? "../images/mdpi/level-on-over-vertical.png" : "../images/mdpi/level-on-vertical.png"
              }
           } else if (index < volume) {
              for(var y = volume; y > index; --y) {
                  level.children[y].source = levelArea.containsMouse ? "../images/mdpi/level-off-over-vertical.png" : "../images/mdpi/level-off-vertical.png"
              }
              volume = index
           }
        }
      }
    }
  }
}

Row {
   id: level
   Repeater {
     id:levelRepeater
     model: 15

     Image {
       id: levelImg
       source: levelArea.containsMouse ? "../images/mdpi/level-off-over-vertical.png" : "../images/mdpi/level-off-vertical.png"
       fillMode: Image.PreserveAspectFit

       MouseArea {
         id: levelArea
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
           if (volume === -1 || index > volume) {
              volume = index
              for(var i = 0; i <= index; ++i) {
                 level.children[i].source = levelArea.containsMouse ? "../images/mdpi/level-on-over-vertical.png" : "../images/mdpi/level-on-vertical.png"
              }
           } else if (index < volume) {
              for(var y = volume; y > index; --y) {
                  level.children[y].source = levelArea.containsMouse ? "../images/mdpi/level-off-over-vertical.png" : "../images/mdpi/level-off-vertical.png"
              }
              volume = index
           }
        }
      }
    }
  }
}

To copy to clipboard, switch view to plain text mode 

I also tried using states and PropertyChanges, however i am having problem assigning the target of the repeater items, any idea how?

I can't find any related issue in the forum and on the net.
Any help is greatly appreciated.

[anda_skoa]

Inside the mouse area's on clicked the condition "containsMouse" will always be true, because that is necessary to get the click.

Did you want to create a new binding for source?

The over all condition doesn't look that complicated, you could try to make the initial source binding already include the check for volume.

It look like the filename has "over" in it when the mouse is hovering the image, right?
And it has "on" when the volume is greater or equal the current index, otherwise "off"?

Something like

readonly property over = levelArea.containsMouse ? "over-" : ""
readonly propery onOff = index <= volume = "on-" : "off-"
source: "../images/mdpi/level-" + onOff + over + "vertical.png"

readonly property over = levelArea.containsMouse ? "over-" : ""
readonly propery onOff = index <= volume = "on-" : "off-"
source: "../images/mdpi/level-" + onOff + over + "vertical.png"

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[joko]

Thank you anda_skoa for the response, it is greatly appreciated

However I resolved my issue by using states. This time I included the states in every repeater elements unlike before where i placed the states on row element.
Then changed the state of every affected element in mousearea onclicked method.

Cheers!

[anda_skoa]

Even with states it should be easier to change the state value with a binding instead of having to do imperative programming.

Cheers,
_

[joko]

Thank you for your response I was able to implement the binding of source and eliminates several lines of code especially those states!