Forcing Blend to Update when Source Changes

Phrogz

I have a series of small images blended over a larger one. The small images may show or hide based on property changes in the app:

Image {
    source: 'images/map'
    anchors.fill: parent
    Item {
        id: highlights
        Image { source:'images/hi1'; x:100; y:200; visible:route.startLoc==1 || route.endLoc==1 }
        Image { source:'images/hi2'; x:150; y:100; visible:route.startLoc==2 || route.endLoc==2 }
        /* 13 images total */
        visible: false
    }
    Blend { anchors.fill:parent; source:parent; foregroundSource:highlights; mode:'hardLight'; opacity:0.5 }
}

If I turn off the blend (and make highlights visible), everything works as expected: when the startLoc or endLoc properties change, the correct images show and hide. However, with the Blend in place, the behavior is erratic. Some of the images will turn off, but newly-visible images will not appear.

I've tried using cached:true on the Blend, with no effect. I've tried adding tweaks to the Blend properties to make it update, with no effect. (I've ensured that the connection is working via console.log, and even tried leaving the Blend in a different blend mode.)

    Blend {
        Component.onCompleted: {
            route.startLocChanged.connect(function(){ mode='normal'; mode='hardLight' });
            route.endLocChanged.connect(function(){ mode='normal'; mode='hardLight' });
        }
    }

How can I force Blend to notice when the Item changes due to images changing visibility?

Phrogz

I solved the problem by changing the property controlling the image code from using visibile to using opacity. I'm not sure why visible was not properly dirtying the Item, but opacity works fine.

So, instead of this…

Image { source:'images/hi1'; x:100; y:200; visible:route.startLoc==1 || route.endLoc==1 }

…I'm using this:

Image { source:'images/hi1'; x:100; y:200; opacity:route.startLoc==1 || route.endLoc==1 ? 1 : 0 }